decane-connect-kit 2.29.0 → 2.29.1

package/dist/index.js

@@ -5469,8 +5469,8 @@ async function deriveAddressesFromShares(a, b) {
 init_errors();
 
 // src/ui/WalletSelector.tsx
-import React2, { useEffect, useCallback, useState } from "react";
-import { createPortal } from "react-dom";
+import React3, { useEffect as useEffect2, useCallback as useCallback2, useState as useState2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 
 // src/ui/styles.ts
 var tokens = {
@@ -5798,1047 +5798,23 @@ function ChevronIcon({ size = 16, open = false }) {
     /* @__PURE__ */ React.createElement("path", { d: "m6 9 6 6 6-6" })
   );
 }
-
-// src/ui/WalletSelector.tsx
-var FONT_URL = "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";
-function injectTokens(theme) {
-  let resolved;
-  if (theme === "auto") {
-    resolved = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  } else {
-    resolved = theme;
-  }
-  let styleEl = document.getElementById("decane-tokens");
-  if (!styleEl) {
-    styleEl = document.createElement("style");
-    styleEl.id = "decane-tokens";
-    document.head.appendChild(styleEl);
-  }
-  styleEl.textContent = `:root { ${CSS_VARS[resolved]} }`;
-}
-function injectFont() {
-  if (document.getElementById("decane-font")) return;
-  const link = document.createElement("link");
-  link.id = "decane-font";
-  link.rel = "stylesheet";
-  link.href = FONT_URL;
-  document.head.appendChild(link);
-}
-function WalletRow({ wallet, onClick }) {
-  const [hovered, setHovered] = useState(false);
-  const [focused, setFocused] = useState(false);
-  return /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      onFocus: () => setFocused(true),
-      onBlur: () => setFocused(false),
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 12,
-        width: "100%",
-        padding: "11px 14px",
-        background: hovered ? "var(--dc-surface-hover)" : "transparent",
-        border: focused ? "1px solid var(--dc-border-accent)" : "1px solid transparent",
-        borderRadius: 10,
-        cursor: "pointer",
-        textAlign: "left",
-        transition: "background 0.12s, border-color 0.12s",
-        outline: "none",
-        fontFamily: "inherit"
-      }
-    },
-    /* @__PURE__ */ React2.createElement(WalletIcon, { src: wallet.icon || void 0, name: wallet.name, size: 38 }),
-    /* @__PURE__ */ React2.createElement("span", { style: { flex: 1, fontSize: 14, fontWeight: 600, color: "var(--dc-text)", letterSpacing: "-0.01em" } }, wallet.name),
-    /* @__PURE__ */ React2.createElement(ChainIconStack, { support: wallet.chainSupport, size: 16 }),
-    /* @__PURE__ */ React2.createElement(
-      "svg",
-      {
-        width: "14",
-        height: "14",
-        viewBox: "0 0 14 14",
-        fill: "none",
-        style: { color: hovered ? "var(--dc-text-secondary)" : "var(--dc-text-muted)", flexShrink: 0, transition: "color 0.12s" }
-      },
-      /* @__PURE__ */ React2.createElement("path", { d: "M5 2.5L9.5 7L5 11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-    )
-  );
+function ArrowLeftIcon({ size = 16 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("path", { d: "M19 12H5M11 6l-6 6 6 6" }));
 }
-function FilterTab({ label, active, onClick }) {
-  const [hovered, setHovered] = useState(false);
-  return /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      style: {
-        flex: 1,
-        padding: "6px 8px",
-        borderRadius: 8,
-        border: active ? "1px solid var(--dc-border-accent)" : "1px solid transparent",
-        background: active ? "rgba(245,200,0,0.1)" : hovered ? "var(--dc-surface-hover)" : "transparent",
-        color: active ? "var(--dc-accent)" : "var(--dc-text-muted)",
-        fontSize: 11,
-        fontWeight: 700,
-        letterSpacing: "0.04em",
-        textTransform: "uppercase",
-        cursor: "pointer",
-        transition: "all 0.12s",
-        fontFamily: "inherit",
-        outline: "none"
-      }
-    },
-    label
-  );
+function WalletLineIcon({ size = 18 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("path", { d: "M4 7.5A2.5 2.5 0 0 1 6.5 5H18a1 1 0 0 1 1 1v2" }), /* @__PURE__ */ React.createElement("path", { d: "M4 7.5v9A2.5 2.5 0 0 0 6.5 19H19a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1H6.5A2.5 2.5 0 0 1 4 7.5z" }), /* @__PURE__ */ React.createElement("circle", { cx: "16", cy: "13.5", r: "1", fill: "currentColor", stroke: "none" }));
 }
-function ChainOption({ label, description, badges, onClick }) {
-  const [hovered, setHovered] = useState(false);
-  return /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-start",
-        gap: 6,
-        width: "100%",
-        padding: "14px 16px",
-        background: hovered ? "var(--dc-surface-hover)" : "var(--dc-surface)",
-        border: hovered ? "1px solid var(--dc-border-accent)" : "1px solid var(--dc-border)",
-        borderRadius: 12,
-        cursor: "pointer",
-        textAlign: "left",
-        transition: "all 0.12s",
-        fontFamily: "inherit",
-        outline: "none"
-      }
-    },
-    badges,
-    /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--dc-text)" } }, label),
-    /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 11, color: "var(--dc-text-muted)", lineHeight: 1.4 } }, description)
-  );
+function SearchIcon({ size = 16 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("circle", { cx: "11", cy: "11", r: "6.5" }), /* @__PURE__ */ React.createElement("path", { d: "m20 20-4.2-4.2" }));
 }
