用途:为 dApp 前端提供生产级用户体验模式,覆盖从钱包连接到交易确认的完整用户旅程,包含错误处理、Gas 估算、授权流程、移动端支持与上线 QA 清单。技术栈基于 wagmi v2、viem 和 RainbowKit。
主要能力:
- 钱包连接四状态机:disconnected、connecting、connected、wrong-network,需处理连接中加载、错误网络提示与页面刷新自动重连。
- 交易四状态生命周期:idle、awaiting-signature、pending、confirmed-or-failed,每个状态需有独立 UI。
- 错误处理分类:用户拒绝(4001)应静默重置而非报错;4100、4200、4900、4901 及 RPC 错误码(-32700、-32600、-32601、-32602、-32603)各有对应 UX 响应。
- Gas 估算:将 Gas 费用换算为美元展示,技术细节放入可展开区域;支持 EIP-1559 慢/正常/快三档费率。
- 授权流程:默认精确金额授权,无限授权作为可选项,或使用 Permit2 单笔完成授权与转账。
- 区块浏览器链接:根据链配置生成正确 URL 并在新标签页打开。
- 移动端:通过 WalletConnect v2 与深度链接连接,需在 MetaMask Mobile 等应用内浏览器测试。
使用方式:安装命令为 npm install @rainbow-me/rainbowkit wagmi viem @tanstack/react-query。使用 RainbowKit 的 getDefaultConfig 配置链与 WalletConnect projectId,通过 WagmiProvider、QueryClientProvider、RainbowKitProvider 包裹应用。ConnectButton.Custom 可自定义连接按钮各状态。交易组件使用 useWriteContract 与 useWaitForTransactionReceipt 管理状态。EIP-6963 多注入提供者检测在 wagmi v2 中默认开启。
适用场景:需要提升钱包连接与交易体验的 dApp 前端,尤其是多链、移动端和需要清晰错误反馈的生产环境。
限制:资料未提供具体价格、收费或平台支持范围;部分实现细节(如价格源)需自行替换。