0xtrails 0.12.2 → 0.13.0

package/src/widget/hooks/useDepositMonitor.ts

@@ -1,17 +1,9 @@
-import { useEffect, useState, useMemo } from "react"
+import { useEffect, useState } from "react"
 import { SECOND_MS } from "../../utils/time.js"
-import { useAccountTransactionHistory } from "../../transactions.js"
 import { checkAccountBalance } from "../../transactionIntent/utils/balanceChecker.js"
 import { getChainRpcClient } from "../../chains.js"
 import type { Account } from "viem"
-import { formatUnits } from "viem"
 import { logger } from "../../logger.js"
-
-import {
-  addressEqual,
-  isNativeToken,
-  normalizeAddress,
-} from "../../utils/address.js"
 export interface UseDepositMonitorParams {
   chainId?: number
   depositAddress?: string
@@ -22,17 +14,15 @@ export interface UseDepositMonitorParams {
 
 export interface UseDepositMonitorReturn {
   hasSufficientDeposit: boolean
-  isMonitoring: boolean
   depositBalance: string | null
   depositBalanceFormatted: string | null
   percentageComplete: number
-  lastTransactionHash: string | null
 }
 
 /**
  * Hook to monitor deposits at a specific address and check if sufficient balance is available.
- * Uses both current balance AND recent transaction history to detect deposits that may have
- * already been forwarded (e.g., by intent execution).
+ * Uses current balance only. External funding flows are committed/executed
+ * before this hook is used, so monitoring is strictly for progress and UI state.
  */
 export function useDepositMonitor({
   chainId,
@@ -47,93 +37,8 @@ export function useDepositMonitor({
     string | null
   >(null)
   const [percentageComplete, setPercentageComplete] = useState(0)
-  const [detectedDepositTxHash, setDetectedDepositTxHash] = useState<
-    string | null
-  >(null)
-
-  // Monitor transaction history at the deposit address with polling
-  // Fetch more transactions to catch deposits that may have been quickly forwarded
-  const { data: transactionData, isLoading: isLoadingTransactions } =
-    useAccountTransactionHistory({
-      chainId: enabled ? chainId : null,
-      accountAddress: enabled ? depositAddress : null,
-      pageSize: 10, // Fetch more transactions to find incoming deposits
-      includeMetadata: true,
-      refetchInterval: enabled ? 5 * SECOND_MS : false, // Poll every 5 seconds when enabled
-    })
-
-  // Check for incoming deposits in transaction history
-  // This catches deposits even if funds have already been forwarded
-  useEffect(() => {
-    if (
-      !enabled ||
-      !transactionData?.transactions ||
-      !depositAddress ||
-      !tokenAddress ||
-      !requiredAmount
-    ) {
-      return
-    }
-
-    const normalizedDepositAddress = normalizeAddress(depositAddress)
-    const normalizedTokenAddress = normalizeAddress(tokenAddress)
-    const isNativeTokenDeposit = isNativeToken(tokenAddress)
-
-    // Look for RECEIVE transfers to this address for the target token
-    for (const tx of transactionData.transactions) {
-      if (!tx.transfers) continue
-
-      for (const transfer of tx.transfers) {
-        const isReceive = transfer.transferType === "RECEIVE"
-        const isToDepositAddress = addressEqual(
-          transfer.to,
-          normalizedDepositAddress,
-        )
-        const isTargetToken = isNativeTokenDeposit
-          ? transfer.contractType === "NATIVE"
-          : addressEqual(transfer.contractAddress, normalizedTokenAddress)
-
-        if (isReceive && isToDepositAddress && isTargetToken) {
-          // Found an incoming deposit - check if amount is sufficient
-          const depositAmountRaw = transfer.amounts?.[0] || "0"
-          const depositAmount = BigInt(depositAmountRaw)
-          const required = BigInt(requiredAmount)
-
-          const decimals = transfer.contractInfo?.decimals || 18
-          const depositFormatted = formatUnits(depositAmount, decimals)
 
-          logger.console.log(
-            "[useDepositMonitor] Found incoming deposit in transaction history",
-            {
-              txHash: tx.txnHash,
-              depositAddress,
-              tokenAddress,
-              depositAmount: depositFormatted,
-              requiredAmount: formatUnits(required, decimals),
-              sufficient: depositAmount >= required,
-            },
-          )
-
-          if (depositAmount >= required) {
-            setHasSufficientDeposit(true)
-            setDepositBalance(depositAmount.toString())
-            setDepositBalanceFormatted(depositFormatted)
-            setPercentageComplete(100)
-            setDetectedDepositTxHash(tx.txnHash)
-            return // Found sufficient deposit, stop searching
-          }
-        }
-      }
-    }
-  }, [enabled, transactionData, depositAddress, tokenAddress, requiredAmount])
-
-  // Also check current balance as fallback (for cases where deposit hasn't been forwarded yet)
   useEffect(() => {
-    // Skip balance check if we already found sufficient deposit in tx history
-    if (hasSufficientDeposit) {
-      return
-    }
-
     if (
       !enabled ||
       !chainId ||
@@ -164,21 +69,17 @@ export function useDepositMonitor({
           publicClient,
         })
 
-        // Only update if we haven't already detected sufficient deposit from tx history
-        if (!hasSufficientDeposit) {
-          setHasSufficientDeposit(balanceCheck.hasEnoughBalance)
-          setDepositBalance(balanceCheck.balance?.toString() || null)
-          setDepositBalanceFormatted(balanceCheck.balanceFormatted)
+        setHasSufficientDeposit(balanceCheck.hasEnoughBalance)
+        setDepositBalance(balanceCheck.balance?.toString() || null)
+        setDepositBalanceFormatted(balanceCheck.balanceFormatted)
 
-          // Calculate percentage complete
-          const percentage =
-            balanceCheck.balance && balanceCheck.requiredAmount
-              ? (Number(balanceCheck.balance) /
-                  Number(balanceCheck.requiredAmount)) *
-                100
-              : 0
-          setPercentageComplete(Math.min(percentage, 100))
-        }
+        const percentage =
+          balanceCheck.balance && balanceCheck.requiredAmount
+            ? (Number(balanceCheck.balance) /
+                Number(balanceCheck.requiredAmount)) *
+              100
+            : 0
+        setPercentageComplete(Math.min(percentage, 100))
 
         logger.console.log("[useDepositMonitor] Balance check result", {
           depositAddress,
@@ -206,48 +107,12 @@ export function useDepositMonitor({
     const interval = setInterval(checkBalance, 15 * SECOND_MS) // Check every 15 seconds
 
     return () => clearInterval(interval)
-  }, [
-    enabled,
-    chainId,
-    depositAddress,
-    tokenAddress,
-    requiredAmount,
-    hasSufficientDeposit,
-  ])
-
-  // Get latest transaction hash - prefer the deposit tx if we found one
-  const lastTransactionHash = useMemo(() => {
-    // If we detected the deposit tx from history, use that
-    if (detectedDepositTxHash) {
-      return detectedDepositTxHash
-    }
-
-    // Fallback to latest transaction
-    if (
-      transactionData?.transactions &&
-      transactionData.transactions.length > 0
-    ) {
-      const latestTx = transactionData.transactions[0]
-      if (latestTx?.txnHash) {
-        logger.console.log(
-          "[useDepositMonitor] Latest transaction from indexer",
-          {
-            txnHash: latestTx.txnHash,
-            depositAddress,
-          },
-        )
-        return latestTx.txnHash
-      }
-    }
-    return null
-  }, [transactionData, depositAddress, detectedDepositTxHash])
+  }, [enabled, chainId, depositAddress, tokenAddress, requiredAmount])
 
   return {
     hasSufficientDeposit,
-    isMonitoring: enabled && !isLoadingTransactions,
     depositBalance,
     depositBalanceFormatted,
     percentageComplete,
-    lastTransactionHash,
   }
 }

package/src/widget/hooks/useExternalFundingReceiptSync.ts

@@ -0,0 +1,79 @@
+import { useEffect, type Dispatch, type SetStateAction } from "react"
+import { useIntentReceiptMonitor } from "../../intentReceiptMonitor.js"
+import { logger } from "../../logger.js"
+import {
+  applyIntentReceiptToTransactionStates,
+  hasIntentReceiptObservedFundingProgress,
+} from "../../transactionIntent/helpers/transactionStateHelpers.js"
+import type { TransactionState } from "../../transactions.js"
+import { useTrailsClient } from "../../trailsClient.js"
+
+export function useExternalFundingReceiptSync(params: {
+  enabled: boolean
+  intentId?: string
+  fallbackTransactionStates?: TransactionState[]
+  setTransactionStates: Dispatch<SetStateAction<TransactionState[]>>
+  onStatusUpdate?: (transactionStates: TransactionState[]) => void
+  onFundingObserved?: () => void
+}): void {
+  const {
+    enabled,
+    intentId,
+    fallbackTransactionStates,
+    setTransactionStates,
+    onStatusUpdate,
+    onFundingObserved,
+  } = params
+  const trailsClient = useTrailsClient()
+  const { intentReceipt } = useIntentReceiptMonitor(
+    enabled ? intentId : undefined,
+    trailsClient,
+  )
+
+  useEffect(() => {
+    if (!intentReceipt) {
+      return
+    }
+
+    setTransactionStates((currentStates) => {
+      const baseStates =
+        currentStates.length > 0
+          ? currentStates
+          : (fallbackTransactionStates ?? [])
+
+      if (baseStates.length === 0) {
+        return currentStates
+      }
+
+      const { transactionStates, changed } =
+        applyIntentReceiptToTransactionStates({
+          currentStates: baseStates,
+          receipt: intentReceipt,
+        })
+
+      if (changed) {
+        logger.console.log(
+          "[trails-sdk] External funding receipt sync updated transaction states",
+          {
+            intentId,
+            status: intentReceipt.status,
+          },
+        )
+        onStatusUpdate?.(transactionStates)
+      }
+
+      return changed ? transactionStates : currentStates
+    })
+
+    if (hasIntentReceiptObservedFundingProgress(intentReceipt)) {
+      onFundingObserved?.()
+    }
+  }, [
+    fallbackTransactionStates,
+    intentId,
+    intentReceipt,
+    onFundingObserved,
+    onStatusUpdate,
+    setTransactionStates,
+  ])
+}

package/src/widget/hooks/useIntentReceiptBalances.ts

@@ -0,0 +1,141 @@
+import { useMemo } from "react"
+import { useQuery } from "@tanstack/react-query"
+import { logger } from "../../logger.js"
+import { formatRawAmount } from "../../utils/format.js"
+import { useTrailsClient } from "../../trailsClient.js"
+import { useTrails } from "../providers/TrailsProvider.js"
+import type {
+  RecoverableChainGroup,
+  RecoverableToken,
+} from "../components/ReceiptRecoverableFunds.js"
+
+interface UseIntentReceiptBalancesParams {
+  intentId?: string
+  ownerAddress?: string
+  enabled?: boolean
+}
+
+interface UseIntentReceiptBalancesResult {
+  chainGroups: RecoverableChainGroup[]
+  hasRecoverableFunds: boolean
+  isLoading: boolean
+  error: Error | null
+  refetch: () => void
+}
+
+type HistoryBalanceGroup = {
+  intentAddress: string
+  chainId: number
+  tokens: Array<{
+    contractAddress: string
+    balance: string
+    decimals: number
+    chainId: number
+    symbol: string
+  }>
+}
+
+const RECEIPT_BALANCE_POLL_INTERVAL_MS = 30_000
+const MAX_RECEIPT_BALANCE_POLLS = 5
+
+function mapTokens(tokens: HistoryBalanceGroup["tokens"]): RecoverableToken[] {
+  return tokens
+    .filter((token) => {
+      try {
+        return BigInt(token.balance || "0") > 0n
+      } catch {
+        return false
+      }
+    })
+    .map((token) => ({
+      chainId: token.chainId,
+      contractAddress: token.contractAddress,
+      symbol: token.symbol,
+      decimals: token.decimals,
+      rawBalance: token.balance,
+      formattedBalance: formatRawAmount(token.balance, token.decimals),
+    }))
+}
+
+export function useIntentReceiptBalances({
+  intentId,
+  ownerAddress,
+  enabled = true,
+}: UseIntentReceiptBalancesParams): UseIntentReceiptBalancesResult {
+  const trailsConfig = useTrails()
+  const trailsClient = useTrailsClient()
+
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ["receiptIntentBalances", intentId, ownerAddress],
+    enabled:
+      enabled &&
+      !!intentId &&
+      !!ownerAddress &&
+      !!trailsConfig.trailsApiKey &&
+      !!trailsConfig.trailsApiUrl,
+    queryFn: async () => {
+      const response = await trailsClient.getIntentHistory({
+        byOwnerAddress: ownerAddress,
+        includeBalances: true,
+        page: { pageSize: 5 },
+      })
+
+      const normalizedIntentId = intentId?.toLowerCase()
+      const matchedIntent = (response.intents || []).find(
+        (item) => item.intentId?.toLowerCase() === normalizedIntentId,
+      )
+
+      if (!matchedIntent) {
+        return {
+          hasBalance: false,
+          balances: [] as HistoryBalanceGroup[],
+        }
+      }
+
+      logger.console.log("[trails-sdk] receipt balance intent match", {
+        intentId,
+        hasBalance: matchedIntent.hasBalance,
+        balanceGroupCount: (matchedIntent.balances || []).length,
+      })
+
+      return {
+        hasBalance: !!matchedIntent.hasBalance,
+        balances: (matchedIntent.balances || []) as HistoryBalanceGroup[],
+      }
+    },
+    staleTime: 0,
+    gcTime: 10 * 60 * 1000,
+    refetchInterval: (query) => {
+      return query.state.dataUpdateCount >= MAX_RECEIPT_BALANCE_POLLS
+        ? false
+        : RECEIPT_BALANCE_POLL_INTERVAL_MS
+    },
+    refetchIntervalInBackground: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+  })
+
+  const chainGroups = useMemo<RecoverableChainGroup[]>(() => {
+    const balances = data?.balances || []
+    if (balances.length === 0) return []
+
+    return balances
+      .map((group) => ({
+        intentAddress: group.intentAddress,
+        chainId: group.chainId,
+        tokens: mapTokens(group.tokens || []),
+      }))
+      .filter((group) => group.tokens.length > 0)
+  }, [data?.balances])
+
+  return {
+    chainGroups,
+    hasRecoverableFunds: (data?.hasBalance ?? false) && chainGroups.length > 0,
+    isLoading,
+    error: (error as Error) || null,
+    refetch: () => {
+      void refetch()
+    },
+  }
+}

package/src/widget/hooks/useQuote.ts

@@ -280,10 +280,6 @@ export type SendOptions = {
   depositTransactionHash?: string
   /** Skip committing the intent (used when intent is already committed). */
   skipCommit?: boolean
-  /** Only commit the intent without executing (used for onramp-meld flow). */
-  commitOnly?: boolean
-  /** Skip adding committed intent to worker monitoring storage cache. */
-  skipIntentMonitoring?: boolean
 }
 
 export type UseQuoteReturn = {
@@ -950,11 +946,8 @@ export function useQuote({
             selectedFeeOption: selectedFeeOption ?? null,
             abortSignal: combinedAbortSignal,
             originNativeTokenPriceUsd: originNativeTokenPriceUsd,
-            commitIntentFn: (intent, options) =>
-              commitIntentMutation.mutateAsync({
-                intent,
-                skipIntentMonitoring: options?.skipIntentMonitoring,
-              }),
+            commitIntentFn: (intent) =>
+              commitIntentMutation.mutateAsync(intent),
             executeIntentFn: executeIntentMutation.mutateAsync,
             checkoutOnHandlers,
             sequenceIndexerUrl,
@@ -1126,8 +1119,6 @@ export function useQuote({
               onOriginSend: options?.onOriginSend,
               depositTransactionHash: options?.depositTransactionHash,
               skipCommit: options?.skipCommit,
-              commitOnly: options?.commitOnly,
-              skipIntentMonitoring: options?.skipIntentMonitoring,
             })
 
             return {
@@ -1164,11 +1155,11 @@ export function useQuote({
           clearTimeout(timeoutId)
         }
       } catch (error) {
+        const isAbortError =
+          error instanceof Error && error.name === "AbortError"
+
         // Check if this was aborted due to timeout
-        if (
-          (error as any)?.name === "AbortError" ||
-          abortControllerRef.current.signal.aborted
-        ) {
+        if (isAbortError || abortControllerRef.current.signal.aborted) {
           logger.console.error(
             "[trails-sdk] [useQuote] Quote request timed out:",
             error,
@@ -1180,7 +1171,7 @@ export function useQuote({
           "[trails-sdk] [useQuote] Error getting quote:",
           error,
         )
-        throw getFullErrorMessage(error)
+        throw new Error(getFullErrorMessage(error))
       }
     },
     // Prevent unnecessary refetching

package/src/widget/hooks/useScreenTracking.ts

@@ -0,0 +1,14 @@
+import { useEffect } from "react"
+import { trackWidgetScreen } from "../../analytics.js"
+import { useViewManager } from "./useViewManager.js"
+
+export function useScreenTracking(userAddress?: string) {
+  const { screen } = useViewManager()
+
+  useEffect(() => {
+    trackWidgetScreen({
+      screen,
+      userAddress,
+    })
+  }, [screen, userAddress])
+}

package/src/widget/hooks/useSelectedFundMethod.tsx

@@ -4,10 +4,8 @@ import type { FundMethod } from "../../transactionIntent/types.js"
 
 interface SelectedFundMethodContextType {
   selectedFundMethod: FundMethod
-  isOnRamp: boolean
   paymentMethod: { id: string; name: string }
   setSelectedFundMethod: (method: FundMethod) => void
-  setIsMeldOnRamp: (isOnRamp: boolean) => void
   setPaymentMethod: (paymentMethod: { id: string; name: string }) => void
 }
 
@@ -24,7 +22,6 @@ export const SelectedFundMethodProvider = ({
 }: SelectedFundMethodProviderProps) => {
   const [selectedFundMethod, setSelectedFundMethod] =
     useState<FundMethod>("wallet")
-  const [isOnRamp, setIsMeldOnRamp] = useState<boolean>(false)
   const [paymentMethod, setPaymentMethod] = useState<{
     id: string
     name: string
@@ -32,9 +29,7 @@ export const SelectedFundMethodProvider = ({
 
   const value: SelectedFundMethodContextType = {
     selectedFundMethod,
-    isOnRamp,
     paymentMethod,
-    setIsMeldOnRamp,
     setSelectedFundMethod,
     setPaymentMethod,
   }

package/src/widget/hooks/useSendForm.ts

@@ -51,6 +51,7 @@ import { useCustomTokens } from "../../customTokens.js"
 import { useQuote } from "./useQuote.js"
 import type { OnrampTrackingData } from "../types/analytics.js"
 import type { FundMethod } from "../../transactionIntent/types.js"
+import { isExternalFundingMethod } from "../../transactionIntent/types.js"
 import { addressEqual } from "../../utils/address.js"
 
 type ChainInfo = {
@@ -89,8 +90,6 @@ export type UseSendProps = {
           onOriginSend?: () => void
           depositTransactionHash?: string
           skipCommit?: boolean
-          commitOnly?: boolean
-          skipIntentMonitoring?: boolean
         }) => Promise<any>)
       | null,
   ) => void
@@ -142,8 +141,6 @@ export type UseSendReturn = {
         onOriginSend?: () => void
         depositTransactionHash?: string
         skipCommit?: boolean
-        commitOnly?: boolean
-        skipIntentMonitoring?: boolean
       }) => Promise<any>)
     | null
   handleSubmit: (e: React.FormEvent) => Promise<void>
@@ -1041,7 +1038,6 @@ export function useSendForm({
         const sendResult = await sendFn!({
           selectedFeeOption: selectedFeeOption ?? null,
           onOriginSend, // Called when wallet signature is confirmed, before tx completes
-          commitOnly: fundMethod === "onramp-meld", // we need to commit first since there's a timeout on trails api side
         })
         logger.console.log("[trails-sdk] sendFn() completed:", sendResult)
 
@@ -1052,15 +1048,10 @@ export function useSendForm({
       }
 
       // Handle exchange/direct-transfer fund methods - don't call handleSend immediately
-      if (
-        fundMethod === "onramp-mesh" ||
-        fundMethod === "onramp-meld" ||
-        fundMethod === "direct-transfer"
-      ) {
-        // For direct-transfer, the intent commit happens via sendFn({ commitOnly: true })
-        // called from widget.tsx handleWaitingForWalletConfirm. The DirectTransfer component
-        // will monitor the deposit address and call sendFn({ depositTransactionHash, skipCommit: true })
-        // when sufficient funds arrive. Don't call handleSend here.
+      if (isExternalFundingMethod(fundMethod)) {
+        // External funding flows commit and execute before navigating away from
+        // the funding form. Their follow-up screens only monitor deposit balance
+        // and should not call handleSend again.
         if (fundMethod === "direct-transfer") {
           logger.console.log(
             "[trails-sdk] Direct-transfer fund method detected, deferring send until deposit confirmed",

package/src/widget/hooks/useTokenList.ts

@@ -411,16 +411,8 @@ export function useTokenList({
     error: hasSufficientBalanceUsdError,
   } = useHasSufficientBalanceUsd(address as Address.Address, targetAmountUsd)
   const showContinueButton = false
-  const { data: supportedToChains = [] } = useSupportedChains()
-
   // Note: Supported tokens are now fetched via useSupportedTokens hook with caching
 
-  // Memoize supportedChainIds to prevent recreation on every render
-  const supportedChainIds = useMemo(
-    () => new Set(supportedToChains.map((c) => c.id)),
-    [supportedToChains],
-  )
-
   // Map chain-filtered token list results to Token format
   // Used when a chain is selected for destination token list
   const chainFilteredApiTokens = useMemo(() => {
@@ -604,16 +596,11 @@ export function useTokenList({
       return mergedTokens
     }
 
-    // Default behavior: use account-specific tokens (already Token[])
-    return allSortedTokens.filter((token: Token) => {
-      if (!supportedChainIds.has(token.chainId || 0)) {
-        return false
-      }
-      return true
-    })
+    // Default behavior: use account-specific tokens (already Token[]). Chain
+    // filtering is applied in useTokenBalances with fail-open fallback.
+    return allSortedTokens
   }, [
     allSortedTokens,
-    supportedChainIds,
     fundMethod,
     supportedTokens,
     supportedTokenPrices,

package/src/widget/hooks/useTrailsSendTransaction.ts

@@ -486,11 +486,7 @@ export function useTrailsSendTransaction(
       originNativeTokenPriceUsd,
       swapProvider: params?.swapProvider,
       bridgeProvider: params?.bridgeProvider,
-      commitIntentFn: (intent, options) =>
-        commitIntentMutation.mutateAsync({
-          intent,
-          skipIntentMonitoring: options?.skipIntentMonitoring,
-        }),
+      commitIntentFn: (intent) => commitIntentMutation.mutateAsync(intent),
       executeIntentFn: executeIntentMutation.mutateAsync,
       checkoutOnHandlers: params?.checkoutOnHandlers,
       sequenceIndexerUrl,