WEB3DEV

Cover image for Verificador de Permissão de Token - Visualize as Aprovações de Token da Carteira
Fatima Lima
Fatima Lima

Posted on

Verificador de Permissão de Token - Visualize as Aprovações de Token da Carteira

Com um verificador de permissão de token confiável, você pode ver todas as aprovações em aberto relacionadas a qualquer token ERC-20 para qualquer endereço de carteira. Se quiser criar esse verificador, agora você pode fazer isso facilmente, graças à API de Token Moralis. Você só precisa de um script de backend simples (pode usar NodeJS) e um frontend React. Dessa forma, você pode criar um dapp (aplicativo descentralizado) verificador de permissão de token em minutos. Este é o método principal de visualização das aprovações de token de carteira:

const response = await Moralis.EvmApi.token.getTokenAllowance(options);
Enter fullscreen mode Exit fullscreen mode

Se você deseja saber como implementar corretamente o endpoint da API de token getTokenAllowance usando o NodeJS, o tutorial abaixo é exatamente do que você precisa. É claro que, se preferir vídeos, você pode usar o que está no topo, pois ele também o levará à linha de chegada. Seja qual for o caminho escolhido, você aprenderá todos os elementos essenciais para criar um verificador de permissão de token. Além disso, você precisa ter uma chave de API Web3 Moralis para realizar essa tarefa. Portanto, não se esqueça de se registrar no Moralis antes de colocar a mão na massa!

Image description

Inscreva-se no Moralis

Visão Geral

A maioria de vocês provavelmente deseja saber como usar o endpoint "obter permissão de token ERC-20" (getTokenAllowance) com JavaScript (JS). Por isso, vamos nos aprofundar no tutorial "verificador de permissão de token" na próxima seção. Lá, mostraremos como criar um script JS simples que implementa o trecho de código apresentado acima. Esse será o backend de seu dapp verificador de permissão de token. Ao longo do caminho, também mostraremos como instalar o SDK Moralis e como obter sua chave de API Web3. Além disso, examinaremos a página de documentação do endpoint do getTokenAllowance.

Também garantiremos que você possa responder seguramente à pergunta "o que é um verificador de permissão de token?". Para garantir isso, faremos uma demonstração do nosso dapp de exemplo, que busca aprovações de tokens de carteira. Ao analisar nosso exemplo de frontend e exemplos de aprovação de DEX, você entenderá melhor os dados que o endpoint retorna. Isso também mostrará que um aplicativo React muito simples pode fazer o trabalho e, possivelmente, inspirá-lo a criar seu próprio frontend.

Image description

Tutorial: Crie um Verificador de Permissão de Token

Nota: se você achar que precisa primeiro entender melhor o que é permissão de token e como as DEXs solicitam sua aprovação antes de criar seu backend NodeJS, veja a demonstração abaixo do tutorial.

Este tutorial se concentra no uso do NodeJS. No entanto, como o Moralis é interoperável entre plataformas, você também pode usar Python ou outras linguagens e estruturas de programação importantes para criar dapps (aplicativos descentralizados)._ Com isso em mente, primeiro, certifique-se de ter o NodeJS v.14 ou superior instalado em seu computador. Você também precisará de um gerenciador de pacotes, portanto, instale também o npm ou o yarn. Com esses pré-requisitos em mãos, você pode passar para o primeiro passo.

Passo 1: Configurar o Moralis

Caso ainda não tenha feito isso, crie sua conta Moralis. Você pode começar com uma conta gratuita; no entanto, se planeja criar dapps com muito tráfego, recomendamos que adquira os planos Moralis Pro, Business ou Enterprise. Depois de ter sua conta Moralis instalada e funcionando, você poderá acessar a área do administrador (admin). A partir daí, você poderá copiar sua chave de API Web3 com os dois cliques a seguir:

Image description

Nota: Guarde sua chave de API por enquanto - você poderá colá-la no script à medida que avançarmos.

Em seguida, você precisa instalar o SDK Moralis. O comando a seguir cuidará disso:

  • NPM:
