Kit para iniciantes em dApp de EVM (Ethereum Virtual Machine - Máquina Virtual Ethereum)

Postado em 16 de Novembro de 2022

Atualizado em 24 de Novembro de 2022

• O que estamos construindo? Usando o Hardhat, vamos implantar um contrato inteligente para a rede de teste Goerli. Esse contrato cria um token e também é capaz de enviar esses tokens para outro endereço. Para o frontend, usaremos o React, para a interação com o contrato inteligente usaremos a Metamask e o Web3-react. Por fim, para a análise do nosso dApp, usaremos o Sumer.

O Sumer está construindo uma solução completa que ajuda os criadores de dApp a compreender e trazer melhor usabilidade para os usuários de dApp. A primeira versão do Sumer será lançada em Janeiro de 2023, embora exista a primeira versão do seu SDK que já podemos experimentar : )

• Do que precisamos?

Do Node.js e de um editor de código.

Visão geral do dApp:

Ao contrário de um aplicativo da web, um aplicativo descentralizado, ou dApp, tem o seu back-end em execução em uma rede ponto-a-ponto descentralizada, como a Ethereum. Para dApps executados em uma blockchain baseada em EVM, o back-end são contratos inteligentes executados pela EVM. Isso significa que o dApp tem as mesmas propriedades que contratos inteligentes e a rede de blockchain onde reside.

Arquitetura do dApp:

A arquitetura do dApp ainda está sendo definida e depende, como qualquer aplicativo, dos serviços que o aplicativo deve fornecer. No entanto, existem alguns componentes principais que um dApp deve ter:

• Front-end: permite que os usuários interajam com os contratos inteligentes através de componentes gráficos interativos como botões e ícones, entre outros. Assim como aplicativos da web, essa interface de usuário é executável em qualquer navegador.
• Carteira: Uma carteira é uma ferramenta ou aplicativo de software que gerencia a chave privada e os endereços (chaves públicas) da conta. As carteiras não têm custódia dos ativos criptográficos da conta. Uma carteira é apenas um aplicativo que permite ao proprietário da conta assinar transações e, portanto, interagir com a blockchain e os contratos inteligentes que residem na rede.
• Nó ou provedor de nó: permite a comunicação com a blockchain, por exemplo, leitura de dados ou envio de transações. Um nó transmitirá as transações e os mineradores validarão os novos estados que as transações podem produzir. Qualquer pessoa pode executar um nó. No entanto, devido à dificuldade e aos custos que a execução de um nó pode ter, os dApps geralmente dependem de um serviço terceirizado ou um provedor de nó. Todo cliente da Ethereum ou provedor de nó implementa uma especificação JSON-RPC com uma configuração uniforme de métodos.
• Rede de blockchain: é a camada base, onde a EVM executa os contratos inteligentes do dApp e armazena os novos estados na blockchain.

Vamos construir nosso dApp

1.- Implantação do contrato inteligente / back-end

Para desenvolver e implantar nosso contrato, usaremos o ambiente de desenvolvimento Hardhat. Crie uma nova pasta e instale o Hardhat:

mkdir my-dapp && cd my-dapp
mkdir backend && cd backend
npm init
npm install --save-dev hardhat
npm install --save-dev @nomicfoundation/hardhat-toolbox

Uma vez instalado o Hardhat, podemos criar um novo projeto com:

npx hardhat

e selecionar: Create an empty hardhat.config.js

A estrutura do nosso projeto deve ficar assim:

Agora vamos criar uma pasta contracts e dentro dela nosso contrato inteligente: Token.sol

mkdir contracts && cd contracts
touch Token.sol

Cole o código do token no arquivo Token.sol. O contrato está cheio de comentários que explicam sua funcionalidade. Parabéns à equipe do Hardhat! Se desejar, você pode editar o name e symbol do token.

Agora podemos compilar nosso contrato de token usando o Hardhat:

npx hardhat compile

Depois de compilar nosso contrato, podemos implantá-lo na rede Goerli. A fim de comunicar com a blockchain, usaremos o provedor de nó Alchemy. Para assinar a transação de implantação, precisaremos da chave privada da nossa carteira Metamask e alguns eth da Goerli.

Edite o seu hardhat.config.js:

require("@nomicfoundation/hardhat-toolbox");

// Vá para https://www.alchemyapi.io, inscreva-se, crie
// um novo App no seu painel de controle, e substitua "KEY" (CHAVE) por sua chave
const ALCHEMY_API_KEY = "KEY";

