wagmi Tempodex.useWatchOrderCancelledReact 中监听稳定币 DEX 订单取消事件的完整指南【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi本文围绕 wagmi 为 Tempo 网络提供的Hooks.dex.useWatchOrderCancelled进行深入讲解它用于在 React 应用中订阅 Tempo 稳定币 DEXStablecoin DEX的订单取消order cancelled事件是构建订单簿交易 UI 时实时感知订单被撤销的核心工具。读完本文你将掌握该 Hook 的完整参数语义、与底层dex.watchOrderCancelledAction 的调用链路、事件过滤技巧如按orderId精确订阅以及如何与dex.cancel搭配实现取消即刷新的实战模式。背景Tempo 与稳定币 DEXTempo 是一条专注于支付场景的 Layer 1 区块链其协议内置了代币管理TIP-20、Fee AMM 以及稳定币 DEX订单簿式交易所等能力详见 Tempo 入门指南。在 wagmi 中Tempo 网络获得了一等公民支持wagmi/tempo模块同时导出了声明式 HooksHooks.*与命令式 ActionsActions.*分别面向 React 组件与纯逻辑调用场景。Hooks.dex.useWatchOrderCancelled正是这一体系下负责监听订单取消事件的 Hook与其配套的还有useWatchOrderPlaced下单事件、useWatchOrderFilled成交事件、useWatchFlipOrderPlacedFlip 单下单事件等监听型 Hook完整清单见 Tempo Hooks 总览。快速上手最小可用示例在 React 组件中使用useWatchOrderCancelled只需传入onOrderCancelled回调import { Hooks } from wagmi/tempo function OrderFeed() { Hooks.dex.useWatchOrderCancelled({ onOrderCancelled: (args, log) { console.log(args:, args) }, }) return div正在监听订单取消事件.../div }其中onOrderCancelled回调签名如下定义于 action 文档declare function onOrderCancelled(args: Args, log: Log): void type Args { /** 被取消订单的 ID */ orderId: bigint }args事件解码后的参数对象目前包含被取消订单的 IDorderId: bigintlog对应事件的原始日志Log对象可用于进一步校验或上报。该 Hook 的使用前提是项目中已配置好 Tempo 链与tempoWallet连接器参考 配置示例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(), }, })参数详解useWatchOrderCancelled的参数类型由两部分叠加而成底层 Actiondex.watchOrderCancelled的参数完整定义加 Hook 层特有的config与enabled参数。从源码声明可以看出其精确形态packages/react/src/tempo/hooks/dex.ts#L1598-L1603type Parametersconfig extends Config Config UnionCompute ExactPartialActions.dex.watchOrderCancelled.Parametersconfig ConfigParameterconfig { enabled?: boolean | undefined } 下面按类别逐一说明。onOrderCancelled必需类型function签名(args: Args, log: Log) void每当链上发生一笔订单取消时被调用。若未提供该回调Hook 内部会直接跳过订阅逻辑见下文实现剖析。orderId可选事件过滤类型bigint | bigint[] | null按订单 ID 过滤事件可传单个 ID、ID 数组或null。这是最常用的过滤手段——例如在我的订单页面只想感知自己订单的取消避免被全市场事件淹没。fromBlock可选类型bigint从指定区块开始监听。不传时从当前最新区块开始适合只关心之后发生的取消事件。onError可选类型(error: Error) void在拉取新区块轮询场景或订阅过程中发生错误时回调用于捕获异常而不是让错误静默丢失。poll 与 pollingInterval可选polltrue—— 强制启用轮询模式而非链上事件订阅pollingIntervalnumber—— 轮询频率毫秒默认继承 Client 的pollingInterval配置。对于不支持原生事件订阅的环境或在测试环境中轮询模式是稳定的兜底方案。config可选类型Config | undefined指定要使用的 Config默认从最近的WagmiProvider上下文获取。适用于需要同时操作多个 Config 实例的场景。enabledHook 层扩展类型boolean默认true源码中通过解构const { enabled true, onOrderCancelled, ...rest } parameters提取该开关packages/react/src/tempo/hooks/dex.ts#L1570。当enabled为false时 Hook 不建立订阅可用于登录后才开始监听页面不可见时暂停监听等动态控制。chainIdHook 层扩展类型ChainIdParameterconfigHook 内部默认使用当前激活链的 IDuseChainId也允许手动指定目标链。底层实现剖析从 Hook 到 Action 再到链上事件useWatchOrderCancelled并非独立实现的监听逻辑而是对 Core 层 Actiondex.watchOrderCancelled的 React 封装。其完整实现如下packages/react/src/tempo/hooks/dex.ts#L1567-L1596export function useWatchOrderCancelled config extends Config ResolvedRegister[config], (parameters: useWatchOrderCancelled.Parametersconfig {}) { const { enabled true, onOrderCancelled, ...rest } parameters const config useConfig({ config: parameters.config }) const configChainId useChainId({ config }) const chainId parameters.chainId ?? configChainId useEffect(() { if (!enabled) return if (!onOrderCancelled) return return Actions.dex.watchOrderCancelled(config, { ...rest, chainId, onOrderCancelled, }) }, [ config, enabled, chainId, onOrderCancelled, rest.fromBlock, rest.onError, rest.orderId, rest.poll, rest.pollingInterval, ]) }几个值得注意的实现细节useEffect 生命周期即订阅生命周期Hook 在副作用中调用 Action 建立订阅并把 Action 返回的unwatch函数作为 effect 的清理函数。这意味着组件卸载、或依赖项chainId、orderId等变化时旧的订阅会被自动释放再按新参数重建——不需要手动管理取消订阅。依赖项白名单effect 依赖数组显式列出了fromBlock、onError、orderId、poll、pollingInterval等参数只有这些参数变化才会重建订阅其余参数通过...rest透传。回调不触发重建onOrderCancelled虽在依赖数组中但 React 中通过useCallback稳定引用可避免不必要的重订阅。而 Core 层的 Action 则负责把 Config 解析为 Client 并透传给 viem 的 Tempo 实现packages/core/src/tempo/actions/dex.ts#L1501-L1517export function watchOrderCancelledconfig extends Config( config: config, parameters: watchOrderCancelled.Parametersconfig, ) { const { chainId, ...rest } parameters const client config.getClient({ chainId }) return Actions.dex.watchOrderCancelled(client, rest) }由此形成清晰的调用链useWatchOrderCancelled→Actions.dex.watchOrderCancelled(config, …)→config.getClient({ chainId })→ viem 的dex.watchOrderCancelled。Action 的返回类型为() void即调用即可取消订阅的函数action 文档。实战模式订单取消后自动刷新订单列表监听事件的意义在于驱动 UI 更新。与写操作dex.cancel文档配合可以构建取消订单 → 实时刷新列表的闭环import { Hooks } from wagmi/tempo import { useQueryClient } from tanstack/react-query function OrderBook() { const queryClient useQueryClient() Hooks.dex.useWatchOrderCancelled({ // 只关心自己订单的取消 orderId: myOrders.map((o) o.orderId), onOrderCancelled({ orderId }) { console.log(订单已取消:, orderId) // 失效订单列表查询触发重新拉取 queryClient.invalidateQueries({ queryKey: [my-orders] }) }, }) return OrdersTable / }若是在非 React 环境服务端、脚本、事件网关中消费同样的事件则应直接使用命令式 Actionimport { Actions } from wagmi/tempo import { config } from ./config const unwatch Actions.dex.watchOrderCancelled(config, { onOrderCancelled(args, log) { console.log(Order cancelled:, args.orderId) }, }) // 业务完成后再取消订阅 unwatch()行为验证测试用例如何证明过滤语义仓库中针对该 Hook 与 Action 分别编写了行为测试可以直接作为事件过滤是否正确的权威依据Action 层测试packages/core/src/tempo/actions/dex.test.ts#L1242-L1321覆盖了两个场景default场景先placeSync下一笔买单再cancelSync取消断言回调恰好收到 1 次取消且args.orderId与下单返回的 ID 一致filter by orderId场景则同时下两笔单仅监听其中一笔的取消随后依次取消两笔订单最终断言只收到 1 个事件且对应被监听的那笔。Hook 层测试packages/react/src/tempo/hooks/dex.test.ts#L791-L867通过renderHook挂载useWatchOrderCancelled用cancelSync触发事件后用vi.waitUntil等待异步回调验证了同样的默认监听与按orderId过滤两种行为。这两个测试文件相互印证无论通过 Hook 还是 Action 使用orderId过滤都会严格生效且回调接收到的orderId与dex.cancel/dex.cancelSync返回的订单 ID 一一对应。小结Hooks.dex.useWatchOrderCancelled将 viem Tempo 的订单取消事件订阅能力以声明式、生命周期自管理的形态带入 React订阅即副作用通过useEffect建立/销毁订阅组件卸载自动清理参数灵活orderId支持单值/数组过滤fromBlock控制起始区块poll/pollingInterval提供轮询兜底enabled实现动态启停可组合性强与dex.cancel文档、useWatchOrderPlaced、useWatchOrderFilled等组合即可搭建出完整的实时订单簿体验。若要进一步深入底层 viem 实现或查看相邻事件 Hook如下单、成交可继续阅读 dex.watchOrderCancelled Action 文档、dex.cancel 文档 与 Tempo Hooks 总览。【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考