@partylayer/react 0.2.8 → 0.3.0

package/dist/index.js

@@ -546,9 +546,17 @@ function PartyLayerKit({
   const themeValue = typeof theme === "string" ? theme : theme;
   return /* @__PURE__ */ jsxRuntime.jsx(WalletIconsContext.Provider, { value: walletIcons, children: /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { theme: themeValue, children: /* @__PURE__ */ jsxRuntime.jsx(PartyLayerProvider, { client, network, children }) }) });
 }
+var EXTENSION_TIMEOUT_MS = 15e3;
+var SDK_QR_CONTAINER_ID = "console-wallet-connect-placeholder";
 function isNativeWallet(wallet) {
   return wallet.metadata?.source === "native-cip0103";
 }
+function isDualTransportWallet(wallet) {
+  const caps = wallet.capabilities;
+  const hasExtension = caps.includes("injected");
+  const hasMobile = caps.includes("deeplink") || caps.includes("remoteSigner");
+  return hasExtension && hasMobile;
+}
 function getErrorMessage(error) {
   const code = "code" in error ? error.code : "";
   switch (code) {
@@ -591,12 +599,46 @@ function getWalletUrl(wallet) {
 }
 function getWalletTransportLabel(wallet) {
   if (isNativeWallet(wallet)) return "Ready";
-  if (wallet.capabilities.includes("injected")) return "Browser Extension";
+  const hasInjected = wallet.capabilities.includes("injected");
+  const hasDeeplink = wallet.capabilities.includes("deeplink");
+  const hasRemoteSigner = wallet.capabilities.includes("remoteSigner");
+  if (hasInjected && (hasDeeplink || hasRemoteSigner)) return "Extension + Mobile";
+  if (hasInjected) return "Browser Extension";
   if (wallet.capabilities.includes("popup")) return "Scan to connect";
-  if (wallet.capabilities.includes("deeplink")) return "Mobile wallet";
-  if (wallet.capabilities.includes("remoteSigner")) return "Enterprise";
+  if (hasDeeplink) return "Mobile wallet";
+  if (hasRemoteSigner) return "Enterprise";
   return wallet.capabilities.slice(0, 3).join(", ");
 }
+function extractSdkQrCode() {
+  const container = document.getElementById(SDK_QR_CONTAINER_ID);
+  if (!container) return null;
+  const svg = container.querySelector("svg");
+  if (!svg) return null;
+  let deepLinkUrl = null;
+  const links = Array.from(container.querySelectorAll("a, button"));
+  for (let i = 0; i < links.length; i++) {
+    const el = links[i];
+    const href = el.href || el.getAttribute("data-href") || "";
+    if (href.includes("consolewallet.io/wallet-connect")) {
+      deepLinkUrl = href;
+      break;
+    }
+  }
+  if (!deepLinkUrl) {
+    const anchors = container.querySelectorAll('a[href*="consolewallet"]');
+    if (anchors.length > 0) {
+      deepLinkUrl = anchors[0].href;
+    }
+  }
+  container.style.display = "none";
+  return { svgHtml: svg.outerHTML, deepLinkUrl };
+}
+function removeSdkQrContainer() {
+  const container = document.getElementById(SDK_QR_CONTAINER_ID);
+  if (container) {
+    container.style.display = "none";
+  }
+}
 function CloseIcon({ size = 20, color = "currentColor" }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
@@ -636,6 +678,34 @@ function ExternalLinkIcon({ size = 12, color = "currentColor" }) {
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
   ] });
 }
