@swype-org/react-sdk 0.2.361 → 0.2.364

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
@@ -8583,25 +8583,45 @@ function SettingsMenu({ onLogout }) {
8583
8583
  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
8584
8584
  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "2", fill: "currentColor" })
8585
8585
  ] }) }),
8586
- open && /* @__PURE__ */ jsx("div", { style: dropdownStyle(tokens), children: /* @__PURE__ */ jsxs(
8587
- "button",
8588
- {
8589
- type: "button",
8590
- onClick: () => {
8591
- setOpen(false);
8592
- onLogout();
8593
- },
8594
- style: menuItemStyle(tokens),
8595
- children: [
8596
- /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 8, flexShrink: 0 }, children: [
8597
- /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
8598
- /* @__PURE__ */ jsx("polyline", { points: "16 17 21 12 16 7", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
8599
- /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
8600
- ] }),
8601
- "Log out"
8602
- ]
8603
- }
8604
- ) })
8586
+ open && /* @__PURE__ */ jsxs("div", { style: dropdownStyle(tokens), children: [
8587
+ /* @__PURE__ */ jsxs(
8588
+ "a",
8589
+ {
8590
+ href: "https://intercom.help/blinkcash/en/",
8591
+ target: "_blank",
8592
+ rel: "noopener noreferrer",
8593
+ onClick: () => setOpen(false),
8594
+ style: menuItemStyle(tokens.text),
8595
+ children: [
8596
+ /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 8, flexShrink: 0 }, children: [
8597
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: tokens.text, strokeWidth: "2" }),
8598
+ /* @__PURE__ */ jsx("path", { d: "M9.5 9a2.5 2.5 0 014.5 1.5c0 1.5-2 2-2 3", stroke: tokens.text, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
8599
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "17", r: "1", fill: tokens.text })
8600
+ ] }),
8601
+ "Help"
8602
+ ]
8603
+ }
8604
+ ),
8605
+ /* @__PURE__ */ jsxs(
8606
+ "button",
8607
+ {
8608
+ type: "button",
8609
+ onClick: () => {
8610
+ setOpen(false);
8611
+ onLogout();
8612
+ },
8613
+ style: menuItemStyle(tokens.error),
8614
+ children: [
8615
+ /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 8, flexShrink: 0 }, children: [
8616
+ /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
8617
+ /* @__PURE__ */ jsx("polyline", { points: "16 17 21 12 16 7", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
8618
+ /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
8619
+ ] }),
8620
+ "Log out"
8621
+ ]
8622
+ }
8623
+ )
8624
+ ] })
8605
8625
  ] });
8606
8626
  }
