forgelayer-react 1.0.0 → 1.1.1

package/dist/index.d.ts

@@ -0,0 +1,121 @@
+import * as React from 'react';
+
+// ── Order object returned by /fl/create ──────────────────────────────────────
+
+export interface ForgeLayerOrder {
+  ok: true;
+  address: string;
+  chain: string;
+  chainName: string;
+  token: string;
+  amount: number;
+  currency: string;
+  /** Crypto amount as a string (e.g. "49.99000000") */
+  cryptoAmount: string | null;
+  /** Unix timestamp (seconds) when the payment window closes */
+  expiresAt: number;
+  orderId: string;
+  sessionKey: string;
+  qrUrl: string;
+  /** Present when the same address was reused from an existing pending order */
+  reused?: boolean;
+}
+
+// ── Modal state ───────────────────────────────────────────────────────────────
+
+export type ForgeLayerModalState = 'closed' | 'loading' | 'payment' | 'success' | 'expired' | 'error';
+
+// ── useForgeLayerCheckout ─────────────────────────────────────────────────────
+
+export interface UseForgeLayerCheckoutOptions {
+  /** Base path where forgelayer-node is mounted. Default: '/fl' */
+  baseUrl?: string;
+  /** Status polling interval in milliseconds. Default: 15000 */
+  pollInterval?: number;
+  /** Called when payment is confirmed */
+  onSuccess?: (order: ForgeLayerOrder) => void;
+  /** Called when the payment window expires */
+  onExpired?: () => void;
+  /** Called when an error occurs during address generation */
+  onError?: (error: Error) => void;
+  /** Called when the modal opens (loading state begins) */
+  onOpen?: () => void;
+  /** Called when the modal is closed by the user */
+  onClose?: () => void;
+}
+
+export interface OpenParams {
+  amount: number;
+  currency?: string;
+  chain?: string;
+  token?: string;
+  orderId?: string;
+  /** Minutes before payment expires */
+  paymentWindow?: number;
+  /** Return same address for this orderId if still pending */
+  reuseAddress?: boolean;
+}
+
+export interface UseForgeLayerCheckoutResult {
+  modalState: ForgeLayerModalState;
+  order: ForgeLayerOrder | null;
+  /** Seconds remaining in the payment window. Null until a payment is opened. */
+  timeLeft: number | null;
+  error: string | null;
+  /** Start a new checkout session — opens the modal */
+  open: (params: OpenParams) => Promise<void>;
+  /** Close the modal and reset all state */
+  close: () => void;
+}
+
+export function useForgeLayerCheckout(options?: UseForgeLayerCheckoutOptions): UseForgeLayerCheckoutResult;
+
+// ── ForgeLayerModal ───────────────────────────────────────────────────────────
+
+export interface ForgeLayerModalProps {
+  modalState: ForgeLayerModalState;
+  order: ForgeLayerOrder | null;
+  timeLeft: number | null;
+  error: string | null;
+  onClose: () => void;
+}
+
+export function ForgeLayerModal(props: ForgeLayerModalProps): React.ReactElement | null;
+
+// ── ForgeLayerButton ──────────────────────────────────────────────────────────
+
+export interface ForgeLayerButtonProps {
+  // Payment params
+  amount: number;
+  currency?: string;
+  chain?: string;
+  token?: string;
+  orderId?: string;
+  /** Minutes before the payment window expires. Default: 30 */
+  paymentWindow?: number;
+  /** Return same deposit address for same orderId if still pending */
+  reuseAddress?: boolean;
+
+  // Backend
+  /** Base path where forgelayer-node is mounted. Default: '/fl' */
+  baseUrl?: string;
+  /** Status polling interval in milliseconds. Default: 15000 */
+  pollInterval?: number;
+
+  // Button UI
+  /** Button text. Overridden by children if provided. */
+  label?: string;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+
+  // Callbacks
+  onSuccess?: (order: ForgeLayerOrder) => void;
+  onExpired?: () => void;
+  onError?: (error: Error) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+}
+
+export function ForgeLayerButton(props: ForgeLayerButtonProps): React.ReactElement;

package/dist/index.esm.js

