coinley-test 0.0.11 → 0.0.13

package/dist/index.esm.js

@@ -250,48 +250,55 @@ 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 ethereumWallets = 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));
+      }
+      await connectWallet(walletType);
+    } catch (error) {
+      console.error("Wallet connection failed:", error);
+      onError(error.message || "Failed to connect wallet");
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+  const handleSendPayment = async () => {
+    var _a;
+    if (!isConnected || !paymentData || !selectedToken) {
+      onError("Wallet not connected or payment data missing");
+      return;
     }
-  }, [isConnected, address, paymentData]);
-  const handleSendTransaction = async () => {
-    var _a, _b;
-    if (!isConnected || !paymentData || !selectedToken) 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);
-      console.log("Config merchant wallets:", config.merchantWalletAddresses);
-      let recipientAddress = ((_a = paymentData.metadata) == null ? void 0 : _a.recipientWallet) || ((_b = config.merchantWalletAddresses) == null ? void 0 : _b[selectedNetwork == null ? void 0 : selectedNetwork.shortName]);
-      console.log("Raw recipient address:", recipientAddress);
-      if (typeof recipientAddress === "object" && recipientAddress.address) {
-        recipientAddress = recipientAddress.address;
-      }
+      let recipientAddress = (_a = paymentData.metadata) == null ? void 0 : _a.recipientWallet;
+      console.log("Merchant recipient address:", recipientAddress);
       if (!recipientAddress || typeof recipientAddress !== "string") {
-        throw new Error("Recipient wallet address not found or invalid");
+        throw new Error("Merchant wallet address not found in payment data");
       }
       if (!recipientAddress.match(/^0x[a-fA-F0-9]{40}$/)) {
-        throw new Error(`Invalid recipient address format: ${recipientAddress}`);
+        throw new Error(`Invalid merchant address format: ${recipientAddress}`);
       }
-      console.log("✅ Using recipient address:", recipientAddress);
       let txHash;
       if (selectedToken.contractAddress) {
         console.log("🔍 ERC-20 Transaction Details:");
@@ -301,12 +308,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 recipientPadded = recipientAddress.slice(2).toLowerCase().padStart(64, "0");
+        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("🔍 Transaction Data:");
         console.log("Method ID:", methodId);
         console.log("Recipient (padded):", recipientPadded);
         console.log("Amount (padded):", amountPadded);
@@ -319,11 +326,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
@@ -337,58 +341,132 @@ 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("injected"),
+            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: () => handleConnectSpecificWallet("walletConnect"),
+            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: "WalletConnect" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500", children: "Scan with mobile wallet" })
+              ] })
+            ]
+          }
+        ),
+        ethereumWallets.filter(
+          (wallet) => !wallet.name.toLowerCase().includes("metamask")
+        ).map((wallet, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            onClick: () => handleConnectSpecificWallet("injected"),
+            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: wallet.icon }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left flex-1", 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
+        ))
       ] }),
-      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"
       ] })
     ] })
   ] }) });
@@ -491,12 +569,21 @@ const CoinleyPayment = ({
         return ((_a = token.Network) == null ? void 0 : _a.shortName) === network.shortName || token.networkId === network.id;
       }
     );
-    if (networkTokens.length > 0) {
-      const preferredToken = networkTokens.find((t) => t.symbol === "USDT") || networkTokens[0];
-      setSelectedToken(preferredToken);
-      await initiatePayment(network, preferredToken);
+    if (networkTokens.length > 1) {
+      setCurrentStep("select-token");
+    } else if (networkTokens.length === 1) {
+      const token = networkTokens[0];
+      setSelectedToken(token);
+      await initiatePayment(network, token);
+    } else {
+      setError(`No supported tokens found for ${network.name}`);
+      setCurrentStep("error");
     }
   };
+  const handleTokenSelect = async (token) => {
+    setSelectedToken(token);
+    await initiatePayment(selectedNetwork, token);
+  };
   const initiatePayment = async (network, token) => {
     try {
       setLoading(true);
@@ -638,8 +725,20 @@ const CoinleyPayment = ({
   const goBack = () => {
     if (currentStep === "select-network") {
       setCurrentStep("select-method");
-    } else if (currentStep === "wallet-connect" || currentStep === "qr-code") {
+    } else if (currentStep === "select-token") {
       setCurrentStep("select-network");
+    } else if (currentStep === "wallet-connect" || currentStep === "qr-code") {
+      const networkTokens = tokens.filter(
+        (token) => {
+          var _a;
+          return ((_a = token.Network) == null ? void 0 : _a.shortName) === (selectedNetwork == null ? void 0 : selectedNetwork.shortName) || token.networkId === (selectedNetwork == null ? void 0 : selectedNetwork.id);
+        }
+      );
+      if (networkTokens.length > 1) {
+        setCurrentStep("select-token");
+      } else {
+        setCurrentStep("select-network");
+      }
     }
   };
   if (!isOpen) return null;
@@ -767,6 +866,55 @@ const CoinleyPayment = ({
               },
               "select-network"
             ),
+            currentStep === "select-token" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              motion.div,
+              {
+                initial: { x: 20, opacity: 0 },
+                animate: { x: 0, opacity: 1 },
+                exit: { x: -20, opacity: 0 },
+                className: "space-y-4",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold text-center mb-6", children: [
+                    "Select Token on ",
+                    selectedNetwork == null ? void 0 : selectedNetwork.name
+                  ] }),
+                  loading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-8 h-8 animate-spin text-[#7042D2]" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: tokens.filter(
+                    (token) => {
+                      var _a;
+                      return ((_a = token.Network) == null ? void 0 : _a.shortName) === (selectedNetwork == null ? void 0 : selectedNetwork.shortName) || token.networkId === (selectedNetwork == null ? void 0 : selectedNetwork.id);
+                    }
+                  ).map((token) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    motion.button,
+                    {
+                      whileHover: { scale: 1.02 },
+                      whileTap: { scale: 0.98 },
+                      onClick: () => handleTokenSelect(token),
+                      className: "w-full p-4 border-2 border-gray-200 dark:border-gray-700 rounded-xl hover:border-[#7042D2] transition-colors group",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-4", children: [
+                        token.logo ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "img",
+                          {
+                            src: token.logo,
+                            alt: token.symbol,
+                            className: "w-8 h-8 rounded-full"
+                          }
+                        ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 bg-[#7042D2] bg-opacity-20 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-bold text-[#7042D2]", children: token.symbol.charAt(0) }) }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-left flex-1", children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: token.name }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
+                            token.symbol,
+                            token.isStablecoin && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 px-2 py-0.5 bg-green-100 text-green-600 text-xs rounded-full", children: "Stablecoin" })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-5 h-5 text-gray-400 transform -rotate-90" })
+                      ] })
+                    },
+                    token.id
+                  )) })
+                ]
+              },
+              "select-token"
+            ),
             currentStep === "wallet-connect" && /* @__PURE__ */ jsxRuntimeExports.jsx(
               motion.div,
               {