WEB3DEV

Cover image for Como Construir um Gerador de Carteira para Solana em React
Adriano P. Araujo
Adriano P. Araujo

Posted on

Como Construir um Gerador de Carteira para Solana em React

Introdução

Neste guia prático, você irá construir uma aplicação básica de carteira com React e Web3 que interagirá com a rede Solana.

Esta aplicação realizará as seguintes operações:

Conectar-se à Rede

Você utilizará a Connection para criar uma conexão com a rede Solana. Existem três opções: mainnet-beta, testnet e devnet.

Neste exemplo, utilizaremos a devnet, pois ela atua como um playground para qualquer pessoa que queira começar a construir com Solana e os tokens não são reais.

Gerar uma Conta

Para interagir com a rede Solana, será necessário criar um Keypair que conterá uma Chave Pública e uma Chave Secreta. A Chave Pública será o seu endereço para quem quiser enviar tokens a você e a Chave Secreta será usada para assinar transações.

Obter o Saldo da Conta Gerada

É possível verificar a qualquer momento o saldo de uma conta, caso você saiba sua chave pública.

Solicitar um Airdrop

A devnet da Solana nos permite solicitar tokens gratuitos para realizar testes enquanto construímos nossas aplicações.

Esses tokens não são reais e você só os verá enquanto estiver conectado à  devnet.

Pré-requisitos:

Para seguir este guia, você precisará do seguinte:

  • NodeJS instalado
  • Expo instalado
  • Algum entendimento básico do React

Configurar o Boilerplate

Preparamos um pequeno repositório de boilerplate para facilitar a construção desta aplicação de carteira.

Ele contém:

  • Um esqueleto básico com os métodos vazios que implementaremos ao longo do tutorial.
  • Um layout para mostrar os dados que obteremos da rede Solana.
  • O pacote @solana/web3.js para se comunicar com a rede Solana.

Estrutura de arquivos:

  • App.js: o arquivo principal do aplicativo e onde você colocará seu código.

  • app.json: este arquivo contém informações sobre o projeto, como nome, plataformas suportadas, ícone, imagens de inicialização, etc.

  • assets: esta pasta conterá as imagens.

  • babel.config.js: este arquivo é usado para estender a configuração do Babel.

  • node_modules: esta pasta contém todas as dependências e pacotes do aplicativo.

  • package.json: este arquivo contém uma lista de dependências e alguns scripts para executar ou construir o aplicativo.

  • yarn.lock: este arquivo será atualizado automaticamente sempre que novas dependências forem adicionadas. Ele contém uma lista das versões exatas para cada dependência.

Primeiro, você precisará clonar o repositório do GitHub:

git clone https://github.com/quiknode-labs/QuickNode-solana-wallet

Enter fullscreen mode Exit fullscreen mode

Uma vez clonado, você precisará instalar as dependências

cd QuickNode-solana-wallet
yarn install
Enter fullscreen mode Exit fullscreen mode

Por fim, execute:

expor web
Enter fullscreen mode Exit fullscreen mode

Nesse ponto você verá isso:

Terminal

Pressione o w no seu Terminal ou Executar no navegador para abrir o app.

Agora que tudo está configurado e o servidor está em execução, é hora de começar a construir o aplicativo de carteira.

Certifique-se de que o Terminal está aberto e o Expo está em execução enquanto continua a seguir este guia.

Conectar-se à Rede

A conexão com a rede Solana é bastante direta; não é necessário se registrar para obter uma conta ou solicitar chaves de API.

Se você abrir o App.js, perceberá que já temos as importações e as funções vazias que você precisa implementar:


import {
Connection,
clusterApiUrl,
...
} from "@solana/web3.js";

Enter fullscreen mode Exit fullscreen mode

A Connection aceita um endpoint  com a URL do fullnode.

Em nosso exemplo, usaremos a devnet, que, como mencionamos antes, é destinada a funcionar como um playground para qualquer pessoa que queira começar a construir na rede Solana, onde os tokens não são reais.

As funções já estão definidas, então tudo que você precisa fazer é implementá-las.

Portanto, procure a função createConnection em seu código e a modifique para se parecer com isso:


const createConnection = () => {

  return new Connection(clusterApiUrl("devnet"));

};

Enter fullscreen mode Exit fullscreen mode

Outras opções válidas para o parâmetro endpoint são:

  • devnet
  • testnet
  • mainnet-beta

Por último, podemos chamar este método e imprimir no console para ver que está conectando à rede:


console.log(createConnection());

Enter fullscreen mode Exit fullscreen mode

Você deve ver algo como isso no console do seu navegador:


Object{

      "_commitment":"undefined",
      "_confirmTransactionInitialTimeout":"undefined",
      "_rpcEndpoint":"https://api.devnet.solana.com",
      "_rpcWsEndpoint":"wss://api.devnet.solana.com/",
      "_rpcClient":{
           "…"
      },
      "_rpcRequest":"createRpcRequest(method",
   "args)",
      "_rpcBatchRequest":"createRpcBatchRequest(requests)",
   "_rpcWebSocket":{
      "…"
   },
   "_rpcWebSocketConnected":false,
   "_rpcWebSocketHeartbeat":null,
   "…"

}