@@ -0,0 +1,446 @@
+// src/ForgeLayerButton.jsx
+import React2 from "react";
+
+// src/useForgeLayerCheckout.js
+import { useState, useRef, useCallback, useEffect } from "react";
+function useForgeLayerCheckout({
+  baseUrl = "/fl",
+  pollInterval = 15e3,
+  onSuccess,
+  onExpired,
+  onError,
+  onOpen,
+  onClose: onCloseProp
+} = {}) {
+  const [modalState, setModalState] = useState("closed");
+  const [order, setOrder] = useState(null);
+  const [timeLeft, setTimeLeft] = useState(null);
+  const [error, setError] = useState(null);
+  const pollRef = useRef(null);
+  const cdRef = useRef(null);
+  const stopTimers = useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+    if (cdRef.current) {
+      clearInterval(cdRef.current);
+      cdRef.current = null;
+    }
+  }, []);
+  useEffect(() => stopTimers, [stopTimers]);
+  const close = useCallback(() => {
+    stopTimers();
+    setModalState("closed");
+    setOrder(null);
+    setTimeLeft(null);
+    setError(null);
+    onCloseProp?.();
+  }, [stopTimers, onCloseProp]);
+  const startCountdown = useCallback((expiresAt) => {
+    if (cdRef.current) clearInterval(cdRef.current);
+    const tick = () => {
+      const rem = expiresAt - Math.floor(Date.now() / 1e3);
+      setTimeLeft(rem <= 0 ? 0 : rem);
+      if (rem <= 0) clearInterval(cdRef.current);
+    };
+    tick();
+    cdRef.current = setInterval(tick, 1e3);
+  }, []);
+  const startPolling = useCallback((orderData) => {
+    if (pollRef.current) clearInterval(pollRef.current);
+    pollRef.current = setInterval(async () => {
+      try {
+        const res = await fetch(`${baseUrl}/status?session=${encodeURIComponent(orderData.sessionKey)}`);
+        const data = await res.json();
+        if (!data.ok) return;
+        if (data.status === "confirmed") {
+          stopTimers();
+          setModalState("success");
+          onSuccess?.(orderData);
+        } else if (data.status === "expired") {
+          stopTimers();
+          setModalState("expired");
+          onExpired?.();
+        }
+      } catch (_) {
+      }
+    }, pollInterval);
+  }, [baseUrl, pollInterval, stopTimers, onSuccess, onExpired]);
+  const open = useCallback(async (params) => {
+    stopTimers();
+    setModalState("loading");
+    setOrder(null);
+    setTimeLeft(null);
+    setError(null);
+    onOpen?.();
+    try {
+      const res = await fetch(`${baseUrl}/create`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(params)
+      });
+      const data = await res.json();
+      if (!data.ok) throw new Error(data.error || "Failed to generate payment address.");
+      setOrder(data);
+      setModalState("payment");
+      startCountdown(data.expiresAt);
+      startPolling(data);
+    } catch (e) {
+      setError(e.message);
+      setModalState("error");
+      onError?.(e);
+    }
+  }, [baseUrl, stopTimers, startCountdown, startPolling, onOpen, onError]);
+  return { modalState, order, timeLeft, error, open, close };
+}
+
+// src/ForgeLayerModal.jsx
+import React, { useEffect as useEffect2, useState as useState2 } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MODAL_CSS = `
+@keyframes fl-r-fade{from{opacity:0}to{opacity:1}}
+@keyframes fl-r-up{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
+@keyframes fl-r-spin{to{transform:rotate(360deg)}}
+@keyframes fl-r-pulse{0%,100%{opacity:1}50%{opacity:.35}}
+.fl-r-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99999;
+  display:flex;align-items:center;justify-content:center;padding:16px;
+  animation:fl-r-fade .18s ease}
+.fl-r-modal{background:#fff;border-radius:16px;width:100%;max-width:520px;
+  box-shadow:0 24px 64px rgba(0,0,0,.28);overflow:hidden;
+  animation:fl-r-up .22s ease;
+  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
+  font-size:14px;color:#111}
+.fl-r-spinner{width:38px;height:38px;border:3px solid #e5e7eb;
+  border-top-color:#f7931a;border-radius:50%;
+  animation:fl-r-spin .7s linear infinite;margin:0 auto 14px}
+.fl-r-dot-pending{background:#f59e0b;animation:fl-r-pulse 1.6s ease-in-out infinite}
+.fl-r-dot-confirmed{background:#10b981}
+.fl-r-dot-expired{background:#ef4444}
+.fl-r-xbtn:hover{background:#f3f4f6 !important;color:#111 !important}
+.fl-r-cpbtn:hover{background:#f3f4f6 !important}
+.fl-r-cpbtn-copied{border-color:#10b981 !important;color:#059669 !important}
+@media(max-width:460px){.fl-r-grid{flex-direction:column !important;align-items:center !important}}
+`;
+var _cssInjected = false;
+function ensureCSS() {
+  if (_cssInjected || typeof document === "undefined") return;
+  _cssInjected = true;
+  const el = document.createElement("style");
+  el.textContent = MODAL_CSS;
+  document.head.appendChild(el);
+}
+function fmtTime(secs) {
+  const m = Math.floor(secs / 60);
+  const s = secs % 60;
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+function ForgeLayerModal({ modalState, order, timeLeft, error, onClose }) {
+  const [copied, setCopied] = useState2(false);
+  useEffect2(() => {
+    ensureCSS();
+  }, []);
+  useEffect2(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onClose]);
+  useEffect2(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+  const copyAddress = () => {
+    if (!order?.address) return;
+    navigator.clipboard?.writeText(order.address).catch(() => {
+    });
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  const urgent = timeLeft !== null && timeLeft <= 120;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fl-r-backdrop",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Crypto payment",
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "fl-r-modal", children: [
+        /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "16px 18px",
+          borderBottom: "1px solid #e5e7eb",
+          background: "#fafafa"
+        }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 9, fontSize: 15, fontWeight: 700 }, children: [
+            /* @__PURE__ */ jsx("div", { style: {
+              width: 26,
+              height: 26,
+              background: "#f7931a",
+              borderRadius: 6,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#fff",
+              fontSize: 10,
+              fontWeight: 800,
+              flexShrink: 0
+            }, children: "FL" }),
+            "Pay with Crypto"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "fl-r-xbtn",
+              onClick: onClose,
+              "aria-label": "Close",
+              style: {
+                background: "none",
+                border: "none",
+                fontSize: 22,
+                lineHeight: 1,
+                cursor: "pointer",
+                color: "#6b7280",
+                padding: "4px 8px",
+                borderRadius: 5,
+                transition: "background .12s"
+              },
+              children: "\xD7"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { padding: "20px 18px" }, children: [
+          modalState === "loading" && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "28px 0" }, children: [
+            /* @__PURE__ */ jsx("div", { className: "fl-r-spinner" }),
+            /* @__PURE__ */ jsx("p", { style: { color: "#6b7280", fontSize: 13, margin: 0 }, children: "Generating payment address\u2026" })
+          ] }),
+          modalState === "error" && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "28px 0" }, children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 48, marginBottom: 12 }, children: "\u26A0\uFE0F" }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 15, fontWeight: 700, marginBottom: 8 }, children: "Something went wrong" }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 13, color: "#6b7280" }, children: error })
+          ] }),
+          modalState === "payment" && order && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 9,
+              padding: "9px 13px",
+              borderRadius: 8,
+              background: "#f9fafb",
+              border: "1px solid #e5e7eb",
+              marginBottom: 14,
+              fontSize: 13
+            }, children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "fl-r-dot-pending",
+                  style: { width: 8, height: 8, borderRadius: "50%", flexShrink: 0 }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: "Awaiting payment\u2026" }),
+              /* @__PURE__ */ jsx("span", { style: {
+                marginLeft: "auto",
+                fontWeight: 600,
+                fontSize: 13,
+                color: urgent ? "#ef4444" : "#374151",
+                fontVariantNumeric: "tabular-nums"
+              }, children: timeLeft !== null ? fmtTime(timeLeft) : "--:--" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: {
+              background: "#fffbeb",
+              border: "1px solid #fde68a",
+              borderRadius: 8,
+              padding: "9px 13px",
+              fontSize: 12,
+              color: "#92400e",
+              marginBottom: 14,
+              lineHeight: 1.5
+            }, children: [
+              /* @__PURE__ */ jsx("strong", { children: "\u26A0 Important:" }),
+              " Send only ",
+              /* @__PURE__ */ jsx("strong", { children: order.token }),
+              " on the",
+              " ",
+              /* @__PURE__ */ jsx("strong", { children: order.chainName }),
+              " network only. Wrong network = permanent loss."
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "fl-r-grid", style: { display: "flex", gap: 18, marginBottom: 14 }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }, children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: order.qrUrl,
+                    alt: `Send to ${order.address}`,
+                    width: 148,
+                    height: 148,
+                    style: { border: "1px solid #e5e7eb", borderRadius: 10, display: "block", background: "#f9fafb" }
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { style: { fontSize: 11, color: "#9ca3af", margin: 0 }, children: "Scan with wallet" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 13 }, children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: 10, fontWeight: 700, color: "#6b7280", textTransform: "uppercase", letterSpacing: ".06em", marginBottom: 4 }, children: "Amount to Send" }),
+                  /* @__PURE__ */ jsx("div", { style: { fontSize: 22, fontWeight: 700, lineHeight: 1.2 }, children: order.cryptoAmount ? `${parseFloat(order.cryptoAmount).toFixed(8).replace(/\.?0+$/, "")} ${order.token}` : `${order.currency} ${parseFloat(order.amount).toFixed(2)}` }),
+                  order.cryptoAmount && /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 2 }, children: [
+                    "\u2248 ",
+                    order.currency,
+                    " ",
+                    parseFloat(order.amount).toFixed(2)
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: 10, fontWeight: 700, color: "#6b7280", textTransform: "uppercase", letterSpacing: ".06em", marginBottom: 4 }, children: "Deposit Address" }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: 7 }, children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontFamily: "monospace", fontSize: 12, color: "#374151", wordBreak: "break-all", flex: 1, lineHeight: 1.5 }, children: order.address }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: `fl-r-cpbtn${copied ? " fl-r-cpbtn-copied" : ""}`,
+                        onClick: copyAddress,
+                        style: {
+                          flexShrink: 0,
+                          background: "#fff",
+                          border: "1px solid #d1d5db",
+                          borderRadius: 6,
+                          padding: "5px 11px",
+                          fontSize: 12,
+                          cursor: "pointer",
+                          color: "#374151",
+                          transition: "background .12s",
+                          whiteSpace: "nowrap"
+                        },
+                        children: copied ? "Copied!" : "Copy"
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: 10, fontWeight: 700, color: "#6b7280", textTransform: "uppercase", letterSpacing: ".06em", marginBottom: 4 }, children: "Network" }),
+                  /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px", background: "#f3f4f6", borderRadius: 100, fontSize: 12, fontWeight: 500, color: "#374151" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: { width: 7, height: 7, borderRadius: "50%", background: "#10b981", flexShrink: 0 } }),
+                    order.chainName,
+                    " \xB7 ",
+                    order.token
+                  ] })
+                ] })
+              ] })
+            ] })
+          ] }),
+          modalState === "success" && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "30px 16px" }, children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 52, marginBottom: 14 }, children: "\u2705" }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 19, fontWeight: 700, color: "#111", marginBottom: 7 }, children: "Payment Confirmed!" }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 13, color: "#6b7280" }, children: "Your payment has been received." })
+          ] }),
+          modalState === "expired" && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "30px 16px" }, children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 52, marginBottom: 14 }, children: "\u23F3" }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 19, fontWeight: 700, color: "#111", marginBottom: 7 }, children: "Payment Expired" }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 13, color: "#6b7280" }, children: "The payment window has closed. Please start a new payment." })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { padding: "10px 18px 14px", textAlign: "center", fontSize: 11, color: "#9ca3af", borderTop: "1px solid #f3f4f6" }, children: [
+          "Secured by",
+          " ",
+          /* @__PURE__ */ jsx("a", { href: "https://forgelayer.io", target: "_blank", rel: "noopener noreferrer", style: { color: "#f7931a", textDecoration: "none" }, children: "ForgeLayer" })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/ForgeLayerButton.jsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ForgeLayerButton({
+  // Payment params
+  amount,
+  currency = "USD",
+  chain = "ethereum",
+  token = "USDT",
+  orderId,
+  paymentWindow,
+  reuseAddress,
+  // Backend base path (proxied or absolute)
+  baseUrl = "/fl",
+  pollInterval,
+  // Button UI
+  label,
+  children,
+  className,
+  style,
+  disabled,
+  // Callbacks
+  onSuccess,
+  onExpired,
+  onError,
+  onOpen,
+  onClose
+}) {
+  const { modalState, order, timeLeft, error, open, close } = useForgeLayerCheckout({
+    baseUrl,
+    pollInterval,
+    onSuccess,
+    onExpired,
+    onError,
+    onOpen,
+    onClose
+  });
+  const isOpen = modalState !== "closed";
+  const handleClick = () => {
+    open({ amount, currency, chain, token, orderId, paymentWindow, reuseAddress });
+  };
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: handleClick,
+        disabled: disabled || isOpen,
+        className,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "12px 24px",
+          background: "#f7931a",
+          color: "#fff",
+          border: "none",
+          borderRadius: 8,
+          fontSize: 15,
+          fontWeight: 600,
+          cursor: disabled || isOpen ? "not-allowed" : "pointer",
+          opacity: disabled || isOpen ? 0.65 : 1,
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+          lineHeight: 1.2,
+          transition: "opacity .15s",
+          ...style
+        },
+        children: label ?? children ?? "Pay with Crypto"
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx2(
+      ForgeLayerModal,
+      {
+        modalState,
+        order,
+        timeLeft,
+        error,
+        onClose: close
+      }
+    )
+  ] });
+}
+export {
+  ForgeLayerButton,
+  ForgeLayerModal,
+  useForgeLayerCheckout
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/ForgeLayerButton.jsx", "../src/useForgeLayerCheckout.js", "../src/ForgeLayerModal.jsx"],
+  "sourcesContent": ["import React from 'react';\nimport { useForgeLayerCheckout } from './useForgeLayerCheckout.js';\nimport { ForgeLayerModal } from './ForgeLayerModal.jsx';\n\n/**\n * Drop-in React checkout button.\n *\n * Usage:\n *   <ForgeLayerButton\n *     amount={49.99}\n *     currency=\"USD\"\n *     chain=\"ethereum\"\n *     token=\"USDT\"\n *     orderId=\"ORDER-123\"\n *     onSuccess={(order) => router.push('/thank-you')}\n *   >\n *     Pay $49.99\n *   </ForgeLayerButton>\n */\nexport function ForgeLayerButton({\n  // Payment params\n  amount,\n  currency       = 'USD',\n  chain          = 'ethereum',\n  token          = 'USDT',\n  orderId,\n  paymentWindow,\n  reuseAddress,\n  // Backend base path (proxied or absolute)\n  baseUrl        = '/fl',\n  pollInterval,\n  // Button UI\n  label,\n  children,\n  className,\n  style,\n  disabled,\n  // Callbacks\n  onSuccess,\n  onExpired,\n  onError,\n  onOpen,\n  onClose,\n}) {\n  const { modalState, order, timeLeft, error, open, close } = useForgeLayerCheckout({\n    baseUrl,\n    pollInterval,\n    onSuccess,\n    onExpired,\n    onError,\n    onOpen,\n    onClose,\n  });\n\n  const isOpen = modalState !== 'closed';\n\n  const handleClick = () => {\n    open({ amount, currency, chain, token, orderId, paymentWindow, reuseAddress });\n  };\n\n  return (\n    <>\n      <button\n        onClick={handleClick}\n        disabled={disabled || isOpen}\n        className={className}\n        style={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          gap: 8,\n          padding: '12px 24px',\n          background: '#f7931a',\n          color: '#fff',\n          border: 'none',\n          borderRadius: 8,\n          fontSize: 15,\n          fontWeight: 600,\n          cursor: (disabled || isOpen) ? 'not-allowed' : 'pointer',\n          opacity: (disabled || isOpen) ? 0.65 : 1,\n          fontFamily: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n          lineHeight: 1.2,\n          transition: 'opacity .15s',\n          ...style,\n        }}\n      >\n        {label ?? children ?? 'Pay with Crypto'}\n      </button>\n\n      {isOpen && (\n        <ForgeLayerModal\n          modalState={modalState}\n          order={order}\n          timeLeft={timeLeft}\n          error={error}\n          onClose={close}\n        />\n      )}\n    </>\n  );\n}\n", "'use strict';\nimport { useState, useRef, useCallback, useEffect } from 'react';\n\n/**\n * Core hook \u2014 handles all state and API calls for the checkout flow.\n *\n * modalState values:\n *   'closed' | 'loading' | 'payment' | 'success' | 'expired' | 'error'\n */\nexport function useForgeLayerCheckout({\n  baseUrl      = '/fl',\n  pollInterval = 15_000,\n  onSuccess,\n  onExpired,\n  onError,\n  onOpen,\n  onClose: onCloseProp,\n} = {}) {\n  const [modalState, setModalState] = useState('closed');\n  const [order,      setOrder]      = useState(null);\n  const [timeLeft,   setTimeLeft]   = useState(null);\n  const [error,      setError]      = useState(null);\n\n  const pollRef = useRef(null);\n  const cdRef   = useRef(null);\n\n  const stopTimers = useCallback(() => {\n    if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }\n    if (cdRef.current)   { clearInterval(cdRef.current);   cdRef.current   = null; }\n  }, []);\n\n  // Cleanup on unmount\n  useEffect(() => stopTimers, [stopTimers]);\n\n  const close = useCallback(() => {\n    stopTimers();\n    setModalState('closed');\n    setOrder(null);\n    setTimeLeft(null);\n    setError(null);\n    onCloseProp?.();\n  }, [stopTimers, onCloseProp]);\n\n  const startCountdown = useCallback((expiresAt) => {\n    if (cdRef.current) clearInterval(cdRef.current);\n    const tick = () => {\n      const rem = expiresAt - Math.floor(Date.now() / 1000);\n      setTimeLeft(rem <= 0 ? 0 : rem);\n      if (rem <= 0) clearInterval(cdRef.current);\n    };\n    tick();\n    cdRef.current = setInterval(tick, 1000);\n  }, []);\n\n  const startPolling = useCallback((orderData) => {\n    if (pollRef.current) clearInterval(pollRef.current);\n    pollRef.current = setInterval(async () => {\n      try {\n        const res  = await fetch(`${baseUrl}/status?session=${encodeURIComponent(orderData.sessionKey)}`);\n        const data = await res.json();\n        if (!data.ok) return;\n        if (data.status === 'confirmed') {\n          stopTimers();\n          setModalState('success');\n          onSuccess?.(orderData);\n        } else if (data.status === 'expired') {\n          stopTimers();\n          setModalState('expired');\n          onExpired?.();\n        }\n      } catch (_) {}\n    }, pollInterval);\n  }, [baseUrl, pollInterval, stopTimers, onSuccess, onExpired]);\n\n  const open = useCallback(async (params) => {\n    stopTimers();\n    setModalState('loading');\n    setOrder(null);\n    setTimeLeft(null);\n    setError(null);\n    onOpen?.();\n\n    try {\n      const res  = await fetch(`${baseUrl}/create`, {\n        method:  'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body:    JSON.stringify(params),\n      });\n      const data = await res.json();\n      if (!data.ok) throw new Error(data.error || 'Failed to generate payment address.');\n      setOrder(data);\n      setModalState('payment');\n      startCountdown(data.expiresAt);\n      startPolling(data);\n    } catch (e) {\n      setError(e.message);\n      setModalState('error');\n      onError?.(e);\n    }\n  }, [baseUrl, stopTimers, startCountdown, startPolling, onOpen, onError]);\n\n  return { modalState, order, timeLeft, error, open, close };\n}\n", "import React, { useEffect, useState } from 'react';\n\n// Injected once \u2014 handles animations, hover, and pseudo-elements\n// that can't be done with inline styles.\nconst MODAL_CSS = `\n@keyframes fl-r-fade{from{opacity:0}to{opacity:1}}\n@keyframes fl-r-up{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}\n@keyframes fl-r-spin{to{transform:rotate(360deg)}}\n@keyframes fl-r-pulse{0%,100%{opacity:1}50%{opacity:.35}}\n.fl-r-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99999;\n  display:flex;align-items:center;justify-content:center;padding:16px;\n  animation:fl-r-fade .18s ease}\n.fl-r-modal{background:#fff;border-radius:16px;width:100%;max-width:520px;\n  box-shadow:0 24px 64px rgba(0,0,0,.28);overflow:hidden;\n  animation:fl-r-up .22s ease;\n  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;\n  font-size:14px;color:#111}\n.fl-r-spinner{width:38px;height:38px;border:3px solid #e5e7eb;\n  border-top-color:#f7931a;border-radius:50%;\n  animation:fl-r-spin .7s linear infinite;margin:0 auto 14px}\n.fl-r-dot-pending{background:#f59e0b;animation:fl-r-pulse 1.6s ease-in-out infinite}\n.fl-r-dot-confirmed{background:#10b981}\n.fl-r-dot-expired{background:#ef4444}\n.fl-r-xbtn:hover{background:#f3f4f6 !important;color:#111 !important}\n.fl-r-cpbtn:hover{background:#f3f4f6 !important}\n.fl-r-cpbtn-copied{border-color:#10b981 !important;color:#059669 !important}\n@media(max-width:460px){.fl-r-grid{flex-direction:column !important;align-items:center !important}}\n`;\n\nlet _cssInjected = false;\nfunction ensureCSS() {\n  if (_cssInjected || typeof document === 'undefined') return;\n  _cssInjected = true;\n  const el = document.createElement('style');\n  el.textContent = MODAL_CSS;\n  document.head.appendChild(el);\n}\n\nfunction fmtTime(secs) {\n  const m = Math.floor(secs / 60);\n  const s = secs % 60;\n  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;\n}\n\nexport function ForgeLayerModal({ modalState, order, timeLeft, error, onClose }) {\n  const [copied, setCopied] = useState(false);\n\n  useEffect(() => { ensureCSS(); }, []);\n\n  // Escape key\n  useEffect(() => {\n    const handler = (e) => { if (e.key === 'Escape') onClose(); };\n    document.addEventListener('keydown', handler);\n    return () => document.removeEventListener('keydown', handler);\n  }, [onClose]);\n\n  // Lock body scroll\n  useEffect(() => {\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => { document.body.style.overflow = prev; };\n  }, []);\n\n  const copyAddress = () => {\n    if (!order?.address) return;\n    navigator.clipboard?.writeText(order.address).catch(() => {});\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  const urgent = timeLeft !== null && timeLeft <= 120;\n\n  return (\n    <div\n      className=\"fl-r-backdrop\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Crypto payment\"\n      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}\n    >\n      <div className=\"fl-r-modal\">\n\n        {/* \u2500\u2500 Header \u2500\u2500 */}\n        <div style={{\n          display: 'flex', alignItems: 'center', justifyContent: 'space-between',\n          padding: '16px 18px', borderBottom: '1px solid #e5e7eb', background: '#fafafa',\n        }}>\n          <div style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 15, fontWeight: 700 }}>\n            <div style={{\n              width: 26, height: 26, background: '#f7931a', borderRadius: 6,\n              display: 'flex', alignItems: 'center', justifyContent: 'center',\n              color: '#fff', fontSize: 10, fontWeight: 800, flexShrink: 0,\n            }}>FL</div>\n            Pay with Crypto\n          </div>\n          <button\n            className=\"fl-r-xbtn\"\n            onClick={onClose}\n            aria-label=\"Close\"\n            style={{\n              background: 'none', border: 'none', fontSize: 22, lineHeight: 1,\n              cursor: 'pointer', color: '#6b7280', padding: '4px 8px',\n              borderRadius: 5, transition: 'background .12s',\n            }}\n          >\u00D7</button>\n        </div>\n\n        {/* \u2500\u2500 Body \u2500\u2500 */}\n        <div style={{ padding: '20px 18px' }}>\n\n          {/* Loading */}\n          {modalState === 'loading' && (\n            <div style={{ textAlign: 'center', padding: '28px 0' }}>\n              <div className=\"fl-r-spinner\" />\n              <p style={{ color: '#6b7280', fontSize: 13, margin: 0 }}>\n                Generating payment address\u2026\n              </p>\n            </div>\n          )}\n\n          {/* Error */}\n          {modalState === 'error' && (\n            <div style={{ textAlign: 'center', padding: '28px 0' }}>\n              <div style={{ fontSize: 48, marginBottom: 12 }}>\u26A0\uFE0F</div>\n              <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 8 }}>Something went wrong</div>\n              <div style={{ fontSize: 13, color: '#6b7280' }}>{error}</div>\n            </div>\n          )}\n\n          {/* Payment */}\n          {modalState === 'payment' && order && (\n            <>\n              {/* Status bar */}\n              <div style={{\n                display: 'flex', alignItems: 'center', gap: 9,\n                padding: '9px 13px', borderRadius: 8,\n                background: '#f9fafb', border: '1px solid #e5e7eb',\n                marginBottom: 14, fontSize: 13,\n              }}>\n                <span\n                  className=\"fl-r-dot-pending\"\n                  style={{ width: 8, height: 8, borderRadius: '50%', flexShrink: 0 }}\n                />\n                <span>Awaiting payment\u2026</span>\n                <span style={{\n                  marginLeft: 'auto', fontWeight: 600, fontSize: 13,\n                  color: urgent ? '#ef4444' : '#374151',\n                  fontVariantNumeric: 'tabular-nums',\n                }}>\n                  {timeLeft !== null ? fmtTime(timeLeft) : '--:--'}\n                </span>\n              </div>\n\n              {/* Network warning */}\n              <div style={{\n                background: '#fffbeb', border: '1px solid #fde68a', borderRadius: 8,\n                padding: '9px 13px', fontSize: 12, color: '#92400e',\n                marginBottom: 14, lineHeight: 1.5,\n              }}>\n                <strong>\u26A0 Important:</strong> Send only <strong>{order.token}</strong> on the{' '}\n                <strong>{order.chainName}</strong> network only. Wrong network = permanent loss.\n              </div>\n\n              {/* QR + info grid */}\n              <div className=\"fl-r-grid\" style={{ display: 'flex', gap: 18, marginBottom: 14 }}>\n                {/* QR side */}\n                <div style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>\n                  <img\n                    src={order.qrUrl}\n                    alt={`Send to ${order.address}`}\n                    width={148}\n                    height={148}\n                    style={{ border: '1px solid #e5e7eb', borderRadius: 10, display: 'block', background: '#f9fafb' }}\n                  />\n                  <p style={{ fontSize: 11, color: '#9ca3af', margin: 0 }}>Scan with wallet</p>\n                </div>\n\n                {/* Info side */}\n                <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 13 }}>\n                  {/* Amount */}\n                  <div>\n                    <label style={{ display: 'block', fontSize: 10, fontWeight: 700, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 4 }}>\n                      Amount to Send\n                    </label>\n                    <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1.2 }}>\n                      {order.cryptoAmount\n                        ? `${parseFloat(order.cryptoAmount).toFixed(8).replace(/\\.?0+$/, '')} ${order.token}`\n                        : `${order.currency} ${parseFloat(order.amount).toFixed(2)}`}\n                    </div>\n                    {order.cryptoAmount && (\n                      <div style={{ fontSize: 12, color: '#6b7280', marginTop: 2 }}>\n                        \u2248 {order.currency} {parseFloat(order.amount).toFixed(2)}\n                      </div>\n                    )}\n                  </div>\n\n                  {/* Address */}\n                  <div>\n                    <label style={{ display: 'block', fontSize: 10, fontWeight: 700, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 4 }}>\n                      Deposit Address\n                    </label>\n                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 7 }}>\n                      <span style={{ fontFamily: 'monospace', fontSize: 12, color: '#374151', wordBreak: 'break-all', flex: 1, lineHeight: 1.5 }}>\n                        {order.address}\n                      </span>\n                      <button\n                        className={`fl-r-cpbtn${copied ? ' fl-r-cpbtn-copied' : ''}`}\n                        onClick={copyAddress}\n                        style={{\n                          flexShrink: 0, background: '#fff', border: '1px solid #d1d5db',\n                          borderRadius: 6, padding: '5px 11px', fontSize: 12,\n                          cursor: 'pointer', color: '#374151',\n                          transition: 'background .12s', whiteSpace: 'nowrap',\n                        }}\n                      >\n                        {copied ? 'Copied!' : 'Copy'}\n                      </button>\n                    </div>\n                  </div>\n\n                  {/* Network badge */}\n                  <div>\n                    <label style={{ display: 'block', fontSize: 10, fontWeight: 700, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 4 }}>\n                      Network\n                    </label>\n                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 10px', background: '#f3f4f6', borderRadius: 100, fontSize: 12, fontWeight: 500, color: '#374151' }}>\n                      <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#10b981', flexShrink: 0 }} />\n                      {order.chainName} \u00B7 {order.token}\n                    </span>\n                  </div>\n                </div>\n              </div>\n            </>\n          )}\n\n          {/* Success */}\n          {modalState === 'success' && (\n            <div style={{ textAlign: 'center', padding: '30px 16px' }}>\n              <div style={{ fontSize: 52, marginBottom: 14 }}>\u2705</div>\n              <div style={{ fontSize: 19, fontWeight: 700, color: '#111', marginBottom: 7 }}>Payment Confirmed!</div>\n              <div style={{ fontSize: 13, color: '#6b7280' }}>Your payment has been received.</div>\n            </div>\n          )}\n\n          {/* Expired */}\n          {modalState === 'expired' && (\n            <div style={{ textAlign: 'center', padding: '30px 16px' }}>\n              <div style={{ fontSize: 52, marginBottom: 14 }}>\u23F3</div>\n              <div style={{ fontSize: 19, fontWeight: 700, color: '#111', marginBottom: 7 }}>Payment Expired</div>\n              <div style={{ fontSize: 13, color: '#6b7280' }}>\n                The payment window has closed. Please start a new payment.\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* \u2500\u2500 Footer \u2500\u2500 */}\n        <div style={{ padding: '10px 18px 14px', textAlign: 'center', fontSize: 11, color: '#9ca3af', borderTop: '1px solid #f3f4f6' }}>\n          Secured by{' '}\n          <a href=\"https://forgelayer.io\" target=\"_blank\" rel=\"noopener noreferrer\" style={{ color: '#f7931a', textDecoration: 'none' }}>\n            ForgeLayer\n          </a>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["React", "useEffect", "useState", "Fragment", "jsx", "jsxs"]
+}