Como criar um BSC Scan-clone com ReactJS

Node.js

Como criar um BSC Scan-clone com ReactJS

Luiz Duarte
Escrito por Luiz Duarte em 25/04/2022
Junte-se a mais de 34 mil devs

Entre para minha lista e receba conteúdos exclusivos e com prioridade

Todo mundo que compra, vende ou utiliza algum token BSC conhece o BSC Scan, certo?

Se você está chegando agora, a BSC é a blockchain da Binance, ou BNB Smart Chain (aka Binance Smart Chain) e o BSC Scan é o frontend web para fazer consultas nessa rede. Com ele, você pode consultar saldos de carteiras, ver detalhes de transações, conferir os contratos dos tokens, etc.

Ou seja, ao invés de fazer complexas chamadas de baixo nível usando terminais de linha de comando, o BSC Scan (que nada mais é do que uma versão BSC do ainda mais famoso EtherScan) permite que qualquer usuário consiga analisar suas transações, ver seu saldo em carteira e muito mais. Mas atenção: o BSC Scan é um “scanner”, uma ferramenta de consulta, ou seja, você não faz negociações através deles, ele não é uma exchange ou coisa parecida e sequer uma carteira de criptomoedas, ele é apenas uma interface web.

Apesar dessa sua característica “read-only”, o BSC Scan é extremamente útil pois as suas informações são acessíveis publicamente não apenas para usuários mas também via APIs, o que permite que você construa aplicações (tradicionais ou dapps) que se alimentem delas para fornecer serviços importantes nesta era de web 3.0.

Sendo assim, neste tutorial eu vou lhe ensinar como utilizar as APIs do BSC Scan para criar um clone dele próprio, o que vai te auxiliar a entender como tudo funciona e depois você poderá criar suas próprias integrações e aplicações.

Caso prefira, você pode acompanhar este tutorial com o vídeo abaixo, ao invés de ler.

#1 – Antes de começar

Pra conseguir acompanhar este tutorial é importante que você já saiba o básico de programação para a web com JavaScript. A parte de frontend você aprende com este ebook gratuito e a parte de React, embora não obrigatória, você pode aprender com esta série aqui. Falo que não é obrigatória pois você pode fazer tudo com JS client-side vanilla e inclusive sem biblioteca alguma, usando Fetch API. Eu não acho produtivo, mas é uma possibilidade.

Também é importante que você possua uma carteira de criptomoedas, como a MetaMask que ensino a criar e utilizar neste tutorial. Não se preocupe com saldo e moedas para teste, isso é ensinado no tutorial também, usaremos a rede de testes da Binance como sempre (Testnet). Guarde o endereço da sua carteira com você, pois precisará dela.

Além dos conhecimentos técnicos básicos, você vai precisar ter uma conta criada na BSC Scan. Não se preocupe, ela é grátis e você cria no site oficial. Uma vez dentro da área da sua conta, você deve criar uma API Key para que possa se comunicar com as APIs dele, como mostra a imagem abaixo. Dê um nome para sua API Key e salve ela em algum lugar seguro pois precisaremos dela mais adiante.

E por último, mas não menos importante, tudo que vamos fazer aqui foi aprendido estudando a documentação oficial da BSC Scan, que você encontra neste link. Então caso algo que você queira fazer não seja ensinado no tutorial, você saberá onde encontrar a informação.

#2 – Setup do Projeto

Agora vamos criar o nosso projeto. Vou fazer ele em uma aplicação ReactJS, mas como mencionei, pode usar HTML puro se quiser. Para criar a aplicação, rode o seguinte comando na sua máquina.

Isso vai criar uma aplicação bscscan na sua máquina, um processo que pode levar alguns minutos dependendo da sua Internet. Depois que terminar, entre na pasta do projeto e rode o seguinte comando para baixar as dependências.

E por último, vamos instalar algumas dependências adicionais que vamos precisar.

Agora que temos o setup básico pronto, rode a aplicação com o comando abaixo.

Isso vai subir no seu navegador a aplicação na porta 3000. Se tudo der certo, verá o logo do React em uma home page de exemplo.

Agora voltando à sua aplicação, crie um arquivo .env na raiz do projeto para guardarmos as configurações de ambiente. Elas são duas e devem ter exatamente estes nomes para que funcionem:

O valor ao lado do nome da variável de final API_KEY deve ser a sua Api Key criada no painel da conta BSC Scan que você criou previamente.

E o valor ao lado da variável de final API_URL deve ser o endereço da BSC Scan Testnet ou produção, conforme o ambiente que estiver usando (apara produção, apenas remova o ‘-testnet’ da URL). Reinicie a sua aplicação depois de criar o .env para que ele seja carregado na inicialização.

Com o setup concluído, agora podemos começar a desenvolver a nossa aplicação.

