前端沙盒

写 dApp 前端的坑集中在三处：连接钱包的兼容性、交易的两个阶段（签名 ≠ 成功）、以及账户与链变化后的状态失效。这三套模板把这三处全部按标准写法处理好了，可以直接复制进自己的工程。

为什么这里没有「在线运行」按钮：连接钱包的代码必须在你自己域名下、能访问 window.ethereum 的环境里运行。放进 iframe 沙箱后连钱包都拿不到，只能给出一个「看起来能跑、实际毫无意义」的假象。因此换成「多文件模板 + 本地跑通步骤」，十分钟就能在自己机器上看到真实效果。

src/App.tsxTypeScript

import { useCallback, useEffect, useState } from 'react';
import { BrowserProvider, formatEther, parseEther } from 'ethers';

declare global {
  interface Window {
    ethereum?: any;
  }
}

const BASE_SEPOLIA_CHAIN_ID = '0x14a34';   // 84532

export default function App() {
  const [account, setAccount] = useState<string>('');
  const [balance, setBalance] = useState<string>('');
  const [to, setTo] = useState('');
  const [amount, setAmount] = useState('0.001');
  const [status, setStatus] = useState('未连接');

  const refresh = useCallback(async (addr: string) => {
    const provider = new BrowserProvider(window.ethereum);
    const bal = await provider.getBalance(addr);
    setBalance(formatEther(bal));
  }, []);

  const connect = async () => {
    if (!window.ethereum) {
      setStatus('未检测到钱包，请先安装 MetaMask 或 OKX Wallet');
      return;
    }

    try {
      const accounts: string[] = await window.ethereum.request({
        method: 'eth_requestAccounts',
      });

      const chainId: string = await window.ethereum.request({ method: 'eth_chainId' });
      if (chainId !== BASE_SEPOLIA_CHAIN_ID) {
        await window.ethereum.request({
          method: 'wallet_switchEthereumChain',
          params: [{ chainId: BASE_SEPOLIA_CHAIN_ID }],
        });
      }

      setAccount(accounts[0]);
      await refresh(accounts[0]);
      setStatus('已连接');
    } catch (err: any) {
      setStatus(err?.code === 4001 ? '你取消了连接' : '连接失败：' + (err?.message ?? ''));
    }
  };

  const send = async () => {
    try {
      setStatus('等待钱包确认…');

      const provider = new BrowserProvider(window.ethereum);
      const signer = await provider.getSigner();

      const tx = await signer.sendTransaction({ to, value: parseEther(amount) });
      setStatus('已提交：' + tx.hash);

      const receipt = await tx.wait(1);
      setStatus(receipt?.status === 1 ? '交易成功' : '交易失败（已上链但执行回滚）');
      await refresh(await signer.getAddress());
    } catch (err: any) {
      setStatus('发送失败：' + (err?.shortMessage ?? err?.message ?? ''));
    }
  };

  // 钱包切账户或切链后必须重新加载，否则界面显示的是旧状态
  useEffect(() => {
    if (!window.ethereum) return;

    const onAccounts = (accts: string[]) => {
      setAccount(accts[0] ?? '');
      setStatus(accts.length ? '账户已切换' : '已断开连接');
      if (accts[0]) void refresh(accts[0]);
    };
    const onChain = () => location.reload();

    window.ethereum.on('accountsChanged', onAccounts);
    window.ethereum.on('chainChanged', onChain);

    return () => {
      window.ethereum.removeListener('accountsChanged', onAccounts);
      window.ethereum.removeListener('chainChanged', onChain);
    };
  }, [refresh]);

  return (
    <div style={{ fontFamily: 'system-ui', padding: 24, maxWidth: 560 }}>
      <h1>Web3 学院 · 最小 dApp</h1>

      {!account ? (
        <button onClick={connect}>连接钱包</button>
      ) : (
        <p>
          已连接：{account.slice(0, 6)}…{account.slice(-4)}
          <br />
          余额：{balance} ETH
        </p>
      )}

      <hr />

      <h3>转 ETH（测试网）</h3>
      <input placeholder="接收地址 0x..." value={to} onChange={(e) => setTo(e.target.value)} style={{ width: '100%' }} />
      <input value={amount} onChange={(e) => setAmount(e.target.value)} />
      <button onClick={send} disabled={!to || !amount}>
        发送
      </button>

      <p style={{ color: '#0f766e' }}>{status}</p>
    </div>
  );
}

只读模板。复制到本地工程后按右侧步骤跑起来。

本地跑通步骤

npm create vite@latest 建工程，安装 ethers
替换 App.tsx，npm run dev 起本地服务
钱包切到 Base Sepolia，点「连接钱包」
填一个自己的第二个地址，转 0.001 ETH 走通全流程

依赖

reactreact-domethers

安装命令：npm install react react-dom ethers

上链前必做：先把网络切到测试网（Sepolia / Base Sepolia），从水龙头领测试币，用「小额 + 自己第二个地址」把流程走通一遍。任何在主网上第一次运行的代码，都应该先在测试网上运行过至少一次。

配套阅读：链上 API 参考的「函数库对照」一节把同一个任务在 ethers / web3.js / viem 里的写法并排放了三个版本，换库或迁移旧项目时可以直接对照；开发者路径第三阶段列出了这一块需要掌握的全部知识点。