0xtrails 0.1.13 → 0.2.1

package/src/widget/widget.tsx

@@ -16,7 +16,7 @@ import React, {
 import { createPortal } from "react-dom"
 import type { Chain, WalletClient } from "viem"
 import { createWalletClient, custom, http, isAddress } from "viem"
-import * as viemChains from "viem/chains"
+import { getAllChains } from "../chains.js"
 import type { Connector } from "wagmi"
 import {
   createConfig,
@@ -36,25 +36,29 @@ import Footer from "./components/Footer.js"
 import Modal from "./components/Modal.js"
 import Receipt from "./components/Receipt.js"
 import { WalletList } from "./components/WalletList.js"
-import { PaySendForm } from "./components/PaySendForm.js"
+import { Pay } from "./components/Pay.js"
 import TokenList from "./components/TokenList.js"
 import TransferPending from "./components/TransferPendingVertical.js"
 import WalletConfirmation from "./components/WalletConfirmation.js"
 import QRCodeDeposit from "./components/QRCodeDeposit.js"
 import { ThemeProvider } from "./components/ThemeProvider.js"
+import { ToastProvider } from "./components/Toast.js"
 import {
   getCommitHash,
   getSequenceNodeGatewayUrl,
   setWalletConnectProjectId,
   setSequenceNodeGatewayUrl,
+  getSequenceEnv,
 } from "../config.js"
-import { useAmountUsd } from "./hooks/useAmountUsd.js"
 import { useRecentTokens } from "./hooks/useRecentTokens.js"
+import { useTargetAmount } from "./hooks/useTargetAmount.js"
 import { getWethAddress } from "../tokens.js"
 import css from "./compiled.css?inline"
 import {
+  getAnalytics,
   getSessionId,
   trackWalletConnected,
+  trackWalletDisconnected,
   trackWidgetScreen,
 } from "../analytics.js"
 import type { PrepareSendQuote } from "../prepareSend.js"
@@ -70,15 +74,18 @@ import {
 import {
   setSequenceIndexerUrl,
   setSequenceApiUrl,
+  setTrailsApiUrl,
   setSequenceProjectAccessKey,
   getSequenceIndexerUrl,
   getSequenceApiUrl,
+  getTrailsApiUrl,
   setSequenceEnv,
   setSlippageTolerance,
   getSequenceProjectAccessKey,
   setDebug,
 } from "../config.js"
-import { FundSendForm } from "./components/FundSendForm.js"
+import { Fund } from "./components/Fund.js"
+import { Recipients } from "./components/Recipients.js"
 import { Swap } from "./components/Swap.js"
 import { Receive } from "./components/Receive.js"
 import { Earn } from "./components/Earn.js"
@@ -89,6 +96,8 @@ import FundMethods from "./components/FundMethods.js"
 import EarnPools from "./components/EarnPools.js"
 import WalletConnectionPending from "./components/WalletConnectionPending.js"
 import { AccountIntentTransactionHistory } from "./components/AccountIntentTransactionHistory.js"
+import { AccountSettings } from "./components/AccountSettings.js"
+import { UserPreferences } from "./components/UserPreferences.js"
 import type { Mode } from "../mode.js"
 import type { OnCompleteProps } from "./hooks/useSendForm.js"
 import type { Pool } from "../pools.js"
@@ -112,8 +121,14 @@ import {
   useOriginSelectedToken as useSelectedToken,
 } from "./hooks/useOriginSelectedToken.js"
 import { DestinationSelectedTokenProvider } from "./hooks/useDestinationSelectedToken.js"
+import { SelectedFeeTokenProvider } from "./hooks/useSelectedFeeToken.js"
+import { SelectedRecipientProvider } from "./hooks/useSelectedRecipient.js"
+import { SwapAmountProvider } from "./hooks/useSwapAmount.js"
 import { ChainFilterProvider } from "./hooks/useChainFilter.js"
 import { BalanceVisibleProvider } from "./hooks/useBalanceVisible.js"
+import { SwapSettingsProvider } from "./hooks/useSwapSettings.js"
+import { ThemeProvider as ThemePreferenceProvider } from "./hooks/useTheme.js"
+import { ThemeSyncer } from "./components/ThemeSyncer.js"
 import { EarnPoolProvider, useEarnPool } from "./hooks/useEarnPool.js"
 import { WidgetPropsProvider, useWidgetProps } from "./hooks/useWidgetProps.js"
 import {
@@ -122,6 +137,12 @@ import {
   type Screen,
 } from "./hooks/useCurrentScreen.js"
 import { BackProvider, useBack } from "./hooks/useBack.js"
+import { DefaultTokenSelectionProvider } from "./hooks/useDefaultTokenSelection.js"
+import {
+  SelectedMeshExchangeProvider,
+  useSelectedMeshExchange,
+} from "./hooks/useSelectedMeshExchange.js"
+import { MeshConnectExchanges } from "./components/MeshConnectExchanges.js"
 
 export const aaveClient = AaveClient.create()
 
@@ -143,6 +164,7 @@ export type TrailsWidgetProps = {
   projectAccessKey?: string
   sequenceIndexerUrl?: string | null
   sequenceApiUrl?: string | null
+  trailsApiUrl?: string | null
   sequenceNodeGatewayUrl?: string | null
   sequenceEnv?: RelayerEnv
   toAddress?: string | null
@@ -174,6 +196,8 @@ export type TrailsWidgetProps = {
     sessionId: string
     transactionStates: TransactionState[]
   }) => void
+  onOpen?: () => void
+  onClose?: () => void
 
   walletConnectProjectId?: string
   paymasterUrls?: Array<{ chainId: number; url: string }>
@@ -189,6 +213,12 @@ export type TrailsWidgetProps = {
   wagmiConnectors?: Connector[]
   debug?: boolean
   hideDisconnect?: boolean
+  toast?: boolean
+  appName?: string
+  appUrl?: string
+  appImageUrl?: string
+  appDescription?: string
+  payMessage?: string
 }
 
 export interface TrailsWidgetRef {
@@ -397,6 +427,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     onCheckoutComplete,
     onCheckoutError,
     onCheckoutStatusUpdate,
+    onOpen,
+    onClose,
     paymasterUrls,
     gasless,
     buttonText,
@@ -412,10 +444,16 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const { recentTokens, addRecentToken } = useRecentTokens(address)
   const { wallets: allWallets } = useWallets()
   const { selectedToken, setSelectedToken } = useSelectedToken()
+  const { selectedExchange } = useSelectedMeshExchange()
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [currentMode, setCurrentMode] = useState<Mode>(mode)
   const { currentScreen, setCurrentScreen } = useCurrentScreen()
-  const { goBack: handleBack, clearHistory, isNavigatingBack } = useBack()
+  const {
+    goBack: handleBack,
+    clearHistory,
+    isNavigatingBack,
+    getHistory,
+  } = useBack()
   const [previousAddress, setPreviousAddress] = useState<string | undefined>(
     address,
   )
@@ -460,23 +498,34 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const { connectAsync } = useConnect()
   const [isInitialScreenSet, setIsInitialScreenSet] = useState(false)
 
+  const getInitialScreenForMode = useCallback((mode: Mode) => {
+    if (mode === "swap") {
+      return "swap"
+    } else if (mode === "receive") {
+      return "receive"
+    } else if (mode === "earn") {
+      return "earn"
+    } else if (mode === "fund") {
+      return "fund-form"
+    } else if (mode === "pay") {
+      return "send-form"
+    } else {
+      return "account-settings"
+    }
+  }, [])
+
   // Set proper initial screen based on connection state and mode
   useEffect(() => {
     if (isInitialScreenSet) {
       return
     }
 
-    const properInitialScreen = isConnected
-      ? currentMode === "swap"
-        ? "swap"
-        : currentMode === "receive"
-          ? "receive"
-          : currentMode === "earn"
-            ? "earn"
-            : "tokens"
-      : currentMode === "receive"
-        ? "receive"
-        : "connect"
+    let properInitialScreen: Screen = "connect"
+    if (isConnected) {
+      properInitialScreen = getInitialScreenForMode(currentMode)
+    } else if (currentMode === "receive") {
+      properInitialScreen = "receive"
+    }
 
     // Only update if the current screen is still the default
     if (currentScreen === "connect" || currentScreen === "receive") {
@@ -494,6 +543,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     currentScreen,
     setCurrentScreen,
     isInitialScreenSet,
+    getInitialScreenForMode,
   ])
 
   const defaultButtonText = useMemo(() => {
@@ -625,7 +675,11 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     toChainId?: number | string | null,
     toToken?: string | null,
   ) => {
-    const { data: pools, loading: poolsLoading } = usePools()
+    // Only fetch pools when mode is "earn" or "fund"
+    const shouldFetchPools = mode === "earn" || mode === "fund"
+    const { data: pools, loading: poolsLoading } = usePools({
+      enabled: shouldFetchPools,
+    })
 
     useEffect(() => {
       if (
@@ -760,20 +814,56 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       ) {
         if (!alreadyRedirectedToTokens) {
           setAlreadyRedirectedToTokens(true)
+          const history = getHistory()
           logger.console.log(
-            "[trails-sdk] alreadyRedirectedToTokens",
-            alreadyRedirectedToTokens,
+            "[trails-sdk] Post-connection navigation triggered",
+            {
+              currentScreen,
+              alreadyRedirectedToTokens,
+              isConnected,
+              currentMode,
+              history,
+            },
           )
-          // Route to appropriate screen based on mode
-          if (currentMode === "swap") {
-            setCurrentScreen("swap")
-          } else if (currentMode === "receive") {
-            setCurrentScreen("receive")
-          } else if (currentMode === "earn") {
-            setCurrentScreen("earn")
-          } else {
-            setCurrentScreen("tokens")
+
+          // Check if we came from account-settings -> wallet-list pattern
+          // Look for this pattern in the last 4-5 screens to handle any intermediate screens
+          const historyLength = history.length
+          logger.console.log("[trails-sdk] Full navigation history:", history)
+
+          // Iterate from older to newer screens to find the pattern
+          let foundAccountSettings = false
+          let foundWalletListAfterAccountSettings = false
+
+          for (
+            let i = Math.max(0, historyLength - 5);
+            i < historyLength - 1;
+            i++
+          ) {
+            if (history[i] === "account-settings") {
+              foundAccountSettings = true
+            }
+            if (history[i] === "wallet-list" && foundAccountSettings) {
+              foundWalletListAfterAccountSettings = true
+              break // Found the pattern, no need to continue
+            }
+          }
+
+          if (foundAccountSettings && foundWalletListAfterAccountSettings) {
+            logger.console.log(
+              "[trails-sdk] Came from account-settings -> wallet-list flow, returning to account-settings",
+            )
+            setCurrentScreen("account-settings")
+            return
           }
+
+          console.log(
+            "[trails-sdk] Using default navigation for mode:",
+            currentMode,
+          )
+
+          const initialScreen = getInitialScreenForMode(currentMode)
+          setCurrentScreen(initialScreen)
         }
       }
     } else {
@@ -796,6 +886,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     currentMode,
     isNavigatingBack,
     setCurrentScreen,
+    getHistory,
+    getInitialScreenForMode,
   ])
 
   useEffect(() => {
@@ -827,6 +919,17 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     })
   }, [currentScreen, address])
 
+  // Identify user with Databeat whenever address changes
+  useEffect(() => {
+    const analytics = getAnalytics()
+    if (address) {
+      analytics.identifyUser({ address })
+    } else {
+      // Unidentify when wallet is disconnected
+      analytics.unidentifyUser()
+    }
+  }, [address])
+
   useEffect(() => {
     if (!address || !chainId || !connector?.name) {
       return
@@ -853,6 +956,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       const screensToReset = [
         "send-form",
         "fund-form",
+        "swap",
         "wallet-confirmation",
         "earn",
         "swap",
@@ -862,7 +966,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         logger.console.log(
           "[trails-sdk] Resetting to tokens screen due to account change",
         )
-        setCurrentScreen("tokens")
+        const initialScreen = getInitialScreenForMode(currentMode)
+        setCurrentScreen(initialScreen)
         setSelectedToken(null)
         setError(null)
         setPrepareSendQuote(null)
@@ -876,8 +981,10 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     address,
     previousAddress,
     currentScreen,
+    currentMode,
     setSelectedToken,
     setCurrentScreen,
+    getInitialScreenForMode,
   ])
 
   // Update generated calldata when amount changes in earn mode
@@ -950,6 +1057,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     try {
       await disconnectAsync()
       setAlreadyRedirectedToTokens(false)
+      trackWalletDisconnected()
     } catch (error) {
       logger.console.error("[trails-sdk] Failed to disconnect:", error)
     }
@@ -968,8 +1076,12 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       setCurrentScreen("receive")
     } else if (currentMode === "earn") {
       setCurrentScreen("earn")
+    } else if (currentMode === "fund") {
+      setCurrentScreen("fund-form")
+    } else if (currentMode === "pay") {
+      setCurrentScreen("send-form")
     } else {
-      setCurrentScreen("tokens")
+      setCurrentScreen("account-settings")
     }
   }
 
@@ -1027,12 +1139,13 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const handleTrackToken = (token: Token) => {
     // Track the token in recent tokens
     const chainInfo = getChainInfo(token.chainId)
+    const decimals = token.contractInfo?.decimals || (token as any).decimals
     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,
+      decimals,
       chainId: token.chainId,
       chainName: chainInfo?.name || `Chain ${token.chainId}`,
       imageUrl: token.imageUrl,
@@ -1045,15 +1158,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   }
 
   const handleSendAnother = () => {
-    if (currentMode === "swap") {
-      setCurrentScreen("swap")
-    } else if (currentMode === "receive") {
-      setCurrentScreen("receive")
-    } else if (currentMode === "earn") {
-      setCurrentScreen("earn")
-    } else {
-      setCurrentScreen("tokens")
-    }
+    const initialScreen = getInitialScreenForMode(currentMode)
+    setCurrentScreen(initialScreen)
     resetState()
   }
 
@@ -1089,27 +1195,28 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     clearHistory,
   ])
 
+  const handleOpenModal = useCallback(() => {
+    setIsModalOpen(true)
+    onOpen?.()
+  }, [onOpen])
+
+  const handleCloseModal = useCallback(() => {
+    setIsModalOpen(false)
+    resetState()
+    onClose?.()
+  }, [resetState, onClose])
+
   // Expose modal control methods via ref
   useImperativeHandle(
     ref,
     () => ({
-      openModal: () => {
-        setIsModalOpen(true)
-      },
-      closeModal: () => {
-        setIsModalOpen(false)
-        resetState()
-      },
+      openModal: handleOpenModal,
+      closeModal: handleCloseModal,
       isModalOpen,
     }),
-    [isModalOpen, resetState],
+    [isModalOpen, handleOpenModal, handleCloseModal],
   )
 
-  const handleCloseModal = () => {
-    setIsModalOpen(false)
-    resetState()
-  }
-
   function handleWalletConfirmComplete() {
     setCurrentScreen("pending")
   }
@@ -1328,9 +1435,9 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
   }
 
-  const handleSelectExchange = () => {
+  const handleSelectExchangeList = () => {
     setSelectedFundMethod("exchange")
-    setCurrentScreen("tokens")
+    setCurrentScreen("mesh-connect-exchanges")
   }
 
   const handleNavigateToMeshConnect = (
@@ -1411,14 +1518,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
   }
 
-  const {
-    amountUsd: targetAmountUsd,
-    amountUsdFormatted: targetAmountUsdFormatted,
-  } = useAmountUsd({
-    amount: toAmount,
-    token: toToken,
-    chainId: Number(toChainId),
-  })
+  const { targetAmountUsd, targetAmountUsdFormatted } = useTargetAmount()
 
   const renderScreenContent = () => {
     switch (currentScreen) {
@@ -1455,14 +1555,15 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           <FundMethods
             onBack={handleBack}
             onSelectWalletConnect={handleSelectWalletConnect}
-            onSelectExchange={handleSelectExchange}
+            onSelectExchangeList={handleSelectExchangeList}
             onSelectConnectedAccount={() => {
               setSelectedFundMethod("connected-account")
-              setCurrentScreen("tokens")
+              const initialScreen = getInitialScreenForMode(currentMode)
+              setCurrentScreen(initialScreen)
             }}
             onSelectQrCode={() => {
               setSelectedFundMethod("qr-code")
-              setCurrentScreen("tokens")
+              setCurrentScreen(getInitialScreenForMode(currentMode))
             }}
           />
         )
@@ -1482,14 +1583,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           />
         )
       case "send-form":
-        return selectedToken && walletClient?.account ? (
-          <PaySendForm
+        return walletClient?.account ? (
+          <Pay
+            selectedToken={selectedToken}
             onSend={handleOnSend}
             onBack={handleBack}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
-            selectedToken={selectedToken}
             account={walletClient.account}
             toRecipient={
               selectedPool
@@ -1545,8 +1646,10 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
                 setGeneratedCalldata(undefined)
               }
             }}
-            selectedPool={selectedPool}
             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">
@@ -1554,30 +1657,32 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           </div>
         )
       case "fund-form":
-        return selectedToken && walletClient?.account ? (
-          <FundSendForm
+        return walletClient?.account ? (
+          <Fund
             onSend={handleOnSend}
             onBack={handleBack}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
-            selectedToken={selectedToken}
             account={walletClient.account}
             toAmount={toAmount || undefined}
             toRecipient={toAddress || undefined}
             toChainId={toChainId ? Number(toChainId) : undefined}
             toToken={toToken || undefined}
+            toCalldata={toCalldata || undefined}
             walletClient={walletClient}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
             paymasterUrls={paymasterUrls}
             gasless={gasless}
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-            toCalldata={toCalldata || undefined}
             quoteProvider={quoteProvider}
             fundMethod={selectedFundMethod}
             onNavigateToMeshConnect={handleNavigateToMeshConnect}
             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">
@@ -1626,6 +1731,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             toTokenAmount={meshConnectProps?.toTokenAmount}
             toChainId={meshConnectProps?.toChainId}
             toRecipientAddress={meshConnectProps?.toRecipientAddress}
+            selectedExchange={selectedExchange}
           />
         )
       case "wallet-connect":
@@ -1642,15 +1748,29 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           <WalletList
             onBack={handleBack}
             onWalletSelect={(walletId) => {
+              logger.console.log(
+                "[trails-sdk] Wallet selected from wallet-list:",
+                walletId,
+              )
               if (
                 allWallets.find((w) => w.id === walletId)?.connector ===
                 walletConnectConnector
               ) {
                 saveLastClickedWallet(walletId)
+                logger.console.log(
+                  "[trails-sdk] WalletConnect selected, going to wallet-connect screen",
+                )
                 setCurrentScreen("wallet-connect")
               } else {
                 saveLastClickedWallet(walletId)
-                setCurrentScreen("wallet-connection-pending")
+                logger.console.log(
+                  "[trails-sdk] Regular wallet selected, going to wallet-connection-pending",
+                )
+                // Reset the redirect flag to prevent immediate navigation
+                setAlreadyRedirectedToTokens(false)
+                setTimeout(() => {
+                  setCurrentScreen("wallet-connection-pending")
+                }, 100)
                 // Auto-trigger connection
                 setTimeout(() => {
                   handleWalletConnect(walletId)
@@ -1747,7 +1867,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onBack={handleBack}
             isConnected={isConnected}
             onConnectWallet={() => setCurrentScreen("connect")}
-            onPay={() => setCurrentScreen("tokens")}
+            onPay={() => setCurrentScreen("send-form")}
             toChainId={toChainId ? Number(toChainId) : undefined}
           />
         )
@@ -1774,8 +1894,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onBack={handleBack}
           />
         )
+      case "account-settings":
+        return <AccountSettings onBack={handleBack} />
+      case "user-preferences":
+        return <UserPreferences onBack={handleBack} />
       case "chain-list":
         return <ChainList onBack={() => setCurrentScreen("tokens")} />
+      case "recipients":
+        return <Recipients onBack={handleBack} />
       case "disconnect":
         return (
           <Disconnect
@@ -1783,6 +1909,13 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             disconnectHandler={handleWalletDisconnect}
           />
         )
+      case "mesh-connect-exchanges":
+        return (
+          <MeshConnectExchanges
+            onBack={handleBack}
+            getInitialScreenForMode={getInitialScreenForMode}
+          />
+        )
       default:
         return null
     }
@@ -1865,7 +1998,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         <motion.button
           whileHover={{ scale: 1.02 }}
           whileTap={{ scale: 0.98 }}
-          onClick={() => setIsModalOpen(true)}
+          onClick={handleOpenModal}
           className="trails-modal-button cursor-pointer font-semibold py-3 px-6 trails-font"
         >
           {buttonText || defaultButtonText}
@@ -1875,7 +2008,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           whileHover={{ scale: 1.02 }}
           whileTap={{ scale: 0.98 }}
           className="flex flex-col items-center justify-center"
-          onClick={() => setIsModalOpen(true)}
+          onClick={handleOpenModal}
         >
           {children}
         </motion.div>
@@ -1902,21 +2035,38 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
 
     return (
       <WidgetPropsProvider props={props}>
-        <CurrentScreenProvider initialScreen={initialScreen}>
-          <BackProvider>
-            <SelectedTokenProvider>
-              <DestinationSelectedTokenProvider>
-                <ChainFilterProvider>
-                  <BalanceVisibleProvider>
-                    <EarnPoolProvider>
-                      <WidgetContent ref={ref} />
-                    </EarnPoolProvider>
-                  </BalanceVisibleProvider>
-                </ChainFilterProvider>
-              </DestinationSelectedTokenProvider>
-            </SelectedTokenProvider>
-          </BackProvider>
-        </CurrentScreenProvider>
+        <ToastProvider>
+          <CurrentScreenProvider initialScreen={initialScreen}>
+            <BackProvider>
+              <SelectedTokenProvider>
+                <DestinationSelectedTokenProvider>
+                  <SelectedFeeTokenProvider>
+                    <SelectedRecipientProvider>
+                      <SwapAmountProvider>
+                        <ChainFilterProvider>
+                          <BalanceVisibleProvider>
+                            <SwapSettingsProvider>
+                              <ThemePreferenceProvider>
+                                <ThemeSyncer />
+                                <EarnPoolProvider>
+                                  <SelectedMeshExchangeProvider>
+                                    <DefaultTokenSelectionProvider>
+                                      <WidgetContent ref={ref} />
+                                    </DefaultTokenSelectionProvider>
+                                  </SelectedMeshExchangeProvider>
+                                </EarnPoolProvider>
+                              </ThemePreferenceProvider>
+                            </SwapSettingsProvider>
+                          </BalanceVisibleProvider>
+                        </ChainFilterProvider>
+                      </SwapAmountProvider>
+                    </SelectedRecipientProvider>
+                  </SelectedFeeTokenProvider>
+                </DestinationSelectedTokenProvider>
+              </SelectedTokenProvider>
+            </BackProvider>
+          </CurrentScreenProvider>
+        </ToastProvider>
       </WidgetPropsProvider>
     )
   },
@@ -1927,51 +2077,57 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
     const sequenceHooksContext = useContext(SequenceHooksContext)
     const wagmiContext = useContext(WagmiContext)
 
-    useEffect(() => {
-      if (props.appId) {
-        logger.console.warn(
-          "appId is deprecated. Use projectAccessKey instead.",
-        )
-        setSequenceProjectAccessKey(props.appId)
-      }
-      if (props.sequenceEnv) {
-        setSequenceEnv(props.sequenceEnv)
-      }
-      if (props.projectAccessKey) {
-        setSequenceProjectAccessKey(props.projectAccessKey)
-      }
-      if (props.sequenceIndexerUrl) {
-        setSequenceIndexerUrl(props.sequenceIndexerUrl)
-      }
-      if (props.sequenceApiUrl) {
-        setSequenceApiUrl(props.sequenceApiUrl)
-      }
-      if (props.sequenceNodeGatewayUrl) {
-        setSequenceNodeGatewayUrl(props.sequenceNodeGatewayUrl)
-      }
-      if (props.walletConnectProjectId) {
-        setWalletConnectProjectId(props.walletConnectProjectId)
-      }
-      if (props.slippageTolerance !== undefined) {
-        setSlippageTolerance(String(props.slippageTolerance))
-      }
-      if (typeof props.debug === "boolean") {
-        setDebug(props.debug)
-      }
-    }, [
-      props.appId,
-      props.projectAccessKey,
-      props.sequenceIndexerUrl,
-      props.sequenceApiUrl,
-      props.sequenceNodeGatewayUrl,
-      props.sequenceEnv,
-      props.walletConnectProjectId,
-      props.slippageTolerance,
-      props.debug,
-    ])
+    // 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) {
+      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.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)
+    }
+    if (props.sequenceNodeGatewayUrl) {
+      logger.console.log(
+        "props.sequenceNodeGatewayUrl",
+        props.sequenceNodeGatewayUrl,
+      )
+      setSequenceNodeGatewayUrl(props.sequenceNodeGatewayUrl)
+    }
+    if (props.walletConnectProjectId) {
+      logger.console.log(
+        "props.walletConnectProjectId",
+        props.walletConnectProjectId,
+      )
+      setWalletConnectProjectId(props.walletConnectProjectId)
+    }
+    if (props.slippageTolerance !== undefined) {
+      logger.console.log("props.slippageTolerance", props.slippageTolerance)
+      setSlippageTolerance(String(props.slippageTolerance))
+    }
+    if (typeof props.debug === "boolean") {
+      logger.console.log("props.debug", props.debug)
+      setDebug(props.debug)
+    }
 
     const wagmiConfig = React.useMemo(() => {
-      const chains = [...Object.values(viemChains)] as any
+      const chains = getAllChains() as any
       const baseConfig = {
         chains,
         transports: (chains as Array<Chain>).reduce((acc, chain) => {
@@ -2023,12 +2179,14 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
           props.appId ||
           getSequenceProjectAccessKey(),
         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(),
         },
       }