DApp 与 Web3 前端

DApp（去中心化应用） = 智能合约（后端）+ Web 前端 + 钱包（身份与签名）。用户通过 MetaMask 等钱包授权交易，前端用 ethers.js 或 viem 与链交互。见 /roadmaps/blockchain。

学习目标

• 用 ethers.js 连接 RPC 并读取合约状态
• 实现「连接钱包 → 签名 → 发送交易」完整流程
• 在 React 中集成 Web3 Provider

读取链上数据

import { ethers } from "ethers";

const ABI = ["function count() view returns (uint256)"];
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();
const contract = new ethers.Contract(CONTRACT_ADDRESS, ABI, signer);

const value = await contract.count();
console.log("count:", value.toString());

写入：发送交易

async function increment() {
  const tx = await contract.increment();
  console.log("tx hash:", tx.hash);
  await tx.wait(); // 等待打包确认
  console.log("confirmed");
}

用户需在钱包中确认 Gas 费；交易 pending 期间应禁用按钮并显示进度。

React 集成要点

import { useState } from "react";

export function ConnectButton() {
  const [account, setAccount] = useState(null);

  async function connect() {
    const provider = new ethers.BrowserProvider(window.ethereum);
    await provider.send("eth_requestAccounts", []);
    const signer = await provider.getSigner();
    setAccount(await signer.getAddress());
  }

  return (
    <button onClick={connect}>
      {account ? `${account.slice(0, 6)}...` : "连接钱包"}
    </button>
  );
}

生产环境建议使用 wagmi + viem 或 RainbowKit 处理多链切换与连接状态。

用户体验清单

项	建议
网络错误	检测 chainId，提示切换网络
余额不足	部署前检查 ETH 是否够 Gas
交易失败	解析 revert reason 展示友好文案
只读模式	未连接钱包仍可浏览公开数据

练习

• 搭建 Vite + React 页面，显示 Counter 当前值
• 实现连接 MetaMask 与 increment 按钮
• 交易确认后在 UI 上刷新 count

小结

DApp 前端本质是「带签名的 RPC 客户端」。 下一课了解 DeFi、NFT、DAO 等典型应用场景。