Curso Node.js e MongoDB

#3 – Criando o Serviço

Nossa aplicação vai ser bem simples e você pode evolui-la depois livremente. Antes mesmo de criarmos o frontend, vamos criar um módulo de serviço, que vai ser responsável por fazer as chamadas HTTP às APIs do BSC Scan e devolver os dados para o ReactJS renderizar para o usuário no browser.

Nosso serviço (e consequentemente nossa aplicação) vai fazer basicamente três coisas:

  • consultar saldo de uma carteira;
  • consultar informações de transferências;
  • consultar informações de contratos;

Existem outras APIs que você pode usar, mas o processo é um tanto repetitivo, então essas aí serão mais do que o suficiente para te darem as ideias centrais de como se integrar com o BSC Scan.

Então crie uma pasta services e dentro coloque um módulo BscScanService.js. Esse módulo conter as funções que vão encapsular chamadas HTTP feitas com Axios. Sendo assim, vamos começar importando o Axios e carregando as nossas variáveis de ambiente em constantes locais com nome mais curto.

Agora, podemos criar uma a uma as funções. A mais básica de todas é de pegar o saldo de BNB de uma carteira. Isso porque BNB é a criptomoeda nativa, o token de governança da blockchain BSC. Quando pedimos o saldo de uma carteira BSC é o saldo em BNB que teremos, o qual podemos obter com o código abaixo.

Na primeira linha nós montamos a URL da nossa requisição, combinando a URL base, o endereço da carteira (address), a API Key e as configs da requests como action e module, melhor explicadas na documentação da BSC Scan. Com essa URL é feita a chamada com axios e o retorno é convertido e ajustado conforme casas decimais (18), sendo retornado o balance.

Para que seja possível testar esta função antes mesmo de ter todo o frontend construído você pode ir no seu App.js e lá fazer um código parecido com esse, substituindo o endereço da minha carteira de testes pela sua, na chamada do useEffect.

O código acima apenas imprime na tela o saldo em BNB de uma carteira informada na chamada da função imediatamente assim que a aplicação inicia. Use ele como base para testar as demais funções que vamos criar.

Curso Web3 para Iniciantes

#4 – Demais Funções

Agora que fizemos funcionar a primeira das funções fica muito mais fácil avançar para as demais.

A segunda função que vamos criar é a de ver o saldo de outros tokens presentes em uma carteira. Para você entender, os tokens só existem realmente dentro das regras dos contratos inteligentes que os originam. Assim, se quero fazer qualquer operação (saldo, transferência, etc) envolvendo um token que não seja o BNB, preciso passar também a informação do contrato que deve processar a minha requisição.

Repare que a construção é idêntica à da função anterior, mas que a action muda de balance para tokenbalance e que agora temos um parâmetro adicional na URL chamado contractaddress que deve ser informado. Para testar, você pode ajustar o App.js conforme fizemos anteriormente, mas mudando a função que está sendo chamada no useEffect. Para saber os endereços dos contratos você pode consultar o site do BSC Scan, sendo que separei alguns populares abaixo:

  • BNB: 0x12Eb9ef44dE5fbea1b2F5Ff7A9a375cAe9bFB2eb
  • BTC: 0x53598858bC64f5f798B3AcB7F82FF2CB2aF463bf
  • ETH: 0xd66c6B4F0be8CE5b39D52E0Fd1344c389929B378
  • USDC: 0x64544969ed7EBf5f083679233325356EbE738930

A próxima função vai ser a de ver informações de um contrato. Existem várias informações possíveis e aqui vou fazer uma consulta pelo código-fonte do contrato.

Nesta chamada o module usado é contract ao invés do account que vínhamos usando, enquanto que a action é getsourcecode, passando o endereço do contrato por parâmetro. Se tudo deu certo, será retornado um objeto com informações sobre o contrato, incluindo seu código fonte. Para testar, pode usar os mesmos endereços de contratos que forneci anteriormente.

E por último, mas não menos importante, vamos criar a função que permite consultar as transferências feitas envolvendo uma carteira. As função na verdade, pois assim como no caso do saldo, precisamos criar uma função quando é BNB e outra para quando são outros tokens.

Primeiro a função para os outros tokens:

Aqui novamente voltamos ao módulo account, mas com a action tokentx que nos permite obter as últimas transferências de tokens realizadas de ou para a carteira que estamos monitorando.

E agora a função para transferências de BNB:

É praticamente idêntica, apenas muda a action para txlist, então sinta-se livre para otimizar esse código para diminuir as repetições.

E com isso terminamos a primeira metade do nosso BSC Scan Clone. A segunda parte você confere neste link.

Go go go!

TAGS:

Olá, tudo bem?

O que você achou deste conteúdo? Conte nos comentários.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *