0xtrails 0.16.1 → 0.17.0

package/dist/widget/components/MeldStepsFlow.js

@@ -1,785 +0,0 @@
-import { logger as t } from "../../logger/index.js";
-import { SECOND_MS as Fe } from "../../utils/time.js";
-import { getChainName as fe } from "../../chains.js";
-import { normalizeAddress as xe, truncateAddress as he } from "../../utils/address.js";
-import { useOriginSelectedToken as Ne } from "../../hooks/useOriginSelectedToken.js";
-import { isPositiveNumber as Ae } from "../../utils/validation.js";
-import { useViewManager as Te } from "../../hooks/useViewManager.js";
-import { ScreenHeader as _e } from "./ScreenHeader.js";
-import { useTokenList as $e } from "../../hooks/useTokenList.js";
-import { useTrails as Ee } from "../providers/TrailsProvider.js";
-import { MeldCountriesList as Ue } from "../../meld/components/MeldCountriesList.js";
-import { MeldFundMethods as Re } from "../../meld/components/MeldFundMethods.js";
-import { MeldProvidersList as De } from "../../meld/components/MeldProvidersList.js";
-import { getMeldOnrampClient as Le } from "../../meld/utils/meld.js";
-import { MeldTokensList as Oe } from "../../meld/components/MeldTokensList.js";
-import { MeldForm as We } from "./MeldForm.js";
-import { useCallback as Q, useEffect as T, useMemo as qe, useState as f } from "react";
-import { useAccount as Be } from "@0xtrails/wallet";
-import { Fragment as Se, jsx as n, jsxs as v } from "react/jsx-runtime";
-import { ExternalLink as ze } from "lucide-react";
-var be = "meld-form-amount", we = "meld-debug-currency", je = ({ onBack: se, onContinue: R, _selectedCountry: ne, _selectedToken: ae, _selectedPaymentMethod: le, initialAmount: V = "", initialCurrency: _ = "USD" }) => {
-  const [d, I] = f(V), [u, g] = f(_), X = parseFloat(d), h = d.trim() !== "" && Ae(X) && X <= 1e4;
-  return T(() => {
-    d && localStorage.setItem(be, d), u && localStorage.setItem(we, u);
-  }, [d, u]), /* @__PURE__ */ v("div", {
-    className: "flex flex-col h-full",
-    children: [
-      /* @__PURE__ */ n(_e, {
-        onBack: () => se(d, u),
-        headerContent: "Enter Amount"
-      }),
-      /* @__PURE__ */ n("div", {
-        className: "flex-1 p-4",
-        children: /* @__PURE__ */ v("div", {
-          className: "max-w-md mx-auto",
-          children: [
-            /* @__PURE__ */ n("label", {
-              htmlFor: "meld-steps-amount",
-              className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2",
-              children: "How much do you want to spend?"
-            }),
-            /* @__PURE__ */ v("div", {
-              className: "relative",
-              children: [/* @__PURE__ */ v("select", {
-                value: u,
-                onChange: ($) => g($.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",
-                children: [
-                  /* @__PURE__ */ n("option", {
-                    value: "USD",
-                    children: "$"
-                  }),
-                  /* @__PURE__ */ n("option", {
-                    value: "EUR",
-                    children: "€"
-                  }),
-                  /* @__PURE__ */ n("option", {
-                    value: "GBP",
-                    children: "£"
-                  })
-                ]
-              }), /* @__PURE__ */ n("input", {
-                id: "meld-steps-amount",
-                type: "number",
-                value: d,
-                onChange: ($) => I($.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"
-              })]
-            }),
-            /* @__PURE__ */ n("div", {
-              className: "mt-4 grid grid-cols-4 gap-2",
-              children: [
-                "25",
-                "50",
-                "100",
-                "500"
-              ].map(($) => /* @__PURE__ */ v("button", {
-                type: "button",
-                onClick: () => I($),
-                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",
-                children: [u === "USD" ? "$" : u === "EUR" ? "€" : "£", $]
-              }, $))
-            }),
-            d && !h && /* @__PURE__ */ n("div", {
-              className: "mt-2 text-sm text-red-600 dark:text-red-400",
-              children: "Please enter a valid amount between $1 and $10,000"
-            })
-          ]
-        })
-      }),
-      /* @__PURE__ */ n("div", {
-        className: "p-4 border-t border-gray-200 dark:border-gray-700",
-        children: /* @__PURE__ */ n("button", {
-          type: "button",
-          onClick: () => R(d, u),
-          disabled: !h,
-          className: `w-full py-3 px-4 rounded-lg font-semibold transition-colors ${h ? "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"}`,
-          children: "Continue to Providers"
-        })
-      })
-    ]
-  });
-}, gt = ({ onBack: se }) => {
-  const R = Ee(), { navigate: ne, goHome: ae } = Te(), { setSelectedToken: le } = Ne(), { filteredTokens: V } = $e({
-    onContinue: () => {
-    },
-    onError: () => {
-    }
-  }), { address: _ } = Be(), d = qe(() => Le(R.trailsApiKey, R.trailsApiUrl), [R.trailsApiKey, R.trailsApiUrl]), [I, u] = f("menu");
-  T(() => {
-    const e = localStorage.getItem(be), r = localStorage.getItem(we);
-    e && ie(e), r && ce(r);
-  }, []);
-  const [g, X] = f(() => {
-    try {
-      const e = localStorage.getItem("meld-debug-country");
-      return e ? JSON.parse(e) : null;
-    } catch {
-      return null;
-    }
-  }), [h, $] = f(() => {
-    try {
-      return localStorage.getItem("meld-debug-payment-method") || null;
-    } catch {
-      return null;
-    }
-  }), [p, ve] = f(() => {
-    try {
-      const e = localStorage.getItem("meld-debug-token");
-      return e ? JSON.parse(e) : null;
-    } catch {
-      return null;
-    }
-  }), [k, ie] = f(""), [z, ce] = f("USD"), [F, b] = f(""), [de, j] = f(!1), [Z, M] = f(""), [ue, D] = f([]), [Je, ee] = f(!1), [x, L] = f(null), [J, O] = f(!1), [w, pe] = f(null), [m, W] = f({
-    status: "",
-    message: "",
-    type: null
-  });
-  T(() => {
-    const e = new URLSearchParams(window.location.search);
-    t.console.log("[MeldStepsFlow] All URL parameters:", Object.fromEntries(e.entries()));
-    const r = e.get("orderId") || e.get("partnerOrderId") || e.get("transactionId") || e.get("meld_transaction_id") || e.get("transaction_id") || e.get("id"), o = e.get("status") || e.get("meld_status") || e.get("transaction_status") || e.get("state"), s = e.get("fiatAmount"), a = e.get("cryptoAmount"), y = e.get("fiatCurrency"), N = e.get("cryptoCurrency"), oe = e.get("totalFeeInFiat"), S = e.get("walletAddress"), q = e.get("network");
-    t.console.log("[MeldStepsFlow] Meld transaction details:", {
-      transactionId: r,
-      status: o,
-      fiatAmount: s,
-      cryptoAmount: a,
-      fiatCurrency: y,
-      cryptoCurrency: N,
-      totalFee: oe,
-      walletAddress: S,
-      network: q
-    }), t.console.log("[MeldStepsFlow] Extracted transaction ID:", r), t.console.log("[MeldStepsFlow] Extracted status:", o);
-    const B = r;
-    if (B || (t.console.log("[MeldStepsFlow] No transaction ID in URL, will search by wallet address:", S), S ? (t.console.log("[MeldStepsFlow] Searching for transactions by wallet address (external customer ID):", S), setTimeout(async () => {
-      try {
-        const P = localStorage.getItem("meld-current-customer-id-for-search");
-        t.console.log("[MeldStepsFlow] About to call searchMeldTransactions with params:", {
-          customerIds: P,
-          fallbackCustomerIds: S,
-          limit: 10
-        });
-        const E = await d.searchMeldTransactions(P ? {
-          customerIds: P,
-          limit: 10
-        } : {
-          customerIds: S,
-          limit: 10
-        });
-        t.console.log("[MeldStepsFlow] Also searching for any recent transactions...");
-        const A = await d.searchMeldTransactions({ limit: 5 });
-        t.console.log("[MeldStepsFlow] All recent transactions:", A), t.console.log("[MeldStepsFlow] Search response:", E);
-        let C;
-        try {
-          C = typeof E.transactions == "string" ? JSON.parse(E.transactions) : E.transactions;
-        } catch (l) {
-          t.console.error("[MeldStepsFlow] Error parsing search response:", l);
-          return;
-        }
-        if (C?.transactions && C.transactions.length > 0) {
-          const l = C.transactions[0];
-          t.console.log("[MeldStepsFlow] Found transaction from search:", l);
-          const U = l.id || l.transactionId;
-          t.console.log("[MeldStepsFlow] Setting currentTransactionId for polling:", U), pe(U);
-          let i = "pending", c = "Payment is being processed...";
-          switch ((l.status || "").toLowerCase()) {
-            case "settled": {
-              i = "success";
-              const K = l.destinationAmount || "", G = l.destinationCurrencyCode || "", Y = l.destinationChainId || l.networkId, ye = l.serviceProvider || "provider", H = Y ? fe(Number(Y)) : "";
-              c = `Payment completed! ${K && G ? `${K} ${G}${H ? ` on ${H}` : ""} via ${ye.toUpperCase()}` : "crypto"} purchased${l.walletAddress ? ` to ${he(l.walletAddress, 6, 4)}` : ""}`;
-              break;
-            }
-            case "failed":
-              i = "error", c = "Payment failed. Please try again with a different payment method.";
-              break;
-            case "declined":
-              i = "error", c = "Payment declined by your bank. Please check your payment method or try a different card.";
-              break;
-            case "cancelled":
-              i = "error", c = "Payment was cancelled. You can start a new transaction.";
-              break;
-            case "refunded":
-              i = "error", c = "Payment was refunded. Crypto could not be delivered.";
-              break;
-            case "pending_created":
-            case "pending created":
-              i = "pending", c = "Transaction created. Waiting for provider processing...";
-              break;
-            case "pending":
-              i = "pending", c = "Payment submitted for review and verification...";
-              break;
-            case "settling":
-              i = "pending", c = "Payment approved! Crypto transfer in progress...";
-              break;
-            case "two_fa_required":
-            case "2fa_required":
-              i = "pending", c = "Please complete 2FA verification to continue...";
-              break;
-            case "two_fa_provided":
-            case "2fa_provided":
-              i = "pending", c = "2FA submitted. Validating with card issuer...";
-              break;
-            case "error":
-              i = "pending", c = "Processing error. Retrying automatically...";
-              break;
-            case "accepted":
-            case "authorized":
-            case "partially_settled":
-            case "completed":
-            case "success":
-            case "processing":
-              i = "pending", c = "Payment is being processed...";
-              break;
-            case "authorization_expired":
-              i = "error", c = "Payment authorization expired. Please try again.";
-              break;
-            default:
-              i = "pending";
-              break;
-          }
-          if (i === "pending" && !c.includes("Transaction created") && !c.includes("Payment submitted") && !c.includes("Payment approved") && !c.includes("complete 2FA") && !c.includes("2FA submitted") && !c.includes("Processing error")) {
-            const K = l.destinationAmount || "", G = l.destinationCurrencyCode || "", Y = l.destinationChainId || l.networkId, ye = l.serviceProvider || "provider", H = Y ? fe(Number(Y)) : "";
-            c = `${K && G ? `${K} ${G}${H ? ` on ${H}` : ""} via ${ye.toUpperCase()}` : "payment"} is being processed...`;
-          }
-          W({
-            status: l.status || "PROCESSING",
-            message: c,
-            type: i
-          }), t.console.log("[MeldStepsFlow] Set transaction status from search:", {
-            status: l.status,
-            type: i,
-            message: c
-          });
-        } else
-          t.console.log("[MeldStepsFlow] No transactions found for wallet address:", S), t.console.log("[MeldStepsFlow] Search result shows no transactions, this is normal for first-time users");
-      } catch (P) {
-        t.console.error("[MeldStepsFlow] Error searching for transactions:", P);
-      }
-    }, 100)) : t.console.log("[MeldStepsFlow] No wallet address available for transaction search")), B) {
-      if (t.console.log("[MeldStepsFlow] Setting transaction ID for tracking from URL:", B), pe(B), o) {
-        const E = (o || "").toLowerCase();
-        let A = "pending";
-        switch (E) {
-          case "settled":
-            A = "success";
-            break;
-          case "failed":
-          case "declined":
-          case "cancelled":
-          case "refunded":
-          case "authorization_expired":
-            A = "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":
-            A = "pending";
-            break;
-          default:
-            A = "pending";
-            break;
-        }
-        let C = "Payment is being processed...";
-        if (A === "success") {
-          const l = a || "", U = N || "", i = q || "";
-          C = `Payment completed! ${l && U ? `${l} ${U}${i ? ` on ${i}` : ""} via MELD` : "crypto"} purchased${S ? ` to ${he(S, 6, 4)}` : ""}`;
-        } else if (A === "error") C = "Payment failed or was cancelled.";
-        else {
-          const l = a || s || "", U = N || "", i = q || "";
-          l && U ? C = `${`${l} ${U}${i ? ` on ${i}` : ""} via MELD`} is being processed...` : C = `${s && y ? `${y} ${s}` : "payment"} is being processed...`;
-        }
-        W({
-          status: o,
-          message: C,
-          type: A
-        }), t.console.log("[MeldStepsFlow] Set initial transaction status:", {
-          status: o,
-          type: A,
-          message: C
-        });
-      }
-      const P = new URL(window.location.href);
-      for (const E of [
-        "transactionId",
-        "meld_transaction_id",
-        "transaction_id",
-        "id",
-        "sessionId",
-        "session_id",
-        "status",
-        "meld_status",
-        "transaction_status",
-        "state",
-        "orderId",
-        "partnerOrderId",
-        "partnerCustomerId",
-        "fiatAmount",
-        "cryptoAmount",
-        "fiatCurrency",
-        "cryptoCurrency",
-        "totalFeeInFiat",
-        "walletAddress",
-        "network",
-        "isBuyOrSell",
-        "isNFTOrder"
-      ]) P.searchParams.delete(E);
-      window.history.replaceState(null, "", P.toString());
-    } else t.console.log("[MeldStepsFlow] No transaction ID found in URL parameters");
-  }, [d]);
-  const ge = Q(async (e) => {
-    if (!e || e.trim() === "" || e === "null" || e === "undefined") {
-      t.console.warn("[MeldStepsFlow] Invalid transaction ID, skipping API call:", e);
-      return;
-    }
-    try {
-      t.console.log("[MeldStepsFlow] Checking transaction status for ID:", e), t.console.log("[MeldStepsFlow] Making API call to getMeldTransaction...");
-      const r = await d.getMeldTransaction({ transactionId: e });
-      t.console.log("[MeldStepsFlow] Raw API response:", r), t.console.log("[MeldStepsFlow] Response type:", typeof r), t.console.log("[MeldStepsFlow] Response keys:", Object.keys(r || {})), t.console.log("[MeldStepsFlow] Transaction data:", r?.transaction), t.console.log("[MeldStepsFlow] Transaction data type:", typeof r?.transaction);
-      let o;
-      try {
-        o = typeof r.transaction == "string" ? JSON.parse(r.transaction) : r.transaction;
-      } catch (y) {
-        t.console.error("[MeldStepsFlow] Error parsing transaction data:", y);
-        return;
-      }
-      if (o?.transaction && (o = o.transaction), !o) {
-        t.console.warn("[MeldStepsFlow] No transaction data in response");
-        return;
-      }
-      let s = "pending", a = "Payment is being processed...";
-      switch (t.console.log("[MeldStepsFlow] Transaction status:", o.status), (o.status || "").toLowerCase()) {
-        case "settled": {
-          s = "success";
-          const y = o.walletAddress || o.destinationWalletAddress || o.cryptoDetails?.destinationWalletAddress || o.cryptoDetails?.sessionWalletAddress || "", N = y && typeof y == "string" ? ` sent to ${he(y)}` : "", oe = o.destinationAmount || o.cryptoDetails?.destinationAmount || "", S = o.destinationCurrencyCode || "", q = o.destinationChainId || o.networkId, B = o.serviceProvider || "MELD", P = q ? fe(Number(q)) : "";
-          a = `Payment completed! ${oe && S ? `${oe} ${S}${P ? ` on ${P}` : ""} via ${B.toUpperCase()}` : "crypto"} purchased${N}`;
-          break;
-        }
-        case "failed":
-          s = "error", a = "Payment failed. Please try again with a different payment method.";
-          break;
-        case "declined":
-          s = "error", a = "Payment declined by your bank. Please check your payment method or try a different card.";
-          break;
-        case "cancelled":
-          s = "error", a = "Payment was cancelled. You can start a new transaction.";
-          break;
-        case "refunded":
-          s = "error", a = "Payment was refunded. Crypto could not be delivered.";
-          break;
-        case "pending_created":
-        case "pending created":
-          s = "pending", a = "Transaction created. Waiting for provider processing...";
-          break;
-        case "pending":
-          s = "pending", a = "Payment submitted for review and verification...";
-          break;
-        case "settling":
-          s = "pending", a = "Payment approved! Crypto transfer in progress...";
-          break;
-        case "two_fa_required":
-        case "2fa_required":
-          s = "pending", a = "Please complete 2FA verification to continue...";
-          break;
-        case "two_fa_provided":
-        case "2fa_provided":
-          s = "pending", a = "2FA submitted. Validating with card issuer...";
-          break;
-        case "error":
-          s = "pending", a = "Processing error. Retrying automatically...";
-          break;
-        case "accepted":
-        case "authorized":
-        case "partially_settled":
-          s = "pending", a = "Payment is being processed...";
-          break;
-        case "authorization_expired":
-          s = "error", a = "Payment authorization expired. Please try again.";
-          break;
-        case "processing":
-        case "completed":
-        case "success":
-          s = "pending", a = "Payment is being processed...";
-          break;
-        default:
-          s = "pending", a = `Payment status: ${o.status || "Processing..."}`;
-      }
-      return t.console.log("[MeldStepsFlow] Setting transaction status:", {
-        status: o.status,
-        message: a,
-        type: s
-      }), W({
-        status: o.status,
-        message: a,
-        type: s
-      }), o;
-    } catch (r) {
-      t.console.error("[MeldStepsFlow] Error checking transaction status:", r);
-      let o = "Unable to check payment status.";
-      r instanceof Error && (o = `Error: ${r.message}`, r.message.includes("404") || r.message.includes("not found") ? o = `Transaction not found. ID: ${e}` : r.message.includes("401") || r.message.includes("Unauthorized") ? o = "Not authorized to access transaction data." : r.message.includes("timeout") && (o = "Request timed out. Please try again.")), W({
-        status: "error",
-        message: o,
-        type: "error"
-      });
-    }
-  }, [d]), te = Q(async () => {
-    if (!x || !g || !p || !k) {
-      b(""), M("Please select all required options");
-      return;
-    }
-    if (!_) {
-      b(""), M("Please connect your wallet first");
-      return;
-    }
-    j(!0), M("");
-    try {
-      const e = `meld-${Date.now()}-${Math.random().toString(36).substring(7)}`;
-      t.console.log("[MeldStepsFlow] Generated external session ID:", e), localStorage.setItem("meld-current-external-session-id", e), t.console.log("[MeldStepsFlow] Stored external session ID in localStorage"), window.location.origin + window.location.pathname, t.console.log("[MeldStepsFlow] Creating widget session with:", {
-        countryCode: g.countryCode,
-        destinationCurrencyCode: p.code,
-        serviceProvider: x.serviceProvider,
-        paymentMethodType: h,
-        externalSessionId: e,
-        walletAddress: _
-      });
-      const r = xe(_), o = await d.createMeldWidgetSession({
-        sessionData: {
-          walletAddress: _,
-          countryCode: g.countryCode,
-          sourceCurrencyCode: z,
-          sourceAmount: k,
-          destinationCurrencyCode: p.code,
-          serviceProvider: x.serviceProvider,
-          paymentMethodType: h || void 0
-        },
-        sessionType: "BUY",
-        externalCustomerId: r,
-        externalSessionId: e
-      });
-      t.console.log("[MeldStepsFlow] Session response:", o);
-      const s = o.WidgetSession || o.widgetSession;
-      if (!s) {
-        t.console.error("[MeldStepsFlow] No WidgetSession found in response. Keys:", Object.keys(o)), b("Error: No widget session data returned from API"), j(!1);
-        return;
-      }
-      t.console.log("[MeldStepsFlow] Widget session data:", s);
-      const a = s.customerId;
-      a && (t.console.log("[MeldStepsFlow] Storing customer ID for search:", a), localStorage.setItem("meld-current-customer-id-for-search", a));
-      const y = s.serviceProviderWidgetUrl || s.widgetUrl || s.url || (typeof s == "string" ? s : null);
-      if (!y) {
-        t.console.error("[MeldStepsFlow] No widget URL found in session data. Keys:", Object.keys(s)), b("Error: No widget URL found in session data"), j(!1);
-        return;
-      }
-      t.console.log("[MeldStepsFlow] Widget URL:", y), b(y), M("");
-    } catch (e) {
-      t.console.error("[MeldStepsFlow] Error generating widget URL:", e), b("");
-      let r = e instanceof Error ? e.message : String(e);
-      r.includes("Invalid Customer") ? r = `Payment provider issue: ${x?.serviceProvider || "Unknown provider"} is currently unavailable. Please try again later or contact support.` : r.includes("BAD_REQUEST") && (r = "Invalid request parameters. Please check your selection and try again."), M(r);
-    } finally {
-      j(!1);
-    }
-  }, [
-    x,
-    g,
-    p,
-    k,
-    z,
-    h,
-    _,
-    d
-  ]);
-  Q(async () => {
-    await te(), F && !F.startsWith("Error") && !F.startsWith("Please") && !F.startsWith("No") && window.open(F, "_blank");
-  }, [F, te]), Q(() => {
-    if (!p) return;
-    const e = V.find((r) => r.symbol.toUpperCase() === p.symbol.toUpperCase() && r.chainId === p.chainId);
-    e && (le(e), ae());
-  }, [
-    p,
-    V,
-    le,
-    ae
-  ]), T(() => {
-    if (t.console.log("[MeldStepsFlow] Polling useEffect triggered:", {
-      currentTransactionId: w,
-      transactionStatusType: m.type,
-      shouldReturn: !w || m.type === "success" || m.type === "error"
-    }), w && t.console.log("[MeldStepsFlow] Will poll getMeldTransaction API with transaction ID:", w), !w || m.type === "success" || m.type === "error") {
-      t.console.log("[MeldStepsFlow] Polling useEffect: Not starting poll, conditions not met");
-      return;
-    }
-    t.console.log("[MeldStepsFlow] Starting transaction polling for ID:", w);
-    const e = setInterval(() => {
-      t.console.log("[MeldStepsFlow] Interval check for transaction:", w), ge(w);
-    }, 10 * Fe);
-    return t.console.log("[MeldStepsFlow] Initial transaction status check for:", w), ge(w), () => clearInterval(e);
-  }, [
-    w,
-    m.type,
-    ge
-  ]), T(() => {
-    g && localStorage.setItem("meld-debug-country", JSON.stringify(g));
-  }, [g]), T(() => {
-    h && localStorage.setItem("meld-debug-payment-method", h);
-  }, [h]), T(() => {
-    p && localStorage.setItem("meld-debug-token", JSON.stringify(p));
-  }, [p]);
-  const re = Q(async () => {
-    if (!(!g || !p || !k)) {
-      ee(!0), D([]);
-      try {
-        const e = await d.getMeldQuote({
-          walletAddress: "0x1234567890123456789012345678901234567890",
-          countryCode: g.countryCode,
-          sourceCurrencyCode: z,
-          sourceAmount: k,
-          destinationCurrencyCode: p.code
-        });
-        t.console.log("[MeldStepsFlow] Quote response:", e);
-        let r;
-        try {
-          r = typeof e.quoteResponse == "string" ? JSON.parse(e.quoteResponse) : e.quoteResponse;
-        } catch (s) {
-          t.console.error("[MeldStepsFlow] Error parsing quote response:", s), ee(!1);
-          return;
-        }
-        t.console.log("[MeldStepsFlow] Parsed quote response:", r);
-        const o = r?.quotes;
-        if (!o || o.length === 0) {
-          b("No quotes available for this selection"), j(!1);
-          return;
-        }
-        D(o), o.length > 0 && L(o[0]), ee(!1);
-      } catch (e) {
-        t.console.error("Error loading providers:", e), ee(!1);
-      }
-    }
-  }, [
-    g,
-    p,
-    k,
-    z,
-    d
-  ]);
-  T(() => {
-    I === "providers" && ue.length === 0 && re();
-  }, [
-    I,
-    re,
-    ue.length
-  ]);
-  const me = () => {
-    u("menu");
-  }, ke = (e) => {
-    X(e), D([]), L(null), O(!1), b(""), M(""), u("menu");
-  }, Me = (e) => {
-    $(e), D([]), L(null), O(!1), b(""), M(""), u("menu");
-  }, Pe = (e) => {
-    ve(e), D([]), L(null), O(!1), b(""), M(""), u("menu");
-  }, Ce = (e, r) => {
-    ie(e), ce(r), D([]), L(null), O(!1), b(""), M(""), u("providers");
-  }, Ie = (e) => {
-    L(e), O(!1), b(""), M(""), u("menu");
-  };
-  return T(() => {
-    g && p && k && re();
-  }, [
-    g,
-    p,
-    k,
-    re
-  ]), T(() => {
-    x && g && p && k && te();
-  }, [
-    x,
-    g,
-    p,
-    k,
-    te
-  ]), I === "countries" ? /* @__PURE__ */ n(Ue, {
-    onBack: me,
-    onSelectCountry: ke,
-    selectedCountry: g
-  }) : I === "payment-methods" ? /* @__PURE__ */ n(Re, {
-    onBack: me,
-    onSelectPaymentMethod: Me,
-    selectedPaymentMethod: h,
-    trailsClient: d,
-    onNavigateToFund: () => {
-      ne("fund-form");
-    }
-  }) : I === "tokens" ? /* @__PURE__ */ n(Oe, {
-    onBack: me,
-    onSelectToken: Pe,
-    selectedToken: p,
-    trailsClient: d,
-    countryCode: g?.countryCode
-  }) : I === "amount" ? /* @__PURE__ */ n(je, {
-    onBack: (e, r) => {
-      e && (ie(e), localStorage.setItem(be, e)), r && (ce(r), localStorage.setItem(we, r)), u("menu");
-    },
-    onContinue: Ce,
-    _selectedCountry: g,
-    _selectedToken: p,
-    _selectedPaymentMethod: h,
-    initialAmount: k,
-    initialCurrency: z
-  }) : I === "providers" ? /* @__PURE__ */ v("div", {
-    className: "flex flex-col h-full",
-    children: [
-      m.type && J && /* @__PURE__ */ n("div", {
-        className: `p-4 border-b ${m.type === "success" ? "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-700" : m.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"}`,
-        children: /* @__PURE__ */ v("div", {
-          className: "flex items-center gap-3",
-          children: [
-            m.type === "success" && /* @__PURE__ */ n("div", {
-              className: "w-5 h-5 rounded-full bg-green-500 flex items-center justify-center",
-              children: /* @__PURE__ */ n("span", {
-                className: "text-white text-xs",
-                children: "✓"
-              })
-            }),
-            m.type === "error" && /* @__PURE__ */ n("div", {
-              className: "w-5 h-5 rounded-full bg-red-500 flex items-center justify-center",
-              children: /* @__PURE__ */ n("span", {
-                className: "text-white text-xs",
-                children: "✕"
-              })
-            }),
-            m.type === "pending" && /* @__PURE__ */ n("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500" }),
-            /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ n("p", {
-              className: `font-medium ${m.type === "success" ? "text-green-800 dark:text-green-200" : m.type === "error" ? "text-red-800 dark:text-red-200" : "text-blue-800 dark:text-blue-200"}`,
-              children: m.message
-            }), m.type === "pending" && /* @__PURE__ */ n("p", {
-              className: "text-sm text-blue-600 dark:text-blue-400",
-              children: "We'll update you when the payment completes."
-            })] }),
-            (m.type === "success" || m.type === "error") && /* @__PURE__ */ n("button", {
-              type: "button",
-              onClick: () => W({
-                status: "",
-                message: "",
-                type: null
-              }),
-              className: "ml-auto text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
-              children: "✕"
-            })
-          ]
-        })
-      }),
-      /* @__PURE__ */ n("div", {
-        className: "flex-1",
-        children: /* @__PURE__ */ n(De, {
-          onBack: () => {
-            O(!1), u("menu");
-          },
-          onSelectProvider: Ie,
-          selectedProvider: x,
-          providers: ue
-        })
-      }),
-      x && /* @__PURE__ */ v("div", {
-        className: "p-4 border-t border-gray-200 dark:border-gray-700 space-y-3",
-        children: [Z && /* @__PURE__ */ n("div", {
-          className: "p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 rounded-lg",
-          children: /* @__PURE__ */ v("p", {
-            className: "text-sm text-red-800 dark:text-red-200",
-            children: [
-              /* @__PURE__ */ n("strong", { children: "Error:" }),
-              " ",
-              Z
-            ]
-          })
-        }), /* @__PURE__ */ n("button", {
-          type: "button",
-          onClick: () => {
-            if (F && !J) {
-              if (!window.open(F, "_blank", "width=800,height=600,scrollbars=yes,resizable=yes")) {
-                t.console.error("[MeldStepsFlow] Popup blocked by browser"), M("Popup blocked. Please allow popups for this site.");
-                return;
-              }
-              if (O(!0), _) {
-                t.console.log("[MeldStepsFlow] Starting transaction search after widget opened");
-                const e = setInterval(async () => {
-                  try {
-                    const r = localStorage.getItem("meld-current-customer-id-for-search"), o = r ? {
-                      customerIds: r,
-                      limit: 5
-                    } : {
-                      customerIds: _,
-                      limit: 5
-                    };
-                    t.console.log("[MeldStepsFlow] Polling search with params:", o);
-                    const s = await d.searchMeldTransactions(o);
-                    let a;
-                    try {
-                      a = typeof s.transactions == "string" ? JSON.parse(s.transactions) : s.transactions;
-                    } catch (y) {
-                      t.console.error("[MeldStepsFlow] Error parsing search response:", y);
-                      return;
-                    }
-                    if (a?.transactions && a.transactions.length > 0) {
-                      const y = a.transactions[0], N = y.id || y.transactionId;
-                      N && N !== w && (t.console.log("[MeldStepsFlow] Found new transaction:", N), pe(N), clearInterval(e));
-                    }
-                  } catch (r) {
-                    t.console.error("[MeldStepsFlow] Search polling error:", r);
-                  }
-                }, 5 * 1e3);
-                setTimeout(() => {
-                  clearInterval(e), t.console.log("[MeldStepsFlow] Stopped transaction search polling");
-                }, 10 * 6e4);
-              }
-            }
-          },
-          disabled: de || !F || !!Z || J,
-          className: `w-full flex items-center justify-center py-3 px-4 font-semibold rounded-lg transition-colors ${de || !F || Z || J ? "bg-gray-400 text-gray-200 cursor-not-allowed" : "bg-blue-600 hover:bg-blue-700 text-white cursor-pointer"}`,
-          children: de ? /* @__PURE__ */ v(Se, { children: [/* @__PURE__ */ n("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" }), /* @__PURE__ */ n("span", { children: "Preparing Widget..." })] }) : /* @__PURE__ */ v(Se, { children: [/* @__PURE__ */ n("span", { children: J ? "Provider Opened" : "Continue to Provider" }), /* @__PURE__ */ n(ze, { className: "w-4 h-4 ml-2" })] })
-        })]
-      })
-    ]
-  }) : /* @__PURE__ */ n("div", {
-    className: "flex flex-col h-full",
-    children: /* @__PURE__ */ n(We, {
-      trailsApiKey: R.trailsApiKey,
-      onBack: se,
-      onTransactionStatus: (e) => {
-        W({
-          status: e.message,
-          message: e.message,
-          type: e.type
-        });
-      },
-      onNavigateToCountries: () => u("countries"),
-      onNavigateToPaymentMethods: () => u("payment-methods"),
-      onNavigateToTokens: () => u("tokens"),
-      onNavigateToProviders: () => u("providers"),
-      onNavigateToHistory: () => ne("meld-history"),
-      onSelectProvider: L,
-      onProvidersLoaded: D,
-      selectedCountry: g,
-      selectedPaymentMethod: h,
-      selectedToken: p,
-      selectedProvider: x
-    })
-  });
-};
-export {
-  gt as MeldStepsFlow
-};