+function QrCodeIcon({ size = 20, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "2", width: "8", height: "8", rx: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "14", width: "8", height: "8", rx: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "14", width: "4", height: "4", rx: "0.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "22", y1: "14", x2: "22", y2: "18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "22", x2: "22", y2: "22" })
+  ] });
+}
+function SmartphoneIcon({ size = 16, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18" })
+  ] });
+}
+function RefreshIcon({ size = 14, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "23 4 23 10 17 10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })
+  ] });
+}
+function ClockIcon({ size = 16, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })
+  ] });
+}
 function ModalWalletIcon({
   wallet,
   size = 48,
@@ -701,14 +771,35 @@ function WalletModal({
   const [selectedWallet, setSelectedWallet] = react.useState(null);
   const [closing, setClosing] = react.useState(false);
   const [connectError, setConnectError] = react.useState(null);
+  const [connectPhase, setConnectPhase] = react.useState("default");
+  const [qrSvgHtml, setQrSvgHtml] = react.useState(null);
+  const [deepLinkUrl, setDeepLinkUrl] = react.useState(null);
+  const timeoutRef = react.useRef(null);
+  const observerRef = react.useRef(null);
   const modalRef = react.useRef(null);
+  const cleanupConnectResources = react.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    removeSdkQrContainer();
+  }, []);
   react.useEffect(() => {
     if (isOpen) {
       setView("list");
       setSelectedWallet(null);
       setClosing(false);
+      setConnectPhase("default");
+      setQrSvgHtml(null);
+      setDeepLinkUrl(null);
+      cleanupConnectResources();
     }
-  }, [isOpen]);
+  }, [isOpen, cleanupConnectResources]);
+  react.useEffect(() => cleanupConnectResources, [cleanupConnectResources]);
   react.useEffect(() => {
     if (!isOpen) return;
     const handler = (e) => {
@@ -720,33 +811,78 @@ function WalletModal({
   react.useEffect(() => {
     if (error && view === "connecting") {
       setConnectError(error);
+      cleanupConnectResources();
       const code = "code" in error ? error.code : "";
-      if (code === "WALLET_NOT_INSTALLED") {
+      if (code === "WALLET_NOT_INSTALLED" && !isDualTransportWallet(selectedWallet)) {
         setView("not-installed");
+      } else if (code === "WALLET_NOT_INSTALLED" && isDualTransportWallet(selectedWallet)) {
+        setConnectPhase("qr");
+        setConnectError(null);
       } else {
         setView("error");
       }
     }
-  }, [error, view]);
+  }, [error, view, selectedWallet, cleanupConnectResources]);
   const handleClose = react.useCallback(() => {
+    cleanupConnectResources();
     resetConnect();
     setView("list");
     setSelectedWallet(null);
     setConnectError(null);
+    setConnectPhase("default");
+    setQrSvgHtml(null);
+    setDeepLinkUrl(null);
     setClosing(true);
     setTimeout(() => {
       setClosing(false);
       onClose();
     }, 150);
-  }, [onClose, resetConnect]);
+  }, [onClose, resetConnect, cleanupConnectResources]);
+  const startQrObserver = react.useCallback(() => {
+    const existing = extractSdkQrCode();
+    if (existing) {
+      setQrSvgHtml(existing.svgHtml);
+      setDeepLinkUrl(existing.deepLinkUrl);
+      setConnectPhase("qr");
+      return;
+    }
+    const observer = new MutationObserver(() => {
+      const result = extractSdkQrCode();
+      if (result) {
+        setQrSvgHtml(result.svgHtml);
+        setDeepLinkUrl(result.deepLinkUrl);
+        setConnectPhase("qr");
+        observer.disconnect();
+        observerRef.current = null;
+      }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    observerRef.current = observer;
+  }, []);
   const handleWalletClick = react.useCallback(async (wallet) => {
     setSelectedWallet(wallet);
     setConnectError(null);
     setView("connecting");
+    setQrSvgHtml(null);
+    setDeepLinkUrl(null);
+    const isDual = isDualTransportWallet(wallet);
+    if (isDual) {
+      setConnectPhase("extension");
+      startQrObserver();
+      timeoutRef.current = setTimeout(() => {
+        setConnectPhase((current) => {
+          if (current === "extension") return "extension-timeout";
+          return current;
+        });
+      }, EXTENSION_TIMEOUT_MS);
+    } else {
+      setConnectPhase("default");
+    }
     const session = await connect({
       walletId: wallet.walletId,
       preferInstalled: true
     });
+    cleanupConnectResources();
     if (session) {
       setView("success");
       setTimeout(() => {
@@ -754,16 +890,42 @@ function WalletModal({
         onClose();
       }, 800);
     }
-  }, [connect, onConnect, onClose]);
+  }, [connect, onConnect, onClose, startQrObserver, cleanupConnectResources]);
   const handleRetry = react.useCallback(() => {
     if (selectedWallet) {
       handleWalletClick(selectedWallet);
     }
   }, [selectedWallet, handleWalletClick]);
+  const handleSwitchToMobile = react.useCallback(() => {
+    resetConnect();
+    setConnectPhase("qr");
+    setConnectError(null);
+    if (!selectedWallet) return;
+    startQrObserver();
+    (async () => {
+      const session = await connect({
+        walletId: selectedWallet.walletId,
+        preferInstalled: false
+      });
+      cleanupConnectResources();
+      if (session) {
+        setView("success");
+        setTimeout(() => {
+          onConnect(session.sessionId);
+          onClose();
+        }, 800);
+      }
+    })();
+  }, [selectedWallet, connect, resetConnect, onConnect, onClose, startQrObserver, cleanupConnectResources]);
   const handleBackToList = react.useCallback(() => {
+    cleanupConnectResources();
+    resetConnect();
     setView("list");
     setSelectedWallet(null);
-  }, []);
+    setConnectPhase("default");
+    setQrSvgHtml(null);
+    setDeepLinkUrl(null);
+  }, [resetConnect, cleanupConnectResources]);
   if (!isOpen && !closing) return null;
   const nativeWallets = wallets.filter(isNativeWallet);
   const registryWallets = wallets.filter((w) => !isNativeWallet(w));
@@ -821,6 +983,76 @@ function WalletModal({
   };
   const closeBtnStyle = { ...closeBtnBase, width: "32px" };
   const hoverBg = isDark ? "rgba(255,255,255,0.08)" : "rgba(15,23,42,0.06)";
+  const primaryBtnStyle = {
+    padding: "10px 20px",
+    border: "none",
+    borderRadius: "10px",
+    backgroundColor: theme.colors.primary,
+    color: "#0B0F1A",
+    cursor: "pointer",
+    fontSize: "14px",
+    fontWeight: 600,
+    fontFamily: theme.fontFamily,
+    transition: "all 150ms cubic-bezier(0.2, 0.8, 0.2, 1)"
+  };
+  const ghostBtnStyle = {
+    padding: "10px 20px",
+    border: `1px solid ${theme.colors.border}`,
+    borderRadius: "10px",
+    backgroundColor: "transparent",
+    color: theme.colors.textSecondary,
+    cursor: "pointer",
+    fontSize: "14px",
+    fontWeight: 500,
+    fontFamily: theme.fontFamily,
+    transition: "all 150ms"
+  };
+  const linkStyle = {
+    fontSize: "12px",
+    color: theme.colors.textSecondary,
+    cursor: "pointer",
+    border: "none",
+    background: "none",
+    fontFamily: theme.fontFamily,
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    transition: "color 150ms"
+  };
+  const renderSubHeader = (backAction) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: backAction,
+        style: { ...closeBtnBase, width: "auto", padding: "0 10px", gap: "4px" },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = hoverBg;
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = theme.colors.surface;
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(BackIcon, { size: 14, color: theme.colors.textSecondary }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "12px", color: theme.colors.textSecondary, fontWeight: 500 }, children: "Back" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: handleClose,
+        style: closeBtnStyle,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = hoverBg;
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = theme.colors.surface;
+        },
+        "aria-label": "Close",
+        children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16, color: theme.colors.textSecondary })
+      }
+    )
+  ] });
   const renderWalletItem = (wallet) => {
     const isNative = isNativeWallet(wallet);
     const iconUrl = resolveWalletIcon(wallet.walletId, walletIcons, wallet.icons?.sm);
@@ -1015,44 +1247,78 @@ function WalletModal({
     ] })
   ] });
   const renderConnectingView = () => {
+    if (!selectedWallet) return null;
+    if (connectPhase === "extension") return renderExtensionPhase();
+    if (connectPhase === "extension-timeout") return renderTimeoutPhase();
+    if (connectPhase === "qr") return renderQrPhase();
+    return renderDefaultConnecting();
+  };
+  const renderDefaultConnecting = () => {
     if (!selectedWallet) return null;
     const iconUrl = resolveWalletIcon(selectedWallet.walletId, walletIcons, selectedWallet.icons?.sm);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+      renderSubHeader(handleBackToList),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px 32px 40px", textAlign: "center" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+          position: "relative",
+          width: "80px",
+          height: "80px",
+          margin: "0 auto 24px"
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            position: "absolute",
+            inset: "-6px",
+            borderRadius: "18px",
+            border: `3px solid ${theme.colors.border}`,
+            borderTopColor: theme.colors.primary,
+            animation: "partylayer-spin 1.2s linear infinite"
+          } }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            position: "relative",
+            width: "80px",
+            height: "80px",
+            borderRadius: "16px",
+            overflow: "hidden"
+          }, children: /* @__PURE__ */ jsxRuntime.jsx(ModalWalletIcon, { wallet: selectedWallet, size: 80, iconUrl }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+          fontSize: "17px",
+          fontWeight: 600,
+          color: theme.colors.text,
+          marginBottom: "8px"
+        }, children: [
+          "Opening ",
+          selectedWallet.name
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          fontSize: "14px",
+          color: theme.colors.textSecondary,
+          lineHeight: 1.5,
+          marginBottom: "32px"
+        }, children: "Confirm the connection in your wallet" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: handleBackToList,
-            style: { ...closeBtnBase, width: "auto", padding: "0 10px", gap: "4px" },
+            style: ghostBtnStyle,
             onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = hoverBg;
