0xtrails 0.2.5 → 0.2.6

package/src/widget/hooks/useQuote.ts

@@ -0,0 +1,413 @@
+import { useQuery } from "@tanstack/react-query"
+import { useRef } from "react"
+import type { TransactionReceipt } from "viem"
+import { zeroAddress } from "viem"
+import { useAPIClient } from "../../apiClient.js"
+import { useIndexerGatewayClient } from "../../indexerClient.js"
+import { getTokenBalancesWithPrices } from "../../tokenBalances.js"
+import { logger } from "../../logger.js"
+import { getSequenceEnv } from "../../config.js"
+import { useSupportedTokens } from "../../tokens.js"
+import { useTrailsClient } from "../../trailsClient.js"
+import { getExplorerUrl } from "../../explorer.js"
+import { getFullErrorMessage } from "../../error.js"
+import { prepareSend } from "../../prepareSend.js"
+import { abortControllerRegistry } from "../../abortController.js"
+import { useRelayers } from "../../relayer.js"
+import { TradeType } from "../../prepareSend.js"
+import type { Chain } from "../../chains.js"
+import type { SupportedToken } from "../../tokens.js"
+import type { TransactionState } from "../../transactions.js"
+import type { PrepareSendFees } from "../../prepareSend.js"
+import type { MetaTxnReceipt } from "../../relayer.js"
+import type { RelayerEnv } from "../../relayer.js"
+import type { SequenceEnv } from "../../config.js"
+
+export type UseQuoteProps = {
+  walletClient?: any // TODO: fix this, has to do with viem/wagmi versions
+  fromTokenAddress?: string | null
+  fromChainId?: number | null
+  toTokenAddress?: string | null
+  toChainId?: number | null
+  toCalldata?: string | null
+  swapAmount?: string | bigint
+  toRecipient?: string | null
+  tradeType?: TradeType | null
+  slippageTolerance?: string | number | null
+  onStatusUpdate?: ((transactionStates: TransactionState[]) => void) | null
+  quoteProvider?: string | null
+  gasless?: boolean
+  paymasterUrl?: string
+  selectedFeeToken?: {
+    tokenAddress: string
+    tokenSymbol?: string
+  } | null
+  abortSignal?: AbortSignal
+}
+
+export type SwapReturn = {
+  originTransaction: {
+    transactionHash?: string | null
+    explorerUrl?: string | null
+    receipt: TransactionReceipt | MetaTxnReceipt | null
+  }
+  destinationTransaction: {
+    transactionHash?: string | null
+    explorerUrl?: string | null
+    receipt: MetaTxnReceipt | null
+  }
+  totalCompletionSeconds?: number
+}
+
+export type QuoteProviderInfo = {
+  id: string
+  name: string
+  url: string
+}
+
+export type Quote = {
+  fromAmount: string
+  fromAmountMin: string
+  toAmount: string
+  toAmountMin: string
+  originToken: SupportedToken
+  destinationToken: SupportedToken
+  originChain: Chain
+  destinationChain: Chain
+  fees: PrepareSendFees
+  slippageTolerance: string
+  priceImpact: string
+  completionEstimateSeconds: number
+  transactionStates?: TransactionState[]
+  originTokenRate?: string
+  quoteProvider?: QuoteProviderInfo | null
+  destinationTokenRate?: string
+  fromAmountUsdDisplay?: string
+  toAmountUsdDisplay?: string
+  gasCostUsd?: number
+  gasCostUsdDisplay?: string
+  gasCost?: string
+  gasCostFormatted?: string
+}
+
+export type UseQuoteReturn = {
+  quote: Quote | null
+  swap: (() => Promise<SwapReturn | null>) | null
+  isLoadingQuote: boolean
+  quoteError: unknown
+  refetchQuote: () => void
+  abort: () => void
+}
+
+export function useQuote({
+  walletClient,
+  fromTokenAddress,
+  fromChainId,
+  toTokenAddress,
+  toChainId,
+  swapAmount,
+  tradeType,
+  toRecipient,
+  toCalldata,
+  slippageTolerance,
+  onStatusUpdate,
+  quoteProvider,
+  gasless,
+  paymasterUrl,
+  selectedFeeToken,
+  relayerEnv,
+  nodeGatewayEnv,
+  abortSignal: externalAbortSignal,
+}: Partial<
+  UseQuoteProps & { relayerEnv?: RelayerEnv; nodeGatewayEnv?: SequenceEnv }
+> = {}): UseQuoteReturn {
+  // Set node gateway environment override for this quote session
+  if (nodeGatewayEnv) {
+    ;(globalThis as any).__testNodeGatewayEnv = nodeGatewayEnv
+  }
+
+  // Create abort controller for this hook instance
+  const abortControllerRef = useRef<AbortController>(new AbortController())
+
+  // Combine external abort signal with internal abort controller
+  const combinedAbortSignal = externalAbortSignal
+    ? (() => {
+        const controller = new AbortController()
+
+        // Listen to external abort signal
+        externalAbortSignal.addEventListener("abort", () => {
+          controller.abort()
+          abortControllerRef.current?.abort()
+        })
+
+        // Listen to internal abort controller
+        abortControllerRef.current?.signal.addEventListener("abort", () => {
+          controller.abort()
+        })
+
+        return controller.signal
+      })()
+    : abortControllerRef.current.signal
+
+  const apiClient = useAPIClient()
+  const trailsClient = useTrailsClient()
+  const { getRelayer } = useRelayers({
+    env: relayerEnv || (getSequenceEnv() as RelayerEnv),
+  })
+  const indexerGatewayClient = useIndexerGatewayClient()
+
+  const { supportedTokens } = useSupportedTokens()
+
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: [
+      "quote",
+      fromTokenAddress,
+      fromChainId,
+      toTokenAddress,
+      toChainId,
+      swapAmount?.toString(),
+      toRecipient,
+      toCalldata,
+      tradeType,
+      slippageTolerance,
+      quoteProvider,
+    ],
+    queryFn: async () => {
+      try {
+        // Reset the abort controller for new queries to ensure fresh state
+        if (abortControllerRef.current.signal.aborted) {
+          logger.console.log(
+            "[trails-sdk] Resetting aborted controller for new query",
+          )
+          abortControllerRef.current = new AbortController()
+        }
+
+        if (
+          !walletClient ||
+          !apiClient ||
+          !trailsClient ||
+          !fromTokenAddress ||
+          !toTokenAddress ||
+          !swapAmount ||
+          !toRecipient ||
+          !fromChainId ||
+          !toChainId ||
+          !indexerGatewayClient
+        ) {
+          return null
+        }
+
+        // Get token balance using async method
+        const { balances } = await getTokenBalancesWithPrices({
+          account: walletClient.account!.address,
+          indexerGatewayClient,
+          apiClient,
+        })
+
+        const originTokenBalance = balances.find(
+          (b) =>
+            b.chainId === fromChainId &&
+            (b.contractAddress?.toLowerCase() ===
+              fromTokenAddress.toLowerCase() ||
+              (!b.contractAddress && fromTokenAddress === zeroAddress)),
+        )
+
+        const originTokenBalanceAmount = originTokenBalance?.balance ?? "0"
+        const destinationRelayer = getRelayer(toChainId)
+        const originRelayer = getRelayer(fromChainId)
+
+        // Note: Disable this check for now to allow fetching a quote even when the origin balance is zero
+        // if (originTokenBalanceAmount === "0") {
+        //   return null
+        // }
+
+        // logger.console.log("supportedTokens", supportedTokens)
+
+        const originToken = supportedTokens?.find(
+          (token) =>
+            token.contractAddress?.toLowerCase() ===
+              fromTokenAddress?.toLowerCase() && token.chainId === fromChainId,
+        )
+        const destinationToken = supportedTokens?.find(
+          (token) =>
+            token.contractAddress?.toLowerCase() ===
+              toTokenAddress?.toLowerCase() && token.chainId === toChainId,
+        )
+
+        const sourceTokenDecimals = originToken?.decimals
+        if (!sourceTokenDecimals) {
+          logger.console.error(
+            "[trails-sdk] [useQuote] Missing source token decimals:",
+            {
+              originToken,
+              fromTokenAddress,
+              fromChainId,
+            },
+          )
+          throw new Error("Source token decimals not found")
+        }
+        const destinationTokenDecimals = destinationToken?.decimals
+        if (!destinationTokenDecimals) {
+          logger.console.error(
+            "[trails-sdk] Missing destination token decimals:",
+            {
+              destinationToken,
+              toTokenAddress,
+              toChainId,
+            },
+          )
+          throw new Error("Destination token decimals not found")
+        }
+        const destinationTokenSymbol = destinationToken?.symbol ?? ""
+        const originTokenSymbol = originToken?.symbol ?? ""
+
+        const options = {
+          account: walletClient.account!,
+          originTokenAddress: fromTokenAddress,
+          originChainId: fromChainId,
+          originTokenBalance: originTokenBalanceAmount,
+          destinationChainId: toChainId,
+          recipient: toRecipient,
+          destinationTokenAddress: toTokenAddress,
+          swapAmount: swapAmount.toString(),
+          tradeType: tradeType ?? TradeType.EXACT_OUTPUT,
+          originTokenSymbol: originTokenSymbol,
+          destinationTokenSymbol: destinationTokenSymbol,
+          destinationCalldata: toCalldata as string,
+          client: walletClient,
+          apiClient,
+          trailsClient,
+          originRelayer,
+          destinationRelayer,
+          sourceTokenDecimals,
+          destinationTokenDecimals,
+          fee: "0",
+          dryMode: false,
+          onTransactionStateChange: onStatusUpdate ?? (() => {}),
+          slippageTolerance: slippageTolerance?.toString(),
+          quoteProvider: quoteProvider,
+          gasless: gasless ?? false,
+          paymasterUrl: paymasterUrl,
+          selectedFeeToken: selectedFeeToken ?? undefined,
+          abortSignal: combinedAbortSignal,
+        }
+
+        logger.console.log("[trails-sdk] options", options)
+
+        const { quote: prepareSendQuote, send } = await prepareSend(options)
+
+        const quote = {
+          fromAmount: prepareSendQuote.originAmount,
+          toAmount: prepareSendQuote.destinationAmount,
+          fromAmountMin: prepareSendQuote.originAmountMin,
+          toAmountMin: prepareSendQuote.destinationAmountMin,
+          originToken: prepareSendQuote.originToken,
+          destinationToken: prepareSendQuote.destinationToken,
+          originChain: prepareSendQuote.originChain,
+          destinationChain: prepareSendQuote.destinationChain,
+          fees: prepareSendQuote.fees,
+          priceImpact: prepareSendQuote.priceImpact,
+          completionEstimateSeconds: prepareSendQuote.completionEstimateSeconds,
+          slippageTolerance: prepareSendQuote.slippageTolerance,
+          transactionStates: prepareSendQuote.transactionStates,
+          originTokenRate: prepareSendQuote.originTokenRate,
+          destinationTokenRate: prepareSendQuote.destinationTokenRate,
+          quoteProvider: prepareSendQuote.quoteProvider,
+          fromAmountUsdDisplay:
+            prepareSendQuote.originAmountUsdDisplay ?? undefined,
+          toAmountUsdDisplay:
+            prepareSendQuote.destinationAmountUsdDisplay ?? undefined,
+          gasCostUsd: prepareSendQuote.gasCostUsd ?? undefined,
+          gasCostUsdDisplay: prepareSendQuote.gasCostUsdDisplay ?? undefined,
+          gasCost: prepareSendQuote.gasCost ?? undefined,
+          gasCostFormatted: prepareSendQuote.gasCostFormatted ?? undefined,
+        }
+
+        const swap = async (): Promise<SwapReturn> => {
+          const {
+            originUserTxReceipt,
+            destinationMetaTxnReceipt,
+            totalCompletionSeconds,
+          } = await send({
+            selectedFeeToken: selectedFeeToken ?? undefined,
+          })
+
+          return {
+            originTransaction: {
+              transactionHash: originUserTxReceipt?.transactionHash,
+              explorerUrl: getExplorerUrl({
+                txHash: originUserTxReceipt?.transactionHash as string,
+                chainId: fromChainId,
+              }),
+              receipt: originUserTxReceipt,
+            },
+            destinationTransaction: {
+              transactionHash: destinationMetaTxnReceipt?.txnHash,
+              explorerUrl: getExplorerUrl({
+                txHash: destinationMetaTxnReceipt?.txnHash as string,
+                chainId: toChainId,
+              }),
+              receipt: destinationMetaTxnReceipt,
+            },
+            totalCompletionSeconds,
+          }
+        }
+
+        return {
+          quote,
+          swap,
+        }
+      } catch (error) {
+        logger.console.error(
+          "[trails-sdk] [useQuote] Error getting quote:",
+          error,
+        )
+        throw getFullErrorMessage(error)
+      }
+    },
+    // Prevent unnecessary refetching
+    enabled: Boolean(
+      walletClient &&
+        apiClient &&
+        fromTokenAddress &&
+        toTokenAddress &&
+        swapAmount &&
+        toRecipient &&
+        fromChainId &&
+        toChainId &&
+        indexerGatewayClient,
+    ),
+    staleTime: 30 * 1000, // Consider data fresh for 30 seconds
+    refetchOnWindowFocus: false, // Don't refetch when window regains focus
+    refetchOnMount: false, // Don't refetch on component remount if data exists
+    refetchInterval: false, // Disable automatic polling
+    retry: 2, // Limit retry attempts
+    refetchOnReconnect: true, // Refetch when network reconnects
+  })
+
+  return {
+    quote: data?.quote || null,
+    swap: data?.swap || null,
+    isLoadingQuote: isLoading,
+    quoteError: error,
+    refetchQuote: () => refetch(),
+    abort: () => {
+      logger.console.log("[trails-sdk] useQuote abort() called")
+      logger.console.log(
+        "[trails-sdk] Active operations before abort:",
+        abortControllerRegistry.getAll(),
+      )
+
+      // Abort the internal abort controller
+      abortControllerRef.current.abort()
+
+      // Also abort all active polling operations in prepareSend
+      abortControllerRegistry.abortAll()
+
+      logger.console.log(
+        "[trails-sdk] Abort completed, active operations:",
+        abortControllerRegistry.getAll(),
+      )
+    },
+  }
+}

