0xtrails 0.12.0 → 0.12.2

package/src/widget/components/MeldForm.tsx

@@ -1,5 +1,6 @@
 import type React from "react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useQuery } from "@tanstack/react-query"
 import { zeroAddress } from "viem"
 import { useCountryList } from "../../query/geo.hooks.js"
 import { getCountryFlag, getCountryName } from "../utils/countryUtils.js"
@@ -17,10 +18,8 @@ import { useAccount } from "wagmi"
 import { getFullErrorMessage } from "../../error.js"
 import type { MeldPaymentMethod } from "../../meld/components/MeldFundMethods.js"
 import type { Country, MeldQuote, MeldToken } from "../../meld/utils/meld.js"
-import {
-  getMeldOnrampClient,
-  useMeldPaymentMethods,
-} from "../../meld/utils/meld.js"
+import { getMeldOnrampClient } from "../../meld/utils/meld.js"
+import { meldQueries } from "../../query/meld.queries.js"
 import type { TransactionStatusInfo } from "../hooks/useMeldTransactionStatus.js"
 import { useOnRampCountryDefaults } from "../hooks/useOnRampCountryDefaults.js"
 import { useTrails } from "../providers/TrailsProvider.js"
@@ -54,11 +53,11 @@ export interface MeldFormProps {
 
 // Common countries for Meld
 const COMMON_COUNTRIES: Country[] = [
-  { code: "US", name: "United States" },
-  { code: "CA", name: "Canada" },
-  { code: "GB", name: "United Kingdom" },
-  { code: "EU", name: "European Union" },
-  { code: "AU", name: "Australia" },
+  { countryCode: "US", name: "United States" },
+  { countryCode: "CA", name: "Canada" },
+  { countryCode: "GB", name: "United Kingdom" },
+  { countryCode: "EU", name: "European Union" },
+  { countryCode: "AU", name: "Australia" },
 ]
 
 // Simplified payment methods
@@ -113,6 +112,10 @@ const COMMON_TOKENS: MeldToken[] = [
 // Amount presets
 const AMOUNT_PRESETS = [10, 25, 50, 100]
 
+// TODO: Temporary localStorage for redirect/session recovery. Should this be sessionStorage?
+const MELD_SESSION_ID_STORAGE_KEY = "meld-current-session-id"
+const MELD_EXTERNAL_SESSION_ID_STORAGE_KEY = "meld-current-external-session-id"
+
 // Helper function to map Meld chain names to chain IDs
 function getChainId(chainName?: string): number | undefined {
   const chainMap: Record<string, number> = {
@@ -161,19 +164,19 @@ export const MeldForm: React.FC<MeldFormProps> = ({
     if (detectedCountryCode) {
       // First try to find in common countries list
       const foundCountry = COMMON_COUNTRIES.find(
-        (c) => c.code === detectedCountryCode,
+        (c) => c.countryCode === detectedCountryCode,
       )
       if (foundCountry) return foundCountry
 
       // If not found, create a country object for it using API data
       return {
-        code: detectedCountryCode,
+        countryCode: detectedCountryCode,
         name: getCountryName(detectedCountryCode, countries),
       }
     }
 
     // Final fallback
-    return COMMON_COUNTRIES[0] || { code: "US", name: "United States" }
+    return COMMON_COUNTRIES[0] || { countryCode: "US", name: "United States" }
   }, [propSelectedCountry, detectedCountryCode, countries])
   const selectedPaymentMethod = propSelectedPaymentMethod || "CREDIT_DEBIT_CARD"
 
@@ -190,7 +193,9 @@ export const MeldForm: React.FC<MeldFormProps> = ({
   }, [trailsApiKey, trailsConfig?.trailsApiUrl])
 
   // Fetch payment methods to get details including images
-  const { paymentMethods } = useMeldPaymentMethods(trailsClient, currency)
+  const { data: paymentMethods = [] } = useQuery(
+    meldQueries.paymentMethodList(trailsClient, currency),
+  )
 
   // Find the selected payment method details
   const selectedPaymentMethodDetails = useMemo(() => {
@@ -242,34 +247,31 @@ export const MeldForm: React.FC<MeldFormProps> = ({
   }, [onTransactionStatus])
 
   // Handle status changes from new component
-  const handleTransactionStatusChange = useCallback(
-    (statusInfo: TransactionStatusInfo) => {
-      // Convert to legacy format for backwards compatibility
-      const legacyStatus = {
-        type:
-          statusInfo.state === "success"
-            ? ("success" as const)
-            : statusInfo.state === "failed" || statusInfo.state === "error"
-              ? ("error" as const)
-              : statusInfo.state === "polling"
-                ? ("pending" as const)
-                : null,
-        message: statusInfo.message,
-      }
+  const handleTransactionStatusChange = (statusInfo: TransactionStatusInfo) => {
+    // Convert to legacy format for backwards compatibility
+    const legacyStatus = {
+      type:
+        statusInfo.state === "success"
+          ? ("success" as const)
+          : statusInfo.state === "failed" || statusInfo.state === "error"
+            ? ("error" as const)
+            : statusInfo.state === "polling"
+              ? ("pending" as const)
+              : null,
+      message: statusInfo.message,
+    }
 
-      // Call the latest callback using ref to prevent infinite loop
-      onTransactionStatusRef.current?.(legacyStatus)
-    },
-    [], // No dependencies needed since we use ref
-  )
+    // Call the latest callback using ref to prevent infinite loop
+    onTransactionStatusRef.current?.(legacyStatus)
+  }
 
   // Handle popup window closed
-  const handleWindowClosed = useCallback(() => {
+  const handleWindowClosed = () => {
     logger.console.log("[MeldForm] Popup window was closed")
     setPopupWindowRef(null)
     setHasClickedContinue(false) // Reset button state when window closes
     setIsPopupOpen(false) // Reset popup state
-  }, [])
+  }
 
   // Check for transaction status from URL parameters (in case of redirect)
   useEffect(() => {
@@ -286,7 +288,7 @@ export const MeldForm: React.FC<MeldFormProps> = ({
       )
       setCurrentTransactionId(urlSessionId)
       setCurrentSessionId(urlSessionId)
-      localStorage.setItem("meld-current-session-id", urlSessionId)
+      localStorage.setItem(MELD_SESSION_ID_STORAGE_KEY, urlSessionId)
     }
   }, [currentTransactionId])
 
@@ -306,7 +308,7 @@ export const MeldForm: React.FC<MeldFormProps> = ({
 
     logger.console.log("[MeldForm] Loading providers with params:", {
       walletAddress: walletAddress || "fallback",
-      countryCode: selectedCountry.code,
+      countryCode: selectedCountry.countryCode,
       sourceCurrencyCode: currency,
       sourceAmount: amount,
       destinationCurrencyCode: selectedToken.code,
@@ -322,7 +324,7 @@ export const MeldForm: React.FC<MeldFormProps> = ({
       const quoteResponse = await trailsClient.getMeldQuote({
         walletAddress:
           walletAddress || "0x1234567890123456789012345678901234567890",
-        countryCode: selectedCountry.code,
+        countryCode: selectedCountry.countryCode,
         sourceCurrencyCode: currency,
         sourceAmount: amount,
         destinationCurrencyCode: selectedToken.code,
@@ -394,7 +396,7 @@ export const MeldForm: React.FC<MeldFormProps> = ({
       const sessionResponse = await trailsClient.createMeldWidgetSession({
         sessionData: {
           walletAddress: walletAddress,
-          countryCode: selectedCountry.code,
+          countryCode: selectedCountry.countryCode,
           sourceCurrencyCode: currency,
           sourceAmount: amount,
           destinationCurrencyCode: selectedToken.code,
@@ -437,9 +439,9 @@ export const MeldForm: React.FC<MeldFormProps> = ({
       setCurrentSessionId(sessionId)
       setCurrentExternalSessionId(responseExternalSessionId)
       setCurrentTransactionId(sessionId)
-      localStorage.setItem("meld-current-session-id", sessionId)
+      localStorage.setItem(MELD_SESSION_ID_STORAGE_KEY, sessionId)
       localStorage.setItem(
-        "meld-current-external-session-id",
+        MELD_EXTERNAL_SESSION_ID_STORAGE_KEY,
         responseExternalSessionId,
       )
     } catch (error) {
@@ -549,9 +551,9 @@ export const MeldForm: React.FC<MeldFormProps> = ({
               className="flex items-center gap-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded-lg px-2 py-1 text-sm trails-text-primary hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors cursor-pointer"
             >
               <span className="text-base">
-                {getCountryFlag(selectedCountry.code, countries)}
+                {getCountryFlag(selectedCountry.countryCode, countries)}
               </span>
-              <span className="font-medium">{selectedCountry.code}</span>
+              <span className="font-medium">{selectedCountry.countryCode}</span>
               <ChevronDown className="w-4 h-4 text-gray-500" />
             </button>
           </div>

package/src/widget/components/MeldHistory.tsx

@@ -2,9 +2,10 @@ import { Building2, Check, Copy, CreditCard, RefreshCw } from "lucide-react"
 import type React from "react"
 import { useState } from "react"
 import { useAccount } from "wagmi"
+import { isValidNumber } from "../../utils/validation.js"
 import { getChainName } from "../../chains.js"
 import { logger } from "../../logger.js"
-import { useMeldProviders } from "../../meld/utils/meld.js"
+import { useMeldServiceProviders } from "../../query/meld.hooks.js"
 import type { MeldServiceProvider } from "../../onramp-client/trails-onramp.gen.js"
 import { SECOND_MS, formatRelativeDate } from "../../utils/time.js"
 import {
@@ -79,7 +80,7 @@ function formatAmount(amount?: string): string {
   if (!amount) return "-"
 
   const numAmount = parseFloat(amount)
-  if (Number.isNaN(numAmount)) return amount
+  if (!isValidNumber(numAmount)) return amount
 
   // Format with appropriate decimal places
   // Use 'en-US' to ensure consistent decimal formatting (period as decimal separator)
@@ -361,7 +362,7 @@ export const MeldHistory: React.FC<MeldHistoryProps> = ({
   })
 
   // Fetch Meld providers once and cache for 24 hours (already built into useMeldProviders)
-  const { providers: meldProviders } = useMeldProviders()
+  const { data: meldProviders = [] } = useMeldServiceProviders()
 
   if (!address) {
     return (

package/src/widget/components/MeldStepsFlow.tsx

@@ -2,6 +2,7 @@ import { ExternalLink } from "lucide-react"
 import type React from "react"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { useAccount } from "wagmi"
+import { isPositiveNumber } from "../../utils/validation.js"
 import { getChainName } from "../../chains.js"
 import { MeldCountriesList } from "../../meld/components/MeldCountriesList.js"
 import type { MeldPaymentMethod } from "../../meld/components/MeldFundMethods.js"
@@ -14,8 +15,6 @@ import { normalizeAddress, truncateAddress } from "../../utils/address.js"
 import { MINUTE_MS, SECOND_MS } from "../../utils/time.js"
 import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
 import type { MeldTransaction } from "../hooks/useOnRampTransactionStatus.js"
-import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
-import { useTokenList } from "../hooks/useTokenList.js"
 import { useTrails } from "../providers/TrailsProvider.js"
 import { MeldForm } from "./MeldForm.js"
 import { ScreenHeader } from "./ScreenHeader.js"
@@ -37,12 +36,33 @@ type Screen =
 const MELD_AMOUNT_STORAGE_KEY = "meld-form-amount"
 const MELD_CURRENCY_STORAGE_KEY = "meld-debug-currency"
 
+function parseStoredCountry(raw: string | null): Country | null {
+  if (!raw) return null
+
+  try {
+    // TODO: Temporary legacy `{ code }` compatibility until storage migration is centralized.
+    const parsed = JSON.parse(raw) as Partial<Country> & { code?: string }
+    const countryCode =
+      typeof parsed.countryCode === "string"
+        ? parsed.countryCode
+        : typeof parsed.code === "string"
+          ? parsed.code
+          : null
+
+    if (!countryCode) return null
+
+    return {
+      countryCode,
+      name: typeof parsed.name === "string" ? parsed.name : countryCode,
+    }
+  } catch {
+    return null
+  }
+}
+
 interface AmountInputScreenProps {
   onBack: (amount: string, currency: string) => void
   onContinue: (amount: string, currency: string) => void
-  _selectedCountry: Country | null
-  _selectedToken: MeldToken | null
-  _selectedPaymentMethod: MeldPaymentMethod | null
   initialAmount?: string
   initialCurrency?: string
 }
@@ -50,9 +70,6 @@ interface AmountInputScreenProps {
 const AmountInputScreen: React.FC<AmountInputScreenProps> = ({
   onBack,
   onContinue,
-  _selectedCountry,
-  _selectedToken,
-  _selectedPaymentMethod,
   initialAmount = "",
   initialCurrency = "USD",
 }) => {
@@ -61,10 +78,7 @@ const AmountInputScreen: React.FC<AmountInputScreenProps> = ({
 
   const numAmount = parseFloat(amount)
   const isValid =
-    amount.trim() !== "" &&
-    !Number.isNaN(numAmount) &&
-    numAmount > 0 &&
-    numAmount <= 10000
+    amount.trim() !== "" && isPositiveNumber(numAmount) && numAmount <= 10000
 
   // Local storage persistence
   useEffect(() => {
@@ -165,11 +179,6 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
 }) => {
   const trailsConfig = useTrails()
   const { setCurrentScreen: setGlobalScreen } = useCurrentScreen()
-  const { setSelectedToken: setOriginToken } = useOriginSelectedToken()
-  const { filteredTokens } = useTokenList({
-    onContinue: () => {},
-    onError: () => {},
-  })
   const { address: walletAddress } = useAccount()
 
   // Create OnrampClient using trails API key from config
@@ -192,12 +201,7 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
 
   // Load from local storage on mount
   const [selectedCountry, setSelectedCountry] = useState<Country | null>(() => {
-    try {
-      const saved = localStorage.getItem("meld-debug-country")
-      return saved ? JSON.parse(saved) : null
-    } catch {
-      return null
-    }
+    return parseStoredCountry(localStorage.getItem("meld-debug-country"))
   })
 
   const [selectedPaymentMethod, setSelectedPaymentMethod] =
@@ -243,6 +247,8 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
   }>({ status: "", message: "", type: null })
 
   // Check for transaction status from URL parameters (when user returns from Meld)
+  // TODO: temporary ignore this Biome warning for now; do not refactor code in this pass.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Preserve current dependency shape per requested no-code-change rollback.
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search)
 
@@ -943,11 +949,8 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
         "[MeldStepsFlow] Stored external session ID in localStorage",
       )
 
-      // Build redirect URL (current page URL without query params)
-      const _redirectUrl = window.location.origin + window.location.pathname
-
       logger.console.log("[MeldStepsFlow] Creating widget session with:", {
-        countryCode: selectedCountry.code,
+        countryCode: selectedCountry.countryCode,
         destinationCurrencyCode: selectedToken.code,
         serviceProvider: selectedProvider.serviceProvider,
         paymentMethodType: selectedPaymentMethod,
@@ -962,7 +965,7 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
       const sessionResponse = await trailsClient.createMeldWidgetSession({
         sessionData: {
           walletAddress: walletAddress,
-          countryCode: selectedCountry.code,
+          countryCode: selectedCountry.countryCode,
           sourceCurrencyCode: selectedCurrency,
           sourceAmount: selectedAmount,
           destinationCurrencyCode: selectedToken.code,
@@ -1062,43 +1065,6 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
     trailsClient,
   ])
 
-  // Declare unused functions with underscore prefix to avoid linting warnings
-  const _handleOpenWidget = useCallback(async () => {
-    await generateWidgetUrl()
-    if (
-      widgetUrl &&
-      !widgetUrl.startsWith("Error") &&
-      !widgetUrl.startsWith("Please") &&
-      !widgetUrl.startsWith("No")
-    ) {
-      window.open(widgetUrl, "_blank")
-    }
-  }, [widgetUrl, generateWidgetUrl])
-
-  const _handleContinue = useCallback(() => {
-    if (!selectedToken) {
-      return
-    }
-
-    // Find the matching token in the widget's token list
-    // Meld token has symbol (e.g., "USDC") and chainId
-    // We need to match by symbol and chainId
-    const matchingToken = filteredTokens.find((token) => {
-      // Match by symbol and chainId
-      return (
-        token.symbol.toUpperCase() === selectedToken.symbol.toUpperCase() &&
-        token.chainId === selectedToken.chainId
-      )
-    })
-
-    if (matchingToken) {
-      // Set as origin token
-      setOriginToken(matchingToken)
-      // Navigate to home screen
-      setGlobalScreen("home")
-    }
-  }, [selectedToken, filteredTokens, setOriginToken, setGlobalScreen])
-
   // Poll transaction status when we have a pending transaction
   useEffect(() => {
     logger.console.log("[MeldStepsFlow] Polling useEffect triggered:", {
@@ -1184,7 +1150,7 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
       // First, get a quote to find the best service provider
       const quoteResponse = await trailsClient.getMeldQuote({
         walletAddress: "0x1234567890123456789012345678901234567890",
-        countryCode: selectedCountry.code,
+        countryCode: selectedCountry.countryCode,
         sourceCurrencyCode: selectedCurrency,
         sourceAmount: selectedAmount,
         destinationCurrencyCode: selectedToken.code,
@@ -1334,7 +1300,6 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
         onBack={handleBackFromSubScreen}
         onSelectCountry={handleSelectCountry}
         selectedCountry={selectedCountry}
-        trailsClient={trailsClient}
       />
     )
   }
@@ -1361,7 +1326,7 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
         onSelectToken={handleSelectToken}
         selectedToken={selectedToken}
         trailsClient={trailsClient}
-        countryCode={selectedCountry?.code}
+        countryCode={selectedCountry?.countryCode}
       />
     )
   }
@@ -1382,9 +1347,6 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
           setCurrentScreen("menu")
         }}
         onContinue={handleAmountContinue}
-        _selectedCountry={selectedCountry}
-        _selectedToken={selectedToken}
-        _selectedPaymentMethod={selectedPaymentMethod}
         initialAmount={selectedAmount}
         initialCurrency={selectedCurrency}
       />

package/src/widget/components/OFTProgressBar.tsx

@@ -1,12 +1,12 @@
 import type React from "react"
 import { useEffect, useState } from "react"
-
-// OFT progress bar duration: 20 minutes
-const OFT_PROGRESS_DURATION_MS = 20 * 60 * 1000
+import { formatDuration } from "../../utils/time.js"
 
 interface OFTProgressBarProps {
   /** Timestamp when the deposit was confirmed */
   depositConfirmedAt: number
+  /** Estimated total duration in seconds */
+  estimatedDurationSeconds: number
   /** Whether to show with animation */
   showContent?: boolean
 }
@@ -17,21 +17,32 @@ interface OFTProgressBarProps {
  */
 export const OFTProgressBar: React.FC<OFTProgressBarProps> = ({
   depositConfirmedAt,
+  estimatedDurationSeconds,
   showContent = true,
 }) => {
+  const hasValidDuration =
+    Number.isFinite(estimatedDurationSeconds) && estimatedDurationSeconds > 0
+  const clampedDurationSeconds = hasValidDuration ? estimatedDurationSeconds : 0
+  const progressDurationMs = clampedDurationSeconds * 1000
+
   const [progress, setProgress] = useState(0)
-  const [remainingMinutes, setRemainingMinutes] = useState(20)
+  const [remainingMinutes, setRemainingMinutes] = useState(
+    Math.ceil(clampedDurationSeconds / 60),
+  )
 
   useEffect(() => {
+    if (!hasValidDuration) {
+      setProgress(0)
+      setRemainingMinutes(0)
+      return
+    }
+
     const updateProgress = () => {
       const elapsed = Date.now() - depositConfirmedAt
-      const newProgress = Math.min(
-        (elapsed / OFT_PROGRESS_DURATION_MS) * 100,
-        100,
-      )
+      const newProgress = Math.min((elapsed / progressDurationMs) * 100, 100)
       const remaining = Math.max(
         0,
-        Math.ceil((OFT_PROGRESS_DURATION_MS - elapsed) / 60000),
+        Math.ceil((progressDurationMs - elapsed) / 60000),
       )
       setProgress(newProgress)
       setRemainingMinutes(remaining)
@@ -41,7 +52,11 @@ export const OFTProgressBar: React.FC<OFTProgressBarProps> = ({
 
     const interval = setInterval(updateProgress, 1000)
     return () => clearInterval(interval)
-  }, [depositConfirmedAt])
+  }, [depositConfirmedAt, hasValidDuration, progressDurationMs])
+
+  if (!hasValidDuration) {
+    return null
+  }
 
   return (
     <div
@@ -51,7 +66,11 @@ export const OFTProgressBar: React.FC<OFTProgressBarProps> = ({
     >
       <div className="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-2">
         <span>Bridging via LayerZero</span>
-        <span>{remainingMinutes} min remaining</span>
+        <span>
+          {remainingMinutes > 0
+            ? `${remainingMinutes} min remaining`
+            : "completing soon"}
+        </span>
       </div>
       <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
         <div
@@ -60,7 +79,8 @@ export const OFTProgressBar: React.FC<OFTProgressBarProps> = ({
         />
       </div>
       <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">
-        LayerZero OFT transfers typically complete within 5-20 minutes
+        LayerZero OFT transfers typically complete in about{" "}
+        {formatDuration(clampedDurationSeconds)}
       </p>
     </div>
   )

package/src/widget/components/OnRampProviderSelector.tsx

@@ -2,6 +2,7 @@ import { ChevronDown } from "lucide-react"
 import type React from "react"
 import { useEffect, useRef, useState } from "react"
 import { formatUnits } from "viem"
+import { isValidNumber } from "../../utils/validation.js"
 import type { MeldQuote } from "../../meld/utils/meld.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 
@@ -106,7 +107,7 @@ export const OnRampProviderSelector: React.FC<OnRampProviderSelectorProps> = ({
 
     if (isUsdStablecoin && trailsQuote?.destinationAmountFormatted) {
       const amount = parseFloat(trailsQuote.destinationAmountFormatted)
-      if (!Number.isNaN(amount)) {
+      if (isValidNumber(amount)) {
         return `$${amount.toFixed(2)}`
       }
     }

package/src/widget/components/OnrampHistoryRow.tsx

@@ -2,6 +2,7 @@ import { Building2, Check, Copy, CreditCard } from "lucide-react"
 import type React from "react"
 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 { SECOND_MS, formatRelativeDate } from "../../utils/time.js"
@@ -61,7 +62,7 @@ function formatAmount(amount?: string): string {
   if (!amount) return "-"
 
   const numAmount = parseFloat(amount)
-  if (Number.isNaN(numAmount)) return amount
+  if (!isValidNumber(numAmount)) return amount
 
   return numAmount.toLocaleString("en-US", {
     minimumFractionDigits: 2,

package/src/widget/components/Pay.tsx

@@ -2,6 +2,7 @@ import { ChevronRight, Search } from "lucide-react"
 import type React from "react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { getChainInfo } from "../../chains.js"
+import { isValidNumber } from "../../utils/validation.js"
 import { logger } from "../../logger.js"
 import { TradeType } from "../../prepareSend.js"
 import { formatUsdAmountLocaleDisplay } from "../../utils/format.js"
@@ -61,6 +62,8 @@ export const Pay: React.FC<PayProps> = ({
   setWalletConfirmRetryHandler,
   swapProvider,
   bridgeProvider,
+  swapProviderFallback,
+  bridgeProviderFallback,
   fundMethod,
   checkoutOnHandlers,
   recentTokens,
@@ -223,6 +226,8 @@ export const Pay: React.FC<PayProps> = ({
     tradeType: TradeType.EXACT_OUTPUT, // Key difference: using EXACT_OUTPUT
     swapProvider,
     bridgeProvider,
+    swapProviderFallback,
+    bridgeProviderFallback,
     fundMethod,
     mode,
     checkoutOnHandlers,
@@ -761,7 +766,7 @@ export const Pay: React.FC<PayProps> = ({
                             const balance = parseFloat(
                               originTokenBalance.balanceFormatted,
                             )
-                            if (!Number.isNaN(balance)) {
+                            if (isValidNumber(balance)) {
                               setTokenAmountForBackend(balance.toFixed(6))
                             }
                           }
@@ -773,7 +778,7 @@ export const Pay: React.FC<PayProps> = ({
                               const balance = parseFloat(
                                 originTokenBalance.balanceFormatted,
                               )
-                              if (!Number.isNaN(balance)) {
+                              if (isValidNumber(balance)) {
                                 setTokenAmountForBackend(balance.toFixed(6))
                               }
                             }
@@ -1059,6 +1064,7 @@ export const Pay: React.FC<PayProps> = ({
             isPassthrough={isPassthroughEligible(
               prepareSendQuote.passthroughEligible,
               selectedFeeOption,
+              processedFeeOptions,
             )}
           />
         </div>

package/src/widget/components/PercentageMaxButtons.tsx

@@ -5,6 +5,7 @@ import {
   getDefaultGasCostEstimate,
 } from "../../estimate.js"
 import { useClickTracking } from "../hooks/useClickTracking.js"
+import { isValidNumber } from "../../utils/validation.js"
 
 interface PercentageMaxButtonsProps {
   userBalance: string | undefined
@@ -47,7 +48,7 @@ export const PercentageMaxButtons: React.FC<PercentageMaxButtonsProps> = ({
     })
 
     const balance = parseFloat(userBalance)
-    if (Number.isNaN(balance)) return
+    if (!isValidNumber(balance)) return
 
     const amount = (balance * percentage) / 100
     onAmountSelect(amount.toFixed(6))
@@ -69,8 +70,9 @@ export const PercentageMaxButtons: React.FC<PercentageMaxButtonsProps> = ({
       // For native tokens, subtract gas cost
       // Priority: 1) Use actual gas cost from quote, 2) Fetch real gas price, 3) Fallback to 1% of balance
       const effectiveGasCost =
-        gasCostFormatted ||
-        (await getDefaultGasCostEstimate(userBalance, chainId))
+        gasCostFormatted && gasCostFormatted !== "0"
+          ? gasCostFormatted
+          : await getDefaultGasCostEstimate(userBalance, chainId)
       const maxAmount = calculateMaxNativeAmount(userBalance, effectiveGasCost)
       onAmountSelect(maxAmount)
     } else {

package/src/widget/components/PoolDeposit.tsx

@@ -56,6 +56,8 @@ interface PoolDepositProps {
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   swapProvider?: string
   bridgeProvider?: string
+  swapProviderFallback?: boolean
+  bridgeProviderFallback?: boolean
   fundMethod?: FundMethod
   checkoutOnHandlers?: CheckoutOnHandlers
   recentTokens?: Token[]
@@ -77,6 +79,8 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
   setWalletConfirmRetryHandler,
   swapProvider,
   bridgeProvider,
+  swapProviderFallback,
+  bridgeProviderFallback,
   fundMethod,
   checkoutOnHandlers,
   recentTokens,
@@ -207,6 +211,8 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     tradeType: TradeType.EXACT_INPUT,
     swapProvider,
     bridgeProvider,
+    swapProviderFallback,
+    bridgeProviderFallback,
     fundMethod,
     mode,
     checkoutOnHandlers,

package/src/widget/components/PoolWithdraw.tsx

@@ -750,7 +750,7 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
                     {isBalanceVisible
                       ? isLoadingBalance
                         ? "Loading..."
-                        : poolBalance || "..."
+                        : poolBalance || "0.00"
                       : "••••••"}
                   </span>
                 </button>