-            },
-            onMouseLeave: (e) => {
               e.currentTarget.style.backgroundColor = theme.colors.surface;
             },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(BackIcon, { size: 14, color: theme.colors.textSecondary }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "12px", color: theme.colors.textSecondary, fontWeight: 500 }, children: "Back" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleClose,
-            style: closeBtnStyle,
-            onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = hoverBg;
-            },
             onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = theme.colors.surface;
+              e.currentTarget.style.backgroundColor = "transparent";
             },
-            "aria-label": "Close",
-            children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16, color: theme.colors.textSecondary })
+            children: "Cancel"
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px 32px 40px", textAlign: "center" }, children: [
+      ] })
+    ] });
+  };
+  const renderExtensionPhase = () => {
+    if (!selectedWallet) return null;
+    const iconUrl = resolveWalletIcon(selectedWallet.walletId, walletIcons, selectedWallet.icons?.sm);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      renderSubHeader(handleBackToList),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px 32px 36px", textAlign: "center" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
           position: "relative",
           width: "80px",
@@ -1082,30 +1348,20 @@ function WalletModal({
           marginBottom: "8px"
         }, children: [
           "Opening ",
-          selectedWallet.name
+          selectedWallet.name,
+          "..."
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
           fontSize: "14px",
           color: theme.colors.textSecondary,
           lineHeight: 1.5,
-          marginBottom: "32px"
-        }, children: "Confirm the connection in your wallet" }),
+          marginBottom: "28px"
+        }, children: "Confirm the connection in your wallet extension" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: handleBackToList,
-            style: {
-              padding: "10px 24px",
-              border: `1px solid ${theme.colors.border}`,
-              borderRadius: "10px",
-              backgroundColor: "transparent",
-              color: theme.colors.textSecondary,
-              cursor: "pointer",
-              fontSize: "14px",
-              fontWeight: 500,
-              fontFamily: theme.fontFamily,
-              transition: "all 150ms"
-            },
+            style: ghostBtnStyle,
             onMouseEnter: (e) => {
               e.currentTarget.style.backgroundColor = theme.colors.surface;
             },
