0xtrails 0.2.5 → 0.3.0

package/src/widget/widget.tsx

@@ -4,6 +4,7 @@ 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,
@@ -16,13 +17,7 @@ import React, {
 } from "react"
 import { createPortal } from "react-dom"
 import type { Chain, WalletClient } from "viem"
-import {
-  createWalletClient,
-  custom,
-  encodeFunctionData,
-  http,
-  isAddress,
-} from "viem"
+import { createWalletClient, custom, http, isAddress } from "viem"
 import type { Connector } from "wagmi"
 import {
   createConfig,
@@ -31,6 +26,7 @@ import {
   useConnect,
   useConnections,
   useDisconnect,
+  useSwitchAccount,
   WagmiContext,
   WagmiProvider,
 } from "wagmi"
@@ -45,15 +41,10 @@ import { getAllChains, getChainInfo, getRpcUrl } from "../chains.js"
 import {
   getCommitHash,
   getDebug,
-  getSequenceApiUrl,
-  getSequenceEnv,
   getSequenceIndexerUrl,
   getSequenceNodeGatewayUrl,
-  getSequenceProjectAccessKey,
   getTrailsApiUrl,
   setDebug,
-  setSequenceApiUrl,
-  setSequenceEnv,
   setSequenceIndexerUrl,
   setSequenceNodeGatewayUrl,
   setSequenceProjectAccessKey,
@@ -67,7 +58,7 @@ import {
   getIsApiError,
   getIsBalanceTooLowError,
   getIsRateLimitedError,
-  getIsWalletRejectedError,
+  getIsUserRejectionError,
   getPrettifiedErrorMessage,
 } from "../error.js"
 import { logger } from "../logger.js"
@@ -76,7 +67,7 @@ import type { Pool } from "../pools.js"
 import { usePools } from "../pools.js"
 import type { PrepareSendQuote } from "../prepareSend.js"
 import { isValidInteger, isValidNumeric } from "../prices.js"
-import type { MetaTxnReceipt, RelayerEnv } from "../relayer.js"
+import type { MetaTxnReceipt } from "../transactionIntent/types.js"
 import type { Theme } from "../theme.js"
 import type { SupportedToken } from "../tokens.js"
 import { getWethAddress } from "../tokens.js"
@@ -124,6 +115,10 @@ import {
   useCurrentScreen,
   type Screen,
 } from "./hooks/useCurrentScreen.js"
+import {
+  WalletConnectionProvider,
+  useWalletConnectionContext,
+} from "./hooks/useWalletConnectionContext.js"
 import { useDebugScreens } from "./hooks/useDebugScreens.js"
 import { DefaultTokenSelectionProvider } from "./hooks/useDefaultTokenSelection.js"
 import { DestinationSelectedTokenProvider } from "./hooks/useDestinationSelectedToken.js"
@@ -142,7 +137,10 @@ import {
   SelectedMeshExchangeProvider,
   useSelectedMeshExchange,
 } from "./hooks/useSelectedMeshExchange.js"
-import { SelectedRecipientProvider } from "./hooks/useSelectedRecipient.js"
+import {
+  SelectedRecipientProvider,
+  useSelectedRecipient,
+} from "./hooks/useSelectedRecipient.js"
 import type { OnCompleteProps } from "./hooks/useSendForm.js"
 import { SwapAmountProvider } from "./hooks/useSwapAmount.js"
 import { useTargetAmount } from "./hooks/useTargetAmount.js"
@@ -152,9 +150,44 @@ import {
   SelectedFundMethodProvider,
   useSelectedFundMethod,
 } from "./hooks/useSelectedFundMethod.js"
+import { DEFAULT_MODE } from "../constants.js"
+import { generateMorphoDepositCalldata } from "../morpho.js"
+import { generateAaveDepositCalldata } from "../aave.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 === "") {
@@ -169,13 +202,10 @@ const isValidToToToken = (toToken: string | null | undefined) => {
 }
 
 export type TrailsWidgetProps = {
-  appId?: string
-  projectAccessKey?: string
+  apiKey: string
   sequenceIndexerUrl?: string | null
-  sequenceApiUrl?: string | null
   trailsApiUrl?: string | null
   sequenceNodeGatewayUrl?: string | null
-  sequenceEnv?: RelayerEnv
   toAddress?: string | null
   toAmount?: string | null
   toChainId?: number | string | null
@@ -198,8 +228,14 @@ export type TrailsWidgetProps = {
   }) => void
   onCheckoutStart?: (data: { sessionId: string }) => void
   onCheckoutQuote?: (data: { sessionId: string; quote: any }) => void
+  onCheckoutSignatureRequest?: (data: { sessionId: string }) => void
+  onCheckoutSignatureConfirmed?: (data: { sessionId: string }) => void
+  onCheckoutSignatureRejected?: (data: {
+    sessionId: string
+    error: unknown
+  }) => void
   onCheckoutComplete?: (data: { sessionId: string }) => void
-  onCheckoutError?: (data: { sessionId: string; error: string }) => void
+  onCheckoutError?: (data: { sessionId: string; error: unknown }) => void
   onCheckoutStatusUpdate?: (data: {
     sessionId: string
     transactionStates: TransactionState[]
@@ -209,7 +245,6 @@ export type TrailsWidgetProps = {
 
   walletConnectProjectId?: string
   paymasterUrls?: Array<{ chainId: number; url: string }>
-  gasless?: boolean
   buttonText?: string
   customCss?: string | Record<string, string>
   disableCss?: boolean
@@ -252,7 +287,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)
@@ -428,18 +467,20 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     toCalldata,
     children,
     renderInline = false,
-    mode = "pay",
+    mode = DEFAULT_MODE,
     onOriginConfirmation,
     onDestinationConfirmation,
     onCheckoutStart,
     onCheckoutQuote,
+    onCheckoutSignatureRequest,
+    onCheckoutSignatureConfirmed,
+    onCheckoutSignatureRejected,
     onCheckoutComplete,
     onCheckoutError,
     onCheckoutStatusUpdate,
     onOpen,
     onClose,
     paymasterUrls,
-    gasless,
     buttonText,
     quoteProvider,
     priceImpactWarningThresholdBps,
@@ -448,7 +489,7 @@ 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
@@ -470,6 +511,10 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   }, [connector])
   const connections = useConnections()
   const { disconnectAsync } = useDisconnect()
+  const { switchAccount } = useSwitchAccount()
+
+  // 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()
@@ -477,13 +522,11 @@ 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,
-    getPreviousScreen,
-  } = useBack()
+  const { goBack, clearHistory, setCurrentScreenWithBack, getPreviousScreen } =
+    useBack()
+  const { connectionContext, clearConnectionContext, isRecipientSelection } =
+    useWalletConnectionContext()
+  const { setSelectedRecipient } = useSelectedRecipient()
 
   // Wrapper function that clears errors when going back
   const handleBack = () => {
@@ -532,7 +575,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") {
@@ -546,7 +588,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     } else if (mode === "pay") {
       return "send-form"
     } else {
-      return "account-settings"
+      return "send-form"
     }
   }, [])
 
