@swype-org/react-sdk 0.2.360 → 0.2.364

package/dist/index.cjs

@@ -8607,25 +8607,45 @@ function SettingsMenu({ onLogout }) {
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "19", r: "2", fill: "currentColor" })
     ] }) }),
-    open && /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownStyle(tokens), children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          setOpen(false);
-          onLogout();
-        },
-        style: menuItemStyle(tokens),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 8, flexShrink: 0 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-            /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 17 21 12 16 7", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
-          ] }),
-          "Log out"
-        ]
-      }
-    ) })
+    open && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownStyle(tokens), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "a",
+        {
+          href: "https://intercom.help/blinkcash/en/",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          onClick: () => setOpen(false),
+          style: menuItemStyle(tokens.text),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 8, flexShrink: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9", stroke: tokens.text, strokeWidth: "2" }),
+              /* @__PURE__ */ jsxRuntime.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" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "17", r: "1", fill: tokens.text })
+            ] }),
+            "Help"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setOpen(false);
+            onLogout();
+          },
+          style: menuItemStyle(tokens.error),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { marginRight: 8, flexShrink: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+              /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 17 21 12 16 7", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12", stroke: tokens.error, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+            ] }),
+            "Log out"
+          ]
+        }
+      )
+    ] })
   ] });
 }
 var containerStyle2 = {
@@ -8644,7 +8664,7 @@ var dropdownStyle = (tokens) => ({
   zIndex: 100,
   overflow: "hidden"
 });
-var menuItemStyle = (tokens) => ({
+var menuItemStyle = (color) => ({
   width: "100%",
   display: "flex",
   alignItems: "center",
@@ -8655,7 +8675,9 @@ var menuItemStyle = (tokens) => ({
   fontFamily: "inherit",
   fontSize: "0.85rem",
   fontWeight: 500,
-  color: tokens.error
+  color,
+  textDecoration: "none",
+  boxSizing: "border-box"
 });
 function ScreenHeader({ title, right, onBack, left, badge, onLogout, center }) {
   const { tokens } = useBlinkConfig();
@@ -9168,8 +9190,11 @@ var TOKEN_LOGOS = {
 };
 var CHAIN_LOGOS = {
   base: BASE_CHAIN_LOGO,
+  // Testnets use the parent chain's logo (sandbox/smokebox environments).
+  "base sepolia": BASE_CHAIN_LOGO,
   ethereum: ETHEREUM_CHAIN_LOGO,
   "ethereum mainnet": ETHEREUM_CHAIN_LOGO,
+  sepolia: ETHEREUM_CHAIN_LOGO,
   polygon: POLYGON_CHAIN_LOGO,
   "polygon mainnet": POLYGON_CHAIN_LOGO,
   arbitrum: ARBITRUM_CHAIN_LOGO,
@@ -10604,6 +10629,38 @@ function FaceIdIcon({ size = 24 }) {
     /* @__PURE__ */ jsxRuntime.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" })
   ] });
 }
+function WalletIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        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",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        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",
+        fill: "currentColor"
+      }
+    )
+  ] });
+}
+function QrIcon({ color = "currentColor" } = {}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "6", width: "2", height: "2", fill: color }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "16", y: "6", width: "2", height: "2", fill: color }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "16", width: "2", height: "2", fill: color }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "13.5", y: "13.5", width: "2.5", height: "2.5", fill: color }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18", y: "13.5", width: "2.5", height: "2.5", fill: color }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "13.5", y: "18", width: "2.5", height: "2.5", fill: color }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18", y: "18", width: "2.5", height: "2.5", fill: color })
+  ] });
+}
 function LogoCircle({ src, fallback, preserveShape, size = 36 }) {
   const { tokens } = useBlinkConfig();
   return /* @__PURE__ */ jsxRuntime.jsx("span", { style: logoCircleStyle(size, tokens.bgCard, tokens.textMuted), children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "", style: logoImageStyle(preserveShape) }) : fallback });
@@ -11289,7 +11346,7 @@ function DepositOptionsScreen({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: manualLabelStyle(tokens.text), children: "Send Crypto Manually" }),
-              /* @__PURE__ */ jsxRuntime.jsx(QrIcon, { color: tokens.text })
+              /* @__PURE__ */ jsxRuntime.jsx(QrIcon2, { color: tokens.text })
             ]
           }
         )
