0xtrails 0.13.2 → 0.14.0

package/src/widget/components/MeldStepsFlow.tsx

@@ -1,1651 +0,0 @@
-import { ExternalLink } from "lucide-react"
-import type React from "react"
-import { useCallback, useEffect, useMemo, useState } from "react"
-import { useAccount } from "wagmi"
-import { isPositiveNumber } from "../../utils/validation.js"
-import { getChainName } from "../../chains.js"
-import { MeldCountriesList } from "../../meld/components/MeldCountriesList.js"
-import type { MeldPaymentMethod } from "../../meld/components/MeldFundMethods.js"
-import { MeldFundMethods } from "../../meld/components/MeldFundMethods.js"
-import { MeldProvidersList } from "../../meld/components/MeldProvidersList.js"
-import { MeldTokensList } from "../../meld/components/MeldTokensList.js"
-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 { 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"
-import { logger } from "../../index.js"
-
-export interface MeldStepsFlowProps {
-  onBack?: () => void
-}
-
-type Screen =
-  | "menu"
-  | "countries"
-  | "payment-methods"
-  | "tokens"
-  | "amount"
-  | "providers"
-
-// Local storage keys - use same key as MeldForm for consistency
-const MELD_AMOUNT_STORAGE_KEY = "meld-form-amount"
-const MELD_CURRENCY_STORAGE_KEY = "meld-debug-currency"
-
-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
-}
-
-const AmountInputScreen: React.FC<AmountInputScreenProps> = ({
-  onBack,
-  onContinue,
-  _selectedCountry,
-  _selectedToken,
-  _selectedPaymentMethod,
-  initialAmount = "",
-  initialCurrency = "USD",
-}) => {
-  const [amount, setAmount] = useState(initialAmount)
-  const [currency, setCurrency] = useState(initialCurrency)
-
-  const numAmount = parseFloat(amount)
-  const isValid =
-    amount.trim() !== "" && isPositiveNumber(numAmount) && numAmount <= 10000
-
-  // Local storage persistence
-  useEffect(() => {
-    if (amount) {
-      localStorage.setItem(MELD_AMOUNT_STORAGE_KEY, amount)
-    }
-    if (currency) {
-      localStorage.setItem(MELD_CURRENCY_STORAGE_KEY, currency)
-    }
-  }, [amount, currency])
-
-  return (
-    <div className="flex flex-col h-full">
-      <ScreenHeader
-        onBack={() => onBack(amount, currency)}
-        headerContent="Enter Amount"
-      />
-
-      {/* Amount Input */}
-      <div className="flex-1 p-4">
-        <div className="max-w-md mx-auto">
-          <label
-            htmlFor="meld-steps-amount"
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-          >
-            How much do you want to spend?
-          </label>
-
-          <div className="relative">
-            <select
-              value={currency}
-              onChange={(e) => setCurrency(e.target.value)}
-              className="absolute left-3 top-1/2 transform -translate-y-1/2 bg-transparent border-none text-lg font-semibold text-gray-700 dark:text-gray-300 focus:outline-none"
-            >
-              <option value="USD">$</option>
-              <option value="EUR">€</option>
-              <option value="GBP">£</option>
-            </select>
-
-            <input
-              id="meld-steps-amount"
-              type="number"
-              value={amount}
-              onChange={(e) => setAmount(e.target.value)}
-              placeholder="0.00"
-              className="w-full pl-12 pr-4 py-3 text-2xl font-semibold border-2 border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
-              min="1"
-              max="10000"
-              step="0.01"
-            />
-          </div>
-
-          {/* Amount suggestions */}
-          <div className="mt-4 grid grid-cols-4 gap-2">
-            {["25", "50", "100", "500"].map((suggestedAmount) => (
-              <button
-                type="button"
-                key={suggestedAmount}
-                onClick={() => setAmount(suggestedAmount)}
-                className="py-2 px-3 text-sm text-black dark:text-white border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
-              >
-                {currency === "USD" ? "$" : currency === "EUR" ? "€" : "£"}
-                {suggestedAmount}
-              </button>
-            ))}
-          </div>
-
-          {/* Validation message */}
-          {amount && !isValid && (
-            <div className="mt-2 text-sm text-red-600 dark:text-red-400">
-              Please enter a valid amount between $1 and $10,000
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Continue button */}
-      <div className="p-4 border-t border-gray-200 dark:border-gray-700">
-        <button
-          type="button"
-          onClick={() => onContinue(amount, currency)}
-          disabled={!isValid}
-          className={`w-full py-3 px-4 rounded-lg font-semibold transition-colors ${
-            isValid
-              ? "bg-blue-600 hover:bg-blue-700 text-white cursor-pointer"
-              : "bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-400 cursor-not-allowed"
-          }`}
-        >
-          Continue to Providers
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export const MeldStepsFlow: React.FC<MeldStepsFlowProps> = ({
-  onBack: _onBack,
-}) => {
-  const trailsConfig = useTrails()
-  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
-  const trailsClient = useMemo(() => {
-    return getMeldOnrampClient(
-      trailsConfig.trailsApiKey,
-      trailsConfig.trailsApiUrl,
-    )
-  }, [trailsConfig.trailsApiKey, trailsConfig.trailsApiUrl])
-
-  const [currentScreen, setCurrentScreen] = useState<Screen>("menu")
-
-  // Load from localStorage on mount
-  useEffect(() => {
-    const savedAmount = localStorage.getItem(MELD_AMOUNT_STORAGE_KEY)
-    const savedCurrency = localStorage.getItem(MELD_CURRENCY_STORAGE_KEY)
-    if (savedAmount) setSelectedAmount(savedAmount)
-    if (savedCurrency) setSelectedCurrency(savedCurrency)
-  }, [])
-
-  // Load from local storage on mount
-  const [selectedCountry, setSelectedCountry] = useState<Country | null>(() => {
-    try {
-      const saved = localStorage.getItem("meld-debug-country")
-      return saved ? JSON.parse(saved) : null
-    } catch {
-      return null
-    }
-  })
-
-  const [selectedPaymentMethod, setSelectedPaymentMethod] =
-    useState<MeldPaymentMethod | null>(() => {
-      try {
-        return localStorage.getItem("meld-debug-payment-method") || null
-      } catch {
-        return null
-      }
-    })
-
-  const [selectedToken, setSelectedToken] = useState<MeldToken | null>(() => {
-    try {
-      const saved = localStorage.getItem("meld-debug-token")
-      return saved ? JSON.parse(saved) : null
-    } catch {
-      return null
-    }
-  })
-
-  const [selectedAmount, setSelectedAmount] = useState<string>("")
-  const [selectedCurrency, setSelectedCurrency] = useState<string>("USD")
-  const [widgetUrl, setWidgetUrl] = useState<string>("")
-  const [isLoadingUrl, setIsLoadingUrl] = useState(false)
-  const [widgetUrlError, setWidgetUrlError] = useState<string>("")
-
-  // Store available providers from quote
-  const [availableProviders, setAvailableProviders] = useState<MeldQuote[]>([])
-  const [_isLoadingProviders, setIsLoadingProviders] = useState(false)
-  const [selectedProvider, setSelectedProvider] = useState<MeldQuote | null>(
-    null,
-  )
-  const [hasClickedContinue, setHasClickedContinue] = useState(false)
-
-  // Transaction tracking state
-  const [currentTransactionId, setCurrentTransactionId] = useState<
-    string | null
-  >(null)
-  const [transactionStatus, setTransactionStatus] = useState<{
-    status: string
-    message: string
-    type: "success" | "error" | "pending" | null
-  }>({ status: "", message: "", type: null })
-
-  // Check for transaction status from URL parameters (when user returns from Meld)
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search)
-
-    // Debug: Log all URL parameters to see what Meld sends
-    logger.console.log(
-      "[MeldStepsFlow] All URL parameters:",
-      Object.fromEntries(urlParams.entries()),
-    )
-
-    // Extract Meld's actual redirect parameters
-    const transactionId =
-      urlParams.get("orderId") || // Meld sends orderId as the transaction identifier
-      urlParams.get("partnerOrderId") || // Backup identifier
-      urlParams.get("transactionId") || // Fallback options
-      urlParams.get("meld_transaction_id") ||
-      urlParams.get("transaction_id") ||
-      urlParams.get("id")
-
-    const status =
-      urlParams.get("status") || // Meld sends 'status' parameter
-      urlParams.get("meld_status") ||
-      urlParams.get("transaction_status") ||
-      urlParams.get("state")
-
-    // Extract additional transaction details from Meld's redirect
-    const fiatAmount = urlParams.get("fiatAmount")
-    const cryptoAmount = urlParams.get("cryptoAmount")
-    const fiatCurrency = urlParams.get("fiatCurrency")
-    const cryptoCurrency = urlParams.get("cryptoCurrency")
-    const totalFee = urlParams.get("totalFeeInFiat")
-    const walletAddress = urlParams.get("walletAddress")
-    const network = urlParams.get("network")
-
-    logger.console.log("[MeldStepsFlow] Meld transaction details:", {
-      transactionId,
-      status,
-      fiatAmount,
-      cryptoAmount,
-      fiatCurrency,
-      cryptoCurrency,
-      totalFee,
-      walletAddress,
-      network,
-    })
-
-    logger.console.log(
-      "[MeldStepsFlow] Extracted transaction ID:",
-      transactionId,
-    )
-    logger.console.log("[MeldStepsFlow] Extracted status:", status)
-
-    // If no transaction ID from URL, try to search for transactions using wallet address
-    const finalTransactionId = transactionId
-    if (!finalTransactionId) {
-      logger.console.log(
-        "[MeldStepsFlow] No transaction ID in URL, will search by wallet address:",
-        walletAddress,
-      )
-
-      // Use the search API to find transactions by wallet address (external customer ID)
-      if (walletAddress) {
-        logger.console.log(
-          "[MeldStepsFlow] Searching for transactions by wallet address (external customer ID):",
-          walletAddress,
-        )
-
-        // Search for transactions - this will be done async after the useEffect
-        setTimeout(async () => {
-          try {
-            // Use stored customer ID from createMeldWidgetSession response
-            const storedCustomerId = localStorage.getItem(
-              "meld-current-customer-id-for-search",
-            )
-
-            logger.console.log(
-              "[MeldStepsFlow] About to call searchMeldTransactions with params:",
-              {
-                customerIds: storedCustomerId,
-                fallbackCustomerIds: walletAddress,
-                limit: 10,
-              },
-            )
-
-            // Search by customerIds (using customerId value) if available, otherwise fallback to customerIds with wallet address
-            const searchParams = storedCustomerId
-              ? { customerIds: storedCustomerId, limit: 10 }
-              : { customerIds: walletAddress, limit: 10 }
-
-            const searchResponse =
-              await trailsClient.searchMeldTransactions(searchParams)
-
-            // Also try searching without specific customer ID to see all recent transactions
-            logger.console.log(
-              "[MeldStepsFlow] Also searching for any recent transactions...",
-            )
-            const allRecentResponse = await trailsClient.searchMeldTransactions(
-              {
-                limit: 5, // Get last 5 transactions regardless of customer ID
-              },
-            )
-            logger.console.log(
-              "[MeldStepsFlow] All recent transactions:",
-              allRecentResponse,
-            )
-
-            logger.console.log(
-              "[MeldStepsFlow] Search response:",
-              searchResponse,
-            )
-
-            // Parse the transactions response
-            let transactions: any
-            try {
-              transactions =
-                typeof searchResponse.transactions === "string"
-                  ? JSON.parse(searchResponse.transactions)
-                  : searchResponse.transactions
-            } catch (e) {
-              logger.console.error(
-                "[MeldStepsFlow] Error parsing search response:",
-                e,
-              )
-              return
-            }
-
-            // Check if we found any transactions
-            if (
-              transactions?.transactions &&
-              transactions.transactions.length > 0
-            ) {
-              const latestTransaction = transactions.transactions[0]
-              logger.console.log(
-                "[MeldStepsFlow] Found transaction from search:",
-                latestTransaction,
-              )
-
-              // Session ID is already saved from createMeldWidgetSession response
-              // No need to extract customer ID since we're using sessionIds for search
-
-              // Set the transaction ID for polling getMeldTransaction
-              const transactionId =
-                latestTransaction.id || latestTransaction.transactionId
-              logger.console.log(
-                "[MeldStepsFlow] Setting currentTransactionId for polling:",
-                transactionId,
-              )
-              setCurrentTransactionId(transactionId)
-
-              // Set initial status based on the transaction
-              let type: "success" | "error" | "pending" = "pending"
-              let message = "Payment is being processed..."
-
-              const statusLower = (latestTransaction.status || "").toLowerCase()
-              // Use complete Meld status mapping
-              switch (statusLower) {
-                // TERMINAL SUCCESS STATE
-                case "settled": {
-                  type = "success"
-                  const amount = latestTransaction.destinationAmount || ""
-                  const symbol = latestTransaction.destinationCurrencyCode || ""
-                  const chainId =
-                    latestTransaction.destinationChainId ||
-                    latestTransaction.networkId
-                  const provider =
-                    latestTransaction.serviceProvider || "provider"
-                  const chainName = chainId ? getChainName(Number(chainId)) : ""
-
-                  const cryptoInfo =
-                    amount && symbol
-                      ? `${amount} ${symbol}${chainName ? ` on ${chainName}` : ""} via ${provider.toUpperCase()}`
-                      : "crypto"
-                  const addressInfo = latestTransaction.walletAddress
-                    ? ` to ${truncateAddress(latestTransaction.walletAddress, 6, 4)}`
-                    : ""
-                  message = `Payment completed! ${cryptoInfo} purchased${addressInfo}`
-                  break
-                }
-
-                // TERMINAL FAILURE STATES
-                case "failed":
-                  type = "error"
-                  message =
-                    "Payment failed. Please try again with a different payment method."
-                  break
-                case "declined":
-                  type = "error"
-                  message =
-                    "Payment declined by your bank. Please check your payment method or try a different card."
-                  break
-                case "cancelled":
-                  type = "error"
-                  message =
-                    "Payment was cancelled. You can start a new transaction."
-                  break
-                case "refunded":
-                  type = "error"
-                  message =
-                    "Payment was refunded. Crypto could not be delivered."
-                  break
-
-                // TEMPORARY PROCESSING STATES
-                case "pending_created":
-                case "pending created":
-                  type = "pending"
-                  message =
-                    "Transaction created. Waiting for provider processing..."
-                  break
-                case "pending":
-                  type = "pending"
-                  message = "Payment submitted for review and verification..."
-                  break
-                case "settling":
-                  type = "pending"
-                  message = "Payment approved! Crypto transfer in progress..."
-                  break
-                case "two_fa_required":
-                case "2fa_required":
-                  type = "pending"
-                  message = "Please complete 2FA verification to continue..."
-                  break
-                case "two_fa_provided":
-                case "2fa_provided":
-                  type = "pending"
-                  message = "2FA submitted. Validating with card issuer..."
-                  break
-                case "error":
-                  type = "pending"
-                  message = "Processing error. Retrying automatically..."
-                  break
-
-                // LEGACY STATUS MAPPING
-                case "accepted":
-                case "authorized":
-                case "partially_settled":
-                case "completed":
-                case "success":
-                case "processing":
-                  type = "pending"
-                  message = "Payment is being processed..."
-                  break
-                case "authorization_expired":
-                  type = "error"
-                  message = "Payment authorization expired. Please try again."
-                  break
-
-                default:
-                  type = "pending"
-                  break
-              }
-
-              // Fallback message handling for pending states
-              if (
-                type === "pending" &&
-                !message.includes("Transaction created") &&
-                !message.includes("Payment submitted") &&
-                !message.includes("Payment approved") &&
-                !message.includes("complete 2FA") &&
-                !message.includes("2FA submitted") &&
-                !message.includes("Processing error")
-              ) {
-                const amount = latestTransaction.destinationAmount || ""
-                const symbol = latestTransaction.destinationCurrencyCode || ""
-                const chainId =
-                  latestTransaction.destinationChainId ||
-                  latestTransaction.networkId
-                const provider = latestTransaction.serviceProvider || "provider"
-                const chainName = chainId ? getChainName(Number(chainId)) : ""
-
-                const cryptoInfo =
-                  amount && symbol
-                    ? `${amount} ${symbol}${chainName ? ` on ${chainName}` : ""} via ${provider.toUpperCase()}`
-                    : "payment"
-                message = `${cryptoInfo} is being processed...`
-              }
-
-              setTransactionStatus({
-                status: latestTransaction.status || "PROCESSING",
-                message,
-                type,
-              })
-              logger.console.log(
-                "[MeldStepsFlow] Set transaction status from search:",
-                { status: latestTransaction.status, type, message },
-              )
-            } else {
-              logger.console.log(
-                "[MeldStepsFlow] No transactions found for wallet address:",
-                walletAddress,
-              )
-              logger.console.log(
-                "[MeldStepsFlow] Search result shows no transactions, this is normal for first-time users",
-              )
-              // Don't set any transaction status or error here - this is expected for new users
-            }
-          } catch (error) {
-            logger.console.error(
-              "[MeldStepsFlow] Error searching for transactions:",
-              error,
-            )
-          }
-        }, 100)
-      } else {
-        logger.console.log(
-          "[MeldStepsFlow] No wallet address available for transaction search",
-        )
-      }
-    }
-
-    if (finalTransactionId) {
-      logger.console.log(
-        "[MeldStepsFlow] Setting transaction ID for tracking from URL:",
-        finalTransactionId,
-      )
-      setCurrentTransactionId(finalTransactionId)
-
-      if (status) {
-        // Set initial status based on URL params from Meld
-        const statusLower = (status || "").toLowerCase()
-
-        // Use complete Meld status mapping
-        let type: "success" | "error" | "pending" = "pending"
-        switch (statusLower) {
-          case "settled":
-            type = "success"
-            break
-          case "failed":
-          case "declined":
-          case "cancelled":
-          case "refunded":
-          case "authorization_expired":
-            type = "error"
-            break
-          case "pending_created":
-          case "pending created":
-          case "pending":
-          case "settling":
-          case "two_fa_required":
-          case "2fa_required":
-          case "two_fa_provided":
-          case "2fa_provided":
-          case "error":
-          case "accepted":
-          case "authorized":
-          case "partially_settled":
-          case "completed":
-          case "success":
-          case "processing":
-            type = "pending"
-            break
-          default:
-            type = "pending"
-            break
-        }
-
-        // Create detailed message using Meld's redirect data
-        let message = "Payment is being processed..."
-        if (type === "success") {
-          const amount = cryptoAmount || ""
-          const symbol = cryptoCurrency || ""
-          const chainName = network || ""
-          // Extract provider from URL or use "MELD"
-          const provider = "MELD" // Default since we may not have provider info in URL params
-
-          const cryptoInfo =
-            amount && symbol
-              ? `${amount} ${symbol}${chainName ? ` on ${chainName}` : ""} via ${provider}`
-              : "crypto"
-          const addressInfo = walletAddress
-            ? ` to ${truncateAddress(walletAddress, 6, 4)}`
-            : ""
-          message = `Payment completed! ${cryptoInfo} purchased${addressInfo}`
-        } else if (type === "error") {
-          message = "Payment failed or was cancelled."
-        } else {
-          // For pending states, we might not have full transaction details yet
-          const amount = cryptoAmount || fiatAmount || ""
-          const symbol = cryptoCurrency || ""
-          const chainName = network || ""
-          const provider = "MELD" // Default provider
-
-          if (amount && symbol) {
-            const cryptoInfo = `${amount} ${symbol}${chainName ? ` on ${chainName}` : ""} via ${provider}`
-            message = `${cryptoInfo} is being processed...`
-          } else {
-            const fiatInfo =
-              fiatAmount && fiatCurrency
-                ? `${fiatCurrency} ${fiatAmount}`
-                : "payment"
-            message = `${fiatInfo} is being processed...`
-          }
-        }
-
-        setTransactionStatus({ status, message, type })
-        logger.console.log("[MeldStepsFlow] Set initial transaction status:", {
-          status,
-          type,
-          message,
-        })
-      }
-
-      // Clean up URL parameters (expand the list to include Meld's actual parameters)
-      const newUrl = new URL(window.location.href)
-      const paramsToClean = [
-        // Original fallback parameters
-        "transactionId",
-        "meld_transaction_id",
-        "transaction_id",
-        "id",
-        "sessionId",
-        "session_id",
-        "status",
-        "meld_status",
-        "transaction_status",
-        "state",
-        // Meld's actual redirect parameters
-        "orderId",
-        "partnerOrderId",
-        "partnerCustomerId",
-        "fiatAmount",
-        "cryptoAmount",
-        "fiatCurrency",
-        "cryptoCurrency",
-        "totalFeeInFiat",
-        "walletAddress",
-        "network",
-        "isBuyOrSell",
-        "isNFTOrder",
-      ]
-      for (const param of paramsToClean) {
-        newUrl.searchParams.delete(param)
-      }
-      window.history.replaceState(null, "", newUrl.toString())
-    } else {
-      logger.console.log(
-        "[MeldStepsFlow] No transaction ID found in URL parameters",
-      )
-    }
-  }, [trailsClient])
-
-  // Function to check transaction status
-  const checkTransactionStatus = useCallback(
-    async (transactionId: string) => {
-      // Validate transaction ID format
-      if (
-        !transactionId ||
-        transactionId.trim() === "" ||
-        transactionId === "null" ||
-        transactionId === "undefined"
-      ) {
-        logger.console.warn(
-          "[MeldStepsFlow] Invalid transaction ID, skipping API call:",
-          transactionId,
-        )
-        return
-      }
-
-      try {
-        logger.console.log(
-          "[MeldStepsFlow] Checking transaction status for ID:",
-          transactionId,
-        )
-        logger.console.log(
-          "[MeldStepsFlow] Making API call to getMeldTransaction...",
-        )
-        const response = await trailsClient.getMeldTransaction({
-          transactionId,
-        })
-        logger.console.log("[MeldStepsFlow] Raw API response:", response)
-        logger.console.log("[MeldStepsFlow] Response type:", typeof response)
-        logger.console.log(
-          "[MeldStepsFlow] Response keys:",
-          Object.keys(response || {}),
-        )
-        logger.console.log(
-          "[MeldStepsFlow] Transaction data:",
-          response?.transaction,
-        )
-        logger.console.log(
-          "[MeldStepsFlow] Transaction data type:",
-          typeof response?.transaction,
-        )
-
-        // Parse transaction data - it comes back as JSON string
-        let transaction: any
-        try {
-          transaction =
-            typeof response.transaction === "string"
-              ? JSON.parse(response.transaction)
-              : response.transaction
-        } catch (e) {
-          logger.console.error(
-            "[MeldStepsFlow] Error parsing transaction data:",
-            e,
-          )
-          return
-        }
-
-        // Handle nested transaction structure (transaction.transaction)
-        if (transaction?.transaction) {
-          transaction = transaction.transaction
-        }
-
-        if (!transaction) {
-          logger.console.warn("[MeldStepsFlow] No transaction data in response")
-          return
-        }
-
-        let type: "success" | "error" | "pending" = "pending"
-        let message = "Payment is being processed..."
-
-        logger.console.log(
-          "[MeldStepsFlow] Transaction status:",
-          transaction.status,
-        )
-
-        switch ((transaction.status || "").toLowerCase()) {
-          // TERMINAL SUCCESS STATE
-          case "settled": {
-            type = "success"
-            // Try multiple possible wallet address fields
-            const walletAddr =
-              transaction.walletAddress ||
-              transaction.destinationWalletAddress ||
-              transaction.cryptoDetails?.destinationWalletAddress ||
-              transaction.cryptoDetails?.sessionWalletAddress ||
-              ""
-            const addressInfo =
-              walletAddr && typeof walletAddr === "string"
-                ? ` sent to ${truncateAddress(walletAddr)}`
-                : ""
-            const amount =
-              transaction.destinationAmount ||
-              transaction.cryptoDetails?.destinationAmount ||
-              ""
-            const currency = transaction.destinationCurrencyCode || ""
-            const chainId =
-              transaction.destinationChainId || transaction.networkId
-            const provider = transaction.serviceProvider || "MELD"
-            const chainName = chainId ? getChainName(Number(chainId)) : ""
-
-            const cryptoInfo =
-              amount && currency
-                ? `${amount} ${currency}${chainName ? ` on ${chainName}` : ""} via ${provider.toUpperCase()}`
-                : "crypto"
-            message = `Payment completed! ${cryptoInfo} purchased${addressInfo}`
-            break
-          }
-
-          // TERMINAL FAILURE STATES
-          case "failed":
-            type = "error"
-            message =
-              "Payment failed. Please try again with a different payment method."
-            break
-          case "declined":
-            type = "error"
-            message =
-              "Payment declined by your bank. Please check your payment method or try a different card."
-            break
-          case "cancelled":
-            type = "error"
-            message = "Payment was cancelled. You can start a new transaction."
-            break
-          case "refunded":
-            type = "error"
-            message = "Payment was refunded. Crypto could not be delivered."
-            break
-
-          // TEMPORARY PROCESSING STATES
-          case "pending_created":
-          case "pending created":
-            type = "pending"
-            message = "Transaction created. Waiting for provider processing..."
-            break
-          case "pending":
-            type = "pending"
-            message = "Payment submitted for review and verification..."
-            break
-          case "settling":
-            type = "pending"
-            message = "Payment approved! Crypto transfer in progress..."
-            break
-          case "two_fa_required":
-          case "2fa_required":
-            type = "pending"
-            message = "Please complete 2FA verification to continue..."
-            break
-          case "two_fa_provided":
-          case "2fa_provided":
-            type = "pending"
-            message = "2FA submitted. Validating with card issuer..."
-            break
-          case "error":
-            type = "pending"
-            message = "Processing error. Retrying automatically..."
-            break
-
-          // LEGACY STATUS MAPPING
-          case "accepted":
-          case "authorized":
-          case "partially_settled":
-            type = "pending"
-            message = "Payment is being processed..."
-            break
-          case "authorization_expired":
-            type = "error"
-            message = "Payment authorization expired. Please try again."
-            break
-
-          // FALLBACK
-          case "processing":
-          case "completed":
-          case "success":
-            type = "pending"
-            message = "Payment is being processed..."
-            break
-          default:
-            type = "pending"
-            message = `Payment status: ${transaction.status || "Processing..."}`
-        }
-
-        logger.console.log("[MeldStepsFlow] Setting transaction status:", {
-          status: transaction.status,
-          message,
-          type,
-        })
-        setTransactionStatus({ status: transaction.status, message, type })
-        return transaction
-      } catch (error) {
-        logger.console.error(
-          "[MeldStepsFlow] Error checking transaction status:",
-          error,
-        )
-
-        // Provide more detailed error information
-        let errorMessage = "Unable to check payment status."
-        if (error instanceof Error) {
-          errorMessage = `Error: ${error.message}`
-          // Check for specific error types
-          if (
-            error.message.includes("404") ||
-            error.message.includes("not found")
-          ) {
-            errorMessage = `Transaction not found. ID: ${transactionId}`
-          } else if (
-            error.message.includes("401") ||
-            error.message.includes("Unauthorized")
-          ) {
-            errorMessage = "Not authorized to access transaction data."
-          } else if (error.message.includes("timeout")) {
-            errorMessage = "Request timed out. Please try again."
-          }
-        }
-
-        setTransactionStatus({
-          status: "error",
-          message: errorMessage,
-          type: "error",
-        })
-      }
-    },
-    [trailsClient],
-  )
-
-  // Generate widget URL using selected provider
-  const generateWidgetUrl = useCallback(async () => {
-    if (
-      !selectedProvider ||
-      !selectedCountry ||
-      !selectedToken ||
-      !selectedAmount
-    ) {
-      setWidgetUrl("")
-      setWidgetUrlError("Please select all required options")
-      return
-    }
-
-    if (!walletAddress) {
-      setWidgetUrl("")
-      setWidgetUrlError("Please connect your wallet first")
-      return
-    }
-
-    setIsLoadingUrl(true)
-    setWidgetUrlError("") // Clear previous errors
-    try {
-      // Generate external session ID for tracking
-      const externalSessionId = `meld-${Date.now()}-${Math.random().toString(36).substring(7)}`
-      logger.console.log(
-        "[MeldStepsFlow] Generated external session ID:",
-        externalSessionId,
-      )
-      localStorage.setItem(
-        "meld-current-external-session-id",
-        externalSessionId,
-      )
-      logger.console.log(
-        "[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,
-        serviceProvider: selectedProvider.serviceProvider,
-        paymentMethodType: selectedPaymentMethod,
-        externalSessionId,
-        walletAddress,
-      })
-
-      // Use the active wallet address directly
-      const effectiveCustomerId = normalizeAddress(walletAddress)
-
-      // Create widget session via API call - use wallet address as customer ID
-      const sessionResponse = await trailsClient.createMeldWidgetSession({
-        sessionData: {
-          walletAddress: walletAddress,
-          countryCode: selectedCountry.countryCode,
-          sourceCurrencyCode: selectedCurrency,
-          sourceAmount: selectedAmount,
-          destinationCurrencyCode: selectedToken.code,
-          serviceProvider: selectedProvider.serviceProvider,
-          paymentMethodType: selectedPaymentMethod || undefined,
-          // redirectUrl, // Redirect back to current page after completion
-        },
-        sessionType: "BUY",
-        externalCustomerId: effectiveCustomerId,
-        externalSessionId: externalSessionId,
-      })
-
-      logger.console.log("[MeldStepsFlow] Session response:", sessionResponse)
-
-      // The API returns { WidgetSession: { widgetUrl, serviceProviderWidgetUrl, ... } }
-      // Similar to QuoteResponse, it's wrapped in a capitalized object
-      const widgetSessionData =
-        (sessionResponse as any).WidgetSession || sessionResponse.widgetSession
-
-      if (!widgetSessionData) {
-        logger.console.error(
-          "[MeldStepsFlow] No WidgetSession found in response. Keys:",
-          Object.keys(sessionResponse),
-        )
-        setWidgetUrl("Error: No widget session data returned from API")
-        setIsLoadingUrl(false)
-        return
-      }
-
-      logger.console.log(
-        "[MeldStepsFlow] Widget session data:",
-        widgetSessionData,
-      )
-
-      // Store the customer ID returned by Meld (this is what we use for search)
-      const returnedCustomerId = widgetSessionData.customerId
-      if (returnedCustomerId) {
-        logger.console.log(
-          "[MeldStepsFlow] Storing customer ID for search:",
-          returnedCustomerId,
-        )
-        localStorage.setItem(
-          "meld-current-customer-id-for-search",
-          returnedCustomerId,
-        )
-      }
-
-      // Extract the URL from the widget session data
-      const widgetUrl =
-        widgetSessionData.serviceProviderWidgetUrl ||
-        widgetSessionData.widgetUrl ||
-        widgetSessionData.url ||
-        (typeof widgetSessionData === "string" ? widgetSessionData : null)
-
-      if (!widgetUrl) {
-        logger.console.error(
-          "[MeldStepsFlow] No widget URL found in session data. Keys:",
-          Object.keys(widgetSessionData),
-        )
-        setWidgetUrl("Error: No widget URL found in session data")
-        setIsLoadingUrl(false)
-        return
-      }
-
-      logger.console.log("[MeldStepsFlow] Widget URL:", widgetUrl)
-      setWidgetUrl(widgetUrl)
-      setWidgetUrlError("") // Clear any previous errors on success
-    } catch (error) {
-      logger.console.error(
-        "[MeldStepsFlow] Error generating widget URL:",
-        error,
-      )
-      setWidgetUrl("")
-
-      let errorMessage = error instanceof Error ? error.message : String(error)
-
-      // Provide more helpful error messages
-      if (errorMessage.includes("Invalid Customer")) {
-        errorMessage = `Payment provider issue: ${selectedProvider?.serviceProvider || "Unknown provider"} is currently unavailable. Please try again later or contact support.`
-      } else if (errorMessage.includes("BAD_REQUEST")) {
-        errorMessage =
-          "Invalid request parameters. Please check your selection and try again."
-      }
-
-      setWidgetUrlError(errorMessage)
-    } finally {
-      setIsLoadingUrl(false)
-    }
-  }, [
-    selectedProvider,
-    selectedCountry,
-    selectedToken,
-    selectedAmount,
-    selectedCurrency,
-    selectedPaymentMethod,
-    walletAddress,
-    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:", {
-      currentTransactionId,
-      transactionStatusType: transactionStatus.type,
-      shouldReturn:
-        !currentTransactionId ||
-        transactionStatus.type === "success" ||
-        transactionStatus.type === "error",
-    })
-
-    if (currentTransactionId) {
-      logger.console.log(
-        "[MeldStepsFlow] Will poll getMeldTransaction API with transaction ID:",
-        currentTransactionId,
-      )
-    }
-
-    if (
-      !currentTransactionId ||
-      transactionStatus.type === "success" ||
-      transactionStatus.type === "error"
-    ) {
-      logger.console.log(
-        "[MeldStepsFlow] Polling useEffect: Not starting poll, conditions not met",
-      )
-      return
-    }
-
-    logger.console.log(
-      "[MeldStepsFlow] Starting transaction polling for ID:",
-      currentTransactionId,
-    )
-    const pollInterval = setInterval(() => {
-      logger.console.log(
-        "[MeldStepsFlow] Interval check for transaction:",
-        currentTransactionId,
-      )
-      checkTransactionStatus(currentTransactionId)
-    }, 10 * SECOND_MS) // Poll every 10 seconds
-
-    // Initial check
-    logger.console.log(
-      "[MeldStepsFlow] Initial transaction status check for:",
-      currentTransactionId,
-    )
-    checkTransactionStatus(currentTransactionId)
-
-    return () => clearInterval(pollInterval)
-  }, [currentTransactionId, transactionStatus.type, checkTransactionStatus])
-
-  // Save to local storage when selections change
-  useEffect(() => {
-    if (selectedCountry) {
-      localStorage.setItem(
-        "meld-debug-country",
-        JSON.stringify(selectedCountry),
-      )
-    }
-  }, [selectedCountry])
-
-  useEffect(() => {
-    if (selectedPaymentMethod) {
-      localStorage.setItem("meld-debug-payment-method", selectedPaymentMethod)
-    }
-  }, [selectedPaymentMethod])
-
-  useEffect(() => {
-    if (selectedToken) {
-      localStorage.setItem("meld-debug-token", JSON.stringify(selectedToken))
-    }
-  }, [selectedToken])
-
-  // Load providers by calling the quote API
-  const loadProviders = useCallback(async () => {
-    if (!selectedCountry || !selectedToken || !selectedAmount) {
-      return
-    }
-
-    setIsLoadingProviders(true)
-    setAvailableProviders([]) // Clear existing providers
-    try {
-      // First, get a quote to find the best service provider
-      const quoteResponse = await trailsClient.getMeldQuote({
-        walletAddress: "0x1234567890123456789012345678901234567890",
-        countryCode: selectedCountry.countryCode,
-        sourceCurrencyCode: selectedCurrency,
-        sourceAmount: selectedAmount,
-        destinationCurrencyCode: selectedToken.code,
-      })
-
-      logger.console.log("[MeldStepsFlow] Quote response:", quoteResponse)
-
-      // Parse the JSON string in quoteResponse field
-      let parsedQuoteResponse: any
-      try {
-        parsedQuoteResponse =
-          typeof quoteResponse.quoteResponse === "string"
-            ? JSON.parse(quoteResponse.quoteResponse)
-            : quoteResponse.quoteResponse
-      } catch (e) {
-        logger.console.error("[MeldStepsFlow] Error parsing quote response:", e)
-        setIsLoadingProviders(false)
-        return
-      }
-
-      logger.console.log(
-        "[MeldStepsFlow] Parsed quote response:",
-        parsedQuoteResponse,
-      )
-      const quotes = parsedQuoteResponse?.quotes
-      if (!quotes || quotes.length === 0) {
-        setWidgetUrl("No quotes available for this selection")
-        setIsLoadingUrl(false)
-        return
-      }
-
-      // Store all available providers for user selection
-      setAvailableProviders(quotes)
-
-      // Auto-select the first provider to save time
-      if (quotes.length > 0) {
-        setSelectedProvider(quotes[0])
-      }
-
-      setIsLoadingProviders(false)
-    } catch (error) {
-      logger.console.error("Error loading providers:", error)
-      setIsLoadingProviders(false)
-    }
-  }, [
-    selectedCountry,
-    selectedToken,
-    selectedAmount,
-    selectedCurrency,
-    trailsClient,
-  ])
-
-  // Refetch providers when visiting the providers screen, but only if we don't have providers
-  useEffect(() => {
-    if (currentScreen === "providers" && availableProviders.length === 0) {
-      loadProviders()
-    }
-  }, [currentScreen, loadProviders, availableProviders.length])
-
-  const handleBackFromSubScreen = () => {
-    setCurrentScreen("menu")
-  }
-
-  const handleSelectCountry = (country: Country) => {
-    setSelectedCountry(country)
-    // Clear providers since country change affects quotes
-    setAvailableProviders([])
-    setSelectedProvider(null)
-    setHasClickedContinue(false) // Reset continue button state
-    setWidgetUrl("") // Clear widget URL
-    setWidgetUrlError("") // Clear widget URL errors
-    setCurrentScreen("menu")
-  }
-
-  const handleSelectPaymentMethod = (paymentMethod: MeldPaymentMethod) => {
-    setSelectedPaymentMethod(paymentMethod)
-    // Clear providers since payment method change affects quotes
-    setAvailableProviders([])
-    setSelectedProvider(null)
-    setHasClickedContinue(false) // Reset continue button state
-    setWidgetUrl("") // Clear widget URL
-    setWidgetUrlError("") // Clear widget URL errors
-    setCurrentScreen("menu")
-  }
-
-  const handleSelectToken = (token: MeldToken) => {
-    setSelectedToken(token)
-    // Clear providers since token change affects quotes
-    setAvailableProviders([])
-    setSelectedProvider(null)
-    setHasClickedContinue(false) // Reset continue button state
-    setWidgetUrl("") // Clear widget URL
-    setWidgetUrlError("") // Clear widget URL errors
-    setCurrentScreen("menu")
-  }
-
-  const handleAmountContinue = (amount: string, currency: string) => {
-    setSelectedAmount(amount)
-    setSelectedCurrency(currency)
-    // Clear providers since amount/currency change affects quotes
-    setAvailableProviders([])
-    setSelectedProvider(null)
-    setHasClickedContinue(false) // Reset continue button state
-    setWidgetUrl("") // Clear widget URL
-    setWidgetUrlError("") // Clear widget URL errors
-    setCurrentScreen("providers")
-  }
-
-  const handleSelectProvider = (provider: MeldQuote) => {
-    setSelectedProvider(provider)
-    setHasClickedContinue(false) // Reset continue button state for new provider
-    setWidgetUrl("") // Clear widget URL to force regeneration
-    setWidgetUrlError("") // Clear any widget URL errors
-    setCurrentScreen("menu")
-    // Widget URL will be auto-generated by useEffect
-  }
-
-  // Load providers when basic selections are made
-  useEffect(() => {
-    if (selectedCountry && selectedToken && selectedAmount) {
-      loadProviders()
-    }
-  }, [selectedCountry, selectedToken, selectedAmount, loadProviders])
-
-  // Auto-generate widget URL when provider is selected (including auto-selection)
-  useEffect(() => {
-    if (
-      selectedProvider &&
-      selectedCountry &&
-      selectedToken &&
-      selectedAmount
-    ) {
-      generateWidgetUrl()
-    }
-  }, [
-    selectedProvider,
-    selectedCountry,
-    selectedToken,
-    selectedAmount,
-    generateWidgetUrl,
-  ])
-
-  // Render sub-screens
-  if (currentScreen === "countries") {
-    return (
-      <MeldCountriesList
-        onBack={handleBackFromSubScreen}
-        onSelectCountry={handleSelectCountry}
-        selectedCountry={selectedCountry}
-      />
-    )
-  }
-
-  if (currentScreen === "payment-methods") {
-    return (
-      <MeldFundMethods
-        onBack={handleBackFromSubScreen}
-        onSelectPaymentMethod={handleSelectPaymentMethod}
-        selectedPaymentMethod={selectedPaymentMethod}
-        trailsClient={trailsClient}
-        onNavigateToFund={() => {
-          // Navigate to the fund-form screen, bypassing the payment selection
-          setGlobalScreen("fund-form")
-        }}
-      />
-    )
-  }
-
-  if (currentScreen === "tokens") {
-    return (
-      <MeldTokensList
-        onBack={handleBackFromSubScreen}
-        onSelectToken={handleSelectToken}
-        selectedToken={selectedToken}
-        trailsClient={trailsClient}
-        countryCode={selectedCountry?.countryCode}
-      />
-    )
-  }
-
-  if (currentScreen === "amount") {
-    return (
-      <AmountInputScreen
-        onBack={(amount, currency) => {
-          // Save the amount and currency before going back
-          if (amount) {
-            setSelectedAmount(amount)
-            localStorage.setItem(MELD_AMOUNT_STORAGE_KEY, amount)
-          }
-          if (currency) {
-            setSelectedCurrency(currency)
-            localStorage.setItem(MELD_CURRENCY_STORAGE_KEY, currency)
-          }
-          setCurrentScreen("menu")
-        }}
-        onContinue={handleAmountContinue}
-        _selectedCountry={selectedCountry}
-        _selectedToken={selectedToken}
-        _selectedPaymentMethod={selectedPaymentMethod}
-        initialAmount={selectedAmount}
-        initialCurrency={selectedCurrency}
-      />
-    )
-  }
-
-  if (currentScreen === "providers") {
-    return (
-      <div className="flex flex-col h-full">
-        {/* Transaction Status Display */}
-        {transactionStatus.type && hasClickedContinue && (
-          <div
-            className={`p-4 border-b ${
-              transactionStatus.type === "success"
-                ? "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-700"
-                : transactionStatus.type === "error"
-                  ? "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-700"
-                  : "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-700"
-            }`}
-          >
-            <div className="flex items-center gap-3">
-              {transactionStatus.type === "success" && (
-                <div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
-                  <span className="text-white text-xs">✓</span>
-                </div>
-              )}
-              {transactionStatus.type === "error" && (
-                <div className="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center">
-                  <span className="text-white text-xs">✕</span>
-                </div>
-              )}
-              {transactionStatus.type === "pending" && (
-                <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500"></div>
-              )}
-              <div>
-                <p
-                  className={`font-medium ${
-                    transactionStatus.type === "success"
-                      ? "text-green-800 dark:text-green-200"
-                      : transactionStatus.type === "error"
-                        ? "text-red-800 dark:text-red-200"
-                        : "text-blue-800 dark:text-blue-200"
-                  }`}
-                >
-                  {transactionStatus.message}
-                </p>
-                {transactionStatus.type === "pending" && (
-                  <p className="text-sm text-blue-600 dark:text-blue-400">
-                    We'll update you when the payment completes.
-                  </p>
-                )}
-              </div>
-              {(transactionStatus.type === "success" ||
-                transactionStatus.type === "error") && (
-                <button
-                  type="button"
-                  onClick={() =>
-                    setTransactionStatus({
-                      status: "",
-                      message: "",
-                      type: null,
-                    })
-                  }
-                  className="ml-auto text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-                >
-                  ✕
-                </button>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Providers list with its own header */}
-        <div className="flex-1">
-          <MeldProvidersList
-            onBack={() => {
-              setHasClickedContinue(false) // Reset continue button state when going back
-              setCurrentScreen("menu")
-            }}
-            onSelectProvider={handleSelectProvider}
-            selectedProvider={selectedProvider}
-            providers={availableProviders}
-          />
-        </div>
-
-        {/* Continue to Provider button and debug tools */}
-        {selectedProvider && (
-          <div className="p-4 border-t border-gray-200 dark:border-gray-700 space-y-3">
-            {/* Error display */}
-            {widgetUrlError && (
-              <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 rounded-lg">
-                <p className="text-sm text-red-800 dark:text-red-200">
-                  <strong>Error:</strong> {widgetUrlError}
-                </p>
-              </div>
-            )}
-
-            <button
-              type="button"
-              onClick={() => {
-                if (widgetUrl && !hasClickedContinue) {
-                  const popup = window.open(
-                    widgetUrl,
-                    "_blank",
-                    "width=800,height=600,scrollbars=yes,resizable=yes",
-                  )
-
-                  if (!popup) {
-                    logger.console.error(
-                      "[MeldStepsFlow] Popup blocked by browser",
-                    )
-                    setWidgetUrlError(
-                      "Popup blocked. Please allow popups for this site.",
-                    )
-                    return
-                  }
-
-                  setHasClickedContinue(true)
-
-                  // Start polling for transactions after user goes to Meld
-                  if (walletAddress) {
-                    logger.console.log(
-                      "[MeldStepsFlow] Starting transaction search after widget opened",
-                    )
-
-                    // Search for transactions every 5 seconds to detect when user returns
-                    const searchInterval = setInterval(async () => {
-                      try {
-                        // Use stored customer ID from createMeldWidgetSession response
-                        const storedCustomerId = localStorage.getItem(
-                          "meld-current-customer-id-for-search",
-                        )
-
-                        // Search by customerIds (using customerId value) if available, otherwise fallback to customerIds with wallet address
-                        const searchParams = storedCustomerId
-                          ? { customerIds: storedCustomerId, limit: 5 }
-                          : { customerIds: walletAddress, limit: 5 }
-
-                        logger.console.log(
-                          "[MeldStepsFlow] Polling search with params:",
-                          searchParams,
-                        )
-                        const searchResponse =
-                          await trailsClient.searchMeldTransactions(
-                            searchParams,
-                          )
-
-                        // Parse and check for new transactions
-                        let transactions: MeldTransaction[] | any
-                        try {
-                          transactions =
-                            typeof searchResponse.transactions === "string"
-                              ? JSON.parse(searchResponse.transactions)
-                              : searchResponse.transactions
-                        } catch (e) {
-                          logger.console.error(
-                            "[MeldStepsFlow] Error parsing search response:",
-                            e,
-                          )
-                          return
-                        }
-
-                        if (
-                          transactions?.transactions &&
-                          transactions.transactions.length > 0
-                        ) {
-                          const latestTransaction = transactions.transactions[0]
-                          const transactionId =
-                            latestTransaction.id ||
-                            latestTransaction.transactionId
-
-                          // Check if this is a new transaction (not already being tracked)
-                          if (
-                            transactionId &&
-                            transactionId !== currentTransactionId
-                          ) {
-                            logger.console.log(
-                              "[MeldStepsFlow] Found new transaction:",
-                              transactionId,
-                            )
-                            setCurrentTransactionId(transactionId)
-                            clearInterval(searchInterval) // Stop searching once we find a transaction
-                          }
-                        }
-                      } catch (error) {
-                        logger.console.error(
-                          "[MeldStepsFlow] Search polling error:",
-                          error,
-                        )
-                      }
-                    }, 5 * SECOND_MS) // Poll every 5 seconds
-
-                    // Stop searching after 10 minutes
-                    setTimeout(() => {
-                      clearInterval(searchInterval)
-                      logger.console.log(
-                        "[MeldStepsFlow] Stopped transaction search polling",
-                      )
-                    }, 10 * MINUTE_MS)
-                  }
-                }
-              }}
-              disabled={
-                isLoadingUrl ||
-                !widgetUrl ||
-                !!widgetUrlError ||
-                hasClickedContinue
-              }
-              className={`w-full flex items-center justify-center py-3 px-4 font-semibold rounded-lg transition-colors ${
-                isLoadingUrl ||
-                !widgetUrl ||
-                !!widgetUrlError ||
-                hasClickedContinue
-                  ? "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 Widget...</span>
-                </>
-              ) : (
-                <>
-                  <span>
-                    {hasClickedContinue
-                      ? "Provider Opened"
-                      : "Continue to Provider"}
-                  </span>
-                  <ExternalLink className="w-4 h-4 ml-2" />
-                </>
-              )}
-            </button>
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  // Main menu screen - Show new MeldForm as primary interface
-  return (
-    <div className="flex flex-col h-full">
-      {/* Primary Interface - New Simplified MeldForm */}
-      <MeldForm
-        trailsApiKey={trailsConfig.trailsApiKey}
-        onBack={_onBack}
-        onTransactionStatus={(status) => {
-          setTransactionStatus({
-            status: status.message,
-            message: status.message,
-            type: status.type,
-          })
-        }}
-        onNavigateToCountries={() => setCurrentScreen("countries")}
-        onNavigateToPaymentMethods={() => setCurrentScreen("payment-methods")}
-        onNavigateToTokens={() => setCurrentScreen("tokens")}
-        onNavigateToProviders={() => setCurrentScreen("providers")}
-        onNavigateToHistory={() => setGlobalScreen("meld-history")}
-        onSelectProvider={setSelectedProvider}
-        onProvidersLoaded={setAvailableProviders}
-        selectedCountry={selectedCountry}
-        selectedPaymentMethod={selectedPaymentMethod}
-        selectedToken={selectedToken}
-        selectedProvider={selectedProvider}
-      />
-    </div>
-  )
-}