0xtrails 0.12.2 → 0.13.0

package/src/widget/components/FundingMethodSelectorButton.tsx

@@ -2,11 +2,11 @@ import { ChevronRight, Send, ZapIcon } from "lucide-react"
 import type React from "react"
 import { useAccount, useConnections } from "wagmi"
 import { truncateAddress } from "../../utils/address.js"
-import { useBack } from "../hooks/useBack.js"
+import { useViewManager } from "../hooks/useViewManager.js"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 import { AddressWalletIcon } from "./AddressWalletIcon.js"
 import { useResolveEns } from "../../ens.js"
-import type { Screen } from "../hooks/useCurrentScreen.js"
+import type { Screen } from "../hooks/useViewManager.js"
 
 export const FundingMethodSelectorButton: React.FC<{
   showWalletConnectorIcon?: boolean
@@ -20,9 +20,8 @@ export const FundingMethodSelectorButton: React.FC<{
 }) => {
   const connections = useConnections()
   const { address } = useAccount()
-  const { setCurrentScreenWithBack } = useBack()
-  const { selectedFundMethod, isOnRamp, paymentMethod } =
-    useSelectedFundMethod()
+  const { navigate } = useViewManager()
+  const { selectedFundMethod, paymentMethod } = useSelectedFundMethod()
 
   // Check if there are any connected accounts across all connectors
   const isConnected = connections.length > 0
@@ -36,10 +35,10 @@ export const FundingMethodSelectorButton: React.FC<{
   const handleClick = () => {
     if (isConnected && activeAddress) {
       // If wallet is connected, go to fund methods
-      setCurrentScreenWithBack(sendToScreen.screen, sendToScreen.backScreen)
+      navigate(sendToScreen.screen, { backTarget: sendToScreen.backScreen })
     } else {
       // If no wallet connected, go to connect wallet
-      setCurrentScreenWithBack("connect")
+      navigate("connect")
     }
   }
 
@@ -58,15 +57,17 @@ export const FundingMethodSelectorButton: React.FC<{
         selectedFundMethod === "direct-transfer" ? (
           <>
             <ZapIcon className="w-4 h-4 mr-1" />
-            <span className="text-sm font-medium m-0">Direct Transfer</span>
+            <span className="text-sm font-medium m-0">Crypto Transfer</span>
           </>
         ) : selectedFundMethod === "onramp-mesh" ? (
           <>
             <Send className="w-4 h-4 mr-1" />
             <span className="text-sm font-medium m-0">Exchange</span>
           </>
-        ) : selectedFundMethod === "onramp-meld" && isOnRamp ? (
-          <span className="text-sm font-medium m-0">{paymentMethod.name}</span>
+        ) : selectedFundMethod === "onramp-meld" ? (
+          <span className="text-sm font-medium m-0">
+            {paymentMethod.name || "Onramp"}
+          </span>
         ) : hasEns ? (
           <>
             <div className="flex items-center mr-1">

package/src/widget/components/MeldStepsFlow.tsx

@@ -13,8 +13,10 @@ import type { Country, MeldQuote, MeldToken } from "../../meld/utils/meld.js"
 import { getMeldOnrampClient } from "../../meld/utils/meld.js"
 import { normalizeAddress, truncateAddress } from "../../utils/address.js"
 import { MINUTE_MS, SECOND_MS } from "../../utils/time.js"
-import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
+import { useViewManager } from "../hooks/useViewManager.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"
@@ -36,33 +38,12 @@ 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
 }
@@ -70,6 +51,9 @@ interface AmountInputScreenProps {
 const AmountInputScreen: React.FC<AmountInputScreenProps> = ({
   onBack,
   onContinue,
+  _selectedCountry,
+  _selectedToken,
+  _selectedPaymentMethod,
   initialAmount = "",
   initialCurrency = "USD",
 }) => {
@@ -178,7 +162,12 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
   onBack: _onBack,
 }) => {
   const trailsConfig = useTrails()
-  const { setCurrentScreen: setGlobalScreen } = useCurrentScreen()
+  const { navigate: setGlobalScreen, goHome } = useViewManager()
+  const { setSelectedToken: setOriginToken } = useOriginSelectedToken()
+  const { filteredTokens } = useTokenList({
+    onContinue: () => {},
+    onError: () => {},
+  })
   const { address: walletAddress } = useAccount()
 
   // Create OnrampClient using trails API key from config
@@ -201,7 +190,12 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
 
   // Load from local storage on mount
   const [selectedCountry, setSelectedCountry] = useState<Country | null>(() => {
-    return parseStoredCountry(localStorage.getItem("meld-debug-country"))
+    try {
+      const saved = localStorage.getItem("meld-debug-country")
+      return saved ? JSON.parse(saved) : null
+    } catch {
+      return null
+    }
   })
 
   const [selectedPaymentMethod, setSelectedPaymentMethod] =
@@ -247,8 +241,6 @@ 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)
 
@@ -686,7 +678,7 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
         "[MeldStepsFlow] No transaction ID found in URL parameters",
       )
     }
-  }, [trailsClient.searchMeldTransactions])
+  }, [trailsClient])
 
   // Function to check transaction status
   const checkTransactionStatus = useCallback(
@@ -949,6 +941,9 @@ 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.countryCode,
         destinationCurrencyCode: selectedToken.code,
@@ -1065,6 +1060,42 @@ 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)
+      goHome()
+    }
+  }, [selectedToken, filteredTokens, setOriginToken, goHome])
+
   // Poll transaction status when we have a pending transaction
   useEffect(() => {
     logger.console.log("[MeldStepsFlow] Polling useEffect triggered:", {
@@ -1347,6 +1378,9 @@ export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
           setCurrentScreen("menu")
         }}
         onContinue={handleAmountContinue}
+        _selectedCountry={selectedCountry}
+        _selectedToken={selectedToken}
+        _selectedPaymentMethod={selectedPaymentMethod}
         initialAmount={selectedAmount}
         initialCurrency={selectedCurrency}
       />

package/src/widget/components/OnrampErrorScreen.tsx

@@ -2,7 +2,6 @@ import { AlertCircle, RefreshCw } from "lucide-react"
 import type React from "react"
 import { useEffect, useState } from "react"
 import { ScreenHeader } from "./ScreenHeader.js"
-import { removeStoredIntent } from "../../intentStorage.js"
 
 interface OnrampErrorScreenProps {
   onTryAgain?: () => void
@@ -20,7 +19,6 @@ export const OnrampErrorScreen: React.FC<OnrampErrorScreenProps> = ({
   onTryAgain,
   onBack,
   onRetry,
-  intentId,
   title,
   message,
   showAnimation = true,
@@ -83,15 +81,7 @@ export const OnrampErrorScreen: React.FC<OnrampErrorScreenProps> = ({
 
   return (
     <div className="space-y-6">
-      <ScreenHeader
-        onBack={() => {
-          if (intentId) {
-            removeStoredIntent(intentId)
-          }
-          onBack?.()
-        }}
-        headerContent={errorTitle}
-      />
+      <ScreenHeader onBack={onBack} headerContent={errorTitle} />
 
       <div className="flex flex-col items-center justify-center min-h-[400px] space-y-6 px-4">
         {/* Error Icon */}
@@ -158,13 +148,7 @@ export const OnrampErrorScreen: React.FC<OnrampErrorScreenProps> = ({
           {onBack && (
             <button
               type="button"
-              onClick={() => {
-                // Remove the commited intent from pending intents, user cancelled
-                if (intentId) {
-                  removeStoredIntent(intentId)
-                }
-                onBack()
-              }}
+              onClick={onBack}
               className="flex-1 px-6 py-3 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg transition-colors cursor-pointer"
             >
               Cancel

package/src/widget/components/OnrampPaymentMethods.tsx

@@ -1,7 +1,7 @@
 import type React from "react"
 import { ChevronRight } from "lucide-react"
 import { ScreenHeader } from "./ScreenHeader.js"
-import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
+import { useViewManager } from "../hooks/useViewManager.js"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 import {
   type PaymentMethod,
@@ -16,10 +16,9 @@ export interface OnrampPaymentMethodsProps {
 const OnrampPaymentMethods: React.FC<OnrampPaymentMethodsProps> = ({
   onBack,
 }) => {
-  const { setCurrentScreen } = useCurrentScreen()
+  const { navigate } = useViewManager()
   const { isDark } = useTheme()
-  const { setSelectedFundMethod, setIsMeldOnRamp, setPaymentMethod } =
-    useSelectedFundMethod()
+  const { setSelectedFundMethod, setPaymentMethod } = useSelectedFundMethod()
 
   const { paymentMethods, isLoading, error } = useOnRampPaymentMethods({
     enabled: true,
@@ -51,12 +50,11 @@ const OnrampPaymentMethods: React.FC<OnrampPaymentMethodsProps> = ({
                 type="button"
                 onClick={() => {
                   setSelectedFundMethod("onramp-meld")
-                  setIsMeldOnRamp(true)
                   setPaymentMethod({
                     id: method.paymentMethod,
                     name: method.name,
                   })
-                  setCurrentScreen("fund-form")
+                  navigate("fund-form")
                 }}
                 className="w-full text-left px-4 py-3 flex items-center justify-between cursor-pointer transition-colors trails-hover-bg rounded-xl"
               >

package/src/widget/components/OnrampProviderConfirmation.tsx

@@ -1,7 +1,8 @@
 import { ChevronLeft } from "lucide-react"
 import type React from "react"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { useAccount } from "wagmi"
+import { trackOnrampPaymentCompleted } from "../../analytics.js"
 import { logger } from "../../logger.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { truncateAddress } from "../../utils/address.js"
@@ -15,7 +16,6 @@ import { QuoteDetails } from "./QuoteDetails.js"
 import { SessionTimeoutScreen } from "./SessionTimeoutScreen.js"
 import { TokenImage } from "./TokenImage.js"
 import { TruncatedTransactionHash } from "./TruncatedTransactionHash.js"
-import { removeStoredIntent } from "../../intentStorage.js"
 
 // Helper to build tooltip text
 const buildTooltipText = (quote?: PrepareSendQuote | null): string => {
@@ -127,14 +127,6 @@ interface OnrampProviderConfirmationProps {
     params: WidgetCreationParams,
   ) => Promise<{ widgetUrl: string; id: string }>
   externalSessionId?: string | null // For monitoring transaction status
-  sendFn?:
-    | ((options?: {
-        selectedFeeOption?: any | null
-        onOriginSend?: () => void
-        depositTransactionHash?: string // Added for onramp-meld to provide deposit hash
-        skipCommit?: boolean
-      }) => Promise<any>)
-    | null // The send function from prepareSend
   popupWindowRef?: Window | null
 }
 
@@ -149,7 +141,6 @@ export const OnrampProviderConfirmation: React.FC<
   widgetCreationParams,
   onCreateWidgetSession,
   externalSessionId,
-  sendFn,
   popupWindowRef,
 }) => {
   const [showContent, setShowContent] = useState(false)
@@ -159,6 +150,7 @@ export const OnrampProviderConfirmation: React.FC<
   const [hasExecutedWithDeposit, setHasExecutedWithDeposit] = useState(false)
   const [isCountingUp, setIsCountingUp] = useState(false) // Track if we're counting up
   const [timeElapsed, setTimeElapsed] = useState(0) // Time elapsed when counting up
+  const trackedOnrampCompletionKey = useRef<string | null>(null)
   const { address } = useAccount()
 
   // Check if this is a direct deposit flow (recipient is the deposit address)
@@ -197,18 +189,19 @@ export const OnrampProviderConfirmation: React.FC<
   }, [popupWindowRef, setWindowRef])
 
   // Monitor deposits at the origin intent address (only for intent-based flows)
+  const isIntentDepositMonitoringEnabled =
+    !!quote?.originDepositAddress && !isDirectDeposit
+
   const {
     hasSufficientDeposit: intentHasSufficientDeposit,
-    isMonitoring: intentIsMonitoringDeposits,
     depositBalanceFormatted: intentDepositBalanceFormatted,
     percentageComplete: intentPercentageComplete,
-    lastTransactionHash: intentLastTransactionHash,
   } = useDepositMonitor({
     chainId: quote?.originChain?.id,
     depositAddress: quote?.originDepositAddress,
     tokenAddress: quote?.originToken?.contractAddress,
     requiredAmount: quote?.originAmount,
-    enabled: !!quote?.originDepositAddress && !isDirectDeposit, // Only monitor for intent-based flows
+    enabled: isIntentDepositMonitoringEnabled, // Only monitor for intent-based flows
   })
 
   // Use the appropriate monitoring data based on flow type
@@ -217,7 +210,7 @@ export const OnrampProviderConfirmation: React.FC<
     : intentHasSufficientDeposit
   const isMonitoringDeposits = isDirectDeposit
     ? !!externalSessionId
-    : intentIsMonitoringDeposits
+    : isIntentDepositMonitoringEnabled
   const depositBalanceFormatted = isDirectDeposit
     ? meldSettledAmount || "0"
     : intentDepositBalanceFormatted
@@ -226,9 +219,7 @@ export const OnrampProviderConfirmation: React.FC<
       ? 100
       : 0
     : intentPercentageComplete
-  const lastTransactionHash = isDirectDeposit
-    ? meldTransactionHash
-    : intentLastTransactionHash
+  const lastTransactionHash = isDirectDeposit ? meldTransactionHash : null
 
   const isPopupClosedDuringFlow =
     (windowClosed || meldStatusState === "window-closed") &&
@@ -260,6 +251,68 @@ export const OnrampProviderConfirmation: React.FC<
     meldSettledAmount,
   ])
 
+  useEffect(() => {
+    const completionKey = externalSessionId || quote?.intentId || "unknown"
+    if (
+      !isMeldSuccess ||
+      trackedOnrampCompletionKey.current === completionKey
+    ) {
+      return
+    }
+
+    trackedOnrampCompletionKey.current = completionKey
+
+    trackOnrampPaymentCompleted({
+      fundMethod: "onramp-meld",
+      userAddress: address,
+      intentId: quote?.intentId || undefined,
+      intentAddress: quote?.originDepositAddress,
+      externalSessionId: externalSessionId || undefined,
+      transactionId: transaction?.id,
+      transactionHash: meldTransactionHash || transaction?.transactionHash,
+      status: transaction?.status || "COMPLETED",
+      provider: transaction?.serviceProvider || onRampQuote?.serviceProvider,
+      sourceAmount:
+        transaction?.sourceAmount ?? onRampQuote?.sourceAmount?.toString(),
+      sourceCurrencyCode:
+        transaction?.sourceCurrencyCode || onRampQuote?.sourceCurrencyCode,
+      destinationAmount:
+        meldSettledAmount ||
+        transaction?.destinationAmount ||
+        onRampQuote?.destinationAmount?.toString(),
+      destinationCurrencyCode:
+        transaction?.destinationCurrencyCode ||
+        onRampQuote?.destinationCurrencyCode,
+      countryCode: onRampQuote?.countryCode,
+      paymentMethodType: onRampQuote?.paymentMethodType,
+      paymentMethod: transaction?.paymentMethod,
+    })
+  }, [
+    isMeldSuccess,
+    address,
+    quote?.intentId,
+    quote?.originDepositAddress,
+    onRampQuote?.serviceProvider,
+    onRampQuote?.sourceAmount,
+    onRampQuote?.sourceCurrencyCode,
+    onRampQuote?.destinationAmount,
+    onRampQuote?.destinationCurrencyCode,
+    onRampQuote?.countryCode,
+    onRampQuote?.paymentMethodType,
+    externalSessionId,
+    transaction?.id,
+    transaction?.transactionHash,
+    transaction?.status,
+    transaction?.serviceProvider,
+    transaction?.sourceAmount,
+    transaction?.sourceCurrencyCode,
+    transaction?.destinationAmount,
+    transaction?.destinationCurrencyCode,
+    transaction?.paymentMethod,
+    meldTransactionHash,
+    meldSettledAmount,
+  ])
+
   // Monitor transaction status for errors and SETTLING state
   useEffect(() => {
     if (isPopupClosedDuringFlow) {
@@ -287,98 +340,31 @@ export const OnrampProviderConfirmation: React.FC<
     setShowContent(true)
   }, [])
 
-  // Call sendFn with the deposit transaction hash when deposit is detected
+  // Onramp flows commit and execute before this screen is shown.
+  // Deposit monitoring here is UI-only; do not re-enter sendFn with a
+  // client-detected deposit hash.
   useEffect(() => {
-    const handleDepositDetected = async () => {
-      // For direct deposits, we don't need to call sendFn (funds go directly to recipient)
-      if (isDirectDeposit) {
-        if (hasSufficientDeposit && onIntentExecuted) {
-          logger.console.log(
-            "[OnrampProviderConfirmation] Direct deposit completed, funds sent to recipient",
-            {
-              transactionHash: lastTransactionHash,
-              amount: depositBalanceFormatted,
-            },
-          )
-        }
-      }
+    if (!hasSufficientDeposit || hasExecutedWithDeposit) {
+      return
+    }
 
-      logger.console.log(
-        "[OnrampProviderConfirmation] Checking conditions to call sendFn:",
-        {
-          hasSendFn: !!sendFn,
-          hasIntentId: !!quote?.intentId,
-          intentId: quote?.intentId,
-          hasLastTransactionHash: !!lastTransactionHash,
-          lastTransactionHash,
-          hasSufficientDeposit,
-          hasExecutedWithDeposit,
-          isDirectDeposit,
-          shouldExecute: !!(
-            sendFn &&
-            quote?.intentId &&
-            lastTransactionHash &&
-            hasSufficientDeposit &&
-            !hasExecutedWithDeposit
-          ),
-        },
-      )
+    logger.console.log(
+      "[OnrampProviderConfirmation] Deposit detected after commit/execute",
+      {
+        intentId: quote?.intentId,
+        transactionHash: lastTransactionHash,
+        amount: depositBalanceFormatted,
+        isDirectDeposit,
+      },
+    )
 
-      // Only call send once we have a deposit transaction hash (for intent-based flows)
-      if (
-        sendFn &&
-        (quote?.intentId || isDirectDeposit) &&
-        lastTransactionHash &&
-        hasSufficientDeposit &&
-        !hasExecutedWithDeposit
-      ) {
-        logger.console.log(
-          "[OnrampProviderConfirmation] Calling sendFn with deposit transaction hash",
-          {
-            intentId: quote.intentId,
-            depositTransactionHash: lastTransactionHash,
-            hasQuote: !!quote,
-            hasSendFn: !!sendFn,
-            originDepositAddress: quote.originDepositAddress,
-          },
-        )
-
-        setHasExecutedWithDeposit(true) // Prevent multiple calls
-
-        try {
-          // Call send with the deposit transaction hash
-          // This will skip the wallet deposit and use the provided hash
-          await sendFn({
-            depositTransactionHash: lastTransactionHash,
-            skipCommit: true,
-            onOriginSend: () => {
-              logger.console.log(
-                "[OnrampProviderConfirmation] Origin send callback triggered",
-              )
-              // Navigate to pending screen when intent is executed
-              if (onIntentExecuted) {
-                onIntentExecuted()
-              }
-            },
-          })
-
-          logger.console.log(
-            "[OnrampProviderConfirmation] Successfully called sendFn with deposit hash",
-          )
-        } catch (error) {
-          logger.console.error(
-            "[OnrampProviderConfirmation] Error calling sendFn:",
-            error,
-          )
-          // Don't reset hasSentTransaction on error to prevent infinite retries
-        }
-      }
-    }
+    setHasExecutedWithDeposit(true)
 
-    handleDepositDetected()
+    if (onIntentExecuted) {
+      onIntentExecuted()
+    }
   }, [
     quote,
-    sendFn,
     hasExecutedWithDeposit,
     lastTransactionHash,
     hasSufficientDeposit,
@@ -956,12 +942,7 @@ export const OnrampProviderConfirmation: React.FC<
       <div className="flex items-center relative">
         <button
           type="button"
-          onClick={() => {
-            if (quote?.intentId) {
-              removeStoredIntent(quote.intentId)
-            }
-            onBack?.()
-          }}
+          onClick={onBack}
           className="absolute left-0 top-0 p-2 rounded-full transition-colors cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 hover:trails-hover-bg text-gray-600 dark:text-gray-400"
         >
           <ChevronLeft className="h-6 w-6" />

package/src/widget/components/OriginTransferInformation.tsx

@@ -1,7 +1,7 @@
 import type React from "react"
 import { TokenImage } from "./TokenImage.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
-import { timeAgo } from "../../utils/time.js"
+import { formatDuration, timeAgo } from "../../utils/time.js"
 
 interface OriginTransferInformationProps {
   quote: PrepareSendQuote
@@ -37,7 +37,7 @@ export const OriginTransferInformation: React.FC<
                   className="ml-1 font-mono animate-pulse text-gray-500 dark:text-gray-400"
                   title="Elapsed time"
                 >
-                  {elapsedSeconds}s
+                  {formatDuration(elapsedSeconds)}
                 </span>
               </span>
             </div>