Como construir sua primeira aplicação descentralizada (dapp) na Archway
As dapps são o pão e a manteiga que alimentam uma blockchain. O frontend de uma dApp é geralmente um site hospedado onde os usuários se conectam ao seu contrato inteligente para fazer consultas ou transações.
Neste artigo, estaremos construindo um frontend de dApp na Archway. Para fazer isso, primeiro, precisaremos criar um projeto de contrato inteligente usando a CLI de desenvolvedor da Archway. Se você ainda não fez isso, confira o guia de início rápido para começar rapidamente.
Iniciando
Conectar sua dApp à rede Archway requer três dependências que podem ser instaladas usando o NPM.
Os pacotes que você precisa instalar são:
@cosmjs/proto-signing é um pacote com utilitários para assinatura de mensagens baseadas em protobuf, para conectar o frontend da sua dApp à carteira de um usuário.
@cosmjs/stargate é uma biblioteca cliente para o Cosmos SDK, e @cosmjs/cosmwasm-stargate a estende com funcionalidades para contratos inteligentes CosmWasm; precisamos dela, pois os contratos inteligentes da Archway são baseados em CosmWasm.
Se ainda não o fez, vá em frente e crie um novo aplicativo web para ter um local onde colocar seu código, depois vamos mergulhar!
Conectando-se às Carteiras
Vamos começar com um teste superficial. Neste exemplo, conectamos ao assinante protobuf usando uma string mnemônica codificada diretamente no código.
O trecho acima configura os preços do gás para a testnet Constantine e autoriza uma carteira a realizar transações. Isso é bastante interessante, mas ainda não está pronto para o consumo público; para isso, precisaremos que nossa dApp se conecte às carteiras dos usuários usando uma extensão de navegador, como a carteira Keplr.
Após instalar a extensão, você notará que o Keplr é exposto para as páginas da web como uma propriedade do objeto JavaScript "window" da página ativa.
Para se conectar à sua dApp, o Keplr precisa saber alguns metadados sobre a cadeia à qual está se conectando e o tipo de contratos armazenados lá.
Estamos nos conectando à testnet Constantine da Archway, que suporta contratos inteligentes CosmWasm. Vamos manter uma referência aos parâmetros da nossa cadeia para podermos consultá-los posteriormente.
Com isso resolvido, podemos usar o ChainInfo para configurar o Keplr para a testnet Constantine.
Agora está feito. Agora, qualquer pessoa que acessar nossa página web pode autorizar sua carteira Keplr a interagir com nossa dApp. A interface de usuário (UI) de nossa dApp simplesmente precisa exibir um botão que chame nossa função connectKeplrWallet como um evento onclick.
Consultando a Rede Archway
Anteriormente, armazenamos uma referência ao CosmWasmClient e a usaremos para consultas e transações ao contrato de nossa dApp.
Para consultas gerais da cadeia, como saldos de contas, podemos precisar novamente de metadados sobre a própria rede, mas podemos reutilizar nosso objeto ChainInfo.
Aqui está um exemplo de uma consulta geral solicitando o saldo de um usuário. Observe que a função getBalance faz parte do próprio pacote @cosmjs/cosmwasm-stargate.
Se quisermos, em vez disso, consultar dados do contrato, podemos fazer isso também, mas precisaremos do endereço do contrato e dos argumentos do ponto de entrada.
Os pontos de entrada são funções do seu contrato que são publicamente expostas. Se você estiver chamando uma que não requer argumentos, usamos a sintaxe {} para indicar nenhum argumento.
Aqui está como pode parecer a consulta a um ponto de entrada de contrato inteligente que não requer argumentos:
Você ainda precisa especificar o nome do ponto de entrada, mesmo se você não estiver enviando argumentos de construtor. O exemplo acima faz referência à função queryHandler que configuramos anteriormente.
Transações da dApp
Fazer com que sua dApp realize transações com usuários finais é mais ou menos o mesmo que consultar, apenas usa um módulo diferente, mas as regras anteriores se aplicam: você precisará do endereço do contrato, nome do ponto de entrada (em snake case) e argumentos (opcionais).
Novamente, se o ponto de entrada não exigir argumentos do construtor, use {} para indicar nenhum argumento.
Aqui está como é para iniciar uma transação da sua dApp para um ponto de entrada que não requer argumentos.
☝️ Este exemplo faz referência à variável gasPrice que configuramos anteriormente.