x402-mantle-sdk 0.1.0

package/dist/client/react.cjs

@@ -0,0 +1,658 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client/react.ts
+var react_exports = {};
+__export(react_exports, {
+  PaymentModal: () => PaymentModal
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/client/modal-react.tsx
+var import_react = require("react");
+
+// src/client/constants.ts
+var TOKENS = {
+  mantle: {
+    USDC: {
+      address: "0x09Bc4E0D864854c6aFB6eB9A9cdF58aC190D0dF9",
+      decimals: 6,
+      symbol: "USDC"
+    },
+    USDT: {
+      address: "0x201EBa5CC46D216Ce6DC03F6a759e8E766e956aE",
+      decimals: 6,
+      symbol: "USDT"
+    },
+    mETH: {
+      address: "0xcDA86A272531e8640cD7F1a92c01839911B90bb0",
+      decimals: 18,
+      symbol: "mETH"
+    },
+    WMNT: {
+      address: "0x78c1b0C915c4FAA5FffA6CAbf0219DA63d7f4cb8",
+      decimals: 18,
+      symbol: "WMNT"
+    }
+  },
+  "mantle-sepolia": {
+    USDC: {
+      address: "0x09Bc4E0D864854c6aFB6eB9A9cdF58aC190D0dF9",
+      decimals: 6,
+      symbol: "USDC"
+    },
+    mETH: {
+      address: "0xdEAddEaDdeadDEadDEADDEAddEADDEAddead1111",
+      decimals: 18,
+      symbol: "mETH"
+    },
+    WMNT: {
+      address: "0x78c1b0C915c4FAA5FffA6CAbf0219DA63d7f4cb8",
+      decimals: 18,
+      symbol: "WMNT"
+    }
+  },
+  "mantle-testnet": {
+    USDC: {
+      address: "0x09Bc4E0D864854c6aFB6eB9A9cdF58aC190D0dF9",
+      decimals: 6,
+      symbol: "USDC"
+    },
+    mETH: {
+      address: "0xdEAddEaDdeadDEadDEADDEAddEADDEAddead1111",
+      decimals: 18,
+      symbol: "mETH"
+    },
+    WMNT: {
+      address: "0x78c1b0C915c4FAA5FffA6CAbf0219DA63d7f4cb8",
+      decimals: 18,
+      symbol: "WMNT"
+    }
+  }
+};
+var TREASURY_ADDRESS = "0xB27705342ACE73736AE490540Ea031cc06C3eF49";
+var PLATFORM_FEE_BPS = 50n;
+var BPS_DENOMINATOR = 10000n;
+var customTokens = /* @__PURE__ */ new Map();
+function getTokenConfig(token, network) {
+  const networkKey = network.toLowerCase();
+  const tokenKey = token.toUpperCase();
+  if (tokenKey === "MNT") {
+    return null;
+  }
+  const customMap = customTokens.get(networkKey);
+  if (customMap?.has(tokenKey)) {
+    return customMap.get(tokenKey);
+  }
+  return TOKENS[networkKey]?.[tokenKey] || null;
+}
+
+// src/client/wallet.ts
+function getEthereumProvider() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return window.ethereum || null;
+}
+var MetaMaskProvider = class {
+  constructor() {
+    this.ethereum = getEthereumProvider();
+  }
+  isAvailable() {
+    return this.ethereum !== null && this.ethereum.isMetaMask === true;
+  }
+  async connect() {
+    if (!this.ethereum) {
+      throw new Error("MetaMask is not available");
+    }
+    const accounts = await this.ethereum.request({
+      method: "eth_requestAccounts"
+    });
+    if (!accounts || accounts.length === 0) {
+      throw new Error("No accounts found");
+    }
+    return accounts[0];
+  }
+  async getAccount() {
+    if (!this.ethereum) {
+      return null;
+    }
+    try {
+      const accounts = await this.ethereum.request({
+        method: "eth_accounts"
+      });
+      return accounts && accounts.length > 0 ? accounts[0] : null;
+    } catch {
+      return null;
+    }
+  }
+  async getChainId() {
+    if (!this.ethereum) {
+      return null;
+    }
+    try {
+      const chainIdHex = await this.ethereum.request({
+        method: "eth_chainId"
+      });
+      return parseInt(chainIdHex, 16);
+    } catch {
+      return null;
+    }
+  }
+  async switchNetwork(chainId) {
+    if (!this.ethereum) {
+      throw new Error("MetaMask is not available");
+    }
+    const chainIdHex = `0x${chainId.toString(16)}`;
+    try {
+      await this.ethereum.request({
+        method: "wallet_switchEthereumChain",
+        params: [{ chainId: chainIdHex }]
+      });
+    } catch (error) {
+      const switchError = error;
+      if (switchError.code === 4902) {
+        throw new Error(`Network with chainId ${chainId} not found. Use addNetwork() first.`);
+      }
+      throw error;
+    }
+  }
+  async addNetwork(params) {
+    if (!this.ethereum) {
+      throw new Error("MetaMask is not available");
+    }
+    await this.ethereum.request({
+      method: "wallet_addEthereumChain",
+      params: [params]
+    });
+  }
+  async sendTransaction(tx) {
+    if (!this.ethereum) {
+      throw new Error("MetaMask is not available");
+    }
+    const txHash = await this.ethereum.request({
+      method: "eth_sendTransaction",
+      params: [tx]
+    });
+    return txHash;
+  }
+  async signMessage(message) {
+    if (!this.ethereum) {
+      throw new Error("MetaMask is not available");
+    }
+    const account = await this.getAccount();
+    if (!account) {
+      throw new Error("No account connected");
+    }
+    const signature = await this.ethereum.request({
+      method: "personal_sign",
+      params: [message, account]
+    });
+    return signature;
+  }
+};
+function detectWalletProvider() {
+  const metaMask = new MetaMaskProvider();
+  if (metaMask.isAvailable()) {
+    return metaMask;
+  }
+  return null;
+}
+async function connectWallet(provider) {
+  const wallet = provider || detectWalletProvider();
+  if (!wallet) {
+    throw new Error(
+      "No wallet provider found. Please install MetaMask or another compatible wallet."
+    );
+  }
+  return wallet.connect();
+}
+
+// src/client/payment.ts
+var ERC20_TRANSFER_SIG = "0xa9059cbb";
+function amountToWei(amount, decimals = 18) {
+  const parts = amount.split(".");
+  const whole = parts[0] || "0";
+  const fraction = (parts[1] || "").padEnd(decimals, "0").slice(0, decimals);
+  return BigInt(whole) * 10n ** BigInt(decimals) + BigInt(fraction);
+}
+function calculateSplit(amount) {
+  const feeAmount = amount * PLATFORM_FEE_BPS / BPS_DENOMINATOR;
+  const merchantAmount = amount - feeAmount;
+  return { merchantAmount, feeAmount };
+}
+function encodeERC20Transfer(to, amount) {
+  const toHex = to.slice(2).toLowerCase().padStart(64, "0");
+  const amountHex = amount.toString(16).padStart(64, "0");
+  return ERC20_TRANSFER_SIG + toHex + amountHex;
+}
+async function processPayment(request, wallet) {
+  const tokenConfig = getTokenConfig(request.token, request.network);
+  const decimals = tokenConfig?.decimals ?? 18;
+  const totalAmount = amountToWei(request.amount, decimals);
+  const { merchantAmount, feeAmount } = calculateSplit(totalAmount);
+  let txHash;
+  if (tokenConfig) {
+    const transferData = encodeERC20Transfer(request.recipient, totalAmount);
+    const tx = {
+      to: tokenConfig.address,
+      data: transferData
+    };
+    txHash = await wallet.sendTransaction(tx);
+  } else {
+    const merchantTx = {
+      to: request.recipient,
+      value: `0x${merchantAmount.toString(16)}`
+    };
+    txHash = await wallet.sendTransaction(merchantTx);
+    if (feeAmount > 0n) {
+      const feeTx = {
+        to: TREASURY_ADDRESS,
+        value: `0x${feeAmount.toString(16)}`
+      };
+      await wallet.sendTransaction(feeTx);
+    }
+  }
+  return {
+    transactionHash: txHash,
+    timestamp: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+
+// src/client/modal-react.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function formatAddress(address) {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+function PaymentModal({ request, onComplete, onCancel, isOpen }) {
+  const [walletAddress, setWalletAddress] = (0, import_react.useState)(null);
+  const [isConnecting, setIsConnecting] = (0, import_react.useState)(false);
+  const [isProcessing, setIsProcessing] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [step, setStep] = (0, import_react.useState)("connect");
+  const checkWalletConnection = (0, import_react.useCallback)(async () => {
+    const wallet = detectWalletProvider();
+    if (wallet) {
+      try {
+        const account = await wallet.getAccount();
+        if (account) {
+          setWalletAddress(account);
+          setStep("confirm");
+        }
+      } catch {
+      }
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (isOpen) {
+      checkWalletConnection();
+    } else {
+      setStep("connect");
+      setError(null);
+      setWalletAddress(null);
+    }
+  }, [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);
+      setStep("confirm");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to connect wallet");
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+  const handlePay = async () => {
+    setIsProcessing(true);
+    setError(null);
+    setStep("processing");
+    try {
+      const wallet = detectWalletProvider();
+      if (!wallet) {
+        throw new Error("Wallet not connected");
+      }
+      const payment = await processPayment(request, wallet);
+      onComplete(payment);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Payment failed");
+      setStep("confirm");
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  if (!isOpen) return null;
+  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(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"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: "1.5rem"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        style: {
+                          width: "2rem",
+                          height: "2rem",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          borderRadius: "0.5rem",
+                          background: "rgba(255, 255, 255, 0.1)",
+                          fontFamily: "monospace",
+                          fontSize: "0.75rem",
+                          fontWeight: "bold"
+                        },
+                        children: "x402"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 300 }, children: "Payment Required" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      onClick: onCancel,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        fontSize: "1.5rem",
+                        cursor: "pointer",
+                        color: "rgba(250, 250, 250, 0.6)",
+                        lineHeight: 1
+                      },
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                style: {
+                  marginBottom: "1.5rem",
+                  padding: "1rem",
+                  borderRadius: "0.5rem",
+                  border: "1px solid rgba(255, 255, 255, 0.1)",
+                  background: "rgba(255, 255, 255, 0.02)"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        marginBottom: "0.75rem"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "span",
+                          {
+                            style: { fontFamily: "monospace", fontSize: "0.75rem", color: "rgba(250,250,250,0.6)" },
+                            children: "Amount"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { fontSize: "1.125rem", fontWeight: 500 }, children: [
+                          request.amount,
+                          " ",
+                          request.token
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        marginBottom: "0.75rem"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "span",
+                          {
+                            style: { fontFamily: "monospace", fontSize: "0.75rem", color: "rgba(250,250,250,0.6)" },
+                            children: "Network"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "0.875rem" }, children: request.network })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "span",
+                      {
+                        style: { fontFamily: "monospace", fontSize: "0.75rem", color: "rgba(250,250,250,0.6)" },
+                        children: "Recipient"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontFamily: "monospace", fontSize: "0.875rem" }, children: formatAddress(request.recipient) })
+                  ] })
+                ]
+              }
+            ),
+            error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                style: {
+                  marginBottom: "1rem",
+                  padding: "0.75rem",
+                  borderRadius: "0.5rem",
+                  border: "1px solid rgba(239, 68, 68, 0.5)",
+                  background: "rgba(239, 68, 68, 0.1)",
+                  fontFamily: "monospace",
+                  fontSize: "0.75rem",
+                  color: "rgba(239, 68, 68, 0.9)"
+                },
+                children: error
+              }
+            ),
+            step === "connect" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                onClick: handleConnect,
+                disabled: isConnecting,
+                style: {
+                  width: "100%",
+                  padding: "0.75rem 1rem",
+                  borderRadius: "0.5rem",
+                  border: "1px solid rgba(255, 255, 255, 0.1)",
+                  background: "rgba(255, 255, 255, 0.05)",
+                  fontSize: "0.875rem",
+                  fontWeight: 500,
+                  cursor: isConnecting ? "not-allowed" : "pointer",
+                  opacity: isConnecting ? 0.7 : 1,
+                  color: "#fafafa"
+                },
+                children: isConnecting ? "Connecting..." : "Connect Wallet"
+              }
+            ),
+            step === "confirm" && walletAddress && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  style: {
+                    marginBottom: "1rem",
+                    padding: "0.75rem",
+                    borderRadius: "0.5rem",
+                    border: "1px solid rgba(255, 255, 255, 0.1)",
+                    background: "rgba(255, 255, 255, 0.02)"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "p",
+                      {
+                        style: {
+                          margin: "0 0 0.25rem 0",
+                          fontFamily: "monospace",
+                          fontSize: "0.75rem",
+                          color: "rgba(250, 250, 250, 0.6)"
+                        },
+                        children: "Connected Wallet"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontFamily: "monospace", fontSize: "0.875rem" }, children: formatAddress(walletAddress) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "0.75rem" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    onClick: onCancel,
+                    style: {
+                      flex: 1,
+                      padding: "0.75rem 1rem",
+                      borderRadius: "0.5rem",
+                      border: "1px solid rgba(255, 255, 255, 0.1)",
+                      background: "rgba(255, 255, 255, 0.02)",
+                      fontSize: "0.875rem",
+                      cursor: "pointer",
+                      color: "rgba(250, 250, 250, 0.8)"
+                    },
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "button",
+                  {
+                    onClick: handlePay,
+                    disabled: isProcessing,
+                    style: {
+                      flex: 1,
+                      padding: "0.75rem 1rem",
+                      borderRadius: "0.5rem",
+                      border: "1px solid rgba(255, 255, 255, 0.1)",
+                      background: "rgba(255, 255, 255, 0.1)",
+                      fontSize: "0.875rem",
+                      fontWeight: 500,
+                      cursor: isProcessing ? "not-allowed" : "pointer",
+                      opacity: isProcessing ? 0.7 : 1,
+                      color: "#fafafa"
+                    },
+                    children: [
+                      "Pay ",
+                      request.amount,
+                      " ",
+                      request.token
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            step === "processing" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: "2rem 0"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      style: {
+                        width: "2rem",
+                        height: "2rem",
+                        marginBottom: "1rem",
+                        border: "2px solid rgba(255, 255, 255, 0.2)",
+                        borderTopColor: "#fafafa",
+                        borderRadius: "50%",
+                        animation: "x402-spin 1s linear infinite"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontSize: "0.875rem", color: "rgba(250, 250, 250, 0.6)" }, children: "Processing payment..." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "p",
+                    {
+                      style: {
+                        margin: "0.5rem 0 0 0",
+                        fontFamily: "monospace",
+                        fontSize: "0.75rem",
+                        color: "rgba(250, 250, 250, 0.4)"
+                      },
+                      children: "Please confirm the transaction in your wallet"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+              @keyframes x402-spin {
+                to { transform: rotate(360deg); }
+              }
+            ` })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PaymentModal
+});
+//# sourceMappingURL=react.cjs.map