-function hasSocialMode(mode) {
-  return mode === "all" || mode === "social" || mode === "evm+social" || mode === "solana+social" || mode === "tron+social" || mode === "evm+tron+social";
-}
-function WalletSelector({
-  provider,
-  open,
-  onClose,
-  onConnect,
-  theme = "auto",
-  networks = "all",
-  mode = "wallets",
-  socialAuthMethods = ["google", "email"],
-  onGoogleSignIn,
-  onKingsChatSignIn,
-  onXSignIn,
-  onEmailStart,
-  onEmailVerify,
-  onPhoneStart,
-  onPhoneVerify,
-  customAuthLabel,
-  onCustomAuthSignIn,
-  canUsePasskey = false,
-  passkeyAddress = null,
-  onPasskeySignIn
-}) {
-  const showSocial = hasSocialMode(mode);
-  const showWallets = mode !== "social";
-  const [view, setView] = useState(showSocial ? "social" : "wallets");
-  const [search, setSearch] = useState("");
-  const [filter, setFilter] = useState("all");
-  const [pendingWallet, setPendingWallet] = useState(null);
-  const [emailStep, setEmailStep] = useState("input");
-  const [emailVal, setEmailVal] = useState("");
-  const [codeVal, setCodeVal] = useState("");
-  const [phoneStep, setPhoneStep] = useState("input");
-  const [phoneVal, setPhoneVal] = useState("");
-  const [phoneCode, setPhoneCode] = useState("");
-  const [socialLoad, setSocialLoad] = useState(false);
-  const [socialErr, setSocialErr] = useState("");
-  const [showOtherMethods, setShowOtherMethods] = useState(false);
-  const passkeyFirst = canUsePasskey && !!onPasskeySignIn && !showOtherMethods;
-  useEffect(() => {
-    if (!open) return;
-    injectFont();
-    injectTokens(theme);
-    if (theme !== "auto") return;
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const handler = () => injectTokens("auto");
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, [open, theme]);
-  useEffect(() => {
-    if (!open) {
-      setSearch("");
-      setFilter("all");
-      setPendingWallet(null);
-      setView(showSocial ? "social" : "wallets");
-      setEmailStep("input");
-      setEmailVal("");
-      setCodeVal("");
-      setSocialErr("");
-      setShowOtherMethods(false);
-      return;
-    }
-    return () => {
-      document.getElementById("decane-tokens")?.remove();
-    };
-  }, [open, showWallets]);
-  async function handlePasskeySignIn() {
-    if (!onPasskeySignIn) return;
-    setSocialLoad(true);
-    setSocialErr("");
-    try {
-      await onPasskeySignIn();
-    } catch (e) {
-      const err = e;
-      if (err?.name !== "UserCancelledError") {
-        setSocialErr(err?.message ?? "Passkey sign-in failed");
-        setShowOtherMethods(true);
-      }
-      setSocialLoad(false);
-    }
-  }
-  async function handlePasskeyClick() {
-    void handlePasskeySignIn();
-  }
-  async function handleGoogleClick() {
-    if (!onGoogleSignIn) return;
-    setSocialLoad(true);
-    setSocialErr("");
-    try {
-      await onGoogleSignIn();
-    } catch (e) {
-      setSocialErr(e.message);
-      setSocialLoad(false);
-    }
-  }
-  async function handleKingsChatClick() {
-    if (!onKingsChatSignIn) return;
-    setSocialLoad(true);
-    setSocialErr("");
-    try {
-      await onKingsChatSignIn();
-    } catch (e) {
-      setSocialErr(e.message);
-    } finally {
-      setSocialLoad(false);
-    }
-  }
-  async function handleXClick() {
-    if (!onXSignIn) return;
-    setSocialLoad(true);
-    setSocialErr("");
-    try {
-      await onXSignIn();
-    } catch (e) {
-      setSocialErr(e.message);
-      setSocialLoad(false);
-    }
-  }
-  async function handleCustomAuthClick() {
-    if (!onCustomAuthSignIn) return;
-    setSocialLoad(true);
-    setSocialErr("");
-    try {
-      await onCustomAuthSignIn();
-    } catch (e) {
-      setSocialErr(e.message);
-      setSocialLoad(false);
-    }
-  }
-  async function handleEmailStart(e) {
-    e.preventDefault();
-    if (!onEmailStart) return;
-    setSocialLoad(true);
-    setSocialErr("");
-    try {
-      await onEmailStart(emailVal);
-      setEmailStep("code");
-    } catch (e2) {
-      setSocialErr(e2.message);
-    } finally {
-      setSocialLoad(false);
-    }
-  }
-  async function handleEmailVerify(e) {
-    e.preventDefault();
-    if (!onEmailVerify) return;
-    setSocialLoad(true);
-    setSocialErr("");
-    try {
-      await onEmailVerify(emailVal, codeVal);
-    } catch (e2) {
-      setSocialErr(e2.message);
-    } finally {
-      setSocialLoad(false);
-    }
-  }
-  async function handlePhoneStart(e) {
-    e.preventDefault();
-    if (!onPhoneStart) return;
-    setSocialLoad(true);
-    setSocialErr("");
-    try {
-      await onPhoneStart(phoneVal);
-      setPhoneStep("code");
-    } catch (e2) {
-      setSocialErr(e2.message);
-    } finally {
-      setSocialLoad(false);
-    }
-  }
-  async function handlePhoneVerify(e) {
-    e.preventDefault();
-    if (!onPhoneVerify) return;
-    setSocialLoad(true);
-    setSocialErr("");
-    try {
-      await onPhoneVerify(phoneVal, phoneCode);
-    } catch (e2) {
-      setSocialErr(e2.message);
-    } finally {
-      setSocialLoad(false);
-    }
-  }
-  const handleKey = useCallback(
-    (e) => {
-      if (e.key === "Escape") {
-        if (pendingWallet) {
-          setPendingWallet(null);
-        } else {
-          onClose();
-        }
-      }
-    },
-    [onClose, pendingWallet]
-  );
-  useEffect(() => {
-    if (!open) return;
-    document.addEventListener("keydown", handleKey);
-    return () => document.removeEventListener("keydown", handleKey);
-  }, [open, handleKey]);
-  if (!open) return null;
-  const q = search.toLowerCase();
-  const networkWallets = provider.wallets.filter((w) => {
-    const cs = w.chainSupport;
-    if (networks === "evm") return cs.includes("evm");
-    if (networks === "solana") return cs.includes("solana");
-    if (networks === "tron") return cs.includes("tron");
-    if (networks === "bitcoin") return cs.includes("bitcoin");
-    return true;
-  });
-  const baseWallets = filter === "evm" ? networkWallets.filter((w) => w.chainSupport.includes("evm")) : filter === "solana" ? networkWallets.filter((w) => w.chainSupport.includes("solana")) : filter === "tron" ? networkWallets.filter((w) => w.chainSupport.includes("tron")) : filter === "bitcoin" ? networkWallets.filter((w) => w.chainSupport.includes("bitcoin")) : networkWallets;
-  const filtered = q ? baseWallets.filter((w) => w.name.toLowerCase().includes(q)) : baseWallets;
-  function handleWalletClick(wallet) {
-    const cs = wallet.chainSupport;
-    const isMulti = cs.length >= 2;
-    if (isMulti && networks === "all") {
-      setPendingWallet(wallet);
-    } else {
-      const preference = networks === "evm" ? "evm" : networks === "solana" ? "solana" : networks === "tron" ? "tron" : networks === "bitcoin" ? "bitcoin" : void 0;
-      onConnect(wallet, preference);
-      onClose();
-    }
-  }
-  function handleChainChoice(preference) {
-    if (!pendingWallet) return;
-    onConnect(pendingWallet, preference);
-    onClose();
-  }
-  const modal = /* @__PURE__ */ React2.createElement(
-    "div",
-    {
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Connect wallet",
-      style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 9999,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "16px",
-        // Same fallback chain as SocialWalletModal — without it, this modal
-        // drops to the browser default serif whenever the token block hasn't
-        // been injected, while the social modal still lands on system-ui.
-        fontFamily: "var(--dc-font-sans, system-ui, sans-serif)"
-      }
-    },
-    /* @__PURE__ */ React2.createElement(
-      "div",
-      {
-        onClick: () => {
-          if (pendingWallet) {
-            setPendingWallet(null);
-          } else {
-            onClose();
-          }
-        },
-        style: {
-          position: "absolute",
-          inset: 0,
-          background: "var(--dc-bg-overlay)",
-          backdropFilter: "blur(8px)",
-          WebkitBackdropFilter: "blur(8px)"
-        }
-      }
-    ),
-    /* @__PURE__ */ React2.createElement(
-      "div",
-      {
-        style: {
-          position: "relative",
-          background: "var(--dc-bg)",
-          border: "1px solid var(--dc-border)",
-          borderRadius: 20,
-          width: "100%",
-          maxWidth: 400,
-          maxHeight: "85vh",
-          display: "flex",
-          flexDirection: "column",
-          boxShadow: "0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04)",
-          overflow: "hidden"
-        }
-      },
-      /* @__PURE__ */ React2.createElement(
-        "div",
-        {
-          style: {
-            height: 2,
-            background: "linear-gradient(90deg, transparent, var(--dc-accent) 30%, var(--dc-accent) 70%, transparent)"
-          }
-        }
-      ),
-      pendingWallet ? (
-        /* ── Chain picker step ───────────────────────────────────────── */
-        /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { style: { padding: "18px 20px 16px", display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: () => setPendingWallet(null),
-            "aria-label": "Back",
-            style: {
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 8,
-              width: 28,
-              height: 28,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              cursor: "pointer",
-              color: "var(--dc-text-muted)",
-              flexShrink: 0,
-              fontFamily: "inherit",
-              padding: 0
-            }
-          },
-          /* @__PURE__ */ React2.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, /* @__PURE__ */ React2.createElement("path", { d: "M7.5 2L3 6l4.5 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))
-        ), /* @__PURE__ */ React2.createElement("h2", { style: { margin: 0, fontSize: 16, fontWeight: 800, color: "var(--dc-text)", letterSpacing: "-0.02em" } }, "Choose networks"), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: onClose,
-            "aria-label": "Close",
-            style: {
-              marginLeft: "auto",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 8,
-              width: 28,
-              height: 28,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              cursor: "pointer",
-              color: "var(--dc-text-muted)",
-              flexShrink: 0,
-              fontFamily: "inherit",
-              padding: 0
-            }
-          },
-          /* @__PURE__ */ React2.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, /* @__PURE__ */ React2.createElement("path", { d: "M1.5 1.5L10.5 10.5M10.5 1.5L1.5 10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }))
-        )), /* @__PURE__ */ React2.createElement(
-          "div",
-          {
-            style: {
-              margin: "0 20px 16px",
-              padding: "12px 14px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 12,
-              display: "flex",
-              alignItems: "center",
-              gap: 12
-            }
-          },
-          /* @__PURE__ */ React2.createElement(WalletIcon, { src: pendingWallet.icon || void 0, name: pendingWallet.name, size: 36 }),
-          /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("div", { style: { fontSize: 14, fontWeight: 700, color: "var(--dc-text)" } }, pendingWallet.name), /* @__PURE__ */ React2.createElement("div", { style: { fontSize: 11, color: "var(--dc-text-muted)", marginTop: 2 } }, "Multi-chain wallet detected"))
-        ), /* @__PURE__ */ React2.createElement("div", { style: { padding: "0 12px 20px", display: "flex", flexDirection: "column", gap: 8 } }, pendingWallet.chainSupport.includes("evm") && /* @__PURE__ */ React2.createElement(
-          ChainOption,
-          {
-            label: "EVM networks",
-            description: "Connect your Ethereum-compatible address only",
-            badges: /* @__PURE__ */ React2.createElement(ChainIconStack, { support: ["evm"], size: 18 }),
-            onClick: () => handleChainChoice("evm")
-          }
-        ), pendingWallet.chainSupport.includes("solana") && /* @__PURE__ */ React2.createElement(
-          ChainOption,
-          {
-            label: "Solana network",
-            description: "Connect your Solana address only",
-            badges: /* @__PURE__ */ React2.createElement(ChainIconStack, { support: ["solana"], size: 18 }),
-            onClick: () => handleChainChoice("solana")
-          }
-        ), pendingWallet.chainSupport.includes("tron") && /* @__PURE__ */ React2.createElement(
-          ChainOption,
-          {
-            label: "Tron network",
-            description: "Connect your Tron address only",
-            badges: /* @__PURE__ */ React2.createElement(ChainIconStack, { support: ["tron"], size: 18 }),
-            onClick: () => handleChainChoice("tron")
-          }
-        ), pendingWallet.chainSupport.includes("bitcoin") && /* @__PURE__ */ React2.createElement(
-          ChainOption,
-          {
-            label: "Bitcoin network",
-            description: "Connect your Bitcoin address only",
-            badges: /* @__PURE__ */ React2.createElement(ChainIconStack, { support: ["bitcoin"], size: 18 }),
-            onClick: () => handleChainChoice("bitcoin")
-          }
-        ), /* @__PURE__ */ React2.createElement(
-          ChainOption,
-          {
-            label: "All networks",
-            description: "Connect all supported addresses together",
-            badges: /* @__PURE__ */ React2.createElement(ChainIconStack, { support: pendingWallet.chainSupport, size: 18 }),
-            onClick: () => handleChainChoice(void 0)
-          }
-        )))
-      ) : (
-        /* ── Wallet list / Social sign-in ────────────────────────────── */
-        /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { style: { padding: "18px 20px 0" } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 14 } }, /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("h2", { style: { margin: 0, fontSize: 17, fontWeight: 800, color: "var(--dc-text)", letterSpacing: "-0.02em", lineHeight: 1.2 } }, view === "social" ? "Sign in" : "Connect wallet"), view === "wallets" && networkWallets.length > 0 && /* @__PURE__ */ React2.createElement("p", { style: { margin: "3px 0 0", fontSize: 12, color: "var(--dc-text-muted)" } }, networkWallets.length, " wallet", networkWallets.length !== 1 ? "s" : "", " detected")), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: onClose,
-            "aria-label": "Close",
-            style: {
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              cursor: "pointer",
-              padding: 0,
-              width: 28,
-              height: 28,
-              borderRadius: 8,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              color: "var(--dc-text-muted)",
-              flexShrink: 0,
-              transition: "background 0.12s, color 0.12s",
-              fontFamily: "inherit"
-            },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.background = "var(--dc-surface-hover)";
-              e.currentTarget.style.color = "var(--dc-text)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.background = "var(--dc-surface)";
-              e.currentTarget.style.color = "var(--dc-text-muted)";
-            }
-          },
-          /* @__PURE__ */ React2.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, /* @__PURE__ */ React2.createElement("path", { d: "M1.5 1.5L10.5 10.5M10.5 1.5L1.5 10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }))
-        )), showWallets && showSocial && /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", gap: 4, marginBottom: 14, background: "var(--dc-surface)", borderRadius: 10, padding: 3 } }, ["social", "wallets"].map((v) => /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            key: v,
-            onClick: () => setView(v),
-            style: {
-              flex: 1,
-              padding: "7px 0",
-              borderRadius: 8,
-              border: "none",
-              background: view === v ? "var(--dc-bg)" : "transparent",
-              color: view === v ? "var(--dc-text)" : "var(--dc-text-muted)",
-              fontSize: 13,
-              fontWeight: view === v ? 700 : 500,
-              cursor: "pointer",
-              fontFamily: "inherit",
-              boxShadow: view === v ? "0 1px 4px rgba(0,0,0,0.2)" : "none",
-              transition: "all 0.15s"
-            }
-          },
-          v === "wallets" ? "Wallet" : "Sign in"
-        ))), view === "wallets" && networks === "all" && /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", gap: 4, marginBottom: 10 } }, /* @__PURE__ */ React2.createElement(FilterTab, { label: "All", active: filter === "all", onClick: () => setFilter("all") }), /* @__PURE__ */ React2.createElement(FilterTab, { label: "EVM", active: filter === "evm", onClick: () => setFilter("evm") }), /* @__PURE__ */ React2.createElement(FilterTab, { label: "Solana", active: filter === "solana", onClick: () => setFilter("solana") }), provider.tronWallets && provider.tronWallets.length > 0 && /* @__PURE__ */ React2.createElement(FilterTab, { label: "Tron", active: filter === "tron", onClick: () => setFilter("tron") }), provider.bitcoinWallets && provider.bitcoinWallets.length > 0 && /* @__PURE__ */ React2.createElement(FilterTab, { label: "Bitcoin", active: filter === "bitcoin", onClick: () => setFilter("bitcoin") })), view === "wallets" && /* @__PURE__ */ React2.createElement("div", { style: { position: "relative", marginBottom: 10 } }, /* @__PURE__ */ React2.createElement(
-          "svg",
-          {
-            width: "14",
-            height: "14",
-            viewBox: "0 0 14 14",
-            fill: "none",
-            style: { position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", color: "var(--dc-text-muted)", pointerEvents: "none" }
-          },
-          /* @__PURE__ */ React2.createElement("circle", { cx: "6", cy: "6", r: "4", stroke: "currentColor", strokeWidth: "1.4" }),
-          /* @__PURE__ */ React2.createElement("path", { d: "M9.5 9.5L12 12", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" })
-        ), /* @__PURE__ */ React2.createElement(
-          "input",
-          {
-            type: "text",
-            placeholder: "Search wallets\u2026",
-            value: search,
-            onChange: (e) => setSearch(e.target.value),
-            style: {
-              width: "100%",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text)",
-              fontSize: 13,
-              padding: "8px 12px 8px 32px",
-              outline: "none",
-              fontFamily: "var(--dc-font-sans, system-ui, sans-serif)",
-              transition: "border-color 0.15s",
-              boxSizing: "border-box"
-            },
-            onFocus: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onBlur: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          }
-        ))), view === "social" && /* @__PURE__ */ React2.createElement("div", { style: { padding: "4px 20px 24px", display: "flex", flexDirection: "column", gap: 10 } }, socialErr && /* @__PURE__ */ React2.createElement("div", { style: { background: "rgba(204,51,0,0.1)", border: "1px solid var(--dc-danger)", borderRadius: 8, padding: "9px 12px", fontSize: 12, color: "var(--dc-danger)" } }, socialErr), passkeyFirst && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: handlePasskeyClick,
-            disabled: socialLoad,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 10,
-              width: "100%",
-              padding: "13px 16px",
-              background: "var(--dc-accent)",
-              border: "none",
-              borderRadius: 10,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              color: "var(--dc-accent-text)",
-              fontSize: 14,
-              fontWeight: 700,
-              fontFamily: "inherit",
-              opacity: socialLoad ? 0.6 : 1
-            }
-          },
-          /* @__PURE__ */ React2.createElement("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }, /* @__PURE__ */ React2.createElement("circle", { cx: "12", cy: "8", r: "4" }), /* @__PURE__ */ React2.createElement("path", { d: "M6 21v-1a4 4 0 0 1 4-4h1" }), /* @__PURE__ */ React2.createElement("path", { d: "M17 15v6M14.5 18h5" })),
-          socialLoad ? "Verifying\u2026" : "Continue with passkey"
-        ), passkeyAddress && /* @__PURE__ */ React2.createElement("div", { style: { textAlign: "center", fontSize: 12, color: "var(--dc-text-muted)" } }, "Resuming ", passkeyAddress.slice(0, 6), "\u2026", passkeyAddress.slice(-4)), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: () => {
-              setShowOtherMethods(true);
-              setSocialErr("");
-            },
-            disabled: socialLoad,
-            style: {
-              background: "none",
-              border: "none",
-              padding: "6px 0",
-              color: "var(--dc-text-muted)",
-              fontSize: 12.5,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontFamily: "inherit",
-              textDecoration: "underline",
-              textUnderlineOffset: 3
-            }
-          },
-          "Use a different account"
-        )), !passkeyFirst && socialAuthMethods.includes("google") && /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: handleGoogleClick,
-            disabled: socialLoad,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 10,
-              width: "100%",
-              padding: "11px 16px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontSize: 14,
-              fontWeight: 600,
-              color: "var(--dc-text)",
-              fontFamily: "inherit",
-              transition: "border-color 0.12s, background 0.12s",
-              opacity: socialLoad ? 0.6 : 1
-            },
-            onMouseEnter: (e) => {
-              if (!socialLoad) e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          },
-          /* @__PURE__ */ React2.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React2.createElement("path", { d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z", fill: "#4285F4" }), /* @__PURE__ */ React2.createElement("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z", fill: "#34A853" }), /* @__PURE__ */ React2.createElement("path", { d: "M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z", fill: "#FBBC05" }), /* @__PURE__ */ React2.createElement("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z", fill: "#EA4335" })),
-          socialLoad ? "Redirecting\u2026" : "Continue with Google"
-        ), !passkeyFirst && socialAuthMethods.includes("kingschat") && onKingsChatSignIn && /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: handleKingsChatClick,
-            disabled: socialLoad,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 10,
-              width: "100%",
-              padding: "11px 16px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontSize: 14,
-              fontWeight: 600,
-              color: "var(--dc-text)",
-              fontFamily: "inherit",
-              transition: "border-color 0.12s, background 0.12s",
-              opacity: socialLoad ? 0.6 : 1
-            },
-            onMouseEnter: (e) => {
-              if (!socialLoad) e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          },
-          /* @__PURE__ */ React2.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true" }, /* @__PURE__ */ React2.createElement("circle", { cx: "9", cy: "9", r: "9", fill: "var(--dc-accent)" }), /* @__PURE__ */ React2.createElement("path", { d: "M5.5 4.5h1.9v3.6l3.1-3.6h2.3l-3.3 3.8 3.5 5.2h-2.3l-2.5-3.8-.8.9v2.9H5.5V4.5z", fill: "var(--dc-accent-text)" })),
-          socialLoad ? "Waiting for KingsChat\u2026" : "Continue with KingsChat"
-        ), !passkeyFirst && socialAuthMethods.includes("x") && onXSignIn && /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: handleXClick,
-            disabled: socialLoad,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 10,
-              width: "100%",
-              padding: "11px 16px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontSize: 14,
-              fontWeight: 600,
-              color: "var(--dc-text)",
-              fontFamily: "inherit",
-              transition: "border-color 0.12s, background 0.12s",
-              opacity: socialLoad ? 0.6 : 1
-            },
-            onMouseEnter: (e) => {
-              if (!socialLoad) e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          },
-          /* @__PURE__ */ React2.createElement(XLogo, { size: 16 }),
-          socialLoad ? "Redirecting\u2026" : "Continue with X"
-        ), !passkeyFirst && socialAuthMethods.includes("google") && socialAuthMethods.includes("email") && /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } }), /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 11, color: "var(--dc-text-muted)", whiteSpace: "nowrap" } }, "or continue with email"), /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } })), !passkeyFirst && socialAuthMethods.includes("email") && (emailStep === "input" ? /* @__PURE__ */ React2.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ React2.createElement(
-          "input",
-          {
-            type: "email",
-            placeholder: "your@email.com",
-            value: emailVal,
-            onChange: (e) => setEmailVal(e.target.value),
-            required: true,
-            style: {
-              width: "100%",
-              padding: "10px 12px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text)",
-              fontSize: 13,
-              fontFamily: "inherit",
-              outline: "none",
-              boxSizing: "border-box"
-            },
-            onFocus: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onBlur: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          }
-        ), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            type: "submit",
-            disabled: socialLoad || !emailVal,
-            style: {
-              width: "100%",
-              padding: "10px 16px",
-              background: "var(--dc-accent)",
-              color: "var(--dc-accent-text)",
-              border: "none",
-              borderRadius: 10,
-              fontSize: 14,
-              fontWeight: 700,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontFamily: "inherit",
-              opacity: socialLoad || !emailVal ? 0.6 : 1
-            }
-          },
-          socialLoad ? "Sending\u2026" : "Send code"
-        )) : /* @__PURE__ */ React2.createElement("form", { onSubmit: handleEmailVerify, style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ React2.createElement("p", { style: { margin: 0, fontSize: 12, color: "var(--dc-text-muted)", textAlign: "center" } }, "Code sent to ", /* @__PURE__ */ React2.createElement("strong", { style: { color: "var(--dc-text)" } }, emailVal)), /* @__PURE__ */ React2.createElement(
-          "input",
-          {
-            type: "text",
-            placeholder: "6-digit code",
-            value: codeVal,
-            onChange: (e) => setCodeVal(e.target.value.replace(/\D/g, "").slice(0, 6)),
-            autoFocus: true,
-            required: true,
-            style: {
-              width: "100%",
-              padding: "10px 12px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text)",
-              fontSize: 20,
-              fontFamily: "monospace",
-              letterSpacing: 8,
-              textAlign: "center",
-              outline: "none",
-              boxSizing: "border-box"
-            },
-            onFocus: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onBlur: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          }
-        ), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              setEmailStep("input");
-              setCodeVal("");
-              setSocialErr("");
-            },
-            style: {
-              flex: 1,
-              padding: "9px 0",
-              background: "transparent",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text-muted)",
-              fontSize: 13,
-              cursor: "pointer",
-              fontFamily: "inherit"
-            }
-          },
-          "Back"
-        ), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            type: "submit",
-            disabled: socialLoad || codeVal.length < 6,
-            style: {
-              flex: 2,
-              padding: "9px 0",
-              background: "var(--dc-accent)",
-              color: "var(--dc-accent-text)",
-              border: "none",
-              borderRadius: 10,
-              fontSize: 13,
-              fontWeight: 700,
-              cursor: socialLoad || codeVal.length < 6 ? "not-allowed" : "pointer",
-              fontFamily: "inherit",
-              opacity: socialLoad || codeVal.length < 6 ? 0.6 : 1
-            }
-          },
-          socialLoad ? "Verifying\u2026" : "Verify"
-        )))), !passkeyFirst && socialAuthMethods.includes("phone") && onPhoneStart && onPhoneVerify && (phoneStep === "input" ? /* @__PURE__ */ React2.createElement("form", { onSubmit: handlePhoneStart, style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ React2.createElement(
-          "input",
-          {
-            type: "tel",
-            placeholder: "+234 801 234 5678",
-            value: phoneVal,
-            onChange: (e) => setPhoneVal(e.target.value),
-            required: true,
-            style: {
-              width: "100%",
-              padding: "10px 12px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text)",
-              fontSize: 13,
-              fontFamily: "inherit",
-              outline: "none",
-              boxSizing: "border-box"
-            },
-            onFocus: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onBlur: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          }
-        ), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            type: "submit",
-            disabled: socialLoad || !phoneVal,
-            style: {
-              width: "100%",
-              padding: "10px 16px",
-              background: "var(--dc-accent)",
-              color: "var(--dc-accent-text)",
-              border: "none",
-              borderRadius: 10,
-              fontSize: 14,
-              fontWeight: 700,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontFamily: "inherit",
-              opacity: socialLoad || !phoneVal ? 0.6 : 1
-            }
-          },
-          socialLoad ? "Sending\u2026" : "Send code"
-        )) : /* @__PURE__ */ React2.createElement("form", { onSubmit: handlePhoneVerify, style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ React2.createElement("p", { style: { margin: 0, fontSize: 12, color: "var(--dc-text-muted)", textAlign: "center" } }, "Code sent to ", /* @__PURE__ */ React2.createElement("strong", { style: { color: "var(--dc-text)" } }, phoneVal)), /* @__PURE__ */ React2.createElement(
-          "input",
-          {
-            type: "text",
-            inputMode: "numeric",
-            placeholder: "6-digit code",
-            value: phoneCode,
-            onChange: (e) => setPhoneCode(e.target.value.replace(/\D/g, "").slice(0, 6)),
-            autoFocus: true,
-            required: true,
-            style: {
-              width: "100%",
-              padding: "10px 12px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text)",
-              fontSize: 20,
-              fontFamily: "monospace",
-              letterSpacing: 8,
-              textAlign: "center",
-              outline: "none",
-              boxSizing: "border-box"
-            },
-            onFocus: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onBlur: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          }
-        ), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              setPhoneStep("input");
-              setPhoneCode("");
-              setSocialErr("");
-            },
-            style: {
-              flex: 1,
-              padding: "9px 0",
-              background: "transparent",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text-muted)",
-              fontSize: 13,
-              cursor: "pointer",
-              fontFamily: "inherit"
-            }
-          },
-          "Back"
-        ), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            type: "submit",
-            disabled: socialLoad || phoneCode.length < 6,
-            style: {
-              flex: 2,
-              padding: "9px 0",
-              background: "var(--dc-accent)",
-              color: "var(--dc-accent-text)",
-              border: "none",
-              borderRadius: 10,
-              fontSize: 13,
-              fontWeight: 700,
-              cursor: socialLoad || phoneCode.length < 6 ? "not-allowed" : "pointer",
-              fontFamily: "inherit",
-              opacity: socialLoad || phoneCode.length < 6 ? 0.6 : 1
-            }
-          },
-          socialLoad ? "Verifying\u2026" : "Verify"
-        )))), !passkeyFirst && customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ React2.createElement(React2.Fragment, null, (socialAuthMethods.includes("google") || socialAuthMethods.includes("email")) && /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } }), /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 11, color: "var(--dc-text-muted)", whiteSpace: "nowrap" } }, "or"), /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } })), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: handleCustomAuthClick,
-            disabled: socialLoad,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 10,
-              width: "100%",
-              padding: "11px 16px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontSize: 14,
-              fontWeight: 600,
-              color: "var(--dc-text)",
-              fontFamily: "inherit",
-              transition: "border-color 0.12s, background 0.12s",
-              opacity: socialLoad ? 0.6 : 1
-            },
-            onMouseEnter: (e) => {
-              if (!socialLoad) e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          },
-          socialLoad ? "Connecting\u2026" : customAuthLabel
-        ))), view === "wallets" && /* @__PURE__ */ React2.createElement("div", { style: { overflowY: "auto", flex: 1, padding: "0 12px 20px" } }, filtered.length > 0 ? /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 2 } }, filtered.map((w) => /* @__PURE__ */ React2.createElement(WalletRow, { key: w.id, wallet: w, onClick: () => handleWalletClick(w) }))) : /* @__PURE__ */ React2.createElement("div", { style: { textAlign: "center", padding: "32px 16px", color: "var(--dc-text-muted)", fontSize: 13 } }, q ? `No wallets matching "${q}"` : "No wallets detected")), view === "wallets" && /* @__PURE__ */ React2.createElement("div", { style: { padding: "10px 20px 14px", borderTop: "1px solid var(--dc-border)", textAlign: "center", fontSize: 11, color: "var(--dc-text-muted)" } }, "Don't see your wallet? Make sure it's installed and unlocked"))
-      )
-    )
-  );
-  return createPortal(modal, document.body);
+function ChevronRightIcon({ size = 16 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("path", { d: "m9 6 6 6-6 6" }));
 }
 
 // src/ui/SocialWalletModal.tsx