@@ -1114,7 +1370,213 @@ function WalletModal({
             },
             children: "Cancel"
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleSwitchToMobile,
+            style: linkStyle,
+            onMouseEnter: (e) => {
+              e.currentTarget.style.color = theme.colors.text;
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.color = theme.colors.textSecondary;
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SmartphoneIcon, { size: 12, color: "currentColor" }),
+              "Can't connect? Try mobile",
+              /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { size: 10, color: "currentColor" })
+            ]
+          }
+        ) })
+      ] })
+    ] });
+  };
+  const renderTimeoutPhase = () => {
+    if (!selectedWallet) return null;
+    const iconUrl = resolveWalletIcon(selectedWallet.walletId, walletIcons, selectedWallet.icons?.sm);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      renderSubHeader(handleBackToList),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px 32px 36px", textAlign: "center" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+          position: "relative",
+          width: "64px",
+          height: "64px",
+          margin: "0 auto 20px"
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "64px", height: "64px", borderRadius: "14px", overflow: "hidden", opacity: 0.7 }, children: /* @__PURE__ */ jsxRuntime.jsx(ModalWalletIcon, { wallet: selectedWallet, size: 64, iconUrl }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            position: "absolute",
+            bottom: "-4px",
+            right: "-4px",
+            width: "24px",
+            height: "24px",
+            borderRadius: "50%",
+            backgroundColor: theme.colors.warning,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            border: `3px solid ${theme.colors.background}`
+          }, children: /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { size: 11, color: "#FFFFFF" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          fontSize: "17px",
+          fontWeight: 600,
+          color: theme.colors.text,
+          marginBottom: "8px"
+        }, children: "Connection timed out" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          fontSize: "13px",
+          color: theme.colors.textSecondary,
+          lineHeight: 1.6,
+          maxWidth: "300px",
+          margin: "0 auto 24px"
+        }, children: "The wallet extension didn't respond. You can try again or connect via mobile." }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "10px", justifyContent: "center" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: handleRetry,
+              style: primaryBtnStyle,
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = theme.colors.primaryHover;
+                e.currentTarget.style.transform = "translateY(-1px)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = theme.colors.primary;
+                e.currentTarget.style.transform = "translateY(0)";
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(RefreshIcon, { size: 13, color: "#0B0F1A" }),
+                " ",
+                "Try Again"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: handleSwitchToMobile,
+              style: ghostBtnStyle,
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = theme.colors.surface;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(QrCodeIcon, { size: 14, color: "currentColor" }),
+                " ",
+                "Connect via Mobile"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] });
+  };
+  const renderQrPhase = () => {
+    if (!selectedWallet) return null;
+    const iconUrl = resolveWalletIcon(selectedWallet.walletId, walletIcons, selectedWallet.icons?.sm);
+    const installUrl = getWalletUrl(selectedWallet);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      renderSubHeader(handleBackToList),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "0 32px 32px", textAlign: "center" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "10px",
+          marginBottom: "20px"
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ModalWalletIcon, { wallet: selectedWallet, size: 28, iconUrl }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "16px", fontWeight: 600, color: theme.colors.text }, children: selectedWallet.name })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          width: "260px",
+          height: "260px",
+          margin: "0 auto 16px",
+          borderRadius: "16px",
+          backgroundColor: "#FFFFFF",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "16px",
+          border: `1px solid ${theme.colors.border}`
+        }, children: qrSvgHtml ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            dangerouslySetInnerHTML: { __html: qrSvgHtml },
+            style: {
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }
+          }
+        ) : (
+          /* Loading state while waiting for SDK to generate QR */
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+              width: "32px",
+              height: "32px",
+              border: `3px solid ${theme.colors.border}`,
+              borderTop: `3px solid ${theme.colors.primary}`,
+              borderRadius: "50%",
+              animation: "partylayer-spin 0.8s linear infinite",
+              margin: "0 auto 12px"
+            } }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "13px", color: theme.colors.textSecondary }, children: "Generating QR code..." })
+          ] })
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+          fontSize: "13px",
+          color: theme.colors.textSecondary,
+          marginBottom: "20px"
+        }, children: [
+          "Scan with ",
+          selectedWallet.name,
+          " mobile app"
+        ] }),
+        deepLinkUrl && /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: deepLinkUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "8px",
+              ...primaryBtnStyle,
+              textDecoration: "none",
+              marginBottom: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SmartphoneIcon, { size: 14, color: "#0B0F1A" }),
+              "Open in ",
+              selectedWallet.name
+            ]
+          }
+        ),
+        installUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "4px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: installUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: {
+              ...linkStyle,
+              textDecoration: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, { size: 11, color: "currentColor" }),
+              "Install browser extension",
+              /* @__PURE__ */ jsxRuntime.jsx(ExternalLinkIcon, { size: 10, color: "currentColor" })
+            ]
+          }
+        ) })
       ] })
     ] });
   };
