Como aprender Blockchain e Smart Contract em 1 dia!

O Hardhat é um kit de ferramentas (um SDK) que podemos utilizar para programar na Ethereum.

Para instalar o Hardhat precisamos primeiro instalar o Node.js.

Veja no início desse tutorial anterior de React o passa a passo de como instalar o Node assim como suas ferramentas para gestão de pacotes: npm e npx.

Após instalar o Node, vamos começar criando a pasta do nosso projeto. Abra uma janela de comandos no seu computador e digite:

mkdir tutorial_smart_contract
cd tutorial_smart_contract

Nota: Pode dar o nome que quiser para seu projeto :-)

E então vamos iniciar um projeto Node nessa nova pasta com o comando abaixo:

npm init

Digite ‘Enter’ para todas as perguntas e observe o arquivo package.json criado pelo Node.

Utilizamos a ferramenta VSCode para editar nossos arquivos aqui nesse tutorial.

E finalmente instalamos o Hardhat com os comandos abaixo:

npm install hardhat
npx hardhat

Digite ‘Enter’ para todas as opções.

Esse último comando cria um projeto Hardhat para a gente. Observe a estrutura e os arquivos criados.

Para complementar a instalação do Hardhat, instale os componentes adicionais abaixo:

npx install @nomicfoundation/hardhat-toolbox

A linguagem de programação utilizada pelos Smart Contracts da Ethereum se chama Solidity. É baseada no JavaScript.

Vamos criar nosso primeiro Smart Contract em Solidity e então publicá-lo na Ethereum.

Crie um novo arquivo com a extensão ‘.sol’ na pasta ‘contracts’.

Copie e cole o código no seu novo arquivo Solidity criado.

Todos os códigos estão no artigo do Medium abaixo:
https://medium.com/como-programar-em-1-dia/como-aprender-blockchain-e-smart-contracts-em-1-dia-18fe3748409b

O arquivo acima começa inicializando a versão da linguagem Solidity (linha 1) e importando o componente do SDK HardHat para podermos usar o console no nosso código (linha 2):

pragma solidity ^0.8.0;
import “hardhat/console.sol”;

O contrato (similar à uma classe do JavaScript) se inicializa na linha 4 e já começa declarando a variável message que será manipulada posteriormente (linha 5):

