0xtrails 0.13.0 → 0.13.2

package/src/widget/components/TransactionHistoryItem.tsx

@@ -1,5 +1,6 @@
 import { Info } from "lucide-react"
 import { useEffect, useMemo, useRef, useState } from "react"
+import type { WalletClient } from "viem"
 import { useWalletClient } from "wagmi"
 import { getExplorerUrl } from "../../explorer.js"
 import type { Intent, IntentTransaction } from "../../index.js"
@@ -25,6 +26,7 @@ const TransactionHistoryItem: React.FC<{
   fetchedIntent?: Intent | null
   commitIntentMutation?: any
   onCommitSuccess?: () => void
+  selectedWalletClient?: WalletClient | null
   balancesByIntentAddress: {
     [intentAddress: string]: {
       tokenBalancesData: FlatTokenBalancesData | undefined
@@ -40,6 +42,7 @@ const TransactionHistoryItem: React.FC<{
   fetchedIntent,
   commitIntentMutation,
   onCommitSuccess,
+  selectedWalletClient,
   balancesByIntentAddress,
   onRefetchBalances,
 }) => {
@@ -48,6 +51,8 @@ const TransactionHistoryItem: React.FC<{
   const dateInfo = formatRelativeDate(transaction.createdAt)
   const { data: walletClient } = useWalletClient()
 
+  const effectiveWalletClient = selectedWalletClient || walletClient
+
   // Track refund transaction hash per intent
   const [refundTxHash, setRefundTxHash] = useState<`0x${string}` | null>(null)
 
@@ -83,7 +88,7 @@ const TransactionHistoryItem: React.FC<{
   const { recover, recoverToken } = useIntentRecoverWithBalances({
     intent: !refundTxHash ? intentDataForRecovery : null,
     balancesByIntentAddress: balancesByIntentAddress,
-    walletClient: walletClient || undefined,
+    walletClient: effectiveWalletClient || undefined,
   })
 
   // Create a wrapper for onRefetch that also refetches intent data
@@ -101,7 +106,10 @@ const TransactionHistoryItem: React.FC<{
 
   // Allow recovery for any intent with balances, regardless of execution status
   const canRecover =
-    transaction.intentId && walletClient && !refundTxHash && hasIntentBalance
+    transaction.intentId &&
+    effectiveWalletClient &&
+    !refundTxHash &&
+    hasIntentBalance
 
   // Refetch balances when execution status changes (e.g. mining -> succeeded)
   const prevExecutionStatusRef = useRef(transaction.executionStatus)
@@ -123,25 +131,6 @@ const TransactionHistoryItem: React.FC<{
   // Balance data is already included in the API response (includeBalances: true),
   // so no separate refetch on mount is needed.
 
-  // Debug logging for recovery button
-  useEffect(() => {
-    if (transaction.intentId) {
-      logger.console.log("[AccountIntentTransactionHistory] Recovery check:", {
-        intentId: transaction.intentId,
-        hasWalletClient: !!walletClient,
-        refundTxHash,
-        hasIntentBalance,
-        canRecover,
-      })
-    }
-  }, [
-    transaction.intentId,
-    walletClient,
-    refundTxHash,
-    hasIntentBalance,
-    canRecover,
-  ])
-
   const [isRecovering, setIsRecovering] = useState(false)
   const [recoverError, setRecoverError] = useState<string | null>(null)
   const [isCommitting, setIsCommitting] = useState(false)
@@ -307,7 +296,7 @@ const TransactionHistoryItem: React.FC<{
   })
 
   const handleRecover = async () => {
-    if (!transaction.intentId || !walletClient) {
+    if (!transaction.intentId || !effectiveWalletClient) {
       logger.console.error(
         "[AccountIntentTransactionHistory] Cannot recover: missing intentId or walletClient",
       )
@@ -583,7 +572,9 @@ const TransactionHistoryItem: React.FC<{
       {/* Bottom section with status, action buttons, and more details button */}
       <div className="flex items-center justify-between mt-2">
         <div className="flex items-center gap-2">
-          <ExecutionStatusBadge status={transaction.executionStatus} />
+          <ExecutionStatusBadge
+            status={transaction.intentStatus || transaction.executionStatus}
+          />
 
           {/* Action Buttons - positioned next to status */}
           {refundTxHash && refundExplorerUrl ? (

package/src/widget/components/TransferPendingVertical.tsx

@@ -1,6 +1,7 @@
 import { ChevronRight, ExternalLink } from "lucide-react"
 import type React from "react"
 import { useEffect, useState } from "react"
+import { mainnet } from "viem/chains"
 import { TRAILS_SUPPORT_URL } from "../../constants.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { TransactionState } from "../../transactions.js"
@@ -29,7 +30,7 @@ const isOFTRoute = (routeProviders?: { id: string }[]): boolean => {
 const OFT_TIMEOUT_MS = 60 * MINUTE_MS // 1 hour for OFT routes
 const DEFAULT_TIMEOUT_MS = MINUTE_MS // 1 minute for normal routes
 const MAINNET_TIMEOUT_MS = 2 * MINUTE_MS // 2 minutes for Ethereum mainnet routes
-const ETHEREUM_MAINNET_CHAIN_ID = 1
+const MESH_ONRAMP_TIMEOUT_MS = 3 * MINUTE_MS // 3 minutes for Mesh onramp
 
 // Checkmark icon for completed steps
 const CheckmarkIcon = () => (
@@ -108,6 +109,7 @@ interface TransferPendingProps {
   timestamp?: number
   onContinue?: () => void
   onRampQuote?: OnrampQuote | null
+  fundMethod?: string | null
 }
 
 export const TransferPending: React.FC<TransferPendingProps> = ({
@@ -117,10 +119,10 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
   onRampQuote,
   timestamp,
   onContinue,
+  fundMethod,
 }) => {
   const { mode } = useViewManager()
   const [showContent, setShowContent] = useState(false)
-  const [activePendingIndex, setActivePendingIndex] = useState(-1)
   const [showDots, setShowDots] = useState(false)
   const [showLine, setShowLine] = useState(false)
   const [showTimeoutWarning, setShowTimeoutWarning] = useState(false)
@@ -129,25 +131,28 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
     null,
   )
   const isOFT = isOFTRoute(quote?.routeProviders)
-  const isMainnetOrigin = quote?.originChain?.id === ETHEREUM_MAINNET_CHAIN_ID
+  const isMainnetOrigin = quote?.originChain?.id === mainnet.id
 
   const showContinueButton =
     hasAnyFailedOrAbortedTransactions(transactionStates) && onContinue
 
   // Timeout warning: OFT routes can take significantly longer than standard routes.
   useEffect(() => {
-    const timeoutMs = isOFT
-      ? OFT_TIMEOUT_MS
-      : isMainnetOrigin
-        ? MAINNET_TIMEOUT_MS
-        : DEFAULT_TIMEOUT_MS
+    const timeoutMs =
+      fundMethod === "onramp-mesh"
+        ? MESH_ONRAMP_TIMEOUT_MS
+        : isOFT
+          ? OFT_TIMEOUT_MS
+          : isMainnetOrigin
+            ? MAINNET_TIMEOUT_MS
+            : DEFAULT_TIMEOUT_MS
 
     const timeoutTimer = setTimeout(() => {
       setShowTimeoutWarning(true)
     }, timeoutMs)
 
     return () => clearTimeout(timeoutTimer)
-  }, [isOFT, isMainnetOrigin])
+  }, [fundMethod, isMainnetOrigin, isOFT])
   useEffect(() => {
     const depositConfirmed = transactionStates?.[0]?.state === "confirmed"
 
@@ -182,14 +187,15 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
     }
   }, [])
 
+  const [activePendingIndex, setActivePendingIndex] = useState(-1)
+
   useEffect(() => {
-    // Update active pending index with animation
     const newActiveIndex = transactionStates.findIndex(
       (tx) => tx.state === "pending",
     )
+
     if (newActiveIndex !== activePendingIndex) {
       setActivePendingIndex(newActiveIndex)
-      // Reset timer when active pending item changes
       setActivePendingTimer(0)
     }
   }, [transactionStates, activePendingIndex])

package/src/widget/components/WaasFeeOptions.tsx

@@ -155,7 +155,10 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
     useState<string>()
   const [isExpanded, setIsExpanded] = useState(false)
   const [isProcessing, setIsProcessing] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
+  const isLoading =
+    !!pendingFeeOptionConfirmation &&
+    (!pendingFeeOptionConfirmation.options ||
+      pendingFeeOptionConfirmation.options.length === 0)
 
   const originTokenAddress = useMemo(
     () => originToken?.contractAddress?.toLowerCase() || null,
@@ -261,47 +264,6 @@ export const WaasFeeOptions: React.FC<WaasFeeOptionsProps> = ({
     }
   }, [])
 
-  // Debug logging
-  useEffect(() => {
-    logger.console.log(
-      "[trails-sdk] WaasFeeOptions component mounted/updated:",
-      {
-        chainId,
-        pendingFeeOptionConfirmation: !!pendingFeeOptionConfirmation,
-        optionsCount: pendingFeeOptionConfirmation?.options?.length || 0,
-        hasOptions: !!pendingFeeOptionConfirmation?.options,
-        confirmationId: pendingFeeOptionConfirmation?.id,
-        isLoading,
-        isProcessing,
-      },
-    )
-  }, [chainId, pendingFeeOptionConfirmation, isLoading, isProcessing])
-
-  // Log when component renders but has no pending confirmation
-  useEffect(() => {
-    if (!pendingFeeOptionConfirmation) {
-      logger.console.log(
-        "[trails-sdk] WaasFeeOptions: No pending fee confirmation - this is normal until a transaction requires fee payment",
-      )
-    }
-  }, [pendingFeeOptionConfirmation])
-
-  // Manage loading state
-  useEffect(() => {
-    if (
-      pendingFeeOptionConfirmation &&
-      pendingFeeOptionConfirmation.options?.length > 0
-    ) {
-      setIsLoading(false)
-    } else if (
-      pendingFeeOptionConfirmation &&
-      (!pendingFeeOptionConfirmation.options ||
-        pendingFeeOptionConfirmation.options.length === 0)
-    ) {
-      setIsLoading(true)
-    }
-  }, [pendingFeeOptionConfirmation])
-
   // Initialize with first option when fee options become available
   useEffect(() => {
     if (pendingFeeOptionConfirmation) {

package/src/widget/components/WalletConnect.tsx

@@ -1,12 +1,9 @@
+import { getWalletIcon, getWalletName } from "@0xtrails/wallet-registry"
 import { type FC, useEffect, useMemo, useState } from "react"
 import { useAccount, useConnect, useDisconnect } from "wagmi"
 import { logger } from "../../logger.js"
 import { isWalletConnectConnector as checkIsWalletConnectConnector } from "../../walletUtils.js"
-import {
-  getWalletIcon,
-  getWalletName,
-  useWalletConfigs,
-} from "../../wallets.js"
+import { useWalletConfigs } from "../../wallets.js"
 import { useConnector } from "../hooks/useConnector.js"
 import { useIsMobile } from "../hooks/useIsMobile.js"
 import { useWalletConnectUri } from "../hooks/useWalletConnectUri.js"

package/src/widget/components/WalletImage.tsx

@@ -1,6 +1,9 @@
+import {
+  getWalletIcon,
+  wagmiConnectorToWalletId,
+} from "@0xtrails/wallet-registry"
 import type React from "react"
 import { useAccount } from "wagmi"
-import { getWalletIcon, wagmiConnectorToWalletId } from "../../wallets.js"
 import { Wallet } from "lucide-react"
 
 interface WalletImageProps {
@@ -14,7 +17,7 @@ export const WalletImage: React.FC<WalletImageProps> = ({ size, walletId }) => {
   // Use provided walletId or derive from current connector
   const currentWalletId =
     walletId || (connector ? wagmiConnectorToWalletId(connector) : null)
-  const walletIcon = currentWalletId ? getWalletIcon(currentWalletId) : null
+  const walletIcon = currentWalletId ? getWalletIcon(currentWalletId) : ""
 
   // If no icon found, show default wallet icon
   if (!walletIcon) {
@@ -26,25 +29,10 @@ export const WalletImage: React.FC<WalletImageProps> = ({ size, walletId }) => {
     )
   }
 
-  // Handle React component icons (like WalletIcon from lucide-react)
-  if (typeof walletIcon === "function") {
-    const IconComponent = walletIcon as React.ComponentType<{
-      className?: string
-      style?: React.CSSProperties
-    }>
-    return (
-      <IconComponent
-        className="text-gray-500 dark:text-gray-400"
-        style={{ width: size, height: size }}
-      />
-    )
-  }
-
-  // Handle string URLs/data URIs
   return (
     <div className="relative inline-block">
       <img
-        src={walletIcon as string}
+        src={walletIcon}
         alt={`${currentWalletId} wallet`}
         style={{ width: size, height: size }}
         onError={(e) => {

package/src/widget/components/WalletList.tsx

@@ -1,8 +1,8 @@
 import { ChevronRight, Search, Wallet } from "lucide-react"
+import { topShownWallets } from "@0xtrails/wallet-registry"
 import type React from "react"
 import { useMemo, useState } from "react"
 import type { WalletConfig } from "../../wallets.js"
-import { topShownWallets } from "../../wallets.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 
 export interface WalletListProps {

package/src/widget/components/Withdraw.tsx

@@ -19,9 +19,9 @@ import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToke
 import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.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 } from "../types/commonProps.js"
 import { isWithinCooldown, SECOND_MS } from "../../utils/time.js"
 import { forexRateStore } from "../utils/forexRateStore.js"
@@ -97,7 +97,7 @@ const Withdraw: React.FC<WithdrawProps> = ({
   const {
     token: freshOriginToken,
     isLoadingBalance: isLoadingFreshOriginBalance,
-  } = useTokenWithFreshBalance(originToken, account?.address)
+  } = useAccountTokenBalanceOnchain(originToken, account?.address)
 
   const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
   const prevToRecipientRef = useRef<string | undefined>(toRecipient)
@@ -126,6 +126,7 @@ const Withdraw: React.FC<WithdrawProps> = ({
     setSellAmount,
     buyAmount,
     setBuyAmount,
+    resetSwapState,
     enterFormMode,
   } = useSwapState()
 
@@ -181,6 +182,23 @@ const Withdraw: React.FC<WithdrawProps> = ({
   const [_isUserTyping, setIsUserTyping] = useState(false)
   const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
+  useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  const handleCompleteAndClearAmounts = useCallback(
+    (result: OnCompleteProps) => {
+      setInputDisplayValue("")
+      resetSwapState()
+      onComplete(result)
+    },
+    [onComplete, resetSwapState],
+  )
+
   const {
     amount,
     amountRaw,
@@ -194,7 +212,6 @@ const Withdraw: React.FC<WithdrawProps> = ({
     isSubmitting,
     isLoadingQuote,
     selectedDestToken,
-    setAmount,
     setSelectedDestinationChain,
     setSelectedDestToken,
     buttonText,
@@ -220,7 +237,7 @@ const Withdraw: React.FC<WithdrawProps> = ({
     paymasterUrls,
     onSend,
     onConfirm,
-    onComplete,
+    onComplete: handleCompleteAndClearAmounts,
     selectedToken: originToken ?? undefined,
     setWalletConfirmRetryHandler,
     tradeType: tradeType,
@@ -236,15 +253,6 @@ const Withdraw: React.FC<WithdrawProps> = ({
   // Get the token price for USD conversions
   const tokenPriceUsd = sourceTokenPrices?.[0]?.priceUsd || 0
 
-  // Update amount based on last input type
-  useEffect(() => {
-    if (tradeType === TradeType.EXACT_INPUT) {
-      setAmount(sellAmount)
-    } else {
-      setAmount(buyAmount)
-    }
-  }, [sellAmount, buyAmount, tradeType, setAmount])
-
   // Handle sell amount input changes
   const handleSellAmountChange = useCallback(
     (value: string) => {
@@ -446,15 +454,6 @@ const Withdraw: React.FC<WithdrawProps> = ({
     setHasManualDestinationSelection,
   ])
 
-  useEffect(() => {
-    if (selectedDestToken?.chainId) {
-      const chainInfo = getChainInfo(selectedDestToken.chainId)
-      if (chainInfo) {
-        setSelectedDestinationChain(chainInfo)
-      }
-    }
-  }, [selectedDestToken, setSelectedDestinationChain])
-
   // Sync destination token from hook with useSendForm
   useEffect(() => {
     if (destinationToken) {

package/src/widget/hooks/useAddressWalletIcon.ts

@@ -1,7 +1,8 @@
 import { useMemo } from "react"
-import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
+import { wagmiConnectorToWalletId } from "@0xtrails/wallet-registry"
 import { type Connector, useConnections } from "wagmi"
 import type { Address } from "viem"
+import { useWallets } from "../../wallets.js"
 
 /**
  * Hook to get the wallet icon for an connected address

package/src/widget/hooks/useAmountUsd.ts

@@ -1,4 +1,4 @@
-import { useTokenPrice } from "../../prices.js"
+import { useTokenPrice } from "../../query/price.hooks.js"
 import {
   formatUsdAmountDisplay,
   formatUsdAmountLocaleDisplay,

package/src/widget/hooks/useCombinedHistory.ts

@@ -5,23 +5,16 @@ import type { MeldTransactionData } from "./useMeldTransactionHistory.js"
 import { useIntentTransactionHistory } from "./useIntentTransactionHistory.js"
 import { useMeldTransactionHistory } from "./useMeldTransactionHistory.js"
 import { logger } from "../../logger.js"
+import {
+  matchesIntentHistoryFilter,
+  type HistoryFilterType,
+} from "../utils/historyFilters.js"
 
 // Combined history item type - discriminated union
 export type CombinedHistoryItem =
   | { type: "intent"; data: IntentTransaction; timestamp: string }
   | { type: "onramp"; data: MeldTransactionData; timestamp: string }
 
-// Filter types for history
-export type HistoryFilterType =
-  | "all"
-  | "pending"
-  | "succeeded"
-  | "failed"
-  | "aborted"
-  | "mining"
-  | "committed"
-  | "onramp"
-
 // Combined history state
 export interface CombinedHistoryState {
   items: CombinedHistoryItem[]
@@ -44,13 +37,14 @@ export interface UseCombinedHistoryParams {
   enabled?: boolean
   autoRefetch?: boolean
   refetchInterval?: number
+  intentStatuses?: string[]
 }
 
 // Hook return type
 export interface UseCombinedHistoryReturn extends CombinedHistoryState {
-  refetch: () => void
-  refetchIntent: () => void
-  refetchOnramp: () => void
+  refetch: () => Promise<void>
+  refetchIntent: () => Promise<void>
+  refetchOnramp: () => Promise<void>
   loadMoreIntent: () => void
   nextPageIntent: () => void
   prevPageIntent: () => void
@@ -167,6 +161,7 @@ export function useCombinedHistory({
   enabled = true,
   autoRefetch = false,
   refetchInterval = 10 * SECOND_MS,
+  intentStatuses,
 }: UseCombinedHistoryParams = {}): UseCombinedHistoryReturn {
   // Fetch intent history
   const {
@@ -185,6 +180,7 @@ export function useCombinedHistory({
     accountAddress,
     pageSize: intentPageSize,
     enabled: enabled && !!accountAddress,
+    intentStatuses,
   })
 
   // Fetch onramp history
@@ -263,10 +259,9 @@ export function useCombinedHistory({
   }, [intentTransactions, onrampTransactions, intentPageSize])
 
   // Combined refetch
-  const refetch = useCallback(() => {
+  const refetch = useCallback(async () => {
     logger.console.log("[useCombinedHistory] Refetching both histories")
-    refetchIntent()
-    refetchOnramp()
+    await Promise.all([refetchIntent(), refetchOnramp()])
   }, [refetchIntent, refetchOnramp])
 
   // Search function
@@ -311,91 +306,40 @@ export function useCombinedHistory({
           return combinedItems
 
         case "onramp":
-          return combinedItems.filter((item) => item.type === "onramp")
-
-        case "pending":
-          return combinedItems.filter((item) => {
-            if (item.type === "intent") {
-              const status = item.data.executionStatus?.toUpperCase()
-              return (
-                status === "PENDING" ||
-                status === "CREATED" ||
-                status === "EXECUTING" ||
-                status === "MINING" ||
-                status === "QUOTED"
-                // Removed COMMITTED - it should only show in the committed filter
-              )
-            } else {
-              const status = item.data.status
-              return status === "PENDING" || status === "PROCESSING"
-            }
-          })
-
+          return [...onrampTransactions]
+            .map((onramp) => ({
+              type: "onramp" as const,
+              data: onramp,
+              timestamp:
+                onramp.createdAt ||
+                onramp.updatedAt ||
+                new Date().toISOString(),
+            }))
+            .sort((a, b) => {
+              const timeA = new Date(a.timestamp).getTime()
+              const timeB = new Date(b.timestamp).getTime()
+              return timeB - timeA
+            })
+
+        case "executing":
         case "succeeded":
-          return combinedItems.filter((item) => {
-            if (item.type === "intent") {
-              return item.data.executionStatus?.toUpperCase() === "SUCCEEDED"
-            } else {
-              return (
-                item.data.status === "COMPLETED" ||
-                item.data.status === "SETTLED"
-              )
-            }
-          })
-
         case "failed":
-          return combinedItems.filter((item) => {
-            if (item.type === "intent") {
-              const status = item.data.executionStatus?.toUpperCase()
-              return (
-                status === "FAILED" ||
-                status === "REFUNDED" ||
-                status === "ERRORED"
-              )
-            } else {
-              const status = item.data.status
-              return (
-                status === "FAILED" ||
-                status === "DECLINED" ||
-                status === "CANCELLED" ||
-                status === "ERROR" ||
-                status === "REFUNDED"
-              )
-            }
-          })
-
         case "aborted":
-          return combinedItems.filter((item) => {
-            if (item.type === "intent") {
-              const status = item.data.executionStatus?.toUpperCase()
-              return status === "ABORTED"
-            }
-            return false // Onramp transactions don't have aborted status
-          })
-
-        case "mining":
-          return combinedItems.filter((item) => {
-            if (item.type === "intent") {
-              const status = item.data.executionStatus?.toUpperCase()
-              return status === "MINING"
-            }
-            return false // Onramp transactions don't have mining status
-          })
-
+        case "refunded":
+        case "invalid":
         case "committed":
-          return combinedItems.filter((item) => {
-            if (item.type === "intent") {
-              const status = item.data.executionStatus?.toUpperCase()
-              return status === "COMMITTED"
-            }
-            return false // Onramp transactions don't have committed status
-          })
+        case "quoted":
+          return combinedItems.filter(
+            (item) =>
+              item.type === "intent" &&
+              matchesIntentHistoryFilter(item.data, filter),
+          )
 
         default:
           return combinedItems
       }
     },
-    [combinedItems],
+    [combinedItems, onrampTransactions],
   )
 
   // Combined filter and search