0xtrails 0.2.5 → 0.3.0

package/src/widget/hooks/useDefaultTokenSelection.tsx

@@ -462,28 +462,34 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
 
       const decimals = destToken?.decimals
       if (!decimals) {
-        throw new Error("Decimals not found")
-      }
-
-      destinationToken = destToken
-        ? {
-            id: destToken.chainId,
-            name: destToken.name,
-            symbol: destToken.symbol,
-            balance: "0", // Destination token doesn't have balance yet
-            imageUrl: destToken.imageUrl || "",
-            chainId: destToken.chainId,
-            contractAddress: destToken.contractAddress || zeroAddress,
-            balanceUsdFormatted: "0",
-            tokenPriceUsd: 0,
-            decimals, // Top-level decimals
-            contractInfo: {
-              decimals,
-              symbol: destToken.symbol,
+        logger.console.warn(
+          "[trails-sdk] Missing decimals for destination token, skipping:",
+          {
+            token: destToken,
+          },
+        )
+        destinationToken = null
+      } else {
+        destinationToken = destToken
+          ? {
+              id: destToken.chainId,
               name: destToken.name,
-            },
-          }
-        : null
+              symbol: destToken.symbol,
+              balance: "0", // Destination token doesn't have balance yet
+              imageUrl: destToken.imageUrl || "",
+              chainId: destToken.chainId,
+              contractAddress: destToken.contractAddress || zeroAddress,
+              balanceUsdFormatted: "0",
+              tokenPriceUsd: 0,
+              decimals, // Top-level decimals
+              contractInfo: {
+                decimals,
+                symbol: destToken.symbol,
+                name: destToken.name,
+              },
+            }
+          : null
+      }
     }
 
     logger.console.log("[trails-sdk] Default token selection:", {

package/src/widget/hooks/useQuote.ts

@@ -0,0 +1,466 @@
+import { useQuery } from "@tanstack/react-query"
+import { useRef } from "react"
+import type { TransactionReceipt } from "viem"
+import { zeroAddress } from "viem"
+import { useIndexerGatewayClient } from "../../indexerClient.js"
+import { getTokenBalancesWithPrices } from "../../tokenBalances.js"
+import { logger } from "../../logger.js"
+import { useSupportedTokens } from "../../tokens.js"
+import { useTrailsClient } from "../../trailsClient.js"
+import { getExplorerUrl } from "../../explorer.js"
+import { getFullErrorMessage, getPrettifiedErrorMessage } from "../../error.js"
+import { prepareSend } from "../../prepareSend.js"
+import { abortControllerRegistry } from "../../abortController.js"
+import { TradeType } from "../../prepareSend.js"
+import { getChainInfo } from "../../chains.js"
+import type { MetaTxnReceipt } from "../../transactionIntent/types.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 { SequenceEnv } from "../../config.js"
+import { getTokenPrice } from "../../prices.js"
+import { useCommitIntent, useExecuteIntent } from "../../mutations.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
+  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
+  quoteErrorPrettified: string
+  refetchQuote: () => void
+  abort: () => void
+}
+
+// TODO: consolidate useSendForm, prepareSend, and useQuote hooks into a single hook
+export function useQuote({
+  walletClient,
+  fromTokenAddress,
+  fromChainId,
+  toTokenAddress,
+  toChainId,
+  swapAmount,
+  tradeType,
+  toRecipient,
+  toCalldata,
+  slippageTolerance,
+  onStatusUpdate,
+  quoteProvider,
+  paymasterUrl,
+  selectedFeeToken,
+  nodeGatewayEnv,
+  abortSignal: externalAbortSignal,
+}: Partial<
+  UseQuoteProps & { 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 trailsClient = useTrailsClient()
+  const indexerGatewayClient = useIndexerGatewayClient()
+
+  const { supportedTokens } = useSupportedTokens()
+
+  // Get mutation hooks for passing to prepareSend
+  const commitIntentMutation = useCommitIntent()
+  const executeIntentMutation = useExecuteIntent()
+
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: [
+      "prepareSend",
+      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 ||
+          !trailsClient ||
+          !fromTokenAddress ||
+          !toTokenAddress ||
+          !swapAmount ||
+          !toRecipient ||
+          !fromChainId ||
+          !toChainId ||
+          !indexerGatewayClient
+        ) {
+          return null
+        }
+
+        // Get token balance using async method
+        let balances: any[] = []
+        try {
+          const result = await getTokenBalancesWithPrices({
+            account: walletClient.account!.address,
+            indexerGatewayClient,
+            trailsClient,
+          })
+          balances = result.balances
+        } catch (balanceError) {
+          const balanceErrorMessage = getFullErrorMessage(balanceError)
+          const isCorsError =
+            balanceErrorMessage.includes("Cross-Origin") ||
+            balanceErrorMessage.includes("CORS") ||
+            balanceErrorMessage.includes("Same Origin Policy")
+          const isNetworkError =
+            balanceErrorMessage.includes("fetch failed") ||
+            balanceErrorMessage.includes("network")
+
+          if (isCorsError || isNetworkError) {
+            logger.console.warn(
+              "[trails-sdk] [useQuote] Network or CORS error fetching balances, proceeding with quote using zero balance:",
+              {
+                error: balanceErrorMessage,
+                account: walletClient.account!.address,
+              },
+            )
+            // Continue with empty balances instead of crashing
+            balances = []
+          } else {
+            throw balanceError
+          }
+        }
+
+        const originTokenBalance = balances.find(
+          (b) =>
+            b.chainId === fromChainId &&
+            (b.contractAddress?.toLowerCase() ===
+              fromTokenAddress.toLowerCase() ||
+              (!b.contractAddress && fromTokenAddress === zeroAddress)),
+        )
+
+        const originTokenBalanceAmount = originTokenBalance?.balance ?? "0"
+
+        // 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)
+
+        // Get native token price for origin chain (for gas cost calculation)
+        let originNativeTokenPriceUsd = 0
+        try {
+          const originChain = getChainInfo(fromChainId)
+          const nativeTokenSymbol = originChain?.nativeCurrency?.symbol ?? ""
+          if (nativeTokenSymbol) {
+            const nativePrice = await getTokenPrice(trailsClient, {
+              tokenSymbol: nativeTokenSymbol,
+              tokenAddress: zeroAddress,
+              chainId: fromChainId,
+            })
+            originNativeTokenPriceUsd = nativePrice?.priceUsd ?? 0
+            logger.console.log(
+              "[trails-sdk] [useQuote] Origin native token price:",
+              {
+                chainId: fromChainId,
+                symbol: nativeTokenSymbol,
+                priceUsd: originNativeTokenPriceUsd,
+              },
+            )
+          }
+        } catch (error) {
+          logger.console.error(
+            "[trails-sdk] [useQuote] Error getting origin native token price:",
+            error,
+          )
+        }
+
+        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,
+          trailsClient,
+          sourceTokenDecimals,
+          destinationTokenDecimals,
+          fee: "0",
+          dryMode: false,
+          onTransactionStateChange: onStatusUpdate ?? (() => {}),
+          slippageTolerance: slippageTolerance?.toString(),
+          quoteProvider: quoteProvider,
+          paymasterUrl: paymasterUrl,
+          selectedFeeToken: selectedFeeToken ?? undefined,
+          abortSignal: combinedAbortSignal,
+          originNativeTokenPriceUsd: originNativeTokenPriceUsd,
+          commitIntentFn: commitIntentMutation.mutateAsync,
+          executeIntentFn: executeIntentMutation.mutateAsync,
+        }
+
+        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 {
+            depositUserTxnReceipt,
+            destinationMetaTxnReceipt,
+            totalCompletionSeconds,
+          } = await send({
+            selectedFeeToken: selectedFeeToken ?? undefined,
+          })
+
+          return {
+            originTransaction: {
+              transactionHash: depositUserTxnReceipt?.transactionHash,
+              explorerUrl: getExplorerUrl({
+                txHash: depositUserTxnReceipt?.transactionHash as string,
+                chainId: fromChainId,
+              }),
+              receipt: depositUserTxnReceipt,
+            },
+            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 &&
+        trailsClient &&
+        fromTokenAddress &&
+        toTokenAddress &&
+        swapAmount &&
+        toRecipient &&
+        fromChainId &&
+        toChainId &&
+        indexerGatewayClient &&
+        // !isLoadingTokens &&
+        supportedTokens &&
+        supportedTokens.length > 0,
+    ),
+    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,
+    quoteErrorPrettified: getPrettifiedErrorMessage(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/useSelectedFeeToken.tsx

@@ -8,7 +8,19 @@ import React, {
   type ReactNode,
 } from "react"
 import { logger } from "../../logger.js"
-import { zeroAddress } from "viem"
+import { ethAddress, zeroAddress } from "viem"
+import { formatUsdAmountDisplay } from "../../tokenBalances.js"
+
+const ZERO_ADDRESS = zeroAddress.toLowerCase()
+const ETH_ADDRESS = ethAddress.toLowerCase()
+
+const normalizeAddress = (address?: string | null): string =>
+  (address ?? "").toLowerCase()
+
+const isNativeTokenAddress = (address?: string | null): boolean => {
+  const normalized = normalizeAddress(address)
+  return normalized === ZERO_ADDRESS || normalized === ETH_ADDRESS
+}
 
 // Define the FeeOption interface with balance check properties
 export interface FeeOption {
@@ -20,6 +32,7 @@ export interface FeeOption {
   notEnoughBalance?: boolean
   tokenImageUrl?: string
   chainId?: number
+  amountUsdDisplay?: string // Formatted USD display like "≈ $0.39"
 }
 
 // Token type with balance information
@@ -113,13 +126,14 @@ export const SelectedFeeTokenProvider: React.FC<
 
     // Add balance check and additional properties to each fee option
     const feeOptionsWithBalanceCheck = rawFeeOptions.map((option: any) => {
-      // For native token (zero address), check if user has enough native balance
-      if (option.tokenAddress === zeroAddress) {
+      // For native token (zero/ETH address), check if user has enough native balance
+      if (isNativeTokenAddress(option.tokenAddress)) {
         // Find the native token balance for the origin chain
         const nativeTokenInfo = availableTokens.find(
           (token) =>
-            token.contractAddress?.toLowerCase() ===
-              zeroAddress.toLowerCase() && token.chainId === originTokenChainId,
+            token.chainId === originTokenChainId &&
+            (isNativeTokenAddress(token.contractAddress) ||
+              !token.contractAddress),
         )
 
         const nativeBalance = nativeTokenInfo?.balance || "0"
@@ -131,6 +145,8 @@ export const SelectedFeeTokenProvider: React.FC<
           notEnoughBalance,
           tokenImageUrl: nativeTokenInfo?.imageUrl,
           chainId: originTokenChainId, // Native token is on the same chain as origin
+          amountUsdDisplay: formatUsdAmountDisplay(option.amountUsd),
+          amountUSD: option.amountUsd, // Normalize to uppercase for consistency
         }
       }
 
@@ -152,6 +168,8 @@ export const SelectedFeeTokenProvider: React.FC<
           notEnoughBalance,
           tokenImageUrl: userTokenBalance.imageUrl,
           chainId: userTokenBalance.chainId, // Use the actual token's chain ID
+          amountUsdDisplay: formatUsdAmountDisplay(option.amountUsd),
+          amountUSD: option.amountUsd, // Normalize to uppercase for consistency
         }
       }
 
@@ -161,6 +179,8 @@ export const SelectedFeeTokenProvider: React.FC<
         notEnoughBalance: true,
         tokenImageUrl: undefined,
         chainId: originTokenChainId, // Fallback to origin chain
+        amountUsdDisplay: formatUsdAmountDisplay(option.amountUsd),
+        amountUSD: option.amountUsd, // Normalize to uppercase for consistency
       }
     })
 
@@ -184,36 +204,17 @@ export const SelectedFeeTokenProvider: React.FC<
     return sortedFeeOptions
   }, [rawFeeOptions, originTokenChainId, availableTokens])
 
