用途:为 Celo dApp 添加钱包连接能力,支持多种钱包类型、认证流程与钱包交互体验。适用时机包括新增钱包连接、支持多钱包、实现认证流程与构建钱包体验。
可选方案:Reown AppKit(原 WalletConnect 官方 SDK,配合 wagmi,内置钱包 UI,支持 600+ 钱包,适合生产 React 应用);Dynamic(偏认证与用户管理仪表盘);ConnectKit(简单 wagmi 集成,适合快速搭建);自定义 wagmi(直连 connector,完全可控)。
Reown AppKit 用法:安装 npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query。在 cloud.reown.com 创建项目并获取 project ID。配置使用 WagmiAdapter,指定 networks(celo、celoAlfajores)与 projectId。在客户端用 createAppKit 初始化,并以 WagmiProvider 与 QueryClientProvider 包裹应用。可直接使用 AppKitButton,或用 useAppKit、useAppKitAccount 自定义按钮;也可继续使用 wagmi 的 useAccount、useBalance、useDisconnect 等 hook。
Dynamic 用法:安装 npm install @dynamic-labs/sdk-react,用 DynamicContextProvider 配置 environmentId,并使用 DynamicWidget;在 app.dynamic.xyz 仪表盘的 Configurations 中开启 EVM 下的 Celo。
自定义实现:用 wagmi 的 createConfig 配置 chains 与 connectors(injected、walletConnect、metaMask),transports 指定各链 http,再用 useConnect、useConnectors 等实现连接 UI。
网络:Celo 主网 chain ID 42220;Celo Alfajores 44787;Celo Sepolia 11142220(wagmi 导入 celoSepolia)。Reown project ID 为 WalletConnect 连接所需,存入环境变量如 NEXT_PUBLIC_REOWN_PROJECT_ID。
最佳实践:支持多钱包、处理网络切换、展示连接状态、处理错误、移动端测试。依赖版本示例:Reown AppKit 方案含 @reown/appkit、@reown/appkit-adapter-wagmi、wagmi、viem、@tanstack/react-query;自定义 wagmi 方案仅需 wagmi、viem、@tanstack/react-query。限制:资料未提供收费、价格或效果数据;部分内容以官方文档为准。