@swype-org/react-sdk 0.1.93 → 0.1.95

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
@@ -3184,72 +3184,6 @@ var errorBannerStyle2 = (tokens) => ({
3184
3184
  width: "100%",
3185
3185
  textAlign: "left"
3186
3186
  });
3187
- function VerifyPasskeyScreen({
3188
- onVerify,
3189
- onBack,
3190
- verifying,
3191
- error
3192
- }) {
3193
- const { tokens } = useSwypeConfig();
3194
- return /* @__PURE__ */ jsxs(
3195
- ScreenLayout,
3196
- {
3197
- footer: /* @__PURE__ */ jsxs(Fragment, { children: [
3198
- /* @__PURE__ */ jsx(PrimaryButton, { onClick: onVerify, disabled: verifying, loading: verifying, children: "Verify passkey" }),
3199
- /* @__PURE__ */ jsx(PoweredByFooter, {})
3200
- ] }),
3201
- children: [
3202
- /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
3203
- /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
3204
- /* @__PURE__ */ jsx(IconCircle, { variant: "accent", size: 64, children: /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
3205
- /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "3", stroke: tokens.accent, strokeWidth: "1.5", strokeDasharray: "3 2" }),
3206
- /* @__PURE__ */ jsx("circle", { cx: "9", cy: "10", r: "1", fill: tokens.accent }),
3207
- /* @__PURE__ */ jsx("circle", { cx: "15", cy: "10", r: "1", fill: tokens.accent }),
3208
- /* @__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" })
3209
- ] }) }),
3210
- /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Verify your passkey" }),
3211
- /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Your browser requires a separate window to verify your passkey. Tap the button below to continue." }),
3212
- error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle3(tokens), children: error }),
3213
- /* @__PURE__ */ jsx(InfoBanner, { children: "Your passkey is stored securely on your device. Swype never sees your biometric data." })
3214
- ] })
3215
- ]
3216
- }
3217
- );
3218
- }
3219
- var contentStyle4 = {
3220
- textAlign: "center",
3221
- flex: 1,
3222
- display: "flex",
3223
- flexDirection: "column",
3224
- alignItems: "center",
3225
- paddingTop: 32
3226
- };
3227
- var headingStyle4 = (color) => ({
3228
- fontSize: "1.45rem",
3229
- fontWeight: 700,
3230
- letterSpacing: "-0.02em",
3231
- color,
3232
- margin: "24px 0 8px"
3233
- });
3234
- var subtitleStyle4 = (color) => ({
3235
- fontSize: "0.9rem",
3236
- color,
3237
- margin: "0 0 28px",
3238
- lineHeight: 1.5,
3239
- maxWidth: 280
3240
- });
3241
- var errorBannerStyle3 = (tokens) => ({
3242
- background: tokens.errorBg,
3243
- border: `1px solid ${tokens.error}66`,
3244
- borderRadius: 16,
3245
- padding: "11px 14px",
3246
- color: tokens.error,
3247
- fontSize: "0.84rem",
3248
- marginBottom: 14,
3249
- lineHeight: 1.5,
3250
- width: "100%",
3251
- textAlign: "left"
3252
- });
3253
3187
  var WALLET_EMOJIS = {
3254
3188
  rabby: "\u{1F430}",
3255
3189
  ora: "\u2666\uFE0F",
@@ -3292,8 +3226,8 @@ function WalletPickerScreen({
3292
3226
  children: [
3293
3227
  /* @__PURE__ */ jsx(ScreenHeader, { title: "Set up Swype", onBack }),
3294
3228
  hasPending && /* @__PURE__ */ jsxs(Fragment, { children: [
3295
- /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Continue where you left off" }),
3296
- /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
3229
+ /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
3230
+ /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
3297
3231
  /* @__PURE__ */ jsx("div", { style: pendingListStyle, children: pendingConnections.map((acct) => {
3298
3232
  const wallet = acct.wallets[0];
3299
3233
  const address = wallet ? truncateAddress(wallet.name) : void 0;
@@ -3333,8 +3267,8 @@ function WalletPickerScreen({
3333
3267
  /* @__PURE__ */ jsx("div", { style: dividerStyle2(tokens.border), children: /* @__PURE__ */ jsx("span", { style: dividerTextStyle(tokens.textMuted), children: "Or connect a new wallet" }) })
3334
3268
  ] }),
3335
3269
  !hasPending && /* @__PURE__ */ jsxs(Fragment, { children: [
3336
- /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Where are your stablecoins?" }),
3337
- /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Select the wallet you want to deposit from" })
3270
+ /* @__PURE__ */ jsx("h2", { style: headingStyle4(tokens.text), children: "Where are your stablecoins?" }),
3271
+ /* @__PURE__ */ jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Select the wallet you want to deposit from" })
3338
3272
  ] }),
3339
3273
  /* @__PURE__ */ jsxs("div", { style: gridStyle, children: [
3340
3274
  displayProviders.map((p) => {
@@ -3387,14 +3321,14 @@ function WalletPickerScreen({
3387
3321
  }
3388
3322
  );
3389
3323
  }
3390
- var headingStyle5 = (color) => ({
3324
+ var headingStyle4 = (color) => ({
3391
3325
  fontSize: "1.35rem",
3392
3326
  fontWeight: 700,
3393
3327
  letterSpacing: "-0.02em",
3394
3328
  color,
3395
3329
  margin: "8px 0 4px"
3396
3330
  });
3397
- var subtitleStyle5 = (color) => ({
3331
+ var subtitleStyle4 = (color) => ({
3398
3332
  fontSize: "0.88rem",
3399
3333
  color,
3400
3334
  margin: "0 0 24px"
@@ -3570,9 +3504,9 @@ function SetupScreen({
3570
3504
  ] }),
3571
3505
  children: [
3572
3506
  /* @__PURE__ */ jsx(ScreenHeader, { title: "Swype Setup", onBack, right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
3573
- /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Set up One-Tap deposits" }),
3574
- /* @__PURE__ */ jsx("p", { style: subtitleStyle6(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
3575
- error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle4(tokens), children: error }),
3507
+ /* @__PURE__ */ jsx("h2", { style: headingStyle5(tokens.text), children: "Set up One-Tap deposits" }),
3508
+ /* @__PURE__ */ jsx("p", { style: subtitleStyle5(tokens.textSecondary), children: "Set your limit for instant deposits. Like a contactless card \u2014 you choose the max." }),
3509
+ error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle3(tokens), children: error }),
3576
3510
  /* @__PURE__ */ jsxs("div", { style: balanceRowStyle, children: [
3577
3511
  /* @__PURE__ */ jsxs("div", { style: balanceLeftStyle, children: [
3578
3512
  /* @__PURE__ */ jsx("div", { style: coinIconStyle(tokens.accent), children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
@@ -3650,20 +3584,20 @@ function SetupScreen({
3650
3584
  }
3651
3585
  );
3652
3586
  }
3653
- var headingStyle6 = (color) => ({
3587
+ var headingStyle5 = (color) => ({
3654
3588
  fontSize: "1.3rem",
3655
3589
  fontWeight: 700,
3656
3590
  letterSpacing: "-0.02em",
3657
3591
  color,
3658
3592
  margin: "8px 0 4px"
3659
3593
  });
3660
- var subtitleStyle6 = (color) => ({
3594
+ var subtitleStyle5 = (color) => ({
3661
3595
  fontSize: "0.86rem",
3662
3596
  color,
3663
3597
  margin: "0 0 24px",
3664
3598
  lineHeight: 1.5
3665
3599
  });
3666
- var errorBannerStyle4 = (tokens) => ({
3600
+ var errorBannerStyle3 = (tokens) => ({
3667
3601
  background: tokens.errorBg,
3668
3602
  border: `1px solid ${tokens.error}66`,
3669
3603
  borderRadius: 16,
@@ -3931,7 +3865,7 @@ function DepositScreen({
3931
3865
  "%)"
3932
3866
  ] }) : /* @__PURE__ */ jsx("div", { style: detailRowStyle(tokens.textMuted), children: "Fees calculated at time of transfer" })
3933
3867
  ] }),
3934
- error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle5(tokens), children: error })
3868
+ error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle4(tokens), children: error })
3935
3869
  ]
3936
3870
  }
3937
3871
  );
@@ -3999,7 +3933,7 @@ var detailRowStyle = (color) => ({
3999
3933
  color,
4000
3934
  marginBottom: 4
4001
3935
  });
4002
- var errorBannerStyle5 = (tokens) => ({
3936
+ var errorBannerStyle4 = (tokens) => ({
4003
3937
  background: tokens.errorBg,
4004
3938
  border: `1px solid ${tokens.error}66`,
4005
3939
  borderRadius: 16,
@@ -4098,22 +4032,22 @@ function SuccessScreen({
4098
4032
  right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout })
4099
4033
  }
4100
4034
  ),
4101
- /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
4035
+ /* @__PURE__ */ jsxs("div", { style: contentStyle4, children: [
4102
4036
  succeeded ? /* @__PURE__ */ jsxs(Fragment, { children: [
4103
4037
  /* @__PURE__ */ jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
4104
- /* @__PURE__ */ jsxs("h2", { style: headingStyle7(tokens.text), children: [
4038
+ /* @__PURE__ */ jsxs("h2", { style: headingStyle6(tokens.text), children: [
4105
4039
  "$",
4106
4040
  amount.toFixed(2),
4107
4041
  " deposited"
4108
4042
  ] }),
4109
- merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle7(tokens.textSecondary), children: [
4043
+ merchantName && /* @__PURE__ */ jsxs("p", { style: subtitleStyle6(tokens.textSecondary), children: [
4110
4044
  "to ",
4111
4045
  merchantName
4112
4046
  ] })
4113
4047
  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
4114
4048
  /* @__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 }) }) }),
4115
- /* @__PURE__ */ jsx("h2", { style: headingStyle7(tokens.text), children: "Transfer failed" }),
4116
- error && /* @__PURE__ */ jsx("p", { style: subtitleStyle7(tokens.error), children: error })
4049
+ /* @__PURE__ */ jsx("h2", { style: headingStyle6(tokens.text), children: "Transfer failed" }),
4050
+ error && /* @__PURE__ */ jsx("p", { style: subtitleStyle6(tokens.error), children: error })
4117
4051
  ] }),
4118
4052
  /* @__PURE__ */ jsxs("div", { style: summaryCardStyle(tokens), children: [
4119
4053
  sourceName && /* @__PURE__ */ jsxs("div", { style: summaryRowStyle, children: [
@@ -4145,21 +4079,21 @@ function SuccessScreen({
4145
4079
  }
4146
4080
  );
4147
4081
  }
4148
- var contentStyle5 = {
4082
+ var contentStyle4 = {
4149
4083
  flex: 1,
4150
4084
  display: "flex",
4151
4085
  flexDirection: "column",
4152
4086
  alignItems: "center",
4153
4087
  paddingTop: 16
4154
4088
  };
4155
- var headingStyle7 = (color) => ({
4089
+ var headingStyle6 = (color) => ({
4156
4090
  fontSize: "1.5rem",
4157
4091
  fontWeight: 700,
4158
4092
  letterSpacing: "-0.02em",
4159
4093
  color,
4160
4094
  margin: "20px 0 4px"
4161
4095
  });
4162
- var subtitleStyle7 = (color) => ({
4096
+ var subtitleStyle6 = (color) => ({
4163
4097
  fontSize: "0.9rem",
4164
4098
  color,
4165
4099
  margin: "0 0 20px"
@@ -4265,7 +4199,7 @@ function SelectSourceScreen({
4265
4199
  right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout })
4266
4200
  }
4267
4201
  ),
4268
- /* @__PURE__ */ jsx("p", { style: subtitleStyle8(tokens.textMuted), children: "Choose which chain and token to pay from." }),
4202
+ /* @__PURE__ */ jsx("p", { style: subtitleStyle7(tokens.textMuted), children: "Choose which chain and token to pay from." }),
4269
4203
  /* @__PURE__ */ jsx("label", { style: labelStyle2(tokens.textSecondary), children: "Chain" }),
4270
4204
  /* @__PURE__ */ jsx("div", { style: optionListStyle, children: choices.map((chain) => {
4271
4205
  const isSelected = chain.chainName === selectedChainName;
@@ -4322,7 +4256,7 @@ function SelectSourceScreen({
4322
4256
  }
4323
4257
  );
4324
4258
  }
4325
- var subtitleStyle8 = (color) => ({
4259
+ var subtitleStyle7 = (color) => ({
4326
4260
  fontSize: "0.85rem",
4327
4261
  color,
4328
4262
  margin: "0 0 20px",
@@ -4437,8 +4371,8 @@ function AdvancedSourceScreen({
4437
4371
  right: /* @__PURE__ */ jsx("span", { style: advancedBadgeStyle(tokens.accent), children: "Advanced" })
4438
4372
  }
4439
4373
  ),
4440
- /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
4441
- /* @__PURE__ */ jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
4374
+ /* @__PURE__ */ jsx("h2", { style: headingStyle7(tokens.text), children: "Set up One-Tap deposits" }),
4375
+ /* @__PURE__ */ jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
4442
4376
  /* @__PURE__ */ jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Select tokens to approve" }),
4443
4377
  /* @__PURE__ */ jsx("div", { style: chainListStyle, children: choices.map((chain) => {
4444
4378
  const isExpanded = expandedChain === chain.chainName;
@@ -4501,14 +4435,14 @@ var advancedBadgeStyle = (color) => ({
4501
4435
  padding: "3px 10px",
4502
4436
  letterSpacing: "0.02em"
4503
4437
  });
4504
- var headingStyle8 = (color) => ({
4438
+ var headingStyle7 = (color) => ({
4505
4439
  fontSize: "1.3rem",
4506
4440
  fontWeight: 700,
4507
4441
  letterSpacing: "-0.02em",
4508
4442
  color,
4509
4443
  margin: "8px 0 4px"
4510
4444
  });
4511
- var subtitleStyle9 = (color) => ({
4445
+ var subtitleStyle8 = (color) => ({
4512
4446
  fontSize: "0.86rem",
4513
4447
  color,
4514
4448
  margin: "0 0 20px",
@@ -4636,16 +4570,16 @@ function TransferStatusScreen({
4636
4570
  const steps = buildSteps(phase);
4637
4571
  return /* @__PURE__ */ jsxs(ScreenLayout, { children: [
4638
4572
  /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
4639
- /* @__PURE__ */ jsxs("div", { style: contentStyle6, children: [
4573
+ /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
4640
4574
  /* @__PURE__ */ jsx(Spinner, { size: 48 }),
4641
- /* @__PURE__ */ jsx("h2", { style: headingStyle9(tokens.text), children: "Processing Transfer..." }),
4642
- error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle6(tokens), children: error }),
4575
+ /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: "Processing Transfer..." }),
4576
+ error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle5(tokens), children: error }),
4643
4577
  /* @__PURE__ */ jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsx(StepList, { steps }) }),
4644
4578
  /* @__PURE__ */ jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" })
4645
4579
  ] })
4646
4580
  ] });
4647
4581
  }
4648
- var contentStyle6 = {
4582
+ var contentStyle5 = {
4649
4583
  flex: 1,
4650
4584
  display: "flex",
4651
4585
  flexDirection: "column",
@@ -4654,14 +4588,14 @@ var contentStyle6 = {
4654
4588
  textAlign: "center",
4655
4589
  padding: "0 24px"
4656
4590
  };
4657
- var headingStyle9 = (color) => ({
4591
+ var headingStyle8 = (color) => ({
4658
4592
  fontSize: "1.45rem",
4659
4593
  fontWeight: 700,
4660
4594
  letterSpacing: "-0.02em",
4661
4595
  color,
4662
4596
  margin: "20px 0 16px"
4663
4597
  });
4664
- var errorBannerStyle6 = (tokens) => ({
4598
+ var errorBannerStyle5 = (tokens) => ({
4665
4599
  background: tokens.errorBg,
4666
4600
  border: `1px solid ${tokens.error}66`,
4667
4601
  borderRadius: 16,
@@ -4721,10 +4655,10 @@ function OpenWalletScreen({
4721
4655
  ] }),
4722
4656
  children: [
4723
4657
  /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
4724
- /* @__PURE__ */ jsxs("div", { style: contentStyle7, children: [
4658
+ /* @__PURE__ */ jsxs("div", { style: contentStyle6, children: [
4725
4659
  logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
4726
- /* @__PURE__ */ jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
4727
- /* @__PURE__ */ jsx("p", { style: subtitleStyle10(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
4660
+ /* @__PURE__ */ jsx("h2", { style: headingStyle9(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
4661
+ /* @__PURE__ */ jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
4728
4662
  !loading && /* @__PURE__ */ jsxs("div", { style: waitingBadgeStyle(tokens), children: [
4729
4663
  /* @__PURE__ */ jsx(Spinner, { size: 14 }),
4730
4664
  /* @__PURE__ */ jsx("span", { children: "Waiting for authorization..." })
@@ -4734,7 +4668,7 @@ function OpenWalletScreen({
4734
4668
  }
4735
4669
  );
4736
4670
  }
4737
- var contentStyle7 = {
4671
+ var contentStyle6 = {
4738
4672
  flex: 1,
4739
4673
  display: "flex",
4740
4674
  flexDirection: "column",
@@ -4754,14 +4688,14 @@ var logoStyle = {
4754
4688
  borderRadius: 14,
4755
4689
  objectFit: "contain"
4756
4690
  };
4757
- var headingStyle10 = (color) => ({
4691
+ var headingStyle9 = (color) => ({
4758
4692
  fontSize: "1.45rem",
4759
4693
  fontWeight: 700,
4760
4694
  letterSpacing: "-0.02em",
4761
4695
  color,
4762
4696
  margin: "20px 0 8px"
4763
4697
  });
4764
- var subtitleStyle10 = (color) => ({
4698
+ var subtitleStyle9 = (color) => ({
4765
4699
  fontSize: "0.9rem",
4766
4700
  color,
4767
4701
  margin: "0 0 24px",
@@ -4805,10 +4739,10 @@ function ConfirmSignScreen({
4805
4739
  ] }),
4806
4740
  children: [
4807
4741
  /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
4808
- /* @__PURE__ */ jsxs("div", { style: contentStyle8, children: [
4742
+ /* @__PURE__ */ jsxs("div", { style: contentStyle7, children: [
4809
4743
  logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
4810
- /* @__PURE__ */ jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
4811
- /* @__PURE__ */ jsxs("p", { style: subtitleStyle11(tokens.textSecondary), children: [
4744
+ /* @__PURE__ */ jsx("h2", { style: headingStyle10(tokens.text), children: "Wallet authorized" }),
4745
+ /* @__PURE__ */ jsxs("p", { style: subtitleStyle10(tokens.textSecondary), children: [
4812
4746
  displayName,
4813
4747
  " approved the connection. Tap below to confirm your payment."
4814
4748
  ] }),
@@ -4821,7 +4755,7 @@ function ConfirmSignScreen({
4821
4755
  }
4822
4756
  );
4823
4757
  }
4824
- var contentStyle8 = {
4758
+ var contentStyle7 = {
4825
4759
  flex: 1,
4826
4760
  display: "flex",
4827
4761
  flexDirection: "column",
@@ -4836,14 +4770,14 @@ var logoStyle2 = {
4836
4770
  borderRadius: 14,
4837
4771
  objectFit: "contain"
4838
4772
  };
4839
- var headingStyle11 = (color) => ({
4773
+ var headingStyle10 = (color) => ({
4840
4774
  fontSize: "1.45rem",
4841
4775
  fontWeight: 700,
4842
4776
  letterSpacing: "-0.02em",
4843
4777
  color,
4844
4778
  margin: "20px 0 8px"
4845
4779
  });
4846
- var subtitleStyle11 = (color) => ({
4780
+ var subtitleStyle10 = (color) => ({
4847
4781
  fontSize: "0.9rem",
4848
4782
  color,
4849
4783
  margin: "0 0 24px",
@@ -4945,20 +4879,6 @@ function StepRenderer({
4945
4879
  }
4946
4880
  );
4947
4881
  }
4948
- if ((step === "login" || step === "otp-verify") && authenticated) {
4949
- return /* @__PURE__ */ jsx(CenteredSpinner, { label: "Verifying your passkey...test2" });
4950
- }
4951
- if (step === "verify-passkey") {
4952
- return /* @__PURE__ */ jsx(
4953
- VerifyPasskeyScreen,
4954
- {
4955
- onVerify: handlers.onVerifyPasskeyViaPopup,
4956
- onBack: handlers.onLogout,
4957
- verifying: state.verifyingPasskeyPopup,
4958
- error: state.error
4959
- }
4960
- );
4961
- }
4962
4882
  if (step === "create-passkey") {
4963
4883
  return /* @__PURE__ */ jsx(
4964
4884
  CreatePasskeyScreen,
@@ -5139,7 +5059,7 @@ var PaymentErrorBoundary = class extends Component {
5139
5059
  /* @__PURE__ */ jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
5140
5060
  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16", r: "0.75", fill: "#ef4444" })
5141
5061
  ] }) }),
5142
- /* @__PURE__ */ jsx("h2", { style: headingStyle12, children: "Something went wrong" }),
5062
+ /* @__PURE__ */ jsx("h2", { style: headingStyle11, children: "Something went wrong" }),
5143
5063
  /* @__PURE__ */ jsx("p", { style: messageStyle, children: "An unexpected error occurred. Please try again." }),
5144
5064
  /* @__PURE__ */ jsx("button", { type: "button", onClick: this.handleReset, style: buttonStyle3, children: "Try again" })
5145
5065
  ] });
@@ -5159,7 +5079,7 @@ var containerStyle8 = {
5159
5079
  var iconStyle4 = {
5160
5080
  marginBottom: 20
5161
5081
  };
5162
- var headingStyle12 = {
5082
+ var headingStyle11 = {
5163
5083
  fontSize: "1.25rem",
5164
5084
  fontWeight: 700,
5165
5085
  color: "#1a1a1a",
@@ -5234,6 +5154,8 @@ function SwypePaymentInner({
5234
5154
  const onCompleteRef = useRef(onComplete);
5235
5155
  onCompleteRef.current = onComplete;
5236
5156
  const pollingRef = useRef(null);
5157
+ const getAccessTokenRef = useRef(getAccessToken);
5158
+ getAccessTokenRef.current = getAccessToken;
5237
5159
  const handleAuthorizedMobileReturnRef = useRef(
5238
5160
  null
5239
5161
  );
@@ -5921,7 +5843,7 @@ function SwypePaymentInner({
5921
5843
  try {
5922
5844
  let token = null;
5923
5845
  for (let attempt = 0; attempt < 3; attempt++) {
5924
- token = await getAccessToken();
5846
+ token = await getAccessTokenRef.current();
5925
5847
  if (token || cancelled) break;
5926
5848
  await new Promise((r) => setTimeout(r, 1e3));
5927
5849
  }
@@ -5947,12 +5869,18 @@ function SwypePaymentInner({
5947
5869
  return;
5948
5870
  }
5949
5871
  if (cancelled) return;
5872
+ const credentialIds = allPasskeys.map((p) => p.credentialId);
5873
+ let matched = null;
5950
5874
  if (isSafari() && isInCrossOriginIframe()) {
5951
- dispatch({ type: "NAVIGATE", step: "verify-passkey" });
5952
- return;
5875
+ matched = await findDevicePasskeyViaPopup({
5876
+ credentialIds,
5877
+ rpId: resolvePasskeyRpId(),
5878
+ authToken: token ?? void 0,
5879
+ apiBaseUrl
5880
+ });
5881
+ } else {
5882
+ matched = await findDevicePasskey(credentialIds);
5953
5883
  }
5954
- const credentialIds = allPasskeys.map((p) => p.credentialId);
5955
- const matched = await findDevicePasskey(credentialIds);
5956
5884
  if (cancelled) return;
5957
5885
  if (matched) {
5958
5886
  dispatch({ type: "PASSKEY_ACTIVATED", credentialId: matched });
@@ -5971,7 +5899,7 @@ function SwypePaymentInner({
5971
5899
  return () => {
5972
5900
  cancelled = true;
5973
5901
  };
5974
- }, [ready, authenticated, state.step, apiBaseUrl, getAccessToken, state.activeCredentialId]);
5902
+ }, [ready, authenticated, state.step, apiBaseUrl, state.activeCredentialId]);
5975
5903
  useEffect(() => {
5976
5904
  const loadAction = resolveDataLoadAction({
5977
5905
  authenticated,