第十一天：DApp 前端实战——React + wagmi + viem

命令行再顺手也只属于开发者。今天把交互层搬进浏览器：一个能连接钱包、读取余额、发起领币的 DApp 页面。技术栈选 React + wagmi v2 + viem——wagmi 是社区事实标准的 React Hooks 库，viem 是它背后的类型安全 RPC 客户端，两个都是 TypeScript 优先。

工程搭建与钱包连接

npm create wagmi@latest   # 官方脚手架，含 Next.js + wagmi + rainbowkit 连接组件

核心概念只有三个：Config（配置支持的链和钱包连接器）、WagmiProvider（React 上下文）、然后就是一堆自动管理状态和缓存的 Hooks。读余额一个 Hook 搞定：

import { useReadContract } from 'wagmi';

const { data: balance } = useReadContract({
  abi: erc20Abi,
  address: CONTRACT_ADDRESS,
  functionName: 'balanceOf',
  args: [address],
});

erc20Abi 是 wagmi 内置的常用 ABI，直接 import 不用手写。address 来自 useAccount()——用户没连钱包时它是 undefined，Hook 会自动不发请求。

写操作：faucet 按钮的完整生命周期

import { useWriteContract, useWaitForTransactionReceipt } from 'wagmi';

const { writeContract } = useWriteContract();
const { data: hash } = useWriteContract result …
// 写入后用 hash 等回执：
const { isLoading, isSuccess } = useWaitForTransactionReceipt({ hash });

写操作的 UX 要点：writeContract 只负责弹出 MetaMask 让用户确认，确认后拿到 hash；回执确认是异步的，页面要用 useWaitForTransactionReceipt 监听，成功后刷新余额。三态（等待签名 / 等待确认 / 完成）都要有 UI 反馈，这是 DApp 前端和普通 Web 最大的差异。

今天的作业：跑起脚手架，接上你第九天部署在 Sepolia 的 StudyCoin，做出”连接钱包 → 显示余额 → 领币 → 余额刷新”的闭环。测试网记得给前端配置正确的 chain。明天讲账户与签名的原理层。