- 组件总览
- 通用
- 连接链
- UI 组件
- 高级
Ant Design Web3 官方提供了 wagmi、ethers 等多个框架的适配器来适配以太坊，我们推荐使用 @ant-design/web3-wagmi，它是一个基于 wagmi 2.x 的 Ant Design Web3 以太坊适配器。它为 @ant-design/web3 的组件提供了连接以太坊等 EVM 兼容链的能力。通过它，你不需要自己处理组件的连接状态，链数据请求等逻辑。它会通过 Web3ConfigProvider 为组件提供相关全局状态和接口。
如果你使用的是 wagmi 1.x，你可以查看 @ant-design/web3-wagmi@1.2.0 文档。
如果你希望在项目中使用 ethers，我们提供了 @ant-design/web3-ethers 适配器，它兼容最新的 v6 和 v5 版本，你可以查看文档使用。
目前，我们官方提供了该以太坊的适配器，你也可以自己开发适配器来支持其它的链，关于适配器，你可以阅读适配器文档了解更多。
我们支持配置丰富的钱包、协议和交互方式，对于大部分 DApp 来说，我们基于对 DApp 用户的习惯分析，推荐使用如下配置：
该推荐配置主要包括：
quickConnect，提供快速连接入口，简化用户操作。simple 模式，简化界面。queryClient，方便后续自定义相关配置。通常情况下，我们不推荐你自定义 wagmi 配置，当你自定义 wagmi 配置并传入 WagmiWeb3ConfigProvider 时，会覆盖我们自动生成的默认配置。
基于 EIP6963 自动添加钱包，在 EIP6963 协议下，可以避免用户安装多个钱包导致的冲突，以及可以自动识别到用户已经安装的钱包。
为了降低引入包的大小，你需要手动配置 wallets 引入相关钱包。你可以从 @ant-design/web3-wagmi 中导出相关资源，如果没有你需要的资源，你可以通过提交 GitHub issue 告诉我们。也自己配置或者给我们提交 PR 支持。
另外，我们推荐设置 eip6963 为 true，避免用户安装多个钱包情况下出现冲突。配置了 eip6963 的情况下，你不再需要配置 wagmi 的 injected Connector, wagmi 的 multiInjectedProviderDiscovery 配置默认为 true，会自动添加检测到的钱包。
我们内置了 Mainnet，其余的链需要配置 chains，引入相关资源才可支持。引入方式和钱包类似。
SIWE 是指 Sign-In with Ethereum，你的网站可以通过签名来验证用户的登录，下面是一个示例，其中后端接口做了 Mock，你需要在你的项目中自行实现。
要想要快速使用 SIWE 需要设置三个关键的方法，获取 Nonce 值、构建签名以及验证签名。
你需要连接包含 ENS 和余额 的地址才能看到示例效果
当 showQrModal 配置不为 false 时，会使用 WallectConnect 自带的 web3modal 弹窗。
| 属性 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| config | wagmi 配置 | WagmiConfig | 2.8.0 后支持通过 chains 和 wallets 等配置自动生成 | - |
| queryClient | TanStack Query 实例 | new QueryClient() | - | - |
| wallets | 钱包配置 | WalletFactory[] | - | - |
| chains | 链的配置 | ChainAssetWithWagmiChain[] | - | - |
| ens | 是否显示 ENS | boolean | - | - |
| balance | 是否显示余额 | boolean | - | - |
| locale | 多语言设置 | Locale | - | - |
| eip6963 | 是否采用 EIP6963 协议钱包以及相关配置 | boolean | EIP6963Config | false | 2.2.0 |
| initialState | Wagmi 配置的初始状态，用于 SSR 预填充数据 | State | undefined | - | - |
| reconnectOnMount | 是否在组件挂载时重新连接之前已连接的连接器 | boolean | undefined | true | - |
| walletConnect | walletConnect 的配置 | false | WalletConnectOptions | - | 2.8.0 |
| transports | Transport 网关配置 | Record<number, Transport>; | - | 2.8.0 |
| siwe | SIWEConfig | CreateSiweMessageParameters | - | 2.10.0 |
| 属性 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autoAddInjectedWallets | 是否自动添加检测到的钱包 | boolean | false | 2.2.0 |
| 属性 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| name | 钱包名称 | Connector | - | - |
| create | 创建钱包的方法 | (connector: Connector) => Promise<Wallet> | - | - |
上面的
Connector是指 wagmi 中的Connector，Wallet则是 Wallet。
用于自己定钱包的类，它满足 WalletFactory 的接口要求。具体使用可以参考自定义钱包信息的示例。
基于 Chain[] 新增了 wagmiChain 字段，用于支持链的配置。通过类似 import { Mainnet } from '@ant-design/web3-wagmi'; 的方式引入。
基于 wagmi WalletConnectParameters 配置，做了处理，新增了 useWalletConnectOfficialModal 字段，用于控制是否使用 WalletConnect 官方的弹窗。
export interface WalletConnectOptionsextends Pick<WalletConnectParameters,| 'disableProviderPing'| 'isNewChainsStale'| 'projectId'| 'metadata'| 'relayUrl'| 'storageOptions'| 'qrModalOptions'> {useWalletConnectOfficialModal?: boolean;}
CreateSiweMessageParameters 参考了 viem/siwe 的定义。
| 属性 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| getNonce | 获取 Nonce 值 | (address: string, chainId?: number) => Promise<string> | - | - |
| createMessage | 构建签名信息 | (args: CreateSiweMessageParameters) => string | - | - |
| verifyMessage | 验证签名信息 | (message: string, signature: string) => Promise<boolean> | - | - |