Ethereum - lesson 5 | HackIndia Skills

Ethereum - lesson 5 | HackIndia Skills | HackIndia

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>
  )
}

Read Contract State

Read, do not write

What Wagmi does

Pick a safe read

Read totalSupply

Common read bugs

Use AI carefully

Do this now

Quick check