hd-wallet-ui 2.0.29 → 2.0.30

package/README.md

@@ -8,10 +8,10 @@ and signed approval requests.
 ## Install
 
 ```sh
-npm install hd-wallet-ui@2.0.29
+npm install hd-wallet-ui@2.0.30
 ```
 
-`hd-wallet-wasm` 2.0.29 is the package's only runtime dependency.
+`hd-wallet-wasm` 2.0.30 is the package's only runtime dependency.
 
 ## Published surfaces
 

package/dist/account/index.d.ts

@@ -0,0 +1,99 @@
+export interface AccountViewBond {
+  value?: string;
+  label?: string;
+}
+
+export interface AccountViewWallet {
+  id: string;
+  name?: string;
+}
+
+export interface AccountViewChip {
+  label: string;
+  tone?: string;
+  title?: string;
+}
+
+export interface AccountViewAction {
+  label: string;
+  onClick: () => unknown;
+  title?: string;
+  variant?: string;
+}
+
+export interface AccountViewTab {
+  id: string;
+  label?: string;
+  render?: (panel: HTMLElement) => void;
+}
+
+export interface AccountViewField {
+  id: string;
+  label?: string;
+  value?: string;
+  readOnly?: boolean;
+  multiline?: boolean;
+  placeholder?: string;
+  note?: string;
+  title?: string;
+}
+
+export interface AccountViewStatus {
+  text?: string;
+  tone?: 'busy' | 'error' | 'ok' | string;
+}
+
+export interface AccountViewIdentity {
+  fields?: AccountViewField[];
+  photoUrl?: string;
+  photoStatus?: AccountViewStatus;
+  saveStatus?: AccountViewStatus;
+  onSave?: (values: Record<string, string>) => unknown;
+  onPhoto?: (blob: Blob) => unknown;
+  onPhotoRemove?: () => unknown;
+}
+
+export interface AccountViewOptions {
+  document?: Document;
+  title?: string;
+  bond?: AccountViewBond;
+  wallets?: AccountViewWallet[];
+  activeWalletId?: string;
+  onWalletChange?: (walletId: string) => void;
+  chips?: AccountViewChip[];
+  actions?: AccountViewAction[];
+  tabs?: AccountViewTab[];
+  activeTabId?: string;
+  onTabChange?: (tabId: string) => void;
+  identity?: AccountViewIdentity;
+  onClose?: () => void;
+}
+
+export interface AccountViewUpdate {
+  title?: string;
+  bond?: AccountViewBond;
+  chips?: AccountViewChip[];
+  actions?: AccountViewAction[];
+  wallets?: AccountViewWallet[];
+  activeWalletId?: string;
+  identity?: AccountViewIdentity;
+  activeTabId?: string;
+}
+
+export interface AccountView {
+  element: HTMLElement;
+  panel(id: string): HTMLElement | null;
+  getActiveTab(): string | null;
+  setActiveTab(id: string): void;
+  update(next?: AccountViewUpdate): void;
+  destroy(): void;
+}
+
+export declare const DEFAULT_ACCOUNT_TABS: ReadonlyArray<{ id: string; label: string }>;
+
+export declare function createAccountView(options?: AccountViewOptions): AccountView;
+
+export declare function mountAccountView(
+  container: Element,
+  options?: AccountViewOptions,
+): AccountView;

package/dist/account/index.js

