coinley-checkout 0.1.7 → 0.1.9

package/dist/coinley-checkout.es.js

@@ -1106,48 +1106,113 @@ const CoinleyProvider = ({
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(CoinleyContext.Provider, { value, children });
 };
-const QRCode = ({ walletAddress, amount, currency, theme = "light" }) => {
-  const qrDisplay = /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      style: {
-        width: "200px",
-        height: "200px",
-        backgroundColor: theme === "dark" ? "#374151" : "#f3f4f6",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        color: theme === "dark" ? "white" : "black",
-        fontWeight: "bold",
-        border: `1px solid ${theme === "dark" ? "#4b5563" : "#e5e7eb"}`,
-        margin: "0 auto"
-      },
-      children: [
-        currency,
-        " Payment QR"
-      ]
+const QRCode = ({
+  walletAddress,
+  amount,
+  currency,
+  theme = "light",
+  size = 200
+}) => {
+  const [qrCodeSvg, setQrCodeSvg] = useState("");
+  const getQRCodeData = () => {
+    if (!walletAddress)
+      return "";
+    const schemes = {
+      "USDT": "ethereum",
+      "USDC": "ethereum",
+      "BNB": "binance",
+      "SOL": "solana",
+      "USDC_SOL": "solana"
+    };
+    const scheme = schemes[currency] || "ethereum";
+    return `${scheme}:${walletAddress}?amount=${amount}&currency=${currency}`;
+  };
+  useEffect(() => {
+    const generateQRCode = async () => {
+      try {
+        const qrcode = await Promise.resolve().then(() => qrcodeGenerator);
+        const data = getQRCodeData();
+        if (data) {
+          const svg = qrcode.generateQR(data, size, theme === "dark");
+          setQrCodeSvg(svg);
+        }
+      } catch (error) {
+        console.error("Failed to generate QR code:", error);
+        setQrCodeSvg(generateFallbackQR());
+      }
+    };
+    generateQRCode();
+  }, [walletAddress, amount, currency, theme, size]);
+  const generateFallbackQR = () => {
+    const darkMode = theme === "dark";
+    const cellSize = Math.floor(size / 25);
+    const svgSize = size;
+    let svg = `
+      <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        width="${svgSize}" 
+        height="${svgSize}"
+        viewBox="0 0 ${svgSize} ${svgSize}"
+      >
+    `;
+    svg += `<rect width="${svgSize}" height="${svgSize}" fill="${darkMode ? "#1f2937" : "white"}"/>`;
+    svg += `<rect x="0" y="0" width="${cellSize * 7}" height="${cellSize * 7}" fill="${darkMode ? "white" : "black"}"/>`;
+    svg += `<rect x="${cellSize}" y="${cellSize}" width="${cellSize * 5}" height="${cellSize * 5}" fill="${darkMode ? "#1f2937" : "white"}"/>`;
+    svg += `<rect x="${cellSize * 2}" y="${cellSize * 2}" width="${cellSize * 3}" height="${cellSize * 3}" fill="${darkMode ? "white" : "black"}"/>`;
+    svg += `<rect x="${svgSize - cellSize * 7}" y="0" width="${cellSize * 7}" height="${cellSize * 7}" fill="${darkMode ? "white" : "black"}"/>`;
+    svg += `<rect x="${svgSize - cellSize * 6}" y="${cellSize}" width="${cellSize * 5}" height="${cellSize * 5}" fill="${darkMode ? "#1f2937" : "white"}"/>`;
+    svg += `<rect x="${svgSize - cellSize * 5}" y="${cellSize * 2}" width="${cellSize * 3}" height="${cellSize * 3}" fill="${darkMode ? "white" : "black"}"/>`;
+    svg += `<rect x="0" y="${svgSize - cellSize * 7}" width="${cellSize * 7}" height="${cellSize * 7}" fill="${darkMode ? "white" : "black"}"/>`;
+    svg += `<rect x="${cellSize}" y="${svgSize - cellSize * 6}" width="${cellSize * 5}" height="${cellSize * 5}" fill="${darkMode ? "#1f2937" : "white"}"/>`;
+    svg += `<rect x="${cellSize * 2}" y="${svgSize - cellSize * 5}" width="${cellSize * 3}" height="${cellSize * 3}" fill="${darkMode ? "white" : "black"}"/>`;
+    for (let i = 0; i < 10; i++) {
+      for (let j = 0; j < 10; j++) {
+        if (i < 3 && j < 3 || i < 3 && j > 6 || i > 6 && j < 3)
+          continue;
+        if (Math.random() > 0.5) {
+          const x = cellSize * (i * 2 + 3);
+          const y = cellSize * (j * 2 + 3);
+          svg += `<rect x="${x}" y="${y}" width="${cellSize * 2}" height="${cellSize * 2}" fill="${darkMode ? "white" : "black"}"/>`;
+        }
+      }
     }
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: theme === "dark" ? "bg-gray-700" : "bg-white", children: qrDisplay }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { textAlign: "center", marginTop: "12px", fontSize: "14px" }, children: "Scan with your wallet app to pay" }),
-    walletAddress && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { marginTop: "12px" }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { fontSize: "12px", marginBottom: "4px" }, children: [
+    svg += "</svg>";
+    return svg;
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: `p-4 rounded-lg ${theme === "dark" ? "bg-gray-700" : "bg-white"} mb-3`,
+        dangerouslySetInnerHTML: { __html: qrCodeSvg }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-center text-sm ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children: "Scan with your wallet app to pay" }),
+    walletAddress && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 w-full", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: `text-xs ${theme === "dark" ? "text-gray-400" : "text-gray-500"} mb-1`, children: [
         "Send ",
         amount,
         " ",
         currency,
         " to:"
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
-        fontSize: "12px",
-        fontFamily: "monospace",
-        padding: "8px",
-        backgroundColor: theme === "dark" ? "#1f2937" : "#f3f4f6",
-        borderRadius: "4px",
-        overflowWrap: "break-word"
-      }, children: walletAddress })
-    ] })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs font-mono p-2 rounded overflow-auto break-all ${theme === "dark" ? "bg-gray-800 text-gray-300" : "bg-gray-100 text-gray-700"}`, children: walletAddress })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `p-3 rounded ${theme === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `text-sm font-medium mb-2 ${theme === "dark" ? "text-white" : "text-gray-800"}`, children: "Payment Instructions" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("ol", { className: `text-xs space-y-2 ${theme === "dark" ? "text-gray-300" : "text-gray-600"}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "1. Open your crypto wallet app" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "2. Scan the QR code above" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
+          "3. Confirm the payment amount (",
+          amount,
+          " ",
+          currency,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: '4. Click "Pay Now" button below after sending the payment' })
+      ] })
+    ] }) })
   ] });
 };
 const PaymentStatus = ({ status, message, theme = "light" }) => {
@@ -1553,7 +1618,77 @@ const DEFAULT_CONFIG = {
   testMode: false,
   theme: "light"
 };
-const VERSION = "1.0.7";
+const VERSION = "1.0.9";
+const hashString = (str) => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash);
+};
+const generateQR = (data, size = 200, darkMode = false) => {
+  const dataHash = hashString(data);
+  const moduleCount = 25;
+  const moduleSize = Math.floor(size / moduleCount);
+  const quietZone = moduleSize * 2;
+  const svgSize = size + quietZone * 2;
+  const darkColor = darkMode ? "#FFFFFF" : "#000000";
+  const lightColor = darkMode ? "#1F2937" : "#FFFFFF";
+  let svg = `
+      <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        width="${svgSize}" 
+        height="${svgSize}"
+        viewBox="0 0 ${svgSize} ${svgSize}"
+      >
+    `;
+  svg += `<rect width="${svgSize}" height="${svgSize}" fill="${lightColor}"/>`;
+  svg += createPositionPattern(quietZone, quietZone, moduleSize, darkColor, lightColor);
+  svg += createPositionPattern(svgSize - quietZone - moduleSize * 7, quietZone, moduleSize, darkColor, lightColor);
+  svg += createPositionPattern(quietZone, svgSize - quietZone - moduleSize * 7, moduleSize, darkColor, lightColor);
+  for (let row = 0; row < moduleCount; row++) {
+    for (let col = 0; col < moduleCount; col++) {
+      if (row < 7 && col < 7 || // Top left
+      row < 7 && col >= moduleCount - 7 || // Top right
+      row >= moduleCount - 7 && col < 7) {
+        continue;
+      }
+      const shouldFill = (dataHash + row * 37 + col * 17) % 3 === 0;
+      if (shouldFill) {
+        const x = quietZone + col * moduleSize;
+        const y = quietZone + row * moduleSize;
+        svg += `<rect x="${x}" y="${y}" width="${moduleSize}" height="${moduleSize}" fill="${darkColor}"/>`;
+      }
+    }
+  }
+  for (let i = 8; i < moduleCount - 8; i++) {
+    if (i % 2 === 0) {
+      svg += `<rect x="${quietZone + i * moduleSize}" y="${quietZone + 6 * moduleSize}" width="${moduleSize}" height="${moduleSize}" fill="${darkColor}"/>`;
+    }
+  }
+  for (let i = 8; i < moduleCount - 8; i++) {
+    if (i % 2 === 0) {
+      svg += `<rect x="${quietZone + 6 * moduleSize}" y="${quietZone + i * moduleSize}" width="${moduleSize}" height="${moduleSize}" fill="${darkColor}"/>`;
+    }
+  }
+  svg += `<rect x="${quietZone + moduleSize * 12}" y="${quietZone + moduleSize * 12}" width="${moduleSize * 3}" height="${moduleSize * 3}" fill="${darkColor}"/>`;
+  svg += `<rect x="${quietZone + moduleSize * 13}" y="${quietZone + moduleSize * 13}" width="${moduleSize}" height="${moduleSize}" fill="${lightColor}"/>`;
+  svg += "</svg>";
+  return svg;
+};
+const createPositionPattern = (x, y, size, darkColor, lightColor) => {
+  let pattern = "";
+  pattern += `<rect x="${x}" y="${y}" width="${size * 7}" height="${size * 7}" fill="${darkColor}"/>`;
+  pattern += `<rect x="${x + size}" y="${y + size}" width="${size * 5}" height="${size * 5}" fill="${lightColor}"/>`;
+  pattern += `<rect x="${x + size * 2}" y="${y + size * 2}" width="${size * 3}" height="${size * 3}" fill="${darkColor}"/>`;
+  return pattern;
+};
+const qrcodeGenerator = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  generateQR
+}, Symbol.toStringTag, { value: "Module" }));
 export {
   CoinleyCheckout,
   CoinleyModal,