Como criar um BSC Scan-clone com ReactJS - Parte 2

Esta é a segunda parte do meu tutorial sobre como criar um clone do site BSC Scan usando apenas ReactJS e as APIs oficiais da própria BSC Scan.

Na primeira parte nós criamos o projeto, fizemos setup na BSC Scan e construímos o módulo de serviço que faz a comunicação para trazer os dados que precisamos.

Nesta segunda parte nós vamos construir a interface para que o usuário consiga de fato aproveitar o que estamos construindo. Para isso precisaremos fazer alguns ajustes no projeto e trabalhar pesado com HTML e CSS, além do JavaScript que já vínhamos trabalhando.

Caso prefira, você pode acompanhar o conteúdo deste tutorial pelo vídeo abaixo ao invés de ler.

Então vamos lá!

#1 – Setup do Bootstrap

Analisando o código da interface do BSC Scan é possível ver que eles utilizaram a biblioteca de frontend Bootstrap, uma de minhas favoritas. Ela é uma biblioteca muito simples de utilizar e que dá uma aparência agradável para nossos projetos. Desta forma, usarei o Bootstrap aqui com você também e tudo o que não for descrito nos detalhes pode ser conferido na documentação do mesmo.

Para configurarmos o Bootstrap na aplicação, você pode usar libs de Bootstrap para React mas eu vou optar por usar o Botstrap roots mesmo, escrevendo tudo na mão. Para isso, começamos adicionando a referência ao CSS do Bootstrap no public/index.html da sua aplicação React, um pouco antes do </head>

E depois, no mesmo arquivo, adicionamos a referência ao JS do Bootstrap, um pouco antes do </body>

Agora podemos usar as classes CSS e os componentes JS do Bootstrap livremente em nossa aplicação, que vamos começar a construir a seguir.

#2 – Estrutura da Página

Se você olhar o site do BSC Scan verá que a página inicial foca no aspecto de busca. No topo temos um cabeçalho branco, com logo e menu. Logo abaixo temos a caixa de busca, com filtros em fundo preto. Depois as informações e ao final da página o rodapé. Vamos fazer algo bem similar.

Vamos começar estruturando a primeira parte, que é o cabeçalho branco. No return. do seu App.js, retorne a seguinte estrutura HTML.

Aqui temos um cabeçalho usando a própria imagem oficial do BSC Scan. Esta estrutura exige duas classes CSS que ainda não temos: wrapper para a div mais externa e header para o cabeçalho em si. Para criar estas classes, vá no arquivo App.css e inclua elas, como segue.

Com isso, você terá um cabeçalho como abaixo.

O próximo passo é a caixa de busca, em fundo preto, que deve ser posicionada logo abaixo.

Para isso, vamos voltar ao HTML do return do App.js, adicionando o bloco main da página, logo abaixo do bloco header e ainda dentro da div wrapper.

Aqui nós definimos que teremos um título e logo abaixo um formulário com uma div, onde iremos construir o filtro de pesquisa. Repare que este bloco exige as classes bg-dark, search e title. A classe input-group é nativa do Bootstrap, então não precisamos nos preocupar com ela.

Agora vá para o App.css e defina as 3 citadas acima.

Nestas classes o elemento que vale ser mencionado é a imagem de fundo que usaremos na caixa de pesquisa. Isso porque estamos pegando a mesma imagem do site do BSC Scan, que forma um efeito abstrato quebrando o preto sólido.

Isso já vai começar a criar um pouco a aparência que precisamos, mas estaremos longe ainda do resultado final, pois falta os componentes de pesquisa.

#3 – Formulário de Pesquisa

Para o formulário de pesquisa vamos precisar ir além do HTML em si. Primeiro, vamos definir os imports e states que serão necessários. Esses códigos JavaScript devem ficar dentro da função do App.js, mas antes do return que renderiza o HTML.

Os imports são auto explicativos, então vamos direto para o JS na função App(). Começamos definindo uma constante que nada mais é do que o hash do token BNB, informação que vamos precisar algumas vezes.

Depois, definimos um state de pesquisa, definindo que por padrão a pesquisa inicial é do type 1, token BNB (usando a constante definida anteriormente) e address vazio.

Na sequência, definimos dois states, um de resultado bem sucedido e outro de erro. Usaremos um pouco mais à frente e também já deixei pronta uma função cleaner, para limpar os mesmos.

E por último, uma função importantíssima que chamei de onInputChange que serve para manter o state de busca sincronizado a cada alteração que vamos ter. Isso porque nossa pesquisa tem várias informações, lembra? Type, token, etc. Então essa função vai servir para atualizar esses dados de maneira genérica, de acordo com as informações que vem no objeto event.

Para criar os componentes necessários para nossa caixa de busca vamos usar bastante do conceito de componentização do React. Para isso, vamos criar uma pasta componentes na nossa aplicação e dentro vamos criar o primeiro deles, o SearchSelect.js.

