ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

wagmi Tempo 系列:`Actions.token.watchMint` 监听 TIP20 代币铸造事件完整指南

2026/9/18 4:30:44 拓冰建站 浏览量
wagmi Tempo 系列:`Actions.token.watchMint` 监听 TIP20 代币铸造事件完整指南 wagmi Tempo 系列Actions.token.watchMint监听 TIP20 代币铸造事件完整指南【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi导读Actions.token.watchMint是 wagmi 为 Tempo 网络提供的实时事件监听 Action用于订阅 TIP20 代币的Mint铸造事件一旦链上发生铸造回调函数会立刻收到铸造参数与事件日志。本指南以 site/tempo/actions/token.watchMint.md 为骨架结合 packages/core/src/tempo/actions/token.ts 与 React 侧 packages/react/src/tempo/hooks/token.ts 的源码实现从基本用法、参数全解、轮询机制到测试用例与 React Hook 封装逐层讲解如何在以太坊应用中接入 TIP20 铸造事件的订阅能力。读完你将能独立完成「创建 Config → 订阅铸造事件 → 处理回调 → 注销监听」的完整闭环并理解其底层调用链与适用边界。前置知识Tempo 与 TIP20Tempo 是 wagmi 内置支持的网络在仓库中以 tempo 目录承载全部相关 Action 与 Hook链定义位于wagmi/chains。TIP20 是 Tempo 上的代币标准支持创建token.create、铸造token.mint、转账token.transfer、销毁token.burn等操作并引入了issuer发行者等角色概念见测试中对grantRoles的调用packages/core/src/tempo/actions/token.test.ts。watchMint属于「只读订阅」类 Action它不签名、不发交易只持续监听链上事件并在每次铸造发生时把**参数args与日志log**传给回调。因此它天然适合用于实时余额刷新、铸造监控面板、通知推送等场景。基本用法订阅一次铸造事件原文档给出的最小可用示例如下import { Actions } from wagmi/tempo import { config } from ./config const unwatch Actions.token.watchMint(config, { token: 0x20c0000000000000000000000000000000000001, onMint(args, log) { console.log(args:, args) }, }) // Later, stop watching unwatch()其中config来自 site/snippets/react/config-tempo.ts 所示的 Tempo 专用配置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(), }, })要点拆解导入路径在 wagmi 聚合包下从wagmi/tempo导入Actions使用wagmi/core时则从wagmi/core/tempo导入源码注释中的写法见 packages/core/src/tempo/actions/token.ts。token参数传 TIP20 代币地址Address或代币 IDbigint两种形式都支持。返回的unwatch类型为() void调用后即停止监听并释放内部资源建议在组件卸载或不再需要监听时调用避免事件泄漏。从源码看watchMint的实现非常薄packages/core/src/tempo/actions/token.tsexport function watchMintconfig extends Config( config: config, parameters: watchMint.Parametersconfig, ) { const { chainId, ...rest } parameters const client config.getClient({ chainId }) return Actions.token.watchMint(client, rest) }即先从 Config 中取出对应chainId的 viem Client再把剩余参数原样转发给 viem/tempo 的Actions.token.watchMint。这说明wagmi 层负责「配置与客户端解析」真正的事件订阅逻辑由 viem 的 Tempo 实现承担文档底部也给出了对应的 viem 参考页。参数详解onMint、token、过滤与轮询原文档完整列出了全部参数下面逐一展开说明。onMint必填类型为function签名declare function onMint(args: Args, log: Log): void type Args { /** Address that received the tokens */ to: Address /** Amount minted */ amount: bigint }第一个参数args是铸造事件的核心数据to为收款地址amount为铸造数量bigint类型注意与parseUnits(100, 6)等小数位换算配合使用见下文测试用例。第二个参数log是对应的事件日志对象包含区块、交易、日志索引等链上元信息。token类型Address | bigint指定要监听的 TIP20 代币可以是合约地址如文档示例中的0x20c0...0001也可以是代币 ID数值形式。args可选类型为object当前支持按收款地址过滤type Args { /** Filter by recipient address */ to?: Address | Address[] | null }传入单个地址或地址数组时只有to匹配的铸造事件才会触发回调不传则监听该代币的全部铸造事件。fromBlock可选类型bigint指定从哪个区块高度开始监听。默认从最新区块开始设置历史区块后事件扫描将从该高度起适用于「上线后补拉遗漏事件」的场景。onError可选类型function签名declare function onError(error: Error): void。当「获取新区块」过程中发生错误时调用用于日志上报与异常兜底。文档原话是 The callback to call when an error occurred when trying to get for a new block即它捕获的是轮询/扫描过程中拉取新区块失败的错误而非事件本身的业务错误。poll可选类型true置为true时启用轮询模式。Tempo 的实时事件默认走订阅通道若当前环境如某些 RPC 提供方不支持订阅可退回轮询模式。pollingInterval可选类型number轮询频率单位为毫秒ms。默认取 Client 的pollingInterval配置即 Config 中 transport 层设置的值显式传入则可覆盖默认值例如高频铸造场景下可缩短到 1000ms 以内。参数速查表参数类型必填说明onMintfunction是铸造事件回调接收(args, log)tokenAddress \| bigint是TIP20 代币地址或 IDargs.toAddress \| Address[] \| null否按收款地址过滤fromBlockbigint否起始监听区块高度onErrorfunction否拉取新区块出错时的回调polltrue否启用轮询模式pollingIntervalnumber否轮询间隔ms默认取 Client 配置从源码看调用链Config 到 viem ClientwatchMint之所以能跨框架复用是因为它在 wagmi 层的实现只有「取 Client 转发」两步config.getClient({ chainId })依据链 ID 解析出 viem Clienttransport、链配置均来自createConfig将chainId剥离后的参数token、onMint、poll等直接传给Actions.token.watchMint(client, rest)packages/core/src/tempo/actions/token.ts。类型定义方面watchMint.Parameters是ChainIdParameterconfig Actions.token.watchMint.Parameters的交集packages/core/src/tempo/actions/token.ts即它额外继承了chainId参数——当 Config 配置了多条链时可用chainId显式指定在哪个链上监听未指定则使用默认链。真实工作流测试用例如何验证订阅闭环仓库中的测试用例完整演示了「创建代币 → 授权发行者 → 订阅 → 触发铸造 → 断言事件 → 注销」的全流程packages/core/src/tempo/actions/token.test.ts// 1. 连接第一个 connector await connect(config, { connector: config.connectors[0]! }) // 2. 创建一个新代币 const { token: tokenAddr } await token.createSync(config, { currency: USD, name: Watch Mint Token, symbol: WATCHMINT, }) // 3. 给自己授予 issuer 角色铸造权限 await token.grantRolesSync(config, { token: tokenAddr, roles: [issuer], to: account.address, }) // 4. 订阅铸造事件 const events: any[] [] const unwatch token.watchMint(config, { token: tokenAddr, onMint: (args) { events.push(args) }, }) // 5. 触发一次铸造 await token.mintSync(config, { token: tokenAddr, to: account.address, amount: parseUnits(100, 6), }) // 6. 等待事件到达并断言 await vi.waitFor(() { expect(events.length).toBeGreaterThan(0) }) unwatch() // 7. 校验事件内容 expect(events[0]?.to).toBe(account.address) expect(events[0]?.amount).toBe(parseUnits(100, 6))该测试同时验证了几个关键事实事件参数结构与文档一致args.to对应收款地址args.amount对应铸造数量金额是bigint用parseUnits(100, 6)按 6 位小数构造。异步到达监听回调是异步触发的测试用vi.waitFor轮询等待事件数组非空。unwatch()幂等可安全调用事件断言完成后立即注销。前置依赖铸造需要issuer角色订阅事件前需先完成授权否则铸造不会成功、事件也不会产生。React 封装Hooks.token.useWatchMint在 React 应用中不必手动管理 Config 与useEffect仓库提供了现成的 Hook 封装packages/react/src/tempo/hooks/token.tsimport { Hooks } from wagmi/tempo function App() { Hooks.token.useWatchMint({ onMint(args) { console.log(Mint:, args) }, }) return divWatching for mints.../div }Hook 的源码实现揭示了几点设计细节export function useWatchMintconfig extends Config ResolvedRegister[config]( parameters: useWatchMint.Parametersconfig {}, ) { const { enabled true, onMint, token, ...rest } parameters const config useConfig({ config: parameters.config }) const configChainId useChainId({ config }) const chainId parameters.chainId ?? configChainId useEffect(() { if (!enabled) return if (!onMint) return if (!token) return return Actions.token.watchMint(config, { ...rest, chainId, onMint, token, }) }, [ config, enabled, chainId, token, onMint, rest.fromBlock, rest.onError, rest.poll, rest.pollingInterval, ]) }自动生命周期管理Hook 在useEffect中调用Actions.token.watchMint并把其返回的unwatch作为 effect 清理函数返回——组件卸载或依赖变化时自动注销无需手动清理。守卫条件enabled、onMint、token任一不满足时直接跳过订阅避免无效监听。依赖数组精确fromBlock、onError、poll、pollingInterval变化都会重建订阅保证参数最新。chainId智能推导未显式传入chainId时使用useChainId得到当前链。参数类型useWatchMint.Parameters为ExactPartialActions.token.watchMint.Parameters ConfigParameter { enabled?: boolean }即所有参数可省略onMint、token可在后续渲染中再提供并额外支持config覆盖与enabled开关。边界与最佳实践监听起点默认从最新区块开始历史事件不会补发需要历史数据时显式传fromBlock或将事件落库后再用getContractEvents类查询接口回溯。网络容错订阅通道不可用时启用poll: true并通过pollingInterval控制频率与 RPC 压力onError用于捕获扫描过程中的异常并做重连/告警。金额处理amount是bigint展示前需按代币小数位格式化如parseUnits(100, 6)对应的 6 位小数。资源释放非 React 场景务必在合适时机调用返回的unwatch()React 场景交给 Hook 自动处理。多链场景Config 配置多链时通过chainId参数指定监听目标链配合 config-tempo.ts 中transports[tempo.id]的配置方式理解链与 transport 的绑定关系。延伸阅读同系列事件监听token.watchTransfer、token.watchCreate、token.watchBurn、token.watchRole等均位于 site/tempo/actions 目录参数结构与本文一致React Hook 完整列表见 packages/react/src/tempo/hooks/token.tsTempo 的完整 Action 与 Hook 索引可参考 site/tempo/actions/index.md 与 site/tempo/hooks/index.md若需自定义轮询间隔可在 site/snippets/react/config-tempo.ts 的createConfig中为 transport 配置pollingInterval作为watchMint的默认值。【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考