Ant Design Web3：基于 Web3js 的 React DApp 极速开发实战

关键词：Ant Design Web3、Web3js、React 组件、以太坊、区块链开发、Web3ConfigProvider、签名消息、钱包连接

当「前端效率」与「链上功能」必须同时满足时，Ant Design Web3 的 Ethereum (web3js) 适配器为 React 开发者提供了开箱即用的解决方案。本文以实战案例贯穿，帮你 30 分钟内完成从安装到链上交互的全流程落地。

为什么要用 web3js 适配器？

熟悉感：绝大多数 API 与官方 web3js 一致，零成本迁移。
组件丰富：内置 10+ 常用 UI，涵盖钱包、地址、NFT、支付等场景。
主题统一：延续 Ant Design 设计语言，与企业级后台无缝融合。

项目初始化

只需一条安装命令即可拿到完整功能：

# npm
npm install @ant-design/web3 @ant-design/web3-eth-web3js web3 --save

# 其他包管理器同价支持

基本用法：获取当前区块高度

import { EthWeb3jsConfigProvider, useWeb3js } from '@ant-design/web3-eth-web3js';

function BlockNumber() {
  const { web3 } = useWeb3js();

  useEffect(() => {
    web3.eth.getBlockNumber().then(setHeight);
  }, [web3]);

  return <p>最新区块高度: {height}</p>;
}

只需把 EthWeb3jsConfigProvider 包在最外层，所有子组件即可共享 web3 实例，实现链上数据实时刷新。

进阶场景：在 DApp 中完成签名交互

1. 连接钱包并获取账户

import { ConnectButton, Address } from '@ant-design/web3';

<ConnectButton />
<Address ellipsis />

2. 触发消息签名

import { useWeb3js } from '@ant-design/web3-eth-web3js';

function SignMessage({ message }: { message: string }) {
  const { web3, account } = useWeb3js();

  const handleSign = async () => {
    if (!account) return;
    const signature = await web3.eth.personal.sign(message, account[0], '');
    alert(`签名结果: ${signature}`);
  };

  return <button onClick={handleSign}>立即签名</button>;
}

以上代码一气呵成完成「登录即签名」流程，极大降低用户门槛。

EthWeb3jsConfigProvider 核心属性一览

wallets：钱包数组，支持 MetaMask、WalletConnect 等多端扩展。
chains：链列表，可动态切换主网、测试网或私链。
ens & balance：开关式展示 ENS 域名和账户余额。
locale：内置中英文切换，产品出海不踩坑。
eip6963：一键启用浏览器注入协议，减少兼容问题。
walletConnect、storage：零配置衔接移动钱包与状态持久化。

有了统一配置，你再也不用为“钱包切换导致状态重置”而头疼。

真实案例：NFT Launchpad 快速原型

上线 NFT 需要几步？借助 Ant Design Web3 只需三招：

一键连接

<ConnectModal />
<NFTImage uri="ipfs://..." size={256} />

定价支付
```
<PayPanel symbol="ETH" amount="0.05" />
```

铸造写入

const mint = () => contract.methods.mint().send({ from: account });

👉 查看完整 Launchpad 模板代码并秒级开始，尝试这份在线 Web3 IDE 向导。](https://okxdog.com/)

常见问题 FAQ

Q1：web3js 与 ethers.js 适配器有什么显著区别？
A：API 表层差异极小，但 web3js 更贴近原生以太坊节点 JSON-RPC 风格，适合已习惯 1.x 语法的老项目。

Q2：CSR、SSR 都能用吗？
A：支持；只需在 SSR 场景下把 storage 设为 localStorage，避免 state hydration 冲突即可。

Q3：如何自定义钱包连接图标？
A：wallets 参数允许传入自定义 WalletFactory 对象，雅黑、线性、3D 图标皆可自由替换。

Q4：遇到“Provider not found”报错怎么办？
A：99% 情况是外层忘记包裹 EthWeb3jsConfigProvider，检查层级结构即可解决。

Q5：能集成到 Vite/Next.js/Remix 吗？
A：已通过主流打包器测试，支持热更新与 tree-shaking，无痛接入现代构建流程。

开发提效小贴士

开启 HMR 热重载 时，用 storage: sessionStorage 可避免钱包频繁断开。
将 chains 提取到单独文件，后期一键切换不同测试网更方便。
语义化关键词如“签名、铸造、NFT、钱包、以太坊”，有助于 SEO 与团队协作。

最后，当你准备把 DApp 从测试网迈向生产，👉 这个一站式钱包安全检测工具值得你收藏](https://okxdog.com/)，它能在上线前捕获潜在风险。