Web3 Simples: Acessando Smart Contract Deployado na Sepolia

Por

Você deployou um smart contract e quer ler seu estado ou chamar funções de um app web. Web3.js com MetaMask te dá uma conexão baseada em navegador com qualquer contrato deployado usando seu ABI e endereço.

TL;DR: Conecte a um smart contract deployado na Sepolia pelo navegador usando Web3.js e MetaMask.
Stack: Web3.js, MetaMask, Solidity, Sepolia, React
Nível: Intermediário
Tempo de leitura: ~10 min

Referência do contrato: github.com/ferrerallan/hardhat-ethereum-deploy-sepolia

Setup

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

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() {
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
    localStorage.setItem('wallet', accounts[0].toLowerCase());
    return accounts[0];
}

export async function deposit(amount) {
    const contract = getContract();
    const weiAmount = web3.utils.toWei(amount, 'ether');
    return contract.methods.deposit().send({ value: weiAmount });
}

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

ABI.json

Pegue o ABI do seu projeto Hardhat em ignition/deployments/artifacts. Copie o array abi do arquivo de artefato para src/ABI.json.

O que você construiu

Um frontend web que conecta ao MetaMask, lê dados de um contrato deployado na Sepolia e chama funções de escrita que disparam prompts de transação na carteira.

Próximos passos

  • Sempre verifique se window.ethereum existe antes de fazer qualquer coisa.
  • Use eth_requestAccounts para solicitar a conexão com a carteira explicitamente.
  • Para dApps em produção, considere ethers.js em vez de Web3.js: melhor suporte TypeScript e API mais limpa.

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

Deixe um comentário