@swype-org/react-sdk 0.2.360 → 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();
@@ -9144,8 +9166,11 @@ var TOKEN_LOGOS = {
9144
9166
  };
9145
9167
  var CHAIN_LOGOS = {
9146
9168
  base: BASE_CHAIN_LOGO,
9169
+ // Testnets use the parent chain's logo (sandbox/smokebox environments).
9170
+ "base sepolia": BASE_CHAIN_LOGO,
9147
9171
  ethereum: ETHEREUM_CHAIN_LOGO,
9148
9172
  "ethereum mainnet": ETHEREUM_CHAIN_LOGO,
9173
+ sepolia: ETHEREUM_CHAIN_LOGO,
9149
9174
  polygon: POLYGON_CHAIN_LOGO,
9150
9175
  "polygon mainnet": POLYGON_CHAIN_LOGO,
9151
9176
  arbitrum: ARBITRUM_CHAIN_LOGO,
@@ -10580,6 +10605,38 @@ function FaceIdIcon({ size = 24 }) {
10580
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" })
10581
10606
  ] });
10582
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
+ }
10583
10640
  function LogoCircle({ src, fallback, preserveShape, size = 36 }) {
10584
10641
  const { tokens } = useBlinkConfig();
10585
10642
  return /* @__PURE__ */ jsx("span", { style: logoCircleStyle(size, tokens.bgCard, tokens.textMuted), children: src ? /* @__PURE__ */ jsx("img", { src, alt: "", style: logoImageStyle(preserveShape) }) : fallback });
@@ -11265,7 +11322,7 @@ function DepositOptionsScreen({
11265
11322
  ),
11266
11323
  children: [
11267
11324
  /* @__PURE__ */ jsx("span", { style: manualLabelStyle(tokens.text), children: "Send Crypto Manually" }),
11268
- /* @__PURE__ */ jsx(QrIcon, { color: tokens.text })
11325
+ /* @__PURE__ */ jsx(QrIcon2, { color: tokens.text })
11269
11326
  ]
11270
11327
  }
11271
11328
  )
@@ -11273,7 +11330,7 @@ function DepositOptionsScreen({
11273
11330
  ] })
11274
11331
  ] });
11275
11332
  }
11276
- function QrIcon({ color }) {
11333
+ function QrIcon2({ color }) {
11277
11334
  return /* @__PURE__ */ jsxs(
11278
11335
  "svg",
11279
11336
  {
@@ -11463,7 +11520,7 @@ function WelcomeBackScreen({
11463
11520
  ),
11464
11521
  children: [
11465
11522
  /* @__PURE__ */ jsx("span", { style: manualLabelStyle2(tokens.text), children: "Send Crypto Manually" }),
11466
- /* @__PURE__ */ jsx(QrIcon2, { color: tokens.text })
11523
+ /* @__PURE__ */ jsx(QrIcon3, { color: tokens.text })
11467
11524
  ]
11468
11525
  }
11469
11526
  )
@@ -11471,7 +11528,7 @@ function WelcomeBackScreen({
11471
11528
  ] })
11472
11529
  ] });
11473
11530
  }
