coinley-checkout 1.1.2 → 1.1.5

package/dist/coinley-checkout.es.js

@@ -19087,7 +19087,8 @@ const sendAlgorandAssetTransaction = (walletConnection, tokenConfig, toAddress,
 let apiConfig = {
   apiKey: null,
   apiSecret: null,
-  apiUrl: "https://coinleyserver-production.up.railway.app",
+  // apiUrl: 'https://coinleyserver-production.up.railway.app',
+  apiUrl: "https://hub.coinley.io",
   merchantWalletAddresses: {},
   authToken: null,
   merchantFeePercentage: null,
@@ -21257,32 +21258,85 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
     return iconMap[shortName] || EthIcon;
   };
   const getTokenIcon = (token) => {
-    if (token.symbol === "PYUSD")
-      return PyusdIcon;
-    if (token.symbol === "USDP")
-      return UsdpIcon;
+    console.log("🔍 getTokenIcon called with token:", token);
+    console.log("🔍 Token symbol:", token.symbol);
+    console.log("🔍 Token logo from backend:", token.logo);
+    if (token.symbol === "PYUSD") {
+      console.log("✅ Using PYUSD component");
+      return { type: "component", value: PyusdIcon };
+    }
+    if (token.symbol === "USDP") {
+      console.log("✅ Using USDP component");
+      return { type: "component", value: UsdpIcon };
+    }
     if (token.logo && token.logo !== "" && !token.logo.includes("placeholder")) {
-      return token.logo;
+      console.log("✅ Using backend logo:", token.logo);
+      return { type: "image", value: token.logo };
     }
     const fallbackImages = {
-      "USDT": "https://res.cloudinary.com/do3tlu1ph/image/upload/v1748962844/coinley/gzrp8dpuddqwnfchmf8v.png",
-      "USDC": "https://res.cloudinary.com/do3tlu1ph/image/upload/v1748962844/coinley/w9pdgcxsjj4s9jv9my5f.png",
-      "DAI": "https://cryptologos.cc/logos/multi-collateral-dai-dai-logo.png",
-      "BUSD": "https://cryptologos.cc/logos/binance-usd-busd-logo.png",
-      "USDP": "https://cryptologos.cc/logos/paxos-standard-pax-logo.png",
-      "PYUSD": "https://s2.coinmarketcap.com/static/img/coins/64x64/28492.png",
-      "FRAX": "https://cryptologos.cc/logos/frax-frax-logo.png",
+      // Stablecoins
+      "USDT": "https://s2.coinmarketcap.com/static/img/coins/64x64/825.png",
+      "USDC": "https://s2.coinmarketcap.com/static/img/coins/64x64/3408.png",
+      "DAI": "https://s2.coinmarketcap.com/static/img/coins/64x64/4943.png",
+      "BUSD": "https://s2.coinmarketcap.com/static/img/coins/64x64/4687.png",
+      "USDP": "https://s2.coinmarketcap.com/static/img/coins/64x64/6958.png",
+      // Pax Dollar
+      "PYUSD": "https://s2.coinmarketcap.com/static/img/coins/64x64/28134.png",
+      // PayPal USD
+      "FRAX": "https://s2.coinmarketcap.com/static/img/coins/64x64/6952.png",
       "USDJ": "https://s2.coinmarketcap.com/static/img/coins/64x64/5446.png",
-      "TUSD": "https://cryptologos.cc/logos/trueusd-tusd-logo.png",
-      "ETH": " https://res.cloudinary.com/do3tlu1ph/image/upload/v1748962844/coinley/liznxm8l7iouudtrxdpi.png",
-      "BNB": "https://res.cloudinary.com/do3tlu1ph/image/upload/v1748962844/coinley/eoavfddfqmt7qgajjxvb.png",
-      "TRX": "https://res.cloudinary.com/do3tlu1ph/image/upload/v1748962844/coinley/mpxxns6gtfiws4rlouxc.png",
-      "ALGO": "https://res.cloudinary.com/do3tlu1ph/image/upload/v1748962844/coinley/x2lugizoduiphuqn0dej.png ",
-      "SOL": "https://res.cloudinary.com/do3tlu1ph/image/upload/v1748962845/coinley/hmex6qxnlid1gboh4cwc.png",
-      "AVAX": "https://cryptologos.cc/logos/avalanche-avax-logo.png",
-      "MATIC": "https://cryptologos.cc/logos/polygon-matic-logo.png"
+      // JUST Stablecoin
+      "TUSD": "https://s2.coinmarketcap.com/static/img/coins/64x64/2563.png",
+      // Native Cryptocurrencies
+      "ETH": "https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png",
+      // Ethereum
+      "BNB": "https://s2.coinmarketcap.com/static/img/coins/64x64/1839.png",
+      // BNB
+      "TRX": "https://s2.coinmarketcap.com/static/img/coins/64x64/1958.png",
+      // TRON
+      "ALGO": "https://s2.coinmarketcap.com/static/img/coins/64x64/4030.png",
+      // Algorand
+      "SOL": "https://s2.coinmarketcap.com/static/img/coins/64x64/5426.png",
+      // Solana
+      "AVAX": "https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png",
+      // Avalanche
+      "MATIC": "https://s2.coinmarketcap.com/static/img/coins/64x64/3890.png"
+      // Polygon
     };
-    return fallbackImages[token.symbol] || `https://via.placeholder.com/64x64/6366f1/ffffff?text=${token.symbol}`;
+    const fallbackUrl = fallbackImages[token.symbol];
+    if (fallbackUrl) {
+      console.log("✅ Using fallback image for", token.symbol, ":", fallbackUrl);
+      return { type: "image", value: fallbackUrl };
+    }
+    const placeholder = `https://via.placeholder.com/64x64/6366f1/ffffff?text=${token.symbol}`;
+    console.log("⚠️ Using placeholder for", token.symbol, ":", placeholder);
+    return { type: "image", value: placeholder };
+  };
+  const renderTokenIcon = (tokenIconData, size = 32, className = "rounded-full") => {
+    console.log("🎨 renderTokenIcon called with:", tokenIconData);
+    console.log("🎨 Icon type:", tokenIconData.type);
+    console.log("🎨 Icon value:", tokenIconData.value);
+    if (tokenIconData.type === "component") {
+      const IconComponent = tokenIconData.value;
+      console.log("🎨 Rendering component:", IconComponent);
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(IconComponent, { size });
+    } else {
+      console.log("🎨 Rendering image with URL:", tokenIconData.value);
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "img",
+        {
+          src: tokenIconData.value,
+          alt: "Token",
+          className: `h-${size / 4} w-${size / 4} ${className}`,
+          style: { height: `${size}px`, width: `${size}px` },
+          onLoad: () => console.log("✅ Image loaded successfully:", tokenIconData.value),
+          onError: (e) => {
+            console.error("❌ Image failed to load:", tokenIconData.value);
+            e.target.src = `https://via.placeholder.com/${size}x${size}/6366f1/ffffff?text=?`;
+          }
+        }
+      );
+    }
   };
   const getPaymentMethodsForNetwork = (networkShortName) => {
     if (!networkShortName)
@@ -21301,6 +21355,7 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
     setSelectedPaymentMethod(null);
   };
   const handleSelectPaymentMethod = (token) => {
+    const tokenIconData = getTokenIcon(token);
     const paymentMethodData = {
       currency: token.symbol,
       network: selectedNetwork,
@@ -21313,7 +21368,8 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
         id: token.symbol,
         name: token.symbol,
         description: token.name,
-        logo: getTokenIcon(token),
+        logo: tokenIconData,
+        // Store the icon data object
         network: selectedNetwork,
         isStablecoin: token.isStablecoin
       }
@@ -21428,17 +21484,7 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
             style: { minHeight: "56px" },
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center gap-3", children: selectedPaymentMethod ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                typeof selectedPaymentMethod.method.logo === "function" ? /* @__PURE__ */ jsxRuntimeExports.jsx(selectedPaymentMethod.method.logo, { size: 32 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "img",
-                  {
-                    src: selectedPaymentMethod.method.logo,
-                    alt: selectedPaymentMethod.method.name,
-                    className: "h-8 w-8 rounded-full",
-                    onError: (e) => {
-                      e.target.src = `https://via.placeholder.com/32x32/6366f1/ffffff?text=${selectedPaymentMethod.method.name}`;
-                    }
-                  }
-                ),
+                renderTokenIcon(selectedPaymentMethod.method.logo, 32),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-base font-normal", children: [
                   selectedPaymentMethod.method.description,
                   " (",