@@ -556,55 +598,27 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
 
     // If connected, navigate to the appropriate screen for the new mode
     if (isConnected) {
-      const newScreen = getInitialScreenForMode(mode)
-      setCurrentScreen(newScreen)
+      setCurrentScreen("home")
     }
-  }, [mode, isConnected, setCurrentScreen, getInitialScreenForMode])
+  }, [mode, isConnected, setCurrentScreen])
 
-  // Use the simple initial redirect hook
-  const { hasConnectedBefore } = useInitialRedirect(
-    isConnected,
-    currentMode,
-    getInitialScreenForMode,
-  )
+  const goHome = useCallback(() => {
+    const initialScreen = getInitialScreenForMode(currentMode)
+    setCurrentScreen(initialScreen)
+  }, [currentMode, setCurrentScreen, getInitialScreenForMode])
 
-  // Set proper initial screen based on connection state and mode
   useEffect(() => {
-    if (isInitialScreenSet) {
-      return
-    }
-
-    let properInitialScreen: Screen = "connect"
-
-    if (isConnected) {
-      // For initial load, always go to the appropriate mode screen
-      properInitialScreen = getInitialScreenForMode(currentMode)
-      logger.console.log(
-        "[trails-sdk] Initial load with connected wallet, going to mode screen:",
-        properInitialScreen,
-      )
-    } else if (currentMode === "receive") {
-      properInitialScreen = "receive"
-    }
-
-    // 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)
+    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") {
@@ -632,11 +646,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
@@ -680,6 +710,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") {
@@ -706,7 +747,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         return
       }
     }
