Como criar um app de carteira de criptomoedas (Android e iOS)

Recentemente escrevi um artigo explicando tenicamente como as carteiras de criptomoedas funcionam, que você pode ler aqui.

No tutorial de hoje, eu vou ensinar como você pode criar o seu próprio app mobile de carteira de criptomoedas, ou seja, programar um aplicativo Android e iOS que conecta um usuário à blockchain e dapps web3 em uma blockchain. Faremos isso utilizando a linguagem JavaScript e o framework React Native com o objetivo de termos ao final dele uma aplicação console que permita as operações básicas. Como blockchain, optei neste tutorial pela rede da Solana, mas você pode facilmente adaptar para outras realidades como blockchains ETH/EVM (com ajuda deste tutorial) e rede Bitcoin (com esta ajuda).

Este não é o melhor tutorial para quem NUNCA desenvolveu um app com React Native na sua vida antes. Se esse for seu caso, comece por este outro tutorial.

Se preferir, você pode assistir ao vídeo abaixo ao invés de ler.

Vamos lá!

#1 – Por que criar sua própria carteira cripto?

A primeira coisa que deve vir na sua mente é: por que diabos eu iria querer criar a minha própria carteira de criptomoedas? Falo sobre isso no vídeo abaixo e também no texto a seguir.

Essa dúvida é super normal já que existem no mercado diversas opções gratuitas e consolidadas, mas assim como ocorreu (e ainda ocorre, mas em menor intensidade) com os navegadores de Internet entre o final da década de 90 e início dos anos 2000, estamos no início de uma nova revolução tecnológica e com isso na etapa de surgimento das grandes aplicações de uso cotidiano nesse contexto. Não há ainda uma hegemonia de software em diversos nichos deste mercado e mesmo a MetaMask sendo a líder no setor de carteiras cripto, estamos falando de menos de 30MM de usuários mundialmente em um mercado que tem potencial para os bilhões e ela nem sequer suporta a rede Solana na data que escrevo este tutorial. E isso não vale apenas para carteiras cripto, mas para diversos nichos na web3.

Não apenas isso, mas aprender como criar sua própria carteira de criptomoedas vai te ajudar também a pensar em novas e interessantes maneiras de interagir com a blockchain ao mesmo tempo que aprofunda seu entendimentos sobre este tipo de aplicativo pois apesar do nome, talvez você já tenha ouvido falar que as carteiras não são exatamente “carteiras”, certo? E acho que esse é o ponto principal deste tutorial, te ajudar a entender como esses softwares realmente funcionam, independente se você vier a criar um app como Trust Wallet ou qualquer outro.

Dito isso, nossa primeira missão é entender, tecnicamente, como funciona uma carteira de criptomoedas.

#2 – Como funciona uma carteira de criptomoedas?

Podemos resumir basicamente o funcionamento de uma carteira de criptomoedas como:

• guardar as chaves de uma conta da blokchain;
• consultar os ativos (tokens) desta conta;
• fazer transações nesta conta usando as chaves;

Quaisquer outras funcionalidades além dessas são secundárias e mudam de aplicação para aplicação como por exemplo a criação de novas contas, agenda de contatos frequentes, histórico de atividades, alertas, compra de criptomoedas e muito mais. Aliás, pensando em modelo de negócios, é justamente nessas funcionalidades adicionais é que você pode criar um negócio lucrativo e uma aplicação interessante.

Mas voltando ao que nos interessa, todas essas funcionalidades exigem que o app se comunique com ao menos um nó de uma blockchain, para poder consultar e escrever no livro-razão. Assim, em última instância, uma carteira de criptomoedas nada mais é do que um client de blockchain e é justamente isso que faremos neste tutorial, começando a seguir.

#3 – Configurando o Projeto

Os protocolos de comunicação com a blockchain podem ser utilizados com quaisquer tecnologias que permitam comunicação pela rede, o que inclui os dispositivos móveis com Android e iOS. Para o desenvolvimento de um aplicativo que atenda dispositivos de ambos os sistemas é interessante utilizar alguma tecnologia multiplataforma, a fim de ganharmos em produtividade, por isso usarei aqui React Native.

React Native utiliza a linguagem de programação JavaScript, uma das mais versáteis da atualidade, que requer a tecnologia Node.js para funcionar nos mais diversos ambientes. Caso você não possua o Node.js instalado na sua máquina, o vídeo abaixo ensina a instalar.

Com o Node.js instalado, você pode criar um novo projeto React Native facilmente no seu computador utilizando o framework Expo. Para isso, abra o terminal de linha de comando do seu sistema operacional (cmd no Windows), navegue até a pasta onde guarda seus projetos e digite o seguinte comando para inicializar o seu projeto.

Como template, escolha Blank, opcionalmente usando TypeScript caso tenha experiência com a linguagem (eu vou usar JavaScript, mas ensino TypeScript aqui).

Com o projeto inicializado, vamos instalar as dependências que vamos precisar, ainda com o terminal aberto.

O pacote @solana/web3.js é muito utilizado para desenvolvimento de aplicações JavaScript integradas à blockchain Solana e inclusive tem funcionalidades que facilitarão muito a nossa vida quando o assunto é criar uma carteira cripto. Já o base58-js é um pacote de encode/decode que usaremos mais tarde, então deixarei a explicação dele para depois. Enfim, o react-native-get-random-values é um pacote para fornecer alguns recursos nativos do Node.js e que são usados pela lib da Solana, mas que originalmente não existem na plataforma React Native.

