Ethereum - lesson 5 | HackIndia Skills

Key point

Read, do not write

A contract read calls a view or pure function. It does not change blockchain state, does not ask the user to pay gas, and does not open a wallet signature popup.

Use reads for things like name, symbol, totalSupply, balanceOf, owner, proposal count, or a public mapping getter.

What Wagmi does

Wagmi is a React Hooks library for Ethereum. For reading contracts, you use useReadContract from wagmi.

TanStack Query sits under this flow. It handles async state like loading, error, cached data, and refetching. Your UI should show those states clearly, not just console.log the result.

Your to-do

Pick a safe read

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Choose one contract already deployed on your selected testnet.
Copy only the ABI item for the function you will read.
Confirm the function is view or pure in the contract source or ABI.
Check if the function needs arguments, like balanceOf(address).
Plan how the result will be displayed in your UI.

0 of 5 done

Example

Read totalSupply

This component reads totalSupply from an ERC-20 style contract. Replace the address with your testnet contract address before committing.

The result may be a bigint. Convert it before rendering. If the token uses decimals, format it properly later instead of pretending the raw number is human-friendly.

import { useReadContract } from 'wagmi'

const tokenAbi = [
  {
    type: 'function',
    name: 'totalSupply',
    stateMutability: 'view',
    inputs: [],
    outputs: [{ name: '', type: 'uint256' }],
  },
] as const

const tokenAddress = '0x0000000000000000000000000000000000000000'

export function TotalSupplyCard() {
  const {
    data,
    isLoading,
    isError,
    error,
    refetch,
  } = useReadContract({
    abi: tokenAbi,
    address: tokenAddress,
    functionName: 'totalSupply',
  })

  if (isLoading) return <p>Reading contract...</p>

  if (isError) {
    return (
      <section>
        <p>Could not read total supply.</p>
        <p>{error.message}</p>
        <button onClick={() => refetch()}>Try again</button>
      </section>
    )
  }

  return (
    <section>
      <h2>Total supply</h2>
      <p>{data?.toString() ?? 'No data returned'}</p>
      <button onClick={() => refetch()}>Refresh</button>
    </section>
  )
}

Common mistake

Common read bugs

Do not paste a full ABI if you only need one function. It makes code review harder during a hackathon and hides mistakes.

Do not read from the wrong chain. The same address can mean different things on different networks. Your previous lesson handled network support; use that chain choice when testing reads.

Tip

Use AI carefully

You can ask ChatGPT, Gemini, or Claude to reduce a contract ABI to one function. Then verify the function name, inputs, outputs, and stateMutability yourself.

AI often guesses addresses or ABIs. Never trust those. Get the address and ABI from your own deployed contract, repo artifact, or a block explorer for the exact testnet.