Ethereum - lesson 4 | HackIndia Skills

Key point

One rule

Your dapp must know which chains it supports, and every contract action must run on the intended chain.

For this track, use a testnet for building. Sepolia is safer than mainnet because mistakes do not cost real rupees.

Why networks matter

The same contract address can mean different things on different chains. A button that is safe on Sepolia may fail, or do something else, on mainnet.

A recruiter checking your repo should see that you do not assume the wallet is on the right network. You verify it in the UI before reads and writes.

Example

Configure chains

Wagmi config can include mainnet and sepolia. Transports are keyed by chain ID, so Wagmi knows where to send requests.

Keep this in your config file, usually src/wagmi.ts or src/config/wagmi.ts.

import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

Your to-do

Show chain state

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.

Read the connected chain from Wagmi in your network component.
Compare it with your required chain, such as Sepolia.
Disable contract buttons when the chain is wrong.
Show a clear message: “Switch to Sepolia to use this demo.”
Keep the message near the action button, not hidden in a console log.

0 of 5 done

Example

Gate the UI

This small component shows the pattern. It does not send a transaction. It only blocks the user from acting on the wrong network.

Later lessons will use this same check before reads and writes.

import { useAccount, useSwitchChain } from 'wagmi'
import { sepolia } from 'wagmi/chains'

export function NetworkGate({ children }: { children: React.ReactNode }) {
  const { chain } = useAccount()
  const { switchChain, isPending } = useSwitchChain()

  if (!chain) return <p>Connect your wallet first.</p>

  const isSepolia = chain.id === sepolia.id

  if (!isSepolia) {
    return (
      <div>
        <p>Wrong network: {chain.name}. Use Sepolia for this project.</p>
        <button
          disabled={isPending}
          onClick={() => switchChain({ chainId: sepolia.id })}
        >
          {isPending ? 'Check your wallet' : 'Switch to Sepolia'}
        </button>
      </div>
    )
  }

  return <>{children}</>
}

Common mistake

Hex chain IDs

Wallet events can report chain IDs as hex strings. MetaMask’s chainChanged event gives values like 0x1, not 1.

Do not compare that directly with a decimal chain ID. Convert it first, or let Wagmi hooks manage chain state for your React UI.

// 0x1 means Ethereum mainnet
const decimalChainId = Number('0x1') // 1

Tip

Unknown chain flow

If the wallet does not know a chain, MetaMask can return error code 4902. Your app should guide the user to add the chain or switch using a proper chain configuration.

For this lesson, keep your supported chains to mainnet and Sepolia. Fewer networks means fewer support problems during a hackathon demo.