Enter fullscreen mode Exit fullscreen mode

Gerar uma Conta

Para criar uma conta, precisaremos gerar um Keypair que conterá uma Chave Pública e uma Chave Secreta.

Para isso, já temos a importação:


import {
...
Keypair
...
} from "@solana/web3.js";



Enter fullscreen mode Exit fullscreen mode

Procure pela função vazia createAccount em nosso código e implemente-a da seguinte maneira:

 




 const createAccount = () => {
   const keypair = Keypair.generate();
   const initialBalance = 0;
   setAccount({ keypair: keypair, balance: 0 });

 };



Enter fullscreen mode Exit fullscreen mode
  • Linha 1: define a função.
  • Linha 2: define uma variável keypair com o resultado da chamada da função para gerar um Keypair aleatório.
  • Linha 3: define uma variável initialBalance e a configura como 0.
  • Linha 4: define a variável de estado com duas chaves: keypair e balance.

Após salvar, a aplicação deverá recarregar, e você poderá criar novas contas aleatórias sempre que pressionar o botão "Create a new account".

Obter Saldo da Conta

Para obter o saldo de uma conta, você precisará procurar pela função getBalance no código e implementá-la da seguinte maneira:


const getBalance = async (publicKey) => {
const connection = createConnection();


const lamports = await connection.getBalance(publicKey).catch((err) => {
   console.error(`Error: ${err}`);
 });

  return lamports / LAMPORTS_PER_SOL;

 };



Enter fullscreen mode Exit fullscreen mode
  • Linha 1: a função recebe a chave pública (publicKey) como parâmetro.
  • Linha 2: dfine uma variável de conexão (connection) com o resultado da chamada da função createConnection.
  • Linha 4: define uma variável lamports com o resultado da chamada da função getBalance da conexão que definimos anteriormente.
  • Linha 8: em vez de retornar o valor em lamports (1000000000), dividimos pelo número de lamports em um SOL para retornar um valor mais amigável: 1 SOL.

💡 Dica

  Um lamport é a unidade mínima na rede Solana: 1 SOL = 1 bilhão de lamports.

Solicitar Airdrop

Como mencionamos antes, na devnet, os tokens não são reais. A rede Solana nos permite solicitar alguns tokens para podermos realizar testes enquanto construímos nossas aplicações.

A função requestAirdrop do Solana Web3 aceita dois parâmetros:

  • to: chave Pública da conta

  • lamports: quantidade de lamports

Para isso, precisaremos implementar a função vazia requestAirdrop em nosso código da seguinte maneira:


   const requestAirdrop = async (publicKey) => {

    setRequestAirdropButton({ text: BUTTON_TEXT_LOADING, loading: true });
    const connection = createConnection();


    const airdropSignature = await connection.requestAirdrop(
      publicKey,
      LAMPORTS_PER_SOL
    );


    const signature = await connection.confirmTransaction(airdropSignature);
    const newBalance = await getBalance(publicKey);


    setAccount({ ...account, balance: newBalance });

    setRequestAirdropButton({ text: BUTTON_TEXT, loading: false });

  };

Enter fullscreen mode Exit fullscreen mode
  • Linha 1: A função recebe a chave pública como parâmetro.

  • Linha 2: Define o botão para o estado de carregamento.

  • Linha 3: Define uma variável de conexão com o resultado da chamada da função createConnection.

  • Linhas 5-8: Define uma variável airdropSignature com o resultado da chamada da função requestAirdrop da conexão que foi definida anteriormente.

  • Linha 10: Define uma variável de assinatura com o resultado da chamada da função confirmTransaction.

  • Linha 12: Define uma variável newBalance com o resultado da chamada da nossa função getBalance.

  • Linha 14: Define a variável de estado para atualizar a chave de saldo com newBalance.

  • Linha 15: Após a atualização do saldo, redefine o botão para o estado inicial.

Conclusão

Parabéns por chegar ao final! Você deu seus primeiros passos para construir uma aplicação básica de carteira que interage com a rede Solana. Você aprendeu como se conectar à rede, gerar contas aleatórias e solicitar airdrops. Além disso, você aprendeu como reunir tudo, trabalhando com o React.

Inscreva-se em nossa newsletter para mais artigos e guias sobre a Ethereum. Se tiver algum feedback, sinta-se à vontade para entrar em contato conosco via Twitter. Você sempre pode conversar conosco em nosso servidor de comunidade no Discord, que conta com alguns dos desenvolvedores mais incríveis que você já conheceu :)


Este artigo foi escrito por Jose Ferrer e traduzido por Adriano P. de Araujo. O original em inglês pode ser encontrado aqui.

Oldest comments (0)