@swype-org/react-sdk 0.1.171 → 0.1.180

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.cjs CHANGED
@@ -30,9 +30,9 @@ var darkTheme = {
30
30
  textInverse: "#052027",
31
31
  border: "#2b4551",
32
32
  borderFocus: "#28b67a",
33
- accent: "#28b67a",
34
- accentHover: "#219866",
35
- accentText: "#ffffff",
33
+ accent: "#B2FF93",
34
+ accentHover: "#8FD974",
35
+ accentText: "#1B4332",
36
36
  success: "#0f9d73",
37
37
  successBg: "#0f2f2a",
38
38
  error: "#d46a72",
@@ -57,9 +57,9 @@ var lightTheme = {
57
57
  textInverse: "#ffffff",
58
58
  border: "#d2e4ea",
59
59
  borderFocus: "#28b67a",
60
- accent: "#28b67a",
61
- accentHover: "#219866",
62
- accentText: "#ffffff",
60
+ accent: "#B2FF93",
61
+ accentHover: "#8FD974",
62
+ accentText: "#1B4332",
63
63
  success: "#0f9d73",
64
64
  successBg: "#e6f7f1",
65
65
  error: "#ce6670",
@@ -2217,6 +2217,16 @@ var SWYPE_SVG = `<svg width="100" height="100" viewBox="0 0 100 100" fill="none"
2217
2217
  </defs>
2218
2218
  </svg>`;
2219
2219
  var SWYPE_LOGO = svgToDataUri(SWYPE_SVG);
2220
+ var SWYPE_MASCOT_SVG = `<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
2221
+ <path d="M64.0138 36.6191C68.3952 36.7025 70.2512 42.3038 65.1932 44.0399C61.4251 44.2617 60.8419 41.8557 61.3059 38.6113C62.3258 37.4916 62.6562 37.2326 64.0138 36.6191Z" fill="#1a5c2a"/>
2222
+ <path d="M34.7441 36.6714C36.6646 36.3309 38.4839 37.6898 38.813 39.71C39.1407 41.7302 37.8542 43.6499 35.9352 43.9994C34.7427 44.2169 33.5274 43.7774 32.7154 42.8325C31.8492 41.8262 31.5728 40.4029 31.9959 39.1191C32.419 37.8367 33.4719 36.8979 34.7441 36.6714Z" fill="#1a5c2a"/>
2223
+ <path d="M37.719 72.0299C39.0372 70.605 40.611 68.9843 41.7888 67.4312L50.1528 61.6651L57.6601 61.4468C57.4965 63.5289 61.7342 75.3729 61.6981 77.5158C62.154 77.0628 63.0658 76.3318 63.567 75.9876C65.9954 74.3365 68.8384 73.8223 71.4833 74.5554C72.8167 74.9328 73.9331 75.9251 74.58 77.3075C75.2967 78.8451 75.3771 80.3207 74.9127 82.0281C73.8912 85.7844 71.5792 88.6365 68.624 90.5357C66.125 92.1415 61.7077 93.9276 58.9822 93.0828C58.078 92.7956 56.4567 92.015 55.9204 91.1399C55.1385 89.8648 54.5613 88.8907 54.1469 87.3736C53.3686 84.4709 53.3459 86.0793 52.7439 77.9085C52.8102 75.0919 52.9961 69.1199 52.9088 66.782C52.1044 67.8121 48.6686 72.1053 47.7896 73.7937L43.7186 79.5555C45.2316 79.4947 47.0626 79.5314 48.354 80.4535C49.2813 81.1277 49.9192 82.2144 50.1273 83.4755C50.2332 83.8294 50.3132 84.6855 50.3258 85.0634C50.4307 88.2051 49.4337 91.7462 46.8974 93.4764C45.8189 94.2126 44.2654 94.598 43.01 94.7341C37.9909 95.3115 33.0817 93.5835 29.3502 89.9257C28.3222 88.8994 27.4875 87.705 27.4333 86.0333C27.4046 85.1165 27.6099 84.1963 28.0241 83.3859C28.6301 82.2147 30.2471 80.3005 31.0794 79.3156C33.2057 76.7997 35.4975 74.4306 37.719 72.0299Z" fill="#4ABA5A"/>
2224
+ <path d="M25.2815 30.5666C25.6441 30.6182 25.869 30.0928 25.5864 29.8598C23.1701 27.868 21.5484 25.4469 21.0444 22.6545C20.3641 19.1251 21.516 15.5212 24.2422 12.6488C26.8514 9.91783 30.7518 8.12575 35.0552 7.68041C40.5681 7.11357 44.9544 9.44386 49.0355 11.908C49.1016 11.9479 49.1793 11.964 49.2559 11.9535L49.6641 11.8975C49.7772 11.882 49.8729 11.8099 49.9313 11.7118C50.7042 10.4132 53.3609 9.13558 54.9428 8.55183C63.274 5.47733 72.1015 8.67608 75.6217 15.0543C77.4169 18.3043 77.4637 21.9922 75.7515 25.2845C74.8719 26.99 73.8277 28.1868 72.3742 29.4156C72.1074 29.6412 72.3057 30.099 72.652 30.0534C78.3434 29.3036 83.6958 29.6535 88.1602 33.0995C88.1743 33.1104 88.1896 33.1204 88.2051 33.1289C94.9326 36.8336 95.4063 45.4019 90.8735 50.5016C88.6438 53.0434 85.3883 54.9193 81.641 55.8268C81.4786 55.8662 81.3675 56.017 81.3778 56.1837C81.627 60.2197 80.6407 63.7049 77.0957 66.8558C74.3594 69.31 72.2572 70.905 68.1242 71.1594C66.1317 71.2671 64.5824 71.0823 61.0405 69.4728C57.7759 67.9894 53.6996 61.9918 52.509 57.7058C52.4204 57.3871 51.9326 57.3204 51.7644 57.6052C49.4075 61.5961 43.2088 67.6787 38.7227 69.4728C35.1404 70.8919 32.2895 71.8779 28.5005 70.8789C24.3706 69.7951 20.9698 67.4623 19.0499 64.3964C18.0021 62.7282 16.7577 59.3144 17.4723 57.5087C17.4921 57.4587 17.5023 57.4056 17.4951 57.3522C17.4647 57.1259 17.359 56.7067 17.1377 56.6504C8.17592 54.367 2.58735 48.0815 5.03045 40.4013C6.14562 36.9784 8.95444 34.0395 12.8321 32.2381C16.7957 30.3763 20.9323 29.9475 25.2815 30.5666Z" fill="#4ABA5A"/>
2225
+ <rect x="44.3433" y="56.4863" width="10.1195" height="9.10751" fill="#4ABA5A"/>
2226
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M45.6929 25.6221C49.2323 25.6223 52.1021 31.512 52.1021 38.7773C52.102 46.0426 49.2323 51.9323 45.6929 51.9326C42.2373 51.9326 39.4213 46.3188 39.2896 39.292C41.4308 38.8166 43.9097 38.7264 46.1079 39.1299C47.0121 39.2956 47.8949 38.5389 47.4956 37.7109C46.0273 34.6668 42.4111 34.0327 39.686 34.1816C40.5942 29.1824 42.9408 25.6221 45.6929 25.6221Z" fill="#1a5c2a"/>
2227
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M63.2471 25.6216C66.7865 25.6219 69.6562 31.5116 69.6562 38.7769C69.6562 46.0422 66.7865 51.9319 63.2471 51.9321C59.7916 51.9321 56.9756 46.319 56.8438 39.2925C58.985 38.8171 61.4639 38.7259 63.6621 39.1294C64.5663 39.2952 65.4491 38.5394 65.0498 37.7114C63.5816 34.6669 59.9654 34.0322 57.2402 34.1812C58.1484 29.1821 60.4951 25.6216 63.2471 25.6216Z" fill="#1a5c2a"/>
2228
+ </svg>`;
2229
+ var SWYPE_MASCOT = svgToDataUri(SWYPE_MASCOT_SVG);
2220
2230
  var BASE_LOGO = svgToDataUri(BASE_SVG);
2221
2231
  var METAMASK_LOGO = svgToDataUri(METAMASK_SVG);
2222
2232
  var TRUST_WALLET_LOGO = svgToDataUri(TRUST_WALLET_SVG);
@@ -2244,7 +2254,7 @@ var containerStyle2 = (bg) => ({
2244
2254
  maxWidth: 420,
2245
2255
  width: "100%",
2246
2256
  margin: "0 auto",
2247
- background: bg,
2257
+ background: `linear-gradient(to top, rgba(178, 255, 147, 0.15), transparent 40%), ${bg}`,
2248
2258
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
2249
2259
  boxSizing: "border-box"
2250
2260
  });
@@ -2262,14 +2272,69 @@ var footerStyle = {
2262
2272
  paddingRight: 24,
2263
2273
  marginTop: "auto"
2264
2274
  };
2275
+ var FlowPhaseContext = react.createContext(null);
2276
+ function FlowPhaseProvider({
2277
+ phase,
2278
+ children
2279
+ }) {
2280
+ return /* @__PURE__ */ jsxRuntime.jsx(FlowPhaseContext.Provider, { value: phase, children });
2281
+ }
2282
+ function useFlowPhase() {
2283
+ return react.useContext(FlowPhaseContext);
2284
+ }
2285
+ function StepProgress({ phase }) {
2286
+ const { tokens } = useSwypeConfig();
2287
+ if (phase === "deposit") {
2288
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3, children: [
2289
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.textMuted) }),
2290
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.textMuted), children: "Link" }),
2291
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: lineStyle(tokens.textMuted) }),
2292
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.accent) }),
2293
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.text), children: "Deposit" })
2294
+ ] });
2295
+ }
2296
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3, children: [
2297
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.accent) }),
2298
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.text), children: "Link" }),
2299
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: lineStyle(tokens.textMuted) }),
2300
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.textMuted) }),
2301
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.textMuted), children: "Deposit" })
2302
+ ] });
2303
+ }
2304
+ var containerStyle3 = {
2305
+ display: "flex",
2306
+ alignItems: "center",
2307
+ gap: 6
2308
+ };
2309
+ var dotStyle = (color) => ({
2310
+ width: 8,
2311
+ height: 8,
2312
+ borderRadius: "50%",
2313
+ backgroundColor: color,
2314
+ flexShrink: 0
2315
+ });
2316
+ var lineStyle = (color) => ({
2317
+ width: 32,
2318
+ height: 0,
2319
+ borderTop: `2px dashed ${color}`,
2320
+ opacity: 0.4,
2321
+ flexShrink: 0
2322
+ });
2323
+ var labelStyle = (color) => ({
2324
+ fontSize: "0.82rem",
2325
+ fontWeight: 600,
2326
+ color,
2327
+ whiteSpace: "nowrap"
2328
+ });
2265
2329
  function ScreenHeader({ title, right, onBack, badge }) {
2266
2330
  const { tokens } = useSwypeConfig();
2331
+ const flowPhase = useFlowPhase();
2267
2332
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
2268
2333
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: leftSlotStyle, children: onBack && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onBack, style: backButtonStyle(tokens.text), "aria-label": "Go back", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 18l-6-6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }),
2269
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: centerSlotStyle, children: [
2334
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: centerSlotStyle, children: flowPhase ? /* @__PURE__ */ jsxRuntime.jsx(StepProgress, { phase: flowPhase }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2270
2335
  title && /* @__PURE__ */ jsxRuntime.jsx("span", { style: titleStyle(tokens.text), children: title }),
2271
2336
  badge && /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeStyle(tokens.textMuted), children: badge })
