Dê o pontapé inicial no desenvolvimento do frontend do seu dapp com o create-eth-app

Da última vez, analisamos a visão geral da Solidity (opens in a new tab) e já mencionamos o create-eth-app (opens in a new tab). Agora você descobrirá como usá-lo, quais recursos estão integrados e ideias adicionais sobre como expandi-lo. Iniciado por Paul Razvan Berg, o fundador do Sablier (opens in a new tab), este aplicativo dará o pontapé inicial no desenvolvimento do seu frontend e vem com várias integrações opcionais para você escolher.

Instalação

A instalação requer o Yarn 0.25 ou superior (npm install yarn --global). É tão simples quanto executar:

yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start

Ele usa o create-react-app (opens in a new tab) internamente. Para ver seu aplicativo, abra http://localhost:3000/. Quando você estiver pronto para implantar em produção, crie um pacote minificado com yarn build. Uma maneira fácil de hospedar isso seria no Netlify (opens in a new tab). Você pode criar um repositório no GitHub, adicioná-lo ao Netlify, configurar o comando de build e pronto! Seu aplicativo será hospedado e poderá ser usado por todos. E tudo isso de graça.

Recursos

React e create-react-app

Em primeiro lugar, o coração do aplicativo: React e todos os recursos adicionais que vêm com o create-react-app. Usar apenas isso é uma ótima opção se você não quiser integrar a Ethereum. O próprio React (opens in a new tab) torna a construção de interfaces de usuário (UIs) interativas muito fácil. Pode não ser tão amigável para iniciantes quanto o Vue (opens in a new tab), mas ainda é o mais usado, tem mais recursos e, o mais importante, milhares de bibliotecas adicionais para escolher. O create-react-app torna muito fácil começar com ele também e inclui:

• Suporte à sintaxe React, JSX, ES6, TypeScript e Flow.
• Extras de linguagem além do ES6, como o operador de propagação de objetos (object spread operator).
• CSS com prefixo automático, para que você não precise de -webkit- ou outros prefixos.
• Um executor de testes de unidade interativo e rápido com suporte integrado para relatórios de cobertura.
• Um servidor de desenvolvimento em tempo real que avisa sobre erros comuns.
• Um script de build para empacotar JS, CSS e imagens para produção, com hashes e sourcemaps.

O create-eth-app em particular está fazendo uso dos novos hooks effects (opens in a new tab). Um método para escrever os chamados componentes funcionais, que são poderosos, mas muito pequenos. Veja a seção abaixo sobre o Apollo para saber como eles são usados no create-eth-app.

Yarn Workspaces

Os Yarn Workspaces (opens in a new tab) permitem que você tenha vários pacotes, mas podendo gerenciar todos eles a partir da pasta raiz e instalando dependências para todos de uma vez usando yarn install. Isso faz sentido especialmente para pacotes adicionais menores, como o gerenciamento de endereços/ABI de contratos inteligentes (as informações sobre onde você implantou quais contratos inteligentes e como se comunicar com eles) ou a integração do The Graph, ambos parte do create-eth-app.

Ethers.js

Embora a Web3 (opens in a new tab) ainda seja a mais usada, a Ethers.js (opens in a new tab) tem ganhado muito mais tração como alternativa no último ano e é a que está integrada no create-eth-app. Você pode trabalhar com ela, mudar para a Web3 ou considerar a atualização para a Ethers.js v5 (opens in a new tab), que está quase saindo da fase beta.

The Graph

O GraphQL (opens in a new tab) é uma maneira alternativa de lidar com dados em comparação com uma API Restful (opens in a new tab). Eles têm várias vantagens sobre as APIs Restful, especialmente para dados de blockchain descentralizados. Se você estiver interessado no raciocínio por trás disso, dê uma olhada em O GraphQL impulsionará a Web Descentralizada (opens in a new tab).

Normalmente, você buscaria dados do seu contrato inteligente diretamente. Quer ler a hora da última negociação? Basta chamar MyContract.methods.latestTradeTime().call(), que busca os dados de um nó da Ethereum para o seu dapp. Mas e se você precisar de centenas de pontos de dados diferentes? Isso resultaria em centenas de buscas de dados no nó, cada vez exigindo um RTT (opens in a new tab), tornando seu dapp lento e ineficiente. Uma solução alternativa pode ser uma função de chamada de busca (fetcher) dentro do seu contrato que retorna vários dados de uma vez. No entanto, isso nem sempre é o ideal.

