@swype-org/react-sdk 0.1.142 → 0.1.148

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
@@ -1678,24 +1678,34 @@ function hasActiveDepositWallet(account) {
1678
1678
  function getPreferredDepositWallet(account, transferAmount) {
1679
1679
  const wallets = getAddressableWallets(account);
1680
1680
  if (wallets.length === 0) return null;
1681
+ let bestWithAllowance = null;
1682
+ let bestWithAllowanceBal = -1;
1683
+ let bestActive = null;
1684
+ let bestActiveBal = -1;
1685
+ let bestAny = null;
1686
+ let bestAnyBal = -1;
1681
1687
  for (const wallet of wallets) {
1682
- if (wallet.status === "ACTIVE" && wallet.sources.some((source) => source.balance.available.amount >= transferAmount)) {
1683
- return wallet;
1684
- }
1685
- }
1686
- let bestWallet = null;
1687
- let bestBalance = -1;
1688
- let bestIsActive = false;
1689
- for (const wallet of wallets) {
1690
- const walletBal = wallet.balance.available.amount;
1691
1688
  const isActive = wallet.status === "ACTIVE";
1692
- if (walletBal > bestBalance || walletBal === bestBalance && isActive && !bestIsActive) {
1693
- bestBalance = walletBal;
1694
- bestWallet = wallet;
1695
- bestIsActive = isActive;
1689
+ const walletBal = wallet.balance.available.amount;
1690
+ if (isActive) {
1691
+ const hasFullyEligibleSource = wallet.sources.some(
1692
+ (s) => s.balance.available.amount >= transferAmount && s.remainingAllowance != null && s.remainingAllowance >= transferAmount
1693
+ );
1694
+ if (hasFullyEligibleSource && walletBal > bestWithAllowanceBal) {
1695
+ bestWithAllowance = wallet;
1696
+ bestWithAllowanceBal = walletBal;
1697
+ }
1698
+ if (walletBal > bestActiveBal) {
1699
+ bestActive = wallet;
1700
+ bestActiveBal = walletBal;
1701
+ }
1702
+ }
1703
+ if (walletBal > bestAnyBal) {
1704
+ bestAny = wallet;
1705
+ bestAnyBal = walletBal;
1696
1706
  }
1697
1707
  }
1698
- return bestWallet ?? wallets[0];
1708
+ return bestWithAllowance ?? bestActive ?? bestAny ?? wallets[0];
1699
1709
  }
1700
1710
  function getDepositEligibleAccounts(accounts) {
1701
1711
  return accounts.filter((account) => getAddressableWallets(account).length > 0);
@@ -1715,7 +1725,9 @@ function resolveDepositSelection(accounts, transferAmount, selectedAccountId) {
1715
1725
  }
1716
1726
  for (const account of eligibleAccounts) {
1717
1727
  const fullyEligibleWallet = getAddressableWallets(account).find(
1718
- (wallet) => wallet.status === "ACTIVE" && wallet.sources.some((source) => source.balance.available.amount >= transferAmount)
1728
+ (wallet) => wallet.status === "ACTIVE" && wallet.sources.some(
1729
+ (source) => source.balance.available.amount >= transferAmount && source.remainingAllowance != null && source.remainingAllowance >= transferAmount
1730
+ )
1719
1731
  );
1720
1732
  if (fullyEligibleWallet) {
1721
1733
  return {
@@ -2235,9 +2247,7 @@ function PoweredByFooter() {
2235
2247
  fill: "currentColor"
2236
2248
  }
2237
2249
  ) }),
2238
- /* @__PURE__ */ jsx("span", { children: "Powered by Swype" }),
2239
- /* @__PURE__ */ jsx("span", { style: dotStyle, children: "\xB7" }),
2240
- /* @__PURE__ */ jsx("span", { children: "Non-custodial" })
2250
+ /* @__PURE__ */ jsx("span", { children: "Powered by Blink" })
2241
2251
  ] });
2242
2252
  }