@@ -21466,7 +21512,7 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
             availableTokensForNetwork.filter(
               (token) => token.name.toLowerCase().includes(searchQuery.toLowerCase()) || token.symbol.toLowerCase().includes(searchQuery.toLowerCase())
             ).map((token) => {
-              const tokenIcon = getTokenIcon(token);
+              const tokenIconData = getTokenIcon(token);
               return /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
                 {
@@ -21478,17 +21524,7 @@ const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supported
                   },
                   style: { minHeight: "48px" },
                   children: [
-                    typeof tokenIcon === "function" ? /* @__PURE__ */ jsxRuntimeExports.jsx("tokenIcon", { size: 32 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "img",
-                      {
-                        src: tokenIcon,
-                        alt: token.symbol,
-                        className: "h-8 w-8 rounded-full",
-                        onError: (e) => {
-                          e.target.src = `https://via.placeholder.com/32x32/6366f1/ffffff?text=${token.symbol}`;
-                        }
-                      }
-                    ),
+                    renderTokenIcon(tokenIconData, 32),
                     /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
                       token.name,
                       " (",
@@ -21866,12 +21902,12 @@ const CoinleyModal = ({
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Currency:" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedPaymentMethod.currency })
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-b py-1" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-b border-black" }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Network:" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: getNetworkDisplayName(selectedPaymentMethod.network) })
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-b py-1" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-b border-black" }),
               payment.feeChargedTo === "customer" && payment.feeAmount > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Processing Fee:" }),
@@ -21880,7 +21916,7 @@ const CoinleyModal = ({
                     "%"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-b py-1" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-b border-black" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between border-t pt-2 mt-1", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-bold", children: "Total:" }),
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-bold text-lg", children: [