@swype-org/react-sdk 0.1.12 → 0.1.13

package/dist/index.cjs

@@ -1957,6 +1957,31 @@ function AdvancedSettings({
     )
   ] });
 }
+
+// src/processingStatus.ts
+var PROCESSING_TIMEOUT_MS = 18e4;
+function resolvePreferredTransfer(polledTransfer, localTransfer) {
+  return polledTransfer ?? localTransfer;
+}
+function getTransferStatus(polledTransfer, localTransfer) {
+  const transfer = resolvePreferredTransfer(polledTransfer, localTransfer);
+  return transfer?.status ?? "UNKNOWN";
+}
+function getDisplayTransferStatus(polledTransfer, localTransfer) {
+  return getTransferStatus(polledTransfer, localTransfer).toUpperCase();
+}
+function getTransferIdSuffix(polledTransfer, localTransfer) {
+  const transfer = resolvePreferredTransfer(polledTransfer, localTransfer);
+  if (!transfer?.id) return "n/a";
+  return transfer.id.slice(-8);
+}
+function hasProcessingTimedOut(processingStartedAtMs, nowMs) {
+  if (!processingStartedAtMs) return false;
+  return nowMs - processingStartedAtMs >= PROCESSING_TIMEOUT_MS;
+}
+function buildProcessingTimeoutMessage(status) {
+  return `Payment is taking longer than expected (status: ${status}). Please try again.`;
+}
 var ACTIVE_CREDENTIAL_STORAGE_KEY = "swype_active_credential_id";
 function isMobile() {
   if (typeof navigator === "undefined") return false;
@@ -2068,6 +2093,7 @@ function SwypePayment({
   const [mobileFlow, setMobileFlow] = react.useState(false);
   const pollingTransferIdRef = react.useRef(null);
   const mobileSigningTransferIdRef = react.useRef(null);
+  const processingStartedAtRef = react.useRef(null);
   const [selectSourceChainName, setSelectSourceChainName] = react.useState("");
   const [selectSourceTokenSymbol, setSelectSourceTokenSymbol] = react.useState("");
   const initializedSelectSourceActionRef = react.useRef(null);
@@ -2175,6 +2201,36 @@ function SwypePayment({
       setError("Transfer failed.");
     }
   }, [polling.transfer, onComplete]);
+  react.useEffect(() => {
+    if (step !== "processing") {
+      processingStartedAtRef.current = null;
+      return;
+    }
+    if (!processingStartedAtRef.current) {
+      processingStartedAtRef.current = Date.now();
+    }
+    const elapsedMs = Date.now() - processingStartedAtRef.current;
+    const remainingMs = PROCESSING_TIMEOUT_MS - elapsedMs;
+    const handleTimeout = () => {
+      if (!hasProcessingTimedOut(processingStartedAtRef.current, Date.now())) {
+        return;
+      }
+      const status = getTransferStatus(polling.transfer, transfer);
+      const msg = buildProcessingTimeoutMessage(status);
+      polling.stopPolling();
+      setStep("ready");
+      setError(msg);
+      onError?.(msg);
+    };
+    if (remainingMs <= 0) {
+      handleTimeout();
+      return;
+    }
+    const timeoutId = window.setTimeout(handleTimeout, remainingMs);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [step, polling.transfer, transfer, polling.stopPolling, onError]);
   react.useEffect(() => {
     if (!mobileFlow) return;
     const polledTransfer = polling.transfer;
@@ -2266,6 +2322,7 @@ function SwypePayment({
       return;
     }
     setStep("processing");
+    processingStartedAtRef.current = Date.now();
     setError(null);
     setCreatingTransfer(true);
     setMobileFlow(false);
@@ -2351,6 +2408,7 @@ function SwypePayment({
     setError(null);
     setAmount(depositAmount != null ? depositAmount.toString() : "");
     setMobileFlow(false);
+    processingStartedAtRef.current = null;
     pollingTransferIdRef.current = null;
     mobileSigningTransferIdRef.current = null;
     setConnectingNewAccount(false);
@@ -3107,6 +3165,8 @@ function SwypePayment({
       }
     };
     const regMsg = getRegistrationMessage();
+    const transferStatus = getDisplayTransferStatus(polling.transfer, transfer);
+    const transferIdSuffix = getTransferIdSuffix(polling.transfer, transfer);
     const statusLabel = creatingTransfer ? "Creating transfer..." : mobileFlow ? "Waiting for authorization..." : authExecutor.executing && regMsg.label ? regMsg.label : authExecutor.executing ? "Authorizing..." : transferSigning.signing ? "Preparing transfer..." : polling.isPolling ? "Processing payment..." : "Please wait...";
     const statusDescription = creatingTransfer ? "Setting up your transfer..." : mobileFlow ? "Complete the authorization in your wallet app, then return here." : authExecutor.executing && regMsg.description ? regMsg.description : authExecutor.executing ? "Complete the wallet prompts to authorize this payment." : transferSigning.signing ? "Waiting for backend to prepare your transfer payload..." : polling.isPolling ? "Your payment is being processed. This usually takes a few moments." : "Hang tight...";
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
@@ -3134,6 +3194,39 @@ function SwypePayment({
           children: statusDescription
         }
       ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "p",
+        {
+          style: {
+            marginTop: "12px",
+            marginBottom: 0,
+            fontSize: "0.8rem",
+            color: tokens.textSecondary
+          },
+          children: [
+            "Current status: ",
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: tokens.text }, children: transferStatus }),
+            " \xB7 ",
+            "Transfer: ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: tokens.textMuted }, children: transferIdSuffix })
+          ]
+        }
+      ),
+      polling.error && /* @__PURE__ */ jsxRuntime.jsxs(
+        "p",
+        {
+          style: {
+            marginTop: "8px",
+            marginBottom: 0,
+            fontSize: "0.75rem",
+            color: tokens.textMuted
+          },
+          children: [
+            "Last polling error: ",
+            polling.error
+          ]
+        }
+      ),
       !mobileFlow && authExecutor.results.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "20px", textAlign: "left" }, children: authExecutor.results.map((r) => /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {