coinley-test 0.0.12 → 0.0.14

package/dist/index.esm.js

@@ -250,53 +250,74 @@ const WalletIntegration = ({
   selectedToken,
   paymentData,
   config,
-  // Add config as prop
   onTransactionSent,
   onError,
   isConnecting,
   setIsConnecting
 }) => {
-  const { isConnected, address } = useWallet();
+  const { isConnected, address, disconnect } = useWallet();
   const { connectWallet, isPending } = useWalletConnect();
   const { detectedWallets, hasWallets, walletCount } = useWalletDetection();
   const { sendTransaction } = useWalletTransaction();
-  useWalletModal();
-  useEffect(() => {
-    if (isConnected && paymentData && selectedNetwork && selectedToken && address) {
-      console.log("🔍 Wallet Debug:");
-      console.log("Connected address:", address);
-      console.log("Expected address:", "0xa0419a048A1469B34a5245f08C0697Ba956a56Ab");
-      console.log("Network:", selectedNetwork == null ? void 0 : selectedNetwork.name);
-      handleSendTransaction();
+  const { openModal } = useWalletModal();
+  detectedWallets.filter(
+    (wallet) => wallet.name.toLowerCase().includes("metamask") || wallet.provider === "injected" || wallet.name.toLowerCase().includes("coinbase") || wallet.name.toLowerCase().includes("wallet connect")
+  );
+  const handleConnectSpecificWallet = async (walletType) => {
+    try {
+      setIsConnecting(true);
+      if (isConnected) {
+        await disconnect();
+        await new Promise((resolve) => setTimeout(resolve, 1e3));
+      }
+      if (walletType === "metamask" && window.ethereum && window.ethereum.isMetaMask) {
+        try {
+          await window.ethereum.request({ method: "eth_requestAccounts" });
+          console.log("✅ Connected directly to MetaMask");
+        } catch (error) {
+          console.error("MetaMask connection failed:", error);
+          throw error;
+        }
+      } else {
+        await connectWallet(walletType);
+      }
+    } catch (error) {
+      console.error("Wallet connection failed:", error);
+      onError(error.message || "Failed to connect wallet");
+    } finally {
+      setIsConnecting(false);
     }
-  }, [isConnected, address, paymentData]);
-  const handleSendTransaction = async () => {
+  };
+  const handleOpenModal = () => {
+    try {
+      console.log("Attempting to open wallet modal...");
+      openModal();
+    } catch (error) {
+      console.error("Failed to open modal:", error);
+      handleConnectSpecificWallet("injected");
+    }
+  };
+  const handleSendPayment = async () => {
     var _a;
-    if (!isConnected || !paymentData || !selectedToken) return;
+    if (!isConnected || !paymentData || !selectedToken) {
+      onError("Wallet not connected or payment data missing");
+      return;
+    }
     try {
       setIsConnecting(true);
       console.log("🔍 Transaction Debug:");
+      console.log("Connected wallet address:", address);
       console.log("Payment data:", paymentData);
       console.log("Selected token:", selectedToken);
       console.log("Selected network:", selectedNetwork);
       let recipientAddress = (_a = paymentData.metadata) == null ? void 0 : _a.recipientWallet;
-      console.log("Raw recipient address from payment metadata:", recipientAddress);
-      if (typeof recipientAddress === "object" && recipientAddress.address) {
-        recipientAddress = recipientAddress.address;
-      }
+      console.log("Merchant recipient address:", recipientAddress);
       if (!recipientAddress || typeof recipientAddress !== "string") {
-        throw new Error("Merchant wallet address not found in payment data. Please contact support.");
+        throw new Error("Merchant wallet address not found in payment data");
       }
       if (!recipientAddress.match(/^0x[a-fA-F0-9]{40}$/)) {
-        console.error("❌ Invalid merchant address format:", {
-          address: recipientAddress,
-          length: recipientAddress.length,
-          addressWithoutPrefix: recipientAddress.slice(2),
-          addressWithoutPrefixLength: recipientAddress.slice(2).length
-        });
         throw new Error(`Invalid merchant address format: ${recipientAddress}`);
       }
-      console.log("✅ Using merchant recipient address:", recipientAddress);
       let txHash;
       if (selectedToken.contractAddress) {
         console.log("🔍 ERC-20 Transaction Details:");
@@ -306,16 +327,12 @@ const WalletIntegration = ({
         const decimals = selectedToken.decimals || 6;
         const amount = Math.floor(paymentData.totalAmount * Math.pow(10, decimals));
         console.log("Calculated amount (with decimals):", amount);
-        console.log("Amount in hex:", amount.toString(16));
         const methodId = "0xa9059cbb";
         const addressWithoutPrefix = recipientAddress.slice(2);
         const recipientPadded = addressWithoutPrefix.toLowerCase().padStart(64, "0");
         const amountPadded = amount.toString(16).padStart(64, "0");
         const transferData = `${methodId}${recipientPadded}${amountPadded}`;
-        console.log("🔍 Transaction Data Encoding:");
-        console.log("Original address:", recipientAddress);
-        console.log("Address without 0x:", addressWithoutPrefix);
-        console.log("Address length:", addressWithoutPrefix.length);
+        console.log("🔍 Transaction Data:");
         console.log("Method ID:", methodId);
         console.log("Recipient (padded):", recipientPadded);
         console.log("Amount (padded):", amountPadded);
@@ -328,11 +345,8 @@ const WalletIntegration = ({
         console.log("📤 Sending ERC-20 transaction:", txParams);
         txHash = await sendTransaction(txParams);
       } else {
-        console.log("🔍 Native Token Transaction:");
         const value = Math.floor(paymentData.totalAmount * Math.pow(10, 18));
         const valueHex = `0x${value.toString(16)}`;
-        console.log("Native amount:", value);
-        console.log("Native amount hex:", valueHex);
         const txParams = {
           to: recipientAddress,
           value: valueHex
@@ -346,58 +360,123 @@ const WalletIntegration = ({
       }
     } catch (error) {
       console.error("❌ Transaction failed:", error);
-      console.error("Error details:", {
-        message: error.message,
-        cause: error.cause,
-        details: error.details
-      });
       onError(error.message || "Transaction failed");
     } finally {
       setIsConnecting(false);
     }
   };
+  const handleDisconnect = async () => {
+    try {
+      await disconnect();
+    } catch (error) {
+      console.error("Disconnect error:", error);
+    }
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center space-y-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 bg-[#7042D2] bg-opacity-20 rounded-full flex items-center justify-center mx-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Wallet, { className: "w-8 h-8 text-[#7042D2]" }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold", children: isConnected ? "Send Payment" : `Connect Wallet${hasWallets ? ` (${walletCount} detected)` : ""}` }),
-    !isConnected ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: hasWallets ? detectedWallets.map((wallet, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        onClick: () => connectWallet("injected"),
-        disabled: isPending,
-        className: "w-full p-3 border border-gray-300 rounded-lg hover:border-[#7042D2] flex items-center space-x-3 transition-colors",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xl", children: wallet.icon }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: wallet.name }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500", children: wallet.provider })
-          ] })
-        ]
-      },
-      index
-    )) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "No wallets detected. Please install MetaMask." }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-green-600 dark:text-green-400", children: [
-        "✅ Wallet Connected: ",
-        address == null ? void 0 : address.slice(0, 6),
-        "...",
-        address == null ? void 0 : address.slice(-4)
+    !isConnected ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold", children: "Connect Your Wallet" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: "Choose your preferred wallet to complete the payment" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            onClick: () => handleConnectSpecificWallet("metamask"),
+            disabled: isPending || isConnecting,
+            className: "w-full p-3 border border-gray-300 rounded-lg hover:border-[#7042D2] flex items-center space-x-3 transition-colors disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xl", children: "🦊" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left flex-1", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: "MetaMask" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500", children: "Connect with MetaMask" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            onClick: handleOpenModal,
+            disabled: isPending || isConnecting,
+            className: "w-full p-3 border border-gray-300 rounded-lg hover:border-[#7042D2] flex items-center space-x-3 transition-colors disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xl", children: "💼" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left flex-1", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: "Other Wallets" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500", children: "Choose from available wallets" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: () => handleConnectSpecificWallet("injected"),
+            disabled: isPending || isConnecting,
+            className: "w-full p-2 text-sm border border-dashed border-gray-300 rounded-lg hover:border-[#7042D2] transition-colors disabled:opacity-50",
+            children: "Try Direct Connection"
+          }
+        )
       ] }),