8607
8627
  var containerStyle2 = {
@@ -8620,7 +8640,7 @@ var dropdownStyle = (tokens) => ({
8620
8640
  zIndex: 100,
8621
8641
  overflow: "hidden"
8622
8642
  });
8623
- var menuItemStyle = (tokens) => ({
8643
+ var menuItemStyle = (color) => ({
8624
8644
  width: "100%",
8625
8645
  display: "flex",
8626
8646
  alignItems: "center",
@@ -8631,7 +8651,9 @@ var menuItemStyle = (tokens) => ({
8631
8651
  fontFamily: "inherit",
8632
8652
  fontSize: "0.85rem",
8633
8653
  fontWeight: 500,
8634
- color: tokens.error
8654
+ color,
8655
+ textDecoration: "none",
8656
+ boxSizing: "border-box"
8635
8657
  });
8636
8658
  function ScreenHeader({ title, right, onBack, left, badge, onLogout, center }) {
8637
8659
  const { tokens } = useBlinkConfig();
@@ -10583,6 +10605,38 @@ function FaceIdIcon({ size = 24 }) {
10583
10605
  /* @__PURE__ */ jsx("path", { d: "M9.5 16c.7.6 1.6 1 2.5 1s1.8-.4 2.5-1", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round" })
10584
10606
  ] });
10585
10607
  }
10608
+ function WalletIcon() {
10609
+ return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
10610
+ /* @__PURE__ */ jsx(
10611
+ "path",
10612
+ {
10613
+ d: "M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-9Zm2.5-1a1 1 0 0 0-1 1V9h13v-1.5a1 1 0 0 0-1-1h-11ZM5.5 10.5v6a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-6h-13Z",
10614
+ fill: "currentColor"
10615
+ }
10616
+ ),
10617
+ /* @__PURE__ */ jsx(
10618
+ "path",
10619
+ {
10620
+ d: "M14.5 13.75a.75.75 0 0 1 .75-.75h2a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1-.75-.75Z",
10621
+ fill: "currentColor"
10622
+ }
10623
+ )
10624
+ ] });
10625
+ }
10626
+ function QrIcon({ color = "currentColor" } = {}) {
10627
+ return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
10628
+ /* @__PURE__ */ jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
10629
+ /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "2", height: "2", fill: color }),
10630
+ /* @__PURE__ */ jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
10631
+ /* @__PURE__ */ jsx("rect", { x: "16", y: "6", width: "2", height: "2", fill: color }),
10632
+ /* @__PURE__ */ jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
10633
+ /* @__PURE__ */ jsx("rect", { x: "6", y: "16", width: "2", height: "2", fill: color }),
10634
+ /* @__PURE__ */ jsx("rect", { x: "13.5", y: "13.5", width: "2.5", height: "2.5", fill: color }),
10635
+ /* @__PURE__ */ jsx("rect", { x: "18", y: "13.5", width: "2.5", height: "2.5", fill: color }),
10636
+ /* @__PURE__ */ jsx("rect", { x: "13.5", y: "18", width: "2.5", height: "2.5", fill: color }),
10637
+ /* @__PURE__ */ jsx("rect", { x: "18", y: "18", width: "2.5", height: "2.5", fill: color })
10638
+ ] });
10639
+ }
10586
10640
  function LogoCircle({ src, fallback, preserveShape, size = 36 }) {
10587
10641
  const { tokens } = useBlinkConfig();
10588
10642
  return /* @__PURE__ */ jsx("span", { style: logoCircleStyle(size, tokens.bgCard, tokens.textMuted), children: src ? /* @__PURE__ */ jsx("img", { src, alt: "", style: logoImageStyle(preserveShape) }) : fallback });
@@ -11268,7 +11322,7 @@ function DepositOptionsScreen({
11268
11322
  ),
11269
11323
  children: [
11270
11324
  /* @__PURE__ */ jsx("span", { style: manualLabelStyle(tokens.text), children: "Send Crypto Manually" }),
11271
- /* @__PURE__ */ jsx(QrIcon, { color: tokens.text })
11325
+ /* @__PURE__ */ jsx(QrIcon2, { color: tokens.text })
11272
11326
  ]
11273
11327
  }
11274
11328
  )
@@ -11276,7 +11330,7 @@ function DepositOptionsScreen({
11276
11330
  ] })
11277
11331
  ] });
11278
11332
  }
11279
- function QrIcon({ color }) {
11333
+ function QrIcon2({ color }) {
11280
11334
  return /* @__PURE__ */ jsxs(
11281
11335
  "svg",
11282
11336
  {
@@ -11466,7 +11520,7 @@ function WelcomeBackScreen({
11466
11520
  ),
11467
11521
  children: [
11468
11522
  /* @__PURE__ */ jsx("span", { style: manualLabelStyle2(tokens.text), children: "Send Crypto Manually" }),
11469
- /* @__PURE__ */ jsx(QrIcon2, { color: tokens.text })
11523
+ /* @__PURE__ */ jsx(QrIcon3, { color: tokens.text })
11470
11524
  ]
11471
11525
  }
11472
11526
  )
@@ -11474,7 +11528,7 @@ function WelcomeBackScreen({
11474
11528
  ] })
11475
11529
  ] });
11476
11530
  }
