@moneymq/react 0.5.0 → 0.9.0

package/dist/index.mjs

@@ -1,1739 +0,0 @@
-// src/provider.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo3, useState as useState3 } from "react";
-import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
-import { PhantomWalletAdapter, SolflareWalletAdapter } from "@solana/wallet-adapter-wallets";
-
-// src/wallet-modal-provider.tsx
-import { createContext, useContext, useState as useState2, useCallback as useCallback2, useMemo as useMemo2 } from "react";
-
-// src/wallet-modal.tsx
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useWallet } from "@solana/wallet-adapter-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var overlayStyle = {
-  position: "fixed",
-  inset: 0,
-  backgroundColor: "rgba(0, 0, 0, 0.6)",
-  backdropFilter: "blur(4px)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  zIndex: 9999,
-  animation: "fadeIn 150ms ease-out"
-};
-var modalStyle = {
-  backgroundColor: "#18181b",
-  borderRadius: "1rem",
-  padding: "1.5rem",
-  width: "100%",
-  maxWidth: "400px",
-  maxHeight: "90vh",
-  overflow: "auto",
-  border: "1px solid #27272a",
-  boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
-  animation: "slideUp 150ms ease-out"
-};
-var headerStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: "0.75rem",
-  marginBottom: "0.5rem"
-};
-var logoStyle = {
-  width: "2.5rem",
-  height: "2.5rem",
-  borderRadius: "0.5rem",
-  objectFit: "contain"
-};
-var titleStyle = {
-  fontSize: "1.25rem",
-  fontWeight: 600,
-  color: "#fafafa",
-  margin: 0
-};
-var descriptionStyle = {
-  fontSize: "0.875rem",
-  color: "#a1a1aa",
-  marginBottom: "1.5rem"
-};
-var walletListStyle = {
-  display: "flex",
-  flexDirection: "column",
-  gap: "0.5rem"
-};
-var walletButtonStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: "0.75rem",
-  width: "100%",
-  padding: "0.875rem 1rem",
-  backgroundColor: "#27272a",
-  border: "1px solid #3f3f46",
-  borderRadius: "0.75rem",
-  cursor: "pointer",
-  transition: "all 150ms",
-  textAlign: "left"
-};
-var walletIconStyle = {
-  width: "2rem",
-  height: "2rem",
-  borderRadius: "0.375rem"
-};
-var walletNameStyle = {
-  flex: 1,
-  fontSize: "0.9375rem",
-  fontWeight: 500,
-  color: "#fafafa"
-};
-var walletTagStyle = {
-  fontSize: "0.75rem",
-  padding: "0.25rem 0.5rem",
-  borderRadius: "9999px",
-  backgroundColor: "#3f3f46",
-  color: "#a1a1aa"
-};
-var closeButtonStyle = {
-  position: "absolute",
-  top: "1rem",
-  right: "1rem",
-  padding: "0.5rem",
-  backgroundColor: "transparent",
-  border: "none",
-  borderRadius: "0.375rem",
-  cursor: "pointer",
-  color: "#71717a",
-  transition: "color 150ms"
-};
-var noWalletsStyle = {
-  textAlign: "center",
-  padding: "2rem 1rem",
-  color: "#a1a1aa",
-  fontSize: "0.875rem"
-};
-function WalletModal({ visible, onClose, branding }) {
-  const { wallets, select, connecting } = useWallet();
-  const [hoveredWallet, setHoveredWallet] = useState(null);
-  const accentColor = branding?.accentColor || "#ec4899";
-  const sortedWallets = useMemo(() => {
-    const installed = [];
-    const notInstalled = [];
-    for (const wallet of wallets) {
-      if (wallet.readyState === "Installed") {
-        installed.push(wallet);
-      } else if (wallet.readyState === "Loadable" || wallet.readyState === "NotDetected") {
-        notInstalled.push(wallet);
-      }
-    }
-    return [...installed, ...notInstalled];
-  }, [wallets]);
-  const handleSelect = useCallback((wallet) => {
-    select(wallet.adapter.name);
-    onClose();
-  }, [select, onClose]);
-  useEffect(() => {
-    const handleEscape = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    if (visible) {
-      document.addEventListener("keydown", handleEscape);
-      document.body.style.overflow = "hidden";
-    }
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-      document.body.style.overflow = "";
-    };
-  }, [visible, onClose]);
-  if (!visible) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: `
-        @keyframes fadeIn {
-          from { opacity: 0; }
-          to { opacity: 1; }
-        }
-        @keyframes slideUp {
-          from { opacity: 0; transform: translateY(10px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-      ` }),
-    /* @__PURE__ */ jsx("div", { style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: { ...modalStyle, position: "relative" },
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              style: closeButtonStyle,
-              onClick: onClose,
-              onMouseEnter: (e) => e.currentTarget.style.color = "#fafafa",
-              onMouseLeave: (e) => e.currentTarget.style.color = "#71717a",
-              children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: headerStyle, children: [
-            branding?.logo && /* @__PURE__ */ jsx("img", { src: branding.logo, alt: "", style: logoStyle }),
-            /* @__PURE__ */ jsx("h2", { style: titleStyle, children: branding?.title || "Connect Wallet" })
-          ] }),
-          /* @__PURE__ */ jsx("p", { style: descriptionStyle, children: branding?.description || "Select a wallet to connect and pay securely." }),
-          /* @__PURE__ */ jsx("div", { style: walletListStyle, children: sortedWallets.length === 0 ? /* @__PURE__ */ jsx("div", { style: noWalletsStyle, children: "No wallets found. Please install a Solana wallet extension." }) : sortedWallets.map((wallet) => {
-            const isInstalled = wallet.readyState === "Installed";
-            const isHovered = hoveredWallet === wallet.adapter.name;
-            return /* @__PURE__ */ jsxs(
-              "button",
-              {
-                style: {
-                  ...walletButtonStyle,
-                  backgroundColor: isHovered ? "#3f3f46" : "#27272a",
-                  borderColor: isHovered ? accentColor : "#3f3f46"
-                },
-                onClick: () => handleSelect(wallet),
-                onMouseEnter: () => setHoveredWallet(wallet.adapter.name),
-                onMouseLeave: () => setHoveredWallet(null),
-                disabled: connecting,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "img",
-                    {
-                      src: wallet.adapter.icon,
-                      alt: wallet.adapter.name,
-                      style: walletIconStyle
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { style: walletNameStyle, children: wallet.adapter.name }),
-                  isInstalled ? /* @__PURE__ */ jsx("span", { style: { ...walletTagStyle, backgroundColor: accentColor + "20", color: accentColor }, children: "Detected" }) : /* @__PURE__ */ jsx("span", { style: walletTagStyle, children: "Install" })
-                ]
-              },
-              wallet.adapter.name
-            );
-          }) })
-        ]
-      }
-    ) })
-  ] });
-}
-
-// src/wallet-modal-provider.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var WalletModalContext = createContext({
-  visible: false,
-  setVisible: () => {
-  }
-});
-var BrandingContext = createContext(void 0);
-function useWalletModal() {
-  return useContext(WalletModalContext);
-}
-function useBranding() {
-  return useContext(BrandingContext);
-}
-function CustomWalletModalProvider({ children, branding }) {
-  const [visible, setVisible] = useState2(false);
-  const handleClose = useCallback2(() => setVisible(false), []);
-  const contextValue = useMemo2(
-    () => ({ visible, setVisible }),
-    [visible]
-  );
-  return /* @__PURE__ */ jsx2(BrandingContext.Provider, { value: branding, children: /* @__PURE__ */ jsxs2(WalletModalContext.Provider, { value: contextValue, children: [
-    children,
-    /* @__PURE__ */ jsx2(WalletModal, { visible, onClose: handleClose, branding })
-  ] }) });
-}
-
-// src/provider.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var MoneyMQContext = createContext2(null);
-var SandboxContext = createContext2({
-  isSandboxMode: false,
-  sandboxAccounts: []
-});
-var DEFAULT_RPC_URL = "https://api.devnet.solana.com";
-var SANDBOX_HASH_PREFIX = "SURFNETxSAFEHASH";
-function normalizeRpcUrl(url) {
-  return url.replace("0.0.0.0", "localhost").replace("127.0.0.1", "localhost");
-}
-async function getRpcUrl(apiUrl) {
-  try {
-    console.log("[MoneyMQ] Fetching config from:", `${apiUrl}/config`);
-    const response = await fetch(`${apiUrl}/config`);
-    const config = await response.json();
-    const rawRpcUrl = config.x402?.validator?.rpcUrl || DEFAULT_RPC_URL;
-    console.log("[MoneyMQ] Raw RPC URL from config:", rawRpcUrl);
-    const normalizedUrl = normalizeRpcUrl(rawRpcUrl);
-    console.log("[MoneyMQ] Normalized RPC URL:", normalizedUrl);
-    return normalizedUrl;
-  } catch (err) {
-    console.error("[MoneyMQ] Error fetching config:", err);
-    return DEFAULT_RPC_URL;
-  }
-}
-async function checkSandboxMode(rpcUrl) {
-  try {
-    console.log("[MoneyMQ] Checking sandbox mode with RPC:", rpcUrl);
-    const response = await fetch(rpcUrl, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        jsonrpc: "2.0",
-        id: 1,
-        method: "getLatestBlockhash",
-        params: [{ commitment: "finalized" }]
-      })
-    });
-    const data = await response.json();
-    const blockhash = data?.result?.value?.blockhash || "";
-    const isSandbox = blockhash.startsWith(SANDBOX_HASH_PREFIX);
-    console.log("[MoneyMQ] Blockhash:", blockhash, "| Sandbox:", isSandbox);
-    return isSandbox;
-  } catch (err) {
-    console.error("[MoneyMQ] Error checking sandbox mode:", err);
-    return false;
-  }
-}
-async function fetchTokenBalance(rpcUrl, tokenAccountAddress) {
-  try {
-    const response = await fetch(rpcUrl, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        jsonrpc: "2.0",
-        id: 1,
-        method: "getAccountInfo",
-        params: [tokenAccountAddress, { encoding: "jsonParsed" }]
-      })
-    });
-    const data = await response.json();
-    if (data.result?.value?.data?.parsed?.info?.tokenAmount) {
-      return parseFloat(data.result.value.data.parsed.info.tokenAmount.uiAmountString || "0");
-    }
-    return 0;
-  } catch {
-    return 0;
-  }
-}
-async function fetchSandboxAccounts(apiUrl, rpcUrl) {
-  try {
-    console.log("[MoneyMQ] Fetching sandbox accounts from:", `${apiUrl}/sandbox/accounts`);
-    const response = await fetch(`${apiUrl}/sandbox/accounts`);
-    if (!response.ok) {
-      console.log("[MoneyMQ] Sandbox accounts fetch failed:", response.status);
-      return [];
-    }
-    const data = await response.json();
-    if (data.solana?.userAccounts) {
-      const accounts = await Promise.all(
-        data.solana.userAccounts.map(async (acc) => {
-          let usdcBalance = 0;
-          if (acc.stablecoins?.usdc) {
-            usdcBalance = await fetchTokenBalance(rpcUrl, acc.stablecoins.usdc);
-          }
-          return {
-            id: acc.address,
-            name: acc.label,
-            address: acc.address,
-            secretKeyHex: acc.secretKeyHex,
-            stablecoins: acc.stablecoins,
-            usdcBalance
-          };
-        })
-      );
-      console.log("[MoneyMQ] Sandbox accounts loaded:", accounts.length);
-      return accounts;
-    }
-    return [];
-  } catch (err) {
-    console.error("[MoneyMQ] Error fetching sandbox accounts:", err);
-    return [];
-  }
-}
-function useMoneyMQ() {
-  const client = useContext2(MoneyMQContext);
-  if (!client) {
-    throw new Error("useMoneyMQ must be used within a MoneyMQProvider");
-  }
-  return client;
-}
-function useSandbox() {
-  return useContext2(SandboxContext);
-}
-function MoneyMQProvider({
-  children,
-  client,
-  branding
-}) {
-  const [rpcEndpoint, setRpcEndpoint] = useState3(null);
-  const [isSandboxMode, setIsSandboxMode] = useState3(false);
-  const [sandboxAccounts, setSandboxAccounts] = useState3([]);
-  useEffect2(() => {
-    async function initialize() {
-      const rpcUrl = await getRpcUrl(client.config.endpoint);
-      setRpcEndpoint(rpcUrl);
-      const isSandbox = await checkSandboxMode(rpcUrl);
-      setIsSandboxMode(isSandbox);
-      if (isSandbox) {
-        const accounts = await fetchSandboxAccounts(client.config.endpoint, rpcUrl);
-        setSandboxAccounts(accounts);
-      }
-    }
-    initialize();
-  }, [client.config.endpoint]);
-  const wallets = useMemo3(
-    () => [
-      new PhantomWalletAdapter(),
-      new SolflareWalletAdapter()
-    ],
-    []
-  );
-  const sandboxContextValue = useMemo3(
-    () => ({ isSandboxMode, sandboxAccounts }),
-    [isSandboxMode, sandboxAccounts]
-  );
-  if (!rpcEndpoint) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx3(MoneyMQContext.Provider, { value: client, children: /* @__PURE__ */ jsx3(SandboxContext.Provider, { value: sandboxContextValue, children: /* @__PURE__ */ jsx3(ConnectionProvider, { endpoint: rpcEndpoint, children: /* @__PURE__ */ jsx3(WalletProvider, { wallets, autoConnect: true, children: /* @__PURE__ */ jsx3(CustomWalletModalProvider, { branding, children }) }) }) }) });
-}
-
-// src/checkout-button.tsx
-import React5, { forwardRef, useEffect as useEffect4, useState as useState5 } from "react";
-
-// src/checkout-modal.tsx
-import React4, { useCallback as useCallback3, useState as useState4, useEffect as useEffect3, useRef } from "react";
-import { useWallet as useWallet2 } from "@solana/wallet-adapter-react";
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
-import Lottie from "lottie-react";
-
-// src/assets/logo-animation.json
-var logo_animation_default = { assets: [{ id: "4", layers: [{ ind: 3, ty: 4, ks: {}, ip: 0, op: 58, st: 0, shapes: [{ ty: "rc", p: { a: 0, k: [40, 40] }, r: { a: 0, k: 0 }, s: { a: 0, k: [80, 80] } }, { ty: "fl", c: { a: 0, k: [0, 0, 0, 0] }, o: { a: 0, k: 0 } }] }, { ind: 0, ty: 4, ks: { s: { a: 0, k: [133.33, 133.33] } }, ip: 0, op: 58, st: 0, shapes: [{ ty: "gr", it: [{ ty: "gr", it: [{ ty: "sh", ks: { a: 0, k: { c: true, i: [[0, 0], [0, 20.55], [20.55, 0], [0, -20.55], [-20.55, 0]], o: [[20.55, 0], [0, -20.55], [-20.55, 0], [0, 20.55], [0, 0]], v: [[39.65, 76.85], [76.85, 39.65], [39.65, 2.43], [2.44, 39.65], [39.65, 76.85]] } } }, { ty: "st", c: { a: 0, k: [0, 0, 0, 1] }, lc: 1, lj: 1, ml: 10, o: { a: 0, k: 100 }, w: { a: 0, k: 4.87 } }, { ty: "fl", c: { a: 0, k: [1, 1, 1, 1] }, o: { a: 0, k: 100 } }, { ty: "tr", o: { a: 0, k: 100 }, s: { a: 0, k: [75, 75] } }] }, { ty: "tr", o: { a: 0, k: 100 } }] }] }] }, { id: "7", layers: [{ ind: 6, ty: 0, ks: {}, w: 80, h: 80, ip: 0, op: 58, st: 0, refId: "4" }] }, { id: "12", layers: [{ ind: 11, ty: 4, ks: {}, ip: 0, op: 58, st: 0, shapes: [{ ty: "rc", p: { a: 0, k: [40, 40] }, r: { a: 0, k: 0 }, s: { a: 0, k: [80, 80] } }, { ty: "fl", c: { a: 0, k: [0, 0, 0, 0] }, o: { a: 0, k: 0 } }] }, { ind: 0, ty: 4, ks: { s: { a: 0, k: [133.33, 133.33] } }, ip: 0, op: 58, st: 0, shapes: [{ ty: "gr", it: [{ ty: "gr", it: [{ ty: "sh", ks: { a: 0, k: { c: true, i: [[0, 0], [0, 20.55], [20.55, 0], [0, -20.55], [-20.55, 0]], o: [[20.55, 0], [0, -20.55], [-20.55, 0], [0, 20.55], [0, 0]], v: [[39.65, 76.85], [76.85, 39.65], [39.65, 2.43], [2.44, 39.65], [39.65, 76.85]] } } }, { ty: "st", c: { a: 0, k: [0, 0, 0, 1] }, lc: 1, lj: 1, ml: 10, o: { a: 0, k: 100 }, w: { a: 0, k: 4.87 } }, { ty: "fl", c: { a: 0, k: [1, 1, 1, 1] }, o: { a: 0, k: 100 } }, { ty: "tr", o: { a: 0, k: 100 }, s: { a: 0, k: [75, 75] } }] }, { ty: "tr", o: { a: 0, k: 100 } }] }] }] }, { id: "17", layers: [{ ind: 16, ty: 4, ks: {}, ip: 0, op: 58, st: 0, shapes: [{ ty: "rc", p: { a: 0, k: [40, 40] }, r: { a: 0, k: 0 }, s: { a: 0, k: [80, 80] } }, { ty: "fl", c: { a: 0, k: [0, 0, 0, 0] }, o: { a: 0, k: 0 } }] }, { ind: 0, ty: 4, ks: { s: { a: 0, k: [133.33, 133.33] } }, ip: 0, op: 58, st: 0, shapes: [{ ty: "gr", it: [{ ty: "gr", it: [{ ty: "sh", ks: { a: 0, k: { c: true, i: [[0, 0], [0, 20.55], [20.55, 0], [0, -20.55], [-20.55, 0]], o: [[20.55, 0], [0, -20.55], [-20.55, 0], [0, 20.55], [0, 0]], v: [[39.65, 76.85], [76.85, 39.65], [39.65, 2.43], [2.44, 39.65], [39.65, 76.85]] } } }, { ty: "st", c: { a: 0, k: [0, 0, 0, 1] }, lc: 1, lj: 1, ml: 10, o: { a: 0, k: 100 }, w: { a: 0, k: 4.87 } }, { ty: "fl", c: { a: 0, k: [1, 1, 1, 1] }, o: { a: 0, k: 100 } }, { ty: "tr", o: { a: 0, k: 100 }, s: { a: 0, k: [75, 75] } }] }, { ty: "tr", o: { a: 0, k: 100 } }] }] }] }, { id: "22", layers: [{ ind: 21, ty: 4, ks: {}, ip: 0, op: 58, st: 0, shapes: [{ ty: "rc", p: { a: 0, k: [40, 40] }, r: { a: 0, k: 0 }, s: { a: 0, k: [80, 80] } }, { ty: "fl", c: { a: 0, k: [0, 0, 0, 0] }, o: { a: 0, k: 0 } }] }, { ind: 0, ty: 4, ks: { s: { a: 0, k: [133.33, 133.33] } }, ip: 0, op: 58, st: 0, shapes: [{ ty: "gr", it: [{ ty: "gr", it: [{ ty: "sh", ks: { a: 0, k: { c: true, i: [[0, 0], [0, 20.55], [20.55, 0], [0, -20.55], [-20.55, 0]], o: [[20.55, 0], [0, -20.55], [-20.55, 0], [0, 20.55], [0, 0]], v: [[39.65, 76.85], [76.85, 39.65], [39.65, 2.43], [2.44, 39.65], [39.65, 76.85]] } } }, { ty: "st", c: { a: 0, k: [0, 0, 0, 1] }, lc: 1, lj: 1, ml: 10, o: { a: 0, k: 100 }, w: { a: 0, k: 4.87 } }, { ty: "fl", c: { a: 0, k: [1, 1, 1, 1] }, o: { a: 0, k: 100 } }, { ty: "tr", o: { a: 0, k: 100 }, s: { a: 0, k: [75, 75] } }] }, { ty: "tr", o: { a: 0, k: 100 } }] }] }] }], fr: 60, h: 200, ip: 0, layers: [{ ind: 9, ty: 0, parent: 2, ks: { a: { a: 0, k: [40, 40] }, o: { a: 1, k: [{ t: 0, s: [100], h: 1 }, { t: 7.2, s: [100], h: 1 }, { t: 7.2, s: [0], h: 1 }, { t: 57, s: [0], h: 1 }] }, p: { a: 1, k: [{ t: 0, s: [119, 40], i: { x: [0, 1], y: [1, 1] }, o: { x: [0.384, 0], y: [0, 0] } }, { t: 48, s: [219, 40], i: { x: [1, 1], y: [1, 1] }, o: { x: [0, 0], y: [0, 0] } }, { t: 57, s: [219, 40], h: 1 }] }, s: { a: 1, k: [{ t: 0, s: [100, 100], i: { x: [1, 1], y: [1, 1] }, o: { x: [0, 0], y: [0, 0] } }, { t: 5.4, s: [100, 100], i: { x: [0, 0], y: [1, 1] }, o: { x: [0.5, 0.5], y: [0, 0] } }, { t: 7.2, s: [103, 103], i: { x: [1, 1], y: [1, 1] }, o: { x: [0, 0], y: [0, 0] } }, { t: 57, s: [103, 103], h: 1 }] } }, w: 80, h: 80, ip: 0, op: 58, st: 0, refId: "7" }, { ind: 14, ty: 0, parent: 10, ks: {}, w: 80, h: 80, ip: 0, op: 58, st: 0, refId: "12" }, { ind: 10, ty: 3, parent: 2, ks: { p: { a: 1, k: [{ t: 0, s: [39, 0], i: { x: [0, 1], y: [1, 1] }, o: { x: [0.384, 0], y: [0, 0] } }, { t: 48, s: [79, 0], i: { x: [1, 1], y: [1, 1] }, o: { x: [0, 0], y: [0, 0] } }, { t: 57, s: [79, 0], h: 1 }] } }, ip: 0, op: 58, st: 0 }, { ind: 19, ty: 0, parent: 15, ks: {}, w: 80, h: 80, ip: 0, op: 58, st: 0, refId: "17" }, { ind: 15, ty: 3, parent: 2, ks: { p: { a: 1, k: [{ t: 0, s: [0, 0], i: { x: [1, 1], y: [1, 1] }, o: { x: [0, 0], y: [0, 0] } }, { t: 7.2, s: [0, 0], i: { x: [0, 1], y: [1, 1] }, o: { x: [0.384, 0], y: [0, 0] } }, { t: 55.2, s: [39, 0], i: { x: [1, 1], y: [1, 1] }, o: { x: [0, 0], y: [0, 0] } }, { t: 57, s: [39, 0], h: 1 }] } }, ip: 0, op: 58, st: 0 }, { ind: 24, ty: 0, parent: 20, ks: {}, w: 80, h: 80, ip: 0, op: 58, st: 0, refId: "22" }, { ind: 20, ty: 3, parent: 2, ks: { a: { a: 0, k: [40, 40] }, p: { a: 0, k: [40, 40] }, s: { a: 1, k: [{ t: 0, s: [70, 70], i: { x: [1, 1], y: [1, 1] }, o: { x: [0, 0], y: [0, 0] } }, { t: 13.8, s: [70, 70], i: { x: [0, 0], y: [1, 1] }, o: { x: [0.5, 0.5], y: [0, 0] } }, { t: 37.2, s: [100, 100], i: { x: [1, 1], y: [1, 1] }, o: { x: [0, 0], y: [0, 0] } }, { t: 57, s: [100, 100], h: 1 }] } }, ip: 0, op: 58, st: 0 }, { ind: 2, ty: 3, parent: 1, ks: { p: { a: 0, k: [21, 61] } }, ip: 0, op: 58, st: 0 }, { ind: 1, ty: 3, parent: 0, ks: {}, ip: 0, op: 58, st: 0 }, { ind: 0, ty: 3, ks: {}, ip: 0, op: 58, st: 0 }], meta: { g: "https://jitter.video" }, op: 57, v: "5.7.4", w: 200 };
-
-// src/checkout-modal.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function encodeFormData(data) {
-  const params = new URLSearchParams();
-  const addParams = (obj, prefix = "") => {
-    for (const [key, value] of Object.entries(obj)) {
-      const paramKey = prefix ? `${prefix}[${key}]` : key;
-      if (value === null || value === void 0) {
-        continue;
-      } else if (typeof value === "object" && !Array.isArray(value)) {
-        addParams(value, paramKey);
-      } else {
-        params.append(paramKey, String(value));
-      }
-    }
-  };
-  addParams(data);
-  return params.toString();
-}
-function normalizeRpcUrl2(url) {
-  return url.replace("0.0.0.0", "localhost").replace("127.0.0.1", "localhost");
-}
-async function makeRequestWith402Handling(url, method, body, secretKeyHex, rpcUrl, headers = {}, useJson = false) {
-  console.log(`[MoneyMQ] Making ${method} request to ${url}`);
-  const contentType = useJson ? "application/json" : "application/x-www-form-urlencoded";
-  const requestBody = body ? useJson ? JSON.stringify(body) : encodeFormData(body) : void 0;
-  let response = await fetch(url, {
-    method,
-    headers: {
-      "Content-Type": contentType,
-      ...headers
-    },
-    body: requestBody
-  });
-  let data = await response.json();
-  console.log(`[MoneyMQ] Response status: ${response.status}`, data);
-  if (response.status === 402) {
-    console.log("[MoneyMQ] \u{1F4B3} 402 Payment Required - processing payment...");
-    const paymentRequirements = data?.accepts || data?.payment_requirements || data?.error?.payment_requirements || [];
-    if (paymentRequirements.length === 0) {
-      console.warn("[MoneyMQ] \u26A0\uFE0F  No payment requirements found in 402 response");
-      throw new Error("Payment required but no payment requirements provided");
-    }
-    console.log("[MoneyMQ] Payment requirements:", paymentRequirements);
-    const { createPaymentHeader, selectPaymentRequirements } = await import("x402/client");
-    const { createSigner } = await import("x402-fetch");
-    const signer = await createSigner("solana", secretKeyHex, {
-      svmConfig: rpcUrl
-    });
-    const selectedPaymentRequirement = selectPaymentRequirements(paymentRequirements, "solana", "exact");
-    console.log(`[MoneyMQ] \u{1F4B0} Creating payment for ${selectedPaymentRequirement.network}...`);
-    const paymentHeaderValue = await createPaymentHeader(
-      signer,
-      1,
-      // x402Version
-      selectedPaymentRequirement,
-      {
-        svmConfig: {
-          rpcUrl
-        }
-      }
-    );
-    console.log("[MoneyMQ] \u2705 Payment header created, retrying request...");
-    response = await fetch(url, {
-      method,
-      headers: {
-        "Content-Type": contentType,
-        "X-Payment": paymentHeaderValue,
-        ...headers
-      },
-      body: requestBody
-    });
-    data = await response.json();
-    console.log(`[MoneyMQ] Retry response status: ${response.status}`, data);
-    if (!response.ok) {
-      throw new Error(data.error?.message || "Request failed after payment");
-    }
-  } else if (!response.ok) {
-    throw new Error(data.error?.message || "Request failed");
-  }
-  return data;
-}
-async function createSandboxPayment(apiUrl, rpcUrl, amount, currency, recipient, senderAddress, secretKeyHex, lineItems) {
-  console.log("[MoneyMQ] Creating checkout session...", { amount, currency, recipient, senderAddress });
-  const checkoutLineItems = lineItems?.map((item) => ({
-    price_data: {
-      currency: item.price.currency.toLowerCase(),
-      unit_amount: item.price.unit_amount,
-      product_data: {
-        name: item.product.name,
-        description: item.product.description || void 0,
-        metadata: {
-          product_id: item.product.id
-        }
-      }
-    },
-    quantity: item.quantity
-  })) || [];
-  const checkoutSession = await makeRequestWith402Handling(
-    `${apiUrl}/catalog/v1/checkout/sessions`,
-    "POST",
-    {
-      line_items: checkoutLineItems,
-      customer: senderAddress,
-      metadata: {
-        sender_address: senderAddress,
-        recipient_address: recipient
-      },
-      mode: "payment"
-    },
-    secretKeyHex,
-    rpcUrl,
-    {},
-    true
-    // useJson
-  );
-  console.log("[MoneyMQ] Checkout session created:", checkoutSession);
-  const paymentIntentId = checkoutSession.payment_intent;
-  console.log("[MoneyMQ] Confirming payment intent:", paymentIntentId);
-  const confirmedIntent = await makeRequestWith402Handling(
-    `${apiUrl}/catalog/v1/payment_intents/${paymentIntentId}/confirm`,
-    "POST",
-    {},
-    secretKeyHex,
-    rpcUrl
-  );
-  console.log("[MoneyMQ] Payment intent confirmed:", confirmedIntent);
-  return confirmedIntent.id;
-}
-var truncateAddress = (address) => {
-  if (address.length <= 12) return address;
-  return `${address.slice(0, 4)}...${address.slice(-4)}`;
-};
-function CheckoutModal({
-  visible,
-  onClose,
-  amount,
-  currency,
-  recipient,
-  lineItems,
-  onSuccess,
-  onError,
-  accentColor = "#ec4899",
-  debug = false
-}) {
-  const [isSending, setIsSending] = useState4(false);
-  const [copiedSender, setCopiedSender] = useState4(false);
-  const [copiedRecipient, setCopiedRecipient] = useState4(false);
-  const [showDetails, setShowDetails] = useState4(false);
-  const [showDebug, setShowDebug] = useState4(false);
-  const [accountBalance, setAccountBalance] = useState4(null);
-  const [selectedWallet, setSelectedWallet] = useState4(null);
-  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState4(null);
-  const { publicKey, connected, disconnect, wallets, select, wallet: connectedWallet } = useWallet2();
-  const branding = useBranding();
-  const { isSandboxMode, sandboxAccounts } = useSandbox();
-  const client = useMoneyMQ();
-  const lottieRef = useRef(null);
-  const [shouldRender, setShouldRender] = useState4(false);
-  const [animationPhase, setAnimationPhase] = useState4("closed");
-  useEffect3(() => {
-    if (visible && !shouldRender) {
-      setShouldRender(true);
-      requestAnimationFrame(() => {
-        setAnimationPhase("backdrop");
-        setTimeout(() => {
-          setAnimationPhase("open");
-        }, 150);
-      });
-    } else if (!visible && shouldRender && animationPhase !== "closing") {
-      setAnimationPhase("closing");
-      setTimeout(() => {
-        setShouldRender(false);
-        setAnimationPhase("closed");
-      }, 300);
-    }
-  }, [visible, shouldRender, animationPhase]);
-  const handleAnimatedClose = useCallback3(() => {
-    if (animationPhase === "closing") return;
-    setAnimationPhase("closing");
-    setTimeout(() => {
-      setShouldRender(false);
-      setAnimationPhase("closed");
-      onClose();
-    }, 300);
-  }, [onClose, animationPhase]);
-  const copyToClipboard = (text, type) => {
-    navigator.clipboard.writeText(text);
-    if (type === "sender") {
-      setCopiedSender(true);
-      setTimeout(() => setCopiedSender(false), 2e3);
-    } else {
-      setCopiedRecipient(true);
-      setTimeout(() => setCopiedRecipient(false), 2e3);
-    }
-  };
-  const handleSelectWallet = (wallet) => {
-    setSelectedWallet(wallet);
-    setSelectedPaymentMethod({ type: "browser_extension", wallet });
-    select(wallet.adapter.name);
-  };
-  const handleSelectSandboxAccount = (account) => {
-    setSelectedPaymentMethod({ type: "sandbox_account", sandboxAccount: account });
-    setSelectedWallet(null);
-  };
-  const handleDisconnect = async () => {
-    await disconnect();
-    setSelectedWallet(null);
-    setSelectedPaymentMethod(null);
-  };
-  const availableWallets = wallets.filter(
-    (wallet) => wallet.readyState === "Installed" || wallet.readyState === "Loadable"
-  );
-  const displayedSandboxAccounts = sandboxAccounts.slice(0, 3);
-  const currentWalletIcon = connectedWallet?.adapter.icon || selectedWallet?.adapter.icon;
-  const currentWalletName = connectedWallet?.adapter.name || selectedWallet?.adapter.name;
-  const getCurrentSelectionDisplay = () => {
-    if (connected && publicKey) {
-      return {
-        icon: currentWalletIcon,
-        name: currentWalletName,
-        address: publicKey.toBase58(),
-        type: "browser_extension"
-      };
-    }
-    if (selectedPaymentMethod?.type === "sandbox_account" && selectedPaymentMethod.sandboxAccount) {
-      const name = selectedPaymentMethod.sandboxAccount.name;
-      return {
-        icon: null,
-        name: name.charAt(0).toUpperCase() + name.slice(1),
-        address: selectedPaymentMethod.sandboxAccount.address,
-        type: "sandbox_account"
-      };
-    }
-    return null;
-  };
-  const currentSelection = getCurrentSelectionDisplay();
-  React4.useEffect(() => {
-    if (!debug || !currentSelection) {
-      setAccountBalance(null);
-      return;
-    }
-    async function fetchBalance() {
-      try {
-        if (currentSelection?.type === "sandbox_account" && selectedPaymentMethod?.sandboxAccount) {
-          setAccountBalance(selectedPaymentMethod.sandboxAccount.usdcBalance ?? null);
-          return;
-        }
-        if (currentSelection?.type === "browser_extension" && publicKey) {
-          const apiUrl = normalizeRpcUrl2(client.config.endpoint);
-          try {
-            const configResponse = await fetch(`${apiUrl}/config`);
-            const config = await configResponse.json();
-            const rpcUrl = normalizeRpcUrl2(config.x402?.validator?.rpcUrl || "http://localhost:8899");
-            const response = await fetch(rpcUrl, {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({
-                jsonrpc: "2.0",
-                id: 1,
-                method: "getTokenAccountsByOwner",
-                params: [
-                  publicKey.toBase58(),
-                  { programId: "TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA" },
-                  { encoding: "jsonParsed" }
-                ]
-              })
-            });
-            const data = await response.json();
-            const usdcAccount = data.result?.value?.find(
-              (acc) => acc.account.data.parsed.info.mint === "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"
-              // USDC mint
-            );
-            if (usdcAccount) {
-              setAccountBalance(usdcAccount.account.data.parsed.info.tokenAmount.uiAmount);
-            } else {
-              setAccountBalance(0);
-            }
-          } catch {
-            console.log("[MoneyMQ] Could not fetch balance");
-            setAccountBalance(null);
-          }
-        }
-      } catch {
-        setAccountBalance(null);
-      }
-    }
-    fetchBalance();
-  }, [debug, currentSelection, selectedPaymentMethod, publicKey, client.config.endpoint]);
-  const handlePay = useCallback3(async () => {
-    if (!recipient) return;
-    let senderAddress;
-    let secretKeyHex;
-    if (selectedPaymentMethod?.type === "sandbox_account" && selectedPaymentMethod.sandboxAccount) {
-      senderAddress = selectedPaymentMethod.sandboxAccount.address;
-      secretKeyHex = selectedPaymentMethod.sandboxAccount.secretKeyHex;
-    } else if (publicKey) {
-      senderAddress = publicKey.toBase58();
-    } else {
-      return;
-    }
-    setIsSending(true);
-    try {
-      if (selectedPaymentMethod?.type === "sandbox_account" && secretKeyHex) {
-        const apiUrl = normalizeRpcUrl2(client.config.endpoint);
-        let rpcUrl = "http://localhost:8899";
-        try {
-          const configResponse = await fetch(`${apiUrl}/config`);
-          const config = await configResponse.json();
-          rpcUrl = normalizeRpcUrl2(config.x402?.validator?.rpcUrl || rpcUrl);
-        } catch {
-          console.log("[MoneyMQ] Using default RPC URL");
-        }
-        const paymentId = await createSandboxPayment(
-          apiUrl,
-          rpcUrl,
-          amount,
-          currency,
-          recipient,
-          senderAddress,
-          secretKeyHex,
-          lineItems
-        );
-        setIsSending(false);
-        onSuccess?.(paymentId);
-        onClose();
-        return;
-      }
-      const event = new CustomEvent("moneymq:payment-initiated", {
-        detail: {
-          amount,
-          currency,
-          recipient,
-          sender: senderAddress,
-          paymentMethod: selectedPaymentMethod?.type || "browser_extension"
-        },
-        bubbles: true
-      });
-      window.dispatchEvent(event);
-      const signature = await new Promise((resolve, reject) => {
-        const handleSuccess = (e) => {
-          const customEvent = e;
-          cleanup();
-          resolve(customEvent.detail.signature);
-        };
-        const handleError = (e) => {
-          const customEvent = e;
-          cleanup();
-          reject(customEvent.detail);
-        };
-        const cleanup = () => {
-          window.removeEventListener("moneymq:payment-success", handleSuccess);
-          window.removeEventListener("moneymq:payment-error", handleError);
-        };
-        window.addEventListener("moneymq:payment-success", handleSuccess);
-        window.addEventListener("moneymq:payment-error", handleError);
-        setTimeout(() => {
-          cleanup();
-          reject(new Error("Payment timeout"));
-        }, 6e4);
-      });
-      setIsSending(false);
-      onSuccess?.(signature);
-      onClose();
-    } catch (err) {
-      console.error("Payment failed:", err);
-      setIsSending(false);
-      onError?.(err instanceof Error ? err : new Error(String(err)));
-    }
-  }, [publicKey, recipient, amount, currency, onSuccess, onError, onClose, selectedPaymentMethod, client.config.endpoint, lineItems]);
-  const canPay = (connected && publicKey || selectedPaymentMethod?.type === "sandbox_account") && recipient && !isSending;
-  useEffect3(() => {
-    if (!canPay || !visible) return;
-    lottieRef.current?.goToAndPlay(0, true);
-    const interval = setInterval(() => {
-      lottieRef.current?.goToAndPlay(0, true);
-    }, 3e3);
-    return () => clearInterval(interval);
-  }, [canPay, visible]);
-  if (!shouldRender) return null;
-  const WalletIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx4("path", { d: "M21 12V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2v-5z" }),
-    /* @__PURE__ */ jsx4("path", { d: "M16 12h.01", strokeWidth: "2", strokeLinecap: "round" })
-  ] });
-  const SandboxIcon = () => /* @__PURE__ */ jsx4("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx4("path", { d: "M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 1-6.23.693L5 15.5m14.8-.2a2.25 2.25 0 0 1 .775 2.646l-.972 2.916a2.25 2.25 0 0 1-2.134 1.538H6.532a2.25 2.25 0 0 1-2.135-1.538l-.971-2.916A2.25 2.25 0 0 1 4.2 15.3", strokeLinecap: "round", strokeLinejoin: "round" }) });
-  const WrenchIcon = () => /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx4("path", { d: "M11.42 15.17L17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z", strokeLinecap: "round", strokeLinejoin: "round" }) });
-  const MoneyMQLogo = () => /* @__PURE__ */ jsxs3("svg", { width: "80", height: "17", viewBox: "0 0 471 99", fill: "none", children: [
-    /* @__PURE__ */ jsxs3("g", { clipPath: "url(#clip0_524_7)", children: [
-      /* @__PURE__ */ jsx4("path", { d: "M12.8892 77.1417H0V0.637573H14.3415L40.0291 60.1104L65.8075 0.637573H80.149V77.1417H67.169V25.5014L44.9306 77.2327H35.0368L12.8892 25.5014V77.2327V77.1417Z", fill: "white" }),
-      /* @__PURE__ */ jsx4("path", { d: "M113.28 77.9614C108.015 77.9614 103.295 76.7774 99.2104 74.5005C95.1257 72.2235 91.8581 68.9448 89.5888 64.7553C87.2289 60.5658 86.1396 55.6476 86.1396 49.9098C86.1396 44.172 87.3196 39.1628 89.7704 34.9733C92.2211 30.7838 95.4888 27.5051 99.6642 25.2281C103.84 22.9512 108.56 21.7673 113.733 21.7673C118.907 21.7673 123.627 22.9512 127.803 25.2281C131.978 27.5051 135.336 30.7838 137.787 34.9733C140.238 39.1628 141.509 44.081 141.509 49.8188C141.509 55.5566 140.238 60.5658 137.787 64.7553C135.246 68.9448 131.887 72.2235 127.621 74.5005C123.355 76.7774 118.635 77.9614 113.37 77.9614H113.28ZM113.189 66.9411C115.73 66.9411 118.181 66.3036 120.45 65.1196C122.72 63.8445 124.626 62.023 126.078 59.4729C127.53 56.9227 128.257 53.735 128.257 49.8188C128.257 45.9025 127.53 42.897 126.169 40.3468C124.807 37.7967 122.992 35.9752 120.723 34.7001C118.453 33.425 116.003 32.8786 113.461 32.8786C110.92 32.8786 108.56 33.5161 106.381 34.7001C104.203 35.9752 102.478 37.7967 101.207 40.3468C99.9365 42.897 99.3011 46.0846 99.3011 50.0009C99.3011 53.9172 99.9365 56.9227 101.117 59.4729C102.387 62.023 104.021 63.8445 106.2 65.1196C108.378 66.3947 110.647 66.9411 113.189 66.9411Z", fill: "white" }),
-      /* @__PURE__ */ jsx4("path", { d: "M146.41 22.4959H157.484L158.392 27.8694C160.207 25.9568 162.386 24.4995 164.927 23.4066C167.469 22.3137 170.192 21.7673 173.096 21.7673C177.272 21.7673 180.993 22.678 184.079 24.4085C187.166 26.23 189.526 28.7801 191.25 32.241C192.884 35.7019 193.792 39.9825 193.792 45.1739V77.0506H181.356V46.9043C181.356 42.2594 180.449 38.7075 178.633 36.4305C176.818 34.1536 174.095 32.9696 170.373 32.9696C166.652 32.9696 163.747 34.1536 161.75 36.5216C159.753 38.8896 158.846 42.4416 158.846 47.0865V77.1417H146.501V22.4959H146.41Z", fill: "white" }),
-      /* @__PURE__ */ jsx4("path", { d: "M225.107 77.9614C219.661 77.9614 214.85 76.7774 210.765 74.3183C206.681 71.8592 203.504 68.5805 201.144 64.2999C198.875 60.0193 197.695 55.0101 197.695 49.4545C197.695 44.172 198.784 39.4361 201.053 35.2466C203.322 31.057 206.409 27.7783 210.402 25.4103C214.396 23.0423 218.935 21.7673 223.927 21.7673C228.919 21.7673 233.73 22.8602 237.633 25.1371C241.536 27.414 244.622 30.5106 246.892 34.609C249.161 38.6164 250.25 43.3523 250.25 48.6348C250.25 49.5455 250.25 50.4563 250.068 51.4581C249.978 52.46 249.796 53.4618 249.705 54.5547H211.038C211.31 57.1959 212.127 59.3818 213.398 61.2033C214.669 63.0248 216.302 64.4821 218.209 65.4839C220.205 66.4857 222.475 67.0322 225.107 67.0322C228.102 67.0322 230.825 66.3947 233.185 65.1196C235.636 63.8445 237.27 62.2051 238.268 60.2925L249.07 63.9356C246.892 68.3073 243.715 71.7682 239.448 74.2272C235.182 76.6863 230.372 77.9614 225.016 77.9614H225.107ZM236.816 44.5363C236.816 42.2594 236.272 40.2557 235.092 38.4342C233.912 36.6127 232.368 35.1555 230.553 34.1536C228.647 33.0607 226.559 32.6053 224.199 32.6053C222.112 32.6053 220.115 33.1518 218.39 34.1536C216.575 35.1555 215.122 36.6127 213.852 38.3431C212.581 40.1647 211.764 42.2594 211.31 44.6274H236.816V44.5363Z", fill: "white" }),
-      /* @__PURE__ */ jsx4("path", { d: "M291.368 22.4958H304.439L272.398 99H260.235L270.038 75.5022L248.707 22.4958H262.413L276.754 61.2033L291.368 22.4958Z", fill: "white" }),
-      /* @__PURE__ */ jsx4("path", { d: "M320.687 77.1417H307.797V0.637573H322.139L347.827 60.1104L373.605 0.637573H387.946V77.1417H374.966V25.5014L352.728 77.2327H342.834L320.596 25.5014V77.2327L320.687 77.1417Z", fill: "white" }),
-      /* @__PURE__ */ jsx4("path", { d: "M432.332 77.9614C426.977 77.9614 421.894 77.0506 417.174 75.138C412.454 73.2254 408.369 70.5842 404.829 67.1233C401.289 63.6624 398.566 59.5639 396.569 54.7369C394.573 50.0009 393.574 44.7185 393.574 38.9807C393.574 33.2429 394.573 28.0515 396.569 23.3155C398.566 18.5796 401.289 14.3901 404.829 10.9292C408.369 7.46826 412.454 4.73597 417.174 2.82337C421.894 0.910764 426.886 0 432.332 0C437.779 0 442.771 0.910764 447.4 2.82337C452.029 4.73597 456.205 7.37719 459.745 10.9292C463.285 14.3901 466.008 18.5796 468.005 23.3155C470.002 28.0515 471 33.3339 471 38.9807C471 44.6274 470.002 50.0009 468.095 54.7369C466.098 59.4729 463.375 63.6624 459.835 67.1233C456.295 70.5842 452.12 73.2254 447.491 75.138C442.862 77.0506 437.779 77.9614 432.423 77.9614H432.332ZM432.242 66.9411C437.143 66.9411 441.591 65.7571 445.403 63.4802C449.215 61.2033 452.302 57.9246 454.571 53.735C456.84 49.5455 457.929 44.6274 457.929 38.8896C457.929 33.1518 456.84 28.1426 454.571 24.0442C452.302 19.9457 449.306 16.667 445.403 14.3901C441.591 12.1132 437.143 10.9292 432.242 10.9292C427.34 10.9292 422.892 12.1132 419.08 14.3901C415.268 16.667 412.182 19.9457 410.003 24.0442C407.825 28.1426 406.736 33.1518 406.736 38.8896C406.736 44.6274 407.825 49.5455 410.094 53.735C412.273 57.9246 415.359 61.2033 419.171 63.4802C422.983 65.7571 427.34 66.9411 432.332 66.9411H432.242ZM426.251 55.0101H438.868V87.9798H426.251V55.0101Z", fill: "white" })
-    ] }),
-    /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsx4("clipPath", { id: "clip0_524_7", children: /* @__PURE__ */ jsx4("rect", { width: "471", height: "99", fill: "white" }) }) })
-  ] });
-  const isBackdropVisible = animationPhase === "backdrop" || animationPhase === "open";
-  const isModalVisible = animationPhase === "open";
-  const isClosing = animationPhase === "closing";
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx4("style", { children: `
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      ` }),
-    /* @__PURE__ */ jsx4(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          inset: 0,
-          zIndex: 9998,
-          backgroundColor: isBackdropVisible && !isClosing ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0)",
-          backdropFilter: isBackdropVisible && !isClosing ? "blur(8px)" : "blur(0px)",
-          transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 250ms cubic-bezier(0.4, 0, 0.2, 1)"
-        },
-        onClick: handleAnimatedClose
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          inset: 0,
-          zIndex: 9999,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "1rem",
-          pointerEvents: isClosing ? "none" : "auto"
-        },
-        onClick: handleAnimatedClose,
-        children: /* @__PURE__ */ jsxs3(
-          "div",
-          {
-            style: {
-              width: "100%",
-              maxWidth: "380px",
-              backgroundColor: "#2c2c2e",
-              borderRadius: "1rem",
-              overflow: "hidden",
-              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
-              opacity: isModalVisible && !isClosing ? 1 : 0,
-              transform: isModalVisible && !isClosing ? "translateY(0) scale(1)" : "translateY(-20px) scale(0.98)",
-              transition: "opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1)"
-            },
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ jsxs3(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    padding: "1rem 1.25rem",
-                    borderBottom: "1px solid #3a3a3c"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-                      branding?.logo ? /* @__PURE__ */ jsx4(
-                        "img",
-                        {
-                          src: branding.logo,
-                          alt: "Logo",
-                          style: { height: "24px", width: "auto", filter: "invert(1)" }
-                        }
-                      ) : /* @__PURE__ */ jsx4(MoneyMQLogo, {}),
-                      isSandboxMode && /* @__PURE__ */ jsx4("span", { style: { fontSize: "0.75rem", fontWeight: 600, color: "#ff9f0a", position: "relative", top: "-1px" }, children: "{ sandbox }" })
-                    ] }),
-                    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-                      debug && /* @__PURE__ */ jsx4(
-                        "button",
-                        {
-                          onClick: () => setShowDebug(!showDebug),
-                          style: {
-                            width: "28px",
-                            height: "28px",
-                            borderRadius: "9999px",
-                            border: "none",
-                            backgroundColor: showDebug ? "rgba(255, 159, 10, 0.2)" : "#3a3a3c",
-                            color: showDebug ? "#ff9f0a" : "#8e8e93",
-                            cursor: "pointer",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            padding: 0,
-                            transition: "all 150ms"
-                          },
-                          title: "Debug info",
-                          children: /* @__PURE__ */ jsx4(WrenchIcon, {})
-                        }
-                      ),
-                      /* @__PURE__ */ jsx4(
-                        "button",
-                        {
-                          onClick: handleAnimatedClose,
-                          style: {
-                            padding: "0.375rem 0.75rem",
-                            fontSize: "0.8125rem",
-                            fontWeight: 500,
-                            color: "#8e8e93",
-                            backgroundColor: "#3a3a3c",
-                            borderRadius: "9999px",
-                            border: "none",
-                            cursor: "pointer"
-                          },
-                          children: "cancel"
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx4("div", { style: { padding: "0.75rem" }, children: currentSelection ? /* @__PURE__ */ jsx4(
-                "div",
-                {
-                  style: {
-                    backgroundColor: "#3a3a3c",
-                    borderRadius: "0.75rem",
-                    padding: "0.875rem 1rem",
-                    marginBottom: "0.5rem"
-                  },
-                  children: /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
-                    /* @__PURE__ */ jsx4(
-                      "div",
-                      {
-                        style: {
-                          width: "40px",
-                          height: "40px",
-                          borderRadius: "0.5rem",
-                          backgroundColor: currentSelection.icon ? "transparent" : "#636366",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          color: "#fff",
-                          overflow: "hidden"
-                        },
-                        children: currentSelection.icon ? /* @__PURE__ */ jsx4(
-                          "img",
-                          {
-                            src: currentSelection.icon,
-                            alt: currentSelection.name || "Wallet",
-                            style: { width: "40px", height: "40px", borderRadius: "0.5rem" }
-                          }
-                        ) : currentSelection.type === "sandbox_account" ? /* @__PURE__ */ jsx4(SandboxIcon, {}) : /* @__PURE__ */ jsx4(WalletIcon, {})
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minWidth: 0 }, children: [
-                      /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem", marginBottom: "0.125rem" }, children: [
-                        /* @__PURE__ */ jsxs3("span", { style: { fontSize: "0.75rem", color: "#8e8e93" }, children: [
-                          "From ",
-                          truncateAddress(currentSelection.address)
-                        ] }),
-                        /* @__PURE__ */ jsx4(
-                          "button",
-                          {
-                            onClick: () => copyToClipboard(currentSelection.address, "sender"),
-                            style: {
-                              padding: 0,
-                              background: "none",
-                              border: "none",
-                              cursor: "pointer",
-                              color: copiedSender ? "#30d158" : "#8e8e93",
-                              display: "flex",
-                              alignItems: "center"
-                            },
-                            children: /* @__PURE__ */ jsxs3("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                              /* @__PURE__ */ jsx4("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-                              /* @__PURE__ */ jsx4("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
-                            ] })
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ jsx4(
-                        "span",
-                        {
-                          style: {
-                            fontSize: "0.9375rem",
-                            fontWeight: 500,
-                            color: "#fff"
-                          },
-                          children: currentSelection.name
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx4(
-                      "button",
-                      {
-                        onClick: handleDisconnect,
-                        style: {
-                          fontSize: "0.75rem",
-                          fontWeight: 500,
-                          color: "#ff453a",
-                          backgroundColor: "rgba(255, 69, 58, 0.15)",
-                          borderRadius: "9999px",
-                          border: "none",
-                          cursor: "pointer",
-                          padding: "0.25rem 0.625rem"
-                        },
-                        children: "unlink"
-                      }
-                    )
-                  ] })
-                }
-              ) : /* @__PURE__ */ jsxs3(Menu, { as: "div", style: { position: "relative", marginBottom: "0.5rem" }, children: [
-                /* @__PURE__ */ jsxs3(
-                  MenuButton,
-                  {
-                    style: {
-                      width: "100%",
-                      backgroundColor: "#3a3a3c",
-                      borderRadius: "0.75rem",
-                      padding: "0.875rem 1rem",
-                      border: "none",
-                      cursor: "pointer",
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "0.75rem",
-                      textAlign: "left"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx4(
-                        "div",
-                        {
-                          style: {
-                            width: "40px",
-                            height: "40px",
-                            borderRadius: "0.5rem",
-                            backgroundColor: currentWalletIcon ? "transparent" : "#636366",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            color: "#fff",
-                            overflow: "hidden",
-                            flexShrink: 0
-                          },
-                          children: currentWalletIcon ? /* @__PURE__ */ jsx4(
-                            "img",
-                            {
-                              src: currentWalletIcon,
-                              alt: currentWalletName || "Wallet",
-                              style: { width: "40px", height: "40px", borderRadius: "0.5rem" }
-                            }
-                          ) : /* @__PURE__ */ jsx4(WalletIcon, {})
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minWidth: 0 }, children: [
-                        /* @__PURE__ */ jsx4("div", { style: { fontSize: "0.75rem", color: "#8e8e93", marginBottom: "0.125rem" }, children: "From" }),
-                        /* @__PURE__ */ jsx4(
-                          "span",
-                          {
-                            style: {
-                              fontSize: "0.9375rem",
-                              fontWeight: 500,
-                              color: "#0a84ff"
-                            },
-                            children: selectedWallet ? selectedWallet.adapter.name : "Connect Wallet"
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ jsx4(
-                        "svg",
-                        {
-                          width: "16",
-                          height: "16",
-                          viewBox: "0 0 16 16",
-                          fill: "#8e8e93",
-                          style: { flexShrink: 0 },
-                          children: /* @__PURE__ */ jsx4("path", { fillRule: "evenodd", d: "M5.22 10.22a.75.75 0 0 1 1.06 0L8 11.94l1.72-1.72a.75.75 0 1 1 1.06 1.06l-2.25 2.25a.75.75 0 0 1-1.06 0l-2.25-2.25a.75.75 0 0 1 0-1.06ZM10.78 5.78a.75.75 0 0 1-1.06 0L8 4.06 6.28 5.78a.75.75 0 0 1-1.06-1.06l2.25-2.25a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06Z", clipRule: "evenodd" })
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs3(
-                  MenuItems,
-                  {
-                    anchor: "bottom start",
-                    style: {
-                      backgroundColor: "#2c2c2e",
-                      borderRadius: "0.75rem",
-                      padding: "0.25rem",
-                      boxShadow: "0 10px 25px rgba(0, 0, 0, 0.4)",
-                      zIndex: 1e4,
-                      outline: "none",
-                      border: "1px solid #48484a",
-                      maxHeight: "300px",
-                      overflowY: "auto",
-                      width: "var(--button-width)",
-                      marginTop: "0.25rem"
-                    },
-                    children: [
-                      isSandboxMode && displayedSandboxAccounts.length > 0 && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                        displayedSandboxAccounts.map((account) => /* @__PURE__ */ jsx4(MenuItem, { children: ({ focus }) => /* @__PURE__ */ jsxs3(
-                          "button",
-                          {
-                            onClick: () => handleSelectSandboxAccount(account),
-                            style: {
-                              display: "flex",
-                              alignItems: "center",
-                              gap: "0.75rem",
-                              padding: "0.875rem 1rem",
-                              backgroundColor: focus ? "#3a3a3c" : "transparent",
-                              borderRadius: "0.5rem",
-                              border: "none",
-                              cursor: "pointer",
-                              width: "100%",
-                              textAlign: "left",
-                              transition: "background-color 150ms"
-                            },
-                            children: [
-                              /* @__PURE__ */ jsx4(
-                                "div",
-                                {
-                                  style: {
-                                    width: "40px",
-                                    height: "40px",
-                                    borderRadius: "0.5rem",
-                                    backgroundColor: "#636366",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    overflow: "hidden",
-                                    flexShrink: 0,
-                                    color: "#fff"
-                                  },
-                                  children: /* @__PURE__ */ jsx4(SandboxIcon, {})
-                                }
-                              ),
-                              /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minWidth: 0 }, children: [
-                                /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem", marginBottom: "0.125rem" }, children: [
-                                  /* @__PURE__ */ jsxs3("span", { style: { fontSize: "0.75rem", color: "#8e8e93" }, children: [
-                                    "From ",
-                                    truncateAddress(account.address)
-                                  ] }),
-                                  /* @__PURE__ */ jsx4(
-                                    "span",
-                                    {
-                                      role: "button",
-                                      tabIndex: 0,
-                                      onClick: (e) => {
-                                        e.stopPropagation();
-                                        navigator.clipboard.writeText(account.address);
-                                      },
-                                      onKeyDown: (e) => {
-                                        if (e.key === "Enter" || e.key === " ") {
-                                          e.stopPropagation();
-                                          navigator.clipboard.writeText(account.address);
-                                        }
-                                      },
-                                      style: {
-                                        padding: 0,
-                                        background: "none",
-                                        border: "none",
-                                        cursor: "pointer",
-                                        color: "#8e8e93",
-                                        display: "flex",
-                                        alignItems: "center"
-                                      },
-                                      children: /* @__PURE__ */ jsxs3("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                                        /* @__PURE__ */ jsx4("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-                                        /* @__PURE__ */ jsx4("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
-                                      ] })
-                                    }
-                                  )
-                                ] }),
-                                /* @__PURE__ */ jsx4(
-                                  "span",
-                                  {
-                                    style: {
-                                      fontSize: "0.9375rem",
-                                      fontWeight: 500,
-                                      color: "#fff"
-                                    },
-                                    children: account.name.charAt(0).toUpperCase() + account.name.slice(1)
-                                  }
-                                )
-                              ] }),
-                              account.usdcBalance !== void 0 && /* @__PURE__ */ jsxs3(
-                                "span",
-                                {
-                                  style: {
-                                    fontSize: "0.6875rem",
-                                    color: "#ff9f0a",
-                                    backgroundColor: "rgba(255, 159, 10, 0.15)",
-                                    padding: "0.25rem 0.5rem",
-                                    borderRadius: "0.25rem",
-                                    flexShrink: 0
-                                  },
-                                  children: [
-                                    account.usdcBalance.toLocaleString(),
-                                    " USDC"
-                                  ]
-                                }
-                              )
-                            ]
-                          }
-                        ) }, account.id)),
-                        availableWallets.length > 0 && /* @__PURE__ */ jsx4("div", { style: { height: "1px", backgroundColor: "#48484a", margin: "0.25rem 0" } })
-                      ] }),
-                      availableWallets.length > 0 ? availableWallets.map((wallet) => /* @__PURE__ */ jsx4(MenuItem, { children: ({ focus }) => /* @__PURE__ */ jsxs3(
-                        "button",
-                        {
-                          onClick: () => handleSelectWallet(wallet),
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "0.75rem",
-                            padding: "0.875rem 1rem",
-                            backgroundColor: focus ? "#3a3a3c" : "transparent",
-                            borderRadius: "0.5rem",
-                            border: "none",
-                            cursor: "pointer",
-                            width: "100%",
-                            textAlign: "left",
-                            transition: "background-color 150ms"
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx4(
-                              "div",
-                              {
-                                style: {
-                                  width: "40px",
-                                  height: "40px",
-                                  borderRadius: "0.5rem",
-                                  backgroundColor: "#636366",
-                                  display: "flex",
-                                  alignItems: "center",
-                                  justifyContent: "center",
-                                  overflow: "hidden",
-                                  flexShrink: 0
-                                },
-                                children: wallet.adapter.icon ? /* @__PURE__ */ jsx4(
-                                  "img",
-                                  {
-                                    src: wallet.adapter.icon,
-                                    alt: wallet.adapter.name,
-                                    style: {
-                                      width: "40px",
-                                      height: "40px",
-                                      borderRadius: "0.5rem"
-                                    }
-                                  }
-                                ) : /* @__PURE__ */ jsx4(WalletIcon, {})
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minWidth: 0 }, children: [
-                              /* @__PURE__ */ jsx4("div", { style: { fontSize: "0.75rem", color: "#8e8e93", marginBottom: "0.125rem" }, children: "Browser Extension" }),
-                              /* @__PURE__ */ jsx4(
-                                "span",
-                                {
-                                  style: {
-                                    fontSize: "0.9375rem",
-                                    fontWeight: 500,
-                                    color: "#fff"
-                                  },
-                                  children: wallet.adapter.name
-                                }
-                              )
-                            ] }),
-                            wallet.readyState === "Installed" && /* @__PURE__ */ jsx4(
-                              "span",
-                              {
-                                style: {
-                                  fontSize: "0.6875rem",
-                                  color: "#30d158",
-                                  backgroundColor: "rgba(48, 209, 88, 0.15)",
-                                  padding: "0.25rem 0.5rem",
-                                  borderRadius: "0.25rem",
-                                  flexShrink: 0
-                                },
-                                children: "Detected"
-                              }
-                            )
-                          ]
-                        }
-                      ) }, wallet.adapter.name)) : !isSandboxMode || displayedSandboxAccounts.length === 0 ? /* @__PURE__ */ jsx4(
-                        "div",
-                        {
-                          style: {
-                            textAlign: "center",
-                            padding: "1.5rem",
-                            color: "#8e8e93",
-                            fontSize: "0.875rem"
-                          },
-                          children: "No wallets detected"
-                        }
-                      ) : null
-                    ]
-                  }
-                )
-              ] }) }),
-              /* @__PURE__ */ jsxs3(
-                "div",
-                {
-                  style: {
-                    padding: "1rem 1.25rem 1.25rem",
-                    borderTop: "1px solid #3a3a3c"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs3("div", { style: { marginBottom: "1rem" }, children: [
-                      lineItems && lineItems.length > 0 && /* @__PURE__ */ jsx4("div", { style: { marginBottom: "0.75rem" }, children: lineItems.map((item, index) => /* @__PURE__ */ jsxs3(
-                        "div",
-                        {
-                          style: {
-                            display: "flex",
-                            justifyContent: "space-between",
-                            alignItems: "center",
-                            padding: "0.5rem 0",
-                            borderBottom: index < lineItems.length - 1 ? "1px solid #3a3a3c" : "none"
-                          },
-                          children: [
-                            /* @__PURE__ */ jsxs3("div", { style: { flex: 1 }, children: [
-                              /* @__PURE__ */ jsx4("div", { style: { fontSize: "0.875rem", color: "#fff", fontWeight: 500 }, children: item.product.name }),
-                              item.quantity > 1 && /* @__PURE__ */ jsxs3("div", { style: { fontSize: "0.75rem", color: "#8e8e93" }, children: [
-                                "Qty: ",
-                                item.quantity,
-                                " \xD7 ",
-                                (item.price.unit_amount / 100).toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
-                                " ",
-                                item.price.currency.toUpperCase()
-                              ] })
-                            ] }),
-                            /* @__PURE__ */ jsxs3("div", { style: { fontSize: "0.875rem", color: "#fff", fontWeight: 500 }, children: [
-                              item.subtotal.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
-                              " ",
-                              item.price.currency.toUpperCase()
-                            ] })
-                          ]
-                        },
-                        item.product.id + "-" + index
-                      )) }),
-                      /* @__PURE__ */ jsx4("div", { style: { fontSize: "0.875rem", color: "#8e8e93", marginBottom: "0.25rem" }, children: "Total" }),
-                      /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-                        /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "baseline", gap: "0.375rem" }, children: [
-                          /* @__PURE__ */ jsx4("span", { style: { fontSize: "2rem", fontWeight: 600, color: "#fff" }, children: amount.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }),
-                          /* @__PURE__ */ jsx4("span", { style: { fontSize: "1rem", fontWeight: 500, color: "#8e8e93" }, children: currency })
-                        ] }),
-                        /* @__PURE__ */ jsx4(
-                          "button",
-                          {
-                            onClick: () => setShowDetails(!showDetails),
-                            style: {
-                              width: "22px",
-                              height: "22px",
-                              borderRadius: "50%",
-                              border: "1.5px solid #8e8e93",
-                              background: "none",
-                              color: "#8e8e93",
-                              fontSize: "0.8125rem",
-                              fontWeight: 600,
-                              fontStyle: "italic",
-                              fontFamily: "Georgia, serif",
-                              cursor: "pointer",
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              padding: 0,
-                              transition: "all 150ms"
-                            },
-                            title: "Show payment details",
-                            children: "i"
-                          }
-                        )
-                      ] }),
-                      showDetails && /* @__PURE__ */ jsx4(
-                        "div",
-                        {
-                          style: {
-                            marginTop: "0.75rem",
-                            padding: "0.625rem 0.75rem",
-                            backgroundColor: "#3a3a3c",
-                            borderRadius: "0.5rem",
-                            fontSize: "0.8125rem"
-                          },
-                          children: /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-                            /* @__PURE__ */ jsx4("span", { style: { color: "#8e8e93" }, children: "Recipient" }),
-                            /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
-                              /* @__PURE__ */ jsx4(
-                                "span",
-                                {
-                                  style: {
-                                    color: "#fff",
-                                    fontFamily: "ui-monospace, monospace",
-                                    fontSize: "0.75rem"
-                                  },
-                                  children: truncateAddress(recipient)
-                                }
-                              ),
-                              /* @__PURE__ */ jsx4(
-                                "button",
-                                {
-                                  onClick: () => copyToClipboard(recipient, "recipient"),
-                                  style: {
-                                    padding: 0,
-                                    background: "none",
-                                    border: "none",
-                                    cursor: "pointer",
-                                    color: copiedRecipient ? "#30d158" : "#8e8e93",
-                                    display: "flex",
-                                    alignItems: "center"
-                                  },
-                                  children: /* @__PURE__ */ jsxs3("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                                    /* @__PURE__ */ jsx4("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-                                    /* @__PURE__ */ jsx4("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
-                                  ] })
-                                }
-                              )
-                            ] })
-                          ] })
-                        }
-                      ),
-                      showDebug && /* @__PURE__ */ jsxs3(
-                        "div",
-                        {
-                          style: {
-                            marginTop: "0.75rem",
-                            padding: "0.75rem",
-                            backgroundColor: "#1c1c1e",
-                            borderRadius: "0.5rem",
-                            fontSize: "0.75rem",
-                            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx4("div", { style: {
-                              display: "flex",
-                              alignItems: "center",
-                              gap: "0.5rem",
-                              marginBottom: "0.5rem",
-                              paddingBottom: "0.5rem",
-                              borderBottom: "1px solid #2c2c2e"
-                            }, children: /* @__PURE__ */ jsx4("span", { style: { color: "#8e8e93" }, children: "DEBUG" }) }),
-                            /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-                              /* @__PURE__ */ jsx4("span", { style: { color: "#8e8e93" }, children: "balance" }),
-                              /* @__PURE__ */ jsx4("span", { style: { color: "#30d158" }, children: accountBalance !== null ? `${accountBalance.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${currency}` : currentSelection ? "..." : "null" })
-                            ] })
-                          ]
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx4(
-                      "button",
-                      {
-                        onClick: handlePay,
-                        disabled: !canPay,
-                        style: {
-                          width: "100%",
-                          padding: "0.5rem 1rem",
-                          borderRadius: "0.75rem",
-                          border: "none",
-                          fontSize: "1.0625rem",
-                          fontWeight: 600,
-                          cursor: canPay ? "pointer" : "not-allowed",
-                          backgroundColor: canPay ? "#000" : "#48484a",
-                          color: canPay ? "#fff" : "#8e8e93",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          gap: "0.25rem",
-                          transition: "opacity 150ms"
-                        },
-                        children: isSending ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                          /* @__PURE__ */ jsx4(
-                            "div",
-                            {
-                              style: {
-                                width: "1.25rem",
-                                height: "1.25rem",
-                                border: "2px solid currentColor",
-                                borderTopColor: "transparent",
-                                borderRadius: "50%",
-                                animation: "spin 1s linear infinite"
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsx4("span", { children: "Processing..." })
-                        ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                          /* @__PURE__ */ jsx4(
-                            Lottie,
-                            {
-                              lottieRef,
-                              animationData: logo_animation_default,
-                              loop: false,
-                              autoplay: false,
-                              style: {
-                                width: 48,
-                                height: 48,
-                                marginTop: "-8px",
-                                marginBottom: "-8px",
-                                marginLeft: "-8px",
-                                marginRight: "4px",
-                                opacity: canPay ? 1 : 0.55,
-                                transition: "opacity 150ms"
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsxs3("span", { children: [
-                            "Pay ",
-                            amount.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
-                            " ",
-                            currency
-                          ] })
-                        ] })
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      }
-    )
-  ] });
-}
-
-// src/checkout-button.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var baseStyle = {
-  position: "relative",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: "0.5rem",
-  borderRadius: "0.5rem",
-  fontSize: "0.875rem",
-  fontWeight: 600,
-  padding: "0.625rem 1rem",
-  cursor: "pointer",
-  transition: "all 200ms",
-  border: "none"
-};
-var solidStyle = {
-  ...baseStyle,
-  backgroundColor: "#ec4899",
-  color: "white",
-  boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
-};
-var outlineStyle = {
-  ...baseStyle,
-  backgroundColor: "transparent",
-  color: "#ec4899",
-  border: "1px solid #ec4899"
-};
-var CheckoutButton = forwardRef(
-  function CheckoutButton2({
-    basket,
-    onSuccess,
-    onError,
-    variant = "solid",
-    children,
-    disabled,
-    debug = false
-  }, ref) {
-    const client = useMoneyMQ();
-    const [isModalOpen, setIsModalOpen] = useState5(false);
-    const [isHovered, setIsHovered] = useState5(false);
-    const [isLoading, setIsLoading] = useState5(true);
-    const [error, setError] = useState5(null);
-    const [recipient, setRecipient] = useState5("");
-    const { totalAmount, currency, lineItems } = React5.useMemo(() => {
-      if (!basket || basket.length === 0) {
-        return { totalAmount: 0, currency: "USDC", lineItems: [] };
-      }
-      const baseCurrency = basket[0].price.currency.toUpperCase();
-      const items = basket.map((item) => ({
-        product: item.product,
-        price: item.price,
-        quantity: item.quantity ?? 1,
-        subtotal: item.price.unit_amount / 100 * (item.quantity ?? 1)
-      }));
-      const total = items.reduce((sum, item) => sum + item.subtotal, 0);
-      return {
-        totalAmount: total,
-        currency: baseCurrency,
-        lineItems: items
-      };
-    }, [basket]);
-    useEffect4(() => {
-      async function fetchPaymentDetails() {
-        setIsLoading(true);
-        setError(null);
-        try {
-          if (!basket || basket.length === 0) {
-            throw new Error("Basket is empty");
-          }
-          const apiUrl = client.config.endpoint;
-          const configResponse = await fetch(`${apiUrl}/config`);
-          if (!configResponse.ok) {
-            throw new Error(`Failed to fetch config: ${configResponse.status}`);
-          }
-          const config = await configResponse.json();
-          if (config.x402?.payoutAccount?.address) {
-            setRecipient(config.x402.payoutAccount.address);
-          }
-        } catch (err) {
-          console.error("[CheckoutButton] Error fetching payment details:", err);
-          const errorMessage = err instanceof Error ? err.message : "Failed to load payment details";
-          setError(errorMessage);
-          onError?.(new Error(errorMessage));
-        } finally {
-          setIsLoading(false);
-        }
-      }
-      fetchPaymentDetails();
-    }, [basket, client.config.endpoint, onError]);
-    const handleClick = () => {
-      if (!isLoading && !error) {
-        setIsModalOpen(true);
-      }
-    };
-    const handlePaymentSuccess = (signature) => {
-      const payment = {
-        id: `pay_${Date.now()}`,
-        amount: totalAmount,
-        currency,
-        status: "completed",
-        signature
-      };
-      onSuccess?.(payment);
-    };
-    const handlePaymentError = (error2) => {
-      onError?.(error2);
-    };
-    const isDisabled = disabled || isLoading || !!error;
-    const buttonStyle = {
-      ...variant === "outline" ? outlineStyle : solidStyle,
-      backgroundColor: variant === "solid" ? isHovered && !isDisabled ? "#db2777" : "#ec4899" : isHovered && !isDisabled ? "rgba(236, 72, 153, 0.1)" : "transparent",
-      opacity: isDisabled ? 0.5 : 1,
-      cursor: isDisabled ? "not-allowed" : "pointer"
-    };
-    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      /* @__PURE__ */ jsx5(
-        "button",
-        {
-          ref,
-          onClick: handleClick,
-          disabled: isDisabled,
-          style: buttonStyle,
-          title: error || void 0,
-          onMouseEnter: () => setIsHovered(true),
-          onMouseLeave: () => setIsHovered(false),
-          children: isLoading ? /* @__PURE__ */ jsx5("span", { children: "Loading..." }) : error ? /* @__PURE__ */ jsx5("span", { children: "Error" }) : children || /* @__PURE__ */ jsx5("span", { children: "Pay" })
-        }
-      ),
-      /* @__PURE__ */ jsx5(
-        CheckoutModal,
-        {
-          visible: isModalOpen,
-          onClose: () => setIsModalOpen(false),
-          amount: totalAmount,
-          currency,
-          recipient,
-          lineItems,
-          onSuccess: handlePaymentSuccess,
-          onError: handlePaymentError,
-          debug
-        }
-      )
-    ] });
-  }
-);
-
-// src/use-payment.ts
-import { useCallback as useCallback4, useState as useState6 } from "react";
-import { useWallet as useWallet3 } from "@solana/wallet-adapter-react";
-function usePayment() {
-  const [isPending, setIsPending] = useState6(false);
-  const [lastPayment, setLastPayment] = useState6(null);
-  const { publicKey, connected } = useWallet3();
-  const { setVisible } = useWalletModal();
-  const pay = useCallback4(async (priceId) => {
-    if (!connected || !publicKey) {
-      setVisible(true);
-      return null;
-    }
-    setIsPending(true);
-    try {
-      const event = new CustomEvent("moneymq:pay", {
-        detail: { priceId, publicKey: publicKey.toBase58() },
-        bubbles: true
-      });
-      window.dispatchEvent(event);
-      const result = await new Promise((resolve, reject) => {
-        const handleSuccess = (e) => {
-          const customEvent = e;
-          cleanup();
-          resolve(customEvent.detail);
-        };
-        const handleError = (e) => {
-          const customEvent = e;
-          cleanup();
-          reject(customEvent.detail);
-        };
-        const cleanup = () => {
-          window.removeEventListener("moneymq:payment-success", handleSuccess);
-          window.removeEventListener("moneymq:payment-error", handleError);
-        };
-        window.addEventListener("moneymq:payment-success", handleSuccess);
-        window.addEventListener("moneymq:payment-error", handleError);
-        setTimeout(() => {
-          cleanup();
-          reject(new Error("Payment timeout"));
-        }, 6e4);
-      });
-      setLastPayment(result);
-      return result;
-    } catch {
-      return null;
-    } finally {
-      setIsPending(false);
-    }
-  }, [connected, publicKey, setVisible]);
-  return { pay, isPending, lastPayment };
-}
-export {
-  CheckoutButton,
-  CheckoutModal,
-  MoneyMQContext,
-  MoneyMQProvider,
-  SandboxContext,
-  useMoneyMQ,
-  usePayment,
-  useSandbox
-};
-//# sourceMappingURL=index.mjs.map