Recentemente escrevi a primeira parte de um tutorial ensinando a programar um protótipo de app mobile de carteira de criptomoedas para Android e iOS, usando React Native, Expo, JavaScript e a blockchain da Solana. Neste tutorial vamos concluir o projeto adicionando as principais funcionalidades que se espera em um app desses como recuperação/importação de carteira existente, saldo e transferência de fundos.
Vamos lá!
#1 – Recuperação de Carteira
Como vimos na etapa 1, uma carteira de criptomoedas nada mais é do que um par de chaves. Com a chave pública você consegue receber fundos, enquanto que com a chave privada você consegue enviar fundos, mas não apenas isso, você consegue provar a propriedade da sua carteira também. Sendo assim, para desenvolvermos a funcionalidade de recuperação de uma carteira já existente (criada no nosso app ou em qualquer outro software, como Phantom e Brave Wallet) o usuário precisa ter em mãos a chave privada da carteira dele. Certifique-se de estar com a sua antes de continuarmos.
Vamos começar indo no nosso WalletService.js e adicionando nele a função de recuperação, como abaixo, que explico na sequência.
|
1 2 3 4 5 6 7 8 9 |
export function recoverWallet(secretKey) { const binarySecretKey = base58_to_binary(secretKey); myWallet = Keypair.fromSecretKey(binarySecretKey); myWallet.publicKeyDecoded = myWallet.publicKey.toBase58(); myWallet.secretKeyDecoded = secretKey; return myWallet; } |
O usuário terá em mãos a chave privada dele em texto, certo? Então a primeira coisa que precisamos é convertê-la para seu formato original: binário, o que fazemos com a função base58_to_binary importado da biblioteca base58-js. Com a chave em binário, podemos usar a função estática fromSecretKey da classe Keypair para obter a carteira de volta. Por questões de compatibilidade, guardamos as versões decodificadas do par de chaves no objeto myWallet, que será usado logo mais.
Note que as funcionalidades ligadas ao par de chaves continuam sendo puramente matemáticas, sem qualquer envolvimento da blockchain. Quando informamos a chave privada, através de derivações matemáticas o algoritmo é capaz e chegar novamente na chave pública, mas o contrário é impossível, legal, não? Caso uma chave privada errada seja informada, o algoritmo dá um erro caso ela não derive em nenhuma chave pública (seja inválida) ou irá derivar na carteira errada.
Agora, voltando ao App.js, precisamos adicionar um novo state para guardar a chave privada do input de recuperação de carteira.
|
1 2 3 |
const [privateKey, setPrivateKey] = useState(""); |
Precisamos de uma função que leia este state, recupere a carteira e guarde-a no outro state que já tínhamos, como abaixo.
|
1 2 3 4 5 6 |
function btnRecoverClick() { const kp = recoverWallet(privateKey); setWallet(kp); } |
E por fim, precisamos ajustar o JSX do formulário de recuperação, adicionando no TextInput o alue e o onChange adequados, bem como o onPress no botão.
|
1 2 3 4 5 6 7 8 9 10 |
<Text> Ou informe sua PK abaixo para recuperar:</Text> <TextInput value={privateKey} onChangeText={txt => setPrivateKey(txt)} style={styles.input} /> <TouchableOpacity onPress={btnRecoverClick} style={styles.button}> <Text style={styles.buttonText}>Recuperar Carteira</Text> </TouchableOpacity> |
Agora você pode rodar novamente seu app no simulador e testar essa segunda funcionalidade, tentando recuperar uma carteira que você tenha gerado antes, seja nesse mesmo app ou qualquer outro. Aliás, esse é um excelente teste: crie uma carteira cripto em outro software com suporte a rede Solana, como a Brave Wallet, e tente recuperar em nosso app para ver se funciona (deve funcionar).
Opcionalmente (eu não vou fazer, mas você pode) você pode salvar a chave privada da carteira localmente, mas desde que de maneira criptografada. para não criar uma brecha de segurança guardando a chave de criptografia junto do app, peça ao usuário que crie uma senha de acesso ao app. Assim, ao se autenticar com a senha, você pode descriptografar a secret key dele e com isso recuperar a carteira dele sem que o usuário tenha de informar sempre a secret key inteira ao entrar no app. Aliás, é assim que os softwares de carteira profissionais fazem.
#2 – Consulta de Saldo
Finalizadas essas duas primeiras funcionalidades, de criação e recuperação de carteira, vamos para a terceira. Assim que o usuário cria ou recupera a sua conta, a primeira coisa que ele deve ver é o endereço público da sua carteira. E a segunda com certeza é o seu saldo, uma das principais funcionalidades que toda carteira deve possuir. No entanto, diferente das funcionalidades que criamos até agora, a consulta de saldo é onchain, ou seja, ela exige uma comunicação com a rede já que o saldo não fica salvo na carteira em si, mas sempre na blockchain.
Sendo assim, vamos ao nosso WalletService.js e lá vamos criar a conexão com a blockchain e uma função que usa esta conexão, para pegar informação do saldo.
|
1 2 3 4 5 6 7 8 9 10 11 |
const connection = new Connection(clusterApiUrl("devnet"), "confirmed"); export async function getBalance() { const balance = await connection.getBalance(new PublicKey(myWallet.publicKey)); return { lamports: balance, sol: balance / LAMPORTS_PER_SOL } } |
A primeira linha faz a conexão com a blockchain, sendo que ela espera dois parâmetros: o endereço de um nó, que aqui optei por usar a rede devnet, que serve justamente para propósitos de desenvolvimento, e o status dos blocos que iremos considerar na nossa conexão.
Com a conexão estabelecida sem erros, a função getBalance é chamada passando um objeto PublicKey que alimentamos com a nossa publicKey binária. O resultado é o saldo da conta em lamports, uma unidade de medida da Solana que representa a menor fração de um SOL. Internamente, na blockchain, todos os valores e cálculos são feitos em cima de lamports, mas na interface, para o usuário, é mais fácil trabalhar com SOL, por isso a nossa função retorna as duas unidades de medida.
Agora vamos voltar ao App.js, vamos criar uma função refreshBalance e vamos chamar ela logo após a recuperação da conta.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const [balance, setBalance] = useState("0"); async function refreshBalance() { const balance = await getBalance(); setBalance(`${balance.sol}`); } function btnRecoverClick() { const kp = recoverWallet(privateKey); setWallet(kp); refreshBalance(); } |
Assim, quando recuperarmos uma carteira, automaticamente já teremos a informação do saldo no state apropriado, que deve ser renderizado logo abaixo do endereço público da carteira, como abaixo.
|
1 2 3 4 5 6 7 8 9 |
<View style={styles.p}> <Text> {wallet.publicKeyDecoded}</Text> </View> <View style={styles.p}> <Text style={styles.bold}> Saldo: </Text> <Text> {balance} SOL</Text> </View> |
Para conseguir fazer esse teste apropriadamente você vai precisar ter saldo na carteira que vai testar, algo que você pode obter facilmente para rede devnet usando o faucet oficial da Solana. O resultado você vê na imagem abaixo.
Agora que temos a funcionalidade de saldo funcionando, vamos para a última deste tutorial: transferência.
#3 – Transferência de Fundos
A funcionalidade de transferência de fundos é a mais delicada e também a mais complexa de ser desenvolvida, já que envolve o uso da chave privada para assinar uma transação na blockchain. Vamos começar essa funcionalidade pelo WalletService.js, criando uma função transfer que espera a carteira de destino (to) e a quantia em SOL (amountInSol).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
export async function transfer(to, amountInSol) { const transaction = new Transaction(); const sendSolInstruction = SystemProgram.transfer({ fromPubkey: new PublicKey(myWallet.publicKey), toPubkey: new PublicKey(to), lamports: LAMPORTS_PER_SOL * amountInSol, }); transaction.add(sendSolInstruction); const txHash = await sendAndConfirmTransaction(connection, transaction, [myWallet]); return txHash; } |
Toda transação começa com a instanciação de um objeto transaction e posterior adição das instruções da transação, que no nosso caso é apenas uma. Instruções de transferência podem ser criadas a partir de SystemProgram, pois é uma funcionalidade nativa da blockchain Solana. Essa instrução espera três parâmetros: fromPubkey, que é o endereço de quem está enviando; toPubkey, que é o endereço de quem vai receber e lamports, que é a quantidade de lamports a serem enviados nessa transferência do “from” para o “to”.
Adicionada essa instrução na transação, é hora de usar a função sendAndConfirmTransaction, importada do pacote @solana/web3.js para fazer a assinatura e envio da mesma. Repare que estamos usando a mesma conexão estabelecida anteriormente com a rede devnet da Solana e que o terceiro parâmetro usa a carteira que ficou salva no momento da criação ou recuperação, quando o usuário entrou no app a primeira vez. É obrigatório que essa carteira informada no sendAndConfirmTransaction seja a mesma informada no fromPubkey da instrução da transação ou dará erro.
Como resultado do envio da transação você recebe um hash de transação, que pode ser usado mais tarde para confirmar a veracidade da mesma. Você pode inclusive jogar esse hash no console, para facilitar a sua cópia na hora dos testes.
Agora vamos voltar ao App.js para criar o state que vamos precisar para a transferência. Abaixo eu incluí o endereço de uma carteira minha por padrão e a quantia de 0.001 SOL, mas mude à vontade conforme os dados que forem mais fáceis para você testar.
|
1 2 3 4 5 6 |
const [newTransfer, setNewTransfer] = useState({ to: "84DAeL8XrucYZuNX5m5y8h5tVDUPgQkYVcqGk4F43VGk", value: "0.001" }) |
Depois, crie o formulário JSX em que o usuário irá preencher a carteira de destino e a quantia a ser transferida. O código a seguir deve ir logo abaixo do saldo. Repare como vinculei os values e onChangeTexts ao state que criamos antes, faltando apenas programar o onpress do botão.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<View style={styles.p}> <Text style={styles.bold}> Destino:</Text> <TextInput value={newTransfer.to} keyboardType='ascii-capable' style={styles.input} onChangeText={txt => setNewTransfer({ ...newTransfer, to: txt })} /> </View> <View style={styles.p}> <Text style={styles.bold}> Valor:</Text> <TextInput value={newTransfer.value} keyboardType='decimal-pad' onChangeText={txt => setNewTransfer({ ...newTransfer, value: txt })} style={styles.input} /> </View> <TouchableOpacity onPress={btnTransferClick} style={styles.button}> <Text style={styles.buttonText}>Enviar SOL</Text> </TouchableOpacity> |
O resultado você confere abaixo.
O onPress do botão de transferência não é diferente de outros que já fizemos, apenas pega o state de transferência e passa para a função do WalletService.js
|
1 2 3 4 5 6 7 8 9 10 |
function btnTransferClick() { transfer(newTransfer.to, parseFloat(newTransfer.value)) .then(tx => { Alert.alert(tx); refreshBalance(); }) .catch(err => console.error(err)) } |
O resultado da transferência, em caso de sucesso, é um hash, que eu jogo em um Alert para o usuário saber que a transação terminou e na sequência chamo de novo a função de pegar o saldo, para vermos o mesmo atualizado. Com o hash da transação em mãos você pode ir no explorador de blocos oficial da Solana e conferir os detalhes da transação, como neste exemplo.
E com isso finalizamos mais este tutorial.
Até o próximo!
Olá, tudo bem?
O que você achou deste conteúdo? Conte nos comentários.