Web3: App Consumindo Smart Contract com MetaMask

Seu smart contract está deployado na Sepolia. O próximo passo é uma UI web que permite aos usuários interagir com ele via MetaMask: conectar carteiras, ler o estado do contrato e enviar transações.

TL;DR: Construa um frontend Web3 que conecta ao MetaMask, lê de um smart contract deployado e envia transações na Sepolia.
Stack: Web3.js, MetaMask, Solidity, Sepolia, React
Nível: Intermediário
Tempo de leitura: ~10 min

Repositório completo: github.com/ferrerallan/web3-ethereum-deploy-sepolia

Setup

npx create-react-app .
npm i web3
npm i @mui/material @emotion/react @emotion/styled

Web3Service.js

import Web3 from 'web3';
import ABI from '../ABI.json';

const CONTRACT_ADDRESS = '0xEnderecoDoSeuContrato';
export const web3 = new Web3(window.ethereum);

export function getContract() {
    if (!window.ethereum) throw new Error('MetaMask n\u00e3o instalado!');
    const from = localStorage.getItem('wallet');
    return new web3.eth.Contract(ABI, CONTRACT_ADDRESS, { from });
}

export async function doLogin() {
    if (!window.ethereum) throw new Error('MetaMask n\u00e3o instalado!');
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
    if (!accounts.length) throw new Error('Nenhuma conta encontrada!');
    localStorage.setItem('wallet', accounts[0].toLowerCase());
    return accounts[0];
}

export async function deposit(amount) {
    const contract = getContract();
    const weiAmount = web3.utils.toWei(amount, 'ether');
    const accounts = await web3.eth.getAccounts();
    return contract.methods.deposit().send({ from: accounts[0], value: weiAmount });
}

export async function getBalance(address) {
    const contract = getContract();
    const balance = await contract.methods.getBalance(address).call();
    return web3.utils.fromWei(balance, 'ether');
}

O que você construiu

Um frontend Web3 que detecta o MetaMask, conecta à carteira do usuário, lê o estado do contrato e chama funções que pedem confirmação de transação no MetaMask.

Próximos passos

• Sempre verifique se o MetaMask está instalado. Cheque typeof window.ethereum !== “undefined” antes de fazer qualquer coisa.
• Mantenha o ABI do contrato em um arquivo separado para facilitar as atualizações quando o contrato mudar.
• Teste todos os estados de erro visíveis ao usuário: transação rejeitada, gas insuficiente, rede errada. Eles são comuns e a UI deve tratá-los graciosamente.

Dúvidas ou feedback? Me encontre no LinkedIn ou GitHub.