Ethereum - lesson 3 | HackIndia Skills

Ethereum - lesson 3 | HackIndia Skills | HackIndia

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

Connect Wallets Safely

Main idea

What safe means

Build the flow

Connect component

Use clear copy

Avoid popup loops

About wallet events

Do this now

Quick check