0xtrails 0.13.1 → 0.14.0

package/src/widget/components/MeldForm.tsx

@@ -1,780 +0,0 @@
-import type React from "react"
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { useQuery } from "@tanstack/react-query"
-import { zeroAddress } from "viem"
-import { useCountryList } from "../../query/geo.hooks.js"
-import { getCountryFlag, getCountryName } from "../utils/countryUtils.js"
-
-import {
-  Building2,
-  ChevronDown,
-  CreditCard,
-  DollarSign,
-  ExternalLink,
-  History,
-  Smartphone,
-} from "lucide-react"
-import { useAccount } from "wagmi"
-import { getFullErrorMessage } from "../../error.js"
-import type { MeldPaymentMethod } from "../../meld/components/MeldFundMethods.js"
-import type { Country, MeldQuote, MeldToken } from "../../meld/utils/meld.js"
-import { getMeldOnrampClient } from "../../meld/utils/meld.js"
-import { meldQueries } from "../../query/meld.queries.js"
-import type { TransactionStatusInfo } from "../hooks/useMeldTransactionStatus.js"
-import { useOnRampCountryDefaults } from "../hooks/useOnRampCountryDefaults.js"
-import { useTrails } from "../providers/TrailsProvider.js"
-import { getCenteredWindowParams } from "../utils/windowUtils.js"
-import { ErrorDisplay } from "./ErrorDisplay.js"
-import { MeldTransactionStatus } from "./MeldTransactionStatus.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { TokenImage } from "./TokenImage.js"
-import { logger } from "../../index.js"
-
-import { normalizeAddress } from "../../utils/address.js"
-export interface MeldFormProps {
-  trailsApiKey: string
-  onBack?: () => void
-  onTransactionStatus?: (status: {
-    type: "success" | "error" | "pending" | null
-    message: string
-  }) => void
-  onNavigateToCountries?: () => void
-  onNavigateToPaymentMethods?: () => void
-  onNavigateToTokens?: () => void
-  onNavigateToProviders?: () => void
-  onNavigateToHistory?: () => void
-  onSelectProvider?: (provider: MeldQuote | null) => void
-  onProvidersLoaded?: (providers: MeldQuote[]) => void
-  selectedCountry?: Country | null
-  selectedPaymentMethod?: MeldPaymentMethod | null
-  selectedToken?: MeldToken | null
-  selectedProvider?: MeldQuote | null
-}
-
-// Common countries for Meld
-const COMMON_COUNTRIES: Country[] = [
-  { countryCode: "US", name: "United States" },
-  { countryCode: "CA", name: "Canada" },
-  { countryCode: "GB", name: "United Kingdom" },
-  { countryCode: "EU", name: "European Union" },
-  { countryCode: "AU", name: "Australia" },
-]
-
-// Simplified payment methods
-const PAYMENT_METHODS = [
-  { code: "CREDIT_DEBIT_CARD", label: "Credit Card", icon: CreditCard },
-  { code: "DEBIT_CARD", label: "Debit Card", icon: CreditCard },
-  { code: "APPLE_PAY", label: "Apple Pay", icon: Smartphone },
-  { code: "GOOGLE_PAY", label: "Google Pay", icon: Smartphone },
-  { code: "EXCHANGE", label: "Exchange", icon: Building2 },
-]
-
-// Common tokens
-const COMMON_TOKENS: MeldToken[] = [
-  {
-    code: "USDC_BASE",
-    name: "USD Coin",
-    symbol: "USDC",
-    chain: "BASE",
-    chainName: "Base",
-    chainId: 8453,
-    contractAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
-  },
-  {
-    code: "DAI_BASE",
-    name: "Dai Stablecoin",
-    symbol: "DAI",
-    chain: "BASE",
-    chainName: "Base",
-    chainId: 8453,
-    contractAddress: "0x50c5725949a6f0c72e6c4a641f24049a917db0cb",
-  },
-  {
-    code: "USDC_ETH",
-    name: "USD Coin",
-    symbol: "USDC",
-    chain: "ETH",
-    chainName: "Ethereum",
-    chainId: 1,
-    contractAddress: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
-  },
-  {
-    code: "ETH",
-    name: "Ethereum",
-    symbol: "ETH",
-    chain: "ETH",
-    chainName: "Ethereum",
-    chainId: 1,
-    contractAddress: zeroAddress,
-  },
-]
-
-// Amount presets
-const AMOUNT_PRESETS = [10, 25, 50, 100]
-
-// TODO: Temporary localStorage for redirect/session recovery. Should this be sessionStorage?
-const MELD_SESSION_ID_STORAGE_KEY = "meld-current-session-id"
-const MELD_EXTERNAL_SESSION_ID_STORAGE_KEY = "meld-current-external-session-id"
-
-// Helper function to map Meld chain names to chain IDs
-function getChainId(chainName?: string): number | undefined {
-  const chainMap: Record<string, number> = {
-    ETH: 1, // Ethereum mainnet
-    BASE: 8453, // Base
-    ARBITRUM: 42161, // Arbitrum
-    OPTIMISM: 10, // Optimism
-    POLYGON: 137, // Polygon
-    BSC: 56, // Binance Smart Chain
-    AVAX: 43114, // Avalanche
-  }
-  return chainName ? chainMap[chainName.toUpperCase()] : undefined
-}
-
-export const MeldForm: React.FC<MeldFormProps> = ({
-  trailsApiKey,
-  onBack,
-  onTransactionStatus,
-  onNavigateToCountries,
-  onNavigateToPaymentMethods,
-  onNavigateToTokens,
-  onNavigateToProviders,
-  onNavigateToHistory,
-  onSelectProvider,
-  onProvidersLoaded,
-  selectedCountry: propSelectedCountry,
-  selectedPaymentMethod: propSelectedPaymentMethod,
-  selectedToken: propSelectedToken,
-  selectedProvider: propSelectedProvider,
-}) => {
-  const { address: walletAddress } = useAccount()
-  const trailsConfig = useTrails()
-
-  // Get country list from API
-  const { data: countries = [] } = useCountryList()
-
-  // Get detected country from geolocation
-  const { countryCode: detectedCountryCode } = useOnRampCountryDefaults({
-    enabled: !propSelectedCountry, // Only fetch if no country prop provided
-  })
-
-  // Form state - use detected country if available, fallback to US
-  const selectedCountry = useMemo(() => {
-    if (propSelectedCountry) return propSelectedCountry
-
-    if (detectedCountryCode) {
-      // First try to find in common countries list
-      const foundCountry = COMMON_COUNTRIES.find(
-        (c) => c.countryCode === detectedCountryCode,
-      )
-      if (foundCountry) return foundCountry
-
-      // If not found, create a country object for it using API data
-      return {
-        countryCode: detectedCountryCode,
-        name: getCountryName(detectedCountryCode, countries),
-      }
-    }
-
-    // Final fallback
-    return COMMON_COUNTRIES[0] || { countryCode: "US", name: "United States" }
-  }, [propSelectedCountry, detectedCountryCode, countries])
-  const selectedPaymentMethod = propSelectedPaymentMethod || "CREDIT_DEBIT_CARD"
-
-  // Load persisted amount from localStorage
-  const [amount, setAmount] = useState<string>(() => {
-    const savedAmount = localStorage.getItem("meld-form-amount")
-    return savedAmount || "25"
-  })
-  const [currency] = useState<string>("USD")
-
-  // Create OnrampClient client
-  const trailsClient = useMemo(() => {
-    return getMeldOnrampClient(trailsApiKey, trailsConfig?.trailsApiUrl)
-  }, [trailsApiKey, trailsConfig?.trailsApiUrl])
-
-  // Fetch payment methods to get details including images
-  const { data: paymentMethods = [] } = useQuery(
-    meldQueries.paymentMethodList(trailsClient, currency),
-  )
-
-  // Find the selected payment method details
-  const selectedPaymentMethodDetails = useMemo(() => {
-    if (!selectedPaymentMethod || !paymentMethods.length) {
-      return null
-    }
-    return paymentMethods.find(
-      (method) => method.paymentMethod === selectedPaymentMethod,
-    )
-  }, [selectedPaymentMethod, paymentMethods])
-  const selectedToken = propSelectedToken ||
-    COMMON_TOKENS[0] || {
-      code: "USDC_BASE",
-      name: "USD Coin",
-      symbol: "USDC",
-      chain: "BASE",
-      chainName: "Base",
-    }
-  const [providers, setProviders] = useState<MeldQuote[]>([])
-  const selectedProvider = propSelectedProvider
-  const [isLoadingProviders, setIsLoadingProviders] = useState(false)
-  const [widgetUrl, setWidgetUrl] = useState<string>("")
-  const [isLoadingUrl, setIsLoadingUrl] = useState(false)
-  const [widgetSessionError, setWidgetSessionError] = useState<string | null>(
-    null,
-  )
-  const [hasClickedContinue, setHasClickedContinue] = useState(false)
-
-  // Legacy transaction ID for URL parameter handling
-  const [currentTransactionId, setCurrentTransactionId] = useState<
-    string | null
-  >(null)
-
-  // Popup window reference and session tracking
-  const [_popupWindowRef, setPopupWindowRef] = useState<Window | null>(null)
-  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null)
-  const [currentExternalSessionId, setCurrentExternalSessionId] = useState<
-    string | null
-  >(null)
-  const [isPopupOpen, setIsPopupOpen] = useState(false)
-  const [hookSetWindowRef, setHookSetWindowRef] = useState<
-    ((ref: Window | null) => void) | null
-  >(null)
-
-  // Use ref to store latest callback to prevent infinite re-renders
-  const onTransactionStatusRef = useRef(onTransactionStatus)
-  useEffect(() => {
-    onTransactionStatusRef.current = onTransactionStatus
-  }, [onTransactionStatus])
-
-  // Handle status changes from new component
-  const handleTransactionStatusChange = (statusInfo: TransactionStatusInfo) => {
-    // Convert to legacy format for backwards compatibility
-    const legacyStatus = {
-      type:
-        statusInfo.state === "success"
-          ? ("success" as const)
-          : statusInfo.state === "failed" || statusInfo.state === "error"
-            ? ("error" as const)
-            : statusInfo.state === "polling"
-              ? ("pending" as const)
-              : null,
-      message: statusInfo.message,
-    }
-
-    // Call the latest callback using ref to prevent infinite loop
-    onTransactionStatusRef.current?.(legacyStatus)
-  }
-
-  // Handle popup window closed
-  const handleWindowClosed = () => {
-    logger.console.log("[MeldForm] Popup window was closed")
-    setPopupWindowRef(null)
-    setHasClickedContinue(false) // Reset button state when window closes
-    setIsPopupOpen(false) // Reset popup state
-  }
-
-  // Check for transaction status from URL parameters (in case of redirect)
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search)
-    const urlSessionId =
-      urlParams.get("sessionId") ||
-      urlParams.get("externalSessionId") ||
-      urlParams.get("orderId")
-
-    if (urlSessionId && !currentTransactionId) {
-      logger.console.log(
-        "[MeldForm] Found session ID in URL parameters:",
-        urlSessionId,
-      )
-      setCurrentTransactionId(urlSessionId)
-      setCurrentSessionId(urlSessionId)
-      localStorage.setItem(MELD_SESSION_ID_STORAGE_KEY, urlSessionId)
-    }
-  }, [currentTransactionId])
-
-  // Load providers when form parameters change
-  const loadProviders = useCallback(async () => {
-    if (!selectedCountry || !selectedToken || !amount) {
-      logger.console.log(
-        "[MeldForm] Missing required parameters for loadProviders:",
-        {
-          selectedCountry,
-          selectedToken,
-          amount,
-        },
-      )
-      return
-    }
-
-    logger.console.log("[MeldForm] Loading providers with params:", {
-      walletAddress: walletAddress || "fallback",
-      countryCode: selectedCountry.countryCode,
-      sourceCurrencyCode: currency,
-      sourceAmount: amount,
-      destinationCurrencyCode: selectedToken.code,
-      paymentMethodType: selectedPaymentMethod,
-    })
-
-    setIsLoadingProviders(true)
-    setProviders([])
-    setWidgetUrl("")
-    setHasClickedContinue(false)
-
-    try {
-      const quoteResponse = await trailsClient.getMeldQuote({
-        walletAddress:
-          walletAddress || "0x1234567890123456789012345678901234567890",
-        countryCode: selectedCountry.countryCode,
-        sourceCurrencyCode: currency,
-        sourceAmount: amount,
-        destinationCurrencyCode: selectedToken.code,
-      })
-
-      logger.console.log("[MeldForm] Quote response:", quoteResponse)
-
-      // Parse the API response - it comes back with QuoteResponse.quotes structure
-      let quotes: any
-      try {
-        // First check if there's a nested QuoteResponse object
-        const parsedResponse = (quoteResponse as any).QuoteResponse?.quotes
-        if (parsedResponse) {
-          quotes = parsedResponse
-        } else {
-          // Fallback to original parsing logic
-          const parsedQuoteResponse =
-            typeof quoteResponse.quoteResponse === "string"
-              ? JSON.parse(quoteResponse.quoteResponse)
-              : quoteResponse.quoteResponse
-          quotes = parsedQuoteResponse?.quotes
-        }
-      } catch (e) {
-        logger.console.error("[MeldForm] Error parsing quote response:", e)
-        setIsLoadingProviders(false)
-        return
-      }
-
-      logger.console.log("[MeldForm] Extracted quotes:", quotes)
-
-      if (!quotes || quotes.length === 0) {
-        logger.console.log("[MeldForm] No quotes available")
-        setIsLoadingProviders(false)
-        return
-      }
-
-      setProviders(quotes)
-      logger.console.log("[MeldForm] Set providers:", quotes.length, "quotes")
-    } catch (error) {
-      logger.console.error("[MeldForm] Error loading providers:", error)
-    } finally {
-      setIsLoadingProviders(false)
-    }
-  }, [
-    selectedCountry,
-    selectedToken,
-    amount,
-    currency,
-    selectedPaymentMethod,
-    trailsClient,
-    walletAddress,
-  ])
-
-  // Load widget URL when provider is selected
-  const loadWidgetUrl = useCallback(async () => {
-    if (!selectedProvider || !walletAddress) return
-
-    setIsLoadingUrl(true)
-    setWidgetSessionError(null) // Clear any previous errors
-    try {
-      // Generate external session ID
-      const timestamp = Date.now()
-      const randomSuffix = Math.random().toString(36).substring(2, 8)
-      const externalSessionId = `meld-${timestamp}-${randomSuffix}`
-
-      // Use the active wallet address directly
-      const effectiveCustomerId = normalizeAddress(walletAddress)
-
-      const sessionResponse = await trailsClient.createMeldWidgetSession({
-        sessionData: {
-          walletAddress: walletAddress,
-          countryCode: selectedCountry.countryCode,
-          sourceCurrencyCode: currency,
-          sourceAmount: amount,
-          destinationCurrencyCode: selectedToken.code,
-          serviceProvider: selectedProvider.serviceProvider,
-          paymentMethodType: selectedPaymentMethod || undefined,
-          // redirectUrl,
-        },
-        sessionType: "BUY",
-        externalCustomerId: effectiveCustomerId,
-        externalSessionId: externalSessionId,
-      })
-
-      const widgetSessionData = (sessionResponse as any).WidgetSession
-      if (!widgetSessionData) {
-        throw new Error("No widget session data received")
-      }
-
-      const url =
-        widgetSessionData.serviceProviderWidgetUrl ||
-        widgetSessionData.widgetUrl ||
-        widgetSessionData.url
-      if (!url) {
-        throw new Error("No widget URL found in session data")
-      }
-
-      setWidgetUrl(url)
-
-      // Extract session ID and external session ID from response data for transaction tracking
-      const sessionId =
-        widgetSessionData.sessionId || widgetSessionData.id || externalSessionId
-      const responseExternalSessionId =
-        widgetSessionData.externalSessionId || externalSessionId
-
-      logger.console.log("[MeldForm] Session data from response:", {
-        sessionId,
-        externalSessionId: responseExternalSessionId,
-        generatedExternalSessionId: externalSessionId,
-      })
-
-      setCurrentSessionId(sessionId)
-      setCurrentExternalSessionId(responseExternalSessionId)
-      setCurrentTransactionId(sessionId)
-      localStorage.setItem(MELD_SESSION_ID_STORAGE_KEY, sessionId)
-      localStorage.setItem(
-        MELD_EXTERNAL_SESSION_ID_STORAGE_KEY,
-        responseExternalSessionId,
-      )
-    } catch (error) {
-      logger.console.error("Error creating widget session:", error)
-      const errorMessage = getFullErrorMessage(error)
-      setWidgetSessionError(errorMessage)
-    } finally {
-      setIsLoadingUrl(false)
-    }
-  }, [
-    selectedProvider,
-    walletAddress,
-    selectedCountry,
-    currency,
-    amount,
-    selectedToken,
-    selectedPaymentMethod,
-    trailsClient,
-  ])
-
-  // Load providers when form changes
-  useEffect(() => {
-    loadProviders()
-    setWidgetSessionError(null) // Clear errors when form changes
-  }, [loadProviders])
-
-  // Handle provider callbacks when providers change
-  useEffect(() => {
-    if (providers.length > 0) {
-      // Notify parent about the loaded providers
-      onProvidersLoaded?.(providers)
-
-      // Auto-select the first provider if none is currently selected
-      if (!selectedProvider && onSelectProvider && providers[0]) {
-        logger.console.log(
-          "[MeldForm] Auto-selecting first provider:",
-          providers[0],
-        )
-        onSelectProvider(providers[0])
-      }
-    }
-  }, [providers, selectedProvider, onProvidersLoaded, onSelectProvider])
-
-  // Load widget URL when provider changes
-  useEffect(() => {
-    if (selectedProvider) {
-      loadWidgetUrl()
-    }
-  }, [selectedProvider, loadWidgetUrl])
-
-  // Handle continue to provider
-  const handleContinue = () => {
-    if (widgetUrl && !hasClickedContinue) {
-      setHasClickedContinue(true)
-
-      // Open popup in center and track window reference
-      const popup = window.open(
-        widgetUrl,
-        "_blank",
-        getCenteredWindowParams(800, 600),
-      )
-
-      if (!popup) {
-        logger.console.error("[MeldForm] Popup blocked by browser")
-        setHasClickedContinue(false)
-        return
-      }
-
-      setPopupWindowRef(popup)
-      setIsPopupOpen(true) // Set popup state
-      // Pass the window reference to the hook
-      if (hookSetWindowRef) {
-        hookSetWindowRef(popup)
-      }
-
-      logger.console.log(
-        "[MeldForm] Payment window opened, session ID:",
-        currentSessionId,
-      )
-    }
-  }
-
-  return (
-    <div className="max-w-md mx-auto p-6 space-y-4">
-      {/* Header with back button, history, and country selector */}
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="Buy Crypto"
-        rightSideContent={
-          <div className="flex items-center gap-2">
-            {/* History Button */}
-            {onNavigateToHistory && (
-              <button
-                type="button"
-                onClick={onNavigateToHistory}
-                className="flex items-center justify-center w-8 h-8 bg-transparent border border-gray-300 dark:border-gray-600 rounded-lg trails-text-primary hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors cursor-pointer"
-                title="Onramp History"
-              >
-                <History className="w-4 h-4" />
-              </button>
-            )}
-
-            {/* Country Selector */}
-            <button
-              type="button"
-              onClick={onNavigateToCountries}
-              className="flex items-center gap-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded-lg px-2 py-1 text-sm trails-text-primary hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors cursor-pointer"
-            >
-              <span className="text-base">
-                {getCountryFlag(selectedCountry.countryCode, countries)}
-              </span>
-              <span className="font-medium">{selectedCountry.countryCode}</span>
-              <ChevronDown className="w-4 h-4 text-gray-500" />
-            </button>
-          </div>
-        }
-      />
-
-      {/* Payment Method Selection */}
-      <div>
-        <span className="block text-sm font-medium trails-text-primary mb-2">
-          Payment Method
-        </span>
-        <button
-          type="button"
-          onClick={onNavigateToPaymentMethods}
-          className="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-3 trails-text-primary bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors cursor-pointer flex items-center justify-between"
-        >
-          <div className="flex items-center gap-3">
-            {selectedPaymentMethodDetails?.logos?.light ||
-            selectedPaymentMethodDetails?.logos?.dark ? (
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-gray-100 dark:bg-gray-700 p-1">
-                <img
-                  src={
-                    selectedPaymentMethodDetails.logos?.light ||
-                    selectedPaymentMethodDetails.logos?.dark ||
-                    ""
-                  }
-                  alt={`${selectedPaymentMethodDetails.name} logo`}
-                  className="max-w-full max-h-full object-cover"
-                />
-              </div>
-            ) : (
-              <CreditCard className="w-5 h-5 text-gray-500" />
-            )}
-            <div className="text-left">
-              <div className="font-medium">
-                {selectedPaymentMethodDetails?.name ||
-                  PAYMENT_METHODS.find((m) => m.code === selectedPaymentMethod)
-                    ?.label ||
-                  selectedPaymentMethod ||
-                  "Select Payment Method"}
-              </div>
-              {selectedPaymentMethodDetails?.paymentType && (
-                <div className="text-xs text-gray-500 dark:text-gray-400">
-                  {selectedPaymentMethodDetails.paymentType}
-                </div>
-              )}
-            </div>
-          </div>
-          <ChevronDown className="w-5 h-5 text-gray-500" />
-        </button>
-      </div>
-
-      {/* Amount Input with Presets */}
-      <div>
-        <label
-          htmlFor="meld-amount-input"
-          className="block text-sm font-medium trails-text-primary mb-2"
-        >
-          Amount
-        </label>
-        <div className="space-y-3">
-          <div className="relative">
-            <DollarSign className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-500" />
-            <input
-              id="meld-amount-input"
-              type="number"
-              value={amount}
-              onChange={(e) => {
-                const newAmount = e.target.value
-                setAmount(newAmount)
-                // Persist to localStorage
-                if (newAmount) {
-                  localStorage.setItem("meld-form-amount", newAmount)
-                }
-              }}
-              placeholder="Enter amount"
-              className="w-full border border-gray-300 dark:border-gray-600 rounded-lg pl-10 pr-3 py-3 trails-text-primary bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-          </div>
-
-          {/* Preset buttons */}
-          <div className="flex gap-2">
-            {AMOUNT_PRESETS.map((preset) => (
-              <button
-                key={preset}
-                type="button"
-                onClick={() => {
-                  const presetAmount = preset.toString()
-                  setAmount(presetAmount)
-                  // Persist to localStorage
-                  localStorage.setItem("meld-form-amount", presetAmount)
-                }}
-                className={`px-3 py-1 text-sm rounded-md border transition-colors ${
-                  amount === preset.toString()
-                    ? "bg-blue-100 border-blue-500 text-blue-700 dark:bg-blue-900/30 dark:border-blue-400 dark:text-blue-300"
-                    : "border-gray-300 dark:border-gray-600 trails-text-secondary hover:bg-gray-50 dark:hover:bg-gray-800"
-                }`}
-              >
-                ${preset}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Token Selection */}
-      <div>
-        <span className="block text-sm font-medium trails-text-primary mb-2">
-          Token
-        </span>
-        <button
-          type="button"
-          onClick={onNavigateToTokens}
-          className="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-3 trails-text-primary bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors cursor-pointer flex items-center justify-between"
-        >
-          <div className="flex items-center gap-3">
-            <TokenImage
-              symbol={selectedToken.symbol}
-              chainId={selectedToken.chainId || getChainId(selectedToken.chain)}
-              contractAddress={selectedToken.contractAddress}
-              size={24}
-            />
-            <div className="text-left">
-              <div className="font-medium">{selectedToken.symbol}</div>
-              <div className="text-xs text-gray-500 dark:text-gray-400">
-                {selectedToken.chainName}
-              </div>
-            </div>
-          </div>
-          <ChevronDown className="w-5 h-5 text-gray-500" />
-        </button>
-      </div>
-
-      {/* Provider Selection */}
-      <div>
-        <span className="block text-sm font-medium trails-text-primary mb-2">
-          Provider
-        </span>
-        {isLoadingProviders ? (
-          <div className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-3 flex items-center">
-            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500 mr-2"></div>
-            <span className="text-gray-600 dark:text-gray-400">
-              Loading providers...
-            </span>
-          </div>
-        ) : providers.length === 0 ? (
-          <div className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-3 text-gray-600 dark:text-gray-400">
-            No providers available
-          </div>
-        ) : (
-          <button
-            type="button"
-            onClick={onNavigateToProviders}
-            className="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-3 trails-text-primary bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors cursor-pointer flex items-center justify-between"
-          >
-            <div className="flex items-center gap-3">
-              <Building2 className="w-5 h-5 text-gray-500" />
-              <span>
-                {selectedProvider
-                  ? `${selectedProvider.serviceProvider} - $${selectedProvider.totalFee.toFixed(2)} fee`
-                  : "Select Provider"}
-              </span>
-            </div>
-            <ChevronDown className="w-5 h-5 text-gray-500" />
-          </button>
-        )}
-      </div>
-
-      {/* Widget Session Error Display */}
-      {widgetSessionError && (
-        <ErrorDisplay error={widgetSessionError} severity="error" />
-      )}
-
-      {/* Continue to Provider Button */}
-      <button
-        type="button"
-        onClick={handleContinue}
-        disabled={
-          isLoadingUrl ||
-          !widgetUrl ||
-          hasClickedContinue ||
-          !selectedProvider ||
-          !!widgetSessionError
-        }
-        className={`w-full flex items-center justify-center py-3 px-4 font-semibold rounded-lg transition-colors ${
-          isLoadingUrl ||
-          !widgetUrl ||
-          hasClickedContinue ||
-          !selectedProvider ||
-          !!widgetSessionError
-            ? "bg-gray-400 text-gray-200 cursor-not-allowed"
-            : "bg-blue-600 hover:bg-blue-700 text-white cursor-pointer"
-        }`}
-      >
-        {isLoadingUrl ? (
-          <>
-            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-            <span>Preparing...</span>
-          </>
-        ) : (
-          <>
-            <span>
-              {hasClickedContinue ? "Provider Opened" : "Continue to Provider"}
-            </span>
-            <ExternalLink className="w-4 h-4 ml-2" />
-          </>
-        )}
-      </button>
-
-      {/* Enhanced Transaction Status Component */}
-      <MeldTransactionStatus
-        sessionId={currentSessionId}
-        transactionId={currentTransactionId}
-        externalSessionId={currentExternalSessionId}
-        onStatusChange={handleTransactionStatusChange}
-        onWindowClosed={handleWindowClosed}
-        showTimeElapsed={true}
-        showPopupOpened={hasClickedContinue}
-        isPopupOpen={isPopupOpen}
-        onSetWindowRef={setHookSetWindowRef}
-      />
-    </div>
-  )
-}