-      paymentData && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-4 space-y-2", children: [
+      isConnecting && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-2 text-gray-600", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Connecting..." })
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-green-600", children: "Wallet Connected ✅" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-4 space-y-3", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Amount:" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium", children: [
-            paymentData.totalAmount,
-            " ",
-            selectedToken == null ? void 0 : selectedToken.symbol
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Address:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-sm", children: [
+              address == null ? void 0 : address.slice(0, 6),
+              "...",
+              address == null ? void 0 : address.slice(-4)
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                onClick: handleDisconnect,
+                className: "text-xs text-red-600 hover:text-red-800",
+                children: "Disconnect"
+              }
+            )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Network:" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedNetwork == null ? void 0 : selectedNetwork.name })
+        paymentData && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Amount:" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium", children: [
+              paymentData.totalAmount,
+              " ",
+              selectedToken == null ? void 0 : selectedToken.symbol
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Network:" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedNetwork == null ? void 0 : selectedNetwork.name })
+          ] })
         ] })
       ] }),
-      isConnecting && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-5 h-5 animate-spin text-[#7042D2]" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Processing transaction..." })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: handleSendPayment,
+          disabled: isConnecting,
+          className: "w-full bg-[#7042D2] text-white py-4 rounded-lg font-semibold hover:bg-[#7042D2]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2",
+          children: isConnecting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-5 h-5 animate-spin" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Processing Payment..." })
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "w-5 h-5" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Send Payment" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-500", children: [
+        "Make sure you have enough ",
+        selectedToken == null ? void 0 : selectedToken.symbol,
+        " and ETH for gas fees"
       ] })
     ] })
   ] }) });