0xtrails 0.2.4 → 0.2.6

package/src/widget/components/WalletConfirmation.tsx

@@ -1,9 +1,12 @@
 import { TokenImage } from "./TokenImage.js"
+import { ErrorAnimationIcon } from "./ErrorAnimationIcon.js"
 import { ChevronLeft } from "lucide-react"
 import type React from "react"
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { QuoteDetails } from "./QuoteDetails.js"
+import { WaasFeeOptions } from "./WaasFeeOptions.js"
+import { useAccount } from "wagmi"
 
 interface WalletConfirmationProps {
   onBack?: () => void
@@ -21,8 +24,13 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
 }) => {
   const [showContent, setShowContent] = useState(false)
   const [showTimeoutWarning, setShowTimeoutWarning] = useState(false)
+  const [isFeeOptionConfirmed, setIsFeeOptionConfirmed] = useState(false)
+  const [areFeeOptionsLoaded, setAreFeeOptionsLoaded] = useState(false)
+  const [feeOptionsError, setFeeOptionsError] = useState<boolean>(false)
+  const { connector } = useAccount()
 
   useEffect(() => {
+    setAreFeeOptionsLoaded(false)
     setShowContent(true)
   }, [])
 
@@ -39,6 +47,25 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
     return () => clearTimeout(timer)
   }, [retryEnabled])
 
+  const isSequenceWaas = useMemo(() => {
+    if (!connector) return false
+    const connectorName = connector.name?.toLowerCase() || ""
+    const connectorId = connector.id?.toLowerCase() || ""
+    const isSequenceWaas =
+      connectorName.includes("waas") ||
+      connectorId.includes("waas") ||
+      connectorId === "sequence-waas"
+
+    console.log("[trails-sdk] Sequence WaaS detection:", {
+      connectorName,
+      connectorId,
+      isSequenceWaas,
+      connector: connector.name,
+    })
+
+    return isSequenceWaas
+  }, [connector])
+
   return (
     <div className="space-y-6">
       <div className="flex items-center relative">
@@ -56,32 +83,67 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
           <div
             className={`mx-auto flex items-center justify-center transition-all duration-500 ease-out relative mb-4 ${showContent ? "transform -translate-y-8" : ""}`}
           >
-            {retryEnabled ? (
+            {feeOptionsError === true ? (
+              <ErrorAnimationIcon />
+            ) : retryEnabled ? (
               <div className={`h-24 w-24`} />
             ) : (
               <div className="animate-spin rounded-full h-24 w-24 border-solid border-b-2 border-blue-500 dark:border-blue-400" />
             )}
 
-            <div className="absolute">
-              <TokenImage
-                imageUrl={quote?.originToken.imageUrl}
-                symbol={quote?.originToken.symbol}
-                chainId={quote?.originChain.id}
-                size={64}
-              />
-            </div>
+            {!feeOptionsError && (
+              <div className="absolute">
+                <TokenImage
+                  imageUrl={quote?.originToken.imageUrl}
+                  symbol={quote?.originToken.symbol}
+                  chainId={quote?.originChain.id}
+                  contractAddress={quote?.originToken.contractAddress}
+                  size={64}
+                />
+              </div>
+            )}
           </div>
 
           <div
             className={`mb-2 transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
           >
             <h2 className="text-xl font-bold text-gray-900 dark:text-white">
-              {retryEnabled ? "Try again" : "Waiting for wallet…"}
+              {retryEnabled
+                ? "Try again"
+                : !isSequenceWaas
+                  ? "Waiting for wallet…"
+                  : isFeeOptionConfirmed
+                    ? "Waiting for wallet…"
+                    : areFeeOptionsLoaded
+                      ? "Waiting for fee selection…"
+                      : feeOptionsError
+                        ? "No fee token found"
+                        : "Waiting for fee options…"}
             </h2>
             <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
-              Please approve the request in your wallet
+              {!isSequenceWaas
+                ? "Please approve the request in your wallet"
+                : isFeeOptionConfirmed
+                  ? "Please approve the request in your wallet"
+                  : ""}
             </p>
           </div>
+
+          {isSequenceWaas && (
+            <div
+              className={`mb-2 mt-4 transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+            >
+              <WaasFeeOptions
+                chainId={quote?.originChain.id}
+                setIsFeeOptionConfirmed={setIsFeeOptionConfirmed}
+                setIsError={setFeeOptionsError}
+                onFeeOptionsLoaded={() => {
+                  console.log("[trails-sdk] Fee options loaded callback called")
+                  setAreFeeOptionsLoaded(true)
+                }}
+              />
+            </div>
+          )}
         </div>
 
         {/* Timeout Warning */}
@@ -92,7 +154,7 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
             <div className="p-4 trails-border-radius-container text-sm bg-yellow-50 border border-solid border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700/50">
               <div className="flex items-start space-x-3">
                 <svg
-                  className="w-5 h-5 mt-0.5 flex-shrink-0 text-yellow-600 dark:text-yellow-400"
+                  className="w-5 h-5 mt-0.5 shrink-0 text-yellow-600 dark:text-yellow-400"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -135,7 +197,7 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
         )}
 
         {/* Transaction Details */}
