Conectar a Metamask com Ethers.js

Sumário

1 . Por que utilizar Ethers.js para conectar com o Metamask?

2 . Criando um formulário para enviar ETH

3 . Script para conectar a Metamask com Ethers.js

4 . Browserify: Executando o Ethers.js no Navegador para conectar com o Metamask

5 . Enviando Ethers para o Metamask como teste

A biblioteca Ethers.js nos permite interagir facilmente com a blockchain Ethereum usando Javascript. Como tal, acelera significativamente o processo de desenvolvimento de aplicativos web que têm que interagir com as blockchains EVM. Já havíamos explorado anteriormente como conectar a Metamask ao nosso aplicativo web sem o uso de bibliotecas de conveniência com esse artigo: Conectando a Metamask ao seu aplicativo Web (Express)

Este guia se estende sobre o acima exposto e descreve o quanto mais intuitivo o Ethers.js é através da implementação de um simples formulário de transferência ETH sendo executado em seu aplicativo Express. Através desta transferência, você poderá ver como o seu aplicativo web é capaz de:

• Executar o Ethers.js no navegador (usando Browserify)
• Expor a conta Metamask como um objeto Javascript
• Criar e assinar um pedido de transação Ethereum
• Enviar o pedido de transação assinado para a rede
• Ver o recibo da transação devolvido pela rede

O repositório Github para este guia pode ser encontrado através do link Connecting Metamask to Express Web Application using Ethers.js Se você quiser configurar a Metamask, pode consultar um guia separado através do artigo: Conectando a Metamask com uma rede local de Hardhat

Mais informações sobre como implantar e interagir com contratos inteligentes (tokens, NFTs, armazenamento descentralizado), você pode encontrar através dos links:

• ERC20 Usando Hardhat: Um Guia Abrangente Atualizado
• ERC721 Usando Hardhat: Um guia abrangente atualizado para NFTs
• Criando NFTs Verdadeiramente Descentralizadas - Um Guia Abrangente para ERC721 & IPFS

Por que utilizar Ethers.js para conectar com o Metamask?

Conectar sua aplicação web ao Metamask é essencial para oferecer uma experiência de usuário segura e confiável ao utilizar aplicativos descentralizados baseados em blockchain. Neste capítulo, discutiremos as vantagens e benefícios de utilizar a biblioteca Ethers.js para estabelecer a conexão com o Metamask de forma eficiente e otimizada.

Antes de mergulharmos nas razões para utilizar o Ethers.js com o Metamask, vamos entender melhor o que é o Ethers.js. O Ethers.js é uma poderosa biblioteca JavaScript que fornece uma interface simples e abstrata para interagir com a Ethereum blockchain. Ele permite que os desenvolvedores se comuniquem com a blockchain Ethereum usando métodos amigáveis, tornando a integração com o Metamask uma tarefa mais fácil e suave.

O Metamask é uma extensão de navegador amplamente utilizada que funciona como uma carteira de criptomoedas e uma ponte para interagir com aplicativos descentralizados, ou seja, dApps na rede Ethereum. Milhões de usuários confiam no Metamask para gerenciar suas carteiras e assinar transações de forma segura.

O Ethers.js oferece uma interface de alto nível, fácil de usar, permitindo que os desenvolvedores interajam com a blockchain Ethereum sem precisar se preocupar com os detalhes técnicos complexos. Isso é especialmente útil ao lidar com o Metamask, pois a simplicidade do Ethers.js reduz a curva de aprendizado e facilita a adoção.

O Ethers.js possui uma documentação extensa e clara, com exemplos detalhados, que facilita a integração do Metamask ao seu projeto. Isso agiliza o processo de desenvolvimento, permitindo que você se concentre em criar funcionalidades valiosas para seus usuários.

O Ethers.js suporta Promises e Async/Await, o que simplifica o trabalho com chamadas assíncronas e melhora a legibilidade do código. Essa característica é particularmente benéfica ao interagir com o Metamask, que realiza muitas operações assíncronas durante a comunicação com a blockchain.

Ethers.js possui uma comunidade ativa de desenvolvedores e entusiastas que estão constantemente aprimorando a biblioteca. Isso significa que você pode contar com um suporte sólido e atualizações regulares, garantindo que sua integração com o Metamask permaneça atualizada e segura.

Ao utilizar uma biblioteca amplamente adotada como o Ethers.js, você pode confiar em uma base sólida de segurança e confiabilidade. Isso é crucial ao lidar com transações financeiras e dados sensíveis na blockchain Ethereum por meio do Metamask.

