0xtrails 0.6.6 → 0.7.0

package/src/widget/widget.tsx

@@ -1,8 +1,6 @@
-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,
@@ -13,9 +11,16 @@ import React, {
   useRef,
   useState,
 } from "react"
-import { createPortal } from "react-dom"
+import { ShadowPortal } from "./components/ShadowPortal.js"
 import type { Chain, WalletClient } from "viem"
-import { createWalletClient, custom, defineChain, http, isAddress } from "viem"
+import {
+  createWalletClient,
+  custom,
+  defineChain,
+  http,
+  isAddress,
+  zeroAddress,
+} from "viem"
 import type { Connector } from "wagmi"
 import {
   createConfig,
@@ -55,9 +60,9 @@ import { usePools } from "../pools.js"
 import type { PrepareSendQuote } from "../prepareSend.js"
 import { isValidInteger, isValidNumeric } from "../prices.js"
 import type { Theme } from "../theme.js"
-import type { SupportedToken } from "../tokens.js"
+import type { Token } from "../tokens.js"
 import { getWethAddress } from "../tokens.js"
-import type { IntentTransaction } from "@0xsequence/trails-api"
+import type { IntentTransaction } from "@0xtrails/api"
 import type { TransactionState } from "../transactions.js"
 import {
   useQRCodeWallets,
@@ -69,7 +74,6 @@ import {
 import { generateAaveDepositCalldata } from "../aave.js"
 import { DEFAULT_MODE } from "../constants.js"
 import { generateMorphoDepositCalldata } from "../morpho.js"
-import css from "./compiled.css?inline"
 import { AccountIntentTransactionHistory } from "./components/AccountIntentTransactionHistory.js"
 import { AccountSettings } from "./components/AccountSettings.js"
 import { ChainList } from "./components/ChainList.js"
@@ -81,115 +85,50 @@ import { ErrorDisplay } from "./components/ErrorDisplay.js"
 import Footer from "./components/Footer.js"
 import FundMethods from "./components/FundMethods.js"
 import { Fund } from "./components/FundSwap.js"
-import { MeshConnectExchanges } from "./components/MeshConnectExchanges.js"
-import { MeshConnectFlow } from "./components/MeshConnectFlow.js"
-import type { MeshConnectProps } from "./components/MeshConnectIframe.js"
 import Modal from "./components/Modal.js"
 import { Pay } from "./components/Pay.js"
 import QRCodeDeposit from "./components/QRCodeDeposit.js"
 import QRCodeOptions from "./components/QRCodeOptions.js"
 import QRCodeWalletSelect from "./components/QRCodeWalletSelect.js"
 import Receipt from "./components/Receipt.js"
-import { Receive } from "./components/Receive.js"
 import { Recipients } from "./components/Recipients.js"
 import { Swap } from "./components/Swap.js"
 import { ThemeProvider } from "./components/ThemeProvider.js"
 import { ThemeSyncer } from "./components/ThemeSyncer.js"
-import { ToastProvider } from "./components/Toast.js"
 import TokenList from "./components/TokenList.js"
+import OriginSelectionAmount from "./components/OriginSelectionAmount.js"
 import TransferPending from "./components/TransferPendingVertical.js"
 import { UserPreferences } from "./components/UserPreferences.js"
 import WalletConfirmation from "./components/WalletConfirmation.js"
 import WalletConnectScreen from "./components/WalletConnect.js"
 import WalletConnectionPending from "./components/WalletConnectionPending.js"
 import { WalletList } from "./components/WalletList.js"
-import { BackProvider, useBack } from "./hooks/useBack.js"
-import { BalanceVisibleProvider } from "./hooks/useBalanceVisible.js"
-import { ChainFilterProvider } from "./hooks/useChainFilter.js"
+import { useBack } from "./hooks/useBack.js"
 import { useCheckout } from "./hooks/useCheckout.js"
-import {
-  CurrentScreenProvider,
-  useCurrentScreen,
-  type Screen,
-} from "./hooks/useCurrentScreen.js"
+import { useCurrentScreen } from "./hooks/useCurrentScreen.js"
 import { useDebugScreens } from "./hooks/useDebugScreens.js"
-import { DefaultTokenSelectionProvider } from "./hooks/useDefaultTokenSelection.js"
-import { DestinationSelectedTokenProvider } from "./hooks/useDestinationSelectedToken.js"
-import { EarnPoolProvider, useEarnPool } from "./hooks/useEarnPool.js"
+import { useEarnPool } from "./hooks/useEarnPool.js"
 import { useInitialRedirect } from "./hooks/useInitialRedirect.js"
 import { useIsSequenceWallet } from "./hooks/useIsSequenceWallet.js"
 import { ModeProvider } from "./hooks/useMode.js"
-import {
-  OriginSelectedTokenProvider as SelectedTokenProvider,
-  useOriginSelectedToken as useSelectedToken,
-  type Token,
-} from "./hooks/useOriginSelectedToken.js"
+import { useOriginSelectedToken as useSelectedToken } from "./hooks/useOriginSelectedToken.js"
 import { PriceImpactWarningProvider } from "./hooks/usePriceImpactWarning.js"
 import { useRecentTokens } from "./hooks/useRecentTokens.js"
-import {
-  SelectedFeeOptionProvider,
-  useSelectedFeeOption,
-} from "./hooks/useSelectedFeeOption.js"
-import {
-  SelectedFundMethodProvider,
-  useSelectedFundMethod,
-} from "./hooks/useSelectedFundMethod.js"
-import {
-  SelectedMeshExchangeProvider,
-  useSelectedMeshExchange,
-} from "./hooks/useSelectedMeshExchange.js"
-import {
-  SelectedRecipientProvider,
-  useSelectedRecipient,
-} from "./hooks/useSelectedRecipient.js"
+import { useSelectedFeeOption } from "./hooks/useSelectedFeeOption.js"
+import { useSelectedFundMethod } from "./hooks/useSelectedFundMethod.js"
+import { useSelectedRecipient } from "./hooks/useSelectedRecipient.js"
 import type { OnCompleteProps } from "./hooks/useSendForm.js"
-import { SwapAmountProvider } from "./hooks/useSwapAmount.js"
 import { useTargetAmount } from "./hooks/useTargetAmount.js"
-import { ThemeProvider as ThemePreferenceProvider } from "./hooks/useTheme.js"
-import {
-  useWalletConnectionContext,
-  WalletConnectionProvider,
-} from "./hooks/useWalletConnectionContext.js"
-import { useWidgetProps, WidgetPropsProvider } from "./hooks/useWidgetProps.js"
+import { useWalletConnectionContext } from "./hooks/useWalletConnectionContext.js"
+import { useWidgetProps } from "./hooks/useWidgetProps.js"
+import { WidgetProviders } from "./components/WidgetProviders.js"
 import {
   TrailsProvider,
+  TrailsContext,
   useTrails,
   type TrailsProviderProps,
 } from "./providers/TrailsProvider.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
-}
+import { useTrailsModal } from "./providers/TrailsModalProvider.js"
 
 // Validate toToken - must be "ETH", "USDC", or a valid hex address
 const isValidToToToken = (toToken: string | null | undefined) => {
@@ -276,6 +215,26 @@ export type TrailsWidgetProps = {
   appDescription?: string
   payMessage?: string
   isSmartWallet?: boolean
+  /**
+   * Optional onramp factory function (e.g., trailsOnramp from @0xtrails/onramp)
+   * If provided, enables exchange funding options in the widget
+   *
+   * @example
+   * ```tsx
+   * import { trailsOnramp } from "@0xtrails/onramp"
+   * <TrailsWidget onramp={trailsOnramp({ config: { exchanges: ['coinbase'] } })} />
+   * ```
+   */
+  onramp?: (handlers: {
+    setCurrentScreen: (screen: string) => void
+    onComplete?: (transferData: any) => void
+    onError?: (error: unknown) => void
+    onBack?: () => void
+    toTokenSymbol?: string
+    toTokenAmount?: string
+    toChainId?: number
+    toRecipientAddress?: string
+  }) => React.ReactElement
 }
 
 export interface TrailsWidgetRef {
@@ -451,11 +410,8 @@ const useTransactionState = (
     const allConfirmed = transactionStates.every(
       (tx: TransactionState) => tx.state === "confirmed",
     )
-    const hasFailures = transactionStates.some(
-      (tx: TransactionState) => tx.state === "failed",
-    )
 
-    if (allConfirmed && !hasFailures && onComplete) {
+    if (allConfirmed && onComplete) {
       logger.console.log(
         "[trails-sdk] All transactions confirmed, triggering completion",
       )
@@ -546,8 +502,32 @@ 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 { onramp: onrampFactory } = useWidgetProps()
+
+  // Modal state is managed by TrailsModalProvider
+  const {
+    isModalOpen,
+    openModal: openTrailsModal,
+    closeModal: closeTrailsModal,
+    pendingSelection,
+    setPendingSelection,
+    hostTransactionState,
+    setHostTransactionState,
+    hostTransactionQuote,
+    hostTransactionStates,
+    hostTransactionTimestamp,
+    resetHostTransactionState,
+    receiptActionButtonText,
+    onReceiptAction,
+    retryTransactionRef,
+  } = useTrailsModal()
+
+  useEffect(() => {
+    logger.console.log(
+      "[trails-sdk] [TrailsWidget] isModalOpen changed:",
+      isModalOpen,
+    )
+  }, [isModalOpen])
   const [currentMode, setCurrentMode] = useState<Mode>(mode)
   const { currentScreen, setCurrentScreen } = useCurrentScreen()
   const { goBack, clearHistory, setCurrentScreenWithBack, getPreviousScreen } =
@@ -608,8 +588,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   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") {
@@ -659,9 +637,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     if (currentMode === "earn") {
       return "Earn"
     }
-    if (currentMode === "receive") {
-      return "Receive"
-    }
     if (currentMode === "pay") {
       return "Pay"
     }
@@ -795,8 +770,19 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
   }
 
-  const [meshConnectProps, setMeshConnectProps] =
-    useState<Partial<MeshConnectProps> | null>(null)
+  const [onrampProps, setOnrampProps] = useState<{
+    toTokenSymbol?: string
+    toTokenAmount?: string
+    toChainId?: number
+    toRecipientAddress?: string
+  } | null>(null)
+
+  // Store callback to continue send after onramp completes
+  const [onrampContinueSend, setOnrampContinueSend] = useState<
+    (() => Promise<void>) | null
+  >(null)
+  const [onrampContinueSendInProgress, setOnrampContinueSendInProgress] =
+    useState(false)
 
   // Hook to auto-select pool when mode is "earn" and toAddress is specified
   const useAutoSelectPool = (
@@ -931,7 +917,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     setShowWalletConnectionRetry,
     setError,
     setIsConnecting,
-    setMeshConnectProps,
+    setOnrampProps,
     isConnected,
   })
 
@@ -955,6 +941,71 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     })
   }, [currentScreen, address])
 
+  useEffect(() => {
+    const status = hostTransactionState.status
+    if (status === "idle") {
+      return
+    }
+
+    if (!isModalOpen) {
+      openTrailsModal()
+    }
+
+    switch (status) {
+      case "awaiting-origin":
+        setCurrentScreen("select-origin-token")
+        break
+      case "awaiting-amount":
+        setCurrentScreen("select-origin-amount")
+        break
+      case "confirmation":
+        setCurrentScreen("wallet-confirmation")
+        break
+      case "pending":
+        setCurrentScreen("pending")
+        break
+      case "success":
+      case "error":
+        if (hostTransactionStates.length > 0) {
+          setCurrentScreen("receipt")
+        } else {
+          setCurrentScreen("pending")
+        }
+        break
+      default:
+        setCurrentScreen("pending")
+        break
+    }
+  }, [
+    hostTransactionState.status,
+    hostTransactionStates.length,
+    isModalOpen,
+    openTrailsModal,
+    setCurrentScreen,
+  ])
+
+  useEffect(() => {
+    if (!hostTransactionQuote) {
+      return
+    }
+    setPrepareSendQuote(hostTransactionQuote)
+  }, [hostTransactionQuote])
+
+  useEffect(() => {
+    if (hostTransactionStates.length === 0) {
+      return
+    }
+    setTransactionStates(hostTransactionStates)
+  }, [hostTransactionStates, setTransactionStates])
+
+  useEffect(() => {
+    if (hostTransactionState.status === "success" && hostTransactionTimestamp) {
+      setTotalCompletionSeconds(
+        Math.max(0, Math.floor((Date.now() - hostTransactionTimestamp) / 1000)),
+      )
+    }
+  }, [hostTransactionState.status, hostTransactionTimestamp])
+
   // Update analytics project access key when it changes
   useEffect(() => {
     if (trailsApiKey) {
@@ -1048,7 +1099,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
   }, [selectedPool, currentMode, generatedCalldata])
 
-  const handleWalletConnect = async (walletId: string) => {
+  const handleConnectWallet = async (walletId: string) => {
     try {
       setError(null)
       setIsConnecting(true)
@@ -1108,7 +1159,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
                 "[trails-sdk] Switching back to original active wallet:",
                 address,
               )
-              await switchAccount({ connector: originalConnector })
+              switchAccount({ connector: originalConnector })
             } catch (switchError) {
               logger.console.error(
                 "[trails-sdk] Failed to switch back to original wallet:",
@@ -1205,11 +1256,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       logger.console.error("[trails-sdk] Failed to disconnect:", error)
     }
 
-    if (currentMode === "receive") {
-      setCurrentScreen("receive")
-    } else {
-      setCurrentScreen("connect")
-    }
+    setCurrentScreen("connect")
   }
 
   const handleContinue = async () => {
@@ -1234,7 +1281,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             "[trails-sdk] Switching back to original active wallet after WalletConnect:",
             originalAddress,
           )
-          await switchAccount({ connector: originalConnector })
+          switchAccount({ connector: originalConnector })
         } catch (switchError) {
           logger.console.error(
             "[trails-sdk] Failed to switch back to original wallet after WalletConnect:",
@@ -1257,8 +1304,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       // 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") {
@@ -1276,6 +1321,36 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       setError(null)
       setSelectedToken(token)
 
+      // Check if there's a pending selection request from useTrailsSendTransaction
+      if (pendingSelection) {
+        if (pendingSelection.requireAmountInput) {
+          setHostTransactionState((prev) => ({
+            ...prev,
+            status: "awaiting-amount",
+          }))
+          handleTrackToken(token)
+          return
+        }
+        const originAddress = token.contractAddress || zeroAddress
+        const chainId = token.chainId ?? 0
+        try {
+          pendingSelection.resolve({
+            fromTokenAddress: originAddress,
+            fromChainId: chainId,
+          })
+        } catch (error) {
+          logger.console.error(
+            "[trails-sdk] Error resolving pending selection:",
+            error,
+          )
+          pendingSelection.reject(error as Error)
+        } finally {
+          setPendingSelection(undefined)
+        }
+        handleTrackToken(token)
+        return
+      }
+
       // For earn mode, check if we have toAddress and toChainId specified
       if (currentMode === "earn") {
         if (toAddress && toChainId) {
@@ -1290,8 +1365,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         }
       } else if (currentMode === "swap") {
         setCurrentScreen("swap")
-      } else if (currentMode === "receive") {
-        setCurrentScreen("send-form")
       } else {
         setCurrentScreen(currentMode === "fund" ? "fund-form" : "send-form")
       }
@@ -1302,45 +1375,83 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
   }
 
-  const handleRecentTokenSelect = (supportedToken: SupportedToken) => {
-    // Convert SupportedToken back to Token format for consistency
-    const token: Token = {
-      id: Math.random(), // Temporary ID
-      name: supportedToken.name,
-      symbol: supportedToken.symbol,
-      balance: "0", // We don't have balance info for recent tokens
-      imageUrl: supportedToken.imageUrl,
-      chainId: supportedToken.chainId,
-      contractAddress: supportedToken.contractAddress,
-      contractInfo: {
-        decimals: supportedToken.decimals,
-        symbol: supportedToken.symbol,
-        name: supportedToken.name,
-      },
-    }
-
+  const handleRecentTokenSelect = (token: Token) => {
     handleTokenSelect(token)
   }
 
   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}`,
+    const decimals = token.decimals || 18
+    // Convert to Token for addRecentToken (which now accepts Token)
+    const trailsToken: Token = {
       symbol: token.symbol,
       name: token.name,
+      decimals: decimals,
       contractAddress: token.contractAddress,
-      decimals,
+      tokenId: `${token.symbol}-${chainInfo?.name || token.chainId}`,
       chainId: token.chainId,
       chainName: chainInfo?.name || `Chain ${token.chainId}`,
       imageUrl: token.imageUrl,
     }
-    addRecentToken(supportedToken)
+    addRecentToken(trailsToken)
+  }
+
+  const handleOriginAmountSubmit = (amount: string) => {
+    if (pendingSelection && selectedToken) {
+      try {
+        pendingSelection.resolve({
+          fromTokenAddress: selectedToken.contractAddress || zeroAddress,
+          fromChainId: selectedToken.chainId ?? 0,
+          fromAmount: amount,
+        })
+        setPendingSelection(undefined)
+      } catch (error) {
+        logger.console.error(
+          "[trails-sdk] Error resolving pending selection amount:",
+          error,
+        )
+        pendingSelection.reject(error as Error)
+        setPendingSelection(undefined)
+      }
+    }
   }
 
   const handleOnSend = async (amount: string, recipient: string) => {
     logger.console.log("[trails-sdk] handleOnSend", amount, recipient)
+
+    // Check if there's a pending selection request from useTrailsSendTransaction
+    if (pendingSelection && selectedToken) {
+      try {
+        // Convert amount to token units (it's already in token units from the form)
+        const amountInTokenUnits = amount
+
+        // Resolve the pending selection with the selected token and amount
+        pendingSelection.resolve({
+          fromTokenAddress: selectedToken.contractAddress || zeroAddress,
+          fromChainId: selectedToken.chainId ?? 0,
+          fromAmount: amountInTokenUnits,
+        })
+
+        setPendingSelection(undefined)
+        return
+      } catch (error) {
+        logger.console.error(
+          "[trails-sdk] Error resolving pending selection:",
+          error,
+        )
+        if (pendingSelection) {
+          pendingSelection.reject(error as Error)
+          setPendingSelection(undefined)
+        }
+        return
+      }
+    }
+
+    // Normal flow: onSend is just a notification callback that the origin transaction was sent
+    // The actual transaction sending is handled by useSendForm internally
+    // Return resolved promise to ensure async function completes properly
+    return Promise.resolve()
   }
 
   const handleSendAnother = () => {
@@ -1370,6 +1481,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     // Clear selected fee option, but localStorage preference is preserved
     // Auto-selection will use the preference when fee options render next time
     clearSelectedFeeOption()
+    resetHostTransactionState()
   }, [
     setSelectedFundMethod,
     setDestinationTxHash,
@@ -1382,6 +1494,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     setCurrentScreen,
     clearHistory,
     clearSelectedFeeOption,
+    resetHostTransactionState,
   ])
 
   // Update the currentScreen state when when the widget receives an updated 'mode' prop passed in by the consuming app.
@@ -1391,16 +1504,57 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     setCurrentScreen(initialScreen)
   }, [currentMode, getInitialScreenForMode, setCurrentScreen])
 
+  // When pendingSelection exists (from useTrailsSendTransaction),
+  // open the modal and navigate to select-origin-token screen
+  useEffect(() => {
+    if (pendingSelection) {
+      // Open modal if not already open
+      if (!isModalOpen) {
+        openTrailsModal()
+      }
+      // Navigate to select-origin-token screen
+      if (currentScreen !== "select-origin-token") {
+        setCurrentScreen("select-origin-token")
+      }
+    }
+  }, [
+    pendingSelection,
+    isModalOpen,
+    currentScreen,
+    setCurrentScreen,
+    openTrailsModal,
+  ])
+
   const handleOpenModal = useCallback(() => {
-    setIsModalOpen(true)
+    openTrailsModal()
     onOpen?.()
-  }, [onOpen])
+  }, [openTrailsModal, onOpen])
 
   const handleCloseModal = useCallback(() => {
-    setIsModalOpen(false)
+    if (pendingSelection) {
+      logger.console.log(
+        "[trails-sdk] handleCloseModal called, rejecting pending selection",
+      )
+      pendingSelection.reject(new Error("Modal closed by user"))
+      setPendingSelection(undefined)
+    } else {
+      logger.console.log(
+        "[trails-sdk] handleCloseModal called, no pending selection",
+      )
+    }
+    logger.console.log("[trails-sdk] handleCloseModal called, closing modal")
+    closeTrailsModal()
     resetState()
+    resetHostTransactionState()
     onClose?.()
-  }, [resetState, onClose])
+  }, [
+    closeTrailsModal,
+    resetState,
+    resetHostTransactionState,
+    onClose,
+    pendingSelection,
+    setPendingSelection,
+  ])
 
   // Expose modal control methods via ref
   useImperativeHandle(
@@ -1454,18 +1608,63 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     setCurrentScreen("receipt")
   }
 
-  function handleMeshConnectComplete(transferData: any) {
-    logger.console.log(
-      "[trails-sdk] Mesh Connect transfer completed:",
-      transferData,
-    )
+  async function handleOnrampComplete(transferData: any) {
+    logger.console.log("[trails-sdk] Onramp transfer completed:", transferData)
     logger.console.log(
       "[trails-sdk] Using real transaction states from prepareSendQuote",
     )
-    if (prepareSendQuote) {
-      setTransactionStates(prepareSendQuote.transactionStates)
+    logger.console.log("[trails-sdk] handleOnrampComplete state:", {
+      hasOnrampContinueSend: !!onrampContinueSend,
+      hasPrepareSendQuote: !!prepareSendQuote,
+      currentScreen,
+      onrampContinueSendInProgress,
+    })
+
+    // Prevent multiple simultaneous calls
+    if (onrampContinueSendInProgress) {
+      logger.console.warn(
+        "[trails-sdk] onrampContinueSend already in progress, ignoring duplicate call",
+      )
+      return
     }
+
+    // Navigate away from onramp screen immediately
+    logger.console.log("[trails-sdk] Navigating away from onramp screen")
     setCurrentScreen("pending")
+
+    // Continue with the send flow after onramp completes
+    if (onrampContinueSend) {
+      logger.console.log(
+        "[trails-sdk] Continuing send flow after onramp completion",
+      )
+      setOnrampContinueSendInProgress(true)
+      try {
+        await onrampContinueSend()
+        logger.console.log(
+          "[trails-sdk] onrampContinueSend completed successfully",
+        )
+      } catch (error) {
+        logger.console.error(
+          "[trails-sdk] Error continuing send after onramp:",
+          error,
+        )
+        handleSendError(error as Error)
+      } finally {
+        setOnrampContinueSend(null)
+        setOnrampContinueSendInProgress(false)
+      }
+    } else {
+      // Fallback: just show pending screen if no continue callback
+      logger.console.log(
+        "[trails-sdk] No onrampContinueSend callback, showing pending screen",
+      )
+      if (prepareSendQuote) {
+        logger.console.log(
+          "[trails-sdk] Setting transaction states from prepareSendQuote",
+        )
+        setTransactionStates(prepareSendQuote.transactionStates)
+      }
+    }
   }
 
   function handleTransactionStateChange(
@@ -1545,12 +1744,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
   }
 
-  const handleSelectExchangeList = () => {
-    setSelectedFundMethod("exchange")
-    setCurrentScreen("mesh-connect-exchanges")
-  }
-
-  const handleNavigateToMeshConnect = (
+  const handleNavigateToOnramp = (
     props: {
       toTokenSymbol: string
       toTokenAmount: string
@@ -1558,10 +1752,13 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       toRecipientAddress: string
     },
     quote?: PrepareSendQuote | null,
+    continueSend?: () => Promise<void>,
   ) => {
     setPrepareSendQuote(quote ?? null)
-    setMeshConnectProps(props)
-    setCurrentScreen("mesh-connect")
+    setOnrampProps(props)
+    setOnrampContinueSend(() => continueSend || null)
+    // Render onramp component directly - it manages its own routing
+    setCurrentScreen("onramp")
   }
 
   const handleSendError = (error: Error | string | null) => {
@@ -1571,14 +1768,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     const errorMessage = getFullErrorMessage(error)
     const isRejected = getIsUserRejectionError(error)
     const isBalanceTooLow = getIsBalanceTooLowError(error)
-    const isApiError = getIsApiError(error)
+    const isApiErr = getIsApiError(error)
     const isRateLimited = getIsRateLimitedError(error)
 
     if (isRateLimited) {
       // no-op
     } else if (isRejected) {
       setShowWalletConfirmRetry(true)
-    } else if (isBalanceTooLow || isApiError) {
+    } else if (isBalanceTooLow || isApiErr) {
       setShowWalletConfirmRetry(true)
       setError(errorMessage)
     } else {
@@ -1653,7 +1850,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
                 )
                 // Auto-trigger connection
                 setTimeout(() => {
-                  handleWalletConnect(walletId)
+                  handleConnectWallet(walletId)
                 }, 100)
               }
             }}
@@ -1670,7 +1867,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           <FundMethods
             onBack={() => goHome()}
             onSelectWalletConnect={handleSelectWalletConnect}
-            onSelectExchangeList={handleSelectExchangeList}
             onSelectConnectedAccount={() => {
               setSelectedFundMethod("connected-account")
               setCurrentScreen("home")
@@ -1706,14 +1902,33 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onNavigateToFundMethods={() => setCurrentScreen("fund-methods")}
           />
         )
+      case "select-origin-token":
+        return (
+          <TokenList
+            onContinue={handleTokenSelect}
+            onBack={handleCloseModal}
+            targetAmountUsd={null}
+            targetAmountUsdFormatted={null}
+            onError={handleTokenListError}
+            recentTokens={recentTokens}
+            onRecentTokenSelect={handleRecentTokenSelect}
+            fundMethod={null}
+            renderInline={false}
+          />
+        )
+      case "select-origin-amount":
+        return (
+          <OriginSelectionAmount
+            token={selectedToken}
+            onBack={() => setCurrentScreen("select-origin-token")}
+            onCancel={handleCloseModal}
+            onSubmit={handleOriginAmountSubmit}
+          />
+        )
       case "send-form":
         return (
           <Pay
-            onBack={
-              currentMode === "receive"
-                ? () => setCurrentScreen("receive")
-                : undefined
-            }
+            onBack={undefined}
             selectedToken={selectedToken}
             onSend={handleOnSend}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
@@ -1747,7 +1962,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
             quoteProvider={quoteProvider}
             fundMethod={selectedFundMethod}
-            onNavigateToMeshConnect={handleNavigateToMeshConnect}
+            onNavigateToOnramp={handleNavigateToOnramp}
             onAmountUpdate={(amount: string) => {
               if (
                 selectedPool &&
@@ -1802,23 +2017,44 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
             quoteProvider={quoteProvider}
             fundMethod={selectedFundMethod}
-            onNavigateToMeshConnect={handleNavigateToMeshConnect}
+            onNavigateToOnramp={handleNavigateToOnramp}
             checkoutOnHandlers={checkoutOnHandlers}
             recentTokens={recentTokens}
             onRecentTokenSelect={handleRecentTokenSelect}
             onTrackToken={handleTrackToken}
           />
         )
-      case "wallet-confirmation":
+      case "wallet-confirmation": {
+        // For hook-initiated transactions, use retryEnabled from hostTransactionState
+        const isHookInitiated = hostTransactionState.status !== "idle"
+        const retryEnabled = isHookInitiated
+          ? (hostTransactionState.retryEnabled ?? false)
+          : showWalletConfirmRetry
+
+        // For hook-initiated retry, call the retry function from ref
+        const handleHookRetry = () => {
+          if (retryTransactionRef.current) {
+            // Reset retry flag before retrying
+            setHostTransactionState((prev) => ({
+              ...prev,
+              retryEnabled: false,
+            }))
+            retryTransactionRef.current()
+          }
+        }
+
         return (
           <WalletConfirmation
             onBack={handleBack}
             onComplete={handleWalletConfirmComplete}
-            retryEnabled={showWalletConfirmRetry}
-            onRetry={handleWalletConfirmRetry}
+            retryEnabled={retryEnabled}
+            onRetry={
+              isHookInitiated ? handleHookRetry : handleWalletConfirmRetry
+            }
             quote={prepareSendQuote}
           />
         )
+      }
       case "qr-code-wallet-select":
         return (
           <QRCodeWalletSelect
@@ -1846,36 +2082,125 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onElapsedTime={handleElapsedTime}
             transactionStates={transactionStates}
             quote={prepareSendQuote}
+            timestamp={hostTransactionTimestamp ?? undefined}
             onContinue={() => {
               logger.console.log("[trails-sdk] onContinue called")
               setCurrentScreen("receipt")
             }}
           />
         )
-      case "receipt":
+      case "receipt": {
+        // For hook-initiated transactions, use custom receipt action if provided
+        const isHookInitiated = hostTransactionState.status !== "idle"
+        const receiptOnSendAnother = isHookInitiated
+          ? (onReceiptAction ?? undefined)
+          : handleSendAnother
+        const receiptActionText = isHookInitiated
+          ? (receiptActionButtonText ?? undefined)
+          : undefined
+
         return (
           <Receipt
-            onSendAnother={handleSendAnother}
+            onSendAnother={receiptOnSendAnother}
             onClose={handleCloseModal}
             renderInline={renderInline}
             transactionStates={transactionStates}
             totalCompletionSeconds={totalCompletionSeconds ?? undefined}
             quote={prepareSendQuote}
             showCloseButton={false}
+            actionButtonText={receiptActionText}
           />
         )
-      case "mesh-connect":
-        return (
-          <MeshConnectFlow
-            onBack={handleBack}
-            onComplete={handleMeshConnectComplete}
-            toTokenSymbol={meshConnectProps?.toTokenSymbol}
-            toTokenAmount={meshConnectProps?.toTokenAmount}
-            toChainId={meshConnectProps?.toChainId}
-            toRecipientAddress={meshConnectProps?.toRecipientAddress}
-            selectedExchange={selectedExchange}
-          />
-        )
+      }
+      case "onramp":
+        logger.console.log("[trails-sdk] Rendering onramp screen", {
+          onrampFactory: !!onrampFactory,
+          onrampProps,
+        })
+
+        // Check if onramp factory function is provided
+        if (!onrampFactory) {
+          // Factory not provided - show fallback UI
+          return (
+            <div className="flex flex-col h-full p-4">
+              <div className="flex items-center mb-4">
+                <button
+                  type="button"
+                  onClick={handleBack}
+                  className="flex h-8 w-8 justify-center items-center rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 mr-2"
+                  title="Back"
+                >
+                  ←
+                </button>
+                <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                  Exchange Funding
+                </h2>
+              </div>
+              <div className="flex-1 flex items-center justify-center">
+                <div className="text-center p-4 border border-solid border-gray-200 dark:border-gray-700 rounded-lg">
+                  <p className="text-gray-600 dark:text-gray-400 mb-2">
+                    Exchange funding is not available.
+                  </p>
+                  <p className="text-sm text-gray-500 dark:text-gray-500">
+                    Please provide an onramp factory function to enable this
+                    feature.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )
+        }
+
+        // Call the factory function with handlers to get the component
+        try {
+          return (
+            <div className="flex flex-col h-full">
+              {onrampFactory({
+                setCurrentScreen: (screen: string) => {
+                  setCurrentScreen(screen as any)
+                },
+                onComplete: handleOnrampComplete,
+                onError: (error) => {
+                  logger.console.error("[trails-sdk] Onramp error:", error)
+                },
+                onBack: handleBack,
+                toTokenSymbol: onrampProps?.toTokenSymbol,
+                toTokenAmount: onrampProps?.toTokenAmount,
+                toChainId: onrampProps?.toChainId,
+                toRecipientAddress: onrampProps?.toRecipientAddress,
+              })}
+            </div>
+          )
+        } catch (error) {
+          logger.console.error("[trails-sdk] Error rendering onramp:", error)
+          return (
+            <div className="flex flex-col h-full p-4">
+              <div className="flex items-center mb-4">
+                <button
+                  type="button"
+                  onClick={handleBack}
+                  className="flex h-8 w-8 justify-center items-center rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 mr-2"
+                  title="Back"
+                >
+                  ←
+                </button>
+                <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                  Exchange Funding
+                </h2>
+              </div>
+              <div className="flex-1 flex items-center justify-center">
+                <div className="text-center p-4 border border-solid border-red-200 dark:border-red-700 rounded-lg">
+                  <p className="text-red-600 dark:text-red-400 mb-2">
+                    Error loading exchange funding.
+                  </p>
+                  <p className="text-sm text-red-500 dark:text-red-500">
+                    {error instanceof Error ? error.message : "Unknown error"}
+                  </p>
+                </div>
+              </div>
+            </div>
+          )
+        }
       case "wallet-connect":
         return (
           <WalletConnectScreen
@@ -1894,6 +2219,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
                 "[trails-sdk] Wallet selected from wallet-list:",
                 walletId,
               )
+
               if (
                 allWallets.find((w) => w.id === walletId)?.connector ===
                 walletConnectConnector
@@ -1919,7 +2245,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
                 }, 100)
                 // Auto-trigger connection
                 setTimeout(() => {
-                  handleWalletConnect(walletId)
+                  handleConnectWallet(walletId)
                 }, 100)
               }
             }}
@@ -1947,7 +2273,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
             quoteProvider={quoteProvider}
             fundMethod={selectedFundMethod}
-            onNavigateToMeshConnect={handleNavigateToMeshConnect}
+            onNavigateToOnramp={handleNavigateToOnramp}
             checkoutOnHandlers={checkoutOnHandlers}
             recentTokens={recentTokens}
             onRecentTokenSelect={handleRecentTokenSelect}
@@ -1987,7 +2313,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
             quoteProvider={quoteProvider}
             fundMethod={selectedFundMethod}
-            onNavigateToMeshConnect={handleNavigateToMeshConnect}
+            onNavigateToOnramp={handleNavigateToOnramp}
             onAmountUpdate={undefined}
             checkoutOnHandlers={checkoutOnHandlers}
             recentTokens={recentTokens}
@@ -1995,16 +2321,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onTrackToken={handleTrackToken}
           />
         )
-      case "receive":
-        return (
-          <Receive
-            accountAddress={toAddress || ""}
-            isConnected={isConnected}
-            onConnectWallet={() => setCurrentScreen("connect")}
-            onPay={() => setCurrentScreen("send-form")}
-            toChainId={toChainId ? Number(toChainId) : undefined}
-          />
-        )
       case "wallet-connection-pending":
         return (
           <WalletConnectionPending
@@ -2012,7 +2328,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onRetry={() => {
               if (selectedWalletId) {
                 setShowWalletConnectionRetry(false)
-                handleWalletConnect(selectedWalletId)
+                handleConnectWallet(selectedWalletId)
               }
             }}
             selectedWalletId={selectedWalletId || ""}
@@ -2047,8 +2363,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             disconnectHandler={handleWalletDisconnect}
           />
         )
-      case "mesh-connect-exchanges":
-        return <MeshConnectExchanges onBack={handleBack} />
       case "home": {
         // Navigation handled by useEffect above, otherwise it would cause a loop
         return null
@@ -2060,70 +2374,68 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
 
   const renderScreen = () => {
     return (
-      <ModalProvider closeModal={handleCloseModal} isModalOpen={isModalOpen}>
-        <ModeProvider
+      <ModeProvider
+        value={{
+          mode: currentMode,
+        }}
+      >
+        <PriceImpactWarningProvider
           value={{
-            mode: currentMode,
+            thresholdBps: priceImpactWarningThresholdBps,
+            warningMessage: priceImpactWarningMessage,
+            fallbackBridgeUrl: priceImpactFallbackBridgeUrl,
           }}
         >
-          <PriceImpactWarningProvider
-            value={{
-              thresholdBps: priceImpactWarningThresholdBps,
-              warningMessage: priceImpactWarningMessage,
-              fallbackBridgeUrl: priceImpactFallbackBridgeUrl,
+          <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 max-w-[400px] min-w-0 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()}
           >
-            <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>
+            <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 min-w-0"
+                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>
     )
   }
 
@@ -2166,48 +2478,11 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
 
 const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
   (props, ref) => {
-    // 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 = "home"
-
     return (
-      <WidgetPropsProvider props={props}>
-        <ToastProvider>
-          <CurrentScreenProvider initialScreen={initialScreen}>
-            <BackProvider>
-              <WalletConnectionProvider>
-                <SelectedTokenProvider>
-                  <DestinationSelectedTokenProvider>
-                    <SelectedFeeOptionProvider>
-                      <SelectedRecipientProvider>
-                        <SwapAmountProvider>
-                          <ChainFilterProvider>
-                            <BalanceVisibleProvider>
-                              <ThemePreferenceProvider>
-                                <SelectedFundMethodProvider>
-                                  <ThemeSyncer />
-                                  <EarnPoolProvider>
-                                    <SelectedMeshExchangeProvider>
-                                      <DefaultTokenSelectionProvider>
-                                        <WidgetContent ref={ref} />
-                                      </DefaultTokenSelectionProvider>
-                                    </SelectedMeshExchangeProvider>
-                                  </EarnPoolProvider>
-                                </SelectedFundMethodProvider>
-                              </ThemePreferenceProvider>
-                            </BalanceVisibleProvider>
-                          </ChainFilterProvider>
-                        </SwapAmountProvider>
-                      </SelectedRecipientProvider>
-                    </SelectedFeeOptionProvider>
-                  </DestinationSelectedTokenProvider>
-                </SelectedTokenProvider>
-              </WalletConnectionProvider>
-            </BackProvider>
-          </CurrentScreenProvider>
-        </ToastProvider>
-      </WidgetPropsProvider>
+      <WidgetProviders props={props}>
+        <ThemeSyncer />
+        <WidgetContent ref={ref} />
+      </WidgetProviders>
     )
   },
 )
@@ -2215,6 +2490,8 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
 export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
   (props, ref) => {
     const wagmiContext = useContext(WagmiContext)
+    const trailsContext = useContext(TrailsContext)
+    const hasParentTrailsProvider = Boolean(trailsContext)
 
     // Validate required props
     if (!props.apiKey) {
@@ -2276,48 +2553,34 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       debug: props.debug,
     }
 
-    // Create content with only the providers that don't exist in parent
-    const content = (() => {
-      const widgetContent = (
-        <ThemeProvider initialTheme={props.theme}>
-          <WidgetInner {...props} ref={ref} />
-        </ThemeProvider>
-      )
+    const shouldWrapWithWagmiProvider = props.decoupleWagmi || !wagmiContext
+    const shouldWrapWithTrailsProvider = !hasParentTrailsProvider
 
-      if (props.decoupleWagmi) {
-        return (
-          <TrailsProvider config={trailsConfig}>
-            <AaveProvider client={aaveClient}>
-              <QueryClientProvider client={queryClient}>
-                <WagmiProvider config={wagmiConfig}>
-                  {widgetContent}
-                </WagmiProvider>
-              </QueryClientProvider>
-            </AaveProvider>
-          </TrailsProvider>
-        )
-      }
+    const widgetContent = (
+      <ThemeProvider initialTheme={props.theme}>
+        <WidgetInner {...props} ref={ref} />
+      </ThemeProvider>
+    )
 
-      const baseContent = (
-        <TrailsProvider config={trailsConfig}>
-          <AaveProvider client={aaveClient}>
-            <QueryClientProvider client={queryClient}>
-              {wagmiContext ? (
-                // WagmiProvider exists in parent, don't wrap
-                widgetContent
-              ) : (
-                // WagmiProvider missing, wrap with it
-                <WagmiProvider config={wagmiConfig}>
-                  {widgetContent}
-                </WagmiProvider>
-              )}
-            </QueryClientProvider>
-          </AaveProvider>
-        </TrailsProvider>
-      )
+    const wagmiWrappedContent = shouldWrapWithWagmiProvider ? (
+      <WagmiProvider config={wagmiConfig}>{widgetContent}</WagmiProvider>
+    ) : (
+      widgetContent
+    )
+
+    const queryClientWrappedContent = (
+      <QueryClientProvider client={queryClient}>
+        {wagmiWrappedContent}
+      </QueryClientProvider>
+    )
 
-      return baseContent
-    })()
+    const content = shouldWrapWithTrailsProvider ? (
+      <TrailsProvider config={trailsConfig}>
+        {queryClientWrappedContent}
+      </TrailsProvider>
+    ) : (
+      queryClientWrappedContent
+    )
 
     const customCss = useMemo(() => {
       if (props.customCss instanceof Object) {
@@ -2338,56 +2601,6 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
   },
 )
 
-export function ShadowPortal({
-  children,
-  customCss,
-}: {
-  children: React.ReactNode
-  customCss?: string | Record<string, string>
-}): React.JSX.Element {
-  const hostRef = useRef<HTMLDivElement>(null)
-  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null)
-
-  useEffect(() => {
-    if (hostRef.current && !hostRef.current.shadowRoot) {
-      const shadow = hostRef.current.attachShadow({ mode: "open" })
-      setShadowRoot(shadow)
-
-      // Inject <style> tag with your widget's CSS
-      const styleTag = document.createElement("style")
-      styleTag.textContent = css
-      shadow.appendChild(styleTag)
-    }
-  }, [])
-
-  // Update custom CSS when it changes
-  useEffect(() => {
-    if (shadowRoot) {
-      // Remove any existing custom CSS
-      const existingCustomStyles = shadowRoot.querySelectorAll(
-        'style[id="custom-css"]',
-      )
-      existingCustomStyles.forEach((style) => {
-        style.remove()
-      })
-
-      // Inject new custom CSS if provided
-      if (customCss) {
-        const customStyleTag = document.createElement("style")
-        customStyleTag.id = "custom-css"
-        customStyleTag.textContent = `:root, [data-theme="light"], [data-theme="dark"] { ${customCss} }`
-        shadowRoot.appendChild(customStyleTag)
-      }
-    }
-  }, [customCss, shadowRoot])
-
-  return (
-    <div ref={hostRef}>
-      {shadowRoot ? createPortal(children, shadowRoot) : null}
-    </div>
-  )
-}
-
 // Export standalone functions for modal control
 export const createModalController = (
   ref: React.RefObject<TrailsWidgetRef>,