Ethereum - lesson 3 | HackIndia Skills

Key point

Main idea

Connecting is a permission request. Your dapp asks the wallet for access to accounts, then your UI reacts to the result.

Do not treat connection as a one-time button click. Show state, handle errors, and let Wagmi manage wallet connectors.

What safe means

A safe connect flow does not spam wallet popups. It tells the user what is happening and waits while the wallet is open.

MetaMask and other injected wallets can change accounts after connection. Do not hard-code an address or assume an old accounts array is still correct.

Your to-do

Build the flow

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 available connectors from useConnect.
Render one button per connector, such as the browser wallet connector.
Disable buttons while a connect request is pending.
Show the connected address only after Wagmi says the account is connected.
Show a short error message if the wallet rejects or fails.

0 of 5 done

Example

Connect component

Put this in a small component like src/ConnectWallet.jsx. It only connects and displays account state. Network checks come in the next lesson.

import { useAccount, useConnect, useDisconnect } from 'wagmi'

export function ConnectWallet() {
  const { address, isConnected, status } = useAccount()
  const { connectors, connect, isPending, error } = useConnect()
  const { disconnect } = useDisconnect()

  if (isConnected) {
    return (
      <section>
        <p>Wallet connected</p>
        <p>{address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </section>
    )
  }

  return (
    <section>
      <p>Status: {status}</p>

      {connectors.map((connector) => (
        <button
          key={connector.uid}
          disabled={isPending}
          onClick={() => connect({ connector })}
        >
          {isPending ? 'Check your wallet' : `Connect ${connector.name}`}
        </button>
      ))}

      {error ? <p>Could not connect: {error.message}</p> : null}
    </section>
  )
}

Tip

Use clear copy

Your button should not just say Loading. Say Check your wallet. That tells the user to open MetaMask, Rabby, or their mobile wallet prompt.

For a college demo, this matters. Recruiters and judges should see that you understand wallet UX, not only hooks.

Common mistake

Avoid popup loops

Beginners often call connect automatically when the page loads. Do not do that. Let the user click a button first.

Also disable the button while isPending is true. MetaMask error code -32002 means a request is already pending, so the user must answer the open wallet prompt before you send another request.

About wallet events

Wallets expose provider events like accountsChanged and chainChanged. MetaMask sends chainChanged as a hex chain ID, such as 0x1.

In this track, prefer Wagmi hooks for React state instead of manually wiring provider events. If you do add listeners later, remove only your specific listener, not every listener in the app.