-  }, [toAmount, toChainId, toToken, currentMode, toAddress])
+  }, [toAmount, toChainId, toToken, currentMode, toAddress, paymasterUrls])
 
   const walletClient = useWalletManager(address, chainId, connector)
 
@@ -836,6 +877,9 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const { checkoutOnHandlers } = useCheckout({
     onCheckoutStart,
     onCheckoutQuote,
+    onCheckoutSignatureRequest,
+    onCheckoutSignatureConfirmed,
+    onCheckoutSignatureRejected,
     onCheckoutComplete,
     onCheckoutError,
     onCheckoutStatusUpdate,
@@ -857,28 +901,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 (
@@ -1003,35 +1025,83 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       }
 
       if (config.connector !== walletConnectConnector) {
+        // Store the current active connector BEFORE connecting new wallet
+        const originalConnector = connector
+
         logger.console.log(
           "[trails-sdk] Initiating connection to walletId",
           walletId,
         )
-        await connectAsync({ connector: config.connector })
+        const result = await connectAsync({ connector: config.connector })
         logger.console.log(
           `[trails-sdk] Successfully connected to ${config.name}`,
+          result,
         )
         // Set the last clicked wallet after successful connection
         saveLastClickedWallet(walletId)
 
-        // Check if this is the first wallet connection
-        if (!hasConnectedBefore) {
-          // First connection - go to initial screen for the mode
-          const initialScreen = getInitialScreenForMode(currentMode)
+        // Check the wallet connection context to determine behavior
+        if (isRecipientSelection) {
+          // User connected wallet for recipient selection - switch back to original wallet
           logger.console.log(
-            "[trails-sdk] First wallet connection, going to initial screen:",
-            initialScreen,
+            "[trails-sdk] Connected wallet for recipient selection, setting as recipient:",
+            result.accounts[0],
           )
-          setCurrentScreen(initialScreen)
+
+          // Set the newly connected wallet as the recipient
+          if (result.accounts[0]) {
+            setSelectedRecipient(result.accounts[0])
+          }
+
+          // Switch back to the original active wallet (if there was one)
+          if (originalConnector && address) {
+            try {
+              logger.console.log(
+                "[trails-sdk] Switching back to original active wallet:",
+                address,
+              )
+              await switchAccount({ connector: originalConnector })
+            } catch (switchError) {
+              logger.console.error(
+                "[trails-sdk] Failed to switch back to original wallet:",
+                switchError,
+              )
+            }
+          }
+
+          // Clear the connection context
+          clearConnectionContext()
+
+          // Navigate back to the origin screen (recipients)
+          const originScreen = connectionContext.originScreen
+          if (originScreen) {
+            setCurrentScreen(originScreen)
+          } else {
+            setCurrentScreen("recipients")
+          }
         } else {
-          // Subsequent connection - go to account-settings
+          // Normal connection - switch active wallet and navigate home
           logger.console.log(
-            "[trails-sdk] Subsequent wallet connection, going to account-settings",
-          )
-          setCurrentScreenWithBack(
-            "account-settings",
-            getInitialScreenForMode(currentMode),
+            "[trails-sdk] Normal wallet connection, switching active wallet",
           )
+
+          // Clear the connection context
+          clearConnectionContext()
+
+          // Check if this is the first wallet connection
+          if (!hasConnectedBefore) {
+            // First connection - go to initial screen for the mode
+            logger.console.log(
+              "[trails-sdk] First wallet connection, going home",
+            )
+            goHome()
+          } else {
+            // Subsequent connection - go to home which will route to the appropriate screen
+            logger.console.log(
+              "[trails-sdk] Subsequent wallet connection, going to home",
+            )
+            goHome()
+          }
         }
       } else if (config.connector === walletConnectConnector) {
         // Store the current connector as previous before switching to WalletConnect
@@ -1094,19 +1164,62 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
   }
 
-  const handleContinue = () => {
-    if (currentMode === "swap") {
-      setCurrentScreen("swap")
-    } else if (currentMode === "receive") {
-      setCurrentScreen("receive")
-    } else if (currentMode === "earn") {
-      setCurrentScreen("earn")
-    } else if (currentMode === "fund") {
-      setCurrentScreen("fund-form")
-    } else if (currentMode === "pay") {
-      setCurrentScreen("send-form")
+  const handleContinue = async () => {
+    // Check if this was a recipient selection connection
+    if (isRecipientSelection) {
+      logger.console.log(
+        "[trails-sdk] WalletConnect completed for recipient selection, setting as recipient:",
+        address,
+      )
+
+      // Set the newly connected wallet as the recipient
+      if (address) {
+        setSelectedRecipient(address)
+      }
+
+      // Switch back to the original active wallet (if there was one)
+      const originalConnector = connectionContext.originalActiveConnector
+      const originalAddress = connectionContext.originalActiveWalletAddress
+      if (originalConnector && originalAddress) {
+        try {
+          logger.console.log(
+            "[trails-sdk] Switching back to original active wallet after WalletConnect:",
+            originalAddress,
+          )
+          await switchAccount({ connector: originalConnector })
+        } catch (switchError) {
+          logger.console.error(
+            "[trails-sdk] Failed to switch back to original wallet after WalletConnect:",
+            switchError,
+          )
+        }
+      }
+
+      // Clear the connection context
+      clearConnectionContext()
+
+      // Navigate back to the origin screen (recipients)
+      const originScreen = connectionContext.originScreen
+      if (originScreen) {
+        setCurrentScreen(originScreen)
+      } else {
+        setCurrentScreen("recipients")
+      }
     } else {
-      setCurrentScreen("account-settings")
+      // Normal flow - navigate based on mode
+      if (currentMode === "swap") {
+        setCurrentScreen("swap")
+      } else if (currentMode === "receive") {
+        setCurrentScreen("receive")
+      } else if (currentMode === "earn") {
+        setCurrentScreen("earn")
+      } else if (currentMode === "fund") {
+        setCurrentScreen("fund-form")
+      } else if (currentMode === "pay") {
+        setCurrentScreen("send-form")
+      } else {
+        setCurrentScreen("account-settings")
+      }
     }
   }
 
@@ -1191,7 +1304,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)
@@ -1215,7 +1328,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     setOriginChainId,
     setSelectedToken,
     setSelectedPool,
-    currentMode,
     setCurrentScreen,
     clearHistory,
   ])
@@ -1269,7 +1381,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     ) {
       setDestinationTxHash(
         lastTransactionState?.transactionHash ||
-          (lastTransactionState as unknown as MetaTxnReceipt)?.txnHash,
+          (lastTransactionState as unknown as MetaTxnReceipt)?.txnHash ||
+          "",
       )
       setDestinationChainId(lastTransactionState?.chainId)
     }
@@ -1341,102 +1454,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
   }
 
