wagmi Tempo 实时事件监听指南深入解析Hooks.token.useWatchAdminRole【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi本篇技术指南围绕 wagmi 仓库中 Tempo 模块的Hooks.token.useWatchAdminRoleReact Hook 展开讲解如何在 TIP20 代币上监听角色管理员Role Admin被更新的链上事件并实时响应权限治理变更。读完本文你将掌握该 Hook 的完整参数语义、事件回调数据结构、与底层Actions.token.watchAdminRoleAction 的调用链关系以及如何结合token.setRoleAdmin在真实业务中实现修改角色管理员 → 自动感知并刷新界面的完整闭环。背景Tempo 模块中的 TIP20 角色体系wagmi 的 Tempo 模块wagmi/tempo子路径导出围绕 TIP20 代币标准提供了一套 React 响应式原语Reactive primitives。TIP20 代币采用基于角色的权限管理模型合约预定义了若干角色例如defaultAdmin默认管理员、pause暂停、unpause恢复、issuer发行者、burnBlocked销毁黑名单等具体角色枚举可见 token.setRoleAdmin 参数文档。每个角色都有其对应的管理员角色admin role只有持有某角色管理员身份的地址才有权修改该角色的成员或权限配置。当这一管理关系发生变化时合约会发出RoleAdminUpdated事件。Hooks.token.useWatchAdminRole正是为订阅这一事件而设计的 React Hook它让前端应用无需手动轮询即可实时感知权限治理结构的变更。快速上手在 React 组件中监听角色管理员更新在App组件中监听指定 TIP20 代币的角色管理员更新事件import { Hooks } from wagmi/tempo function App() { Hooks.token.useWatchAdminRole({ onRoleAdminUpdated: (args, log) { console.log(args:, args) }, token: 0x20c0000000000000000000000000000000000000, }) return divWatching for role admin updates.../div }注意该 Hook 的使用方式与常规useQuery类 Hook 不同。useWatchAdminRole并不返回数据对象而是通过useEffect在组件挂载后建立订阅见 packages/react/src/tempo/hooks/token.ts事件到来时触发你传入的onRoleAdminUpdated回调。因此它通常在组件顶层直接调用无需也不支持像查询类 Hook 那样解构返回值。调用前需要先配置 Tempo 链。wagmi提供了开箱即用的tempo链定义与tempoWallet连接器参考官方示例配置见 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(), }, })将config通过WagmiProvider注入后Hook 会自动从最近的 Provider 中取用配置无需显式传入。参数详解useWatchAdminRole的参数类型定义为ExactPartialActions.token.watchAdminRole.Parametersconfig ConfigParameterconfig { enabled?: boolean }即底层 Action 的所有参数都变为可选并额外增加config与enabled两个控制项见 packages/react/src/tempo/hooks/token.ts。onRoleAdminUpdated必填类型(args: Args, log: Log) void事件回调在角色管理员更新事件发生时被调用。其中args为解析后的事件参数结构如下type Args { /** 被修改了管理员角色的角色 */ role: Hex /** 新的管理员角色 */ newAdminRole: Hex /** 发起该变更的地址 */ sender: Address }log为 viem 的Log对象包含区块号、交易哈希、日志索引等原始链上信息可用于进一步溯源或落库。在 Hook 源码中onRoleAdminUpdated会原样透传给底层 Action 的对应回调见 packages/react/src/tempo/hooks/token.ts。token必填类型Address | bigint要监听的 TIP20 代币地址或 ID。注意示例中使用了以0x20c0...开头的预置代币地址实际开发中请替换为目标代币的真实地址。args可选类型object事件过滤参数用于缩小监听范围仅接收满足条件的事件type Args { /** 按角色过滤 */ role?: Hex | Hex[] | null /** 按新的管理员角色过滤 */ newAdminRole?: Hex | Hex[] | null /** 按发起人地址过滤 */ sender?: Address | Address[] | null }例如只想监听issuer角色被重新指定管理员的事件可传{ role: issuer }角色名会被编码为Hex。fromBlock可选类型bigint开始监听的起始区块号。不传时默认从当前最新区块开始监听。onError可选类型(error: Error) void在获取新区块或建立订阅出错时触发的错误回调用于集中处理监听链路上的异常。poll可选类型true启用轮询模式而非默认的 WebSocket 订阅。Tempo 模块的监听动作在需要时可退化为轮询适合不支持订阅的 RPC 环境。pollingInterval可选类型number轮询频率毫秒。不传时默认使用 Client 上配置的pollingInterval。config可选类型Config | undefined覆盖从最近的WagmiProvider中获取的Config。在 Provider 树之外使用或需要多配置并存时非常有用。enabled可选React 层新增类型boolean默认true。设为false时 Hook 不会建立订阅。在 Hook 源码中enabled、onRoleAdminUpdated、token任一不满足时都会直接跳过useEffect副作用见 packages/react/src/tempo/hooks/token.ts可用于登录后才开始监听等场景。从 Hook 到 Action底层调用链剖析useWatchAdminRole并不是独立实现而是对核心层 Action 的轻量封装。梳理完整调用链如下React 层useWatchAdminRole通过useConfig与useChainId获取当前配置与链 ID然后在useEffect中调用Actions.token.watchAdminRole(config, { ...rest, chainId, onRoleAdminUpdated, token })并将fromBlock、onError、poll、pollingInterval显式列入依赖数组确保这些参数变化时订阅能被重建见 packages/react/src/tempo/hooks/token.ts。核心层Actions.token.watchAdminRole取出对应chainId的 viem Client然后委托给 viem 的Actions.token.watchAdminRole(client, rest)并返回一个取消订阅函数见 packages/core/src/tempo/actions/token.ts。这意味着监听能力最终由 viem 的 Tempo Action 提供wagmi 负责把它接入Config/WagmiProvider体系onRoleAdminUpdated、args过滤等参数在 viem 层完成实际的事件订阅与过滤。实战监听 触发 取消订阅的完整闭环单独监听意义有限真正的价值在于变更 → 感知 → 响应。下面给出一个完整的实战思路。第一步触发角色管理员变更角色管理员变更由token.setRoleAdminAction 发起需要调用方持有目标角色的当前管理员权限。使用同步变体可直接等待交易上链import { Actions } from wagmi/tempo import { config } from ./config const { receipt } await Actions.token.setRoleAdminSync(config, { adminRole: defaultAdmin, role: issuer, token: 0x20c0000000000000000000000000000000000000, }) console.log(Transaction hash:, receipt.transactionHash)若追求性能也可使用非同步的token.setRoleAdmin手动等待回执并通过 viem 的extractEvent从回执日志中解析出事件参数详见 token.setRoleAdmin 文档。第二步用 Hook 实时感知在权限管理界面中监听同一代币的事件import { Hooks } from wagmi/tempo function RoleAdminMonitor({ token }: { token: 0x${string} }) { Hooks.token.useWatchAdminRole({ token, onRoleAdminUpdated: (args, log) { console.log(Role admin updated:, args) // 这里可以刷新角色列表、记录审计日志、弹出通知等 }, onError: (error) { console.error(Watch failed:, error) }, }) return div正在监听角色管理员变更.../div }第三步按需取消订阅核心层 Action 会返回() void的取消订阅函数const unwatch Actions.token.watchAdminRole(config, { token: 1n, // 代币地址或 ID onRoleAdminUpdated(args, log) { console.log(args:, args) }, }) // 稍后停止监听 unwatch()在 React 层无需手动调用该函数——useEffect的清理函数会在组件卸载或依赖变化时自动执行取消订阅Hook 的useEffect直接返回Actions.token.watchAdminRole(...)的结果该结果即为取消函数。测试验证事件确实能被捕获仓库提供了端到端测试来验证该功能。核心层测试在 packages/core/src/tempo/actions/token.test.ts 中演示了完整流程先连接钱包并createSync创建一个新代币然后调用token.watchAdminRole注册回调再通过token.setRoleAdminSync将issuer角色的管理员设为pause最后断言事件数组非空并在断言通过后调用unwatch()收尾。React 层测试在 packages/react/src/tempo/hooks/token.test.ts 中做了同样的验证通过renderHook挂载useWatchAdminRole随后触发setRoleAdminSync最终断言回调确实被触发且事件参数有值。这两个测试不仅证明了监听机制可用也为我们提供了一个可复现的验收标准任何权限管理功能的实现都应能通过变更 → 事件到达的闭环验证。与相关 Hook / Action 的关系能力React Hook核心 Action用途修改角色管理员useSetRoleAdmin及useSetRoleAdminSynctoken.setRoleAdmin/token.setRoleAdminSync发起变更监听管理员更新useWatchAdminRoletoken.watchAdminRole感知变更监听角色成员更新useWatchRoletoken.watchRole感知角色成员变化其中useWatchRole与useWatchAdminRole的封装模式完全一致见 packages/react/src/tempo/hooks/token.ts区别仅在于订阅的事件类型不同。理解useWatchAdminRole的用法后可无障碍迁移到其他watch*系列 Hook。使用注意事项回调签名onRoleAdminUpdated接收(args, log)两个参数args已解析为结构化对象log保留原始链上数据两者都可直接使用。参数必填校验Hook 内部要求token与onRoleAdminUpdated同时存在才会建立订阅二者缺一不可见 packages/react/src/tempo/hooks/token.ts。链环境Tempo 相关能力仅适用于 Tempo 链请确保createConfig中配置了tempo链否则无法正确建立客户端连接。事件过滤多合约场景下务必通过token参数限定监听目标避免跨代币误收事件过滤需求更细时可组合使用args中的role、newAdminRole、sender字段。订阅生命周期React 层会自动管理订阅的建立与清理无需手动调用unwatch在核心层非 React使用时请务必在合适时机调用返回的取消函数防止资源泄漏。总结Hooks.token.useWatchAdminRole是 wagmi Tempo 模块中监听 TIP20 代币角色管理员更新事件的标准入口它向上提供 React 友好的useEffect订阅模式向下委托给核心层的Actions.token.watchAdminRole最终由 viem 完成链上事件订阅与过滤。配合token.setRoleAdmin系列写操作与onRoleAdminUpdated回调你可以低成本地构建出实时、可审计的 TIP20 代币权限治理前端。若要进一步深入建议继续阅读 token.watchAdminRole Action 文档 与 token.setRoleAdmin 文档并结合仓库中的测试用例理解其行为边界。【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
wagmi Tempo 实时事件监听指南：深入解析 `Hooks.token.useWatchAdminRole`
wagmi Tempo 实时事件监听指南深入解析Hooks.token.useWatchAdminRole【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi本篇技术指南围绕 wagmi 仓库中 Tempo 模块的Hooks.token.useWatchAdminRoleReact Hook 展开讲解如何在 TIP20 代币上监听角色管理员Role Admin被更新的链上事件并实时响应权限治理变更。读完本文你将掌握该 Hook 的完整参数语义、事件回调数据结构、与底层Actions.token.watchAdminRoleAction 的调用链关系以及如何结合token.setRoleAdmin在真实业务中实现修改角色管理员 → 自动感知并刷新界面的完整闭环。背景Tempo 模块中的 TIP20 角色体系wagmi 的 Tempo 模块wagmi/tempo子路径导出围绕 TIP20 代币标准提供了一套 React 响应式原语Reactive primitives。TIP20 代币采用基于角色的权限管理模型合约预定义了若干角色例如defaultAdmin默认管理员、pause暂停、unpause恢复、issuer发行者、burnBlocked销毁黑名单等具体角色枚举可见 token.setRoleAdmin 参数文档。每个角色都有其对应的管理员角色admin role只有持有某角色管理员身份的地址才有权修改该角色的成员或权限配置。当这一管理关系发生变化时合约会发出RoleAdminUpdated事件。Hooks.token.useWatchAdminRole正是为订阅这一事件而设计的 React Hook它让前端应用无需手动轮询即可实时感知权限治理结构的变更。快速上手在 React 组件中监听角色管理员更新在App组件中监听指定 TIP20 代币的角色管理员更新事件import { Hooks } from wagmi/tempo function App() { Hooks.token.useWatchAdminRole({ onRoleAdminUpdated: (args, log) { console.log(args:, args) }, token: 0x20c0000000000000000000000000000000000000, }) return divWatching for role admin updates.../div }注意该 Hook 的使用方式与常规useQuery类 Hook 不同。useWatchAdminRole并不返回数据对象而是通过useEffect在组件挂载后建立订阅见 packages/react/src/tempo/hooks/token.ts事件到来时触发你传入的onRoleAdminUpdated回调。因此它通常在组件顶层直接调用无需也不支持像查询类 Hook 那样解构返回值。调用前需要先配置 Tempo 链。wagmi提供了开箱即用的tempo链定义与tempoWallet连接器参考官方示例配置见 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(), }, })将config通过WagmiProvider注入后Hook 会自动从最近的 Provider 中取用配置无需显式传入。参数详解useWatchAdminRole的参数类型定义为ExactPartialActions.token.watchAdminRole.Parametersconfig ConfigParameterconfig { enabled?: boolean }即底层 Action 的所有参数都变为可选并额外增加config与enabled两个控制项见 packages/react/src/tempo/hooks/token.ts。onRoleAdminUpdated必填类型(args: Args, log: Log) void事件回调在角色管理员更新事件发生时被调用。其中args为解析后的事件参数结构如下type Args { /** 被修改了管理员角色的角色 */ role: Hex /** 新的管理员角色 */ newAdminRole: Hex /** 发起该变更的地址 */ sender: Address }log为 viem 的Log对象包含区块号、交易哈希、日志索引等原始链上信息可用于进一步溯源或落库。在 Hook 源码中onRoleAdminUpdated会原样透传给底层 Action 的对应回调见 packages/react/src/tempo/hooks/token.ts。token必填类型Address | bigint要监听的 TIP20 代币地址或 ID。注意示例中使用了以0x20c0...开头的预置代币地址实际开发中请替换为目标代币的真实地址。args可选类型object事件过滤参数用于缩小监听范围仅接收满足条件的事件type Args { /** 按角色过滤 */ role?: Hex | Hex[] | null /** 按新的管理员角色过滤 */ newAdminRole?: Hex | Hex[] | null /** 按发起人地址过滤 */ sender?: Address | Address[] | null }例如只想监听issuer角色被重新指定管理员的事件可传{ role: issuer }角色名会被编码为Hex。fromBlock可选类型bigint开始监听的起始区块号。不传时默认从当前最新区块开始监听。onError可选类型(error: Error) void在获取新区块或建立订阅出错时触发的错误回调用于集中处理监听链路上的异常。poll可选类型true启用轮询模式而非默认的 WebSocket 订阅。Tempo 模块的监听动作在需要时可退化为轮询适合不支持订阅的 RPC 环境。pollingInterval可选类型number轮询频率毫秒。不传时默认使用 Client 上配置的pollingInterval。config可选类型Config | undefined覆盖从最近的WagmiProvider中获取的Config。在 Provider 树之外使用或需要多配置并存时非常有用。enabled可选React 层新增类型boolean默认true。设为false时 Hook 不会建立订阅。在 Hook 源码中enabled、onRoleAdminUpdated、token任一不满足时都会直接跳过useEffect副作用见 packages/react/src/tempo/hooks/token.ts可用于登录后才开始监听等场景。从 Hook 到 Action底层调用链剖析useWatchAdminRole并不是独立实现而是对核心层 Action 的轻量封装。梳理完整调用链如下React 层useWatchAdminRole通过useConfig与useChainId获取当前配置与链 ID然后在useEffect中调用Actions.token.watchAdminRole(config, { ...rest, chainId, onRoleAdminUpdated, token })并将fromBlock、onError、poll、pollingInterval显式列入依赖数组确保这些参数变化时订阅能被重建见 packages/react/src/tempo/hooks/token.ts。核心层Actions.token.watchAdminRole取出对应chainId的 viem Client然后委托给 viem 的Actions.token.watchAdminRole(client, rest)并返回一个取消订阅函数见 packages/core/src/tempo/actions/token.ts。这意味着监听能力最终由 viem 的 Tempo Action 提供wagmi 负责把它接入Config/WagmiProvider体系onRoleAdminUpdated、args过滤等参数在 viem 层完成实际的事件订阅与过滤。实战监听 触发 取消订阅的完整闭环单独监听意义有限真正的价值在于变更 → 感知 → 响应。下面给出一个完整的实战思路。第一步触发角色管理员变更角色管理员变更由token.setRoleAdminAction 发起需要调用方持有目标角色的当前管理员权限。使用同步变体可直接等待交易上链import { Actions } from wagmi/tempo import { config } from ./config const { receipt } await Actions.token.setRoleAdminSync(config, { adminRole: defaultAdmin, role: issuer, token: 0x20c0000000000000000000000000000000000000, }) console.log(Transaction hash:, receipt.transactionHash)若追求性能也可使用非同步的token.setRoleAdmin手动等待回执并通过 viem 的extractEvent从回执日志中解析出事件参数详见 token.setRoleAdmin 文档。第二步用 Hook 实时感知在权限管理界面中监听同一代币的事件import { Hooks } from wagmi/tempo function RoleAdminMonitor({ token }: { token: 0x${string} }) { Hooks.token.useWatchAdminRole({ token, onRoleAdminUpdated: (args, log) { console.log(Role admin updated:, args) // 这里可以刷新角色列表、记录审计日志、弹出通知等 }, onError: (error) { console.error(Watch failed:, error) }, }) return div正在监听角色管理员变更.../div }第三步按需取消订阅核心层 Action 会返回() void的取消订阅函数const unwatch Actions.token.watchAdminRole(config, { token: 1n, // 代币地址或 ID onRoleAdminUpdated(args, log) { console.log(args:, args) }, }) // 稍后停止监听 unwatch()在 React 层无需手动调用该函数——useEffect的清理函数会在组件卸载或依赖变化时自动执行取消订阅Hook 的useEffect直接返回Actions.token.watchAdminRole(...)的结果该结果即为取消函数。测试验证事件确实能被捕获仓库提供了端到端测试来验证该功能。核心层测试在 packages/core/src/tempo/actions/token.test.ts 中演示了完整流程先连接钱包并createSync创建一个新代币然后调用token.watchAdminRole注册回调再通过token.setRoleAdminSync将issuer角色的管理员设为pause最后断言事件数组非空并在断言通过后调用unwatch()收尾。React 层测试在 packages/react/src/tempo/hooks/token.test.ts 中做了同样的验证通过renderHook挂载useWatchAdminRole随后触发setRoleAdminSync最终断言回调确实被触发且事件参数有值。这两个测试不仅证明了监听机制可用也为我们提供了一个可复现的验收标准任何权限管理功能的实现都应能通过变更 → 事件到达的闭环验证。与相关 Hook / Action 的关系能力React Hook核心 Action用途修改角色管理员useSetRoleAdmin及useSetRoleAdminSynctoken.setRoleAdmin/token.setRoleAdminSync发起变更监听管理员更新useWatchAdminRoletoken.watchAdminRole感知变更监听角色成员更新useWatchRoletoken.watchRole感知角色成员变化其中useWatchRole与useWatchAdminRole的封装模式完全一致见 packages/react/src/tempo/hooks/token.ts区别仅在于订阅的事件类型不同。理解useWatchAdminRole的用法后可无障碍迁移到其他watch*系列 Hook。使用注意事项回调签名onRoleAdminUpdated接收(args, log)两个参数args已解析为结构化对象log保留原始链上数据两者都可直接使用。参数必填校验Hook 内部要求token与onRoleAdminUpdated同时存在才会建立订阅二者缺一不可见 packages/react/src/tempo/hooks/token.ts。链环境Tempo 相关能力仅适用于 Tempo 链请确保createConfig中配置了tempo链否则无法正确建立客户端连接。事件过滤多合约场景下务必通过token参数限定监听目标避免跨代币误收事件过滤需求更细时可组合使用args中的role、newAdminRole、sender字段。订阅生命周期React 层会自动管理订阅的建立与清理无需手动调用unwatch在核心层非 React使用时请务必在合适时机调用返回的取消函数防止资源泄漏。总结Hooks.token.useWatchAdminRole是 wagmi Tempo 模块中监听 TIP20 代币角色管理员更新事件的标准入口它向上提供 React 友好的useEffect订阅模式向下委托给核心层的Actions.token.watchAdminRole最终由 viem 完成链上事件订阅与过滤。配合token.setRoleAdmin系列写操作与onRoleAdminUpdated回调你可以低成本地构建出实时、可审计的 TIP20 代币权限治理前端。若要进一步深入建议继续阅读 token.watchAdminRole Action 文档 与 token.setRoleAdmin 文档并结合仓库中的测试用例理解其行为边界。【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