11474
- function QrIcon2({ color }) {
11531
+ function QrIcon3({ color }) {
11475
11532
  return /* @__PURE__ */ jsxs(
11476
11533
  "svg",
11477
11534
  {
@@ -13581,7 +13638,7 @@ function SelectDepositSourceScreen({
13581
13638
  label: "Send manually",
13582
13639
  color: tokens.text,
13583
13640
  onClick: onSendManually,
13584
- icon: /* @__PURE__ */ jsx(QrIcon3, { color: tokens.text })
13641
+ icon: /* @__PURE__ */ jsx(QrIcon, { color: tokens.text })
13585
13642
  }
13586
13643
  ),
13587
13644
  onAddProvider && /* @__PURE__ */ jsx(
@@ -13697,38 +13754,6 @@ function ActionRow({
13697
13754
  }
13698
13755
  );
13699
13756
  }
13700
- function QrIcon3({ color }) {
13701
- return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
13702
- /* @__PURE__ */ jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
13703
- /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "2", height: "2", fill: color }),
13704
- /* @__PURE__ */ jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
13705
- /* @__PURE__ */ jsx("rect", { x: "16", y: "6", width: "2", height: "2", fill: color }),
13706
- /* @__PURE__ */ jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
13707
- /* @__PURE__ */ jsx("rect", { x: "6", y: "16", width: "2", height: "2", fill: color }),
13708
- /* @__PURE__ */ jsx("rect", { x: "13.5", y: "13.5", width: "2.5", height: "2.5", fill: color }),
13709
- /* @__PURE__ */ jsx("rect", { x: "18", y: "13.5", width: "2.5", height: "2.5", fill: color }),
13710
- /* @__PURE__ */ jsx("rect", { x: "13.5", y: "18", width: "2.5", height: "2.5", fill: color }),
13711
- /* @__PURE__ */ jsx("rect", { x: "18", y: "18", width: "2.5", height: "2.5", fill: color })
13712
- ] });
13713
- }
13714
- function WalletIcon() {
13715
- return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
13716
- /* @__PURE__ */ jsx(
13717
- "path",
13718
- {
13719
- 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",
13720
- fill: "currentColor"
13721
- }
13722
- ),
13723
- /* @__PURE__ */ jsx(
13724
- "path",
13725
- {
13726
- 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",
13727
- fill: "currentColor"
13728
- }
13729
- )
13730
- ] });
13731
- }
13732
13757
  var actionRowStyle = (color, hovered) => ({
13733
13758
  display: "flex",
13734
13759
  alignItems: "center",
@@ -13968,7 +13993,13 @@ function DepositScreen({
13968
13993
  100% { background-position: -200% 0; }
13969
13994
  }
13970
13995
  ` }),
13971
- /* @__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
+ ),
13972
14003
  /* @__PURE__ */ jsxs("div", { style: redesignHeroStackStyle(mobileEntryWithKeypad), children: [
13973
14004
  showDesktopInputHero ? /* @__PURE__ */ jsxs("div", { style: entryDesktopHeroRowStyle(desktopInputHeroColor, getDesktopHeroFontSize(liveMobileHeroValue)), children: [
13974
14005
  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: entryDollarStyle(isZero), children: "$" }),
@@ -14108,6 +14139,11 @@ function FaceIdIcon2() {
14108
14139
  )
14109
14140
  ] });
14110
14141
  }
14142
+ var wordmarkImgStyle4 = {
14143
+ height: 31,
14144
+ width: "auto",
14145
+ display: "block"
14146
+ };
14111
14147
  var bannerSlotStyle2 = {
14112
14148
  display: "flex",
14113
14149
  justifyContent: "center",
@@ -15327,6 +15363,7 @@ function OpenWalletScreen({
15327
15363
  onLogout
15328
15364
  }) {
15329
15365
  const { tokens } = useBlinkConfig();
15366
+ const [showQrView, setShowQrView] = useState(false);
15330
15367
  const displayName = walletName ?? "your wallet";
15331
15368
  const logoSrc = walletLogoUrl ?? (walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0);
15332
15369
  const autoOpenedRef = useRef(null);
@@ -15344,61 +15381,6 @@ function OpenWalletScreen({
15344
15381
  const handleOpen = useCallback(() => {
15345
15382
  openDeeplink(deeplinkUri);
15346
15383
  }, [deeplinkUri]);
15347
- const logoBlock = /* @__PURE__ */ jsxs("div", { style: logoFrameStyle, children: [
15348
- /* @__PURE__ */ jsx(
15349
- "svg",
15350
- {
15351
- width: "96",
15352
- height: "96",
15353
- viewBox: "0 0 96 96",
15354
- fill: "none",
15355
- style: logoRingSvgStyle,
15356
- "aria-hidden": true,
15357
- children: /* @__PURE__ */ jsx(
15358
- "circle",
15359
- {
15360
- cx: "48",
15361
- cy: "48",
15362
- r: "47",
15363
- stroke: tokens.textMuted,
15364
- strokeOpacity: "0.18",
15365
- strokeWidth: "2",
15366
- fill: "none"
15367
- }
15368
- )
15369
- }
15370
- ),
15371
- /* @__PURE__ */ jsx(
15372
- "svg",
15373
- {
15374
- width: "96",
15375
- height: "96",
15376
- viewBox: "0 0 96 96",
15377
- fill: "none",
15378
- style: spinningRingSvgStyle,
15379
- "aria-hidden": true,
15380
- children: /* @__PURE__ */ jsx(
15381
- "path",
15382
- {
15383
- d: "M 71.7 89.04 A 47 47 0 1 1 89.04 71.7",
15384
- stroke: tokens.textMuted,
15385
- strokeOpacity: "0.65",
15386
- strokeWidth: "2",
15387
- fill: "none",
15388
- strokeLinecap: "round"
15389
- }
15390
- )
15391
- }
15392
- ),
15393
- /* @__PURE__ */ jsx("div", { style: logoCircleStyle2(tokens.bgRecessed), children: logoSrc && /* @__PURE__ */ jsx(
15394
- "img",
15395
- {
15396
- src: logoSrc,
15397
- alt: displayName,
15398
- style: walletLogoUrl ? reownLogoStyle : logoStyle2
15399
- }
15400
- ) })
15401
- ] });
15402
15384
  const heroBlock = /* @__PURE__ */ jsxs("div", { style: heroFrameStyle, "aria-hidden": true, children: [
15403
15385
  /* @__PURE__ */ jsx(
15404
15386
  "svg",
@@ -15447,42 +15429,25 @@ function OpenWalletScreen({
15447
15429
  ] });
15448
15430
  if (!useDeeplink) {
15449
15431
  const hasQr = !!deeplinkUri;
15450
- const qrCaption = hasQr ? `Wallet on your phone? Scan to open ${displayName} and finish there.` : "Wallet on your phone? Your QR code is being prepared.";
15451
- return /* @__PURE__ */ jsxs(
15452
- ScreenLayout,
15453
- {
15454
- footer: error ? /* @__PURE__ */ jsxs("div", { style: footerStackStyle5, children: [
15455
- /* @__PURE__ */ jsx(InfoBanner, { children: error }),
15456
- onRetryAuthorization && /* @__PURE__ */ jsx(OutlineButton, { onClick: onRetryAuthorization, children: "Retry" })
15457
- ] }) : void 0,
15458
- children: [
15459
- /* @__PURE__ */ jsx("style", { children: `
15460
- @keyframes blink-open-wallet-qr-shimmer {
15461
- 0% { background-position: 200% 0; }
15462
- 100% { background-position: -200% 0; }
15463
- }
15464
- @keyframes blink-open-wallet-ring-spin {
15465
- to { transform: rotate(360deg); }
15466
- }
15467
- ` }),
15468
- /* @__PURE__ */ jsx(ScreenHeader, { onBack, onLogout }),
15469
- /* @__PURE__ */ jsxs("div", { style: desktopContentStyle, children: [
15470
- /* @__PURE__ */ jsxs("div", { style: primaryClusterStyle, children: [
15471
- logoBlock,
15472
- /* @__PURE__ */ jsxs("h2", { style: headingStyle12(tokens.text), children: [
15473
- "Setting up ",
15474
- displayName,
15475
- "\u2026"
15476
- ] }),
15477
- /* @__PURE__ */ jsx("p", { style: bodyStyle4(tokens.text), children: "Approve the connection in your wallet extension." }),
15478
- /* @__PURE__ */ jsxs("div", { style: inlineWaitStyle(tokens.textMuted), children: [
15479
- /* @__PURE__ */ jsx(Spinner, { size: 14 }),
15480
- /* @__PURE__ */ jsx("span", { children: "Waiting for authorization\u2026" })
15481
- ] })
15482
- ] }),
15483
- /* @__PURE__ */ jsxs("div", { style: qrSectionStyle, children: [
15484
- /* @__PURE__ */ jsx("span", { style: qrDividerLabelStyle(tokens.textMuted), children: "or scan with your phone" }),
15485
- 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(
15486
15451
  "div",
15487
15452
  {
15488
15453
  role: "status",
@@ -15490,10 +15455,63 @@ function OpenWalletScreen({
15490
15455
  "aria-busy": "true",
15491
15456
  style: qrShimmerStyle2(tokens.bgHover, tokens.border)
15492
15457
  }
15493
- ),
15494
- /* @__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
+ ] })
15495
15467
  ] })
15496
- ] })
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
+ ] }) })
15497
15515
  ]
15498
15516
  }
15499
15517
  );
@@ -15590,50 +15608,33 @@ var footerStackStyle5 = {
15590
15608
  flexDirection: "column",
15591
15609
  gap: 8
15592
15610
  };
15593
- var logoFrameStyle = {
15594
- position: "relative",
15595
- width: 96,
15596
- height: 96,
15611
+ var qrCardStyle = {
15597
15612
  display: "flex",
15598
15613
  alignItems: "center",
15599
15614
  justifyContent: "center",
15615
+ background: "#FFFFFF",
15616
+ padding: 16,
15617
+ borderRadius: 16,
15600
15618
  flexShrink: 0
15601
15619
  };
15602
- var logoRingSvgStyle = {
15603
- position: "absolute",
15604
- top: "50%",
15605
- left: "50%",
15606
- transform: "translate(-50%, -50%)"
15607
- };
15608
- var spinningRingSvgStyle = {
15609
- position: "absolute",
15610
- top: 0,
15611
- left: 0,
15612
- transformOrigin: "center",
15613
- animation: "blink-open-wallet-ring-spin 0.9s linear infinite"
15614
- };
15615
- var logoCircleStyle2 = (bg) => ({
15616
- width: 80,
15617
- height: 80,
15618
- borderRadius: "50%",
15619
- background: bg,
15620
+ var orDividerStyle = {
15620
15621
  display: "flex",
15621
15622
  alignItems: "center",
15622
15623
  justifyContent: "center",
15623
- flexShrink: 0
15624
- });
15625
- var logoStyle2 = {
15626
- width: 48,
15627
- height: 48,
15628
- borderRadius: 12,
15629
- objectFit: "contain"
15630
- };
15631
- var reownLogoStyle = {
15632
- width: 48,
15633
- height: 48,
15634
- borderRadius: "50%",
15635
- objectFit: "cover"
15624
+ gap: 10,
15625
+ paddingLeft: 16,
15626
+ paddingRight: 16
15636
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
+ });
15637
15638
  var headingStyle12 = (color) => ({
15638
15639
  fontSize: "1.5rem",
15639
15640
  fontWeight: 700,
@@ -15650,21 +15651,6 @@ var bodyStyle4 = (color) => ({
15650
15651
  margin: 0,
15651
15652
  maxWidth: 320
15652
15653
  });
15653
- var inlineWaitStyle = (color) => ({
15654
- display: "inline-flex",
15655
- alignItems: "center",
15656
- gap: 8,
15657
- color,
15658
- fontSize: "0.85rem"
15659
- });
15660
- var qrSectionStyle = {
15661
- display: "flex",
15662
- flexDirection: "column",
15663
- alignItems: "center",
15664
- gap: 12,
15665
- width: "100%",
15666
- maxWidth: 320
15667
- };
15668
15654
  var qrShimmerStyle2 = (baseColor, highlightColor) => ({
15669
15655
  width: 180,
15670
15656
  height: 180,
@@ -15673,21 +15659,6 @@ var qrShimmerStyle2 = (baseColor, highlightColor) => ({
15673
15659
  backgroundSize: "200% 100%",
15674
15660
  animation: "blink-open-wallet-qr-shimmer 1.4s ease-in-out infinite"
15675
15661
  });
15676
- var qrDividerLabelStyle = (color) => ({
15677
- fontSize: "0.75rem",
15678
- fontWeight: 600,
15679
- letterSpacing: "0.06em",
15680
- textTransform: "uppercase",
15681
- color
15682
- });
15683
- var qrCaptionStyle = (color) => ({
15684
- fontSize: "0.85rem",
15685
- color,
15686
- margin: 0,
15687
- textAlign: "center",
15688
- maxWidth: 320,
15689
- lineHeight: 1.4
15690
- });
15691
15662
  var mobileContentStyle = {
15692
15663
  flex: 1,
15693
15664
  display: "flex",
@@ -15809,7 +15780,7 @@ function ApprovingInWalletScreen({
15809
15780
  {
15810
15781
  onBack,
15811
15782
  onLogout,
15812
- center: /* @__PURE__ */ jsx("img", { src: BLINK_WORDMARK, alt: "Blink", style: wordmarkImgStyle4 })
15783
+ center: /* @__PURE__ */ jsx("img", { src: BLINK_WORDMARK, alt: "Blink", style: wordmarkImgStyle5 })
15813
15784
  }
15814
15785
  ),
15815
15786
  /* @__PURE__ */ jsxs("div", { style: contentStyle16, children: [
@@ -15913,7 +15884,7 @@ function LockIcon4() {
15913
15884
  }
15914
15885
  ) });
15915
15886
  }
15916
- var wordmarkImgStyle4 = {
15887
+ var wordmarkImgStyle5 = {
15917
15888
  height: 22,
15918
15889
  width: "auto",
15919
15890
  display: "block",
@@ -16046,7 +16017,7 @@ function ConfirmSignScreen({
16046
16017
  children: [
16047
16018
  /* @__PURE__ */ jsx(ScreenHeader, { onLogout }),
16048
16019
  /* @__PURE__ */ jsxs("div", { style: contentStyle17, children: [
16049
- 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 }),
16050
16021
  /* @__PURE__ */ jsx("h2", { style: headingStyle14(tokens.text), children: heading }),
16051
16022
  /* @__PURE__ */ jsx("p", { style: subtitleStyle12(tokens.textSecondary), children: subtitle }),
16052
16023
  /* @__PURE__ */ jsxs("div", { style: successBadgeStyle(tokens), children: [
@@ -16067,7 +16038,7 @@ var contentStyle17 = {
16067
16038
  textAlign: "center",
16068
16039
  padding: "0 24px"
16069
16040
  };
16070
- var logoStyle3 = {
16041
+ var logoStyle2 = {
16071
16042
  width: 56,
16072
16043
  height: 56,
16073
16044
  borderRadius: 14,