0xtrails 0.1.2 → 0.1.3

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, parseUnits, 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 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,
 } from "../error.js"
 import {
   setSequenceIndexerUrl,
@@ -73,11 +73,13 @@ import {
   setSlippageTolerance,
 } from "../config.js"
 import { FundSendForm } from "./components/FundSendForm.js"
+import { Swap } from "./components/Swap.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 +88,24 @@ 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"
 
 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 === "ETH" || token === "USDC") {
+    return true
+  }
+
+  return isAddress(token)
+}
+
 type Screen =
   | "connect"
   | "tokens"
@@ -97,6 +113,7 @@ type Screen =
   | "fund-form"
   | "fund-methods"
   | "earn-pools"
+  | "swap"
   | "wallet-confirmation"
   | "qr-code-deposit"
   | "pending"
@@ -104,6 +121,7 @@ type Screen =
   | "mesh-connect"
   | "wallet-connect"
   | "wallet-list"
+  | "wallet-connection-pending"
 
 export const defaultWalletOptions = ["injected", "walletconnect"]
 
@@ -183,7 +201,7 @@ const useWalletManager = (
   const [walletClient, setWalletClient] = useState<WalletClient | null>(null)
 
   useEffect(() => {
-    const connect = async () => {
+    const connectWallet = async () => {
       try {
         if (!connector) {
           return
@@ -208,7 +226,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 +261,7 @@ const useTransactionState = (
       onOriginConfirmation({
         txHash: originTxHash,
         chainId: originChainId,
-        sessionId: Date.now().toString(),
+        sessionId: getSessionId(),
       })
     }
   }, [originTxHash, onOriginConfirmation, originChainId])
@@ -253,7 +271,7 @@ const useTransactionState = (
       onDestinationConfirmation({
         txHash: destinationTxHash,
         chainId: destinationChainId,
-        sessionId: Date.now().toString(),
+        sessionId: getSessionId(),
       })
     }
   }, [destinationTxHash, onDestinationConfirmation, destinationChainId])
@@ -308,9 +326,6 @@ const useTransactionState = (
 const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
   (
     {
-      appId: sequenceProjectAccessKey,
-      sequenceIndexerUrl,
-      sequenceApiUrl,
       toAddress,
       toAmount,
       toChainId,
@@ -335,20 +350,37 @@ 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 [currentScreen, setCurrentScreen] = useState<Screen>(
-      isConnected ? "tokens" : "connect",
+      isConnected ? (mode === "swap" ? "swap" : "tokens") : "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,10 +396,105 @@ 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 'ETH', 'USDC', or a valid hex address. Received:",
+          toToken,
+        )
+        setError(
+          "Invalid toToken: must be 'ETH', 'USDC', 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 (mode === "fund") {
+        if (toAmount) {
+          setError("toAmount is not allowed in fund mode")
+          return
+        }
+      }
+
+      if (mode === "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, mode, 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)
 
@@ -434,7 +561,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 +572,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,
@@ -489,24 +616,43 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
     // Update screen based on connection state and mode
     useEffect(() => {
       if (isConnected) {
-        if (currentScreen === "connect" || currentScreen === "wallet-list") {
+        if (
+          currentScreen === "connect" ||
+          currentScreen === "wallet-list" ||
+          currentScreen === "wallet-connection-pending"
+        ) {
           if (!alreadyRedirectedToTokens) {
             setAlreadyRedirectedToTokens(true)
-            setCurrentScreen("tokens")
+            // For swap mode, go directly to swap screen, otherwise go to tokens
+            if (mode === "swap") {
+              setCurrentScreen("swap")
+            } else {
+              setCurrentScreen("tokens")
+            }
           }
         }
       } else {
         if (
           currentScreen !== "connect" &&
           currentScreen !== "wallet-connect" &&
-          currentScreen !== "wallet-list"
+          currentScreen !== "wallet-list" &&
+          currentScreen !== "wallet-connection-pending"
         ) {
           setTimeout(() => {
             setCurrentScreen("connect")
           }, 0)
         }
       }
-    }, [isConnected, currentScreen, alreadyRedirectedToTokens])
+    }, [isConnected, currentScreen, alreadyRedirectedToTokens, mode])
+
+    useEffect(() => {
+      if (
+        currentScreen === "wallet-connection-pending" &&
+        alreadyRedirectedToTokens
+      ) {
+        setAlreadyRedirectedToTokens(false)
+      }
+    }, [currentScreen, alreadyRedirectedToTokens])
 
     // Auto-detect mode changes and switch screens accordingly
     useEffect(() => {
@@ -532,6 +678,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       if (!address || !chainId || !connector?.name) {
         return
       }
+
       trackWalletConnected({
         walletType: connector?.name || "",
         address,
@@ -550,34 +697,34 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       }
     }, [selectedPool, mode, generatedCalldata])
 
-    const indexerGatewayClient = useIndexerGatewayClient({
-      indexerGatewayUrl: sequenceIndexerUrl || undefined,
-      projectAccessKey: sequenceProjectAccessKey,
-    })
-
-    const apiClient = useAPIClient({
-      apiUrl: sequenceApiUrl || undefined,
-      projectAccessKey: sequenceProjectAccessKey,
-    })
-
     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 +732,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,7 +749,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       setError(null)
 
       try {
-        await disconnect()
+        await disconnectAsync()
         setAlreadyRedirectedToTokens(false)
       } catch (error) {
         console.error("[trails-sdk] Failed to disconnect:", error)
@@ -610,15 +759,19 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
     }
 
     const handleContinue = () => {
-      setCurrentScreen("tokens")
+      if (mode === "swap") {
+        setCurrentScreen("swap")
+      } 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,
@@ -647,6 +800,8 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
             // Go to earn-pools for pool selection when no specific destination is set
             setCurrentScreen("earn-pools")
           }
+        } else if (mode === "swap") {
+          setCurrentScreen("swap")
         } else {
           setCurrentScreen(mode === "fund" ? "fund-form" : "send-form")
         }
@@ -696,15 +851,22 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
     }
 
     const handleSendAnother = () => {
-      setCurrentScreen("tokens")
+      if (mode === "swap") {
+        setCurrentScreen("swap")
+      } else {
+        setCurrentScreen("tokens")
+      }
       resetState()
     }
 
     const resetState = useCallback(() => {
-      setSelectedFundMethod(null)
+      setSelectedFundMethod("wallet")
       setCurrentScreen("connect")
       setSelectedToken(null)
       setSelectedPool(null)
+      setSelectedWalletId(null)
+      setIsConnecting(false)
+      setShowWalletConnectionRetry(false)
       setGeneratedCalldata(undefined)
       setOriginTxHash("")
       setOriginChainId(null)
@@ -755,6 +917,10 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
           setCurrentScreen("tokens")
           setSelectedToken(null)
           break
+        case "swap":
+          setCurrentScreen("connect")
+          setSelectedToken(null)
+          break
         case "send-form":
           if (mode === "earn" && !toAddress && !toChainId) {
             setCurrentScreen("earn-pools")
@@ -770,6 +936,9 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
         case "wallet-confirmation":
           setCurrentScreen(mode === "fund" ? "fund-form" : "send-form")
           break
+        case "qr-code-deposit":
+          setCurrentScreen(mode === "fund" ? "fund-form" : "send-form")
+          break
         case "receipt":
           setCurrentScreen("tokens")
           setSelectedToken(null)
@@ -783,10 +952,18 @@ 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
       }
@@ -1240,12 +1417,26 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
         case "wallet-list":
           setCurrentScreen("wallet-list")
           break
+        case "wallet-connection-pending":
+          setSelectedWalletId("metamask")
+          setCurrentScreen("wallet-connection-pending")
+          break
+        case "wallet-connection-pending-retry":
+          setSelectedWalletId("metamask")
+          setShowWalletConnectionRetry(true)
+          setCurrentScreen("wallet-connection-pending")
+          break
         case "fund-methods":
           setCurrentScreen("fund-methods")
           break
         case "earn-pools":
           setCurrentScreen("earn-pools")
           break
+        case "swap":
+          setSelectedToken(null)
+          setTransactionStates([])
+          setCurrentScreen("swap")
+          break
       }
     }
 
@@ -1266,7 +1457,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 +1621,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 +1685,6 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       amount: toAmount,
       token: toToken,
       chainId: Number(toChainId),
-      apiClient: apiClient,
     })
 
     const renderScreenContent = () => {
@@ -1497,11 +1692,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 +1736,6 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
             <TokenList
               onContinue={handleTokenSelect}
               onBack={handleBack}
-              indexerGatewayClient={indexerGatewayClient}
               targetAmountUsd={targetAmountUsd}
               targetAmountUsdFormatted={targetAmountUsdFormatted}
               onError={handleTokenListError}
@@ -1694,15 +1904,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 +1937,55 @@ 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={mode}
+              checkoutOnHandlers={checkoutOnHandlers}
+            />
+          ) : (
+            <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-connection-pending":
+          return (
+            <WalletConnectionPending
+              onBack={handleBack}
+              onRetry={() => {
+                if (selectedWalletId) {
+                  setShowWalletConnectionRetry(false)
+                  handleWalletConnect(selectedWalletId)
+                }
+              }}
+              selectedWalletId={selectedWalletId || ""}
+              isConnecting={isConnecting}
+              error={error}
+              showRetry={showWalletConnectionRetry}
+            />
+          )
         default:
           return null
       }
@@ -1781,7 +2051,8 @@ 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 ||
+              (mode === "fund" ? "Fund" : mode === "swap" ? "Swap" : "Pay")}
           </motion.button>
         ) : (
           <motion.div
@@ -1858,15 +2129,7 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
 
       return createConfig({
         ...baseConfig,
-        connectors: [
-          injected(),
-          walletConnect({
-            projectId: getWalletConnectProjectId(),
-            showQrModal: false,
-          }),
-          safe(),
-          baseAccount(),
-        ],
+        connectors: connectors,
       })
     }, [])