0xtrails 0.2.2 → 0.2.5

package/src/widget/components/WalletConfirmation.tsx

@@ -1,9 +1,11 @@
 import { TokenImage } from "./TokenImage.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,6 +23,9 @@ 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 { connector } = useAccount()
 
   useEffect(() => {
     setShowContent(true)
@@ -39,6 +44,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">
@@ -67,6 +91,7 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
                 imageUrl={quote?.originToken.imageUrl}
                 symbol={quote?.originToken.symbol}
                 chainId={quote?.originChain.id}
+                contractAddress={quote?.originToken.contractAddress}
                 size={64}
               />
             </div>
@@ -76,12 +101,39 @@ export const WalletConfirmation: React.FC<WalletConfirmationProps> = ({
             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…"
+                      : "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}
+                onFeeOptionsLoaded={() => {
+                  console.log("[trails-sdk] Fee options loaded callback called")
+                  setAreFeeOptionsLoaded(true)
+                }}
+              />
+            </div>
+          )}
         </div>
 
         {/* Timeout Warning */}

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)
@@ -45,10 +47,11 @@ export const WalletList: React.FC<WalletListProps> = ({
   const filteredWalletOptions = useMemo(() => {
     if (!searchTerm.trim()) return prefilteredWalletOptions
 
+    const query = searchTerm.trim().toLowerCase()
     return prefilteredWalletOptions.filter((wallet) => {
       return (
-        wallet.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        wallet.id.toLowerCase().includes(searchTerm.toLowerCase())
+        wallet.name.toLowerCase().includes(query) ||
+        wallet.id.toLowerCase().includes(query)
       )
     })
   }, [prefilteredWalletOptions, searchTerm])
@@ -60,10 +63,9 @@ export const WalletList: React.FC<WalletListProps> = ({
   return (
     <div className="space-y-6">
       <ScreenHeader
-        headerContent="More Wallets"
+        headerContent="Connect a Wallet"
         headerContentAlign="left"
         onBack={onBack}
-        showAccountActions={true}
       />
 
       {/* Search Input */}

package/src/widget/hooks/useBack.tsx

@@ -1,4 +1,10 @@
-import { createContext, useContext, useState, useEffect } from "react"
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+} from "react"
 import type { ReactNode } from "react"
 import { useCurrentScreen, type Screen } from "./useCurrentScreen.js"
 import { logger } from "../../logger.js"
@@ -9,6 +15,12 @@ interface BackContextType {
   clearHistory: () => void
   isNavigatingBack: boolean
   getHistory: () => Screen[]
+  getBreadcrumbHistory: () => Screen[]
+  addBreadcrumb: (screen: Screen) => void
+  setAccountSettingsSource: (screen: Screen) => void
+  getAccountSettingsSource: () => Screen | null
+  setCurrentScreenWithBack: (screen: Screen, backTo?: Screen) => void
+  getPreviousScreen: () => Screen | null
 }
 
 const BackContext = createContext<BackContextType | null>(null)
@@ -20,6 +32,9 @@ interface BackProviderProps {
 export function BackProvider({ children }: BackProviderProps) {
   const { currentScreen, setCurrentScreen } = useCurrentScreen()
   const [history, setHistory] = useState<Screen[]>([])
+  const [navigationStack, setNavigationStack] = useState<
+    Array<[Screen, Screen?]>
+  >([])
   const [isNavigatingBack, setIsNavigatingBack] = useState(false)
 
   // Track screen changes and update history
@@ -45,20 +60,83 @@ export function BackProvider({ children }: BackProviderProps) {
     })
   }, [currentScreen])
 
-  const canGoBack = history.length > 1
+  // Get the previous screen from navigation stack
+  const getPreviousScreen = (): Screen | null => {
+    if (navigationStack.length === 0) {
+      return null
+    }
+
+    // Find the current screen in the navigation stack
+    const currentIndex = navigationStack.findIndex(
+      ([screen]) => screen === currentScreen,
+    )
+    if (currentIndex === -1) {
+      return null
+    }
+
+    const currentEntry = navigationStack[currentIndex]
+    if (!currentEntry) {
+      return null
+    }
+    const [, backToScreen] = currentEntry
+
+    // If this screen has a specific back target, use it
+    if (backToScreen) {
+      return backToScreen
+    }
+
+    // Otherwise, go to the previous screen in the stack
+    if (currentIndex > 0) {
+      const previousEntry = navigationStack[currentIndex - 1]
+      if (previousEntry) {
+        const [previousScreen] = previousEntry
+        return previousScreen
+      }
+    }
+
+    return null
+  }
+
+  // Function to set current screen with optional back target
+  const setCurrentScreenWithBack = useCallback(
+    (screen: Screen, backTo?: Screen) => {
+      setNavigationStack((prevStack) => {
+        // Remove any existing entry for this screen
+        const filteredStack = prevStack.filter(
+          ([existingScreen]) => existingScreen !== screen,
+        )
+
+        // Add new entry
+        const newEntry: [Screen, Screen?] = backTo ? [screen, backTo] : [screen]
+        const newStack = [...filteredStack, newEntry]
+
+        // Keep stack limited to last 10 entries
+        if (newStack.length > 10) {
+          return newStack.slice(-10)
+        }
+
+        return newStack
+      })
+
+      setCurrentScreen(screen)
+    },
+    [setCurrentScreen],
+  )
+
+  const canGoBack = navigationStack.length > 0 || history.length > 1
 
   const goBack = canGoBack
     ? () => {
-        // Remove current screen and go to previous one
-        const newHistory = history.slice(0, -1)
-        const previousScreen = newHistory[newHistory.length - 1]
+        const previousScreen = getPreviousScreen()
 
         logger.console.log(
-          "[trails-sdk] goBack",
+          "[trails-sdk] goBack (navigation stack)",
           "previousScreen:",
           previousScreen,
           "currentScreen:",
           currentScreen,
+          "navigationStack:",
+          navigationStack,
         )
 
         // Set flag to prevent auto-selection when navigating back
@@ -67,24 +145,44 @@ export function BackProvider({ children }: BackProviderProps) {
         }
 
         if (previousScreen) {
-          setHistory(newHistory)
+          // Remove current screen from navigation stack
+          setNavigationStack((prevStack) =>
+            prevStack.filter(([screen]) => screen !== currentScreen),
+          )
           setCurrentScreen(previousScreen)
+        } else {
+          // Fallback: if no navigation stack, use regular history
+          const regularHistory = history
+          if (regularHistory.length > 1) {
+            const fallbackScreen = regularHistory[regularHistory.length - 2]
+            if (fallbackScreen) {
+              logger.console.log(
+                "[trails-sdk] goBack (fallback to regular history)",
+                "previousScreen:",
+                fallbackScreen,
+              )
+              setCurrentScreen(fallbackScreen)
+            }
+          }
         }
 
-        // Reset the flag after a short delay to allow the screen change to complete
+        // Reset the flag after a longer delay to allow the screen change to complete
+        // and prevent post-connection navigation from interfering with manual back navigation
         if (setIsNavigatingBack) {
           setTimeout(() => {
             setIsNavigatingBack(false)
-          }, 100)
+          }, 500)
         }
       }
     : undefined
 
   const clearHistory = () => {
     setHistory([currentScreen])
+    setNavigationStack([[currentScreen]])
   }
 
   const getHistory = () => history
+  const getBreadcrumbHistory = () => navigationStack.map(([screen]) => screen)
 
   const value: BackContextType = {
     goBack,
@@ -92,6 +190,12 @@ export function BackProvider({ children }: BackProviderProps) {
     clearHistory,
     isNavigatingBack,
     getHistory,
+    getBreadcrumbHistory,
+    addBreadcrumb: () => {}, // Deprecated, kept for compatibility
+    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