@@ -1174,26 +1636,7 @@ function WalletModal({
     if (!selectedWallet) return null;
     const iconUrl = resolveWalletIcon(selectedWallet.walletId, walletIcons, selectedWallet.icons?.sm);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            onClick: handleBackToList,
-            style: { ...closeBtnBase, width: "auto", padding: "0 10px", gap: "4px" },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = hoverBg;
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = theme.colors.surface;
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(BackIcon, { size: 14, color: theme.colors.textSecondary }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "12px", color: theme.colors.textSecondary, fontWeight: 500 }, children: "Back" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClose, style: closeBtnStyle, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16, color: theme.colors.textSecondary }) })
-      ] }),
+      renderSubHeader(handleBackToList),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px 32px 32px", textAlign: "center" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
           position: "relative",
@@ -1235,18 +1678,7 @@ function WalletModal({
             "button",
             {
               onClick: handleRetry,
-              style: {
-                padding: "10px 20px",
-                border: "none",
-                borderRadius: "10px",
-                backgroundColor: theme.colors.primary,
-                color: "#0B0F1A",
-                cursor: "pointer",
-                fontSize: "14px",
-                fontWeight: 600,
-                fontFamily: theme.fontFamily,
-                transition: "all 150ms cubic-bezier(0.2, 0.8, 0.2, 1)"
-              },
+              style: primaryBtnStyle,
               onMouseEnter: (e) => {
                 e.currentTarget.style.backgroundColor = theme.colors.primaryHover;
                 e.currentTarget.style.transform = "translateY(-1px)";
@@ -1262,18 +1694,7 @@ function WalletModal({
             "button",
             {
               onClick: handleBackToList,
-              style: {
-                padding: "10px 20px",
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: "10px",
-                backgroundColor: "transparent",
-                color: theme.colors.textSecondary,
-                cursor: "pointer",
-                fontSize: "14px",
-                fontWeight: 500,
-                fontFamily: theme.fontFamily,
-                transition: "all 150ms"
-              },
+              style: ghostBtnStyle,
               onMouseEnter: (e) => {
                 e.currentTarget.style.backgroundColor = theme.colors.surface;
               },
@@ -1292,26 +1713,7 @@ function WalletModal({
     const iconUrl = resolveWalletIcon(selectedWallet.walletId, walletIcons, selectedWallet.icons?.sm);
     const installUrl = getWalletUrl(selectedWallet);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            onClick: handleBackToList,
-            style: { ...closeBtnBase, width: "auto", padding: "0 10px", gap: "4px" },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = hoverBg;
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = theme.colors.surface;
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(BackIcon, { size: 14, color: theme.colors.textSecondary }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "12px", color: theme.colors.textSecondary, fontWeight: 500 }, children: "Back" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClose, style: closeBtnStyle, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16, color: theme.colors.textSecondary }) })
-      ] }),
+      renderSubHeader(handleBackToList),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px 32px 36px", textAlign: "center" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
           position: "relative",
@@ -1403,18 +1805,7 @@ function WalletModal({
               "button",
               {
                 onClick: handleRetry,
-                style: {
-                  padding: "10px 20px",
-                  border: `1px solid ${theme.colors.border}`,
-                  borderRadius: "10px",
-                  backgroundColor: "transparent",
-                  color: theme.colors.textSecondary,
-                  cursor: "pointer",
-                  fontSize: "13px",
-                  fontWeight: 500,
-                  fontFamily: theme.fontFamily,
-                  transition: "all 150ms"
-                },
+                style: { ...ghostBtnStyle, fontSize: "13px" },
                 onMouseEnter: (e) => {
                   e.currentTarget.style.backgroundColor = theme.colors.surface;
                 },
@@ -1428,18 +1819,7 @@ function WalletModal({
               "button",
               {
                 onClick: handleBackToList,
-                style: {
-                  padding: "10px 20px",
-                  border: `1px solid ${theme.colors.border}`,
-                  borderRadius: "10px",
-                  backgroundColor: "transparent",
-                  color: theme.colors.textSecondary,
-                  cursor: "pointer",
-                  fontSize: "13px",
-                  fontWeight: 500,
-                  fontFamily: theme.fontFamily,
-                  transition: "all 150ms"
-                },
+                style: { ...ghostBtnStyle, fontSize: "13px" },
                 onMouseEnter: (e) => {
                   e.currentTarget.style.backgroundColor = theme.colors.surface;
                 },
@@ -1491,6 +1871,10 @@ function WalletModal({
           50% { transform: scale(1.02); }
           100% { transform: scale(1); opacity: 1; }
         }
+        /* Hide Console SDK's injected QR modal \u2014 we render our own */
+        #${SDK_QR_CONTAINER_ID} {
+          display: none !important;
+        }
       ` })
       ]
     }