npm install moralis @moralisweb3/common-evm-utils
Enter fullscreen mode Exit fullscreen mode
  • Yarn:
yarn add moralis @moralisweb3/common-evm-utils
Enter fullscreen mode Exit fullscreen mode

Image description

Passo 2: Obtendo a Permissão de Gastos dos Tokens ERC-20

A essa altura, você já sabe que usaremos o endpoint getTokenAllowance. Dito isso, você precisa se familiarizar melhor com esse endpoint. Então, vamos dar uma olhada em uma página relevante da documentação de referência da API.

Image description

Observando a captura de tela acima, você pode ver que o endpoint em questão pertence ao grupo "Get Balance" (Obter saldo) da API de token. A imagem acima ilustra a estrutura geral de todas as páginas de referência da API do Moralis. Como você pode ver, é permitido que você selecione a linguagem/framework de programação que deseja usar e execute o código por meio do botão "Try It". No entanto, antes de fazer isso, você precisa inserir os parâmetros necessários. Portanto, quando se trata de criar um verificador de permissão de token com o Moralis, estes são os parâmetros necessários:

  • address – O endereço do contrato do token.
  • owner_address – O endereço do proprietário do token (esse é um endereço da carteira que deu aprovação à DEX).
  • spender_address – O endereço do gastador (spender) de tokens.

Nota: Em instâncias mais avançadas, você deseja verificar diferentes endereços do gastador e de tokens. Portanto, todos os parâmetros acima podem vir na forma de array de strings.

Image description

Além dos parâmetros necessários apresentados acima, o endpoint getTokenAllowance também oferece uma opção para consultar outras chains (cadeias) compatíveis. Por padrão, a Ethereum é a cadeia alvo; no entanto, graças à interoperabilidade entre cadeias do Moralis, você pode escolher entre todas as principais cadeias compatíveis com EVM e suas redes de teste:

Image description

Se você olhou atentamente para a página de documentação acima, deve ter visto a caixa com as linhas de código. O código nessa caixa corresponde à linguagem/framework de programação que você selecionou. Assim, você pode simplesmente copiar essas linhas em seu editor de código para criar seus scripts de backend com o mínimo de esforço.

Um Exemplo de Script no NodeJS

Na parte superior do nosso script de exemplo, primeiro importamos Moralis e o evm-utils:

const Moralis = require("moralis").default;
const { EvmChain } = require("@moralisweb3/common-evm-utils");
Enter fullscreen mode Exit fullscreen mode

A seguir, inicializamos o Moralis:

const runApp = async () => {
await Moralis.start({
apiKey: "YOUR_API_KEY",
});
Enter fullscreen mode Exit fullscreen mode

Observando as linhas de código acima, você pode ver que esse é o local para colar sua chave de API Web3. Basta substituir o espaço reservado YOUR_API_KEY pela chave de API obtida acima. Em seguida, você deseja definir os parâmetros que entrarão no endpoint getTokenAllowance. Para fins deste simples tutorial, estamos usando um único endereço para cada parâmetro, ou seja, para address, owner_address e spender_address:

const chain = EvmChain.ETHEREUM;
const address = "0x514910771AF9Ca656af840dff83E8264EcF986CA";
const ownerAddress = "0x7c470D1633711E4b77c8397EBd1dF4095A9e9E02";
const spenderAddress = "0xed33259a056f4fb449ffb7b7e2ecb43a9b5685bf";
Enter fullscreen mode Exit fullscreen mode

Por fim, implementamos a linha de código da introdução, incluindo os parâmetros acima. Além disso, registramos a resposta no console e executamos a função runApp:

const response = await Moralis.EvmApi.token.getTokenAllowance({
address,
chain,
ownerAddress,
spenderAddress,
});
console.log(response.toJSON());
};
runApp();
Enter fullscreen mode Exit fullscreen mode

No entanto, aqui está o script de exemplo completo:

