阶段三：DApp 开发与实践

把合约接到前端与服务端：钱包连接、读写合约、监听事件、处理链 ID 与错误，并形成可维护的项目结构。

学习目标

• 使用 ethers.js v6 或 viem（二选一为主）完成读写合约与事件订阅。
• 理解 Provider / Signer（或 viem 中 publicClient / walletClient）的分工。
• 掌握 MetaMask（或 WalletConnect 等）的 chain 切换、账户切换 与常见 UX 模式。
• 能为合约编写集成测试，并了解 本地分叉 用于调试主网交互的思路。

核心概念

前端与链交互

• 只读调用：无需签名，通过 RPC 即可（eth_call）。
• 状态变更交易：需用户签名，等待打包确认；要处理 pending、失败、回滚与用户取消。
• 事件：contract.on 或按区块范围查询日志；注意重组（reorg）对监听的影响（进阶）。

RPC 与索引

• 公共 RPC 有速率与稳定性限制；生产环境常使用自建或服务商节点。
• 复杂查询往往依赖 索引器（如 The Graph、自建 pipeline），而非仅依赖前端轮询。

测试

• 单元测试：针对合约函数与边界条件。
• 集成测试：脚本 + 前端流程；可选用 Playwright 等做 E2E（可选）。

实践任务

1. 用 Vite + React（或你熟悉的前端栈）做一个页面：连接钱包、读取链上数字、发送 set 交易并展示 tx hash。
2. 为 set 成功监听事件并在 UI 上更新状态。
3. 处理错误：用户拒绝签名、链不对、gas 估算失败时给出可读中文提示。 4.（可选）用 Hardhat 主网 fork 调试与 Uniswap 等协议的只读交互（无需真币）。

自检清单

• 能画出从「用户点击按钮」到「交易上链」的时序图（组件 → 库 → 钱包 → RPC）。
• 能解释为什么不要把私钥写进前端环境变量。
• 能在测试网完整跑通「部署合约 → 前端读写」闭环。

延伸阅读

• ethers.js 文档
• viem 文档
• Ethereum.org：dapp 前端

上一阶段：阶段二：以太坊与智能合约｜下一阶段：阶段四：DeFi、NFT 与治理