mcpField
W
wagmi-v3

wagmi-v3

github.com/blockmatic开发1221 次安装5 周前更新
代码仓库

关于 wagmi-v3

面向 React 和 Next.js 开发者的 Wagmi v3 钱包与 EVM 合约交互指南。它提供钱包状态、地址校验、交易模拟和 SSR 处理等实践模式。

主要功能

  1. 01钱包连接状态管理
  2. 02合约读写 Hook
  3. 03viem 地址校验与交易工具
  4. 04写入前模拟合约
  5. 05Next.js SSR 钱包状态处理

适用场景

  1. 01在 React 应用中集成 EVM 钱包
  2. 02读取合约数据并管理缓存
  3. 03模拟并提交合约交易
  4. 04在 Next.js 中持久化钱包状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/blockmatic/basilic-skills --skill wagmi-v3

安装后在 Claude Code 中输入/wagmi-v3确认已加载。

附带文件PATTERNS.mdreferences/GUIDE.md

详细介绍

技能：wagmi

范围

  • 使用 Wagmi v3 为 EVM 链集成 React/Next.js 钱包
  • 使用 viem v2 进行合约交互，包括地址验证和交易构建
  • 交易状态管理和错误处理
  • 封装 wagmi、用于特定合约交互的自定义 Hooks

不涵盖：

  • Solana 前端开发
  • 后端 RPC 交互
  • 智能合约开发

假设

  • Wagmi v3.3.2+
  • viem v2.44.4
  • React 18+ 或 Next.js 14+
  • TypeScript v5+，启用严格模式
  • TanStack Query v5+（wagmi 的对等依赖）
  • WalletConnect v2+（可选，用于 WalletConnect 连接器）

原则

  • 使用 Wagmi v3.x Hooks 管理钱包状态（useAccount、useWriteContract、useReadContract、useWaitForTransactionReceipt、useSimulateContract）
  • 使用 viem v2 验证地址（getAddress）并处理交易（parseEther、parseGwei）
  • 封装 wagmi，创建用于特定合约交互的自定义 Hooks
  • 明确处理连接状态：已断开、连接中、已连接、重新连接中
  • 使用前通过 viem 的 getAddress() 验证地址（绝不直接强制转换为 Address）
  • 使用根据 OpenAPI 规范生成的合约 ABI 和类型
  • 使用 TanStack Query（通过 wagmi）缓存并重新获取合约数据
  • 写入前模拟合约调用，以进行验证并估算 Gas
  • 使用带有 enabled 标志的条件查询，避免不必要的获取
  • 使用 Cookie 存储持久化钱包状态，妥善处理 SSR

约束

必须
  • 使用 Wagmi v3.x（而不是 v1 或 v2）——v1/v2 的模式不兼容
  • 使用 viem 的 getAddress() 验证地址——绝不直接强制转换字符串
  • 在 Next.js 中妥善处理 SSR（对钱包组件使用 dynamic 并设置 ssr: false）
应该
  • 为合约交互创建自定义 Hooks
  • 写入前模拟合约调用（useSimulateContract）
  • 使用带有 enabled 标志的条件查询
  • 使用 Cookie 存储实现 SSR 持久化
  • 明确处理所有连接状态
避免
  • 除非有必要进行抽象，否则不要封装 OpenAPI 客户端生成的 Hooks
  • 不要在组件中暴露私钥或敏感钱包数据
  • 不要跳过地址验证

交互

  • 使用根据 OpenAPI 规范生成的合约 ABI/类型
  • 与用于 API 开发的 fastify 相辅相成

模式和代码示例：PATTERNS.md。

评论

支持 Markdown