package/src/widget/hooks/useSendForm.ts

@@ -84,14 +84,14 @@ export type OnCompleteProps = {
 }
 
 export type UseSendProps = {
-  account: Account
+  account?: Account
   toAmount?: string
   toRecipient?: string
   toChainId?: number
   toToken?: string
   toCalldata?: string
   refundAddress?: string
-  walletClient: WalletClient
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (quote: PrepareSendQuote) => void
@@ -687,6 +687,7 @@ export function useSendForm({
   const getQuote = useCallback(async () => {
     // Only get quote if all required inputs are present
     if (
+      !account ||
       !amount ||
       !destinationTokenAddress ||
       !isValidRecipient ||
@@ -945,6 +946,7 @@ export function useSendForm({
     selectedToken?.chainId,
     selectedToken?.balance,
     selectedToken?.tokenPriceUsd,
+    recipient, // Add recipient to trigger quote re-fetch when it changes
     // selectedFeeToken is passed to send() at execution time, not needed here
   ])
 
@@ -958,7 +960,8 @@ export function useSendForm({
   }, [prepareSendResult, toAmountFormatted])
 
   const quotedDestinationAmountDisplay = useMemo(() => {
-    return formatAmountDisplay(quotedDestinationAmount || "0")
+    const formattedAmount = formatAmount(quotedDestinationAmount || 0)
+    return Number(formattedAmount) === 0 ? "0" : formattedAmount
   }, [quotedDestinationAmount])
 
   // Set raw fee options in the hook whenever prepareSendResult changes
@@ -1158,6 +1161,7 @@ export function useSendForm({
 
   // Get button text based on recipient and calldata
   const buttonText = useMemo(() => {
+    if (!account?.address) return "Connect your wallet"
     if (!selectedToken) return "Select a token"
     if (!amount) return "Enter an amount"
     if (!selectedDestToken?.symbol) return "Select a token"
@@ -1251,7 +1255,7 @@ export function useSendForm({
     amount,
     isValidRecipient,
     recipient,
-    account.address,
+    account?.address,
     selectedDestToken?.symbol,
     isWaitingForWalletConfirm,
     isSubmitting,