0xtrails 0.13.1 → 0.13.2

package/src/widget/components/Fund.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from "@tanstack/react-query"
 import { ArrowLeftRight } from "lucide-react"
 import type React from "react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
@@ -17,6 +18,9 @@ import { useSupportedTokens, type Token } from "../../tokens.js"
 import type { FundMethod } from "../../transactionIntent/types.js"
 import { isPassthroughEligible } from "../../utils/passthrough.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import { getMatchingMeshSupportedTokens } from "../utils/meshSupportedTokens.js"
+import { getActiveMeshEnvironment } from "../utils/onrampConfig.js"
+import { getWidgetOnrampConfig } from "../utils/trailsOnrampConfig.js"
 import type { Screen } from "../hooks/useViewManager.js"
 import { useViewManager } from "../hooks/useViewManager.js"
 import { useDefaultDestinationToken } from "../hooks/useDefaultDestinationToken.js"
@@ -33,9 +37,9 @@ import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
-import { useSendForm } from "../hooks/useSendForm.js"
+import { useSendForm, type OnCompleteProps } from "../hooks/useSendForm.js"
 import { useSwapState } from "../hooks/useSwapState.js"
-import { useTokenWithFreshBalance } from "../hooks/useTokenWithFreshBalance.js"
+import { useAccountTokenBalanceOnchain } from "../../query/balance.hooks.js"
 import type { BaseProps, OnrampConfirmCallback } from "../types/commonProps.js"
 import { isWithinCooldown, SECOND_MS } from "../../utils/time.js"
 import { forexRateStore } from "../utils/forexRateStore.js"
@@ -58,6 +62,7 @@ import { TokenSelectorButton } from "./TokenSelectorButton.js"
 import LoadingSpinner from "./LoadingSpinner.js"
 
 import { addressEqual } from "../../utils/address.js"