11477
- function QrIcon2({ color }) {
11531
+ function QrIcon3({ color }) {
11478
11532
  return /* @__PURE__ */ jsxs(
11479
11533
  "svg",
11480
11534
  {
@@ -13584,7 +13638,7 @@ function SelectDepositSourceScreen({
13584
13638
  label: "Send manually",
13585
13639
  color: tokens.text,
13586
13640
  onClick: onSendManually,
13587
- icon: /* @__PURE__ */ jsx(QrIcon3, { color: tokens.text })
13641
+ icon: /* @__PURE__ */ jsx(QrIcon, { color: tokens.text })
13588
13642
  }
13589
13643
  ),
13590
13644
  onAddProvider && /* @__PURE__ */ jsx(
@@ -13700,38 +13754,6 @@ function ActionRow({
13700
13754
  }
13701
13755
  );
13702
13756
  }
13703
- function QrIcon3({ color }) {
13704
- return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
13705
- /* @__PURE__ */ jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
13706
- /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "2", height: "2", fill: color }),
13707
- /* @__PURE__ */ jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
13708
- /* @__PURE__ */ jsx("rect", { x: "16", y: "6", width: "2", height: "2", fill: color }),
13709
- /* @__PURE__ */ jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
13710
- /* @__PURE__ */ jsx("rect", { x: "6", y: "16", width: "2", height: "2", fill: color }),
13711
- /* @__PURE__ */ jsx("rect", { x: "13.5", y: "13.5", width: "2.5", height: "2.5", fill: color }),
13712
- /* @__PURE__ */ jsx("rect", { x: "18", y: "13.5", width: "2.5", height: "2.5", fill: color }),
13713
- /* @__PURE__ */ jsx("rect", { x: "13.5", y: "18", width: "2.5", height: "2.5", fill: color }),
13714
- /* @__PURE__ */ jsx("rect", { x: "18", y: "18", width: "2.5", height: "2.5", fill: color })
13715
- ] });
13716
- }
13717
- function WalletIcon() {
13718
- return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
13719
- /* @__PURE__ */ jsx(
13720
- "path",
13721
- {
13722
- d: "M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-9Zm2.5-1a1 1 0 0 0-1 1V9h13v-1.5a1 1 0 0 0-1-1h-11ZM5.5 10.5v6a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-6h-13Z",
13723
- fill: "currentColor"
13724
- }
13725
- ),
13726
- /* @__PURE__ */ jsx(
13727
- "path",
13728
- {
13729
- d: "M14.5 13.75a.75.75 0 0 1 .75-.75h2a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1-.75-.75Z",
13730
- fill: "currentColor"
13731
- }
13732
- )
13733
- ] });
13734
- }
13735
13757
  var actionRowStyle = (color, hovered) => ({
13736
13758
  display: "flex",
13737
13759
  alignItems: "center",
@@ -13971,7 +13993,13 @@ function DepositScreen({
13971
13993
  100% { background-position: -200% 0; }
13972
13994
  }
13973
13995
  ` }),
13974
- /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
13996
+ /* @__PURE__ */ jsx(
13997
+ ScreenHeader,
13998
+ {
13999
+ left: /* @__PURE__ */ jsx("img", { src: BLINK_WORDMARK, alt: "Blink", style: wordmarkImgStyle4 }),
14000
+ onLogout
14001
+ }
14002
+ ),
13975
14003
  /* @__PURE__ */ jsxs("div", { style: redesignHeroStackStyle(mobileEntryWithKeypad), children: [
13976
14004
  showDesktopInputHero ? /* @__PURE__ */ jsxs("div", { style: entryDesktopHeroRowStyle(desktopInputHeroColor, getDesktopHeroFontSize(liveMobileHeroValue)), children: [
13977
14005
  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: entryDollarStyle(isZero), children: "$" }),
@@ -14111,6 +14139,11 @@ function FaceIdIcon2() {
14111
14139
  )
14112
14140
  ] });
14113
14141
  }
14142
+ var wordmarkImgStyle4 = {
14143
+ height: 31,
14144
+ width: "auto",
14145
+ display: "block"
14146
+ };
14114
14147
  var bannerSlotStyle2 = {
14115
14148
  display: "flex",
14116
14149
  justifyContent: "center",
@@ -15330,6 +15363,7 @@ function OpenWalletScreen({
15330
15363
  onLogout
15331
15364
  }) {
15332
15365
  const { tokens } = useBlinkConfig();
15366
+ const [showQrView, setShowQrView] = useState(false);
15333
15367
  const displayName = walletName ?? "your wallet";
15334
15368
  const logoSrc = walletLogoUrl ?? (walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0);
15335
15369
  const autoOpenedRef = useRef(null);
@@ -15347,61 +15381,6 @@ function OpenWalletScreen({
15347
15381
  const handleOpen = useCallback(() => {
15348
15382
  openDeeplink(deeplinkUri);
15349
15383
  }, [deeplinkUri]);
15350
- const logoBlock = /* @__PURE__ */ jsxs("div", { style: logoFrameStyle, children: [
15351
- /* @__PURE__ */ jsx(
15352
- "svg",
15353
- {
15354
- width: "96",
15355
- height: "96",
15356
- viewBox: "0 0 96 96",
15357
- fill: "none",
15358
- style: logoRingSvgStyle,
15359
- "aria-hidden": true,
15360
- children: /* @__PURE__ */ jsx(
15361
- "circle",
15362
- {
15363
- cx: "48",
15364
- cy: "48",
15365
- r: "47",
15366
- stroke: tokens.textMuted,
15367
- strokeOpacity: "0.18",
15368
- strokeWidth: "2",
15369
- fill: "none"
15370
- }
15371
- )
15372
- }
15373
- ),
15374
- /* @__PURE__ */ jsx(
15375
- "svg",
15376
- {
15377
- width: "96",
15378
- height: "96",
15379
- viewBox: "0 0 96 96",
15380
- fill: "none",
15381
- style: spinningRingSvgStyle,
15382
- "aria-hidden": true,
15383
- children: /* @__PURE__ */ jsx(
15384
- "path",
15385
- {
15386
- d: "M 71.7 89.04 A 47 47 0 1 1 89.04 71.7",
15387
- stroke: tokens.textMuted,
15388
- strokeOpacity: "0.65",
15389
- strokeWidth: "2",
15390
- fill: "none",
15391
- strokeLinecap: "round"
15392
- }
15393
- )
15394
- }
15395
- ),
15396
- /* @__PURE__ */ jsx("div", { style: logoCircleStyle2(tokens.bgRecessed), children: logoSrc && /* @__PURE__ */ jsx(
15397
- "img",
15398
- {
15399
- src: logoSrc,
15400
- alt: displayName,
15401
- style: walletLogoUrl ? reownLogoStyle : logoStyle2
15402
- }
15403
- ) })
15404
- ] });
15405
15384
  const heroBlock = /* @__PURE__ */ jsxs("div", { style: heroFrameStyle, "aria-hidden": true, children: [
15406
15385
  /* @__PURE__ */ jsx(
15407
15386
  "svg",
@@ -15450,42 +15429,25 @@ function OpenWalletScreen({
15450
15429
  ] });
15451
15430
  if (!useDeeplink) {
15452
15431
  const hasQr = !!deeplinkUri;
15453
- const qrCaption = hasQr ? `Wallet on your phone? Scan to open ${displayName} and finish there.` : "Wallet on your phone? Your QR code is being prepared.";
15454
- return /* @__PURE__ */ jsxs(
15455
- ScreenLayout,
15456
- {
15457
- footer: error ? /* @__PURE__ */ jsxs("div", { style: footerStackStyle5, children: [
15458
- /* @__PURE__ */ jsx(InfoBanner, { children: error }),
15459
- onRetryAuthorization && /* @__PURE__ */ jsx(OutlineButton, { onClick: onRetryAuthorization, children: "Retry" })
15460
- ] }) : void 0,
15461
- children: [
15462
- /* @__PURE__ */ jsx("style", { children: `
15463
- @keyframes blink-open-wallet-qr-shimmer {
15464
- 0% { background-position: 200% 0; }
15465
- 100% { background-position: -200% 0; }
15466
- }
15467
- @keyframes blink-open-wallet-ring-spin {
15468
- to { transform: rotate(360deg); }
15469
- }
15470
- ` }),
15471
- /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
15472
- /* @__PURE__ */ jsxs("div", { style: desktopContentStyle, children: [
15473
- /* @__PURE__ */ jsxs("div", { style: primaryClusterStyle, children: [
15474
- logoBlock,
15475
- /* @__PURE__ */ jsxs("h2", { style: headingStyle12(tokens.text), children: [
15476
- "Setting up ",
15477
- displayName,
15478
- "\u2026"
15479
- ] }),
15480
- /* @__PURE__ */ jsx("p", { style: bodyStyle4(tokens.text), children: "Approve the connection in your wallet extension." }),
15481
- /* @__PURE__ */ jsxs("div", { style: inlineWaitStyle(tokens.textMuted), children: [
15482
- /* @__PURE__ */ jsx(Spinner, { size: 14 }),
15483
- /* @__PURE__ */ jsx("span", { children: "Waiting for authorization\u2026" })
15484
- ] })
15485
- ] }),
15486
- /* @__PURE__ */ jsxs("div", { style: qrSectionStyle, children: [
15487
- /* @__PURE__ */ jsx("span", { style: qrDividerLabelStyle(tokens.textMuted), children: "or scan with your phone" }),
15488
- hasQr ? /* @__PURE__ */ jsx(QrCode, { value: deeplinkUri, size: 180 }) : /* @__PURE__ */ jsx(
15432
+ const sharedStyles = /* @__PURE__ */ jsx("style", { children: `
15433
+ @keyframes blink-open-wallet-qr-shimmer {
15434
+ 0% { background-position: 200% 0; }
15435
+ 100% { background-position: -200% 0; }
15436
+ }
15437
+ @keyframes blink-open-wallet-ring-spin {
15438
+ to { transform: rotate(360deg); }
15439
+ }
15440
+ ` });
15441
+ if (showQrView) {
15442
+ return /* @__PURE__ */ jsxs(
15443
+ ScreenLayout,
15444
+ {
15445
+ footer: error ? /* @__PURE__ */ jsx(InfoBanner, { children: error }) : void 0,
15446
+ children: [
15447
+ sharedStyles,
15448
+ /* @__PURE__ */ jsx(ScreenHeader, { onBack: () => setShowQrView(false), onLogout }),
15449
+ /* @__PURE__ */ jsxs("div", { style: desktopContentStyle, children: [
15450
+ /* @__PURE__ */ jsx("div", { style: qrCardStyle, children: hasQr ? /* @__PURE__ */ jsx(QrCode, { value: deeplinkUri, size: 180 }) : /* @__PURE__ */ jsx(
15489
15451
  "div",
15490
15452
  {
15491
15453
  role: "status",
@@ -15493,10 +15455,63 @@ function OpenWalletScreen({
15493
15455
  "aria-busy": "true",
15494
15456
  style: qrShimmerStyle2(tokens.bgHover, tokens.border)
15495
15457
  }
15496
- ),
15497
- /* @__PURE__ */ jsx("p", { style: qrCaptionStyle(tokens.textMuted), children: qrCaption })
15458
+ ) }),
15459
+ /* @__PURE__ */ jsxs("div", { style: primaryClusterStyle, children: [
15460
+ /* @__PURE__ */ jsx("h2", { style: headingStyle12(tokens.text), children: "Authorize Your Passkey" }),
15461
+ /* @__PURE__ */ jsxs("p", { style: bodyStyle4(tokens.text), children: [
15462
+ "Scan the QR code to open ",
15463
+ displayName,
15464
+ "."
15465
+ ] })
15466
+ ] })
15498
15467
  ] })
15499
- ] })
15468
+ ]
15469
+ }
15470
+ );
15471
+ }
15472
+ return /* @__PURE__ */ jsxs(
15473
+ ScreenLayout,
15474
+ {
15475
+ footer: /* @__PURE__ */ jsxs("div", { style: footerStackStyle5, children: [
15476
+ error && /* @__PURE__ */ jsx(InfoBanner, { children: error }),
15477
+ /* @__PURE__ */ jsxs(
15478
+ SecondaryButton,
15479
+ {
15480
+ onClick: onRetryAuthorization,
15481
+ disabled: !onRetryAuthorization,
15482
+ children: [
15483
+ /* @__PURE__ */ jsx(WalletIcon, {}),
15484
+ "Open ",
15485
+ displayName,
15486
+ " Extension"
15487
+ ]
15488
+ }
15489
+ ),
15490
+ /* @__PURE__ */ jsxs("div", { style: orDividerStyle, children: [
15491
+ /* @__PURE__ */ jsx("span", { style: orDividerRuleStyle(tokens.textTertiary) }),
15492
+ /* @__PURE__ */ jsx("span", { style: orDividerLabelStyle(tokens.textMuted), children: "OR" }),
15493
+ /* @__PURE__ */ jsx("span", { style: orDividerRuleStyle(tokens.textTertiary) })
15494
+ ] }),
15495
+ /* @__PURE__ */ jsxs(
15496
+ SecondaryButton,
15497
+ {
15498
+ onClick: () => setShowQrView(true),
15499
+ disabled: !hasQr,
15500
+ children: [
15501
+ /* @__PURE__ */ jsx(QrIcon, {}),
15502
+ "Continue on your phone"
15503
+ ]
15504
+ }
15505
+ )
15506
+ ] }),
15507
+ children: [
15508
+ sharedStyles,
15509
+ /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
15510
+ /* @__PURE__ */ jsx("div", { style: desktopContentStyle, children: /* @__PURE__ */ jsxs("div", { style: primaryClusterStyle, children: [
15511
+ heroBlock,
15512
+ /* @__PURE__ */ jsx("h2", { style: headingStyle12(tokens.text), children: "Authorize Your Passkey" }),
15513
+ /* @__PURE__ */ jsx("p", { style: bodyStyle4(tokens.text), children: "If your wallet didn\u2019t open automatically, tap below." })
15514
+ ] }) })
15500
15515
  ]
15501
15516
  }
15502
15517
  );
@@ -15593,50 +15608,33 @@ var footerStackStyle5 = {
15593
15608
  flexDirection: "column",
15594
15609
  gap: 8
15595
15610
  };
15596
- var logoFrameStyle = {
15597
- position: "relative",
15598
- width: 96,
15599
- height: 96,
15611
+ var qrCardStyle = {
15600
15612
  display: "flex",
15601
15613
  alignItems: "center",
15602
15614
  justifyContent: "center",
15615
+ background: "#FFFFFF",
15616
+ padding: 16,
15617
+ borderRadius: 16,
15603
15618
  flexShrink: 0
15604
15619
  };
15605
- var logoRingSvgStyle = {
15606
- position: "absolute",
15607
- top: "50%",
15608
- left: "50%",
15609
- transform: "translate(-50%, -50%)"
15610
- };
15611
- var spinningRingSvgStyle = {
15612
- position: "absolute",
15613
- top: 0,
15614
- left: 0,
15615
- transformOrigin: "center",
15616
- animation: "blink-open-wallet-ring-spin 0.9s linear infinite"
15617
- };
15618
- var logoCircleStyle2 = (bg) => ({
15619
- width: 80,
15620
- height: 80,
15621
- borderRadius: "50%",
15622
- background: bg,
15620
+ var orDividerStyle = {
15623
15621
  display: "flex",
15624
15622
  alignItems: "center",
15625
15623
  justifyContent: "center",
15626
- flexShrink: 0
15627
- });
15628
- var logoStyle2 = {
15629
- width: 48,
15630
- height: 48,
15631
- borderRadius: 12,
15632
- objectFit: "contain"
15633
- };
15634
- var reownLogoStyle = {
15635
- width: 48,
15636
- height: 48,
15637
- borderRadius: "50%",
15638
- objectFit: "cover"
15624
+ gap: 10,
15625
+ paddingLeft: 16,
15626
+ paddingRight: 16
15639
15627
  };
15628
+ var orDividerRuleStyle = (color) => ({
15629
+ flex: 1,
15630
+ height: 1,
15631
+ background: color
15632
+ });
15633
+ var orDividerLabelStyle = (color) => ({
15634
+ fontSize: "0.75rem",
15635
+ fontWeight: 500,
15636
+ color
15637
+ });
15640
15638
  var headingStyle12 = (color) => ({
15641
15639
  fontSize: "1.5rem",
15642
15640
  fontWeight: 700,
@@ -15653,21 +15651,6 @@ var bodyStyle4 = (color) => ({
15653
15651
  margin: 0,
15654
15652
  maxWidth: 320
15655
15653
  });
15656
- var inlineWaitStyle = (color) => ({
15657
- display: "inline-flex",
15658
- alignItems: "center",
15659
- gap: 8,
15660
- color,
15661
- fontSize: "0.85rem"
15662
- });
15663
- var qrSectionStyle = {
15664
- display: "flex",
15665
- flexDirection: "column",
15666
- alignItems: "center",
15667
- gap: 12,
15668
- width: "100%",
15669
- maxWidth: 320
15670
- };
15671
15654
  var qrShimmerStyle2 = (baseColor, highlightColor) => ({
15672
15655
  width: 180,
15673
15656
  height: 180,
@@ -15676,21 +15659,6 @@ var qrShimmerStyle2 = (baseColor, highlightColor) => ({
15676
15659
  backgroundSize: "200% 100%",
15677
15660
  animation: "blink-open-wallet-qr-shimmer 1.4s ease-in-out infinite"
15678
15661
  });
15679
- var qrDividerLabelStyle = (color) => ({
15680
- fontSize: "0.75rem",
15681
- fontWeight: 600,
15682
- letterSpacing: "0.06em",
15683
- textTransform: "uppercase",
15684
- color
15685
- });
15686
- var qrCaptionStyle = (color) => ({
15687
- fontSize: "0.85rem",
15688
- color,
15689
- margin: 0,
15690
- textAlign: "center",
15691
- maxWidth: 320,
15692
- lineHeight: 1.4
15693
- });
15694
15662
  var mobileContentStyle = {
15695
15663
  flex: 1,
15696
15664
  display: "flex",
@@ -15812,7 +15780,7 @@ function ApprovingInWalletScreen({
15812
15780
  {
15813
15781
  onBack,
15814
15782
  onLogout,
15815
- center: /* @__PURE__ */ jsx("img", { src: BLINK_WORDMARK, alt: "Blink", style: wordmarkImgStyle4 })
15783
+ center: /* @__PURE__ */ jsx("img", { src: BLINK_WORDMARK, alt: "Blink", style: wordmarkImgStyle5 })
15816
15784
  }
15817
15785
  ),
15818
15786
  /* @__PURE__ */ jsxs("div", { style: contentStyle16, children: [
@@ -15916,7 +15884,7 @@ function LockIcon4() {
15916
15884
  }
15917
15885
  ) });
15918
15886
  }
15919
- var wordmarkImgStyle4 = {
15887
+ var wordmarkImgStyle5 = {
15920
15888
  height: 22,
15921
15889
  width: "auto",
15922
15890
  display: "block",
@@ -16049,7 +16017,7 @@ function ConfirmSignScreen({
16049
16017
  children: [
16050
16018
  /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
16051
16019
  /* @__PURE__ */ jsxs("div", { style: contentStyle17, children: [
16052
- logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle3 }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
16020
+ logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
16053
16021
  /* @__PURE__ */ jsx("h2", { style: headingStyle14(tokens.text), children: heading }),
16054
16022
  /* @__PURE__ */ jsx("p", { style: subtitleStyle12(tokens.textSecondary), children: subtitle }),
16055
16023
  /* @__PURE__ */ jsxs("div", { style: successBadgeStyle(tokens), children: [
@@ -16070,7 +16038,7 @@ var contentStyle17 = {
16070
16038
  textAlign: "center",
16071
16039
  padding: "0 24px"
16072
16040
  };
16073
- var logoStyle3 = {
16041
+ var logoStyle2 = {
16074
16042
  width: 56,
16075
16043
  height: 56,
16076
16044
  borderRadius: 14,