const Moralis = require("moralis").default;
const { EvmChain } = require("@moralisweb3/common-evm-utils");
const runApp = async () => {
await Moralis.start({
apiKey: "YOUR_API_KEY",
// ...and any other configuration
});
const chain = EvmChain.ETHEREUM;
const address = "0x514910771AF9Ca656af840dff83E8264EcF986CA";
const ownerAddress = "0x7c470D1633711E4b77c8397EBd1dF4095A9e9E02";
const spenderAddress = "0xed33259a056f4fb449ffb7b7e2ecb43a9b5685bf";
const response = await Moralis.EvmApi.token.getTokenAllowance({
address,
chain,
ownerAddress,
spenderAddress,
});
console.log(response.toJSON());
};
runApp();
Enter fullscreen mode Exit fullscreen mode

Passo 3: Executar o Script

O script acima é o verificador de permissão de token, que agora pode ser executado com o seguinte comando:

node index.js
Enter fullscreen mode Exit fullscreen mode

Para os endereços usados no script acima, o verificador de permissão de token nos informa que não há aprovações de token de carteira aberta. Portanto, esta é a resposta JSON que você deve ver em seu terminal:

{
"allowance": "0"
}
Enter fullscreen mode Exit fullscreen mode

O que é um Verificador de Permissão de Token?

Um verificador de permissão de token é uma ferramenta (um script ou um app/dapp Web3) que mostra todas as aprovações de tokens ERC-20 pertencentes a uma carteira específica. Em alguns casos, ele também pode permitir que você controle ou altere as permissões abertas. Além disso, essas aprovações são atribuídas a contratos inteligentes específicos, como os que alimentam DEXs ou agregadores. Para ajudá-lo a entender isso melhor, vamos fazer uma demonstração simples.

Com nossa carteira MetaMask de exemplo, que contém vários tokens ERC-20 (LINK, USDT, USDC e UNI), visitamos o agregador da 1inch. Quando nos conectamos com nossa carteira e selecionamos qualquer um dos tokens que temos, primeiro precisamos dar à 1inch a aprovação do token antes de podermos trocá-los de fato. Aqui está um exemplo para o USDT:

Image description

Observando o screenshot acima, você pode ver o ícone de "cadeado". Esse ícone indica que ainda não aprovamos uma permissão de token para esse ativo. No entanto, para fins desta demonstração, continuamos e demos à 1inch aprovações para LINK, USDT e USDC. Portanto, depois que uma permissão de token é aprovada, não há ícone de "cadeado" e podemos trocar nossos tokens:

Image description

Vamos também visitar o Uniswap e aprovar nosso token UNI lá:

Image description

Dessa forma, acima, concedemos aprovações de token à 1inch para tokens LINK, USDT e USDC e à Uniswap para UNI. Com isso em mente, vamos dar uma olhada em nosso dapp verificador de permissão de token de exemplo que criamos usando o endpoint getTokenAllowance do tutorial acima:

Image description

Conforme indicado na imagem acima, primeiro copiamos o endereço da carteira MetaMask que contém os tokens aprovados e o colamos no campo designado de nosso dapp React. Depois de pressionar o botão "Search" (Pesquisar), nosso dapp exibe todas as aprovações de tokens ativas:

Image description

Explicação Adicional dos Parâmetros Envolvidos

Observando a captura de tela acima, você pode ver que nosso verificador de permissão de token também exibe alguns detalhes sobre as aprovações de token ativas. Esses detalhes incluem o hash da transação de permissão, a hora da aprovação, os ativos em questão, o endereço do remetente aprovado e o valor da permissão. Você pode ver que LINK, USDT e USDC têm o mesmo endereço "Approved Spender". Isso se deve ao fato de termos concedido ao agregador 1inch aprovações de permissão para esses ativos. Quanto ao token UNI, o remetente aprovado é o endereço da carteira do Uniswap.