contract HelloWorld {
string private message;

A linha 7 declara o construtor do nosso contrato, que é o código executado sempre que uma nova instância é iniciada. Esse construtor recebe uma string como parâmetro para inicialização do valor da primeira mensagem enviada ao contrato (firstMessage).

constructor (string memory firstMessage) {

Dentro do construtor exibimos no console, a título de teste, o valor recebido como primeira mensagem do contrato (linha 8) e então, alteramos o valor da váriavel message com o valor desse parâmetro recebido (linha 9):

console.log(“Mensagem de entrada recebida: “, firstMessage);
message = firstMessage;

A função getMessage() é utilizada para retornar o valor da variável message de uma forma mais segura que a tradicional (linha 12).

E então a funçao setMessage() permite a alteração da varável message por um novo conteúdo qualquer passado como parâmetro (newMessage, linha 16).

Vamos rodar esse contrato no nosso computador local para testá-lo antes de fazer o envio (deploy) para a Blockchain.

Substitua todo o conteúdo do arquivo deploy.js da pasta ‘scripts’ pelo código do tutorial.

E execute o comando abaixo na sua janela de comandos, dentro da pasta do seu projeto:

npx hardhat run scripts/deploy.js

A linha 1 desse código começa importando o Hardhat Runtime Environment, ou seja, os componentes necessários para rodar o Hardhat:

const hre = require(“hardhat”);

A linha 3 declara a função main() que é a principal na execução do envio do contrato:

const main = async () => {

Na linha 4 foi instanciado o Hardhat (hre), que possibilita a compilação e o envio do contrato para a Ethereum. E nesse caso do deploy local, ainda cria todo um ambiente na nossa máquina para que possamos testá-lo.

const contractFactory = await hre.ethers.getContractFactory(“HelloWorld”);

Nessa linha 4 também é passado um valor de string como parâmetro (“HelloWorld”) que é o nome que terá o nosso Smart Contract na rede, e o resultado da instanciação do hre é apontado para a constante contractFactory criada para isto.

Na linha 5, o envio (deploy) é realizado passando uma string como parâmetro (“Hello, world!”), que será recebida como o valor firstMessage no construtor do contrato que já atualiza o primeiro valor da variável message. Todo o resultado dessa transação é apontado para a constante contract.

const contract = await contractFactory.deploy(“Hello, world!”);

Com essa chamada, o valor da primeira mensagem é exibido no console, de acordo com a linha 8 do nosso contrato no arquivo ‘HelloWorld.sol’.

A linha 6 do deploy.js faz o código ficar parado aguardando até a finalização da execução do deploy do contrato:

await contract.deployed();

E só depois então o console exibe o endereço do contrato criado (linha 7), que será necessário posteriormente para fazermos chamadas a essas funcionalidades criadas:

console.log(“Contrato enviado a Blockchain no endereço: “, contract.address);

O deploy poderia finalizar aqui, mas a título de teste fizemos ainda uma alteração no conteúdo da variável message (linhas 9 e 10), para verificar o funcionamento da função setMessage() que criamos:

const setMessageTxn = await contract.setMessage(“Oi, mundo!”);
await setMessageTxn.wait();

O que faz exibir no console o valor da nova mensagem alterada (de “Hello, world!” para“Oi, mundo!”), além de gerar uma nova transação na Blockchain, como veremos posteriormente.

O conteúdo de toda essa nova transação gerada on-chain (na Blockchain) é retornado e o seu id (ou hash) é exibido no console (linha 12):

console.log(“Mensagem enviada com o hash: “, setMessageTxn.hash);

A linha 14 em diante é o que faz o deploy executar realmente a função main() que acabamos de criar acima. E somente caso haja algum erro na execução do deploy, um alerta de erro é exibido pelo console e o código finaliza informando um erro = 1.

Vamos desenvolver o front-end da nossa aplicação para que possamos enviar mensagens para a Blockchain pelo nosso Smart Contract.

Uma boa ferramenta para desenvolver front-end em React chama-se Replit, que funciona online no navegador e já nos oferece um link público para podermos testar nosso app. Com tudo pré-configurado, não precisaremos instalar nada!

Acesse e crie sua conta em:

Replit.com

Já temos um projeto React pronto com um formulário de feedback que utilizamos no tutorial anterior. Vamos aproveitar o código criado para adicionar o envio dos dados para a Blockchain.

Clique no link abaixo para abrir o Replit já com o projeto template público criado para o tutorial:

https://replit.com/@AllineOliveira/ReactBlockchain

Clique no botão azul ‘Fork Repl’ para copiar os arquivos do projeto template para a sua conta.

No seu novo projeto clonado no Replit, clique no botão verde ‘Run’ para testar. O form de feedback deve aparecer no canto direito da tela do Replit.

Clique então no botão ‘Open in a new tab’, para pegar sua URL pública gerada pelo Replit.

Observe a sua URL pública gerada pelo Replit que vamos necessitar dela no futuro:

https://reactblockchain.allineoliveira.repl.co

Agora vamos enviar nosso contrato para a Blockchain!

A Alchemy é uma ferramenta que nos ajuda a publicar nosso novo Smart Contract na Blockchain.

Crie sua conta no site abaixo:
Alchemy.com

E adicione um novo app no botão ‘+Create app’.

Dê um nome para seu app e adicione-o na Ethereum selecionando a rede de teste Goerli.

Goerli

A Blockchain real tem custo.

Aqui nesse tutorial vamos utilizar uma rede de teste da Blockchain (testnet) para que possamos fazer todo o nosso desenvolvimento normalmente, mas utilizando dinheiro de mentira.

Nesse tutorial vamos publicar nosso Smart Contract na rede de teste Goerli, que é privada mas é a mais utilizada por desenvolvedores no momento.

A Ethereum é uma tecnologia de Blockchain (blocos de dados) que ao mesmo tempo também é uma moeda digital (criptomoeda).

Ether (ETH) é o nome da moeda da Ethereum.

Veja aqui a cotação do ETH em reais (BRL) no momento:
https://www.google.com/finance/quote/ETH-BRL

A MetaMask é uma carteira digital que funciona na rede Ethereum. É ela que vamos utilizar aqui para guardar nossos ethers (no caso, de mentira porque vamos usar a rede de teste Goerli).

Instale a MetaMask como extensão do navegador Google Chrome no link abaixo:

MetaMask.io

ATENÇÃO!
Guarde bem guardada a chave gerada para a sua nova carteira. NÃO SERÁ POSSÍVEL RECUPERÁ-LA POSTERIORMENTE!

Depois de logado na sua nova carteira MetaMask, crie uma conta.

E então, conecte sua nova conta à rede de testes Goerli.

Aproveite e já conecte sua carteira MetaMask a sua URL pública gerada pelo Replit.

Acesse a URL pública do seu frontend React gerado pelo Replit (na seção Replit Run acima) e abra a extensão da MetaMask nessa página.

Clique no menu ‘Sites Conectados’.

E depois clique no link ‘Conectar manualmente ao site atual’.

Clique em ‘Seguinte’ e depois ‘Conectar’ que seu front-end estará agora conectado na sua carteira MetaMask.

Para conseguir um dinheiro de mentira na rede de teste, utilizamos uma faucet (torneira).

A Alchemy tem uma faucet para a rede Goerli que gera ethers de mentira pra gente. Acesse o link abaixo e crie uma conta:

GoerliFaucet.com

Na carteira MetaMask, pegue o endereço da sua conta criada no menu ‘Detalhes da conta’.

Cole o endereço da sua MetaMask na GoerliFaucet para gerar ethers de mentira na sua carteira. Clique no botão ‘Send Me ETH’.

Todas as transações da Blockchain são públicas. A Etherscan é um lugar onde você pode ver todas as transações efetuadas até então e o estado em que elas se encontram no momento.

Para ver suas transações, abra novamente a extensão da sua carteira MetaMask e clique no menu ‘Ver Conta no Etherscan’.

As transações efetuadas no endereço da sua carteira aparecerão listadas na Etherscan de forma pública com os respectivos valores em ETH.

Agora vamos fazer o deploy de nosso Smart Contract na rede Goerli.

Volte ao VSCode, e abra o arquivo hardhat.config.js gerado pelo HardHat.

Adicione a network abaixo ao seu código de configuração do HardHat, como em seguida:

networks:

{ goerli:

{ url: "YOUR_ALCHEMY_API_URL",

accounts: ["YOUR_PRIVATE_GOERLI_ACCOUNT_KEY"],

}, },

Agora vamos substituir o valores das chaves.

Volte ao dashboard da Alchemy e clique no link ‘View Key’ da sua rede Goerli cadastrada:

https://dashboard.alchemy.com

Substitua o seu valor HTTPS da Alchemy no código do seu hardhat.config.js:

url: “https://eth-goerli.g.alchemy.com/v2/AnXXXXWv8DgtVXXXX1W”,

E agora vá na sua MetaMask e clique no menu ‘Detalhes da Conta’. Depois clique na opção ‘Exportar chave privada’.

Digite sua senha da MetaMask e copie a chave privada exibida na tela.

Substitua o valor dessa chave na variável accounts no código do seu hardhat.config.js:

accounts: [“d609fb02c5XXXXXXXXXXXXXXXX5c135”],

Agora que já temos nossas chaves privadas configuradas no nosso Smart Contract, vamos finalmente fazer o deploy na Goerli.

Na sua janela de comandos, digite o comando abaixo:

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

Observe o endereço gerado para o seu Smart Contract na rede Goerli (que será diferente do meu abaixo):

Contrato enviado a Blockchain no endereço: 0x0Ff237911E3ebDA9900a7A064B7B5eFFB1FA805a

Mensagem enviada com o hash:  0x9c121f9c01c268a922d6afa34c1a8085e033892b552b26ea6ea443e7468c2552

Confira o deploy desse Smart Contract digitando o seu endereço gerado na Etherscan:

https://goerli.etherscan.io

Observe que além da transação gerada como ‘Contract Creation’, já foi gerada também uma transação do tipo ‘Set Message’ de acordo com a linha 8 do nosso contrato ‘HelloWorld.sol’:

await contract.setMessage(“Oi, mundo!”);

Para ver o conteúdo dessa transação, clique no ‘Txn Hash’ da transação, e depois no final da página clique em ‘View Input As’ > ‘UTF-8’, ou então clique em ‘Decode Input Data’.

Ai está sua primeira mensagem enviada de forma pública e permanente na Blockchain! PARABÉNS!

Agora vamos conectar o nosso formulário React com a carteira MetaMask.

Abra o Replit no seu projeto criado acima e cole o comando import abaixo no início do arquivo App.jsx:

import { ethers } from “ethers”;

Esse comando importará os componentes da Ethereum necessários para conectar a nossa carteira MetaMask ao React, através do objeto window.ethereum, descrito na documentação da API da MetaMask abaixo:

https://docs.metamask.io/guide/ethereum-provider.html

Se der erro no console, reinicie a execução do projeto clicando em ‘Stop’ e rode novamente clicando em ‘Run’.

window.ethereum

E então vamos verificar se a nossa carteira MetaMask está conectada ao site. Vamos adicionar uma função assíncrona para essa conexão. Cole o código abaixo no seu arquivo App.jsx:

const connectWallet = async () => {
    const { ethereum } = window;
    if (!ethereum) { alert('Carteira digital não conectada.');
} }

Na linha 33 acima iniciamos uma variável ethereum. A API do MetaMask injeta o conteúdo da nossa conexão com a carteira numa variável global do React chamada window:

const { ethereum } = window;

E depois verificamos (linha 34). Se essa variável estiver vazia exibimos uma mensagem de alerta na tela dizendo que carteira MetaMask não está conectada (linha 35).

Agora vamos chamar essa função na inicialização do arquivo com o comando useEffect do React Hooks:

useEffect(() => {
connectWallet();
}, []);

Não se esqueça de importar o useEffect no início do seu arquivo App.jsx:

import { useEffect } from “react”;

Abra a sua URL pública em uma nova janela do Chrome clicando no ícone ‘Open in a new tab’ no canto superior direito da sua Webview do Replit.

Caso a carteira esteja conectada no site corrente, a mensagem de alerta não será exibida.

ethereum.request

Agora vamos requisitar ao ethereum a autorização para conectar com a nossa carteira MetaMask.

Utilizamos o comando ethereum.request para isso.

Se a carteira não estiver conectada vamos criar uma nova conexão através do método eth_requestAccounts:

accounts = await ethereum.request({ method: “eth_requestAccounts” });

Caso já esteja conectada vamos só apontar essa conexão para a variável accounts através do método eth_accounts:

accounts = await ethereum.request({ method: “eth_accounts” });

Sua função connectWallet() deve estar como o código do tutorial.

Execute o código e veja que exibimos no console o valor da variável accounts. O retorno do comando request é o endereço da conta conectada:

Agora vamos conectar o form com o nosso Smart Contract para podermos usar suas funcionalidades.

Adicione o código do tutorial à função connectWallet() o seu arquivo App.jsx.

Adicione também a variável smartContract no começo do arquivo App.jsx para que seja acessada posteriormente por eventos do form (linha 6 da figura abaixo):

let smartContract = null;

Lembra daquele endereço do contrato que exibimos no console quando fizemos o deploy na Blockchain? Volte na seção ‘Deploy na Goerli’ acima.

Substitua o valor da constante contractAddress no seu código pelo seu endereço do contrato (linha 48 do arquivo App.jsx).

const contractAddress = “0x18e57E364DXXXXXXXXX485Bf211f746587D”;

Continuando com a conexão do código React com o Smart Contract, o comando ethers.Contract, da API da MetaMask é o responsável por essa mágica (linha 53 do App.jsx).

const smartContract = new ethers.Contract(contractAddress, contractABI, signer);

O comando ethers.Contract recebe 3 parâmetros. O primeiro é o endereço do contrato que já substituimos anteriormente e o segundo é o arquivo ABI que também já importamos.

O terceiro parâmetro é um signatário dado para a conexão com a sua conta da MetaMask, através do comando ethers.providers.Web3Provider(), linhas 51 e 52 do App.jsx:

const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();

A ABI (Application Binary Interface) de um Smart Contract é um arquivo JSON descritor da interface desse contrato.

Quando você faz o deploy do seu Smart Contract, o HardHat cria esse descritor dentro do diretório artifacts do seu projeto do Smart Contract.

Copie esse arquivo criado (HelloWorld.json), dentro da pasta artifacts/contracts/HelloWorld.sol.

E cole dentro do seu projeto React no Replit.

Depois importe esse arquivo ABI dentro do seu código App.jsx. Cole a linha de código abaixo no início do arquivo (linha 4 da figura abaixo):

import abi from “./HelloWorld.json”;

E então observe que esse arquivo abi será acessado posteriormente na constante contractABI (linha 49 do arquivo App.jsx):

const contractABI = abi.abi;

Com o contrato conectado, agora podemos usar os métodos que criamos em nosso Smart Contract, como por exemplo o getMessage() e o setMessage().

Teste a aplicação até agora e observe a última mensagem enviada para a Blockchain pelo seu Smart Contract sendo retornada no console, de acordo com as linhas de código abaixo do seu arquivo App.js (linhas 55 e 56):

const oldMessage = await smartContract.getMessage();
console.log(oldMessage);

Vamos adicionar uma função sendMessage() ao arquivo App.jsx que seja executada quando o usuário clica no botão ‘Enviar’ do form.

Adicione o método onClick no botão ‘Enviar’ do form para chamar a função sendMessage(), como na linha 26 da imagem abaixo:

<input type=”button” value=”Enviar”/>

Adicione o parâmetro onClick  ao input chamando a funcao sendMessage()

E então vamos criar a função sendMessage() no arquivo App.jsx. Copie e cole o código.

Na linha 63 da figura acima buscamos o último valor da mensagem gravada na Blockchain e exibimos no console do navegador (linha 64):

const oldMessage = await smartContract.getMessage();

Pronto, atualize o navegador na sua URL do Replit e teste o resultado do código até aqui.

Observe no console do Google Chrome (menu Ferramentas do Desenvolvedor) que aparecerá o endereço da sua conta da MetaMask assim que você iniciar o form.

Então clique no botão ‘Enviar’. A função sendMessage() será chamada e com isso a conexão com o Smart Contract deverá ser executada e o conteúdo da última mensagem enviada para a Blockchain deverá aparecer no console.

Agora vamos adicionar o método setMessage() à função sendMessage() para enviarmos uma mensagem de teste para a Blockchain e criarmos nossa primeira transação via form do React.

await smartContract.setMessage(‘teste de envio de mensagem’);

Teste novamente o resultado clicando no botão ‘Enviar’. A carteira MetaMask se abrirá e pedirá que você confirme a nova transação que deseja executar.

Observe que o custo dessa transação será debitado do seu saldo de ethers.

Clique no botão confirmar.

Volte na carteira MetaMask e clique no menu ‘Ver conta no Etherscan’. Observe que a nova transação com o méthodo ‘Set Message’ foi criada no topo da lista.

Para finalizar nosso tutorial vamos enviar para a Blockchain os dados digitados no form pelos usuários.

Adicione um atributo ‘id’ a cada um dos campos do seu formulário, como nas linhas 19 e 24 da figura abaixo:

<textarea cols=”50" rows=”5" id=”feedback” />

<input type=”text” id=”contact” />

E então adicione o código abaixo à sua função sendMessage(), de acordo com as linhas 67 e 68 da figura abaixo. Essas linhas de código capturam o conteúdo digitado pelo usuário dentro dos campos do form, identificados acima com os id: ‘feedback’ e ‘contact’.

const feedback = document.getElementById(“feedback”).value;
const contact = document.getElementById(“contact”).value;

Por último substitua a mensagem a ser enviada para a Blockchain pelos dados digitados pelo usuário de acordo com a linha 69 da figura abaixo:

await smartContract.setMessage([contact, feedback].toString());

Teste na prática o envio de dados do form para a Blockchain. Ao clicar em ‘Enviar’ confirme na MetaMask a nova transação criada.

E então observe novamente na Etherscan o conteúdo da transação criada, porém agora com os dados digitados pelo usuário.

Observe que na Etherscan toda transação possui um valor de hash (Txn Hash, um identificador único) e também um custo para a transação em ETH (Txn Fee).

Vamos emitir um alerta ao usuário com o hash retornado pela transação criada pela função setMessage().

Observe que o retorno da função setMessage() é na verdade um ponteiro para o resultado dessa transação. Guarde essa transação em uma constante para que possamos utilizá-la a seguir (linha 69 do código abaixo):

const transaction = await smartContract.setMessage([contact, feedback].toString());

O link para a Etherscan que mostra o conteúdo da transação é dado pelo hash da transação em si (linha 71):

const linkEtherscan = ‘https://goerli.etherscan.io/tx/' + transaction.hash;

Então vamos emitir uma mensagem de retorno para o usuário com esse link para o conteúdo da transação (linha 72):

if (window.confirm(‘\nObrigada! Quer visualizar seu feedback na Blockchain? \n\n’ + linkEtherscan)) {
window.open(linkEtherscan, ‘_blank’);
};

Teste o resultado final de todo o código construído pelo tutorial.

Ao clicar em OK o link para a Etherscan se abrirá em uma nova janela.

Nota: Verifique na aba ‘Atividades’ da MetaMask se o envio da transação está pendente ou se já foi concluído.

E é isso pessoal!

Todo o código do tutorial está disponível para clonagem em um projeto no Replit. Acesse e confira:
https://replit.com/@AllineOliveira/ReactBlockchainFinal

Até a próxima!