0xtrails 0.16.1 → 0.17.0

package/dist/widget/components/OnrampProviderConfirmation.js

@@ -1,705 +0,0 @@
-import { logger as Y } from "../../logger/index.js";
-import { formatCountdown as ge } from "../../utils/time.js";
-import { truncateAddress as _ } from "../../utils/address.js";
-import { trackOnrampPaymentCompleted as xe } from "../../analytics.js";
-import Q from "./TokenImage.js";
-import ye from "./QuoteDetails.js";
-import { closePopup as q, openPopup as be, setPopupUrl as fe } from "../utils/windowUtils.js";
-import { useMeldTransactionStatus as ke } from "../../hooks/useMeldTransactionStatus.js";
-import { useDepositMonitor as Ce } from "../../hooks/useDepositMonitor.js";
-import ee from "./OnrampErrorScreen.js";
-import Ne from "./SessionTimeoutScreen.js";
-import ve from "./TruncatedTransactionHash.js";
-import { useEffect as y, useRef as we, useState as h } from "react";
-import { useAccount as Te } from "@0xtrails/wallet";
-import { Fragment as Ae, jsx as e, jsxs as t } from "react/jsx-runtime";
-import { ChevronLeft as De } from "lucide-react";
-var Le = (a) => {
-  if (!a) return "";
-  const n = [];
-  return a.originDepositAddress && n.push(`Deposit to: ${_(a.originDepositAddress)} (${a.originChain?.name || `Chain ${a.originChain?.id}`})`), a.destinationAddress && a.destinationAddress !== a.originDepositAddress && n.push(`Recipient: ${_(a.destinationAddress)} (${a.destinationChain?.name || `Chain ${a.destinationChain?.id}`})`), n.join(`
-`);
-}, te = ({ onRampQuote: a, quote: n, tokenSize: p = 20, className: s = "mt-4 text-sm text-gray-700 dark:text-gray-300 flex items-center gap-3 justify-center", textClassName: i = "font-medium" }) => !a?.sourceCurrencyCode || !n?.originToken || !n?.destinationToken ? null : /* @__PURE__ */ t("div", {
-  className: s,
-  title: Le(n),
-  children: [
-    /* @__PURE__ */ e("span", {
-      className: i,
-      children: a.sourceCurrencyCode
-    }),
-    /* @__PURE__ */ e("span", {
-      className: "text-gray-500 dark:text-gray-400",
-      children: "→"
-    }),
-    /* @__PURE__ */ t("div", {
-      className: "flex items-center gap-2 cursor-help",
-      title: n.originDepositAddress ? `Deposit to: ${n.originDepositAddress}` : void 0,
-      children: [/* @__PURE__ */ e(Q, {
-        imageUrl: n.originToken.imageUrl,
-        symbol: n.originToken.symbol,
-        chainId: n.originChain?.id,
-        contractAddress: n.originToken.contractAddress,
-        size: p
-      }), /* @__PURE__ */ e("span", {
-        className: i,
-        children: n.originToken.symbol
-      })]
-    }),
-    /* @__PURE__ */ e("span", {
-      className: "text-gray-500 dark:text-gray-400",
-      children: "→"
-    }),
-    /* @__PURE__ */ t("div", {
-      className: "flex items-center gap-2 cursor-help",
-      title: n.destinationAddress ? `Recipient: ${n.destinationAddress}` : void 0,
-      children: [/* @__PURE__ */ e(Q, {
-        imageUrl: n.destinationToken.imageUrl,
-        symbol: n.destinationToken.symbol,
-        chainId: n.destinationChain?.id,
-        contractAddress: n.destinationToken.contractAddress,
-        size: p
-      }), /* @__PURE__ */ e("span", {
-        className: i,
-        children: n.destinationToken.symbol
-      })]
-    })
-  ]
-}), Ye = ({ onBack: a, onRetry: n, onIntentExecuted: p, quote: s, onRampQuote: i, widgetCreationParams: K, onCreateWidgetSession: R, externalSessionId: u, popupWindowRef: w }) => {
-  const [Z, b] = h(!1), [T, A] = h(1200), [D, L] = h(!1), [re, E] = h(!1), [S, I] = h(!1), [c, P] = h(!1), [ne, C] = h(0), J = we(null), { address: M } = Te(), d = s?.originDepositAddress && M?.toLowerCase() === s.originDepositAddress.toLowerCase(), { transaction: r, isLoading: se, error: W, settledTransactionHash: B, settledAmount: O, isSuccess: g, windowClosed: ie, state: ae, resetWindowClosed: $, setWindowRef: f } = ke({
-    externalSessionId: u,
-    popupOpened: !0,
-    enabled: !!u
-  });
-  y(() => {
-    if (w)
-      return f(w), () => {
-        f(null);
-      };
-  }, [w, f]);
-  const X = !!s?.originDepositAddress && !d, { hasSufficientDeposit: oe, depositBalanceFormatted: le, percentageComplete: de } = Ce({
-    chainId: s?.originChain?.id,
-    depositAddress: s?.originDepositAddress,
-    tokenAddress: s?.originToken?.contractAddress,
-    requiredAmount: s?.originAmount,
-    enabled: X
-  }), N = d ? g : oe, ce = d ? !!u : X, x = d ? O || "0" : le, U = d ? g ? 100 : 0 : de, v = d ? B : null, k = (ie || ae === "window-closed") && !g && !N;
-  y(() => {
-    const o = u || s?.intentId || "unknown";
-    !g || J.current === o || (J.current = o, xe({
-      fundMethod: "onramp-meld",
-      userAddress: M,
-      intentId: s?.intentId || void 0,
-      intentAddress: s?.originDepositAddress,
-      externalSessionId: u || void 0,
-      transactionId: r?.id,
-      transactionHash: B || r?.transactionHash,
-      status: r?.status || "COMPLETED",
-      provider: r?.serviceProvider || i?.serviceProvider,
-      sourceAmount: r?.sourceAmount ?? i?.sourceAmount?.toString(),
-      sourceCurrencyCode: r?.sourceCurrencyCode || i?.sourceCurrencyCode,
-      destinationAmount: O || r?.destinationAmount || i?.destinationAmount?.toString(),
-      destinationCurrencyCode: r?.destinationCurrencyCode || i?.destinationCurrencyCode,
-      countryCode: i?.countryCode,
-      paymentMethodType: i?.paymentMethodType,
-      paymentMethod: r?.paymentMethod
-    }));
-  }, [
-    g,
-    M,
-    s?.intentId,
-    s?.originDepositAddress,
-    i?.serviceProvider,
-    i?.sourceAmount,
-    i?.sourceCurrencyCode,
-    i?.destinationAmount,
-    i?.destinationCurrencyCode,
-    i?.countryCode,
-    i?.paymentMethodType,
-    u,
-    r?.id,
-    r?.transactionHash,
-    r?.status,
-    r?.serviceProvider,
-    r?.sourceAmount,
-    r?.sourceCurrencyCode,
-    r?.destinationAmount,
-    r?.destinationCurrencyCode,
-    r?.paymentMethod,
-    B,
-    O
-  ]), y(() => {
-    if (!k && r?.status) {
-      const o = r.status.toUpperCase();
-      [
-        "DECLINED",
-        "FAILED",
-        "CANCELLED"
-      ].includes(o) && E(!0), o === "SETTLING" && !c && (P(!0), C(0));
-    }
-  }, [
-    r?.status,
-    c,
-    k
-  ]), y(() => {
-    b(!0);
-  }, []), y(() => {
-    !N || S || (Y.console.log("[OnrampProviderConfirmation] Deposit detected after commit/execute", {
-      intentId: s?.intentId,
-      transactionHash: v,
-      amount: x,
-      isDirectDeposit: d
-    }), I(!0), p && p());
-  }, [
-    s,
-    S,
-    v,
-    N,
-    p,
-    d,
-    x
-  ]), y(() => {
-    if (D || k) return;
-    const o = setInterval(() => {
-      c ? C((m) => m + 1) : A((m) => m <= 1 ? (clearInterval(o), L(!0), 0) : m - 1);
-    }, 1e3);
-    return () => clearInterval(o);
-  }, [
-    D,
-    c,
-    k
-  ]);
-  const me = () => c ? ne : T, j = () => {
-    L(!1), A(1200), P(!1), C(0), E(!1), I(!1), b(!1), setTimeout(() => b(!0), 100), $();
-  }, z = () => {
-    a?.();
-  }, F = async () => {
-    if (!K || !R) {
-      n?.(), $();
-      return;
-    }
-    const { popup: o, blocked: m } = be("onramp-widget", 400, 700);
-    if (m) {
-      Y.console.error("Popup blocked - cannot retry widget"), n?.();
-      return;
-    }
-    try {
-      f(o);
-      const { widgetUrl: l } = await R(K);
-      if (!fe(o, l)) {
-        q(o), n?.();
-        return;
-      }
-      L(!1), A(1200), P(!1), C(0), E(!1), I(!1), b(!1), setTimeout(() => b(!0), 100), $();
-    } catch (l) {
-      q(o), f(null), Y.console.error("Failed to regenerate widget session:", l), n?.();
-    }
-  }, ue = () => s?.originDepositAddress ? ce ? N ? /* @__PURE__ */ e("div", {
-    className: "mt-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-700",
-    children: /* @__PURE__ */ t("div", {
-      className: "flex items-center space-x-2",
-      children: [/* @__PURE__ */ t("svg", {
-        className: "w-5 h-5 text-green-600 dark:text-green-400",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        children: [/* @__PURE__ */ e("title", { children: "Success" }), /* @__PURE__ */ e("path", {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "M5 13l4 4L19 7"
-        })]
-      }), /* @__PURE__ */ t("div", { children: [
-        /* @__PURE__ */ e("p", {
-          className: "text-sm font-medium text-green-800 dark:text-green-200",
-          children: d ? "Funds arrived at recipient address" : "Funds arrived at intent address"
-        }),
-        /* @__PURE__ */ t("p", {
-          className: "text-xs text-green-600 dark:text-green-400 mt-1",
-          children: [
-            "Received: ",
-            x,
-            " ",
-            s?.originToken?.symbol
-          ]
-        }),
-        v ? /* @__PURE__ */ t("p", {
-          className: "text-xs text-green-600 dark:text-green-400 mt-1",
-          children: [
-            "Transaction:",
-            " ",
-            /* @__PURE__ */ e(ve, {
-              txHash: v,
-              chainId: s?.originChain?.id || 1,
-              className: "text-green-600 dark:text-green-400"
-            })
-          ]
-        }) : d && g && /* @__PURE__ */ e("p", {
-          className: "text-xs text-green-600 dark:text-green-400 mt-1",
-          children: "Transaction confirmed"
-        }),
-        S && !d && /* @__PURE__ */ e("p", {
-          className: "text-xs text-green-600 dark:text-green-400 mt-2 font-medium",
-          children: "Processing transaction..."
-        })
-      ] })]
-    })
-  }) : x && Number(x) > 0 ? /* @__PURE__ */ e("div", {
-    className: "mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-700",
-    children: /* @__PURE__ */ t("div", {
-      className: "flex items-center space-x-2",
-      children: [/* @__PURE__ */ t("svg", {
-        className: "w-5 h-5 text-yellow-600 dark:text-yellow-400",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        children: [/* @__PURE__ */ e("title", { children: "Waiting" }), /* @__PURE__ */ e("path", {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-        })]
-      }), /* @__PURE__ */ t("div", { children: [
-        /* @__PURE__ */ e("p", {
-          className: "text-sm font-medium text-yellow-800 dark:text-yellow-200",
-          children: d ? "Waiting for transaction confirmation..." : "Monitoring for deposits..."
-        }),
-        U > 0 && /* @__PURE__ */ t("div", {
-          className: "mt-2",
-          children: [/* @__PURE__ */ t("div", {
-            className: "flex justify-between text-xs text-yellow-600 dark:text-yellow-400 mb-1",
-            children: [/* @__PURE__ */ e("span", { children: "Progress" }), /* @__PURE__ */ t("span", { children: [U.toFixed(0), "%"] })]
-          }), /* @__PURE__ */ e("div", {
-            className: "w-full bg-yellow-200 dark:bg-yellow-800 rounded-full h-2",
-            children: /* @__PURE__ */ e("div", {
-              className: "bg-yellow-600 dark:bg-yellow-400 h-2 rounded-full transition-all duration-500",
-              style: { width: `${Math.min(U, 100)}%` }
-            })
-          })]
-        }),
-        /* @__PURE__ */ t("p", {
-          className: "text-xs text-yellow-600 dark:text-yellow-400 mt-1",
-          children: [
-            "Current balance: ",
-            x,
-            " ",
-            s?.originToken?.symbol
-          ]
-        })
-      ] })]
-    })
-  }) : null : /* @__PURE__ */ e("div", {
-    className: "mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700",
-    children: /* @__PURE__ */ t("div", {
-      className: "flex items-center space-x-2",
-      children: [/* @__PURE__ */ t("svg", {
-        className: "w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        children: [
-          /* @__PURE__ */ e("title", { children: "Loading" }),
-          /* @__PURE__ */ e("circle", {
-            className: "opacity-25",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            strokeWidth: "4"
-          }),
-          /* @__PURE__ */ e("path", {
-            className: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          })
-        ]
-      }), /* @__PURE__ */ e("p", {
-        className: "text-sm text-blue-800 dark:text-blue-200",
-        children: "Starting deposit monitoring..."
-      })]
-    })
-  }) : null, he = () => {
-    if (!u) return /* @__PURE__ */ e("div", {
-      className: "mt-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700",
-      children: /* @__PURE__ */ e("p", {
-        className: "text-sm text-gray-600 dark:text-gray-400",
-        children: "No external session ID - status monitoring disabled"
-      })
-    });
-    if (W) return /* @__PURE__ */ e("div", {
-      className: "mt-4 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-700",
-      children: /* @__PURE__ */ t("div", {
-        className: "flex items-center space-x-2",
-        children: [/* @__PURE__ */ t("svg", {
-          className: "w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          stroke: "currentColor",
-          children: [/* @__PURE__ */ e("title", { children: "Error" }), /* @__PURE__ */ e("path", {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            strokeWidth: 2,
-            d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-          })]
-        }), /* @__PURE__ */ t("div", { children: [/* @__PURE__ */ e("p", {
-          className: "text-sm font-medium text-red-800 dark:text-red-200",
-          children: "Error checking transaction status"
-        }), /* @__PURE__ */ e("p", {
-          className: "text-xs text-red-600 dark:text-red-400 mt-1",
-          children: W.message
-        })] })]
-      })
-    });
-    if (se) return /* @__PURE__ */ e("div", {
-      className: "mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700",
-      children: /* @__PURE__ */ t("div", {
-        className: "flex items-center space-x-2",
-        children: [/* @__PURE__ */ t("svg", {
-          className: "w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          children: [
-            /* @__PURE__ */ e("title", { children: "Loading" }),
-            /* @__PURE__ */ e("circle", {
-              className: "opacity-25",
-              cx: "12",
-              cy: "12",
-              r: "10",
-              stroke: "currentColor",
-              strokeWidth: "4"
-            }),
-            /* @__PURE__ */ e("path", {
-              className: "opacity-75",
-              fill: "currentColor",
-              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-            })
-          ]
-        }), /* @__PURE__ */ e("p", {
-          className: "text-sm text-blue-800 dark:text-blue-200",
-          children: "Checking transaction status..."
-        })]
-      })
-    });
-    if (r?.status) {
-      const o = (V) => {
-        switch (V?.toUpperCase()) {
-          case "COMPLETED":
-          case "SUCCESS":
-            return "green";
-          case "SETTLING":
-            return "blue";
-          case "DECLINED":
-          case "FAILED":
-            return "red";
-          case "ERROR":
-          case "PENDING":
-          case "PROCESSING":
-            return "yellow";
-          default:
-            return "blue";
-        }
-      }, m = (V) => {
-        switch (V?.toUpperCase()) {
-          case "COMPLETED":
-          case "SUCCESS":
-            return "Payment completed successfully";
-          case "SETTLING":
-            return "Finalizing your payment with the provider";
-          case "PENDING":
-            return "Waiting for payment confirmation";
-          case "PROCESSING":
-            return "Processing your payment";
-          case "ERROR":
-            return "Verifying payment status";
-          case "DECLINED":
-            return "Payment was declined";
-          case "FAILED":
-            return "Payment failed";
-          default:
-            return "Checking payment status";
-        }
-      }, l = o(r.status), pe = {
-        green: "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-700",
-        red: "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-700",
-        yellow: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-700",
-        blue: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-700"
-      }, H = {
-        green: "text-green-800 dark:text-green-200",
-        red: "text-red-800 dark:text-red-200",
-        yellow: "text-yellow-800 dark:text-yellow-200",
-        blue: "text-blue-800 dark:text-blue-200"
-      }, G = {
-        green: "text-green-600 dark:text-green-400",
-        red: "text-red-600 dark:text-red-400",
-        yellow: "text-yellow-600 dark:text-yellow-400",
-        blue: "text-blue-600 dark:text-blue-400"
-      };
-      return /* @__PURE__ */ e("div", {
-        className: `mt-4 p-4 rounded-lg border ${pe[l]}`,
-        children: /* @__PURE__ */ t("div", {
-          className: "flex items-start space-x-3",
-          children: [/* @__PURE__ */ e("div", {
-            className: "flex-shrink-0 mt-0.5",
-            children: l === "yellow" || l === "blue" || r.status?.toUpperCase() === "SETTLING" ? /* @__PURE__ */ t("svg", {
-              className: `w-5 h-5 ${G[l]} animate-spin`,
-              fill: "none",
-              viewBox: "0 0 24 24",
-              children: [
-                /* @__PURE__ */ e("title", { children: "Processing" }),
-                /* @__PURE__ */ e("circle", {
-                  className: "opacity-25",
-                  cx: "12",
-                  cy: "12",
-                  r: "10",
-                  stroke: "currentColor",
-                  strokeWidth: "4"
-                }),
-                /* @__PURE__ */ e("path", {
-                  className: "opacity-75",
-                  fill: "currentColor",
-                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                })
-              ]
-            }) : l === "green" ? /* @__PURE__ */ t("svg", {
-              className: `w-5 h-5 ${G[l]}`,
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              children: [/* @__PURE__ */ e("title", { children: "Success" }), /* @__PURE__ */ e("path", {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-              })]
-            }) : /* @__PURE__ */ t("svg", {
-              className: `w-5 h-5 ${G[l]}`,
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              children: [/* @__PURE__ */ e("title", { children: "Error" }), /* @__PURE__ */ e("path", {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-              })]
-            })
-          }), /* @__PURE__ */ t("div", {
-            className: "flex-1 text-left",
-            children: [
-              /* @__PURE__ */ e("p", {
-                className: `text-sm font-medium ${H[l]}`,
-                children: m(r.status)
-              }),
-              /* @__PURE__ */ t("p", {
-                className: `text-xs mt-1 ${H[l]} opacity-75`,
-                children: [
-                  "Status:",
-                  " ",
-                  r.status === "ERROR" ? "PROCESSING" : r.status?.toUpperCase()
-                ]
-              }),
-              (r.sourceAmount || r.destinationAmount) && /* @__PURE__ */ t("p", {
-                className: `text-xs mt-1 ${H[l]} opacity-75`,
-                children: [
-                  "Amount:",
-                  " ",
-                  r.sourceAmount || r.destinationAmount,
-                  " ",
-                  r.sourceCurrencyCode || r.destinationCurrencyCode
-                ]
-              })
-            ]
-          })]
-        })
-      });
-    }
-    return /* @__PURE__ */ t(Ae, { children: [/* @__PURE__ */ e("div", {
-      className: "mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700",
-      children: /* @__PURE__ */ t("div", {
-        className: "flex items-start space-x-3",
-        children: [/* @__PURE__ */ e("div", {
-          className: "flex-shrink-0 mt-0.5",
-          children: /* @__PURE__ */ t("svg", {
-            className: "w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            children: [
-              /* @__PURE__ */ e("title", { children: "Loading" }),
-              /* @__PURE__ */ e("circle", {
-                className: "opacity-25",
-                cx: "12",
-                cy: "12",
-                r: "10",
-                stroke: "currentColor",
-                strokeWidth: "4"
-              }),
-              /* @__PURE__ */ e("path", {
-                className: "opacity-75",
-                fill: "currentColor",
-                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-              })
-            ]
-          })
-        }), /* @__PURE__ */ t("div", {
-          className: "flex-1",
-          children: [/* @__PURE__ */ e("p", {
-            className: "text-sm font-medium text-blue-800 dark:text-blue-200",
-            children: "Initializing payment monitoring"
-          }), /* @__PURE__ */ e("p", {
-            className: "text-xs mt-1 text-blue-800 dark:text-blue-200 opacity-75",
-            children: "Status: INITIALIZING"
-          })]
-        })]
-      })
-    }), /* @__PURE__ */ e(te, {
-      onRampQuote: i,
-      quote: s,
-      tokenSize: 14,
-      className: "text-xs mt-2 text-gray-600 dark:text-gray-400 opacity-70 flex items-center gap-2 justify-center",
-      textClassName: ""
-    })] });
-  };
-  return k ? /* @__PURE__ */ e(ee, {
-    onTryAgain: j,
-    onRetry: F,
-    onBack: z,
-    intentId: s?.intentId,
-    transactionStatus: "CANCELLED",
-    title: "Onramp Window Closed",
-    message: "Your onramp window was closed before payment completion. Please try again to restart the flow."
-  }) : re ? /* @__PURE__ */ e(ee, {
-    onTryAgain: j,
-    onRetry: F,
-    onBack: z,
-    transactionStatus: r?.status,
-    transactionError: W?.message
-  }) : D ? /* @__PURE__ */ e(Ne, {
-    onTryAgain: j,
-    onRetry: F,
-    onBack: z,
-    title: "Session Timeout",
-    message: "Your payment session has timed out. Please try again to continue with your onramp transaction."
-  }) : /* @__PURE__ */ t("div", {
-    className: "space-y-6",
-    children: [/* @__PURE__ */ e("div", {
-      className: "flex items-center relative",
-      children: /* @__PURE__ */ e("button", {
-        type: "button",
-        onClick: a,
-        className: "absolute left-0 top-0 p-2 rounded-full transition-colors cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 hover:trails-hover-bg text-gray-600 dark:text-gray-400",
-        children: /* @__PURE__ */ e(De, { className: "h-6 w-6" })
-      })
-    }), /* @__PURE__ */ e("div", {
-      className: "flex flex-col justify-center min-h-full space-y-6 pt-8",
-      children: /* @__PURE__ */ t("div", {
-        className: "text-center",
-        children: [
-          /* @__PURE__ */ t("div", {
-            className: `mb-2 transition-all duration-500 ease-out ${Z ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`,
-            children: [
-              /* @__PURE__ */ e("h2", {
-                className: "text-xl font-bold text-gray-900 dark:text-white",
-                children: c ? "Payment is settling..." : "Complete your purchase in the onramp window..."
-              }),
-              /* @__PURE__ */ e("div", {
-                className: "mt-4 flex items-center justify-center",
-                children: /* @__PURE__ */ t("div", {
-                  className: "flex items-center space-x-2 px-4 py-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700",
-                  children: [/* @__PURE__ */ t("svg", {
-                    className: "w-5 h-5 text-blue-600 dark:text-blue-400",
-                    fill: "none",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    children: [/* @__PURE__ */ e("title", { children: c ? "Processing Time" : "Time Remaining" }), /* @__PURE__ */ e("path", {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                    })]
-                  }), /* @__PURE__ */ t("div", {
-                    className: "flex flex-col items-start",
-                    children: [/* @__PURE__ */ e("span", {
-                      className: "text-xs text-blue-600 dark:text-blue-400",
-                      children: c ? "Processing for" : "Time remaining"
-                    }), /* @__PURE__ */ e("span", {
-                      className: "text-lg font-mono font-bold text-blue-600 dark:text-blue-400",
-                      children: ge(me())
-                    })]
-                  })]
-                })
-              }),
-              !c && /* @__PURE__ */ e("p", {
-                className: "mt-4 text-sm text-left text-gray-600 dark:text-gray-400",
-                children: "Complete the payment within the time limit. We use USDC on Base network as the intermediary token, please do not change it."
-              }),
-              /* @__PURE__ */ e(te, {
-                onRampQuote: i,
-                quote: s,
-                tokenSize: 20
-              }),
-              c && /* @__PURE__ */ e("p", {
-                className: "mt-4 text-sm text-left text-gray-600 dark:text-gray-400",
-                children: "Your transaction is settling with payment provider. This usually takes 1-5 minutes to complete."
-              }),
-              he(),
-              ue(),
-              /* @__PURE__ */ e("div", {
-                className: "mt-3 p-3 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-700",
-                children: /* @__PURE__ */ t("div", {
-                  className: "flex items-start space-x-3",
-                  children: [/* @__PURE__ */ e("div", {
-                    className: "flex-shrink-0 mt-0.5",
-                    children: /* @__PURE__ */ e("span", {
-                      className: "text-amber-600 dark:text-amber-400",
-                      children: "⚠️"
-                    })
-                  }), /* @__PURE__ */ e("div", {
-                    className: "flex-1 text-left",
-                    children: /* @__PURE__ */ e("p", {
-                      className: "text-sm font-medium text-amber-800 dark:text-amber-200",
-                      children: "Important: Do not close this window or navigate away while your payment is processing."
-                    })
-                  })]
-                })
-              })
-            ]
-          }),
-          !c && T <= 60 && T > 0 && /* @__PURE__ */ e("div", {
-            className: `transition-all duration-500 ease-out delay-150 ${Z ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`,
-            children: /* @__PURE__ */ e("div", {
-              className: "p-4 trails-border-radius-container text-sm bg-yellow-50 border border-solid border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700/50",
-              children: /* @__PURE__ */ t("div", {
-                className: "flex items-start space-x-3",
-                children: [/* @__PURE__ */ t("svg", {
-                  className: "w-5 h-5 mt-0.5 shrink-0 text-yellow-600 dark:text-yellow-400",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  children: [/* @__PURE__ */ e("title", { children: "Warning" }), /* @__PURE__ */ e("path", {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-                  })]
-                }), /* @__PURE__ */ t("div", { children: [/* @__PURE__ */ e("p", {
-                  className: "font-medium text-yellow-800 dark:text-yellow-300",
-                  children: "Less than 1 minute remaining"
-                }), /* @__PURE__ */ e("p", {
-                  className: "mt-1 text-xs text-yellow-700 dark:text-yellow-400",
-                  children: "Please complete your payment soon or the transaction will be canceled."
-                })] })]
-              })
-            })
-          }),
-          /* @__PURE__ */ e(ye, {
-            quote: s,
-            onRampQuote: i,
-            showContent: !0,
-            compact: !0
-          })
-        ]
-      })
-    })]
-  });
-};
-export {
-  Ye as default
-};