0xtrails 0.13.2 → 0.15.0

package/src/widget/widget.tsx

@@ -1,3400 +0,0 @@
-import { elapsed, toSeconds } from "../utils/time.js"
-import { AnimatePresence, motion } from "motion/react"
-import React, {
-  forwardRef,
-  StrictMode,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react"
-import { invalidateTokenBalancesCache } from "../query/balance.queries.js"
-import {
-  type ProviderTreeProps,
-  IsolatedProviders,
-  DefaultProviders,
-} from "./providers/WidgetProviderTree.js"
-import { createWagmiConfig } from "./utils/createWagmiConfig.js"
-import { ShadowPortal } from "./components/ShadowPortal.js"
-import { QuoteDetails } from "./components/QuoteDetails.js"
-import type { Chain, WalletClient, EIP1193Provider } from "viem"
-import {
-  createWalletClient,
-  custom,
-  defineChain,
-  isAddress,
-  zeroAddress,
-} from "viem"
-import type { Connector } from "wagmi"
-
-// Type for EIP-6963 connector with info property
-interface EIP6963Connector extends Connector {
-  info?: {
-    rdns?: string
-    name?: string
-    icon?: string
-  }
-}
-/** Transfer result data returned by an onramp provider on completion.
- * Shape based on @meshconnect/web-link-sdk TransferFinishedPayload. */
-interface OnrampTransferResult {
-  status: string
-  txId: string
-  fromAddress: string
-  toAddress: string
-  symbol: string
-  amount: number
-  networkId: string
-  amountInFiat?: number
-  totalAmountInFiat?: number
-  networkName?: string
-  txHash?: string
-  transferId?: string
-}
-
-import {
-  createStorage,
-  useAccount,
-  useAccountEffect,
-  useConnect,
-  useConnections,
-  useConnectors,
-  useDisconnect,
-  useSwitchAccount,
-} from "wagmi"
-import { getSessionId } from "../analytics.js"
-import { getChainInfo } from "../chains.js"
-// Config is now managed exclusively by TrailsProvider
-import { cssObjectToString } from "../cssUtils.js"
-import {
-  getFullErrorMessage,
-  getIsApiError,
-  getIsBalanceTooLowError,
-  getIsRateLimitedError,
-  getIsUserRejectionError,
-  getPrettifiedErrorMessage,
-} from "../error.js"
-import { logger } from "../logger.js"
-import { abortControllerRegistry } from "../abortController.js"
-import type { Pool } from "../pools.js"
-import { usePools } from "../pools.js"
-import type { PrepareSendQuote } from "../prepareSend.js"
-import { isValidInteger, isValidNumeric } from "../utils/validation.js"
-import type { Theme } from "../theme.js"
-import type { Token } from "../tokens.js"
-import { getWethAddress } from "../tokens.js"
-import type { IntentTransaction } from "@0xtrails/api"
-import {
-  getQRCodeWallets,
-  getWalletIdFromRdns,
-  wagmiConnectorToWalletId,
-} from "@0xtrails/wallet-registry"
-import type { TransactionState } from "../transactions.js"
-import { useOnrampClient } from "../onrampClient.js"
-import {
-  useWallets,
-  getWalletConnectConnector,
-  getConnectorsInternal,
-  type WalletConnector,
-} from "../wallets.js"
-// import { useOpenConnectModal } from "@0xsequence/connect"
-import {
-  generateAaveDepositCalldata,
-  generateMorphoDepositCalldata,
-} from "../poolUtils.js"
-import { AccountIntentTransactionHistory } from "./components/AccountIntentTransactionHistory.js"
-import { AccountSettings } from "./components/AccountSettings.js"
-import { ChainList } from "./components/ChainList.js"
-import { ConnectWallet } from "./components/ConnectWallet.js"
-import { MeldStepsFlow } from "./components/MeldStepsFlow.js"
-import { MeldHistory } from "./components/MeldHistory.js"
-import { Disconnect } from "./components/Disconnect.js"
-import { Earn } from "./components/Earn.js"
-import EarnPools from "./components/EarnPools.js"
-import { ErrorDisplay } from "./components/ErrorDisplay.js"
-import Footer from "./components/Footer.js"
-import { Fund } from "./components/Fund.js"
-import { Withdraw } from "./components/Withdraw.js"
-import FundMethods from "./components/FundMethods.js"
-import { MeshExchangeSelection } from "./components/MeshExchangeSelection.js"
-import OnrampPaymentMethods from "./components/OnrampPaymentMethods.js"
-import Modal from "./components/Modal.js"
-import { Pay } from "./components/Pay.js"
-import DirectTransfer from "./components/DirectTransfer.js"
-import OnrampProviderConfirmation from "./components/OnrampProviderConfirmation.js"
-import QRCodeOptions from "./components/QRCodeOptions.js"
-import QRCodeWalletSelect from "./components/QRCodeWalletSelect.js"
-import Receipt from "./components/Receipt.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 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 { FundWalletSelection } from "./components/FundWalletSelection.js"
-import { WalletList } from "./components/WalletList.js"
-import { useCheckout } from "./hooks/useCheckout.js"
-import { useDebugScreens } from "./hooks/useDebugScreens.js"
-import { useExternalFundingReceiptSync } from "./hooks/useExternalFundingReceiptSync.js"
-import { getWidgetOnrampConfig } from "./utils/trailsOnrampConfig.js"
-import type { TrailsOnRampConfig } from "../onramp/TrailsOnRampProvider.js"
-import { trailsOnramp, type OnrampFactory } from "../onramp/trailsOnramp.js"
-import { useScreenTracking } from "./hooks/useScreenTracking.js"
-import { useEarnPool } from "./hooks/useEarnPool.js"
-
-import { useIsSequenceWallet } from "./hooks/useIsSequenceWallet.js"
-import { useOriginSelectedToken as useSelectedToken } from "./hooks/useOriginSelectedToken.js"
-import { PriceImpactWarningProvider } from "./hooks/usePriceImpactWarning.js"
-import { useRecentTokens } from "./hooks/useRecentTokens.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 { useTargetAmount } from "./hooks/useTargetAmount.js"
-import { useSwapState } from "./hooks/useSwapState.js"
-import { useWidgetAnalytics } from "./analytics/useWidgetAnalytics.js"
-import { useWalletConnectionContext } from "./hooks/useWalletConnectionContext.js"
-import { useWidgetProps } from "./hooks/useWidgetProps.js"
-import { clearFundStateForMethodSwitch } from "./utils/fundMethodSwitchState.js"
-import { useOnRampProviderWidget } from "./hooks/useOnRampProviderWidget.js"
-import { WidgetProviders } from "./components/WidgetProviders.js"
-import {
-  useTrails,
-  type TrailsProviderProps,
-} from "./providers/TrailsProvider.js"
-import { useTrailsModal } from "./providers/TrailsModalProvider.js"
-import {
-  useViewManager,
-  useNavigationEffect,
-  useScreenGuard,
-  getInitialScreen,
-  type Screen,
-  type Mode,
-} from "./hooks/useViewManager.js"
-import PaymentMethods from "./components/PaymentMethods.js"
-import type { OnrampQuote } from "./hooks/useOnRampQuote.js"
-import {
-  addressEqual,
-  isNativeToken,
-  normalizeAddress,
-} from "../utils/address.js"
-import { isWalletConnectConnector } from "../walletUtils.js"
-import type { SendOptions, SwapReturn } from "./hooks/useQuote.js"
-import { hasAnyFailedOrAbortedTransactions } from "./utils/transactionFailure.js"
-import {
-  shouldClearTransferFlowOnNavigate,
-  shouldRedirectToConnect,
-} from "./utils/viewManagerGuards.js"
-import type { FundMethod } from "../transactionIntent/types.js"
-import { isExternalFundingMethod } from "../transactionIntent/types.js"
-
-// Validate toToken - must be "ETH", "USDC", or a valid hex address
-const isValidToToToken = (toToken: string | null | undefined) => {
-  if (toToken === null || toToken === undefined || toToken === "") {
-    return true // Empty values are considered valid
-  }
-  const token = String(toToken).trim()
-  if (token?.length > 0 && token?.length <= 5) {
-    return true
-  }
-
-  return isAddress(token)
-}
-
-export type FundMethodListOption =
-  | "connected-wallet"
-  | "crypto-transfer"
-  | "cc-onramp"
-  | "exchange"
-  | "exchange-onramp"
-
-export const WidgetFundMethod = {
-  Wallet: "wallet",
-  CryptoTransfer: "crypto-transfer",
-  Onramp: "onramp",
-  OnrampExchange: "onramp-exchange",
-} as const
-export type WidgetFundMethod =
-  (typeof WidgetFundMethod)[keyof typeof WidgetFundMethod]
-
-export type TrailsWidgetProps = {
-  apiKey: string
-  sequenceIndexerUrl?: string
-  trailsApiUrl?: string
-  trailsAppUrl?: string
-  sequenceNodeGatewayUrl?: string
-  sequenceMetadataUrl?: string
-  sequenceApiUrl?: string
-  toAddress?: string | null
-  toAmount?: string | null
-  /** Controlled destination chain, user cannot change selection */
-  toChainId?: number | string | null
-  /** Controlled destination token, user cannot change selection */
-  toToken?: string | null
-  /** Default destination chain, user can change selection */
-  defaultToChainId?: number | string | null
-  /** Default destination token, user can change selection */
-  defaultToToken?: string | null
-  /** Default input mode for fund/withdraw modes: "fiat" starts with USD input, "token" starts with token input */
-  defaultInputMode?: "fiat" | "token"
-  toCalldata?: string | null
-  fromChainId?: number | string | null
-  fromToken?: string | null
-  fromAccount?: string | null
-  children?: React.ReactNode
-  renderInline?: boolean
-  theme?: Theme
-  mode?: Mode
-  /**
-   * Pre-select funding method used by the widget.
-   *
-   * This applies across modes (fund/pay/swap/earn) wherever funding method is used.
-   * In fund mode it also controls the initial destination flow:
-   * - "wallet" -> Funding with wallet flow
-   * - "crypto-transfer" --> Funding with QR Code or deposit to address flow
-   * - "onramp" --> Funding with onramp flow
-   * - "onramp-exchange" --> Funding with exchange flow
-   */
-  fundMethod?: WidgetFundMethod
-  walletOptions?: string[]
-  onOriginConfirmation?: (data: {
-    txHash: string
-    chainId: number
-    sessionId: string
-  }) => void
-  onDestinationConfirmation?: (data: {
-    txHash: string
-    chainId: number
-    sessionId: string
-  }) => void
-  onCheckoutStart?: (data: { sessionId: string }) => void
-  onCheckoutQuote?: (data: {
-    sessionId: string
-    quote: PrepareSendQuote
-  }) => 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: unknown }) => void
-  onCheckoutStatusUpdate?: (data: {
-    sessionId: string
-    transactionStates: TransactionState[]
-  }) => void
-  onCheckoutApprovalRequest?: (data: { sessionId: string }) => void
-  onCheckoutApprovalConfirmed?: (data: {
-    sessionId: string
-    transactionHash: `0x${string}`
-  }) => void
-  onCheckoutApprovalRejected?: (data: {
-    sessionId: string
-    error: unknown
-  }) => void
-  onOpen?: () => void
-  onClose?: () => void
-
-  walletConnectProjectId?: string
-  paymasterUrls?: Array<{ chainId: number; url: string }>
-  buttonText?: string
-  customCss?: string | Record<string, string>
-  disableCss?: boolean
-  swapProvider?: string
-  bridgeProvider?: string
-  swapProviderFallback?: boolean
-  bridgeProviderFallback?: boolean
-  slippageTolerance?: number | string
-  priceImpactWarningThresholdBps?: number
-  priceImpactWarningMessage?: string
-  priceImpactFallbackBridgeUrl?: string
-  decoupleWagmi?: boolean
-  wagmiConnectors?: Connector[]
-  debug?: boolean
-  hideDisconnect?: boolean
-  hideAddWallet?: boolean
-  /** Options for customizing fund mode behavior */
-  fundOptions?: {
-    /** Hide the Swap button in the fund screen header. Default: false */
-    hideSwap?: boolean
-    /** Array of wallet addresses to hide from the funding wallet selection. */
-    hideWallets?: string[]
-    /**
-     * Ordered list of funding methods to display.
-     *
-     * Supported readable values (mapped internally):
-     * - "connected-wallet"
-     * - "crypto-transfer"
-     * - "cc-onramp"
-     * - "exchange"
-     *
-     * Preferred values: "connected-wallet", "crypto-transfer", "exchange", "cc-onramp".
-     * Legacy alias "exchange-onramp" is still accepted.
-     *
-     * @example ["connected-wallet", "crypto-transfer"]
-     */
-    fundMethodsList?: FundMethodListOption[]
-    /**
-     * If true, methods not in fundMethodsList are hidden.
-     *
-     * If false (default), unlisted methods are shown but disabled.
-     *
-     * Default: false.
-     */
-    hideUnlistedFundMethods?: boolean
-    /** ISO 4217 currency code to pre-select in onramp mode (e.g. "EUR", "GBP") */
-    fiatCurrency?: string
-    /** Fiat amount to pre-populate in onramp mode */
-    fiatAmount?: string
-  }
-  toast?: boolean
-  appName?: string
-  appUrl?: string
-  appImageUrl?: string
-  appDescription?: string
-  payMessage?: string
-  isSmartWallet?: boolean
-  /**
-   * Optional onramp configuration or factory.
-   * If provided, enables exchange funding options in the widget.
-   *
-   * @example
-   * ```tsx
-   * <TrailsWidget
-   *   onramp={{
-   *     mesh: {
-   *       environment: "production",
-   *     },
-   *   }}
-   * />
-   * ```
-   */
-  onramp?:
-    | TrailsOnRampConfig
-    | ((handlers: {
-        setCurrentScreen: (screen: Screen) => void
-        onComplete?: (transferData: OnrampTransferResult) => void
-        onError?: (error: unknown) => void
-        onBack?: () => void
-        toTokenSymbol?: string
-        toTokenAmount?: string
-        toChainId?: number
-        toRecipientAddress?: string
-        toAmountUsd?: number
-        selectedExchange?: {
-          integrationId: string
-          exchangeKey: string
-          exchangeName: string
-        }
-        apiKey?: string
-        hostname?: string
-      }) => React.ReactElement)
-}
-
-export interface TrailsWidgetRef {
-  openModal: () => void
-  closeModal: () => void
-  isModalOpen: boolean
-}
-
-// Create a custom hook for wallet management
-const useWalletManager = (
-  address: string | undefined,
-  chainId: number | undefined,
-  connector: Connector | undefined,
-) => {
-  const [walletClient, setWalletClient] = useState<WalletClient | null>(null)
-
-  useEffect(() => {
-    const connectWallet = async () => {
-      try {
-        if (!connector) {
-          return
-        }
-        if (typeof connector?.getProvider !== "function") {
-          return
-        }
-
-        const activeProvider =
-          (await connector.getProvider()) as EIP1193Provider
-
-        if (activeProvider && address && chainId) {
-          // Validate that the provider's accounts include the expected address
-          // This helps detect EIP-6963 multi-wallet mismatches where the wrong provider is used
-          try {
-            const providerAccounts = await activeProvider.request({
-              method: "eth_accounts",
-            })
-            const normalizedAddress = normalizeAddress(address)
-            const hasMatchingAccount = providerAccounts?.some(
-              (acc: string) => acc.toLowerCase() === normalizedAddress,
-            )
-            if (!hasMatchingAccount && providerAccounts?.length > 0) {
-              logger.console.warn(
-                `[trails-sdk] Provider mismatch detected: expected address ${address} not found in provider accounts. ` +
-                  `Connector: ${connector.name}, Provider accounts: ${providerAccounts.join(", ")}. ` +
-                  `This may indicate multiple wallet extensions are conflicting.`,
-              )
-              // Log additional EIP-6963 info if available
-              const connectorInfo = (connector as EIP6963Connector)?.info
-              if (connectorInfo?.rdns) {
-                logger.console.warn(
-                  `[trails-sdk] Connector RDNS: ${connectorInfo.rdns}`,
-                )
-              }
-            }
-          } catch (accountsError) {
-            // eth_accounts may fail on some providers, continue anyway
-            logger.console.debug(
-              "[trails-sdk] Could not verify provider accounts:",
-              accountsError,
-            )
-          }
-
-          let chain = getChainInfo(chainId)
-
-          // If chain is not supported, create a minimal chain object.
-          // This allows walletClient to be created even on unsupported networks.
-          // The Problem:
-          // When Metamask is on a network not supported by the wagmi config, useWalletManager
-          // in widget.tsx calls getChainInfo(chainId), which returns null for unsupported chains.
-          // The function then returns early without creating a walletClient, so walletClient?.account is undefined,
-          // causing the "Connect your wallet" message in the button.
-          if (!chain) {
-            logger.console.warn(
-              `[trails-sdk] Chain ${chainId} not found in supported chains, creating minimal chain object`,
-            )
-            // Create a minimal chain definition for unsupported chains
-            chain = defineChain({
-              id: chainId,
-              name: `Chain ${chainId}`,
-              nativeCurrency: {
-                name: "Ether",
-                symbol: "ETH",
-                decimals: 18,
-              },
-              rpcUrls: {
-                default: {
-                  http: [],
-                },
-              },
-            }) as Chain
-          }
-
-          const client = createWalletClient({
-            account: address as `0x${string}`,
-            chain,
-            transport: custom(activeProvider),
-          })
-
-          setWalletClient(client)
-        }
-      } catch (error) {
-        logger.console.error("[trails-sdk] Failed to connect wallet", error)
-      }
-    }
-    connectWallet().catch(logger.console.error)
-  }, [address, chainId, connector])
-
-  return walletClient
-}
-
-// Create a custom hook for transaction state management
-const useTransactionState = (
-  onOriginConfirmation?: (data: {
-    txHash: string
-    chainId: number
-    sessionId: string
-  }) => void,
-  onDestinationConfirmation?: (data: {
-    txHash: string
-    chainId: number
-    sessionId: string
-  }) => void,
-  onComplete?: (result: OnCompleteProps) => void,
-) => {
-  const [originTxHash, setOriginTxHash] = useState("")
-  const [originChainId, setOriginChainId] = useState<number | null>(null)
-  const [destinationTxHash, setDestinationTxHash] = useState("")
-  const [destinationChainId, setDestinationChainId] = useState<number | null>(
-    null,
-  )
-  const [transactionStates, setTransactionStates] = useState<
-    TransactionState[]
-  >([])
-
-  // Add flags to prevent duplicate callback calls
-  const [originConfirmationCalled, setOriginConfirmationCalled] =
-    useState(false)
-  const [destinationConfirmationCalled, setDestinationConfirmationCalled] =
-    useState(false)
-
-  useEffect(() => {
-    if (
-      onOriginConfirmation &&
-      originTxHash &&
-      originChainId &&
-      !originConfirmationCalled
-    ) {
-      try {
-        onOriginConfirmation({
-          txHash: originTxHash,
-          chainId: originChainId,
-          sessionId: getSessionId(),
-        })
-      } catch (error) {
-        logger.console.error(
-          "[trails-sdk] Error calling onOriginConfirmation:",
-          error,
-        )
-      }
-      setOriginConfirmationCalled(true)
-    }
-  }, [
-    originTxHash,
-    originChainId,
-    originConfirmationCalled,
-    onOriginConfirmation,
-  ])
-
-  useEffect(() => {
-    if (
-      onDestinationConfirmation &&
-      destinationTxHash &&
-      destinationChainId &&
-      !destinationConfirmationCalled
-    ) {
-      try {
-        onDestinationConfirmation({
-          txHash: destinationTxHash,
-          chainId: destinationChainId,
-          sessionId: getSessionId(),
-        })
-      } catch (error) {
-        logger.console.error(
-          "[trails-sdk] Error calling onDestinationConfirmation:",
-          error,
-        )
-      }
-      setDestinationConfirmationCalled(true)
-    }
-  }, [
-    destinationTxHash,
-    destinationChainId,
-    destinationConfirmationCalled,
-    onDestinationConfirmation,
-  ])
-
-  // Monitor transaction states for completion - this runs regardless of which screen is active
-  useEffect(() => {
-    if (!transactionStates || transactionStates.length === 0) return
-
-    const allConfirmed = transactionStates.every(
-      (tx: TransactionState) => tx.state === "confirmed",
-    )
-
-    if (allConfirmed && onComplete) {
-      logger.console.log(
-        "[trails-sdk] All transactions confirmed, triggering completion",
-      )
-
-      // All transactions are confirmed, trigger completion
-      onComplete({
-        transactionStates: transactionStates,
-      })
-    }
-  }, [transactionStates, onComplete])
-
-  // Create enhanced setters that also reset confirmation flags
-  const resetOriginTxHash = useCallback((txHash: string) => {
-    setOriginTxHash(txHash)
-    if (txHash === "") {
-      setOriginConfirmationCalled(false)
-    }
-  }, [])
-
-  const resetDestinationTxHash = useCallback((txHash: string) => {
-    setDestinationTxHash(txHash)
-    if (txHash === "") {
-      setDestinationConfirmationCalled(false)
-    }
-  }, [])
-
-  return {
-    originTxHash,
-    setOriginTxHash: resetOriginTxHash,
-    originChainId,
-    setOriginChainId,
-    destinationTxHash,
-    setDestinationTxHash: resetDestinationTxHash,
-    destinationChainId,
-    setDestinationChainId,
-    transactionStates,
-    setTransactionStates,
-  }
-}
-
-const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
-  const {
-    toAddress,
-    toAmount,
-    toChainId,
-    toToken,
-    toCalldata,
-    fromToken,
-    fromChainId,
-    fromAccount,
-    children,
-    renderInline = false,
-    onOriginConfirmation,
-    onDestinationConfirmation,
-    onCheckoutStart,
-    onCheckoutQuote,
-    onCheckoutSignatureRequest,
-    onCheckoutSignatureConfirmed,
-    onCheckoutSignatureRejected,
-    onCheckoutApprovalRequest,
-    onCheckoutApprovalConfirmed,
-    onCheckoutApprovalRejected,
-    onCheckoutComplete,
-    onCheckoutError,
-    onCheckoutStatusUpdate,
-    onOpen,
-    onClose,
-    paymasterUrls,
-    buttonText,
-    swapProvider,
-    bridgeProvider,
-    swapProviderFallback,
-    bridgeProviderFallback,
-    priceImpactWarningThresholdBps,
-    priceImpactWarningMessage,
-    priceImpactFallbackBridgeUrl,
-    decoupleWagmi,
-    hideDisconnect,
-    defaultInputMode,
-    fundMethod: configuredFundMethod,
-  } = useWidgetProps()
-  const { address, chainId, connector } = useAccount()
-  const connectors = useConnectors()
-  const { trailsApiKey, trailsApiUrl } = useTrails()
-  const onrampClient = useOnrampClient()
-  const qrCodeWallets = useMemo(() => getQRCodeWallets(), [])
-  // const { setOpenConnectModal } = useOpenConnectModal()
-
-  // Check if the current connector is a Sequence wallet
-  const isSequenceWallet = useIsSequenceWallet()
-  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, clearSelectedToken } =
-    useSelectedToken()
-  const { onramp } = useWidgetProps()
-  const meshOnrampConfig = getWidgetOnrampConfig(onramp)
-  const onrampFactory: OnrampFactory | undefined =
-    typeof onramp === "function"
-      ? (onramp as OnrampFactory)
-      : meshOnrampConfig
-        ? trailsOnramp({ config: meshOnrampConfig })
-        : undefined
-  const meshEnvironment = meshOnrampConfig?.mesh?.environment ?? "production"
-
-  // Modal state is managed by TrailsModalProvider
-  const {
-    isModalOpen,
-    openModal: openTrailsModal,
-    closeModal: closeTrailsModal,
-    setHandleCloseModal,
-    pendingSelection,
-    setPendingSelection,
-    hostTransactionState,
-    setHostTransactionState,
-    hostTransactionQuote,
-    hostTransactionStates,
-    hostTransactionTimestamp,
-    resetHostTransactionState,
-    receiptActionButtonText,
-    onReceiptAction,
-    retryTransactionRef,
-  } = useTrailsModal()
-
-  // Hook for creating onramp widget sessions
-  const { createWidgetSession } = useOnRampProviderWidget()
-
-  const { trackWalletDisconnected: trackWalletDisconnectedEvent } =
-    useWidgetAnalytics({
-      address,
-      chainId,
-      connectorName: connector?.name,
-    })
-
-  // Monitor account disconnections
-  useAccountEffect({
-    onDisconnect() {
-      logger.console.log(
-        "[trails-sdk] [TrailsWidget] account disconnected via useAccountEffect",
-      )
-      logger.console.log(
-        "[trails-sdk] [TrailsWidget] window.ethereum exists:",
-        !!window.ethereum,
-      )
-    },
-    onConnect(data) {
-      logger.console.log(
-        "[trails-sdk] [TrailsWidget] account connected via useAccountEffect",
-        data,
-      )
-    },
-  })
-
-  // Handle fromAccount preselection
-  const hasInitializedFromAccount = useRef(false)
-  useEffect(() => {
-    if (hasInitializedFromAccount.current) return
-    if (!fromAccount) return
-    if (!connections.length) return
-
-    // Check if fromAccount is already the active account
-    if (address && addressEqual(address, fromAccount)) {
-      hasInitializedFromAccount.current = true
-      return
-    }
-
-    // Find the connector that has the fromAccount
-    const targetConnection = connections.find((conn) =>
-      conn.accounts.some((acc) => addressEqual(acc, fromAccount)),
-    )
-
-    if (targetConnection) {
-      logger.console.log(
-        "[trails-sdk] [TrailsWidget] Switching to fromAccount:",
-        fromAccount,
-        "via connector:",
-        targetConnection.connector.name,
-      )
-
-      // Switch to the target account
-      switchAccount({
-        connector: targetConnection.connector,
-      })
-      hasInitializedFromAccount.current = true
-    } else {
-      logger.console.log(
-        "[trails-sdk] [TrailsWidget] fromAccount not found in connected wallets:",
-        fromAccount,
-      )
-    }
-  }, [fromAccount, connections, address, switchAccount])
-
-  useEffect(() => {
-    logger.console.log(
-      "[trails-sdk] [TrailsWidget] isModalOpen changed:",
-      isModalOpen,
-    )
-  }, [isModalOpen])
-  const {
-    mode: currentMode,
-    configuredMode,
-    resetMode,
-    screen,
-    navigate,
-    goBack,
-    goHome,
-    canGoBack,
-    backScreen,
-    state,
-  } = useViewManager()
-  const { setSellAmount, setBuyAmount } = useSwapState()
-
-  // Abort in-flight requests when navigating away from transfer screens.
-  useNavigationEffect(({ from, to }) => {
-    if (shouldClearTransferFlowOnNavigate(from, to)) {
-      abortControllerRegistry.abortAll()
-      setPrepareSendQuote(null)
-    }
-
-    if (to === "fund-methods") {
-      fundMethodSelectionStartRef.current = selectedFundMethod
-    }
-  })
-  const {
-    connectionContext,
-    clearConnectionContext,
-    isRecipientSelection,
-    isFundMethodSelection,
-  } = useWalletConnectionContext()
-  const { setSelectedRecipient } = useSelectedRecipient()
-
-  // Wrapper function that clears errors when going back
-  const handleBack = () => {
-    setError(null)
-    if (canGoBack) goBack()
-    else goHome()
-  }
-  const [previousAddress, setPreviousAddress] = useState<string | undefined>(
-    address,
-  )
-  const {
-    selectedFundMethod,
-    selectedMeshExchange,
-    setSelectedFundMethod,
-    setSelectedMeshExchange,
-  } = useSelectedFundMethod()
-  const fundMethodSelectionStartRef = useRef(selectedFundMethod)
-  const clearStateForFundMethodSwitch = useCallback(
-    (nextMethod: typeof selectedFundMethod) => {
-      const previousMethod = fundMethodSelectionStartRef.current
-      const didSwitchMethods = clearFundStateForMethodSwitch(
-        previousMethod,
-        nextMethod,
-        {
-          clearSelectedToken,
-          setSellAmount,
-          setBuyAmount,
-          setPrepareSendQuote,
-          setSelectedMeshExchange,
-        },
-      )
-
-      if (didSwitchMethods) {
-        fundMethodSelectionStartRef.current = nextMethod
-      }
-    },
-    [clearSelectedToken, setSellAmount, setBuyAmount, setSelectedMeshExchange],
-  )
-  const { selectedPool, setSelectedPool } = useEarnPool()
-  const [selectedWalletId, setSelectedWalletId] = useState<string | null>(
-    () => {
-      // Initialize from localStorage if available
-      if (typeof window !== "undefined") {
-        try {
-          return localStorage.getItem("trails-last-wallet") || null
-        } catch (error) {
-          logger.console.error(
-            "[trails-sdk] Failed to read from localStorage:",
-            error,
-          )
-          return null
-        }
-      }
-      return null
-    },
-  )
-  const [isConnecting, setIsConnecting] = useState(false)
-  const [showWalletConnectionRetry, setShowWalletConnectionRetry] =
-    useState(false)
-  const [generatedCalldata, setGeneratedCalldata] = useState<
-    string | undefined
-  >(undefined)
-  const [error, setError] = useState<string | null>(null)
-  const [prepareSendQuote, setPrepareSendQuote] =
-    useState<PrepareSendQuote | null>(null)
-  const [onrampProviderQuote, setOnrampProviderQuote] =
-    useState<OnrampQuote | null>(null)
-
-  // Store widget creation parameters for retry functionality
-  const [widgetCreationParams, setWidgetCreationParams] = useState<{
-    depositAddress: string
-    userAddress: string
-    countryCode: string
-    sourceCurrencyCode: string
-    sourceAmount: string
-    destinationCurrencyCode: string
-    serviceProvider: string
-    paymentMethodType?: string
-  } | null>(null)
-
-  // Store external session ID for transaction status monitoring
-  const [externalSessionId, setExternalSessionId] = useState<string | null>(
-    null,
-  )
-  const [onrampPopupWindowRef, setOnrampPopupWindowRef] =
-    useState<Window | null>(null)
-
-  // Debug external session ID changes
-  useEffect(() => {
-    logger.console.log(
-      "[widget] externalSessionId state changed to:",
-      externalSessionId,
-    )
-  }, [externalSessionId])
-  const [qrCodeWalletId, setQrCodeWalletId] = useState<string | null>(null)
-  const [previousConnector, setPreviousConnector] = useState<Connector | null>(
-    null,
-  )
-  const [showWalletConfirmRetry, setShowWalletConfirmRetry] = useState(false)
-  const [walletConfirmRetryHandler, setWalletConfirmRetryHandler] = useState<
-    (() => Promise<void>) | null
-  >(null)
-  const [totalCompletionSeconds, setTotalCompletionSeconds] = useState<
-    number | null
-  >(null)
-  const { connectAsync } = useConnect()
-
-  const hasAppliedFundMethodNavigation = useRef<string | null>(null)
-  useEffect(() => {
-    const isWidgetActive = renderInline || isModalOpen
-    if (!isWidgetActive) {
-      hasAppliedFundMethodNavigation.current = null
-    }
-  }, [renderInline, isModalOpen])
-
-  useEffect(() => {
-    const isWidgetActive = renderInline || isModalOpen
-    if (!isWidgetActive) return
-
-    let mappedFundMethod: FundMethod | null = null
-    if (configuredFundMethod === WidgetFundMethod.Wallet) {
-      mappedFundMethod = "wallet"
-    } else if (configuredFundMethod === WidgetFundMethod.CryptoTransfer) {
-      mappedFundMethod = "direct-transfer"
-    } else if (
-      configuredFundMethod === WidgetFundMethod.Onramp &&
-      currentMode !== "pay" &&
-      currentMode !== "earn"
-    ) {
-      mappedFundMethod = "onramp-meld"
-    } else if (
-      configuredFundMethod === WidgetFundMethod.OnrampExchange &&
-      currentMode !== "pay"
-    ) {
-      mappedFundMethod = "onramp-mesh"
-    }
-
-    if (!mappedFundMethod) return
-    if (selectedFundMethod === mappedFundMethod) return
-    setSelectedFundMethod(mappedFundMethod)
-  }, [
-    configuredFundMethod,
-    selectedFundMethod,
-    setSelectedFundMethod,
-    renderInline,
-    isModalOpen,
-    currentMode,
-  ])
-
-  useEffect(() => {
-    const isWidgetActive = renderInline || isModalOpen
-    if (!isWidgetActive) return
-    if (!isConnected) return
-    if (currentMode !== "fund") return
-
-    if (!configuredFundMethod) {
-      return
-    }
-
-    const navKey = `${configuredFundMethod}:${currentMode}:${isWidgetActive}`
-    if (hasAppliedFundMethodNavigation.current === navKey) return
-    hasAppliedFundMethodNavigation.current = navKey
-
-    if (configuredFundMethod === WidgetFundMethod.Onramp) {
-      setSelectedFundMethod("onramp-meld")
-      navigate("fund-form")
-    } else if (configuredFundMethod === WidgetFundMethod.Wallet) {
-      setSelectedFundMethod("wallet")
-      navigate("tokens")
-    } else if (configuredFundMethod === WidgetFundMethod.CryptoTransfer) {
-      setSelectedFundMethod("direct-transfer")
-      navigate("fund-form")
-    } else if (configuredFundMethod === WidgetFundMethod.OnrampExchange) {
-      setSelectedFundMethod("onramp-mesh")
-      navigate("fund-form")
-    }
-  }, [
-    currentMode,
-    isConnected,
-    configuredFundMethod,
-    renderInline,
-    isModalOpen,
-    navigate,
-    setSelectedFundMethod,
-  ])
-
-  useEffect(() => {
-    if (!isConnected || screen !== "connect") return
-    if (currentMode === "fund" && configuredFundMethod) return
-    goHome()
-  }, [isConnected, screen, currentMode, configuredFundMethod, goHome])
-
-  // Global wallet connection check — redirect to connect screen when disconnected
-  useScreenGuard(shouldRedirectToConnect(isConnected, screen), "connect")
-
-  const modeToButtonText: Record<string, string> = {
-    fund: "Fund",
-    swap: "Swap",
-    earn: "Earn",
-    pay: "Pay",
-    withdraw: "Withdraw",
-  }
-
-  const defaultButtonText = modeToButtonText[currentMode] ?? "Pay"
-
-  // Validate widget props from current props/mode only.
-  const propValidationError = useMemo(() => {
-    const isValidToAmount = isValidNumeric(toAmount)
-    const isValidToChainId = isValidInteger(toChainId)
-    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 &&
-      isValidPaymasterUrls
-    ) {
-      return null
-    }
-
-    // Validate toAmount - must be numeric if provided
-    if (!isValidToAmount) {
-      logger.console.error(
-        "[trails-sdk] Invalid toAmount prop: must be numeric. Received:",
-        toAmount,
-      )
-      return "Invalid toAmount: must be a numeric value"
-    }
-
-    // Validate toChainId - must be numeric if provided
-    if (!isValidToChainId) {
-      logger.console.error(
-        "[trails-sdk] Invalid toChainId prop: must be numeric. Received:",
-        toChainId,
-      )
-      return "Invalid toChainId: must be a numeric value"
-    }
-
-    // Validate toToken - must be "ETH", "USDC", or a valid hex address
-    if (!isValidToToken) {
-      logger.console.error(
-        "[trails-sdk] Invalid toToken prop: must be a valid token symbol or a valid hex address. Received:",
-        toToken,
-      )
-      return "Invalid toToken: must be a valid token symbol or a valid hex address"
-    }
-
-    if (!isValidToAddress) {
-      logger.console.error(
-        "[trails-sdk] Invalid toAddress prop: must be a valid hex address. Received:",
-        toAddress,
-      )
-      return "Invalid toAddress: must be a valid hex address"
-    }
-
-    // Validate paymasterUrls
-    if (!isValidPaymasterUrls) {
-      logger.console.error(
-        "[trails-sdk] Invalid paymasterUrls prop: url must be a valid URL. Received:",
-        invalidPaymasterUrl,
-      )
-      return "Invalid paymasterUrls: url must be a valid URL"
-    }
-
-    if (currentMode === "fund") {
-      if (toAmount) {
-        return "toAmount is not allowed in fund mode"
-      }
-      if (!toToken) {
-        return "toToken is required in fund mode"
-      }
-    }
-
-    if (currentMode === "pay") {
-      if (!toToken) {
-        return "toToken is required in pay mode"
-      }
-    }
-    return null
-  }, [toAmount, toChainId, toToken, currentMode, toAddress, paymasterUrls])
-
-  const displayError = propValidationError || error
-
-  const walletClient = useWalletManager(address, chainId, connector)
-
-  // Function to save wallet ID to localStorage
-  const saveLastClickedWallet = (walletId: string) => {
-    setSelectedWalletId(walletId)
-    if (typeof window !== "undefined") {
-      try {
-        localStorage.setItem("trails-last-wallet", walletId)
-      } catch (error) {
-        logger.console.error(
-          "[trails-sdk] Failed to save to localStorage:",
-          error,
-        )
-      }
-    }
-  }
-
-  const [onrampProps, setOnrampProps] = useState<{
-    toTokenSymbol?: string
-    toTokenAmount?: string
-    toChainId?: number
-    toRecipientAddress?: string
-    toAmountUsd?: number
-  } | null>(null)
-
-  // Store callback to continue send after onramp completes
-  const [onrampContinueSend, setOnrampContinueSend] = useState<
-    (() => Promise<void>) | null
-  >(null)
-  const [onrampContinueSendInProgress, setOnrampContinueSendInProgress] =
-    useState(false)
-  const [_meldTransactionId, _setMeldTransactionId] = useState<string | null>(
-    null,
-  )
-
-  // Hook to auto-select pool when mode is "earn" and toAddress is specified
-  const useAutoSelectPool = (
-    mode: Mode,
-    toAddress?: string | null,
-    toChainId?: number | string | null,
-    toToken?: string | null,
-  ) => {
-    // Only fetch pools when mode is "earn" (pools are not used in "fund" mode)
-    const shouldFetchPools = mode === "earn"
-    const { data: pools, loading: poolsLoading } = usePools({
-      enabled: shouldFetchPools,
-    })
-
-    useEffect(() => {
-      if (
-        mode === "earn" &&
-        toAddress &&
-        toChainId &&
-        toToken &&
-        pools &&
-        pools.length > 0 &&
-        (!selectedPool ||
-          selectedPool.chainId !== toChainId ||
-          (!addressEqual(selectedPool.token.address, toToken) &&
-            selectedPool.token.symbol.toLowerCase() !== toToken.toLowerCase()))
-      ) {
-        const targetChainId =
-          typeof toChainId === "string" ? parseInt(toChainId, 10) : toChainId
-
-        // Find pool that matches the toAddress, toChainId, and toToken (underlying asset)
-        const matchingPool = pools.find((pool) => {
-          let addressMatch = addressEqual(pool.depositAddress, toAddress)
-          const chainMatch = pool.chainId === targetChainId
-
-          // Check if toToken is an address (starts with 0x) or a symbol
-          let tokenMatch = toToken.startsWith("0x")
-            ? addressEqual(pool.token.address, toToken)
-            : pool.token.symbol.toLowerCase() === toToken.toLowerCase()
-
-          // Special handling for Aave pools: ETH can be represented as WETH
-          if (!tokenMatch && pool.protocol.toLowerCase() === "aave") {
-            const isEthToken = isNativeToken(toToken) || toToken === "ETH"
-            if (isEthToken) {
-              // Check if pool token is WETH (either by address or symbol)
-              const isWethPool =
-                pool.token.symbol === "WETH" ||
-                pool.token.address.toLowerCase() ===
-                  getWethAddress(targetChainId)?.toLowerCase()
-              tokenMatch = isWethPool
-              if (!addressMatch) {
-                addressMatch =
-                  pool.wrappedTokenGatewayAddress?.toLowerCase() ===
-                  normalizeAddress(toAddress)
-              }
-            }
-          }
-
-          return addressMatch && chainMatch && tokenMatch
-        })
-
-        if (matchingPool) {
-          logger.console.log(
-            `[trails-sdk] Auto-selected pool for ${mode} mode toAddress:`,
-            toAddress,
-            "toChainId:",
-            targetChainId,
-            "toToken:",
-            toToken,
-            matchingPool,
-          )
-          setSelectedPool(matchingPool)
-        } else {
-          logger.console.log(
-            `[trails-sdk] No matching pool found for ${mode} mode toAddress:`,
-            toAddress,
-            "toChainId:",
-            targetChainId,
-            "toToken:",
-            toToken,
-          )
-        }
-      }
-    }, [mode, toAddress, toChainId, toToken, pools])
-
-    return { poolsLoading }
-  }
-
-  useAutoSelectPool(currentMode, toAddress, toChainId, toToken)
-
-  const {
-    setOriginTxHash,
-    setDestinationTxHash,
-    setDestinationChainId,
-    setOriginChainId,
-    transactionStates,
-    setTransactionStates,
-  } = useTransactionState(
-    onOriginConfirmation,
-    onDestinationConfirmation,
-    handleTransferComplete,
-  )
-
-  const effectivePrepareSendQuote = hostTransactionQuote ?? prepareSendQuote
-  const effectiveTransactionStates =
-    hostTransactionStates.length > 0 ? hostTransactionStates : transactionStates
-  const hostCompletionSeconds = useMemo(() => {
-    if (
-      hostTransactionState.status !== "success" ||
-      !hostTransactionTimestamp
-    ) {
-      return null
-    }
-
-    return Math.max(0, toSeconds(elapsed(hostTransactionTimestamp)))
-  }, [hostTransactionState.status, hostTransactionTimestamp])
-  const displayTotalCompletionSeconds =
-    hostCompletionSeconds ?? totalCompletionSeconds
-
-  // Auto-navigate from pending → receipt when any transaction is aborted or failed.
-  // This prevents the tracker from staying on pending when non-first steps fail.
-  const hasFailedTransactionState = hasAnyFailedOrAbortedTransactions(
-    effectiveTransactionStates,
-  )
-  useScreenGuard(screen === "pending" && hasFailedTransactionState, "receipt")
-
-  const { checkoutOnHandlers } = useCheckout({
-    onCheckoutStart,
-    onCheckoutQuote,
-    onCheckoutSignatureRequest,
-    onCheckoutSignatureConfirmed,
-    onCheckoutSignatureRejected,
-    onCheckoutApprovalRequest,
-    onCheckoutApprovalConfirmed,
-    onCheckoutApprovalRejected,
-    onCheckoutComplete,
-    onCheckoutError,
-    onCheckoutStatusUpdate,
-  })
-
-  const { clearSelectedFeeOption } = useSelectedFeeOption()
-  useExternalFundingReceiptSync({
-    enabled:
-      isExternalFundingMethod(selectedFundMethod) &&
-      !!effectivePrepareSendQuote?.intentId &&
-      (screen === "direct-transfer-screen" ||
-        screen === "onramp-confirmation" ||
-        screen === "pending"),
-    intentId: effectivePrepareSendQuote?.intentId ?? undefined,
-    fallbackTransactionStates: effectivePrepareSendQuote?.transactionStates,
-    setTransactionStates,
-    onStatusUpdate: checkoutOnHandlers?.triggerCheckoutStatusUpdate,
-    onFundingObserved: () => {
-      if (
-        screen === "direct-transfer-screen" ||
-        screen === "onramp-confirmation"
-      ) {
-        navigate("pending")
-      }
-    },
-  })
-
-  // Use the debug screens hook
-  const { handleDebugScreenSelect } = useDebugScreens({
-    setSelectedToken,
-    setTransactionStates,
-    setPrepareSendQuote,
-    setShowWalletConfirmRetry,
-    setSelectedWalletId,
-    setShowWalletConnectionRetry,
-    setError,
-    isConnected,
-  })
-
-  // Auto-detect mode changes and switch screens accordingly
-  const poolTargetScreen: Screen =
-    currentMode === "fund" ? "fund-form" : "send-form"
-  useScreenGuard(
-    !!selectedPool &&
-      (screen === "send-form" || screen === "fund-form") &&
-      screen !== poolTargetScreen,
-    poolTargetScreen,
-  )
-
-  useScreenTracking(address || undefined)
-
-  useEffect(() => {
-    const status = hostTransactionState.status
-    if (status === "idle") {
-      return
-    }
-
-    if (!isModalOpen) {
-      openTrailsModal()
-    }
-
-    switch (status) {
-      case "awaiting-origin":
-        navigate("select-origin-token")
-        break
-      case "awaiting-amount":
-        navigate("select-origin-amount")
-        break
-      case "confirmation":
-        navigate("wallet-confirmation")
-        break
-      case "pending":
-        navigate("pending")
-        break
-      case "success":
-      case "error":
-        if (hostTransactionStates.length > 0) {
-          navigate("receipt")
-        } else {
-          navigate("pending")
-        }
-        break
-      default:
-        navigate("pending")
-        break
-    }
-  }, [
-    hostTransactionState.status,
-    hostTransactionStates.length,
-    isModalOpen,
-    openTrailsModal,
-    navigate,
-  ])
-
-  // Handle account changes - navigate back to token list for specific screens
-  useEffect(() => {
-    if (previousAddress && address && previousAddress !== address) {
-      logger.console.log(
-        "[trails-sdk] Account changed from",
-        previousAddress,
-        "to",
-        address,
-      )
-
-      // Clear fee option preference from localStorage when wallet changes
-      try {
-        localStorage.removeItem("trails-fee-option-preference")
-      } catch {
-        // Ignore localStorage errors (e.g., in private browsing mode)
-      }
-
-      // Check if we're on screens that should reset when account changes
-      const screensToReset = [
-        "send-form",
-        "fund-form",
-        "swap",
-        "withdraw",
-        "wallet-confirmation",
-        "earn",
-      ]
-
-      if (screensToReset.includes(screen)) {
-        logger.console.log(
-          "[trails-sdk] Resetting to tokens screen due to account change",
-          screen,
-        )
-        if (!state.stack.some((e) => e.screen === "select-funding-wallet")) {
-          const initialScreen = getInitialScreen(currentMode)
-          navigate(initialScreen)
-          clearSelectedToken()
-        }
-        setError(null)
-        setPrepareSendQuote(null)
-        setShowWalletConfirmRetry(false)
-      }
-    }
-
-    // Update previous address
-    setPreviousAddress(address)
-  }, [
-    address,
-    previousAddress,
-    screen,
-    currentMode,
-    clearSelectedToken,
-    navigate,
-    state.stack,
-  ])
-
-  // Update generated calldata when amount changes in earn mode
-  useEffect(() => {
-    if (selectedPool && currentMode === "earn" && generatedCalldata) {
-      // The calldata will be updated via the onAmountUpdate callback
-      // This effect ensures we have the initial calldata set up
-      logger.console.log(
-        "Earn mode: Pool selected, calldata ready for amount updates",
-      )
-    }
-  }, [selectedPool, currentMode, generatedCalldata])
-
-  const handleConnectWallet = async (
-    walletId: string,
-    providedConnector?: WalletConnector,
-  ) => {
-    try {
-      setError(null)
-      setIsConnecting(true)
-
-      // Use provided connector (for EIP-6963 wallets) or look up by wallet ID
-      let walletConnector = providedConnector
-      let walletName = walletId
-
-      if (!walletConnector) {
-        // First, try to find an EIP-6963 connector that matches this wallet ID
-        const eip6963Connector = connectors.find((c) => {
-          if (c.type !== "injected") return false
-          const rdns = (c as EIP6963Connector).info?.rdns
-          if (getWalletIdFromRdns(rdns) === walletId) {
-            logger.console.log(
-              `[trails-sdk] Found EIP-6963 connector for ${walletId} with rdns ${rdns}`,
-            )
-            return true
-          }
-          // Fallback to name matching for EIP-6963 wallets
-          const connectorWalletId = wagmiConnectorToWalletId(c)
-          return connectorWalletId === walletId && (rdns || c.uid)
-        })
-
-        if (eip6963Connector) {
-          walletConnector = eip6963Connector
-          walletName = eip6963Connector.name
-          logger.console.log(
-            `[trails-sdk] Using EIP-6963 connector for ${walletId}`,
-          )
-        } else {
-          // Fall back to config lookup
-          const config = allWallets.find((w) => w.id === walletId)
-          if (!config) {
-            setError(`No configuration found for wallet: ${walletId}`)
-            setIsConnecting(false)
-            return
-          }
-          walletConnector = config.connector
-          walletName = config.name
-          logger.console.log(
-            `[trails-sdk] Using config connector for ${walletId}`,
-          )
-        }
-      }
-
-      if (!walletConnector) {
-        setError(`No connector available for wallet: ${walletId}`)
-        setIsConnecting(false)
-        return
-      }
-
-      logger.console.log(
-        "[trails-sdk] Initiating connection to wallet",
-        walletId,
-        providedConnector ? "with EIP-6963 connector" : "with config connector",
-      )
-
-      // Handle sequence-waas wallet using the openConnectModal hook
-      if (walletId === "sequence-waas") {
-        logger.console.log("[trails-sdk] Opening Sequence WaaS connect modal")
-        // setOpenConnectModal(true)
-        // setIsConnecting(false)
-        return
-      }
-
-      if (walletConnector !== getWalletConnectConnector()) {
-        // Store the current active connector BEFORE connecting new wallet
-        const originalConnector = connector
-
-        logger.console.log(
-          "[trails-sdk] Initiating connection to walletId",
-          walletId,
-        )
-        const result = await connectAsync({ connector: walletConnector })
-        logger.console.log(
-          `[trails-sdk] Successfully connected to ${walletName}`,
-          result,
-        )
-        // Set the last clicked wallet after successful connection
-        saveLastClickedWallet(walletId)
-
-        // 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] Connected wallet for recipient selection, setting as recipient:",
-            result.accounts[0],
-          )
-
-          // 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,
-              )
-              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) {
-            navigate(originScreen)
-          } else {
-            navigate("recipients")
-          }
-        } else if (isFundMethodSelection) {
-          logger.console.log(
-            "[trails-sdk] Wallet connected from funding flow, selecting as fund method",
-          )
-          setSelectedFundMethod("wallet")
-          clearConnectionContext()
-
-          if (currentMode === "fund") {
-            navigate("tokens", { backTarget: "fund-methods" })
-          } else {
-            goHome()
-          }
-        } else {
-          // Normal connection - switch active wallet and navigate home
-          logger.console.log(
-            "[trails-sdk] Normal wallet connection, switching active wallet",
-          )
-
-          // Clear the connection context
-          clearConnectionContext()
-
-          logger.console.log("[trails-sdk] Wallet connected, going home")
-          goHome()
-        }
-      } else if (walletConnector === getWalletConnectConnector()) {
-        // Store the current connector as previous before switching to WalletConnect
-        if (connector && connector.name !== "WalletConnect") {
-          setPreviousConnector(connector)
-        }
-        // Route to dedicated WalletConnect screen where we show our own QR
-        navigate("wallet-connect")
-        setIsConnecting(false)
-        return
-      }
-      setIsConnecting(false)
-    } catch (error) {
-      logger.console.error("[trails-sdk] Failed to connect:", error)
-      setError(
-        error instanceof Error ? error.message : "Failed to connect wallet",
-      )
-      setIsConnecting(false)
-    }
-  }
-
-  const handleWalletDisconnect = async () => {
-    setError(null)
-
-    try {
-      // Disconnect all connected wallets
-      logger.console.log(
-        "[trails-sdk] Disconnecting all connected wallets:",
-        connections.length,
-      )
-
-      // Disconnect each connection
-      for (const connection of connections) {
-        try {
-          await connection.connector.disconnect()
-          logger.console.log(
-            "[trails-sdk] Disconnected wallet:",
-            connection.connector.name,
-          )
-        } catch (error) {
-          logger.console.error(
-            "[trails-sdk] Failed to disconnect wallet:",
-            connection.connector.name,
-            error,
-          )
-        }
-      }
-
-      // Also call the main disconnect to ensure cleanup
-      await disconnectAsync()
-      trackWalletDisconnectedEvent()
-    } catch (error) {
-      logger.console.error("[trails-sdk] Failed to disconnect:", error)
-    }
-
-    navigate("connect")
-  }
-
-  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,
-          )
-          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) {
-        navigate(originScreen)
-      } else {
-        navigate("recipients")
-      }
-    } else if (isFundMethodSelection) {
-      logger.console.log(
-        "[trails-sdk] WalletConnect completed from funding flow, selecting as fund method",
-      )
-      setSelectedFundMethod("wallet")
-      clearConnectionContext()
-
-      if (currentMode === "fund") {
-        navigate("tokens", { backTarget: "fund-methods" })
-      } else {
-        goHome()
-      }
-    } else {
-      // Normal flow - navigate based on mode
-      if (currentMode === "swap") {
-        navigate("swap")
-      } else if (currentMode === "earn") {
-        navigate("earn")
-      } else if (currentMode === "fund") {
-        navigate("fund-methods")
-      } else if (currentMode === "pay") {
-        navigate("send-form")
-      } else {
-        navigate("account-settings")
-      }
-    }
-  }
-
-  const handleTokenSelect = (token: Token) => {
-    try {
-      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) {
-          // Skip earn-pools and go directly to send-form when toAddress and toChainId are specified
-          navigate("send-form")
-        } else if (selectedPool) {
-          // If a pool is already selected (auto-selected or manually), go to send-form
-          navigate("send-form")
-        } else {
-          // Go to earn-pools for pool selection when no specific destination is set
-          navigate("earn-pools")
-        }
-      } else if (currentMode === "swap") {
-        navigate("swap")
-      } else {
-        navigate(currentMode === "fund" ? "fund-form" : "send-form")
-      }
-
-      handleTrackToken(token)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "An unknown error occurred")
-    }
-  }
-
-  const handleRecentTokenSelect = (token: Token) => {
-    handleTokenSelect(token)
-  }
-
-  const handleTrackToken = (token: Token) => {
-    // Track the token in recent tokens
-    const chainInfo = getChainInfo(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,
-      tokenId: `${token.symbol}-${chainInfo?.name || token.chainId}`,
-      chainId: token.chainId,
-      chainName: chainInfo?.name || `Chain ${token.chainId}`,
-      imageUrl: token.imageUrl,
-    }
-    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 = () => {
-    invalidateTokenBalancesCache()
-    resetState()
-  }
-
-  const resetState = useCallback(() => {
-    setSelectedFundMethod("wallet")
-    setSelectedPool(null)
-    setSelectedWalletId(null)
-    setIsConnecting(false)
-    setShowWalletConnectionRetry(false)
-    setGeneratedCalldata(undefined)
-    setOriginTxHash("")
-    setOriginChainId(null)
-    setDestinationTxHash("")
-    setDestinationChainId(null)
-    setTransactionStates([])
-    setPrepareSendQuote(null)
-    setTotalCompletionSeconds(null)
-    // Clear selected fee option, but localStorage preference is preserved
-    // Auto-selection will use the preference when fee options render next time
-    clearSelectedFeeOption()
-    resetHostTransactionState()
-    goHome()
-  }, [
-    setSelectedFundMethod,
-    setDestinationTxHash,
-    setDestinationChainId,
-    setTransactionStates,
-    setOriginTxHash,
-    setOriginChainId,
-    setSelectedPool,
-    goHome,
-    clearSelectedFeeOption,
-    resetHostTransactionState,
-  ])
-
-  // 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 (screen !== "select-origin-token") {
-        navigate("select-origin-token")
-      }
-    }
-  }, [pendingSelection, isModalOpen, screen, navigate, openTrailsModal])
-
-  const onOpenRef = useRef(onOpen)
-  onOpenRef.current = onOpen
-  const onCloseRef = useRef(onClose)
-  onCloseRef.current = onClose
-  const pendingSelectionRef = useRef(pendingSelection)
-  pendingSelectionRef.current = pendingSelection
-  const prepareSendQuoteRef = useRef(prepareSendQuote)
-  prepareSendQuoteRef.current = prepareSendQuote
-  const screenRef = useRef(screen)
-  screenRef.current = screen
-
-  const initialActiveConnectorRef = useRef<any>(null)
-  const initialActiveAddressRef = useRef<string | null>(null)
-
-  const handleOpenModal = useCallback(() => {
-    if (!decoupleWagmi) {
-      initialActiveConnectorRef.current = connector ?? null
-      initialActiveAddressRef.current = address ?? null
-    }
-    openTrailsModal()
-    onOpenRef.current?.()
-  }, [openTrailsModal, decoupleWagmi, connector, address])
-
-  const handleCloseModal = useCallback(() => {
-    const pending = pendingSelectionRef.current
-    if (pending) {
-      logger.console.log(
-        "[trails-sdk] handleCloseModal called, rejecting pending selection",
-      )
-      pending.reject(new Error("Modal closed by user"))
-      setPendingSelection(undefined)
-    } else {
-      logger.console.log(
-        "[trails-sdk] handleCloseModal called, no pending selection",
-      )
-    }
-
-    if (!decoupleWagmi && initialActiveConnectorRef.current) {
-      const originalStillConnected = connections.some(
-        (c) => c.connector.id === initialActiveConnectorRef.current?.id,
-      )
-      if (
-        originalStillConnected &&
-        initialActiveConnectorRef.current.id !== connector?.id
-      ) {
-        logger.console.log(
-          "[trails-sdk] Restoring host app active wallet:",
-          initialActiveAddressRef.current,
-        )
-        switchAccount({ connector: initialActiveConnectorRef.current })
-      }
-    }
-    initialActiveConnectorRef.current = null
-    initialActiveAddressRef.current = null
-
-    logger.console.log("[trails-sdk] handleCloseModal called, closing modal")
-    closeTrailsModal()
-    resetState()
-    resetHostTransactionState()
-    onCloseRef.current?.()
-  }, [
-    closeTrailsModal,
-    resetState,
-    resetHostTransactionState,
-    setPendingSelection,
-    decoupleWagmi,
-    connections,
-    connector,
-    switchAccount,
-  ])
-
-  // Register handleCloseModal with TrailsModalProvider so ScreenHeader can use it
-  useEffect(() => {
-    setHandleCloseModal(handleCloseModal)
-    return () => {
-      setHandleCloseModal(null)
-    }
-  }, [handleCloseModal, setHandleCloseModal])
-
-  // Expose modal control methods via ref
-  useImperativeHandle(
-    ref,
-    () => ({
-      openModal: handleOpenModal,
-      closeModal: handleCloseModal,
-      isModalOpen,
-    }),
-    [isModalOpen, handleOpenModal, handleCloseModal],
-  )
-
-  function handleWalletConfirmComplete() {
-    navigate("pending")
-  }
-
-  function handleElapsedTime(totalCompletionSeconds: number = 0) {
-    setTotalCompletionSeconds(totalCompletionSeconds)
-  }
-
-  function handleTransferComplete({ transactionStates }: OnCompleteProps) {
-    logger.console.log(
-      "[trails-sdk] handleTransferComplete called",
-      transactionStates,
-    )
-
-    const firstTransactionState = transactionStates[0]
-    const lastTransactionState = transactionStates[transactionStates.length - 1]
-
-    if (
-      firstTransactionState?.transactionHash &&
-      firstTransactionState?.chainId
-    ) {
-      setOriginTxHash(firstTransactionState.transactionHash)
-      setOriginChainId(firstTransactionState.chainId)
-    }
-
-    if (
-      lastTransactionState?.transactionHash ||
-      ((lastTransactionState as unknown as IntentTransaction)?.txnHash &&
-        lastTransactionState?.chainId)
-    ) {
-      setDestinationTxHash(
-        lastTransactionState?.transactionHash ||
-          (lastTransactionState as unknown as IntentTransaction)?.txnHash ||
-          "",
-      )
-      setDestinationChainId(lastTransactionState?.chainId)
-    }
-
-    navigate("receipt")
-  }
-
-  async function handleOnrampComplete(transferData: OnrampTransferResult) {
-    logger.console.log("[trails-sdk] Onramp transfer completed:", transferData)
-    logger.console.log(
-      "[trails-sdk] Using real transaction states from prepareSendQuote",
-    )
-    logger.console.log("[trails-sdk] handleOnrampComplete state:", {
-      hasOnrampContinueSend: !!onrampContinueSend,
-      hasPrepareSendQuote: !!effectivePrepareSendQuote,
-      screen,
-      onrampContinueSendInProgress,
-    })
-
-    // Invalidate token balances cache after onramp completion
-    logger.console.log(
-      "[CACHE-FLOW] Onramp completed, invalidating token balances cache",
-    )
-    invalidateTokenBalancesCache()
-
-    // 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")
-    navigate("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 (effectivePrepareSendQuote) {
-        logger.console.log(
-          "[trails-sdk] Setting transaction states from prepareSendQuote",
-        )
-        setTransactionStates(effectivePrepareSendQuote.transactionStates)
-      }
-    }
-  }
-
-  async function _handleOnrampDepositComplete() {
-    logger.console.log(
-      "[trails-sdk] Deposit confirmed in OnrampDeposit, starting intent execution",
-    )
-
-    // Invalidate token balances cache after deposit is complete
-    logger.console.log(
-      "[CACHE-FLOW] Onramp deposit complete, invalidating token balances cache",
-    )
-    invalidateTokenBalancesCache()
-
-    // Prevent multiple simultaneous calls
-    if (onrampContinueSendInProgress) {
-      logger.console.warn(
-        "[trails-sdk] onrampContinueSend already in progress, ignoring duplicate call",
-      )
-      return
-    }
-
-    // Navigate to pending screen immediately
-    logger.console.log("[trails-sdk] Navigating to pending screen")
-    navigate("pending")
-
-    // Continue with the send flow after deposit is confirmed
-    if (onrampContinueSend) {
-      logger.console.log(
-        "[trails-sdk] Continuing send flow after deposit confirmation",
-      )
-      setOnrampContinueSendInProgress(true)
-      try {
-        await onrampContinueSend()
-        logger.console.log(
-          "[trails-sdk] onrampContinueSend completed successfully",
-        )
-      } catch (error) {
-        logger.console.error(
-          "[trails-sdk] Error continuing send after deposit confirmation:",
-          error,
-        )
-        handleSendError(error as Error)
-      } finally {
-        setOnrampContinueSend(null)
-        setOnrampContinueSendInProgress(false)
-      }
-    } else {
-      logger.console.warn(
-        "[trails-sdk] No onrampContinueSend callback available",
-      )
-    }
-  }
-
-  function handleTransactionStateChange(
-    _transactionStates: TransactionState[],
-  ) {
-    logger.console.log(
-      "[trails-sdk] transactionStates from widget",
-      _transactionStates,
-    )
-    setTransactionStates([..._transactionStates])
-  }
-
-  const handleSelectWalletConnect = () => {
-    // Store the current connector as previous before switching to WalletConnect
-    if (connector && connector.name !== "WalletConnect") {
-      setPreviousConnector(connector)
-    }
-    setSelectedWalletId(null)
-    navigate("wallet-connect")
-  }
-
-  const handleReconnectPreviousWallet = async () => {
-    if (previousConnector) {
-      try {
-        logger.console.log(
-          "[trails-sdk] Reconnecting to previous wallet:",
-          previousConnector.name,
-        )
-
-        try {
-          await connectAsync({ connector: previousConnector })
-        } catch (error) {
-          logger.console.error(
-            "[trails-sdk] Failed to reconnect to previous wallet:",
-            error,
-          )
-        }
-        setPreviousConnector(null) // Clear the stored connector
-      } catch (error) {
-        logger.console.error(
-          "[trails-sdk] Failed to reconnect to previous wallet:",
-          error,
-        )
-        // If reconnection fails, go back to fund methods
-        navigate("fund-methods")
-      }
-    } else {
-      // If no previous connector, go back to fund methods
-      navigate("fund-methods")
-    }
-  }
-
-  // Generate deposit calldata based on pool protocol
-  const generateDepositCalldata = (pool: Pool, amount: string) => {
-    try {
-      logger.console.log(
-        `Generating deposit calldata for ${pool.protocol} pool:`,
-        pool.name,
-      )
-
-      if (!walletClient) {
-        throw new Error("Wallet client not found")
-      }
-
-      switch (pool.protocol.toLowerCase()) {
-        case "aave":
-          return generateAaveDepositCalldata(walletClient, pool, amount)
-        case "morpho":
-          return generateMorphoDepositCalldata(walletClient, amount)
-        default:
-          logger.console.warn(`Unsupported protocol: ${pool.protocol}`)
-          return undefined
-      }
-    } catch (error) {
-      logger.console.error("Error generating deposit calldata:", error)
-      return undefined
-    }
-  }
-
-  const handleSendError = (error: Error | string | null) => {
-    if (error) {
-      logger.console.error("[trails-sdk] Error sending transaction", error)
-    }
-    const errorMessage = getFullErrorMessage(error)
-    const isRejected = getIsUserRejectionError(error)
-    const isBalanceTooLow = getIsBalanceTooLowError(error)
-    const isApiErr = getIsApiError(error)
-    const isRateLimited = getIsRateLimitedError(error)
-
-    if (isRateLimited) {
-      // no-op
-    } else if (isRejected) {
-      setShowWalletConfirmRetry(true)
-    } else if (isBalanceTooLow || isApiErr) {
-      setShowWalletConfirmRetry(true)
-      setError(errorMessage)
-    } else {
-      setError(errorMessage)
-    }
-  }
-
-  const handleConnectError = (error: Error | string | null) => {
-    if (error) {
-      logger.console.error("[trails-sdk] Error connecting wallet", error)
-    }
-    setError(error instanceof Error ? error.message : error)
-  }
-
-  const handleTokenListError = (error: Error | string | null) => {
-    if (error) {
-      logger.console.error("[trails-sdk] Error selecting token", error)
-    }
-    setError(error instanceof Error ? error.message : error)
-  }
-
-  const handleWaitingForWalletConfirm = (
-    quote: PrepareSendQuote,
-    sendFn?: ((options?: SendOptions) => Promise<SwapReturn | null>) | null,
-  ) => {
-    setShowWalletConfirmRetry(false)
-    setPrepareSendQuote(quote ?? null)
-    // Navigate to QR wallet selection when using QR code funding method
-    if (selectedFundMethod === "direct-transfer") {
-      if (!sendFn) {
-        handleSendError(
-          "Unable to continue: direct-transfer send function is missing.",
-        )
-        return
-      }
-
-      setError(null)
-
-      void (async () => {
-        try {
-          await sendFn()
-          navigate("direct-transfer-screen", { backTarget: screen })
-        } catch (error) {
-          handleSendError(error as Error | string | null)
-        }
-      })()
-      return
-    }
-
-    if (selectedFundMethod === "onramp-mesh") {
-      return
-    }
-
-    navigate("wallet-confirmation")
-  }
-
-  const handleWaitingOnrampConfirm = (
-    quote: PrepareSendQuote,
-    onrampProviderQuote?: OnrampQuote | null,
-    params?: {
-      depositAddress: string
-      userAddress: string
-      countryCode: string
-      sourceCurrencyCode: string
-      sourceAmount: string
-      destinationCurrencyCode: string
-      serviceProvider: string
-      paymentMethodType?: string
-    },
-    sessionId?: string,
-    popupWindowRef?: Window | null,
-  ) => {
-    logger.console.log(
-      "[trails-sdk] handleWaitingOnrampConfirm called with sessionId:",
-      sessionId,
-    )
-    setPrepareSendQuote(quote ?? null)
-    setOnrampProviderQuote(onrampProviderQuote ?? null)
-    setOnrampPopupWindowRef(popupWindowRef ?? null)
-    if (params) {
-      setWidgetCreationParams(params)
-    }
-    if (sessionId) {
-      logger.console.log("[trails-sdk] Using provided sessionId:", sessionId)
-      setExternalSessionId(sessionId)
-    } else {
-      logger.console.error(
-        "[trails-sdk] No sessionId provided - this should never happen for onramp flows",
-      )
-      setExternalSessionId(null)
-    }
-    navigate("onramp-confirmation")
-  }
-
-  async function handleWalletConfirmRetry() {
-    if (!walletConfirmRetryHandler) {
-      return
-    }
-
-    try {
-      setError(null)
-      setShowWalletConfirmRetry(false)
-      await walletConfirmRetryHandler()
-    } catch (error) {
-      logger.console.error(
-        "[trails-sdk] Error retrying wallet confirmation",
-        error,
-      )
-    }
-  }
-
-  const { targetAmountUsd, targetAmountUsdFormatted } = useTargetAmount()
-
-  const renderScreenContent = () => {
-    switch (screen) {
-      case "connect": {
-        const showDisconnect = !decoupleWagmi && !hideDisconnect
-        return (
-          <ConnectWallet
-            onConnect={(walletId, connector) => {
-              // If a specific connector was provided (like EIP-6963), use it
-              // Otherwise fall back to the wallet config
-              let walletConnector = connector
-              let isEIP6963Connector = false
-
-              // Check if this is an EIP-6963 connector
-              if (connector) {
-                isEIP6963Connector = !!(
-                  (connector as EIP6963Connector)?.info?.rdns || connector?.uid
-                )
-              }
-
-              // Only look up in config if no connector was provided
-              if (!walletConnector) {
-                const config = allWallets.find((w) => w.id === walletId)
-                walletConnector = config?.connector
-              }
-
-              // Check if we need to show WalletConnect QR
-              // Don't show QR if we have an EIP-6963 connector or injected connector
-              const shouldShowQR =
-                !isEIP6963Connector && isWalletConnectConnector(walletConnector)
-
-              if (shouldShowQR) {
-                saveLastClickedWallet(walletId)
-                navigate("wallet-connect")
-              } else {
-                saveLastClickedWallet(walletId)
-                // Preserve the existing back route from the navigation stack
-                const backRoute = backScreen
-                const safeBackRoute =
-                  backRoute === "wallet-confirmation" ? undefined : backRoute
-                navigate("wallet-connection-pending", {
-                  backTarget: safeBackRoute || undefined,
-                })
-                // Auto-trigger connection - pass the actual connector
-                setTimeout(() => {
-                  handleConnectWallet(walletId, walletConnector)
-                }, 100)
-              }
-            }}
-            onDisconnect={handleWalletDisconnect}
-            onContinue={handleContinue}
-            onError={handleConnectError}
-            lastClickedWallet={selectedWalletId}
-            showDisconnect={showDisconnect}
-          />
-        )
-      }
-      case "fund-methods":
-        return (
-          <FundMethods
-            headerContent={
-              currentMode === "pay" || currentMode === "earn"
-                ? "Choose a payment method"
-                : "Choose a funding method"
-            }
-            onBack={() => {
-              if (currentMode !== configuredMode) {
-                resetMode()
-                return
-              }
-
-              if (canGoBack) {
-                goBack()
-                return
-              }
-
-              goHome()
-            }}
-            onramp={onrampFactory}
-            onSelectWalletConnect={handleSelectWalletConnect}
-            onSelectConnectedAccount={() => {
-              clearStateForFundMethodSwitch("wallet")
-              setSelectedFundMethod("wallet")
-              if (currentMode === "fund") {
-                navigate("select-origin-token", { backTarget: "fund-methods" })
-              } else {
-                goHome()
-              }
-            }}
-            onSelectTransferCrypto={() => {
-              clearStateForFundMethodSwitch("direct-transfer")
-              setSelectedFundMethod("direct-transfer")
-              if (currentMode === "fund") {
-                navigate("fund-form", { backTarget: "fund-methods" })
-              } else {
-                goHome()
-              }
-            }}
-            onSelectOnrampMeld={() => {
-              clearStateForFundMethodSwitch("onramp-meld")
-              if (currentMode === "fund") {
-                navigate("fund-form")
-              } else {
-                goHome()
-              }
-            }}
-            onSelectOnrampExchange={() => {
-              clearSelectedToken()
-              setSellAmount("")
-              setBuyAmount("")
-              setPrepareSendQuote(null)
-              setSelectedMeshExchange(null)
-              clearStateForFundMethodSwitch("onramp-mesh")
-              if (currentMode === "fund") {
-                navigate("mesh-exchanges")
-              } else {
-                goHome()
-              }
-            }}
-          />
-        )
-      case "mesh-exchanges":
-        return (
-          <MeshExchangeSelection
-            onBack={() => navigate("fund-methods")}
-            onSelectExchange={async (exchange) => {
-              if (
-                selectedToken &&
-                selectedToken.chainId !== undefined &&
-                trailsApiKey &&
-                trailsApiUrl
-              ) {
-                try {
-                  const response = await onrampClient.getMeshSupportedTokens({
-                    environment: meshEnvironment,
-                    integrationId: exchange.integrationId,
-                    chainIds: [selectedToken.chainId.toString()],
-                  })
-
-                  const isSupported = (response.tokens || []).some(
-                    (token) =>
-                      Number(token.chainId) === selectedToken.chainId &&
-                      token.symbol?.toUpperCase() ===
-                        selectedToken.symbol?.toUpperCase(),
-                  )
-
-                  if (!isSupported) {
-                    clearSelectedToken()
-                    setSellAmount("")
-                    setBuyAmount("")
-                    setPrepareSendQuote(null)
-                  }
-                } catch (error) {
-                  logger.console.warn(
-                    "[trails-sdk] Failed to validate Mesh exchange token support, clearing selected token:",
-                    error,
-                  )
-                  clearSelectedToken()
-                  setSellAmount("")
-                  setBuyAmount("")
-                  setPrepareSendQuote(null)
-                }
-              }
-
-              setSelectedFundMethod("onramp-mesh")
-              setSelectedMeshExchange(exchange)
-              navigate("fund-form", { backTarget: "mesh-exchanges" })
-            }}
-          />
-        )
-      case "payment-methods":
-        return (
-          <PaymentMethods
-            onBack={() => goHome()}
-            onSelectWalletConnect={handleSelectWalletConnect}
-            onSelectConnectedAccount={() => {
-              clearStateForFundMethodSwitch("wallet")
-              setSelectedFundMethod("wallet")
-              goHome()
-            }}
-            onSelectQrCode={() => {
-              navigate("qrcode-options", { backTarget: "payment-methods" })
-            }}
-          />
-        )
-      case "select-funding-wallet":
-        return <FundWalletSelection />
-      case "onramp-payment-methods":
-        return <OnrampPaymentMethods onBack={() => navigate("fund-methods")} />
-      case "qrcode-options":
-        return (
-          <QRCodeOptions
-            onBack={handleBack}
-            onSelectWalletConnect={handleSelectWalletConnect}
-            onSelectQRCode={() => {
-              clearStateForFundMethodSwitch("direct-transfer")
-              setSelectedFundMethod("direct-transfer")
-              if (currentMode === "fund") {
-                navigate("fund-form")
-              } else {
-                goHome()
-              }
-            }}
-          />
-        )
-      case "tokens":
-        return (
-          <TokenList
-            onContinue={handleTokenSelect}
-            onBack={handleBack}
-            targetAmountUsd={targetAmountUsd}
-            targetAmountUsdFormatted={targetAmountUsdFormatted}
-            onError={handleTokenListError}
-            recentTokens={recentTokens}
-            onRecentTokenSelect={handleRecentTokenSelect}
-            fundMethod={selectedFundMethod}
-            renderInline={renderInline}
-            onNavigateToFundMethods={() => navigate("fund-methods")}
-          />
-        )
-      case "select-origin-token":
-        return (
-          <TokenList
-            onContinue={handleTokenSelect}
-            onBack={handleBack}
-            targetAmountUsd={null}
-            targetAmountUsdFormatted={null}
-            onError={handleTokenListError}
-            recentTokens={recentTokens}
-            onRecentTokenSelect={handleRecentTokenSelect}
-            fundMethod={null}
-            renderInline={false}
-          />
-        )
-      case "select-origin-amount":
-        return (
-          <OriginSelectionAmount
-            token={selectedToken}
-            onBack={() => navigate("select-origin-token")}
-            onCancel={handleCloseModal}
-            onSubmit={handleOriginAmountSubmit}
-          />
-        )
-      case "send-form":
-        return (
-          <Pay
-            onBack={undefined}
-            selectedToken={selectedToken}
-            onSend={handleOnSend}
-            onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
-            onConfirm={() => navigate("pending")}
-            onComplete={handleTransferComplete}
-            account={walletClient?.account}
-            toRecipient={
-              selectedPool
-                ? selectedPool.depositAddress
-                : toAddress || undefined
-            }
-            toAmount={toAmount || undefined}
-            toChainId={
-              selectedPool
-                ? selectedPool.chainId
-                : toChainId
-                  ? Number(toChainId)
-                  : undefined
-            }
-            toToken={
-              selectedPool ? selectedPool.token.address : toToken || undefined
-            }
-            toCalldata={
-              selectedPool ? generatedCalldata : toCalldata || undefined
-            }
-            walletClient={walletClient ?? undefined}
-            isSequenceWallet={isSequenceWallet}
-            onTransactionStateChange={handleTransactionStateChange}
-            onError={handleSendError}
-            paymasterUrls={paymasterUrls}
-            setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-            swapProvider={swapProvider}
-            bridgeProvider={bridgeProvider}
-            swapProviderFallback={swapProviderFallback}
-            bridgeProviderFallback={bridgeProviderFallback}
-            fundMethod={selectedFundMethod}
-            onAmountUpdate={(amount: string) => {
-              if (
-                selectedPool &&
-                currentMode === "earn" &&
-                amount &&
-                amount !== ""
-              ) {
-                try {
-                  const updatedCalldata = generateDepositCalldata(
-                    selectedPool,
-                    amount,
-                  )
-                  logger.console.log(
-                    "Updated calldata:",
-                    updatedCalldata,
-                    amount,
-                  )
-                  setGeneratedCalldata(updatedCalldata)
-                } catch (error) {
-                  logger.console.error("Error updating calldata:", error)
-                  setGeneratedCalldata(undefined)
-                }
-              } else {
-                setGeneratedCalldata(undefined)
-              }
-            }}
-            checkoutOnHandlers={checkoutOnHandlers}
-            recentTokens={recentTokens}
-            onRecentTokenSelect={handleRecentTokenSelect}
-            onTrackToken={handleTrackToken}
-          />
-        )
-      case "fund-form":
-        return (
-          <Fund
-            selectedToken={selectedToken}
-            onSend={handleOnSend}
-            onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
-            onrampPropsCallback={setOnrampProps}
-            screenNavigationCallback={navigate}
-            onWaitingForOnrampConfirm={handleWaitingOnrampConfirm}
-            onConfirm={() => navigate("pending")}
-            onComplete={handleTransferComplete}
-            account={walletClient?.account}
-            toAmount={toAmount || undefined}
-            toRecipient={toAddress || undefined}
-            toChainId={toChainId ? Number(toChainId) : undefined}
-            toToken={toToken || undefined}
-            toCalldata={toCalldata || undefined}
-            walletClient={walletClient ?? undefined}
-            isSequenceWallet={isSequenceWallet}
-            onTransactionStateChange={handleTransactionStateChange}
-            onError={handleSendError}
-            paymasterUrls={paymasterUrls}
-            setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-            swapProvider={swapProvider}
-            bridgeProvider={bridgeProvider}
-            swapProviderFallback={swapProviderFallback}
-            bridgeProviderFallback={bridgeProviderFallback}
-            fundMethod={selectedFundMethod}
-            checkoutOnHandlers={checkoutOnHandlers}
-            recentTokens={recentTokens}
-            onRecentTokenSelect={handleRecentTokenSelect}
-            onTrackToken={handleTrackToken}
-            exactInputOnly={true}
-            defaultInputMode={defaultInputMode}
-          />
-        )
-      case "onramp-confirmation":
-        return (
-          <OnrampProviderConfirmation
-            onBack={handleBack}
-            onRetry={() => {
-              // Go back to fund screen to regenerate widget session
-              navigate("fund-form")
-            }}
-            onIntentExecuted={() => {
-              // Navigate to pending screen when intent is executed
-              navigate("pending")
-            }}
-            quote={effectivePrepareSendQuote}
-            onRampQuote={onrampProviderQuote}
-            widgetCreationParams={widgetCreationParams}
-            onCreateWidgetSession={createWidgetSession}
-            externalSessionId={externalSessionId}
-            popupWindowRef={onrampPopupWindowRef}
-          />
-        )
-      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={retryEnabled}
-            onRetry={
-              isHookInitiated ? handleHookRetry : handleWalletConfirmRetry
-            }
-            quote={effectivePrepareSendQuote}
-            onRampQuote={onrampProviderQuote}
-          />
-        )
-      }
-      case "qr-code-wallet-select":
-        return (
-          <QRCodeWalletSelect
-            onBack={handleBack}
-            onSelect={(walletId) => {
-              setQrCodeWalletId(walletId)
-              navigate("direct-transfer-screen")
-            }}
-            selectedWalletId={qrCodeWalletId}
-          />
-        )
-      case "direct-transfer-screen":
-        return (
-          <DirectTransfer
-            onBack={() => {
-              if (currentMode === "fund") {
-                navigate("fund-form")
-              } else {
-                goHome()
-              }
-            }}
-            onChangeWallet={() => navigate("qr-code-wallet-select")}
-            quote={effectivePrepareSendQuote}
-            selectedWalletId={qrCodeWalletId}
-            walletOptions={qrCodeWallets}
-            onIntentExecuted={() => navigate("pending")}
-          />
-        )
-      case "pending":
-        return (
-          <TransferPending
-            onElapsedTime={handleElapsedTime}
-            transactionStates={effectiveTransactionStates}
-            quote={effectivePrepareSendQuote}
-            onRampQuote={onrampProviderQuote}
-            fundMethod={selectedFundMethod}
-            timestamp={hostTransactionTimestamp ?? undefined}
-            onContinue={() => {
-              logger.console.log("[trails-sdk] onContinue called")
-              navigate("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={receiptOnSendAnother}
-            onClose={handleCloseModal}
-            renderInline={renderInline}
-            transactionStates={effectiveTransactionStates}
-            totalCompletionSeconds={displayTotalCompletionSeconds ?? undefined}
-            quote={effectivePrepareSendQuote}
-            showCloseButton={false}
-            actionButtonText={receiptActionText}
-            onRampQuote={onrampProviderQuote}
-          />
-        )
-      }
-      case "onramp-mesh":
-        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">
-              <div className="flex-1 min-h-0">
-                {onrampFactory({
-                  setCurrentScreen: (screen) => {
-                    navigate(screen as Screen)
-                  },
-                  onComplete: (transferData) => {
-                    void handleOnrampComplete(
-                      transferData as OnrampTransferResult,
-                    )
-                  },
-                  onError: (error) => {
-                    logger.console.error("[trails-sdk] Onramp error:", error)
-                  },
-                  onBack: handleBack,
-                  toTokenSymbol: onrampProps?.toTokenSymbol,
-                  toTokenAmount: onrampProps?.toTokenAmount,
-                  toChainId: onrampProps?.toChainId,
-                  toRecipientAddress: onrampProps?.toRecipientAddress,
-                  toAmountUsd: onrampProps?.toAmountUsd,
-                  selectedExchange: selectedMeshExchange || undefined,
-                  apiKey: trailsApiKey,
-                  hostname: trailsApiUrl,
-                })}
-              </div>
-              {effectivePrepareSendQuote && (
-                <div className="mt-4">
-                  <QuoteDetails
-                    quote={effectivePrepareSendQuote}
-                    showContent={true}
-                    compact={true}
-                  />
-                </div>
-              )}
-            </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 "onramp-meld":
-        return <MeldStepsFlow onBack={handleBack} />
-      case "wallet-connect":
-        return (
-          <WalletConnectScreen
-            onBack={handleBack}
-            onContinue={handleContinue}
-            onReconnectPreviousWallet={handleReconnectPreviousWallet}
-            selectedWalletId={selectedWalletId || undefined}
-          />
-        )
-      case "wallet-list":
-        return (
-          <WalletList
-            onBack={handleBack}
-            onWalletSelect={(walletId) => {
-              logger.console.log(
-                "[trails-sdk] Wallet selected from wallet-list:",
-                walletId,
-              )
-
-              if (
-                isWalletConnectConnector(
-                  allWallets.find((w) => w.id === walletId)?.connector as
-                    | Connector
-                    | undefined,
-                )
-              ) {
-                saveLastClickedWallet(walletId)
-                logger.console.log(
-                  "[trails-sdk] WalletConnect selected, going to wallet-connect screen",
-                )
-                navigate("wallet-connect")
-              } else {
-                saveLastClickedWallet(walletId)
-                logger.console.log(
-                  "[trails-sdk] Regular wallet selected, going to wallet-connection-pending",
-                )
-                // Don't reset the redirect flag - user has already been through initial flow
-                setTimeout(() => {
-                  // Preserve the existing back route from the navigation stack
-                  const backRoute = backScreen
-                  const safeBackRoute =
-                    backRoute === "wallet-confirmation" ? undefined : backRoute
-                  navigate("wallet-connection-pending", {
-                    backTarget: safeBackRoute || undefined,
-                  })
-                }, 100)
-                // Auto-trigger connection
-                setTimeout(() => {
-                  handleConnectWallet(walletId, undefined)
-                }, 100)
-              }
-            }}
-            walletOptions={allWallets.map((wallet) => ({
-              id: wallet.id,
-              name: wallet.name,
-              icon: wallet.icon,
-            }))}
-          />
-        )
-      case "earn":
-        return (
-          <Earn
-            onContinue={() => navigate("send-form")}
-            account={walletClient?.account}
-            walletClient={walletClient ?? undefined}
-            onTransactionStateChange={handleTransactionStateChange}
-            onError={handleSendError}
-            onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
-            onConfirm={() => navigate("pending")}
-            onComplete={handleTransferComplete}
-            onSend={handleOnSend}
-            paymasterUrls={paymasterUrls}
-            setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-            swapProvider={swapProvider}
-            bridgeProvider={bridgeProvider}
-            swapProviderFallback={swapProviderFallback}
-            bridgeProviderFallback={bridgeProviderFallback}
-            fundMethod={selectedFundMethod}
-            checkoutOnHandlers={checkoutOnHandlers}
-            recentTokens={recentTokens}
-            onRecentTokenSelect={handleRecentTokenSelect}
-            onTrackToken={handleTrackToken}
-          />
-        )
-      case "earn-pools":
-        return (
-          <EarnPools
-            onBack={handleBack}
-            onPoolSelect={(pool) => {
-              logger.console.log("Selected pool:", pool)
-              setSelectedPool(pool)
-              navigate("send-form")
-            }}
-          />
-        )
-      case "swap":
-        return (
-          <Swap
-            onSend={handleOnSend}
-            onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
-            onWaitingForOnrampConfirm={handleWaitingOnrampConfirm}
-            onConfirm={() => navigate("pending")}
-            onComplete={handleTransferComplete}
-            selectedToken={selectedToken}
-            account={walletClient?.account}
-            toRecipient={toAddress || undefined}
-            toAmount={toAmount || undefined}
-            toChainId={toChainId ? Number(toChainId) : undefined}
-            toToken={toToken || undefined}
-            toCalldata={toCalldata || undefined}
-            walletClient={walletClient ?? undefined}
-            isSequenceWallet={isSequenceWallet}
-            onTransactionStateChange={handleTransactionStateChange}
-            onError={handleSendError}
-            paymasterUrls={paymasterUrls}
-            setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-            swapProvider={swapProvider}
-            bridgeProvider={bridgeProvider}
-            swapProviderFallback={swapProviderFallback}
-            bridgeProviderFallback={bridgeProviderFallback}
-            fundMethod={selectedFundMethod}
-            onAmountUpdate={undefined}
-            checkoutOnHandlers={checkoutOnHandlers}
-            recentTokens={recentTokens}
-            onRecentTokenSelect={handleRecentTokenSelect}
-            onTrackToken={handleTrackToken}
-          />
-        )
-      case "withdraw":
-        return (
-          <Withdraw
-            onSend={handleOnSend}
-            onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
-            onConfirm={() => navigate("pending")}
-            onComplete={handleTransferComplete}
-            selectedToken={selectedToken}
-            account={walletClient?.account}
-            toRecipient={toAddress || undefined}
-            toAmount={toAmount || undefined}
-            toChainId={toChainId ? Number(toChainId) : undefined}
-            toToken={toToken || undefined}
-            toCalldata={toCalldata || undefined}
-            fromToken={fromToken || undefined}
-            fromChainId={fromChainId ? Number(fromChainId) : undefined}
-            walletClient={walletClient ?? undefined}
-            isSequenceWallet={isSequenceWallet}
-            onTransactionStateChange={handleTransactionStateChange}
-            onError={handleSendError}
-            paymasterUrls={paymasterUrls}
-            setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-            swapProvider={swapProvider}
-            bridgeProvider={bridgeProvider}
-            swapProviderFallback={swapProviderFallback}
-            bridgeProviderFallback={bridgeProviderFallback}
-            checkoutOnHandlers={checkoutOnHandlers}
-            recentTokens={recentTokens}
-            onTrackToken={handleTrackToken}
-            defaultInputMode={defaultInputMode}
-          />
-        )
-      case "wallet-connection-pending":
-        return (
-          <WalletConnectionPending
-            onBack={handleBack}
-            onRetry={() => {
-              if (selectedWalletId) {
-                setShowWalletConnectionRetry(false)
-                handleConnectWallet(selectedWalletId)
-              }
-            }}
-            selectedWalletId={selectedWalletId || ""}
-            isConnecting={isConnecting}
-            error={displayError}
-            showRetry={showWalletConnectionRetry}
-          />
-        )
-      case "account-history":
-        return (
-          <AccountIntentTransactionHistory
-            accountAddress={address}
-            onBack={handleBack}
-          />
-        )
-      case "meld-history":
-        return (
-          <MeldHistory limit={20} autoRefetch={false} onBack={handleBack} />
-        )
-      case "account-settings":
-        // Note: Global wallet connection check in widget.tsx ensures user is connected
-        return <AccountSettings onBack={handleBack} />
-      case "user-preferences":
-        return <UserPreferences onBack={handleBack} />
-      case "chain-list":
-        return <ChainList onBack={() => navigate("tokens")} />
-      case "recipients":
-        return <Recipients onBack={handleBack} />
-      case "disconnect":
-        return (
-          <Disconnect
-            onBack={handleBack}
-            disconnectHandler={handleWalletDisconnect}
-          />
-        )
-    }
-
-    const unhandledScreen: never = screen
-    throw new Error(`[trails-sdk] Unhandled screen state: ${unhandledScreen}`)
-  }
-
-  const renderScreen = () => {
-    return (
-      <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: React.MouseEvent) => e.stopPropagation()}
-        >
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={screen}
-              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 */}
-              {displayError && (
-                <div className="mt-2">
-                  <ErrorDisplay
-                    errorPrettified={getPrettifiedErrorMessage(
-                      displayError,
-                      "An error occurred",
-                    )}
-                    error={displayError}
-                    severity="error"
-                  />
-                </div>
-              )}
-            </motion.div>
-          </AnimatePresence>
-          <Footer onDebugScreenSelect={handleDebugScreenSelect} />
-        </motion.div>
-      </PriceImpactWarningProvider>
-    )
-  }
-
-  if (renderInline) {
-    return renderScreen()
-  }
-
-  return (
-    <div className="flex flex-col items-center justify-center space-y-8 py-12">
-      {!children ? (
-        <motion.button
-          whileHover={{ scale: 1.02 }}
-          whileTap={{ scale: 0.98 }}
-          onClick={handleOpenModal}
-          className="trails-modal-button cursor-pointer font-semibold py-3 px-6 trails-font"
-        >
-          {buttonText || defaultButtonText}
-        </motion.button>
-      ) : (
-        <motion.div
-          whileHover={{ scale: 1.02 }}
-          whileTap={{ scale: 0.98 }}
-          className="flex flex-col items-center justify-center"
-          onClick={handleOpenModal}
-        >
-          {children}
-        </motion.div>
-      )}
-
-      <AnimatePresence>
-        {isModalOpen && (
-          <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
-            {renderScreen()}
-          </Modal>
-        )}
-      </AnimatePresence>
-    </div>
-  )
-})
-
-const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
-  (props, ref) => {
-    return (
-      <WidgetProviders props={props}>
-        <ThemeSyncer />
-        <WidgetContent ref={ref} />
-      </WidgetProviders>
-    )
-  },
-)
-
-export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
-  (props, ref) => {
-    // Validate required props
-    if (!props.apiKey) {
-      throw new Error("apiKey is required")
-    }
-
-    // Memoize connectors separately to ensure stable references
-    const connectors = React.useMemo(() => {
-      if (!Array.isArray(props.wagmiConnectors)) {
-        return getConnectorsInternal(props.apiKey, props.trailsApiUrl)
-      }
-
-      if (
-        props.wagmiConnectors.some((connector) =>
-          isWalletConnectConnector(connector),
-        )
-      ) {
-        return props.wagmiConnectors
-      }
-
-      logger.console.warn(
-        "[trails-sdk] wagmiConnectors is missing WalletConnect connector; appending internal WalletConnect connector to avoid broken QR flow",
-      )
-      // TODO: Remove this append fallback in a future major release. The correct long-term behavior may be to hide WalletConnect options when consumers intentionally omit the connector.
-      return [...props.wagmiConnectors, getWalletConnectConnector()]
-    }, [props.apiKey, props.trailsApiUrl, props.wagmiConnectors])
-
-    // Create stable wagmi config using useMemo with minimal dependencies
-    const wagmiConfig = React.useMemo(() => {
-      // Use custom storage when decoupleWagmi is true to avoid conflicts with parent app's wagmi
-      // When decoupled, we DON'T want to persist connections to avoid infinite loops on reconnect
-      const storage = props.decoupleWagmi
-        ? createStorage({
-            storage: {
-              getItem: () => null,
-              setItem: () => {},
-              removeItem: () => {},
-            },
-            key: "trails-widget-decoupled-wagmi",
-          })
-        : undefined
-
-      return createWagmiConfig({
-        apiKey: props.apiKey,
-        nodeGatewayUrl: props.sequenceNodeGatewayUrl,
-        connectors,
-        storage,
-      })
-    }, [
-      props.apiKey,
-      props.decoupleWagmi,
-      props.sequenceNodeGatewayUrl,
-      connectors,
-    ])
-
-    const trailsConfig: TrailsProviderProps["config"] = {
-      trailsApiKey: props.apiKey,
-      trailsApiUrl: props.trailsApiUrl,
-      trailsAppUrl: props.trailsAppUrl,
-      sequenceApiUrl: props.sequenceApiUrl,
-      sequenceIndexerUrl: props.sequenceIndexerUrl,
-      sequenceNodeGatewayUrl: props.sequenceNodeGatewayUrl,
-      sequenceMetadataUrl: props.sequenceMetadataUrl,
-      walletConnectProjectId: props.walletConnectProjectId,
-      slippageTolerance: props.slippageTolerance
-        ? String(props.slippageTolerance)
-        : undefined,
-      debug: props.debug,
-    }
-
-    logger.console.log("trailsConfig", trailsConfig)
-
-    const widgetContent = (
-      <ThemeProvider initialTheme={props.theme}>
-        <WidgetInner {...props} ref={ref} />
-      </ThemeProvider>
-    )
-
-    const providerTreeProps: ProviderTreeProps = {
-      widgetContent,
-      wagmiConfig,
-      trailsConfig,
-    }
-
-    const content = props.decoupleWagmi ? (
-      <IsolatedProviders {...providerTreeProps} />
-    ) : (
-      <DefaultProviders {...providerTreeProps} />
-    )
-
-    const customCss =
-      props.customCss instanceof Object
-        ? cssObjectToString(props.customCss)
-        : props.customCss
-
-    if (props.disableCss) {
-      return <StrictMode>{content}</StrictMode>
-    }
-
-    return (
-      <ShadowPortal customCss={customCss}>
-        <StrictMode>{content}</StrictMode>
-      </ShadowPortal>
-    )
-  },
-)
-
-// Export standalone functions for modal control
-export const createModalController = (
-  ref: React.RefObject<TrailsWidgetRef>,
-) => ({
-  openModal: () => ref.current?.openModal?.(),
-  closeModal: () => ref.current?.closeModal?.(),
-  isModalOpen: ref.current?.isModalOpen ?? false,
-})
-
-export default TrailsWidget