Wagmi Tempo 奖励领取指南深入解析reward.useClaim与useClaimSyncHook【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmireward.useClaim与reward.useClaimSync是 Wagmi Tempo 模块中用于领取累计奖励Claim Rewards的 React 响应式原语。本文以 reward.useClaim.md 为核心结合仓库源码 reward.tshooks 层、reward.tsactions 层 与类型测试 reward.test-d.ts完整讲解 Hook 的基础用法、异步变体、参数体系、返回值与底层调用链帮助你直接在 DApp 中实现一键领取奖励功能。一、Hook 定位为谁领取、领取什么reward.useClaim的职责是为调用者caller领取其累积的奖励。在 Tempo 的奖励Reward模块中奖励由奖励合约按某个 TIP-20 代币为单位进行累计与分发用户通过传入目标代币地址token即可将属于自己的那部分奖励提取到账户中。从源码注释可见其完整语义packages/react/src/tempo/hooks/reward.tsHook for claiming accumulated rewards.Hook 本身并不直接发送交易而是基于 TanStack Query 的useMutation封装了核心 ActionActions.reward.claim/Actions.reward.claimSync并自动从最近的WagmiProvider中解析config因此在使用前需要确保应用已被WagmiProvider包裹且配置了 Tempo 链与钱包连接器。二、前置条件Tempo 配置Hook 的所有写操作都依赖一个正确的 Wagmiconfig。仓库中给出了可直接复用的配置模板 config-tempo.tsimport { 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(), }, })要点connectors: [tempoWallet()]注册 Tempo 官方钱包连接器reward.claim的底层调用依赖getConnectorClient从该连接器解析签名账户chains: [tempo]声明 Tempo 链reward.claim的参数类型ChainIdParameter会基于config[chains][number]推导transports为 Tempo 链配置 HTTP 传输层用于发起 RPC 调用。若在应用中使用还需将config通过WagmiProvider注入参考 WagmiProvider.md。如果未通过 Provider 注入也可以在 Hook 参数中显式传入config见下文config 参数一节。三、基础用法useClaimSync同步领取文档推荐的首选方式是使用*Sync变体reward.useClaimSync它会在交易被包含进区块后才返回结果因此mutate之后可以立刻从返回值中拿到交易收据。import { Hooks } from wagmi/tempo const claimSync Hooks.reward.useClaimSync() // 在用户交互如按钮点击、表单提交中调用 mutate claimSync.mutate({ token: 0x20c0000000000000000000000000000000000000, }) console.log(Transaction hash:, claimSync.data?.receipt.transactionHash) // log: Transaction hash: 0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef要点说明mutate的入参即 Actionreward.claimSync的参数对象token为必填项类型AddressclaimSync.data的类型为Actions.reward.claimSync.ReturnValue即{ receipt: TransactionReceipt }因此data?.receipt.transactionHash可以直接打印交易哈希完整可运行的组件示例可参考源码 JSDocpackages/react/src/tempo/hooks/reward.ts其中展示了在button的onClick中调用claimSync({ token })的标准写法。四、异步用法useClaimuseWaitForTransactionReceipt*Sync变体会阻塞等待交易上链适合对代码简洁性要求高的场景但如果你更关注性能、希望在交易广播后立刻释放 UI则应使用非 Sync 的reward.useClaim它只返回交易哈希是否上链由你自行等待import { Hooks } from wagmi/tempo import { useWaitForTransactionReceipt } from wagmi const claim Hooks.reward.useClaim() const { data: receipt } useWaitForTransactionReceipt({ hash: claim.data }) // 在用户交互中调用 mutate claim.mutate({ token: 0x20c0000000000000000000000000000000000000, })两种变体的取舍变体返回值适合场景useClaimSync{ receipt: TransactionReceipt }一次mutate拿到收据代码最简useClaim交易哈希hash追求性能手动配合useWaitForTransactionReceipt等待包含从源码实现看packages/react/src/tempo/hooks/reward.ts两个 Hook 的结构完全对称均通过useMutation实现区别仅在于mutationFn调用的 Action 与mutationKeyuseClaimmutationKey: [claim]内部调用Actions.reward.claim(config, variables)useClaimSyncmutationKey: [claimSync]内部调用Actions.reward.claimSync(config, variables)这意味着你可以在同一页面同时使用两个 Hook 而不会产生 mutation 状态冲突。五、底层调用链从 Hook 到链上交易Hook 层只是薄封装真正的交易发送发生在核心 Action 层。以claim为例其实现位于 packages/core/src/tempo/actions/reward.tsexport async function claimconfig extends Config( config: config, parameters: claim.Parametersconfig, ): PromiseActions.reward.claim.ReturnValue { const { account, chainId, connector } parameters const client await getConnectorClient(config, { account, assertChainId: false, chainId, connector, }) return Actions.reward.claim(client, parameters as never) }调用链可以概括为Hook 层ReactuseMutation的mutationFn接收用户传入的 variables调用Actions.reward.claim(config, variables)Action 层Wagmi Core通过getConnectorClient从连接器解析出具备签名能力的WalletClient支持覆盖account、chainId、connector参数Viem 层将参数透传给 Viem 的Actions.reward.claim(client, parameters)由 Tempo 底层完成交易构造与广播。claimSync的调用链与之完全相同区别仅在于最终委托给 Viem 的Actions.reward.claimSync后者会在内部等待交易收据并返回{ receipt }同时受throwOnReceiptRevert参数控制是否在收据显示回滚时抛错默认true。六、参数详解1.token必填类型Address说明需要领取奖励的 TIP-20 代币地址。文档示例中使用的0x20c0000000000000000000000000000000000000即这类代币地址。2. 共享的写交易参数Tempo Write Parameters除token外reward.claim/reward.claimSync还继承了 Tempo 写操作共用的可选参数完整说明见 tempo-write-parameters.md汇总如下参数类型默认值说明accountAccount \| Address连接的 Wagmi 账户发送交易的账户feeTokenAddress \| bigint—交易的手续费代币可为 TIP-20 代币地址或 IDfeePayerAccount \| true—手续费支付方可为 Viem Account或传true以使用 Fee Payer Servicegasbigint—交易的 Gas 上限maxFeePerGasbigint—每单位 Gas 的最高费用maxPriorityFeePerGasbigint—每单位 Gas 的最高优先费小费noncenumber—交易 NoncenonceKeyexpiring \| bigint—交易 Nonce 键validBeforenumber—交易必须在之前被包含的 Unix 时间戳validAfternumber—交易可以在之后被包含的 Unix 时间戳throwOnReceiptRevertbooleantrue收据显示回滚时是否抛错仅对*SyncAction 生效从类型定义看packages/core/src/tempo/actions/reward.ts这些参数由OptionalTransactionOverrides引入并与ChainIdParameterchainId、ConnectorParameterconnector组合成claim.Parameters最终通过UnionLooseOmit剔除chain字段后透传给 Viem。3.config参数类型Config | undefined说明显式指定要使用的 Wagmiconfig覆盖从最近的WagmiProvider中检索到的配置。适合多实例配置或非 Provider 环境下使用。4.mutation参数说明透传给 TanStack QueryuseMutation的选项对象例如onMutate、onError、onSuccess、onSettled等生命周期回调以及context类型。类型层面由UseMutationParametersReturnValue, ErrorType, Parameters, context约束见 packages/react/src/tempo/hooks/reward.ts。七、返回值与 mutation 状态Hook 的返回类型是UseMutationResult参见 packages/react/src/tempo/hooks/reward.ts 中useClaim.ReturnType的定义其核心字段与含义如下data类型为Actions.reward.claim.ReturnValue | undefined即{ receipt: TransactionReceipt }useClaim的data为交易哈希useClaimSync的data为收据对象。返回类型的完整定义见 reward.claim.mdtype ReturnType { /** Transaction receipt */ receipt: TransactionReceipt }mutate/mutateAsync调用入口参数类型为Actions.reward.claim.Parameters包含token及全部共享写交易参数。同步风格使用mutate(variables, options?)需要 Promise 化、配合await或串联后续逻辑时使用mutateAsync。其他常用状态isPending、isError、error、isSuccess、variables、context等均由 TanStack Query 的useMutation提供可用于渲染加载态、错误提示与禁用按钮等 UI 逻辑。八、类型安全与测试保障仓库为reward模块的 Hook 提供了完备的类型级测试packages/react/src/tempo/hooks/reward.test-d.ts对useClaim/useClaimSync验证了以下契约claim.data的类型为Actions.reward.claim.ReturnValue | undefinedclaim.error为Actions.reward.claim.ErrorType | nullmutation.onMutate中variables可扩展为Actions.reward.claim.ParametersonSuccess(data, variables, context)中data精确等于ReturnValuecontext精确等于 mutation 上下文类型mutate的内联回调同样受上述类型约束。这意味着在编辑器与 CI 中token是否必填、参数与返回值是否匹配都会在编译期被严格校验极大降低链上调用出错概率。九、与奖励模块其他 Hook 的配合reward.useClaim只是 Tempo 奖励模块的一个环节。从 reward.ts 的源码结构看该模块还提供查询类useGetGlobalRewardPerToken查询代币的全局单位奖励、useUserRewardInfo查询指定账户的奖励信息含rewardRecipient、rewardPerToken、rewardBalance写操作类useSetRecipient/useSetRecipientSync设置奖励接收方、useDistribute/useDistributeSync分发奖励事件监听类useWatchRewardDistributed、useWatchRewardRecipientSet。典型的领取流程是先用useUserRewardInfo展示待领取的rewardBalance再用useClaimSync完成领取最后通过useWatchRewardDistributed实时感知新一轮奖励的分发。十、相关文档与源码索引Hook 文档site/tempo/hooks/reward.useClaim.mdAction 文档返回类型与参数site/tempo/actions/reward.claim.md共享写交易参数 site/shared/tempo-write-parameters.mdHook 源码实现packages/react/src/tempo/hooks/reward.tsCore Action 源码实现packages/core/src/tempo/actions/reward.ts类型测试packages/react/src/tempo/hooks/reward.test-d.tsTempo 配置模板site/snippets/react/config-tempo.ts【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Wagmi Tempo 奖励领取指南：深入解析 `reward.useClaim` 与 `useClaimSync` Hook
Wagmi Tempo 奖励领取指南深入解析reward.useClaim与useClaimSyncHook【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmireward.useClaim与reward.useClaimSync是 Wagmi Tempo 模块中用于领取累计奖励Claim Rewards的 React 响应式原语。本文以 reward.useClaim.md 为核心结合仓库源码 reward.tshooks 层、reward.tsactions 层 与类型测试 reward.test-d.ts完整讲解 Hook 的基础用法、异步变体、参数体系、返回值与底层调用链帮助你直接在 DApp 中实现一键领取奖励功能。一、Hook 定位为谁领取、领取什么reward.useClaim的职责是为调用者caller领取其累积的奖励。在 Tempo 的奖励Reward模块中奖励由奖励合约按某个 TIP-20 代币为单位进行累计与分发用户通过传入目标代币地址token即可将属于自己的那部分奖励提取到账户中。从源码注释可见其完整语义packages/react/src/tempo/hooks/reward.tsHook for claiming accumulated rewards.Hook 本身并不直接发送交易而是基于 TanStack Query 的useMutation封装了核心 ActionActions.reward.claim/Actions.reward.claimSync并自动从最近的WagmiProvider中解析config因此在使用前需要确保应用已被WagmiProvider包裹且配置了 Tempo 链与钱包连接器。二、前置条件Tempo 配置Hook 的所有写操作都依赖一个正确的 Wagmiconfig。仓库中给出了可直接复用的配置模板 config-tempo.tsimport { 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(), }, })要点connectors: [tempoWallet()]注册 Tempo 官方钱包连接器reward.claim的底层调用依赖getConnectorClient从该连接器解析签名账户chains: [tempo]声明 Tempo 链reward.claim的参数类型ChainIdParameter会基于config[chains][number]推导transports为 Tempo 链配置 HTTP 传输层用于发起 RPC 调用。若在应用中使用还需将config通过WagmiProvider注入参考 WagmiProvider.md。如果未通过 Provider 注入也可以在 Hook 参数中显式传入config见下文config 参数一节。三、基础用法useClaimSync同步领取文档推荐的首选方式是使用*Sync变体reward.useClaimSync它会在交易被包含进区块后才返回结果因此mutate之后可以立刻从返回值中拿到交易收据。import { Hooks } from wagmi/tempo const claimSync Hooks.reward.useClaimSync() // 在用户交互如按钮点击、表单提交中调用 mutate claimSync.mutate({ token: 0x20c0000000000000000000000000000000000000, }) console.log(Transaction hash:, claimSync.data?.receipt.transactionHash) // log: Transaction hash: 0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef要点说明mutate的入参即 Actionreward.claimSync的参数对象token为必填项类型AddressclaimSync.data的类型为Actions.reward.claimSync.ReturnValue即{ receipt: TransactionReceipt }因此data?.receipt.transactionHash可以直接打印交易哈希完整可运行的组件示例可参考源码 JSDocpackages/react/src/tempo/hooks/reward.ts其中展示了在button的onClick中调用claimSync({ token })的标准写法。四、异步用法useClaimuseWaitForTransactionReceipt*Sync变体会阻塞等待交易上链适合对代码简洁性要求高的场景但如果你更关注性能、希望在交易广播后立刻释放 UI则应使用非 Sync 的reward.useClaim它只返回交易哈希是否上链由你自行等待import { Hooks } from wagmi/tempo import { useWaitForTransactionReceipt } from wagmi const claim Hooks.reward.useClaim() const { data: receipt } useWaitForTransactionReceipt({ hash: claim.data }) // 在用户交互中调用 mutate claim.mutate({ token: 0x20c0000000000000000000000000000000000000, })两种变体的取舍变体返回值适合场景useClaimSync{ receipt: TransactionReceipt }一次mutate拿到收据代码最简useClaim交易哈希hash追求性能手动配合useWaitForTransactionReceipt等待包含从源码实现看packages/react/src/tempo/hooks/reward.ts两个 Hook 的结构完全对称均通过useMutation实现区别仅在于mutationFn调用的 Action 与mutationKeyuseClaimmutationKey: [claim]内部调用Actions.reward.claim(config, variables)useClaimSyncmutationKey: [claimSync]内部调用Actions.reward.claimSync(config, variables)这意味着你可以在同一页面同时使用两个 Hook 而不会产生 mutation 状态冲突。五、底层调用链从 Hook 到链上交易Hook 层只是薄封装真正的交易发送发生在核心 Action 层。以claim为例其实现位于 packages/core/src/tempo/actions/reward.tsexport async function claimconfig extends Config( config: config, parameters: claim.Parametersconfig, ): PromiseActions.reward.claim.ReturnValue { const { account, chainId, connector } parameters const client await getConnectorClient(config, { account, assertChainId: false, chainId, connector, }) return Actions.reward.claim(client, parameters as never) }调用链可以概括为Hook 层ReactuseMutation的mutationFn接收用户传入的 variables调用Actions.reward.claim(config, variables)Action 层Wagmi Core通过getConnectorClient从连接器解析出具备签名能力的WalletClient支持覆盖account、chainId、connector参数Viem 层将参数透传给 Viem 的Actions.reward.claim(client, parameters)由 Tempo 底层完成交易构造与广播。claimSync的调用链与之完全相同区别仅在于最终委托给 Viem 的Actions.reward.claimSync后者会在内部等待交易收据并返回{ receipt }同时受throwOnReceiptRevert参数控制是否在收据显示回滚时抛错默认true。六、参数详解1.token必填类型Address说明需要领取奖励的 TIP-20 代币地址。文档示例中使用的0x20c0000000000000000000000000000000000000即这类代币地址。2. 共享的写交易参数Tempo Write Parameters除token外reward.claim/reward.claimSync还继承了 Tempo 写操作共用的可选参数完整说明见 tempo-write-parameters.md汇总如下参数类型默认值说明accountAccount \| Address连接的 Wagmi 账户发送交易的账户feeTokenAddress \| bigint—交易的手续费代币可为 TIP-20 代币地址或 IDfeePayerAccount \| true—手续费支付方可为 Viem Account或传true以使用 Fee Payer Servicegasbigint—交易的 Gas 上限maxFeePerGasbigint—每单位 Gas 的最高费用maxPriorityFeePerGasbigint—每单位 Gas 的最高优先费小费noncenumber—交易 NoncenonceKeyexpiring \| bigint—交易 Nonce 键validBeforenumber—交易必须在之前被包含的 Unix 时间戳validAfternumber—交易可以在之后被包含的 Unix 时间戳throwOnReceiptRevertbooleantrue收据显示回滚时是否抛错仅对*SyncAction 生效从类型定义看packages/core/src/tempo/actions/reward.ts这些参数由OptionalTransactionOverrides引入并与ChainIdParameterchainId、ConnectorParameterconnector组合成claim.Parameters最终通过UnionLooseOmit剔除chain字段后透传给 Viem。3.config参数类型Config | undefined说明显式指定要使用的 Wagmiconfig覆盖从最近的WagmiProvider中检索到的配置。适合多实例配置或非 Provider 环境下使用。4.mutation参数说明透传给 TanStack QueryuseMutation的选项对象例如onMutate、onError、onSuccess、onSettled等生命周期回调以及context类型。类型层面由UseMutationParametersReturnValue, ErrorType, Parameters, context约束见 packages/react/src/tempo/hooks/reward.ts。七、返回值与 mutation 状态Hook 的返回类型是UseMutationResult参见 packages/react/src/tempo/hooks/reward.ts 中useClaim.ReturnType的定义其核心字段与含义如下data类型为Actions.reward.claim.ReturnValue | undefined即{ receipt: TransactionReceipt }useClaim的data为交易哈希useClaimSync的data为收据对象。返回类型的完整定义见 reward.claim.mdtype ReturnType { /** Transaction receipt */ receipt: TransactionReceipt }mutate/mutateAsync调用入口参数类型为Actions.reward.claim.Parameters包含token及全部共享写交易参数。同步风格使用mutate(variables, options?)需要 Promise 化、配合await或串联后续逻辑时使用mutateAsync。其他常用状态isPending、isError、error、isSuccess、variables、context等均由 TanStack Query 的useMutation提供可用于渲染加载态、错误提示与禁用按钮等 UI 逻辑。八、类型安全与测试保障仓库为reward模块的 Hook 提供了完备的类型级测试packages/react/src/tempo/hooks/reward.test-d.ts对useClaim/useClaimSync验证了以下契约claim.data的类型为Actions.reward.claim.ReturnValue | undefinedclaim.error为Actions.reward.claim.ErrorType | nullmutation.onMutate中variables可扩展为Actions.reward.claim.ParametersonSuccess(data, variables, context)中data精确等于ReturnValuecontext精确等于 mutation 上下文类型mutate的内联回调同样受上述类型约束。这意味着在编辑器与 CI 中token是否必填、参数与返回值是否匹配都会在编译期被严格校验极大降低链上调用出错概率。九、与奖励模块其他 Hook 的配合reward.useClaim只是 Tempo 奖励模块的一个环节。从 reward.ts 的源码结构看该模块还提供查询类useGetGlobalRewardPerToken查询代币的全局单位奖励、useUserRewardInfo查询指定账户的奖励信息含rewardRecipient、rewardPerToken、rewardBalance写操作类useSetRecipient/useSetRecipientSync设置奖励接收方、useDistribute/useDistributeSync分发奖励事件监听类useWatchRewardDistributed、useWatchRewardRecipientSet。典型的领取流程是先用useUserRewardInfo展示待领取的rewardBalance再用useClaimSync完成领取最后通过useWatchRewardDistributed实时感知新一轮奖励的分发。十、相关文档与源码索引Hook 文档site/tempo/hooks/reward.useClaim.mdAction 文档返回类型与参数site/tempo/actions/reward.claim.md共享写交易参数 site/shared/tempo-write-parameters.mdHook 源码实现packages/react/src/tempo/hooks/reward.tsCore Action 源码实现packages/core/src/tempo/actions/reward.ts类型测试packages/react/src/tempo/hooks/reward.test-d.tsTempo 配置模板site/snippets/react/config-tempo.ts【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考