-  // Generate deposit calldata for Aave pool
-  const generateAaveDepositCalldata = (pool: Pool, amount: string) => {
-    try {
-      const userAddress =
-        walletClient?.account?.address || walletClient?.account
-      if (!userAddress) {
-        throw new Error("User address not found")
-      }
-
-      // Validate amount
-      if (
-        !amount ||
-        amount === "" ||
-        Number.isNaN(Number(amount)) ||
-        Number(amount) <= 0
-      ) {
-        throw new Error("Invalid amount")
-      }
-
-      // Aave V3 Pool contract deposit function
-      // function supply(address asset, uint256 amount, address onBehalfOf, uint16 referralCode)
-      const calldata = encodeFunctionData({
-        abi: [
-          {
-            name: "supply",
-            type: "function",
-            inputs: [
-              { name: "asset", type: "address" },
-              { name: "amount", type: "uint256" },
-              { name: "onBehalfOf", type: "address" },
-              { name: "referralCode", type: "uint16" },
-            ],
-            outputs: [],
-            stateMutability: "nonpayable",
-          },
-        ],
-        args: [
-          pool.token.address as `0x${string}`, // asset address
-          BigInt(amount), // amount to deposit
-          userAddress as `0x${string}`, // onBehalfOf (user's address)
-          0, // referralCode (0 for no referral)
-        ],
-      })
-      return calldata
-    } catch (error) {
-      logger.console.error("Error generating Aave deposit calldata:", error)
-      return undefined
-    }
-  }
-
-  // Generate deposit calldata for Morpho pool
-  const generateMorphoDepositCalldata = (_pool: Pool, amount: string) => {
-    try {
-      const userAddress =
-        walletClient?.account?.address || walletClient?.account
-      if (!userAddress) {
-        throw new Error("User address not found")
-      }
-
-      // Validate amount
-      if (
-        !amount ||
-        amount === "" ||
-        Number.isNaN(Number(amount)) ||
-        Number(amount) <= 0
-      ) {
-        throw new Error("Invalid amount")
-      }
-
-      // Morpho Vault deposit function
-      // function deposit(uint256 amount, address receiver)
-      const calldata = encodeFunctionData({
-        abi: [
-          {
-            name: "deposit",
-            type: "function",
-            inputs: [
-              { name: "amount", type: "uint256" },
-              { name: "receiver", type: "address" },
-            ],
-            outputs: [{ name: "shares", type: "uint256" }],
-            stateMutability: "nonpayable",
-          },
-        ],
-        args: [
-          BigInt(amount), // amount to deposit
-          userAddress as `0x${string}`, // receiver (user's address)
-        ],
-      })
-      return calldata
-    } catch (error) {
-      logger.console.error("Error generating Morpho deposit calldata:", error)
-      return undefined
-    }
-  }
-
   // Generate deposit calldata based on pool protocol
   const generateDepositCalldata = (pool: Pool, amount: string) => {
     try {
@@ -1445,11 +1462,15 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         pool.name,
       )
 
+      if (!walletClient) {
+        throw new Error("Wallet client not found")
+      }
+
       switch (pool.protocol.toLowerCase()) {
         case "aave":
-          return generateAaveDepositCalldata(pool, amount)
+          return generateAaveDepositCalldata(walletClient, pool, amount)
         case "morpho":
-          return generateMorphoDepositCalldata(pool, amount)
+          return generateMorphoDepositCalldata(walletClient, amount)
         default:
           logger.console.warn(`Unsupported protocol: ${pool.protocol}`)
           return undefined
@@ -1484,7 +1505,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       logger.console.error("[trails-sdk] Error sending transaction", error)
     }
     const errorMessage = getFullErrorMessage(error)
-    const isRejected = getIsWalletRejectedError(error)
+    const isRejected = getIsUserRejectionError(error)
     const isBalanceTooLow = getIsBalanceTooLowError(error)
     const isApiError = getIsApiError(error)
     const isRateLimited = getIsRateLimitedError(error)
@@ -1583,17 +1604,16 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       case "fund-methods":
         return (
           <FundMethods
-            onBack={handleBack}
+            onBack={() => goHome()}
             onSelectWalletConnect={handleSelectWalletConnect}
             onSelectExchangeList={handleSelectExchangeList}
             onSelectConnectedAccount={() => {
               setSelectedFundMethod("connected-account")
-              const initialScreen = getInitialScreenForMode(currentMode)
-              setCurrentScreen(initialScreen)
+              setCurrentScreen("home")
             }}
             onSelectQrCode={() => {
               setSelectedFundMethod("qr-code")
-              setCurrentScreen(getInitialScreenForMode(currentMode))
+              setCurrentScreen("home")
             }}
           />
         )
@@ -1613,14 +1633,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
@@ -1640,12 +1660,11 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             toCalldata={
               selectedPool ? generatedCalldata : toCalldata || undefined
             }
-            walletClient={walletClient}
+            walletClient={walletClient ?? undefined}
             isSequenceWallet={isSequenceWallet}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
             paymasterUrls={paymasterUrls}
-            gasless={gasless}
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
             quoteProvider={quoteProvider}
             fundMethod={selectedFundMethod}
@@ -1681,31 +1700,26 @@ 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}
             paymasterUrls={paymasterUrls}
