0xtrails 0.12.0 → 0.12.2

package/src/widget/components/QuoteDetails.tsx

@@ -24,6 +24,7 @@ import { ChainImage } from "./ChainImage.js"
 import { PriceImpactWarning } from "./PriceImpactWarning.js"
 import { TokenImage } from "./TokenImage.js"
 import { Tooltip } from "./Tooltip.js"
+import { hasFailedOrAbortedTransaction } from "../utils/transactionFailure.js"
 
 interface QuoteDetailsProps {
   quote?: PrepareSendQuote | null
@@ -1113,10 +1114,10 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                                 {hasLiveStates && liveTxState.state && (
                                   <span
                                     className={`px-2 py-0.5 rounded-full text-xs ${
-                                      liveTxState.state === "confirmed"
-                                        ? "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400"
-                                        : liveTxState.state === "aborted"
-                                          ? "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400"
+                                      hasFailedOrAbortedTransaction(liveTxState)
+                                        ? "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400"
+                                        : liveTxState.state === "confirmed"
+                                          ? "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400"
                                           : "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400"
                                     }`}
                                   >

package/src/widget/components/Receipt.tsx

@@ -12,6 +12,7 @@ import { formatDuration } from "../../utils/time.js"
 import { hasMetaTxError } from "../../utils/passthrough.js"
 import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
 import { useTrails } from "../providers/TrailsProvider.js"
+import { hasAnyFailedOrAbortedTransactions } from "../utils/transactionFailure.js"
 import { ChainImage } from "./ChainImage.js"
 import { GreenCheckAnimation } from "./GreenCheckAnimation.js"
 import { QuoteDetails } from "./QuoteDetails.js"
@@ -172,8 +173,8 @@ export const Receipt: React.FC<ReceiptProps> = ({
     return transactionStates.some((tx) => tx.state === "aborted")
   }, [transactionStates])
 
-  const hasFailed = useMemo(() => {
-    return transactionStates.some((tx) => tx.state === "failed")
+  const hasFailedOrAborted = useMemo(() => {
+    return hasAnyFailedOrAbortedTransactions(transactionStates)
   }, [transactionStates])
 
   const shouldShowRefundInfo = showRefundInfo || hasRefunded
@@ -271,7 +272,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
 
   if (
     (!finalExplorerUrl && !shouldShowRefundInfo && !hasAnyTransactionHash) ||
-    ((hasAborted || hasFailed) && !hasRefunded)
+    (hasFailedOrAborted && !hasRefunded)
   ) {
     return (
       <div className="flex flex-col justify-center min-h-full space-y-6">

package/src/widget/components/SlippageToleranceSettings.tsx

@@ -2,6 +2,7 @@ import { HelpCircle } from "lucide-react"
 import type React from "react"
 import { useEffect, useState } from "react"
 import { SLIPPAGE_AUTO } from "../../constants.js"
+import { isValidNumber, isNonNegativeNumber } from "../../utils/validation.js"
 
 // Convert decimal format to percentage for display
 // Format: "0.05" (5%) -> "5"
@@ -87,7 +88,7 @@ export const SlippageToleranceSettings: React.FC<
     if (value === "" || /^\d*\.?\d*$/.test(value)) {
       // Check if the value would exceed 20% and prevent it
       const numValue = parseFloat(value)
-      if (!Number.isNaN(numValue) && numValue > 20) {
+      if (isValidNumber(numValue) && numValue > 20) {
         return // Don't update if it would exceed 20%
       }
       setDisplayValue(value)
@@ -109,7 +110,7 @@ export const SlippageToleranceSettings: React.FC<
     const percentage = parseFloat(displayValue)
 
     // Validate range (0% to 20%)
-    if (Number.isNaN(percentage) || percentage < 0 || percentage > 20) {
+    if (!isNonNegativeNumber(percentage) || percentage > 20) {
       // Reset to stored value or AUTO default
       try {
         const stored = localStorage.getItem(SLIPPAGE_STORAGE_KEY)

package/src/widget/components/Swap.tsx

@@ -53,6 +53,8 @@ interface SwapProps {
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   swapProvider?: string
   bridgeProvider?: string
+  swapProviderFallback?: boolean
+  bridgeProviderFallback?: boolean
   fundMethod?: FundMethod
   onAmountUpdate?: (amount: string) => void
   checkoutOnHandlers?: CheckoutOnHandlers

package/src/widget/components/TransferPendingVertical.tsx

@@ -8,6 +8,10 @@ import { formatDuration, MINUTE_MS } from "../../utils/time.js"
 import { hasMetaTxError } from "../../utils/passthrough.js"
 import { useMode } from "../hooks/useMode.js"
 import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
+import {
+  hasAnyFailedOrAbortedTransactions,
+  hasFailedOrAbortedTransaction,
+} from "../utils/transactionFailure.js"
 import { OFTProgressBar } from "./OFTProgressBar.js"
 import { OriginTransferInformation } from "./OriginTransferInformation.js"
 import { QuoteDetails } from "./QuoteDetails.js"
@@ -125,15 +129,7 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
   const isOFT = isOFTRoute(quote?.routeProviders)
 
   const showContinueButton =
-    (transactionStates?.some(
-      (tx) => tx.state === "failed" || tx.state === "aborted",
-    ) ||
-      transactionStates?.some((tx) =>
-        tx?.decodedGuestModuleEvents?.some(
-          (event) => event.type === "CallFailed",
-        ),
-      )) &&
-    onContinue
+    hasAnyFailedOrAbortedTransactions(transactionStates) && onContinue
 
   // Timeout warning: OFT routes can take significantly longer than standard routes.
   useEffect(() => {
@@ -246,10 +242,10 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setElapsedSeconds(elapsedSeconds + 1)
+      setElapsedSeconds((prev) => prev + 1)
     }, 1000)
     return () => clearInterval(interval)
-  }, [elapsedSeconds])
+  }, [])
 
   // Timer for active pending transaction
   useEffect(() => {
@@ -283,7 +279,7 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
   const renderStep = (tx: TransactionState, index: number) => {
     const isActivePending = index === activePendingIndex
     const isCompleted = tx.state === "confirmed"
-    const isFailed = tx.state === "failed" || tx.state === "aborted"
+    const isFailed = hasFailedOrAbortedTransaction(tx)
 
     // Check if this transaction has meta tx errors
     const txHasMetaError = hasMetaTxError(tx)
@@ -291,7 +287,7 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
     // Check if any previous transaction has failed (to disable spinners after failure)
     const hasPreviousFailure = transactionStates
       .slice(0, index)
-      .some((prevTx) => hasMetaTxError(prevTx))
+      .some((prevTx) => hasFailedOrAbortedTransaction(prevTx))
 
     // Determine step state
     let stepState: "completed" | "active" | "pending" | "failed"
@@ -440,16 +436,10 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
                     if (
                       tx &&
                       tx.state === "confirmed" &&
-                      !tx?.decodedGuestModuleEvents?.some(
-                        (event) => event.type === "CallFailed",
-                      )
+                      !hasFailedOrAbortedTransaction(tx)
                     ) {
                       lastGoodStepIndex = i
-                    } else if (
-                      tx?.decodedGuestModuleEvents?.some(
-                        (event) => event.type === "CallFailed",
-                      )
-                    ) {
+                    } else if (hasFailedOrAbortedTransaction(tx)) {
                       // Stop at first failure
                       break
                     }
@@ -482,13 +472,16 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
         </div>
       </div>
 
-      {/* OFT Progress Bar - Shows 20-minute countdown after deposit confirmed */}
-      {isOFT && depositConfirmedAt && (
-        <OFTProgressBar
-          depositConfirmedAt={depositConfirmedAt}
-          showContent={showContent}
-        />
-      )}
+      {/* OFT Progress Bar - uses quote-provided estimate when available */}
+      {isOFT &&
+        depositConfirmedAt &&
+        quote?.completionEstimateSeconds != null && (
+          <OFTProgressBar
+            depositConfirmedAt={depositConfirmedAt}
+            estimatedDurationSeconds={quote.completionEstimateSeconds}
+            showContent={showContent}
+          />
+        )}
 
       {/* Continue Button - Show only when there are failures */}
       {showContinueButton && (

package/src/widget/components/UserPreferences.tsx

@@ -5,7 +5,7 @@ import { logger } from "../../logger.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 import { useClickTracking } from "../hooks/useClickTracking.js"
 import { useDisplayCurrencyPreference } from "../hooks/useDisplayCurrencyPreference.js"
-import { useFiatCurrencyList } from "../hooks/useFiatCurrencyList.js"
+import { useFiatCurrencyList } from "../../query/fiat.hooks.js"
 import {
   SUPPORTED_LOCALES,
   useLocalePreference,

package/src/widget/components/Withdraw.tsx

@@ -2,6 +2,7 @@ import type React from "react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { getChainInfo } from "../../chains.js"
 import { FIAT_CURRENCY_SYMBOLS } from "../../constants.js"
+import { isPositiveNumber, toSafeNumber } from "../../utils/validation.js"
 import { logger } from "../../logger.js"
 import { TradeType } from "../../prepareSend.js"
 import {
@@ -65,6 +66,8 @@ const Withdraw: React.FC<WithdrawProps> = ({
   setWalletConfirmRetryHandler,
   swapProvider,
   bridgeProvider,
+  swapProviderFallback,
+  bridgeProviderFallback,
   onAmountUpdate,
   checkoutOnHandlers,
   recentTokens,
@@ -219,11 +222,13 @@ const Withdraw: React.FC<WithdrawProps> = ({
     onSend,
     onConfirm,
     onComplete,
-    selectedToken: originToken as any,
+    selectedToken: originToken ?? undefined,
     setWalletConfirmRetryHandler,
     tradeType: tradeType,
     swapProvider,
     bridgeProvider,
+    swapProviderFallback,
+    bridgeProviderFallback,
     fundMethod: "wallet",
     mode,
     checkoutOnHandlers,
@@ -310,7 +315,7 @@ const Withdraw: React.FC<WithdrawProps> = ({
         "[trails-sdk] Auto-selecting origin token:",
         defaultOriginToken,
       )
-      setOriginToken(defaultOriginToken as any)
+      setOriginToken(defaultOriginToken)
       setOriginChainId(defaultOriginToken.chainId)
     }
   }, [
@@ -350,8 +355,8 @@ const Withdraw: React.FC<WithdrawProps> = ({
         "[trails-sdk] Auto-selecting destination token:",
         defaultDestinationToken,
       )
-      setDestinationToken(defaultDestinationToken as any)
-      setSelectedDestToken(defaultDestinationToken as any)
+      setDestinationToken(defaultDestinationToken)
+      setSelectedDestToken(defaultDestinationToken)
 
       const chainInfo = getChainInfo(defaultDestinationToken.chainId)
       if (chainInfo) {
@@ -443,10 +448,11 @@ const Withdraw: React.FC<WithdrawProps> = ({
   ])
 
   useEffect(() => {
-    if (selectedDestToken) {
-      setSelectedDestinationChain(
-        getChainInfo((selectedDestToken as any)?.chainId as any) as any,
-      )
+    if (selectedDestToken?.chainId) {
+      const chainInfo = getChainInfo(selectedDestToken.chainId)
+      if (chainInfo) {
+        setSelectedDestinationChain(chainInfo)
+      }
     }
   }, [selectedDestToken, setSelectedDestinationChain])
 
@@ -457,7 +463,7 @@ const Withdraw: React.FC<WithdrawProps> = ({
         "[trails-sdk] Syncing destination token to useSendForm:",
         destinationToken,
       )
-      setSelectedDestToken(destinationToken as any)
+      setSelectedDestToken(destinationToken)
     }
   }, [destinationToken, setSelectedDestToken])
 
@@ -565,7 +571,7 @@ const Withdraw: React.FC<WithdrawProps> = ({
 
   // Handle recent token selection
   const handleRecentTokenSelect = useCallback(
-    (token: any) => {
+    (token: Token) => {
       if (showSourceTokenSelector) {
         handleSourceTokenSelectorSelect(token)
       } else if (showDestinationTokenSelector) {
@@ -717,7 +723,7 @@ const Withdraw: React.FC<WithdrawProps> = ({
 
                   if (isEnteringFiat && tokenPriceUsd > 0) {
                     // User is entering fiat, convert to token amount for backend
-                    const inputAmount = parseFloat(value) || 0
+                    const inputAmount = toSafeNumber(value)
                     const rateData = forexRateStore.getRate()
                     const usdAmount =
                       rateData && rateData.currency !== "USD"
@@ -778,7 +784,7 @@ const Withdraw: React.FC<WithdrawProps> = ({
                   if (inputDisplayValue && tokenPriceUsd > 0) {
                     const currentValue = parseFloat(inputDisplayValue)
 
-                    if (!Number.isNaN(currentValue) && currentValue > 0) {
+                    if (isPositiveNumber(currentValue)) {
                       const rateData = forexRateStore.getRate()
 
                       if (newMode) {
@@ -837,7 +843,7 @@ const Withdraw: React.FC<WithdrawProps> = ({
                   />
                 </svg>
                 {(() => {
-                  const inputValue = Number(inputDisplayValue) || 0
+                  const inputValue = toSafeNumber(inputDisplayValue)
 
                   if (isEnteringFiat) {
                     // Currently entering in fiat, show the token amount
@@ -965,7 +971,7 @@ const Withdraw: React.FC<WithdrawProps> = ({
             <div className="min-w-[138px] flex">
               <TokenSelectorButton
                 token={selectedDestToken}
-                chainId={(selectedDestToken as any)?.chainId}
+                chainId={selectedDestToken?.chainId}
                 onSelect={() => setShowDestinationTokenSelector(true)}
                 unselectable={!!toToken}
                 fullWidth={true}

package/src/widget/hooks/useAmountUsd.ts

@@ -1,4 +1,3 @@
-import { useQuery } from "@tanstack/react-query"
 import { useTokenPrice } from "../../prices.js"
 import {
   formatUsdAmountDisplay,
@@ -34,22 +33,11 @@ export function useAmountUsd({ amount, token, chainId }: UseAmountUsdProps): {
       : null,
   )
 
-  const { data: amountUsd } = useQuery({
-    queryKey: ["amountUsd", amount, tokenPrice?.priceUsd],
-    queryFn: () => {
-      if (!amount || !tokenPrice?.priceUsd) {
-        return null
-      }
-
-      const tokenPriceValue = tokenPrice.priceUsd
-      const value = Number(amount) * tokenPriceValue
-      return value
-    },
-    enabled: !!amount && !!tokenPrice?.priceUsd,
-  })
+  const amountUsd =
+    amount && tokenPrice?.priceUsd ? Number(amount) * tokenPrice.priceUsd : null
 
   return {
-    amountUsd: amountUsd || null,
+    amountUsd: amountUsd ?? null,
     amountUsdFormatted: formatUsdAmountDisplay(amountUsd || 0),
     amountUsdFormattedLocale: formatUsdAmountLocaleDisplay(amountUsd || 0),
   }

package/src/widget/hooks/useCustomTokenSearch.tsx

@@ -12,6 +12,7 @@ import { MINUTE_MS, DAY_MS } from "../../utils/time.js"
 import { useTrails } from "../providers/TrailsProvider.js"
 
 import { addressEqual, normalizeAddress } from "../../utils/address.js"
+import { isPositiveBigInt } from "../../utils/validation.js"
 interface UseCustomTokenSearchProps {
   searchQuery: string
   filteredTokensFormatted: Token[]
@@ -236,12 +237,7 @@ export function useCustomTokenSearch({
 
   // Helper function to check if a token has a balance
   const hasBalance = useCallback((token: Token): boolean => {
-    try {
-      const balance = token.balance || "0"
-      return BigInt(balance) > 0n
-    } catch {
-      return false
-    }
+    return isPositiveBigInt(token.balance || "0")
   }, [])
 
   // Apply chain filter to tokens and merge with custom tokens

package/src/widget/hooks/useDisplayCurrencyPreference.tsx

@@ -5,9 +5,8 @@ import React, {
   useEffect,
   type ReactNode,
 } from "react"
-import { useExchangeRate } from "./useExchangeRate.js"
+import { useExchangeRate, useFiatCurrencyList } from "../../query/fiat.hooks.js"
 import { forexRateStore } from "../utils/forexRateStore.js"
-import { useFiatCurrencyList } from "./useFiatCurrencyList.js"
 
 // For backwards compatibility, export SUPPORTED_CURRENCIES as a placeholder
 // The actual data comes from the API via useFiatCurrencyList

package/src/widget/hooks/useFiatOnRampCurrencies.ts

@@ -1,44 +1,23 @@
 import { useQuery } from "@tanstack/react-query"
 import type { TrailsOnramp } from "../../onrampClient.js"
 import { useOnrampClient } from "../../onrampClient.js"
-import { queryPersister } from "../../query/persister.js"
-import { DAY_MS } from "../../utils/time.js"
+import type { MeldFiatCurrency } from "../../onramp-client/trails-onramp.gen.js"
+import { meldQueries } from "../../query/meld.queries.js"
 
-const FIAT_CURRENCIES_CACHE_DURATION = DAY_MS
-
-export interface OnrampFiatCurrency {
-  currencyCode: string
-  name: string
-  symbolImageUrl: string
-}
+export type OnrampFiatCurrency = MeldFiatCurrency
 
 export interface UseFiatOnRampCurrenciesOptions {
   trailsClient?: TrailsOnramp | null
   countryCode?: string | null
-  /**
-   * Whether to enable the hook (defaults to true)
-   */
   enabled?: boolean
 }
 
 export interface UseFiatOnRampCurrenciesResult {
-  /**
-   * Array of fiat currencies available for the given country
-   */
-  fiatCurrencies: OnrampFiatCurrency[]
-  /**
-   * Whether the request is currently loading
-   */
+  fiatCurrencies: MeldFiatCurrency[]
   isLoading: boolean
-  /**
-   * Error object if the request failed, null otherwise
-   */
   error: Error | null
 }
 
-/**
- * Hook to fetch available fiat currencies to onramp for a given country.
- */
 export function useFiatOnRampCurrencies(
   options: UseFiatOnRampCurrenciesOptions,
 ): UseFiatOnRampCurrenciesResult {
@@ -46,62 +25,18 @@ export function useFiatOnRampCurrencies(
 
   const defaultOnrampClient = useOnrampClient()
 
-  // Determine if query should be enabled
-  const isQueryEnabled = () => {
-    if (!enabled) return false
-    if (!countryCode) return false
-    if (trailsClient !== undefined && !trailsClient) return false
-    return true
-  }
+  const effectiveCountryCode =
+    !enabled || !countryCode || (trailsClient !== undefined && !trailsClient)
+      ? null
+      : countryCode
+
+  const client = trailsClient !== undefined ? trailsClient : defaultOnrampClient
 
-  // Use React Query for automatic caching based on countryCode
   const {
     data: fiatCurrencies = [],
     isLoading,
     error,
-  } = useQuery({
-    queryKey: ["meldFiatCurrencies", countryCode || "unknown", "onrampClient"],
-    queryFn: async () => {
-      if (!countryCode) {
-        throw new Error("countryCode is required")
-      }
-
-      const client = trailsClient || defaultOnrampClient
-      const response = await client.getMeldFiatCurrencies({
-        countryCode,
-      })
-
-      // Parse fiat currencies from response
-      const responseCurrencies = Array.isArray(response.fiatCurrencies)
-        ? response.fiatCurrencies
-        : []
-
-      const currencies = responseCurrencies.map(
-        (currency: {
-          currencyCode?: string
-          currency_code?: string
-          name?: string
-          symbolImageUrl?: string
-          symbol_image_url?: string
-        }) => ({
-          currencyCode: currency.currencyCode || currency.currency_code || "",
-          name: currency.name || "",
-          symbolImageUrl:
-            currency.symbolImageUrl || currency.symbol_image_url || "",
-        }),
-      )
-
-      return currencies
-    },
-    enabled: isQueryEnabled(),
-    staleTime: FIAT_CURRENCIES_CACHE_DURATION,
-    gcTime: FIAT_CURRENCIES_CACHE_DURATION,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-    retry: 2,
-    persister: queryPersister.persisterFn,
-  })
+  } = useQuery(meldQueries.fiatCurrencyList(client, effectiveCountryCode))
 
   return {
     fiatCurrencies,