+import { useOnrampClient } from "../../onrampClient.js"
 interface FundProps extends BaseProps {
   onWaitingForOnrampConfirm?: OnrampConfirmCallback
   title?: string
@@ -102,7 +107,14 @@ const Fund: React.FC<FundProps> = ({
   defaultInputMode,
 }) => {
   const { mode, navigate } = useViewManager()
-  const { fundOptions } = useWidgetProps()
+  const widgetProps = useWidgetProps()
+  const {
+    fundOptions,
+    onramp: onrampFactory,
+    apiKey,
+    trailsApiUrl,
+  } = widgetProps
+  const onrampClient = useOnrampClient()
   const {
     selectedToken: originToken,
     setSelectedToken: setOriginToken,
@@ -116,7 +128,21 @@ const Fund: React.FC<FundProps> = ({
     setHasManualSelection: setHasManualDestinationSelection,
     isControlledByProps: isDestinationControlledByProps,
   } = useDestinationSelectedToken()
-  const { paymentMethod } = useSelectedFundMethod()
+  const { paymentMethod, selectedMeshExchange } = useSelectedFundMethod()
+  const meshOnrampConfig = getWidgetOnrampConfig(onrampFactory)
+  const meshEnvironment = getActiveMeshEnvironment(meshOnrampConfig)
+  const meshEnabled = !!meshOnrampConfig?.mesh
+  const meshAllowedExchanges = meshOnrampConfig?.mesh?.exchanges ?? null
+  const activeMeshIntegrationIds = selectedMeshExchange
+    ? [selectedMeshExchange.integrationId]
+    : null
+  const activeMeshExchangeKeys = selectedMeshExchange
+    ? null
+    : meshAllowedExchanges
+  const isCoinbaseMeshOnramp =
+    fundMethod === "onramp-mesh" &&
+    (selectedMeshExchange?.exchangeKey === "coinbase" ||
+      selectedMeshExchange?.exchangeKey === "coinbaseRamp")
 
   // Check if fee options will be shown (not needed for onramp/direct-transfer modes)
   const skipFeeBalanceFetch =
@@ -129,11 +155,9 @@ const Fund: React.FC<FundProps> = ({
   const {
     token: freshOriginToken,
     isLoadingBalance: isLoadingFreshOriginBalance,
-  } = useTokenWithFreshBalance(
-    originToken,
-    account?.address,
-    skipFeeBalanceFetch,
-  )
+  } = useAccountTokenBalanceOnchain(originToken, account?.address, {
+    disabled: skipFeeBalanceFetch,
+  })
 
   const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
   const {
@@ -179,6 +203,14 @@ const Fund: React.FC<FundProps> = ({
   const [isUserTyping, setIsUserTyping] = useState(false)
   const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
+  useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current)
+      }
+    }
+  }, [])
+
   // Get country defaults when onramp is active
   const {
     countryCode: detectedCountryCode,
@@ -314,6 +346,7 @@ const Fund: React.FC<FundProps> = ({
     setSellAmount,
     buyAmount,
     setBuyAmount,
+    resetSwapState,
     enterFormMode,
   } = useSwapState()
 
@@ -351,6 +384,16 @@ const Fund: React.FC<FundProps> = ({
   const [isCreatingWidgetSession, setIsCreatingWidgetSession] = useState(false)
   const [widgetError, setWidgetError] = useState<string | null>(null)
 
+  const handleCompleteAndClearAmounts = useCallback(
+    (result: OnCompleteProps) => {
+      setInputDisplayValue("")
+      setSellFiatAmount("")
+      resetSwapState()
+      onComplete(result)
+    },
+    [onComplete, resetSwapState, setSellFiatAmount],
+  )
+
   // Initialize and update selected recipient from toRecipient prop (but don't auto-set to account address)
   // biome-ignore lint/correctness/useExhaustiveDependencies: selectedRecipient is intentionally excluded to avoid infinite loops
   useEffect(() => {
@@ -462,7 +505,7 @@ const Fund: React.FC<FundProps> = ({
     paymasterUrls,
     onSend,
     onConfirm,
-    onComplete,
+    onComplete: handleCompleteAndClearAmounts,
     selectedToken: effectiveOriginToken as any,
     setWalletConfirmRetryHandler,
     tradeType: tradeType,
@@ -489,6 +532,60 @@ const Fund: React.FC<FundProps> = ({
         : undefined,
   })
 
+  const {
+    data: isMeshRouteSupported = true,
+    isLoading: isLoadingMeshRouteSupport,
+  } = useQuery({
+    queryKey: [
+      "mesh-route-support",
+      meshEnvironment,
+      activeMeshExchangeKeys,
+      prepareSendQuote?.originChain?.id,
+      prepareSendQuote?.originToken?.symbol,
+      trailsApiUrl,
+      apiKey,
+    ],
+    queryFn: async () => {
+      const response = await onrampClient.getMeshSupportedTokens({
+        environment: meshEnvironment,
+      })
+
+      const allowedTokens = !activeMeshExchangeKeys?.length
+        ? !activeMeshIntegrationIds?.length
+          ? response.tokens || []
+          : (response.tokens || []).filter((token) =>
+              (token.integrationIds || []).some((integrationId) =>
+                activeMeshIntegrationIds.includes(integrationId),
+              ),
+            )
+        : (response.tokens || []).filter((token) =>
+            (token.exchangeKeys || []).some((exchangeKey) =>
+              activeMeshExchangeKeys.includes(exchangeKey),
+            ),
+          )
+
+      return (
+        getMatchingMeshSupportedTokens(
+          allowedTokens,
+          prepareSendQuote?.originChain?.id,
+          prepareSendQuote?.originToken?.symbol,
+        ).length > 0
+      )
+    },
+    enabled:
+      fundMethod === "onramp-mesh" &&
+      meshEnabled &&
+      !!prepareSendQuote?.originChain?.id &&
+      !!prepareSendQuote?.originToken?.symbol &&
+      !!apiKey &&
+      !!trailsApiUrl,
+    staleTime: 24 * 60 * 60 * 1000,
+    gcTime: 24 * 60 * 60 * 1000,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  })
+
   const selectedOnrampProviderQuote =
     selectedOnrampProvider || autoSelectedOnrampQuote
 
@@ -705,8 +802,7 @@ const Fund: React.FC<FundProps> = ({
     useState(false)
 
   const { supportedTokens } = useSupportedTokens({
-    disabled:
-      !!toToken || showSourceTokenSelector || showDestinationTokenSelector,
+    disabled: !toToken,
   })
 
   // Use a ref to track if we've already auto-selected from toToken prop
@@ -890,9 +986,33 @@ const Fund: React.FC<FundProps> = ({
     setHasManualOriginSelection,
   ])
 
+  useEffect(() => {
+    if (hasManualOriginSelection || !isCoinbaseMeshOnramp) {
+      return
+    }
+
+    const isUsdcBaseSelected =
+      !!originToken &&
+      originToken.chainId === USDC_BASE.chainId &&
+      addressEqual(originToken.contractAddress, USDC_BASE.contractAddress)
+
+    if (!isUsdcBaseSelected) {
+      logger.console.log(
+        "[Fund] Preselecting USDC on Base for Coinbase Mesh onramp",
+      )
+      setOriginToken(USDC_BASE as Token)
+    }
+  }, [
+    hasManualOriginSelection,
+    isCoinbaseMeshOnramp,
+    originToken,
+    setOriginToken,
+  ])
+
   // Auto-select origin token using separated hook
   useEffect(() => {
     if (
+      fundMethod !== "onramp-mesh" &&
       !originToken &&
       !isLoadingOriginDefaults &&
       defaultOriginToken &&
@@ -910,6 +1030,7 @@ const Fund: React.FC<FundProps> = ({
     defaultOriginToken,
     setOriginToken,
     hasManualOriginSelection,
+    fundMethod,
   ])
 
   // Auto-select destination token using separated hook
@@ -2258,6 +2379,8 @@ const Fund: React.FC<FundProps> = ({
                 !isValidCustomToken ||
                 isLoadingQuote ||
                 !prepareSendQuote ||
+                (fundMethod === "onramp-mesh" &&
+                  (isLoadingMeshRouteSupport || !isMeshRouteSupported)) ||
                 (!isMeldOnRampActive &&
                   fundMethod !== "direct-transfer" &&
                   prepareSendQuote?.noSufficientBalance) ||
@@ -2295,6 +2418,15 @@ const Fund: React.FC<FundProps> = ({
           ) : fundMethod !== "direct-transfer" &&
             prepareSendQuote?.noSufficientBalance ? (
             "Insufficient Balance"
+          ) : fundMethod === "onramp-mesh" && isLoadingMeshRouteSupport ? (
+            <div className="flex items-center justify-center">
+              <LoadingSpinner className="mr-2" />
+              <span>Checking exchange funding...</span>
+            </div>
+          ) : fundMethod === "onramp-mesh" &&
+            prepareSendQuote &&
+            !isMeshRouteSupported ? (
+            "Exchange funding unavailable"
           ) : isMeldOnRampActive && !sellFiatAmount ? (
             "Enter amount"
           ) : !isMeldOnRampActive && !sellAmount ? (

package/src/widget/components/FundMethods.tsx

@@ -1,18 +1,18 @@
 import type React from "react"
 import { ChevronRight, CreditCard, Wallet, ZapIcon } from "lucide-react"
+import { wagmiConnectorToWalletId } from "@0xtrails/wallet-registry"
 import { useAccount, useConnections, useSwitchAccount } from "wagmi"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 import { useViewManager } from "../hooks/useViewManager.js"
 import { useWalletConnectionContext } from "../hooks/useWalletConnectionContext.js"
-import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
+import { useWallets } from "../../wallets.js"
 import ExchangeIcon from "../assets/Exchange-icon-black.svg"
 import WalletChange from "../assets/WalletChange-black.svg"
 import { truncateAddress } from "../../utils/address.js"
 import { useResolveEns } from "../../ens.js"
 import { AddressWalletIcon } from "./AddressWalletIcon.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { useAccountTotalBalanceUsd } from "../../query/balance.hooks.js"
 import type { FundMethod } from "../../transactionIntent/types.js"
 import type { FundMethodListOption } from "../widget.js"
 
@@ -107,17 +107,13 @@ const FundMethods: React.FC<FundMethodsProps> = ({
     eligibleConnectedWallets.find((wallet) => wallet.isActive) ||
     eligibleConnectedWallets[0]
 
-  const { data: activeWalletBalanceUsd = 0 } = useAccountTotalBalanceUsd(
-    activeConnection?.address || null,
-  )
-  const hasActiveWalletBalance = activeWalletBalanceUsd > 0
-
-  const showWalletInline = !!activeConnection && hasActiveWalletBalance
+  const showWalletInline = !!activeConnection
 
   const fundMethodAliases: Record<FundMethodListOption, FundMethod> = {
     "connected-wallet": "wallet",
     "crypto-transfer": "direct-transfer",
     "cc-onramp": "onramp-meld",
+    exchange: "onramp-mesh",
     "exchange-onramp": "onramp-mesh",
   }
 
@@ -170,7 +166,7 @@ const FundMethods: React.FC<FundMethodsProps> = ({
     listedInternalSet.size > 0 &&
     !listedInternalSet.has(method)
 
-  const displayMeshExchange = !!onramp // MeshConnect Exchange enabled when onramp prop is provided
+  const displayMeshExchange = !!onramp
 
   const renderFundMethod = (method: FundMethod) => {
     const forceDisabled = isUnlisted(method)

package/src/widget/components/MeldHistory.tsx

@@ -6,7 +6,7 @@ import { isValidNumber } from "../../utils/validation.js"
 import { getChainName } from "../../chains.js"
 import { logger } from "../../logger.js"
 import { useMeldServiceProviders } from "../../query/meld.hooks.js"
-import type { MeldServiceProvider } from "../../onramp-client/trails-onramp.gen.js"
+import type { MeldServiceProvider } from "@0xtrails/api/onramp"
 import { SECOND_MS, formatRelativeDate } from "../../utils/time.js"
 import {
   useMeldTransactionHistory,

package/src/widget/components/MeshExchangeSelection.tsx

@@ -0,0 +1,218 @@
+import { useQuery } from "@tanstack/react-query"
+import { ChevronRight } from "lucide-react"
+import type React from "react"
+import { useState } from "react"
+import { useOnrampClient } from "../../onrampClient.js"
+import { logger } from "../../logger.js"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import { getActiveMeshEnvironment } from "../utils/onrampConfig.js"
+import { getWidgetOnrampConfig } from "../utils/trailsOnrampConfig.js"
+
+const INITIAL_VISIBLE_EXCHANGES = 3
+
+export interface MeshExchangeSelectionProps {
+  onBack: () => void
+  onSelectExchange: (exchange: {
+    integrationId: string
+    exchangeKey: string
+    exchangeName: string
+  }) => void
+}
+
+function getExchangeBackgroundClassName(exchangeKey: string): string {
+  switch (exchangeKey) {
+    case "coinbase":
+    case "coinbaseRamp":
+    case "sandboxCoinbase":
+      return "bg-white"
+    case "binanceInternational":
+    case "binanceInternationalDirect":
+    case "binanceUs":
+    case "binanceUsDirect":
+    case "sandbox":
+    case "binanceConnect":
+      return "bg-black"
+    case "bitfinex":
+    case "bitfinexDirect":
+      return "bg-[#0e3452]"
+    case "kraken":
+    case "krakenDirect":
+      return "bg-[#5841d7]"
+    case "uphold":
+    case "upholdDirect":
+      return "bg-[#49cc68]"
+    case "paribu":
+    case "paribuOAuth":
+      return "bg-[#9cba3b]"
+    case "robinhood":
+    case "robinhoodDirect":
+    case "robinhoodConnect":
+      return "bg-[#ccff00]"
+    default:
+      return "bg-gray-700"
+  }
+}
+
+export const MeshExchangeSelection: React.FC<MeshExchangeSelectionProps> = ({
+  onBack,
+  onSelectExchange,
+}) => {
+  const { onramp: onrampFactory, apiKey, trailsApiUrl } = useWidgetProps()
+  const onrampClient = useOnrampClient()
+  const meshOnrampConfig = getWidgetOnrampConfig(onrampFactory)
+  const [showAllExchanges, setShowAllExchanges] = useState(false)
+  const [failedLogos, setFailedLogos] = useState<Record<string, true>>({})
+
+  const meshEnvironment = getActiveMeshEnvironment(meshOnrampConfig)
+
+  const {
+    data: exchangeOptions = [],
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["mesh-exchange-options", meshEnvironment, trailsApiUrl, apiKey],
+    queryFn: async () => {
+      const response = await onrampClient.getMeshIntegrations({
+        environment: meshEnvironment,
+      })
+
+      return (response.integrations || []).map((integration) => {
+        return {
+          key: integration.key,
+          integrationId: integration.id,
+          exchangeName: integration.displayName || integration.key,
+          imageUrl: integration.imageUrl || "",
+        }
+      })
+    },
+    enabled: !!apiKey && !!trailsApiUrl,
+    staleTime: 24 * 60 * 60 * 1000,
+    gcTime: 24 * 60 * 60 * 1000,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  })
+  const visibleExchangeOptions = showAllExchanges
+    ? exchangeOptions
+    : exchangeOptions.slice(0, INITIAL_VISIBLE_EXCHANGES)
+
+  return (
+    <div className="flex flex-col h-full">
+      <ScreenHeader
+        onBack={onBack}
+        headerContent="Select Exchange"
+        headerContentAlign="left"
+      />
+
+      <div className="flex-1">
+        {isLoading ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="text-center">
+              <div className="mt-4 mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-2 border-solid border-blue-500 border-t-transparent" />
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Loading exchanges...
+              </p>
+            </div>
+          </div>
+        ) : error ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="rounded-lg border border-solid border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300">
+              {error instanceof Error
+                ? error.message
+                : "Failed to load exchanges"}
+            </div>
+          </div>
+        ) : exchangeOptions.length === 0 ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="rounded-lg border border-solid border-gray-200 bg-gray-50 p-4 text-sm text-gray-600 dark:border-gray-700 dark:bg-gray-800/70 dark:text-gray-300">
+              No supported exchanges are currently available.
+            </div>
+          </div>
+        ) : (
+          <div className="max-h-[420px] overflow-y-auto pr-1 pt-4">
+            <div className="space-y-4">
+              {visibleExchangeOptions.map((exchange) => (
+                <button
+                  key={exchange.integrationId}
+                  type="button"
+                  onClick={() => {
+                    logger.console.log(
+                      "[trails-sdk] Selected Mesh exchange in widget:",
+                      exchange,
+                    )
+                    onSelectExchange({
+                      integrationId: exchange.integrationId,
+                      exchangeKey: exchange.key,
+                      exchangeName: exchange.exchangeName,
+                    })
+                  }}
+                  className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 rounded-lg transition-all duration-200 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-900 dark:text-white"
+                >
+                  <div className="flex items-center space-x-3 flex-1">
+                    <div
+                      className={`flex h-12 w-12 items-center justify-center overflow-hidden rounded-lg border border-solid border-gray-200 dark:border-gray-700 ${getExchangeBackgroundClassName(exchange.key)}`}
+                    >
+                      {exchange.imageUrl &&
+                      !failedLogos[exchange.integrationId] ? (
+                        <img
+                          src={exchange.imageUrl}
+                          alt={`${exchange.exchangeName} logo`}
+                          className="h-8 w-8 rounded object-contain"
+                          loading="lazy"
+                          referrerPolicy="no-referrer"
+                          onError={() => {
+                            setFailedLogos((current) => ({
+                              ...current,
+                              [exchange.integrationId]: true,
+                            }))
+                          }}
+                        />
+                      ) : (
+                        <span className="text-sm font-semibold text-white">
+                          {exchange.exchangeName.slice(0, 2).toUpperCase()}
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex-1 text-left">
+                      <h4 className="font-semibold text-gray-900 dark:text-gray-100">
+                        {exchange.exchangeName}
+                      </h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        Connect your account to transfer funds
+                      </p>
+                    </div>
+                  </div>
+                  <ChevronRight className="w-5 h-5 text-gray-400" />
+                </button>
+              ))}
+              {!showAllExchanges &&
+                exchangeOptions.length > INITIAL_VISIBLE_EXCHANGES && (
+                  <button
+                    type="button"
+                    onClick={() => setShowAllExchanges(true)}
+                    className="w-full cursor-pointer rounded-lg border border-solid border-gray-200 px-6 py-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                  >
+                    Show more
+                  </button>
+                )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {meshEnvironment === "sandbox" && (
+        <div className="mt-4 border border-solid border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-800 dark:bg-yellow-900/20">
+          <div className="text-center">
+            <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+              Sandbox environment
+            </p>
+            <p className="text-xs text-yellow-600 dark:text-yellow-300">
+              No real funds are used
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/widget/components/OnrampHistoryRow.tsx

@@ -4,7 +4,7 @@ import { useState } from "react"
 import { getChainName } from "../../chains.js"
 import { isValidNumber } from "../../utils/validation.js"
 import { logger } from "../../logger.js"
-import type { MeldServiceProvider } from "../../onramp-client/trails-onramp.gen.js"
+import type { MeldServiceProvider } from "@0xtrails/api/onramp"
 import { SECOND_MS, formatRelativeDate } from "../../utils/time.js"
 import { truncateAddress } from "../../utils/address.js"
 import type { MeldTransactionData } from "../hooks/useMeldTransactionHistory.js"

package/src/widget/components/Pay.tsx

@@ -21,7 +21,7 @@ import { useSendForm } from "../hooks/useSendForm.js"
 import { useSwapAmount } from "../hooks/useSwapAmount.js"
 import { useSwapState } from "../hooks/useSwapState.js"
 import { useTargetAmount } from "../hooks/useTargetAmount.js"
-import { useTokenList } from "../hooks/useTokenList.js"
+import { useAccountTokenBalanceOnchain } from "../../query/balance.hooks.js"
 import type { BaseProps } from "../types/commonProps.js"
 import { AddressOrEnsName } from "./AddressOrEnsName.js"
 import { AddressWalletIcon } from "./AddressWalletIcon.js"
@@ -130,27 +130,11 @@ export const Pay: React.FC<PayProps> = ({
   const { trackClick } = useClickTracking()
   const paymentRequestInputRef = useRef<HTMLInputElement>(null)
 
-  // Get sorted tokens to auto-select origin and destination tokens
-  const { filteredTokensFormatted, isLoadingTokens } = useTokenList({
-    onContinue: () => {}, // Not used for auto-selection
-    onError: () => {}, // Not used for auto-selection
-    fundMethod: fundMethod,
-    allSupportedTokens: true, // Show all tokens for destination selection
-  })
-
-  // Get origin token balance for display
-  const originTokenBalance = useMemo(() => {
-    if (!originToken || !filteredTokensFormatted) return null
-
-    const foundToken = filteredTokensFormatted.find(
-      (token) =>
-        token.contractAddress?.toLowerCase() ===
-          originToken.contractAddress?.toLowerCase() &&
-        token.chainId === originToken.chainId,
-    )
-
-    return foundToken
-  }, [originToken, filteredTokensFormatted])
+  // Get origin token with fresh balance for display and fee option checks
+  const {
+    token: freshOriginToken,
+    isLoadingBalance: isLoadingFreshOriginBalance,
+  } = useAccountTokenBalanceOnchain(originToken, account?.address)
 
   // Calculate effective recipient for useSendForm
   const effectiveRecipient =
@@ -782,9 +766,9 @@ export const Pay: React.FC<PayProps> = ({
                         type="button"
                         className="text-xs text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors bg-transparent border-none p-0"
                         onClick={() => {
-                          if (originTokenBalance?.balanceFormatted) {
+                          if (freshOriginToken?.balanceFormatted) {
                             const balance = parseFloat(
-                              originTokenBalance.balanceFormatted,
+                              freshOriginToken.balanceFormatted,
                             )
                             if (isValidNumber(balance)) {
                               setTokenAmountForBackend(balance.toFixed(6))
@@ -794,9 +778,9 @@ export const Pay: React.FC<PayProps> = ({
                         onKeyDown={(e) => {
                           if (e.key === "Enter" || e.key === " ") {
                             e.preventDefault()
-                            if (originTokenBalance?.balanceFormatted) {
+                            if (freshOriginToken?.balanceFormatted) {
                               const balance = parseFloat(
-                                originTokenBalance.balanceFormatted,
+                                freshOriginToken.balanceFormatted,
                               )
                               if (isValidNumber(balance)) {
                                 setTokenAmountForBackend(balance.toFixed(6))
@@ -805,26 +789,26 @@ export const Pay: React.FC<PayProps> = ({
                           }
                         }}
                         title="Click to use full balance"
-                        disabled={!originTokenBalance?.balanceFormatted}
+                        disabled={!freshOriginToken?.balanceFormatted}
                       >
                         <span translate="no">
                           Balance:{" "}
-                          {isLoadingTokens ? (
+                          {isLoadingFreshOriginBalance ? (
                             <span className="inline-block w-12 h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></span>
                           ) : (
-                            originTokenBalance?.balanceLocaleDisplay ||
-                            originTokenBalance?.balanceFormatted ||
+                            freshOriginToken?.balanceLocaleDisplay ||
+                            freshOriginToken?.balanceFormatted ||
                             ""
                           )}
                         </span>
                       </button>
 
                       {/* Percentage Buttons - Only show if toAmount is not set */}
-                      {!toAmount && originTokenBalance?.balanceFormatted && (
+                      {!toAmount && freshOriginToken?.balanceFormatted && (
                         <PercentageMaxButtons
-                          userBalance={originTokenBalance.balanceFormatted}
-                          userBalanceRaw={originTokenBalance.balance ?? "0"}
-                          decimals={originTokenBalance.decimals ?? 18}
+                          userBalance={freshOriginToken.balanceFormatted}
+                          userBalanceRaw={freshOriginToken.balance ?? "0"}
+                          decimals={freshOriginToken.decimals ?? 18}
                           isNativeToken={originToken.isNativeToken ?? false}
                           gasCostFormatted={prepareSendQuote?.gasCostFormatted}
                           chainId={originToken.chainId}
@@ -1064,7 +1048,7 @@ export const Pay: React.FC<PayProps> = ({
               originToken
                 ? {
                     originToken,
-                    originTokenBalance: originTokenBalance?.balance ?? "0",
+                    originTokenBalance: freshOriginToken?.balance ?? "0",
                     originTokenAmount:
                       prepareSendQuote?.originAmountFormatted ?? "0",
                   }
@@ -1129,7 +1113,7 @@ export const Pay: React.FC<PayProps> = ({
               (selectedFeeOption && originToken
                 ? isFeeOptionDisabled(selectedFeeOption as ProcessedFeeOption, {
                     originToken: originToken,
-                    originTokenBalance: originTokenBalance?.balance ?? "0",
+                    originTokenBalance: freshOriginToken?.balance ?? "0",
                     originTokenAmount:
                       prepareSendQuote?.originAmountFormatted ?? "0",
                   })