至于背景，一个 DeFi 看板项目引发的血案

三个月前，我接了一个 DeFi 看板项目。需求是实时展示某个 Uniswap V3 池子的 Swap 事件——使用者一交易，前端就要立刻显示新的交易记录。听起来很简单对吧，我当时也这么想。

项目用的是 React + TypeScript，链上交互本来用 ers.js v5。但我想着新项目嘛，试试 wagmi v2 和 viem 这套组合拳。毕竟文档说它们“更现代、类型安全、支持 tree-shaking”。结果这一步踏出去，我就在坑里待了三天。

说到问题分析，为什么我的监听总是断？话说回来，

说到第一天，ers.js 的 on 方法。看似简单实则坑多

我最初的思路很简单：用 ers.js 的 Contract 对象，直接 contract.on。老实说，代码大概这样这方面，

// 第一天写的代码。后来发现全是坑
const provider = new ers.providers.Web3Provider;const contract = new ers.Contract;contract.on => {
console.log;})，

跑起来之后前几分钟一切正常。接下来问题就来了：

• 坑1：断连后不自动重连 - 使用者切了网络。或者钱包断开再重连，监听就悄无声息地挂了。没有任何报错，就是收不到事件了。我在浏览器控制台蹲了半小时才意识到事件已经停了。话说回来，
• 坑2：组件卸载后还在监听 - React 组件卸载时我忘了调用 contract.removeAllListeners。结果页面切换到别的路由再回来事件回调被绑了两次每次事件触发两次 console.log。使用者要是来回切换几次页面直接卡死。
• 坑3：浏览器标签页休眠后恢复，事件堆积 - 使用者把标签页切到后台几分钟再切回来事件回调会一次性触发所有堆积的事件。说起来，我的看板列表瞬间插入几百条记录，UI 直接崩了。

说到第二天，尝试自己写重连逻辑。越写越复杂

I decided to wrap a reconnecting listener Hook myself. It ended up looking like this:

// Rough outline of custom hook
useEffect => {
const handleAccountsChanged = => subscribe;const handleChainChanged = => subscribe;provider.on，provider.on;return => {
provider.off;provider.off;话说回来，contract.removeAllListeners;
}，},);
function subscribe {
// Re-subscribe logic here
}

The code ran but still missed edge cases: simultaneous account and network switches caused duplicate subscriptions;some events were lost due to race conditions 娱乐ween reconnection timing and event arrival.

至于第三天，发现 wagmi v2 + viem 的 watchContractEvent 才是正解

I remembered that wagmi v2 docs mention a watchContractEvent. It turned out to be an all‑in‑one solution with built‑in reconnection。cleanup and batch handling.

从主要实现来看，用 wagmi v2 + viem 优雅监听合约事件

从第一步先来看，安装依赖并初始化

# I used se versions
npm install wagmi viem @tanstack/react-query

再看接下来，创建 wagmi 配置

// src/wagmi.ts
import { createConfig,http } from 'wagmi';import { mainnet,polygon } from 'wagmi/chains';
export const config = createConfig({
从chains来看。transports: {
: http,: http,},});

注意细节：If you need higher real‑time performance use WebSocket transports instead of HTTP. Some public RPCs don’t support WebSocket;Alchemy’s WS endpoint works well.

：封装 useSwapEvents Hook

// src/hooks/useSwapEvents.ts
import { useContractEvent } from 'wagmi';import { parseAbiItem } from 'viem';import { POOL_ADDRESS } from '../constants';import { useCallback } from 'react';const swapEventAbi = parseAbiItem(
'event Swap'
);export function useSwapEvents(
poolAddress: `0x${string}`。) {
const onSwap = useCallback => {
logs.forEach => {
const { sender,recipient,amount0,amount1 } = log.args;话说回来，console.log;// dispatch or update UI here
});},)，useContractEvent({
address: poolAddress,abi:。eventName: 'Swap',listener: onSwap,batch: true,});}

关键细节说明这方面，

1. Use useCallback: without it every render creates a new callback reference leading to infinite resubscriptions.
2. Set batch:true: batches events that accumulate while tab is inactive so UI doesn’t freeze on bulk updates.
3. Ensure address is checksummed – orwise you’ll see “Invalid address”.

说到第四步。在组件中使用示例

// src/components/SwapList.tsx
import { useState,useCallback } from 'react';import { formatUnits } from '@wagmi/core';// or viem formatUnits
import { useSwapEvents } from '../hooks/useSwapEvents';

interface SwapRecord { sender这方面，string;recipient:string;amount0:string;不过，amount1:string;说起来，timestamp:number;}

export function SwapList { const = useState;0x${string};，说起来，>

const onUpdateSwaps = useCallback=>{ const newSwaps = logs.map(log=>{ return{ sender : log.args.sender。recipient : log.args.recipient,amount0 : formatUnits,amount1 : formatUnits,timestamp : Date.now } });setSwaps)，// keep latest ~200 entries },);其实，

// Pass custom listener if needed: // useSwapEvents;// default logs -> console

return (

);}

第五步这方面，处理多链和多账户切换

• - wagmi's `useContractEvent` automatically cancels subscriptions when chain changes and re-subscribes on new chain.
• - If target chain lacks your contract it silently ignores subscription—no error thrown.
• - User switching accounts may still receive events tied to previous address. Filter m in your callback using ``:

import { useAccount } from 'wagmi';export function useMySwaps{
const {address} = useAccount;const onMySwaps=useCallback=>{
const myLogs=logs.filter(
log=>log.args.sender===address||log.args.recipient===address);// update state accordingly...
},);

useContractEvent({ address。poolAddress,abi:,eventName:'Swap',listener:onMySwaps,batch:true,});话说回来，}

小结

• The most hassle‑free way to listen for smart‑contract events in React is **wagmi v²'s ``**—it handles reconnection automatically and cleans up after itself.
• If you’re stuck using manual listeners。consider migrating now—you’ll save hours of debugging time over time.
• Next step?Dive into ``’s `` callback for handling RPC failures or rate limits gracefully.

---