-        <QuoteDetails quote={quote} showContent={true} />
+        <QuoteDetails quote={quote} showContent={true} compact={true} />
       </div>
     </div>
   )

package/src/widget/components/WalletConnect.tsx

@@ -44,6 +44,7 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
   const { isConnected, address, connector } = useAccount()
   const [wcUri, setWcUri] = React.useState<string | null>(null)
   const [showUri, setShowUri] = React.useState(false)
+  const [copied, setCopied] = React.useState(false)
   const listenerRef = React.useRef<(() => void) | null>(null)
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
@@ -57,6 +58,21 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
       setWcUri(uri)
     }, 500) // 300ms debounce delay
   }, [])
+
+  // Copy URI to clipboard
+  const handleCopyUri = useCallback(async () => {
+    if (!wcUri) return
+    try {
+      await navigator.clipboard.writeText(wcUri)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      logger.console.error(
+        "[trails-sdk] [WalletConnect] Failed to copy URI",
+        err,
+      )
+    }
+  }, [wcUri])
   const isWalletConnectConnector = React.useMemo(() => {
     return connector?.name === "WalletConnect" && isConnected
   }, [connector, isConnected])
@@ -68,18 +84,13 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
     (c.id || "").toLowerCase().includes("walletconnect"),
   )
 
