ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

wagmi Tempo 之 `nonce.useWatchNonceIncremented`:监听 nonce 递增事件的 React Hook 完全指南

wagmi Tempo 之 `nonce.useWatchNonceIncremented`:监听 nonce 递增事件的 React Hook 完全指南 wagmi Tempo 之nonce.useWatchNonceIncremented监听 nonce 递增事件的 React Hook 完全指南【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi导读在 wagmi 的 Tempo 模块中Hooks.nonce.useWatchNonceIncremented是一个专门用于监听 nonce 递增事件的 React Hook每当某个账户使用指定 nonce key 执行了一笔交易、导致 nonce 递增时该 Hook 就会触发回调把账户地址、nonce key 和递增后的新 nonce 值一并交付给开发者。本文以 nonce.useWatchNonceIncremented.md 文档为骨架结合 wagmi 仓库中 React Hook 与 core Action 的源码实现、单元测试用例讲解该 Hook 的完整参数体系、事件回调数据模型、底层调用链与真实用法帮助你在构建基于 Tempo 链的多 nonce lane 并行交易场景时准确监听并追踪每一笔交易的 nonce 递增。一、背景什么是 nonce key 与 nonce 递增事件在深入了解 Hook 之前先明确 Tempo 模块中 nonce 体系的基本概念。参考同模块的 nonce.getNonce 动作文档Tempo 支持多 nonce lanenonce 车道并行提交交易nonceKey用于区分不同的 nonce 车道且必须 0其中key 0 被保留给协议自身使用的协议 nonceprotocol nonces普通用户交易不可占用。每个账户在每一条 nonce lane 上都有一个独立的 nonce 计数器。当一笔使用该 nonce key 的交易被链上执行后对应的 nonce 就会递增链上便会发出NonceIncremented事件。本文的主角nonce.useWatchNonceIncremented正是用来实时捕获这一事件的 React Hook。二、Hook 快速上手2.1 最小可用示例官方文档给出的用法如下直接从wagmi/tempo导入Hooks命名空间即可使用import { Hooks } from wagmi/tempo Hooks.nonce.useWatchNonceIncremented({ onNonceIncremented: (args, log) { console.log(args:, args) }, })Hook 名称中的useWatch前缀表明它与 wagmi 其他事件监听类 Hook 一样属于副作用型监听器而非查询型 Hook调用后不会返回数据对象而是持续订阅链上事件直到组件卸载或手动取消。2.2 所需的最小配置在 React 应用中使用该 Hook需要先通过createConfig创建并注入配置通过WagmiProvider提供。仓库中 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(), }, })该配置说明nonce.useWatchNonceIncremented面向的是 Tempo 链环境使用tempoWallet()连接器、tempo链定义与http()传输层。不传入config参数时Hook 会从最近的WagmiProvider上下文自动获取。2.3 带过滤条件与完整卸载的写法结合下方参数讲解一个更完整的写法是显式传入过滤条件并保存返回值import { Hooks } from wagmi/tempo function App() { const { data } Hooks.nonce.useNonce({ account: 0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb, nonceKey: 1n, }) Hooks.nonce.useWatchNonceIncremented({ args: { account: 0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb, nonceKey: 1n, }, onNonceIncremented(args, log) { console.log(Nonce incremented:, args) console.log(Log:, log) }, onError(error) { console.error(error) }, }) return div当前 nonce: {data?.toString()}/div }三、参数详解Hook 层与 Action 层nonce.useWatchNonceIncremented的参数分为两层Hook 专属参数config、enabled与透传给底层 Action 的 nonce.watchNonceIncremented 参数。3.1 Hook 专属参数参数类型说明configConfig \| undefined指定要使用的 Config默认从最近的WagmiProvider上下文获取enabledboolean \| undefined是否启用监听默认true。设为false可临时暂停订阅见源码实现中的短路逻辑从 packages/react/src/tempo/hooks/nonce.ts 的源码可以看到enabled与onNonceIncremented是监听的两个开关export function useWatchNonceIncremented config extends Config ResolvedRegister[config], (parameters: useWatchNonceIncremented.Parametersconfig {}) { const { enabled true, onNonceIncremented, ...rest } parameters const config useConfig({ config: parameters.config }) const configChainId useChainId({ config }) const chainId parameters.chainId ?? configChainId useEffect(() { if (!enabled) return if (!onNonceIncremented) return return Actions.nonce.watchNonceIncremented(config, { ...rest, chainId, onNonceIncremented, }) }, [ config, enabled, chainId, onNonceIncremented, rest.fromBlock, rest.onError, rest.poll, rest.pollingInterval, ]) }这段实现清晰地展示了 Hook 的四个关键设计委托式架构Hook 本身不实现任何监听逻辑而是通过useEffect调用 core 层导出的Actions.nonce.watchNonceIncremented来自wagmi/core/tempo这与 wagmi 一贯的「React Hook 薄封装 core Action 厚实现」分层一致chainId优先级优先使用显式传入的parameters.chainId否则回退到useChainId得到的当前链enabled与回调守卫enabled为false或未提供onNonceIncremented时直接不订阅自动清理useEffect的返回值正是底层 Action 返回的取消订阅函数组件卸载时 React 会自动调用它避免内存泄漏同时onNonceIncremented、fromBlock、onError、poll、pollingInterval均被列入依赖数组参数变化时会自动重建订阅。3.2 事件回调onNonceIncremented类型functiondeclare function onNonceIncremented(args: Args, log: Log): void type Args { /** 账户地址 */ account: Address /** 被递增的 nonce key */ nonceKey: bigint /** 递增后的新 nonce 值 */ newNonce: bigint }回调在每次 nonce 递增时被调用接收两个参数args结构化的事件参数包含account发出交易的账户、nonceKey发生递增的 nonce lane、newNonce递增后的新 nonce 值。注意nonceKey与newNonce都是bigint打印时需调用.toString()或直接传给支持 bigint 的序列化工具log对应的原始链上事件 Log 对象可用于进一步检查区块、交易哈希等底层信息。3.3 事件过滤args可选类型objecttype Args { /** 要过滤的账户地址 */ account?: Address | Address[] | null /** 要过滤的 nonce key */ nonceKey?: bigint | bigint[] | null }可选过滤器用于只接收关心的账户或 nonce lane 的事件。account和nonceKey均支持单个值或数组——传入数组即表示订阅多个地址/多条 lane 的递增事件这在多账户、多 lane 并行交易的场景下非常实用。3.4 其他可选参数参数类型说明fromBlockbigint从哪个区块高度开始监听可选onErrorfunction在拉取新区块出错时触发的错误回调签名为(error: Error) voidpolltrue启用轮询模式可选pollingIntervalnumber轮询频率毫秒。默认使用 Client 的pollingInterval配置可选poll/pollingInterval与 wagmi 其他 watch 类动作的语义一致默认采用 WebSocket 订阅方式实时接收事件在无法使用订阅如仅 HTTP 传输时可开启轮询模式按指定间隔主动拉取新区块并检查事件。四、返回值与取消订阅与普通查询 Hook 不同useWatchNonceIncremented不返回数据。其底层 Action nonce.watchNonceIncremented 的返回类型为() void即一个用于取消订阅的函数。在纯 Action 用法中你需要手动保存并调用它import { Actions } from wagmi/tempo import { config } from ./config const unwatch Actions.nonce.watchNonceIncremented(config, { onNonceIncremented(args, log) { console.log(args:, args) }, }) // 稍后停止监听 unwatch()而作为 React Hook取消订阅由useEffect自动管理组件卸载或依赖参数变化重建订阅时返回的unwatch会被自动调用无需手动清理。五、底层调用链从 Hook 到链上事件从源码结构可以完整还原该功能的调用链Hooks.nonce.useWatchNonceIncremented React 层 └─ Actions.nonce.watchNonceIncremented core 层 └─ viem 的 nonce.watchNonceIncremented viem/tempo 层链上事件订阅React 层packages/react/src/tempo/hooks/nonce.ts 中的useWatchNonceIncremented负责组装参数、解析chainId、通过useEffect建立与销毁订阅core 层packages/core/src/tempo/actions/nonce.ts 中的watchNonceIncremented首先从参数中剥离chainId通过config.getClient({ chainId })取得对应链的 viem Client然后委托给Actions.nonce.watchNonceIncremented(client, rest)export function watchNonceIncrementedconfig extends Config( config: config, parameters: watchNonceIncremented.Parametersconfig, ): () void { const { chainId, ...rest } parameters const client config.getClient({ chainId }) return Actions.nonce.watchNonceIncremented(client, rest) }viem 层真正与 RPC/链上交互的订阅逻辑位于 viem 的 tempo 模块对应文档 nonce.watchNonceIncremented.md 中的 Viem 一节wagmi 只做配置与参数透传。此外同文件中的getNonce及其queryOptions展示了enabled条件的实现只有当account与nonceKey都提供时才启用查询packages/core/src/tempo/actions/nonce.ts这解释了为何配套的useNonce在缺少参数时会保持 pending 状态。六、测试用例验证真实事件流仓库中的单元测试 packages/react/src/tempo/hooks/nonce.test.ts 完整验证了useWatchNonceIncremented的行为是理解事件数据模型的最佳实例const events: any[] [] await renderHook(() nonce.useWatchNonceIncremented({ onNonceIncremented(args) { events.push(args) }, args: { account: account.address, nonceKey: 5n, }, }), ) // 使用 nonceKey: 5n 连续执行两笔转账 await connectResult.current.transferSync.mutateAsync({ to: account2.address, amount: 1n, token: 1n, nonceKey: 5n, nonce: 0, }) await connectResult.current.transferSync.mutateAsync({ to: account2.address, amount: 1n, token: 1n, nonceKey: 5n, nonce: 1, }) await vi.waitUntil(() events.length 2) expect(events).toHaveLength(2) expect(events[0]?.account).toBe(account.address) expect(events[0]?.nonceKey).toBe(5n) expect(events[0]?.newNonce).toBe(1n) expect(events[1]?.newNonce).toBe(2n)该测试揭示了几个重要事实事件与交易一一对应在 nonce lane5n上连续执行两笔交易nonce 0、1触发了两条递增事件events.length为 2newNonce语义第一笔交易后newNonce为1n第二笔后为2n即递增后的新值而非旧值可用于本地 nonce 计数器的同步与校正过滤生效args中传入account与nonceKey: 5n后只有该账户在该 lane 上的事件被接收事件中的account、nonceKey与过滤条件一致测试环境说明测试注释指出eth_FillTransaction不支持 nonce key因此测试中需要手动指定nonce: 0、nonce: 1配合nonceKey构造递增序列。七、配套能力与注意事项7.1 与useNonce配合使用要构建「先读 nonce、再监听递增」的完整闭环可搭配 nonce.useNonce 使用。其底层 Actionnonce.getNonce返回bigint类型的当前 nonce 值nonce.getNonce.md用法如下import { Hooks } from wagmi/tempo const nonce await Hooks.nonce.useNonce({ account: 0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb, nonceKey: 1n, })二者配合即可实现「查询当前 nonce → 提交交易 → 监听递增事件更新界面/缓存」的并行交易跟踪流程。完整 Hook 列表参见 site/tempo/hooks/index.md 中的Nonce Hooks一节。7.2 重要弃用提示注意源码中useWatchNonceIncremented与底层watchNonceIncremented均带有deprecated标注该函数自 AllegroModerato 之后已被弃用将在未来版本中移除见 packages/react/src/tempo/hooks/nonce.ts 与 packages/core/src/tempo/actions/nonce.ts。在选用该 Hook 前应评估当前使用版本与后续升级路径并为未来迁移预留接口抽象。7.3 使用注意事项汇总nonceKey必须 0key0保留给协议 nonce普通交易不可使用newNonce与nonceKey均为bigint比较时使用对 bigint 字面量如5n有效序列化时需转换若以数组形式传入account/nonceKey过滤器回调仍会被逐一触发args中携带具体的事件来源开启poll轮询模式时pollingInterval默认继承自 Client 配置可按需覆盖未提供onNonceIncremented或enabled: false时Hook 不会发起任何订阅源码中的短路逻辑保证零开销。八、小结Hooks.nonce.useWatchNonceIncremented为 wagmi Tempo 应用提供了一条简洁、类型安全的事件监听通道只需一个onNonceIncremented回调即可实时获得账户、nonce lane 与递增后 nonce 的完整信息。它通过「React Hook → core Action → viem」的三层委托实现继承了 wagmi 框架的分层设计——Hook 层负责响应式生命周期与依赖管理core 层负责配置解析与 Client 获取viem 层负责真实的链上订阅。结合useNonce查询与nonceKey多 lane 机制开发者可以在并行交易提交场景中精确追踪每一笔交易的执行进度同时务必留意其弃用状态合理规划代码的未来迁移。延伸阅读Hook 官方文档nonce.useWatchNonceIncrementedAction 官方文档nonce.watchNonceIncremented含全部参数与返回类型Action 官方文档nonce.getNonceTempo Hooks 总览源码React Hook 实现源码core Action 实现测试用例useWatchNonceIncremented 事件流验证示例配置config-tempo.ts【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表