2243
2253
  var containerStyle3 = (color) => ({
@@ -2249,7 +2259,6 @@ var containerStyle3 = (color) => ({
2249
2259
  color,
2250
2260
  padding: "12px 0 4px"
2251
2261
  });
2252
- var dotStyle = { opacity: 0.5 };
2253
2262
  function PrimaryButton({ children, onClick, disabled, loading, icon }) {
2254
2263
  const { tokens } = useSwypeConfig();
2255
2264
  const isDisabled = disabled || loading;
@@ -3032,7 +3041,7 @@ function LoginScreen({
3032
3041
  ScreenLayout,
3033
3042
  {
3034
3043
  footer: /* @__PURE__ */ jsxs(Fragment, { children: [
3035
- /* @__PURE__ */ jsx(PrimaryButton, { onClick: onSubmit, disabled, loading: sending, children: "Continue" }),
3044
+ /* @__PURE__ */ jsx(PrimaryButton, { onClick: onSubmit, disabled, loading: sending, children: "Next" }),
3036
3045
  onSocialLogin && /* @__PURE__ */ jsxs(Fragment, { children: [
3037
3046
  /* @__PURE__ */ jsxs("div", { style: dividerStyle(tokens), children: [
3038
3047
  /* @__PURE__ */ jsx("div", { style: dividerLineStyle(tokens.border) }),
@@ -3050,10 +3059,6 @@ function LoginScreen({
3050
3059
  provider
3051
3060
  )) })
3052
3061
  ] }),
3053
- /* @__PURE__ */ jsxs("div", { style: walletSectionStyle, children: [
3054
- /* @__PURE__ */ jsx("span", { style: walletLabelStyle(tokens.textMuted), children: "Works with" }),
3055
- /* @__PURE__ */ jsx("div", { style: walletLogosStyle, children: walletIcons.map(({ key, logo }) => /* @__PURE__ */ jsx("img", { src: logo, alt: key, style: walletLogoImgStyle }, key)) })
3056
- ] }),
3057
3062
  /* @__PURE__ */ jsx(PoweredByFooter, {})
3058
3063
  ] }),
3059
3064
  children: [
@@ -3066,8 +3071,7 @@ function LoginScreen({
3066
3071
  ),
3067
3072
  /* @__PURE__ */ jsxs("div", { style: contentStyle2, children: [
3068
3073
  /* @__PURE__ */ jsx("div", { style: iconBoxStyle(tokens.accent), children: /* @__PURE__ */ jsx("span", { style: iconLetterStyle, children: "S" }) }),
3069
- /* @__PURE__ */ jsx("h2", { style: headingStyle(tokens.text), children: "One-time setup.\nOne-tap deposits after." }),
3070
- /* @__PURE__ */ jsx("p", { style: subtitleStyle(tokens.textSecondary), children: "Protected by Face ID." }),
3074
+ /* @__PURE__ */ jsx("h2", { style: headingStyle(tokens.text), children: "Your Money. Any App. One Tap." }),
3071
3075
  error && /* @__PURE__ */ jsx("div", { style: errorStyle(tokens), children: error }),
3072
3076
  /* @__PURE__ */ jsx(
3073
3077
  "input",
@@ -3090,11 +3094,6 @@ function LoginScreen({
3090
3094
  }
3091
3095
  );
3092
3096
  }
3093
- var walletIcons = [
3094
- { key: "metamask", logo: KNOWN_LOGOS["metamask"] },
3095
- { key: "base", logo: KNOWN_LOGOS["base"] },
3096
- { key: "trust wallet", logo: KNOWN_LOGOS["trust wallet"] }
3097
- ];
3098
3097
  function socialLabel(provider) {
3099
3098
  switch (provider) {
3100
3099
  case "google":
@@ -3137,12 +3136,6 @@ var headingStyle = (color) => ({
3137
3136
  margin: "20px 0 8px",
3138
3137
  whiteSpace: "pre-line"
3139
3138
  });
3140
- var subtitleStyle = (color) => ({
3141
- fontSize: "0.84rem",
3142
- color,
3143
- margin: "0 0 24px",
3144
- lineHeight: 1.5
3145
- });
3146
3139
  var inputStyle2 = (tokens) => ({
3147
3140
  width: "100%",
3148
3141
  padding: "15px 16px",
@@ -3197,27 +3190,6 @@ var socialButtonStyle = (tokens) => ({
3197
3190
  fontFamily: "inherit",
3198
3191
  cursor: "pointer"
3199
3192
  });
3200
- var walletSectionStyle = {
3201
- textAlign: "center",
3202
- marginBottom: 8,
3203
- marginTop: 4
3204
- };
3205
- var walletLabelStyle = (color) => ({
3206
- fontSize: "0.78rem",
3207
- color,
3208
- display: "block",
3209
- marginBottom: 10
3210
- });
3211
- var walletLogosStyle = {
3212
- display: "flex",
3213
- justifyContent: "center",
3214
- gap: 16
3215
- };
3216
- var walletLogoImgStyle = {
3217
- width: 24,
3218
- height: 24,
3219
- objectFit: "contain"
3220
- };
3221
3193
  var avatarStyle = (tokens) => ({
3222
3194
  width: 28,
3223
3195
  height: 28,
@@ -3275,40 +3247,38 @@ function OtpVerifyScreen({
3275
3247
  });
3276
3248
  }, 1e3);
3277
3249
  }, [cooldown, onResend]);
3278
- return /* @__PURE__ */ jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsx(PoweredByFooter, {}), children: [
3279
- /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
3280
- /* @__PURE__ */ jsxs("div", { style: contentStyle3, children: [
3281
- /* @__PURE__ */ jsx(IconCircle, { variant: "accent", size: 56, children: /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
3282
- "path",
3283
- {
3284
- d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z",
3285
- fill: tokens.accent
3286
- }
3287
- ) }) }),
3288
- /* @__PURE__ */ jsx("h2", { style: headingStyle2(tokens.text), children: "Check your email" }),
3289
- /* @__PURE__ */ jsxs("p", { style: subtitleStyle2(tokens.textSecondary), children: [
3290
- "We sent a 6-digit code to",
3291
- "\n",
3292
- /* @__PURE__ */ jsx("strong", { children: maskedIdentifier })
3293
- ] }),
3294
- error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle(tokens), children: error }),
3295
- /* @__PURE__ */ jsx(OtpInput, { value: otpCode, onChange: onOtpChange, disabled: verifying }),
3296
- /* @__PURE__ */ jsx(
3297
- "button",
3298
- {
3299
- type: "button",
3300
- onClick: handleResend,
3301
- disabled: cooldown > 0,
3302
- style: resendStyle(tokens.textMuted, cooldown > 0),
3303
- children: cooldown > 0 ? `Resend code in ${cooldown}s` : "Resend code"
3304
- }
3305
- ),
3306
- /* @__PURE__ */ jsxs("div", { style: actionStyle, children: [
3250
+ return /* @__PURE__ */ jsxs(
3251
+ ScreenLayout,
3252
+ {
3253
+ footer: /* @__PURE__ */ jsxs(Fragment, { children: [
3307
3254
  /* @__PURE__ */ jsx(PrimaryButton, { onClick: onVerify, disabled, loading: verifying, children: "Verify" }),
3308
- /* @__PURE__ */ jsx("p", { style: hintStyle(tokens.textMuted), children: "Didn't get the code? Check your spam folder" })
3309
- ] })
3310
- ] })
3311
- ] });
3255
+ /* @__PURE__ */ jsx(PoweredByFooter, {})
3256
+ ] }),
3257
+ children: [
3258
+ /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
3259
+ /* @__PURE__ */ jsxs("div", { style: contentStyle3, children: [
3260
+ /* @__PURE__ */ jsx("h2", { style: headingStyle2(tokens.text), children: "Confirm it is you" }),
3261
+ /* @__PURE__ */ jsxs("p", { style: subtitleStyle(tokens.textSecondary), children: [
3262
+ "We sent a 6-digit code to",
3263
+ "\n",
3264
+ /* @__PURE__ */ jsx("strong", { children: maskedIdentifier })
3265
+ ] }),
3266
+ error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle(tokens), children: error }),
3267
+ /* @__PURE__ */ jsx(OtpInput, { value: otpCode, onChange: onOtpChange, disabled: verifying }),
3268
+ /* @__PURE__ */ jsx(
3269
+ "button",
3270
+ {
3271
+ type: "button",
3272
+ onClick: handleResend,
3273
+ disabled: cooldown > 0,
3274
+ style: resendStyle(tokens.textMuted, cooldown > 0),
3275
+ children: cooldown > 0 ? `Resend code in ${cooldown}s` : "Resend code"
3276
+ }
3277
+ )
3278
+ ] })
3279
+ ]
3280
+ }
3281
+ );
3312
3282
  }
3313
3283
  var contentStyle3 = {
3314
3284
  textAlign: "center",
@@ -3324,7 +3294,7 @@ var headingStyle2 = (color) => ({
3324
3294
  color,
3325
3295
  margin: "20px 0 8px"
3326
3296
  });
3327
- var subtitleStyle2 = (color) => ({
3297
+ var subtitleStyle = (color) => ({
3328
3298
  fontSize: "0.88rem",
3329
3299
  color,
3330
3300
  margin: "0 0 28px",
@@ -3354,16 +3324,6 @@ var resendStyle = (color, disabled) => ({
3354
3324
  padding: 0,
3355
3325
  opacity: disabled ? 0.6 : 1
3356
3326
  });
3357
- var actionStyle = {
3358
- width: "100%",
3359
- marginTop: 32
3360
- };
3361
- var hintStyle = (color) => ({
3362
- textAlign: "center",
3363
- fontSize: "0.78rem",
3364
- color,
3365
- margin: "12px 0 0"
3366
- });
3367
3327
  function PasskeyScreen({
3368
3328
  onCreatePasskey,
3369
3329
  onBack,
@@ -3374,7 +3334,7 @@ function PasskeyScreen({
3374
3334
  }) {
3375
3335
  const { tokens } = useSwypeConfig();
3376
3336
  const handleCreate = popupFallback && onCreatePasskeyViaPopup ? onCreatePasskeyViaPopup : onCreatePasskey;
3377
- const buttonLabel = popupFallback ? "Open passkey window" : "Create or verify passkey";
3337
+ const buttonLabel = popupFallback ? "Open passkey window" : "Verify PassKey";
3378
3338
  return /* @__PURE__ */ jsxs(
3379
3339
  ScreenLayout,
3380
3340
  {
@@ -3385,16 +3345,8 @@ function PasskeyScreen({
3385
3345
  children: [
3386
3346
  /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
3387
3347
  /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
3388
- /* @__PURE__ */ jsx(IconCircle, { variant: "accent", size: 64, children: /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
3389
- /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "3", stroke: tokens.accent, strokeWidth: "1.5", strokeDasharray: "3 2" }),
3390
- /* @__PURE__ */ jsx("circle", { cx: "9", cy: "10", r: "1", fill: tokens.accent }),
3391
- /* @__PURE__ */ jsx("circle", { cx: "15", cy: "10", r: "1", fill: tokens.accent }),
3392
- /* @__PURE__ */ jsx("path", { d: "M9 14c0 1.5 1.34 2.5 3 2.5s3-1 3-2.5", stroke: tokens.accent, strokeWidth: "1.2", strokeLinecap: "round" })
3393
- ] }) }),
3394
- /* @__PURE__ */ jsx("h2", { style: headingStyle3(tokens.text), children: "Create or verify your passkey" }),
3395
- /* @__PURE__ */ jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: popupFallback ? "Your browser requires a separate window to continue. Tap the button below to continue." : "Use Face ID to sign in instantly \u2014 no passwords, no codes." }),
3396
- error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle2(tokens), children: error }),
3397
- /* @__PURE__ */ jsx(InfoBanner, { children: "Your passkey is stored securely on your device. Swype never sees your biometric data." })
3348
+ /* @__PURE__ */ jsx("h2", { style: headingStyle3(tokens.text), children: "Secure your account with a passkey" }),
3349
+ error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle2(tokens), children: error })
3398
3350
  ] })
3399
3351
  ]
3400
3352
  }
@@ -3415,13 +3367,6 @@ var headingStyle3 = (color) => ({
3415
3367
  color,
3416
3368
  margin: "24px 0 8px"
3417
3369
  });
3418
- var subtitleStyle3 = (color) => ({
3419
- fontSize: "0.9rem",
3420
- color,
3421
- margin: "0 0 28px",
3422
- lineHeight: 1.5,
3423
- maxWidth: 280
3424
- });
3425
3370
  var errorBannerStyle2 = (tokens) => ({
3426
3371
  background: tokens.errorBg,
3427
3372
  border: `1px solid ${tokens.error}66`,
@@ -3490,6 +3435,8 @@ function WalletPickerScreen({
3490
3435
  }) {
3491
3436
  const { tokens } = useSwypeConfig();
3492
3437
  const [hoveredId, setHoveredId] = useState(null);
3438
+ const [selectedProviderId, setSelectedProviderId] = useState(null);
3439
+ const [cryptoExpanded, setCryptoExpanded] = useState(false);
3493
3440
  const hasPending = pendingConnections != null && pendingConnections.length > 0;
3494
3441
  const displayProviders = providers.length > 0 ? providers : [
3495
3442
  { id: "metamask", name: "MetaMask" },
@@ -3497,6 +3444,7 @@ function WalletPickerScreen({
3497
3444
  { id: "ora", name: "Ora" },
3498
3445
  { id: "phantom", name: "Phantom" }
3499
3446
  ];
3447
+ const selectedProvider = displayProviders.find((p) => p.id === selectedProviderId);
3500
3448
  if (loading) {
3501
3449
  return /* @__PURE__ */ jsxs(ScreenLayout, { children: [
3502
3450
  /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack }),
@@ -3507,14 +3455,18 @@ function WalletPickerScreen({
3507
3455
  ScreenLayout,
3508
3456
  {
3509
3457
  footer: /* @__PURE__ */ jsxs(Fragment, { children: [
3510
- /* @__PURE__ */ jsx("p", { style: hintStyle2(tokens.textMuted), children: "You'll set your deposit limit in your wallet app." }),
3458
+ selectedProvider && /* @__PURE__ */ jsxs(PrimaryButton, { onClick: () => onSelectProvider(selectedProvider.id), children: [
3459
+ "Open ",
3460
+ selectedProvider.name,
3461
+ " to Link"
3462
+ ] }),
3511
3463
  /* @__PURE__ */ jsx(PoweredByFooter, {})
3512
3464
  ] }),
3513
3465
  children: [
3514
3466
  /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack }),
3515
3467
  hasPending && /* @__PURE__ */ jsxs(Fragment, { children: [
3516
3468
  /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
3517
- /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
3469
+ /* @__PURE__ */ jsx("p", { style: subtitleStyle2(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
3518
3470
  /* @__PURE__ */ jsx("div", { style: pendingListStyle, children: pendingConnections.map((acct) => {
3519
3471
  const wallet = acct.wallets[0];
3520
3472
  const address = wallet ? truncateAddress(wallet.name) : void 0;
@@ -3553,21 +3505,41 @@ function WalletPickerScreen({
3553
3505
  }) }),
3554
3506
  /* @__PURE__ */ jsx("div", { style: dividerStyle2(tokens.border), children: /* @__PURE__ */ jsx("span", { style: dividerTextStyle(tokens.textMuted), children: "Or connect a new wallet" }) })
3555
3507
  ] }),
3556
- !hasPending && /* @__PURE__ */ jsxs(Fragment, { children: [
3557
- /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Where are your stablecoins?" }),
3558
- /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Select the wallet you want to deposit from" })
3559
- ] }),
3560
- /* @__PURE__ */ jsx("div", { style: gridStyle, children: displayProviders.map((p) => {
3508
+ !hasPending && /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Where is your money?" }),
3509
+ /* @__PURE__ */ jsxs(
3510
+ "button",
3511
+ {
3512
+ type: "button",
3513
+ onClick: () => setCryptoExpanded((v) => !v),
3514
+ style: categoryRowStyle(tokens, cryptoExpanded),
3515
+ children: [
3516
+ /* @__PURE__ */ jsx("span", { style: categoryLabelStyle, children: "Crypto Wallet" }),
3517
+ /* @__PURE__ */ jsx(
3518
+ "svg",
3519
+ {
3520
+ width: "18",
3521
+ height: "18",
3522
+ viewBox: "0 0 24 24",
3523
+ fill: "none",
3524
+ style: { transform: cryptoExpanded ? "rotate(180deg)" : "none", transition: "transform 0.2s ease" },
3525
+ children: /* @__PURE__ */ jsx("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z", fill: "currentColor" })
3526
+ }
3527
+ )
3528
+ ]
3529
+ }
3530
+ ),
3531
+ cryptoExpanded && /* @__PURE__ */ jsx("div", { style: gridStyle, children: displayProviders.map((p) => {
3561
3532
  const logoSrc = "logoURI" in p && p.logoURI || KNOWN_LOGOS[p.name.toLowerCase()];
3562
3533
  const emoji = WALLET_EMOJIS[p.name.toLowerCase()] ?? p.name.charAt(0);
3534
+ const isSelected = selectedProviderId === p.id;
3563
3535
  const isHovered = hoveredId === p.id;
3564
3536
  return /* @__PURE__ */ jsxs(
3565
3537
  "button",
3566
3538
  {
3567
- onClick: () => onSelectProvider(p.id),
3539
+ onClick: () => setSelectedProviderId(p.id),
3568
3540
  onMouseEnter: () => setHoveredId(p.id),
3569
3541
  onMouseLeave: () => setHoveredId(null),
3570
- style: cardStyle(tokens, isHovered),
3542
+ style: cardStyle(tokens, isHovered, isSelected),
3571
3543
  children: [
3572
3544
  logoSrc ? /* @__PURE__ */ jsx(
3573
3545
  "img",
@@ -3582,7 +3554,11 @@ function WalletPickerScreen({
3582
3554
  },
3583
3555
  p.id
3584
3556
  );
3585
- }) })
3557
+ }) }),
3558
+ /* @__PURE__ */ jsxs("div", { style: categoryRowStyle(tokens, false, true), children: [
3559
+ /* @__PURE__ */ jsx("span", { style: categoryLabelStyle, children: "Bank Account" }),
3560
+ /* @__PURE__ */ jsx("span", { style: comingSoonBadgeStyle(tokens), children: "Coming Soon" })
3561
+ ] })
3586
3562
  ]
3587
3563
  }
3588
3564
  );
@@ -3594,7 +3570,7 @@ var headingStyle4 = (color) => ({
3594
3570
  color,
3595
3571
  margin: "8px 0 4px"
3596
3572
  });
3597
- var subtitleStyle4 = (color) => ({
3573
+ var subtitleStyle2 = (color) => ({
3598
3574
  fontSize: "0.88rem",
3599
3575
  color,
3600
3576
  margin: "0 0 24px"
@@ -3602,9 +3578,11 @@ var subtitleStyle4 = (color) => ({
3602
3578
  var gridStyle = {
3603
3579
  display: "grid",
3604
3580
  gridTemplateColumns: "1fr 1fr",
3605
- gap: 12
3581
+ gap: 12,
3582
+ marginBottom: 12
3606
3583
  };
3607
- var cardStyle = (tokens, hovered) => ({
3584
+ var SELECTED_GREEN = "#22c55e";
3585
+ var cardStyle = (tokens, hovered, selected) => ({
3608
3586
  display: "flex",
3609
3587
  flexDirection: "column",
3610
3588
  alignItems: "center",
@@ -3612,11 +3590,12 @@ var cardStyle = (tokens, hovered) => ({
3612
3590
  gap: 8,
3613
3591
  padding: "20px 12px",
3614
3592
  background: hovered ? tokens.bgHover : tokens.bgInput,
3615
- border: `1.5px solid ${tokens.border}`,
3593
+ border: selected ? `2px solid ${SELECTED_GREEN}` : `1.5px solid ${tokens.border}`,
3594
+ boxShadow: selected ? `0 0 0 2px ${SELECTED_GREEN}44` : "none",
3616
3595
  borderRadius: 16,
3617
3596
  cursor: "pointer",
3618
3597
  fontFamily: "inherit",
3619
- transition: "background 0.15s ease",
3598
+ transition: "background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease",
3620
3599
  outline: "none"
3621
3600
  });
3622
3601
  var emojiStyle = {
@@ -3634,11 +3613,36 @@ var nameStyle2 = (color) => ({
3634
3613
  fontWeight: 600,
3635
3614
  color
3636
3615
  });
3637
- var hintStyle2 = (color) => ({
3638
- textAlign: "center",
3639
- fontSize: "0.82rem",
3640
- color,
3641
- margin: "0 0 4px"
3616
+ var categoryRowStyle = (tokens, expanded, disabled) => ({
3617
+ display: "flex",
3618
+ alignItems: "center",
3619
+ justifyContent: "space-between",
3620
+ width: "100%",
3621
+ padding: "16px 18px",
3622
+ background: tokens.bgInput,
3623
+ border: `1.5px solid ${tokens.border}`,
3624
+ borderRadius: 14,
3625
+ cursor: disabled ? "default" : "pointer",
3626
+ fontFamily: "inherit",
3627
+ fontSize: "0.95rem",
3628
+ fontWeight: 600,
3629
+ color: disabled ? tokens.textMuted : tokens.text,
3630
+ opacity: disabled ? 0.6 : 1,
3631
+ outline: "none",
3632
+ marginBottom: expanded ? 12 : 12,
3633
+ boxSizing: "border-box"
3634
+ });
3635
+ var categoryLabelStyle = {
3636
+ lineHeight: 1
3637
+ };
3638
+ var comingSoonBadgeStyle = (tokens) => ({
3639
+ fontSize: "0.72rem",
3640
+ fontWeight: 600,
3641
+ color: tokens.textMuted,
3642
+ background: `${tokens.border}88`,
3643
+ padding: "3px 10px",
3644
+ borderRadius: 6,
3645
+ whiteSpace: "nowrap"
3642
3646
  });
3643
3647
  var pendingListStyle = {
3644
3648
  display: "flex",
@@ -3763,15 +3767,14 @@ function SetupScreen({
3763
3767
  onClick: () => onSetupOneTap(limit),
3764
3768
  disabled: loading,
3765
3769
  loading,
3766
- children: "Set up One-Tap"
3770
+ children: "Approve"
3767
3771
  }
3768
3772
  ),
3769
3773
  /* @__PURE__ */ jsx(PoweredByFooter, {})
3770
3774
  ] }),
3771
3775
  children: [
3772
3776
  /* @__PURE__ */ jsx(ScreenHeader, { title: "Swype Setup", onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
3773
- /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Set up One-Tap deposits" }),
3774
- /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
3777
+ /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Set Spending Limit" }),
3775
3778
  error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle3(tokens), children: error }),
3776
3779
  /* @__PURE__ */ jsxs("div", { style: balanceRowStyle, children: [
3777
3780
  /* @__PURE__ */ jsxs("div", { style: balanceLeftStyle, children: [
@@ -3841,14 +3844,6 @@ function SetupScreen({
3841
3844
  ]
3842
3845
  }
3843
3846
  )
3844
- ] }),
3845
- /* @__PURE__ */ jsx("div", { style: bannerWrapStyle, children: /* @__PURE__ */ jsx(InfoBanner, { children: "Funds stay in your wallet until you deposit. Swype never holds your money." }) }),
3846
- /* @__PURE__ */ jsxs("button", { type: "button", style: linkStyle(tokens.accent), children: [
3847
- /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 6 }, children: [
3848
- /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }),
3849
- /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
3850
- ] }),
3851
- "How does this work?"
3852
3847
  ] })
3853
3848
  ]
3854
3849
  }
@@ -3861,12 +3856,6 @@ var headingStyle5 = (color) => ({
3861
3856
  color,
3862
3857
  margin: "8px 0 4px"
3863
3858
  });
3864
- var subtitleStyle5 = (color) => ({
3865
- fontSize: "0.86rem",
3866
- color,
3867
- margin: "0 0 24px",
3868
- lineHeight: 1.5
3869
- });
3870
3859
  var errorBannerStyle3 = (tokens) => ({
3871
3860
  background: tokens.errorBg,
3872
3861
  border: `1px solid ${tokens.error}66`,
@@ -3970,20 +3959,6 @@ var limitInputStyle = (color) => ({
3970
3959
  fontFamily: "inherit",
3971
3960
  padding: 0
3972
3961
  });
3973
- var bannerWrapStyle = { marginBottom: 16 };
3974
- var linkStyle = (color) => ({
3975
- background: "transparent",
3976
- border: "none",
3977
- color,
3978
- cursor: "pointer",
3979
- fontFamily: "inherit",
3980
- fontSize: "0.82rem",
3981
- fontWeight: 500,
3982
- display: "flex",
3983
- alignItems: "center",
3984
- padding: 0,
3985
- marginBottom: 16
3986
- });
3987
3962
  function SetupStatusScreen({
3988
3963
  complete,
3989
3964
  limit,
@@ -4448,14 +4423,14 @@ function SuccessScreen({
4448
4423
  amount.toFixed(2),
4449
4424
  " deposited"
4450
4425
  ] }),
4451
- merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle6(tokens.textSecondary), children: [
4426
+ merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle3(tokens.textSecondary), children: [
4452
4427
  "to ",
4453
4428
  merchantName
4454
4429
  ] })
4455
4430
  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
4456
4431
  /* @__PURE__ */ jsx(IconCircle, { variant: "error", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z", fill: tokens.error }) }) }),
4457
4432
  /* @__PURE__ */ jsx("h2", { style: headingStyle7(tokens.text), children: "Transfer failed" }),
4458
- error && /* @__PURE__ */ jsx("p", { style: subtitleStyle6(tokens.error), children: error })
4433
+ error && /* @__PURE__ */ jsx("p", { style: subtitleStyle3(tokens.error), children: error })
4459
4434
  ] }),
4460
4435
  /* @__PURE__ */ jsxs("div", { style: summaryCardStyle(tokens), children: [
4461
4436
  sourceName && /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
@@ -4501,7 +4476,7 @@ var headingStyle7 = (color) => ({
4501
4476
  color,
4502
4477
  margin: "20px 0 4px"
4503
4478
  });
4504
- var subtitleStyle6 = (color) => ({
4479
+ var subtitleStyle3 = (color) => ({
4505
4480
  fontSize: "0.9rem",
4506
4481
  color,
4507
4482
  margin: "0 0 20px"
@@ -4609,7 +4584,7 @@ function SelectSourceScreen({
4609
4584
  right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout })
4610
4585
  }
4611
4586
  ),
4612
- /* @__PURE__ */ jsx("p", { style: subtitleStyle7(tokens.textMuted), children: "Choose which chain and token to pay from." }),
4587
+ /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textMuted), children: "Choose which chain and token to pay from." }),
4613
4588
  /* @__PURE__ */ jsx("label", { style: labelStyle2(tokens.textSecondary), children: "Chain" }),
4614
4589
  /* @__PURE__ */ jsx("div", { style: optionListStyle, children: choices.map((chain) => {
4615
4590
  const isSelected = chain.chainName === selectedChainName;
@@ -4666,7 +4641,7 @@ function SelectSourceScreen({
4666
4641
  }
4667
4642
  );
4668
4643
  }
4669
- var subtitleStyle7 = (color) => ({
4644
+ var subtitleStyle4 = (color) => ({
4670
4645
  fontSize: "0.85rem",
4671
4646
  color,
4672
4647
  margin: "0 0 20px",
@@ -4782,7 +4757,7 @@ function AdvancedSourceScreen({
4782
4757
  }
4783
4758
  ),
4784
4759
  /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
4785
- /* @__PURE__ */ jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
4760
+ /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
4786
4761
  /* @__PURE__ */ jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Select tokens to approve" }),
4787
4762
  /* @__PURE__ */ jsx("div", { style: chainListStyle, children: choices.map((chain) => {
4788
4763
  const isExpanded = expandedChain === chain.chainName;
@@ -4852,7 +4827,7 @@ var headingStyle8 = (color) => ({
4852
4827
  color,
4853
4828
  margin: "8px 0 4px"
4854
4829
  });
4855
- var subtitleStyle8 = (color) => ({
4830
+ var subtitleStyle5 = (color) => ({
4856
4831
  fontSize: "0.86rem",
4857
4832
  color,
4858
4833
  margin: "0 0 20px",
@@ -5084,14 +5059,14 @@ function OpenWalletScreen({
5084
5059
  displayName
5085
5060
  ] }),
5086
5061
  error && onRetryStatus && /* @__PURE__ */ jsx(OutlineButton, { onClick: onRetryStatus, children: "Retry status check" }),
5087
- /* @__PURE__ */ jsx("p", { style: hintStyle3(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" })
5062
+ /* @__PURE__ */ 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" })
5088
5063
  ] }),
5089
5064
  children: [
5090
5065
  /* @__PURE__ */ jsx(ScreenHeader, { onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
5091
5066
  /* @__PURE__ */ jsxs("div", { style: contentStyle8, children: [
5092
5067
  logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
5093
5068
  /* @__PURE__ */ jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
5094
- /* @__PURE__ */ jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
5069
+ /* @__PURE__ */ jsx("p", { style: subtitleStyle6(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
5095
5070
  !loading && /* @__PURE__ */ jsxs("div", { style: waitingBadgeStyle(tokens), children: [
5096
5071
  /* @__PURE__ */ jsx(Spinner, { size: 14 }),
5097
5072
  /* @__PURE__ */ jsx("span", { children: "Waiting for authorization..." })
@@ -5128,7 +5103,7 @@ var headingStyle10 = (color) => ({
5128
5103
  color,
5129
5104
  margin: "20px 0 8px"
5130
5105
  });
5131
- var subtitleStyle9 = (color) => ({
5106
+ var subtitleStyle6 = (color) => ({
5132
5107
  fontSize: "0.9rem",
5133
5108
  color,
5134
5109
  margin: "0 0 24px",
@@ -5146,7 +5121,7 @@ var waitingBadgeStyle = (tokens) => ({
5146
5121
  color: tokens.textMuted,
5147
5122
  fontSize: "0.82rem"
5148
5123
  });
5149
- var hintStyle3 = (color) => ({
5124
+ var hintStyle = (color) => ({
5150
5125
  textAlign: "center",
5151
5126
  fontSize: "0.82rem",
5152
5127
  color,
@@ -5168,14 +5143,14 @@ function ConfirmSignScreen({
5168
5143
  footer: /* @__PURE__ */ jsxs(Fragment, { children: [
5169
5144
  /* @__PURE__ */ jsx(PrimaryButton, { onClick: onSign, disabled: signing, children: signing ? "Confirming..." : "Confirm payment" }),
5170
5145
  error && /* @__PURE__ */ jsx("p", { style: errorStyle2(tokens.textMuted), children: error }),
5171
- !error && /* @__PURE__ */ jsx("p", { style: hintStyle4(tokens.textMuted), children: "You may be prompted for biometric verification" })
5146
+ !error && /* @__PURE__ */ jsx("p", { style: hintStyle2(tokens.textMuted), children: "You may be prompted for biometric verification" })
5172
5147
  ] }),
5173
5148
  children: [
5174
5149
  /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
5175
5150
  /* @__PURE__ */ jsxs("div", { style: contentStyle9, children: [
5176
5151
  logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
5177
5152
  /* @__PURE__ */ jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
5178
- /* @__PURE__ */ jsxs("p", { style: subtitleStyle10(tokens.textSecondary), children: [
5153
+ /* @__PURE__ */ jsxs("p", { style: subtitleStyle7(tokens.textSecondary), children: [
5179
5154
  displayName,
5180
5155
  " approved the connection. Tap below to confirm your payment."
5181
5156
  ] }),
@@ -5210,7 +5185,7 @@ var headingStyle11 = (color) => ({
5210
5185
  color,
5211
5186
  margin: "20px 0 8px"
5212
5187
  });
5213
- var subtitleStyle10 = (color) => ({
5188
+ var subtitleStyle7 = (color) => ({
5214
5189
  fontSize: "0.9rem",
5215
5190
  color,
5216
5191
  margin: "0 0 24px",
@@ -5232,7 +5207,7 @@ var checkmarkStyle = {
5232
5207
  fontWeight: 700,
5233
5208
  fontSize: "0.9rem"
5234
5209
  };
5235
- var hintStyle4 = (color) => ({
5210
+ var hintStyle2 = (color) => ({
5236
5211
  textAlign: "center",
5237
5212
  fontSize: "0.82rem",
5238
5213
  color,
@@ -5307,7 +5282,7 @@ function TokenPickerScreen({
5307
5282
  ] }),
5308
5283
  children: [
5309
5284
  /* @__PURE__ */ jsx(ScreenHeader, { title: "Select Token", onBack }),
5310
- /* @__PURE__ */ jsx("p", { style: subtitleStyle11(themeTokens.textSecondary), children: "Choose a token to deposit with. Tokens that haven't been authorized yet will require a one-time wallet approval." }),
5285
+ /* @__PURE__ */ 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." }),
5311
5286
  /* @__PURE__ */ jsx("div", { style: chainListStyle2, children: [...chainGroups.entries()].map(([chainName, chainEntries]) => {
5312
5287
  const isExpanded = expandedChain === chainName;
5313
5288
  const chainTotal = chainEntries.reduce((sum, e) => sum + e.balance, 0);
@@ -5363,7 +5338,7 @@ function TokenPickerScreen({
5363
5338
  }
5364
5339
  );
5365
5340
  }
5366
- var subtitleStyle11 = (color) => ({
5341
+ var subtitleStyle8 = (color) => ({
5367
5342
  fontSize: "0.86rem",
5368
5343
  color,
5369
5344
  margin: "0 0 20px",
@@ -6471,6 +6446,9 @@ function useProviderHandlers(deps) {
6471
6446
  useWalletConnectorProp,
6472
6447
  activeCredentialId,
6473
6448
  selectedAccountId,
6449
+ selectedWalletId,
6450
+ selectedTokenSymbol,
6451
+ chains,
6474
6452
  accounts,
6475
6453
  providers,
6476
6454
  authExecutor,
@@ -6597,11 +6575,17 @@ function useProviderHandlers(deps) {
6597
6575
  try {
6598
6576
  const token = await getAccessToken();
6599
6577
  if (!token) throw new Error("Not authenticated");
6578
+ const wallet = acct?.wallets.find((w) => w.id === selectedWalletId);
6579
+ const source = wallet?.sources.find(
6580
+ (s) => selectedTokenSymbol ? s.token.symbol === selectedTokenSymbol : s.token.status === "AUTHORIZED"
6581
+ );
6582
+ const evmChainId = chains.find((c) => c.name === wallet?.chain.name)?.commonId ?? void 0;
6600
6583
  const session = await createAccountAuthorizationSession(
6601
6584
  apiBaseUrl,
6602
6585
  token,
6603
6586
  selectedAccountId,
6604
- activeCredentialId
6587
+ activeCredentialId,
6588
+ { tokenAddress: source?.address, chainId: evmChainId }
6605
6589
  );
6606
6590
  const isMobile = !shouldUseWalletConnector({
6607
6591
  useWalletConnector: useWalletConnectorProp,
@@ -6639,6 +6623,9 @@ function useProviderHandlers(deps) {
6639
6623
  }
6640
6624
  }, [
6641
6625
  selectedAccountId,
6626
+ selectedWalletId,
6627
+ selectedTokenSymbol,
6628
+ chains,
6642
6629
  activeCredentialId,
6643
6630
  accounts,
6644
6631
  providers,
@@ -7504,6 +7491,9 @@ function SwypePaymentInner({
7504
7491
  useWalletConnectorProp,
7505
7492
  activeCredentialId: state.activeCredentialId,
7506
7493
  selectedAccountId: state.selectedAccountId,
7494
+ selectedWalletId: state.selectedWalletId,
7495
+ selectedTokenSymbol: state.selectedTokenSymbol,
7496
+ chains: state.chains,
7507
7497
  accounts: state.accounts,
7508
7498
  providers: state.providers,
7509
7499
  authExecutor,