@moneymq/react 0.1.1

package/dist/index.js

@@ -0,0 +1,1567 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  MoneyMQProvider: () => MoneyMQProvider,
+  PayButton: () => PayButton,
+  PaymentModal: () => PaymentModal,
+  useMoneyMQ: () => useMoneyMQ,
+  usePayment: () => usePayment,
+  useSandbox: () => useSandbox
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react3 = require("react");
+var import_wallet_adapter_react2 = require("@solana/wallet-adapter-react");
+var import_wallet_adapter_wallets = require("@solana/wallet-adapter-wallets");
+
+// src/wallet-modal-provider.tsx
+var import_react2 = require("react");
+
+// src/wallet-modal.tsx
+var import_react = require("react");
+var import_wallet_adapter_react = require("@solana/wallet-adapter-react");
+var import_jsx_runtime = require("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 } = (0, import_wallet_adapter_react.useWallet)();
+  const [hoveredWallet, setHoveredWallet] = (0, import_react.useState)(null);
+  const accentColor = branding?.accentColor || "#ec4899";
+  const sortedWallets = (0, import_react.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 = (0, import_react.useCallback)((wallet) => {
+    select(wallet.adapter.name);
+    onClose();
+  }, [select, onClose]);
+  (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: { ...modalStyle, position: "relative" },
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              style: closeButtonStyle,
+              onClick: onClose,
+              onMouseEnter: (e) => e.currentTarget.style.color = "#fafafa",
+              onMouseLeave: (e) => e.currentTarget.style.color = "#71717a",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: headerStyle, children: [
+            branding?.logo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: branding.logo, alt: "", style: logoStyle }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: titleStyle, children: branding?.title || "Connect Wallet" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: descriptionStyle, children: branding?.description || "Select a wallet to connect and pay securely." }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: walletListStyle, children: sortedWallets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+                    "img",
+                    {
+                      src: wallet.adapter.icon,
+                      alt: wallet.adapter.name,
+                      style: walletIconStyle
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: walletNameStyle, children: wallet.adapter.name }),
+                  isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...walletTagStyle, backgroundColor: accentColor + "20", color: accentColor }, children: "Detected" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: walletTagStyle, children: "Install" })
+                ]
+              },
+              wallet.adapter.name
+            );
+          }) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/wallet-modal-provider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var WalletModalContext = (0, import_react2.createContext)({
+  visible: false,
+  setVisible: () => {
+  }
+});
+var BrandingContext = (0, import_react2.createContext)(void 0);
+function useWalletModal() {
+  return (0, import_react2.useContext)(WalletModalContext);
+}
+function useBranding() {
+  return (0, import_react2.useContext)(BrandingContext);
+}
+function CustomWalletModalProvider({ children, branding }) {
+  const [visible, setVisible] = (0, import_react2.useState)(false);
+  const handleClose = (0, import_react2.useCallback)(() => setVisible(false), []);
+  const contextValue = (0, import_react2.useMemo)(
+    () => ({ visible, setVisible }),
+    [visible]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BrandingContext.Provider, { value: branding, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(WalletModalContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WalletModal, { visible, onClose: handleClose, branding })
+  ] }) });
+}
+
+// src/provider.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MoneyMQContext = (0, import_react3.createContext)(null);
+var SandboxContext = (0, import_react3.createContext)({
+  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 = (0, import_react3.useContext)(MoneyMQContext);
+  if (!client) {
+    throw new Error("useMoneyMQ must be used within a MoneyMQProvider");
+  }
+  return client;
+}
+function useSandbox() {
+  return (0, import_react3.useContext)(SandboxContext);
+}
+function MoneyMQProvider({
+  children,
+  client,
+  branding
+}) {
+  const [rpcEndpoint, setRpcEndpoint] = (0, import_react3.useState)(null);
+  const [isSandboxMode, setIsSandboxMode] = (0, import_react3.useState)(false);
+  const [sandboxAccounts, setSandboxAccounts] = (0, import_react3.useState)([]);
+  (0, import_react3.useEffect)(() => {
+    async function initialize() {
+      const rpcUrl = await getRpcUrl(client.config.url);
+      setRpcEndpoint(rpcUrl);
+      const isSandbox = await checkSandboxMode(rpcUrl);
+      setIsSandboxMode(isSandbox);
+      if (isSandbox) {
+        const accounts = await fetchSandboxAccounts(client.config.url, rpcUrl);
+        setSandboxAccounts(accounts);
+      }
+    }
+    initialize();
+  }, [client.config.url]);
+  const wallets = (0, import_react3.useMemo)(
+    () => [
+      new import_wallet_adapter_wallets.PhantomWalletAdapter(),
+      new import_wallet_adapter_wallets.SolflareWalletAdapter()
+    ],
+    []
+  );
+  const sandboxContextValue = (0, import_react3.useMemo)(
+    () => ({ isSandboxMode, sandboxAccounts }),
+    [isSandboxMode, sandboxAccounts]
+  );
+  if (!rpcEndpoint) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoneyMQContext.Provider, { value: client, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SandboxContext.Provider, { value: sandboxContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_adapter_react2.ConnectionProvider, { endpoint: rpcEndpoint, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_adapter_react2.WalletProvider, { wallets, autoConnect: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CustomWalletModalProvider, { branding, children }) }) }) }) });
+}
+
+// src/pay-button.tsx
+var import_react6 = require("react");
+
+// src/payment-modal.tsx
+var import_react4 = require("react");
+var import_wallet_adapter_react3 = require("@solana/wallet-adapter-react");
+var import_react5 = require("@headlessui/react");
+var import_jsx_runtime4 = require("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 = {}) {
+  console.log(`[MoneyMQ] Making ${method} request to ${url}`);
+  const formData = body ? encodeFormData(body) : void 0;
+  let response = await fetch(url, {
+    method,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      ...headers
+    },
+    body: formData
+  });
+  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?.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": "application/x-www-form-urlencoded",
+        "X-Payment": paymentHeaderValue,
+        ...headers
+      },
+      body: formData
+    });
+    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, productName) {
+  console.log("[MoneyMQ] Creating sandbox payment...", { amount, currency, recipient, senderAddress });
+  const paymentIntent = await makeRequestWith402Handling(
+    `${apiUrl}/v1/payment_intents`,
+    "POST",
+    {
+      amount: Math.round(amount * 100),
+      // Convert to cents (Stripe-style)
+      currency: currency.toLowerCase(),
+      customer: senderAddress,
+      description: productName ? `Purchase - ${productName}` : "Payment",
+      metadata: {
+        sender_address: senderAddress,
+        recipient_address: recipient
+      }
+    },
+    secretKeyHex,
+    rpcUrl
+  );
+  console.log("[MoneyMQ] Payment intent created:", paymentIntent);
+  console.log("[MoneyMQ] Confirming payment intent:", paymentIntent.id);
+  const confirmedIntent = await makeRequestWith402Handling(
+    `${apiUrl}/v1/payment_intents/${paymentIntent.id}/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 PaymentModal({
+  visible,
+  onClose,
+  amount,
+  currency,
+  recipient,
+  productName,
+  onSuccess,
+  onError,
+  accentColor = "#ec4899"
+}) {
+  const [isSending, setIsSending] = (0, import_react4.useState)(false);
+  const [copiedSender, setCopiedSender] = (0, import_react4.useState)(false);
+  const [copiedRecipient, setCopiedRecipient] = (0, import_react4.useState)(false);
+  const [showDetails, setShowDetails] = (0, import_react4.useState)(false);
+  const [selectedWallet, setSelectedWallet] = (0, import_react4.useState)(null);
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = (0, import_react4.useState)(null);
+  const { publicKey, connected, disconnect, wallets, select, wallet: connectedWallet } = (0, import_wallet_adapter_react3.useWallet)();
+  const branding = useBranding();
+  const { isSandboxMode, sandboxAccounts } = useSandbox();
+  const client = useMoneyMQ();
+  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();
+  const handlePay = (0, import_react4.useCallback)(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.url);
+        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,
+          productName
+        );
+        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.url, productName]);
+  const canPay = (connected && publicKey || selectedPaymentMethod?.type === "sandbox_account") && recipient && !isSending;
+  if (!visible) return null;
+  const WalletIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 12V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2v-5z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16 12h.01", strokeWidth: "2", strokeLinecap: "round" })
+  ] });
+  const SandboxIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 9998,
+          backgroundColor: "rgba(0, 0, 0, 0.6)",
+          backdropFilter: "blur(8px)"
+        },
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 9999,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "1rem"
+        },
+        onClick: onClose,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxWidth: "380px",
+              backgroundColor: "#2c2c2e",
+              borderRadius: "1rem",
+              overflow: "hidden",
+              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "1rem 1.25rem",
+                    borderBottom: "1px solid #3a3a3c"
+                  },
+                  children: [
+                    branding?.logo ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "img",
+                        {
+                          src: branding.logo,
+                          alt: "Logo",
+                          style: { height: "24px", width: "auto", filter: "invert(1)" }
+                        }
+                      ),
+                      isSandboxMode && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "0.75rem", fontWeight: 600, color: "#ff9f0a" }, children: "| SANDBOX" })
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10", fill: accentColor }),
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 12l2.5 2.5L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "1.125rem", fontWeight: 600, color: "#fff" }, children: "Pay" }),
+                      isSandboxMode && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "0.75rem", fontWeight: 600, color: "#ff9f0a" }, children: "| SANDBOX" })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "button",
+                      {
+                        onClick: onClose,
+                        style: {
+                          padding: "0.375rem 0.75rem",
+                          fontSize: "0.875rem",
+                          fontWeight: 500,
+                          color: "#0a84ff",
+                          background: "none",
+                          border: "none",
+                          cursor: "pointer"
+                        },
+                        children: "Cancel"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { padding: "0.75rem" }, children: currentSelection ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  style: {
+                    backgroundColor: "#3a3a3c",
+                    borderRadius: "0.75rem",
+                    padding: "0.875rem 1rem",
+                    marginBottom: "0.5rem"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "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__ */ (0, import_jsx_runtime4.jsx)(
+                          "img",
+                          {
+                            src: currentSelection.icon,
+                            alt: currentSelection.name || "Wallet",
+                            style: { width: "40px", height: "40px", borderRadius: "0.5rem" }
+                          }
+                        ) : currentSelection.type === "sandbox_account" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SandboxIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WalletIcon, {})
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem", marginBottom: "0.125rem" }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { fontSize: "0.75rem", color: "#8e8e93" }, children: [
+                          "From ",
+                          truncateAddress(currentSelection.address)
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          "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__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+                            ] })
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "span",
+                        {
+                          style: {
+                            fontSize: "0.9375rem",
+                            fontWeight: 500,
+                            color: "#fff"
+                          },
+                          children: currentSelection.name
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "button",
+                      {
+                        onClick: handleDisconnect,
+                        style: {
+                          fontSize: "0.75rem",
+                          fontWeight: 500,
+                          color: "#ff453a",
+                          background: "none",
+                          border: "none",
+                          cursor: "pointer",
+                          padding: "0.25rem 0.5rem"
+                        },
+                        children: "unlink"
+                      }
+                    )
+                  ] })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react5.Menu, { as: "div", style: { position: "relative", marginBottom: "0.5rem" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  import_react5.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__ */ (0, import_jsx_runtime4.jsx)(
+                        "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__ */ (0, import_jsx_runtime4.jsx)(
+                            "img",
+                            {
+                              src: currentWalletIcon,
+                              alt: currentWalletName || "Wallet",
+                              style: { width: "40px", height: "40px", borderRadius: "0.5rem" }
+                            }
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WalletIcon, {})
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "0.75rem", color: "#8e8e93", marginBottom: "0.125rem" }, children: "From" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          "span",
+                          {
+                            style: {
+                              fontSize: "0.9375rem",
+                              fontWeight: 500,
+                              color: "#0a84ff"
+                            },
+                            children: selectedWallet ? selectedWallet.adapter.name : "Connect Wallet"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "svg",
+                        {
+                          width: "16",
+                          height: "16",
+                          viewBox: "0 0 16 16",
+                          fill: "#8e8e93",
+                          style: { flexShrink: 0 },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsxs)(
+                  import_react5.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__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                        displayedSandboxAccounts.map((account) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.MenuItem, { children: ({ focus }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                          "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__ */ (0, import_jsx_runtime4.jsx)(
+                                "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__ */ (0, import_jsx_runtime4.jsx)(SandboxIcon, {})
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem", marginBottom: "0.125rem" }, children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { fontSize: "0.75rem", color: "#8e8e93" }, children: [
+                                    "From ",
+                                    truncateAddress(account.address)
+                                  ] }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                    "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__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+                                      ] })
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                  "span",
+                                  {
+                                    style: {
+                                      fontSize: "0.9375rem",
+                                      fontWeight: 500,
+                                      color: "#fff"
+                                    },
+                                    children: account.name.charAt(0).toUpperCase() + account.name.slice(1)
+                                  }
+                                )
+                              ] }),
+                              account.usdcBalance !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                                "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__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: "1px", backgroundColor: "#48484a", margin: "0.25rem 0" } })
+                      ] }),
+                      availableWallets.length > 0 ? availableWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.MenuItem, { children: ({ focus }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                        "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__ */ (0, import_jsx_runtime4.jsx)(
+                              "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__ */ (0, import_jsx_runtime4.jsx)(
+                                  "img",
+                                  {
+                                    src: wallet.adapter.icon,
+                                    alt: wallet.adapter.name,
+                                    style: {
+                                      width: "40px",
+                                      height: "40px",
+                                      borderRadius: "0.5rem"
+                                    }
+                                  }
+                                ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WalletIcon, {})
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "0.75rem", color: "#8e8e93", marginBottom: "0.125rem" }, children: "Browser Extension" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                "span",
+                                {
+                                  style: {
+                                    fontSize: "0.9375rem",
+                                    fontWeight: 500,
+                                    color: "#fff"
+                                  },
+                                  children: wallet.adapter.name
+                                }
+                              )
+                            ] }),
+                            wallet.readyState === "Installed" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                              "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__ */ (0, import_jsx_runtime4.jsx)(
+                        "div",
+                        {
+                          style: {
+                            textAlign: "center",
+                            padding: "1.5rem",
+                            color: "#8e8e93",
+                            fontSize: "0.875rem"
+                          },
+                          children: "No wallets detected"
+                        }
+                      ) : null
+                    ]
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "div",
+                {
+                  style: {
+                    padding: "1rem 1.25rem 1.25rem",
+                    borderTop: "1px solid #3a3a3c"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "1rem" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "0.875rem", color: "#8e8e93", marginBottom: "0.25rem" }, children: productName ? `Pay ${productName}` : "Total" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: "0.375rem" }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "2rem", fontWeight: 600, color: "#fff" }, children: amount.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "1rem", fontWeight: 500, color: "#8e8e93" }, children: currency })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          "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__ */ (0, import_jsx_runtime4.jsx)(
+                        "div",
+                        {
+                          style: {
+                            marginTop: "0.75rem",
+                            padding: "0.625rem 0.75rem",
+                            backgroundColor: "#3a3a3c",
+                            borderRadius: "0.5rem",
+                            fontSize: "0.8125rem"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "#8e8e93" }, children: "Recipient" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                "span",
+                                {
+                                  style: {
+                                    color: "#fff",
+                                    fontFamily: "ui-monospace, monospace",
+                                    fontSize: "0.75rem"
+                                  },
+                                  children: truncateAddress(recipient)
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                "button",
+                                {
+                                  onClick: () => copyToClipboard(recipient, "recipient"),
+                                  style: {
+                                    padding: 0,
+                                    background: "none",
+                                    border: "none",
+                                    cursor: "pointer",
+                                    color: copiedRecipient ? "#30d158" : "#8e8e93",
+                                    display: "flex",
+                                    alignItems: "center"
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+                                  ] })
+                                }
+                              )
+                            ] })
+                          ] })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "button",
+                      {
+                        onClick: handlePay,
+                        disabled: !canPay,
+                        style: {
+                          width: "100%",
+                          padding: "1rem",
+                          borderRadius: "0.75rem",
+                          border: "none",
+                          fontSize: "1.0625rem",
+                          fontWeight: 600,
+                          cursor: canPay ? "pointer" : "not-allowed",
+                          backgroundColor: canPay ? accentColor : "#48484a",
+                          color: canPay ? "#fff" : "#8e8e93",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          gap: "0.5rem",
+                          transition: "opacity 150ms"
+                        },
+                        children: isSending ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            "div",
+                            {
+                              style: {
+                                width: "1.25rem",
+                                height: "1.25rem",
+                                border: "2px solid currentColor",
+                                borderTopColor: "transparent",
+                                borderRadius: "50%",
+                                animation: "spin 1s linear infinite"
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Processing..." })
+                        ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { fillRule: "evenodd", d: "M12.516 2.17a.75.75 0 0 0-1.032 0 11.209 11.209 0 0 1-7.877 3.08.75.75 0 0 0-.722.515A12.74 12.74 0 0 0 2.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 0 0 .374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 0 0-.722-.516 11.209 11.209 0 0 1-7.877-3.08ZM10.28 10.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.06 0l3.75-3.75a.75.75 0 0 0-1.06-1.06l-3.22 3.22-1.72-1.72Z", clipRule: "evenodd" }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+                            "Pay ",
+                            amount.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
+                            " ",
+                            currency
+                          ] })
+                        ] })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/pay-button.tsx
+var import_jsx_runtime5 = require("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 PayButton = (0, import_react6.forwardRef)(
+  function PayButton2({
+    priceId,
+    price: priceObject,
+    product: productObject,
+    onSuccess,
+    onError,
+    variant = "solid",
+    children,
+    disabled
+  }, ref) {
+    const client = useMoneyMQ();
+    const [isModalOpen, setIsModalOpen] = (0, import_react6.useState)(false);
+    const [isHovered, setIsHovered] = (0, import_react6.useState)(false);
+    const hasPriceObject = priceObject !== void 0;
+    const [isLoading, setIsLoading] = (0, import_react6.useState)(!hasPriceObject);
+    const [error, setError] = (0, import_react6.useState)(null);
+    const [amount, setAmount] = (0, import_react6.useState)(hasPriceObject ? priceObject.unit_amount / 100 : 0);
+    const [currency, setCurrency] = (0, import_react6.useState)(hasPriceObject ? priceObject.currency.toUpperCase() : "USDC");
+    const [recipient, setRecipient] = (0, import_react6.useState)("");
+    const [productName, setProductName] = (0, import_react6.useState)(productObject?.name);
+    (0, import_react6.useEffect)(() => {
+      async function fetchPaymentDetails() {
+        setIsLoading(true);
+        setError(null);
+        try {
+          const apiUrl = client.config.url;
+          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);
+          }
+          if (hasPriceObject) {
+            setAmount(priceObject.unit_amount / 100);
+            setCurrency(priceObject.currency.toUpperCase());
+            if (productObject) {
+              setProductName(productObject.name);
+            } else if (priceObject.product) {
+              try {
+                const productResponse = await fetch(`${apiUrl}/v1/products/${priceObject.product}`);
+                if (productResponse.ok) {
+                  const product = await productResponse.json();
+                  setProductName(product.name);
+                }
+              } catch {
+              }
+            }
+          } else if (priceId) {
+            const priceResponse = await fetch(`${apiUrl}/v1/prices/${priceId}`);
+            if (!priceResponse.ok) {
+              throw new Error(`Failed to fetch price: ${priceResponse.status}`);
+            }
+            const price = await priceResponse.json();
+            setAmount(price.unit_amount / 100);
+            setCurrency(price.currency.toUpperCase());
+            if (price.product) {
+              try {
+                const productResponse = await fetch(`${apiUrl}/v1/products/${price.product}`);
+                if (productResponse.ok) {
+                  const product = await productResponse.json();
+                  setProductName(product.name);
+                }
+              } catch {
+              }
+            }
+          } else {
+            throw new Error("Either priceId or price object is required");
+          }
+        } catch (err) {
+          console.error("[PayButton] 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();
+    }, [priceId, priceObject, productObject, client.config.url, onError, hasPriceObject]);
+    const handleClick = () => {
+      if (!isLoading && !error) {
+        setIsModalOpen(true);
+      }
+    };
+    const handlePaymentSuccess = (signature) => {
+      const payment = {
+        id: `pay_${Date.now()}`,
+        amount,
+        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__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          ref,
+          onClick: handleClick,
+          disabled: isDisabled,
+          style: buttonStyle,
+          title: error || void 0,
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false),
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Loading..." }) : error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Error" }) : children || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Pay" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        PaymentModal,
+        {
+          visible: isModalOpen,
+          onClose: () => setIsModalOpen(false),
+          amount,
+          currency,
+          recipient,
+          productName,
+          onSuccess: handlePaymentSuccess,
+          onError: handlePaymentError
+        }
+      )
+    ] });
+  }
+);
+
+// src/use-payment.ts
+var import_react7 = require("react");
+var import_wallet_adapter_react4 = require("@solana/wallet-adapter-react");
+function usePayment() {
+  const [isPending, setIsPending] = (0, import_react7.useState)(false);
+  const [lastPayment, setLastPayment] = (0, import_react7.useState)(null);
+  const { publicKey, connected } = (0, import_wallet_adapter_react4.useWallet)();
+  const { setVisible } = useWalletModal();
+  const pay = (0, import_react7.useCallback)(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 };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MoneyMQProvider,
+  PayButton,
+  PaymentModal,
+  useMoneyMQ,
+  usePayment,
+  useSandbox
+});
+//# sourceMappingURL=index.js.map