A função deste componente é encapsular os tipos de pesquisa possíveis e avisar através da propriedade onChange quando o usuário selecionou um deles. Agora, voltando ao App.js, importe este componente.

E use ele dentro da div com classe input-group, que deixamos sem conteúdo anteriormente.

Com isso, já deve aparecer um select na sua tela e quando ele for utilizado, o seu type será armazenado na propriedade type conforme disparo da função onInputChange, que definimos como callback da propriedade onChange.

De acordo com o tipo de pesquisa selecionado, podem ser necessárias informações adicionais, certo? No caso de pesquisas do tipo 1 (balance), precisamos perguntar qual o token deve ser trazido o saldo. Para isso, vamos criar nosso segundo componente, o TokenSelect.js

Aqui eu deixei pré-definido alguns tokens com os seus hashes da Testnet. É importante frisar que esses hashes mudam entre testnet e produção, ok? No mais é um select bem parecido com o anterior, que vai disparar uma função onChange toda vez que tiver um valor selecionado.

Agora para usar este componente, primeiro importe ele no topo do arquivo App.js, como fizemos com o SearchSelect e depois coloque ele ao lado do SearchSelect no HTML, mas condicionando sua renderização ao tipo de pesquisa ser igual a 1.

Assim, toda vez que o tipo de pesquisa for 1, vai aparecer o token select pro usuário. Repare também que passamos a informação do hash do BNB para dentro dele através de uma propriedade default. Isso porque precisamos saber quando o usuário está filtrando por BNB ou outras moedas, pois temos diferenciação nas funções, lembra?

Agora, o próximo passo é posicionar o campo de texto e já vou incluir o botão, pois não tem nada de muito especial aqui.

O input de texto não tem nada especial e continua posicionando a função onInputChange que criamos antes como sendo o seu callback a cada alteração do usuário.

Já o botão é um submit padrão do HTML com uma classe CSS abaixo.

Usei um SVG de busca dentro dele que peguei no site Hero Icons. O botão de submit, quando pressionado, vai disparar a função onSubmit, que definimos na propriedade de mesmo nome no HTML Form mais externo. Esta função deve ser definida antes do return.

É nesta função que usamos o nosso objeto de busca configurado pelo usuário para saber o que devemos chamar das APIs. Conforme o resultado das APIs, mandamos para o state de result ou de error, que usaremos mais tarde.

O resultado visual já é bem interessante e ele QUASE funciona (falta exibir o resultado).

#4 – Exibindo os Resultados

Agora que já temos a barra de pesquisa pronta e até mesmo a pesquisa em si sendo realizada para saldo, é hora de ajustarmos a última parte da interface, que é a de resultados.

Para isso, vamos criar mais um componente, o BalanceCard.js

Esse componente serve para exibir de maneira mais agradável os resultados das pesquisas de saldo. Adicione uma última classe CSS ao nosso App.css

Agora importe este componente no App.js e chame ele logo abaixo do formulário de pesquisa.

Com isso, caso a pesquisa seja de saldo e tenha resultado, imprimimos um BalanceCard. Caso contrário, imprimimos um erro. E com isso temos o primeiro fluxo finalizado, que tal avançarmos para os outros dois?

Para pesquisas de transações precisamos que o usuário informe se quer transações BNB (nativas da BSC) ou de outros tokens. Para isso vamos criar mais um componente chamado TransferSelect.js

Importe ele no App.js e posicione-o ao lado do TokenSelect, mas condicionando a sua exibição ao fato da busca ser do tipo 2.

E ajuste a função onSubmit para que ela tenha um if para esse tipo de pesquisa também.

Isso já o suficiente para funcionar, mas ainda sem exibir os resultados. Para os resultados precisaremos considerar que virão várias transações como resultado. Então vamos criar um componente para renderizar UMA transação e depois usaremos ele várias vezes. Vou chamar esse componente de TransactionCard.js

Aqui não tem nada muito elaborado e na preguiça de especificar as propriedades uma a uma, usei um laço em cima das propriedades do objeto. Agora importe este componente no App.js e use-o dentro de um laço logo abaixo da renderização do resultado de saldo.

O resultado fica bem bacaninha.

E por último, o processo para a terceira e última forma de pesquisa é idêntico e até mais simples, já que para pesquisar contratos não há subfiltro. O usuário apenas seleciona o tipo de pesquisa, informa o endereço e ao clicar em pesquisar vamos precisar de mais um if na lógica do onSubmit (versão final).

E para exibir o resultado precisaremos de um último componente chamado ContractCard.js

Esse componente deve ser importado no App.js e chamado logo abaixo dos demais.

E com isso finalizamos a nossa aplicação, espero que tenha gostado!