2272
- ] }),
2337
+ ] }) }),
2273
2338
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: rightSlotStyle, children: right })
2274
2339
  ] });
2275
2340
  }
@@ -2311,7 +2376,7 @@ var badgeStyle = (color) => ({
2311
2376
  });
2312
2377
  function PoweredByFooter() {
2313
2378
  const { tokens } = useSwypeConfig();
2314
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3(tokens.textMuted), children: [
2379
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle4(tokens.textMuted), children: [
2315
2380
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
2316
2381
  /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
2317
2382
  "path",
@@ -2325,7 +2390,7 @@ function PoweredByFooter() {
2325
2390
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: pillStyle(tokens.textMuted, tokens.border), children: "Beta Version" })
2326
2391
  ] });
2327
2392
  }
2328
- var containerStyle3 = (color) => ({
2393
+ var containerStyle4 = (color) => ({
2329
2394
  display: "flex",
2330
2395
  flexDirection: "column",
2331
2396
  alignItems: "center",
@@ -2378,7 +2443,7 @@ var buttonStyle = (tokens, disabled) => ({
2378
2443
  opacity: disabled ? 0.5 : 1,
2379
2444
  transition: "filter 0.15s ease, transform 0.15s ease",
2380
2445
  fontFamily: "inherit",
2381
- boxShadow: "0 8px 18px rgba(40, 182, 122, 0.22)",
2446
+ boxShadow: "0 8px 18px rgba(178, 255, 147, 0.35)",
2382
2447
  display: "flex",
2383
2448
  alignItems: "center",
2384
2449
  justifyContent: "center",
@@ -2424,12 +2489,12 @@ var defaultIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "
2424
2489
  ) });
2425
2490
  function InfoBanner({ children, icon }) {
2426
2491
  const { tokens } = useSwypeConfig();
2427
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle4(tokens.accent), children: [
2492
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle5(tokens.accent), children: [
2428
2493
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: iconStyle, children: icon ?? defaultIcon }),
2429
2494
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: textStyle, children })
2430
2495
  ] });
2431
2496
  }
2432
- var containerStyle4 = (accent) => ({
2497
+ var containerStyle5 = (accent) => ({
2433
2498
  display: "flex",
2434
2499
  alignItems: "flex-start",
2435
2500
  gap: 10,
@@ -2447,7 +2512,7 @@ var iconStyle = {
2447
2512
  };
2448
2513
  var textStyle = { flex: 1 };
2449
2514
  function WarningBanner({ title, children }) {
2450
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle5, children: [
2515
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle6, children: [
2451
2516
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle2, children: [
2452
2517
  /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: iconStyle2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z", fill: "#F57C00" }) }),
2453
2518
  /* @__PURE__ */ jsxRuntime.jsx("strong", { children: title })
@@ -2455,7 +2520,7 @@ function WarningBanner({ title, children }) {
2455
2520
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: bodyStyle2, children })
2456
2521
  ] });
2457
2522
  }
2458
- var containerStyle5 = {
2523
+ var containerStyle6 = {
2459
2524
  padding: "14px 16px",
2460
2525
  background: "#FFF8E1",
2461
2526
  border: "1px solid #FFE082",
@@ -2534,7 +2599,7 @@ function OtpInput({ value, onChange, length = 6, disabled }) {
2534
2599
  onChange(pasted);
2535
2600
  focusInput(Math.min(pasted.length, length - 1));
2536
2601
  }, [onChange, length, focusInput]);
2537
- return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle6, children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
2602
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle7, children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
2538
2603
  "input",
2539
2604
  {
2540
2605
  ref: (el) => {
@@ -2555,7 +2620,7 @@ function OtpInput({ value, onChange, length = 6, disabled }) {
2555
2620
  i
2556
2621
  )) });
2557
2622
  }
2558
- var containerStyle6 = {
2623
+ var containerStyle7 = {
2559
2624
  display: "flex",
2560
2625
  gap: 8,
2561
2626
  justifyContent: "center",
@@ -2946,7 +3011,7 @@ function StepList({ steps }) {
2946
3011
  }
2947
3012
  ),
2948
3013
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelContainerStyle, children: [
2949
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(isComplete || isActive ? tokens.text : tokens.textMuted), children: step.label }),
3014
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle2(isComplete || isActive ? tokens.text : tokens.textMuted), children: step.label }),
2950
3015
  step.detail && /* @__PURE__ */ jsxRuntime.jsx("span", { style: detailStyle(tokens.textMuted), children: step.detail })
