尧图网站建设 
wagmi Tempo 奖励分发事件监听指南使用reward.useWatchRewardDistributedHook【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi本篇技术指南以 wagmi 仓库中 reward.useWatchRewardDistributed 文档 为核心系统讲解 Tempo 生态中如何通过该 React Hook 实时监听奖励已分发RewardDistributed链上事件。读完本文你将掌握reward.useWatchRewardDistributed的完整参数语义、与底层 Actionreward.watchRewardDistributed及reward.distribute的调用关系并能直接在一套可运行的 wagmi Tempo 配置上实现分发奖励 → 监听事件 → 更新 UI的完整实战闭环。一、这个 Hook 解决什么问题在 Tempo 链的奖励机制中reward.distribute负责向已选择参与opt-in的持币者分发奖励代币。当分发交易真正上链并触发RewardDistributed事件后前端应用往往需要主动感知这一事件——例如刷新奖励余额、展示奖励已到账的提示、更新统计面板等。reward.useWatchRewardDistributed正是为此设计的 React Hook它订阅指定 TIP-20 代币上的奖励分发事件一旦事件发生就回调你提供的onRewardDistributed函数。它在 wagmi 的 Tempo Hook 体系中属于监听类watch成员与reward.useWatchRewardRecipientSet并列二者分别对应RewardDistributed奖励已分发与RewardRecipientSet奖励接收人已设置两类事件参见 hooks 总览。二、快速上手在 React 组件中调用该 Hook 的最小示例与官方文档一致import { Hooks } from wagmi/tempo function App() { Hooks.reward.useWatchRewardDistributed({ onRewardDistributed: (args, log) { console.log(args:, args) }, token: 0x20c0000000000000000000000000000000000000, }) return divWatching for reward distributed events.../div }其中token传入要监听的 TIP-20 代币地址onRewardDistributed在每次事件触发时被调用形参args携带事件解码后的参数log为原始日志对象。在仓库的 config-tempo.ts 示例 中给出了搭配该 Hook 使用的完整 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(), }, })要点说明chains仅配置tempo一条链且通过multiInjectedProviderDiscovery: false关闭浏览器内置钱包的自动发现避免干扰tempoWallet连接器transports为 tempo 链配置http()传输层用于 RPC 交互与事件轮询。三、参数详解reward.useWatchRewardDistributed的完整参数类型为type Parametersconfig extends Config UnionCompute ExactPartialActions.reward.watchRewardDistributed.Parametersconfig ConfigParameterconfig { enabled?: boolean | undefined } 即它继承自底层 Actionreward.watchRewardDistributed的全部参数详见 reward.watchRewardDistributed 文档并额外叠加config与enabled两个 Hook 专属参数。3.1 onRewardDistributed必填类型functiondeclare function onRewardDistributed(args: Args, log: Log): void type Args { /** Total amount distributed */ amount: bigint /** Address that funded the distribution */ funder: Address }每次RewardDistributed事件触发时被调用args.amount本次分发的总代币数量bigint类型args.funder发起分发的账户地址log包含事件区块号、交易哈希、日志索引等原始信息的 viemLog对象可用于精确溯源或去重。3.2 token必填类型Address要监听的 TIP-20 代币合约地址。只有当该代币上发生RewardDistributed事件时回调才会触发。3.3 args可选过滤类型objecttype Args { /** Filter by funder address */ funder?: Address | Address[] }通过funder字段按分发者地址过滤事件可传单个地址或地址数组仅命中过滤条件的事件才会进入onRewardDistributed回调。3.4 enabledHook 专属类型boolean | undefined默认值true控制监听是否激活。在源码实现中当enabled为false、onRewardDistributed缺失或token缺失时useEffect会直接提前返回、不发起订阅见 reward.ts。典型用法是链未连接/代币未选择时先不监听Hooks.reward.useWatchRewardDistributed({ enabled: isConnected, token: selectedToken, onRewardDistributed: (args) console.log(args), })3.5 config类型Config | undefined不传时Hook 会通过useConfig从最近的WagmiProvider上下文读取配置见 WagmiProvider 文档传入时则显式覆盖适合在 Provider 树之外使用或有多个 config 的场景。config 的完整定义可参考 createConfig 文档。3.6 chainId类型ChainIdParameter与 wagmi 其他 Hook 一致可通过chainId指定监听的链。不传时Hook 内部会先经useChainId取得当前配置的链 ID 作为兜底见 reward.ts。四、底层实现原理从源码看该 Hook 是一层React 生命周期包装其核心逻辑位于 packages/react/src/tempo/hooks/reward.tsexport function useWatchRewardDistributedconfig extends Config( parameters: useWatchRewardDistributed.Parametersconfig {}, ) { const { enabled true, onRewardDistributed, token, ...rest } parameters const config useConfig({ config: parameters.config }) const configChainId useChainId({ config }) const chainId parameters.chainId ?? configChainId useEffect(() { if (!enabled) return if (!onRewardDistributed) return if (!token) return return Actions.reward.watchRewardDistributed(config, { ...rest, chainId, onRewardDistributed, token, }) }, [ config, enabled, chainId, token, onRewardDistributed, rest.fromBlock, rest.onError, rest.poll, rest.pollingInterval, ]) }值得关注的实现细节订阅即生命周期Hook 自身不返回值真正的订阅动作发生在useEffect内且useEffect的返回值正是 Action 返回的取消订阅函数——组件卸载或依赖变化时 React 会自动调用它完成清理避免内存泄漏与重复订阅。依赖数组显式声明config、enabled、chainId、token、onRewardDistributed以及rest.fromBlock、rest.onError、rest.poll、rest.pollingInterval任一变化都会触发重新订阅其余参数通过展开rest透传源码中对此有biome-ignore注释说明是有意为之。链 ID 兜底chainId优先取用户显式传入的值否则回落到当前配置链保证多链场景下订阅始终落在正确链上。Hook 最终调用的是 core 层包装后的 watchRewardDistributed后者将chainId从参数中取出、通过config.getClient({ chainId })解析出对应链的 viem 客户端再透传给 viem/tempo 的同名 Action 完成事件监听并原样返回unwatch函数。类型层面reward.test-d.ts 对useWatchRewardDistributed做了编译期校验验证其接受config、enabled、onRewardDistributed(args, log)等参数保证 Hook 的类型签名与文档一致。五、与 Action 配合分发 → 监听的完整闭环useWatchRewardDistributed监听的正是reward.distribute/reward.distributeSync所产生的链上事件。分发侧的使用方式参见 reward.distribute 文档import { Actions } from wagmi/tempo import { parseEther } from viem import { config } from ./config const { amount, funder, receipt } await Actions.reward.distributeSync(config, { amount: parseEther(1000), token: 0x20c0000000000000000000000000000000000000, })amount分发数量bigint必须大于 0可用parseEther(1000)换算token目标 TIP-20 代币地址*Sync变体会等待交易确认后再返回若追求性能可使用非 Sync 的reward.distribute拿到hash后自行waitForTransactionReceipt。将两侧组合起来即可实现一个完整的奖励分发实时面板import { Hooks } from wagmi/tempo import { Actions } from wagmi/tempo import { parseEther } from viem const TOKEN 0x20c0000000000000000000000000000000000000 function RewardPanel() { const [events, setEvents] useState{ amount: bigint; funder: string }[]([]) // 1. 实时监听奖励分发事件 Hooks.reward.useWatchRewardDistributed({ token: TOKEN, onRewardDistributed: (args) { setEvents((prev) [...prev, args]) }, }) // 2. 发起一次奖励分发 const handleDistribute async () { await Actions.reward.distributeSync(/* config */, { amount: parseEther(1000), token: TOKEN, }) } return ( div button onClick{handleDistribute}分发奖励/button ul {events.map((e, i) ( li key{i} {e.funder} 分发 {e.amount.toString()} wei /li ))} /ul /div ) }监听方无需手动轮询或刷新onRewardDistributed一旦触发即可增量更新 UI。六、实用建议与注意事项回调引用稳定性由于onRewardDistributed位于依赖数组中若每次渲染都内联创建新函数会导致订阅被反复重建。建议用useCallback包裹回调或仅在确实需要时更新。按需启用监听enabled默认true在代币地址尚未就绪时记得显式关闭避免无效订阅源码会因token缺失直接跳过。合理使用过滤多分发者场景下优先用args.funder过滤而非在回调里自行判断减少不必要的事件处理。事件溯源log参数携带完整链上元信息可用于与reward.distribute返回的receipt相互印证或实现基于fromBlock的历史事件回放通过rest.fromBlock参数。七、延伸阅读reward.useWatchRewardRecipientSet监听奖励接收人已设置事件的姊妹 Hookreward.watchRewardDistributed Action 文档Hook 所包装的底层 Action含完整参数与返回类型reward.distribute触发RewardDistributed事件的分发动作reward.useClaim 与 reward.useUserRewardInfo与分发事件配套的领取、查询 HookTempo hooks 总览Reward、Token、DEX、Zone 等全部 Tempo Hook 索引源码实现React Hook 定义、core Action 包装、类型测试。【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 wagmi Tempo 奖励分发事件监听指南：使用 `reward.useWatchRewardDistributed` Hook
wagmi Tempo 奖励分发事件监听指南使用reward.useWatchRewardDistributedHook【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi本篇技术指南以 wagmi 仓库中 reward.useWatchRewardDistributed 文档 为核心系统讲解 Tempo 生态中如何通过该 React Hook 实时监听奖励已分发RewardDistributed链上事件。读完本文你将掌握reward.useWatchRewardDistributed的完整参数语义、与底层 Actionreward.watchRewardDistributed及reward.distribute的调用关系并能直接在一套可运行的 wagmi Tempo 配置上实现分发奖励 → 监听事件 → 更新 UI的完整实战闭环。一、这个 Hook 解决什么问题在 Tempo 链的奖励机制中reward.distribute负责向已选择参与opt-in的持币者分发奖励代币。当分发交易真正上链并触发RewardDistributed事件后前端应用往往需要主动感知这一事件——例如刷新奖励余额、展示奖励已到账的提示、更新统计面板等。reward.useWatchRewardDistributed正是为此设计的 React Hook它订阅指定 TIP-20 代币上的奖励分发事件一旦事件发生就回调你提供的onRewardDistributed函数。它在 wagmi 的 Tempo Hook 体系中属于监听类watch成员与reward.useWatchRewardRecipientSet并列二者分别对应RewardDistributed奖励已分发与RewardRecipientSet奖励接收人已设置两类事件参见 hooks 总览。二、快速上手在 React 组件中调用该 Hook 的最小示例与官方文档一致import { Hooks } from wagmi/tempo function App() { Hooks.reward.useWatchRewardDistributed({ onRewardDistributed: (args, log) { console.log(args:, args) }, token: 0x20c0000000000000000000000000000000000000, }) return divWatching for reward distributed events.../div }其中token传入要监听的 TIP-20 代币地址onRewardDistributed在每次事件触发时被调用形参args携带事件解码后的参数log为原始日志对象。在仓库的 config-tempo.ts 示例 中给出了搭配该 Hook 使用的完整 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(), }, })要点说明chains仅配置tempo一条链且通过multiInjectedProviderDiscovery: false关闭浏览器内置钱包的自动发现避免干扰tempoWallet连接器transports为 tempo 链配置http()传输层用于 RPC 交互与事件轮询。三、参数详解reward.useWatchRewardDistributed的完整参数类型为type Parametersconfig extends Config UnionCompute ExactPartialActions.reward.watchRewardDistributed.Parametersconfig ConfigParameterconfig { enabled?: boolean | undefined } 即它继承自底层 Actionreward.watchRewardDistributed的全部参数详见 reward.watchRewardDistributed 文档并额外叠加config与enabled两个 Hook 专属参数。3.1 onRewardDistributed必填类型functiondeclare function onRewardDistributed(args: Args, log: Log): void type Args { /** Total amount distributed */ amount: bigint /** Address that funded the distribution */ funder: Address }每次RewardDistributed事件触发时被调用args.amount本次分发的总代币数量bigint类型args.funder发起分发的账户地址log包含事件区块号、交易哈希、日志索引等原始信息的 viemLog对象可用于精确溯源或去重。3.2 token必填类型Address要监听的 TIP-20 代币合约地址。只有当该代币上发生RewardDistributed事件时回调才会触发。3.3 args可选过滤类型objecttype Args { /** Filter by funder address */ funder?: Address | Address[] }通过funder字段按分发者地址过滤事件可传单个地址或地址数组仅命中过滤条件的事件才会进入onRewardDistributed回调。3.4 enabledHook 专属类型boolean | undefined默认值true控制监听是否激活。在源码实现中当enabled为false、onRewardDistributed缺失或token缺失时useEffect会直接提前返回、不发起订阅见 reward.ts。典型用法是链未连接/代币未选择时先不监听Hooks.reward.useWatchRewardDistributed({ enabled: isConnected, token: selectedToken, onRewardDistributed: (args) console.log(args), })3.5 config类型Config | undefined不传时Hook 会通过useConfig从最近的WagmiProvider上下文读取配置见 WagmiProvider 文档传入时则显式覆盖适合在 Provider 树之外使用或有多个 config 的场景。config 的完整定义可参考 createConfig 文档。3.6 chainId类型ChainIdParameter与 wagmi 其他 Hook 一致可通过chainId指定监听的链。不传时Hook 内部会先经useChainId取得当前配置的链 ID 作为兜底见 reward.ts。四、底层实现原理从源码看该 Hook 是一层React 生命周期包装其核心逻辑位于 packages/react/src/tempo/hooks/reward.tsexport function useWatchRewardDistributedconfig extends Config( parameters: useWatchRewardDistributed.Parametersconfig {}, ) { const { enabled true, onRewardDistributed, token, ...rest } parameters const config useConfig({ config: parameters.config }) const configChainId useChainId({ config }) const chainId parameters.chainId ?? configChainId useEffect(() { if (!enabled) return if (!onRewardDistributed) return if (!token) return return Actions.reward.watchRewardDistributed(config, { ...rest, chainId, onRewardDistributed, token, }) }, [ config, enabled, chainId, token, onRewardDistributed, rest.fromBlock, rest.onError, rest.poll, rest.pollingInterval, ]) }值得关注的实现细节订阅即生命周期Hook 自身不返回值真正的订阅动作发生在useEffect内且useEffect的返回值正是 Action 返回的取消订阅函数——组件卸载或依赖变化时 React 会自动调用它完成清理避免内存泄漏与重复订阅。依赖数组显式声明config、enabled、chainId、token、onRewardDistributed以及rest.fromBlock、rest.onError、rest.poll、rest.pollingInterval任一变化都会触发重新订阅其余参数通过展开rest透传源码中对此有biome-ignore注释说明是有意为之。链 ID 兜底chainId优先取用户显式传入的值否则回落到当前配置链保证多链场景下订阅始终落在正确链上。Hook 最终调用的是 core 层包装后的 watchRewardDistributed后者将chainId从参数中取出、通过config.getClient({ chainId })解析出对应链的 viem 客户端再透传给 viem/tempo 的同名 Action 完成事件监听并原样返回unwatch函数。类型层面reward.test-d.ts 对useWatchRewardDistributed做了编译期校验验证其接受config、enabled、onRewardDistributed(args, log)等参数保证 Hook 的类型签名与文档一致。五、与 Action 配合分发 → 监听的完整闭环useWatchRewardDistributed监听的正是reward.distribute/reward.distributeSync所产生的链上事件。分发侧的使用方式参见 reward.distribute 文档import { Actions } from wagmi/tempo import { parseEther } from viem import { config } from ./config const { amount, funder, receipt } await Actions.reward.distributeSync(config, { amount: parseEther(1000), token: 0x20c0000000000000000000000000000000000000, })amount分发数量bigint必须大于 0可用parseEther(1000)换算token目标 TIP-20 代币地址*Sync变体会等待交易确认后再返回若追求性能可使用非 Sync 的reward.distribute拿到hash后自行waitForTransactionReceipt。将两侧组合起来即可实现一个完整的奖励分发实时面板import { Hooks } from wagmi/tempo import { Actions } from wagmi/tempo import { parseEther } from viem const TOKEN 0x20c0000000000000000000000000000000000000 function RewardPanel() { const [events, setEvents] useState{ amount: bigint; funder: string }[]([]) // 1. 实时监听奖励分发事件 Hooks.reward.useWatchRewardDistributed({ token: TOKEN, onRewardDistributed: (args) { setEvents((prev) [...prev, args]) }, }) // 2. 发起一次奖励分发 const handleDistribute async () { await Actions.reward.distributeSync(/* config */, { amount: parseEther(1000), token: TOKEN, }) } return ( div button onClick{handleDistribute}分发奖励/button ul {events.map((e, i) ( li key{i} {e.funder} 分发 {e.amount.toString()} wei /li ))} /ul /div ) }监听方无需手动轮询或刷新onRewardDistributed一旦触发即可增量更新 UI。六、实用建议与注意事项回调引用稳定性由于onRewardDistributed位于依赖数组中若每次渲染都内联创建新函数会导致订阅被反复重建。建议用useCallback包裹回调或仅在确实需要时更新。按需启用监听enabled默认true在代币地址尚未就绪时记得显式关闭避免无效订阅源码会因token缺失直接跳过。合理使用过滤多分发者场景下优先用args.funder过滤而非在回调里自行判断减少不必要的事件处理。事件溯源log参数携带完整链上元信息可用于与reward.distribute返回的receipt相互印证或实现基于fromBlock的历史事件回放通过rest.fromBlock参数。七、延伸阅读reward.useWatchRewardRecipientSet监听奖励接收人已设置事件的姊妹 Hookreward.watchRewardDistributed Action 文档Hook 所包装的底层 Action含完整参数与返回类型reward.distribute触发RewardDistributed事件的分发动作reward.useClaim 与 reward.useUserRewardInfo与分发事件配套的领取、查询 HookTempo hooks 总览Reward、Token、DEX、Zone 等全部 Tempo Hook 索引源码实现React Hook 定义、core Action 包装、类型测试。【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考