@swype-org/react-sdk 0.1.183 → 0.1.187

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
@@ -2321,16 +2321,98 @@ var mascotStyle = {
2321
2321
  width: 28,
2322
2322
  height: 28
2323
2323
  };
2324
- function ScreenHeader({ title, right, onBack, badge }) {
2324
+ function SettingsMenu({ onLogout }) {
2325
+ const { tokens } = useSwypeConfig();
2326
+ const [open, setOpen] = useState(false);
2327
+ const menuRef = useRef(null);
2328
+ const toggle = useCallback(() => setOpen((prev) => !prev), []);
2329
+ useEffect(() => {
2330
+ if (!open) return;
2331
+ const handleClickOutside = (e) => {
2332
+ if (menuRef.current && !menuRef.current.contains(e.target)) {
2333
+ setOpen(false);
2334
+ }
2335
+ };
2336
+ document.addEventListener("mousedown", handleClickOutside);
2337
+ return () => document.removeEventListener("mousedown", handleClickOutside);
2338
+ }, [open]);
2339
+ return /* @__PURE__ */ jsxs("div", { ref: menuRef, style: containerStyle4, children: [
2340
+ /* @__PURE__ */ jsx("button", { type: "button", onClick: toggle, style: triggerStyle(tokens.text), "aria-label": "Settings", children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [
2341
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "2", fill: "currentColor" }),
2342
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
2343
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "2", fill: "currentColor" })
2344
+ ] }) }),
2345
+ open && /* @__PURE__ */ jsx("div", { style: dropdownStyle(tokens), children: /* @__PURE__ */ jsxs(
2346
+ "button",
2347
+ {
2348
+ type: "button",
2349
+ onClick: () => {
2350
+ setOpen(false);
2351
+ onLogout();
2352
+ },
2353
+ style: menuItemStyle(tokens),
2354
+ children: [
2355
+ /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 8, flexShrink: 0 }, children: [
2356
+ /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
2357
+ /* @__PURE__ */ jsx("polyline", { points: "16 17 21 12 16 7", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
2358
+ /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
2359
+ ] }),
2360
+ "Log out"
2361
+ ]
2362
+ }
2363
+ ) })
2364
+ ] });
2365
+ }
2366
+ var containerStyle4 = {
2367
+ position: "relative"
2368
+ };
2369
+ var triggerStyle = (color) => ({
2370
+ background: "transparent",
2371
+ border: "none",
2372
+ cursor: "pointer",
2373
+ padding: 4,
2374
+ color,
2375
+ display: "flex",
2376
+ alignItems: "center",
2377
+ justifyContent: "center"
2378
+ });
2379
+ var dropdownStyle = (tokens) => ({
2380
+ position: "absolute",
2381
+ right: 0,
2382
+ top: "100%",
2383
+ marginTop: 4,
2384
+ minWidth: 140,
2385
+ background: tokens.bgCard,
2386
+ border: `1px solid ${tokens.border}`,
2387
+ borderRadius: 12,
2388
+ boxShadow: tokens.shadow,
2389
+ zIndex: 100,
2390
+ overflow: "hidden"
2391
+ });
2392
+ var menuItemStyle = (tokens) => ({
2393
+ width: "100%",
2394
+ display: "flex",
2395
+ alignItems: "center",
2396
+ padding: "12px 16px",
2397
+ background: "transparent",
2398
+ border: "none",
2399
+ cursor: "pointer",
2400
+ fontFamily: "inherit",
2401
+ fontSize: "0.85rem",
2402
+ fontWeight: 500,
2403
+ color: tokens.error
2404
+ });
2405
+ function ScreenHeader({ title, right, onBack, badge, onLogout }) {
2325
2406
  const { tokens } = useSwypeConfig();
2326
2407
  const flowPhase = useFlowPhase();
2408
+ const rightContent = onLogout ? /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) : right;
2327
2409
  return /* @__PURE__ */ jsxs("div", { style: headerStyle, children: [
2328
2410
  /* @__PURE__ */ jsx("div", { style: leftSlotStyle, children: onBack && /* @__PURE__ */ jsx("button", { type: "button", onClick: onBack, style: backButtonStyle(tokens.text), "aria-label": "Go back", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }),
2329
2411
  /* @__PURE__ */ jsx("div", { style: centerSlotStyle, children: flowPhase ? /* @__PURE__ */ jsx(StepProgress, { phase: flowPhase }) : /* @__PURE__ */ jsxs(Fragment, { children: [
2330
2412
  title && /* @__PURE__ */ jsx("span", { style: titleStyle(tokens.text), children: title }),
2331
2413
  badge && /* @__PURE__ */ jsx("span", { style: badgeStyle(tokens.textMuted), children: badge })
2332
2414
  ] }) }),
2333
- /* @__PURE__ */ jsx("div", { style: rightSlotStyle, children: right })
2415
+ /* @__PURE__ */ jsx("div", { style: rightSlotStyle, children: rightContent })
2334
2416
  ] });
2335
2417
  }
2336
2418
  var headerStyle = {
@@ -2371,7 +2453,7 @@ var badgeStyle = (color) => ({
2371
2453
  });
2372
2454
  function PoweredByFooter() {
2373
2455
  const { tokens } = useSwypeConfig();
2374
- return /* @__PURE__ */ jsxs("div", { style: containerStyle4(tokens.textMuted), children: [
2456
+ return /* @__PURE__ */ jsxs("div", { style: containerStyle5(tokens.textMuted), children: [
2375
2457
  /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
2376
2458
  /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
2377
2459
  "path",
@@ -2385,7 +2467,7 @@ function PoweredByFooter() {
2385
2467
  /* @__PURE__ */ jsx("span", { style: pillStyle(tokens.textMuted, tokens.border), children: "Beta Version" })
2386
2468
  ] });
2387
2469
  }
2388
- var containerStyle4 = (color) => ({
2470
+ var containerStyle5 = (color) => ({
2389
2471
  display: "flex",
2390
2472
  flexDirection: "column",
2391
2473
  alignItems: "center",
@@ -2484,12 +2566,12 @@ var defaultIcon = /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBo
2484
2566
  ) });
2485
2567
  function InfoBanner({ children, icon }) {
2486
2568
  const { tokens } = useSwypeConfig();
2487
- return /* @__PURE__ */ jsxs("div", { style: containerStyle5(tokens.accent), children: [
2569
+ return /* @__PURE__ */ jsxs("div", { style: containerStyle6(tokens.accent), children: [
2488
2570
  /* @__PURE__ */ jsx("span", { style: iconStyle, children: icon ?? defaultIcon }),
2489
2571
  /* @__PURE__ */ jsx("span", { style: textStyle, children })
2490
2572
  ] });
2491
2573
  }
2492
- var containerStyle5 = (accent) => ({
2574
+ var containerStyle6 = (accent) => ({
2493
2575
  display: "flex",
2494
2576
  alignItems: "flex-start",
2495
2577
  gap: 10,
@@ -2507,7 +2589,7 @@ var iconStyle = {
2507
2589
  };
2508
2590
  var textStyle = { flex: 1 };
2509
2591
  function WarningBanner({ title, children }) {
2510
- return /* @__PURE__ */ jsxs("div", { style: containerStyle6, children: [
2592
+ return /* @__PURE__ */ jsxs("div", { style: containerStyle7, children: [
2511
2593
  /* @__PURE__ */ jsxs("div", { style: headerStyle2, children: [
2512
2594
  /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: iconStyle2, children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z", fill: "#F57C00" }) }),
2513
2595
  /* @__PURE__ */ jsx("strong", { children: title })
@@ -2515,7 +2597,7 @@ function WarningBanner({ title, children }) {
2515
2597
  /* @__PURE__ */ jsx("div", { style: bodyStyle2, children })
2516
2598
  ] });
2517
2599
  }
2518
- var containerStyle6 = {
2600
+ var containerStyle7 = {
2519
2601
  padding: "14px 16px",
2520
2602
  background: "#FFF8E1",
2521
2603
  border: "1px solid #FFE082",
@@ -2594,7 +2676,7 @@ function OtpInput({ value, onChange, length = 6, disabled }) {
2594
2676
  onChange(pasted);
2595
2677
  focusInput(Math.min(pasted.length, length - 1));
2596
2678
  }, [onChange, length, focusInput]);
2597
- return /* @__PURE__ */ jsx("div", { style: containerStyle7, children: digits.map((digit, i) => /* @__PURE__ */ jsx(
2679
+ return /* @__PURE__ */ jsx("div", { style: containerStyle8, children: digits.map((digit, i) => /* @__PURE__ */ jsx(
2598
2680
  "input",
2599
2681
  {
2600
2682
  ref: (el) => {
@@ -2615,7 +2697,7 @@ function OtpInput({ value, onChange, length = 6, disabled }) {
2615
2697
  i
2616
2698
  )) });
2617
2699
  }
2618
- var containerStyle7 = {
2700
+ var containerStyle8 = {
2619
2701
  display: "flex",
2620
2702
  gap: 8,
2621
2703
  justifyContent: "center",
@@ -2724,7 +2806,7 @@ function SourceCard({
2724
2806
  }
2725
2807
  )
2726
2808
  ] }),
2727
- open && hasDropdown && /* @__PURE__ */ jsxs("div", { style: dropdownStyle(tokens), children: [
2809
+ open && hasDropdown && /* @__PURE__ */ jsxs("div", { style: dropdownStyle2(tokens), children: [
2728
2810
  accounts.map((account) => {
2729
2811
  const preferredWallet = getPreferredDepositWallet(account, depositAmount ?? 0);
2730
2812
  const active = hasActiveDepositWallet(account);
@@ -2845,7 +2927,7 @@ var changeStyle = (color) => ({
2845
2927
  fontFamily: "inherit",
2846
2928
  padding: 0
2847
2929
  });
2848
- var dropdownStyle = (tokens) => ({
2930
+ var dropdownStyle2 = (tokens) => ({
2849
2931
  position: "absolute",
2850
2932
  top: "100%",
2851
2933
  left: 0,
@@ -3066,87 +3148,6 @@ var detailStyle = (color) => ({
3066
3148
  fontSize: "0.75rem",
3067
3149
  color
3068
3150
  });
3069
- function SettingsMenu({ onLogout }) {
3070
- const { tokens } = useSwypeConfig();
3071
- const [open, setOpen] = useState(false);
3072
- const menuRef = useRef(null);
3073
- const toggle = useCallback(() => setOpen((prev) => !prev), []);
3074
- useEffect(() => {
3075
- if (!open) return;
3076
- const handleClickOutside = (e) => {
3077
- if (menuRef.current && !menuRef.current.contains(e.target)) {
3078
- setOpen(false);
3079
- }
3080
- };
3081
- document.addEventListener("mousedown", handleClickOutside);
3082
- return () => document.removeEventListener("mousedown", handleClickOutside);
3083
- }, [open]);
3084
- return /* @__PURE__ */ jsxs("div", { ref: menuRef, style: containerStyle8, children: [
3085
- /* @__PURE__ */ jsx("button", { type: "button", onClick: toggle, style: triggerStyle(tokens.text), "aria-label": "Settings", children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [
3086
- /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "2", fill: "currentColor" }),
3087
- /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
3088
- /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "2", fill: "currentColor" })
3089
- ] }) }),
3090
- open && /* @__PURE__ */ jsx("div", { style: dropdownStyle2(tokens), children: /* @__PURE__ */ jsxs(
3091
- "button",
3092
- {
3093
- type: "button",
3094
- onClick: () => {
3095
- setOpen(false);
3096
- onLogout();
3097
- },
3098
- style: menuItemStyle(tokens),
3099
- children: [
3100
- /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 8, flexShrink: 0 }, children: [
3101
- /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
3102
- /* @__PURE__ */ jsx("polyline", { points: "16 17 21 12 16 7", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
3103
- /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
3104
- ] }),
3105
- "Log out"
3106
- ]
3107
- }
3108
- ) })
3109
- ] });
3110
- }
3111
- var containerStyle8 = {
3112
- position: "relative"
3113
- };
3114
- var triggerStyle = (color) => ({
3115
- background: "transparent",
3116
- border: "none",
3117
- cursor: "pointer",
3118
- padding: 4,
3119
- color,
3120
- display: "flex",
3121
- alignItems: "center",
3122
- justifyContent: "center"
3123
- });
3124
- var dropdownStyle2 = (tokens) => ({
3125
- position: "absolute",
3126
- right: 0,
3127
- top: "100%",
3128
- marginTop: 4,
3129
- minWidth: 140,
3130
- background: tokens.bgCard,
3131
- border: `1px solid ${tokens.border}`,
3132
- borderRadius: 12,
3133
- boxShadow: tokens.shadow,
3134
- zIndex: 100,
3135
- overflow: "hidden"
3136
- });
3137
- var menuItemStyle = (tokens) => ({
3138
- width: "100%",
3139
- display: "flex",
3140
- alignItems: "center",
3141
- padding: "12px 16px",
3142
- background: "transparent",
3143
- border: "none",
3144
- cursor: "pointer",
3145
- fontFamily: "inherit",
3146
- fontSize: "0.85rem",
3147
- fontWeight: 500,
3148
- color: tokens.error
3149
- });
3150
3151
  function LoginScreen({
3151
3152
  authInput,
3152
3153
  onAuthInputChange,
@@ -3438,6 +3439,7 @@ var resendStyle = (color, disabled) => ({
3438
3439
  function PasskeyScreen({
3439
3440
  onCreatePasskey,
3440
3441
  onBack,
3442
+ onLogout,
3441
3443
  creating,
3442
3444
  error,
3443
3445
  popupFallback = false,
@@ -3454,7 +3456,7 @@ function PasskeyScreen({
3454
3456
  /* @__PURE__ */ jsx(PoweredByFooter, {})
3455
3457
  ] }),
3456
3458
  children: [
3457
- /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
3459
+ /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
3458
3460
  /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
3459
3461
  /* @__PURE__ */ jsx("h2", { style: headingStyle3(tokens.text), children: "Secure your account with a passkey" }),
3460
3462
  error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle2(tokens), children: error })
@@ -3544,7 +3546,8 @@ function WalletPickerScreen({
3544
3546
  onPrepareProvider,
3545
3547
  onSelectProvider,
3546
3548
  onContinueConnection,
3547
- onBack
3549
+ onBack,
3550
+ onLogout
3548
3551
  }) {
3549
3552
  const { tokens } = useSwypeConfig();
3550
3553
  const [hoveredId, setHoveredId] = useState(null);
@@ -3581,7 +3584,7 @@ function WalletPickerScreen({
3581
3584
  const selectedProvider = displayProviders.find((p) => p.id === selectedProviderId);
3582
3585
  if (loading) {
3583
3586
  return /* @__PURE__ */ jsxs(ScreenLayout, { children: [
3584
- /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack }),
3587
+ /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack, onLogout }),
3585
3588
  /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Connecting..." }) })
3586
3589
  ] });
3587
3590
  }
@@ -3611,7 +3614,7 @@ function WalletPickerScreen({
3611
3614
  /* @__PURE__ */ jsx(PoweredByFooter, {})
3612
3615
  ] }),
3613
3616
  children: [
3614
- /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack }),
3617
+ /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack, onLogout }),
3615
3618
  hasPending && /* @__PURE__ */ jsxs(Fragment, { children: [
3616
3619
  /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
3617
3620
  /* @__PURE__ */ jsx("p", { style: subtitleStyle2(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
@@ -3879,6 +3882,7 @@ function SetupScreen({
3879
3882
  availableBalance,
3880
3883
  onSetupOneTap,
3881
3884
  onBack,
3885
+ onLogout,
3882
3886
  onAdvanced,
3883
3887
  loading,
3884
3888
  error
@@ -3887,12 +3891,14 @@ function SetupScreen({
3887
3891
  const effectiveMax = DEFAULT_MAX;
3888
3892
  const effectiveMin = Math.min(ABSOLUTE_MIN, effectiveMax);
3889
3893
  const [limit, setLimit] = useState(() => Math.min(availableBalance, effectiveMax));
3894
+ const [activePreset, setActivePreset] = useState(null);
3890
3895
  const [editing, setEditing] = useState(false);
3891
3896
  const [inputValue, setInputValue] = useState("");
3892
3897
  const inputRef = useRef(null);
3893
3898
  const startEditing = useCallback(() => {
3894
3899
  setInputValue(limit.toFixed(2));
3895
3900
  setEditing(true);
3901
+ setActivePreset(null);
3896
3902
  requestAnimationFrame(() => inputRef.current?.focus());
3897
3903
  }, [limit]);
3898
3904
  const commitEdit = useCallback(() => {
@@ -3900,16 +3906,17 @@ function SetupScreen({
3900
3906
  if (!isNaN(parsed)) {
3901
3907
  setLimit(Math.min(effectiveMax, Math.max(effectiveMin, Math.round(parsed * 100) / 100)));
3902
3908
  }
3909
+ setActivePreset(null);
3903
3910
  setEditing(false);
3904
3911
  }, [inputValue, effectiveMax, effectiveMin]);
3905
3912
  const selectPreset = (value) => {
3906
3913
  setLimit(Math.min(value, effectiveMax));
3914
+ setActivePreset(value);
3907
3915
  };
3908
3916
  const selectMax = () => {
3909
3917
  setLimit(Math.min(availableBalance, effectiveMax));
3918
+ setActivePreset("max");
3910
3919
  };
3911
- const isPresetActive = (value) => Math.abs(limit - value) < 5e-3;
3912
- const isMaxActive = Math.abs(limit - Math.min(availableBalance, effectiveMax)) < 5e-3 && !PRESETS.some((p) => isPresetActive(p));
3913
3920
  return /* @__PURE__ */ jsxs(
3914
3921
  ScreenLayout,
3915
3922
  {
@@ -3926,7 +3933,7 @@ function SetupScreen({
3926
3933
  /* @__PURE__ */ jsx(PoweredByFooter, {})
3927
3934
  ] }),
3928
3935
  children: [
3929
- /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
3936
+ /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
3930
3937
  /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Set Spending Limit" }),
3931
3938
  error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle3(tokens), children: error }),
3932
3939
  /* @__PURE__ */ jsxs("div", { style: amountRowStyle, children: [
@@ -3987,7 +3994,7 @@ function SetupScreen({
3987
3994
  {
3988
3995
  type: "button",
3989
3996
  onClick: () => selectPreset(value),
3990
- style: presetButtonStyle(tokens, isPresetActive(value)),
3997
+ style: presetButtonStyle(tokens, activePreset === value),
3991
3998
  children: [
3992
3999
  "$",
3993
4000
  value.toLocaleString()
@@ -4000,7 +4007,7 @@ function SetupScreen({
4000
4007
  {
4001
4008
  type: "button",
4002
4009
  onClick: selectMax,
4003
- style: presetButtonStyle(tokens, isMaxActive),
4010
+ style: presetButtonStyle(tokens, activePreset === "max"),
4004
4011
  children: "Max"
4005
4012
  }
4006
4013
  )
@@ -4125,7 +4132,7 @@ function SetupStatusScreen({
4125
4132
  { label: "Done", status: "pending" }
4126
4133
  ];
4127
4134
  return /* @__PURE__ */ jsxs(ScreenLayout, { children: [
4128
- /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
4135
+ /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
4129
4136
  /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
4130
4137
  /* @__PURE__ */ jsx(Spinner, { size: 48 }),
4131
4138
  /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." }),
@@ -4214,7 +4221,7 @@ function DepositScreen({
4214
4221
  const { tokens } = useSwypeConfig();
4215
4222
  const amount = initialAmount;
4216
4223
  const isLowBalance = availableBalance < MIN_DEPOSIT;
4217
- const exceedsLimit = amount > remainingLimit && !isLowBalance;
4224
+ const exceedsLimit = remainingLimit != null && amount > remainingLimit && !isLowBalance;
4218
4225
  const canDeposit = amount >= MIN_DEPOSIT && !exceedsLimit && !isLowBalance && !processing;
4219
4226
  const headerTitle = merchantName ? `Deposit to ${merchantName}` : "Deposit";
4220
4227
  if (isLowBalance) {
@@ -4228,7 +4235,7 @@ function DepositScreen({
4228
4235
  /* @__PURE__ */ jsx(PoweredByFooter, {})
4229
4236
  ] }),
4230
4237
  children: [
4231
- /* @__PURE__ */ jsx(ScreenHeader, { title: headerTitle, onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
4238
+ /* @__PURE__ */ jsx(ScreenHeader, { title: headerTitle, onBack, onLogout }),
4232
4239
  /* @__PURE__ */ jsx(
4233
4240
  SourceCard,
4234
4241
  {
@@ -4285,7 +4292,7 @@ function DepositScreen({
4285
4292
  "Your deposit of $",
4286
4293
  amount.toFixed(2),
4287
4294
  " exceeds your One-Tap limit of $",
4288
- remainingLimit.toFixed(2),
4295
+ remainingLimit?.toFixed(2) ?? "0.00",
4289
4296
  ". Increase your limit to continue."
4290
4297
  ] })
4291
4298
  ] }) : /* @__PURE__ */ jsx(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: "Confirm" }),
@@ -4293,7 +4300,20 @@ function DepositScreen({
4293
4300
  ] }),
4294
4301
  children: [
4295
4302
  /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
4296
- /* @__PURE__ */ jsx("div", { style: mascotWrapStyle, children: /* @__PURE__ */ jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle3 }) }),
4303
+ /* @__PURE__ */ jsx(
4304
+ SourceCard,
4305
+ {
4306
+ name: sourceName,
4307
+ address: sourceAddress,
4308
+ verified: sourceVerified,
4309
+ accounts,
4310
+ selectedAccountId,
4311
+ depositAmount: amount,
4312
+ onSelectAccount,
4313
+ onAuthorizeAccount,
4314
+ onAddProvider
4315
+ }
4316
+ ),
4297
4317
  /* @__PURE__ */ jsxs("div", { style: depositCardStyle(tokens), children: [
4298
4318
  /* @__PURE__ */ jsx("div", { style: depositLabelStyle(tokens.textMuted), children: "Depositing" }),
4299
4319
  /* @__PURE__ */ jsxs("div", { style: amountRowStyle2, children: [
@@ -4332,7 +4352,7 @@ function DepositScreen({
4332
4352
  /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.4 }, children: /* @__PURE__ */ jsx("path", { d: "M7 10l5-5 5 5M7 14l5 5 5-5", stroke: tokens.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
4333
4353
  ] })
4334
4354
  ] }),
4335
- /* @__PURE__ */ jsxs("div", { style: spendingLimitStyle(tokens.textMuted), children: [
4355
+ remainingLimit != null && /* @__PURE__ */ jsxs("div", { style: spendingLimitStyle(tokens.textMuted), children: [
4336
4356
  "Spending Limit",
4337
4357
  " ",
4338
4358
  /* @__PURE__ */ jsxs("strong", { style: { color: tokens.text }, children: [
@@ -4345,15 +4365,6 @@ function DepositScreen({
4345
4365
  }
4346
4366
  );
4347
4367
  }
4348
- var mascotWrapStyle = {
4349
- display: "flex",
4350
- justifyContent: "center",
4351
- marginBottom: 16
4352
- };
4353
- var mascotStyle3 = {
4354
- width: 36,
4355
- height: 36
4356
- };
4357
4368
  var depositCardStyle = (tokens) => ({
4358
4369
  background: tokens.bgInput,
4359
4370
  border: `1px solid ${tokens.border}`,
@@ -4545,12 +4556,7 @@ function SuccessScreen({
4545
4556
  /* @__PURE__ */ jsx(PoweredByFooter, {})
4546
4557
  ] }),
4547
4558
  children: [
4548
- /* @__PURE__ */ jsx(
4549
- ScreenHeader,
4550
- {
4551
- right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout })
4552
- }
4553
- ),
4559
+ /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
4554
4560
  /* @__PURE__ */ jsxs("div", { style: contentStyle6, children: [
4555
4561
  succeeded ? /* @__PURE__ */ jsxs(Fragment, { children: [
4556
4562
  /* @__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 }) }) }),
@@ -4717,7 +4723,7 @@ function SelectSourceScreen({
4717
4723
  {
4718
4724
  title: "Select Source",
4719
4725
  onBack,
4720
- right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout })
4726
+ onLogout
4721
4727
  }
4722
4728
  ),
4723
4729
  /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textMuted), children: "Choose which chain and token to pay from." }),
@@ -5084,12 +5090,13 @@ function buildSteps(phase) {
5084
5090
  }
5085
5091
  function TransferStatusScreen({
5086
5092
  phase,
5087
- error
5093
+ error,
5094
+ onLogout
5088
5095
  }) {
5089
5096
  const { tokens } = useSwypeConfig();
5090
5097
  const steps = buildSteps(phase);
5091
5098
  return /* @__PURE__ */ jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsx(PoweredByFooter, {}), children: [
5092
- /* @__PURE__ */ jsx(ScreenHeader, {}),
5099
+ /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
5093
5100
  /* @__PURE__ */ jsxs("div", { style: contentStyle7, children: [
5094
5101
  /* @__PURE__ */ jsx(Spinner, { size: 64 }),
5095
5102
  /* @__PURE__ */ jsx("h2", { style: headingStyle9(tokens.text), children: "Depositing your money..." }),
@@ -5158,6 +5165,7 @@ function OpenWalletScreen({
5158
5165
  walletName,
5159
5166
  deeplinkUri,
5160
5167
  loading,
5168
+ useDeeplink = true,
5161
5169
  error,
5162
5170
  onRetryStatus,
5163
5171
  onBack,
@@ -5168,16 +5176,44 @@ function OpenWalletScreen({
5168
5176
  const logoSrc = walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0;
5169
5177
  const autoOpenedRef = useRef(null);
5170
5178
  useEffect(() => {
5171
- if (loading || !deeplinkUri || autoOpenedRef.current === deeplinkUri) return;
5179
+ if (!useDeeplink || loading || !deeplinkUri || autoOpenedRef.current === deeplinkUri) return;
5172
5180
  autoOpenedRef.current = deeplinkUri;
5173
5181
  triggerDeeplink(deeplinkUri);
5174
- }, [loading, deeplinkUri]);
5182
+ }, [useDeeplink, loading, deeplinkUri]);
5175
5183
  const handleOpen = useCallback(() => {
5176
5184
  const opened = window.open(deeplinkUri, "_blank");
5177
5185
  if (!opened && window === window.parent) {
5178
5186
  window.location.href = deeplinkUri;
5179
5187
  }
5180
5188
  }, [deeplinkUri]);
5189
+ if (!useDeeplink) {
5190
+ return /* @__PURE__ */ jsxs(
5191
+ ScreenLayout,
5192
+ {
5193
+ footer: /* @__PURE__ */ jsxs("div", { style: footerContentStyle, children: [
5194
+ error && /* @__PURE__ */ jsx(InfoBanner, { children: error }),
5195
+ /* @__PURE__ */ jsx(PoweredByFooter, {})
5196
+ ] }),
5197
+ children: [
5198
+ /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
5199
+ /* @__PURE__ */ jsxs("div", { style: contentStyle8, children: [
5200
+ /* @__PURE__ */ jsx("div", { style: logoCircleStyle(tokens.bgInput), children: logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsx(Spinner, { size: 32 }) }),
5201
+ /* @__PURE__ */ jsxs("h2", { style: headingStyle10(tokens.text), children: [
5202
+ "Setting up ",
5203
+ displayName,
5204
+ "..."
5205
+ ] }),
5206
+ /* @__PURE__ */ jsx("p", { style: subtitleStyle7(tokens.textSecondary), children: "Approve the connection in your wallet extension." }),
5207
+ /* @__PURE__ */ jsxs("div", { style: waitingBadgeStyle(tokens), children: [
5208
+ /* @__PURE__ */ jsx(Spinner, { size: 14 }),
5209
+ /* @__PURE__ */ jsx("span", { children: "Waiting for authorization..." })
5210
+ ] }),
5211
+ /* @__PURE__ */ jsx("p", { style: waitHintStyle2(tokens.textMuted), children: "Usually takes a few seconds" })
5212
+ ] })
5213
+ ]
5214
+ }
5215
+ );
5216
+ }
5181
5217
  return /* @__PURE__ */ jsxs(
5182
5218
  ScreenLayout,
5183
5219
  {
@@ -5192,7 +5228,7 @@ function OpenWalletScreen({
5192
5228
  /* @__PURE__ */ jsx(PoweredByFooter, {})
5193
5229
  ] }),
5194
5230
  children: [
5195
- /* @__PURE__ */ jsx(ScreenHeader, { onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
5231
+ /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
5196
5232
  /* @__PURE__ */ jsxs("div", { style: contentStyle8, children: [
5197
5233
  /* @__PURE__ */ jsx("div", { style: logoCircleStyle(tokens.bgInput), children: logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsx(Spinner, { size: 32 }) }),
5198
5234
  /* @__PURE__ */ jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
@@ -5267,6 +5303,11 @@ var hintStyle = (color) => ({
5267
5303
  color,
5268
5304
  margin: "8px 0 0"
5269
5305
  });
5306
+ var waitHintStyle2 = (color) => ({
5307
+ fontSize: "0.82rem",
5308
+ color,
5309
+ margin: "16px 0 0"
5310
+ });
5270
5311
  function ConfirmSignScreen({
5271
5312
  walletName,
5272
5313
  signing,
@@ -5286,7 +5327,7 @@ function ConfirmSignScreen({
5286
5327
  !error && /* @__PURE__ */ jsx("p", { style: hintStyle2(tokens.textMuted), children: "You may be prompted for biometric verification" })
5287
5328
  ] }),
5288
5329
  children: [
5289
- /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
5330
+ /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
5290
5331
  /* @__PURE__ */ jsxs("div", { style: contentStyle9, children: [
5291
5332
  logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle3 }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
5292
5333
  /* @__PURE__ */ jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
@@ -5365,6 +5406,7 @@ function TokenPickerScreen({
5365
5406
  onSelectAuthorized,
5366
5407
  onAuthorizeToken,
5367
5408
  onBack,
5409
+ onLogout,
5368
5410
  depositAmount
5369
5411
  }) {
5370
5412
  const { tokens: t } = useSwypeConfig();
@@ -5393,8 +5435,8 @@ function TokenPickerScreen({
5393
5435
  }
5394
5436
  };
5395
5437
  return /* @__PURE__ */ jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsx(PoweredByFooter, {}), children: [
5396
- /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
5397
- /* @__PURE__ */ jsx("div", { style: mascotWrapStyle2, children: /* @__PURE__ */ jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotImgStyle }) }),
5438
+ /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
5439
+ /* @__PURE__ */ jsx("div", { style: mascotWrapStyle, children: /* @__PURE__ */ jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotImgStyle }) }),
5398
5440
  depositAmount != null && /* @__PURE__ */ jsxs("div", { style: depositCardStyle2(t), children: [
5399
5441
  /* @__PURE__ */ jsx("div", { style: depositLabelStyle2(t.textMuted), children: "Depositing" }),
5400
5442
  /* @__PURE__ */ jsxs("div", { style: depositAmountRowStyle, children: [
@@ -5447,7 +5489,7 @@ function TokenPickerScreen({
5447
5489
  }) })
5448
5490
  ] });
5449
5491
  }
5450
- var mascotWrapStyle2 = {
5492
+ var mascotWrapStyle = {
5451
5493
  display: "flex",
5452
5494
  justifyContent: "center",
5453
5495
  marginBottom: 16
@@ -5698,6 +5740,7 @@ function StepRendererContent({
5698
5740
  {
5699
5741
  onCreatePasskey: handlers.onRegisterPasskey,
5700
5742
  onBack: handlers.onLogout,
5743
+ onLogout: handlers.onLogout,
5701
5744
  creating: state.registeringPasskey,
5702
5745
  error: state.error,
5703
5746
  popupFallback: state.passkeyPopupNeeded,
@@ -5711,6 +5754,7 @@ function StepRendererContent({
5711
5754
  {
5712
5755
  onCreatePasskey: handlers.onRegisterPasskey,
5713
5756
  onBack: handlers.onLogout,
5757
+ onLogout: handlers.onLogout,
5714
5758
  creating: state.verifyingPasskeyPopup,
5715
5759
  error: state.error,
5716
5760
  popupFallback: true,
@@ -5731,21 +5775,26 @@ function StepRendererContent({
5731
5775
  onPrepareProvider: handlers.onPrepareProvider,
5732
5776
  onSelectProvider: handlers.onSelectProvider,
5733
5777
  onContinueConnection: handlers.onContinueConnection,
5734
- onBack: () => handlers.onNavigate(state.activeCredentialId ? "deposit" : "create-passkey")
5778
+ onBack: () => handlers.onNavigate(state.activeCredentialId ? "deposit" : "create-passkey"),
5779
+ onLogout: handlers.onLogout
5735
5780
  }
5736
5781
  );
5737
5782
  }
5738
5783
  if (step === "open-wallet") {
5739
5784
  const providerName = state.providers.find((p) => p.id === state.selectedProviderId)?.name ?? null;
5785
+ const useDeeplink = !shouldUseWalletConnector({
5786
+ userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
5787
+ });
5740
5788
  return /* @__PURE__ */ jsx(
5741
5789
  OpenWalletScreen,
5742
5790
  {
5743
5791
  walletName: providerName,
5744
5792
  deeplinkUri: state.deeplinkUri ?? "",
5745
- loading: state.creatingTransfer || !state.deeplinkUri,
5746
- error: state.error || pollingError,
5747
- onRetryStatus: handlers.onRetryMobileStatus,
5748
- onBack: () => handlers.onNavigate("wallet-picker"),
5793
+ loading: useDeeplink ? state.creatingTransfer || !state.deeplinkUri : state.creatingTransfer,
5794
+ useDeeplink,
5795
+ error: state.error || (useDeeplink ? pollingError : authExecutorError),
5796
+ onRetryStatus: useDeeplink ? handlers.onRetryMobileStatus : void 0,
5797
+ onBack: useDeeplink ? () => handlers.onNavigate("wallet-picker") : void 0,
5749
5798
  onLogout: handlers.onLogout
5750
5799
  }
5751
5800
  );
@@ -5813,7 +5862,7 @@ function StepRendererContent({
5813
5862
  sourceAddress,
5814
5863
  sourceVerified,
5815
5864
  availableBalance: selectedSource ? selectedSource.balance.available.amount : selectedAccount ? selectedAccount.wallets.reduce((sum, w) => sum + w.balance.available.amount, 0) : maxSourceBalance,
5816
- remainingLimit: selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? state.oneTapLimit,
5865
+ remainingLimit: selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? null,
5817
5866
  tokenCount,
5818
5867
  initialAmount: parsedAmt,
5819
5868
  processing: state.creatingTransfer,
@@ -5846,6 +5895,7 @@ function StepRendererContent({
5846
5895
  onSelectAuthorized: handlers.onSelectAuthorizedToken,
5847
5896
  onAuthorizeToken: handlers.onAuthorizeToken,
5848
5897
  onBack: () => handlers.onNavigate(state.previousStep === "setup" ? "setup" : "deposit"),
5898
+ onLogout: handlers.onLogout,
5849
5899
  depositAmount: depositAmount ?? void 0
5850
5900
  }
5851
5901
  );
@@ -5893,7 +5943,8 @@ function StepRendererContent({
5893
5943
  merchantName,
5894
5944
  sourceName,
5895
5945
  remainingLimit: succeeded ? (() => {
5896
- const limit = selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? state.oneTapLimit;
5946
+ const limit = selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? null;
5947
+ if (limit == null) return null;
5897
5948
  return limit > displayAmount ? limit - displayAmount : 0;
5898
5949
  })() : void 0,
5899
5950
  onDone: onDismiss ?? handlers.onNewPayment,
@@ -5911,7 +5962,7 @@ function StepRendererContent({
5911
5962
  sourceAddress,
5912
5963
  sourceVerified,
5913
5964
  availableBalance: 0,
5914
- remainingLimit: selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? state.oneTapLimit,
5965
+ remainingLimit: selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? null,
5915
5966
  tokenCount,
5916
5967
  initialAmount: depositAmount ?? 5,
5917
5968
  processing: false,
@@ -6702,7 +6753,7 @@ function useProviderHandlers(deps) {
6702
6753
  });
6703
6754
  if (!isMobile) {
6704
6755
  dispatch({ type: "PAY_STARTED", isSetupRedirect: false });
6705
- dispatch({ type: "NAVIGATE", step: "setup-status" });
6756
+ dispatch({ type: "NAVIGATE", step: "open-wallet" });
6706
6757
  }
6707
6758
  try {
6708
6759
  let accountId;
@@ -6857,7 +6908,7 @@ function useProviderHandlers(deps) {
6857
6908
  dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: session.uri });
6858
6909
  triggerDeeplink(session.uri);
6859
6910
  } else {
6860
- dispatch({ type: "NAVIGATE", step: "setup-status" });
6911
+ dispatch({ type: "NAVIGATE", step: "open-wallet" });
6861
6912
  await authExecutor.executeSessionById(session.id);
6862
6913
  await reloadAccounts();
6863
6914
  dispatch({ type: "NAVIGATE", step: "deposit" });
@@ -6950,7 +7001,7 @@ function useProviderHandlers(deps) {
6950
7001
  dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: session.uri });
6951
7002
  triggerDeeplink(session.uri);
6952
7003
  } else {
6953
- dispatch({ type: "NAVIGATE", step: "setup-status" });
7004
+ dispatch({ type: "NAVIGATE", step: "open-wallet" });
6954
7005
  await authExecutor.executeSessionById(session.id);
6955
7006
  await reloadAccounts();
6956
7007
  dispatch({ type: "SELECT_TOKEN", walletId: _walletId, tokenSymbol });
@@ -7025,7 +7076,7 @@ function useOneTapSetupHandlers(deps) {
7025
7076
  }
7026
7077
  oneTapLimitSavedDuringSetupRef.current = true;
7027
7078
  authExecutor.resolveSelectSource({ chainName, tokenSymbol });
7028
- dispatch({ type: "NAVIGATE", step: "setup-status" });
7079
+ dispatch({ type: "NAVIGATE", step: "open-wallet" });
7029
7080
  } else if (authExecutor.pendingOneTapSetup) {
7030
7081
  authExecutor.resolveOneTapSetup();
7031
7082
  } else {
@@ -7663,7 +7714,7 @@ function usePaymentEffects(deps) {
7663
7714
  useWalletConnector: useWalletConnectorProp,
7664
7715
  userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
7665
7716
  });
7666
- if (isDesktop && state.step === "setup-status") {
7717
+ if (isDesktop && (state.step === "setup-status" || state.step === "open-wallet")) {
7667
7718
  preSelectSourceStepRef.current = state.step;
7668
7719
  dispatch({ type: "NAVIGATE", step: "setup" });
7669
7720
  return;
@@ -7678,7 +7729,7 @@ function usePaymentEffects(deps) {
7678
7729
  const pendingOneTapSetupAction = authExecutor.pendingOneTapSetup;
7679
7730
  const preOneTapSetupStepRef = useRef(null);
7680
7731
  useEffect(() => {
7681
- if (pendingOneTapSetupAction && state.step === "setup-status") {
7732
+ if (pendingOneTapSetupAction && (state.step === "setup-status" || state.step === "open-wallet")) {
7682
7733
  if (oneTapLimitSavedDuringSetupRef.current) {
7683
7734
  oneTapLimitSavedDuringSetupRef.current = false;
7684
7735
  authExecutor.resolveOneTapSetup();