E então você também pode estar interessado em dados históricos. Você quer saber não apenas a hora da última negociação, mas os horários de todas as negociações que você mesmo já fez. Use o pacote de subgrafo do create-eth-app, leia a documentação (opens in a new tab) e adapte-o aos seus próprios contratos. Se você estiver procurando por contratos inteligentes populares, pode até já haver um subgrafo. Confira o explorador de subgrafos (opens in a new tab).

Depois de ter um subgrafo, ele permite que você escreva uma consulta simples em seu dapp que recupera todos os dados importantes da blockchain, incluindo os históricos de que você precisa, exigindo apenas uma busca.

Apollo

Graças à integração do Apollo Boost (opens in a new tab), você pode integrar facilmente o The Graph em seu dapp React. Especialmente ao usar React hooks e Apollo (opens in a new tab), buscar dados é tão simples quanto escrever uma única consulta GraphQL em seu componente:

const { loading, error, data } = useQuery(myGraphQlQuery)

React.useEffect(() => {
  if (!loading && !error && data) {
    console.log({ data })
  }
}, [loading, error, data])

Modelos

Além disso, você pode escolher entre vários modelos diferentes. Até agora, você pode usar uma integração com Aave, Compound, Uniswap ou Sablier. Todos eles adicionam endereços importantes de contratos inteligentes de serviço, juntamente com integrações de subgrafos pré-fabricadas. Basta adicionar o modelo ao comando de criação, como yarn create eth-app my-eth-app --with-template aave.

Aave

A Aave (opens in a new tab) é um mercado de empréstimo de dinheiro descentralizado. Os depositantes fornecem liquidez ao mercado para obter uma renda passiva, enquanto os mutuários podem fazer empréstimos usando colaterais. Um recurso exclusivo da Aave são os empréstimos relâmpago (opens in a new tab), que permitem que você pegue dinheiro emprestado sem nenhum colateral, desde que devolva o empréstimo em uma única transação. Isso pode ser útil, por exemplo, para lhe dar dinheiro extra em negociações de arbitragem.

Os tokens negociados que rendem juros são chamados de aTokens.

Ao escolher integrar a Aave com o create-eth-app, você obterá uma integração de subgrafo (opens in a new tab). A Aave usa o The Graph e já fornece vários subgrafos prontos para uso na Ropsten (opens in a new tab) e na Mainnet (opens in a new tab) em formato bruto (raw) (opens in a new tab) ou formatado (opens in a new tab).

Compound

A Compound (opens in a new tab) é semelhante à Aave. A integração já inclui o novo subgrafo da Compound v2 (opens in a new tab). Os tokens que rendem juros aqui são surpreendentemente chamados de cTokens.

Uniswap

O Uniswap (opens in a new tab) é uma corretora descentralizada (DEX). Os provedores de liquidez podem ganhar taxas fornecendo os tokens ou ether necessários para ambos os lados de uma negociação. Ele é amplamente utilizado e, portanto, tem uma das maiores liquidez para uma gama muito ampla de tokens. Você pode integrá-lo facilmente em seu dapp para, por exemplo, permitir que os usuários troquem seus ETH por DAI.

Infelizmente, no momento em que este artigo foi escrito, a integração é apenas para o Uniswap v1 e não para o recém-lançado v2 (opens in a new tab).

Sablier

O Sablier (opens in a new tab) permite que os usuários façam pagamentos de dinheiro em fluxo contínuo (streaming). Em vez de um único dia de pagamento, você recebe seu dinheiro constantemente, sem administração adicional após a configuração inicial. A integração inclui seu próprio subgrafo (opens in a new tab).

O que vem a seguir?

Se você tiver dúvidas sobre o create-eth-app, acesse o servidor da comunidade Sablier (opens in a new tab), onde você pode entrar em contato com os autores do create-eth-app. Como alguns dos primeiros próximos passos, você pode querer integrar um framework de interface de usuário (UI) como o Material UI (opens in a new tab), escrever consultas GraphQL para os dados de que você realmente precisa e configurar a implantação.