@swype-org/react-sdk 0.1.68 → 0.1.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1615,6 +1615,9 @@ function resolvePostAuthStep(state) {
1615
1615
  }
1616
1616
  return { step: "open-wallet", clearPersistedFlow: false };
1617
1617
  }
1618
+ if (state.mobileSetupInProgress && !hasActiveWallet(state.accounts)) {
1619
+ return { step: "open-wallet", clearPersistedFlow: false };
1620
+ }
1618
1621
  if ((state.accounts.length === 0 || !hasActiveWallet(state.accounts)) && !state.connectingNewAccount) {
1619
1622
  return { step: "wallet-picker", clearPersistedFlow: false };
1620
1623
  }
@@ -1630,6 +1633,9 @@ function resolveRestoredMobileFlow(transferStatus, isSetup) {
1630
1633
  if (transferStatus === "FAILED") {
1631
1634
  return { kind: "resume-failed", step: "success", clearPersistedFlow: true };
1632
1635
  }
1636
+ if (transferStatus === "SENDING" || transferStatus === "SENT") {
1637
+ return { kind: "resume-processing", step: "processing", clearPersistedFlow: true };
1638
+ }
1633
1639
  if (isSetup) {
1634
1640
  return { kind: "resume-stale-setup", step: "wallet-picker", clearPersistedFlow: true };
1635
1641
  }
@@ -3421,6 +3427,8 @@ var outlineBtnWrapStyle = {
3421
3427
  function SuccessScreen({
3422
3428
  amount,
3423
3429
  currency,
3430
+ succeeded,
3431
+ error,
3424
3432
  merchantName,
3425
3433
  sourceName,
3426
3434
  remainingLimit,
@@ -3431,7 +3439,8 @@ function SuccessScreen({
3431
3439
  autoCloseSeconds
3432
3440
  }) {
3433
3441
  const { tokens } = useSwypeConfig();
3434
- const [countdown, setCountdown] = useState(autoCloseSeconds ?? 0);
3442
+ const effectiveAutoClose = succeeded ? autoCloseSeconds : void 0;
3443
+ const [countdown, setCountdown] = useState(effectiveAutoClose ?? 0);
3435
3444
  const doneCalledRef = useRef(false);
3436
3445
  const handleDone = useCallback(() => {
3437
3446
  if (doneCalledRef.current) return;
@@ -3439,7 +3448,7 @@ function SuccessScreen({
3439
3448
  onDone();
3440
3449
  }, [onDone]);
3441
3450
  useEffect(() => {
3442
- if (!autoCloseSeconds || autoCloseSeconds <= 0) return;
3451
+ if (!effectiveAutoClose || effectiveAutoClose <= 0) return;
3443
3452
  const intervalId = window.setInterval(() => {
3444
3453
  setCountdown((prev) => {
3445
3454
  if (prev <= 1) {
@@ -3450,18 +3459,18 @@ function SuccessScreen({
3450
3459
  });
3451
3460
  }, 1e3);
3452
3461
  return () => window.clearInterval(intervalId);
3453
- }, [autoCloseSeconds]);
3462
+ }, [effectiveAutoClose]);
3454
3463
  useEffect(() => {
3455
- if (autoCloseSeconds && countdown === 0) {
3464
+ if (effectiveAutoClose && countdown === 0) {
3456
3465
  handleDone();
3457
3466
  }
3458
- }, [autoCloseSeconds, countdown, handleDone]);
3467
+ }, [effectiveAutoClose, countdown, handleDone]);
3459
3468
  return /* @__PURE__ */ jsxs(
3460
3469
  ScreenLayout,
3461
3470
  {
3462
3471
  footer: /* @__PURE__ */ jsxs(Fragment, { children: [
3463
- /* @__PURE__ */ jsx(PrimaryButton, { onClick: handleDone, children: "Done" }),
3464
- autoCloseSeconds != null && autoCloseSeconds > 0 && /* @__PURE__ */ jsxs("p", { style: countdownStyle(tokens.textMuted), children: [
3472
+ /* @__PURE__ */ jsx(PrimaryButton, { onClick: handleDone, children: succeeded ? "Done" : "Try again" }),
3473
+ effectiveAutoClose != null && effectiveAutoClose > 0 && /* @__PURE__ */ jsxs("p", { style: countdownStyle(tokens.textMuted), children: [
3465
3474
  "Returning to app in ",
3466
3475
  countdown,
3467
3476
  "s\u2026"
@@ -3477,26 +3486,32 @@ function SuccessScreen({
3477
3486
  }
3478
3487
  ),
3479
3488
  /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
3480
- /* @__PURE__ */ jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
3481
- /* @__PURE__ */ jsxs("h2", { style: headingStyle6(tokens.text), children: [
3482
- "$",
3483
- amount.toFixed(2),
3484
- " deposited"
3485
- ] }),
3486
- merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle6(tokens.textSecondary), children: [
3487
- "to ",
3488
- merchantName
3489
+ succeeded ? /* @__PURE__ */ jsxs(Fragment, { children: [
3490
+ /* @__PURE__ */ jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
3491
+ /* @__PURE__ */ jsxs("h2", { style: headingStyle6(tokens.text), children: [
3492
+ "$",
3493
+ amount.toFixed(2),
3494
+ " deposited"
3495
+ ] }),
3496
+ merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle6(tokens.textSecondary), children: [
3497
+ "to ",
3498
+ merchantName
3499
+ ] })
3500
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
3501
+ /* @__PURE__ */ jsx(IconCircle, { variant: "error", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ 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 }) }) }),
3502
+ /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Transfer failed" }),
3503
+ error && /* @__PURE__ */ jsx("p", { style: subtitleStyle6(tokens.error), children: error })
3489
3504
  ] }),
3490
3505
  /* @__PURE__ */ jsxs("div", { style: summaryCardStyle(tokens), children: [
3491
3506
  sourceName && /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
3492
3507
  /* @__PURE__ */ jsx("span", { style: summaryLabelStyle(tokens.textMuted), children: "From" }),
3493
3508
  /* @__PURE__ */ jsx("span", { style: summaryValueStyle(tokens.text), children: sourceName })
3494
3509
  ] }),
3495
- /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
3510
+ succeeded && /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
3496
3511
  /* @__PURE__ */ jsx("span", { style: summaryLabelStyle(tokens.textMuted), children: "Time" }),
3497
3512
  /* @__PURE__ */ jsx("span", { style: summaryValueStyle(tokens.text), children: "just now" })
3498
3513
  ] }),
3499
- remainingLimit != null && /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
3514
+ succeeded && remainingLimit != null && /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
3500
3515
  /* @__PURE__ */ jsx("span", { style: summaryLabelStyle(tokens.textMuted), children: "Remaining limit" }),
3501
3516
  /* @__PURE__ */ jsxs("span", { style: { ...summaryValueStyle(tokens.text), color: tokens.accent }, children: [
3502
3517
  "$",
@@ -3504,7 +3519,7 @@ function SuccessScreen({
3504
3519
  ] })
3505
3520
  ] })
3506
3521
  ] }),
3507
- onIncreaseLimits && /* @__PURE__ */ jsxs("div", { style: upsellCardStyle(tokens), children: [
3522
+ succeeded && onIncreaseLimits && /* @__PURE__ */ jsxs("div", { style: upsellCardStyle(tokens), children: [
3508
3523
  /* @__PURE__ */ jsxs("div", { style: upsellHeaderStyle, children: [
3509
3524
  /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 6 }, children: /* @__PURE__ */ jsx("path", { d: "M7 14l5-5 5 5", stroke: tokens.accent, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
3510
3525
  /* @__PURE__ */ jsx("strong", { children: "Want higher limits?" })
@@ -3986,12 +4001,11 @@ var radioDotStyle2 = (color) => ({
3986
4001
  borderRadius: "50%",
3987
4002
  background: color
3988
4003
  });
3989
- var STEP_LABELS = ["Creating transfer", "Verifying", "Sent", "Done"];
4004
+ var STEP_LABELS = ["Creating transfer", "Verifying", "Sent"];
3990
4005
  var PHASE_ACTIVE_INDEX = {
3991
4006
  creating: 0,
3992
4007
  verifying: 1,
3993
- sent: 2,
3994
- done: 4
4008
+ sent: 2
3995
4009
  };
3996
4010
  function buildSteps(phase) {
3997
4011
  const activeIdx = PHASE_ACTIVE_INDEX[phase];
@@ -4510,13 +4524,13 @@ function SwypePaymentInner({
4510
4524
  polling.startPolling(persisted.transferId);
4511
4525
  }, [polling]);
4512
4526
  const handleAuthorizedMobileReturn = useCallback(async (authorizedTransfer, isSetup) => {
4513
- setTransfer(authorizedTransfer);
4514
4527
  polling.stopPolling();
4515
4528
  if (isSetup) {
4516
4529
  mobileSetupFlowRef.current = false;
4517
4530
  clearMobileFlowState();
4518
4531
  try {
4519
4532
  await reloadAccounts();
4533
+ setTransfer(null);
4520
4534
  setError(null);
4521
4535
  setDeeplinkUri(null);
4522
4536
  setMobileFlow(false);
@@ -4529,6 +4543,7 @@ function SwypePaymentInner({
4529
4543
  }
4530
4544
  return;
4531
4545
  }
4546
+ setTransfer(authorizedTransfer);
4532
4547
  mobileSetupFlowRef.current = false;
4533
4548
  clearMobileFlowState();
4534
4549
  setError(null);
@@ -4645,6 +4660,7 @@ function SwypePaymentInner({
4645
4660
  hasPasskey: true,
4646
4661
  accounts: accts,
4647
4662
  persistedMobileFlow: persisted,
4663
+ mobileSetupInProgress: false,
4648
4664
  connectingNewAccount: false
4649
4665
  });
4650
4666
  if (resolved.clearPersistedFlow) {
@@ -4685,6 +4701,16 @@ function SwypePaymentInner({
4685
4701
  setStep("success");
4686
4702
  return;
4687
4703
  }
4704
+ if (mobileResolution.kind === "resume-processing") {
4705
+ clearMobileFlowState();
4706
+ setMobileFlow(false);
4707
+ setDeeplinkUri(null);
4708
+ setTransfer(existingTransfer);
4709
+ setError(null);
4710
+ setStep("processing");
4711
+ polling.startPolling(existingTransfer.id);
4712
+ return;
4713
+ }
4688
4714
  if (mobileResolution.kind === "resume-stale-setup") {
4689
4715
  clearMobileFlowState();
4690
4716
  if (!cancelled) setStep("wallet-picker");
@@ -5181,6 +5207,7 @@ function SwypePaymentInner({
5181
5207
  processingStartedAtRef.current = null;
5182
5208
  pollingTransferIdRef.current = null;
5183
5209
  mobileSigningTransferIdRef.current = null;
5210
+ preSelectSourceStepRef.current = null;
5184
5211
  setConnectingNewAccount(false);
5185
5212
  setSelectedWalletId(null);
5186
5213
  if (accounts.length > 0) setSelectedAccountId(accounts[0].id);
@@ -5211,6 +5238,7 @@ function SwypePaymentInner({
5211
5238
  setAmount(depositAmount != null ? depositAmount.toString() : "");
5212
5239
  setMobileFlow(false);
5213
5240
  setDeeplinkUri(null);
5241
+ preSelectSourceStepRef.current = null;
5214
5242
  resetHeadlessLogin();
5215
5243
  }, [logout, polling, depositAmount, resetHeadlessLogin]);
5216
5244
  const handleConfirmSign = useCallback(async () => {
@@ -5221,12 +5249,13 @@ function SwypePaymentInner({
5221
5249
  setTransfer(signedTransfer);
5222
5250
  clearMobileFlowState();
5223
5251
  setStep("processing");
5252
+ polling.startPolling(t.id);
5224
5253
  } catch (err) {
5225
5254
  const msg = err instanceof Error ? err.message : "Failed to sign transfer";
5226
5255
  setError(msg);
5227
5256
  onError?.(msg);
5228
5257
  }
5229
- }, [transfer, polling.transfer, transferSigning, onError]);
5258
+ }, [transfer, polling.transfer, polling.startPolling, transferSigning, onError]);
5230
5259
  if (!ready) {
5231
5260
  return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Initializing..." }) }) });
5232
5261
  }
@@ -5351,7 +5380,7 @@ function SwypePaymentInner({
5351
5380
  }
5352
5381
  if (step === "processing") {
5353
5382
  const polledStatus = polling.transfer?.status;
5354
- const transferPhase = creatingTransfer ? "creating" : mobileFlow || authExecutor.executing || transferSigning.signing ? "verifying" : polledStatus === "SENDING" || polledStatus === "SENT" || polling.isPolling ? "sent" : "creating";
5383
+ const transferPhase = creatingTransfer ? "creating" : polledStatus === "SENDING" || polledStatus === "SENT" ? "sent" : "verifying";
5355
5384
  return /* @__PURE__ */ jsx(
5356
5385
  TransferStatusScreen,
5357
5386
  {
@@ -5382,7 +5411,7 @@ function SwypePaymentInner({
5382
5411
  );
5383
5412
  }
5384
5413
  if (step === "success") {
5385
- transfer?.status === "COMPLETED";
5414
+ const succeeded = transfer?.status === "COMPLETED";
5386
5415
  const displayAmount = transfer?.amount?.amount ?? 0;
5387
5416
  const displayCurrency = transfer?.amount?.currency ?? "USD";
5388
5417
  return /* @__PURE__ */ jsx(
@@ -5390,12 +5419,14 @@ function SwypePaymentInner({
5390
5419
  {
5391
5420
  amount: displayAmount,
5392
5421
  currency: displayCurrency,
5422
+ succeeded,
5423
+ error,
5393
5424
  merchantName,
5394
5425
  sourceName,
5395
- remainingLimit: (() => {
5426
+ remainingLimit: succeeded ? (() => {
5396
5427
  const limit = selectedAccount?.remainingAllowance ?? oneTapLimit;
5397
5428
  return limit > displayAmount ? limit - displayAmount : 0;
5398
- })(),
5429
+ })() : void 0,
5399
5430
  onDone: onDismiss ?? handleNewPayment,
5400
5431
  onLogout: handleLogout,
5401
5432
  autoCloseSeconds