x402-mantle-sdk 0.1.0 → 0.2.2

package/dist/client/react.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/client/react.ts
 var react_exports = {};
 __export(react_exports, {
+  EnhancedPaymentModal: () => EnhancedPaymentModal,
   PaymentModal: () => PaymentModal
 });
 module.exports = __toCommonJS(react_exports);
@@ -28,6 +29,32 @@ module.exports = __toCommonJS(react_exports);
 var import_react = require("react");
 
 // src/client/constants.ts
+var NETWORKS = {
+  mantle: {
+    chainId: 5e3,
+    rpcUrl: "https://rpc.mantle.xyz",
+    name: "Mantle",
+    environment: "mainnet",
+    nativeCurrency: { name: "Mantle", symbol: "MNT", decimals: 18 },
+    blockExplorer: "https://explorer.mantle.xyz"
+  },
+  "mantle-sepolia": {
+    chainId: 5003,
+    rpcUrl: "https://rpc.sepolia.mantle.xyz",
+    name: "Mantle Sepolia",
+    environment: "testnet",
+    nativeCurrency: { name: "Mantle", symbol: "MNT", decimals: 18 },
+    blockExplorer: "https://explorer.sepolia.mantle.xyz"
+  },
+  "mantle-testnet": {
+    chainId: 5003,
+    rpcUrl: "https://rpc.sepolia.mantle.xyz",
+    name: "Mantle Testnet",
+    environment: "testnet",
+    nativeCurrency: { name: "Mantle", symbol: "MNT", decimals: 18 },
+    blockExplorer: "https://explorer.sepolia.mantle.xyz"
+  }
+};
 var TOKENS = {
   mantle: {
     USDC: {
@@ -89,7 +116,20 @@ var TOKENS = {
 var TREASURY_ADDRESS = "0xB27705342ACE73736AE490540Ea031cc06C3eF49";
 var PLATFORM_FEE_BPS = 50n;
 var BPS_DENOMINATOR = 10000n;
+var customNetworks = /* @__PURE__ */ new Map();
 var customTokens = /* @__PURE__ */ new Map();
+function getNetworkConfig(network) {
+  const networkKey = network.toLowerCase();
+  const custom = customNetworks.get(networkKey);
+  if (custom) {
+    return custom;
+  }
+  const preset = NETWORKS[networkKey];
+  if (preset) {
+    return preset;
+  }
+  return NETWORKS.mantle;
+}
 function getTokenConfig(token, network) {
   const networkKey = network.toLowerCase();
   const tokenKey = token.toUpperCase();
@@ -186,11 +226,33 @@ var MetaMaskProvider = class {
     if (!this.ethereum) {
       throw new Error("MetaMask is not available");
     }
-    const txHash = await this.ethereum.request({
-      method: "eth_sendTransaction",
-      params: [tx]
-    });
-    return txHash;
+    const account = await this.getAccount();
+    if (!account) {
+      throw new Error("No account connected. Please connect your wallet first.");
+    }
+    const txWithFrom = {
+      ...tx,
+      from: account
+    };
+    try {
+      const txHash = await this.ethereum.request({
+        method: "eth_sendTransaction",
+        params: [txWithFrom]
+      });
+      return txHash;
+    } catch (error) {
+      if (error.code === 4001) {
+        throw new Error("Transaction rejected by user");
+      } else if (error.code === -32602) {
+        throw new Error("Invalid transaction parameters");
+      } else if (error.message?.includes("insufficient funds") || error.message?.includes("insufficient balance")) {
+        throw new Error("Insufficient funds for this transaction");
+      } else if (error.message) {
+        throw new Error(error.message);
+      } else {
+        throw new Error(`Transaction failed: ${error.code || "Unknown error"}`);
+      }
+    }
   }
   async signMessage(message) {
     if (!this.ethereum) {
@@ -223,6 +285,30 @@ async function connectWallet(provider) {
   }
   return wallet.connect();
 }
+async function ensureNetwork(wallet, network, autoAdd = true) {
+  const config = getNetworkConfig(network);
+  const targetChainId = config.chainId;
+  const currentChainId = await wallet.getChainId();
+  if (currentChainId === targetChainId) {
+    return;
+  }
+  try {
+    await wallet.switchNetwork(targetChainId);
+  } catch (error) {
+    const switchError = error;
+    if (autoAdd && switchError.message?.includes("not found")) {
+      await wallet.addNetwork({
+        chainId: `0x${targetChainId.toString(16)}`,
+        chainName: config.name,
+        nativeCurrency: config.nativeCurrency,
+        rpcUrls: [config.rpcUrl],
+        blockExplorerUrls: config.blockExplorer ? [config.blockExplorer] : void 0
+      });
+    } else {
+      throw error;
+    }
+  }
+}
 
 // src/client/payment.ts
 var ERC20_TRANSFER_SIG = "0xa9059cbb";
@@ -243,9 +329,15 @@ function encodeERC20Transfer(to, amount) {
   return ERC20_TRANSFER_SIG + toHex + amountHex;
 }
 async function processPayment(request, wallet) {
+  if (!request.amount || !request.recipient || !request.network) {
+    throw new Error("Invalid payment request: missing required fields");
+  }
   const tokenConfig = getTokenConfig(request.token, request.network);
   const decimals = tokenConfig?.decimals ?? 18;
   const totalAmount = amountToWei(request.amount, decimals);
+  if (totalAmount === 0n) {
+    throw new Error("Invalid payment amount: amount must be greater than 0");
+  }
   const { merchantAmount, feeAmount } = calculateSplit(totalAmount);
   let txHash;
   if (tokenConfig) {
@@ -256,17 +348,21 @@ async function processPayment(request, wallet) {
     };
     txHash = await wallet.sendTransaction(tx);
   } else {
+    const merchantValue = merchantAmount.toString(16);
     const merchantTx = {
       to: request.recipient,
-      value: `0x${merchantAmount.toString(16)}`
+      value: `0x${merchantValue}`
     };
     txHash = await wallet.sendTransaction(merchantTx);
     if (feeAmount > 0n) {
+      const feeValue = feeAmount.toString(16);
       const feeTx = {
         to: TREASURY_ADDRESS,
-        value: `0x${feeAmount.toString(16)}`
+        value: `0x${feeValue}`
       };
-      await wallet.sendTransaction(feeTx);
+      wallet.sendTransaction(feeTx).catch((err) => {
+        console.warn("Fee transaction failed (non-critical):", err);
+      });
     }
   }
   return {
@@ -278,6 +374,12 @@ async function processPayment(request, wallet) {
 // src/client/modal-react.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function formatAddress(address) {
+  if (!address || typeof address !== "string") {
+    return "N/A";
+  }
+  if (address.length < 10) {
+    return address;
+  }
   return `${address.slice(0, 6)}...${address.slice(-4)}`;
 }
 function PaymentModal({ request, onComplete, onCancel, isOpen }) {
@@ -286,6 +388,62 @@ function PaymentModal({ request, onComplete, onCancel, isOpen }) {
   const [isProcessing, setIsProcessing] = (0, import_react.useState)(false);
   const [error, setError] = (0, import_react.useState)(null);
   const [step, setStep] = (0, import_react.useState)("connect");
+  if (!request || !request.amount || !request.recipient || !request.network) {
+    console.error("Invalid payment request:", request);
+    if (isOpen) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 9999,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "rgba(0, 0, 0, 0.5)",
+            backdropFilter: "blur(4px)"
+          },
+          onClick: (e) => e.target === e.currentTarget && onCancel(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                width: "100%",
+                maxWidth: "28rem",
+                borderRadius: "0.75rem",
+                border: "1px solid rgba(239, 68, 68, 0.5)",
+                background: "rgba(24, 24, 27, 0.95)",
+                padding: "1.5rem",
+                color: "#fafafa"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { margin: "0 0 1rem 0", color: "rgba(239, 68, 68, 0.9)" }, children: "Invalid Payment Request" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "0 0 1rem 0", color: "rgba(250, 250, 250, 0.8)" }, children: "The payment request is missing required information. Please try again." }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    onClick: onCancel,
+                    style: {
+                      width: "100%",
+                      padding: "0.75rem",
+                      borderRadius: "0.5rem",
+                      border: "1px solid rgba(255, 255, 255, 0.2)",
+                      background: "rgba(255, 255, 255, 0.1)",
+                      color: "#fafafa",
+                      cursor: "pointer"
+                    },
+                    children: "Close"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      );
+    }
+    return null;
+  }
   const checkWalletConnection = (0, import_react.useCallback)(async () => {
     const wallet = detectWalletProvider();
     if (wallet) {
@@ -334,10 +492,27 @@ function PaymentModal({ request, onComplete, onCancel, isOpen }) {
       if (!wallet) {
         throw new Error("Wallet not connected");
       }
+      try {
+        await ensureNetwork(wallet, request.network, true);
+      } catch (networkError) {
+        const errorMessage = networkError instanceof Error ? networkError.message : "Network switch failed";
+        throw new Error(`Failed to switch network: ${errorMessage}. Please ensure you're on ${request.network}`);
+      }
       const payment = await processPayment(request, wallet);
       onComplete(payment);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Payment failed");
+      let errorMessage = "Payment failed";
+      if (err instanceof Error) {
+        errorMessage = err.message;
+        if (err.message.includes("user rejected") || err.message.includes("User denied")) {
+          errorMessage = "Transaction was rejected. Please try again.";
+        } else if (err.message.includes("insufficient funds") || err.message.includes("insufficient balance")) {
+          errorMessage = "Insufficient funds. Please ensure you have enough MNT in your wallet.";
+        } else if (err.message.includes("network")) {
+          errorMessage = err.message;
+        }
+      }
+      setError(errorMessage);
       setStep("confirm");
     } finally {
       setIsProcessing(false);
@@ -651,8 +826,1002 @@ function PaymentModal({ request, onComplete, onCancel, isOpen }) {
     }
   );
 }
+
+// src/client/payment-modal-enhanced.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function formatAddress2(address) {
+  if (!address || typeof address !== "string") {
+    return "N/A";
+  }
+  if (address.length < 10) {
+    return address;
+  }
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+function getExplorerUrl(txHash, network) {
+  const config = getNetworkConfig(network);
+  if (config.blockExplorer) {
+    return `${config.blockExplorer}/tx/${txHash}`;
+  }
+  if (network.includes("sepolia") || network.includes("testnet")) {
+    return `https://explorer.sepolia.mantle.xyz/tx/${txHash}`;
+  }
+  return `https://explorer.mantle.xyz/tx/${txHash}`;
+}
+function EnhancedPaymentModal({
+  request,
+  onComplete,
+  onCancel,
+  isOpen,
+  simulation = false,
+  description,
+  endpoint
+}) {
+  const [walletAddress, setWalletAddress] = (0, import_react2.useState)(null);
+  const [isConnecting, setIsConnecting] = (0, import_react2.useState)(false);
+  const [isProcessing, setIsProcessing] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [txHash, setTxHash] = (0, import_react2.useState)(null);
+  const [copied, setCopied] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    if (!isOpen) {
+      setIsProcessing(false);
+      setError(null);
+      setTxHash(null);
+      setCopied(false);
+      setWalletAddress(null);
+    }
+  }, [isOpen]);
+  const handleCopy = (0, import_react2.useCallback)((text) => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }, []);
+  const checkWalletConnection = (0, import_react2.useCallback)(async () => {
+    const wallet = detectWalletProvider();
+    if (wallet) {
+      try {
+        const account = await wallet.getAccount();
+        if (account) {
+          setWalletAddress(account);
+        }
+      } catch {
+      }
+    }
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (isOpen) {
+      checkWalletConnection();
+    }
+  }, [isOpen, checkWalletConnection]);
+  const handleConnect = async () => {
+    setIsConnecting(true);
+    setError(null);
+    try {
+      const wallet = detectWalletProvider();
+      if (!wallet) {
+        throw new Error("No wallet found. Please install MetaMask.");
+      }
+      const address = await connectWallet(wallet);
+      setWalletAddress(address);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to connect wallet");
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+  const handlePayment = async () => {
+    if (simulation) {
+      setIsProcessing(true);
+      setError(null);
+      await new Promise((resolve) => setTimeout(resolve, 2e3));
+      const mockTxHash = `0x${Array.from(
+        { length: 64 },
+        () => Math.floor(Math.random() * 16).toString(16)
+      ).join("")}`;
+      setTxHash(mockTxHash);
+      setTimeout(() => {
+        const paymentResponse = {
+          transactionHash: mockTxHash,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        setIsProcessing(false);
+        onComplete(paymentResponse);
+      }, 1500);
+      return;
+    }
+    if (!walletAddress) {
+      setError("Please connect your wallet first");
+      return;
+    }
+    try {
+      setIsProcessing(true);
+      setError(null);
+      const wallet = detectWalletProvider();
+      if (!wallet) {
+        throw new Error("Wallet not connected");
+      }
+      try {
+        await ensureNetwork(wallet, request.network, true);
+      } catch (networkError) {
+        const errorMessage = networkError instanceof Error ? networkError.message : "Network switch failed";
+        throw new Error(
+          `Failed to switch network: ${errorMessage}. Please ensure you're on ${request.network}`
+        );
+      }
+      const payment = await processPayment(request, wallet);
+      setTxHash(payment.transactionHash);
+      setTimeout(() => {
+        onComplete(payment);
+      }, 2e3);
+    } catch (err) {
+      let errorMessage = "Payment failed";
+      if (err instanceof Error) {
+        errorMessage = err.message;
+        if (err.message.includes("user rejected") || err.message.includes("User denied")) {
+          errorMessage = "Transaction was rejected. Please try again.";
+        } else if (err.message.includes("insufficient funds") || err.message.includes("insufficient balance")) {
+          errorMessage = "Insufficient funds. Please ensure you have enough MNT in your wallet.";
+        } else if (err.message.includes("network")) {
+          errorMessage = err.message;
+        }
+      }
+      setError(errorMessage);
+      setIsProcessing(false);
+    }
+  };
+  if (!request || !request.amount || !request.recipient || !request.network) {
+    console.error("Invalid payment request:", request);
+    if (isOpen) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 9999,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "rgba(0, 0, 0, 0.5)",
+            backdropFilter: "blur(4px)",
+            padding: "1rem"
+          },
+          onClick: (e) => e.target === e.currentTarget && onCancel(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
+            {
+              style: {
+                width: "100%",
+                maxWidth: "28rem",
+                borderRadius: "0.75rem",
+                border: "1px solid rgba(239, 68, 68, 0.5)",
+                background: "rgba(24, 24, 27, 0.95)",
+                padding: "1.5rem",
+                color: "#fafafa"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { style: { margin: "0 0 1rem 0", color: "rgba(239, 68, 68, 0.9)" }, children: "Invalid Payment Request" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { margin: "0 0 1rem 0", color: "rgba(250, 250, 250, 0.8)" }, children: "The payment request is missing required information. Please try again." }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    onClick: onCancel,
+                    style: {
+                      width: "100%",
+                      padding: "0.75rem",
+                      borderRadius: "0.5rem",
+                      border: "1px solid rgba(255, 255, 255, 0.2)",
+                      background: "rgba(255, 255, 255, 0.1)",
+                      color: "#fafafa",
+                      cursor: "pointer"
+                    },
+                    children: "Close"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      );
+    }
+    return null;
+  }
+  if (!isOpen) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0, 0, 0, 0.5)",
+        backdropFilter: "blur(4px)",
+        padding: "1rem"
+      },
+      onClick: (e) => e.target === e.currentTarget && onCancel(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxWidth: "28rem",
+              borderRadius: "0.75rem",
+              border: "1px solid rgba(255, 255, 255, 0.1)",
+              background: "rgba(24, 24, 27, 0.95)",
+              padding: "1.5rem",
+              boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.3)",
+              backdropFilter: "blur(16px)",
+              color: "#fafafa",
+              maxHeight: "90vh",
+              overflowY: "auto"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    marginBottom: "1rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "h2",
+                        {
+                          style: {
+                            margin: 0,
+                            fontSize: "1.25rem",
+                            fontWeight: 300,
+                            color: "#fafafa"
+                          },
+                          children: txHash ? "Payment Complete" : "Payment Required"
+                        }
+                      ),
+                      simulation && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "span",
+                        {
+                          style: {
+                            borderRadius: "9999px",
+                            border: "1px solid rgba(234, 179, 8, 0.4)",
+                            background: "rgba(234, 179, 8, 0.2)",
+                            padding: "0.125rem 0.5rem",
+                            fontFamily: "monospace",
+                            fontSize: "0.75rem",
+                            color: "rgba(234, 179, 8, 1)"
+                          },
+                          children: "SIMULATION"
+                        }
+                      )
+                    ] }),
+                    !isProcessing && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "button",
+                      {
+                        onClick: onCancel,
+                        style: {
+                          background: "none",
+                          border: "none",
+                          fontSize: "1.5rem",
+                          cursor: "pointer",
+                          color: "rgba(250, 250, 250, 0.6)",
+                          lineHeight: 1,
+                          padding: 0,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center"
+                        },
+                        "aria-label": "Close",
+                        children: "\xD7"
+                      }
+                    )
+                  ]
+                }
+              ),
+              txHash ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      padding: "0.5rem 0"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "div",
+                      {
+                        style: {
+                          borderRadius: "50%",
+                          background: "rgba(34, 197, 94, 0.2)",
+                          padding: "0.75rem"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "svg",
+                          {
+                            width: "32",
+                            height: "32",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "rgba(34, 197, 94, 1)",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20 6L9 17l-5-5" })
+                          }
+                        )
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1rem", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "p",
+                      {
+                        style: {
+                          marginBottom: "0.5rem",
+                          fontFamily: "monospace",
+                          fontSize: "0.75rem",
+                          color: "rgba(250, 250, 250, 0.6)"
+                        },
+                        children: "Transaction Hash"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "0.5rem",
+                          borderRadius: "0.5rem",
+                          border: "1px solid rgba(255, 255, 255, 0.1)",
+                          background: "rgba(0, 0, 0, 0.3)",
+                          padding: "0.5rem 0.75rem",
+                          overflow: "hidden"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "code",
+                            {
+                              style: {
+                                minWidth: 0,
+                                flex: 1,
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                                fontFamily: "monospace",
+                                fontSize: "0.875rem",
+                                color: "#fafafa"
+                              },
+                              children: txHash
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "0.375rem",
+                                flexShrink: 0
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                  "button",
+                                  {
+                                    onClick: () => handleCopy(txHash),
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: "0.375rem",
+                                      borderRadius: "0.375rem",
+                                      border: "1px solid rgba(255, 255, 255, 0.1)",
+                                      background: "rgba(255, 255, 255, 0.1)",
+                                      padding: "0.25rem 0.625rem",
+                                      fontFamily: "monospace",
+                                      fontSize: "0.75rem",
+                                      color: "#fafafa",
+                                      cursor: "pointer",
+                                      transition: "background 0.2s"
+                                    },
+                                    onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)",
+                                    onMouseLeave: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.1)",
+                                    title: "Copy transaction hash",
+                                    children: copied ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                        "svg",
+                                        {
+                                          width: "14",
+                                          height: "14",
+                                          viewBox: "0 0 24 24",
+                                          fill: "none",
+                                          stroke: "currentColor",
+                                          strokeWidth: "2",
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20 6L9 17l-5-5" })
+                                        }
+                                      ),
+                                      "Copied"
+                                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                        "svg",
+                                        {
+                                          width: "14",
+                                          height: "14",
+                                          viewBox: "0 0 24 24",
+                                          fill: "none",
+                                          stroke: "currentColor",
+                                          strokeWidth: "2",
+                                          children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+                                          ]
+                                        }
+                                      ),
+                                      "Copy"
+                                    ] })
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                  "a",
+                                  {
+                                    href: getExplorerUrl(txHash, request.network),
+                                    target: "_blank",
+                                    rel: "noopener noreferrer",
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      borderRadius: "0.375rem",
+                                      border: "1px solid rgba(255, 255, 255, 0.1)",
+                                      background: "rgba(255, 255, 255, 0.1)",
+                                      padding: "0.375rem",
+                                      color: "rgba(250, 250, 250, 0.6)",
+                                      cursor: "pointer",
+                                      transition: "all 0.2s",
+                                      textDecoration: "none"
+                                    },
+                                    onMouseEnter: (e) => {
+                                      e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)";
+                                      e.currentTarget.style.color = "#fafafa";
+                                    },
+                                    onMouseLeave: (e) => {
+                                      e.currentTarget.style.background = "rgba(255, 255, 255, 0.1)";
+                                      e.currentTarget.style.color = "rgba(250, 250, 250, 0.6)";
+                                    },
+                                    title: "View on explorer",
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                      "svg",
+                                      {
+                                        width: "14",
+                                        height: "14",
+                                        viewBox: "0 0 24 24",
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        strokeWidth: "2",
+                                        children: [
+                                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" }),
+                                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 3h6v6" }),
+                                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 14L21 3" })
+                                        ]
+                                      }
+                                    )
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "p",
+                      {
+                        style: {
+                          marginBottom: "0.5rem",
+                          fontFamily: "monospace",
+                          fontSize: "0.75rem",
+                          color: "rgba(250, 250, 250, 0.6)"
+                        },
+                        children: "Amount Paid"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "p",
+                      {
+                        style: {
+                          fontFamily: "sans-serif",
+                          fontSize: "1rem",
+                          color: "#fafafa",
+                          margin: 0
+                        },
+                        children: [
+                          request.amount,
+                          " ",
+                          request.token
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    onClick: onCancel,
+                    style: {
+                      width: "100%",
+                      borderRadius: "0.5rem",
+                      border: "1px solid rgba(255, 255, 255, 0.1)",
+                      background: "rgba(255, 255, 255, 0.15)",
+                      padding: "0.625rem 1rem",
+                      fontFamily: "sans-serif",
+                      fontSize: "0.875rem",
+                      color: "#fafafa",
+                      cursor: "pointer",
+                      transition: "background 0.2s"
+                    },
+                    onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)",
+                    onMouseLeave: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)",
+                    children: "Done"
+                  }
+                )
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+                  description && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "p",
+                      {
+                        style: {
+                          marginBottom: "0.5rem",
+                          fontFamily: "monospace",
+                          fontSize: "0.75rem",
+                          color: "rgba(250, 250, 250, 0.6)"
+                        },
+                        children: "Description"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "p",
+                      {
+                        style: {
+                          fontFamily: "sans-serif",
+                          fontSize: "0.875rem",
+                          color: "#fafafa",
+                          margin: 0
+                        },
+                        children: description
+                      }
+                    )
+                  ] }),
+                  endpoint && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "p",
+                      {
+                        style: {
+                          marginBottom: "0.5rem",
+                          fontFamily: "monospace",
+                          fontSize: "0.75rem",
+                          color: "rgba(250, 250, 250, 0.6)"
+                        },
+                        children: "Endpoint"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "code",
+                      {
+                        style: {
+                          fontFamily: "monospace",
+                          fontSize: "0.75rem",
+                          color: "rgba(250, 250, 250, 0.8)",
+                          wordBreak: "break-all"
+                        },
+                        children: endpoint
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        borderRadius: "0.5rem",
+                        border: "1px solid rgba(255, 255, 255, 0.1)",
+                        background: "rgba(255, 255, 255, 0.05)",
+                        padding: "1rem"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                          "div",
+                          {
+                            style: {
+                              marginBottom: "0.75rem",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "space-between"
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                "p",
+                                {
+                                  style: {
+                                    fontFamily: "monospace",
+                                    fontSize: "0.75rem",
+                                    color: "rgba(250, 250, 250, 0.6)",
+                                    margin: 0
+                                  },
+                                  children: "Amount"
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                "p",
+                                {
+                                  style: {
+                                    fontFamily: "sans-serif",
+                                    fontSize: "1.5rem",
+                                    fontWeight: 300,
+                                    color: "#fafafa",
+                                    margin: 0
+                                  },
+                                  children: [
+                                    request.amount,
+                                    " ",
+                                    request.token
+                                  ]
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              flexDirection: "column",
+                              gap: "0.5rem",
+                              borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+                              paddingTop: "0.75rem"
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                "div",
+                                {
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                      "p",
+                                      {
+                                        style: {
+                                          fontFamily: "monospace",
+                                          fontSize: "0.75rem",
+                                          color: "rgba(250, 250, 250, 0.6)",
+                                          margin: 0
+                                        },
+                                        children: "Network"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                      "p",
+                                      {
+                                        style: {
+                                          fontFamily: "monospace",
+                                          fontSize: "0.75rem",
+                                          color: "#fafafa",
+                                          margin: 0
+                                        },
+                                        children: request.network
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                "div",
+                                {
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    gap: "0.5rem"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                      "p",
+                                      {
+                                        style: {
+                                          fontFamily: "monospace",
+                                          fontSize: "0.75rem",
+                                          color: "rgba(250, 250, 250, 0.6)",
+                                          margin: 0
+                                        },
+                                        children: "Recipient"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                        "code",
+                                        {
+                                          style: {
+                                            fontFamily: "monospace",
+                                            fontSize: "0.75rem",
+                                            color: "#fafafa"
+                                          },
+                                          children: formatAddress2(request.recipient)
+                                        }
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                        "button",
+                                        {
+                                          onClick: () => handleCopy(request.recipient),
+                                          style: {
+                                            background: "none",
+                                            border: "none",
+                                            color: "rgba(250, 250, 250, 0.6)",
+                                            cursor: "pointer",
+                                            padding: 0,
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            transition: "color 0.2s"
+                                          },
+                                          onMouseEnter: (e) => e.currentTarget.style.color = "#fafafa",
+                                          onMouseLeave: (e) => e.currentTarget.style.color = "rgba(250, 250, 250, 0.6)",
+                                          title: "Copy address",
+                                          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                            "svg",
+                                            {
+                                              width: "14",
+                                              height: "14",
+                                              viewBox: "0 0 24 24",
+                                              fill: "none",
+                                              stroke: "rgba(34, 197, 94, 1)",
+                                              strokeWidth: "2",
+                                              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20 6L9 17l-5-5" })
+                                            }
+                                          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                            "svg",
+                                            {
+                                              width: "14",
+                                              height: "14",
+                                              viewBox: "0 0 24 24",
+                                              fill: "none",
+                                              stroke: "currentColor",
+                                              strokeWidth: "2",
+                                              children: [
+                                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+                                              ]
+                                            }
+                                          )
+                                        }
+                                      )
+                                    ] })
+                                  ]
+                                }
+                              ),
+                              walletAddress && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                "div",
+                                {
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    gap: "0.5rem"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                      "p",
+                                      {
+                                        style: {
+                                          fontFamily: "monospace",
+                                          fontSize: "0.75rem",
+                                          color: "rgba(250, 250, 250, 0.6)",
+                                          margin: 0
+                                        },
+                                        children: "From"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                        "svg",
+                                        {
+                                          width: "14",
+                                          height: "14",
+                                          viewBox: "0 0 24 24",
+                                          fill: "none",
+                                          stroke: "rgba(250, 250, 250, 0.6)",
+                                          strokeWidth: "2",
+                                          children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 12V7H5a2 2 0 01 0-4h14v4" }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 5v14a2 2 0 002 2h16v-5" }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 21a2 2 0 110-4h14" })
+                                          ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                        "code",
+                                        {
+                                          style: {
+                                            fontFamily: "monospace",
+                                            fontSize: "0.75rem",
+                                            color: "#fafafa"
+                                          },
+                                          children: formatAddress2(walletAddress)
+                                        }
+                                      )
+                                    ] })
+                                  ]
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      marginBottom: "1rem",
+                      display: "flex",
+                      alignItems: "start",
+                      gap: "0.75rem",
+                      borderRadius: "0.5rem",
+                      border: "1px solid rgba(239, 68, 68, 0.3)",
+                      background: "rgba(239, 68, 68, 0.1)",
+                      padding: "0.75rem"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        "svg",
+                        {
+                          width: "20",
+                          height: "20",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "rgba(239, 68, 68, 1)",
+                          strokeWidth: "2",
+                          style: { flexShrink: 0, marginTop: "0.125rem" },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 8v4" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 16h.01" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "p",
+                        {
+                          style: {
+                            flex: 1,
+                            fontFamily: "monospace",
+                            fontSize: "0.75rem",
+                            color: "rgba(239, 68, 68, 1)",
+                            wordBreak: "break-word",
+                            margin: 0
+                          },
+                          children: error
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "0.75rem" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "button",
+                    {
+                      onClick: onCancel,
+                      disabled: isProcessing,
+                      style: {
+                        flex: 1,
+                        borderRadius: "0.5rem",
+                        border: "1px solid rgba(255, 255, 255, 0.1)",
+                        background: "rgba(255, 255, 255, 0.05)",
+                        padding: "0.625rem 1rem",
+                        fontFamily: "sans-serif",
+                        fontSize: "0.875rem",
+                        color: "rgba(250, 250, 250, 0.8)",
+                        cursor: isProcessing ? "not-allowed" : "pointer",
+                        opacity: isProcessing ? 0.5 : 1,
+                        transition: "background 0.2s"
+                      },
+                      onMouseEnter: (e) => {
+                        if (!isProcessing) e.currentTarget.style.background = "rgba(255, 255, 255, 0.1)";
+                      },
+                      onMouseLeave: (e) => {
+                        if (!isProcessing) e.currentTarget.style.background = "rgba(255, 255, 255, 0.05)";
+                      },
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "button",
+                    {
+                      onClick: walletAddress ? handlePayment : handleConnect,
+                      disabled: isProcessing || isConnecting,
+                      style: {
+                        flex: 1,
+                        borderRadius: "0.5rem",
+                        border: "1px solid rgba(255, 255, 255, 0.1)",
+                        background: "rgba(255, 255, 255, 0.15)",
+                        padding: "0.625rem 1rem",
+                        fontFamily: "sans-serif",
+                        fontSize: "0.875rem",
+                        color: "#fafafa",
+                        cursor: isProcessing || isConnecting ? "not-allowed" : "pointer",
+                        opacity: isProcessing || isConnecting ? 0.5 : 1,
+                        transition: "background 0.2s"
+                      },
+                      onMouseEnter: (e) => {
+                        if (!isProcessing && !isConnecting)
+                          e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)";
+                      },
+                      onMouseLeave: (e) => {
+                        if (!isProcessing && !isConnecting)
+                          e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
+                      },
+                      children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        "span",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: "0.5rem"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "svg",
+                              {
+                                width: "16",
+                                height: "16",
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                stroke: "currentColor",
+                                strokeWidth: "2",
+                                style: {
+                                  animation: "spin 1s linear infinite"
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
+                              }
+                            ),
+                            simulation ? "Simulating..." : "Processing..."
+                          ]
+                        }
+                      ) : isConnecting ? "Connecting..." : !walletAddress ? "Connect Wallet" : simulation ? `Simulate ${request.amount} ${request.token}` : `Pay ${request.amount} ${request.token}`
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      ` })
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  EnhancedPaymentModal,
   PaymentModal
 });
 //# sourceMappingURL=react.cjs.map