Há algum tempo eu escrevi a primeira parte deste tutorial, sobre como fazer integração do seu site ou aplicação web com a carteira de criptomoedas MetaMask, usando apenas JavaScript.
Isso é especialmente útil para quem estiver criando um dapp (aplicação distribuída), aplicação para web3 ou apenas querendo integrar a MetaMask como meio de pagamento cripto.
No entanto, após a publicação da primeira parte, a dúvida número 1 da minha audiência foi: como lidar como outros tokens que não sejam o nativo da rede? Isso porque como conectamos na Polygon, a criptomoeda dela é o POL e qualquer saldo, transação, etc estará cotado nativamente nesta moeda. O mesmo vale para o Ether (ETH) se estivéssemos conectados na rede Ethereum ou o BNB se estivéssemos conectados na rede BNB Chain.
Para entender melhor como fazer e consultar transações de outros tokens, valem algumas explicações antes. Caso prefira assistir ao invés de ler, o vídeo abaixo contém o mesmo conteúdo deste tutorial.
#1 – Contratos Inteligentes
Você pode assistir ao vídeo abaixo que passa o mesmo conteúdo desta seção, ao invés de ler.
Quando o Bitcoin surgiu em 2008 para 2009 o seu foco, conforme consta no seu paper original, era ser um dinheiro eletrônico seguro e confiável P2P, ou seja, sem intermediários. O seu foco é e possivelmente sempre será ser “apenas” uma moeda digital, o que chamamos de criptomoeda 1.0.
Quando Vitalik Buterim criou o Ethereum em 2015 ele já pensava diferente. Ele viu na tecnologia blockchain a possibilidade de construir uma plataforma. Nesta plataforma, qualquer um poderia criar algoritmos que rodariam de maneira distribuída e descentralizada, incluindo novas criptomoedas, ou tokens, como passariam a ser chamadas as moedas não-nativas de uma blockchain. A esses algoritmos deu-se o nome de contratos inteligentes ou smart contracts.
Na prática, um contrato inteligente é como se fosse uma classe Java ou C#, mas que roda na blockchain, ou seja, sem um endereço central e específico, sem estar atrelado a um servidor. O programador do contrato inteligente faz deploy dele na blockchain e então o algoritmo passa a estar disponível publicamente, sendo executado por uma máquina virtual (EVM no caso da Etehereum) toda vez que requisitado e gravando os dados de suas transações na própria blockchain (o que incorre no famoso custo de gás). Isso é o que chamamos de criptomoeda 2.0 ou segunda geração.
Assim, contei toda essa história para lhe ajudar a entender que, qualquer que seja a atividade que você deseje fazer em uma blockchain 2.0 em diante que não seja consultar ou fazer transações com sua criptomoeda nativa, será feita através de contratos inteligentes. E isso responde, na teoria, a pergunta mais comum que recebi no tutorial anterior que é como consultar saldo e fazer transferência de outros tokens que o usuário possa ter na MetaMask: através de contratos inteligentes.
#2 – Contratos de Tokens
O tipo de smart contract mais comum que temos são os de novos tokens. Um contrato de token é um smart contract que atende a um padrão comum como ERC20. Neste padrão é dito que todo smart contract de token deve ter uma função para saldo, outra para transferência e assim por diante. Essas funções são definidas em uma interface de programação chamada de ABI (Application Binary Interface) e uma vez que o programador escreva sua ABI corretamente, todo o ecossistema de aplicações que se comunicam com ERC20 vai conseguir se comunicar com o contrato dele.
No caso da MetaMask, ela é uma carteira que se comunica com a blockchain da Ethereum, o que inclui tokens no padrão ERC20 e compatíveis. Quando me refiro a compatíveis quero dizer a forks e L2 da blockchain ETH, como a própria Polygon. Então tanto a MetaMask funciona para a rede da POL quanto qualquer programação que fizermos para uma, vai funcionar na maioria dos casos para a outra.
É por isso que uma biblioteca como a Ethers JS, claramente feita para Ethereum, funciona tão bem com a Polygon também por isso que as regras para consultar saldos e fazer transações de tokens na POL é do mesmo jeito que na ETH: através de smart contracts. E é isso que nós vamos aprender no tutorial de hoje: como interagir com smart contracts de tokens usando a MetaMask.
#3 – Web3 Service
Seguiremos aplicando os conhecimentos da biblioteca EthersJS na mesma aplicação ReactJS que criamos na primeira parte. Não que isso faça grande diferença já que estamos usando JS puro, aplicável a qualquer outra tecnologia de frontend web como Angular e VueJS.
Vamos começar reorganizando a nossa aplicação, criando um arquivo src/Web3Service.js junto dos demais para que seja o nosso service, ou seja, a camada de comunicação da aplicação com recursos externos. Bem pra organização mesmo.
Neste service nós vamos começar adicionando as funções de saldo e transferência de POL que já conhecemos e que dispensam explicações. Apenas vou dar nomes sugestivos a elas e garantir que elas sejam bem desacopladas em relação à aplicação em si, realmente fornecendo um serviço de consulta de saldo e transferência.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { ethers } from 'ethers'; async function getMetaMaskProvider() { if (!window.ethereum) throw new Error(`No MetaMask found!`); const provider = new ethers.BrowserProvider(window.ethereum); const accounts = await provider.send('eth_requestAccounts'); if(!accounts || !accounts.length) throw new Error(`No MetaMask account allowed`); return provider; } export async function getPolBalance(address) { const provider = await getMetaMaskProvider(); const balance = await provider.getBalance(address); return ethers.formatEther(balance.toString()); } export async function transferPol(toAddress, quantity) { const provider = await getMetaMaskProvider(); const signer = await provider.getSigner(); ethers.getAddress(toAddress);//valida endereço const tx = await signer.sendTransaction({ to: toAddress, value: ethers.parseEther(quantity) }) await tx.wait(); return tx.hash; } |
Repare apenas que como a verificação da existência da MetaMask no navegador e o carregamento do provider são tarefas comuns a qualquer ação que vamos fazer, coloquei isso dentro de uma função específica, que chamaremos sempre que necessário, a getMetaMaskProvider.
Agora você pode ajustar o código do seu App.jsx para que ele use as novas funções, deixando-o bem mais organizado.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import { useState } from 'react'; import { getPolBalance, transferPol } from './Web3Service'; function App() { const [address, setAddress] = useState("<SUA CARTEIRA>"); const [balance, setBalance] = useState(''); const [toAddress, setToAddress] = useState(""); const [quantity, setQuantity] = useState(""); const [message, setMessage] = useState(''); async function checkBalance() { let balance = await getPolBalance(address); setBalance(balance); setMessage(``); } async function transfer() { let result = await transferPol(toAddress, quantity); setMessage(JSON.stringify(result)); } return ( <div> <p> My Address : <input type="text" onChange={evt => setAddress(evt.target.value)} value={address} /> </p> <p> <input type="button" value="See Balance" onClick={evt => checkBalance()} /> </p> <p> Balance: {balance} </p> <hr /> <p> To Address: <input type="text" onChange={evt => setToAddress(evt.target.value)} /> </p> <p> Qty: <input type="text" onChange={evt => setQuantity(evt.target.value)} /> </p> <p> <input type="button" value="Transfer" onClick={evt => transfer()} /> </p> <hr /> <p> {message} </p> </div > ); } export default App; |
E com isso voltamos ao mesmo tempo que já estávamos na lição passada, mas agora com um código mais evoluído e com um entendimento melhor do que faremos a seguir. Basicamente precisamos nos conectar aos contratos dos tokens que desejamos usar e mandar comandos para eles, através da MetaMask, ao invés de mandar para a Polygon em si.
#4 – Token Functions
Vamos voltar ao nosso Web3Service.js e vamos adicionar duas novas funções, bem parecidas com as anteriores, mas usando contratos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
export async function getTokenBalance(address, contractAddress, decimals = 18) { const provider = await getMetaMaskProvider(); const contract = new ethers.Contract(contractAddress, CONTRACT_ABI, provider); const balance = await contract.balanceOf(address) return ethers.formatUnits(balance, decimals); } export async function transferToken(toAddress, contractAddress, quantity, decimals = 18) { const provider = await getMetaMaskProvider(); const signer = await provider.getSigner(); const contract = new ethers.Contract(contractAddress, CONTRACT_ABI, signer); const tx = await contract.transfer(toAddress, ethers.parseUnits(quantity, decimals)); await tx.wait(); return tx.hash; } |
A primeira função, getTokenBalance, espera o endereço da carteira e o endereço do contrato do token que você deseja ver o saldo. Um terceiro parâmetro opcional é para a formatação de casas decimais. O início da função conecta no provider, ou seja, na carteira MetaMask, como já fizemos antes. Depois, ele carrega o contrato em si, usando o endereço informado (contrato do token) e passamos ainda o ABI e o provider já conectado e autorizado.
E aqui valem duas explicações. Primeiro, sobre o ABI. Eu mencionei anteriormente o que é o ABI e aqui precisaremos informá-lo manualmente. Como vamos trabalhar com tokens ERC20, eu peguei o ABI padrão disponível na documentação. Inclua este conteúdo em um arquivo ABI.json no mesmo nível do Web3Service.js:
|
1 2 3 |
[{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"guy","type":"address"},{"name":"wad","type":"uint256"}],"name":"approve","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"src","type":"address"},{"name":"dst","type":"address"},{"name":"wad","type":"uint256"}],"name":"transferFrom","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"wad","type":"uint256"}],"name":"withdraw","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"decimals","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"balanceOf","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"symbol","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"dst","type":"address"},{"name":"wad","type":"uint256"}],"name":"transfer","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[],"name":"deposit","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"},{"name":"","type":"address"}],"name":"allowance","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"payable":true,"stateMutability":"payable","type":"fallback"},{"anonymous":false,"inputs":[{"indexed":true,"name":"src","type":"address"},{"indexed":true,"name":"guy","type":"address"},{"indexed":false,"name":"wad","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"src","type":"address"},{"indexed":true,"name":"dst","type":"address"},{"indexed":false,"name":"wad","type":"uint256"}],"name":"Transfer","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"dst","type":"address"},{"indexed":false,"name":"wad","type":"uint256"}],"name":"Deposit","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"src","type":"address"},{"indexed":false,"name":"wad","type":"uint256"}],"name":"Withdrawal","type":"event"}] |
E depois carregue ele no topo do Web3Service.js.
|
1 2 3 |
import CONTRACT_ABI from "./ABI.json"; |
Com a informação do endereço do contrato e do ABI, a biblioteca Ethers vai conseguir fornecer um objeto de contrato que faça as ações que esperamos como ver saldo e fazer transferências.
Voltando ao código, é exatamente isso que a primeira função faz, usa deste objeto de contrato carregado para chamar uma das funções do ABI que é a balanceOf.
Já na segunda função nós pegamos o provedor, a autorização para assinar transações e usamos tudo isso junto ao contrato para fazer a transferência passando por ele.
Agora, para que possamos usar estas funções, teremos de informar na interface da aplicação o campo para o usuário incluir o endereço do contrato.
#5 – Contrato na Interface
Ao invés de colocar um campo de texto pro usuário informar o contrato, eu vou optar por fornecer um select com várias opções comuns. Menos flexível, mas com usabilidade melhor.
Em um cenário de produção, o usuário poderia ir no site da CoinMarketCap, procurar o token que deseja manipular e pegar o endereço do contrato dele na Polygon. No entanto, como estamos desenvolvendo tudo apontado para Testnet eu estou usando a Amoy (Testnet da Polygon) temos de encontrar os endereços dos contratos de teste, lembrando que nem todos tokens existem na testnet.
Eu vou fazer os testes aqui usando dois tokens apenas. Primeiro, o WPOL que é a versão wrapped do POL, que você pode obter facilmente depositando POL no contrato dele. Não esqueça de importar o token na sua carteira para poder visualizá-lo.
Depois USDC, cujo endereço do contrato (use ele para importar o token na sua carteira) é 0x41e94eb019c0762f9bfcf9fb1e58725bfb0e7582 e você pode obter moedas no Faucet oficial de USDC.
Abaixo, as alterações no App.jsx para termos um state pro contrato do token, um select na interface já com os dois tokens (e seus endereços na Testnet) e a lógica para chamar as funções apropriadas quando o token selecionado for POL ou outros.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import { useState } from 'react'; import { getTokenBalance, getPolBalance, transferPol, transferToken } from './Web3Service'; function App() { const [address, setAddress] = useState("0xE4ffEEd88111e1DFCc3a852d9334C65e38BF2880"); const [contract, setContract] = useState("POL"); const [balance, setBalance] = useState(''); const [toAddress, setToAddress] = useState(""); const [quantity, setQuantity] = useState(""); const [message, setMessage] = useState(''); async function checkBalance() { let balance; if (contract === "POL") balance = await getPolBalance(address); else if (contract === "0x41e94eb019c0762f9bfcf9fb1e58725bfb0e7582")//USDC balance = await getTokenBalance(address, contract, 6); else balance = await getTokenBalance(address, contract); setBalance(balance); setMessage(``); } async function transfer() { let tx; if (contract === "POL") tx = await transferPol(toAddress, quantity); else if (contract === "0x41e94eb019c0762f9bfcf9fb1e58725bfb0e7582")//USDC tx = await transferToken(toAddress, contract, quantity, 6); else tx = await transferToken(toAddress, contract, quantity); setMessage(tx); } return ( <div> <p> My Address : <input type="text" onChange={evt => setAddress(evt.target.value)} value={address} /> </p> <p> <select className="form-select" onChange={evt => setContract(evt.target.value)}> <option value="POL">POL</option> <option value="0xa5733b3a8e62a8faf43b0376d5faf46e89b3033e">WPOL</option> <option value="0x41e94eb019c0762f9bfcf9fb1e58725bfb0e7582">USDC</option> </select> <input type="button" value="See Balance" onClick={evt => checkBalance()} /> </p> <p> Balance: {balance} </p> <hr /> <p> To Address: <input type="text" onChange={evt => setToAddress(evt.target.value)} /> </p> <p> Qty: <input type="text" onChange={evt => setQuantity(evt.target.value)} /> </p> <p> <input type="button" value="Transfer" onClick={evt => transfer()} /> </p> <hr /> <p> {message} </p> </div > ); } export default App; |
Aqui vale duas menções às chamadas para ver saldo e fazer transferência no que tange as casas decimais dos tokens. Cada token possui um número de casas decimais que pode variar de 0 a 18, sendo 18 o mais comum. No entanto, o USDC por ser uma stablecoin possui menos casas, 6 para ser mais exato. Se não fizermos os ifs para ele tanto o saldo será exibido de maneira errada quanto as transferências irão enviar valores errados.
O resultado é que agora o usuário pode selecionar qual token ele deseja ver o saldo, bem como fazer transferências do mesmo.
Legal, não?
Com isso, agora você tem MUITO mais ferramentas para integrar suas aplicações não só com a MetaMask mas com as blockchains ETH e derivadas.
Quer aprender ainda mais? Que tal este outro tutorial onde ensino como implementar autenticação nos seus dapps e aplicações web3 usando a MetaMask também.
Quer aprender a se integrar com outra carteira? Ensino com Brave Wallet aqui.
Até a próxima!
Olá, tudo bem?
O que você achou deste conteúdo? Conte nos comentários.