2951
3016
  ] })
2952
3017
  ] }, i);
@@ -2982,7 +3047,7 @@ var labelContainerStyle = {
2982
3047
  display: "flex",
2983
3048
  flexDirection: "column"
2984
3049
  };
2985
- var labelStyle = (color) => ({
3050
+ var labelStyle2 = (color) => ({
2986
3051
  fontSize: "0.9rem",
2987
3052
  fontWeight: 500,
2988
3053
  color
@@ -3006,7 +3071,7 @@ function SettingsMenu({ onLogout }) {
3006
3071
  document.addEventListener("mousedown", handleClickOutside);
3007
3072
  return () => document.removeEventListener("mousedown", handleClickOutside);
3008
3073
  }, [open]);
3009
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: menuRef, style: containerStyle7, children: [
3074
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: menuRef, style: containerStyle8, children: [
3010
3075
  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: toggle, style: triggerStyle(tokens.text), "aria-label": "Settings", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [
3011
3076
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "5", r: "2", fill: "currentColor" }),
3012
3077
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
@@ -3033,7 +3098,7 @@ function SettingsMenu({ onLogout }) {
3033
3098
  ) })
3034
3099
  ] });
3035
3100
  }
3036
- var containerStyle7 = {
3101
+ var containerStyle8 = {
3037
3102
  position: "relative"
3038
3103
  };
3039
3104
  var triggerStyle = (color) => ({
@@ -3118,7 +3183,7 @@ function LoginScreen({
3118
3183
  ),
3119
3184
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle2, children: [
3120
3185
  /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_LOGO, alt: "Swype", style: logoStyle }),
3121
- /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle(tokens.text), children: "Your Money.\nAny App.\nOne Tap." }),
3186
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle(tokens.text), children: "Your Money. Any App.\nOne Tap." }),
3122
3187
  error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorStyle(tokens), children: error }),
3123
3188
  /* @__PURE__ */ jsxRuntime.jsx(
3124
3189
  "input",
@@ -3160,8 +3225,8 @@ var contentStyle2 = {
3160
3225
  justifyContent: "center"
3161
3226
  };
3162
3227
  var logoStyle = {
3163
- width: 56,
3164
- height: 56
3228
+ width: 50,
3229
+ height: 50
3165
3230
  };
3166
3231
  var headingStyle = (color) => ({
3167
3232
  fontSize: "1.45rem",
@@ -3799,15 +3864,12 @@ var dividerTextStyle = (color) => ({
3799
3864
  });
3800
3865
  var DEFAULT_MAX = 1e7;
3801
3866
  var ABSOLUTE_MIN = 0.01;
3867
+ var PRESETS = [100, 250, 1e3];
3802
3868
  function SetupScreen({
3803
3869
  availableBalance,
3804
- tokenCount,
3805
- sourceName,
3806
3870
  onSetupOneTap,
3807
3871
  onBack,
3808
- onLogout,
3809
3872
  onAdvanced,
3810
- selectedSourceLabel,
3811
3873
  loading,
3812
3874
  error
3813
3875
  }) {
@@ -3830,6 +3892,14 @@ function SetupScreen({
3830
3892
  }
3831
3893
  setEditing(false);
3832
3894
  }, [inputValue, effectiveMax, effectiveMin]);
3895
+ const selectPreset = (value) => {
3896
+ setLimit(Math.min(value, effectiveMax));
3897
+ };
3898
+ const selectMax = () => {
3899
+ setLimit(Math.min(availableBalance, effectiveMax));
3900
+ };
3901
+ const isPresetActive = (value) => Math.abs(limit - value) < 5e-3;
3902
+ const isMaxActive = Math.abs(limit - Math.min(availableBalance, effectiveMax)) < 5e-3 && !PRESETS.some((p) => isPresetActive(p));
3833
3903
  return /* @__PURE__ */ jsxRuntime.jsxs(
3834
3904
  ScreenLayout,
3835
3905
  {
@@ -3846,45 +3916,11 @@ function SetupScreen({
3846
3916
  /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
3847
3917
  ] }),
3848
3918
  children: [
3849
- /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Swype Setup", onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
3919
+ /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
3850
3920
  /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Set Spending Limit" }),
3851
3921
  error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle3(tokens), children: error }),
3852
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: balanceRowStyle, children: [
3853
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: balanceLeftStyle, children: [
3854
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: coinIconStyle(tokens.accent), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
3855
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
3856
- /* @__PURE__ */ jsxRuntime.jsx("text", { x: "12", y: "16", textAnchor: "middle", fontSize: "12", fill: "#fff", fontWeight: "700", children: "$" })
3857
- ] }) }),
3858
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3859
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: balanceLabelStyle(tokens.textMuted), children: "Available" }),
3860
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: balanceValueStyle(tokens.text), children: [
3861
- "$",
3862
- availableBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
3863
- ] })
3864
- ] })
3865
- ] }),
3866
- tokenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
3867
- "button",
3868
- {
3869
- type: "button",
3870
- onClick: onAdvanced,
3871
- style: tokenBadgeButtonStyle(tokens, !!onAdvanced),
3872
- children: [
3873
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenDotStyle(tokens.accent) }),
3874
- tokenCount,
3875
- " ",
3876
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronStyle, children: ">" })
3877
- ]
3878
- }
3879
- )
3880
- ] }),
3881
- selectedSourceLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: selectedSourceStyle(tokens.textSecondary), children: [
3882
- "Source: ",
3883
- /* @__PURE__ */ jsxRuntime.jsx("strong", { children: selectedSourceLabel })
3884
- ] }),
3885
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitSectionStyle, children: [
3886
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: limitLabelStyle(tokens.textMuted), children: "Your One-Tap limit" }),
3887
- editing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitValueStyle(tokens.text), children: [
3922
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle, children: [
3923
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: editing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitValueStyle(tokens.text), children: [
3888
3924
  "$",
3889
3925
  /* @__PURE__ */ jsxRuntime.jsx(
3890
3926
  "input",
@@ -3909,12 +3945,53 @@ function SetupScreen({
3909
3945
  onClick: startEditing,
3910
3946
  children: [
3911
3947
  "$",
3912
- limit.toFixed(2),
3913
- /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: pencilIconStyle(tokens.textMuted), children: [
3914
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.474 5.408l2.118 2.117m-.756-3.982L12.109 9.27a2.118 2.118 0 00-.58 1.082L11 13l2.648-.53c.41-.082.786-.283 1.082-.579l5.727-5.727a1.853 1.853 0 10-2.621-2.621z", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }),
3915
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2h3", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })
3916
- ] })
3948
+ limit.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
3949
+ ]
3950
+ }
3951
+ ) }),
3952
+ /* @__PURE__ */ jsxRuntime.jsxs(
3953
+ "button",
3954
+ {
3955
+ type: "button",
3956
+ onClick: onAdvanced,
3957
+ style: tokenIconButtonStyle(!!onAdvanced),
3958
+ children: [
3959
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenIconWrapStyle, children: [
3960
+ /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
3961
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
3962
+ /* @__PURE__ */ jsxRuntime.jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
3963
+ ] }),
3964
+ /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: checkBadgeStyle, children: [
3965
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "8", fill: "#2775CA" }),
3966
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8l2 2 4-4", stroke: "#fff", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
3967
+ ] })
3968
+ ] }),
3969
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6", stroke: tokens.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
3970
+ ]
3971
+ }
3972
+ )
3973
+ ] }),
3974
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: presetsRowStyle, children: [
3975
+ PRESETS.map((value) => /* @__PURE__ */ jsxRuntime.jsxs(
3976
+ "button",
3977
+ {
3978
+ type: "button",
3979
+ onClick: () => selectPreset(value),
3980
+ style: presetButtonStyle(tokens, isPresetActive(value)),
3981
+ children: [
3982
+ "$",
3983
+ value.toLocaleString()
3917
3984
  ]
3985
+ },
3986
+ value
3987
+ )),
3988
+ /* @__PURE__ */ jsxRuntime.jsx(
3989
+ "button",
3990
+ {
3991
+ type: "button",
3992
+ onClick: selectMax,
3993
+ style: presetButtonStyle(tokens, isMaxActive),
3994
+ children: "Max"
3918
3995
  }
3919
3996
  )
3920
3997
  ] })
