@bwalletx/connect 0.5.4 → 0.5.6

package/dist/element.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,19 +17,39 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/define.ts
 var define_exports = {};
 __export(define_exports, {
+  BUTTON_TAG: () => BUTTON_TAG,
+  CONNECTED_KEY: () => CONNECTED_KEY,
   GET_URL: () => GET_URL,
+  MENU_CSS: () => MENU_CSS,
+  PENDING_LABEL: () => PENDING_LABEL,
+  PENDING_LABEL_OTHER: () => PENDING_LABEL_OTHER,
+  PENDING_NOTE: () => PENDING_NOTE,
   SIGNIN_CSS: () => SIGNIN_CSS,
   SIGNIN_TAG: () => SIGNIN_TAG,
   WEB_WALLET_URL: () => WEB_WALLET_URL,
+  _resetBwalletxButtons: () => _resetBwalletxButtons,
   buildAuthorizeUrl: () => buildAuthorizeUrl,
+  defineBwalletxButton: () => defineBwalletxButton,
   defineBwalletxSignin: () => defineBwalletxSignin,
+  dropLegacyConnectedKey: () => dropLegacyConnectedKey,
+  getUrlFor: () => getUrlFor,
+  handleLabel: () => handleLabel,
   markSvg: () => markSvg,
-  signinText: () => signinText
+  signinText: () => signinText,
+  stateFor: () => stateFor
 });
 module.exports = __toCommonJS(define_exports);
 
@@ -56,21 +78,16 @@ function discoverBwalletX(ms = DEFAULT_DISCOVER_MS) {
         finish({ wallet: d.wallet, method: rdns === RDNS_EXTENSION ? "extension" : "in-app", rdns });
       }
     };
-    const cwiNow = () => {
-      const cwi = window.CWI;
-      if (cwi) finish({ wallet: cwi, method: "in-app", rdns: null });
-      return !!cwi;
-    };
     window.addEventListener("brc100:announceWallet", onAnnounce);
     window.dispatchEvent(new Event("brc100:requestWallet"));
-    if (done || cwiNow()) return;
+    if (done) return;
     if (isFramed()) {
       void probeXdm(Math.max(ms, 1200)).then((w) => finish(w ? { wallet: w, method: "in-app", rdns: null } : null));
       return;
     }
     timer = setTimeout(() => {
       timer = void 0;
-      if (!cwiNow()) finish(null);
+      finish(null);
     }, ms);
   });
 }
@@ -135,13 +152,16 @@ function prewarmBwalletX() {
     });
   });
 }
