0xtrails 0.4.3 → 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"
@@ -40,8 +40,12 @@ import { etherlink } from "viem/chains"
 import { logger } from "../../logger.js"
 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
@@ -117,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
@@ -152,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
@@ -163,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
@@ -433,6 +426,7 @@ export function useSendForm({
   }, [selectedDestToken, defaultDestToken])
 
   const trailsClient = useTrailsClient()
+  const { trailsApiKey, sequenceIndexerUrl } = useTrails()
 
   // Get user's token balances for balance checking
   const { filteredTokensFormatted } = useTokenList({
@@ -545,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[]) => {
@@ -583,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] =
@@ -684,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
@@ -713,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)
@@ -733,6 +766,8 @@ export function useSendForm({
           tradeType,
         })
         setPrepareSendResult(null)
+        preparedQuoteFingerprintRef.current = null
+        latestResolvedIntentIdRef.current = null
         setIsLoadingQuote(false)
         return
       }
@@ -847,30 +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,
@@ -879,6 +950,7 @@ export function useSendForm({
     selectedDestToken?.decimals,
     recipient,
     destinationTokenAddress,
+    sequenceIndexerUrl,
     selectedDestToken?.symbol,
     selectedDestinationChain?.id,
     selectedToken?.contractAddress,
@@ -900,8 +972,9 @@ export function useSendForm({
     amountRaw,
     checkoutOnHandlers,
     mode,
-    selectedFeeToken,
+    selectedFeeOption,
     walletId,
+    buildQuoteInputsFingerprint,
   ])
 
   // Auto-fetch quotes when inputs change (debounced)
@@ -913,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
@@ -932,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
@@ -967,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 {
@@ -981,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)
 
@@ -1059,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
@@ -1136,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) => {
@@ -1325,8 +1454,8 @@ export function useSendForm({
     setRecipientInput,
     setSelectedDestinationChain,
     setSelectedDestToken,
-    setSelectedFeeToken,
-    feeOptions,
+    setSelectedFeeOption,
+    processedFeeOptions,
     supportedTokens,
     supportedChains,
     ensAddress: ensAddress ?? null,
@@ -1336,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/index.tsx

@@ -5,3 +5,11 @@ export {
   createModalController,
   TrailsWidget,
 } from "./widget.js"
+
+// Export config provider and hooks
+export {
+  TrailsProvider,
+  useTrails,
+  type TrailsConfig,
+  type SequenceEnv,
+} from "./providers/TrailsProvider.js"

package/src/widget/providers/TrailsProvider.tsx

@@ -0,0 +1,123 @@
+import { SequenceHooksProvider } from "@0xsequence/hooks"
+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_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
+  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 }: TrailsProviderProps) => {
+  // Populate the trails config with default values if not provided
+  const trailsConfig: TrailsConfig = useMemo(() => {
+    return {
+      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) || getQueryParam("debug") === "true",
+      commitHash: declareCommitHash(),
+    } satisfies TrailsConfig
+  }, [
+    config.trailsApiKey,
+    config.trailsApiUrl,
+    config.sequenceIndexerUrl,
+    config.sequenceMetadataUrl,
+    config.sequenceNodeGatewayUrl,
+    config.walletConnectProjectId,
+    config.slippageTolerance,
+    config.debug,
+  ])
+
+  // 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 || "",
+      env: {
+        apiUrl: trailsConfig.trailsApiUrl,
+        indexerUrl: trailsConfig.sequenceIndexerUrl,
+        indexerGatewayUrl: trailsConfig.sequenceIndexerUrl,
+      },
+    } satisfies ComponentProps<typeof SequenceHooksProvider>["config"]
+  }, [trailsConfig])
+
+  logger.console.log("sequenceHooksConfig", sequenceHooksConfig)
+
+  return (
+    <TrailsContext.Provider value={trailsConfig}>
+      <SequenceHooksProvider config={sequenceHooksConfig}>
+        {children}
+      </SequenceHooksProvider>
+    </TrailsContext.Provider>
+  )
+}
+
+export const useTrails = (): Readonly<TrailsConfig> => {
+  const context = useContext(TrailsContext)
+
+  if (!context) {
+    throw new Error("useTrails must be used within a TrailsProvider")
+  }
+
+  return context
+}