Como criar um BSC Scan-clone com ReactJS

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.

npx create-react-app bscscan

1	npx create-react-app bscscan

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.

npm i

npm i

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

npm i axios url

1	npm i axios url

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

npm start

npm start

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:

REACT_APP_API_KEY=XXXX
REACT_APP_API_URL=https://api-testnet.bscscan.com/api

1 2	REACT_APP_API_KEY=XXXX REACT_APP_API_URL=https://api-testnet.bscscan.com/api

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.

#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.

const axios = require('axios');

const API_KEY = process.env.REACT_APP_API_KEY;
const BASE_URL = process.env.REACT_APP_API_URL;

const axios = require('axios');

const API_KEY = process.env.REACT_APP_API_KEY;

const BASE_URL = process.env.REACT_APP_API_URL;

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.

export async function getBnbBalance(address) {
    const url = `${BASE_URL}?module=account&action=balance&address=${address}&tag=latest&apikey=${API_KEY}`;
    const response = await axios.get(url);
    const balance = parseFloat(response.data.result) / 1000000000000000000;
    return balance;
}

export async function getBnbBalance(address) {

const url = `${BASE_URL}?module=account&action=balance&address=${address}&tag=latest&apikey=${API_KEY}`;

const response = await axios.get(url);

const balance = parseFloat(response.data.result) / 1000000000000000000;

return balance;

}

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.

import { useEffect, useState } from 'react';
import { getBnbBalance } from './services/BscScanService';
import logo from './logo.svg';
import './App.css';

function App() {

  const [result, setResult] = useState();

  useEffect(() => {
    getBnbBalance('0x9cd29e15d5647E702696c90D64dfB31425738c06')
      .then(balance => setResult(balance))
      .catch(err => setResult(err))
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {JSON.stringify(result)}
        </p>
      </header>
    </div>
  );
}

export default App;

import { useEffect, useState } from 'react';

import { getBnbBalance } from './services/BscScanService';

import logo from './logo.svg';

import './App.css';

function App() {

const [result, setResult] = useState();

useEffect(() => {

getBnbBalance('0x9cd29e15d5647E702696c90D64dfB31425738c06')

.then(balance => setResult(balance))

.catch(err => setResult(err))

}, [])

return (

<p>

{JSON.stringify(result)}

</p>

</header>

</div>

);

}

export default App;

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.

#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.

export async function getTokenBalance(address, contract) {
    const url = `${BASE_URL}?module=account&action=tokenbalance&contractaddress=${contract}&address=${address}&tag=latest&apikey=${API_KEY}`;
    const response = await axios.get(url);
    const balance = parseFloat(response.data.result) / 1000000000000000000;
    return balance;
}

export async function getTokenBalance(address, contract) {

const url = `${BASE_URL}?module=account&action=tokenbalance&contractaddress=${contract}&address=${address}&tag=latest&apikey=${API_KEY}`;

const response = await axios.get(url);

const balance = parseFloat(response.data.result) / 1000000000000000000;

return balance;

}

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.

export async function getContract(hash) {
    const url = `${BASE_URL}?module=contract&action=getsourcecode&address=${hash}&apikey=${API_KEY}`;
    const response = await axios.get(url);
    const status = response.data.status;
    if (status !== '1') throw new Error(`Contract not found.`);
    return response.data.result;
}

export async function getContract(hash) {

const url = `${BASE_URL}?module=contract&action=getsourcecode&address=${hash}&apikey=${API_KEY}`;

const response = await axios.get(url);

const status = response.data.status;

if (status !== '1') throw new Error(`Contract not found.`);

return response.data.result;

}

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:

export async function getTransfers(address) {
    const url = `${BASE_URL}?module=account&action=tokentx&address=${address}&apikey=${API_KEY}&sort=desc`;
    const response = await axios.get(url);
    const status = response.data.status;
    if (status !== '1') throw new Error(response.data.message);
    return response.data;
}

export async function getTransfers(address) {

const url = `${BASE_URL}?module=account&action=tokentx&address=${address}&apikey=${API_KEY}&sort=desc`;

const response = await axios.get(url);

const status = response.data.status;

if (status !== '1') throw new Error(response.data.message);

return response.data;

}

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:

export async function getBnbTransfers(address) {
    const url = `${BASE_URL}?module=account&action=txlist&address=${address}&apikey=${API_KEY}&sort=desc`;
    const response = await axios.get(url);
    const status = response.data.status;
    if (status !== '1') throw new Error(response.data.message);
    return response.data;
}