Agora vamos criar os estilos que vamos usar no nosso app, ao final do App.js.

Já deixei todos os estilos que vamos precisar criados aqui, mas sinta-se à vontade de mudá-los livremente já que são apenas de caráter “cosmético”.

Agora que temos o setup inicial do projeto finalizado, suba seu simulador ou carregue o app Expo no seu smartphone com o nosso app e apenas teste para ver se o “olá mundo” do Expo está funcionando como deveria.

#4 – Criação de Carteira

Agora vamos começar a construção do nosso app em si. Para simplificar, nosso app vai ter apenas uma tela, que alternará as Views conforme o estado autenticado ou não. Não vou me preocupar aqui em criar um layout bacana, focando mais nas funcionalidades, mas se quiser evoluir o projeto depois, recomendo o uso de React Native Elements, uma biblioteca de UI bem bacana. Outra alternativa é a Paper, mais minimalista.

Logo que o usuário abrir a tela inicial do app, ele deve ser apresentado a duas possibilidades: criar uma nova carteira cripto ou importar uma já existente. Vamos começar criando a interface gráfica e depois programamos as funcionalidades em si.

No seu App.js, comece com as importações do arquivo. Já vou importar tudo que vamos precisar, inclusive um truque que explico logo adiante.

Na primeira linha eu estou importando a classe Buffer e guardando em uma propriedade global. Isso é necessário porque as funções de criptografia da blockchain usando a classe Buffer globalmente e ela não é importada desta forma por padrão no React Native, causando erro caso não adicione esta linha extra. Os demais imports incluem os componentes que vamos precisar e o useState para guardar os estados dos formulários.

Falando em state, repare que já defini também um state para guardar o objeto que representa a nossa carteira cripto. Uma carteira cripto nada mais é do que um par de chaves e é isso que esse state irá guardar. É também a partir dele que saberemos se o usuário já está logado ou não.

Nós criamos todos os estilos na etapa anterior deste tutorial, então agora podemos criar o JSX dessa tela inicial, com apenas dois botões e um input, usando os estilos mencionados.

Aqui nós temos uma view agindo como um container geral e logo no início dela o título do app. Depois definimos uma View para englobar o formulário inicial, onde uso do state de wallet para saber se o usuário já está ou não autenticado (fará mais sentido quando programarmos a funcionalidade e consequente alteração do state).

Se o usuário já estiver autenticado nós usamos um Text para exibir o endereço da chave pública da carteira dele. Caso contrário, exibimos os dois botões e o input de recuperação de carteira, sendo este último explicado em etapa futura do tutorial.

Focando na primeira parte do formulário, temos apenas um botão (TouchableOpacity, para termos mais opções de customização) que serve para acionar a funcionalidade de criação de carteira ao ser tocado. Abaixo a aparência que essa tela deve ter no simulador.

Antes de programar o clique no botão de fato, vamos criar o módulo de interação com a blockchain, onde vamos concentrar todas as funções externas ao app. Vou chamar ele de WalletService.js e dentro vou colocar a função de criação de carteira, como abaixo.

Nos imports eu já me adiantei e mandei importar TUDO que vamos precisar ao longo do desenvolvimento deste módulo. O primeiro import diz respeito a um pré-requisito para as funções de criptografia e evita um erro que teríamos mais à frente. O segundo import é para o desenvolvimento das funcionalidades de blockchain em si, enquanto que o terceiro e último serve para termos acesso a funções utilitárias que facilitarão para o usuário o uso do seu par de chaves.

Na sequência eu declarei uma variável que vai guardar a carteira do usuário, tenha sido ela criada ou recuperada/importada, não importa.

A função em si poderia ser resumida em apenas uma linha, que inicializa um novo Keypair usando o construtor da referida classe. Uma carteira cripto nada mais é do que um par de chaves, lembra? A classe Keypair cria esse par pra gente e guarda nas propriedades publicKey e secretKey, sendo a chave pública e privada, respectivamente. A chave pública é o endereço da sua carteira, usado para receber fundos, enquanto que a chave privada é usada para assinar transações, ou seja, enviar fundos.

As duas linhas seguintes servem apenas para decodificarmos as chaves pois elas originalmente são binárias, o que não é nada prático. Eu guardo o par de chaves decodificadas para facilitar a conferência, você pode por exemplo, para fins de teste, imprimir no console e ver se está gerando as chaves corretamente. Note inclusive que esta etapa acontece offchain, ou seja, não estamos conectados ainda na blockchain, isso porque a geração de chaves é um algoritmo puramente matemático, não exige qualquer integração neste momento e a sua carteira só vai passar a valer de fato na blockchain quando enviar ou receber fundos. Para receber fundos de teste, recomendo o faucet oficial da Solana DevNet.

Agora que você programou a função createWallet no WalletService.js, vamos criar a função que vai ser disparada no onPress do botão do app, lá de volta no App.js.

Certifique-se de importar a chamada do createWallet a partir do WalletService.js no topo do App.js e também de incluir o btnCreateClick no onPress do respectivo botão. Assim, ao clicar no botão o par de chaves é criado e é armazenado no state de carteira, para usarmos ao longo do ciclo de vida do app. Repare que automaticamente quando você testar isso, vai mudar a tela inicial para ocultar os botões de autenticação e exibirá o endereço público da carteira recém criada, o que mostra que nossa funcionalidade está como deveria.

Lembre-se de tomar nota da chave pública e privada da sua carteira, isso será útil mais tarde na etapa 2 do tutorial que sai em breve aqui no blog.