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:
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
Uma vez clonado, você precisará instalar as dependências
cd QuickNode-solana-wallet
yarn install
Por fim, execute:
expor web
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";
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"));
};
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());
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,
"…"
}
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";
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 });
};
- 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;
};
- 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 });
};
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.
Top comments (0)