@micro-cms/crypto-payments 1.0.4 → 1.0.6

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import react__default from 'react';
-import { PaymentIntent, PaymentVerification } from '@micro-cms/types';
+import { PaymentIntent, PaymentVerification, PaymentProvider } from '@micro-cms/types';
 
 interface SolanaWindow extends Window {
     solana?: {
@@ -25,6 +25,23 @@ declare const useSolanaWallet: () => {
     sendPayment: (intent: PaymentIntent) => Promise<string>;
 };
 
+interface EthereumWindow extends Window {
+    ethereum?: {
+        isMetaMask?: boolean;
+        request: (request: {
+            method: string;
+            params?: any[];
+        }) => Promise<any>;
+        on: (event: string, callback: (...args: any[]) => void) => void;
+        removeListener: (event: string, callback: (...args: any[]) => void) => void;
+    };
+}
+declare const useEVMWallet: () => {
+    isAvailable: boolean;
+    connect: () => Promise<any>;
+    sendPayment: (intent: PaymentIntent) => Promise<string>;
+};
+
 declare const PaymentWidget: react__default.FC<PaymentWidgetProps>;
 
 interface PaymentWidgetProps {
@@ -33,6 +50,7 @@ interface PaymentWidgetProps {
     currency?: string;
     onSuccess?: (verification: PaymentVerification) => void;
     onError?: (error: Error) => void;
+    provider?: PaymentProvider;
     endpoints?: {
         initiate?: string;
         verify?: string;
@@ -49,6 +67,8 @@ declare const usePayment: (props: PaymentWidgetProps) => {
     setStatus: react.Dispatch<react.SetStateAction<PaymentStatus>>;
     isSolanaAvailable: boolean;
     handleSolanaPay: () => Promise<void>;
+    isEVMAvailable: boolean;
+    handleEVMPay: () => Promise<void>;
 };
 
-export { type PaymentStatus, PaymentWidget, type PaymentWidgetProps, type SolanaWindow, usePayment, useSolanaWallet };
+export { type EthereumWindow, type PaymentStatus, PaymentWidget, type PaymentWidgetProps, type SolanaWindow, useEVMWallet, usePayment, useSolanaWallet };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import react__default from 'react';
-import { PaymentIntent, PaymentVerification } from '@micro-cms/types';
+import { PaymentIntent, PaymentVerification, PaymentProvider } from '@micro-cms/types';
 
 interface SolanaWindow extends Window {
     solana?: {
@@ -25,6 +25,23 @@ declare const useSolanaWallet: () => {
     sendPayment: (intent: PaymentIntent) => Promise<string>;
 };
 
+interface EthereumWindow extends Window {
+    ethereum?: {
+        isMetaMask?: boolean;
+        request: (request: {
+            method: string;
+            params?: any[];
+        }) => Promise<any>;
+        on: (event: string, callback: (...args: any[]) => void) => void;
+        removeListener: (event: string, callback: (...args: any[]) => void) => void;
+    };
+}
+declare const useEVMWallet: () => {
+    isAvailable: boolean;
+    connect: () => Promise<any>;
+    sendPayment: (intent: PaymentIntent) => Promise<string>;
+};
+
 declare const PaymentWidget: react__default.FC<PaymentWidgetProps>;
 
 interface PaymentWidgetProps {
@@ -33,6 +50,7 @@ interface PaymentWidgetProps {
     currency?: string;
     onSuccess?: (verification: PaymentVerification) => void;
     onError?: (error: Error) => void;
+    provider?: PaymentProvider;
     endpoints?: {
         initiate?: string;
         verify?: string;
@@ -49,6 +67,8 @@ declare const usePayment: (props: PaymentWidgetProps) => {
     setStatus: react.Dispatch<react.SetStateAction<PaymentStatus>>;
     isSolanaAvailable: boolean;
     handleSolanaPay: () => Promise<void>;
+    isEVMAvailable: boolean;
+    handleEVMPay: () => Promise<void>;
 };
 
-export { type PaymentStatus, PaymentWidget, type PaymentWidgetProps, type SolanaWindow, usePayment, useSolanaWallet };
+export { type EthereumWindow, type PaymentStatus, PaymentWidget, type PaymentWidgetProps, type SolanaWindow, useEVMWallet, usePayment, useSolanaWallet };

package/dist/index.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   PaymentWidget: () => PaymentWidget,
+  useEVMWallet: () => useEVMWallet,
   usePayment: () => usePayment,
   useSolanaWallet: () => useSolanaWallet
 });
@@ -60,6 +61,36 @@ var useSolanaWallet = () => {
   return { isAvailable: !!getProvider(), connect, sendPayment };
 };
 
+// src/providers/EVMProvider.ts
+var useEVMWallet = () => {
+  const getProvider = () => {
+    if (typeof window !== "undefined" && "ethereum" in window) {
+      return window.ethereum;
+    }
+    return void 0;
+  };
+  const connect = async () => {
+    const provider = getProvider();
+    if (provider) {
+      try {
+        const accounts = await provider.request({ method: "eth_requestAccounts" });
+        return accounts[0];
+      } catch (err) {
+        throw new Error("User rejected the connection");
+      }
+    } else {
+      throw new Error("MetaMask or EVM wallet not found");
+    }
+  };
+  const sendPayment = async (intent) => {
+    const provider = getProvider();
+    if (!provider) throw new Error("Wallet not connected");
+    console.log(`Simulating EVM payment to ${intent.paymentAddress} for ${intent.amount} ${intent.currency}`);
+    return "simulated_evm_tx_hash_" + Math.random().toString(36).slice(2);
+  };
+  return { isAvailable: !!getProvider(), connect, sendPayment };
+};
+
 // src/PaymentWidget.tsx
 var import_lucide_react = require("lucide-react");
 var import_clsx = require("clsx");
@@ -72,7 +103,18 @@ var PaymentWidget = ({
   className,
   ...props
 }) => {
-  const { status, intent, error, initiate, verify, setStatus, isSolanaAvailable, handleSolanaPay } = usePayment(props);
+  const {
+    status,
+    intent,
+    error,
+    initiate,
+    verify,
+    setStatus,
+    isSolanaAvailable,
+    handleSolanaPay,
+    isEVMAvailable,
+    handleEVMPay
+  } = usePayment(props);
   if (status === "success") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("p-6 text-center bg-green-50 rounded-xl border border-green-200", className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CheckCircle, { className: "mx-auto w-12 h-12 text-green-500 mb-4" }),
@@ -134,6 +176,16 @@ var PaymentWidget = ({
               "Pay with Phantom"
             ]
           }
+        ) : (intent.network.toLowerCase().includes("ethereum") || intent.network.toLowerCase().includes("evm") || intent.network.toLowerCase().includes("polygon")) && isEVMAvailable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            onClick: handleEVMPay,
+            className: "w-full py-3 px-4 bg-[#f6851b] hover:bg-[#e2761b] text-white font-medium rounded-xl transition-colors flex items-center justify-center gap-2",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: "https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Mirror_Logo.svg", className: "w-4 h-4", alt: "MetaMask" }),
+              "Pay with MetaMask"
+            ]
+          }
         ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "button",
           {
@@ -166,6 +218,15 @@ var usePayment = (props) => {
     try {
       setStatus("initiating");
       setError(null);
+      if (props.provider) {
+        const data2 = await props.provider.initiatePayment(props.orderId, {
+          amount: props.amount,
+          currency: props.currency
+        });
+        setIntent(data2);
+        setStatus("pending_signature");
+        return;
+      }
       const response = await fetch(props.endpoints?.initiate || "/api/orders/initiate", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -187,10 +248,20 @@ var usePayment = (props) => {
       setStatus("error");
       props.onError?.(err);
     }
-  }, [props.endpoints?.initiate, props.orderId, props.amount, props.currency, props.onError]);
+  }, [props.provider, props.endpoints?.initiate, props.orderId, props.amount, props.currency, props.onError]);
   const verify = (0, import_react.useCallback)(async (txHash) => {
     try {
       setStatus("verifying");
+      if (props.provider) {
+        const data2 = await props.provider.verifyPayment(txHash, props.orderId);
+        if (data2.status === "confirmed") {
+          setStatus("success");
+          props.onSuccess?.(data2);
+        } else {
+          throw new Error("Payment not confirmed yet, status: " + data2.status);
+        }
+        return;
+      }
       const response = await fetch(props.endpoints?.verify || "/api/orders/verify-payment", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -215,7 +286,7 @@ var usePayment = (props) => {
       setStatus("error");
       props.onError?.(err);
     }
-  }, [props.endpoints?.verify, props.orderId, props.onSuccess, props.onError]);
+  }, [props.provider, props.endpoints?.verify, props.orderId, props.onSuccess, props.onError]);
   const { isAvailable: isSolanaAvailable, connect: connectSolana, sendPayment: sendSolanaPayment } = useSolanaWallet();
   const handleSolanaPay = async () => {
     try {
@@ -237,11 +308,44 @@ var usePayment = (props) => {
       props.onError?.(err instanceof Error ? err : new Error(String(err)));
     }
   };
-  return { status, intent, error, initiate, verify, setStatus, isSolanaAvailable, handleSolanaPay };
+  const { isAvailable: isEVMAvailable, connect: connectEVM, sendPayment: sendEVMPayment } = useEVMWallet();
+  const handleEVMPay = async () => {
+    try {
+      if (!intent) {
+        setError("Payment intent not established.");
+        setStatus("error");
+        return;
+      }
+      setStatus("connecting");
+      const account = await connectEVM();
+      console.log("Connected to EVM with account:", account);
+      setStatus("pending_signature");
+      const txHash = await sendEVMPayment(intent);
+      setStatus("verifying");
+      await verify(txHash);
+    } catch (err) {
+      setError(err.message || "Failed to connect to MetaMask or sign transaction.");
+      setStatus("error");
+      props.onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  };
+  return {
+    status,
+    intent,
+    error,
+    initiate,
+    verify,
+    setStatus,
+    isSolanaAvailable,
+    handleSolanaPay,
+    isEVMAvailable,
+    handleEVMPay
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PaymentWidget,
+  useEVMWallet,
   usePayment,
   useSolanaWallet
 });

package/dist/index.mjs

@@ -34,6 +34,36 @@ var useSolanaWallet = () => {
   return { isAvailable: !!getProvider(), connect, sendPayment };
 };
 
+// src/providers/EVMProvider.ts
+var useEVMWallet = () => {
+  const getProvider = () => {
+    if (typeof window !== "undefined" && "ethereum" in window) {
+      return window.ethereum;
+    }
+    return void 0;
+  };
+  const connect = async () => {
+    const provider = getProvider();
+    if (provider) {
+      try {
+        const accounts = await provider.request({ method: "eth_requestAccounts" });
+        return accounts[0];
+      } catch (err) {
+        throw new Error("User rejected the connection");
+      }
+    } else {
+      throw new Error("MetaMask or EVM wallet not found");
+    }
+  };
+  const sendPayment = async (intent) => {
+    const provider = getProvider();
+    if (!provider) throw new Error("Wallet not connected");
+    console.log(`Simulating EVM payment to ${intent.paymentAddress} for ${intent.amount} ${intent.currency}`);
+    return "simulated_evm_tx_hash_" + Math.random().toString(36).slice(2);
+  };
+  return { isAvailable: !!getProvider(), connect, sendPayment };
+};
+
 // src/PaymentWidget.tsx
 import { Wallet, CheckCircle, Loader2, AlertCircle, ExternalLink, Cpu } from "lucide-react";
 import { clsx } from "clsx";
@@ -46,7 +76,18 @@ var PaymentWidget = ({
   className,
   ...props
 }) => {
-  const { status, intent, error, initiate, verify, setStatus, isSolanaAvailable, handleSolanaPay } = usePayment(props);
+  const {
+    status,
+    intent,
+    error,
+    initiate,
+    verify,
+    setStatus,
+    isSolanaAvailable,
+    handleSolanaPay,
+    isEVMAvailable,
+    handleEVMPay
+  } = usePayment(props);
   if (status === "success") {
     return /* @__PURE__ */ jsxs("div", { className: cn("p-6 text-center bg-green-50 rounded-xl border border-green-200", className), children: [
       /* @__PURE__ */ jsx(CheckCircle, { className: "mx-auto w-12 h-12 text-green-500 mb-4" }),
@@ -108,6 +149,16 @@ var PaymentWidget = ({
               "Pay with Phantom"
             ]
           }
+        ) : (intent.network.toLowerCase().includes("ethereum") || intent.network.toLowerCase().includes("evm") || intent.network.toLowerCase().includes("polygon")) && isEVMAvailable ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleEVMPay,
+            className: "w-full py-3 px-4 bg-[#f6851b] hover:bg-[#e2761b] text-white font-medium rounded-xl transition-colors flex items-center justify-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx("img", { src: "https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Mirror_Logo.svg", className: "w-4 h-4", alt: "MetaMask" }),
+              "Pay with MetaMask"
+            ]
+          }
         ) : /* @__PURE__ */ jsx(
           "button",
           {
@@ -140,6 +191,15 @@ var usePayment = (props) => {
     try {
       setStatus("initiating");
       setError(null);
+      if (props.provider) {
+        const data2 = await props.provider.initiatePayment(props.orderId, {
+          amount: props.amount,
+          currency: props.currency
+        });
+        setIntent(data2);
+        setStatus("pending_signature");
+        return;
+      }
       const response = await fetch(props.endpoints?.initiate || "/api/orders/initiate", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -161,10 +221,20 @@ var usePayment = (props) => {
       setStatus("error");
       props.onError?.(err);
     }
-  }, [props.endpoints?.initiate, props.orderId, props.amount, props.currency, props.onError]);
+  }, [props.provider, props.endpoints?.initiate, props.orderId, props.amount, props.currency, props.onError]);
   const verify = useCallback(async (txHash) => {
     try {
       setStatus("verifying");
+      if (props.provider) {
+        const data2 = await props.provider.verifyPayment(txHash, props.orderId);
+        if (data2.status === "confirmed") {
+          setStatus("success");
+          props.onSuccess?.(data2);
+        } else {
+          throw new Error("Payment not confirmed yet, status: " + data2.status);
+        }
+        return;
+      }
       const response = await fetch(props.endpoints?.verify || "/api/orders/verify-payment", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -189,7 +259,7 @@ var usePayment = (props) => {
       setStatus("error");
       props.onError?.(err);
     }
-  }, [props.endpoints?.verify, props.orderId, props.onSuccess, props.onError]);
+  }, [props.provider, props.endpoints?.verify, props.orderId, props.onSuccess, props.onError]);
   const { isAvailable: isSolanaAvailable, connect: connectSolana, sendPayment: sendSolanaPayment } = useSolanaWallet();
   const handleSolanaPay = async () => {
     try {
@@ -211,10 +281,43 @@ var usePayment = (props) => {
       props.onError?.(err instanceof Error ? err : new Error(String(err)));
     }
   };
-  return { status, intent, error, initiate, verify, setStatus, isSolanaAvailable, handleSolanaPay };
+  const { isAvailable: isEVMAvailable, connect: connectEVM, sendPayment: sendEVMPayment } = useEVMWallet();
+  const handleEVMPay = async () => {
+    try {
+      if (!intent) {
+        setError("Payment intent not established.");
+        setStatus("error");
+        return;
+      }
+      setStatus("connecting");
+      const account = await connectEVM();
+      console.log("Connected to EVM with account:", account);
+      setStatus("pending_signature");
+      const txHash = await sendEVMPayment(intent);
+      setStatus("verifying");
+      await verify(txHash);
+    } catch (err) {
+      setError(err.message || "Failed to connect to MetaMask or sign transaction.");
+      setStatus("error");
+      props.onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  };
+  return {
+    status,
+    intent,
+    error,
+    initiate,
+    verify,
+    setStatus,
+    isSolanaAvailable,
+    handleSolanaPay,
+    isEVMAvailable,
+    handleEVMPay
+  };
 };
 export {
   PaymentWidget,
+  useEVMWallet,
   usePayment,
   useSolanaWallet
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micro-cms/crypto-payments",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Composable Crypto Payment Widget for Micro-CMS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",