0xtrails 0.1.2 → 0.1.4

package/src/widget/widget.tsx

@@ -15,7 +15,7 @@ import React, {
 } from "react"
 import { createPortal } from "react-dom"
 import type { Chain, WalletClient } from "viem"
-import { createWalletClient, custom, http, parseUnits } from "viem"
+import { createWalletClient, custom, http, isAddress } from "viem"
 import * as viemChains from "viem/chains"
 import type { Connector } from "wagmi"
 import {
@@ -26,10 +26,7 @@ import {
   WagmiContext,
   WagmiProvider,
 } from "wagmi"
-import { injected, walletConnect, safe, baseAccount } from "wagmi/connectors"
-import { useAPIClient } from "../apiClient.js"
-import { getChainInfo } from "../chains.js"
-import { useIndexerGatewayClient } from "../indexerClient.js"
+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"
@@ -45,22 +42,25 @@ 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 {
-  getWalletConnectProjectId,
-  setWalletConnectProjectId,
-} from "../config.js"
+import { setWalletConnectProjectId } from "../config.js"
 import { useAmountUsd } from "./hooks/useAmountUsd.js"
 import { useRecentTokens } from "./hooks/useRecentTokens.js"
 import { getWethAddress } from "../tokens.js"
 import css from "./compiled.css?inline"
-import { trackWalletConnected, trackWidgetScreen } from "../analytics.js"
+import {
+  getSessionId,
+  trackWalletConnected,
+  trackWidgetScreen,
+} from "../analytics.js"
 import type { PrepareSendQuote } from "../prepareSend.js"
-import { getNormalizedQuoteObject } from "../prepareSend.js"
 import type { SupportedToken } from "../tokens.js"
 import {
-  getErrorString,
   getIsWalletRejectedError,
   getIsBalanceTooLowError,
+  getFullErrorMessage,
+  getIsApiError,
+  getIsRateLimitedError,
+  getPrettifiedErrorMessage,
 } from "../error.js"
 import {
   setSequenceIndexerUrl,
@@ -73,11 +73,14 @@ import {
   setSlippageTolerance,
 } from "../config.js"
 import { FundSendForm } from "./components/FundSendForm.js"
+import { Swap } from "./components/Swap.js"
+import { Receive } from "./components/Receive.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 type { Mode } from "../mode.js"
 import type { OnCompleteProps } from "./hooks/useSendForm.js"
 import type { Pool } from "../pools.js"
@@ -86,10 +89,26 @@ import { AaveProvider, AaveClient } from "@aave/react"
 import { encodeFunctionData } from "viem"
 import { cssObjectToString } from "../cssUtils.js"
 import { useCheckout } from "./hooks/useCheckout.js"
-import { WALLET_CONFIGS, walletConnectConnector } from "../wallets.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"
 
 export const aaveClient = AaveClient.create()
 
+// Validate toToken - must be "ETH", "USDC", or a valid hex address
+const isValidToToToken = (toToken: string | null | undefined) => {
+  if (toToken === null || toToken === undefined || toToken === "") {
+    return true // Empty values are considered valid
+  }
+  const token = String(toToken).trim()
+  if (token?.length > 0 && token?.length <= 5) {
+    return true
+  }
+
+  return isAddress(token)
+}
+
 type Screen =
   | "connect"
   | "tokens"
@@ -97,6 +116,8 @@ type Screen =
   | "fund-form"
   | "fund-methods"
   | "earn-pools"
+  | "swap"
+  | "receive"
   | "wallet-confirmation"
   | "qr-code-deposit"
   | "pending"
@@ -104,6 +125,7 @@ type Screen =
   | "mesh-connect"
   | "wallet-connect"
   | "wallet-list"
+  | "wallet-connection-pending"
 
 export const defaultWalletOptions = ["injected", "walletconnect"]
 
@@ -183,7 +205,7 @@ const useWalletManager = (
   const [walletClient, setWalletClient] = useState<WalletClient | null>(null)
 
   useEffect(() => {
-    const connect = async () => {
+    const connectWallet = async () => {
       try {
         if (!connector) {
           return
@@ -208,7 +230,7 @@ const useWalletManager = (
         console.error("[trails-sdk] Failed to connect wallet", error)
       }
     }
-    connect().catch(console.error)
+    connectWallet().catch(console.error)
   }, [address, chainId, connector])
 
   return walletClient
@@ -243,7 +265,7 @@ const useTransactionState = (
       onOriginConfirmation({
         txHash: originTxHash,
         chainId: originChainId,
-        sessionId: Date.now().toString(),
+        sessionId: getSessionId(),
       })
     }
   }, [originTxHash, onOriginConfirmation, originChainId])
@@ -253,7 +275,7 @@ const useTransactionState = (
       onDestinationConfirmation({
         txHash: destinationTxHash,
         chainId: destinationChainId,
-        sessionId: Date.now().toString(),
+        sessionId: getSessionId(),
       })
     }
   }, [destinationTxHash, onDestinationConfirmation, destinationChainId])
@@ -269,16 +291,6 @@ const useTransactionState = (
       (tx: TransactionState) => tx.state === "failed",
     )
 
-    console.log(
-      "[trails-sdk] Transaction state monitoring:",
-      "allConfirmed:",
-      allConfirmed,
-      "hasFailures:",
-      hasFailures,
-      "states:",
-      transactionStates.map((tx) => tx.state),
-    )
-
     if (allConfirmed && !hasFailures && onComplete) {
       console.log(
         "[trails-sdk] All transactions confirmed, triggering completion",
@@ -308,9 +320,6 @@ const useTransactionState = (
 const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
   (
     {
-      appId: sequenceProjectAccessKey,
-      sequenceIndexerUrl,
-      sequenceApiUrl,
       toAddress,
       toAmount,
       toChainId,
@@ -335,20 +344,46 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
     ref,
   ) => {
     const { address, isConnected, chainId, connector } = useAccount()
-    const { disconnect } = useDisconnect()
+    const { disconnectAsync } = useDisconnect()
     const { recentTokens, addRecentToken } = useRecentTokens(address)
+    const { wallets: allWallets } = useWallets()
     const [isModalOpen, setIsModalOpen] = useState(false)
+    const [currentMode, setCurrentMode] = useState<Mode>(mode)
     const [currentScreen, setCurrentScreen] = useState<Screen>(
-      isConnected ? "tokens" : "connect",
+      isConnected
+        ? currentMode === "swap"
+          ? "swap"
+          : currentMode === "receive"
+            ? "receive"
+            : "tokens"
+        : currentMode === "receive"
+          ? "receive"
+          : "connect",
     )
     const [selectedToken, setSelectedToken] = useState<Token | null>(null)
-    const [selectedFundMethod, setSelectedFundMethod] = useState<string | null>(
-      null,
-    )
+    const [selectedFundMethod, setSelectedFundMethod] =
+      useState<string>("wallet")
     const [selectedPool, setSelectedPool] = useState<Pool | null>(null)
     const [selectedWalletId, setSelectedWalletId] = useState<string | null>(
-      null,
+      () => {
+        // Initialize from localStorage if available
+        if (typeof window !== "undefined") {
+          try {
+            return localStorage.getItem("trails-last-wallet") || null
+          } catch (error) {
+            console.error(
+              "[trails-sdk] Failed to read from localStorage:",
+              error,
+            )
+            return null
+          }
+        }
+        return null
+      },
     )
+    const [isConnecting, setIsConnecting] = useState(false)
+    const [showWalletConnectionRetry, setShowWalletConnectionRetry] =
+      useState(false)
     const [generatedCalldata, setGeneratedCalldata] = useState<
       string | undefined
     >(undefined)
@@ -364,12 +399,108 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
     const [totalCompletionSeconds, setTotalCompletionSeconds] = useState<
       number | null
     >(null)
-    const { connect } = useConnect()
+    const { connectAsync } = useConnect()
+
+    // Validate widget props
+    useEffect(() => {
+      const isValidToAmount = isValidNumeric(toAmount)
+      const isValidToChainId = isValidInteger(toChainId)
+      const isValidToToken = isValidToToToken(toToken)
+      const isValidToAddress = toAddress ? isAddress(toAddress) : true
+
+      if (
+        isValidToAmount &&
+        isValidToChainId &&
+        isValidToToken &&
+        isValidToAddress
+      ) {
+        setError(null)
+        return
+      }
+
+      // Validate toAmount - must be numeric if provided
+      if (!isValidToAmount) {
+        console.error(
+          "[trails-sdk] Invalid toAmount prop: must be numeric. Received:",
+          toAmount,
+        )
+        setError("Invalid toAmount: must be a numeric value")
+        return
+      }
+
+      // Validate toChainId - must be numeric if provided
+      if (!isValidToChainId) {
+        console.error(
+          "[trails-sdk] Invalid toChainId prop: must be numeric. Received:",
+          toChainId,
+        )
+        setError("Invalid toChainId: must be a numeric value")
+        return
+      }
+
+      // Validate toToken - must be "ETH", "USDC", or a valid hex address
+      if (!isValidToToken) {
+        console.error(
+          "[trails-sdk] Invalid toToken prop: must be a valid token symbol or a valid hex address. Received:",
+          toToken,
+        )
+        setError(
+          "Invalid toToken: must be a valid token symbol or a valid hex address",
+        )
+        return
+      }
+
+      if (!isValidToAddress) {
+        console.error(
+          "[trails-sdk] Invalid toAddress prop: must be a valid hex address. Received:",
+          toAddress,
+        )
+        setError("Invalid toAddress: must be a valid hex address")
+      }
+
+      if (currentMode === "fund") {
+        if (toAmount) {
+          setError("toAmount is not allowed in fund mode")
+          return
+        }
+      }
+
+      if (currentMode === "swap") {
+        if (toAmount) {
+          setError("toAmount is not allowed in swap mode")
+          return
+        }
+        if (toChainId) {
+          setError("toChainId is not allowed in swap mode")
+          return
+        }
+        if (toToken) {
+          setError("toToken is not allowed in swap mode")
+        }
+        if (toAddress) {
+          setError("toAddress is not allowed in swap mode")
+          return
+        }
+      }
+    }, [toAmount, toChainId, toToken, currentMode, toAddress])
 
     const walletClient = useWalletManager(address, chainId, connector)
 
+    // Function to save wallet ID to localStorage
+    const saveLastClickedWallet = (walletId: string) => {
+      setSelectedWalletId(walletId)
+      if (typeof window !== "undefined") {
+        try {
+          localStorage.setItem("trails-last-wallet", walletId)
+        } catch (error) {
+          console.error("[trails-sdk] Failed to save to localStorage:", error)
+        }
+      }
+    }
+
     const [meshConnectProps, setMeshConnectProps] =
       useState<Partial<MeshConnectProps> | null>(null)
+    const [isNavigatingBack, setIsNavigatingBack] = useState(false)
 
     // Hook to auto-select pool when mode is "earn" and toAddress is specified
     const useAutoSelectPool = (
@@ -434,7 +565,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
 
           if (matchingPool) {
             console.log(
-              "[trails-sdk] Auto-selected pool for toAddress:",
+              `[trails-sdk] Auto-selected pool for ${mode} mode toAddress:`,
               toAddress,
               "toChainId:",
               targetChainId,
@@ -445,7 +576,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
             setSelectedPool(matchingPool)
           } else {
             console.log(
-              "[trails-sdk] No matching pool found for toAddress:",
+              `[trails-sdk] No matching pool found for ${mode} mode toAddress:`,
               toAddress,
               "toChainId:",
               targetChainId,
@@ -459,7 +590,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       return { poolsLoading }
     }
 
-    useAutoSelectPool(mode, toAddress, toChainId, toToken)
+    useAutoSelectPool(currentMode, toAddress, toChainId, toToken)
 
     const {
       setOriginTxHash,
@@ -482,31 +613,78 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       onCheckoutStatusUpdate,
     })
 
+    // Use the debug screens hook
+    const { handleDebugScreenSelect } = useDebugScreens({
+      setCurrentScreen,
+      setSelectedToken,
+      setTransactionStates,
+      setPrepareSendQuote,
+      setShowWalletConfirmRetry,
+      setCurrentMode,
+      setSelectedWalletId,
+      setShowWalletConnectionRetry,
+      setError,
+      setIsConnecting,
+      setMeshConnectProps,
+      isConnected,
+    })
+
     // redirect to tokens screen only once after initial connection
     const [alreadyRedirectedToTokens, setAlreadyRedirectedToTokens] =
       useState(false)
 
     // Update screen based on connection state and mode
     useEffect(() => {
+      if (isNavigatingBack) {
+        return
+      }
       if (isConnected) {
-        if (currentScreen === "connect" || currentScreen === "wallet-list") {
+        if (
+          currentScreen === "connect" ||
+          currentScreen === "wallet-list" ||
+          currentScreen === "wallet-connection-pending"
+        ) {
           if (!alreadyRedirectedToTokens) {
             setAlreadyRedirectedToTokens(true)
-            setCurrentScreen("tokens")
+            // Route to appropriate screen based on mode
+            if (currentMode === "swap") {
+              setCurrentScreen("swap")
+            } else if (currentMode === "receive") {
+              setCurrentScreen("receive")
+            } else {
+              setCurrentScreen("tokens")
+            }
           }
         }
       } else {
         if (
           currentScreen !== "connect" &&
           currentScreen !== "wallet-connect" &&
-          currentScreen !== "wallet-list"
+          currentScreen !== "wallet-list" &&
+          currentScreen !== "wallet-connection-pending" &&
+          currentScreen !== "receive"
         ) {
           setTimeout(() => {
             setCurrentScreen("connect")
           }, 0)
         }
       }
-    }, [isConnected, currentScreen, alreadyRedirectedToTokens])
+    }, [
+      isConnected,
+      currentScreen,
+      alreadyRedirectedToTokens,
+      currentMode,
+      isNavigatingBack,
+    ])
+
+    useEffect(() => {
+      if (
+        currentScreen === "wallet-connection-pending" &&
+        alreadyRedirectedToTokens
+      ) {
+        setAlreadyRedirectedToTokens(false)
+      }
+    }, [currentScreen, alreadyRedirectedToTokens])
 
     // Auto-detect mode changes and switch screens accordingly
     useEffect(() => {
@@ -514,12 +692,12 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
         selectedToken &&
         (currentScreen === "send-form" || currentScreen === "fund-form")
       ) {
-        const targetScreen = mode === "fund" ? "fund-form" : "send-form"
+        const targetScreen = currentMode === "fund" ? "fund-form" : "send-form"
         if (currentScreen !== targetScreen) {
           setCurrentScreen(targetScreen)
         }
       }
-    }, [mode, currentScreen, selectedToken])
+    }, [currentMode, currentScreen, selectedToken])
 
     useEffect(() => {
       trackWidgetScreen({
@@ -532,6 +710,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       if (!address || !chainId || !connector?.name) {
         return
       }
+
       trackWalletConnected({
         walletType: connector?.name || "",
         address,
@@ -541,43 +720,43 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
 
     // Update generated calldata when amount changes in earn mode
     useEffect(() => {
-      if (selectedPool && mode === "earn" && generatedCalldata) {
+      if (selectedPool && currentMode === "earn" && generatedCalldata) {
         // The calldata will be updated via the onAmountUpdate callback
         // This effect ensures we have the initial calldata set up
         console.log(
           "Earn mode: Pool selected, calldata ready for amount updates",
         )
       }
-    }, [selectedPool, mode, generatedCalldata])
-
-    const indexerGatewayClient = useIndexerGatewayClient({
-      indexerGatewayUrl: sequenceIndexerUrl || undefined,
-      projectAccessKey: sequenceProjectAccessKey,
-    })
-
-    const apiClient = useAPIClient({
-      apiUrl: sequenceApiUrl || undefined,
-      projectAccessKey: sequenceProjectAccessKey,
-    })
+    }, [selectedPool, currentMode, generatedCalldata])
 
     const handleWalletConnect = async (walletId: string) => {
       try {
         setError(null)
+        setIsConnecting(true)
 
         // Handle special case for wallet-list screen
         if (walletId === "wallet-list") {
           setCurrentScreen("wallet-list")
+          setIsConnecting(false)
           return
         }
 
-        const config = WALLET_CONFIGS[walletId as keyof typeof WALLET_CONFIGS]
+        const config = allWallets.find((w) => w.id === walletId)
         if (!config) {
           setError(`No configuration found for wallet: ${walletId}`)
+          setIsConnecting(false)
           return
         }
-        console.log("[trails-sdk] Connecting to wallet", walletId)
+        console.log("[trails-sdk] Initiating connection to wallet", walletId)
         if (config.connector !== walletConnectConnector) {
-          await connect({ connector: config.connector() })
+          console.log(
+            "[trails-sdk] Initiating connection to walletId",
+            walletId,
+          )
+          await connectAsync({ connector: config.connector })
+          console.log(`[trails-sdk] Successfully connected to ${config.name}`)
+          // Set the last clicked wallet after successful connection
+          saveLastClickedWallet(walletId)
         } else if (config.connector === walletConnectConnector) {
           // Store the current connector as previous before switching to WalletConnect
           if (connector && connector.name !== "WalletConnect") {
@@ -585,14 +764,16 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
           }
           // Route to dedicated WalletConnect screen where we show our own QR
           setCurrentScreen("wallet-connect")
+          setIsConnecting(false)
           return
         }
-        console.log(`[trails-sdk] Connected to ${config.name}`)
+        setIsConnecting(false)
       } catch (error) {
         console.error("[trails-sdk] Failed to connect:", error)
         setError(
           error instanceof Error ? error.message : "Failed to connect wallet",
         )
+        setIsConnecting(false)
       }
     }
 
@@ -600,25 +781,35 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       setError(null)
 
       try {
-        await disconnect()
+        await disconnectAsync()
         setAlreadyRedirectedToTokens(false)
       } catch (error) {
         console.error("[trails-sdk] Failed to disconnect:", error)
       }
 
-      setCurrentScreen("connect")
+      if (currentMode === "receive") {
+        setCurrentScreen("receive")
+      } else {
+        setCurrentScreen("connect")
+      }
     }
 
     const handleContinue = () => {
-      setCurrentScreen("tokens")
+      if (currentMode === "swap") {
+        setCurrentScreen("swap")
+      } else if (currentMode === "receive") {
+        setCurrentScreen("receive")
+      } else {
+        setCurrentScreen("tokens")
+      }
     }
 
     const getAvailableWallets = (): WalletOption[] => {
       const requestedWallets = walletOptions || defaultWalletOptions
       const availableWallets = requestedWallets
-        .filter((id) => WALLET_CONFIGS[id as keyof typeof WALLET_CONFIGS])
+        .filter((id) => allWallets.find((w) => w.id === id))
         .map((id) => {
-          const config = WALLET_CONFIGS[id as keyof typeof WALLET_CONFIGS]
+          const config = allWallets.find((w) => w.id === id)
           if (!config) return null
           return {
             id: config.id,
@@ -636,7 +827,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
         setSelectedToken(token)
 
         // For earn mode, check if we have toAddress and toChainId specified
-        if (mode === "earn") {
+        if (currentMode === "earn") {
           if (toAddress && toChainId) {
             // Skip earn-pools and go directly to send-form when toAddress and toChainId are specified
             setCurrentScreen("send-form")
@@ -647,23 +838,15 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
             // Go to earn-pools for pool selection when no specific destination is set
             setCurrentScreen("earn-pools")
           }
+        } else if (currentMode === "swap") {
+          setCurrentScreen("swap")
+        } else if (currentMode === "receive") {
+          setCurrentScreen("send-form")
         } else {
-          setCurrentScreen(mode === "fund" ? "fund-form" : "send-form")
+          setCurrentScreen(currentMode === "fund" ? "fund-form" : "send-form")
         }
 
-        // Track the token in recent tokens
-        const chainInfo = getChainInfo(token.chainId)
-        const supportedToken: SupportedToken = {
-          id: `${token.symbol}-${chainInfo?.name || token.chainId}`,
-          symbol: token.symbol,
-          name: token.name,
-          contractAddress: token.contractAddress,
-          decimals: token.contractInfo?.decimals || 18,
-          chainId: token.chainId,
-          chainName: chainInfo?.name || `Chain ${token.chainId}`,
-          imageUrl: token.imageUrl,
-        }
-        addRecentToken(supportedToken)
+        handleTrackToken(token)
       } catch (err) {
         setError(
           err instanceof Error ? err.message : "An unknown error occurred",
@@ -691,20 +874,46 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       handleTokenSelect(token)
     }
 
+    const handleTrackToken = (token: Token) => {
+      // Track the token in recent tokens
+      const chainInfo = getChainInfo(token.chainId)
+      const supportedToken: SupportedToken = {
+        id: `${token.symbol}-${chainInfo?.name || token.chainId}`,
+        symbol: token.symbol,
+        name: token.name,
+        contractAddress: token.contractAddress,
+        decimals: token.contractInfo?.decimals || (token as any).decimals || 18,
+        chainId: token.chainId,
+        chainName: chainInfo?.name || `Chain ${token.chainId}`,
+        imageUrl: token.imageUrl,
+      }
+      addRecentToken(supportedToken)
+    }
+
     const handleOnSend = async (amount: string, recipient: string) => {
       console.log("[trails-sdk] handleOnSend", amount, recipient)
     }
 
     const handleSendAnother = () => {
-      setCurrentScreen("tokens")
+      if (currentMode === "swap") {
+        setCurrentScreen("swap")
+      } else if (currentMode === "receive") {
+        setCurrentScreen("receive")
+      } else {
+        setCurrentScreen("tokens")
+      }
       resetState()
     }
 
     const resetState = useCallback(() => {
-      setSelectedFundMethod(null)
-      setCurrentScreen("connect")
+      setSelectedFundMethod("wallet")
+      // Reset to appropriate screen based on mode
+      setCurrentScreen(currentMode === "receive" ? "receive" : "connect")
       setSelectedToken(null)
       setSelectedPool(null)
+      setSelectedWalletId(null)
+      setIsConnecting(false)
+      setShowWalletConnectionRetry(false)
       setGeneratedCalldata(undefined)
       setOriginTxHash("")
       setOriginChainId(null)
@@ -713,12 +922,14 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       setTransactionStates([])
       setPrepareSendQuote(null)
       setTotalCompletionSeconds(null)
+      setAlreadyRedirectedToTokens(false)
     }, [
       setDestinationTxHash,
       setDestinationChainId,
       setTransactionStates,
       setOriginTxHash,
       setOriginChainId,
+      currentMode,
     ])
 
     // Expose modal control methods via ref
@@ -744,6 +955,13 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
 
     const handleBack = () => {
       setError(null)
+      console.log("[trails-sdk] handleBack", currentScreen)
+
+      // Set flag to prevent auto-selection when navigating back
+      if (setIsNavigatingBack) {
+        setIsNavigatingBack(true)
+      }
+
       switch (currentScreen) {
         case "fund-methods":
           setCurrentScreen("connect")
@@ -755,8 +973,15 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
           setCurrentScreen("tokens")
           setSelectedToken(null)
           break
+        case "swap":
+          setCurrentScreen("connect")
+          setSelectedToken(null)
+          break
+        case "receive":
+          setCurrentScreen("connect")
+          break
         case "send-form":
-          if (mode === "earn" && !toAddress && !toChainId) {
+          if (currentMode === "earn" && !toAddress && !toChainId) {
             setCurrentScreen("earn-pools")
           } else {
             setCurrentScreen("tokens")
@@ -768,11 +993,39 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
           setSelectedToken(null)
           break
         case "wallet-confirmation":
-          setCurrentScreen(mode === "fund" ? "fund-form" : "send-form")
+          setCurrentScreen(
+            currentMode === "fund"
+              ? "fund-form"
+              : currentMode === "swap"
+                ? "swap"
+                : currentMode === "receive"
+                  ? "receive"
+                  : currentMode === "earn"
+                    ? "earn-pools"
+                    : "send-form",
+          )
+          break
+        case "qr-code-deposit":
+          setCurrentScreen(
+            currentMode === "fund"
+              ? "fund-form"
+              : currentMode === "swap"
+                ? "swap"
+                : currentMode === "receive"
+                  ? "receive"
+                  : currentMode === "earn"
+                    ? "earn-pools"
+                    : "send-form",
+          )
           break
         case "receipt":
-          setCurrentScreen("tokens")
-          setSelectedToken(null)
+          // In receive mode, going back should go to receive screen
+          if (currentMode === "receive") {
+            setCurrentScreen("receive")
+          } else {
+            setCurrentScreen("tokens")
+            setSelectedToken(null)
+          }
           setDestinationTxHash("")
           setDestinationChainId(null)
           setOriginTxHash("")
@@ -783,13 +1036,28 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
           break
         case "wallet-connect":
           setCurrentScreen("wallet-list")
+          setSelectedWalletId(null)
           break
         case "wallet-list":
           setCurrentScreen("connect")
           break
+        case "wallet-connection-pending":
+          setCurrentScreen("wallet-list")
+          setSelectedWalletId(null)
+          setError(null)
+          setIsConnecting(false)
+          setShowWalletConnectionRetry(false)
+          break
         default:
           break
       }
+
+      // Reset the flag after a short delay to allow the screen change to complete
+      if (setIsNavigatingBack) {
+        setTimeout(() => {
+          setIsNavigatingBack(false)
+        }, 100)
+      }
     }
 
     function handleWalletConfirmComplete() {
@@ -849,406 +1117,6 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       setTransactionStates([..._transactionStates])
     }
 
-    const handleDebugScreenSelect = async (screen: string) => {
-      // Reset necessary state based on the target screen
-      setError(null)
-
-      const dummySelectedToken = {
-        id: 1,
-        name: "USD Coin",
-        symbol: "USDC",
-        balance: parseUnits("1.99", 6)?.toString(),
-        imageUrl:
-          "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
-        chainId: 1,
-        contractAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
-        contractInfo: {
-          decimals: 6,
-          symbol: "USDC",
-          name: "USD Coin",
-        },
-      }
-
-      const dummyQuote = await getNormalizedQuoteObject({
-        originAddress: "0x5A0fb747531bC369367CB031472b89ea4D5c6Df7",
-        originAmount: parseUnits("1", 6)?.toString(),
-        originTokenAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
-        originChainId: 1,
-        originTokenPriceUsd: "1",
-        destinationChainId: 137,
-        destinationTokenAddress: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
-        destinationAmount: parseUnits("0.97", 6)?.toString(),
-        destinationTokenPriceUsd: "1",
-      })
-
-      switch (screen) {
-        case "connect":
-          setSelectedToken(null)
-          setTransactionStates([])
-          setCurrentScreen("connect")
-          break
-        case "tokens":
-          if (isConnected) {
-            setSelectedToken(null)
-            setTransactionStates([])
-            setCurrentScreen("tokens")
-          }
-          break
-        case "send-form":
-          // Set dummy USDC token for debug mode
-          setSelectedToken(dummySelectedToken)
-          setTransactionStates([])
-          setCurrentScreen("send-form")
-          break
-        case "fund-form":
-          // Set dummy USDC token for debug mode
-          setSelectedToken(dummySelectedToken)
-          setTransactionStates([])
-          setCurrentScreen("fund-form")
-          break
-        case "wallet-confirmation":
-          // Set dummy USDC token for debug mode
-          setSelectedToken(dummySelectedToken)
-          setPrepareSendQuote(dummyQuote)
-          setTransactionStates([])
-          setShowWalletConfirmRetry(false)
-          setCurrentScreen("wallet-confirmation")
-          break
-        case "wallet-confirmation-retry":
-          // Set dummy USDC token for debug mode
-          setSelectedToken(dummySelectedToken)
-          setPrepareSendQuote(dummyQuote)
-          setTransactionStates([])
-          setShowWalletConfirmRetry(true)
-          setCurrentScreen("wallet-confirmation")
-          break
-        case "pending-1-item-0-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "pending",
-              label: "Swap",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-1-item-1-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Swap",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-2-item-0-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "pending",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "pending",
-              label: "Swap",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-2-item-1-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "pending",
-              label: "Swap",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-2-item-2-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "confirmed",
-              label: "Swap",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-3-item-0-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "pending",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "pending",
-              label: "Swap & Bridge",
-            },
-            {
-              transactionHash:
-                "0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              explorerUrl:
-                "https://arbiscan.io/tx/0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              chainId: 42161,
-              state: "pending",
-              label: "Execute",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-3-item-1-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "pending",
-              label: "Swap & Bridge",
-            },
-            {
-              transactionHash:
-                "0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              explorerUrl:
-                "https://arbiscan.io/tx/0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              chainId: 42161,
-              state: "pending",
-              label: "Execute",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-3-item-2-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "confirmed",
-              label: "Swap & Bridge",
-            },
-            {
-              transactionHash:
-                "0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              explorerUrl:
-                "https://arbiscan.io/tx/0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              chainId: 42161,
-              state: "pending",
-              label: "Execute",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-3-item-3-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "confirmed",
-              label: "Swap & Bridge",
-            },
-            {
-              transactionHash:
-                "0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              explorerUrl:
-                "https://arbiscan.io/tx/0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              chainId: 42161,
-              state: "confirmed",
-              label: "Execute",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "receipt":
-          // Set dummy transaction states data for debug mode
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "confirmed",
-              label: "Swap & Bridge",
-            },
-            {
-              transactionHash:
-                "0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              explorerUrl:
-                "https://arbiscan.io/tx/0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              chainId: 42161,
-              state: "confirmed",
-              label: "Execute",
-            },
-          ])
-
-          setCurrentScreen("receipt")
-          break
-        case "receipt-failed":
-          // Set dummy transaction states data for debug mode
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "confirmed",
-              label: "Swap & Bridge",
-            },
-            {
-              transactionHash: "",
-              explorerUrl: "",
-              chainId: 42161,
-              state: "failed",
-              label: "Execute",
-            },
-          ])
-
-          setCurrentScreen("receipt")
-          break
-        case "mesh-connect":
-          setCurrentScreen("mesh-connect")
-          break
-        case "wallet-connect":
-          setCurrentScreen("wallet-connect")
-          break
-        case "wallet-list":
-          setCurrentScreen("wallet-list")
-          break
-        case "fund-methods":
-          setCurrentScreen("fund-methods")
-          break
-        case "earn-pools":
-          setCurrentScreen("earn-pools")
-          break
-      }
-    }
-
     const handleSelectWalletConnect = () => {
       // Store the current connector as previous before switching to WalletConnect
       if (connector && connector.name !== "WalletConnect") {
@@ -1266,7 +1134,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
           )
 
           try {
-            await connect({ connector: previousConnector })
+            await connectAsync({ connector: previousConnector })
           } catch (error) {
             console.error(
               "[trails-sdk] Failed to reconnect to previous wallet:",
@@ -1430,12 +1298,17 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       if (error) {
         console.error("[trails-sdk] Error sending transaction", error)
       }
-      const errorMessage = getErrorString(error)
+      const errorMessage = getFullErrorMessage(error)
       const isRejected = getIsWalletRejectedError(error)
       const isBalanceTooLow = getIsBalanceTooLowError(error)
-      if (isRejected) {
+      const isApiError = getIsApiError(error)
+      const isRateLimited = getIsRateLimitedError(error)
+
+      if (isRateLimited) {
+        // no-op
+      } else if (isRejected) {
         setShowWalletConfirmRetry(true)
-      } else if (isBalanceTooLow) {
+      } else if (isBalanceTooLow || isApiError) {
         setShowWalletConfirmRetry(true)
         setError(errorMessage)
       } else {
@@ -1489,7 +1362,6 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       amount: toAmount,
       token: toToken,
       chainId: Number(toChainId),
-      apiClient: apiClient,
     })
 
     const renderScreenContent = () => {
@@ -1497,11 +1369,27 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
         case "connect":
           return (
             <ConnectWallet
-              onConnect={handleWalletConnect}
+              onConnect={(walletId) => {
+                if (
+                  allWallets.find((w) => w.id === walletId)?.connector ===
+                  walletConnectConnector
+                ) {
+                  saveLastClickedWallet(walletId)
+                  setCurrentScreen("wallet-connect")
+                } else {
+                  saveLastClickedWallet(walletId)
+                  setCurrentScreen("wallet-connection-pending")
+                  // Auto-trigger connection
+                  setTimeout(() => {
+                    handleWalletConnect(walletId)
+                  }, 100)
+                }
+              }}
               onDisconnect={handleWalletDisconnect}
               onContinue={handleContinue}
               walletOptions={getAvailableWallets()}
               onError={handleConnectError}
+              lastClickedWallet={selectedWalletId}
             />
           )
         case "fund-methods":
@@ -1525,7 +1413,6 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
             <TokenList
               onContinue={handleTokenSelect}
               onBack={handleBack}
-              indexerGatewayClient={indexerGatewayClient}
               targetAmountUsd={targetAmountUsd}
               targetAmountUsdFormatted={targetAmountUsdFormatted}
               onError={handleTokenListError}
@@ -1578,7 +1465,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
               onAmountUpdate={(amount: string) => {
                 if (
                   selectedPool &&
-                  mode === "earn" &&
+                  currentMode === "earn" &&
                   amount &&
                   amount !== ""
                 ) {
@@ -1597,7 +1484,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
                   setGeneratedCalldata(undefined)
                 }
               }}
-              mode={mode}
+              mode={currentMode}
               selectedPool={selectedPool}
               checkoutOnHandlers={checkoutOnHandlers}
             />
@@ -1655,6 +1542,8 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
               onElapsedTime={handleElapsedTime}
               transactionStates={transactionStates}
               quote={prepareSendQuote}
+              mode={currentMode}
+              onContinue={() => setCurrentScreen("receipt")}
             />
           )
         case "receipt":
@@ -1694,15 +1583,26 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
               onBack={handleBack}
               onWalletSelect={(walletId) => {
                 if (
-                  WALLET_CONFIGS[walletId]?.connector === walletConnectConnector
+                  allWallets.find((w) => w.id === walletId)?.connector ===
+                  walletConnectConnector
                 ) {
-                  setSelectedWalletId(walletId)
+                  saveLastClickedWallet(walletId)
                   setCurrentScreen("wallet-connect")
                 } else {
-                  handleWalletConnect(walletId)
+                  saveLastClickedWallet(walletId)
+                  setCurrentScreen("wallet-connection-pending")
+                  // Auto-trigger connection
+                  setTimeout(() => {
+                    handleWalletConnect(walletId)
+                  }, 100)
                 }
               }}
-              walletOptions={Object.values(WALLET_CONFIGS)}
+              walletOptions={allWallets.map((wallet) => ({
+                id: wallet.id,
+                name: wallet.name,
+                icon: wallet.icon,
+                connector: wallet.connector,
+              }))}
             />
           )
         case "earn-pools":
@@ -1716,6 +1616,69 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
               }}
             />
           )
+        case "swap":
+          return walletClient?.account ? (
+            <Swap
+              onSend={handleOnSend}
+              onBack={handleBack}
+              onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
+              onConfirm={() => setCurrentScreen("pending")}
+              onComplete={handleTransferComplete}
+              selectedToken={selectedToken}
+              account={walletClient.account}
+              toRecipient={toAddress || undefined}
+              toAmount={toAmount || undefined}
+              toChainId={toChainId ? Number(toChainId) : undefined}
+              toToken={toToken || undefined}
+              toCalldata={toCalldata || undefined}
+              walletClient={walletClient}
+              onTransactionStateChange={handleTransactionStateChange}
+              onError={handleSendError}
+              paymasterUrls={paymasterUrls}
+              gasless={gasless}
+              setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
+              quoteProvider={quoteProvider}
+              fundMethod={selectedFundMethod}
+              onNavigateToMeshConnect={handleNavigateToMeshConnect}
+              onAmountUpdate={undefined}
+              mode={currentMode}
+              checkoutOnHandlers={checkoutOnHandlers}
+              recentTokens={recentTokens}
+              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 (
+            <Receive
+              accountAddress={toAddress || ""}
+              onBack={handleBack}
+              isConnected={isConnected}
+              onConnectWallet={() => setCurrentScreen("connect")}
+              onPay={() => setCurrentScreen("tokens")}
+              toChainId={toChainId ? Number(toChainId) : undefined}
+            />
+          )
+        case "wallet-connection-pending":
+          return (
+            <WalletConnectionPending
+              onBack={handleBack}
+              onRetry={() => {
+                if (selectedWalletId) {
+                  setShowWalletConnectionRetry(false)
+                  handleWalletConnect(selectedWalletId)
+                }
+              }}
+              selectedWalletId={selectedWalletId || ""}
+              isConnecting={isConnecting}
+              error={error}
+              showRetry={showWalletConnectionRetry}
+            />
+          )
         default:
           return null
       }
@@ -1754,11 +1717,17 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
               layout
             >
               {renderScreenContent()}
+              {/* Error Display */}
               {error && (
-                <div className="border rounded-lg p-4 mt-4 bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800">
-                  <p className="text-sm break-words text-red-600 dark:text-red-200">
-                    {error}
-                  </p>
+                <div className="mt-2">
+                  <ErrorDisplay
+                    errorPrettified={getPrettifiedErrorMessage(
+                      error,
+                      "An error occured",
+                    )}
+                    error={error}
+                    severity="error"
+                  />
                 </div>
               )}
             </motion.div>
@@ -1772,6 +1741,25 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       return renderScreen()
     }
 
+    const defaultButtonText = useMemo(() => {
+      if (currentMode === "fund") {
+        return "Fund"
+      }
+      if (currentMode === "swap") {
+        return "Swap"
+      }
+      if (currentMode === "earn") {
+        return "Earn"
+      }
+      if (currentMode === "receive") {
+        return "Receive"
+      }
+      if (currentMode === "pay") {
+        return "Pay"
+      }
+      return "Pay"
+    }, [currentMode])
+
     return (
       <div className="flex flex-col items-center justify-center space-y-8 py-12">
         {!children ? (
@@ -1781,7 +1769,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
             onClick={() => setIsModalOpen(true)}
             className="trails-modal-button cursor-pointer font-semibold py-3 px-6 trails-font"
           >
-            {buttonText || (mode === "fund" ? "Fund" : "Pay")}
+            {buttonText || defaultButtonText}
           </motion.button>
         ) : (
           <motion.div
@@ -1847,28 +1835,20 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       const chains = [...Object.values(viemChains)] as any
       const baseConfig = {
         chains,
-        transports: (chains as Array<Chain>).reduce(
-          (acc, chain) => ({
+        transports: (chains as Array<Chain>).reduce((acc, chain) => {
+          const sequenceRpcUrl = getRpcUrl(chain.id, props.appId)
+          return {
             ...acc,
-            [chain.id]: http(),
-          }),
-          {},
-        ) as Record<number, ReturnType<typeof http>>,
+            [chain.id]: sequenceRpcUrl ? http(sequenceRpcUrl) : http(),
+          }
+        }, {}) as Record<number, ReturnType<typeof http>>,
       }
 
       return createConfig({
         ...baseConfig,
-        connectors: [
-          injected(),
-          walletConnect({
-            projectId: getWalletConnectProjectId(),
-            showQrModal: false,
-          }),
-          safe(),
-          baseAccount(),
-        ],
+        connectors: connectors,
       })
-    }, [])
+    }, [props.appId])
 
     // Create content with only the providers that don't exist in parent
     const content = (() => {