@@ -0,0 +1,252 @@
+const $ = Object.freeze([
+  Object.freeze({ id: "identity", label: "Identity" }),
+  Object.freeze({ id: "trust", label: "Trust Map" }),
+  Object.freeze({ id: "messaging", label: "Messaging" }),
+  Object.freeze({ id: "wallet", label: "Wallet" }),
+  Object.freeze({ id: "manage", label: "Manage" })
+]), z = Object.freeze(["image/png", "image/jpeg", "image/webp"]);
+function o(t, i, f, p) {
+  const h = t.createElement(i);
+  return f && (h.className = f), p != null && p !== "" && (h.textContent = String(p)), h;
+}
+function g(t, i, f, p) {
+  const h = o(t, "button", i, f);
+  return h.type = "button", p && (h.title = p), h;
+}
+function m(t) {
+  return t == null ? "" : String(t);
+}
+function V(t) {
+  if (t?.document) return t.document;
+  if (typeof document < "u") return document;
+  throw new Error("createAccountView requires a document");
+}
+function q(t = {}) {
+  const i = V(t), f = (Array.isArray(t.tabs) && t.tabs.length ? t.tabs : $).filter((e) => e && typeof e.id == "string" && e.id !== "");
+  if (!f.length) throw new Error("createAccountView requires at least one tab");
+  const p = o(i, "div", "wallet-account-view modal-glass modal-wide");
+  p.setAttribute("data-wallet-account-view", "");
+  const h = o(i, "div", "modal-header account-modal-header"), j = o(i, "div", "account-header-info"), y = o(i, "div", "account-wallet-row"), l = o(i, "select", "glass-input compact account-wallet-select");
+  l.setAttribute("aria-label", "Select wallet"), y.append(l);
+  const B = o(i, "div", "account-wallet-summary"), v = o(i, "div", "account-wallet-balance-line"), w = o(i, "div", "ph-portfolio-value");
+  w.id = "wallet-bond-value";
+  const L = o(i, "div", "ph-portfolio-label");
+  v.append(w, L), B.append(v);
+  const A = o(i, "div", "account-header-title"), C = o(i, "span", "account-header-name"), I = o(i, "span", "account-header-chips");
+  A.append(C, I), j.append(y, B, A);
+  const d = o(i, "div", "account-header-actions"), S = g(i, "modal-close account-modal-close", "×", "Close");
+  S.setAttribute("aria-label", "Close"), d.append(S), h.append(j, d);
+  const P = o(i, "div", "modal-tabs");
+  P.setAttribute("role", "tablist");
+  const k = o(i, "div", "modal-body"), b = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map();
+  for (const e of f) {
+    const a = g(i, "modal-tab", m(e.label ?? e.id));
+    a.dataset.modalTab = `${e.id}-tab-content`, a.setAttribute("role", "tab");
+    const c = o(i, "div", "modal-tab-content");
+    c.id = `${e.id}-tab-content`, c.setAttribute("role", "tabpanel"), O.set(e.id, a), b.set(e.id, c), P.append(a), k.append(c);
+  }
+  p.append(h, P, k);
+  let T = null;
+  function E(e) {
+    if (b.has(e)) {
+      T = e;
+      for (const [a, c] of O) {
+        const s = a === e;
+        c.classList.toggle("active", s), c.setAttribute("aria-selected", s ? "true" : "false"), b.get(a).classList.toggle("active", s);
+      }
+      typeof t.onTabChange == "function" && t.onTabChange(e);
+    }
+  }
+  for (const [e, a] of O)
+    a.addEventListener("click", () => E(e));
+  const U = b.get("identity"), R = D(i, t.identity ?? {}, U);
+  for (const e of f)
+    typeof e.render == "function" && e.render(b.get(e.id));
+  S.addEventListener("click", () => {
+    typeof t.onClose == "function" && t.onClose();
+  }), l.addEventListener("change", () => {
+    typeof t.onWalletChange == "function" && t.onWalletChange(l.value);
+  });
+  function u(e) {
+    for (const a of [...d.querySelectorAll(".account-header-action")]) a.remove();
+    for (const a of Array.isArray(e) ? e : []) {
+      if (!a || typeof a.label != "string") continue;
+      const c = g(
+        i,
+        `glass-btn small account-header-action${a.variant ? ` ${a.variant}` : ""}`,
+        a.label,
+        a.title
+      );
+      c.addEventListener("click", () => {
+        typeof a.onClick == "function" && a.onClick();
+      }), d.insertBefore(c, S);
+    }
+  }
+  function M(e) {
+    I.replaceChildren();
+    for (const a of Array.isArray(e) ? e : []) {
+      if (!a || typeof a.label != "string") continue;
+      const c = o(i, "span", `account-chip${a.tone ? ` chip-${a.tone}` : ""}`, a.label);
+      a.title && (c.title = a.title), I.append(c);
+    }
+  }
+  function n(e, a) {
+    l.replaceChildren();
+    const c = Array.isArray(e) ? e : [];
+    for (const s of c) {
+      if (!s || typeof s.id != "string") continue;
+      const W = o(i, "option", "", m(s.name ?? s.id));
+      W.value = s.id, l.append(W);
+    }
+    l.hidden = c.length === 0, typeof a == "string" && c.some((s) => s?.id === a) && (l.value = a);
+  }
+  function r(e = {}) {
+    "title" in e && (C.textContent = m(e.title)), "bond" in e && (w.textContent = m(e.bond?.value ?? ""), L.textContent = m(e.bond?.label ?? "Bond")), "chips" in e && M(e.chips), "actions" in e && u(e.actions), ("wallets" in e || "activeWalletId" in e) && n(e.wallets ?? t.wallets, e.activeWalletId ?? t.activeWalletId), "identity" in e && R.update(e.identity ?? {}), "activeTabId" in e && E(e.activeTabId);
+  }
+  return r({
+    title: t.title ?? "",
+    bond: t.bond ?? {},
+    chips: t.chips,
+    actions: t.actions,
+    wallets: t.wallets,
+    activeWalletId: t.activeWalletId
+  }), E(
+    typeof t.activeTabId == "string" && b.has(t.activeTabId) ? t.activeTabId : f[0].id
+  ), {
+    element: p,
+    panel: (e) => b.get(e) ?? null,
+    getActiveTab: () => T,
+    setActiveTab: E,
+    update: r,
+    destroy() {
+      R.destroy(), p.remove();
+    }
+  };
+}
+function N(t, i = {}) {
+  if (!t || typeof t.append != "function")
+    throw new Error("mountAccountView requires a container element");
+  const f = q({ document: t.ownerDocument, ...i });
+  return t.append(f.element), f;
+}
+function D(t, i, f) {
+  const p = o(t, "div", "identity-card"), h = o(t, "div", "identity-card-photo"), j = o(t, "div", "photo-preview"), y = o(t, "img", "photo-image");
+  y.alt = "", y.hidden = !0;
+  const l = o(t, "video", "photo-camera");
+  l.autoplay = !0, l.playsInline = !0, l.hidden = !0;
+  const B = o(t, "div", "photo-actions"), v = o(t, "input", "photo-file-input");
+  v.type = "file", v.accept = z.join(","), v.hidden = !0;
+  const w = g(t, "glass-btn small", "Upload"), L = g(t, "glass-btn small", "Use Camera"), A = g(t, "glass-btn small primary", "Capture"), C = g(t, "glass-btn small", "Cancel"), I = g(t, "glass-btn small", "Remove");
+  A.hidden = !0, C.hidden = !0, B.append(w, L, A, C, I, v), j.append(y, l);
+  const d = o(t, "p", "photo-status");
+  h.append(j, B, d);
+  const S = o(t, "div", "identity-fields"), P = o(t, "div", "identity-save-row"), k = g(t, "glass-btn primary", "Save"), b = o(t, "span", "identity-save-status");
+  P.append(k, b), p.append(h, S, P), f && f.append(p);
+  const O = /* @__PURE__ */ new Map();
+  let T = null;
+  function E() {
+    if (T) {
+      for (const n of T.getTracks()) n.stop();
+      T = null;
+    }
+    l.hidden = !0, "srcObject" in l && (l.srcObject = null), A.hidden = !0, C.hidden = !0, L.hidden = !1, w.hidden = !1;
+  }
+  function U(n) {
+    S.replaceChildren(), O.clear();
+    let r = !1;
+    for (const e of Array.isArray(n) ? n : []) {
+      if (!e || typeof e.id != "string") continue;
+      const a = o(t, "div", "identity-field"), c = o(t, "label", "identity-field-label", m(e.label ?? e.id));
+      if (a.append(c), e.readOnly) {
+        const s = o(t, "div", "identity-field-value", m(e.value));
+        e.title && (s.title = e.title), a.append(s);
+      } else {
+        r = !0;
+        const s = o(t, e.multiline ? "textarea" : "input", "glass-input identity-field-input");
+        e.multiline || (s.type = "text"), s.value = m(e.value), e.placeholder && (s.placeholder = e.placeholder);
+        const W = `identity-field-${e.id}`;
+        s.id = W, c.setAttribute("for", W), O.set(e.id, s), a.append(s);
+      }
+      e.note && a.append(o(t, "p", "identity-field-note", m(e.note))), S.append(a);
+    }
+    P.hidden = !r;
+  }
+  function R(n) {
+    const r = m(n);
+    y.hidden = r === "", r ? y.src = r : y.removeAttribute("src"), I.hidden = r === "";
+  }
+  function u(n, r, e) {
+    n.textContent = m(r), n.className = n.className.split(" ").filter((a) => !a.startsWith("status-")).join(" "), e && n.classList.add(`status-${e}`);
+  }
+  async function M(n) {
+    if (typeof i.onPhoto == "function") {
+      u(d, "Pinning…", "busy");
+      try {
+        await i.onPhoto(n), u(d, "", null);
+      } catch (r) {
+        u(d, r?.message || "The photo could not be stored.", "error");
+      }
+    }
+  }
+  return w.addEventListener("click", () => v.click()), v.addEventListener("change", () => {
+    const n = v.files && v.files[0];
+    v.value = "", n && M(n);
+  }), L.addEventListener("click", async () => {
+    const n = t.defaultView?.navigator?.mediaDevices;
+    if (!n || typeof n.getUserMedia != "function") {
+      u(d, "This browser has no camera available.", "error");
+      return;
+    }
+    try {
+      T = await n.getUserMedia({ video: !0 });
+    } catch {
+      u(d, "Camera access was refused.", "error");
+      return;
+    }
+    "srcObject" in l && (l.srcObject = T), l.hidden = !1, A.hidden = !1, C.hidden = !1, L.hidden = !0, w.hidden = !0, u(d, "", null);
+  }), C.addEventListener("click", E), A.addEventListener("click", async () => {
+    const n = t.createElement("canvas");
+    n.width = l.videoWidth || 512, n.height = l.videoHeight || 512;
+    const r = typeof n.getContext == "function" ? n.getContext("2d") : null;
+    if (!r) {
+      u(d, "This browser cannot capture from the camera.", "error");
+      return;
+    }
+    r.drawImage(l, 0, 0, n.width, n.height), E();
+    const e = await new Promise((a) => {
+      typeof n.toBlob == "function" ? n.toBlob(a, "image/png") : a(null);
+    });
+    e ? await M(e) : u(d, "The capture produced no image.", "error");
+  }), I.addEventListener("click", async () => {
+    if (typeof i.onPhotoRemove == "function") {
+      u(d, "Removing…", "busy");
+      try {
+        await i.onPhotoRemove(), u(d, "", null);
+      } catch (n) {
+        u(d, n?.message || "The photo could not be removed.", "error");
+      }
+    }
+  }), k.addEventListener("click", async () => {
+    if (typeof i.onSave != "function") return;
+    const n = {};
+    for (const [r, e] of O) n[r] = e.value;
+    k.disabled = !0, u(b, "Saving…", "busy");
+    try {
+      await i.onSave(n), u(b, "Saved", "ok");
+    } catch (r) {
+      u(b, r?.message || "The change could not be saved.", "error");
+    } finally {
+      k.disabled = !1;
+    }
+  }), U(i.fields), R(i.photoUrl), {
+    update(n = {}) {
+      "fields" in n && U(n.fields), "photoUrl" in n && R(n.photoUrl), "photoStatus" in n && u(d, n.photoStatus?.text, n.photoStatus?.tone), "saveStatus" in n && u(b, n.saveStatus?.text, n.saveStatus?.tone), typeof n.onSave == "function" && (i.onSave = n.onSave), typeof n.onPhoto == "function" && (i.onPhoto = n.onPhoto), typeof n.onPhotoRemove == "function" && (i.onPhotoRemove = n.onPhotoRemove);
+    },
+    destroy: E
+  };
+}
+export {
+  $ as DEFAULT_ACCOUNT_TABS,
+  q as createAccountView,
+  N as mountAccountView
+};

package/dist/client/sdn.d.ts

@@ -1,8 +1,10 @@
 import type {
   SdnWalletClient,
+  SpaceAwarePublishWalletClient,
   WalletClientErrorMessages,
 } from './types.js';
 
 export declare const WALLET_CLIENT_ERRORS: WalletClientErrorMessages;
 
 export declare function createSdnWalletClient(): SdnWalletClient;
+export declare function createSpaceAwarePublishWalletClient(): SpaceAwarePublishWalletClient;