coinley-pay 0.0.2 → 0.0.4

package/dist/index.esm.js

@@ -45505,7 +45505,7 @@ const DepositAddressDisplay = ({
     }
   );
 };
-const queryClient = new QueryClient();
+const queryClient$1 = new QueryClient();
 const EnhancedSimpleCoinleyPaymentInternal = ({
   publicKey: publicKey2,
   // New: Single public key for authentication (recommended)
@@ -46483,7 +46483,7 @@ const EnhancedSimpleCoinleyPaymentInternal = ({
   ] });
 };
 const EnhancedSimpleCoinleyPayment = (props) => {
-  return /* @__PURE__ */ jsx(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(EnhancedSimpleCoinleyPaymentInternal, { ...props }) }) });
+  return /* @__PURE__ */ jsx(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient$1, children: /* @__PURE__ */ jsx(EnhancedSimpleCoinleyPaymentInternal, { ...props }) }) });
 };
 const CoinleyContext = createContext(null);
 const CoinleyProvider = ({
@@ -46886,6 +46886,1028 @@ class PaymentAPI {
     }
   }
 }
+const queryClient = new QueryClient();
+const PAYMENT_TABS = {
+  WALLET: "wallet",
+  QR: "qr",
+  TRANSFER: "transfer"
+};
+const RedesignedCoinleyPaymentInternal = ({
+  publicKey: publicKey2,
+  apiKey,
+  apiSecret,
+  apiUrl,
+  config,
+  onSuccess,
+  onError,
+  onClose,
+  isOpen,
+  theme = "light"
+}) => {
+  const paymentFlow = usePaymentFlow(apiUrl, publicKey2 || apiKey, publicKey2 ? null : apiSecret);
+  const walletConnection = useWalletConnection();
+  const solanaWallet = useSolanaWallet();
+  const chainType = useMemo(() => {
+    if (!paymentFlow.selectedNetwork) return CHAIN_TYPES.EVM;
+    return getChainType(paymentFlow.selectedNetwork.type || paymentFlow.selectedNetwork.shortName || paymentFlow.selectedNetwork.id);
+  }, [paymentFlow.selectedNetwork]);
+  const isSolana = chainType === CHAIN_TYPES.SOLANA;
+  const detectSolanaDevnet = (network) => {
+    if (!network) return false;
+    const isTestnet = network.isTestnet === true || network.isTestnet === "true";
+    const nameHasDevnet = (network.name || "").toLowerCase().includes("devnet");
+    const shortNameHasDevnet = (network.shortName || "").toLowerCase().includes("devnet");
+    const typeHasDevnet = (network.type || "").toLowerCase().includes("devnet");
+    const idHasDevnet = (network.id || "").toLowerCase().includes("devnet");
+    const isDevnet = isTestnet || nameHasDevnet || shortNameHasDevnet || typeHasDevnet || idHasDevnet;
+    return isDevnet;
+  };
+  const isSolanaDevnet = useMemo(() => {
+    if (!isSolana || !paymentFlow.selectedNetwork) return false;
+    return detectSolanaDevnet(paymentFlow.selectedNetwork);
+  }, [isSolana, paymentFlow.selectedNetwork]);
+  const solanaRpcEndpoints = useMemo(() => {
+    if (!isSolana || !paymentFlow.selectedNetwork) return [];
+    return getSolanaRpcEndpoints();
+  }, [isSolana, paymentFlow.selectedNetwork, isSolanaDevnet]);
+  const solanaTransaction = useSolanaTransaction(solanaRpcEndpoints, solanaWallet.connectedWallet);
+  const [activeTab, setActiveTab] = useState(PAYMENT_TABS.WALLET);
+  const [networkSearch, setNetworkSearch] = useState("");
+  const [showWalletConfirm, setShowWalletConfirm] = useState(false);
+  const [qrCodeDataUrl, setQrCodeDataUrl] = useState("");
+  const [isMobile, setIsMobile] = useState(false);
+  const [mobilePaymentStarted, setMobilePaymentStarted] = useState(() => {
+    if (typeof window !== "undefined" && window.sessionStorage) {
+      return sessionStorage.getItem("coinley_mobile_payment_started") === "true";
+    }
+    return false;
+  });
+  const [verifyingPayment, setVerifyingPayment] = useState(false);
+  useEffect(() => {
+    setIsMobile(detectMobile());
+  }, []);
+  const {
+    currentStep,
+    networks,
+    tokens,
+    selectedNetwork,
+    selectedToken,
+    paymentData,
+    loading,
+    error,
+    paymentType,
+    loadData,
+    createPayment,
+    createDepositPayment,
+    failPayment,
+    resetState,
+    setSelectedNetwork,
+    setSelectedToken,
+    setCurrentStep,
+    setError
+  } = paymentFlow;
+  const {
+    connectedWallet,
+    address,
+    connectWallet,
+    handleWalletSelection,
+    resetState: resetWalletState
+  } = walletConnection;
+  const transactionHandling = useTransactionHandling(
+    paymentData,
+    selectedToken,
+    selectedNetwork,
+    address,
+    paymentFlow.api,
+    walletConnection
+  );
+  const {
+    executePaymentTransaction,
+    processFinalPayment,
+    transactionStep,
+    transactionError,
+    currentTransactionHash
+  } = transactionHandling;
+  useEffect(() => {
+    if (paymentData && selectedToken && selectedNetwork && activeTab === PAYMENT_TABS.QR) {
+      generateQRCode();
+    }
+  }, [paymentData, selectedToken, selectedNetwork, activeTab]);
+  const generateQRCode = async () => {
+    if (!paymentData) return;
+    try {
+      const paymentUrl = `https://payment.coinley.io/?paymentId=${paymentData.id}&amount=${paymentData.totalAmount || paymentData.amount}&token=${selectedToken == null ? void 0 : selectedToken.symbol}&network=${selectedNetwork == null ? void 0 : selectedNetwork.shortName}`;
+      const dataUrl = await QRCode.toDataURL(paymentUrl, {
+        width: 200,
+        margin: 2,
+        color: {
+          dark: "#000000",
+          light: "#ffffff"
+        }
+      });
+      setQrCodeDataUrl(dataUrl);
+    } catch (err) {
+      console.error("Error generating QR code:", err);
+    }
+  };
+  useEffect(() => {
+    if (currentStep === PAYMENT_STEPS.SUCCESS && typeof window !== "undefined" && window.sessionStorage) {
+      sessionStorage.removeItem("coinley_mobile_payment_started");
+    }
+  }, [currentStep]);
+  useEffect(() => {
+    if (isOpen) {
+      loadData();
+      resetState();
+      sdkAnalytics.trackModalOpened(config == null ? void 0 : config.merchantName, config == null ? void 0 : config.amount);
+      const scrollY = window.scrollY;
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.width = "100%";
+      document.body.style.overflow = "hidden";
+    } else {
+      const scrollY = document.body.style.top;
+      document.body.style.position = "";
+      document.body.style.top = "";
+      document.body.style.width = "";
+      document.body.style.overflow = "";
+      window.scrollTo(0, parseInt(scrollY || "0") * -1);
+    }
+    return () => {
+      if (isOpen) {
+        const scrollY = document.body.style.top;
+        document.body.style.position = "";
+        document.body.style.top = "";
+        document.body.style.width = "";
+        document.body.style.overflow = "";
+        window.scrollTo(0, parseInt(scrollY || "0") * -1);
+      }
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    if (transactionStep === "processing" || transactionStep === "approve" || transactionStep === "splitPayment") {
+      const timeout = setTimeout(() => {
+        setError("Transaction timed out. Please try again.");
+        setCurrentStep(PAYMENT_STEPS.CONFIRM);
+        transactionHandling.resetTransaction();
+      }, 12e4);
+      return () => clearTimeout(timeout);
+    }
+  }, [transactionStep]);
+  useEffect(() => {
+    if (currentStep !== PAYMENT_STEPS.PROCESSING || paymentType !== PAYMENT_TYPES.DEPOSIT || !(paymentData == null ? void 0 : paymentData.id)) {
+      return;
+    }
+    const pollInterval = setInterval(async () => {
+      try {
+        const statusResult = await paymentFlow.api.getDepositStatus(paymentData.id);
+        if (statusResult.success && statusResult.payment) {
+          const status = statusResult.payment.status;
+          const txHash = statusResult.payment.depositTxHash || statusResult.payment.sweepTxHash || statusResult.payment.transactionHash;
+          if ((status === "completed" || status === "swept") && txHash) {
+            clearInterval(pollInterval);
+            setCurrentStep(PAYMENT_STEPS.SUCCESS);
+            if (onSuccess) {
+              onSuccess({
+                paymentId: paymentData.id,
+                transactionHash: txHash,
+                depositAddress: statusResult.payment.depositAddress,
+                network: selectedNetwork == null ? void 0 : selectedNetwork.shortName,
+                currency: selectedToken == null ? void 0 : selectedToken.symbol,
+                paymentDetails: statusResult.payment
+              });
+            }
+          } else if (status === "failed" || status === "sweep_failed") {
+            clearInterval(pollInterval);
+            setError("Payment failed. Please try again.");
+            setCurrentStep(PAYMENT_STEPS.CONFIRM);
+          }
+        }
+      } catch (error2) {
+        console.warn("[DepositPolling] Error checking status:", error2.message);
+      }
+    }, 5e3);
+    return () => clearInterval(pollInterval);
+  }, [currentStep, paymentType, paymentData == null ? void 0 : paymentData.id, selectedNetwork, selectedToken, onSuccess]);
+  const resetAllTransactionState = () => {
+    var _a2;
+    transactionHandling.resetTransaction();
+    (_a2 = solanaTransaction.resetTransaction) == null ? void 0 : _a2.call(solanaTransaction);
+    resetWalletState == null ? void 0 : resetWalletState();
+    setError("");
+    setVerifyingPayment(false);
+    setMobilePaymentStarted(false);
+    if (typeof window !== "undefined" && window.sessionStorage) {
+      sessionStorage.removeItem("coinley_mobile_payment_started");
+    }
+    if (typeof window !== "undefined") {
+      window.coinleyPendingSplitPayment = null;
+    }
+  };
+  const handleCancel = async () => {
+    sdkAnalytics.trackModalClosed("user_cancelled");
+    resetAllTransactionState();
+    await failPayment();
+    onClose();
+  };
+  const handleConnect = async (connector) => {
+    await connectWallet(connector, selectedNetwork);
+  };
+  const filteredNetworks = useMemo(() => {
+    if (!networkSearch) return networks;
+    const search = networkSearch.toLowerCase();
+    return networks.filter(
+      (n2) => {
+        var _a2;
+        return n2.name.toLowerCase().includes(search) || ((_a2 = n2.shortName) == null ? void 0 : _a2.toLowerCase().includes(search));
+      }
+    );
+  }, [networks, networkSearch]);
+  const availableTokens = useMemo(() => {
+    if (!selectedNetwork) return [];
+    return tokens.filter(
+      (token) => {
+        var _a2;
+        return ((_a2 = token.Network) == null ? void 0 : _a2.shortName) === (selectedNetwork == null ? void 0 : selectedNetwork.shortName) || token.networkId === (selectedNetwork == null ? void 0 : selectedNetwork.id);
+      }
+    );
+  }, [tokens, selectedNetwork]);
+  const handleNetworkSelect = (network) => {
+    resetAllTransactionState();
+    setSelectedNetwork(network);
+    setSelectedToken(null);
+    sdkAnalytics.trackNetworkSelected(network == null ? void 0 : network.name, config == null ? void 0 : config.merchantName);
+  };
+  const handleTokenSelect = (token) => {
+    setSelectedToken(token);
+    sdkAnalytics.trackTokenSelected(token == null ? void 0 : token.symbol, selectedNetwork == null ? void 0 : selectedNetwork.name, config == null ? void 0 : config.merchantName);
+  };
+  const handleConnectWallet = async () => {
+    if (!selectedNetwork || !selectedToken) return;
+    if (!paymentData) {
+      await createPayment(config);
+    }
+    setShowWalletConfirm(true);
+  };
+  const handleBackFromWalletConfirm = () => {
+    setShowWalletConfirm(false);
+    resetAllTransactionState();
+  };
+  const executePayment = async () => {
+    if (isSolana) {
+      if (!solanaWallet.publicKey || !solanaWallet.connectedWallet) {
+        setError("Please connect your Solana wallet first");
+        return;
+      }
+      try {
+        setCurrentStep(PAYMENT_STEPS.PROCESSING);
+        const result2 = await solanaTransaction.executeSplitPayment(
+          paymentData,
+          selectedToken,
+          selectedNetwork
+        );
+        if (result2.success) {
+          const finalResult = await paymentFlow.api.processPayment(
+            paymentData.id,
+            result2.signature,
+            solanaWallet.publicKey
+          );
+          if (finalResult.success) {
+            setCurrentStep(PAYMENT_STEPS.SUCCESS);
+            if (onSuccess) {
+              onSuccess({
+                paymentId: paymentData.id,
+                transactionHash: result2.signature,
+                senderAddress: solanaWallet.publicKey,
+                network: selectedNetwork == null ? void 0 : selectedNetwork.shortName,
+                currency: selectedToken == null ? void 0 : selectedToken.symbol
+              });
+            }
+          } else {
+            throw new Error(finalResult.message || "Failed to process payment");
+          }
+        } else {
+          throw new Error(result2.error || "Transaction failed");
+        }
+      } catch (err) {
+        setError(err.message || "Transaction failed");
+        setCurrentStep(PAYMENT_STEPS.CONFIRM);
+      }
+    } else {
+      if (!connectedWallet || !address) {
+        setError("Please connect your wallet first");
+        return;
+      }
+      try {
+        setCurrentStep(PAYMENT_STEPS.PROCESSING);
+        const result2 = await executePaymentTransaction();
+        if ((result2 == null ? void 0 : result2.success) && (result2 == null ? void 0 : result2.transactionHash)) {
+          setCurrentStep(PAYMENT_STEPS.SUCCESS);
+          if (onSuccess) {
+            onSuccess({
+              paymentId: paymentData.id,
+              transactionHash: result2.transactionHash,
+              senderAddress: address,
+              network: selectedNetwork == null ? void 0 : selectedNetwork.shortName,
+              currency: selectedToken == null ? void 0 : selectedToken.symbol
+            });
+          }
+        } else if (result2 == null ? void 0 : result2.error) {
+          throw new Error(result2.error);
+        }
+      } catch (err) {
+        setError(err.message || "Transaction failed");
+        setCurrentStep(PAYMENT_STEPS.CONFIRM);
+      }
+    }
+  };
+  const handlePaymentConfirmation = async () => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    if (!(paymentData == null ? void 0 : paymentData.id)) {
+      setError("Payment ID not found. Please refresh and try again.");
+      return;
+    }
+    try {
+      setVerifyingPayment(true);
+      setCurrentStep(PAYMENT_STEPS.PROCESSING);
+      setError("");
+      const statusResult = await paymentFlow.api.checkPaymentStatus(paymentData.id);
+      const isPaymentSuccess = ((_a2 = statusResult.payment) == null ? void 0 : _a2.status) === "completed" || ((_b = statusResult.payment) == null ? void 0 : _b.status) === "swept";
+      const txHash = ((_c = statusResult.payment) == null ? void 0 : _c.transactionHash) || ((_d = statusResult.payment) == null ? void 0 : _d.sweepTxHash) || ((_e = statusResult.payment) == null ? void 0 : _e.depositTxHash);
+      if (isPaymentSuccess && txHash) {
+        setCurrentStep(PAYMENT_STEPS.SUCCESS);
+        if (onSuccess) {
+          onSuccess({
+            paymentId: paymentData.id,
+            transactionHash: txHash,
+            senderAddress: statusResult.payment.senderWalletAddress || statusResult.payment.fromAddress,
+            network: selectedNetwork == null ? void 0 : selectedNetwork.shortName,
+            currency: selectedToken == null ? void 0 : selectedToken.symbol,
+            paymentDetails: statusResult.payment
+          });
+        }
+      } else if (((_f = statusResult.payment) == null ? void 0 : _f.status) === "pending") {
+        const verificationResult = await paymentFlow.api.verifyQRPayment(paymentData.id);
+        const verifyTxHash = ((_g = verificationResult.onChainData) == null ? void 0 : _g.transactionHash) || ((_h = verificationResult.payment) == null ? void 0 : _h.transactionHash);
+        if (verificationResult.success && verificationResult.verified && verifyTxHash) {
+          setCurrentStep(PAYMENT_STEPS.SUCCESS);
+          if (onSuccess) {
+            onSuccess({
+              paymentId: paymentData.id,
+              transactionHash: verifyTxHash,
+              senderAddress: ((_i = verificationResult.onChainData) == null ? void 0 : _i.from) || ((_j = verificationResult.payment) == null ? void 0 : _j.senderWalletAddress),
+              network: selectedNetwork == null ? void 0 : selectedNetwork.shortName,
+              currency: selectedToken == null ? void 0 : selectedToken.symbol,
+              paymentDetails: verificationResult.payment
+            });
+          }
+        } else {
+          const message = verificationResult.message || "Payment not yet confirmed on blockchain";
+          setError(`${message}. Please complete the payment and try again.`);
+          setCurrentStep(PAYMENT_STEPS.CONFIRM);
+        }
+      } else {
+        setError("Payment not found or failed. Please try again.");
+        setCurrentStep(PAYMENT_STEPS.CONFIRM);
+      }
+    } catch (error2) {
+      setError(`Verification failed: ${error2.message}. Please try again.`);
+      setCurrentStep(PAYMENT_STEPS.CONFIRM);
+    } finally {
+      setVerifyingPayment(false);
+    }
+  };
+  const copyToClipboard = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  const truncateAddress = (addr) => {
+    if (!addr) return "";
+    return `${addr.slice(0, 12)}......${addr.slice(-12)}`;
+  };
+  if (!isOpen) return null;
+  if (currentStep === PAYMENT_STEPS.PROCESSING) {
+    return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50", children: [
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50", onClick: handleCancel }),
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", style: { zIndex: 51 }, children: /* @__PURE__ */ jsx("div", { className: "bg-white rounded-2xl p-8 max-w-md w-full", children: /* @__PURE__ */ jsx(
+        PaymentStatus,
+        {
+          status: "processing",
+          message: activeTab === PAYMENT_TABS.TRANSFER ? "Transfer received! Confirming on blockchain..." : isSolana ? "Processing your Solana payment..." : "Processing your payment...",
+          theme,
+          transactionHash: isSolana ? solanaTransaction.txSignature : currentTransactionHash,
+          selectedNetwork
+        }
+      ) }) })
+    ] });
+  }
+  if (currentStep === PAYMENT_STEPS.SUCCESS) {
+    return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50", children: [
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50" }),
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", style: { zIndex: 51 }, children: /* @__PURE__ */ jsx("div", { className: "bg-white rounded-2xl p-8 max-w-md w-full", children: /* @__PURE__ */ jsx(
+        PaymentStatus,
+        {
+          status: "success",
+          message: "Payment completed successfully!",
+          theme,
+          payment: paymentData,
+          transactionHash: isSolana ? solanaTransaction.txSignature || (paymentData == null ? void 0 : paymentData.transactionHash) : currentTransactionHash || (paymentData == null ? void 0 : paymentData.transactionHash),
+          selectedPaymentMethod: selectedToken,
+          selectedNetwork,
+          merchantName: (config == null ? void 0 : config.merchantName) || "Merchant",
+          onClose
+        }
+      ) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50", style: { fontFamily: FONT_FAMILY }, children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50", onClick: handleCancel }),
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", style: { zIndex: 51 }, children: /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex", children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-48 bg-gray-50 p-6 flex flex-col border-r border-gray-200", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-500 mb-4", children: "Pay With :" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setActiveTab(PAYMENT_TABS.WALLET),
+            className: `flex items-center gap-3 px-4 py-3 rounded-xl text-left transition-all mb-2 ${activeTab === PAYMENT_TABS.WALLET ? "bg-white text-[#7042D2] border-l-4 border-[#7042D2] shadow-sm" : "text-gray-400 hover:bg-gray-100"}`,
+            children: [
+              /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Wallet extension" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setActiveTab(PAYMENT_TABS.QR),
+            className: `flex items-center gap-3 px-4 py-3 rounded-xl text-left transition-all mb-2 ${activeTab === PAYMENT_TABS.QR ? "bg-white text-[#7042D2] border-l-4 border-[#7042D2] shadow-sm" : "text-gray-400 hover:bg-gray-100"}`,
+            children: [
+              /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Scan QR to pay" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setActiveTab(PAYMENT_TABS.TRANSFER),
+            className: `flex items-center gap-3 px-4 py-3 rounded-xl text-left transition-all ${activeTab === PAYMENT_TABS.TRANSFER ? "bg-white text-[#7042D2] border-l-4 border-[#7042D2] shadow-sm" : "text-gray-400 hover:bg-gray-100"}`,
+            children: [
+              /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Transfer to address" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 bg-white rounded-r-2xl p-6 overflow-y-auto", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("img", { src: logo, alt: "Coinley", className: "w-6 h-6" }),
+            /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-gray-800", children: "coinley" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleCancel,
+              className: "w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition-colors",
+              children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 rounded-xl p-4 mb-6", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mb-2", children: "Payment summary" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" }) }),
+            /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+              "Payment to: ",
+              (config == null ? void 0 : config.merchantName) || "Merchant"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: "Base amount:" }),
+              /* @__PURE__ */ jsxs("p", { className: "text-3xl font-bold text-gray-900", children: [
+                "$",
+                formatAmount((config == null ? void 0 : config.amount) || 0)
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-green-600", children: "+$0.05 Processing Fee" })
+            ] }),
+            (paymentData == null ? void 0 : paymentData.id) && /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: "Transaction Hash:" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600", children: truncateAddress(paymentData.id) })
+            ] })
+          ] })
+        ] }),
+        activeTab === PAYMENT_TABS.WALLET && !showWalletConfirm && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-1", children: "Select a network" }),
+            /* @__PURE__ */ jsxs("div", { className: "relative mb-4", children: [
+              /* @__PURE__ */ jsx("svg", { className: "absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Search Network",
+                  value: networkSearch,
+                  onChange: (e) => setNetworkSearch(e.target.value),
+                  className: "w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#7042D2] focus:border-transparent"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: filteredNetworks.map((network) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => handleNetworkSelect(network),
+                className: `flex items-center gap-3 p-4 rounded-xl border-2 transition-all ${(selectedNetwork == null ? void 0 : selectedNetwork.id) === network.id ? "border-[#7042D2] bg-purple-50" : "border-gray-100 hover:border-[#7042D2] hover:bg-purple-50"}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: getNetworkLogoUrl(network),
+                      alt: network.name,
+                      className: "w-10 h-10 rounded-full",
+                      onError: (e) => {
+                        e.target.src = `https://ui-avatars.com/api/?name=${network.shortName}&background=7042D2&color=fff`;
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+                    /* @__PURE__ */ jsx("p", { className: "font-semibold text-gray-900", children: network.name }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: "Blockchain network" })
+                  ] })
+                ]
+              },
+              network.id
+            )) })
+          ] }),
+          selectedNetwork && availableTokens.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-1", children: "Choose a token" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400 mb-4", children: "Select an option from these available tokens" }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: availableTokens.map((token) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => handleTokenSelect(token),
+                className: `flex items-center gap-3 p-4 rounded-xl border-2 transition-all ${(selectedToken == null ? void 0 : selectedToken.id) === token.id ? "border-[#7042D2] bg-purple-50" : "border-gray-100 hover:border-[#7042D2] hover:bg-purple-50"}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: getTokenLogoUrl(token.symbol),
+                      alt: token.symbol,
+                      className: "w-10 h-10 rounded-full",
+                      onError: (e) => {
+                        e.target.src = `https://ui-avatars.com/api/?name=${token.symbol}&background=7042D2&color=fff`;
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("p", { className: "font-semibold text-gray-900", children: token.name || token.symbol }),
+                      token.isStablecoin && /* @__PURE__ */ jsxs("span", { className: "text-xs text-green-600 flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 bg-green-500 rounded-full" }),
+                        "Stable coin"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: truncateAddress(token.contractAddress || token.address) })
+                  ] })
+                ]
+              },
+              token.id
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mt-6", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleCancel,
+                className: "px-8 py-3 border-2 border-[#7042D2] text-[#7042D2] rounded-xl font-semibold hover:bg-purple-50 transition-colors",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleConnectWallet,
+                disabled: !selectedNetwork || !selectedToken || loading,
+                className: "flex-1 py-3 bg-[#7042D2] text-white rounded-xl font-semibold hover:bg-[#5b34b1] disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                children: loading ? "Creating Payment..." : "Connect my Wallet"
+              }
+            )
+          ] })
+        ] }),
+        activeTab === PAYMENT_TABS.WALLET && showWalletConfirm && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: "Confirm Payment" }),
+            /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-xl p-4 mb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: getNetworkLogoUrl(selectedNetwork),
+                    alt: selectedNetwork == null ? void 0 : selectedNetwork.name,
+                    className: "w-8 h-8 rounded-full",
+                    onError: (e) => {
+                      e.target.src = `https://ui-avatars.com/api/?name=${selectedNetwork == null ? void 0 : selectedNetwork.shortName}&background=7042D2&color=fff`;
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: selectedNetwork == null ? void 0 : selectedNetwork.name })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "•" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: getTokenLogoUrl(selectedToken == null ? void 0 : selectedToken.symbol),
+                    alt: selectedToken == null ? void 0 : selectedToken.symbol,
+                    className: "w-8 h-8 rounded-full",
+                    onError: (e) => {
+                      e.target.src = `https://ui-avatars.com/api/?name=${selectedToken == null ? void 0 : selectedToken.symbol}&background=7042D2&color=fff`;
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: selectedToken == null ? void 0 : selectedToken.symbol })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 rounded-xl p-4 space-y-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "Product Amount" }),
+                /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+                  "$",
+                  formatAmount((paymentData == null ? void 0 : paymentData.productAmount) || (config == null ? void 0 : config.amount) || 0)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "Processing Fee" }),
+                /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+                  "+$",
+                  formatAmount((paymentData == null ? void 0 : paymentData.platformFee) || 0)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "Network Fee" }),
+                /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+                  "+$",
+                  formatAmount((paymentData == null ? void 0 : paymentData.networkFee) || 0)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200 pt-3 flex justify-between", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Total" }),
+                /* @__PURE__ */ jsxs("span", { className: "font-bold text-lg", children: [
+                  formatAmount((paymentData == null ? void 0 : paymentData.totalAmount) || (config == null ? void 0 : config.amount) || 0),
+                  " ",
+                  selectedToken == null ? void 0 : selectedToken.symbol
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
+            WalletSelector,
+            {
+              selectedNetwork,
+              onWalletSelect: handleWalletSelection,
+              onConnect: handleConnect,
+              connectedWallet: isSolana ? solanaWallet.connectedWallet : connectedWallet,
+              loading,
+              paymentData,
+              selectedToken,
+              api: paymentFlow.api,
+              solanaWallet,
+              onSolanaConnect: async ({ walletType, publicKey: publicKey22, wallet }) => {
+                console.log("Solana wallet connected:", walletType, publicKey22);
+              }
+            }
+          ) }),
+          (connectedWallet || solanaWallet.connectedWallet) && /* @__PURE__ */ jsx("div", { className: "bg-green-50 border border-green-200 rounded-xl p-4 mb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-green-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "font-medium text-green-800", children: "Wallet Connected" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-green-600", children: truncateAddress(isSolana ? solanaWallet.publicKey : address) })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mt-6", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleBackFromWalletConfirm,
+                className: "px-8 py-3 border-2 border-[#7042D2] text-[#7042D2] rounded-xl font-semibold hover:bg-purple-50 transition-colors",
+                children: "Back"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: executePayment,
+                disabled: !(connectedWallet || solanaWallet.connectedWallet) || loading,
+                className: "flex-1 py-3 bg-[#7042D2] text-white rounded-xl font-semibold hover:bg-[#5b34b1] disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                children: loading ? "Processing..." : `Pay ${formatAmount((paymentData == null ? void 0 : paymentData.totalAmount) || (config == null ? void 0 : config.amount) || 0)} ${selectedToken == null ? void 0 : selectedToken.symbol}`
+              }
+            )
+          ] })
+        ] }),
+        activeTab === PAYMENT_TABS.QR && /* @__PURE__ */ jsxs(Fragment, { children: [
+          (!selectedNetwork || !selectedToken) && /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 mx-auto text-gray-300", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" }) }) }),
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Generate QR Code" }),
+            /* @__PURE__ */ jsx("p", { className: "text-gray-500 mb-6", children: "Please select a network and token to generate your payment QR code" }),
+            /* @__PURE__ */ jsxs("div", { className: "text-left max-w-md mx-auto", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Network" }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: networks.slice(0, 4).map((network) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => handleNetworkSelect(network),
+                    className: `flex items-center gap-2 p-3 rounded-xl border-2 transition-all ${(selectedNetwork == null ? void 0 : selectedNetwork.id) === network.id ? "border-[#7042D2] bg-purple-50" : "border-gray-100 hover:border-[#7042D2]"}`,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: getNetworkLogoUrl(network),
+                          alt: network.name,
+                          className: "w-6 h-6 rounded-full",
+                          onError: (e) => {
+                            e.target.src = `https://ui-avatars.com/api/?name=${network.shortName}&background=7042D2&color=fff`;
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: network.name })
+                    ]
+                  },
+                  network.id
+                )) })
+              ] }),
+              selectedNetwork && availableTokens.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Token" }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: availableTokens.map((token) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: async () => {
+                      handleTokenSelect(token);
+                      if (!paymentData) {
+                        await createPayment(config);
+                      }
+                    },
+                    className: `flex items-center gap-2 p-3 rounded-xl border-2 transition-all ${(selectedToken == null ? void 0 : selectedToken.id) === token.id ? "border-[#7042D2] bg-purple-50" : "border-gray-100 hover:border-[#7042D2]"}`,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: getTokenLogoUrl(token.symbol),
+                          alt: token.symbol,
+                          className: "w-6 h-6 rounded-full",
+                          onError: (e) => {
+                            e.target.src = `https://ui-avatars.com/api/?name=${token.symbol}&background=7042D2&color=fff`;
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: token.symbol })
+                    ]
+                  },
+                  token.id
+                )) })
+              ] })
+            ] })
+          ] }),
+          selectedNetwork && selectedToken && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-6 mb-6", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: qrCodeDataUrl ? /* @__PURE__ */ jsx("img", { src: qrCodeDataUrl, alt: "Payment QR Code", className: "w-40 h-40" }) : /* @__PURE__ */ jsx("div", { className: "w-40 h-40 bg-gray-100 rounded-lg flex items-center justify-center animate-pulse", children: /* @__PURE__ */ jsx("span", { className: "text-gray-400 text-sm", children: "Generating..." }) }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx("h3", { className: "font-semibold mb-3", children: "Instructions" }),
+                /* @__PURE__ */ jsxs("ol", { className: "text-sm text-gray-600 space-y-2", children: [
+                  /* @__PURE__ */ jsx("li", { children: "1. Open your crypto wallet app (metamask, trust wallet etc)" }),
+                  /* @__PURE__ */ jsx("li", { children: "2. Scan the QR code above" }),
+                  /* @__PURE__ */ jsxs("li", { children: [
+                    "3. Confirm the payment amount (",
+                    formatAmount((paymentData == null ? void 0 : paymentData.totalAmount) || (config == null ? void 0 : config.amount)),
+                    " ",
+                    selectedToken == null ? void 0 : selectedToken.symbol,
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsx("li", { children: `4. Click "I've paid" button below after sending the payment` })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between py-3 border-t border-gray-100", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "Currency" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: selectedToken == null ? void 0 : selectedToken.symbol })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between py-3 border-t border-gray-100", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "Network" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: selectedNetwork == null ? void 0 : selectedNetwork.name })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "bg-purple-50 border border-purple-200 rounded-xl p-4 mt-4 flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-[#7042D2] flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+              /* @__PURE__ */ jsxs("p", { className: "text-sm text-[#7042D2]", children: [
+                "Make sure you're sending on the correct network (",
+                selectedNetwork == null ? void 0 : selectedNetwork.name,
+                ") and using the exact amount shown above."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mt-6", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    if (qrCodeDataUrl) {
+                      const link = document.createElement("a");
+                      link.download = `coinley-payment-${(paymentData == null ? void 0 : paymentData.id) || "qr"}.png`;
+                      link.href = qrCodeDataUrl;
+                      link.click();
+                    }
+                  },
+                  className: "px-6 py-3 border-2 border-[#7042D2] text-[#7042D2] rounded-xl font-semibold hover:bg-purple-50 transition-colors flex items-center gap-2",
+                  children: [
+                    /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" }) }),
+                    "Download QR"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handlePaymentConfirmation,
+                  disabled: !paymentData || verifyingPayment,
+                  className: "flex-1 py-3 bg-[#7042D2] text-white rounded-xl font-semibold hover:bg-[#5b34b1] disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                  children: verifyingPayment ? "Verifying..." : "I've made the payment"
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        activeTab === PAYMENT_TABS.TRANSFER && /* @__PURE__ */ jsxs(Fragment, { children: [
+          (!selectedNetwork || !selectedToken || !(paymentData == null ? void 0 : paymentData.depositAddress)) && /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 mx-auto text-gray-300", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" }) }) }),
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Transfer to Address" }),
+            /* @__PURE__ */ jsx("p", { className: "text-gray-500 mb-6", children: "Select a network and token to get the payment address" }),
+            /* @__PURE__ */ jsxs("div", { className: "text-left max-w-md mx-auto", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Network" }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: networks.slice(0, 4).map((network) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => handleNetworkSelect(network),
+                    className: `flex items-center gap-2 p-3 rounded-xl border-2 transition-all ${(selectedNetwork == null ? void 0 : selectedNetwork.id) === network.id ? "border-[#7042D2] bg-purple-50" : "border-gray-100 hover:border-[#7042D2]"}`,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: getNetworkLogoUrl(network),
+                          alt: network.name,
+                          className: "w-6 h-6 rounded-full",
+                          onError: (e) => {
+                            e.target.src = `https://ui-avatars.com/api/?name=${network.shortName}&background=7042D2&color=fff`;
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: network.name })
+                    ]
+                  },
+                  network.id
+                )) })
+              ] }),
+              selectedNetwork && availableTokens.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Token" }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: availableTokens.map((token) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => handleTokenSelect(token),
+                    className: `flex items-center gap-2 p-3 rounded-xl border-2 transition-all ${(selectedToken == null ? void 0 : selectedToken.id) === token.id ? "border-[#7042D2] bg-purple-50" : "border-gray-100 hover:border-[#7042D2]"}`,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: getTokenLogoUrl(token.symbol),
+                          alt: token.symbol,
+                          className: "w-6 h-6 rounded-full",
+                          onError: (e) => {
+                            e.target.src = `https://ui-avatars.com/api/?name=${token.symbol}&background=7042D2&color=fff`;
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: token.symbol })
+                    ]
+                  },
+                  token.id
+                )) })
+              ] }),
+              selectedNetwork && selectedToken && !(paymentData == null ? void 0 : paymentData.depositAddress) && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: async () => {
+                    try {
+                      await createDepositPayment(config);
+                    } catch (err) {
+                    }
+                  },
+                  disabled: loading,
+                  className: "w-full py-3 bg-[#7042D2] text-white rounded-xl font-semibold hover:bg-[#5b34b1] disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                  children: loading ? "Generating Address..." : "Generate Transfer Address"
+                }
+              )
+            ] })
+          ] }),
+          selectedNetwork && selectedToken && (paymentData == null ? void 0 : paymentData.depositAddress) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-700 mb-2", children: "Wallet Address" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-4 bg-gray-50 rounded-xl border border-gray-200", children: [
+                /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm font-mono text-gray-700 break-all", children: paymentData.depositAddress }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => copyToClipboard(paymentData.depositAddress),
+                    className: "p-2 hover:bg-gray-200 rounded-lg transition-colors flex-shrink-0",
+                    children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-400 mt-2 flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+                "Double-check before sending. Transactions cannot be reversed."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-700 mb-2", children: "Amount" }),
+              /* @__PURE__ */ jsx("div", { className: "p-4 bg-gray-50 rounded-xl border border-gray-200", children: /* @__PURE__ */ jsxs("span", { className: "text-lg font-semibold", children: [
+                formatAmount((paymentData == null ? void 0 : paymentData.totalAmount) || (config == null ? void 0 : config.amount)),
+                " ",
+                selectedToken == null ? void 0 : selectedToken.symbol
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-700 mb-2", children: "Network Fee" }),
+              /* @__PURE__ */ jsx("div", { className: "p-4 bg-gray-50 rounded-xl border border-gray-200", children: /* @__PURE__ */ jsxs("span", { className: "text-lg font-semibold", children: [
+                "$",
+                formatAmount((paymentData == null ? void 0 : paymentData.networkFee) || 0.5)
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "bg-orange-50 border border-orange-200 rounded-xl p-4 flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-orange-500 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" }) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("p", { className: "font-semibold text-orange-700", children: [
+                  "Send ",
+                  selectedToken == null ? void 0 : selectedToken.symbol,
+                  " on ",
+                  selectedNetwork == null ? void 0 : selectedNetwork.name,
+                  " network"
+                ] }),
+                /* @__PURE__ */ jsxs("p", { className: "text-sm text-orange-600", children: [
+                  "Use the ",
+                  selectedNetwork == null ? void 0 : selectedNetwork.name,
+                  " network to send your ",
+                  selectedToken == null ? void 0 : selectedToken.symbol,
+                  " quickly and securely with lower transaction fees."
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mt-6", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    resetAllTransactionState();
+                    setActiveTab(PAYMENT_TABS.WALLET);
+                  },
+                  className: "px-8 py-3 border-2 border-[#7042D2] text-[#7042D2] rounded-xl font-semibold hover:bg-purple-50 transition-colors",
+                  children: "Go Back"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handlePaymentConfirmation,
+                  disabled: verifyingPayment,
+                  className: "flex-1 py-3 bg-[#7042D2] text-white rounded-xl font-semibold hover:bg-[#5b34b1] disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                  children: verifyingPayment ? "Verifying..." : "I've made the payment"
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        (error || transactionError) && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-4 bg-red-50 border border-red-200 rounded-xl", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-red-800 text-sm", children: error || transactionError }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                var _a2;
+                setError("");
+                (_a2 = transactionHandling.setTransactionError) == null ? void 0 : _a2.call(transactionHandling, "");
+              },
+              className: "mt-2 text-red-600 hover:text-red-800 text-xs underline",
+              children: "Dismiss"
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+};
+const RedesignedCoinleyPayment = (props) => {
+  return /* @__PURE__ */ jsx(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(RedesignedCoinleyPaymentInternal, { ...props }) }) });
+};
 const NETWORK_CHAINS = {
   ethereum: mainnet,
   bsc,
@@ -48366,6 +49388,7 @@ export {
   PaymentAPI,
   PaymentQRGenerator,
   QRCodePayment,
+  RedesignedCoinleyPayment,
   SimpleCoinleyProvider,
   ThemeProvider,
   USAGE_EXAMPLES,