coinley-checkout 0.6.8 → 0.6.9

package/dist/coinley-checkout.es.js

@@ -20583,11 +20583,11 @@ const PaymentStatus = ({
   merchantName = "Merchant",
   onClose = null,
   // The onClose prop for the close button
-  // New props for enhanced processing feedback
+  // Processing info
   processingStartTime = null,
-  // Time when processing started
-  paymentNetwork = null
-  // Current payment network
+  paymentNetwork = null,
+  pendingBackendConfirmation = false
+  // New prop to show backend confirmation status
 }) => {
   const [copiedHash, setCopiedHash] = useState(false);
   const [processingSeconds, setProcessingSeconds] = useState(0);
@@ -20629,11 +20629,6 @@ const PaymentStatus = ({
       onClose();
     }
   };
-  const handleEarlySuccess = () => {
-    if (onClose) {
-      onClose();
-    }
-  };
   const formatTransactionHash = (hash2) => {
     if (!hash2)
       return "";
@@ -20650,16 +20645,6 @@ 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";
@@ -20667,11 +20652,6 @@ 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":
@@ -20711,7 +20691,7 @@ const PaymentStatus = ({
       case "processing":
         return "Processing Payment";
       case "success":
-        return "Payment Successful";
+        return "Payment Successful!";
       case "error":
         return "Payment Failed";
       default:
@@ -20743,6 +20723,13 @@ const PaymentStatus = ({
         ] }),
         " has been completed."
       ] }),
+      pendingBackendConfirmation && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center mb-4 text-xs text-gray-500 bg-gray-50 rounded-full px-3 py-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-3 w-3 text-gray-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+        ] }),
+        "Verifying on blockchain"
+      ] }),
       transactionHash && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full mb-6", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-medium mb-2 ${theme2 === "dark" ? "text-gray-300" : "text-gray-700"}`, children: "Transaction Hash:" }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -20795,54 +20782,6 @@ 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() }),
