0xtrails 0.2.2 → 0.2.5

package/src/widget/widget.tsx

@@ -1,5 +1,6 @@
 import "@0xsequence/design-system/preset"
 import { SequenceHooksContext, SequenceHooksProvider } from "@0xsequence/hooks"
+import { AaveClient, AaveProvider } from "@aave/react"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { AnimatePresence, motion } from "motion/react"
 import React, {
@@ -9,51 +10,30 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
-  useMemo,
 } from "react"
 import { createPortal } from "react-dom"
 import type { Chain, WalletClient } from "viem"
-import { createWalletClient, custom, http, isAddress } from "viem"
-import { getAllChains } from "../chains.js"
+import {
+  createWalletClient,
+  custom,
+  encodeFunctionData,
+  http,
+  isAddress,
+} from "viem"
 import type { Connector } from "wagmi"
 import {
   createConfig,
   createStorage,
   useAccount,
   useConnect,
+  useConnections,
   useDisconnect,
   WagmiContext,
   WagmiProvider,
 } from "wagmi"
-import { getChainInfo, getRpcUrl } from "../chains.js"
-import type { TransactionState } from "../transactions.js"
-import type { RelayerEnv, MetaTxnReceipt } from "../relayer.js"
-import type { Theme } from "../theme.js"
-import { ConnectWallet } from "./components/ConnectWallet.js"
-import Footer from "./components/Footer.js"
-import Modal from "./components/Modal.js"
-import Receipt from "./components/Receipt.js"
-import { WalletList } from "./components/WalletList.js"
-import { Pay } from "./components/Pay.js"
-import TokenList from "./components/TokenList.js"
-import TransferPending from "./components/TransferPendingVertical.js"
-import WalletConfirmation from "./components/WalletConfirmation.js"
-import QRCodeDeposit from "./components/QRCodeDeposit.js"
-import { ThemeProvider } from "./components/ThemeProvider.js"
-import { ToastProvider } from "./components/Toast.js"
-import {
-  getCommitHash,
-  getSequenceNodeGatewayUrl,
-  setWalletConnectProjectId,
-  setSequenceNodeGatewayUrl,
-  getSequenceEnv,
-} from "../config.js"
-import { useRecentTokens } from "./hooks/useRecentTokens.js"
-import { useTargetAmount } from "./hooks/useTargetAmount.js"
-import { getWethAddress } from "../tokens.js"
-import css from "./compiled.css?inline"
 import {
   getAnalytics,
   getSessionId,
@@ -61,88 +41,117 @@ import {
   trackWalletDisconnected,
   trackWidgetScreen,
 } from "../analytics.js"
-import type { PrepareSendQuote } from "../prepareSend.js"
-import type { SupportedToken } from "../tokens.js"
+import { getAllChains, getChainInfo, getRpcUrl } from "../chains.js"
 import {
-  getIsWalletRejectedError,
-  getIsBalanceTooLowError,
-  getFullErrorMessage,
-  getIsApiError,
-  getIsRateLimitedError,
-  getPrettifiedErrorMessage,
-} from "../error.js"
-import {
-  setSequenceIndexerUrl,
-  setSequenceApiUrl,
-  setTrailsApiUrl,
-  setSequenceProjectAccessKey,
-  getSequenceIndexerUrl,
+  getCommitHash,
+  getDebug,
   getSequenceApiUrl,
+  getSequenceEnv,
+  getSequenceIndexerUrl,
+  getSequenceNodeGatewayUrl,
+  getSequenceProjectAccessKey,
   getTrailsApiUrl,
+  setDebug,
+  setSequenceApiUrl,
   setSequenceEnv,
+  setSequenceIndexerUrl,
+  setSequenceNodeGatewayUrl,
+  setSequenceProjectAccessKey,
   setSlippageTolerance,
-  getSequenceProjectAccessKey,
-  setDebug,
+  setTrailsApiUrl,
+  setWalletConnectProjectId,
 } from "../config.js"
-import { Fund } from "./components/Fund.js"
-import { Recipients } from "./components/Recipients.js"
-import { Swap } from "./components/Swap.js"
-import { Receive } from "./components/Receive.js"
-import { Earn } from "./components/Earn.js"
-import type { MeshConnectProps } from "./components/MeshConnectIframe.js"
-import { MeshConnectFlow } from "./components/MeshConnectFlow.js"
-import WalletConnectScreen from "./components/WalletConnect.js"
-import FundMethods from "./components/FundMethods.js"
-import EarnPools from "./components/EarnPools.js"
-import WalletConnectionPending from "./components/WalletConnectionPending.js"
-import { AccountIntentTransactionHistory } from "./components/AccountIntentTransactionHistory.js"
-import { AccountSettings } from "./components/AccountSettings.js"
-import { UserPreferences } from "./components/UserPreferences.js"
+import { cssObjectToString } from "../cssUtils.js"
+import {
+  getFullErrorMessage,
+  getIsApiError,
+  getIsBalanceTooLowError,
+  getIsRateLimitedError,
+  getIsWalletRejectedError,
+  getPrettifiedErrorMessage,
+} from "../error.js"
+import { logger } from "../logger.js"
 import type { Mode } from "../mode.js"
-import type { OnCompleteProps } from "./hooks/useSendForm.js"
 import type { Pool } from "../pools.js"
 import { usePools } from "../pools.js"
-import { AaveProvider, AaveClient } from "@aave/react"
-import { encodeFunctionData } from "viem"
-import { cssObjectToString } from "../cssUtils.js"
-import { useCheckout } from "./hooks/useCheckout.js"
-import { useWallets, walletConnectConnector, connectors } from "../wallets.js"
-import { isValidNumeric, isValidInteger } from "../prices.js"
-import { ErrorDisplay } from "./components/ErrorDisplay.js"
-import { useDebugScreens } from "./hooks/useDebugScreens.js"
-import { PriceImpactWarningProvider } from "./hooks/usePriceImpactWarning.js"
-import { ModeProvider } from "./hooks/useMode.js"
-import { logger } from "../logger.js"
+import type { PrepareSendQuote } from "../prepareSend.js"
+import { isValidInteger, isValidNumeric } from "../prices.js"
+import type { MetaTxnReceipt, RelayerEnv } from "../relayer.js"
+import type { Theme } from "../theme.js"
+import type { SupportedToken } from "../tokens.js"
+import { getWethAddress } from "../tokens.js"
+import type { TransactionState } from "../transactions.js"
+import { connectors, useWallets, walletConnectConnector } from "../wallets.js"
+// import { useOpenConnectModal } from "@0xsequence/connect"
+import css from "./compiled.css?inline"
+import { AccountIntentTransactionHistory } from "./components/AccountIntentTransactionHistory.js"
+import { AccountSettings } from "./components/AccountSettings.js"
 import { ChainList } from "./components/ChainList.js"
+import { ConnectWallet } from "./components/ConnectWallet.js"
 import { Disconnect } from "./components/Disconnect.js"
-import {
-  OriginSelectedTokenProvider as SelectedTokenProvider,
-  type Token,
-  useOriginSelectedToken as useSelectedToken,
-} from "./hooks/useOriginSelectedToken.js"
-import { DestinationSelectedTokenProvider } from "./hooks/useDestinationSelectedToken.js"
-import { SelectedFeeTokenProvider } from "./hooks/useSelectedFeeToken.js"
-import { SelectedRecipientProvider } from "./hooks/useSelectedRecipient.js"
-import { SwapAmountProvider } from "./hooks/useSwapAmount.js"
-import { ChainFilterProvider } from "./hooks/useChainFilter.js"
-import { BalanceVisibleProvider } from "./hooks/useBalanceVisible.js"
-import { SwapSettingsProvider } from "./hooks/useSwapSettings.js"
-import { ThemeProvider as ThemePreferenceProvider } from "./hooks/useTheme.js"
+import { Earn } from "./components/Earn.js"
+import EarnPools from "./components/EarnPools.js"
+import { ErrorDisplay } from "./components/ErrorDisplay.js"
+import Footer from "./components/Footer.js"
+import { Fund } from "./components/FundSwap.js"
+import FundMethods from "./components/FundMethods.js"
+import { MeshConnectExchanges } from "./components/MeshConnectExchanges.js"
+import { MeshConnectFlow } from "./components/MeshConnectFlow.js"
+import type { MeshConnectProps } from "./components/MeshConnectIframe.js"
+import Modal from "./components/Modal.js"
+import { Pay } from "./components/Pay.js"
+import QRCodeDeposit from "./components/QRCodeDeposit.js"
+import Receipt from "./components/Receipt.js"
+import { Receive } from "./components/Receive.js"
+import { Recipients } from "./components/Recipients.js"
+import { Swap } from "./components/Swap.js"
+import { ThemeProvider } from "./components/ThemeProvider.js"
 import { ThemeSyncer } from "./components/ThemeSyncer.js"
-import { EarnPoolProvider, useEarnPool } from "./hooks/useEarnPool.js"
-import { WidgetPropsProvider, useWidgetProps } from "./hooks/useWidgetProps.js"
+import { ToastProvider } from "./components/Toast.js"
+import TokenList from "./components/TokenList.js"
+import TransferPending from "./components/TransferPendingVertical.js"
+import { UserPreferences } from "./components/UserPreferences.js"
+import WalletConfirmation from "./components/WalletConfirmation.js"
+import WalletConnectScreen from "./components/WalletConnect.js"
+import WalletConnectionPending from "./components/WalletConnectionPending.js"
+import { WalletList } from "./components/WalletList.js"
+import { BackProvider, useBack } from "./hooks/useBack.js"
+import { BalanceVisibleProvider } from "./hooks/useBalanceVisible.js"
+import { ChainFilterProvider } from "./hooks/useChainFilter.js"
+import { useCheckout } from "./hooks/useCheckout.js"
 import {
   CurrentScreenProvider,
   useCurrentScreen,
   type Screen,
 } from "./hooks/useCurrentScreen.js"
-import { BackProvider, useBack } from "./hooks/useBack.js"
+import { useDebugScreens } from "./hooks/useDebugScreens.js"
 import { DefaultTokenSelectionProvider } from "./hooks/useDefaultTokenSelection.js"
+import { DestinationSelectedTokenProvider } from "./hooks/useDestinationSelectedToken.js"
+import { EarnPoolProvider, useEarnPool } from "./hooks/useEarnPool.js"
+import { useInitialRedirect } from "./hooks/useInitialRedirect.js"
+import { ModeProvider } from "./hooks/useMode.js"
+import {
+  OriginSelectedTokenProvider as SelectedTokenProvider,
+  useOriginSelectedToken as useSelectedToken,
+  type Token,
+} from "./hooks/useOriginSelectedToken.js"
+import { PriceImpactWarningProvider } from "./hooks/usePriceImpactWarning.js"
+import { useRecentTokens } from "./hooks/useRecentTokens.js"
+import { SelectedFeeTokenProvider } from "./hooks/useSelectedFeeToken.js"
 import {
   SelectedMeshExchangeProvider,
   useSelectedMeshExchange,
 } from "./hooks/useSelectedMeshExchange.js"
-import { MeshConnectExchanges } from "./components/MeshConnectExchanges.js"
+import { SelectedRecipientProvider } from "./hooks/useSelectedRecipient.js"
+import type { OnCompleteProps } from "./hooks/useSendForm.js"
+import { SwapAmountProvider } from "./hooks/useSwapAmount.js"
+import { useTargetAmount } from "./hooks/useTargetAmount.js"
+import { ThemeProvider as ThemePreferenceProvider } from "./hooks/useTheme.js"
+import { useWidgetProps, WidgetPropsProvider } from "./hooks/useWidgetProps.js"
+import {
+  SelectedFundMethodProvider,
+  useSelectedFundMethod,
+} from "./hooks/useSelectedFundMethod.js"
 
 export const aaveClient = AaveClient.create()
 
@@ -176,7 +185,6 @@ export type TrailsWidgetProps = {
   renderInline?: boolean
   theme?: Theme
   mode?: Mode
-  swapMode?: "simple" | "classic"
   walletOptions?: string[]
   onOriginConfirmation?: (data: {
     txHash: string
@@ -204,6 +212,7 @@ export type TrailsWidgetProps = {
   gasless?: boolean
   buttonText?: string
   customCss?: string | Record<string, string>
+  disableCss?: boolean
   quoteProvider?: string
   slippageTolerance?: number | string
   priceImpactWarningThresholdBps?: number
@@ -440,6 +449,26 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     hideDisconnect,
   } = useWidgetProps()
   const { address, isConnected, chainId, connector } = useAccount()
+  // const { setOpenConnectModal } = useOpenConnectModal()
+
+  // Helper function to detect if the current connector is a Sequence wallet
+  const isSequenceWallet = useMemo(() => {
+    if (!connector) return false
+    const connectorName = connector.name?.toLowerCase() || ""
+    const connectorId = connector.id?.toLowerCase() || ""
+    const isSequence =
+      connectorName.includes("sequence") || connectorId.includes("sequence")
+
+    console.log("[trails-sdk] Sequence wallet detection:", {
+      connectorName,
+      connectorId,
+      isSequence,
+      connector: connector.name,
+    })
+
+    return isSequence
+  }, [connector])
+  const connections = useConnections()
   const { disconnectAsync } = useDisconnect()
   const { recentTokens, addRecentToken } = useRecentTokens(address)
   const { wallets: allWallets } = useWallets()
@@ -449,15 +478,22 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const [currentMode, setCurrentMode] = useState<Mode>(mode)
   const { currentScreen, setCurrentScreen } = useCurrentScreen()
   const {
-    goBack: handleBack,
+    goBack,
     clearHistory,
     isNavigatingBack,
-    getHistory,
+    setCurrentScreenWithBack,
+    getPreviousScreen,
   } = useBack()
+
+  // Wrapper function that clears errors when going back
+  const handleBack = () => {
+    setError(null)
+    goBack?.()
+  }
   const [previousAddress, setPreviousAddress] = useState<string | undefined>(
     address,
   )
-  const [selectedFundMethod, setSelectedFundMethod] = useState<string>("wallet")
+  const { selectedFundMethod, setSelectedFundMethod } = useSelectedFundMethod()
   const { selectedPool, setSelectedPool } = useEarnPool()
   const [selectedWalletId, setSelectedWalletId] = useState<string | null>(
     () => {
@@ -514,6 +550,24 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
   }, [])
 
+  // Update currentMode when mode prop changes
+  useEffect(() => {
+    setCurrentMode(mode)
+
+    // If connected, navigate to the appropriate screen for the new mode
+    if (isConnected) {
+      const newScreen = getInitialScreenForMode(mode)
+      setCurrentScreen(newScreen)
+    }
+  }, [mode, isConnected, setCurrentScreen, getInitialScreenForMode])
+
+  // Use the simple initial redirect hook
+  const { hasConnectedBefore } = useInitialRedirect(
+    isConnected,
+    currentMode,
+    getInitialScreenForMode,
+  )
+
   // Set proper initial screen based on connection state and mode
   useEffect(() => {
     if (isInitialScreenSet) {
@@ -521,8 +575,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
 
     let properInitialScreen: Screen = "connect"
+
     if (isConnected) {
+      // For initial load, always go to the appropriate mode screen
       properInitialScreen = getInitialScreenForMode(currentMode)
+      logger.console.log(
+        "[trails-sdk] Initial load with connected wallet, going to mode screen:",
+        properInitialScreen,
+      )
     } else if (currentMode === "receive") {
       properInitialScreen = "receive"
     }
@@ -797,76 +857,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     isConnected,
   })
 
-  // redirect to tokens screen only once after initial connection
-  const [alreadyRedirectedToTokens, setAlreadyRedirectedToTokens] =
-    useState(false)
-
-  // Update screen based on connection state and mode
+  // Simple post-connection navigation - let the hook handle the logic
   useEffect(() => {
     if (isNavigatingBack) {
       return
     }
-    if (isConnected) {
-      if (
-        currentScreen === "connect" ||
-        currentScreen === "wallet-list" ||
-        currentScreen === "wallet-connection-pending"
-      ) {
-        if (!alreadyRedirectedToTokens) {
-          setAlreadyRedirectedToTokens(true)
-          const history = getHistory()
-          logger.console.log(
-            "[trails-sdk] Post-connection navigation triggered",
-            {
-              currentScreen,
-              alreadyRedirectedToTokens,
-              isConnected,
-              currentMode,
-              history,
-            },
-          )
-
-          // Check if we came from account-settings -> wallet-list pattern
-          // Look for this pattern in the last 4-5 screens to handle any intermediate screens
-          const historyLength = history.length
-          logger.console.log("[trails-sdk] Full navigation history:", history)
-
-          // Iterate from older to newer screens to find the pattern
-          let foundAccountSettings = false
-          let foundWalletListAfterAccountSettings = false
-
-          for (
-            let i = Math.max(0, historyLength - 5);
-            i < historyLength - 1;
-            i++
-          ) {
-            if (history[i] === "account-settings") {
-              foundAccountSettings = true
-            }
-            if (history[i] === "wallet-list" && foundAccountSettings) {
-              foundWalletListAfterAccountSettings = true
-              break // Found the pattern, no need to continue
-            }
-          }
-
-          if (foundAccountSettings && foundWalletListAfterAccountSettings) {
-            logger.console.log(
-              "[trails-sdk] Came from account-settings -> wallet-list flow, returning to account-settings",
-            )
-            setCurrentScreen("account-settings")
-            return
-          }
-
-          console.log(
-            "[trails-sdk] Using default navigation for mode:",
-            currentMode,
-          )
 
-          const initialScreen = getInitialScreenForMode(currentMode)
-          setCurrentScreen(initialScreen)
-        }
-      }
-    } else {
+    // Handle disconnection
+    if (!isConnected) {
       if (
         currentScreen !== "connect" &&
         currentScreen !== "wallet-connect" &&
@@ -879,25 +877,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         }, 0)
       }
     }
-  }, [
-    isConnected,
-    currentScreen,
-    alreadyRedirectedToTokens,
-    currentMode,
-    isNavigatingBack,
-    setCurrentScreen,
-    getHistory,
-    getInitialScreenForMode,
-  ])
-
-  useEffect(() => {
-    if (
-      currentScreen === "wallet-connection-pending" &&
-      alreadyRedirectedToTokens
-    ) {
-      setAlreadyRedirectedToTokens(false)
-    }
-  }, [currentScreen, alreadyRedirectedToTokens])
+  }, [isConnected, currentScreen, isNavigatingBack, setCurrentScreen])
 
   // Auto-detect mode changes and switch screens accordingly
   useEffect(() => {
@@ -1003,13 +983,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       setError(null)
       setIsConnecting(true)
 
-      // Handle special case for wallet-list screen
-      if (walletId === "wallet-list") {
-        setCurrentScreen("wallet-list")
-        setIsConnecting(false)
-        return
-      }
-
       const config = allWallets.find((w) => w.id === walletId)
       if (!config) {
         setError(`No configuration found for wallet: ${walletId}`)
@@ -1020,6 +993,15 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         "[trails-sdk] Initiating connection to wallet",
         walletId,
       )
+
+      // Handle sequence-waas wallet using the openConnectModal hook
+      if (walletId === "sequence-waas") {
+        logger.console.log("[trails-sdk] Opening Sequence WaaS connect modal")
+        // setOpenConnectModal(true)
+        // setIsConnecting(false)
+        return
+      }
+
       if (config.connector !== walletConnectConnector) {
         logger.console.log(
           "[trails-sdk] Initiating connection to walletId",
@@ -1031,6 +1013,26 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         )
         // Set the last clicked wallet after successful connection
         saveLastClickedWallet(walletId)
+
+        // Check if this is the first wallet connection
+        if (!hasConnectedBefore) {
+          // First connection - go to initial screen for the mode
+          const initialScreen = getInitialScreenForMode(currentMode)
+          logger.console.log(
+            "[trails-sdk] First wallet connection, going to initial screen:",
+            initialScreen,
+          )
+          setCurrentScreen(initialScreen)
+        } else {
+          // Subsequent connection - go to account-settings
+          logger.console.log(
+            "[trails-sdk] Subsequent wallet connection, going to account-settings",
+          )
+          setCurrentScreenWithBack(
+            "account-settings",
+            getInitialScreenForMode(currentMode),
+          )
+        }
       } else if (config.connector === walletConnectConnector) {
         // Store the current connector as previous before switching to WalletConnect
         if (connector && connector.name !== "WalletConnect") {
@@ -1055,8 +1057,31 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     setError(null)
 
     try {
+      // Disconnect all connected wallets
+      logger.console.log(
+        "[trails-sdk] Disconnecting all connected wallets:",
+        connections.length,
+      )
+
+      // Disconnect each connection
+      for (const connection of connections) {
+        try {
+          await connection.connector.disconnect()
+          logger.console.log(
+            "[trails-sdk] Disconnected wallet:",
+            connection.connector.name,
+          )
+        } catch (error) {
+          logger.console.error(
+            "[trails-sdk] Failed to disconnect wallet:",
+            connection.connector.name,
+            error,
+          )
+        }
+      }
+
+      // Also call the main disconnect to ensure cleanup
       await disconnectAsync()
-      setAlreadyRedirectedToTokens(false)
       trackWalletDisconnected()
     } catch (error) {
       logger.console.error("[trails-sdk] Failed to disconnect:", error)
@@ -1180,9 +1205,9 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     setTransactionStates([])
     setPrepareSendQuote(null)
     setTotalCompletionSeconds(null)
-    setAlreadyRedirectedToTokens(false)
     clearHistory()
   }, [
+    setSelectedFundMethod,
     setDestinationTxHash,
     setDestinationChainId,
     setTransactionStates,
@@ -1535,7 +1560,12 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
                 setCurrentScreen("wallet-connect")
               } else {
                 saveLastClickedWallet(walletId)
-                setCurrentScreen("wallet-connection-pending")
+                // Preserve the existing back route from the navigation stack
+                const backRoute = getPreviousScreen()
+                setCurrentScreenWithBack(
+                  "wallet-connection-pending",
+                  backRoute || undefined,
+                )
                 // Auto-trigger connection
                 setTimeout(() => {
                   handleWalletConnect(walletId)
@@ -1587,7 +1617,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           <Pay
             selectedToken={selectedToken}
             onSend={handleOnSend}
-            onBack={handleBack}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
@@ -1612,6 +1641,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
               selectedPool ? generatedCalldata : toCalldata || undefined
             }
             walletClient={walletClient}
+            isSequenceWallet={isSequenceWallet}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
             paymasterUrls={paymasterUrls}
@@ -1659,8 +1689,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       case "fund-form":
         return walletClient?.account ? (
           <Fund
+            selectedToken={selectedToken}
             onSend={handleOnSend}
-            onBack={handleBack}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
@@ -1671,6 +1701,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             toToken={toToken || undefined}
             toCalldata={toCalldata || undefined}
             walletClient={walletClient}
+            isSequenceWallet={isSequenceWallet}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
             paymasterUrls={paymasterUrls}
@@ -1766,10 +1797,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
                 logger.console.log(
                   "[trails-sdk] Regular wallet selected, going to wallet-connection-pending",
                 )
-                // Reset the redirect flag to prevent immediate navigation
-                setAlreadyRedirectedToTokens(false)
+                // Don't reset the redirect flag - user has already been through initial flow
                 setTimeout(() => {
-                  setCurrentScreen("wallet-connection-pending")
+                  // Preserve the existing back route from the navigation stack
+                  const backRoute = getPreviousScreen()
+                  setCurrentScreenWithBack(
+                    "wallet-connection-pending",
+                    backRoute || undefined,
+                  )
                 }, 100)
                 // Auto-trigger connection
                 setTimeout(() => {
@@ -1788,7 +1823,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       case "earn":
         return walletClient?.account ? (
           <Earn
-            onBack={handleBack}
             onContinue={() => setCurrentScreen("send-form")}
             account={walletClient.account}
             walletClient={walletClient}
@@ -1829,7 +1863,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         return walletClient?.account ? (
           <Swap
             onSend={handleOnSend}
-            onBack={handleBack}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
@@ -1841,6 +1874,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             toToken={toToken || undefined}
             toCalldata={toCalldata || undefined}
             walletClient={walletClient}
+            isSequenceWallet={isSequenceWallet}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
             paymasterUrls={paymasterUrls}
@@ -1864,7 +1898,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         return (
           <Receive
             accountAddress={toAddress || ""}
-            onBack={handleBack}
             isConnected={isConnected}
             onConnectWallet={() => setCurrentScreen("connect")}
             onPay={() => setCurrentScreen("send-form")}
@@ -1916,6 +1949,12 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             getInitialScreenForMode={getInitialScreenForMode}
           />
         )
+      case "home": {
+        // Redirect to the appropriate screen for the current mode
+        const homeScreen = getInitialScreenForMode(currentMode)
+        setCurrentScreen(homeScreen)
+        return null
+      }
       default:
         return null
     }
@@ -2045,8 +2084,8 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
                       <SwapAmountProvider>
                         <ChainFilterProvider>
                           <BalanceVisibleProvider>
-                            <SwapSettingsProvider>
-                              <ThemePreferenceProvider>
+                            <ThemePreferenceProvider>
+                              <SelectedFundMethodProvider>
                                 <ThemeSyncer />
                                 <EarnPoolProvider>
                                   <SelectedMeshExchangeProvider>
@@ -2055,8 +2094,8 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
                                     </DefaultTokenSelectionProvider>
                                   </SelectedMeshExchangeProvider>
                                 </EarnPoolProvider>
-                              </ThemePreferenceProvider>
-                            </SwapSettingsProvider>
+                              </SelectedFundMethodProvider>
+                            </ThemePreferenceProvider>
                           </BalanceVisibleProvider>
                         </ChainFilterProvider>
                       </SwapAmountProvider>
@@ -2083,7 +2122,7 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       logger.console.warn("appId is deprecated. Use projectAccessKey instead.")
       setSequenceProjectAccessKey(props.appId)
     }
-    if (props.sequenceEnv) {
+    if (props.sequenceEnv && props.sequenceEnv !== getSequenceEnv()) {
       logger.console.log("props.sequenceEnv", props.sequenceEnv)
       setSequenceEnv(props.sequenceEnv)
     }
@@ -2121,7 +2160,7 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       logger.console.log("props.slippageTolerance", props.slippageTolerance)
       setSlippageTolerance(String(props.slippageTolerance))
     }
-    if (typeof props.debug === "boolean") {
+    if (typeof props.debug === "boolean" && props.debug === getDebug()) {
       logger.console.log("props.debug", props.debug)
       setDebug(props.debug)
     }
@@ -2190,12 +2229,6 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
         },
       }
 
-      logger.console.log("[trails-sdk] sequenceConfig", sequenceConfig)
-      logger.console.log(
-        "[trails-sdk] props.decoupleWagmi",
-        props.decoupleWagmi,
-      )
-
       if (props.decoupleWagmi) {
         return (
           <AaveProvider client={aaveClient}>
@@ -2252,6 +2285,10 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       return props.customCss
     }, [props.customCss])
 
+    if (props.disableCss) {
+      return <StrictMode>{content}</StrictMode>
+    }
+
     return (
       <ShadowPortal customCss={customCss}>
         <StrictMode>{content}</StrictMode>