-            gasless={gasless}
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
             quoteProvider={quoteProvider}
             fundMethod={selectedFundMethod}
@@ -1715,10 +1729,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 (
@@ -1821,11 +1831,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}
@@ -1833,7 +1843,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onComplete={handleTransferComplete}
             onSend={handleOnSend}
             paymasterUrls={paymasterUrls}
-            gasless={gasless}
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
             quoteProvider={quoteProvider}
             fundMethod={selectedFundMethod}
@@ -1843,10 +1852,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 (
@@ -1860,25 +1865,24 @@ 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}
-            gasless={gasless}
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
             quoteProvider={quoteProvider}
             fundMethod={selectedFundMethod}
@@ -1889,10 +1893,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 (
@@ -1928,6 +1928,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} />
@@ -1943,16 +1947,9 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           />
         )
       case "mesh-connect-exchanges":
-        return (
-          <MeshConnectExchanges
-            onBack={handleBack}
-            getInitialScreenForMode={getInitialScreenForMode}
-          />
-        )
+        return <MeshConnectExchanges onBack={handleBack} />
       case "home": {
-        // Redirect to the appropriate screen for the current mode
-        const homeScreen = getInitialScreenForMode(currentMode)
-        setCurrentScreen(homeScreen)
+        // Navigation handled by useEffect above, otherwise it would cause a loop
         return null
       }
       default:
@@ -1962,68 +1959,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>
     )
   }
 
@@ -2069,40 +2068,41 @@ 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}>
         <ToastProvider>
           <CurrentScreenProvider initialScreen={initialScreen}>
             <BackProvider>
-              <SelectedTokenProvider>
-                <DestinationSelectedTokenProvider>
-                  <SelectedFeeTokenProvider>
-                    <SelectedRecipientProvider>
-                      <SwapAmountProvider>
-                        <ChainFilterProvider>
-                          <BalanceVisibleProvider>
-                            <ThemePreferenceProvider>
-                              <SelectedFundMethodProvider>
-                                <ThemeSyncer />
-                                <EarnPoolProvider>
-                                  <SelectedMeshExchangeProvider>
-                                    <DefaultTokenSelectionProvider>
-                                      <WidgetContent ref={ref} />
-                                    </DefaultTokenSelectionProvider>
-                                  </SelectedMeshExchangeProvider>
-                                </EarnPoolProvider>
-                              </SelectedFundMethodProvider>
-                            </ThemePreferenceProvider>
-                          </BalanceVisibleProvider>
-                        </ChainFilterProvider>
-                      </SwapAmountProvider>
-                    </SelectedRecipientProvider>
-                  </SelectedFeeTokenProvider>
-                </DestinationSelectedTokenProvider>
-              </SelectedTokenProvider>
+              <WalletConnectionProvider>
+                <SelectedTokenProvider>
+                  <DestinationSelectedTokenProvider>
+                    <SelectedFeeTokenProvider>
+                      <SelectedRecipientProvider>
+                        <SwapAmountProvider>
+                          <ChainFilterProvider>
+                            <BalanceVisibleProvider>
+                              <ThemePreferenceProvider>
+                                <SelectedFundMethodProvider>
+                                  <ThemeSyncer />
+                                  <EarnPoolProvider>
+                                    <SelectedMeshExchangeProvider>
+                                      <DefaultTokenSelectionProvider>
+                                        <WidgetContent ref={ref} />
+                                      </DefaultTokenSelectionProvider>
+                                    </SelectedMeshExchangeProvider>
+                                  </EarnPoolProvider>
+                                </SelectedFundMethodProvider>
+                              </ThemePreferenceProvider>
+                            </BalanceVisibleProvider>
+                          </ChainFilterProvider>
+                        </SwapAmountProvider>
+                      </SelectedRecipientProvider>
+                    </SelectedFeeTokenProvider>
+                  </DestinationSelectedTokenProvider>
+                </SelectedTokenProvider>
+              </WalletConnectionProvider>
             </BackProvider>
           </CurrentScreenProvider>
         </ToastProvider>
