@swype-org/react-sdk 0.1.68 → 0.1.70

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,6 +1636,9 @@ 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 };
   }
@@ -3424,6 +3430,8 @@ var outlineBtnWrapStyle = {
 function SuccessScreen({
   amount,
   currency,
+  succeeded,
+  error,
   merchantName,
   sourceName,
   remainingLimit,
@@ -3434,7 +3442,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 +3451,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 +3462,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 +3489,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 +3522,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 +4004,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];
@@ -4513,13 +4527,13 @@ function SwypePaymentInner({
     polling.startPolling(persisted.transferId);
   }, [polling]);
   const handleAuthorizedMobileReturn = react.useCallback(async (authorizedTransfer, isSetup) => {
-    setTransfer(authorizedTransfer);
     polling.stopPolling();
     if (isSetup) {
       mobileSetupFlowRef.current = false;
       clearMobileFlowState();
       try {
         await reloadAccounts();
+        setTransfer(null);
         setError(null);
         setDeeplinkUri(null);
         setMobileFlow(false);
@@ -4532,6 +4546,7 @@ function SwypePaymentInner({
       }
       return;
     }
+    setTransfer(authorizedTransfer);
     mobileSetupFlowRef.current = false;
     clearMobileFlowState();
     setError(null);
@@ -4648,6 +4663,7 @@ function SwypePaymentInner({
         hasPasskey: true,
         accounts: accts,
         persistedMobileFlow: persisted,
+        mobileSetupInProgress: false,
         connectingNewAccount: false
       });
       if (resolved.clearPersistedFlow) {
@@ -4688,6 +4704,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");
@@ -5184,6 +5210,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);
@@ -5214,6 +5241,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 () => {
@@ -5224,12 +5252,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..." }) }) });
   }
@@ -5354,7 +5383,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,
       {
@@ -5385,7 +5414,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(
@@ -5393,12 +5422,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