// ❌ 错误写法
import { createConfig } from 'wagmi'
import { mainnet。polygon } from 'wagmi/chains'

错误原因这方面，wagmi/chains 在 v2 已不存在要从 viem/chains 导入，而且 createConfig 要从 @wagmi/core 导入。

The second headache was chain switching. After using useSwitchChain,returned { chainId },although changed,didn’t trigger a refresh of NFT list on page because my useEffect had a wrong dependency array.

再看第一步先，正确配置多链

The solution is straightforward: configure wagmi like this:

// config/wagmi.ts
import { http。createConfig } from '@wagmi/core'
import { mainnet,polygon } from 'viem/chains'
import { metaMask } from 'wagmi/connectors'
export const wagmiConfig = createConfig({
说到chains，connectors:,transports: {
: http,: http,},})

说到坑点，'transports' keys 必须是数字 id 而不是字符串！否则 RPC 请求超时，

The root component needs both WagmiProvider and QueryClientProvider:

// app/providers.tsx
'use client'
import { WagmiProvider } from 'wagmi'
import { QueryClient,QueryClientProvider } from '@tanstack/react-query'
import { wagmiConfig } from '@/config/wagmi'
const queryClient = new QueryClient
export function Providers {
return (


{children}


)
}

接下来这方面，链切换与状态同步

The core logic lives in a custom hook that exposes a context for chain state:

// hooks/useActiveChain.ts
'use client'
import { useAccount,useSwitchChain } from 'wagmi'
import {
createContext。useContext,useEffect,useState,} from 'react'
interface ChainContextValue {
chainId: number | undefined
chainName: string
switchChain: => Promise
isSwitching: boolean
}
const ChainContext = createContext({
chainId: undefined,chainName: '',switchChain: async => {},})
export function ChainProvider {
const { chainId } = useAccount
const { switchChainAsync,isPending } = useSwitchChain
const = useState
// sync local state when wagmi updates its internal `chainId`
useEffect => {
if {
setActiveChainId
localStorage.setItem)
}
},)
const switchChain = async => {
try {
await switchChainAsync
} catch {
console.error
}
}
const chainName =
activeChainId === mainnet.id?'Ereum' :
activeChainId === polygon.id?不过，'Polygon' : 'Unknown'
return (

{children}

)
}
export const useActiveChain = => useContext

至于另一个坑。'switchChainAsync' 是异步函数，需要 await，否则不会真正切换。

：NFT 数据读取

NFT 列表使用合约调用，需要根据当前链地址动态决定：

// components/NFTList.tsx
'use client'
import { useReadContract } from 'wagmi'
import { useActiveChain } from '@/hooks/useActiveChain'
import nftABI from '@/contracts/nftABI'
const CONTRACT_ADDRESSES : Record ={
mainnet.id:'0xYourMainnetContract'。polygon.id:'0xYourPolygonContract',}
export function NFTList {
const{chainId}=useActiveChain
const contractAddress=chainId?
CONTRACT_ADDRESSES:undefined
const{data,totalSupply。error}=useReadContract({
address : contractAddress!abi:nftABI,functionName :'totalSupply',})
// 当链变更时强制 refetch
useEffect=>{refetch}。)
if return 

请先连接钱包
return (


当前链上有{totalSupply?.toString，?"..."} 个 NFT
{/* render list */}

)
}

提醒这方面。如果把地址硬编码到某条链上，而当前为另一条，会导致 ContractFunctionExecutionError；记得动态读取地址，

从第四步来看，签名验证

NFT 出价需要 EIP‑712 签名。domain 中必须使用当前链 ID：

// utils/signBid.ts
import { useSignTypedData } from 'wagmi'
import { useActiveChain } from '@/hooks/useActiveChain'
export function useSignBid {
const{chainId}=useActiveChain
const{signTypedDataAsync}=useSignTypedData
async function signBid{
const domain={
从name来看，'NFTMarketplace',version:'',chainID : chainID!,// 必须动态获取，verifyingContract:'0xYourMarketplaceContract',}
const types={
Bid的观点是，}
const message={
nftID,price,nonce,}
return await signTypedDataAsync({
domain,types,primaryType:'Bid',message。})
}
return{signBid}
}

"域中的 chainID 写死导致后端验签失效".

完整代码示例

• /app/providers.tsx – 上面已展示过；请确保在 layout 引入 Providers 包装整个应用。
• /app/page.tsx – 页面入口示例：
• /hooks/useActiveChat – 用于管理全局链状态；已展示完毕，
• /components/NFTList – NFT 列表组件；已展示完毕，
• /utils/signBid – 签名逻辑；已展示完毕，不过，
• /config/wagmu.ts – 全局 Wagmu 配置；已展示完毕，按理说，
• /layout.jsx – 包装 Providers：
• = /app/layout.jsx — 如下所示：

Home Component Example

<?php>

请注意

• 不要忘记将 transports key 设置为数字 ID；
• 记得在根组件中包裹 与 ；
• 每次修改都要重启 dev server 并清除缓存。

踩坑记录

• . Cannot read properties of

• . 切换网络后页面数据不更新：依赖数组写错导致 refetch 没执行。改成 就行。话说回来，
• . Polygon 上签名后端验签失败：domain.chainID 写死导致验签不通过。动态获取即可解决，
• . 未连接钱包时使用 useReadContract 返回
  。

  ---