Simple Web3: Accessing Deployed Smart Contract on Sepolia

by

You deployed a smart contract and want to read its state or call functions from a web app. Web3.js with MetaMask gives you a browser-based connection to any deployed contract using its ABI and address.

TL;DR: Connect to a deployed smart contract on Sepolia from a browser using Web3.js and MetaMask.
Stack: Web3.js, MetaMask, Solidity, Sepolia, React
Level: Intermediate
Reading time: ~10 min

Contract reference: 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 = '0xYourContractAddress';
export const web3 = new Web3(window.ethereum);

export function getContract() {
    if (!window.ethereum) throw new Error('No MetaMask installed!');
    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

Get the ABI from your Hardhat project at ignition/deployments/artifacts. Copy the abi array from the artifact file into src/ABI.json.

What you’ve built

A web frontend that connects to MetaMask, reads data from a deployed contract on Sepolia, and calls write functions that trigger wallet transaction prompts.

Next steps

  • Always check window.ethereum exists before doing anything else.
  • Use eth_requestAccounts to request wallet connection explicitly.
  • For production dApps, consider ethers.js instead of Web3.js: better TypeScript support and a cleaner API.

Questions or feedback? Find me on LinkedIn or GitHub.

Leave a Comment