@@ -3923,11 +4000,11 @@ function SetupScreen({
3923
4000
  );
3924
4001
  }
3925
4002
  var headingStyle5 = (color) => ({
3926
- fontSize: "1.3rem",
4003
+ fontSize: "1.1rem",
3927
4004
  fontWeight: 700,
3928
4005
  letterSpacing: "-0.02em",
3929
4006
  color,
3930
- margin: "24px 0 20px",
4007
+ margin: "8px 0 24px",
3931
4008
  textAlign: "center"
3932
4009
  });
3933
4010
  var errorBannerStyle3 = (tokens) => ({
@@ -3940,148 +4017,113 @@ var errorBannerStyle3 = (tokens) => ({
3940
4017
  marginBottom: 14,
3941
4018
  lineHeight: 1.5
3942
4019
  });
3943
- var balanceRowStyle = {
4020
+ var amountRowStyle = {
3944
4021
  display: "flex",
3945
4022
  alignItems: "center",
3946
4023
  justifyContent: "space-between",
3947
- marginBottom: 24
3948
- };
3949
- var balanceLeftStyle = {
3950
- display: "flex",
3951
- alignItems: "center",
3952
- gap: 10
3953
- };
3954
- var coinIconStyle = (color) => ({
3955
- color,
3956
- display: "flex",
3957
- alignItems: "center"
3958
- });
3959
- var balanceLabelStyle = (color) => ({
3960
- fontSize: "0.72rem",
3961
- color,
3962
- fontWeight: 500
3963
- });
3964
- var balanceValueStyle = (color) => ({
3965
- fontSize: "1.1rem",
3966
- fontWeight: 700,
3967
- color
3968
- });
3969
- var tokenBadgeButtonStyle = (tokens, clickable) => ({
3970
- display: "flex",
3971
- alignItems: "center",
3972
- gap: 4,
3973
- fontSize: "0.78rem",
3974
- color: tokens.textMuted,
3975
- border: `1px solid ${tokens.border}`,
3976
- borderRadius: 999,
3977
- padding: "4px 10px",
3978
- background: "transparent",
3979
- fontFamily: "inherit",
3980
- cursor: clickable ? "pointer" : "default"
3981
- });
3982
- var selectedSourceStyle = (color) => ({
3983
- fontSize: "0.8rem",
3984
- color,
3985
- marginBottom: 16,
3986
- textAlign: "center"
3987
- });
3988
- var tokenDotStyle = (color) => ({
3989
- width: 8,
3990
- height: 8,
3991
- borderRadius: "50%",
3992
- background: color,
3993
- display: "inline-block"
3994
- });
3995
- var chevronStyle = { fontSize: "0.68rem", marginLeft: 2 };
3996
- var limitSectionStyle = {
3997
- textAlign: "center",
3998
- marginBottom: 24
4024
+ marginBottom: 24,
4025
+ gap: 12
3999
4026
  };
4000
- var limitLabelStyle = (color) => ({
4001
- fontSize: "0.8rem",
4002
- color,
4003
- marginBottom: 4
4004
- });
4005
4027
  var limitValueStyle = (color) => ({
4006
- fontSize: "2.2rem",
4028
+ fontSize: "2.4rem",
4007
4029
  fontWeight: 700,
4008
4030
  color,
4009
- marginBottom: 12
4031
+ letterSpacing: "-0.02em",
4032
+ display: "flex",
4033
+ alignItems: "baseline"
4010
4034
  });
4011
4035
  var editableLimitStyle = (color) => ({
4012
4036
  ...limitValueStyle(color),
4013
- cursor: "pointer",
4014
- display: "inline-flex",
4015
- alignItems: "center",
4016
- gap: 6
4017
- });
4018
- var pencilIconStyle = (color) => ({
4019
- color,
4020
- opacity: 0.6,
4021
- flexShrink: 0
4037
+ cursor: "pointer"
4022
4038
  });
4023
4039
  var limitInputStyle = (color) => ({
4024
- fontSize: "2.2rem",
4040
+ fontSize: "2.4rem",
4025
4041
  fontWeight: 700,
4026
4042
  color,
4027
4043
  background: "transparent",
4028
4044
  border: "none",
4029
4045
  borderBottom: "2px solid currentColor",
4030
4046
  outline: "none",
4031
- textAlign: "center",
4032
- width: "5ch",
4047
+ width: "6ch",
4033
4048
  fontFamily: "inherit",
4034
- padding: 0
4049
+ padding: 0,
4050
+ letterSpacing: "-0.02em"
4051
+ });
4052
+ var tokenIconButtonStyle = (clickable) => ({
4053
+ display: "flex",
4054
+ alignItems: "center",
4055
+ gap: 4,
4056
+ background: "transparent",
4057
+ border: "none",
4058
+ cursor: clickable ? "pointer" : "default",
4059
+ padding: 0,
4060
+ flexShrink: 0
4061
+ });
4062
+ var tokenIconWrapStyle = {
4063
+ position: "relative",
4064
+ width: 36,
4065
+ height: 36
4066
+ };
4067
+ var checkBadgeStyle = {
4068
+ position: "absolute",
4069
+ bottom: -1,
4070
+ right: -3
4071
+ };
4072
+ var presetsRowStyle = {
4073
+ display: "flex",
4074
+ gap: 10,
4075
+ marginBottom: 24
4076
+ };
4077
+ var presetButtonStyle = (tokens, active) => ({
4078
+ flex: 1,
4079
+ padding: "10px 0",
4080
+ borderRadius: 999,
4081
+ fontSize: "0.88rem",
4082
+ fontWeight: 600,
4083
+ fontFamily: "inherit",
4084
+ cursor: "pointer",
4085
+ transition: "background 0.15s ease, border-color 0.15s ease",
4086
+ ...active ? {
4087
+ background: `${tokens.accent}30`,
4088
+ border: `1.5px solid ${tokens.accent}`,
4089
+ color: tokens.text
4090
+ } : {
4091
+ background: "transparent",
4092
+ border: `1.5px solid ${tokens.border}`,
4093
+ color: tokens.text
4094
+ }
4035
4095
  });
4036
4096
  function SetupStatusScreen({
4037
4097
  complete,
4038
- limit,
4039
- tokensApproved,
4040
- merchantName,
4041
4098
  onContinue,
4042
4099
  onLogout,
4043
4100
  error
4044
4101
  }) {
4045
4102
  const { tokens } = useSwypeConfig();
4046
- const steps = complete ? [
4047
- {
4048
- label: "One-Tap ready",
4049
- detail: `$${limit} limit \xB7 ${tokensApproved} token${tokensApproved !== 1 ? "s" : ""} approved`,
4050
- status: "complete"
4051
- },
4052
- { label: "Done", status: "complete" }
4053
- ] : [
4054
- {
4055
- label: "Setting up Wallet",
4056
- status: "active"
4057
- },
4103
+ if (complete) {
4104
+ return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
4105
+ /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack: onContinue }),
4106
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
4107
+ /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle }),
4108
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Done!" }),
4109
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
4110
+ ] })
4111
+ ] });
4112
+ }
4113
+ const steps = [
4114
+ { label: "Setting up Wallet", status: "active" },
4058
4115
  { label: "Done", status: "pending" }
4059
4116
  ];