@@ -21247,11 +21186,10 @@ const CoinleyModal = ({
   step = "select-currency",
   merchantWalletAddresses = {},
   debug = false,
-  // New props for enhanced processing feedback
+  // Processing info
   processingStartTime = null,
-  transactionDetected = false,
-  paymentNetwork = null,
-  onEarlySuccess = null
+  pendingBackendConfirmation = false,
+  paymentNetwork = null
 }) => {
   const [paymentType, setPaymentType] = useState("wallet");
   const getWalletAddressForNetwork = () => {
@@ -21272,12 +21210,6 @@ const CoinleyModal = ({
       onClose();
     }
   };
-  const handleEarlySuccess = () => {
-    console.log("Early success button clicked");
-    if (onEarlySuccess) {
-      onEarlySuccess();
-    }
-  };
   const formatAmount = (amount) => {
     return parseFloat(amount).toFixed(2);
   };
@@ -21472,7 +21404,7 @@ const CoinleyModal = ({
             ] })
           ),
           error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 rounded-lg bg-red-50 mb-4 text-red-600 text-sm", children: error }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3 pb-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-3 mb-3", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "button",
               {
@@ -21499,11 +21431,10 @@ const CoinleyModal = ({
           {
             status: "processing",
             theme: theme2,
-            message: transactionDetected ? "Transaction detected! Waiting for blockchain confirmation..." : "Processing your payment...",
+            message: "Processing your payment...",
             processingStartTime,
             paymentNetwork: paymentNetwork || (selectedPaymentMethod == null ? void 0 : selectedPaymentMethod.network),
-            transactionHash,
-            onEarlySuccess: handleEarlySuccess
+            transactionHash
           }
         ),
         step === "success" && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -21516,7 +21447,8 @@ const CoinleyModal = ({
             transactionHash,
             selectedPaymentMethod,
             merchantName,
-            onClose: handleSuccessClose
+            onClose: handleSuccessClose,
+            pendingBackendConfirmation
           }
         ),
         step === "error" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
@@ -21571,11 +21503,10 @@ const CoinleyCheckout = forwardRef(({
   supportedNetworks = [],
   preferredNetwork = NETWORK_TYPES.ETHEREUM,
   preferredWallet = WALLET_TYPES.METAMASK,
-  // New props for payment processing
+  // Processing options
   confirmations = 1,
-  // Minimum confirmations required (lower = faster)
-  fastMode = false
-  // When true, will show success screen faster with fewer confirmations
+  fastMode = true
+  // Default to true for faster experience
 }, ref) => {
   const coinleyContext = useCoinley();
   const { theme: contextTheme } = useTheme();
@@ -21590,9 +21521,9 @@ const CoinleyCheckout = forwardRef(({
   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 [pendingBackendConfirmation, setPendingBackendConfirmation] = useState(false);
   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);
@@ -21641,73 +21572,64 @@ const CoinleyCheckout = forwardRef(({
     };
   }, [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);
+    if (transactionHash && pendingBackendConfirmation && paymentStatus === "loading") {
+      const interval = setInterval(() => __async(void 0, null, function* () {
+        try {
+          log("Checking payment status with backend...");
+          const processResponse = yield processPayment({
+            paymentId: payment.id,
+            transactionHash,
+            network: selectedPaymentMethod.network,
+            currency: selectedPaymentMethod.currency,
+            senderAddress: walletConnection == null ? void 0 : walletConnection.address,
+            confirmations,
+            check: true
+            // Just check status, don't process again
+          });
+          if (processResponse.status === "success") {
+            log("Payment confirmed by backend!");
+            clearInterval(interval);
+            setCheckingInterval(null);
+            setPendingBackendConfirmation(false);
+            setPaymentStatus("success");
           }
-        }), 5e3);
-        setCheckingInterval(interval);
-      }
+        } catch (err) {
+          log("Error checking payment status:", err);
+        }
+      }), 1e4);
+      setCheckingInterval(interval);
+      return () => {
+        clearInterval(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* () {
+  }, [transactionHash, pendingBackendConfirmation, paymentStatus, payment, selectedPaymentMethod, walletConnection, confirmations]);
+  const processBackendConfirmation = () => __async(void 0, null, function* () {
     if (!payment || !selectedPaymentMethod || !transactionHash) {
       return;
     }
-    log("Moving to early success state with transaction:", transactionHash);
     try {
+      log("Processing payment with backend...");
       const processResponse = yield processPayment({
         paymentId: payment.id,
         transactionHash,
         network: selectedPaymentMethod.network,
         currency: selectedPaymentMethod.currency,
         senderAddress: walletConnection == null ? void 0 : walletConnection.address,
-        early: true
+        confirmations
       });
-      log("Early payment processed:", processResponse);
-      setPaymentStatus("success");
-      setStep("success");
+      log("Payment processed successfully:", processResponse);
+      setPendingBackendConfirmation(false);
       if (onSuccess) {
+        log("Calling onSuccess callback...");
         onSuccess(payment.id, transactionHash, {
           network: selectedPaymentMethod.network,
           currency: selectedPaymentMethod.currency,
           amount: payment.totalAmount || payment.amount
         });
       }
-    } catch (err) {
-      log("Early success processing error:", err);
+    } catch (processError) {
+      log("Payment processing initial attempt failed, will retry in background:", processError);
+      setPendingBackendConfirmation(true);
     }
   });
   useImperativeHandle(ref, () => ({
@@ -21780,7 +21702,7 @@ const CoinleyCheckout = forwardRef(({
     setSelectedPaymentMethod(null);
     setStep("select-currency");
     setProcessingStartTime(null);
-    setTransactionDetected(false);
+    setPendingBackendConfirmation(false);
     if (onClose)
       onClose();
   };
@@ -21844,13 +21766,12 @@ const CoinleyCheckout = forwardRef(({
     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));
+        yield new Promise((resolve) => setTimeout(resolve, 1e3));
       } else {
         let merchantAddress;
         if (payment.recipientWallet) {
@@ -21871,49 +21792,10 @@ const CoinleyCheckout = forwardRef(({
           network: selectedPaymentMethod.network
         });
       }
-      log("Transaction hash:", txHash);
+      log("Transaction hash obtained:", txHash);
       setTransactionHash(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,
-          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);
-      }
+      setStep("success");
+      processBackendConfirmation();
     } catch (err) {
       log("Payment error:", err);
       setError(err.message || "Failed to process payment");
@@ -21953,9 +21835,8 @@ const CoinleyCheckout = forwardRef(({
       merchantWalletAddresses: actualMerchantWallets,
       debug: effectiveDebug,
       processingStartTime,
-      transactionDetected,
-      paymentNetwork: selectedPaymentMethod == null ? void 0 : selectedPaymentMethod.network,
-      onEarlySuccess: handleEarlySuccess
+      pendingBackendConfirmation,
+      paymentNetwork: selectedPaymentMethod == null ? void 0 : selectedPaymentMethod.network
     }
   ) });
 });