Em resumo, utilizar o Ethers.js para conectar com o Metamask é uma escolha inteligente e eficiente para desenvolvedores de aplicativos descentralizados. Sua interface amigável, documentação abrangente e suporte ativo tornam a integração mais fácil, segura e confiável, permitindo que você ofereça aos seus usuários uma experiência excepcional em sua plataforma baseada em blockchain Ethereum.

Criando um formulário para enviar ETH

Como estaremos construindo em cima do guia anterior, precisaremos primeiro clonar o repositório Github e instalar as dependências necessárias através dos comandos:

git clone https://github.com/0xKai27/ExpressMetamask.git
npm install

Uma vez concluída a instalação, você pode executar nodemon start para ver o seguinte log quando visitar localhost:3000 no navegador:

Você pode consultar este artigo Connecting Metamask to your Web Application Express se você quiser mais detalhes sobre como conseguimos obter a conexão acima com o clássico Node.js. Com o aplicativo base funcionando, podemos então começar a adicionar nosso formulário.

Navegue até o arquivo index.ejs localizado no diretório /views e copie e cole o seguinte código:

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>

  <body>

    <h1><%= title %></h1>

      <button class="enableEthereumButton">Connect to Metamask</button>

      <h2>Account: <span class="showAccount"></span></h2>

      <h2>Chain ID: <span class="showChainId"></span></h2>

    <br>

    <h1>Send ETH using Web App</h1>

      <form id="sendETH">

        <h2>Send to:</h2>

        <input type="text" id="addressTo"/>

        <h2>Amount in ETH:</h2>

        <input type="number" id="ETHAmount"/>

        <br>

        <button>Send ETH</button>

      </form>

    <script src="javascripts/index.js"></script>

    <script src="javascripts/bundle.js"></script>

  </body>

</html>

Nosso formulário terá duas entradas:

• addressTo: O endereço do destinatário
• ETHAmount: A quantia a enviar expressa em ETH

Observe também que incluímos um script adicional bundle.jsque conterá a lógica de nosso formulário. Salve o arquivo e nodemon você terá atualizado a página.

Agora é hora de vincular o formulário ao nosso código do backend.

Script para conectar a Metamask com Ethers.js

No diretório principal do projeto, crie um arquivo provider.js:

touch provider.js

Este arquivo conterá a lógica necessária que liga a Metamask ao Ethers.js (chegaremos ao arquivo bundle.js na próxima seção). Como tal, precisamos primeiro instalar a biblioteca Ethers.js:

npm install ethers

Podemos então copiar e colar o seguinte no recém-criado provider.js:

const { ethers } = require("ethers");

// Obtenha o provedor e o signatário da janela do navegador

const provider = new ethers.providers.Web3Provider(window.ethereum);

const signer = provider.getSigner();

// Inicialize os objetos de documento

const sendETH = document.querySelector('#sendETH');

const addressTo = document.querySelector('#addressTo');

const ETHAmount = document.querySelector('#ETHAmount');

sendETH.addEventListener('submit', async(e) => {

  e.preventDefault();

  // Obtenha os valores do formulário

  const addressToValue = addressTo.value;

  const ETHAmountValue = ETHAmount.value;

  // Calcular a quantidade de wei a ser transferida

  const weiAmountValue = ethers.utils.parseEther(ETHAmountValue) //parseInt(ETHAmountValue) * 10**18

  // Criar o pedido de transação para enviar ETH

  const transactionRequest = {

    to: addressToValue.toString(),

    value: weiAmountValue.toString()

  }

  // Enviar a transação e registrar o recibo

  const receipt = await signer.sendTransaction(transactionRequest);

  console.log(receipt);

})

As linhas 4 e 5 são na verdade as linhas chave do código que expõe a conta Metamask para que possamos usar em nosso aplicativo. Ela cria dois objetos:

• provider: Uma abstração de uma conexão com a rede Ethereum (ou seja, alchemy, infura etc.). Em outras palavras, que é o prestador de serviços que nosso aplicativo está usando para se conectar à rede Ethereum.
• signer: Uma abstração de uma conta Ethereum. Este é o objeto que podemos utilizar para assinar e enviar transações.

Para tornar o acima mencionado mais concreto, o restante do código implementa a lógica de forma necessária para enviar uma transação ETH. Os componentes do formulário são primeiramente inicializados e seus respectivos valores são armazenados em addressToValue e ETHAmountValue. Com base no ETHAmountValue, também convertemos a quantidade de ETH para WEI usando os utilitários do Ether.js utils, onde 1 ETH é igual a 10^18 wei.

