0xtrails 0.5.0 → 0.6.0

package/src/widget/hooks/useSendForm.ts

@@ -1,4 +1,5 @@
-import type { TokenPrice } from "@0xsequence/trails-api"
+import type { TokenPrice, FeeOption } from "@0xsequence/trails-api"
+import { JsonEncode } from "@0xsequence/trails-api"
 import type React from "react"
 import { useCallback, useEffect, useMemo, useState, useRef } from "react"
 import {
@@ -17,7 +18,6 @@ import {
   TradeType,
   type PrepareSendReturn,
   type PrepareSendQuote,
-  type SelectedFeeToken,
 } from "../../prepareSend.js"
 import type { TransactionState } from "../../transactions.js"
 import { getTokenPrice, useTokenPrices, normalizeNumber } from "../../prices.js"
@@ -42,7 +42,10 @@ import { getIsContract } from "../../contractUtils.js"
 import { useTrailsClient } from "../../trailsClient.js"
 import { useTrails } from "../providers/TrailsProvider.js"
 import { useTokenList } from "./useTokenList.js"
-import { useSelectedFeeToken } from "./useSelectedFeeToken.js"
+import {
+  useSelectedFeeOption,
+  type ProcessedFeeOption,
+} from "./useSelectedFeeOption.js"
 
 export interface Token {
   id: number
@@ -118,17 +121,6 @@ export type UseSendProps = {
   refetchTrigger?: number
 }
 
-export type FeeOption = {
-  tokenAddress: string
-  tokenSymbol: string
-  tokenDecimals: number
-  amount: string
-  amountUSD: number
-  notEnoughBalance?: boolean
-  tokenImageUrl?: string
-  chainId?: number
-}
-
 export type UseSendReturn = {
   amount: string
   amountRaw: string
@@ -153,8 +145,8 @@ export type UseSendReturn = {
   setRecipientInput: (recipientInput: string) => void
   setSelectedDestinationChain: (chain: ChainInfo) => void
   setSelectedDestToken: (token: TokenInfo) => void
-  setSelectedFeeToken: (token: FeeOption) => void
-  feeOptions: FeeOption[]
+  setSelectedFeeOption: (token: FeeOption | null) => void
+  processedFeeOptions: ProcessedFeeOption[]
   supportedTokens: SupportedToken[]
   supportedChains: ChainInfo[]
   ensAddress: string | null
@@ -164,7 +156,7 @@ export type UseSendReturn = {
   destTokenPrices: TokenPrice[] | null
   sourceTokenPrices: TokenPrice[] | null
   selectedToken?: Token
-  selectedFeeToken: SelectedFeeToken | null
+  selectedFeeOption: FeeOption | null
   setIsChainDropdownOpen: (isOpen: boolean) => void
   setIsTokenDropdownOpen: (isOpen: boolean) => void
   toAmountFormatted: string
@@ -434,7 +426,7 @@ export function useSendForm({
   }, [selectedDestToken, defaultDestToken])
 
   const trailsClient = useTrailsClient()
-  const { sequenceIndexerUrl } = useTrails()
+  const { trailsApiKey, sequenceIndexerUrl } = useTrails()
 
   // Get user's token balances for balance checking
   const { filteredTokensFormatted } = useTokenList({
@@ -547,6 +539,10 @@ export function useSendForm({
   const [isLoadingQuote, setIsLoadingQuote] = useState(false)
   const [prepareSendResult, setPrepareSendResult] =
     useState<PrepareSendReturn | null>(null)
+  const latestResolvedIntentIdRef = useRef<string | null>(null)
+  const quoteInputsFingerprintRef = useRef<string | null>(null)
+  const preparedQuoteFingerprintRef = useRef<string | null>(null)
+
   // Create a stable callback for transaction state changes
   const handleTransactionStateChange = useCallback(
     (transactionStates: TransactionState[]) => {
@@ -585,11 +581,11 @@ export function useSendForm({
 
   // Use the fee token selection hook
   const {
-    selectedFeeToken,
-    setSelectedFeeToken,
-    processedFeeOptions: feeOptions,
-    setRawFeeOptions,
-  } = useSelectedFeeToken()
+    selectedFeeOption,
+    setSelectedFeeOption,
+    processedFeeOptions,
+    setFeeOptions,
+  } = useSelectedFeeOption()
 
   const [isRecipientContract, setIsRecipientContract] = useState(false)
   const [isSenderContractOnOrigin, setIsSenderContractOnOrigin] =
@@ -686,6 +682,34 @@ export function useSendForm({
     tradeType,
   ])
 
+  const buildQuoteInputsFingerprint = useCallback(
+    () =>
+      JSON.stringify({
+        originTokenAddress: selectedToken?.contractAddress?.toLowerCase() ?? "",
+        originChainId: selectedToken?.chainId ?? "",
+        destinationTokenSymbol: selectedDestToken?.symbol ?? "",
+        destinationChainId: selectedDestinationChain?.id ?? "",
+        destinationTokenAddress: destinationTokenAddress?.toLowerCase() ?? "",
+        amount: amount || "",
+        amountRaw: amountRaw || "",
+        recipient: recipient?.toLowerCase() ?? "",
+        tradeType,
+        toCalldata: toCalldata ?? "",
+      }),
+    [
+      amount,
+      amountRaw,
+      destinationTokenAddress,
+      recipient,
+      selectedDestinationChain?.id,
+      selectedDestToken?.symbol,
+      selectedToken?.chainId,
+      selectedToken?.contractAddress,
+      toCalldata,
+      tradeType,
+    ],
+  )
+
   // Get quote automatically when inputs change
   const getQuote = useCallback(async () => {
     // Only get quote if all required inputs are present
@@ -715,9 +739,16 @@ export function useSendForm({
       )
       setQuoteError(null)
       setPrepareSendResult(null)
+      preparedQuoteFingerprintRef.current = null
       return
     }
 
+    latestResolvedIntentIdRef.current = null
+    let requestFingerprint = quoteInputsFingerprintRef.current
+    if (!requestFingerprint) {
+      requestFingerprint = buildQuoteInputsFingerprint()
+      quoteInputsFingerprintRef.current = requestFingerprint
+    }
     try {
       setIsLoadingQuote(true)
       setError(null)
@@ -735,6 +766,8 @@ export function useSendForm({
           tradeType,
         })
         setPrepareSendResult(null)
+        preparedQuoteFingerprintRef.current = null
+        latestResolvedIntentIdRef.current = null
         setIsLoadingQuote(false)
         return
       }
@@ -849,31 +882,66 @@ export function useSendForm({
         mode,
         fundMethod,
         checkoutOnHandlers,
-        selectedFeeToken: selectedFeeToken ?? undefined,
+        selectedFeeOption: selectedFeeOption ?? null,
         walletId,
         sequenceIndexerUrl,
+        sequenceProjectAccessKey: trailsApiKey,
       }
 
       logger.console.log(
-        "[trails-sdk] [FEE-SELECT] getQuote using selectedFeeToken:",
+        "[trails-sdk] [FEE-SELECT] getQuote using selectedFeeOption:",
         {
-          selectedFeeToken,
+          selectedFeeOption,
         },
       )
 
       const result = await prepareSend(options)
 
+      if (requestFingerprint !== quoteInputsFingerprintRef.current) {
+        logger.console.log(
+          "[trails-sdk] Ignoring stale quote result (fingerprint mismatch)",
+          {
+            requestFingerprint,
+            currentFingerprint: quoteInputsFingerprintRef.current,
+          },
+        )
+        return
+      }
+
       logger.console.log("[trails-sdk] prepareSend quote:", result.quote)
 
+      // Track the intentId returned by the most recent quote so we never execute a stale CommitIntent
+      // even when the quote inputs (fingerprint) are identical between retries.
+      const quoteIntentId = result.quote.intentId ?? null
+
+      logger.console.log("[trails-sdk] Resolved quote intentId:", quoteIntentId)
+
+      latestResolvedIntentIdRef.current = quoteIntentId
       setPrepareSendResult(result)
+      preparedQuoteFingerprintRef.current = requestFingerprint
       setIsLoadingQuote(false)
     } catch (error) {
+      if (requestFingerprint !== quoteInputsFingerprintRef.current) {
+        logger.console.log(
+          "[trails-sdk] Ignoring quote error (fingerprint mismatch)",
+          {
+            requestFingerprint,
+            currentFingerprint: quoteInputsFingerprintRef.current,
+          },
+        )
+        return
+      }
+
       logger.console.error("[trails-sdk] Error getting quote:", error)
-      setQuoteError(getFullErrorMessage(error))
+      const errorMessage = getFullErrorMessage(error)
+      setQuoteError(errorMessage)
       setPrepareSendResult(null)
+      preparedQuoteFingerprintRef.current = null
+      latestResolvedIntentIdRef.current = null
       setIsLoadingQuote(false)
     }
   }, [
+    trailsApiKey,
     tradeType,
     isDryMode,
     account,
@@ -904,8 +972,9 @@ export function useSendForm({
     amountRaw,
     checkoutOnHandlers,
     mode,
-    selectedFeeToken,
+    selectedFeeOption,
     walletId,
+    buildQuoteInputsFingerprint,
   ])
 
   // Auto-fetch quotes when inputs change (debounced)
@@ -917,12 +986,29 @@ export function useSendForm({
       !destinationTokenAddress ||
       !isValidRecipient ||
       !selectedDestToken?.symbol ||
-      !selectedDestinationChain?.id
+      !selectedDestinationChain?.id ||
+      !selectedToken
     ) {
       setPrepareSendResult(null)
+      latestResolvedIntentIdRef.current = null
+      quoteInputsFingerprintRef.current = null
+      preparedQuoteFingerprintRef.current = null
+      setIsLoadingQuote(false)
       return
     }
 
+    const nextQuoteInputsFingerprint = buildQuoteInputsFingerprint()
+
+    // Fingerprint all quote-driving inputs so we can invalidate debounced quotes immediately when
+    // the user switches tokens; this fixes the stale quote so that it stays loading until the new quote is ready.
+    if (quoteInputsFingerprintRef.current !== nextQuoteInputsFingerprint) {
+      quoteInputsFingerprintRef.current = nextQuoteInputsFingerprint
+      latestResolvedIntentIdRef.current = null
+      setPrepareSendResult(null)
+      preparedQuoteFingerprintRef.current = null
+      setIsLoadingQuote(true)
+    }
+
     const timeoutId = setTimeout(() => {
       getQuote()
     }, 500) // Debounce by 500ms
@@ -936,12 +1022,15 @@ export function useSendForm({
     selectedDestinationChain?.id,
     toCalldata,
     refetchTrigger,
+    amountRaw,
+    tradeType,
     selectedToken?.contractAddress,
     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
+    // selectedFeeOption is passed to send() at execution time, not needed here
+    buildQuoteInputsFingerprint,
   ])
 
   // Calculate destination amount from quote if available
@@ -971,12 +1060,12 @@ export function useSendForm({
       },
     )
 
-    setRawFeeOptions(
+    setFeeOptions(
       apiFeeOptions,
       selectedToken?.chainId,
       filteredTokensFormattedRef.current,
     )
-  }, [prepareSendResult, selectedToken?.chainId, setRawFeeOptions])
+  }, [prepareSendResult, selectedToken?.chainId, setFeeOptions])
 
   const processSend = useCallback(async () => {
     try {
@@ -985,6 +1074,41 @@ export function useSendForm({
         return
       }
 
+      const currentQuoteInputsFingerprint = buildQuoteInputsFingerprint()
+      if (
+        !preparedQuoteFingerprintRef.current ||
+        preparedQuoteFingerprintRef.current !== currentQuoteInputsFingerprint
+      ) {
+        logger.console.warn(
+          "[trails-sdk] Blocking send because quote fingerprint is stale",
+          {
+            prepared: preparedQuoteFingerprintRef.current,
+            current: currentQuoteInputsFingerprint,
+          },
+        )
+        setPrepareSendResult(null)
+        preparedQuoteFingerprintRef.current = null
+        latestResolvedIntentIdRef.current = null
+        setIsLoadingQuote(true)
+        return
+      }
+
+      const quoteIntentId = prepareSendResult.quote.intentId ?? null
+      if (
+        quoteIntentId &&
+        latestResolvedIntentIdRef.current !== quoteIntentId
+      ) {
+        logger.console.error(
+          "[trails-sdk] Quote intentId has changed, waiting for latest quote",
+          {
+            current: latestResolvedIntentIdRef.current,
+            prepareSend: quoteIntentId,
+          },
+        )
+        setError("Quote is updating. Please wait for the latest quote.")
+        return
+      }
+
       setError(null)
       setIsSubmitting(true)
 
@@ -1063,28 +1187,28 @@ export function useSendForm({
           "[trails-sdk] [FEE-SELECT] [GASLESS-FLOW] handleSend called, about to call send()",
         )
         logger.console.log(
-          "[trails-sdk] [FEE-SELECT] [GASLESS-FLOW] selectedFeeToken value at send() call time:",
+          "[trails-sdk] [FEE-SELECT] [GASLESS-FLOW] selectedFeeOption value at send() call time:",
           {
-            selectedFeeToken,
-            isNull: selectedFeeToken === null,
-            isUndefined: selectedFeeToken === undefined,
-            type: typeof selectedFeeToken,
-            stringified: JSON.stringify(selectedFeeToken),
+            selectedFeeOption,
+            isNull: selectedFeeOption === null,
+            isUndefined: selectedFeeOption === undefined,
+            type: typeof selectedFeeOption,
+            stringified: JsonEncode(selectedFeeOption),
           },
         )
         // Wait for full send to complete
         const {
           depositUserTxnReceipt,
-          originMetaTxnReceipt,
-          destinationMetaTxnReceipt,
+          originIntentTransaction,
+          destinationIntentTransaction,
         } = await send({
           onOriginSend,
-          selectedFeeToken: selectedFeeToken ?? undefined, // Pass current value at execution time
+          selectedFeeOption: selectedFeeOption ?? null, // Pass current value at execution time
         })
         logger.console.log("[trails-sdk] send() completed, receipts:", {
           depositUserTxnReceipt,
-          originMetaTxnReceipt,
-          destinationMetaTxnReceipt,
+          originIntentTransaction,
+          destinationIntentTransaction,
         })
 
         // Move to receipt screen
@@ -1140,7 +1264,8 @@ export function useSendForm({
     onError,
     fundMethod,
     onNavigateToMeshConnect,
-    selectedFeeToken, // Include so handleSend captures latest value
+    selectedFeeOption, // Include so handleSend captures latest value
+    buildQuoteInputsFingerprint,
   ])
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -1329,8 +1454,8 @@ export function useSendForm({
     setRecipientInput,
     setSelectedDestinationChain,
     setSelectedDestToken,
-    setSelectedFeeToken,
-    feeOptions,
+    setSelectedFeeOption,
+    processedFeeOptions,
     supportedTokens,
     supportedChains,
     ensAddress: ensAddress ?? null,
@@ -1340,7 +1465,7 @@ export function useSendForm({
     destTokenPrices: destTokenPrices ?? null,
     sourceTokenPrices: sourceTokenPrices ?? null,
     selectedToken,
-    selectedFeeToken: selectedFeeToken ?? null,
+    selectedFeeOption: selectedFeeOption ?? null,
     setIsChainDropdownOpen,
     setIsTokenDropdownOpen,
     toAmountFormatted: quotedDestinationAmount,

package/src/widget/hooks/useTokenList.ts

@@ -15,7 +15,11 @@ import {
   useHasSufficientBalanceUsd,
   useTokenBalances,
 } from "../../tokenBalances.js"
-import { getFormatttedTokenName, useSupportedTokens } from "../../tokens.js"
+import {
+  getFormatttedTokenName,
+  useSupportedTokens,
+  useGetTokenImageUrl,
+} from "../../tokens.js"
 import { useIndexerGatewayClient } from "../../indexerClient.js"
 import { useTrailsClient } from "../../trailsClient.js"
 import { useTokenPrices } from "../../prices.js"
@@ -137,6 +141,7 @@ export function useTokenList({
   const { address } = useAccount()
   const indexerGatewayClient = useIndexerGatewayClient()
   const trailsClient = useTrailsClient()
+  const { getTokenImageUrl } = useGetTokenImageUrl()
   const {
     sortedTokens: allSortedTokens,
     isLoadingSortedTokens,
@@ -536,7 +541,14 @@ export function useTokenList({
         if (tokenSymbol === "WETH") {
           imageContractAddress = zeroAddress
         }
-        const imageUrl = `https://assets.sequence.info/images/tokens/small/${token.chainId}/${imageContractAddress}.webp`
+        const fallbackImageUrl =
+          (token as TokenBalanceWithPrice).contractInfo?.logoURI || ""
+        const imageUrl = getTokenImageUrl({
+          chainId: token.chainId,
+          contractAddress: imageContractAddress,
+          symbol: tokenSymbol,
+          fallbackImageUrl: fallbackImageUrl || undefined,
+        })
         const currentTokenName =
           (token as TokenBalanceWithPrice).contractInfo?.name || ""
         const tokenName = getFormatttedTokenName(
@@ -771,6 +783,7 @@ export function useTokenList({
     supportedTokens,
     supportedTokenPrices,
     searchQuery,
+    getTokenImageUrl,
   ])
 
   const showInsufficientBalance = useMemo(() => {

package/src/widget/providers/TrailsProvider.tsx

@@ -1,70 +1,98 @@
 import { SequenceHooksProvider } from "@0xsequence/hooks"
-import { createContext, useContext, useMemo } from "react"
+import { createContext, useContext, useMemo, useEffect } from "react"
 import type { ComponentProps } from "react"
 import {
   DEFAULT_SLIPPAGE_TOLERANCE,
   DEFAULT_WALLETCONNECT_PROJECT_ID,
   PROD_SEQUENCE_INDEXER_URL,
   PROD_SEQUENCE_NODE_GATEWAY_URL,
-  PROD_SEQUENCE_PROJECT_ACCESS_KEY,
+  PROD_SEQUENCE_METADATA_URL,
   PROD_TRAILS_API_URL,
 } from "../../constants.js"
+import {
+  declareCommitHash,
+  setGlobalDebug,
+  updateGlobalConfig,
+} from "../../config.js"
 import { logger } from "../../logger.js"
+import { getQueryParam } from "../../queryParams.js"
 
 export type SequenceEnv = "prod" | "dev" | "local" | "cors-anywhere"
 
 export interface TrailsConfig {
   trailsApiKey: string
-  trailsApiUrl?: string
-  sequenceIndexerUrl?: string
-  sequenceNodeGatewayUrl?: string
-  walletConnectProjectId?: string
-  slippageTolerance?: string | number
-  debug?: boolean
-  commitHash?: string
+  trailsApiUrl: string
+  sequenceIndexerUrl: string
+  sequenceNodeGatewayUrl: string
+  sequenceMetadataUrl: string
+  walletConnectProjectId: string
+  slippageTolerance: string | number
+  debug: boolean
+  commitHash: string | undefined
+}
+
+export interface TrailsProviderProps {
+  children: React.ReactNode
+  config: {
+    trailsApiKey: string
+    trailsApiUrl?: string
+    sequenceIndexerUrl?: string
+    sequenceNodeGatewayUrl?: string
+    sequenceMetadataUrl?: string
+    walletConnectProjectId?: string
+    slippageTolerance?: string | number
+    debug?: boolean
+  }
 }
 
 export const TrailsContext = createContext<TrailsConfig | null>(null)
 
-export const TrailsProvider = ({
-  children,
-  config = {
-    trailsApiKey: PROD_SEQUENCE_PROJECT_ACCESS_KEY,
-  },
-}: {
-  children: React.ReactNode
-  config?: TrailsConfig
-}) => {
+export const TrailsProvider = ({ children, config }: TrailsProviderProps) => {
   // Populate the trails config with default values if not provided
   const trailsConfig: TrailsConfig = useMemo(() => {
     return {
-      trailsApiKey: config.trailsApiKey || PROD_SEQUENCE_PROJECT_ACCESS_KEY,
+      trailsApiKey: config.trailsApiKey,
       trailsApiUrl: config.trailsApiUrl || PROD_TRAILS_API_URL,
       sequenceIndexerUrl:
         config.sequenceIndexerUrl || PROD_SEQUENCE_INDEXER_URL,
       sequenceNodeGatewayUrl:
         config.sequenceNodeGatewayUrl || PROD_SEQUENCE_NODE_GATEWAY_URL,
+      sequenceMetadataUrl:
+        config.sequenceMetadataUrl || PROD_SEQUENCE_METADATA_URL,
       walletConnectProjectId:
         config.walletConnectProjectId || DEFAULT_WALLETCONNECT_PROJECT_ID,
-      slippageTolerance: config.slippageTolerance || DEFAULT_SLIPPAGE_TOLERANCE,
-      debug: config.debug ?? false,
-      commitHash: config.commitHash,
+      slippageTolerance: config.slippageTolerance ?? DEFAULT_SLIPPAGE_TOLERANCE,
+      debug: (config.debug ?? false) || getQueryParam("debug") === "true",
+      commitHash: declareCommitHash(),
     } satisfies TrailsConfig
   }, [
     config.trailsApiKey,
     config.trailsApiUrl,
     config.sequenceIndexerUrl,
+    config.sequenceMetadataUrl,
     config.sequenceNodeGatewayUrl,
     config.walletConnectProjectId,
     config.slippageTolerance,
     config.debug,
-    config.commitHash,
   ])
 
+  // Set global debug mode for backward compatibility with getDebug()
+  useEffect(() => {
+    setGlobalDebug(trailsConfig.debug ?? false)
+  }, [trailsConfig.debug])
+
+  // Update global config when trails config changes (temporary solution)
+  useEffect(() => {
+    updateGlobalConfig({
+      trailsApiKey: trailsConfig.trailsApiKey,
+      sequenceNodeGatewayUrl: trailsConfig.sequenceNodeGatewayUrl,
+    })
+  }, [trailsConfig.trailsApiKey, trailsConfig.sequenceNodeGatewayUrl])
+
   // Create a sequence hooks config based on the trails config
   const sequenceHooksConfig = useMemo(() => {
     return {
-      projectAccessKey: trailsConfig.trailsApiKey,
+      projectAccessKey: trailsConfig.trailsApiKey || "",
       env: {
         apiUrl: trailsConfig.trailsApiUrl,
         indexerUrl: trailsConfig.sequenceIndexerUrl,
@@ -84,7 +112,7 @@ export const TrailsProvider = ({
   )
 }
 
-export const useTrails = () => {
+export const useTrails = (): Readonly<TrailsConfig> => {
   const context = useContext(TrailsContext)
 
   if (!context) {