4060
- return /* @__PURE__ */ jsxRuntime.jsxs(
4061
- ScreenLayout,
4062
- {
4063
- footer: complete ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4064
- /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onContinue, children: merchantName ? `Return to ${merchantName}` : "Continue" }),
4065
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: swipeHintStyle(tokens.textMuted), children: "Swipe to deposit \u2014 no approvals needed." })
4066
- ] }) : void 0,
4067
- children: [
4068
- /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
4069
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
4070
- complete ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4071
- /* @__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 }) }) }),
4072
- /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "You're all set!" })
4073
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4074
- /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
4075
- /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." })
4076
- ] }),
4077
- error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error }),
4078
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
4079
- !complete && /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" }),
4080
- complete && /* @__PURE__ */ jsxRuntime.jsx("p", { style: readyHintStyle(tokens.textSecondary), children: "You can now deposit instantly from any partner app." })
4081
- ] })
4082
- ]
4083
- }
4084
- );
4117
+ return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
4118
+ /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
4119
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
4120
+ /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
4121
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." }),
4122
+ error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error }),
4123
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
4124
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" })
4125
+ ] })
4126
+ ] });
4085
4127
  }
4086
4128
  var contentStyle5 = {
4087
4129
  flex: 1,
@@ -4092,12 +4134,23 @@ var contentStyle5 = {
4092
4134
  textAlign: "center",
4093
4135
  padding: "0 24px 32px"
4094
4136
  };
4137
+ var mascotStyle = {
4138
+ width: 56,
4139
+ height: 56
4140
+ };
4095
4141
  var headingStyle6 = (color) => ({
4096
4142
  fontSize: "1.45rem",
4097
4143
  fontWeight: 700,
4098
4144
  letterSpacing: "-0.02em",
4099
4145
  color,
4100
- margin: "20px 0 16px"
4146
+ margin: "20px 0 8px"
4147
+ });
4148
+ var subtitleStyle3 = (color) => ({
4149
+ fontSize: "0.9rem",
4150
+ color,
4151
+ margin: "0 0 28px",
4152
+ lineHeight: 1.5,
4153
+ maxWidth: 260
4101
4154
  });
4102
4155
  var errorBannerStyle4 = (tokens) => ({
4103
4156
  background: tokens.errorBg,
@@ -4122,19 +4175,6 @@ var waitHintStyle = (color) => ({
4122
4175
  color,
4123
4176
  margin: 0
4124
4177
  });
4125
- var readyHintStyle = (color) => ({
4126
- fontSize: "0.88rem",
4127
- color,
4128
- margin: "8px 0 0",
4129
- lineHeight: 1.5,
4130
- maxWidth: 280
4131
- });
4132
- var swipeHintStyle = (color) => ({
4133
- textAlign: "center",
4134
- fontSize: "0.8rem",
4135
- color,
4136
- margin: "12px 0 0"
4137
- });
4138
4178
  var MIN_DEPOSIT = 0.25;
4139
4179
  function DepositScreen({
4140
4180
  merchantName,
@@ -4145,8 +4185,6 @@ function DepositScreen({
4145
4185
  remainingLimit,
4146
4186
  tokenCount,
4147
4187
  initialAmount,
4148
- estimatedFeePct,
4149
- estimatedFeeUsd,
4150
4188
  processing,
4151
4189
  error,
4152
4190
  onDeposit,
@@ -4195,19 +4233,19 @@ function DepositScreen({
4195
4233
  onAddProvider
4196
4234
  }
4197
4235
  ),
4198
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: amountDisplayStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: amountStyle({ ...tokens, dimmed: true }), children: [
4236
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: lowBalanceAmountDisplayStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: lowBalanceAmountStyle, children: [
4199
4237
  "$",
4200
4238
  amount.toFixed(2)
4201
4239
  ] }) }),
4202
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: balanceRowStyle2, children: [
4203
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: balanceLeftStyle2, children: [
4204
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: coinIconStyle2(tokens.warning), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
4240
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: lowBalanceRowStyle, children: [
4241
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: lowBalanceLeftStyle, children: [
4242
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: lowBalanceCoinStyle(tokens.warning), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
4205
4243
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
4206
4244
  /* @__PURE__ */ jsxRuntime.jsx("text", { x: "12", y: "16", textAnchor: "middle", fontSize: "12", fill: "#fff", fontWeight: "700", children: "$" })
4207
4245
  ] }) }),
4208
4246
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4209
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: balanceLabelStyle2(tokens.textMuted), children: selectedSourceLabel ?? "Available" }),
4210
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...balanceAmountStyle, color: tokens.warning }, children: [
4247
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: lowBalanceLabelStyle(tokens.textMuted), children: selectedSourceLabel ?? "Available" }),
4248
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "1rem", fontWeight: 700, color: tokens.warning }, children: [
4211
4249
  "$",
4212
4250
  availableBalance.toFixed(2)
4213
4251
  ] })
@@ -4226,6 +4264,7 @@ function DepositScreen({
4226
4264
  }
4227
4265
  );
4228
4266
  }
4267
+ const providerLogo = KNOWN_LOGOS[sourceName.toLowerCase()];
4229
4268
  return /* @__PURE__ */ jsxRuntime.jsxs(
4230
4269
  ScreenLayout,
4231
4270
  {
@@ -4239,138 +4278,150 @@ function DepositScreen({
4239
4278
  remainingLimit.toFixed(2),
4240
4279
  ". Increase your limit to continue."
4241
4280
  ] })
4242
- ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: [
4243
- "Deposit $",
4244
- amount.toFixed(2)
4245
- ] }) }),
4281
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: "Confirm" }),
4246
4282
  /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
4247
4283
  ] }),
4248
4284
  children: [
4249
- /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: headerTitle, onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
4250
- /* @__PURE__ */ jsxRuntime.jsx(
4251
- SourceCard,
4252
- {
4253
- name: sourceName,
4254
- address: sourceAddress,
4255
- verified: sourceVerified,
4256
- accounts,
4257
- selectedAccountId,
4258
- depositAmount: amount,
4259
- onSelectAccount,
4260
- onAuthorizeAccount,
4261
- onAddProvider
4262
- }
4263
- ),
4264
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: amountDisplayStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: amountStyle(tokens), children: [
4265
- "$",
4266
- amount.toFixed(2)
4267
- ] }) }),
4268
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: balanceRowStyle2, children: [
4269
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: balanceLeftStyle2, children: [
4270
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: coinIconStyle2(tokens.accent), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
4271
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
4272
- /* @__PURE__ */ jsxRuntime.jsx("text", { x: "12", y: "16", textAnchor: "middle", fontSize: "12", fill: "#fff", fontWeight: "700", children: "$" })
4273
- ] }) }),
4274
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
4275
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: balanceLabelStyle2(tokens.textMuted), children: selectedSourceLabel ?? `Paying from ${sourceName}` }),
4276
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: balanceAmountStyle, children: [
4277
- "$",
4278
- availableBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
4279
- ] })
4280
- ] })
4285
+ /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
4286
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: mascotWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle2 }) }),
4287
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositCardStyle(tokens), children: [
4288
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle(tokens.textMuted), children: "Depositing" }),
4289
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle2, children: [
4290
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountValueStyle(tokens.text), children: [
4291
+ "$",
4292
+ amount.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 2 })
4293
+ ] }),
4294
+ /* @__PURE__ */ jsxRuntime.jsxs(
4295
+ "button",
4296
+ {
4297
+ type: "button",
4298
+ onClick: onSelectToken,
4299
+ style: tokenIconButtonStyle2(!!onSelectToken),
4300
+ children: [
4301
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenIconWrapStyle2, children: [
4302
+ /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
4303
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
4304
+ /* @__PURE__ */ jsxRuntime.jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
4305
+ ] }),
4306
+ /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: checkBadgeStyle2, children: [
4307
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "8", fill: "#2775CA" }),
4308
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8l2 2 4-4", stroke: "#fff", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
4309
+ ] })
4310
+ ] }),
4311
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6", stroke: tokens.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
4312
+ ]
4313
+ }
4314
+ )
4281
4315
  ] }),