Para garantir que você entenda adequadamente como passamos do endpoint "obter permissão de token ERC20" para os detalhes acima, vamos examinar os endereços exibidos acima da perspectiva dos parâmetros do endpoint. O campo de entrada pega um endereço de carteira e o passa para o nosso backend, que o atribui a ownerAddress. Também equipamos nosso dapp de exemplo com linhas de código que exploram o endereço da carteira conectada e criam um array de endereços de contrato de token pertencentes a essa carteira. Esses endereços de contrato de token são atribuídos ao parâmetro address. Quanto ao parâmetro spenderAddress, criamos um arquivo JSON que armazena os endereços de todas as DEXs populares. Assim, cobrimos todos os parâmetros necessários enquanto nos concentramos na cadeia Ethereum.

Nossa Resposta Backend

O servidor Express do nosso backend está sendo executado em "localhost:3001". Vamos dar uma olhada em sua resposta para obter mais esclarecimentos:

Image description

Observando o screenshot acima, você pode ver que também criamos o endpoint /approvals que exibe respostas. Assim, from_wallet é nosso endereço MetaMask que contém os tokens LINK, USDT, USDC e UNI. Além disso, esse parâmetro é o mesmo para todas as respostas. Em seguida, temos to_wallet representando o endereço da carteira de uma DEX - o parâmetro spenderAddress. Além disso, contract_address representa o endereço do contrato inteligente de um token ERC-20. Isso abrange os parâmetros de entrada.

O restante das respostas são informações on-chain relacionadas à transação de aprovação que o endpoint getTokenAllowance retorna. Elas incluem um hash de bloco, número de bloco, registro de data/hora de bloco, hash de transação, índice de transação, índice de registro e valor da permissão aprovada. Portanto, usamos esses detalhes para ocupar nosso frontend conforme apresentado acima.

Agora que você sabe o que é um verificador de permissão de token e como ele funciona, recomendamos que você atualize o script de backend básico acima e crie seu frontend exclusivo com base nele. Além disso, sinta-se à vontade para incluir outros endpoints avançados da API Web3 do Moralis. Afinal, agora que você tem sua chave de API do Moralis, todos eles estão à sua disposição.

Image description

Verificador de Permissão de Token - Visualize as Aprovações de Token da Carteira – Resumo*

O artigo de hoje te ensinou a verificar as aprovações de token de qualquer carteira com um pequeno trecho de código. Para isso, você conheceu o endpoint getTokenAllowance. Este último recebe três endereços diferentes (proprietário do token, gastador do token e contrato inteligente do token) e, em troca, informa se há ou não aprovações de token em aberto para um endereço de carteira em questão. Além disso, caso haja algumas aprovações de tokens em aberto, o endpoint também fornece detalhes da permissão. Além disso, você teve a oportunidade de seguir nosso exemplo e criar um script NodeJS simples que pode servir como um verificador de permissão de token.

Para entender ainda melhor o tópico de hoje, fizemos uma demonstração do nosso dapp (aplicativo descentralizado) de exemplo que permite visualizar as aprovações de token de carteira. Portanto, ao abordar as seções acima, você deve ter uma compreensão adequada de como aproveitar ao máximo os dados on-chain relacionados às permissões de token.

Você também aprendeu que, com sua chave de API Web3, pode usar muitos outros endpoints da API de dados Web3 do Moralis. Além disso, você pode contar com a API Auth do Moralis para cobrir a autenticação Web3. Além disso, usando a API Streams Moralis, você pode criar notificações em tempo real com base em eventos on-chain.

Se você já conhece os conceitos básicos de desenvolvimento Web3, pode mergulhar nos documentos Moralis e começar a CONSTRUIR. No entanto, talvez você precise de alguma orientação, inspiração ou mais informações sobre o desenvolvimento de blockchain. Nesse caso, não deixe de visitar o canal do Moralis no YouTube e o blog do Moralis. Alguns dos tópicos mais recentes se concentram no Notify Custom Webhooks da Alchemy, como e quando comprar um domínio ENS, como obter atualizações em tempo real do saldo da carteira de criptomoedas, o que é um xNFT (executable NFT), como criar um projeto de dashboard de criptomoedas, como criar um explorador de blockchain e muito mais.

Esse artigo foi escrito por Moralis e traduzido por Fátima Lima. O original pode ser lido aqui.

Latest comments (0)