Quest 3

Frontend — wagmi hooks for reading + writing contracts

wagmi is React Query for on-chain state. Hooks give you balances, reads, writes — with all the hard caching done for you.

Lesson

The three hooks you'll use 90% of the time

useReadContract — view functions

typescript
import { useReadContract } from "wagmi";
const { data: balance } = useReadContract({
  address: TOKEN,
  abi: erc20Abi,
  functionName: "balanceOf",
  args: [userAddress],
});

Cached, deduplicated, refetches on block. No manual polling.

useWriteContract — state-changing functions

typescript
import { useWriteContract, useWaitForTransactionReceipt } from "wagmi";
const { data: hash, writeContract } = useWriteContract();
const { isLoading, isSuccess } = useWaitForTransactionReceipt({ hash });

<button onClick={() => writeContract({ address, abi, functionName: "mint" })}>Mint</button>
{isLoading && <p>Confirming…</p>}
{isSuccess && <p>Done!</p>}

useAccount + useConnect — wallet connection

typescript
import { useAccount, useConnect } from "wagmi";
import { injected } from "wagmi/connectors";

const { address, isConnected } = useAccount();
const { connect } = useConnect();

{isConnected ? <p>{address}</p> : <button onClick={() => connect({ connector: injected() })}>Connect</button>}

The pattern

javascript
if (!isConnected) return <ConnectButton />;
const { data: balance } = useReadContract({ ... });
const { writeContract } = useWriteContract();
return <div>{balance} <button onClick={() => writeContract(...)}>...</button></div>;

Your task (quiz)

References

wagmi docs

Quiz

Q1. What's the difference between useReadContract and useWriteContract?

useReadContract is for ERC-20, useWriteContract is for ERC-721useReadContract calls view/pure functions (free, no tx); useWriteContract calls state-changing functions (requires signature + gas)They're the sameuseWriteContract is deprecated

Q2. Why use useWaitForTransactionReceipt instead of just awaiting writeContract?

It's not necessarywriteContract returns once the tx is BROADCAST, not CONFIRMED. The receipt hook watches for the block that includes the tx and gives you final confirmation + logsIt catches revert errors onlyIt's faster

typescript

import { useWriteContract, useWaitForTransactionReceipt } from "wagmi"; const { data: hash, writeContract } = useWriteContract(); const { isLoading, isSuccess } = useWaitForTransactionReceipt({ hash }); <button onClick={() => writeContract({ address, abi, functionName: "mint" })}>Mint</button> {isLoading && <p>Confirming…</p>} {isSuccess && <p>Done!</p>}

typescript

import { useAccount, useConnect } from "wagmi"; import { injected } from "wagmi/connectors"; const { address, isConnected } = useAccount(); const { connect } = useConnect(); {isConnected ? <p>{address}</p> : <button onClick={() => connect({ connector: injected() })}>Connect</button>}

javascript

if (!isConnected) return <ConnectButton />; const { data: balance } = useReadContract({ ... }); const { writeContract } = useWriteContract(); return <div>{balance} <button onClick={() => writeContract(...)}>...</button></div>;