wagmi Tempo DEX 卖出报价 Hook 完全指南dex.useSellQuote的用法、参数与实现原理【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmidex.useSellQuote是 wagmi Tempo 模块为 DEX去中心化交易所交易场景提供的 React Hook用于在卖出指定数量代币时从链上订单簿实时获取可收到的tokenOut数量报价。本文以 site/tempo/hooks/dex.useSellQuote.md 为核心骨架结合底层 Actiondex.getSellQuote、React 侧实现与测试用例完整讲解该 Hook 的调用方式、参数语义、返回结构与缓存行为帮助你在以太坊应用中快速集成卖出前询价能力。一、dex.useSellQuote是什么dex.useSellQuote是一个只读查询型queryHook对应底层 Actiondex.getSellQuote其职责是给定要卖出的代币地址tokenIn、目标收到代币地址tokenOut以及卖出数量amountIn返回卖出后预期获得的tokenOut数量。它与购买方向的dex.useBuyQuote详见 site/tempo/hooks/dex.useBuyQuote.md互为镜像useBuyQuote指定amountOut问买入这么多需要投入多少tokenInuseSellQuote指定amountIn问卖出这么多能换回多少tokenOut。两者都不会发起交易、不消耗 Gas只读取订单簿价格状态适合用于交易界面的报价展示、滑点预估与下单前的用户确认。二、前置准备Tempo 链配置使用该 Hook 前需要先创建连接到 Tempo 链的 wagmi Config。文档引用的完整配置模板位于 site/snippets/react/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(), }, })要点说明tempoWallet是 Tempo 链的钱包连接器wagmi/tempo导出负责提供签名账户与连接状态chains: [tempo]声明应用只使用 Tempo 链后续报价查询默认落在该链上multiInjectedProviderDiscovery: false关闭多注入钱包自动发现避免与tempoWallet冲突transports中为tempo.id配置http()作为 RPC 传输层所有只读查询包括报价都经由该 transport 发往链上节点。三、基本用法文档给出的最小调用示例如下import { Hooks } from wagmi/tempo import { parseUnits } from viem const { data: quote } Hooks.dex.useSellQuote({ amountIn: parseUnits(100, 6), tokenIn: 0x20c0000000000000000000000000000000000001, tokenOut: 0x20c0000000000000000000000000000000000002, }) console.log(Amount received:, quote) // log: Amount received: 99700000n几个关键点导入路径Hooks从wagmi/tempo导出dex.useSellQuote是Hooks.dex命名空间下的成员数量精度amountIn必须使用bigint示例用 viem 的parseUnits(100, 6)将 100 个 6 位小数代币转为整数100000000n不要直接传字符串或 number返回值data是bigint上例中卖出100000000n后获得99700000n即约 99.7 个代币——差额来自订单簿价差与流动性结构这正是实时报价而非按面值兑换的体现。在 React 组件中更完整的形态是利用 TanStack Query 提供的isLoading/isSuccess/error等状态字段import { Hooks } from wagmi/tempo import { parseUnits } from viem function SellQuote() { const { data, isLoading, isError, error } Hooks.dex.useSellQuote({ amountIn: parseUnits(100, 6), tokenIn: 0x20c0000000000000000000000000000000000001, tokenOut: 0x20c0000000000000000000000000000000000002, }) if (isLoading) return divLoading.../div if (isError) return divQuote failed: {error.message}/div return divExpected Output: {data?.toString()}/div }四、参数详解ParametersuseSellQuote的参数类型定义在 packages/react/src/tempo/hooks/dex.tsuseSellQuote.Parameters约第 885–896 行其语义与底层 Actiondex.getSellQuote的参数一一对应完整字段说明见 site/tempo/actions/dex.getSellQuote.md参数类型必填说明amountInbigint是要卖出的tokenIn数量含精度缩放tokenInAddress是待卖出代币的合约地址tokenOutAddress是期望收到的代币合约地址chainIdnumber否指定查询链 ID不传时使用当前激活链useChainIdqueryQueryParameter否TanStack Query 的查询配置enabled、retry、gcTime、select等源码层面的补充细节Hook 内部通过useConfig获取全局 config并通过useChainId({ config })取得当前链 ID在未显式传入chainId时自动补全见 packages/react/src/tempo/hooks/dex.ts 第 870–883 行的useSellQuote实现Action 侧packages/core/src/tempo/actions/dex.ts 第 992–998 行的getSellQuote会从参数中剥离chainId通过config.getClient({ chainId })拿到对应链的 viem client再调用 viem Tempo 的Actions.dex.getSellQuote(client, rest)完成链上读取也就是说从 Hook 到链上读数的完整调用链为useSellQuote→getSellQuote.queryOptions→Actions.dex.getSellQuote(config, params)→config.getClient({ chainId })→ viemActions.dex.getSellQuote。关于query子参数query选项直接透传给 TanStack Query v5 的useQuery因此支持其全部标准字段enabled、retry、refetchInterval、staleTime、select、placeholderData等官方说明见 TanStack Query 的useQuery文档。值得一提的源码行为getSellQuote.queryOptions在 packages/core/src/tempo/actions/dex.ts 第 1019–1038 行中会自动将enabled与参数完整性绑定——只有tokenIn、tokenOut、amountIn三者都非空时查询才会执行避免在参数缺失时发起无效的链上请求。五、返回类型Return TypeuseSellQuote的返回值是一个 TanStack Query 查询结果对象核心字段如下data类型bigint语义卖出amountIn数量的tokenIn后预期收到的tokenOut数量Actions.dex.getSellQuote.ReturnValue。在底层 Action 的类型定义中返回值被明确标注为biginttype ReturnType bigint查询状态字段Hook 返回的是标准UseQueryReturnType包含isPending/isLoading/isSuccess/isError、error、refetch、fetchStatus、dataUpdatedAt等全部 TanStack Query 状态可用于渲染加载态、错误态与数据刷新。关于 Hook 返回类型的通用说明可参考 TanStack Query v5 的useQuery文档。六、测试用例与实战注意事项仓库在 packages/react/src/tempo/hooks/dex.test.ts第 548–594 行为useSellQuote提供了两组测试可以作为集成时的行为参照场景一正常报价有流动性// Place bid orders to create liquidity await Actions.dex.placeSync(config, { token: base, amount: parseUnits(500, 6), type: buy, tick: Tick.fromPrice(0.999), }) const { result } await renderHook(() dex.useSellQuote({ tokenIn: base, tokenOut: quote, amountIn: parseUnits(100, 6), }), ) await vi.waitFor(() expect(result.current.isSuccess).toBeTruthy()) expect(result.current.data).toBeGreaterThan(0n) // Should be approximately 100 * 0.999 99.9 expect(result.current.data).toBeLessThan(parseUnits(100, 6))要点报价依赖订单簿流动性——测试先以Tick.fromPrice(0.999)挂入买单价卖出 100 个base后所得应小于 100约 99.9验证了报价会随订单簿价格收敛。场景二无流动性时报错const { result } await renderHook(() dex.useSellQuote({ tokenIn: base, tokenOut: quote, amountIn: parseUnits(100, 6), query: { retry: false }, }), ) await vi.waitUntil(() result.current.isError, { timeout: 2_000 }) expect(result.current.error?.message).toContain(InsufficientLiquidity)要点若交易对没有流动性查询会以InsufficientLiquidity错误失败。生产代码中应做好isError分支处理并可通过query.retry控制重试次数测试中设为false以快速失败。实战建议善用enabled自动门控queryOptions已内置参数完整性检查无需手动传enabled与usePlace/useBuy组合报价仅用于展示真正下单请使用Hooks.dex.usePlace、Hooks.dex.useBuy等 mutation Hook参考 packages/react/src/tempo/hooks/dex.ts 中的usePlace、useBuy实现数量统一用bigint从parseUnits到data全程保持bigint避免浮点精度问题。七、相关资源底层 Action 文档site/tempo/actions/dex.getSellQuote.md购买方向报价 Hooksite/tempo/hooks/dex.useBuyQuote.mdHooks 索引site/tempo/hooks/index.mdActions 索引site/tempo/actions/index.mdReact Hook 源码实现packages/react/src/tempo/hooks/dex.tsCore Action 源码实现packages/core/src/tempo/actions/dex.ts行为测试用例packages/react/src/tempo/hooks/dex.test.tsTempo 配置示例site/snippets/react/config-tempo.ts【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