-  // Only auto-navigate back if we successfully connect a new wallet
+  // Only auto-navigate to home if we successfully connect a new wallet
   // Don't auto-navigate if user was already connected when they entered this screen
   useEffect(() => {
-    if (
-      isConnected &&
-      status === "success" &&
-      !wasConnectedOnMount.current &&
-      onBack
-    ) {
-      onBack()
+    if (isConnected && status === "success" && !wasConnectedOnMount.current) {
+      onContinue()
     }
-  }, [isConnected, status, onBack])
+  }, [isConnected, status, onContinue])
 
   const handleConnect = useCallback(
     async (force: boolean = false) => {
@@ -306,29 +317,82 @@ export const WalletConnectScreen: React.FC<WalletConnectProps> = ({
                       getWalletIcon("walletconnect")
                     }
                   />
-                  <button
-                    onClick={() => setShowUri(!showUri)}
-                    className="mt-2 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:underline cursor-pointer flex items-center gap-1"
-                  >
-                    {showUri ? "Hide URI" : "Show URI"}
-                    <svg
-                      className={`w-3 h-3 transition-transform ${showUri ? "rotate-180" : ""}`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
+                  <div className="flex items-center justify-center gap-2 mt-2">
+                    <button
+                      type="button"
+                      onClick={handleCopyUri}
+                      className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer flex items-center gap-1 hover:underline"
+                      title="Copy URI to clipboard"
                     >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
+                      {copied ? (
+                        <>
+                          <svg
+                            className="w-3 h-3"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            aria-hidden="true"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M5 13l4 4L19 7"
+                            />
+                          </svg>
+                          Copied!
+                        </>
+                      ) : (
+                        <>
+                          <svg
+                            className="w-3 h-3"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            aria-hidden="true"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                            />
+                          </svg>
+                          Copy URI
+                        </>
+                      )}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setShowUri(!showUri)}
+                      className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:underline cursor-pointer flex items-center gap-1"
+                    >
+                      {showUri ? "Hide URI" : "Show URI"}
+                      <svg
+                        className={`w-3 h-3 transition-transform ${showUri ? "rotate-180" : ""}`}
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 9l-7 7-7-7"
+                        />
+                      </svg>
+                    </button>
+                  </div>
                   {showUri && (
-                    <p className="mt-2 text-xs text-gray-600 dark:text-gray-400 break-all">
+                    <button
+                      type="button"
+                      className="mt-2 text-xs text-gray-600 dark:text-gray-400 break-all cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 p-2 rounded transition-colors text-left w-full"
+                      onClick={handleCopyUri}
+                      title="Click to copy URI"
+                    >
                       {wcUri}
-                    </p>
+                    </button>
                   )}
                 </div>
               ) : (

package/src/widget/components/WalletList.tsx

@@ -21,7 +21,9 @@ export const WalletList: React.FC<WalletListProps> = ({
 
   const prefilteredWalletOptions = useMemo(() => {
     return walletOptions
-      .filter((wallet) => wallet.id !== "injected")
+      .filter(
+        (wallet) => wallet.id !== "injected" && wallet.id !== "sequence-waas",
+      )
       .sort((a, b) => {
         const aIndex = topShownWallets.indexOf(a.id)
         const bIndex = topShownWallets.indexOf(b.id)
@@ -61,7 +63,7 @@ export const WalletList: React.FC<WalletListProps> = ({
   return (
     <div className="space-y-6">
       <ScreenHeader
-        headerContent="More Wallets"
+        headerContent="Connect a Wallet"
         headerContentAlign="left"
         onBack={onBack}
       />

package/src/widget/hooks/useBack.tsx

@@ -20,6 +20,7 @@ interface BackContextType {
   setAccountSettingsSource: (screen: Screen) => void
   getAccountSettingsSource: () => Screen | null
   setCurrentScreenWithBack: (screen: Screen, backTo?: Screen) => void
+  getPreviousScreen: () => Screen | null
 }
 
 const BackContext = createContext<BackContextType | null>(null)
@@ -194,6 +195,7 @@ export function BackProvider({ children }: BackProviderProps) {
     setAccountSettingsSource: () => {}, // Deprecated, kept for compatibility
     getAccountSettingsSource: () => null, // Deprecated, kept for compatibility
     setCurrentScreenWithBack,
+    getPreviousScreen,
   }
 
   return <BackContext.Provider value={value}>{children}</BackContext.Provider>

package/src/widget/hooks/useCheckout.ts

@@ -2,6 +2,7 @@ import { useCallback, useRef } from "react"
 import { getSessionId } from "../../analytics.js"
 import { logger } from "../../logger.js"
 import { updatePersistentToast } from "../../toast.js"
+import { getPrettifiedErrorMessage } from "../../error.js"
 
 export type CheckoutCallbacks = {
   onCheckoutStart?: (data: { sessionId: string }) => void
@@ -17,7 +18,7 @@ export type CheckoutCallbacks = {
 export type CheckoutOnHandlers = {
   triggerCheckoutStart: () => void
   triggerCheckoutQuote: (quote: any) => void
-  triggerCheckoutComplete: () => void
+  triggerCheckoutComplete: (txStatus: "success" | "fail") => void
   triggerCheckoutError: (error: string) => void
   triggerCheckoutStatusUpdate: (transactionStates: any[]) => void
 }
@@ -81,26 +82,38 @@ export function useCheckout({
     [onCheckoutQuote],
   )
 
-  const triggerCheckoutComplete = useCallback(() => {
-    if (onCheckoutComplete && sessionIdRef.current) {
-      try {
-        onCheckoutComplete({
-          sessionId: sessionIdRef.current,
-        })
-      } catch (error) {
-        logger.console.error(
-          "[trails-sdk] Error calling onCheckoutComplete:",
-          error,
-        )
+  const triggerCheckoutComplete = useCallback(
+    (txStatus: "success" | "fail") => {
+      if (onCheckoutComplete && sessionIdRef.current) {
+        try {
+          onCheckoutComplete({
+            sessionId: sessionIdRef.current,
+          })
+        } catch (error) {
+          logger.console.error(
+            "[trails-sdk] Error calling onCheckoutComplete:",
+            error,
+          )
+        }
       }
-    }
 
-    updatePersistentToast(
-      "Transaction Complete",
-      "Your transaction has been successfully processed",
-      "success",
-    )
-  }, [onCheckoutComplete])
+      if (txStatus === "success") {
+        updatePersistentToast(
+          "Transaction Complete",
+          "Your transaction has been successfully processed",
+          "success",
+        )
+      } else {
+        // Default to error for any non-success status (including 'fail' and any unexpected values)
+        updatePersistentToast(
+          "Transaction Failed",
+          "Your transaction failed or was refunded",
+          "error",
+        )
+      }
+    },
+    [onCheckoutComplete],
+  )
 
   const triggerCheckoutError = useCallback(
     (error: string) => {
@@ -120,7 +133,10 @@ export function useCheckout({
 
       updatePersistentToast(
         "Transaction Failed",
-        error || "An error occurred while processing your transaction",
+        getPrettifiedErrorMessage(
+          error,
+          "An error occurred while processing your transaction",
+        ),
         "error",
       )
     },

package/src/widget/hooks/useCurrentScreen.tsx

@@ -25,6 +25,7 @@ export type Screen =
   | "user-preferences"
   | "chain-list"
   | "disconnect"
+  | "home"
 
 interface CurrentScreenContextType {
   currentScreen: Screen

package/src/widget/hooks/useDefaultTokenSelection.tsx

@@ -14,6 +14,7 @@ import { getChainInfo } from "../../chains.js"
 import { logger } from "../../logger.js"
 
 const MINIMUM_24H_VOLUME_USD = 1_000_000 // $1M
+const MINIMUM_BALANCE_USD_FOR_PRIORITIZATION = 1 // $1
 
 /**
  * Hook for intelligent default token selection in 0xtrails widget.
@@ -33,9 +34,9 @@ const MINIMUM_24H_VOLUME_USD = 1_000_000 // $1M
  * - Fallback to any token with balance > 0
  *
  * Destination Token Logic (only when toToken/toChainId not provided):
- * - Matches origin token symbol on different chain when possible
- * - Default destination chain: Base (unless origin is Base, then Arbitrum)
- * - Fallback priority: USDC > ETH > first available token
+ * - Default destination chain: Base if origin is not Base, Arbitrum if origin is Base
+ * - Default destination token: USDC on destination chain
+ * - Fallback: Same symbol on destination chain > ETH on destination chain > first available token on destination chain
  *
  * @returns defaultOriginToken - Best origin token that can cover targetAmountUsd (if specified)
  * @returns defaultDestinationToken - Matching token on different chain (null if toToken/toChainId set)
@@ -231,8 +232,11 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
     }
 
     // Helper to sort tokens by balance USD and volume
-    const sortTokensByBalanceAndVolume = (tokens: TokenBalanceExtended[]) => {
-      return [...tokens].sort((a, b) => {
+    const sortTokensByBalanceAndVolume = (
+      tokens: TokenBalanceExtended[],
+      targetAmount?: number,
+    ) => {
+      const sortedTokens = [...tokens].sort((a, b) => {
         const aVolume = getToken24hVolume(a)
         const bVolume = getToken24hVolume(b)
         const aHighVolume = aVolume >= MINIMUM_24H_VOLUME_USD
@@ -247,6 +251,56 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
         const bBalanceUsd = b.balanceUsd ?? 0
         return bBalanceUsd - aBalanceUsd
       })
+
+      // After initial sorting, prioritize USDC and native tokens at the top
+      const effectiveTargetAmount =
+        targetAmount ?? MINIMUM_BALANCE_USD_FOR_PRIORITIZATION
+
+      const prioritizedTokens: TokenBalanceExtended[] = []
+      const remainingTokens: TokenBalanceExtended[] = []
+
+      // Separate tokens into prioritized and remaining
+      for (const token of sortedTokens) {
+        const balanceUsd = token.balanceUsd ?? 0
+        const isNative =
+          !("contractAddress" in token) || token.contractAddress === zeroAddress
+        const isUSDC =
+          !isNative && token.contractInfo?.symbol?.toUpperCase() === "USDC"
+
+        if ((isUSDC || isNative) && balanceUsd >= effectiveTargetAmount) {
+          prioritizedTokens.push(token)
+        } else {
+          remainingTokens.push(token)
+        }
+      }
+
+      // Sort prioritized tokens: USDC first, then native tokens
+      prioritizedTokens.sort((a, b) => {
+        const aIsNative =
+          !("contractAddress" in a) || a.contractAddress === zeroAddress
+        const bIsNative =
+          !("contractAddress" in b) || b.contractAddress === zeroAddress
+        const aIsUSDC =
+          !aIsNative && a.contractInfo?.symbol?.toUpperCase() === "USDC"
+        const bIsUSDC =
+          !bIsNative && b.contractInfo?.symbol?.toUpperCase() === "USDC"
+
+        // USDC comes first
+        if (aIsUSDC && !bIsUSDC) return -1
+        if (!aIsUSDC && bIsUSDC) return 1
+
+        // Then native tokens
+        if (aIsNative && !bIsNative) return -1
+        if (!aIsNative && bIsNative) return 1
+
+        // Within same type, sort by balance USD (highest first)
+        const aBalanceUsd = a.balanceUsd ?? 0
+        const bBalanceUsd = b.balanceUsd ?? 0
+        return bBalanceUsd - aBalanceUsd
+      })
+
+      // Return prioritized tokens first, then remaining tokens
+      return [...prioritizedTokens, ...remainingTokens]
     }
 
     // Find the best origin token using intelligent selection
@@ -281,7 +335,10 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
         const sameChainTokens = tokensWithSufficientBalance.filter(
           (token) => token.chainId === targetChainId,
         )
-        const sortedSameChain = sortTokensByBalanceAndVolume(sameChainTokens)
+        const sortedSameChain = sortTokensByBalanceAndVolume(
+          sameChainTokens,
+          effectiveTargetAmount,
+        )
         bestOriginToken = sortedSameChain[0] ?? null
         if (bestOriginToken) {
           logger.console.log(
@@ -296,7 +353,10 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
           (token) =>
             tokenMatches(token, toToken) && token.chainId !== targetChainId,
         )
-        const sortedSameToken = sortTokensByBalanceAndVolume(sameTokenDiffChain)
+        const sortedSameToken = sortTokensByBalanceAndVolume(
+          sameTokenDiffChain,
+          effectiveTargetAmount,
+        )
         bestOriginToken = sortedSameToken[0] ?? null
         if (bestOriginToken) {
           logger.console.log(
@@ -310,8 +370,10 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
         const diffChainDiffToken = tokensWithSufficientBalance.filter(
           (token) => token.chainId !== targetChainId,
         )
-        const sortedDiffChainDiffToken =
-          sortTokensByBalanceAndVolume(diffChainDiffToken)
+        const sortedDiffChainDiffToken = sortTokensByBalanceAndVolume(
+          diffChainDiffToken,
+          effectiveTargetAmount,
+        )
         bestOriginToken = sortedDiffChainDiffToken[0] ?? null
         if (bestOriginToken) {
           logger.console.log(
@@ -322,7 +384,10 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
 
       // Fallback: If no token can cover target amount, use any token (sorted by balance/volume)
       if (!bestOriginToken) {
-        const allTokensSorted = sortTokensByBalanceAndVolume(tokensWithBalance)
+        const allTokensSorted = sortTokensByBalanceAndVolume(
+          tokensWithBalance,
+          effectiveTargetAmount,
+        )
         bestOriginToken = allTokensSorted[0] ?? null
         logger.console.log(
           "[trails-sdk] Fallback: No token can cover target amount, using highest balance token",
@@ -330,8 +395,10 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
       }
     } else {
       // When no specific destination is set, select highest value token with good liquidity
-      const sortedByBalanceAndVolume =
-        sortTokensByBalanceAndVolume(tokensWithBalance)
+      const sortedByBalanceAndVolume = sortTokensByBalanceAndVolume(
+        tokensWithBalance,
+        MINIMUM_BALANCE_USD_FOR_PRIORITIZATION,
+      ) // Use minimum balance for prioritization
       bestOriginToken = sortedByBalanceAndVolume[0] ?? null
       logger.console.log(
         "[trails-sdk] No destination specified, selected highest value token with best liquidity",
@@ -358,30 +425,39 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
     let destinationToken: DefaultToken | null = null
 
     if (shouldComputeDestination) {
-      // Determine default destination chain: Base if origin is not Base, Arbitrum if origin is Base
+      // Determine destination chain: Base if origin is not Base, Arbitrum if origin is Base
       const defaultDestChainId =
         originToken.chainId === base.id ? arbitrum.id : base.id
 
-      // Find matching token on destination chain (prefer same symbol)
-      const destChainTokens = supportedTokens.filter(
-        (token: any) => token.chainId === defaultDestChainId,
+      // Find USDC on destination chain first
+      const usdcOnDestChain = supportedTokens.find(
+        (token: any) =>
+          token.chainId === defaultDestChainId && token.symbol === "USDC",
       )
 
       let destToken: any = null
 
-      // Try to find same symbol on dest chain
-      const sameSymbolToken = destChainTokens.find((token: any) => {
-        return token.symbol.toUpperCase() === originToken.symbol.toUpperCase()
-      })
-
-      if (sameSymbolToken) {
-        destToken = sameSymbolToken
+      if (usdcOnDestChain) {
+        destToken = usdcOnDestChain
       } else {
-        // Fallback: USDC > ETH > first available token
-        destToken =
-          destChainTokens.find((token: any) => token.symbol === "USDC") ||
-          destChainTokens.find((token: any) => token.symbol === "ETH") ||
-          destChainTokens[0]
+        // Fallback: Find matching token on destination chain
+        const destChainTokens = supportedTokens.filter(
+          (token: any) => token.chainId === defaultDestChainId,
+        )
+
+        // Try to find same symbol on destination chain first
+        const sameSymbolOnDestChain = destChainTokens.find((token: any) => {
+          return token.symbol.toUpperCase() === originToken.symbol.toUpperCase()
+        })
+
+        if (sameSymbolOnDestChain) {
+          destToken = sameSymbolOnDestChain
+        } else {
+          // Fallback: ETH on destination chain > first available token on destination chain
+          destToken =
+            destChainTokens.find((token: any) => token.symbol === "ETH") ||
+            destChainTokens[0]
+        }
       }
 
       const decimals = destToken?.decimals