@@ -2116,28 +2116,16 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
     const sequenceHooksContext = useContext(SequenceHooksContext)
     const wagmiContext = useContext(WagmiContext)
 
-    // Set global configuration immediately when component renders
-    // This ensures the config is available before sequenceConfig is created
-    if (props.appId) {
-      logger.console.warn("appId is deprecated. Use projectAccessKey instead.")
-      setSequenceProjectAccessKey(props.appId)
-    }
-    if (props.sequenceEnv && props.sequenceEnv !== getSequenceEnv()) {
-      logger.console.log("props.sequenceEnv", props.sequenceEnv)
-      setSequenceEnv(props.sequenceEnv)
-    }
-    if (props.projectAccessKey) {
-      logger.console.log("props.projectAccessKey", props.projectAccessKey)
-      setSequenceProjectAccessKey(props.projectAccessKey)
+    if (props.apiKey) {
+      logger.console.log("props.apiKey", props.apiKey)
+      setSequenceProjectAccessKey(props.apiKey)
+    } else {
+      throw new Error("apiKey is required")
     }
     if (props.sequenceIndexerUrl) {
       logger.console.log("props.sequenceIndexerUrl", props.sequenceIndexerUrl)
       setSequenceIndexerUrl(props.sequenceIndexerUrl)
     }
-    if (props.sequenceApiUrl) {
-      logger.console.log("props.sequenceApiUrl", props.sequenceApiUrl)
-      setSequenceApiUrl(props.sequenceApiUrl)
-    }
     if (props.trailsApiUrl) {
       logger.console.log("props.trailsApiUrl", props.trailsApiUrl)
       setTrailsApiUrl(props.trailsApiUrl)
@@ -2160,7 +2148,7 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       logger.console.log("props.slippageTolerance", props.slippageTolerance)
       setSlippageTolerance(String(props.slippageTolerance))
     }
-    if (typeof props.debug === "boolean" && props.debug === getDebug()) {
+    if (typeof props.debug === "boolean" && props.debug !== getDebug()) {
       logger.console.log("props.debug", props.debug)
       setDebug(props.debug)
     }
@@ -2170,10 +2158,7 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       const baseConfig = {
         chains,
         transports: (chains as Array<Chain>).reduce((acc, chain) => {
-          const sequenceRpcUrl = getRpcUrl(
-            chain.id,
-            props.projectAccessKey || props.appId,
-          )
+          const sequenceRpcUrl = getRpcUrl(chain.id, props.apiKey)
           return {
             ...acc,
             [chain.id]: sequenceRpcUrl ? http(sequenceRpcUrl) : http(),
@@ -2196,12 +2181,7 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
           : connectors,
         storage,
       })
-    }, [
-      props.projectAccessKey,
-      props.appId,
-      props.decoupleWagmi,
-      props.wagmiConnectors,
-    ])
+    }, [props.apiKey, props.decoupleWagmi, props.wagmiConnectors])
 
     // Create content with only the providers that don't exist in parent
     const content = (() => {
@@ -2213,18 +2193,13 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
 
       const sequenceConfig = {
         commitHash: getCommitHash(),
-        projectAccessKey:
-          props.projectAccessKey ||
-          props.appId ||
-          getSequenceProjectAccessKey(),
+        projectAccessKey: props.apiKey,
         env: {
-          env: props.sequenceEnv || getSequenceEnv(),
           indexerUrl: props.sequenceIndexerUrl || getSequenceIndexerUrl(),
           indexerGatewayUrl:
             props.sequenceIndexerUrl || getSequenceIndexerUrl(),
           nodeGatewayUrl:
             props.sequenceNodeGatewayUrl || getSequenceNodeGatewayUrl(),
-          apiUrl: props.sequenceApiUrl || getSequenceApiUrl(),
           trailsApiUrl: props.trailsApiUrl || getTrailsApiUrl(),
         },
       }