ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

wagmi 中 TIP-20 代币铸造 Hook:`token.useMint` 与 `token.useMintSync` 完整实战指南

wagmi 中 TIP-20 代币铸造 Hook:`token.useMint` 与 `token.useMintSync` 完整实战指南 wagmi 中 TIP-20 代币铸造 Hooktoken.useMint与token.useMintSync完整实战指南【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi本指南围绕 wagmi 仓库中 site/tempo/hooks/token.useMint.md 所讲解的Hooks.token.useMint/Hooks.token.useMintSync展开介绍如何在 React 应用中向指定地址铸造 TIP-20 代币Tempo 网络上的代币标准包括*Sync与非同步两种用法的取舍、底层 Action 的调用链与返回类型、以及完整可运行的事务参数说明。读完本文你将能够在自己的 wagmi Tempo 项目中安全、高效地实现代币铸造功能。概述什么是token.useMinttoken.useMint是 wagmi Tempo 集成中用于「向某个地址铸造新 TIP-20 代币」的 React Hook。它基于 TanStack Query 的useMutation封装将底层 packages/core/src/tempo/actions/token.ts 中实现的Actions.token.mintAction 暴露为组件中可直接调用的mutate函数从而把「发送交易 → 处理结果 → 更新 UI 状态」这一链路收敛为标准的 mutation 流程。与它成对出现的是token.useMintSync。二者对应的是 wagmi Tempo 中普遍存在的*Sync/ 非*Sync双变体设计类似的还有useBurn/useBurnSync、useCreate/useCreateSync等见 packages/react/src/tempo/hooks/token.ts非*SyncuseMint只发送交易立即返回交易哈希不等待交易被打包。*SyncuseMintSync等待交易被包含进区块后才返回结果中直接携带交易收据与事件数据。权限要求铸造 TIP-20 代币要求调用者拥有该代币的ISSUER角色Role-Based Access Control。如果调用账户没有该角色交易将失败。因此在实际产品中铸造入口通常只对具备ISSUER角色的管理员账户开放前端应通过Hooks.token.useHasRole或后端鉴权先行校验调用者权限。快速上手同步铸造useMintSync对于交互路径简单、希望「一次调用就拿到最终结果」的场景推荐使用useMintSync。以下示例来自原文档site/tempo/hooks/token.useMint.mdimport { Hooks } from wagmi/tempo import { parseUnits } from viem const mintSync Hooks.token.useMintSync() // Call mutate in response to user action (e.g. button click, form submission) mintSync.mutate({ amount: parseUnits(10.5, 6), to: 0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb, token: 0x20c0000000000000000000000000000000000000, }) console.log(Minted amount:, mintSync.data?.amount) // log: Minted amount: 10500000n console.log(Recipient:, mintSync.data?.to) // log: Recipient: 0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb关键点说明金额单位amount使用bigint表示。示例中parseUnits(10.5, 6)表示精度为 6 位小数的代币数量即铸造10.5个代币链上表示为10500000n。to接收铸造代币的地址。tokenTIP-20 代币的地址也可以是代币 ID类型为Address | bigint。data返回值*Sync变体返回的data中直接包含amount与to字段方便在铸造成交后立刻更新 UI。useMintSync的 Hook 实现位于 packages/react/src/tempo/hooks/token.ts#L1337-L1352其mutationFn直接委托给Actions.token.mintSync(config, variables)mutationKey为[mintSync]。配置configuseMintSync与useMint的配置来自最近的WagmiProvider。文档示例中的configsite/snippets/react/config-tempo.ts展示了 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(), }, })如果你不想从WagmiProvider取配置也可以在 Hook 参数中显式传入config类型为Config | undefined。异步用法useMint 手动等待收据*Sync变体会在返回前等待交易打包其代价是请求期间isPending状态会持续较久且会阻塞调用方拿到交易哈希的时机。如果对性能更敏感——例如希望尽早把交易哈希展示给用户、或者在交易未确认时就让用户继续操作——应使用非同步的useMint再配合useWaitForTransactionReceipt手动等待收据import { Hooks } from wagmi/tempo import { Actions } from viem/tempo import { parseUnits } from viem import { useWaitForTransactionReceipt } from wagmi const mint Hooks.token.useMint() const { data: receipt } useWaitForTransactionReceipt({ hash: mint.data }) // Call mutate in response to user action (e.g. button click, form submission) mint.mutate({ amount: parseUnits(10.5, 6), to: 0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb, token: 0x20c0000000000000000000000000000000000000, }) if (receipt) { const { args: { amount, to } } Actions.token.mint.extractEvent(receipt.logs) }这个模式的要点mint.mutate(...)只负责发送交易返回后mint.data即交易哈希useWaitForTransactionReceipt会持续监听该哈希直到收据产生。拿到receipt后可通过 viem Tempo 提供的Actions.token.mint.extractEvent(receipt.logs)从日志中提取铸造事件参数amount、to用于数据回填或业务后续处理。相比*Sync这种「发送与确认解耦」的方式把等待时间从mutate调用中剥离交互反馈更快适合需要展示交易进行中状态的场景。从源码看useMintpackages/react/src/tempo/hooks/token.ts#L1267-L1282的mutationFn委托给Actions.token.mint(config, variables)mutationKey为[mint]而Actions.token.mint在 packages/core/src/tempo/actions/token.ts#L1324-L1336 中通过getConnectorClient获取连接器客户端后调用 viem 的Actions.token.mint最终返回的是交易哈希。返回类型详解Hook 返回类型TanStack Query MutationuseMint/useMintSync返回标准的UseMutationResult其泛型参数直接对齐底层 Action见 packages/react/src/tempo/hooks/token.ts#L1284-L1308UseMutationResult Actions.token.mint.ReturnValue, // data 类型 Actions.token.mint.ErrorType, // error 类型 Actions.token.mint.Parametersconfig, // mutate 入参类型 context 常用成员包括mutate/mutateAsync、data、error、isPending/isSuccess/isError、reset等行为与 TanStack Query v5 的useMutation一致。datamutation 结果data的具体结构取决于使用的变体非*Sync的useMintdata为交易哈希0x...。*Sync的useMintSyncdata为「收据 事件数据」的组合对应 Actiontoken.mint的 Return Type详见 site/tempo/actions/token.mint.mdtype ReturnType { /** Amount of tokens minted */ amount: bigint /** Transaction receipt */ receipt: TransactionReceipt /** Address tokens were minted to */ to: Address }mutate/mutateAsyncmutate与mutateAsync接受的参数即 Actiontoken.mint的 Parameters含amount、to、token、memo以及下方列出的可选事务参数。mutate为同步触发、通过回调观察结果mutateAsync返回 Promise可在 async 函数中await。参数详解必填参数参数类型说明amountbigint要铸造的代币数量最小单位如parseUnits(10.5, 6)的结果toAddress接收铸造代币的地址tokenAddress \| bigintTIP-20 代币的地址或 ID可选参数memo类型Hex铸造时可附加的备注memo会被包含在交易中。适合记录铸造原因、批次号等链上可追溯信息。可选参数事务通用参数以下参数是 Tempo 写入类 Action 的通用可选参数见 site/shared/tempo-write-parameters.mduseMint/useMintSync的mutate均支持参数类型说明accountAccount \| Address发送交易的账户默认使用当前连接的 Wagmi 账户feeTokenAddress \| bigint用于支付手续费的代币可以是 TIP-20 代币地址或 IDfeePayerAccount \| true手续费支付方传true表示使用 Fee Payer Service 代为支付gasbigint交易 gas 上限maxFeePerGasbigint每单位 gas 的最高费用maxPriorityFeePerGasbigint每单位 gas 的最高优先费小费noncenumber交易 noncenonceKeyexpiring \| bigint交易 nonce 键validBeforenumber交易必须在此 Unix 时间戳之前被打包validAfternumber交易只能在此 Unix 时间戳之后被打包throwOnReceiptRevertboolean默认true收据显示回滚revert时是否抛错仅对*SyncAction 生效这些参数让 Tempo 的铸币事务具备时间窗约束、代币化手续费、过期 nonce 等高级能力。其中validBefore/validAfter可用于构建「限时铸造」逻辑feePayer: true配合 Fee Payer Service 可实现无 Gas 铸造用户无需持有原生代币即可完成铸造。Hook 级参数configConfig | undefined覆盖从最近WagmiProvider取得的配置。mutation透传给 TanStack QueryuseMutation的配置如onSuccess、onError、retry等。源码级实现Hook 到 Action 的调用链结合仓库源码可以完整还原useMint/useMintSync的底层链路Hook 层packages/react/src/tempo/hooks/token.ts#L1267-L1282 与 packages/react/src/tempo/hooks/token.ts#L1337-L1352useMint通过useConfig(parameters)拿到配置再用useMutation包装Actions.token.mint或mintSync并设置对应的mutationKey[mint]/[mintSync]。Core Action 层packages/core/src/tempo/actions/token.ts#L1324-L1336 与 packages/core/src/tempo/actions/token.ts#L1383-L1395从参数中解构account、chainId、connector通过getConnectorClient获取已连接的钱包客户端assertChainId: false允许跨链发送再调用 viem Tempo 的Actions.token.mint/mintSync完成实际的合约交互。类型层Core Action 的参数类型由ChainIdParameter、ConnectorParameter与OptionalTransactionOverrides组合而成即「链 ID 连接器 事务覆盖参数」并剔除了 viem 层多余的chain字段最终通过Actions.token.mint.Parameters暴露给 Hook。此外仓库测试packages/react/src/tempo/hooks/token.test.ts中多次以hooks.useMintSync()装配 mint 用例验证了该 Hook 在测试环境下的可用性可作为集成测试的参考写法。实践建议与注意事项按场景选择变体交互闭环简单、需要「一把梭」拿结果时用useMintSync需要快速反馈、展示交易哈希或做 pending 状态管理的产品化场景用useMintuseWaitForTransactionReceipt。铸造是写操作务必受权限保护只有ISSUER角色可铸造前端应隐藏/禁用无权限用户的铸造入口并以后端鉴权兜底。金额精度amount必须是bigint且使用代币的最小精度单位避免直接用浮点数导致精度丢失。事件数据回填非*Sync场景下铸造成功后通过Actions.token.mint.extractEvent(receipt.logs)提取{ amount, to }更新本地状态*Sync场景则直接使用data.amount/data.to。Fee Payer 模式若希望实现无 Gas 体验可在mutate参数中传feePayer: true由 Fee Payer Service 代付手续费。关联资源Hook 文档site/tempo/hooks/token.useMint.mdAction 文档含完整 Return Type 与参数site/tempo/actions/token.mint.md事务通用参数说明site/shared/tempo-write-parameters.mdHook 实现packages/react/src/tempo/hooks/token.tsCore Action 实现packages/core/src/tempo/actions/token.tsHook 测试packages/react/src/tempo/hooks/token.test.tsTempo 链配置示例site/snippets/react/config-tempo.ts相关监听 Hooktoken.useWatchMint见 site/tempo/hooks/token.useWatchMint.md可用于实时监听链上铸造事件【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表