wagmi

用途

wagmi 为以太坊提供 React Hooks，覆盖钱包连接、合约读写、交易签名与链切换，建立在 viem（TypeScript 以太坊库）之上，用于构建 React dApp 前端。

主要能力与使用方式

安装

npm install wagmi viem @tanstack/react-query
npm install @rainbow-me/rainbowkit    # optional: beautiful wallet modal

配置（示例文件 lib/wagmi.ts）

通过 createConfig 指定 chains（如 mainnet、polygon、arbitrum）、connectors（如 injected、walletConnect）以及各链的 transports（示例使用 Alchemy 的 HTTP 地址，含 KEY 占位符）。

import { createConfig, http } from 'wagmi'
import { mainnet, polygon, arbitrum } from 'wagmi/chains'
import { injected, walletConnect } from 'wagmi/connectors'

export const config = createConfig({
  chains: [mainnet, polygon, arbitrum],
  connectors: [
    injected(),    // MetaMask, Coinbase Wallet, etc.
    walletConnect({ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID! }),
  ],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/KEY'),
    [polygon.id]: http('https://polygon-mainnet.g.alchemy.com/v2/KEY'),
    [arbitrum.id]: http('https://arb-mainnet.g.alchemy.com/v2/KEY'),
  },
})

Provider 包裹

在客户端组件中，使用 WagmiProvider（传入 config）外层包裹 QueryClientProvider（传入 QueryClient），再渲染子组件。

'use client'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from '@/lib/wagmi'

const queryClient = new QueryClient()

export function Providers({ children }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  )
}

连接钱包

使用 useAccount 获取地址与连接状态，useConnect 获取 connect 与 connectors，useDisconnect 获取 disconnect。示例按 connectors 渲染按钮以连接不同钱包，连接后展示截断地址并提供断开按钮。

读取与写入合约

读取：useReadContract 传入 address、abi、functionName 与 args（示例用 erc20Abi 读取 balanceOf）。

写入：useWriteContract 获取 writeContract 与交易 hash，useWaitForTransactionReceipt 依据 hash 返回 isLoading、isSuccess；示例通过 writeContract 调用 transfer，参数使用 parseUnits(amount, 6)。

适用场景

需要在 React 前端连接钱包、在组件中读取区块链数据、发送交易、签名、切换链的 dApp 开发。

限制与注意事项

wagmi v2 底层使用 TanStack Query，复用其缓存与重新获取模式。可使用 RainbowKit 以较少代码获得更完整的钱包连接 UI。需要始终处理链切换，因为用户可能处于错误的网络。viem 是 wagmi 的底层库，可用于服务端以太坊交互。除此以外，本资料未提供其他功能、收费、价格或平台信息。

技能介绍

用途

主要能力与使用方式

适用场景

限制与注意事项