wagmi Tempo 事件监听实战使用token.watchApprove监听 TIP20 代币授权事件【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmitoken.watchApprove是 wagmi Tempo 模块中用于持续监听 TIP20 代币Approve授权链上事件的 Action适用于需要实时感知授权动作的应用场景如钱包安全面板、DeFi 授权管理工具。读完本文你将掌握Actions.token.watchApprove的完整参数体系、取消订阅方式、底层实现原理源码位置以及对应的 React Hook 用法可直接接入真实项目。功能概述什么是 TIP20 代币授权事件TIP20 是 Tempo 链上类似 ERC-20 的代币标准。当代币持有者owner调用approve授权某个 spender 一定额度时链上会发出Approval事件。token.watchApprove就是专门订阅该事件的监听器事件一旦发生回调即被触发无需轮询区块或在交易后手动查询。在 packages/core/src/tempo/actions/token.ts 中该 Action 的 TSDoc 注释将其描述为 Watches for TIP20 token approval events并给出了与本文一致的完整示例。它属于wagmi/core/tempo命名空间下token模块与watchBurn、watchCreate、watchTransfer等同属 TIP20 事件监听族。基本用法订阅授权事件以下示例完整继承自官方文档 token.watchApprove.md可直接运行import { Actions } from wagmi/tempo import { config } from ./config const unwatch Actions.token.watchApprove(config, { token: 0n, onApproval(args, log) { console.log(args:, args) }, }) // Later, stop watching unwatch()核心调用模式为传入config与参数对象立即返回一个unwatch函数在不再需要监听时调用unwatch()即可取消订阅避免内存泄漏。配套 config 配置示例中的./config指向 site/snippets/react/config-tempo.ts内容如下import { createConfig, http } from wagmi import { tempo } from wagmi/chains import { tempoWallet } from wagmi/tempo export const config createConfig({ connectors: [tempoWallet()], chains: [tempo], multiInjectedProviderDiscovery: false, transports: { [tempo.id]: http(), }, })要点说明使用tempo链wagmi/chains与tempoWallet()连接器wagmi/tempo并通过http()传输层连接 Tempo 网络transports以链 ID 为键这里的[tempo.id]: http()表示默认通过 HTTP RPC 读取事件。参数详解Actions.token.watchApprove的参数对象包含以下成员逐一说明onApproval必填类型functiondeclare function onApproval(args: Args, log: Log): void type Args { /** Amount approved */ amount: bigint /** Address of the token owner */ owner: Address /** Address of the spender */ spender: Address }授权事件触发时回调回调参数包含args.amount被授权的额度bigint类型单位与代币精度相关测试中常配合parseUnits换算见下文测试章节args.owner代币持有者地址args.spender被授权方地址log原始事件日志对象可用于获取区块号、交易哈希等链上元数据。token类型Address | bigint要监听的 TIP20 代币地址或 ID。在测试用例中传入的是代币合约地址addresses.alphaUsd也可传代币 ID。args可选类型objecttype Args { /** Filter by token owner address */ owner?: Address | Address[] | null /** Filter by spender address */ spender?: Address | Address[] | null }按 owner 和/或 spender 地址过滤事件。两个字段均支持传入单个地址或地址数组只关心特定账户的授权行为时可大幅减少回调次数。fromBlock可选类型bigint开始监听的起始区块号。不传时通常从最新区块开始适合只关心从现在起的新事件。onError可选类型functiondeclare function onError(error: Error): void当尝试获取新区块失败时调用如 RPC 临时不可用用于错误上报或日志记录保证监听过程异常可见。poll可选类型true启用轮询模式。传入true时以固定间隔轮询新区块来发现事件不传则优先使用 WebSocket 等订阅式推送。pollingInterval可选类型number轮询频率毫秒。默认继承 Client 配置中的pollingInterval仅当使用poll模式时生效。返回类型() void返回一个取消订阅函数。调用后停止监听并释放资源官方文档与源码注释均明确说明其语义为 Returns a function to unsubscribe from the event。底层实现从 wagmi 到 viem 的调用链从源码结构看watchApprove是一个典型的 wagmi Action 包装层。核心实现在 packages/core/src/tempo/actions/token.tsexport function watchApproveconfig extends Config( config: config, parameters: watchApprove.Parametersconfig, ) { const { chainId, ...rest } parameters const client config.getClient({ chainId }) return Actions.token.watchApprove(client, rest) }其工作流程为从参数中解构出可选的chainId其余参数透传通过config.getClient({ chainId })获取对应链的 viem Client调用 viem Tempo 的Actions.token.watchApprove(client, rest)完成真正的链上订阅。类型层面watchApprove.Parameters是ChainIdParameterconfig与 viem 同名 Action 参数的交叉类型意味着你还可以额外传入chainId来指定监听目标链token.ts。该 Action 通过 packages/core/src/tempo/actions/index.ts 以export * as token from ./token.js的形式暴露因此可通过Actions.token.watchApprove访问。测试用例验证在 packages/core/src/tempo/actions/token.test.ts 中watchApprove有完整的集成测试验证了端到端行为const unwatch token.watchApprove(config, { onApproval: (args) { events.push(args) }, token: addresses.alphaUsd, }) // Trigger approval event await token.approveSync(config, { amount: parseUnits(50, 6), spender: account2.address, token: addresses.alphaUsd, }) await vi.waitFor(() { expect(events.length).toBeGreaterThan(0) }) unwatch()测试流程展示了监听器完整的生命周期先连接钱包 → 注册watchApprove→ 调用approveSync触发一次真实授权 →vi.waitFor等待事件回调被推入数组 → 断言owner、spender、amount与授权参数一致 → 最后unwatch()清理。这印证了回调参数语义args.owner为授权账户、args.spender为被授权账户、args.amount为parseUnits(50, 6)换算后的额度代币精度为 6 位小数。React 场景使用useWatchApproveHook在 React 应用中推荐直接使用对应的 Hook 形式Hooks.token.useWatchApprove其实现位于 packages/react/src/tempo/hooks/token.tsimport { Hooks } from wagmi/tempo function App() { Hooks.token.useWatchApprove({ onApproval(args) { console.log(Approval:, args) }, token, }) return divWatching for approvals.../div }Hook 内部基于useEffect封装了Actions.token.watchApprove以enabled、onApproval、token、chainId及fromBlock、onError、poll、pollingInterval等为依赖任一变化都会自动重新订阅组件卸载或enabled为false时自动调用清理函数取消监听无需手动管理unwatch。小结token.watchApprove提供了一条从 wagmi Config 直达 viem Tempo 订阅能力的精简路径。掌握其参数语义onApproval回调、token目标、args地址过滤、fromBlock起始区块、onError异常处理、poll/pollingInterval轮询控制后即可为你的 Tempo 应用实时接入 TIP20 授权事件流配合watchTransfer、watchBurn等监听器构建完整的链上活动面板。【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考