// Substitua essa chave privada com sua chave privada da conta da Goerli
// Para exportar sua chave privada da Metamask, abra a Metamask e
// vá para Account Details > Export Private Key(Detalhes da conta > Exportar chave privada)
// Cuidado: NUNCA coloque Ether real em suas contas de teste
const GOERLI_PRIVATE_KEY = "YOUR GOERLI PRIVATE KEY";

module.exports = {
  solidity: "0.8.9",
  networks: {
    goerli: {
      url: `https://eth-goerli.alchemyapi.io/v2/${ALCHEMY_API_KEY}`,
      accounts: [GOERLI_PRIVATE_KEY]
    }
  }
};

Para evitar expor a chave da API ou chave privada, devemos usar variáveis evn, por exemplo, dotenv.

Agora precisamos de um script que implante nosso contrato. Vamos criar uma pasta scripts, e, dentro dela, um arquivo deploy.js:

async function main() {
    const [deployer] = await ethers.getSigners();

    console.log("Deploying contracts with the account:", deployer.address);

    console.log("Account balance:", (await deployer.getBalance()).toString());

    const Token = await ethers.getContractFactory("Token");
    const token = await Token.deploy();

    console.log("Token address:", token.address);
}

main()
    .then(() => process.exit(0))
    .catch((error) => {
        console.error(error);
        process.exit(1);
    });

E agora tudo para implantar seu contrato na rede de blockchain Goerli deve estar definido. Se executarmos:

npx hardhat run scripts/deploy.js --network goerli

A seguinte mensagem deve ser exibida:

Deploying contracts with the account: your wallet account 
Account balance: your balance
Token address: the token contract address

Parabéns, você acabou de implantar um contrato inteligente na rede Goerli! Se você copiar o endereço do contrato e for acessar o etherscan da Goerli, você encontrará sua implantação lá :D. Usando o endereço do contrato, você também pode importar os tokens para sua carteira da Metamask:

2.- Front-end
No diretório da raiz do nosso projeto, crie uma nova pasta frontend usando create-react-app e, dentro da pasta do front-end, instale Ethers, Web3-react e Sumer-sdk.

npx create-react-app frontend
cd frontend
npm i ethers
npm i @web3-react/core @web3-react/injected-connector
npm i sumer-sdk

A estrutura do nosso projeto deve ficar assim:

No my-app/frontend/src/index.js habilite o uso do Web3-react e do Sumer-sdk:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

import { Web3ReactProvider } from "@web3-react/core";
import { SumerObserver, Client } from "sumer-sdk";

// essa é uma chave temporária, uma vez que o Sumer for liberado,você será capaz
// de criar sua própria chave para seu dApp
const key = '04a23d9f-1c7a-414e-b400-847658ef5cd6'

// configure o Web3-react
const getLibrary = (provider) => {
  const client = new Client(provider, key)
  const library = new SumerObserver(client, key);
  return library;
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Web3ReactProvider getLibrary={getLibrary}>
    <App />
  </Web3ReactProvider>
);

Também precisamos do endereço do nosso contrato implantado e da interface do contrato, gerados no processo de compilação. Para simplificar, basta copiar o arquivo /backend/artifacts/contracts/Token.sol/Token.json para o frontend/src/.

Em nosso frontend/src/App.js, podemos começar conectando nossa carteira à rede de teste Goerli:

function ConnectMetamask() {
  const { active, account, chainId, activate, deactivate } = useWeb3React()
  if (!active) {
    return (
      <div >
        <button onClick={() => { activate(injected) }}>Connect Metamask</button>
      </div >
    )
  } else if (chainId === 5) {
    return (
      <div >User Address: {account}
        < button onClick={deactivate} > disconnect</button >
      </div >
    )
  } else {
    return (
      <div >
        {alert("please change to the göerli testnet")}
      </div >
    )
  }
}

Também precisaremos de uma função que permita chamar a função de transferência do nosso contrato inteligente de token:

async function sendTokens(to, amount) {

  const contract = SumerObserver.Contract(CONTRACT_ADDR, Token.abi, provider.getSigner(),
    provider.apikey, chainId)

  const tx = await contract.transfer(to, amount)
  await tx.wait()
}

O código App.js completo pode ser encontrado aqui.

Finalmente, você pode iniciar seu aplicativo react como de costume: npm
start

O código completo pode ser encontrado aqui. Obrigado por ler isto, se você tiver qualquer dúvida, por favor, entre em contato conosco. Feliz hacking, amigo :D

Esse artigo foi escrito por Mario M. Orozco e traduzido por Isabela Curado Nehme. Seu original pode ser lido aqui.