Ethereum - lesson 4 | HackIndia Skills

Ethereum - lesson 4 | HackIndia Skills | HackIndia

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

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

Handle Networks and Testnets

One rule

Why networks matter

Configure chains

Show chain state

Gate the UI

Hex chain IDs

Unknown chain flow

Do this now

Quick check