@@ -11297,7 +11354,7 @@ function DepositOptionsScreen({
     ] })
   ] });
 }
-function QrIcon({ color }) {
+function QrIcon2({ color }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
@@ -11487,7 +11544,7 @@ function WelcomeBackScreen({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: manualLabelStyle2(tokens.text), children: "Send Crypto Manually" }),
-              /* @__PURE__ */ jsxRuntime.jsx(QrIcon2, { color: tokens.text })
+              /* @__PURE__ */ jsxRuntime.jsx(QrIcon3, { color: tokens.text })
             ]
           }
         )
@@ -11495,7 +11552,7 @@ function WelcomeBackScreen({
     ] })
   ] });
 }
-function QrIcon2({ color }) {
+function QrIcon3({ color }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
@@ -13605,7 +13662,7 @@ function SelectDepositSourceScreen({
                     label: "Send manually",
                     color: tokens.text,
                     onClick: onSendManually,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(QrIcon3, { color: tokens.text })
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(QrIcon, { color: tokens.text })
                   }
                 ),
                 onAddProvider && /* @__PURE__ */ jsxRuntime.jsx(
@@ -13721,38 +13778,6 @@ function ActionRow({
     }
   );
 }
-function QrIcon3({ color }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "6", width: "2", height: "2", fill: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "16", y: "6", width: "2", height: "2", fill: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1", stroke: color, strokeWidth: "1.4" }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "16", width: "2", height: "2", fill: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "13.5", y: "13.5", width: "2.5", height: "2.5", fill: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18", y: "13.5", width: "2.5", height: "2.5", fill: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "13.5", y: "18", width: "2.5", height: "2.5", fill: color }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18", y: "18", width: "2.5", height: "2.5", fill: color })
-  ] });
-}
-function WalletIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        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",
-        fill: "currentColor"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        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",
-        fill: "currentColor"
-      }
-    )
-  ] });
-}
 var actionRowStyle = (color, hovered) => ({
   display: "flex",
   alignItems: "center",
@@ -13992,7 +14017,13 @@ function DepositScreen({
           100% { background-position: -200% 0; }
         }
       ` }),
-    /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ScreenHeader,
+      {
+        left: /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_WORDMARK, alt: "Blink", style: wordmarkImgStyle4 }),
+        onLogout
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: redesignHeroStackStyle(mobileEntryWithKeypad), children: [
       showDesktopInputHero ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: entryDesktopHeroRowStyle(desktopInputHeroColor, getDesktopHeroFontSize(liveMobileHeroValue)), children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: entryDollarStyle(isZero), children: "$" }),
@@ -14132,6 +14163,11 @@ function FaceIdIcon2() {
     )
   ] });
 }
+var wordmarkImgStyle4 = {
+  height: 31,
+  width: "auto",
+  display: "block"
+};
 var bannerSlotStyle2 = {
   display: "flex",
   justifyContent: "center",
@@ -15351,6 +15387,7 @@ function OpenWalletScreen({
   onLogout
 }) {
   const { tokens } = useBlinkConfig();
+  const [showQrView, setShowQrView] = react.useState(false);
   const displayName = walletName ?? "your wallet";
   const logoSrc = walletLogoUrl ?? (walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0);
   const autoOpenedRef = react.useRef(null);
@@ -15368,61 +15405,6 @@ function OpenWalletScreen({
   const handleOpen = react.useCallback(() => {
     openDeeplink(deeplinkUri);
   }, [deeplinkUri]);
-  const logoBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: logoFrameStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        width: "96",
-        height: "96",
-        viewBox: "0 0 96 96",
-        fill: "none",
-        style: logoRingSvgStyle,
-        "aria-hidden": true,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
-          {
-            cx: "48",
-            cy: "48",
-            r: "47",
-            stroke: tokens.textMuted,
-            strokeOpacity: "0.18",
-            strokeWidth: "2",
-            fill: "none"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        width: "96",
-        height: "96",
-        viewBox: "0 0 96 96",
-        fill: "none",
-        style: spinningRingSvgStyle,
-        "aria-hidden": true,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M 71.7 89.04 A 47 47 0 1 1 89.04 71.7",
-            stroke: tokens.textMuted,
-            strokeOpacity: "0.65",
-            strokeWidth: "2",
-            fill: "none",
-            strokeLinecap: "round"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: logoCircleStyle2(tokens.bgRecessed), children: logoSrc && /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: logoSrc,
-        alt: displayName,
-        style: walletLogoUrl ? reownLogoStyle : logoStyle2
-      }
-    ) })
-  ] });
   const heroBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: heroFrameStyle, "aria-hidden": true, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
@@ -15471,42 +15453,25 @@ function OpenWalletScreen({
   ] });
   if (!useDeeplink) {
     const hasQr = !!deeplinkUri;
-    const qrCaption = hasQr ? `Wallet on your phone? Scan to open ${displayName} and finish there.` : "Wallet on your phone? Your QR code is being prepared.";
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      ScreenLayout,
-      {
-        footer: error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: footerStackStyle5, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(InfoBanner, { children: error }),
-          onRetryAuthorization && /* @__PURE__ */ jsxRuntime.jsx(OutlineButton, { onClick: onRetryAuthorization, children: "Retry" })
-        ] }) : void 0,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-          @keyframes blink-open-wallet-qr-shimmer {
-            0% { background-position: 200% 0; }
-            100% { background-position: -200% 0; }
-          }
-          @keyframes blink-open-wallet-ring-spin {
-            to { transform: rotate(360deg); }
-          }
-        ` }),
-          /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: desktopContentStyle, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: primaryClusterStyle, children: [
-              logoBlock,
-              /* @__PURE__ */ jsxRuntime.jsxs("h2", { style: headingStyle12(tokens.text), children: [
-                "Setting up ",
-                displayName,
-                "\u2026"
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { style: bodyStyle4(tokens.text), children: "Approve the connection in your wallet extension." }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: inlineWaitStyle(tokens.textMuted), children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for authorization\u2026" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: qrSectionStyle, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: qrDividerLabelStyle(tokens.textMuted), children: "or scan with your phone" }),
-              hasQr ? /* @__PURE__ */ jsxRuntime.jsx(QrCode, { value: deeplinkUri, size: 180 }) : /* @__PURE__ */ jsxRuntime.jsx(
+    const sharedStyles = /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        @keyframes blink-open-wallet-qr-shimmer {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+        @keyframes blink-open-wallet-ring-spin {
+          to { transform: rotate(360deg); }
+        }
+      ` });
+    if (showQrView) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        ScreenLayout,
+        {
+          footer: error ? /* @__PURE__ */ jsxRuntime.jsx(InfoBanner, { children: error }) : void 0,
+          children: [
+            sharedStyles,
+            /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack: () => setShowQrView(false), onLogout }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: desktopContentStyle, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: qrCardStyle, children: hasQr ? /* @__PURE__ */ jsxRuntime.jsx(QrCode, { value: deeplinkUri, size: 180 }) : /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   role: "status",
@@ -15514,10 +15479,63 @@ function OpenWalletScreen({
                   "aria-busy": "true",
                   style: qrShimmerStyle2(tokens.bgHover, tokens.border)
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { style: qrCaptionStyle(tokens.textMuted), children: qrCaption })
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: primaryClusterStyle, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle12(tokens.text), children: "Authorize Your Passkey" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { style: bodyStyle4(tokens.text), children: [
+                  "Scan the QR code to open ",
+                  displayName,
+                  "."
+                ] })
+              ] })
             ] })
-          ] })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ScreenLayout,
+      {
+        footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: footerStackStyle5, children: [
+          error && /* @__PURE__ */ jsxRuntime.jsx(InfoBanner, { children: error }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            SecondaryButton,
+            {
+              onClick: onRetryAuthorization,
+              disabled: !onRetryAuthorization,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(WalletIcon, {}),
+                "Open ",
+                displayName,
+                " Extension"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: orDividerStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: orDividerRuleStyle(tokens.textTertiary) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: orDividerLabelStyle(tokens.textMuted), children: "OR" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: orDividerRuleStyle(tokens.textTertiary) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            SecondaryButton,
+            {
+              onClick: () => setShowQrView(true),
+              disabled: !hasQr,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(QrIcon, {}),
+                "Continue on your phone"
+              ]
+            }
+          )
+        ] }),
+        children: [
+          sharedStyles,
+          /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: desktopContentStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: primaryClusterStyle, children: [
+            heroBlock,
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle12(tokens.text), children: "Authorize Your Passkey" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: bodyStyle4(tokens.text), children: "If your wallet didn\u2019t open automatically, tap below." })
+          ] }) })
         ]
       }
     );
@@ -15614,50 +15632,33 @@ var footerStackStyle5 = {
   flexDirection: "column",
   gap: 8
 };
-var logoFrameStyle = {
-  position: "relative",
-  width: 96,
-  height: 96,
+var qrCardStyle = {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
+  background: "#FFFFFF",
+  padding: 16,
+  borderRadius: 16,
   flexShrink: 0
 };
-var logoRingSvgStyle = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)"
-};
-var spinningRingSvgStyle = {
-  position: "absolute",
-  top: 0,
-  left: 0,
-  transformOrigin: "center",
-  animation: "blink-open-wallet-ring-spin 0.9s linear infinite"
-};
-var logoCircleStyle2 = (bg) => ({
-  width: 80,
-  height: 80,
-  borderRadius: "50%",
-  background: bg,
+var orDividerStyle = {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  flexShrink: 0
-});
-var logoStyle2 = {
-  width: 48,
-  height: 48,
-  borderRadius: 12,
-  objectFit: "contain"
-};
-var reownLogoStyle = {
-  width: 48,
-  height: 48,
-  borderRadius: "50%",
-  objectFit: "cover"
+  gap: 10,
+  paddingLeft: 16,
+  paddingRight: 16
 };
+var orDividerRuleStyle = (color) => ({
+  flex: 1,
+  height: 1,
+  background: color
+});
+var orDividerLabelStyle = (color) => ({
+  fontSize: "0.75rem",
+  fontWeight: 500,
+  color
+});
 var headingStyle12 = (color) => ({
   fontSize: "1.5rem",
   fontWeight: 700,
@@ -15674,21 +15675,6 @@ var bodyStyle4 = (color) => ({
   margin: 0,
   maxWidth: 320
 });
-var inlineWaitStyle = (color) => ({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: 8,
-  color,
-  fontSize: "0.85rem"
-});
-var qrSectionStyle = {
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  gap: 12,
-  width: "100%",
-  maxWidth: 320
-};
 var qrShimmerStyle2 = (baseColor, highlightColor) => ({
   width: 180,
   height: 180,
@@ -15697,21 +15683,6 @@ var qrShimmerStyle2 = (baseColor, highlightColor) => ({
   backgroundSize: "200% 100%",
   animation: "blink-open-wallet-qr-shimmer 1.4s ease-in-out infinite"
 });
-var qrDividerLabelStyle = (color) => ({
-  fontSize: "0.75rem",
-  fontWeight: 600,
-  letterSpacing: "0.06em",
-  textTransform: "uppercase",
-  color
-});
-var qrCaptionStyle = (color) => ({
-  fontSize: "0.85rem",
-  color,
-  margin: 0,
-  textAlign: "center",
-  maxWidth: 320,
-  lineHeight: 1.4
-});
 var mobileContentStyle = {
   flex: 1,
   display: "flex",
@@ -15833,7 +15804,7 @@ function ApprovingInWalletScreen({
           {
             onBack,
             onLogout,
-            center: /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_WORDMARK, alt: "Blink", style: wordmarkImgStyle4 })
+            center: /* @__PURE__ */ jsxRuntime.jsx("img", { src: BLINK_WORDMARK, alt: "Blink", style: wordmarkImgStyle5 })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle16, children: [
@@ -15937,7 +15908,7 @@ function LockIcon4() {
     }
   ) });
 }
-var wordmarkImgStyle4 = {
+var wordmarkImgStyle5 = {
   height: 22,
   width: "auto",
   display: "block",
@@ -16070,7 +16041,7 @@ function ConfirmSignScreen({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle17, children: [
-          logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle3 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
+          logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle14(tokens.text), children: heading }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle12(tokens.textSecondary), children: subtitle }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: successBadgeStyle(tokens), children: [
@@ -16091,7 +16062,7 @@ var contentStyle17 = {
   textAlign: "center",
   padding: "0 24px"
 };
-var logoStyle3 = {
+var logoStyle2 = {
   width: 56,
   height: 56,
   borderRadius: 14,