@swype-org/react-sdk 0.1.12 → 0.1.14

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;
@@ -2040,7 +2065,7 @@ function SwypePayment({
   useWalletConnector
 }) {
   const { apiBaseUrl, tokens, depositAmount } = useSwypeConfig();
-  const { ready, authenticated, login, getAccessToken } = reactAuth.usePrivy();
+  const { ready, authenticated, login, logout, getAccessToken } = reactAuth.usePrivy();
   const [step, setStep] = react.useState("login");
   const [error, setError] = react.useState(null);
   const [providers, setProviders] = react.useState([]);
@@ -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);
@@ -2358,6 +2416,38 @@ function SwypePayment({
     setAdvancedSettings({ asset: null, chain: null });
     if (accounts.length > 0) setSelectedAccountId(accounts[0].id);
   };
+  const handleLogout = react.useCallback(async () => {
+    try {
+      await logout();
+    } catch {
+    }
+    if (typeof window !== "undefined") {
+      window.localStorage.removeItem(ACTIVE_CREDENTIAL_STORAGE_KEY);
+    }
+    polling.stopPolling();
+    setActiveCredentialId(null);
+    setStep("login");
+    setError(null);
+    setTransfer(null);
+    setCreatingTransfer(false);
+    setRegisteringPasskey(false);
+    setProviders([]);
+    setAccounts([]);
+    setChains([]);
+    setSelectedAccountId(null);
+    setSelectedWalletId(null);
+    setSelectedProviderId(null);
+    setConnectingNewAccount(false);
+    setAmount(depositAmount != null ? depositAmount.toString() : "");
+    setAdvancedSettings({ asset: null, chain: null });
+    setMobileFlow(false);
+    setSelectSourceChainName("");
+    setSelectSourceTokenSymbol("");
+    initializedSelectSourceActionRef.current = null;
+    processingStartedAtRef.current = null;
+    pollingTransferIdRef.current = null;
+    mobileSigningTransferIdRef.current = null;
+  }, [logout, polling, depositAmount]);
   const handleConnectNewAccount = (providerId) => {
     setSelectedProviderId(providerId);
     setSelectedAccountId(null);
@@ -2715,7 +2805,32 @@ function SwypePayment({
     const canPay = !isNaN(parsedAmount) && parsedAmount > 0 && !!sourceId && !loadingData;
     const noAccounts = !loadingData && accounts.length === 0;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
-      stepBadge("Review & pay"),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+        stepBadge("Review & pay"),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleLogout,
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              background: "transparent",
+              border: "none",
+              color: tokens.textMuted,
+              cursor: "pointer",
+              fontSize: "0.75rem",
+              fontWeight: 600,
+              letterSpacing: "0.04em",
+              textTransform: "uppercase",
+              fontFamily: "inherit",
+              padding: 0
+            },
+            children: "Logout"
+          }
+        )
+      ] }),
       error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorStyle, children: error }),
       loadingData ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "24px 0", textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Loading..." }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3107,6 +3222,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 +3251,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",
         {