coinley-checkout 0.6.1 → 0.6.3

package/dist/coinley-checkout.es.js

@@ -20596,10 +20596,37 @@ const PaymentStatus = ({
   transactionHash = null,
   selectedPaymentMethod = null,
   merchantName = "Merchant",
-  onClose = null
+  onClose = null,
   // The onClose prop for the close button
+  // New props for enhanced processing feedback
+  processingStartTime = null,
+  // Time when processing started
+  paymentNetwork = null
+  // Current payment network
 }) => {
   const [copiedHash, setCopiedHash] = useState(false);
+  const [processingSeconds, setProcessingSeconds] = useState(0);
+  const [showEarlySuccessOption, setShowEarlySuccessOption] = useState(false);
+  const [progressStage, setProgressStage] = useState(1);
+  useEffect(() => {
+    let timer;
+    if (status === "processing" && processingStartTime) {
+      timer = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - processingStartTime) / 1e3);
+        setProcessingSeconds(elapsed);
+        if (elapsed >= 5 && progressStage === 1) {
+          setProgressStage(2);
+        }
+        if (elapsed >= 15 && progressStage === 2) {
+          setProgressStage(3);
+        }
+        if (elapsed >= 30 && !showEarlySuccessOption) {
+          setShowEarlySuccessOption(true);
+        }
+      }, 1e3);
+    }
+    return () => clearInterval(timer);
+  }, [status, processingStartTime, progressStage, showEarlySuccessOption]);
   const copyTransactionHash = () => __async(void 0, null, function* () {
     if (transactionHash) {
       try {
@@ -20617,6 +20644,11 @@ const PaymentStatus = ({
       onClose();
     }
   };
+  const handleEarlySuccess = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
   const formatTransactionHash = (hash2) => {
     if (!hash2)
       return "";
@@ -20633,6 +20665,16 @@ const PaymentStatus = ({
     };
     return names2[network] || network;
   };
+  const getEstimatedConfirmationTime = (network) => {
+    const times = {
+      ethereum: "1-2 minutes",
+      bsc: "15-30 seconds",
+      tron: "30-60 seconds",
+      algorand: "5-10 seconds",
+      solana: "10-15 seconds"
+    };
+    return times[network] || "1-2 minutes";
+  };
   const formatRecipientAddress = (address) => {
     if (!address)
       return "N/A";
@@ -20640,6 +20682,11 @@ const PaymentStatus = ({
       return address;
     return `${address.slice(0, 6)}...${address.slice(-4)}`;
   };
+  const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs < 10 ? "0" : ""}${secs}`;
+  };
   const renderIcon = () => {
     switch (status) {
       case "processing":
@@ -20701,12 +20748,14 @@ const PaymentStatus = ({
   if (status === "success") {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-6", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-6", children: renderIcon() }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-2xl font-bold mb-3 ${theme2 === "dark" ? "text-white" : "text-gray-900"}`, children: "Payment Successful" }),
-      payment && selectedPaymentMethod && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: `text-center mb-6 ${theme2 === "dark" ? "text-gray-300" : "text-gray-600"}`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-2xl font-bold mb-3 ${theme2 === "dark" ? "text-white" : "text-gray-900"}`, children: "Payment Successful!" }),
+      payment && selectedPaymentMethod && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: `text-center max-w-[235px] mb-6 ${theme2 === "dark" ? "text-gray-300" : "text-gray-600"}`, children: [
         "Your payment of ",
-        payment.totalAmount || payment.amount,
-        " ",
-        selectedPaymentMethod.currency,
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[#7042D2] font-semibold", children: [
+          payment.totalAmount || payment.amount,
+          " ",
+          selectedPaymentMethod.currency
+        ] }),
         " has been completed."
       ] }),
       transactionHash && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full mb-6", children: [
@@ -20761,12 +20810,66 @@ const PaymentStatus = ({
       )
     ] });
   }
+  if (status === "processing") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: renderIcon() }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-xl font-bold mb-2 ${theme2 === "dark" ? "text-white" : "text-gray-900"}`, children: getStatusTitle() }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-center ${getMessageClasses()}`, children: message }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full mt-6 mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full bg-gray-200 rounded-full h-2.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "bg-blue-600 h-2.5 rounded-full transition-all duration-500",
+          style: {
+            width: `${Math.min(100, progressStage / 3 * 100)}%`
+          }
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full grid grid-cols-3 gap-1 mb-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs text-center ${progressStage >= 1 ? "text-blue-600 font-medium" : "text-gray-400"}`, children: "Submitted" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs text-center ${progressStage >= 2 ? "text-blue-600 font-medium" : "text-gray-400"}`, children: "Detected" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs text-center ${progressStage >= 3 ? "text-blue-600 font-medium" : "text-gray-400"}`, children: "Confirming" })
+      ] }),
+      transactionHash && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full my-3 px-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-center text-gray-600 mb-2", children: "Transaction ID:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gray-50 border border-gray-200 rounded-md p-2 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-mono text-gray-700", children: formatTransactionHash(transactionHash) }) })
+      ] }),
+      paymentNetwork && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full mt-4 mb-2 p-3 bg-blue-50 rounded-md text-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-blue-800", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Estimated confirmation time:" }),
+          " ",
+          getEstimatedConfirmationTime(paymentNetwork)
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-blue-600 mt-1", children: [
+          "Processing time: ",
+          formatTime(processingSeconds)
+        ] })
+      ] }),
+      showEarlySuccessOption && onClose && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full mt-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-2 p-3 bg-yellow-50 rounded-md", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-center text-yellow-800", children: "Taking longer than expected? Your payment may already be complete. You can proceed now or continue waiting for confirmation." }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: handleEarlySuccess,
+            className: "w-full py-2 px-4 bg-gray-200 text-purple-600 font-medium rounded-md hover:bg-gray-300 transition-colors",
+            children: "Continue to Order Confirmation"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mt-4 text-xs ${theme2 === "dark" ? "text-gray-400" : "text-gray-500"}`, children: "Blockchain transactions can take a few moments to confirm. Please wait..." })
+    ] });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: renderIcon() }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-xl font-bold mb-2 ${theme2 === "dark" ? "text-white" : "text-gray-900"}`, children: "Payment Failed" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-center ${getMessageClasses()}`, children: message }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mt-4 p-2 rounded ${theme2 === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs ${theme2 === "dark" ? "text-gray-300" : "text-gray-600"}`, children: "Please try again or contact support if the problem persists." }) })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-6", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: renderIcon() }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-xl font-bold mb-2 ${theme2 === "dark" ? "text-white" : "text-gray-900"}`, children: getStatusTitle() }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-center ${getMessageClasses()}`, children: message }),
-    status === "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mt-4 text-xs ${theme2 === "dark" ? "text-gray-400" : "text-gray-500"}`, children: "This may take a few moments. Please do not close this window." }),
-    status === "error" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mt-4 p-2 rounded ${theme2 === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs ${theme2 === "dark" ? "text-gray-300" : "text-gray-600"}`, children: "Please try again or contact support if the problem persists." }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-center ${getMessageClasses()}`, children: message })
   ] });
 };
 const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supportedNetworks = [] }) => {
@@ -21142,7 +21245,12 @@ const CoinleyModal = ({
   supportedWallets = [],
   step = "select-currency",
   merchantWalletAddresses = {},
-  debug = false
+  debug = false,
+  // New props for enhanced processing feedback
+  processingStartTime = null,
+  transactionDetected = false,
+  paymentNetwork = null,
+  onEarlySuccess = null
 }) => {
   const [paymentType, setPaymentType] = useState("wallet");
   const getWalletAddressForNetwork = () => {
@@ -21163,6 +21271,12 @@ const CoinleyModal = ({
       onClose();
     }
   };
+  const handleEarlySuccess = () => {
+    console.log("Early success button clicked");
+    if (onEarlySuccess) {
+      onEarlySuccess();
+    }
+  };
   const formatAmount = (amount) => {
     return parseFloat(amount).toFixed(2);
   };
@@ -21198,7 +21312,7 @@ const CoinleyModal = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-h-screen items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: "coinley-modal relative p-6 max-w-[490px] mx-auto rounded-3xl shadow-xl bg-gray-100",
+      className: "coinley-modal relative p-6 w-full max-w-[490px] mx-auto rounded-3xl shadow-xl bg-gray-100",
       style: {
         maxWidth: "490px !important",
         width: "100% !important",
@@ -21210,7 +21324,7 @@ const CoinleyModal = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: logo, className: "w-auto h-auto", alt: "Coinley Logo" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg font-semibold text-gray-800", children: "Payment Details" })
           ] }),
-          step !== "success" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          step !== "success" && step !== "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
               onClick: onClose,
@@ -21389,7 +21503,11 @@ const CoinleyModal = ({
           {
             status: "processing",
             theme: theme2,
-            message: "Processing your payment..."
+            message: transactionDetected ? "Transaction detected! Waiting for blockchain confirmation..." : "Processing your payment...",
+            processingStartTime,
+            paymentNetwork: paymentNetwork || (selectedPaymentMethod == null ? void 0 : selectedPaymentMethod.network),
+            transactionHash,
+            onEarlySuccess: handleEarlySuccess
           }
         ),
         step === "success" && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -21456,7 +21574,12 @@ const CoinleyCheckout = forwardRef(({
   testMode = false,
   supportedNetworks = [],
   preferredNetwork = NETWORK_TYPES.ETHEREUM,
-  preferredWallet = WALLET_TYPES.METAMASK
+  preferredWallet = WALLET_TYPES.METAMASK,
+  // New props for payment processing
+  confirmations = 1,
+  // Minimum confirmations required (lower = faster)
+  fastMode = false
+  // When true, will show success screen faster with fewer confirmations
 }, ref) => {
   const coinleyContext = useCoinley();
   const { theme: contextTheme } = useTheme();
@@ -21470,6 +21593,10 @@ const CoinleyCheckout = forwardRef(({
   const [availableWallets, setAvailableWallets] = useState({});
   const [step, setStep] = useState("select-currency");
   const [actualMerchantWallets, setActualMerchantWallets] = useState({});
+  const [processingStartTime, setProcessingStartTime] = useState(null);
+  const [transactionDetected, setTransactionDetected] = useState(false);
+  const [checkingInterval, setCheckingInterval] = useState(null);
+  const processingTimerRef = useRef(null);
   const effectiveApiKey = apiKey || (coinleyContext == null ? void 0 : coinleyContext.apiKey);
   const effectiveApiSecret = apiSecret || (coinleyContext == null ? void 0 : coinleyContext.apiSecret);
   apiUrl || (coinleyContext == null ? void 0 : coinleyContext.apiUrl);
@@ -21507,6 +21634,86 @@ const CoinleyCheckout = forwardRef(({
       detectWalletsAsync();
     }
   }, [effectiveDebug]);
+  useEffect(() => {
+    return () => {
+      if (processingTimerRef.current) {
+        clearTimeout(processingTimerRef.current);
+      }
+      if (checkingInterval) {
+        clearInterval(checkingInterval);
+      }
+    };
+  }, [checkingInterval]);
+  useEffect(() => {
+    if (transactionHash && paymentStatus === "loading" && step === "processing" && !checkingInterval) {
+      setTransactionDetected(true);
+      if (!testMode) {
+        const interval = setInterval(() => __async(void 0, null, function* () {
+          try {
+            const processingTime = Date.now() - processingStartTime;
+            if (fastMode && processingTime > getMinimumProcessingTime()) {
+              log("Fast mode: Moving to success state early");
+              clearInterval(interval);
+              setCheckingInterval(null);
+              handleEarlySuccess();
+              return;
+            }
+          } catch (err) {
+            log("Error checking transaction status:", err);
+          }
+        }), 5e3);
+        setCheckingInterval(interval);
+      }
+    }
+    return () => {
+      if (checkingInterval) {
+        clearInterval(checkingInterval);
+      }
+    };
+  }, [transactionHash, paymentStatus, step, testMode, processingStartTime, fastMode]);
+  const getMinimumProcessingTime = () => {
+    if (!selectedPaymentMethod)
+      return 2e4;
+    const times = {
+      [NETWORK_TYPES.ETHEREUM]: 15e3,
+      // 15 seconds for Ethereum
+      [NETWORK_TYPES.BSC]: 1e4,
+      // 10 seconds for BSC
+      [NETWORK_TYPES.TRON]: 8e3,
+      // 8 seconds for Tron
+      [NETWORK_TYPES.ALGORAND]: 5e3
+      // 5 seconds for Algorand
+    };
+    return times[selectedPaymentMethod.network] || 15e3;
+  };
+  const handleEarlySuccess = () => __async(void 0, null, function* () {
+    if (!payment || !selectedPaymentMethod || !transactionHash) {
+      return;
+    }
+    log("Moving to early success state with transaction:", transactionHash);
+    try {
+      const processResponse = yield processPayment({
+        paymentId: payment.id,
+        transactionHash,
+        network: selectedPaymentMethod.network,
+        currency: selectedPaymentMethod.currency,
+        senderAddress: walletConnection == null ? void 0 : walletConnection.address,
+        early: true
+      });
+      log("Early payment processed:", processResponse);
+      setPaymentStatus("success");
+      setStep("success");
+      if (onSuccess) {
+        onSuccess(payment.id, transactionHash, {
+          network: selectedPaymentMethod.network,
+          currency: selectedPaymentMethod.currency,
+          amount: payment.totalAmount || payment.amount
+        });
+      }
+    } catch (err) {
+      log("Early success processing error:", err);
+    }
+  });
   useImperativeHandle(ref, () => ({
     open: (paymentDetails) => {
       handleOpen(paymentDetails);
@@ -21563,11 +21770,21 @@ const CoinleyCheckout = forwardRef(({
     }
   });
   const handleClose = () => {
+    if (checkingInterval) {
+      clearInterval(checkingInterval);
+      setCheckingInterval(null);
+    }
+    if (processingTimerRef.current) {
+      clearTimeout(processingTimerRef.current);
+      processingTimerRef.current = null;
+    }
     setIsOpen(false);
     setTransactionHash(null);
     setWalletConnection(null);
     setSelectedPaymentMethod(null);
     setStep("select-currency");
+    setProcessingStartTime(null);
+    setTransactionDetected(false);
     if (onClose)
       onClose();
   };
@@ -21630,11 +21847,14 @@ const CoinleyCheckout = forwardRef(({
     setPaymentStatus("loading");
     setTransactionHash(null);
     setStep("processing");
+    setProcessingStartTime(Date.now());
+    setTransactionDetected(false);
     try {
       let txHash;
       if (testMode) {
         log("Test mode: Generating mock transaction...");
         txHash = `test_${Date.now().toString(16)}_${Math.random().toString(16).substring(2, 10)}`;
+        yield new Promise((resolve) => setTimeout(resolve, 2e3));
       } else {
         let merchantAddress;
         if (payment.recipientWallet) {
@@ -21657,24 +21877,46 @@ const CoinleyCheckout = forwardRef(({
       }
       log("Transaction hash:", txHash);
       setTransactionHash(txHash);
-      log("Processing payment with backend...");
-      const processResponse = yield processPayment({
-        paymentId: payment.id,
-        transactionHash: txHash,
-        network: selectedPaymentMethod.network,
-        currency: selectedPaymentMethod.currency,
-        senderAddress: walletConnection == null ? void 0 : walletConnection.address
-      });
-      log("Payment processed successfully:", processResponse);
-      setPaymentStatus("success");
-      setStep("success");
-      if (onSuccess) {
-        log("Calling onSuccess callback...");
-        onSuccess(payment.id, txHash, {
+      if (testMode) {
+        processingTimerRef.current = setTimeout(() => {
+          log("Test mode: Moving to success state");
+          setPaymentStatus("success");
+          setStep("success");
+          if (onSuccess) {
+            log("Calling onSuccess callback...");
+            onSuccess(payment.id, txHash, {
+              network: selectedPaymentMethod.network,
+              currency: selectedPaymentMethod.currency,
+              amount: payment.totalAmount || payment.amount
+            });
+          }
+        }, 2e3);
+        return;
+      }
+      try {
+        log("Processing payment with backend...");
+        const processResponse = yield processPayment({
+          paymentId: payment.id,
+          transactionHash: txHash,
           network: selectedPaymentMethod.network,
           currency: selectedPaymentMethod.currency,
-          amount: payment.totalAmount || payment.amount
+          senderAddress: walletConnection == null ? void 0 : walletConnection.address,
+          confirmations
+          // Use specified confirmation level
         });
+        log("Payment processed successfully:", processResponse);
+        setPaymentStatus("success");
+        setStep("success");
+        if (onSuccess) {
+          log("Calling onSuccess callback...");
+          onSuccess(payment.id, txHash, {
+            network: selectedPaymentMethod.network,
+            currency: selectedPaymentMethod.currency,
+            amount: payment.totalAmount || payment.amount
+          });
+        }
+      } catch (processError) {
+        log("Payment processing error, but transaction was sent:", processError);
       }
     } catch (err) {
       log("Payment error:", err);
@@ -21713,7 +21955,11 @@ const CoinleyCheckout = forwardRef(({
       supportedWallets: getSupportedWallets(),
       step,
       merchantWalletAddresses: actualMerchantWallets,
-      debug: effectiveDebug
+      debug: effectiveDebug,
+      processingStartTime,
+      transactionDetected,
+      paymentNetwork: selectedPaymentMethod == null ? void 0 : selectedPaymentMethod.network,
+      onEarlySuccess: handleEarlySuccess
     }
   ) });
 });