@swype-org/react-sdk 0.1.69 → 0.1.71

package/dist/index.cjs

@@ -1618,6 +1618,9 @@ function resolvePostAuthStep(state) {
     }
     return { step: "open-wallet", clearPersistedFlow: false };
   }
+  if (state.mobileSetupInProgress && !hasActiveWallet(state.accounts)) {
+    return { step: "open-wallet", clearPersistedFlow: false };
+  }
   if ((state.accounts.length === 0 || !hasActiveWallet(state.accounts)) && !state.connectingNewAccount) {
     return { step: "wallet-picker", clearPersistedFlow: false };
   }
@@ -1633,11 +1636,31 @@ function resolveRestoredMobileFlow(transferStatus, isSetup) {
   if (transferStatus === "FAILED") {
     return { kind: "resume-failed", step: "success", clearPersistedFlow: true };
   }
+  if (transferStatus === "SENDING" || transferStatus === "SENT") {
+    return { kind: "resume-processing", step: "processing", clearPersistedFlow: true };
+  }
   if (isSetup) {
     return { kind: "resume-stale-setup", step: "wallet-picker", clearPersistedFlow: true };
   }
   return { kind: "resume-open-wallet", step: "open-wallet", clearPersistedFlow: false };
 }
+
+// src/dataLoading.ts
+function resolveDataLoadAction({
+  authenticated,
+  step,
+  accountsCount,
+  hasActiveCredential,
+  loading
+}) {
+  if (!authenticated || step === "login" || step === "otp-verify" || accountsCount > 0 || !hasActiveCredential) {
+    return "reset";
+  }
+  if (loading) {
+    return "wait";
+  }
+  return "load";
+}
 var FOOTER_CSS = `
 .swype-screen-footer {
   padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
@@ -3424,6 +3447,8 @@ var outlineBtnWrapStyle = {
 function SuccessScreen({
   amount,
   currency,
+  succeeded,
+  error,
   merchantName,
   sourceName,
   remainingLimit,
@@ -3434,7 +3459,8 @@ function SuccessScreen({
   autoCloseSeconds
 }) {
   const { tokens } = useSwypeConfig();
-  const [countdown, setCountdown] = react.useState(autoCloseSeconds ?? 0);
+  const effectiveAutoClose = succeeded ? autoCloseSeconds : void 0;
+  const [countdown, setCountdown] = react.useState(effectiveAutoClose ?? 0);
   const doneCalledRef = react.useRef(false);
   const handleDone = react.useCallback(() => {
     if (doneCalledRef.current) return;
@@ -3442,7 +3468,7 @@ function SuccessScreen({
     onDone();
   }, [onDone]);
   react.useEffect(() => {
-    if (!autoCloseSeconds || autoCloseSeconds <= 0) return;
+    if (!effectiveAutoClose || effectiveAutoClose <= 0) return;
     const intervalId = window.setInterval(() => {
       setCountdown((prev) => {
         if (prev <= 1) {
@@ -3453,18 +3479,18 @@ function SuccessScreen({
       });
     }, 1e3);
     return () => window.clearInterval(intervalId);
-  }, [autoCloseSeconds]);
+  }, [effectiveAutoClose]);
   react.useEffect(() => {
-    if (autoCloseSeconds && countdown === 0) {
+    if (effectiveAutoClose && countdown === 0) {
       handleDone();
     }
-  }, [autoCloseSeconds, countdown, handleDone]);
+  }, [effectiveAutoClose, countdown, handleDone]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: handleDone, children: "Done" }),
-        autoCloseSeconds != null && autoCloseSeconds > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: countdownStyle(tokens.textMuted), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: handleDone, children: succeeded ? "Done" : "Try again" }),
+        effectiveAutoClose != null && effectiveAutoClose > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: countdownStyle(tokens.textMuted), children: [
           "Returning to app in ",
           countdown,
           "s\u2026"
@@ -3480,26 +3506,32 @@ function SuccessScreen({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("h2", { style: headingStyle6(tokens.text), children: [
-            "$",
-            amount.toFixed(2),
-            " deposited"
-          ] }),
-          merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle6(tokens.textSecondary), children: [
-            "to ",
-            merchantName
+          succeeded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("h2", { style: headingStyle6(tokens.text), children: [
+              "$",
+              amount.toFixed(2),
+              " deposited"
+            ] }),
+            merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle6(tokens.textSecondary), children: [
+              "to ",
+              merchantName
+            ] })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "error", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z", fill: tokens.error }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Transfer failed" }),
+            error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.error), children: error })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryCardStyle(tokens), children: [
             sourceName && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryRowStyle, children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: summaryLabelStyle(tokens.textMuted), children: "From" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: summaryValueStyle(tokens.text), children: sourceName })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryRowStyle, children: [
+            succeeded && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryRowStyle, children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: summaryLabelStyle(tokens.textMuted), children: "Time" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: summaryValueStyle(tokens.text), children: "just now" })
             ] }),
-            remainingLimit != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryRowStyle, children: [
+            succeeded && remainingLimit != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryRowStyle, children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: summaryLabelStyle(tokens.textMuted), children: "Remaining limit" }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { ...summaryValueStyle(tokens.text), color: tokens.accent }, children: [
                 "$",
@@ -3507,7 +3539,7 @@ function SuccessScreen({
               ] })
             ] })
           ] }),
-          onIncreaseLimits && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: upsellCardStyle(tokens), children: [
+          succeeded && onIncreaseLimits && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: upsellCardStyle(tokens), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: upsellHeaderStyle, children: [
               /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 6 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 14l5-5 5 5", stroke: tokens.accent, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
               /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Want higher limits?" })
@@ -3989,12 +4021,11 @@ var radioDotStyle2 = (color) => ({
   borderRadius: "50%",
   background: color
 });
-var STEP_LABELS = ["Creating transfer", "Verifying", "Sent", "Done"];
+var STEP_LABELS = ["Creating transfer", "Verifying", "Sent"];
 var PHASE_ACTIVE_INDEX = {
   creating: 0,
   verifying: 1,
-  sent: 2,
-  done: 4
+  sent: 2
 };
 function buildSteps(phase) {
   const activeIdx = PHASE_ACTIVE_INDEX[phase];
@@ -4472,6 +4503,7 @@ function SwypePaymentInner({
   const [oneTapLimit, setOneTapLimit] = react.useState(100);
   const [mobileFlow, setMobileFlow] = react.useState(false);
   const [deeplinkUri, setDeeplinkUri] = react.useState(null);
+  const loadingDataRef = react.useRef(false);
   const pollingTransferIdRef = react.useRef(null);
   const mobileSigningTransferIdRef = react.useRef(null);
   const mobileSetupFlowRef = react.useRef(false);
@@ -4502,6 +4534,10 @@ function SwypePaymentInner({
       setConnectingNewAccount(false);
     }
   }, [getAccessToken, activeCredentialId, apiBaseUrl, depositAmount]);
+  const resetDataLoadingState = react.useCallback(() => {
+    loadingDataRef.current = false;
+    setLoadingData(false);
+  }, []);
   const enterPersistedMobileFlow = react.useCallback((persisted, errorMessage) => {
     setMobileFlow(true);
     setDeeplinkUri(persisted.deeplinkUri);
@@ -4519,6 +4555,7 @@ function SwypePaymentInner({
       clearMobileFlowState();
       try {
         await reloadAccounts();
+        resetDataLoadingState();
         setTransfer(null);
         setError(null);
         setDeeplinkUri(null);
@@ -4539,7 +4576,7 @@ function SwypePaymentInner({
     setDeeplinkUri(null);
     setMobileFlow(false);
     setStep("confirm-sign");
-  }, [polling.stopPolling, reloadAccounts]);
+  }, [polling.stopPolling, reloadAccounts, resetDataLoadingState]);
   const handleRetryMobileStatus = react.useCallback(() => {
     setError(null);
     const currentTransfer = polling.transfer ?? transfer;
@@ -4649,6 +4686,7 @@ function SwypePaymentInner({
         hasPasskey: true,
         accounts: accts,
         persistedMobileFlow: persisted,
+        mobileSetupInProgress: false,
         connectingNewAccount: false
       });
       if (resolved.clearPersistedFlow) {
@@ -4689,6 +4727,16 @@ function SwypePaymentInner({
             setStep("success");
             return;
           }
+          if (mobileResolution.kind === "resume-processing") {
+            clearMobileFlowState();
+            setMobileFlow(false);
+            setDeeplinkUri(null);
+            setTransfer(existingTransfer);
+            setError(null);
+            setStep("processing");
+            polling.startPolling(existingTransfer.id);
+            return;
+          }
           if (mobileResolution.kind === "resume-stale-setup") {
             clearMobileFlowState();
             if (!cancelled) setStep("wallet-picker");
@@ -4756,12 +4804,26 @@ function SwypePaymentInner({
     handleAuthorizedMobileReturn,
     onComplete
   ]);
-  const loadingDataRef = react.useRef(false);
   react.useEffect(() => {
-    if (!authenticated) return;
-    if (step === "login" || step === "otp-verify") return;
-    if (accounts.length > 0 || loadingDataRef.current) return;
-    if (!activeCredentialId) return;
+    const loadAction = resolveDataLoadAction({
+      authenticated,
+      step,
+      accountsCount: accounts.length,
+      hasActiveCredential: !!activeCredentialId,
+      loading: loadingDataRef.current
+    });
+    if (loadAction === "reset") {
+      resetDataLoadingState();
+      return;
+    }
+    if (loadAction === "wait") {
+      return;
+    }
+    const credentialId = activeCredentialId;
+    if (!credentialId) {
+      resetDataLoadingState();
+      return;
+    }
     let cancelled = false;
     loadingDataRef.current = true;
     const load = async () => {
@@ -4772,7 +4834,7 @@ function SwypePaymentInner({
         if (!token) throw new Error("Not authenticated");
         const [prov, accts, chn] = await Promise.all([
           fetchProviders(apiBaseUrl, token),
-          fetchAccounts(apiBaseUrl, token, activeCredentialId),
+          fetchAccounts(apiBaseUrl, token, credentialId),
           fetchChains(apiBaseUrl, token)
         ]);
         if (cancelled) return;
@@ -4810,8 +4872,7 @@ function SwypePaymentInner({
         }
       } finally {
         if (!cancelled) {
-          setLoadingData(false);
-          loadingDataRef.current = false;
+          resetDataLoadingState();
         }
       }
     };
@@ -4820,7 +4881,7 @@ function SwypePaymentInner({
       cancelled = true;
       loadingDataRef.current = false;
     };
-  }, [authenticated, step, accounts.length, apiBaseUrl, getAccessToken, activeCredentialId, depositAmount, connectingNewAccount]);
+  }, [authenticated, step, accounts.length, apiBaseUrl, getAccessToken, activeCredentialId, depositAmount, connectingNewAccount, resetDataLoadingState]);
   react.useEffect(() => {
     if (!polling.transfer) return;
     if (polling.transfer.status === "COMPLETED") {
@@ -5185,6 +5246,7 @@ function SwypePaymentInner({
     processingStartedAtRef.current = null;
     pollingTransferIdRef.current = null;
     mobileSigningTransferIdRef.current = null;
+    preSelectSourceStepRef.current = null;
     setConnectingNewAccount(false);
     setSelectedWalletId(null);
     if (accounts.length > 0) setSelectedAccountId(accounts[0].id);
@@ -5215,6 +5277,7 @@ function SwypePaymentInner({
     setAmount(depositAmount != null ? depositAmount.toString() : "");
     setMobileFlow(false);
     setDeeplinkUri(null);
+    preSelectSourceStepRef.current = null;
     resetHeadlessLogin();
   }, [logout, polling, depositAmount, resetHeadlessLogin]);
   const handleConfirmSign = react.useCallback(async () => {
@@ -5225,12 +5288,13 @@ function SwypePaymentInner({
       setTransfer(signedTransfer);
       clearMobileFlowState();
       setStep("processing");
+      polling.startPolling(t.id);
     } catch (err) {
       const msg = err instanceof Error ? err.message : "Failed to sign transfer";
       setError(msg);
       onError?.(msg);
     }
-  }, [transfer, polling.transfer, transferSigning, onError]);
+  }, [transfer, polling.transfer, polling.startPolling, transferSigning, onError]);
   if (!ready) {
     return /* @__PURE__ */ jsxRuntime.jsx(ScreenLayout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Initializing..." }) }) });
   }
@@ -5355,7 +5419,7 @@ function SwypePaymentInner({
   }
   if (step === "processing") {
     const polledStatus = polling.transfer?.status;
-    const transferPhase = creatingTransfer ? "creating" : mobileFlow || authExecutor.executing || transferSigning.signing ? "verifying" : polledStatus === "SENDING" || polledStatus === "SENT" || polling.isPolling ? "sent" : "creating";
+    const transferPhase = creatingTransfer ? "creating" : polledStatus === "SENDING" || polledStatus === "SENT" ? "sent" : "verifying";
     return /* @__PURE__ */ jsxRuntime.jsx(
       TransferStatusScreen,
       {
@@ -5386,7 +5450,7 @@ function SwypePaymentInner({
     );
   }
   if (step === "success") {
-    transfer?.status === "COMPLETED";
+    const succeeded = transfer?.status === "COMPLETED";
     const displayAmount = transfer?.amount?.amount ?? 0;
     const displayCurrency = transfer?.amount?.currency ?? "USD";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5394,12 +5458,14 @@ function SwypePaymentInner({
       {
         amount: displayAmount,
         currency: displayCurrency,
+        succeeded,
+        error,
         merchantName,
         sourceName,
-        remainingLimit: (() => {
+        remainingLimit: succeeded ? (() => {
           const limit = selectedAccount?.remainingAllowance ?? oneTapLimit;
           return limit > displayAmount ? limit - displayAmount : 0;
-        })(),
+        })() : void 0,
         onDone: onDismiss ?? handleNewPayment,
         onLogout: handleLogout,
         autoCloseSeconds