-  // Auto-select first fee option with sufficient balance (non-native token)
-  // Only auto-select on initial load, not when user explicitly chooses native gas
-  // If no ERC20 fee options are available, selectedFeeToken stays null (native gas)
+  // Auto-select first ERC20 fee option with sufficient balance
+  // Only auto-select if user hasn't made an explicit selection yet
   useEffect(() => {
-    logger.console.log(
-      "[trails-sdk] [FEE-SELECT] Auto-selection useEffect triggered:",
-      {
-        processedFeeOptionsLength: processedFeeOptions.length,
-        hasUserSelectedFeeOption,
-        selectedFeeToken,
-        willAutoSelect:
-          processedFeeOptions.length > 0 &&
-          !hasUserSelectedFeeOption &&
-          !selectedFeeToken,
-      },
-    )
-
-    // Only auto-select if:
-    // 1. We have fee options
-    // 2. User hasn't made an explicit selection yet
-    // 3. No fee token is currently selected
     if (
       processedFeeOptions.length > 0 &&
       !hasUserSelectedFeeOption &&
       !selectedFeeToken
     ) {
-      // Find first non-native token option with sufficient balance
+      // Find first token option with sufficient balance
       const firstValidOption = processedFeeOptions.find(
-        (option: FeeOption) =>
-          option.tokenAddress !== zeroAddress && !option.notEnoughBalance,
+        (option: FeeOption) => !option.notEnoughBalance,
       )
 
       if (firstValidOption) {
@@ -221,20 +222,14 @@ export const SelectedFeeTokenProvider: React.FC<
           "[trails-sdk] [FEE-SELECT] Auto-selecting first valid fee option:",
           firstValidOption,
         )
-        // Strip extra fields to match the format expected by prepareSend
-        const cleanOption: FeeOption = {
+        // Use internal setter to avoid marking as user selection
+        setSelectedFeeTokenInternal({
           tokenAddress: firstValidOption.tokenAddress,
           tokenSymbol: firstValidOption.tokenSymbol,
           tokenDecimals: firstValidOption.tokenDecimals,
           amount: firstValidOption.amount,
           amountUSD: firstValidOption.amountUSD,
-        }
-        // Use internal setter to avoid marking as user selection
-        setSelectedFeeTokenInternal(cleanOption)
-      } else {
-        logger.console.log(
-          "[trails-sdk] [FEE-SELECT] No valid ERC20 fee options available, will use native gas",
-        )
+        })
       }
     }
   }, [