0xtrails 0.2.4 → 0.2.6

package/src/widget/widget.tsx

@@ -1,22 +1,29 @@
 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, {
+  createContext,
   forwardRef,
   StrictMode,
   useCallback,
   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,
@@ -28,33 +35,6 @@ import {
   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,
@@ -62,92 +42,153 @@ import {
   trackWalletDisconnected,
   trackWidgetScreen,
 } from "../analytics.js"
-import type { PrepareSendQuote } from "../prepareSend.js"
-import type { SupportedToken } from "../tokens.js"
-import {
-  getIsWalletRejectedError,
-  getIsBalanceTooLowError,
-  getFullErrorMessage,
-  getIsApiError,
-  getIsRateLimitedError,
-  getPrettifiedErrorMessage,
-} from "../error.js"
+import { getAllChains, getChainInfo, getRpcUrl } from "../chains.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 { useInitialRedirect } from "./hooks/useInitialRedirect.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"
+import { DEFAULT_MODE } from "../constants.js"
 
 export const aaveClient = AaveClient.create()
 
+// Modal Context
+interface ModalContextType {
+  closeModal: () => void
+  isModalOpen: boolean
+}
+
+const ModalContext = createContext<ModalContextType | null>(null)
+
+// Modal Provider Component
+const ModalProvider: React.FC<{
+  children: React.ReactNode
+  closeModal: () => void
+  isModalOpen: boolean
+}> = ({ children, closeModal, isModalOpen }) => (
+  <ModalContext.Provider value={{ closeModal, isModalOpen }}>
+    {children}
+  </ModalContext.Provider>
+)
+
+// useModal Hook
+export const useModal = (): ModalContextType => {
+  const context = useContext(ModalContext)
+  if (!context) {
+    // Return a no-op function when not in modal context (e.g., renderInline)
+    return {
+      closeModal: () => {},
+      isModalOpen: false,
+    }
+  }
+  return context
+}
+
 // Validate toToken - must be "ETH", "USDC", or a valid hex address
 const isValidToToToken = (toToken: string | null | undefined) => {
   if (toToken === null || toToken === undefined || toToken === "") {
@@ -178,7 +219,6 @@ export type TrailsWidgetProps = {
   renderInline?: boolean
   theme?: Theme
   mode?: Mode
-  swapMode?: "simple" | "classic"
   walletOptions?: string[]
   onOriginConfirmation?: (data: {
     txHash: string
@@ -206,6 +246,7 @@ export type TrailsWidgetProps = {
   gasless?: boolean
   buttonText?: string
   customCss?: string | Record<string, string>
+  disableCss?: boolean
   quoteProvider?: string
   slippageTolerance?: number | string
   priceImpactWarningThresholdBps?: number
@@ -245,7 +286,11 @@ const useWalletManager = (
         if (!connector) {
           return
         }
-        const activeProvider = await connector.getProvider?.()
+        if (typeof connector?.getProvider !== "function") {
+          return
+        }
+
+        const activeProvider = await connector.getProvider()
 
         if (activeProvider && address && chainId) {
           const chain = getChainInfo(chainId)
@@ -421,7 +466,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     toCalldata,
     children,
     renderInline = false,
-    mode = "pay",
+    mode = DEFAULT_MODE,
     onOriginConfirmation,
     onDestinationConfirmation,
     onCheckoutStart,
@@ -441,19 +486,31 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     decoupleWagmi,
     hideDisconnect,
   } = useWidgetProps()
-  const { address, isConnected, chainId, connector } = useAccount()
+  const { address, 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() || ""
-    return (
+    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()
+
+  // Check if there are any connected accounts across all connectors
+  const isConnected = connections.length > 0
   const { recentTokens, addRecentToken } = useRecentTokens(address)
   const { wallets: allWallets } = useWallets()
   const { selectedToken, setSelectedToken } = useSelectedToken()
@@ -461,7 +518,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [currentMode, setCurrentMode] = useState<Mode>(mode)
   const { currentScreen, setCurrentScreen } = useCurrentScreen()
-  const { goBack, clearHistory, isNavigatingBack, setCurrentScreenWithBack } =
+  const { goBack, clearHistory, setCurrentScreenWithBack, getPreviousScreen } =
     useBack()
 
   // Wrapper function that clears errors when going back
@@ -472,7 +529,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   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>(
     () => {
@@ -511,7 +568,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     number | null
   >(null)
   const { connectAsync } = useConnect()
-  const [isInitialScreenSet, setIsInitialScreenSet] = useState(false)
 
   const getInitialScreenForMode = useCallback((mode: Mode) => {
     if (mode === "swap") {
@@ -525,54 +581,37 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     } else if (mode === "pay") {
       return "send-form"
     } else {
-      return "account-settings"
+      return "send-form"
     }
   }, [])
 
-  // Use the simple initial redirect hook
-  const { hasConnectedBefore } = useInitialRedirect(
-    isConnected,
-    currentMode,
-    getInitialScreenForMode,
-  )
-
-  // Set proper initial screen based on connection state and mode
+  // Update currentMode when mode prop changes
   useEffect(() => {
-    if (isInitialScreenSet) {
-      return
-    }
-
-    let properInitialScreen: Screen = "connect"
+    setCurrentMode(mode)
 
+    // If connected, navigate to the appropriate screen for the new mode
     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"
+      setCurrentScreen("home")
     }
+  }, [mode, isConnected, setCurrentScreen])
 
-    // Only update if the current screen is still the default
-    if (currentScreen === "connect" || currentScreen === "receive") {
-      logger.console.log(
-        "[trails-sdk] setting currentScreen to",
-        properInitialScreen,
-      )
-      setCurrentScreen(properInitialScreen)
+  const goHome = useCallback(() => {
+    const initialScreen = getInitialScreenForMode(currentMode)
+    setCurrentScreen(initialScreen)
+  }, [currentMode, setCurrentScreen, getInitialScreenForMode])
+
+  useEffect(() => {
+    if (currentScreen === "home") {
+      goHome()
     }
+  }, [currentScreen, goHome])
 
-    setIsInitialScreenSet(true)
-  }, [
+  // Use the simple initial redirect hook
+  const { hasConnectedBefore } = useInitialRedirect(
     isConnected,
     currentMode,
-    currentScreen,
-    setCurrentScreen,
-    isInitialScreenSet,
     getInitialScreenForMode,
-  ])
+  )
 
   const defaultButtonText = useMemo(() => {
     if (currentMode === "fund") {
@@ -600,11 +639,27 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     const isValidToToken = isValidToToToken(toToken)
     const isValidToAddress = toAddress ? isAddress(toAddress) : true
 
+    // Validate paymasterUrls - each url must be a valid URL
+    let isValidPaymasterUrls = true
+    let invalidPaymasterUrl = ""
+    if (paymasterUrls && Array.isArray(paymasterUrls)) {
+      for (const paymaster of paymasterUrls) {
+        try {
+          new URL(paymaster.url)
+        } catch {
+          isValidPaymasterUrls = false
+          invalidPaymasterUrl = paymaster.url
+          break
+        }
+      }
+    }
+
     if (
       isValidToAmount &&
       isValidToChainId &&
       isValidToToken &&
-      isValidToAddress
+      isValidToAddress &&
+      isValidPaymasterUrls
     ) {
       setError(null)
       return
@@ -648,6 +703,17 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         toAddress,
       )
       setError("Invalid toAddress: must be a valid hex address")
+      return
+    }
+
+    // Validate paymasterUrls
+    if (!isValidPaymasterUrls) {
+      logger.console.error(
+        "[trails-sdk] Invalid paymasterUrls prop: url must be a valid URL. Received:",
+        invalidPaymasterUrl,
+      )
+      setError("Invalid paymasterUrls: url must be a valid URL")
+      return
     }
 
     if (currentMode === "fund") {
@@ -674,7 +740,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         return
       }
     }
-  }, [toAmount, toChainId, toToken, currentMode, toAddress])
+  }, [toAmount, toChainId, toToken, currentMode, toAddress, paymasterUrls])
 
   const walletClient = useWalletManager(address, chainId, connector)
 
@@ -825,28 +891,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     isConnected,
   })
 
-  // Simple post-connection navigation - let the hook handle the logic
-  useEffect(() => {
-    if (isNavigatingBack) {
-      return
-    }
-
-    // Handle disconnection
-    if (!isConnected) {
-      if (
-        currentScreen !== "connect" &&
-        currentScreen !== "wallet-connect" &&
-        currentScreen !== "wallet-list" &&
-        currentScreen !== "wallet-connection-pending" &&
-        currentScreen !== "receive"
-      ) {
-        setTimeout(() => {
-          setCurrentScreen("connect")
-        }, 0)
-      }
-    }
-  }, [isConnected, currentScreen, isNavigatingBack, setCurrentScreen])
-
   // Auto-detect mode changes and switch screens accordingly
   useEffect(() => {
     if (
@@ -961,6 +1005,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",
@@ -976,21 +1029,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         // 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)
+          logger.console.log("[trails-sdk] First wallet connection, going home")
+          goHome()
         } else {
-          // Subsequent connection - go to account-settings
+          // Subsequent connection - go to home which will route to the appropriate screen
           logger.console.log(
-            "[trails-sdk] Subsequent wallet connection, going to account-settings",
-          )
-          setCurrentScreenWithBack(
-            "account-settings",
-            getInitialScreenForMode(currentMode),
+            "[trails-sdk] Subsequent wallet connection, going to home",
           )
+          goHome()
         }
       } else if (config.connector === walletConnectConnector) {
         // Store the current connector as previous before switching to WalletConnect
@@ -1150,7 +1196,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const resetState = useCallback(() => {
     setSelectedFundMethod("wallet")
     // Reset to appropriate screen based on mode
-    setCurrentScreen(currentMode === "receive" ? "receive" : "connect")
+    setCurrentScreen("home")
     setSelectedToken(null)
     setSelectedPool(null)
     setSelectedWalletId(null)
@@ -1166,6 +1212,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     setTotalCompletionSeconds(null)
     clearHistory()
   }, [
+    setSelectedFundMethod,
     setDestinationTxHash,
     setDestinationChainId,
     setTransactionStates,
@@ -1173,7 +1220,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     setOriginChainId,
     setSelectedToken,
     setSelectedPool,
-    currentMode,
     setCurrentScreen,
     clearHistory,
   ])
@@ -1518,7 +1564,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)
@@ -1541,12 +1592,11 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onSelectExchangeList={handleSelectExchangeList}
             onSelectConnectedAccount={() => {
               setSelectedFundMethod("connected-account")
-              const initialScreen = getInitialScreenForMode(currentMode)
-              setCurrentScreen(initialScreen)
+              setCurrentScreen("home")
             }}
             onSelectQrCode={() => {
               setSelectedFundMethod("qr-code")
-              setCurrentScreen(getInitialScreenForMode(currentMode))
+              setCurrentScreen("home")
             }}
           />
         )
@@ -1566,14 +1616,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           />
         )
       case "send-form":
-        return walletClient?.account ? (
+        return (
           <Pay
             selectedToken={selectedToken}
             onSend={handleOnSend}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
-            account={walletClient.account}
+            account={walletClient?.account}
             toRecipient={
               selectedPool
                 ? selectedPool.depositAddress
@@ -1593,7 +1643,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             toCalldata={
               selectedPool ? generatedCalldata : toCalldata || undefined
             }
-            walletClient={walletClient}
+            walletClient={walletClient ?? undefined}
             isSequenceWallet={isSequenceWallet}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
@@ -1634,25 +1684,22 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onRecentTokenSelect={handleRecentTokenSelect}
             onTrackToken={handleTrackToken}
           />
-        ) : (
-          <div className="text-center p-4 rounded-lg text-gray-600 bg-gray-50 dark:text-gray-300 dark:bg-gray-800">
-            Please connect wallet
-          </div>
         )
       case "fund-form":
-        return walletClient?.account ? (
+        return (
           <Fund
+            selectedToken={selectedToken}
             onSend={handleOnSend}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
-            account={walletClient.account}
+            account={walletClient?.account}
             toAmount={toAmount || undefined}
             toRecipient={toAddress || undefined}
             toChainId={toChainId ? Number(toChainId) : undefined}
             toToken={toToken || undefined}
             toCalldata={toCalldata || undefined}
-            walletClient={walletClient}
+            walletClient={walletClient ?? undefined}
             isSequenceWallet={isSequenceWallet}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
@@ -1667,10 +1714,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onRecentTokenSelect={handleRecentTokenSelect}
             onTrackToken={handleTrackToken}
           />
-        ) : (
-          <div className="text-center p-4 rounded-lg text-gray-600 bg-gray-50 dark:text-gray-300 dark:bg-gray-800">
-            Please connect wallet
-          </div>
         )
       case "wallet-confirmation":
         return (
@@ -1751,7 +1794,12 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
                 )
                 // 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(() => {
@@ -1768,11 +1816,11 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           />
         )
       case "earn":
-        return walletClient?.account ? (
+        return (
           <Earn
             onContinue={() => setCurrentScreen("send-form")}
-            account={walletClient.account}
-            walletClient={walletClient}
+            account={walletClient?.account}
+            walletClient={walletClient ?? undefined}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
@@ -1790,10 +1838,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onRecentTokenSelect={handleRecentTokenSelect}
             onTrackToken={handleTrackToken}
           />
-        ) : (
-          <div className="text-center p-4 rounded-lg text-gray-600 bg-gray-50 dark:text-gray-300 dark:bg-gray-800">
-            Please connect wallet
-          </div>
         )
       case "earn-pools":
         return (
@@ -1807,20 +1851,21 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           />
         )
       case "swap":
-        return walletClient?.account ? (
+        return (
           <Swap
             onSend={handleOnSend}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
             selectedToken={selectedToken}
-            account={walletClient.account}
+            account={walletClient?.account}
             toRecipient={toAddress || undefined}
             toAmount={toAmount || undefined}
             toChainId={toChainId ? Number(toChainId) : undefined}
             toToken={toToken || undefined}
             toCalldata={toCalldata || undefined}
-            walletClient={walletClient}
+            walletClient={walletClient ?? undefined}
+            isSequenceWallet={isSequenceWallet}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
             paymasterUrls={paymasterUrls}
@@ -1835,10 +1880,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onRecentTokenSelect={handleRecentTokenSelect}
             onTrackToken={handleTrackToken}
           />
-        ) : (
-          <div className="text-center p-4 rounded-lg text-gray-600 bg-gray-50 dark:text-gray-300 dark:bg-gray-800">
-            Please connect wallet
-          </div>
         )
       case "receive":
         return (
@@ -1874,6 +1915,10 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           />
         )
       case "account-settings":
+        if (!isConnected) {
+          setCurrentScreen("connect")
+          return
+        }
         return <AccountSettings onBack={handleBack} />
       case "user-preferences":
         return <UserPreferences onBack={handleBack} />
@@ -1889,12 +1934,11 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           />
         )
       case "mesh-connect-exchanges":
-        return (
-          <MeshConnectExchanges
-            onBack={handleBack}
-            getInitialScreenForMode={getInitialScreenForMode}
-          />
-        )
+        return <MeshConnectExchanges onBack={handleBack} />
+      case "home": {
+        // Navigation handled by useEffect above, otherwise it would cause a loop
+        return null
+      }
       default:
         return null
     }
@@ -1902,68 +1946,70 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
 
   const renderScreen = () => {
     return (
-      <ModeProvider
-        value={{
-          mode: currentMode,
-        }}
-      >
-        <PriceImpactWarningProvider
+      <ModalProvider closeModal={handleCloseModal} isModalOpen={isModalOpen}>
+        <ModeProvider
           value={{
-            thresholdBps: priceImpactWarningThresholdBps,
-            warningMessage: priceImpactWarningMessage,
-            fallbackBridgeUrl: priceImpactFallbackBridgeUrl,
+            mode: currentMode,
           }}
         >
-          <motion.div
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.95 }}
-            transition={{
-              type: "spring",
-              stiffness: 200,
-              damping: 30,
-              mass: 1,
+          <PriceImpactWarningProvider
+            value={{
+              thresholdBps: priceImpactWarningThresholdBps,
+              warningMessage: priceImpactWarningMessage,
+              fallbackBridgeUrl: priceImpactFallbackBridgeUrl,
             }}
-            className="flex flex-col min-h-[400px] shadow-xl p-4 sm:p-6 relative w-full sm:w-[400px] mx-auto custom-scrollbar trails-bg-primary trails-text-primary trails-font trails-border-radius-widget trails-widget-border"
-            layout
-            layoutId="modal-container"
-            onClick={(e) => e.stopPropagation()}
           >
-            <AnimatePresence mode="wait">
-              <motion.div
-                key={currentScreen}
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: -20 }}
-                transition={{
-                  type: "spring",
-                  stiffness: 500,
-                  damping: 30,
-                  mass: 0.6,
-                }}
-                className="flex-1 flex flex-col w-full"
-                layout
-              >
-                {renderScreenContent()}
-                {/* Error Display */}
-                {error && (
-                  <div className="mt-2">
-                    <ErrorDisplay
-                      errorPrettified={getPrettifiedErrorMessage(
-                        error,
-                        "An error occured",
-                      )}
-                      error={error}
-                      severity="error"
-                    />
-                  </div>
-                )}
-              </motion.div>
-            </AnimatePresence>
-            <Footer onDebugScreenSelect={handleDebugScreenSelect} />
-          </motion.div>
-        </PriceImpactWarningProvider>
-      </ModeProvider>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={{
+                type: "spring",
+                stiffness: 200,
+                damping: 30,
+                mass: 1,
+              }}
+              className="flex flex-col min-h-[400px] shadow-xl p-4 sm:p-6 relative w-full sm:w-[400px] mx-auto custom-scrollbar trails-bg-primary trails-text-primary trails-font trails-border-radius-widget trails-widget-border"
+              layout
+              layoutId="modal-container"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={currentScreen}
+                  initial={{ opacity: 0, x: 20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={{ opacity: 0, x: -20 }}
+                  transition={{
+                    type: "spring",
+                    stiffness: 500,
+                    damping: 30,
+                    mass: 0.6,
+                  }}
+                  className="flex-1 flex flex-col w-full"
+                  layout
+                >
+                  {renderScreenContent()}
+                  {/* Error Display */}
+                  {error && (
+                    <div className="mt-2">
+                      <ErrorDisplay
+                        errorPrettified={getPrettifiedErrorMessage(
+                          error,
+                          "An error occured",
+                        )}
+                        error={error}
+                        severity="error"
+                      />
+                    </div>
+                  )}
+                </motion.div>
+              </AnimatePresence>
+              <Footer onDebugScreenSelect={handleDebugScreenSelect} />
+            </motion.div>
+          </PriceImpactWarningProvider>
+        </ModeProvider>
+      </ModalProvider>
     )
   }
 
@@ -2009,8 +2055,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
     // Calculate initial screen based on mode and connection state
     // Note: We can't use useAccount here as it needs to be inside WagmiProvider
     // So we'll use a default and let the WidgetContent handle the logic
-    const initialScreen: Screen =
-      props.mode === "receive" ? "receive" : "connect"
+    const initialScreen: Screen = "home"
 
     return (
       <WidgetPropsProvider props={props}>
@@ -2024,8 +2069,8 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
                       <SwapAmountProvider>
                         <ChainFilterProvider>
                           <BalanceVisibleProvider>
-                            <SwapSettingsProvider>
-                              <ThemePreferenceProvider>
+                            <ThemePreferenceProvider>
+                              <SelectedFundMethodProvider>
                                 <ThemeSyncer />
                                 <EarnPoolProvider>
                                   <SelectedMeshExchangeProvider>
@@ -2034,8 +2079,8 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
                                     </DefaultTokenSelectionProvider>
                                   </SelectedMeshExchangeProvider>
                                 </EarnPoolProvider>
-                              </ThemePreferenceProvider>
-                            </SwapSettingsProvider>
+                              </SelectedFundMethodProvider>
+                            </ThemePreferenceProvider>
                           </BalanceVisibleProvider>
                         </ChainFilterProvider>
                       </SwapAmountProvider>
@@ -2062,7 +2107,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)
     }
@@ -2100,7 +2145,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)
     }
@@ -2169,12 +2214,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}>
@@ -2231,6 +2270,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>