4282
- tokenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
4283
- "button",
4284
- {
4285
- type: "button",
4286
- onClick: onSelectToken,
4287
- style: tokenBadgeButtonStyle2(tokens, !!onSelectToken),
4288
- children: [
4289
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenDotStyle2(tokens.accent) }),
4290
- tokenCount,
4291
- " ",
4292
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronInlineStyle, children: ">" })
4293
- ]
4294
- }
4295
- )
4316
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: walletBalanceRowStyle, children: [
4317
+ providerLogo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: providerLogo, alt: sourceName, style: providerLogoStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: providerFallbackStyle(tokens.textMuted), children: sourceName.charAt(0) }),
4318
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { style: walletBalanceStyle(tokens.text), children: [
4319
+ "$",
4320
+ availableBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
4321
+ ] }),
4322
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.4 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5-5 5 5M7 14l5 5 5-5", stroke: tokens.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
4323
+ ] })
4296
4324
  ] }),
4297
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: detailsStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: detailRowStyle(tokens.textMuted), children: [
4298
- "Remaining limit: ",
4325
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: spendingLimitStyle(tokens.textMuted), children: [
4326
+ "Spending Limit",
4327
+ " ",
4299
4328
  /* @__PURE__ */ jsxRuntime.jsxs("strong", { style: { color: tokens.text }, children: [
4300
4329
  "$",
4301
- remainingLimit.toFixed(2)
4330
+ remainingLimit.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 })
4302
4331
  ] })
4303
- ] }) }),
4332
+ ] }),
4304
4333
  error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error })
4305
4334
  ]
4306
4335
  }
4307
4336
  );
4308
4337
  }