-function bindPrewarm(el) {
+function bindPrewarm(el2) {
   const on = () => prewarmBwalletX();
   const evs = ["pointerenter", "focus", "touchstart"];
-  for (const e of evs) el.addEventListener(e, on, { passive: true });
-  return () => evs.forEach((e) => el.removeEventListener(e, on));
+  for (const e of evs) el2.addEventListener(e, on, { passive: true });
+  return () => evs.forEach((e) => el2.removeEventListener(e, on));
 }
 
+// src/wallets.ts
+var import_sdk4 = require("@bsv/sdk");
+
 // src/pair.ts
 var import_sdk3 = require("@bsv/sdk");
 
@@ -519,6 +539,11 @@ async function restorePairing(opts = {}) {
   sealer.restore({ sent: p.sent, lastSeen: p.lastSeen });
   return new Link(p, sealer, storage, key, opts.socket ?? defaultSocket(), opts.callTimeoutMs ?? 12e4).wallet();
 }
+async function clearPairing(opts = {}) {
+  const storage = opts.storage === void 0 ? defaultStorage() : opts.storage ?? memoryStorage();
+  await Promise.resolve(storage.removeItem(opts.storageKey ?? DEFAULT_KEY)).catch(() => {
+  });
+}
 
 // src/signin.ts
 var LOGIN_PROTOCOL = [2, "bwallet sign in"];
@@ -552,27 +577,68 @@ async function connectBwalletX(opts = {}) {
   status("pairing");
   return { wallet: await pairBwalletX(opts.pairing), method: "pairing" };
 }
+async function waitIfLocked(wallet) {
+  let ok = false;
+  try {
+    ok = !!(await wallet.isAuthenticated({}))?.authenticated;
+  } catch {
+  }
+  if (!ok) await Promise.resolve().then(() => wallet.waitForAuthentication({})).catch(() => {
+  });
+}
+function challengeWantsIdentityKey(e) {
+  const msg = e instanceof Error ? e.message : String(e ?? "");
+  return /identityKey/i.test(msg);
+}
 async function signInWithBwalletX(opts) {
   const { wallet, method } = await connectBwalletX(opts);
-  if (method !== "pairing") await wallet.waitForAuthentication({}).catch(() => {
+  if (method !== "pairing" && !opts.skipWaitForAuthentication) await waitIfLocked(wallet);
+  const status = () => {
+    try {
+      opts.onStatus?.("signing");
+    } catch {
+    }
+  };
+  const sign = (c2) => wallet.createSignature({
+    protocolID: c2.protocolID ?? LOGIN_PROTOCOL,
+    keyID: c2.keyID,
+    counterparty: "anyone",
+    data: Array.from(new TextEncoder().encode(c2.message))
   });
-  const { publicKey: identityKey } = await atStage("identity", () => wallet.getPublicKey({ identityKey: true }));
+  const keyFirst = async () => {
+    const { publicKey: identityKey2 } = await atStage("identity", () => wallet.getPublicKey({ identityKey: true }));
+    status();
+    const c2 = await atStage("challenge", () => opts.challenge(identityKey2));
+    const { signature: signature2 } = await atStage("signature", () => sign(c2));
+    return { identityKey: identityKey2, signature: Array.from(signature2), nonce: c2.nonce, method, wallet };
+  };
+  if (opts.challengeNeedsIdentityKey && !opts.identityKey) return keyFirst();
+  let c;
   try {
-    opts.onStatus?.("signing");
-  } catch {
+    c = await atStage("challenge", () => opts.challenge(opts.identityKey));
+  } catch (e) {
+    if (!opts.identityKey && challengeWantsIdentityKey(e)) return keyFirst();
+    throw e;
   }
-  const c = await atStage("challenge", () => opts.challenge(identityKey));
-  const { signature } = await atStage(
-    "signature",
-    () => wallet.createSignature({
-      protocolID: c.protocolID ?? LOGIN_PROTOCOL,
-      keyID: c.keyID,
-      counterparty: "anyone",
-      data: Array.from(new TextEncoder().encode(c.message))
-    })
-  );
+  status();
+  const [{ publicKey: identityKey }, { signature }] = await Promise.all([
+    opts.identityKey ? Promise.resolve({ publicKey: opts.identityKey }) : atStage("identity", () => wallet.getPublicKey({ identityKey: true })),
+    atStage("signature", () => sign(c))
+  ]);
   return { identityKey, signature: Array.from(signature), nonce: c.nonce, method, wallet };
 }
+async function signInAndVerify(opts) {
+  const hinted = !opts.identityKey && !!opts.identityKeyHint;
+  const r = await signInWithBwalletX({ ...opts, identityKey: opts.identityKey ?? opts.identityKeyHint });
+  try {
+    return { result: r, verified: await atStage("verify", () => opts.verify(r)) };
+  } catch (e) {
+    const status = e?.status;
+    if (!hinted || status !== 401) throw e;
+    const again = await signInWithBwalletX({ ...opts, wallet: r.wallet, identityKey: void 0, skipWaitForAuthentication: true });
+    return { result: again, verified: await atStage("verify", () => opts.verify(again)) };
+  }
+}
 async function atStage(stage, run) {
   try {
     return await run();
@@ -583,8 +649,449 @@ async function atStage(stage, run) {
   }
 }
 
+// src/wallets.ts
+async function brc100Connected(wallet, o, c = {}) {
+  if (c.identity === false) return { wallet, payer: wallet, identityKey: null, optionId: o.id, kind: o.kind };
+  await waitIfLocked(wallet);
+  const { publicKey } = await wallet.getPublicKey({ identityKey: true });
+  return { wallet, payer: wallet, identityKey: publicKey, optionId: o.id, kind: o.kind };
+}
+function brc100Option(wallet, info) {
+  const opt = {
+    id: info.id,
+    name: info.name,
+    icon: info.icon,
+    rdns: info.rdns,
+    kind: "brc100",
+    isBwalletX: info.isBwalletX ?? false,
+    substrate: info.substrate,
+    wallet,
+    connect: (c) => brc100Connected(wallet, opt, c)
+  };
+  return opt;
+}
+function pairingOption(pairing) {
+  const opt = {
+    id: "bwalletx-pairing",
+    name: "bWalletX on your phone",
+    kind: "pairing",
+    isBwalletX: true,
+    substrate: "pairing",
+    async connect(c) {
+      const p = typeof pairing === "function" ? pairing() : pairing;
+      const w = await restorePairing(p) ?? await pairBwalletX(p);
+      return brc100Connected(w, opt, c);
+    }
+  };
+  return opt;
+}
+var NAMES = { [RDNS_EXTENSION]: "bWalletX", "space.bwallet.mobile": "bWalletX" };
+async function probe(substrate, ms) {
+  try {
+    const w = new import_sdk4.WalletClient(substrate);
+    const ok = await Promise.race([w.isAuthenticated({}).then(() => true), new Promise((r) => setTimeout(() => r(false), ms))]);
+    return ok ? w : null;
+  } catch {
+    return null;
+  }
+}
+function cwiIsAnnounced(cwi, announced) {
+  return announced.some((o) => o.wallet === cwi || o.rdns === RDNS_MOBILE);
+}
+async function discoverWallets(o = {}) {
+  const out = [];
+  const ms = o.ms ?? 300;
+  if (typeof window !== "undefined") {
+    const seen = /* @__PURE__ */ new Map();
+    const onAnnounce = (e) => {
+      const d = e.detail;
+      if (!d?.wallet) return;
+      const rdns = d.info?.rdns ?? d.info?.uuid ?? `wallet-${seen.size}`;
+      if (seen.has(rdns)) return;
+      const isB = BWALLETX_RDNS.includes(rdns);
+      const substrate = rdns === RDNS_EXTENSION ? "extension" : rdns === RDNS_MOBILE ? "in-app" : "injected";
+      seen.set(rdns, brc100Option(d.wallet, { id: rdns, rdns, name: NAMES[rdns] ?? d.info?.name ?? rdns, icon: d.info?.icon, isBwalletX: isB, substrate }));
+    };
+    window.addEventListener("brc100:announceWallet", onAnnounce);
+    window.dispatchEvent(new Event("brc100:requestWallet"));
+    const local = o.probeLocal ? Promise.all([probe("json-api", ms), probe("Cicada", ms)]) : Promise.resolve([null, null]);
+    await new Promise((r) => setTimeout(r, seen.size > 0 || window.CWI ? Math.min(ms, 50) : ms));
+    window.removeEventListener("brc100:announceWallet", onAnnounce);
+    out.push(...seen.values());
+    if (![...seen.values()].some((w) => w.isBwalletX) && isFramed()) {
+      const x = await probeXdm(Math.max(ms, 1200));
+      if (x) out.push(brc100Option(x, { id: "bwalletx-xdm", name: "bWalletX", isBwalletX: true, substrate: "xdm" }));
+    }
+    const cwi = window.CWI;
+    if (cwi && !cwiIsAnnounced(cwi, [...seen.values()])) {
+      out.push(brc100Option(cwi, { id: "window.CWI", name: seen.size ? "Another browser wallet" : "Browser wallet", isBwalletX: false, substrate: "window.CWI" }));
+    }
+    const [json, cicada] = await local;
+    if (json) out.push(brc100Option(json, { id: "localhost:3321", name: "Desktop wallet (localhost:3321)", substrate: "json-api" }));
+    if (cicada) out.push(brc100Option(cicada, { id: "localhost:3301", name: "Desktop wallet (localhost:3301)", substrate: "cicada" }));
+  }
+  if (o.pairing) out.push(pairingOption(o.pairing));
+  out.push(...o.extra ?? []);
+  const rank = (w) => w.isBwalletX ? 0 : w.kind === "handcash" ? 2 : 1;
+  return out.map((w, i) => ({ w, i })).sort((a, b) => rank(a.w) - rank(b.w) || a.i - b.i).map((x) => x.w);
+}
+var DESKTOP_OPTION_ID = "desktop";
+function desktopOption(ms = 1500) {
+  const opt = {
+    id: DESKTOP_OPTION_ID,
+    name: "Desktop wallet",
+    kind: "brc100",
+    isBwalletX: false,
+    substrate: "json-api",
+    async connect(c) {
+      const [json, cicada] = await Promise.all([probe("json-api", ms), probe("Cicada", ms)]);
+      const w = json ?? cicada;
+      if (!w) throw Object.assign(new Error("No desktop wallet answered on this computer"), { code: "NOT_FOUND" });
+      opt.wallet = w;
+      opt.substrate = json ? "json-api" : "cicada";
+      return brc100Connected(w, opt, c);
+    }
+  };
+  return opt;
+}
+
+// src/account.ts
+var PAYMAIL_LOOKUP_URL = "https://pay.bwallet.space/api/paymail/lookup?key=";
+var BAVATAR_URL = "https://chat.bwalletx.com/api/bavatar/";
+function shortKey(key) {
+  return key.length > 12 ? `${key.slice(0, 6)}\u2026${key.slice(-4)}` : key;
+}
+function accountLabel(a) {
+  if (a.paymail && /@bwalletx\.com$/i.test(a.paymail)) return "$" + a.paymail.split("@")[0];
+  if (a.handle) return a.handle;
+  if (a.paymail) return a.paymail;
+  return a.identityKey ? shortKey(a.identityKey) : "";
+}
+function avatarUrlFor(identityKey) {
+  return identityKey && /^0[23][0-9a-fA-F]{64}$/.test(identityKey) ? `${BAVATAR_URL}${identityKey.toLowerCase()}.png` : null;
+}
+var cache = /* @__PURE__ */ new Map();
+function lookupPaymail(identityKey, url = PAYMAIL_LOOKUP_URL) {
+  if (url === "off" || typeof fetch === "undefined") return Promise.resolve(null);
+  const k = `${url}|${identityKey}`;
+  let p = cache.get(k);
+  if (!p) {
+    p = fetch(url + encodeURIComponent(identityKey)).then((r) => r.ok ? r.json() : null).then((j) => j && typeof j.paymail === "string" ? j.paymail : null).catch(() => null);
+    cache.set(k, p);
+  }
+  return p;
+}
+function isUserRejection(e) {
+  const code = e?.code;
+  if (code === "ERR_PERMISSION_DENIED" || code === 4001) return true;
+  const msg = e instanceof Error ? e.message : String(e ?? "");
+  return /denied|reject|cancel|declin|refused|not now|user closed/i.test(msg);
+}
+function signInErrorText(e) {
+  if (isUserRejection(e)) return "Sign-in cancelled";
+  const code = e?.code;
+  if (code === "NOT_FOUND") return "bWalletX was not found in this browser";
+  const msg = e instanceof Error ? e.message : String(e ?? "");
+  if (/lock/i.test(msg)) return "Your wallet is locked. Unlock it and try again";
+  if (/timeout|timed out|expired/i.test(msg)) return "The wallet did not answer in time";
+  if (/origin/i.test(msg)) return "This page is not on the site\u2019s configured origin";
+  return "Sign-in failed";
+}
+async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+var IDENTITY_HINT_KEY = "bwx:identityKey";
+function rememberedIdentity() {
+  try {
+    const k = globalThis.localStorage?.getItem(IDENTITY_HINT_KEY) ?? "";
+    return /^0[23][0-9a-f]{64}$/i.test(k) ? k : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function rememberIdentity(key) {
+  try {
+    if (key) globalThis.localStorage?.setItem(IDENTITY_HINT_KEY, key);
+    else globalThis.localStorage?.removeItem(IDENTITY_HINT_KEY);
+  } catch {
+  }
+}
+
+// src/choice.ts
+var BWALLETX_TYPE = "bwalletx";
+function substrateOf(o) {
+  if (o.substrate) return o.substrate;
+  if (o.kind === "pairing") return "pairing";
+  if (o.isBwalletX && o.kind === "brc100") return o.rdns === RDNS_MOBILE ? "in-app" : o.id === "bwalletx-xdm" ? "xdm" : "extension";
+  if (o.kind === "handcash" || o.kind === "custom") return "adapter";
+  if (o.rdns === RDNS_EXTENSION) return "extension";
+  if (o.rdns === RDNS_MOBILE) return "in-app";
+  if (o.id === "window.CWI") return "window.CWI";
+  if (o.id === "localhost:3321" || o.id === DESKTOP_OPTION_ID) return "json-api";
+  if (o.id === "localhost:3301") return "cicada";
+  return "injected";
+}
+function walletTypeOf(o) {
+  return o.isBwalletX ? BWALLETX_TYPE : o.rdns ?? o.id;
+}
+var OWN_MARKERS = ["extension", "in-app", "xdm"];
+function isPresentBwalletX(o) {
+  return o.isBwalletX && o.kind === "brc100" && !!o.wallet && OWN_MARKERS.includes(substrateOf(o));
+}
+function hasBwalletX(list) {
+  return list.some(isPresentBwalletX);
+}
+function otherDetected(list) {
+  return list.filter((o) => !o.isBwalletX && o.kind === "brc100" && !!o.wallet);
+}
+function chooserOrder(list) {
+  const rank = (o) => isPresentBwalletX(o) ? 0 : o.isBwalletX ? 1 : o.kind === "brc100" ? 2 : o.kind === "custom" ? 3 : 4;
+  return list.map((o, i) => ({ o, i })).sort((a, b) => rank(a.o) - rank(b.o) || a.i - b.i).map((x) => x.o);
+}
+function outcomeOf(e) {
+  const err = e;
+  if (err?.code === "NOT_FOUND") return "not-found";
+  if (err?.name === "AbortError" || err?.message === "cancelled") return "cancelled";
+  if (isUserRejection(e)) return "rejected";
+  return "error";
+}
+function attemptFor(option, outcome, startedAt, now = Date.now()) {
+  return {
+    walletType: option ? walletTypeOf(option) : null,
+    substrate: option ? substrateOf(option) : null,
+    outcome,
+    ms: Math.max(0, Math.round(now - startedAt))
+  };
+}
+
+// src/modal.ts
+var import_qrcode_generator = __toESM(require("qrcode-generator"), 1);
+var CSS = `
+.bwx-ov{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
+.bwx-box{background:#0b0b0b;color:#f4f1e8;border:1px solid #3a3220;border-radius:16px;width:min(360px,100%);padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
+.bwx-box h2{margin:0 0 6px;font-size:18px;color:#e8c766}
+.bwx-box p{margin:0 0 14px;color:#bdb6a3;font-size:14px}
+.bwx-qr{background:#fff;border-radius:12px;padding:12px;display:flex;justify-content:center}
+.bwx-qr svg{width:100%;height:auto;max-width:260px}
+.bwx-code{margin:14px 0 0;text-align:center;font-size:28px;letter-spacing:.3em;color:#e8c766;font-variant-numeric:tabular-nums}
+.bwx-row{display:flex;gap:8px;margin-top:14px}
+.bwx-btn{flex:1;border:1px solid #3a3220;background:#15130e;color:#f4f1e8;border-radius:10px;padding:10px 12px;font:inherit;cursor:pointer}
+.bwx-btn:hover{border-color:#e8c766}
+a.bwx-btn{display:block;text-align:center;text-decoration:none;box-sizing:border-box}
+.bwx-primary{background:linear-gradient(180deg,#fcd34d,#f59e0b);color:#000;border:0;font-weight:700;min-height:48px;padding:13px 12px}
+.bwx-stack{display:flex;flex-direction:column;gap:8px}
+.bwx-list{display:flex;flex-direction:column;gap:8px}
+.bwx-opt{display:flex;align-items:center;gap:10px;text-align:left}
+.bwx-opt img{width:24px;height:24px;border-radius:6px}
+.bwx-tag{margin-left:auto;font-size:11px;color:#8d866f;white-space:nowrap}
+.bwx-opt{min-height:48px;box-sizing:border-box}
+a.bwx-btn.bwx-opt{display:flex;text-align:left}
+.bwx-btn:focus{outline:none}
+.bwx-btn:focus-visible{outline:2px solid #e8c766;outline-offset:2px}
+.bwx-mk{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:#000}
+.bwx-ico{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:#2a2518;color:#e8c766;font-weight:700;font-size:13px}
+.bwx-opt img{width:28px;height:28px;border-radius:8px;flex:none}
+.bwx-txt{display:flex;flex-direction:column;min-width:0;gap:1px}
+.bwx-txt b{font-weight:600}
+.bwx-txt small{font-size:12px;color:#8d866f;font-weight:400}
+.bwx-primary .bwx-txt small{color:rgba(0,0,0,.68)}
+.bwx-primary .bwx-tag{color:rgba(0,0,0,.6)}
+.bwx-sep{font-size:12px;color:#8d866f;margin:6px 2px 0}
+.bwx-foot{font-size:12px;color:#8d866f;margin:12px 0 0}
+`;
+function mount() {
+  const root = document.createElement("div");
+  root.className = "bwx-ov";
+  root.setAttribute("role", "dialog");
+  root.setAttribute("aria-modal", "true");
+  const style = document.createElement("style");
+  style.textContent = CSS;
+  const box = document.createElement("div");
+  box.className = "bwx-box";
+  root.append(style, box);
+  document.body.appendChild(root);
+  return { root, box, close: () => root.remove() };
+}
+function el(tag, cls, text) {
+  const e = document.createElement(tag);
+  if (cls) e.className = cls;
+  if (text != null) e.textContent = text;
+  return e;
+}
+function qrSvg(text) {
+  const q = (0, import_qrcode_generator.default)(0, "M");
+  q.addData(text);
+  q.make();
+  return q.createSvgTag({ cellSize: 4, margin: 2, scalable: true });
+}
+function isTouchDevice(env = globalThis) {
+  const nav = env.navigator;
+  if (!nav) return false;
+  const ua = nav.userAgent ?? "";
+  if (/Android|iPhone|iPad|iPod|Mobile|Silk|Kindle/i.test(ua)) return true;
+  if (/Macintosh/.test(ua) && (nav.maxTouchPoints ?? 0) > 1) return true;
+  try {
+    return !!env.matchMedia?.("(pointer: coarse)").matches && !env.matchMedia?.("(hover: hover)").matches;
+  } catch {
+    return false;
+  }
+}
+function pairingModal(o = {}) {
+  const ac = new AbortController();
+  let ui = null;
+  let codeEl = null;
+  const close = () => {
+    ui?.close();
+    ui = null;
+  };
+  ac.signal.addEventListener("abort", close);
+  return {
+    signal: ac.signal,
+    close,
+    onLink(link) {
+      if (typeof document === "undefined") return;
+      close();
+      ui = mount();
+      const app = o.mode === "app" || (o.mode ?? "auto") === "auto" && isTouchDevice();
+      const h = el("h2", "", o.title ?? "Connect bWalletX");
+      const cancel = el("button", "bwx-btn", "Cancel");
+      cancel.onclick = () => {
+        o.onCancel?.();
+        ac.abort();
+      };
+      codeEl = el("div", "bwx-code", "");
+      codeEl.setAttribute("aria-live", "polite");
+      if (app) {
+        const p2 = el("p", "", "Open bWalletX, approve, then come back to this page.");
+        const stack = el("div", "bwx-stack");
+        const open = el("a", "bwx-btn bwx-primary", "Open bWalletX");
+        open.href = link;
+        open.rel = "noopener";
+        const web = el("button", "bwx-btn", "Use web.bwalletx.com instead");
+        web.onclick = () => {
+          void navigator.clipboard?.writeText(link).catch(() => void 0);
+          window.open(WEB_WALLET_URL, "_blank", "noopener");
+          p2.textContent = "Link copied. In web.bwalletx.com tap Connect and paste it, then come back here.";
+        };
+        stack.append(open, web, cancel);
+        ui.box.append(h, p2, codeEl, stack);
+        return;
+      }
+      const p = el("p", "", "Scan with bWalletX on your phone, or paste the link into web.bwalletx.com.");
+      const qr = el("div", "bwx-qr");
+      qr.innerHTML = qrSvg(link);
+      const row = el("div", "bwx-row");
+      const copy = el("button", "bwx-btn", "Copy link");
+      copy.onclick = () => void navigator.clipboard?.writeText(link).then(() => copy.textContent = "Copied");
+      row.append(copy, cancel);
+      ui.box.append(h, p, qr, codeEl, row);
+    },
+    onCode(code) {
+      if (codeEl) {
+        codeEl.textContent = code;
+        const p = ui?.box.querySelector("p");
+        if (p) p.textContent = "Check bWalletX shows the same code, then tap Connect.";
+      }
+    }
+  };
+}
+function optionRow(w, primary, sub, tag) {
+  const b = el("button", `bwx-btn bwx-opt${primary ? " bwx-primary" : ""}`);
+  b.type = "button";
+  b.dataset.wallet = w.id;
+  if (w.isBwalletX) {
+    const mk = el("span", "bwx-mk");
+    mk.innerHTML = markSvg(18);
+    b.append(mk);
+  } else if (w.icon) {
+    const img = el("img");
+    img.src = w.icon;
+    img.alt = "";
+    b.append(img);
+  } else {
+    b.append(el("span", "bwx-ico", (w.name.trim().charAt(0) || "W").toUpperCase()));
+  }
+  const t = el("span", "bwx-txt");
+  t.append(el("b", "", w.name));
+  if (sub) t.append(el("small", "", sub));
+  b.append(t);
+  if (tag) b.append(el("span", "bwx-tag", tag));
+  return b;
+}
+function chooseWallet(options, o = {}) {
+  if (typeof document === "undefined") return Promise.resolve(null);
+  return new Promise((resolve) => {
+    const ui = mount();
+    ui.root.dataset.bwxChooser = "";
+    const done = (w) => {
+      document.removeEventListener("keydown", onKey, true);
+      ui.close();
+      resolve(w);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        done(null);
+      }
+    };
+    document.addEventListener("keydown", onKey, true);
+    ui.box.append(el("h2", "", o.title ?? "Choose a wallet"));
+    const list = el("div", "bwx-list");
+    const here = hasBwalletX(options);
+    if (!here) {
+      const get = el("a", "bwx-btn bwx-opt bwx-primary");
+      get.href = o.getUrl ?? GET_URL;
+      get.target = "_blank";
+      get.rel = "noopener";
+      get.dataset.wallet = "get-bwalletx";
+      const mk = el("span", "bwx-mk");
+      mk.innerHTML = markSvg(18);
+      const t = el("span", "bwx-txt");
+      t.append(el("b", "", "Get bWalletX"), el("small", "", "Free. Every feature on this site"));
+      get.append(mk, t);
+      list.append(get);
+    }
+    const ordered = chooserOrder(options);
+    const touch = isTouchDevice();
+    let sep = false;
+    for (const w of ordered) {
+      if (!here && !sep) {
+        list.append(el("p", "bwx-sep", "Or use"));
+        sep = true;
+      }
+      const sub = isPresentBwalletX(w) ? "Recommended" : w.kind === "pairing" ? touch ? "Open the bWalletX app" : "Scan a QR with your phone" : void 0;
+      const tag = w.kind === "handcash" ? "until BRC-100" : !w.isBwalletX && w.kind === "brc100" ? "Fewer features" : void 0;
+      const row2 = optionRow(w, isPresentBwalletX(w), sub, tag);
+      row2.onclick = () => done(w);
+      list.append(row2);
+    }
+    if (o.desktop !== false && !options.some((w) => w.substrate === "json-api" || w.substrate === "cicada")) {
+      if (!here && !sep) list.append(el("p", "bwx-sep", "Or use"));
+      const d = desktopOption();
+      const row2 = optionRow(d, false, "Metanet or BSV Desktop on this computer", "Fewer features");
+      row2.onclick = () => done(d);
+      list.append(row2);
+    }
+    ui.box.append(list);
+    if (otherDetected(options).length || !here) ui.box.append(el("p", "bwx-foot", "Some features need bWalletX."));
+    const row = el("div", "bwx-row");
+    const cancel = el("button", "bwx-btn", "Cancel");
+    cancel.type = "button";
+    cancel.onclick = () => done(null);
+    row.append(cancel);
+    ui.box.append(row);
+    ui.root.onclick = (e) => e.target === ui.root && done(null);
+    list.querySelector("a,button")?.focus();
+  });
+}
+
 // src/access-client.ts
-var import_sdk4 = require("@bsv/sdk");
+var import_sdk5 = require("@bsv/sdk");
 
 // src/access.ts
 var ACCESS_PROTOCOL = [2, "bwalletx access"];
@@ -722,7 +1229,7 @@ async function proveHoldings(wallet, challenge, tokenId, basket = "bsv21") {
     const counterparty = ci.counterparty ?? "self";
     for (const protocolID of ci.protocolID ? [ci.protocolID] : [ONESAT, LEGACY_ONESAT]) {
       const { publicKey } = await wallet.getPublicKey({ protocolID, keyID: ci.keyID, counterparty });
-      const h = import_sdk4.Utils.toHex(import_sdk4.Hash.hash160(import_sdk4.PublicKey.fromString(publicKey).encode(true)));
+      const h = import_sdk5.Utils.toHex(import_sdk5.Hash.hash160(import_sdk5.PublicKey.fromString(publicKey).encode(true)));
       if (want && h !== want) continue;
       const existing = byKey.get(publicKey);
       if (existing) {
@@ -772,7 +1279,7 @@ async function requestAccess(o) {
 var SIGNIN_TAG = "bwalletx-signin";
 var GET_URL = "https://bwalletx.com/get";
 var WEB_WALLET_URL = "https://web.bwalletx.com";
-var VERBS = { signin: "Sign in with", continue: "Continue with", connect: "Connect" };
+var VERBS = { signin: "Sign in with", continue: "Continue with", connect: "Connect", get: "Get", play: "Play with" };
 function signinText(label = "signin", brand = "bWalletX") {
   return `${VERBS[label] ?? VERBS.signin} ${brand}`;
 }
@@ -827,7 +1334,50 @@ button[aria-busy=true]{cursor:wait}
 .nf a:focus-visible{outline:2px solid #b45309;outline-offset:2px;border-radius:2px}
 :host([theme=dark]) .nf,:host-context(.dark) .nf{color:#a1a1aa}
 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+/* pending: one plain line under the button */
+.note{margin:8px 0 0;width:0;min-width:100%;font-size:12px;line-height:1.4;color:#71717a;text-align:center;overflow-wrap:break-word}
+:host([theme=dark]) .note,:host-context(.dark) .note{color:#a1a1aa}
+/* "Other wallets" (0.5.6): one small link under the button */
+.ow{margin:8px 0 0;width:0;min-width:100%;font-size:12px;line-height:1.4;color:#71717a;text-align:center}
+:host([theme=dark]) .ow,:host-context(.dark) .ow{color:#a1a1aa}
+.lnk{all:unset;cursor:pointer;color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
+.lnk:focus-visible{outline:2px solid #b45309;outline-offset:2px;border-radius:2px}
+/* error: one line plus Retry */
+.err{margin:0 0 8px;width:0;min-width:100%;font-size:13px;font-weight:600;line-height:1.4;color:#b91c1c;text-align:center;overflow-wrap:anywhere}
+:host([theme=dark]) .err,:host-context(.dark) .err{color:#fca5a5}
+/* signed in: the badge */
+button.chip{display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;width:auto;max-width:100%;padding:5px 14px 5px 5px;border-radius:999px;
+ background:#0b0b0c;color:#ffd24d;border:1px solid rgba(255,210,77,.55);box-shadow:none;font-size:15px}
+button.chip:hover{background:#151517;border-color:#ffd24d}
+button.chip:active{background:#000;transform:none}
+button.chip:focus-visible{outline:2px solid #ffd24d;outline-offset:3px}
+:host([theme=light]) button.chip{background:#fff;color:#09090b;border-color:#f59e0b}
+:host([theme=light]) button.chip:hover{background:#fffbeb}
+:host([full-width]) button.chip{width:100%}
+.av{position:relative;flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;overflow:hidden;
+ background:radial-gradient(circle at 30% 30%,#ffe27a,#f5b800 55%,#b88600);color:#000;font-weight:800;font-size:14px}
+.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
+.name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:min(52vw,260px)}
+.dot{flex:none;width:8px;height:8px;border-radius:50%;background:#ffd24d;box-shadow:0 0 0 3px rgba(255,210,77,.22)}
+:host([size=sm]) button.chip{font-size:13px;padding:3px 12px 3px 3px;gap:8px}
+:host([size=sm]) .av{width:26px;height:26px}
+:host([size=icon]) button.chip{width:48px;height:48px;padding:0;justify-content:center}
+:host([size=icon]) .name,:host([size=icon]) .dot{display:none}
+:host([size=icon]) .av{width:40px;height:40px}
 `;
+var MENU_CSS = `
+:host{all:initial}
+.menu{position:fixed;z-index:2147483600;box-sizing:border-box;min-width:200px;padding:6px;border-radius:14px;background:#0b0b0c;color:#ffd24d;
+ border:1px solid rgba(255,210,77,.55);box-shadow:0 12px 32px rgba(0,0,0,.45);font:600 14px/1.3 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
+.who{padding:8px 10px 10px;font-size:12px;font-weight:500;color:#e7d9a8;overflow-wrap:anywhere;border-bottom:1px solid rgba(255,210,77,.3);margin-bottom:4px}
+.item{all:unset;box-sizing:border-box;display:block;width:100%;padding:11px 10px;border-radius:10px;cursor:pointer;color:#ffd24d}
+.item:hover,.item:focus-visible{background:#ffd24d;color:#000;outline:none}
+.tip{position:fixed;z-index:2147483600;box-sizing:border-box;padding:8px 12px;border-radius:10px;background:#0b0b0c;color:#e7d9a8;
+ border:1px solid rgba(255,210,77,.4);box-shadow:0 8px 24px rgba(0,0,0,.35);font:500 12px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
+`;
+var PENDING_NOTE = "Sign in: shares only your public identity key, moves no money";
+var PENDING_LABEL = "Approve in bWalletX\u2026";
+var PENDING_LABEL_OTHER = "Approve in your wallet\u2026";
 function b64url2(bytes) {
   let s = "";
   for (const b of bytes) s += String.fromCharCode(b);
@@ -860,14 +1410,15 @@ async function buildAuthorizeUrl(p) {
 async function postJson(url, body) {
   const res = await fetch(url, { method: "POST", credentials: "include", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
   const data = await res.json().catch(() => ({}));
-  if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
+  if (!res.ok) throw Object.assign(new Error(data.error ?? `HTTP ${res.status}`), { status: res.status });
   return data;
 }
 async function postAccess(url, body) {
   const res = await fetch(url, { method: "POST", credentials: "include", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
   return res.json().catch(() => ({ error: "bad_request", message: `HTTP ${res.status}` }));
 }
-var OBSERVED = ["size", "theme", "label", "brand", "subtitle", "loading", "disabled", "full-width", "aria-label", "get-url", "web-url"];
+var OBSERVED = ["size", "theme", "label", "brand", "subtitle", "loading", "disabled", "full-width", "aria-label", "get-url", "web-url", "state", "identity-key", "paymail", "handle", "avatar-url", "error", "other-wallets", "challenge-url"];
+var STATES = ["signed-out", "restoring", "pending", "signed-in", "error"];
 function createClass() {
   return class BwalletxSigninElement extends HTMLElement {
     static get observedAttributes() {
@@ -876,12 +1427,23 @@ function createClass() {
     #root;
     #notFound = false;
     #busy = false;
+    #phase = "signed-out";
+    #account = null;
+    #error = "";
+    #restored = false;
+    #pendingLabel = PENDING_LABEL;
+    #menu = null;
     constructor() {
       super();
       this.#root = this.attachShadow({ mode: "open" });
     }
     connectedCallback() {
       this.#render();
+      void this.#restore();
+    }
+    disconnectedCallback() {
+      this.#menu?.close(false);
+      this.#hideTip();
     }
     attributeChangedCallback() {
       if (this.isConnected) this.#render();
@@ -893,93 +1455,402 @@ function createClass() {
     get notFound() {
       return this.#notFound;
     }
+    /** The state shown now (the `state` attribute when set, else the element's own). */
+    get state() {
+      const a = this.#attr("state");
+      return a && STATES.includes(a) ? a : this.#phase;
+    }
+    /** The signed-in account, or null. */
+    get account() {
+      if (!this.#controlled) return this.#account;
+      const identityKey = this.#attr("identity-key");
+      return identityKey ? { identityKey, paymail: this.#attr("paymail"), handle: this.#attr("handle"), avatarUrl: this.#attr("avatar-url") } : null;
+    }
+    /** True while the menu is open (tests). */
+    get menuOpen() {
+      return !!this.#menu;
+    }
     focus(opts) {
       this.button?.focus(opts);
     }
+    get #controlled() {
+      return this.hasAttribute("state");
+    }
+    get #stateful() {
+      return !this.hasAttribute("stateless");
+    }
     #attr(name) {
       return this.getAttribute(name);
     }
+    /** Restore the badge from session-url once, with no wallet call. */
+    async #restore() {
+      const url = this.#attr("session-url");
+      if (this.#restored || !url || this.#controlled || !this.#stateful) return;
+      this.#restored = true;
+      this.#set("restoring");
+      try {
+        const r = await fetch(url, { credentials: "include", headers: { accept: "application/json" } });
+        const j = await r.json().catch(() => ({}));
+        if (this.#phase !== "restoring") return;
+        if (j.identityKey) this.#signedIn({ identityKey: j.identityKey, handle: j.handle ?? null, paymail: j.paymail ?? null });
+        else this.#set("signed-out");
+      } catch {
+        if (this.#phase === "restoring") this.#set("signed-out");
+      }
+    }
+    #set(p) {
+      this.#phase = p;
+      if (p !== "signed-in") this.#menu?.close(false);
+      this.#render();
+    }
+    #signedIn(a) {
+      this.#account = a;
+      this.#error = "";
+      this.#set("signed-in");
+      const lookup = this.#attr("lookup-url");
+      if (!a.paymail && lookup !== "off") {
+        void lookupPaymail(a.identityKey, lookup ?? void 0).then((pm) => {
+          if (pm && this.#account?.identityKey === a.identityKey && !this.#account.paymail) {
+            this.#account = { ...this.#account, paymail: pm };
+            this.#render();
+          }
+        });
+      }
+    }
     #render() {
       const size = this.#attr("size") ?? "lg";
       const brand = this.#attr("brand") === "bWallet" ? "bWallet" : "bWalletX";
-      const text = signinText(this.#attr("label") ?? "signin", brand);
+      const esc = (s) => s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+      const state = this.state;
+      const acct = this.account;
+      if (state === "signed-in" && acct) {
+        this.#hideTip();
+        const name = accountLabel(acct);
+        const avatar = acct.avatarUrl ?? avatarUrlFor(acct.identityKey);
+        const initial = (name.replace(/^\$/, "").charAt(0) || "b").toUpperCase();
+        this.#root.innerHTML = `<style>${SIGNIN_CSS}</style><button type="button" class="chip" part="button chip" aria-haspopup="menu" aria-expanded="${this.#menu ? "true" : "false"}" aria-label="Signed in with bWalletX as ${esc(name)}. Account menu" title="Signed in as ${esc(name)}"><span class="av" part="avatar" aria-hidden="true">${esc(initial)}${avatar ? `<img alt="" src="${esc(avatar)}" referrerpolicy="no-referrer">` : ""}</span><span class="name" part="label">${esc(name)}</span><span class="dot" part="dot" aria-hidden="true"></span></button>`;
+        const img = this.#root.querySelector("img");
+        if (img) img.addEventListener("error", () => img.remove(), { once: true });
+        const chip = this.button;
+        chip.addEventListener("click", () => this.#menu ? this.#menu.close(true) : this.#openMenu());
+        chip.addEventListener("keydown", (e) => {
+          if ((e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && !this.#menu) {
+            e.preventDefault();
+            this.#openMenu();
+          }
+        });
+        return;
+      }
+      const pending = state === "pending";
+      const restoring = state === "restoring";
+      const error = state === "error";
+      const pendingLabel = this.#controlled ? PENDING_LABEL : this.#pendingLabel;
+      const text = pending ? pendingLabel : error ? "Retry" : signinText(this.#attr("label") ?? "signin", brand);
       const subAttr = this.#attr("subtitle");
       const subDefault = brand === "bWalletX" && (size === "lg" || size === "md") ? "also works with bWallet" : null;
-      const subtitle = subAttr === null || subAttr === "" || subAttr === "on" ? subAttr === "on" ? "also works with bWallet" : subDefault : subAttr === "off" ? null : subAttr;
-      const loading = this.hasAttribute("loading") || this.#busy;
+      const subtitle = pending || error ? null : subAttr === null || subAttr === "" || subAttr === "on" ? subAttr === "on" ? "also works with bWallet" : subDefault : subAttr === "off" ? null : subAttr;
+      const loading = this.hasAttribute("loading") || this.#busy || pending || restoring;
       const disabled = this.hasAttribute("disabled");
       const markPx = size === "icon" ? 24 : size === "sm" ? 15 : size === "md" ? 17 : 20;
-      const aria = this.#attr("aria-label") ?? (subtitle && size !== "icon" ? `${text}, ${subtitle}` : text);
+      const aria = pending ? pendingLabel : this.#attr("aria-label") ?? (subtitle && size !== "icon" ? `${text}, ${subtitle}` : text);
       const getUrl = this.#attr("get-url") ?? GET_URL;
       const webUrl = this.#attr("web-url") ?? WEB_WALLET_URL;
-      const esc = (s) => s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+      const errText = error ? (this.#controlled ? this.#attr("error") : this.#error) || "Sign-in failed" : "";
       const label = size === "icon" ? "" : `<span class="txt" part="text"><b part="label">${esc(text)}</b>${subtitle ? `<small part="subtitle">${esc(subtitle)}</small>` : ""}</span>`;
       const mark = loading ? '<span class="spin" aria-hidden="true"></span>' : markSvg(markPx);
-      const nf = this.#notFound ? `<p class="nf" part="not-found" role="status">bWalletX wasn't found in this browser. <a href="${esc(getUrl)}" target="_blank" rel="noopener">Get ${brand}</a> or <a href="${esc(webUrl)}" target="_blank" rel="noopener">use the web wallet</a>.</p>` : "";
-      this.#root.innerHTML = `<style>${SIGNIN_CSS}</style><button type="button" part="button" aria-label="${esc(aria)}" title="${esc(subtitle ? `${text} (${subtitle})` : text)}"${disabled ? " disabled" : ""}${loading ? ' aria-busy="true"' : ""}><span class="mark" part="mark">${mark}</span>${label}</button>${loading ? '<span class="sr" role="status">Connecting to bWalletX\u2026</span>' : ""}${nf}`;
+      const otherOff = this.#attr("other-wallets") === "off";
+      const otherLink = '<button type="button" class="lnk" data-act="other" part="other-wallets-link">Other wallets</button>';
+      const nf = this.#notFound ? `<p class="nf" part="not-found" role="status">bWalletX wasn't found in this browser. <a href="${esc(getUrl)}" target="_blank" rel="noopener">Get ${brand}</a> or <a href="${esc(webUrl)}" target="_blank" rel="noopener">use the web wallet</a>.${otherOff ? "" : ` ${otherLink}`}</p>` : "";
+      const ow = !this.#notFound && !pending && !restoring && this.#otherWalletsShown(size) ? `<p class="ow" part="other-wallets">${otherLink}</p>` : "";
+      const err = error ? `<p class="err" part="error" role="alert">${esc(errText)}</p>` : "";
+      const compact = size === "sm" || size === "icon";
+      const note = pending && !compact ? `<p class="note" part="note">${esc(PENDING_NOTE)}</p>` : "";
+      const status = pending ? `<span class="sr" role="status">${esc(pendingLabel)}</span>` : loading ? '<span class="sr" role="status">Connecting to bWalletX\u2026</span>' : "";
+      this.#root.innerHTML = `<style>${SIGNIN_CSS}</style>${err}<button type="button" part="button" aria-label="${esc(aria)}" title="${esc(subtitle ? `${text} (${subtitle})` : text)}"${disabled ? " disabled" : ""}${loading ? ' aria-busy="true"' : ""}><span class="mark" part="mark">${mark}</span>${label}</button>${status}${note}${ow}${nf}`;
       this.button.addEventListener("click", () => void this.#click());
+      for (const l of Array.from(this.#root.querySelectorAll("[data-act=other]"))) l.addEventListener("click", () => void this.otherWallets());
       bindPrewarm(this.button);
+      if (pending && compact) this.#showTip(PENDING_NOTE);
+      else this.#hideTip();
+    }
+    #tip = null;
+    #showTip(text) {
+      const b = this.button;
+      if (!b || typeof document === "undefined") return;
+      if (!this.#tip) {
+        const host = document.createElement("div");
+        host.setAttribute("data-bwalletx-tip", "");
+        const root = host.attachShadow({ mode: "open" });
+        root.innerHTML = `<style>${MENU_CSS}</style><div class="tip" role="note"></div>`;
+        document.body.appendChild(host);
+        this.#tip = host;
+      }
+      const tip = this.#tip.shadowRoot.querySelector(".tip");
+      tip.textContent = text;
+      const r = b.getBoundingClientRect();
+      const vw = window.innerWidth || document.documentElement.clientWidth || 360;
+      const width = Math.min(280, vw - 32);
+      tip.style.width = `${width}px`;
+      tip.style.left = `${Math.max(16, Math.min(r.right - width, vw - width - 16))}px`;
+      tip.style.top = `${r.bottom + 8}px`;
+    }
+    #hideTip() {
+      this.#tip?.remove();
+      this.#tip = null;
+    }
+    #openMenu() {
+      const acct = this.account;
+      const chip = this.button;
+      if (!acct || !chip || typeof document === "undefined") return;
+      const name = accountLabel(acct);
+      const host = document.createElement("div");
+      host.setAttribute("data-bwalletx-menu", "");
+      const root = host.attachShadow({ mode: "open" });
+      const style = document.createElement("style");
+      style.textContent = MENU_CSS;
+      const menu = document.createElement("div");
+      menu.className = "menu";
+      menu.setAttribute("role", "menu");
+      menu.setAttribute("aria-label", "bWalletX account");
+      const who = document.createElement("div");
+      who.className = "who";
+      who.textContent = `Signed in as ${acct.paymail || name}`;
+      const item = (text, run) => {
+        const b = document.createElement("button");
+        b.type = "button";
+        b.className = "item";
+        b.setAttribute("role", "menuitem");
+        b.tabIndex = -1;
+        b.textContent = text;
+        b.addEventListener("click", () => run(b));
+        return b;
+      };
+      const copyWhat = acct.paymail ? "paymail" : "key";
+      const copy = item(`Copy ${copyWhat}`, (b) => {
+        void copyText(acct.paymail || acct.identityKey).then((ok) => {
+          b.textContent = ok ? "Copied" : `Copy ${copyWhat}`;
+          setTimeout(() => close(true), ok ? 600 : 0);
+        });
+      });
+      const out = item("Disconnect", () => {
+        close(false);
+        void this.signOut();
+      });
+      menu.append(who, copy, out);
+      root.append(style, menu);
+      document.body.appendChild(host);
+      const place = () => {
+        const r = chip.getBoundingClientRect();
+        const vw = window.innerWidth || document.documentElement.clientWidth || 360;
+        const vh = window.innerHeight || document.documentElement.clientHeight || 640;
+        const width = Math.min(260, vw - 32);
+        menu.style.width = `${width}px`;
+        const left = Math.max(16, Math.min(r.right - width, vw - width - 16));
+        menu.style.left = `${left}px`;
+        const h = menu.offsetHeight || 150;
+        const below = r.bottom + 8;
+        menu.style.top = `${below + h > vh && r.top - 8 - h > 0 ? r.top - 8 - h : below}px`;
+      };
+      place();
+      const items = [copy, out];
+      const focusAt = (i) => items[(i + items.length) % items.length].focus();
+      const onKey = (e) => {
+        const i = items.indexOf(root.activeElement);
+        if (e.key === "Escape") {
+          e.preventDefault();
+          close(true);
+        } else if (e.key === "ArrowDown") {
+          e.preventDefault();
+          focusAt(i + 1);
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          focusAt(i - 1);
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          focusAt(0);
+        } else if (e.key === "End") {
+          e.preventDefault();
+          focusAt(items.length - 1);
+        } else if (e.key === "Tab") close(false);
+      };
+      const onDown = (e) => {
+        const path = e.composedPath?.() ?? [];
+        if (!path.includes(host) && !path.includes(this)) close(false);
+      };
+      const onMove = () => close(false);
+      menu.addEventListener("keydown", onKey);
+      document.addEventListener("pointerdown", onDown, true);
+      window.addEventListener("resize", onMove);
+      window.addEventListener("scroll", place, true);
+      const close = (focusChip = false) => {
+        if (this.#menu?.host !== host) return;
+        this.#menu = null;
+        menu.removeEventListener("keydown", onKey);
+        document.removeEventListener("pointerdown", onDown, true);
+        window.removeEventListener("resize", onMove);
+        window.removeEventListener("scroll", place, true);
+        host.remove();
+        this.button?.setAttribute("aria-expanded", "false");
+        if (focusChip) this.button?.focus();
+      };
+      this.#menu = { host, close };
+      chip.setAttribute("aria-expanded", "true");
+      focusAt(0);
+    }
+    /**
+     * Disconnect: emits bwalletx-disconnect (cancelable). Unless a listener cancels it (BwalletXProvider signs out
+     * itself) or the element is driven by `state`, posts logout-url and shows signed out.
+     */
+    async signOut() {
+      this.#menu?.close(false);
+      if (!this.#emit("bwalletx-disconnect", { element: this, account: this.account }, true)) return;
+      if (this.#controlled) return;
+      const url = this.#attr("logout-url");
+      if (url) await fetch(url, { method: "POST", credentials: "include", headers: { "content-type": "application/json" }, body: "{}" }).catch(() => void 0);
+      this.#account = null;
+      this.#set("signed-out");
+      this.#emit("bwalletx-signed-out");
+      this.button?.focus();
     }
     #emit(type, detail, cancelable = false) {
       return this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable }));
     }
-    #setBusy(on) {
-      this.#busy = on;
-      this.#render();
+    /** "Other wallets" is offered under the button: other-wallets on, or auto at lg/md when this element signs in. */
+    #otherWalletsShown(size) {
+      const a = this.#attr("other-wallets");
+      if (a === "off") return false;
+      if (a === "on") return true;
+      return (size === "lg" || size === "md") && (this.#controlled || !!this.#attr("challenge-url"));
     }
-    async #click() {
-      if (this.hasAttribute("disabled") || this.hasAttribute("loading") || this.#busy) return;
-      if (!this.#emit("bwalletx-signin", { element: this }, true)) return;
-      const href = this.#attr("href");
-      const authorizeUrl = this.#attr("authorize-url");
-      if (authorizeUrl) {
-        location.assign(await buildAuthorizeUrl({ authorizeUrl, clientId: this.#attr("client-id"), redirectUri: this.#attr("redirect-uri"), scope: this.#attr("scope") }));
-        return;
+    /** Open the wallet chooser (the "Other wallets" link): phone QR, other browser wallets, desktop wallets. */
+    otherWallets() {
+      return this.#click("chooser");
+    }
+    #attempt(option, outcome, started) {
+      this.#emit("bwalletx-attempt", attemptFor(option, outcome, started));
+    }
+    /**
+     * Which wallet: bWalletX by its own marker goes straight to its sheet; otherwise the chooser ("Get bWalletX" first)
+     * when another wallet is here or the user asked; otherwise 'not-found'. null: the chooser was closed.
+     */
+    async #choose(mode, ms, pairing) {
+      if (mode !== "chooser") {
+        const f = await discoverBwalletX(ms);
+        if (f) {
+          const substrate = f.rdns === RDNS_EXTENSION ? "extension" : f.rdns === RDNS_MOBILE ? "in-app" : "xdm";
+          return brc100Option(f.wallet, { id: f.rdns ?? "bwalletx-xdm", rdns: f.rdns ?? void 0, name: "bWalletX", isBwalletX: true, substrate });
+        }
       }
-      if (href) {
-        location.assign(href);
-        return;
+      const list = await discoverWallets({ ms: 50, pairing: () => pairing });
+      if (mode !== "chooser" && !hasBwalletX(list) && !otherDetected(list).length) return "not-found";
+      return chooseWallet(list, { getUrl: this.#attr("get-url") ?? void 0 });
+    }
+    async #click(mode = "signin") {
+      if (this.hasAttribute("disabled") || this.hasAttribute("loading") || this.#busy || this.state === "pending") return;
+      if (!this.#emit("bwalletx-signin", { element: this, mode }, true)) return;
+      if (mode === "signin") {
+        const href = this.#attr("href");
+        const authorizeUrl = this.#attr("authorize-url");
+        if (authorizeUrl) {
+          location.assign(await buildAuthorizeUrl({ authorizeUrl, clientId: this.#attr("client-id"), redirectUri: this.#attr("redirect-uri"), scope: this.#attr("scope") }));
+          return;
+        }
+        if (href) {
+          location.assign(href);
+          return;
+        }
       }
       const challengeUrl = this.#attr("challenge-url");
       if (!challengeUrl) return;
+      const own = this.#stateful && !this.#controlled;
+      const prev = this.#phase === "signed-in" ? "signed-in" : "signed-out";
+      const started = Date.now();
+      const pairing = pairingModal();
+      let option = null;
       this.#notFound = false;
-      this.#setBusy(true);
+      this.#busy = true;
+      this.#pendingLabel = PENDING_LABEL;
+      if (own) this.#set("pending");
+      else this.#render();
       try {
         const ms = Number(this.#attr("discover-ms")) || DEFAULT_DISCOVER_MS;
-        const found = await discoverBwalletX(ms);
-        if (!found) {
+        const picked = await this.#choose(mode, ms, pairing);
+        if (picked === "not-found") {
           this.#notFound = true;
+          if (own) this.#phase = "signed-out";
+          this.#attempt(null, "not-found", started);
           this.#emit("bwalletx-not-found");
           if (this.#attr("require-token")) this.#emit("bwalletx-access-denied", { code: "not_installed", message: "No wallet found" });
           return;
         }
+        if (!picked) {
+          if (own) this.#phase = prev;
+          this.#attempt(null, "cancelled", started);
+          return;
+        }
+        option = picked;
+        if (!option.isBwalletX) {
+          this.#pendingLabel = PENDING_LABEL_OTHER;
+          if (own) this.#render();
+        }
+        const cw = await option.connect({ identity: false });
+        const wallet = cw.wallet;
+        if (!wallet) throw Object.assign(new Error("This wallet cannot sign in here"), { code: "NOT_SUPPORTED" });
+        const sub = substrateOf(option);
+        const method = sub === "extension" ? "extension" : sub === "in-app" || sub === "xdm" ? "in-app" : sub === "pairing" ? "pairing" : "wallet";
         const requireToken = this.#attr("require-token");
         if (requireToken) {
+          if (own) this.#phase = "signed-out";
           const verifyUrl2 = this.#attr("verify-url");
           const min = this.#attr("min");
           const minBps = this.#attr("min-bps");
           const hint = { token: { id: requireToken, ...minBps ? { minBps: Number(minBps) } : { min: min ?? "1" } } };
           try {
             const a = await requestAccess({
-              wallet: found.wallet,
+              wallet,
               challenge: (identityKey) => postJson(challengeUrl, { identityKey, require: hint }),
               verify: verifyUrl2 ? (response2) => postAccess(verifyUrl2, response2) : void 0
             });
+            this.#attempt(option, "signed-in", started);
             this.#emit("bwalletx-access-granted", { identityKey: a.response.identityKey, response: a.verified });
           } catch (e) {
             const err = e instanceof AccessError ? e : new AccessError("bad_request", String(e));
+            this.#attempt(option, outcomeOf(e), started);
             this.#emit("bwalletx-access-denied", { code: err.code, message: err.message, have: err.have, need: err.need });
           }
           return;
         }
-        const r = await signInWithBwalletX({ wallet: found.wallet, challenge: (identityKey) => postJson(challengeUrl, { identityKey }) });
         const verifyUrl = this.#attr("verify-url");
-        const response = verifyUrl ? await postJson(verifyUrl, { identityKey: r.identityKey, nonce: r.nonce, signature: r.signature }) : null;
-        this.#emit("bwalletx-signed-in", { identityKey: r.identityKey, method: found.method, nonce: r.nonce, signature: r.signature, response });
+        const { result: r, verified } = await signInAndVerify({
+          wallet,
+          identityKeyHint: verifyUrl ? rememberedIdentity() : void 0,
+          challenge: (identityKey) => postJson(challengeUrl, identityKey ? { identityKey } : {}),
+          verify: async (res) => verifyUrl ? await postJson(verifyUrl, { identityKey: res.identityKey, nonce: res.nonce, signature: res.signature }) : {}
+        });
+        if (verifyUrl) rememberIdentity(r.identityKey);
+        const response = verifyUrl ? verified : null;
+        if (own) this.#signedIn({ identityKey: r.identityKey, handle: response?.handle ?? null, paymail: response?.paymail ?? null });
+        this.#attempt(option, "signed-in", started);
+        this.#emit("bwalletx-signed-in", { identityKey: r.identityKey, method, nonce: r.nonce, signature: r.signature, response });
       } catch (error) {
-        this.#emit("bwalletx-error", { error });
+        const outcome = outcomeOf(error);
+        this.#attempt(option, outcome, started);
+        const closedQr = outcome === "cancelled" && option?.kind === "pairing";
+        if (own) {
+          if (closedQr) this.#phase = prev;
+          else {
+            this.#error = signInErrorText(error);
+            this.#phase = "error";
+          }
+        }
+        if (!closedQr) this.#emit("bwalletx-error", { error });
       } finally {
-        this.#setBusy(false);
+        this.#busy = false;
+        try {
+          pairing.close();
+        } catch {
+        }
+        this.#render();
       }
     }
   };
@@ -993,17 +1864,232 @@ function defineBwalletxSignin(tag = SIGNIN_TAG) {
   return C;
 }
 
+// src/wallet-button.ts
+var BUTTON_TAG = "bwalletx-button";
+var CONNECTED_KEY = "bwx:connected";
+function dropLegacyConnectedKey() {
+  try {
+    const had = globalThis.localStorage?.getItem(CONNECTED_KEY) != null;
+    if (had) globalThis.localStorage?.removeItem(CONNECTED_KEY);
+    return had;
+  } catch {
+    return false;
+  }
+}
+var LOOKUP = "https://pay.bwallet.space/api/paymail/lookup?key=";
+var LEGACY = '[data-bwx-connect], .nav-connect, .nav-acct, a[href^="https://bwalletx.com/get"], a[href^="https://www.bwalletx.com/get"]';
+function getUrlFor(ua, touchMac = false) {
+  if (/iPhone|iPad|iPod/i.test(ua) || touchMac && /Macintosh/.test(ua)) return "https://bwalletx.com/iphone";
+  if (/Android/i.test(ua)) return "https://bwalletx.com/android";
+  if (/Chrome\//.test(ua) && !/Edg\/|OPR\//.test(ua)) return "https://bwalletx.com/extension";
+  return "https://bwalletx.com/get";
+}
+function stateFor(o) {
+  if (o.connected) return "connected";
+  if (o.found === null) return o.phone ? "available" : "checking";
+  return o.found || o.phone ? "available" : "none";
+}
+function handleLabel(key, paymail) {
+  if (paymail && /@bwalletx\.com$/i.test(paymail)) return "$" + paymail.split("@")[0];
+  if (paymail) return paymail;
+  return key.slice(0, 6) + "\u2026" + key.slice(-4);
+}
+var CHIP_CSS = `
+a.b,button.b{all:unset;box-sizing:border-box}
+.chip{background:#0b0b0c;color:#ffd24d;border:1px solid rgba(255,210,77,.45);box-shadow:none}
+.chip:hover{background:#151517;border-color:#ffd24d}
+.chip .dot{width:8px;height:8px;border-radius:50%;background:#34d399;flex:none}
+.txt b{overflow:hidden;text-overflow:ellipsis;max-width:min(40vw,220px)}
+:host(:not([size])) button,:host(:not([size])) a.btn,:host([size=sm]) a.btn{padding:6px 12px 6px 6px;border-radius:8px;font-size:13px;gap:8px;min-height:36px}
+:host(:not([size])) .mark,:host([size=sm]) a.btn .mark{width:22px;height:22px}
+a.btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;
+ padding:16px 20px;border-radius:12px;font-size:16px;font-weight:700;line-height:1.2;background:linear-gradient(180deg,#fcd34d,#f59e0b);color:#000;
+ box-shadow:0 10px 15px -3px rgba(245,158,11,.2),0 4px 6px -4px rgba(245,158,11,.2)}
+a.btn:hover{background:linear-gradient(180deg,#fde68a,#fbbf24)}
+a.btn:focus-visible{outline:2px solid #b45309;outline-offset:3px}
+:host([size=md]) a.btn{padding:10px 16px;border-radius:10px;font-size:15px;gap:10px}
+`;
+var live = /* @__PURE__ */ new Set();
+function createClass2() {
+  return class BwalletxButtonElement extends HTMLElement {
+    #root;
+    #state = "checking";
+    #key = null;
+    #paymail = null;
+    #duplicate = false;
+    constructor() {
+      super();
+      this.#root = this.attachShadow({ mode: "open" });
+    }
+    get state() {
+      return this.#state;
+    }
+    get identityKey() {
+      return this.#key;
+    }
+    connectedCallback() {
+      if (live.size && ![...live].includes(this)) {
+        this.#duplicate = true;
+        this.hidden = true;
+        console.warn("[bwalletx] A second <bwalletx-button> is on this page; it is hidden. Use one per page.");
+        return;
+      }
+      live.add(this);
+      this.#hideLegacy();
+      dropLegacyConnectedKey();
+      const phone = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+      this.#set(stateFor({ connected: false, found: null, phone }));
+      const ms = Number(this.getAttribute("discover-ms")) || 800;
+      void discoverBwalletX(ms).then((f) => {
+        if (!this.isConnected) return;
+        if (this.#state !== "connected" && this.#state !== "connecting") this.#set(stateFor({ connected: false, found: !!f, phone }));
+      }).catch(() => {
+        if (this.#state === "checking") this.#set("none");
+      });
+      void this.#restoreSession();
+    }
+    /** A live session your server reports (session-url): the chip, with no wallet call. */
+    async #restoreSession() {
+      const url = this.getAttribute("session-url");
+      if (!url) return;
+      try {
+        const r = await fetch(url, { credentials: "include", headers: { accept: "application/json" } });
+        const j = await r.json().catch(() => ({}));
+        if (j.identityKey && this.isConnected && this.#state !== "connected" && this.#state !== "connecting") {
+          this.#connected(j.identityKey);
+          if (j.paymail) {
+            this.#paymail = j.paymail;
+            this.#render();
+          }
+        }
+      } catch {
+      }
+    }
+    disconnectedCallback() {
+      if (!this.#duplicate) live.delete(this);
+    }
+    #hideLegacy() {
+      const scope = this.closest("header, nav") ?? document;
+      for (const el2 of Array.from(scope.querySelectorAll(LEGACY))) {
+        if (el2 === this || el2.contains(this)) continue;
+        el2.hidden = true;
+        el2.style.setProperty("display", "none", "important");
+        console.warn("[bwalletx] Hid a second wallet control next to <bwalletx-button>:", el2, ". Use only <bwalletx-button>; don't add your own Get or Connect links.");
+      }
+    }
+    #emit(type, detail) {
+      this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+    }
+    #set(s) {
+      this.#state = s;
+      this.setAttribute("state", s);
+      this.#render();
+    }
+    #connected(key) {
+      this.#key = key;
+      this.#set("connected");
+      this.#emit("bwalletx-connected", { identityKey: key });
+      const lookup = this.getAttribute("lookup-url");
+      if (lookup === "off") return;
+      void fetch((lookup ?? LOOKUP) + encodeURIComponent(key)).then((r) => r.ok ? r.json() : null).then((j) => {
+        if (j && typeof j.paymail === "string" && this.#key === key) {
+          this.#paymail = j.paymail;
+          this.#render();
+        }
+      }).catch(() => void 0);
+    }
+    async connect() {
+      if (this.#state === "connecting" || this.#state === "connected") return;
+      const modal = pairingModal({ title: "Connect bWalletX" });
+      this.#set("connecting");
+      try {
+        const { wallet } = await connectBwalletX({ pairing: modal });
+        const { publicKey } = await wallet.getPublicKey({ identityKey: true });
+        this.#connected(publicKey);
+      } catch (e) {
+        if (e?.code === "NOT_FOUND") this.#set("none");
+        else {
+          this.#set("available");
+          if (e?.name !== "AbortError") console.warn("[bwalletx] connect:", e);
+        }
+      } finally {
+        try {
+          modal.close();
+        } catch {
+        }
+      }
+    }
+    disconnect() {
+      try {
+        clearPairing();
+      } catch {
+      }
+      try {
+        window.postMessage({ type: "bwallet:disconnect" }, location.origin);
+      } catch {
+      }
+      this.#key = null;
+      this.#paymail = null;
+      dropLegacyConnectedKey();
+      this.#set("available");
+      this.#emit("bwalletx-disconnected");
+    }
+    #render() {
+      const esc = (s2) => s2.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+      const size = this.getAttribute("size") ?? "sm";
+      const px = size === "lg" ? 20 : size === "md" ? 17 : 15;
+      const mark = `<span class="mark" part="mark">${markSvg(px)}</span>`;
+      const css = `<style>${SIGNIN_CSS}${CHIP_CSS}</style>`;
+      const s = this.#state;
+      if (s === "none") {
+        const href = this.getAttribute("get-url") ?? getUrlFor(navigator.userAgent, (navigator.maxTouchPoints ?? 0) > 1);
+        this.#root.innerHTML = `${css}<a class="btn" part="button" href="${esc(href)}" target="_blank" rel="noopener">${mark}<span class="txt" part="text"><b part="label">Get bWalletX</b></span></a>`;
+        return;
+      }
+      if (s === "connected" && this.#key) {
+        const name = handleLabel(this.#key, this.#paymail);
+        this.#root.innerHTML = `${css}<button type="button" class="chip" part="button chip" title="Connected to bWalletX. Click to disconnect." aria-label="Connected as ${esc(name)}. Disconnect">${mark}<span class="txt" part="text"><b part="label">${esc(name)}</b></span><span class="dot" aria-hidden="true"></span></button>`;
+        this.#root.querySelector("button").onclick = () => this.disconnect();
+        return;
+      }
+      const busy = s === "connecting" || s === "checking";
+      this.#root.innerHTML = `${css}<button type="button" part="button"${busy ? ' aria-busy="true"' : ""}>${busy ? '<span class="mark" part="mark"><span class="spin" aria-hidden="true"></span></span>' : mark}<span class="txt" part="text"><b part="label">${s === "connecting" ? "Connecting\u2026" : "Connect bWalletX"}</b></span></button>`;
+      this.#root.querySelector("button").onclick = () => void this.connect();
+    }
+  };
+}
+function defineBwalletxButton(tag = BUTTON_TAG) {
+  if (typeof customElements === "undefined" || customElements.get(tag)) return;
+  customElements.define(tag, createClass2());
+}
+function _resetBwalletxButtons() {
+  live.clear();
+}
+
 // src/define.ts
 defineBwalletxSignin();
+defineBwalletxButton();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BUTTON_TAG,
+  CONNECTED_KEY,
   GET_URL,
+  MENU_CSS,
+  PENDING_LABEL,
+  PENDING_LABEL_OTHER,
+  PENDING_NOTE,
   SIGNIN_CSS,
   SIGNIN_TAG,
   WEB_WALLET_URL,
+  _resetBwalletxButtons,
   buildAuthorizeUrl,
+  defineBwalletxButton,
   defineBwalletxSignin,
+  dropLegacyConnectedKey,
+  getUrlFor,
+  handleLabel,
   markSvg,
-  signinText
+  signinText,
+  stateFor
 });
 //# sourceMappingURL=element.cjs.map