0xtrails 0.13.2 → 0.15.0

package/src/widget/components/OnrampProviderConfirmation.tsx

@@ -1,1060 +0,0 @@
-import { ChevronLeft } from "lucide-react"
-import type React 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"
-import { formatCountdown, MINUTE_S } from "../../utils/time.js"
-import { useDepositMonitor } from "../hooks/useDepositMonitor.js"
-import { useMeldTransactionStatus } from "../hooks/useMeldTransactionStatus.js"
-import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
-import { openPopup, setPopupUrl, closePopup } from "../utils/windowUtils.js"
-import { OnrampErrorScreen } from "./OnrampErrorScreen.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { SessionTimeoutScreen } from "./SessionTimeoutScreen.js"
-import { TokenImage } from "./TokenImage.js"
-import { TruncatedTransactionHash } from "./TruncatedTransactionHash.js"
-
-// Helper to build tooltip text
-const buildTooltipText = (quote?: PrepareSendQuote | null): string => {
-  if (!quote) return ""
-  const lines: string[] = []
-  if (quote.originDepositAddress) {
-    lines.push(
-      `Deposit to: ${truncateAddress(quote.originDepositAddress)} (${quote.originChain?.name || `Chain ${quote.originChain?.id}`})`,
-    )
-  }
-  if (
-    quote.destinationAddress &&
-    quote.destinationAddress !== quote.originDepositAddress
-  ) {
-    lines.push(
-      `Recipient: ${truncateAddress(quote.destinationAddress)} (${quote.destinationChain?.name || `Chain ${quote.destinationChain?.id}`})`,
-    )
-  }
-  return lines.join("\n")
-}
-
-// TokenDiagram component for displaying the token flow
-interface TokenDiagramProps {
-  onRampQuote?: OnrampQuote | null
-  quote?: PrepareSendQuote | null
-  tokenSize?: number
-  className?: string
-  textClassName?: string
-}
-
-const TokenDiagram: React.FC<TokenDiagramProps> = ({
-  onRampQuote,
-  quote,
-  tokenSize = 20,
-  className = "mt-4 text-sm text-gray-700 dark:text-gray-300 flex items-center gap-3 justify-center",
-  textClassName = "font-medium",
-}) => {
-  if (
-    !onRampQuote?.sourceCurrencyCode ||
-    !quote?.originToken ||
-    !quote?.destinationToken
-  ) {
-    return null
-  }
-
-  const tooltipText = buildTooltipText(quote)
-
-  return (
-    <div className={className} title={tooltipText}>
-      <span className={textClassName}>{onRampQuote.sourceCurrencyCode}</span>
-      <span className="text-gray-500 dark:text-gray-400">→</span>
-      <div
-        className="flex items-center gap-2 cursor-help"
-        title={
-          quote.originDepositAddress
-            ? `Deposit to: ${quote.originDepositAddress}`
-            : undefined
-        }
-      >
-        <TokenImage
-          imageUrl={quote.originToken.imageUrl}
-          symbol={quote.originToken.symbol}
-          chainId={quote.originChain?.id}
-          contractAddress={quote.originToken.contractAddress}
-          size={tokenSize}
-        />
-        <span className={textClassName}>{quote.originToken.symbol}</span>
-      </div>
-      <span className="text-gray-500 dark:text-gray-400">→</span>
-      <div
-        className="flex items-center gap-2 cursor-help"
-        title={
-          quote.destinationAddress
-            ? `Recipient: ${quote.destinationAddress}`
-            : undefined
-        }
-      >
-        <TokenImage
-          imageUrl={quote.destinationToken.imageUrl}
-          symbol={quote.destinationToken.symbol}
-          chainId={quote.destinationChain?.id}
-          contractAddress={quote.destinationToken.contractAddress}
-          size={tokenSize}
-        />
-        <span className={textClassName}>{quote.destinationToken.symbol}</span>
-      </div>
-    </div>
-  )
-}
-interface WidgetCreationParams {
-  depositAddress: string
-  userAddress: string
-  countryCode: string
-  sourceCurrencyCode: string
-  sourceAmount: string
-  destinationCurrencyCode: string
-  serviceProvider: string
-  paymentMethodType?: string
-}
-
-interface OnrampProviderConfirmationProps {
-  onBack?: () => void
-  onRetry?: () => void // For regenerating widget session
-  onIntentExecuted?: () => void // Called when intent is successfully executed
-  quote?: PrepareSendQuote | null
-  onRampQuote?: OnrampQuote | null
-  widgetCreationParams?: WidgetCreationParams | null
-  onCreateWidgetSession?: (
-    params: WidgetCreationParams,
-  ) => Promise<{ widgetUrl: string; id: string }>
-  externalSessionId?: string | null // For monitoring transaction status
-  popupWindowRef?: Window | null
-}
-
-export const OnrampProviderConfirmation: React.FC<
-  OnrampProviderConfirmationProps
-> = ({
-  onBack,
-  onRetry,
-  onIntentExecuted,
-  quote,
-  onRampQuote,
-  widgetCreationParams,
-  onCreateWidgetSession,
-  externalSessionId,
-  popupWindowRef,
-}) => {
-  const [showContent, setShowContent] = useState(false)
-  const [timeRemaining, setTimeRemaining] = useState(20 * MINUTE_S)
-  const [isTimedOut, setIsTimedOut] = useState(false)
-  const [hasTransactionError, setHasTransactionError] = useState(false)
-  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)
-  const isDirectDeposit =
-    quote?.originDepositAddress &&
-    address?.toLowerCase() === quote.originDepositAddress.toLowerCase()
-
-  // Monitor Meld transaction status
-  const {
-    transaction,
-    isLoading: isLoadingTransaction,
-    error: transactionError,
-    settledTransactionHash: meldTransactionHash,
-    settledAmount: meldSettledAmount,
-    isSuccess: isMeldSuccess,
-    windowClosed,
-    state: meldStatusState,
-    resetWindowClosed,
-    setWindowRef,
-  } = useMeldTransactionStatus({
-    externalSessionId,
-    popupOpened: true, // Enable polling since we're in the confirmation screen
-    enabled: !!externalSessionId, // Only enable if we have a session ID
-  })
-
-  useEffect(() => {
-    if (!popupWindowRef) {
-      return
-    }
-
-    setWindowRef(popupWindowRef)
-
-    return () => {
-      setWindowRef(null)
-    }
-  }, [popupWindowRef, setWindowRef])
-
-  // Monitor deposits at the origin intent address (only for intent-based flows)
-  const isIntentDepositMonitoringEnabled =
-    !!quote?.originDepositAddress && !isDirectDeposit
-
-  const {
-    hasSufficientDeposit: intentHasSufficientDeposit,
-    depositBalanceFormatted: intentDepositBalanceFormatted,
-    percentageComplete: intentPercentageComplete,
-  } = useDepositMonitor({
-    chainId: quote?.originChain?.id,
-    depositAddress: quote?.originDepositAddress,
-    tokenAddress: quote?.originToken?.contractAddress,
-    requiredAmount: quote?.originAmount,
-    enabled: isIntentDepositMonitoringEnabled, // Only monitor for intent-based flows
-  })
-
-  // Use the appropriate monitoring data based on flow type
-  const hasSufficientDeposit = isDirectDeposit
-    ? isMeldSuccess
-    : intentHasSufficientDeposit
-  const isMonitoringDeposits = isDirectDeposit
-    ? !!externalSessionId
-    : isIntentDepositMonitoringEnabled
-  const depositBalanceFormatted = isDirectDeposit
-    ? meldSettledAmount || "0"
-    : intentDepositBalanceFormatted
-  const percentageComplete = isDirectDeposit
-    ? isMeldSuccess
-      ? 100
-      : 0
-    : intentPercentageComplete
-  const lastTransactionHash = isDirectDeposit ? meldTransactionHash : null
-
-  const isPopupClosedDuringFlow =
-    (windowClosed || meldStatusState === "window-closed") &&
-    !isMeldSuccess &&
-    !hasSufficientDeposit
-
-  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) {
-      return
-    }
-
-    if (transaction?.status) {
-      const status = transaction.status.toUpperCase()
-
-      // Check for error statuses
-      const errorStatuses = ["DECLINED", "FAILED", "CANCELLED"]
-      if (errorStatuses.includes(status)) {
-        setHasTransactionError(true)
-      }
-
-      // Switch to counting up when status changes to SETTLING
-      if (status === "SETTLING" && !isCountingUp) {
-        setIsCountingUp(true)
-        setTimeElapsed(0) // Reset elapsed time to start from 0
-      }
-    }
-  }, [transaction?.status, isCountingUp, isPopupClosedDuringFlow])
-
-  useEffect(() => {
-    setShowContent(true)
-  }, [])
-
-  // 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(() => {
-    if (!hasSufficientDeposit || hasExecutedWithDeposit) {
-      return
-    }
-
-    logger.console.log(
-      "[OnrampProviderConfirmation] Deposit detected after commit/execute",
-      {
-        intentId: quote?.intentId,
-        transactionHash: lastTransactionHash,
-        amount: depositBalanceFormatted,
-        isDirectDeposit,
-      },
-    )
-
-    setHasExecutedWithDeposit(true)
-
-    if (onIntentExecuted) {
-      onIntentExecuted()
-    }
-  }, [
-    quote,
-    hasExecutedWithDeposit,
-    lastTransactionHash,
-    hasSufficientDeposit,
-    onIntentExecuted,
-    isDirectDeposit,
-    depositBalanceFormatted,
-  ])
-  // Timer - handles both countdown and count-up modes
-  useEffect(() => {
-    if (isTimedOut || isPopupClosedDuringFlow) return
-
-    const interval = setInterval(() => {
-      if (isCountingUp) {
-        // Count up mode (when status is SETTLING)
-        setTimeElapsed((prev) => prev + 1)
-      } else {
-        // Countdown mode (default)
-        setTimeRemaining((prev) => {
-          if (prev <= 1) {
-            // Time expired - show timeout screen
-            clearInterval(interval)
-            setIsTimedOut(true)
-            return 0
-          }
-          return prev - 1
-        })
-      }
-    }, 1000)
-
-    return () => clearInterval(interval)
-  }, [isTimedOut, isCountingUp, isPopupClosedDuringFlow])
-
-  const getCurrentTime = () => {
-    return isCountingUp ? timeElapsed : timeRemaining
-  }
-
-  // Handle timeout screen actions
-  const handleTryAgain = () => {
-    // Reset the timer and go back to try again (countdown mode)
-    setIsTimedOut(false)
-    setTimeRemaining(20 * MINUTE_S)
-    setIsCountingUp(false) // Reset to countdown mode
-    setTimeElapsed(0) // Reset elapsed time
-    setHasTransactionError(false)
-    setHasExecutedWithDeposit(false)
-    setShowContent(false)
-    // Give a moment for state to reset, then show content again
-    setTimeout(() => setShowContent(true), 100)
-    resetWindowClosed()
-  }
-
-  const handleTimeoutBack = () => {
-    onBack?.()
-  }
-
-  // Handle retry by regenerating widget session
-  const handleRetryWidget = async () => {
-    if (!widgetCreationParams || !onCreateWidgetSession) {
-      // Fallback to original retry behavior if no widget creation params
-      onRetry?.()
-      resetWindowClosed()
-      return
-    }
-
-    const { popup, blocked } = openPopup("onramp-widget", 400, 700)
-
-    if (blocked) {
-      logger.console.error("Popup blocked - cannot retry widget")
-      onRetry?.()
-      return
-    }
-
-    try {
-      setWindowRef(popup)
-
-      // Create a new widget session with the same parameters
-      const { widgetUrl } = await onCreateWidgetSession(widgetCreationParams)
-
-      if (!setPopupUrl(popup, widgetUrl)) {
-        closePopup(popup)
-        onRetry?.()
-        return
-      }
-
-      // Reset the timer for the new session (countdown mode)
-      setIsTimedOut(false)
-      setTimeRemaining(20 * MINUTE_S)
-      setIsCountingUp(false) // Reset to countdown mode
-      setTimeElapsed(0) // Reset elapsed time
-      setHasTransactionError(false)
-      setHasExecutedWithDeposit(false)
-      setShowContent(false)
-      // Give a moment for state to reset, then show content again
-      setTimeout(() => setShowContent(true), 100)
-      resetWindowClosed()
-    } catch (error) {
-      closePopup(popup)
-      setWindowRef(null)
-      logger.console.error("Failed to regenerate widget session:", error)
-      // Fallback to original retry behavior
-      onRetry?.()
-    }
-  }
-
-  // Render deposit monitoring status
-  const renderDepositStatus = () => {
-    if (!quote?.originDepositAddress) {
-      return null
-    }
-
-    if (!isMonitoringDeposits) {
-      return (
-        <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
-          <div className="flex items-center space-x-2">
-            <svg
-              className="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <title>Loading</title>
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              />
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-              />
-            </svg>
-            <p className="text-sm text-blue-800 dark:text-blue-200">
-              Starting deposit monitoring...
-            </p>
-          </div>
-        </div>
-      )
-    }
-
-    if (hasSufficientDeposit) {
-      return (
-        <div className="mt-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-700">
-          <div className="flex items-center space-x-2">
-            <svg
-              className="w-5 h-5 text-green-600 dark:text-green-400"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <title>Success</title>
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-            <div>
-              <p className="text-sm font-medium text-green-800 dark:text-green-200">
-                {isDirectDeposit
-                  ? "Funds arrived at recipient address"
-                  : "Funds arrived at intent address"}
-              </p>
-              <p className="text-xs text-green-600 dark:text-green-400 mt-1">
-                Received: {depositBalanceFormatted} {quote?.originToken?.symbol}
-              </p>
-              {lastTransactionHash ? (
-                <p className="text-xs text-green-600 dark:text-green-400 mt-1">
-                  Transaction:{" "}
-                  <TruncatedTransactionHash
-                    txHash={lastTransactionHash}
-                    chainId={quote?.originChain?.id || 1}
-                    className="text-green-600 dark:text-green-400"
-                  />
-                </p>
-              ) : (
-                isDirectDeposit &&
-                isMeldSuccess && (
-                  <p className="text-xs text-green-600 dark:text-green-400 mt-1">
-                    Transaction confirmed
-                  </p>
-                )
-              )}
-              {hasExecutedWithDeposit && !isDirectDeposit && (
-                <p className="text-xs text-green-600 dark:text-green-400 mt-2 font-medium">
-                  Processing transaction...
-                </p>
-              )}
-            </div>
-          </div>
-        </div>
-      )
-    }
-
-    // Only show monitoring section if there's a balance (even partial)
-    if (depositBalanceFormatted && Number(depositBalanceFormatted) > 0) {
-      return (
-        <div className="mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-700">
-          <div className="flex items-center space-x-2">
-            <svg
-              className="w-5 h-5 text-yellow-600 dark:text-yellow-400"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <title>Waiting</title>
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            <div>
-              <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
-                {isDirectDeposit
-                  ? "Waiting for transaction confirmation..."
-                  : "Monitoring for deposits..."}
-              </p>
-              {percentageComplete > 0 && (
-                <div className="mt-2">
-                  <div className="flex justify-between text-xs text-yellow-600 dark:text-yellow-400 mb-1">
-                    <span>Progress</span>
-                    <span>{percentageComplete.toFixed(0)}%</span>
-                  </div>
-                  <div className="w-full bg-yellow-200 dark:bg-yellow-800 rounded-full h-2">
-                    <div
-                      className="bg-yellow-600 dark:bg-yellow-400 h-2 rounded-full transition-all duration-500"
-                      style={{ width: `${Math.min(percentageComplete, 100)}%` }}
-                    />
-                  </div>
-                </div>
-              )}
-              <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
-                Current balance: {depositBalanceFormatted}{" "}
-                {quote?.originToken?.symbol}
-              </p>
-            </div>
-          </div>
-        </div>
-      )
-    }
-
-    // Don't show anything if no balance detected yet
-    return null
-  }
-
-  // Render transaction status display
-  const renderTransactionStatus = () => {
-    if (!externalSessionId) {
-      return (
-        <div className="mt-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
-          <p className="text-sm text-gray-600 dark:text-gray-400">
-            No external session ID - status monitoring disabled
-          </p>
-        </div>
-      )
-    }
-
-    if (transactionError) {
-      return (
-        <div className="mt-4 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-700">
-          <div className="flex items-center space-x-2">
-            <svg
-              className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <title>Error</title>
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-              />
-            </svg>
-            <div>
-              <p className="text-sm font-medium text-red-800 dark:text-red-200">
-                Error checking transaction status
-              </p>
-              <p className="text-xs text-red-600 dark:text-red-400 mt-1">
-                {transactionError.message}
-              </p>
-            </div>
-          </div>
-        </div>
-      )
-    }
-
-    if (isLoadingTransaction) {
-      return (
-        <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
-          <div className="flex items-center space-x-2">
-            <svg
-              className="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <title>Loading</title>
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              ></circle>
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-              ></path>
-            </svg>
-            <p className="text-sm text-blue-800 dark:text-blue-200">
-              Checking transaction status...
-            </p>
-          </div>
-        </div>
-      )
-    }
-
-    if (transaction?.status) {
-      const getStatusColor = (status: string) => {
-        switch (status?.toUpperCase()) {
-          case "COMPLETED":
-          case "SUCCESS":
-            return "green"
-          case "SETTLING":
-            return "blue"
-          case "DECLINED":
-          case "FAILED":
-            return "red"
-          // Treat ERROR as processing state - Meld API sometimes returns ERROR temporarily
-          // before switching to SETTLED/COMPLETED, so we don't want to show it as a failure
-          case "ERROR":
-          case "PENDING":
-          case "PROCESSING":
-            return "yellow"
-          default:
-            return "blue"
-        }
-      }
-
-      const getStatusMessage = (status: string) => {
-        switch (status?.toUpperCase()) {
-          case "COMPLETED":
-          case "SUCCESS":
-            return "Payment completed successfully"
-          case "SETTLING":
-            return "Finalizing your payment with the provider"
-          case "PENDING":
-            return "Waiting for payment confirmation"
-          case "PROCESSING":
-            return "Processing your payment"
-          case "ERROR":
-            return "Verifying payment status"
-          case "DECLINED":
-            return "Payment was declined"
-          case "FAILED":
-            return "Payment failed"
-          default:
-            return "Checking payment status"
-        }
-      }
-
-      const color = getStatusColor(transaction.status)
-      const colorClasses = {
-        green:
-          "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-700",
-        red: "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-700",
-        yellow:
-          "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-700",
-        blue: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-700",
-      }
-
-      const textColorClasses = {
-        green: "text-green-800 dark:text-green-200",
-        red: "text-red-800 dark:text-red-200",
-        yellow: "text-yellow-800 dark:text-yellow-200",
-        blue: "text-blue-800 dark:text-blue-200",
-      }
-
-      const iconColorClasses = {
-        green: "text-green-600 dark:text-green-400",
-        red: "text-red-600 dark:text-red-400",
-        yellow: "text-yellow-600 dark:text-yellow-400",
-        blue: "text-blue-600 dark:text-blue-400",
-      }
-
-      return (
-        <div className={`mt-4 p-4 rounded-lg border ${colorClasses[color]}`}>
-          <div className="flex items-start space-x-3">
-            {/* Icon */}
-            <div className="flex-shrink-0 mt-0.5">
-              {color === "yellow" ||
-              color === "blue" ||
-              transaction.status?.toUpperCase() === "SETTLING" ? (
-                <svg
-                  className={`w-5 h-5 ${iconColorClasses[color]} animate-spin`}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
-                  <title>Processing</title>
-                  <circle
-                    className="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    strokeWidth="4"
-                  />
-                  <path
-                    className="opacity-75"
-                    fill="currentColor"
-                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                  />
-                </svg>
-              ) : color === "green" ? (
-                <svg
-                  className={`w-5 h-5 ${iconColorClasses[color]}`}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <title>Success</title>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-              ) : (
-                <svg
-                  className={`w-5 h-5 ${iconColorClasses[color]}`}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <title>Error</title>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-              )}
-            </div>
-
-            {/* Content */}
-            <div className="flex-1 text-left">
-              <p className={`text-sm font-medium ${textColorClasses[color]}`}>
-                {getStatusMessage(transaction.status)}
-              </p>
-              <p
-                className={`text-xs mt-1 ${textColorClasses[color]} opacity-75`}
-              >
-                Status:{" "}
-                {transaction.status === "ERROR"
-                  ? "PROCESSING"
-                  : transaction.status?.toUpperCase()}
-              </p>
-              {(transaction.sourceAmount || transaction.destinationAmount) && (
-                <p
-                  className={`text-xs mt-1 ${textColorClasses[color]} opacity-75`}
-                >
-                  Amount:{" "}
-                  {transaction.sourceAmount || transaction.destinationAmount}{" "}
-                  {transaction.sourceCurrencyCode ||
-                    transaction.destinationCurrencyCode}
-                </p>
-              )}
-            </div>
-          </div>
-        </div>
-      )
-    }
-
-    // Default case: we have external session ID but no transaction yet
-    return (
-      <>
-        <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
-          <div className="flex items-start space-x-3">
-            <div className="flex-shrink-0 mt-0.5">
-              <svg
-                className="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <title>Loading</title>
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                />
-              </svg>
-            </div>
-            <div className="flex-1">
-              <p className="text-sm font-medium text-blue-800 dark:text-blue-200">
-                Initializing payment monitoring
-              </p>
-              <p className="text-xs mt-1 text-blue-800 dark:text-blue-200 opacity-75">
-                Status: INITIALIZING
-              </p>
-            </div>
-          </div>
-        </div>
-        {/* Onramp quote info - subtle display - outside status div */}
-        <TokenDiagram
-          onRampQuote={onRampQuote}
-          quote={quote}
-          tokenSize={14}
-          className="text-xs mt-2 text-gray-600 dark:text-gray-400 opacity-70 flex items-center gap-2 justify-center"
-          textClassName=""
-        />
-      </>
-    )
-  }
-
-  if (isPopupClosedDuringFlow) {
-    return (
-      <OnrampErrorScreen
-        onTryAgain={handleTryAgain}
-        onRetry={handleRetryWidget}
-        onBack={handleTimeoutBack}
-        intentId={quote?.intentId}
-        transactionStatus="CANCELLED"
-        title="Onramp Window Closed"
-        message="Your onramp window was closed before payment completion. Please try again to restart the flow."
-      />
-    )
-  }
-
-  // Show error screen if transaction failed
-  if (hasTransactionError) {
-    return (
-      <OnrampErrorScreen
-        onTryAgain={handleTryAgain}
-        onRetry={handleRetryWidget}
-        onBack={handleTimeoutBack}
-        transactionStatus={transaction?.status}
-        transactionError={transactionError?.message}
-      />
-    )
-  }
-
-  // Show timeout screen if session has timed out
-  if (isTimedOut) {
-    return (
-      <SessionTimeoutScreen
-        onTryAgain={handleTryAgain}
-        onRetry={handleRetryWidget} // Use our enhanced retry handler
-        onBack={handleTimeoutBack}
-        title="Session Timeout"
-        message="Your payment session has timed out. Please try again to continue with your onramp transaction."
-      />
-    )
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center relative">
-        <button
-          type="button"
-          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" />
-        </button>
-      </div>
-
-      <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
-        <div className="text-center">
-          <div
-            className={`mb-2 transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
-          >
-            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
-              {isCountingUp
-                ? "Payment is settling..."
-                : "Complete your purchase in the onramp window..."}
-            </h2>
-
-            {/* Timer Display */}
-            <div className="mt-4 flex items-center justify-center">
-              <div className="flex items-center space-x-2 px-4 py-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
-                <svg
-                  className="w-5 h-5 text-blue-600 dark:text-blue-400"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <title>
-                    {isCountingUp ? "Processing Time" : "Time Remaining"}
-                  </title>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-                <div className="flex flex-col items-start">
-                  <span className="text-xs text-blue-600 dark:text-blue-400">
-                    {isCountingUp ? "Processing for" : "Time remaining"}
-                  </span>
-                  <span className="text-lg font-mono font-bold text-blue-600 dark:text-blue-400">
-                    {formatCountdown(getCurrentTime())}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            {/* Warning */}
-            {!isCountingUp && (
-              <p className="mt-4 text-sm text-left text-gray-600 dark:text-gray-400">
-                Complete the payment within the time limit. We use USDC on Base
-                network as the intermediary token, please do not change it.
-              </p>
-            )}
-            <TokenDiagram
-              onRampQuote={onRampQuote}
-              quote={quote}
-              tokenSize={20}
-            />
-            {isCountingUp && (
-              <p className="mt-4 text-sm text-left text-gray-600 dark:text-gray-400">
-                Your transaction is settling with payment provider. This usually
-                takes 1-5 minutes to complete.
-              </p>
-            )}
-
-            {/* Transaction Status */}
-            {renderTransactionStatus()}
-
-            {/* Deposit Monitoring Status */}
-            {renderDepositStatus()}
-
-            {/* Important Notice - Now at the bottom */}
-            <div className="mt-3 p-3 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-700">
-              <div className="flex items-start space-x-3">
-                {/* Icon */}
-                <div className="flex-shrink-0 mt-0.5">
-                  <span className="text-amber-600 dark:text-amber-400">⚠️</span>
-                </div>
-
-                {/* Content */}
-                <div className="flex-1 text-left">
-                  <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
-                    Important: Do not close this window or navigate away while
-                    your payment is processing.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Low Time Warning - only show when counting down */}
-          {!isCountingUp && timeRemaining <= 60 && timeRemaining > 0 && (
-            <div
-              className={`transition-all duration-500 ease-out delay-150 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
-            >
-              <div className="p-4 trails-border-radius-container text-sm bg-yellow-50 border border-solid border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700/50">
-                <div className="flex items-start space-x-3">
-                  <svg
-                    className="w-5 h-5 mt-0.5 shrink-0 text-yellow-600 dark:text-yellow-400"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <title>Warning</title>
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-                    />
-                  </svg>
-                  <div>
-                    <p className="font-medium text-yellow-800 dark:text-yellow-300">
-                      Less than 1 minute remaining
-                    </p>
-                    <p className="mt-1 text-xs text-yellow-700 dark:text-yellow-400">
-                      Please complete your payment soon or the transaction will
-                      be canceled.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Transaction Details */}
-          <QuoteDetails
-            quote={quote}
-            onRampQuote={onRampQuote}
-            showContent={true}
-            compact={true}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default OnrampProviderConfirmation