4309
- var amountDisplayStyle = {
4310
- textAlign: "center",
4311
- padding: "20px 0 8px"
4312
- };
4313
- var amountStyle = (opts) => ({
4314
- fontSize: "2.5rem",
4315
- fontWeight: 700,
4316
- color: opts.dimmed ? "#ccc" : opts.text ?? "#12222b",
4317
- letterSpacing: "-0.02em"
4318
- });
4319
- var balanceRowStyle2 = {
4338
+ var mascotWrapStyle = {
4320
4339
  display: "flex",
4321
- alignItems: "center",
4322
- justifyContent: "space-between",
4340
+ justifyContent: "center",
4323
4341
  marginBottom: 16
4324
4342
  };
4325
- var balanceLeftStyle2 = {
4326
- display: "flex",
4327
- alignItems: "center",
4328
- gap: 10
4343
+ var mascotStyle2 = {
4344
+ width: 36,
4345
+ height: 36
4329
4346
  };
4330
- var coinIconStyle2 = (color) => ({
4331
- color,
4332
- display: "flex",
4333
- alignItems: "center"
4347
+ var depositCardStyle = (tokens) => ({
4348
+ background: tokens.bgInput,
4349
+ border: `1px solid ${tokens.border}`,
4350
+ borderRadius: tokens.radiusLg,
4351
+ padding: "16px 20px",
4352
+ marginBottom: 20
4334
4353
  });
4335
- var balanceLabelStyle2 = (color) => ({
4336
- fontSize: "0.72rem",
4354
+ var depositLabelStyle = (color) => ({
4355
+ fontSize: "0.75rem",
4356
+ fontWeight: 500,
4337
4357
  color,
4338
- fontWeight: 500
4358
+ marginBottom: 4
4339
4359
  });
4340
- var balanceAmountStyle = {
4341
- fontSize: "1rem",
4342
- fontWeight: 700
4360
+ var amountRowStyle2 = {
4361
+ display: "flex",
4362
+ alignItems: "center",
4363
+ justifyContent: "space-between",
4364
+ marginBottom: 12
4343
4365
  };
4344
- var tokenBadgeButtonStyle2 = (tokens, clickable) => ({
4366
+ var amountValueStyle = (color) => ({
4367
+ fontSize: "2.4rem",
4368
+ fontWeight: 700,
4369
+ letterSpacing: "-0.02em",
4370
+ color
4371
+ });
4372
+ var tokenIconButtonStyle2 = (clickable) => ({
4345
4373
  display: "flex",
4346
4374
  alignItems: "center",
4347
4375
  gap: 4,
4348
- fontSize: "0.78rem",
4349
- color: tokens.textMuted,
4350
- border: `1px solid ${tokens.border}`,
4351
- borderRadius: 999,
4352
- padding: "4px 10px",
4353
4376
  background: "transparent",
4354
- fontFamily: "inherit",
4355
- cursor: clickable ? "pointer" : "default"
4377
+ border: "none",
4378
+ cursor: clickable ? "pointer" : "default",
4379
+ padding: 0,
4380
+ flexShrink: 0
4356
4381
  });
4357
- var tokenDotStyle2 = (color) => ({
4358
- width: 8,
4359
- height: 8,
4382
+ var tokenIconWrapStyle2 = {
4383
+ position: "relative",
4384
+ width: 36,
4385
+ height: 36
4386
+ };
4387
+ var checkBadgeStyle2 = {
4388
+ position: "absolute",
4389
+ bottom: -1,
4390
+ right: -3
4391
+ };
4392
+ var walletBalanceRowStyle = {
4393
+ display: "flex",
4394
+ alignItems: "center",
4395
+ gap: 8
4396
+ };
4397
+ var providerLogoStyle = {
4398
+ width: 18,
4399
+ height: 18,
4400
+ borderRadius: "50%",
4401
+ objectFit: "contain"
4402
+ };
4403
+ var providerFallbackStyle = (color) => ({
4404
+ width: 18,
4405
+ height: 18,
4360
4406
  borderRadius: "50%",
4361
- background: color,
4362
- display: "inline-block"
4407
+ display: "flex",
4408
+ alignItems: "center",
4409
+ justifyContent: "center",
4410
+ fontSize: "0.65rem",
4411
+ fontWeight: 700,
4412
+ color,
4413
+ flexShrink: 0
4414
+ });
4415
+ var walletBalanceStyle = (color) => ({
4416
+ fontSize: "0.9rem",
4417
+ fontWeight: 600,
4418
+ color
4363
4419
  });
4364
- var chevronInlineStyle = { fontSize: "0.68rem", marginLeft: 2 };
4365
- var detailsStyle = {
4420
+ var spendingLimitStyle = (color) => ({
4366
4421
  textAlign: "center",
4367
- marginTop: 12,
4368
- marginBottom: 8
4369
- };
4370
- var detailRowStyle = (color) => ({
4371
- fontSize: "0.8rem",
4422
+ fontSize: "0.84rem",
4372
4423
  color,
4373
- marginBottom: 4
4424
+ marginBottom: 8
4374
4425
  });
4375
4426
  var errorBannerStyle5 = (tokens) => ({
4376
4427
  background: tokens.errorBg,
@@ -4398,6 +4449,37 @@ var switchHintStyle = (color) => ({
4398
4449
  var outlineBtnWrapStyle = {
4399
4450
  marginBottom: 8
4400
4451
  };
4452
+ var lowBalanceAmountDisplayStyle = {
4453
+ textAlign: "center",
4454
+ padding: "20px 0 8px"
4455
+ };
4456
+ var lowBalanceAmountStyle = {
4457
+ fontSize: "2.5rem",
4458
+ fontWeight: 700,
4459
+ color: "#ccc",
4460
+ letterSpacing: "-0.02em"
4461
+ };
4462
+ var lowBalanceRowStyle = {
4463
+ display: "flex",
4464
+ alignItems: "center",
4465
+ justifyContent: "space-between",
4466
+ marginBottom: 16
4467
+ };
4468
+ var lowBalanceLeftStyle = {
4469
+ display: "flex",
4470
+ alignItems: "center",
4471
+ gap: 10
4472
+ };
4473
+ var lowBalanceCoinStyle = (color) => ({
4474
+ color,
4475
+ display: "flex",
4476
+ alignItems: "center"
4477
+ });
4478
+ var lowBalanceLabelStyle = (color) => ({
4479
+ fontSize: "0.72rem",
4480
+ color,
4481
+ fontWeight: 500
4482
+ });
4401
4483
  function SuccessScreen({
4402
4484
  amount,
4403
4485
  currency,
@@ -4467,14 +4549,14 @@ function SuccessScreen({
4467
4549
  amount.toFixed(2),
4468
4550
  " deposited"
4469
4551
  ] }),
4470
- merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle3(tokens.textSecondary), children: [
4552
+ merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle4(tokens.textSecondary), children: [
4471
4553
  "to ",
4472
4554
  merchantName
4473
4555
  ] })
4474
4556
  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4475
4557
  /* @__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 }) }) }),
4476
4558
  /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle7(tokens.text), children: "Transfer failed" }),
4477
- error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(tokens.error), children: error })
4559
+ error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.error), children: error })
4478
4560
  ] }),
4479
4561
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryCardStyle(tokens), children: [
4480
4562
  sourceName && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryRowStyle, children: [
@@ -4520,7 +4602,7 @@ var headingStyle7 = (color) => ({
4520
4602
  color,
4521
4603
  margin: "20px 0 4px"
4522
4604
  });
4523
- var subtitleStyle3 = (color) => ({
4605
+ var subtitleStyle4 = (color) => ({
4524
4606
  fontSize: "0.9rem",
4525
4607
  color,
4526
4608
  margin: "0 0 20px"
@@ -4628,8 +4710,8 @@ function SelectSourceScreen({
4628
4710
  right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
4629
4711
  }
4630
4712
  ),
4631
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textMuted), children: "Choose which chain and token to pay from." }),
4632
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle2(tokens.textSecondary), children: "Chain" }),
4713
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textMuted), children: "Choose which chain and token to pay from." }),
4714
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Chain" }),
4633
4715
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: choices.map((chain) => {
4634
4716
  const isSelected = chain.chainName === selectedChainName;
4635
4717
  const isRecommended = chain.chainName === recommended?.chainName;
@@ -4657,7 +4739,7 @@ function SelectSourceScreen({
4657
4739
  );
4658
4740
  }) }),
4659
4741
  tokenChoices.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4660
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle2(tokens.textSecondary), children: "Token" }),
4742
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Token" }),
4661
4743
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: tokenChoices.map((token) => {
4662
4744
  const isSelected = token.tokenSymbol === selectedTokenSymbol;
4663
4745
  return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4685,13 +4767,13 @@ function SelectSourceScreen({
4685
4767
  }
4686
4768
  );
4687
4769
  }
4688
- var subtitleStyle4 = (color) => ({
4770
+ var subtitleStyle5 = (color) => ({
4689
4771
  fontSize: "0.85rem",
4690
4772
  color,
4691
4773
  margin: "0 0 20px",
4692
4774
  lineHeight: 1.5
4693
4775
  });
4694
- var labelStyle2 = (color) => ({
4776
+ var labelStyle3 = (color) => ({
4695
4777
  display: "block",
4696
4778
  fontSize: "0.75rem",
4697
4779
  fontWeight: 600,
@@ -4801,8 +4883,8 @@ function AdvancedSourceScreen({
4801
4883
  }
4802
4884
  ),
4803
4885
  /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
4804
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
4805
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Select tokens to approve" }),
4886
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
4887
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle4(tokens.textSecondary), children: "Select tokens to approve" }),
4806
4888
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: chainListStyle, children: choices.map((chain) => {
4807
4889
  const isExpanded = expandedChain === chain.chainName;
4808
4890
  const chainHasSelection = localChain === chain.chainName;
@@ -4871,13 +4953,13 @@ var headingStyle8 = (color) => ({
4871
4953
  color,
4872
4954
  margin: "8px 0 4px"
4873
4955
  });
4874
- var subtitleStyle5 = (color) => ({
4956
+ var subtitleStyle6 = (color) => ({
4875
4957
  fontSize: "0.86rem",
4876
4958
  color,
4877
4959
  margin: "0 0 20px",
4878
4960
  lineHeight: 1.5
4879
4961
  });
4880
- var labelStyle3 = (color) => ({
4962
+ var labelStyle4 = (color) => ({
4881
4963
  display: "block",
4882
4964
  fontSize: "0.75rem",
4883
4965
  fontWeight: 600,
@@ -4992,19 +5074,17 @@ function buildSteps(phase) {
4992
5074
  }
4993
5075
  function TransferStatusScreen({
4994
5076
  phase,
4995
- error,
4996
- onLogout
5077
+ error
4997
5078
  }) {
4998
5079
  const { tokens } = useSwypeConfig();
4999
5080
  const steps = buildSteps(phase);
5000
- return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
5001
- /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
5081
+ return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
5082
+ /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, {}),
5002
5083
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
5003
- /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
5004
- /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: "Processing Transfer..." }),
5084
+ /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 64 }),
5085
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: "Depositing your money..." }),
5005
5086
  error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle6(tokens), children: error }),
5006
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle2, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
5007
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle2(tokens.textMuted), children: "Usually takes a few seconds" })
5087
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle2, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) })
5008
5088
  ] })
5009
5089
  ] });
5010
5090
  }
@@ -5042,11 +5122,6 @@ var stepsWrapStyle2 = {
5042
5122
  textAlign: "left",
5043
5123
  marginBottom: 16
5044
5124
  };
5045
- var waitHintStyle2 = (color) => ({
5046
- fontSize: "0.82rem",
5047
- color,
5048
- margin: 0
5049
- });
5050
5125
 
5051
5126
  // src/deeplink.ts
5052
5127
  var IFRAME_CLEANUP_DELAY_MS = 3e3;
@@ -5103,14 +5178,15 @@ function OpenWalletScreen({
5103
5178
  displayName
5104
5179
  ] }),
5105
5180
  error && onRetryStatus && /* @__PURE__ */ jsxRuntime.jsx(OutlineButton, { onClick: onRetryStatus, children: "Retry status check" }),
5106
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle(tokens.textMuted), children: loading ? "Preparing authorization..." : error ? "Retry the status check after returning to the browser, or reopen your wallet if needed." : "If your wallet didn't open automatically, tap the button above" })
5181
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle(tokens.textMuted), children: loading ? "Preparing authorization..." : error ? "Retry the status check after returning to the browser, or reopen your wallet if needed." : "If your wallet didn't open automatically, tap the button above" }),
5182
+ /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
5107
5183
  ] }),
5108
5184
  children: [
5109
5185
  /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
5110
5186
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle8, children: [
5111
- logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
5187
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: logoCircleStyle(tokens.bgInput), children: logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 32 }) }),
5112
5188
  /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
5113
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
5189
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
5114
5190
  !loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: waitingBadgeStyle(tokens), children: [
5115
5191
  /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
5116
5192
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for authorization..." })
@@ -5134,10 +5210,20 @@ var footerContentStyle = {
5134
5210
  flexDirection: "column",
5135
5211
  gap: 12
5136
5212
  };
5213
+ var logoCircleStyle = (bg) => ({
5214
+ width: 80,
5215
+ height: 80,
5216
+ borderRadius: "50%",
5217
+ background: bg,
5218
+ display: "flex",
5219
+ alignItems: "center",
5220
+ justifyContent: "center",
5221
+ flexShrink: 0
5222
+ });
5137
5223
  var logoStyle2 = {
5138
- width: 56,
5139
- height: 56,
5140
- borderRadius: 14,
5224
+ width: 48,
5225
+ height: 48,
5226
+ borderRadius: 12,
5141
5227
  objectFit: "contain"
5142
5228
  };
5143
5229
  var headingStyle10 = (color) => ({
@@ -5147,7 +5233,7 @@ var headingStyle10 = (color) => ({
5147
5233
  color,
5148
5234
  margin: "20px 0 8px"
5149
5235
  });
5150
- var subtitleStyle6 = (color) => ({
5236
+ var subtitleStyle7 = (color) => ({
5151
5237
  fontSize: "0.9rem",
5152
5238
  color,
5153
5239
  margin: "0 0 24px",
@@ -5194,7 +5280,7 @@ function ConfirmSignScreen({
5194
5280
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle9, children: [
5195
5281
  logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle3 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
5196
5282
  /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
5197
- /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle7(tokens.textSecondary), children: [
5283
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle8(tokens.textSecondary), children: [
5198
5284
  displayName,
5199
5285
  " approved the connection. Tap below to confirm your payment."
5200
5286
  ] }),
@@ -5229,7 +5315,7 @@ var headingStyle11 = (color) => ({
5229
5315
  color,
5230
5316
  margin: "20px 0 8px"
5231
5317
  });
5232
- var subtitleStyle7 = (color) => ({
5318
+ var subtitleStyle8 = (color) => ({
5233
5319
  fontSize: "0.9rem",
5234
5320
  color,
5235
5321
  margin: "0 0 24px",
@@ -5327,7 +5413,7 @@ function TokenPickerScreen({
5327
5413
  ] }),
5328
5414
  children: [
5329
5415
  /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Select Token", onBack }),
5330
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(themeTokens.textSecondary), children: "Choose a token to deposit with. Tokens that haven't been authorized yet will require a one-time wallet approval." }),
5416
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle9(themeTokens.textSecondary), children: "Choose a token to deposit with. Tokens that haven't been authorized yet will require a one-time wallet approval." }),
5331
5417
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: chainListStyle2, children: [...chainGroups.entries()].map(([chainName, chainEntries]) => {
5332
5418
  const isExpanded = expandedChain === chainName;
5333
5419
  const chainTotal = chainEntries.reduce((sum, e) => sum + e.balance, 0);
@@ -5346,7 +5432,7 @@ function TokenPickerScreen({
5346
5432
  chainTotal.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
5347
5433
  ] })
5348
5434
  ] }),
5349
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronStyle2(themeTokens.textMuted), children: isExpanded ? "\u25BE" : "\u25B8" })
5435
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronStyle(themeTokens.textMuted), children: isExpanded ? "\u25BE" : "\u25B8" })
5350
5436
  ]
5351
5437
  }
5352
5438
  ),
@@ -5383,7 +5469,7 @@ function TokenPickerScreen({
5383
5469
  }
5384
5470
  );
5385
5471
  }
5386
- var subtitleStyle8 = (color) => ({
5472
+ var subtitleStyle9 = (color) => ({
5387
5473
  fontSize: "0.86rem",
5388
5474
  color,
5389
5475
  margin: "0 0 20px",
@@ -5426,7 +5512,7 @@ var chainBalanceStyle2 = (color) => ({
5426
5512
  fontSize: "0.76rem",
5427
5513
  color
5428
5514
  });
5429
- var chevronStyle2 = (color) => ({
5515
+ var chevronStyle = (color) => ({
5430
5516
  fontSize: "0.9rem",
5431
5517
  color
5432
5518
  });
@@ -5494,7 +5580,34 @@ var radioDotStyle3 = (color) => ({
5494
5580
  borderRadius: "50%",
5495
5581
  background: color
5496
5582
  });
5497
- function StepRenderer({
5583
+ var LINK_STEPS = /* @__PURE__ */ new Set([
5584
+ "create-passkey",
5585
+ "verify-passkey",
5586
+ "wallet-picker",
5587
+ "open-wallet",
5588
+ "setup-status",
5589
+ "setup",
5590
+ "confirm-sign"
5591
+ ]);
5592
+ var DEPOSIT_STEPS = /* @__PURE__ */ new Set([
5593
+ "deposit",
5594
+ "low-balance",
5595
+ "processing",
5596
+ "success"
5597
+ ]);
5598
+ function getFlowPhase(step, previousStep) {
5599
+ if (LINK_STEPS.has(step)) return "link";
5600
+ if (DEPOSIT_STEPS.has(step)) return "deposit";
5601
+ if (step === "token-picker" || step === "select-source") {
5602
+ return previousStep === "setup" ? "link" : "deposit";
5603
+ }
5604
+ return null;
5605
+ }
5606
+ function StepRenderer(props) {
5607
+ const phase = getFlowPhase(props.state.step, props.state.previousStep);
5608
+ return /* @__PURE__ */ jsxRuntime.jsx(FlowPhaseProvider, { phase, children: /* @__PURE__ */ jsxRuntime.jsx(StepRendererContent, { ...props }) });
5609
+ }
5610
+ function StepRendererContent({
5498
5611
  state,
5499
5612
  ready,
5500
5613
  authenticated,
@@ -5841,7 +5954,7 @@ var PaymentErrorBoundary = class extends react.Component {
5841
5954
  if (!this.state.hasError) {
5842
5955
  return this.props.children;
5843
5956
  }
5844
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle8, children: [
5957
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle9, children: [
5845
5958
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle4, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [
5846
5959
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#ef4444", strokeWidth: "1.5" }),
5847
5960
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
@@ -5853,7 +5966,7 @@ var PaymentErrorBoundary = class extends react.Component {
5853
5966
  ] });
5854
5967
  }
5855
5968
  };
5856
- var containerStyle8 = {
5969
+ var containerStyle9 = {
5857
5970
  display: "flex",
5858
5971
  flexDirection: "column",
5859
5972
  alignItems: "center",
@@ -5935,7 +6048,9 @@ function useDerivedState(state) {
5935
6048
  let count = 0;
5936
6049
  for (const acct of state.accounts) {
5937
6050
  for (const wallet of acct.wallets) {
5938
- count += wallet.sources.length;
6051
+ count += wallet.sources.filter(
6052
+ (s) => s.balance.available.amount > 0
6053
+ ).length;
5939
6054
  }
5940
6055
  }
5941
6056
  return count;
@@ -7829,6 +7944,7 @@ function SwypePaymentInner({
7829
7944
  }
7830
7945
 
7831
7946
  exports.AdvancedSourceScreen = AdvancedSourceScreen;
7947
+ exports.FlowPhaseProvider = FlowPhaseProvider;
7832
7948
  exports.IconCircle = IconCircle;
7833
7949
  exports.InfoBanner = InfoBanner;
7834
7950
  exports.OutlineButton = OutlineButton;
@@ -7836,6 +7952,8 @@ exports.PasskeyIframeBlockedError = PasskeyIframeBlockedError;
7836
7952
  exports.PasskeyScreen = PasskeyScreen;
7837
7953
  exports.PoweredByFooter = PoweredByFooter;
7838
7954
  exports.PrimaryButton = PrimaryButton;
7955
+ exports.SWYPE_LOGO = SWYPE_LOGO;
7956
+ exports.SWYPE_MASCOT = SWYPE_MASCOT;
7839
7957
  exports.ScreenHeader = ScreenHeader;
7840
7958
  exports.ScreenLayout = ScreenLayout;
7841
7959
  exports.SelectSourceScreen = SelectSourceScreen;