-import React3, { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-function injectTokens2(theme) {
+import React2, { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+function injectTokens(theme) {
   const resolved = theme === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
   let el = document.getElementById("decane-tokens");
   if (!el) {
@@ -6862,8 +5838,8 @@ function downloadJson(data, filename) {
   URL.revokeObjectURL(url);
 }
 function useBalance(kind, address, chain, rpcUrls) {
-  const [state, setState] = useState2({ loading: false, value: null, symbol: kind === "evm" ? "ETH" : "SOL" });
-  useEffect2(() => {
+  const [state, setState] = useState({ loading: false, value: null, symbol: kind === "evm" ? "ETH" : "SOL" });
+  useEffect(() => {
     if (!address || !chain) return;
     let cancelled = false;
     setState((s) => ({ ...s, loading: true }));
@@ -6967,6 +5943,33 @@ var MODAL_CSS = `
 .dcm-row { display: flex; gap: 8px; width: 100%; }
 .dcm-row > .dcm-primary { flex: 1; height: 44px; border-radius: 12px; }
 .dcm-actions { width: 100%; display: flex; gap: 8px; }
+.dcm-or { width: 100%; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dc-text-muted); }
+.dcm-or::before, .dcm-or::after { content: ""; flex: 1; height: 1px; background: var(--dc-border); }
+.dcm-method .dcm-trail { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--dc-text-muted); font-size: 12.5px; font-weight: 500; }
+.dcm-stack { display: inline-flex; }
+.dcm-stack img, .dcm-stack span { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--dc-surface); margin-left: -7px; object-fit: cover; background: var(--dc-surface-hover); }
+.dcm-stack > :first-child { margin-left: 0; }
+.dcm-method:hover:not(:disabled) .dcm-stack img { border-color: var(--dc-surface-hover); }
+.dcm-wallet-img { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
+.dcm-list { width: 100%; display: grid; gap: 8px; max-height: min(380px, 50vh); overflow-y: auto; padding: 2px; margin: -2px; }
+.dcm-pills { width: 100%; display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--dc-surface); border: 1px solid var(--dc-border); }
+.dcm-pills button { flex: 1; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--dc-text-secondary);
+  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
+.dcm-pills button:hover { color: var(--dc-text); }
+.dcm-pills button[aria-pressed="true"] { background: var(--dc-bg); color: var(--dc-text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
+.dcm-search { position: relative; width: 100%; }
+.dcm-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--dc-text-muted); pointer-events: none; }
+.dcm-search .dcm-field { padding: 10px 14px 10px 38px; font-size: 14px; }
+.dcm-empty { width: 100%; padding: 28px 12px; font-size: 13.5px; color: var(--dc-text-muted); }
+.dcm-option { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--dc-border);
+  background: var(--dc-surface); color: var(--dc-text); font-family: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
+.dcm-option:hover { border-color: var(--dc-text-muted); background: var(--dc-surface-hover); }
+.dcm-option:focus-visible, .dcm-pills button:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 2px; }
+.dcm-option-icons { width: 64px; flex-shrink: 0; display: flex; }
+.dcm-option-text { flex: 1; min-width: 0; }
+.dcm-option b { display: block; font-size: 14.5px; font-weight: 500; }
+.dcm-option small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--dc-text-secondary); }
+.dcm-option > svg { color: var(--dc-text-muted); }
 .dcm-actions > * { flex: 1; }
 `;
 function injectModalCss() {
@@ -6980,14 +5983,14 @@ function shortAddress(a, head = 6, tail = 4) {
   return a.length > head + tail + 1 ? `${a.slice(0, head)}\u2026${a.slice(-tail)}` : a;
 }
 function CopyButton({ value, label }) {
-  const [copied, setCopied] = useState2(false);
+  const [copied, setCopied] = useState(false);
   async function copy() {
     await navigator.clipboard.writeText(value).catch(() => {
     });
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   }
-  return /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-copy", onClick: copy, "aria-label": copied ? "Copied" : `Copy ${label} address`, title: copied ? "Copied" : "Copy address" }, copied ? /* @__PURE__ */ React3.createElement(CheckIcon, null) : /* @__PURE__ */ React3.createElement(CopyIcon, null));
+  return /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-copy", onClick: copy, "aria-label": copied ? "Copied" : `Copy ${label} address`, title: copied ? "Copied" : "Copy address" }, copied ? /* @__PURE__ */ React2.createElement(CheckIcon, null) : /* @__PURE__ */ React2.createElement(CopyIcon, null));
 }
 function AddressRow({
   label,
@@ -6997,10 +6000,10 @@ function AddressRow({
   rpcUrls
 }) {
   const balance = useBalance(kind, address, chain, rpcUrls);
-  return /* @__PURE__ */ React3.createElement("div", { className: "dcm-address" }, /* @__PURE__ */ React3.createElement("div", { className: "dcm-address-main" }, /* @__PURE__ */ React3.createElement("span", null, label), /* @__PURE__ */ React3.createElement("code", { title: address }, shortAddress(address, 8, 6))), /* @__PURE__ */ React3.createElement("span", { className: "dcm-balance" }, balance.loading ? "\u2026" : `${formatBalanceDisplay(balance.value)} ${balance.symbol}`), /* @__PURE__ */ React3.createElement(CopyButton, { value: address, label }));
+  return /* @__PURE__ */ React2.createElement("div", { className: "dcm-address" }, /* @__PURE__ */ React2.createElement("div", { className: "dcm-address-main" }, /* @__PURE__ */ React2.createElement("span", null, label), /* @__PURE__ */ React2.createElement("code", { title: address }, shortAddress(address, 8, 6))), /* @__PURE__ */ React2.createElement("span", { className: "dcm-balance" }, balance.loading ? "\u2026" : `${formatBalanceDisplay(balance.value)} ${balance.symbol}`), /* @__PURE__ */ React2.createElement(CopyButton, { value: address, label }));
 }
 function ProtectedBy() {
-  return /* @__PURE__ */ React3.createElement("div", { className: "dcm-protected" }, /* @__PURE__ */ React3.createElement("span", null, "Protected by"), /* @__PURE__ */ React3.createElement(DecaneMark, { size: 14, muted: true }), /* @__PURE__ */ React3.createElement(DecaneWordmark, { size: 12, muted: true }));
+  return /* @__PURE__ */ React2.createElement("div", { className: "dcm-protected" }, /* @__PURE__ */ React2.createElement("span", null, "Protected by"), /* @__PURE__ */ React2.createElement(DecaneMark, { size: 14, muted: true }), /* @__PURE__ */ React2.createElement(DecaneWordmark, { size: 12, muted: true }));
 }
 function SignInView({
   onGoogleSignIn,
@@ -7016,23 +6019,24 @@ function SignInView({
   onCustomAuthSignIn,
   canUsePasskey,
   passkeyAddress,
-  onPasskeySignIn
+  onPasskeySignIn,
+  extra
 }) {
-  const [googleLoading, setGoogleLoading] = useState2(false);
-  const [kingsChatLoading, setKingsChatLoading] = useState2(false);
-  const [xLoading, setXLoading] = useState2(false);
-  const [email, setEmail] = useState2("");
-  const [code, setCode] = useState2("");
-  const [emailSent, setEmailSent] = useState2(false);
-  const [emailLoading, setEmailLoading] = useState2(false);
-  const [phone, setPhone] = useState2("");
-  const [phoneCode, setPhoneCode] = useState2("");
-  const [phoneSent, setPhoneSent] = useState2(false);
-  const [phoneLoading, setPhoneLoading] = useState2(false);
-  const [customLoading, setCustomLoading] = useState2(false);
-  const [passkeyLoading, setPasskeyLoading] = useState2(false);
-  const [showOtherMethods, setShowOtherMethods] = useState2(false);
-  const [error, setError] = useState2("");
+  const [googleLoading, setGoogleLoading] = useState(false);
+  const [kingsChatLoading, setKingsChatLoading] = useState(false);
+  const [xLoading, setXLoading] = useState(false);
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [emailSent, setEmailSent] = useState(false);
+  const [emailLoading, setEmailLoading] = useState(false);
+  const [phone, setPhone] = useState("");
+  const [phoneCode, setPhoneCode] = useState("");
+  const [phoneSent, setPhoneSent] = useState(false);
+  const [phoneLoading, setPhoneLoading] = useState(false);
+  const [customLoading, setCustomLoading] = useState(false);
+  const [passkeyLoading, setPasskeyLoading] = useState(false);
+  const [showOtherMethods, setShowOtherMethods] = useState(false);
+  const [error, setError] = useState("");
   const passkeyFirst = !!canUsePasskey && !!onPasskeySignIn && !showOtherMethods;
   const busy = googleLoading || kingsChatLoading || xLoading || customLoading || emailLoading || phoneLoading;
   async function handlePasskey() {
@@ -7154,19 +6158,19 @@ function SignInView({
     setPhoneCode("");
     setError("");
   }
-  const errorLine = error ? /* @__PURE__ */ React3.createElement("p", { className: "dcm-error", role: "alert" }, error) : null;
+  const errorLine = error ? /* @__PURE__ */ React2.createElement("p", { className: "dcm-error", role: "alert" }, error) : null;
   if (passkeyFirst) {
-    return /* @__PURE__ */ React3.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React3.createElement("div", { className: "dcm-badge" }, /* @__PURE__ */ React3.createElement(KeyIcon, { size: 22 })), /* @__PURE__ */ React3.createElement("h2", { className: "dcm-title" }, "Welcome back"), /* @__PURE__ */ React3.createElement("p", { className: "dcm-sub" }, passkeyAddress ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, "Unlock ", /* @__PURE__ */ React3.createElement("b", null, shortAddress(passkeyAddress)), " with your passkey.") : "Unlock your wallet with your passkey."), /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-primary", onClick: handlePasskey, disabled: passkeyLoading }, passkeyLoading ? "Waiting for passkey\u2026" : "Continue with passkey"), errorLine, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-link", onClick: () => {
+    return /* @__PURE__ */ React2.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React2.createElement("div", { className: "dcm-badge" }, /* @__PURE__ */ React2.createElement(KeyIcon, { size: 22 })), /* @__PURE__ */ React2.createElement("h2", { className: "dcm-title" }, "Welcome back"), /* @__PURE__ */ React2.createElement("p", { className: "dcm-sub" }, passkeyAddress ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, "Unlock ", /* @__PURE__ */ React2.createElement("b", null, shortAddress(passkeyAddress)), " with your passkey.") : "Unlock your wallet with your passkey."), /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-primary", onClick: handlePasskey, disabled: passkeyLoading }, passkeyLoading ? "Waiting for passkey\u2026" : "Continue with passkey"), errorLine, /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-link", onClick: () => {
       setError("");
       setShowOtherMethods(true);
-    } }, "Use another sign-in method"), /* @__PURE__ */ React3.createElement(ProtectedBy, null));
+    } }, "Use another sign-in method"), /* @__PURE__ */ React2.createElement(ProtectedBy, null));
   }
   if (emailSent || phoneSent) {
     const isEmail = emailSent;
     const value = isEmail ? code : phoneCode;
     const setValue = isEmail ? setCode : setPhoneCode;
     const loading = isEmail ? emailLoading : phoneLoading;
-    return /* @__PURE__ */ React3.createElement("form", { className: "dcm-body", onSubmit: isEmail ? handleEmailVerify : handlePhoneVerify }, /* @__PURE__ */ React3.createElement("div", { className: "dcm-badge" }, isEmail ? /* @__PURE__ */ React3.createElement(MailIcon, { size: 22 }) : /* @__PURE__ */ React3.createElement(PhoneIcon, { size: 22 })), /* @__PURE__ */ React3.createElement("h2", { className: "dcm-title" }, "Enter your code"), /* @__PURE__ */ React3.createElement("p", { className: "dcm-sub" }, "We sent a 6-digit code to ", /* @__PURE__ */ React3.createElement("b", null, isEmail ? email.trim() : phone.trim())), /* @__PURE__ */ React3.createElement("div", { className: "dcm-form" }, /* @__PURE__ */ React3.createElement(
+    return /* @__PURE__ */ React2.createElement("form", { className: "dcm-body", onSubmit: isEmail ? handleEmailVerify : handlePhoneVerify }, /* @__PURE__ */ React2.createElement("div", { className: "dcm-badge" }, isEmail ? /* @__PURE__ */ React2.createElement(MailIcon, { size: 22 }) : /* @__PURE__ */ React2.createElement(PhoneIcon, { size: 22 })), /* @__PURE__ */ React2.createElement("h2", { className: "dcm-title" }, "Enter your code"), /* @__PURE__ */ React2.createElement("p", { className: "dcm-sub" }, "We sent a 6-digit code to ", /* @__PURE__ */ React2.createElement("b", null, isEmail ? email.trim() : phone.trim())), /* @__PURE__ */ React2.createElement("div", { className: "dcm-form" }, /* @__PURE__ */ React2.createElement(
       "input",
       {
         className: "dcm-field dcm-code",
@@ -7179,10 +6183,10 @@ function SignInView({
         autoComplete: "one-time-code",
         onChange: (e) => setValue(e.target.value.replace(/\D/g, ""))
       }
-    ), /* @__PURE__ */ React3.createElement("button", { type: "submit", className: "dcm-primary", disabled: loading || value.length < 6 }, loading ? "Verifying\u2026" : "Continue")), errorLine, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-link", onClick: backToMethods }, "Use a different method"), /* @__PURE__ */ React3.createElement(ProtectedBy, null));
+    ), /* @__PURE__ */ React2.createElement("button", { type: "submit", className: "dcm-primary", disabled: loading || value.length < 6 }, loading ? "Verifying\u2026" : "Continue")), errorLine, /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-link", onClick: backToMethods }, "Use a different method"), /* @__PURE__ */ React2.createElement(ProtectedBy, null));
   }
   const showPhone = authMethods.includes("phone") && !!onPhoneStart && !!onPhoneVerify;
-  return /* @__PURE__ */ React3.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React3.createElement(DecaneMark, { size: 44 }), /* @__PURE__ */ React3.createElement("h2", { className: "dcm-title" }, resumeHint ? "Welcome back" : "Log in or sign up"), resumeHint && /* @__PURE__ */ React3.createElement("p", { className: "dcm-sub" }, "Sign in again to resume ", resumeHint, "."), /* @__PURE__ */ React3.createElement("div", { className: "dcm-methods" }, authMethods.includes("google") && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-method", onClick: handleGoogle, disabled: busy }, /* @__PURE__ */ React3.createElement(GoogleMark, { size: 18 }), /* @__PURE__ */ React3.createElement("span", null, googleLoading ? "Redirecting to Google\u2026" : "Google")), authMethods.includes("email") && /* @__PURE__ */ React3.createElement("form", { className: "dcm-method dcm-method-input", onSubmit: handleEmailStart }, /* @__PURE__ */ React3.createElement(MailIcon, { size: 18 }), /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React2.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React2.createElement(DecaneMark, { size: 44 }), /* @__PURE__ */ React2.createElement("h2", { className: "dcm-title" }, resumeHint ? "Welcome back" : "Log in or sign up"), resumeHint && /* @__PURE__ */ React2.createElement("p", { className: "dcm-sub" }, "Sign in again to resume ", resumeHint, "."), /* @__PURE__ */ React2.createElement("div", { className: "dcm-methods" }, authMethods.includes("google") && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-method", onClick: handleGoogle, disabled: busy }, /* @__PURE__ */ React2.createElement(GoogleMark, { size: 18 }), /* @__PURE__ */ React2.createElement("span", null, googleLoading ? "Redirecting to Google\u2026" : "Google")), authMethods.includes("email") && /* @__PURE__ */ React2.createElement("form", { className: "dcm-method dcm-method-input", onSubmit: handleEmailStart }, /* @__PURE__ */ React2.createElement(MailIcon, { size: 18 }), /* @__PURE__ */ React2.createElement(
     "input",
     {
       type: "email",
@@ -7193,7 +6197,7 @@ function SignInView({
       value: email,
       onChange: (e) => setEmail(e.target.value)
     }
-  ), /* @__PURE__ */ React3.createElement("button", { type: "submit", className: "dcm-submit", disabled: busy || !email.trim() }, emailLoading ? "Sending\u2026" : "Submit")), showPhone && /* @__PURE__ */ React3.createElement("form", { className: "dcm-method dcm-method-input", onSubmit: handlePhoneStart }, /* @__PURE__ */ React3.createElement(PhoneIcon, { size: 18 }), /* @__PURE__ */ React3.createElement(
+  ), /* @__PURE__ */ React2.createElement("button", { type: "submit", className: "dcm-submit", disabled: busy || !email.trim() }, emailLoading ? "Sending\u2026" : "Submit")), showPhone && /* @__PURE__ */ React2.createElement("form", { className: "dcm-method dcm-method-input", onSubmit: handlePhoneStart }, /* @__PURE__ */ React2.createElement(PhoneIcon, { size: 18 }), /* @__PURE__ */ React2.createElement(
     "input",
     {
       type: "tel",
@@ -7204,24 +6208,24 @@ function SignInView({
       value: phone,
       onChange: (e) => setPhone(e.target.value)
     }
-  ), /* @__PURE__ */ React3.createElement("button", { type: "submit", className: "dcm-submit", disabled: busy || !phone.trim() }, phoneLoading ? "Sending\u2026" : "Submit")), authMethods.includes("x") && onXSignIn && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-method", onClick: handleX, disabled: busy }, /* @__PURE__ */ React3.createElement(XLogo, { size: 16 }), /* @__PURE__ */ React3.createElement("span", null, xLoading ? "Redirecting to X\u2026" : "X")), authMethods.includes("kingschat") && onKingsChatSignIn && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-method", onClick: handleKingsChat, disabled: busy }, /* @__PURE__ */ React3.createElement(ChatIcon, { size: 18 }), /* @__PURE__ */ React3.createElement("span", null, kingsChatLoading ? "Waiting for KingsChat\u2026" : "KingsChat")), customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-method", onClick: handleCustomAuth, disabled: busy }, /* @__PURE__ */ React3.createElement(UserIcon, { size: 18 }), /* @__PURE__ */ React3.createElement("span", null, customLoading ? "Connecting\u2026" : customAuthLabel))), errorLine, canUsePasskey && onPasskeySignIn && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-link", onClick: () => {
+  ), /* @__PURE__ */ React2.createElement("button", { type: "submit", className: "dcm-submit", disabled: busy || !phone.trim() }, phoneLoading ? "Sending\u2026" : "Submit")), authMethods.includes("x") && onXSignIn && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-method", onClick: handleX, disabled: busy }, /* @__PURE__ */ React2.createElement(XLogo, { size: 16 }), /* @__PURE__ */ React2.createElement("span", null, xLoading ? "Redirecting to X\u2026" : "X")), authMethods.includes("kingschat") && onKingsChatSignIn && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-method", onClick: handleKingsChat, disabled: busy }, /* @__PURE__ */ React2.createElement(ChatIcon, { size: 18 }), /* @__PURE__ */ React2.createElement("span", null, kingsChatLoading ? "Waiting for KingsChat\u2026" : "KingsChat")), customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-method", onClick: handleCustomAuth, disabled: busy }, /* @__PURE__ */ React2.createElement(UserIcon, { size: 18 }), /* @__PURE__ */ React2.createElement("span", null, customLoading ? "Connecting\u2026" : customAuthLabel))), extra, errorLine, canUsePasskey && onPasskeySignIn && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-link", onClick: () => {
     setError("");
     setShowOtherMethods(false);
-  } }, "Use my passkey instead"), /* @__PURE__ */ React3.createElement(ProtectedBy, null));
+  } }, "Use my passkey instead"), /* @__PURE__ */ React2.createElement(ProtectedBy, null));
 }
 function RecoverySection({
   addresses,
   onRotateShares,
   onExportPortableBackup
 }) {
-  const [expanded, setExpanded] = useState2(false);
-  const [mode, setMode] = useState2(null);
-  const [password, setPassword] = useState2("");
-  const [passwordHint, setPasswordHint] = useState2("");
-  const [confirmed, setConfirmed] = useState2(false);
-  const [busy, setBusy] = useState2(false);
-  const [result, setResult] = useState2(null);
-  const [error, setError] = useState2("");
+  const [expanded, setExpanded] = useState(false);
+  const [mode, setMode] = useState(null);
+  const [password, setPassword] = useState("");
+  const [passwordHint, setPasswordHint] = useState("");
+  const [confirmed, setConfirmed] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState("");
   function reset() {
     setMode(null);
     setPassword("");
@@ -7258,7 +6262,7 @@ function RecoverySection({
       setBusy(false);
     }
   }
-  const passwordFields = /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+  const passwordFields = /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
     "input",
     {
       className: "dcm-field",
@@ -7269,7 +6273,7 @@ function RecoverySection({
       value: password,
       onChange: (e) => setPassword(e.target.value)
     }
-  ), /* @__PURE__ */ React3.createElement(
+  ), /* @__PURE__ */ React2.createElement(
     "input",
     {
       className: "dcm-field",
@@ -7278,14 +6282,14 @@ function RecoverySection({
       value: passwordHint,
       onChange: (e) => setPasswordHint(e.target.value)
     }
-  ), error && /* @__PURE__ */ React3.createElement("p", { className: "dcm-error", role: "alert" }, error));
-  return /* @__PURE__ */ React3.createElement("div", { className: "dcm-panel" }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-panel-head", onClick: () => setExpanded((v) => !v), "aria-expanded": expanded }, /* @__PURE__ */ React3.createElement("span", null, "Recovery file"), /* @__PURE__ */ React3.createElement(ChevronIcon, { open: expanded })), expanded && /* @__PURE__ */ React3.createElement("div", { className: "dcm-panel-body" }, !mode && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("p", { className: "dcm-note" }, "Save a recovery file so you can restore this wallet on a new device."), /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-primary", style: { height: 44, borderRadius: 12 }, onClick: () => {
+  ), error && /* @__PURE__ */ React2.createElement("p", { className: "dcm-error", role: "alert" }, error));
+  return /* @__PURE__ */ React2.createElement("div", { className: "dcm-panel" }, /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-panel-head", onClick: () => setExpanded((v) => !v), "aria-expanded": expanded }, /* @__PURE__ */ React2.createElement("span", null, "Recovery file"), /* @__PURE__ */ React2.createElement(ChevronIcon, { open: expanded })), expanded && /* @__PURE__ */ React2.createElement("div", { className: "dcm-panel-body" }, !mode && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("p", { className: "dcm-note" }, "Save a recovery file so you can restore this wallet on a new device."), /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-primary", style: { height: 44, borderRadius: 12 }, onClick: () => {
     reset();
     setMode("share");
-  } }, "Download recovery-share file"), /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-ghost", onClick: () => {
+  } }, "Download recovery-share file"), /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-ghost", onClick: () => {
     reset();
     setMode("portable");
-  } }, "Download full recovery file")), mode === "share" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("p", { className: "dcm-note" }, "One share. It is useless on its own, so a password manager or cloud drive is a fine place for it. A new file replaces any previous recovery-share file."), passwordFields, /* @__PURE__ */ React3.createElement("div", { className: "dcm-row" }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-primary", onClick: handleGenerate, disabled: busy }, busy ? "Preparing\u2026" : "Download"), /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-ghost", onClick: reset }, "Cancel"))), mode === "portable" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { className: "dcm-warn" }, /* @__PURE__ */ React3.createElement("strong", null, "This file controls your wallet"), "It holds two shares, so the file plus its password is full control. Keep it offline, not in a cloud drive. It also replaces your current recovery-share file."), /* @__PURE__ */ React3.createElement("label", { className: "dcm-check" }, /* @__PURE__ */ React3.createElement("input", { type: "checkbox", checked: confirmed, onChange: (e) => setConfirmed(e.target.checked) }), "I understand anyone with this file and password controls the wallet"), passwordFields, /* @__PURE__ */ React3.createElement("div", { className: "dcm-row" }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-primary", onClick: handleGenerate, disabled: busy || !confirmed }, busy ? "Preparing\u2026" : "Download"), /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-ghost", onClick: reset }, "Cancel"))), result && /* @__PURE__ */ React3.createElement("p", { className: "dcm-note" }, result.kind === "share" ? "Recovery-share file" : "Full recovery file", " downloaded. The share set is now version ", result.version, ", and any earlier recovery file no longer works.")));
+  } }, "Download full recovery file")), mode === "share" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("p", { className: "dcm-note" }, "One share. It is useless on its own, so a password manager or cloud drive is a fine place for it. A new file replaces any previous recovery-share file."), passwordFields, /* @__PURE__ */ React2.createElement("div", { className: "dcm-row" }, /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-primary", onClick: handleGenerate, disabled: busy }, busy ? "Preparing\u2026" : "Download"), /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-ghost", onClick: reset }, "Cancel"))), mode === "portable" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { className: "dcm-warn" }, /* @__PURE__ */ React2.createElement("strong", null, "This file controls your wallet"), "It holds two shares, so the file plus its password is full control. Keep it offline, not in a cloud drive. It also replaces your current recovery-share file."), /* @__PURE__ */ React2.createElement("label", { className: "dcm-check" }, /* @__PURE__ */ React2.createElement("input", { type: "checkbox", checked: confirmed, onChange: (e) => setConfirmed(e.target.checked) }), "I understand anyone with this file and password controls the wallet"), passwordFields, /* @__PURE__ */ React2.createElement("div", { className: "dcm-row" }, /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-primary", onClick: handleGenerate, disabled: busy || !confirmed }, busy ? "Preparing\u2026" : "Download"), /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-ghost", onClick: reset }, "Cancel"))), result && /* @__PURE__ */ React2.createElement("p", { className: "dcm-note" }, result.kind === "share" ? "Recovery-share file" : "Full recovery file", " downloaded. The share set is now version ", result.version, ", and any earlier recovery file no longer works.")));
 }
 function SocialWalletModal({
   open,
@@ -7312,21 +6316,21 @@ function SocialWalletModal({
   rpcUrls,
   chains
 }) {
-  const [timer, setTimer] = useState2("");
-  const [unlocking, setUnlocking] = useState2(false);
-  const [disconnecting, setDisconnecting] = useState2(false);
-  const [actionError, setActionError] = useState2("");
-  useEffect2(() => {
+  const [timer, setTimer] = useState("");
+  const [unlocking, setUnlocking] = useState(false);
+  const [disconnecting, setDisconnecting] = useState(false);
+  const [actionError, setActionError] = useState("");
+  useEffect(() => {
     if (!open) return;
-    injectTokens2(theme);
+    injectTokens(theme);
     injectModalCss();
     if (theme !== "auto") return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const h = () => injectTokens2("auto");
+    const h = () => injectTokens("auto");
     mq.addEventListener("change", h);
     return () => mq.removeEventListener("change", h);
   }, [open, theme]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!socialAuth.sessionExpiresAt) {
       setTimer("");
       return;
@@ -7335,10 +6339,10 @@ function SocialWalletModal({
     const id = setInterval(() => setTimer(countdown(socialAuth.sessionExpiresAt)), 1e3);
     return () => clearInterval(id);
   }, [socialAuth.sessionExpiresAt]);
-  const handleKey = useCallback2((e) => {
+  const handleKey = useCallback((e) => {
     if (e.key === "Escape") onClose();
   }, [onClose]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!open) return;
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
@@ -7371,7 +6375,7 @@ function SocialWalletModal({
   const solChain = chains?.find((c) => c.startsWith("solana:")) ?? "solana:mainnet";
   const showSignIn = !socialAuth.addresses || socialAuth.needsReconnect;
   const unlocked = socialAuth.isUnlocked;
-  const modal = /* @__PURE__ */ React3.createElement(
+  const modal = /* @__PURE__ */ React2.createElement(
     "div",
     {
       role: "dialog",
@@ -7389,8 +6393,8 @@ function SocialWalletModal({
         WebkitFontSmoothing: "antialiased"
       }
     },
-    /* @__PURE__ */ React3.createElement("div", { className: "dcm-backdrop", onClick: onClose }),
-    /* @__PURE__ */ React3.createElement("div", { className: "dcm-card" }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-icon-btn", style: { right: 14 }, onClick: onClose, "aria-label": "Close" }, /* @__PURE__ */ React3.createElement(CloseIcon, null)), showSignIn ? /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React2.createElement("div", { className: "dcm-backdrop", onClick: onClose }),
+    /* @__PURE__ */ React2.createElement("div", { className: "dcm-card" }, /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-icon-btn", style: { right: 14 }, onClick: onClose, "aria-label": "Close" }, /* @__PURE__ */ React2.createElement(CloseIcon, null)), showSignIn ? /* @__PURE__ */ React2.createElement(
       SignInView,
       {
         onGoogleSignIn,
@@ -7408,22 +6412,238 @@ function SocialWalletModal({
         passkeyAddress,
         onPasskeySignIn
       }
-    ) : /* @__PURE__ */ React3.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React3.createElement(DecaneMark, { size: 44 }), /* @__PURE__ */ React3.createElement("h2", { className: "dcm-title" }, "Your wallet"), /* @__PURE__ */ React3.createElement(
+    ) : /* @__PURE__ */ React2.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React2.createElement(DecaneMark, { size: 44 }), /* @__PURE__ */ React2.createElement("h2", { className: "dcm-title" }, "Your wallet"), /* @__PURE__ */ React2.createElement(
       "span",
       {
         className: "dcm-status",
         style: { color: unlocked ? "#12b76a" : "var(--dc-accent-ink)", marginTop: -8 }
       },
-      /* @__PURE__ */ React3.createElement("i", { style: { background: unlocked ? "#12b76a" : "var(--dc-accent)" } }),
+      /* @__PURE__ */ React2.createElement("i", { style: { background: unlocked ? "#12b76a" : "var(--dc-accent)" } }),
       unlocked ? timer ? `Unlocked, expires in ${timer}` : "Unlocked" : "Locked"
-    ), (socialAuth.addresses?.evm || socialAuth.addresses?.solana) && /* @__PURE__ */ React3.createElement("div", { className: "dcm-addresses" }, socialAuth.addresses?.evm && /* @__PURE__ */ React3.createElement(AddressRow, { label: "Ethereum and EVM", address: socialAuth.addresses.evm, kind: "evm", chain: evmChain, rpcUrls }), socialAuth.addresses?.solana && /* @__PURE__ */ React3.createElement(AddressRow, { label: "Solana", address: socialAuth.addresses.solana, kind: "solana", chain: solChain, rpcUrls })), unlocked && /* @__PURE__ */ React3.createElement(
+    ), (socialAuth.addresses?.evm || socialAuth.addresses?.solana) && /* @__PURE__ */ React2.createElement("div", { className: "dcm-addresses" }, socialAuth.addresses?.evm && /* @__PURE__ */ React2.createElement(AddressRow, { label: "Ethereum and EVM", address: socialAuth.addresses.evm, kind: "evm", chain: evmChain, rpcUrls }), socialAuth.addresses?.solana && /* @__PURE__ */ React2.createElement(AddressRow, { label: "Solana", address: socialAuth.addresses.solana, kind: "solana", chain: solChain, rpcUrls })), unlocked && /* @__PURE__ */ React2.createElement(
       RecoverySection,
       {
         addresses: socialAuth.addresses,
         onRotateShares,
         onExportPortableBackup
       }
-    ), actionError && /* @__PURE__ */ React3.createElement("p", { className: "dcm-error", role: "alert" }, actionError), /* @__PURE__ */ React3.createElement("div", { className: "dcm-actions" }, !unlocked && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-primary", style: { height: 44, borderRadius: 12 }, onClick: handleUnlock, disabled: unlocking }, unlocking ? "Unlocking\u2026" : "Unlock wallet"), /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-ghost", onClick: handleDisconnect, disabled: disconnecting }, disconnecting ? "Signing out\u2026" : "Sign out")), /* @__PURE__ */ React3.createElement(ProtectedBy, null)))
+    ), actionError && /* @__PURE__ */ React2.createElement("p", { className: "dcm-error", role: "alert" }, actionError), /* @__PURE__ */ React2.createElement("div", { className: "dcm-actions" }, !unlocked && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-primary", style: { height: 44, borderRadius: 12 }, onClick: handleUnlock, disabled: unlocking }, unlocking ? "Unlocking\u2026" : "Unlock wallet"), /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-ghost", onClick: handleDisconnect, disabled: disconnecting }, disconnecting ? "Signing out\u2026" : "Sign out")), /* @__PURE__ */ React2.createElement(ProtectedBy, null)))
+  );
+  return createPortal(modal, document.body);
+}
+
+// src/ui/WalletSelector.tsx
+var FONT_URL = "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";
+function injectTokens2(theme) {
+  let resolved;
+  if (theme === "auto") {
+    resolved = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  } else {
+    resolved = theme;
+  }
+  let styleEl = document.getElementById("decane-tokens");
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    styleEl.id = "decane-tokens";
+    document.head.appendChild(styleEl);
+  }
+  styleEl.textContent = `:root { ${CSS_VARS[resolved]} }`;
+}
+function injectFont() {
+  if (document.getElementById("decane-font")) return;
+  const link = document.createElement("link");
+  link.id = "decane-font";
+  link.rel = "stylesheet";
+  link.href = FONT_URL;
+  document.head.appendChild(link);
+}
+function hasSocialMode(mode) {
+  return mode === "all" || mode === "social" || mode === "evm+social" || mode === "solana+social" || mode === "tron+social" || mode === "evm+tron+social";
+}
+var NETWORK_LABEL = {
+  evm: "EVM networks",
+  solana: "Solana",
+  tron: "Tron",
+  bitcoin: "Bitcoin"
+};
+function WalletSelector({
+  provider,
+  open,
+  onClose,
+  onConnect,
+  theme = "auto",
+  networks = "all",
+  mode = "wallets",
+  socialAuthMethods = ["google", "email"],
+  onGoogleSignIn,
+  onKingsChatSignIn,
+  onXSignIn,
+  onEmailStart,
+  onEmailVerify,
+  onPhoneStart,
+  onPhoneVerify,
+  customAuthLabel,
+  onCustomAuthSignIn,
+  canUsePasskey = false,
+  passkeyAddress = null,
+  onPasskeySignIn
+}) {
+  const showSocial = hasSocialMode(mode);
+  const showWallets = mode !== "social";
+  const [view, setView] = useState2(showSocial ? "social" : "wallets");
+  const [search, setSearch] = useState2("");
+  const [filter, setFilter] = useState2("all");
+  const [pendingWallet, setPendingWallet] = useState2(null);
+  const [session, setSession] = useState2(0);
+  useEffect2(() => {
+    if (!open) return;
+    injectFont();
+    injectTokens2(theme);
+    injectModalCss();
+    if (theme !== "auto") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => injectTokens2("auto");
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [open, theme]);
+  useEffect2(() => {
+    if (!open) {
+      setSearch("");
+      setFilter("all");
+      setPendingWallet(null);
+      setView(showSocial ? "social" : "wallets");
+      setSession((n) => n + 1);
+      return;
+    }
+    return () => {
+      document.getElementById("decane-tokens")?.remove();
+    };
+  }, [open, showWallets, showSocial]);
+  const handleKey = useCallback2(
+    (e) => {
+      if (e.key !== "Escape") return;
+      if (pendingWallet) setPendingWallet(null);
+      else onClose();
+    },
+    [onClose, pendingWallet]
+  );
+  useEffect2(() => {
+    if (!open) return;
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, handleKey]);
+  if (!open) return null;
+  const q = search.trim().toLowerCase();
+  const networkWallets = provider.wallets.filter((w) => {
+    const cs = w.chainSupport;
+    if (networks === "evm") return cs.includes("evm");
+    if (networks === "solana") return cs.includes("solana");
+    if (networks === "tron") return cs.includes("tron");
+    if (networks === "bitcoin") return cs.includes("bitcoin");
+    return true;
+  });
+  const baseWallets = filter === "all" ? networkWallets : networkWallets.filter((w) => w.chainSupport.includes(filter));
+  const filtered = q ? baseWallets.filter((w) => w.name.toLowerCase().includes(q)) : baseWallets;
+  const filters = [
+    { id: "all", label: "All" },
+    { id: "evm", label: "EVM" },
+    { id: "solana", label: "Solana" },
+    ...provider.tronWallets?.length ? [{ id: "tron", label: "Tron" }] : [],
+    ...provider.bitcoinWallets?.length ? [{ id: "bitcoin", label: "Bitcoin" }] : []
+  ];
+  function handleWalletClick(wallet) {
+    const cs = wallet.chainSupport;
+    const isMulti = cs.length >= 2;
+    if (isMulti && networks === "all") {
+      setPendingWallet(wallet);
+    } else {
+      const preference = networks === "evm" ? "evm" : networks === "solana" ? "solana" : networks === "tron" ? "tron" : networks === "bitcoin" ? "bitcoin" : void 0;
+      onConnect(wallet, preference);
+      onClose();
+    }
+  }
+  function handleChainChoice(preference) {
+    if (!pendingWallet) return;
+    onConnect(pendingWallet, preference);
+    onClose();
+  }
+  const signInMethods = socialAuthMethods.filter(
+    (m) => m === "google" ? !!onGoogleSignIn : m === "email" ? !!onEmailStart && !!onEmailVerify : true
+  );
+  const noop = async () => {
+  };
+  const noopStart = async () => ({ codeRequired: true });
+  const walletEntry = showWallets ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { className: "dcm-or" }, "or"), /* @__PURE__ */ React3.createElement("div", { className: "dcm-methods", style: { marginTop: 0 } }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-method", onClick: () => setView("wallets") }, /* @__PURE__ */ React3.createElement(WalletLineIcon, { size: 18 }), /* @__PURE__ */ React3.createElement("span", null, "Continue with a wallet"), /* @__PURE__ */ React3.createElement("span", { className: "dcm-trail" }, networkWallets.length > 0 && /* @__PURE__ */ React3.createElement("span", { className: "dcm-stack", "aria-label": `${networkWallets.length} detected` }, networkWallets.slice(0, 3).map(
+    (w) => w.icon ? /* @__PURE__ */ React3.createElement("img", { key: w.id, src: w.icon, alt: "" }) : /* @__PURE__ */ React3.createElement("span", { key: w.id })
+  )), /* @__PURE__ */ React3.createElement(ChevronRightIcon, null))))) : null;
+  const closeButton = /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-icon-btn", style: { right: 14 }, onClick: onClose, "aria-label": "Close" }, /* @__PURE__ */ React3.createElement(CloseIcon, null));
+  let body;
+  if (pendingWallet) {
+    const support = pendingWallet.chainSupport;
+    body = /* @__PURE__ */ React3.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-icon-btn", style: { left: 14 }, onClick: () => setPendingWallet(null), "aria-label": "Back" }, /* @__PURE__ */ React3.createElement(ArrowLeftIcon, null)), closeButton, /* @__PURE__ */ React3.createElement(WalletIcon, { src: pendingWallet.icon || void 0, name: pendingWallet.name, size: 52 }), /* @__PURE__ */ React3.createElement("h2", { className: "dcm-title" }, "Choose networks"), /* @__PURE__ */ React3.createElement("p", { className: "dcm-sub" }, pendingWallet.name, " works on more than one network. Pick what to connect."), /* @__PURE__ */ React3.createElement("div", { className: "dcm-methods" }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-option", onClick: () => handleChainChoice(void 0) }, /* @__PURE__ */ React3.createElement("span", { className: "dcm-option-icons" }, /* @__PURE__ */ React3.createElement(ChainIconStack, { support, size: 20 })), /* @__PURE__ */ React3.createElement("span", { className: "dcm-option-text" }, /* @__PURE__ */ React3.createElement("b", null, "All networks"), /* @__PURE__ */ React3.createElement("small", null, "Every address this wallet has")), /* @__PURE__ */ React3.createElement(ChevronRightIcon, null)), support.map((c) => /* @__PURE__ */ React3.createElement("button", { key: c, type: "button", className: "dcm-option", onClick: () => handleChainChoice(c) }, /* @__PURE__ */ React3.createElement("span", { className: "dcm-option-icons" }, /* @__PURE__ */ React3.createElement(ChainIconStack, { support: [c], size: 20 })), /* @__PURE__ */ React3.createElement("span", { className: "dcm-option-text" }, /* @__PURE__ */ React3.createElement("b", null, NETWORK_LABEL[c] ?? c), /* @__PURE__ */ React3.createElement("small", null, "Only your ", c === "evm" ? "Ethereum-compatible" : NETWORK_LABEL[c] ?? c, " address")), /* @__PURE__ */ React3.createElement(ChevronRightIcon, null)))), /* @__PURE__ */ React3.createElement(ProtectedBy, null));
+  } else if (view === "wallets") {
+    body = /* @__PURE__ */ React3.createElement("div", { className: "dcm-body" }, showSocial && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-icon-btn", style: { left: 14 }, onClick: () => setView("social"), "aria-label": "Back to sign-in" }, /* @__PURE__ */ React3.createElement(ArrowLeftIcon, null)), closeButton, /* @__PURE__ */ React3.createElement(DecaneMark, { size: 44 }), /* @__PURE__ */ React3.createElement("h2", { className: "dcm-title" }, "Connect a wallet"), /* @__PURE__ */ React3.createElement("p", { className: "dcm-sub" }, networkWallets.length ? `${networkWallets.length} wallet${networkWallets.length === 1 ? "" : "s"} found in this browser` : "No wallets found in this browser"), networks === "all" && networkWallets.length > 0 && filters.length > 1 && /* @__PURE__ */ React3.createElement("div", { className: "dcm-pills", role: "group", "aria-label": "Filter by network" }, filters.map((f) => /* @__PURE__ */ React3.createElement("button", { key: f.id, type: "button", "aria-pressed": filter === f.id, onClick: () => setFilter(f.id) }, f.label))), networkWallets.length > 5 && /* @__PURE__ */ React3.createElement("div", { className: "dcm-search" }, /* @__PURE__ */ React3.createElement(SearchIcon, null), /* @__PURE__ */ React3.createElement(
+      "input",
+      {
+        className: "dcm-field",
+        type: "text",
+        placeholder: "Search wallets",
+        "aria-label": "Search wallets",
+        value: search,
+        onChange: (e) => setSearch(e.target.value)
+      }
+    )), filtered.length > 0 ? /* @__PURE__ */ React3.createElement("div", { className: "dcm-list" }, filtered.map((w) => /* @__PURE__ */ React3.createElement("button", { key: w.id, type: "button", className: "dcm-method", onClick: () => handleWalletClick(w) }, /* @__PURE__ */ React3.createElement(WalletIcon, { src: w.icon || void 0, name: w.name, size: 26 }), /* @__PURE__ */ React3.createElement("span", null, w.name), /* @__PURE__ */ React3.createElement("span", { className: "dcm-trail" }, /* @__PURE__ */ React3.createElement(ChainIconStack, { support: w.chainSupport, size: 16 }), /* @__PURE__ */ React3.createElement(ChevronRightIcon, null))))) : /* @__PURE__ */ React3.createElement("p", { className: "dcm-empty" }, q ? `No wallets match "${search.trim()}".` : networkWallets.length ? "No wallets for this network." : "Install a wallet extension, or unlock the one you have, then reopen this window."), /* @__PURE__ */ React3.createElement(ProtectedBy, null));
+  } else {
+    body = /* @__PURE__ */ React3.createElement(React3.Fragment, null, closeButton, /* @__PURE__ */ React3.createElement(
+      SignInView,
+      {
+        key: session,
+        onGoogleSignIn: onGoogleSignIn ?? noop,
+        onKingsChatSignIn,
+        onXSignIn,
+        onEmailStart: onEmailStart ?? noopStart,
+        onEmailVerify: onEmailVerify ?? noop,
+        onPhoneStart,
+        onPhoneVerify,
+        authMethods: signInMethods,
+        customAuthLabel,
+        onCustomAuthSignIn,
+        canUsePasskey,
+        passkeyAddress,
+        onPasskeySignIn,
+        extra: walletEntry
+      }
+    ));
+  }
+  const modal = /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": pendingWallet ? "Choose networks" : view === "wallets" ? "Connect a wallet" : "Log in or sign up",
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "16px",
+        // Same fallback chain as SocialWalletModal — without it, this modal
+        // drops to the browser default serif whenever the token block hasn't
+        // been injected, while the social modal still lands on system-ui.
+        fontFamily: "var(--dc-font-sans, system-ui, sans-serif)",
+        WebkitFontSmoothing: "antialiased"
+      }
+    },
+    /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        className: "dcm-backdrop",
+        onClick: () => pendingWallet ? setPendingWallet(null) : onClose()
+      }
+    ),
+    /* @__PURE__ */ React3.createElement("div", { className: "dcm-card" }, body)
   );
   return createPortal2(modal, document.body);
 }