Estes 2 valores fazem então parte do transactionRequest. Para que o transactionRequest seja bem sucedido, há uma série de outras variáveis que têm que ser preenchidas antes da transação (preço do gas, nonce etc.). Observe que você pode visualizar a estrutura transactionRequest nos documentos do Ethers.js.

Felizmente, o Ethers.js fornece uma função sendTransaction prática que também preenche convenientemente a transação com base no objeto signer. A sendTransaction() compõe a transação completa e submete a transação à rede. Uma promessa contendo o hash de recebimento da transação é então devolvida e logada no console.

Browserify: Executando o Ethers.js no Navegador para conectar com o Metamask

Embora tenhamos escrito a lógica necessária para conectar a Metamask, agora nos deparamos com um problema, pois não podemos importar o módulo Ether.js para nosso navegador onde nosso script será executado. Lembre-se de que este script será hospedado no navegador do cliente e, portanto, precisa ser usado como um arquivo estático em vez de ser executado em nosso servidor local. Esta é a razão pela qual nosso código também faz referência a window.ethereum que é uma propriedade do objeto window do navegador.

Browserify fornece apenas as ferramentas necessárias que nos permitem executar o Ethers.js (ou qualquer outro módulo require) no navegador. Podemos instalá-lo globalmente, usando o comando abaixo:

npm install -g browserify

Uma vez instalado, podemos usar browserify --help para acessar a lista de opções. Para nossos objetivos, vamos definir um caminho de arquivo de saída usando o sinal -o:

browserify app.js -o public/javascripts/bundle.js

Isso vai criar um arquivo bundle.js no diretório público pelo qual os ativos estáticos serão servidos. Observe que nosso arquivo index.ejs também contém um tag de script referenciando este caminho. Uma vez que o bundle.js tenha sido gerado, o nodemon terá atualizado automaticamente nosso aplicativo e agora ele deverá estar funcionando

Enviando Ethers para o Metamask como teste

A fim de testar o formulário, vamos nos conectar à nossa rede de teste de Hardhat que montamos anteriormente. Uma vez conectado, atualize o estado de bootstrap (inicialização) da rede, executando:

npx hardhat node

Com a Metamask conectada à nossa rede Hardhat, poderemos ver 10.000 HARDHATETH em ambas as nossas contas de teste importadas.

Para este teste, vamos transferir 32 HARDHATETH do Hardhat1 para o Hardhat2. Copie o endereço Hardhat2 da Metamask e cole-o na caixa "Send to:" (Enviar para:). Na caixa "Amount in ETH" (Quantia em ETH), podemos preencher com o valor 32.

Clicando na função “Send ETH” (Envie ETH), a Metamask deve solicitar que você confirme a transação. Observe que talvez você precise reinicializar a conta ou permitir um nonce personalizado se a conta foi utilizada anteriormente para testes em outra rede.

Ao clicar em "Confirm" (Confirmar), você poderá então ver o recibo da transação sendo impresso no console do navegador.

Além disso, o console da rede Hardhat também teria registrado a transação de entrada que está pendente de confirmação da rede. Você pode monitorar o console de rede para ver quais outras funções são chamadas uma vez que a transação tenha sido "minerada" pela rede.

Após o sucesso da transação, a Metamask deve então reproduzir os respectivos saldos, assim como o status da transação.

Leia o artigo Connecting Metamask with a Local Hardhat Network para saber mais

Parabéns, você conectou com sucesso o Ethers.js à Metamask e até implementou uma função de envio!

Obrigado por ficar até o final. Adoraria ouvir suas idéias/comentários, portanto, deixe um comentário. Eu estou ativo no twitter @AwKaiShin se você quiser mais “petiscos digeríveis” de informações relativas a criptografia ou visite meu site pessoal se quiser meus serviços :)

Esse arquivo foi escrito por Aw Kai Shin e traduzido por Fátima Lima. O original pode ser lido através do link Connect Metamask with Ethers.js.

🚀 Queridos entusiastas da tecnologia blockchain e devs que estão prontos para explorar o fascinante universo das aplicações web3!

Não perca a chance única de elevar sua jornada de desenvolvimento a um patamar superior. A construção de Tokens ERC-721 é apenas o ponto de partida; os projetos incríveis da WEB3DEV representam a chave de entrada para o emocionante cenário web3. 🌐

Não espere mais! Corra para o nosso site agora mesmo e garanta sua inscrição nos próximos builds. A sua empolgante jornada rumo à maestria das aplicações web3 está prestes a começar! 🚀🔗

Leia outros artigos e saiba mais sobre programação em Web3 gratuitamente:

• Web3.js vs Ethers.js — Guia Completo
• Tutorial Solidity: Criando um dApp Ethereum com Ethers.js