website_next: part 3

website_next/wallets/add/index.js

@@ -1,5 +1,5 @@
 import { createField } from "../form/index.js";
-import { createElement } from "../dom.js";
+import { createWalletPart } from "../dom.js";
 import { redaction } from "../redaction/index.js";
 
 /**
@@ -34,7 +34,7 @@ function createSourceInput() {
  * @param {AddWalletFormOptions} options
  */
 export function createAddForm(options) {
-  const form = createElement("form", "add");
+  const form = createWalletPart("form", "add");
   const title = document.createElement("h2");
   const description = document.createElement("p");
   const name = document.createElement("input");

website_next/wallets/add/style.css

@@ -1,5 +1,5 @@
-main.wallets {
-  .add {
+main[data-page="wallets"] {
+  [data-wallet="add"] {
     display: grid;
     gap: 1.25rem;
 

website_next/wallets/amount/index.js

@@ -2,7 +2,6 @@ import { renderBtcAmount as renderVisibleBtcAmount } from "../../btc/index.js";
 import { redaction } from "../redaction/index.js";
 
 const FIXED_PRIVATE_TEXT = "*****";
-const amounts = /** @type {BtcAmountRecord[]} */ ([]);
 
 /**
  * @typedef {Object} BtcAmountOptions
@@ -11,10 +10,6 @@ const amounts = /** @type {BtcAmountRecord[]} */ ([]);
  * @typedef {Object} BtcAmount
  * @property {number} sats
  * @property {boolean} signed
- *
- * @typedef {Object} BtcAmountRecord
- * @property {HTMLElement} element
- * @property {BtcAmount} amount
  */
 
 /**
@@ -45,20 +40,7 @@ export function createBtcAmount(tag, sats, options = {}) {
     signed: options.signed === true,
   };
 
-  amounts.push({ element, amount });
-  renderBtcAmount(element, amount);
+  redaction.addEffect(element, () => renderBtcAmount(element, amount));
 
   return element;
 }
-
-export function syncBtcAmounts() {
-  for (let index = amounts.length - 1; index >= 0; index -= 1) {
-    const { element, amount } = amounts[index];
-
-    if (!element.isConnected) {
-      amounts.splice(index, 1);
-    } else {
-      renderBtcAmount(element, amount);
-    }
-  }
-}

website_next/wallets/dom.js

@@ -1,12 +1,12 @@
 /**
  * @template {keyof HTMLElementTagNameMap} Tag
  * @param {Tag} tag
- * @param {string} className
+ * @param {string} part
  */
-export function createElement(tag, className) {
+export function createWalletPart(tag, part) {
   const element = document.createElement(tag);
 
-  element.className = className;
+  element.dataset.wallet = part;
 
   return element;
 }

website_next/wallets/empty/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "../dom.js";
+import { createWalletPart } from "../dom.js";
 
 /**
  * @typedef {Object} EmptyOptions
@@ -10,7 +10,7 @@ import { createElement } from "../dom.js";
  * @param {EmptyOptions} options
  */
 export function createEmpty(options) {
-  const empty = createElement("section", "empty");
+  const empty = createWalletPart("section", "empty");
   const title = document.createElement("h1");
   const text = document.createElement("p");
   const actions = document.createElement("menu");

website_next/wallets/empty/style.css

@@ -1,5 +1,5 @@
-main.wallets {
-  .empty {
+main[data-page="wallets"] {
+  [data-wallet="empty"] {
     display: grid;
     gap: 1rem;
     place-content: center;
@@ -9,7 +9,7 @@ main.wallets {
     h1 {
       margin: 0;
       font-size: 4rem;
-      font-weight: 400;
+      font-weight: var(--font-weight-regular);
       line-height: 1;
     }
 

website_next/wallets/form/style.css

@@ -1,4 +1,4 @@
-main.wallets {
+main[data-page="wallets"] {
   label {
     display: grid;
     gap: 0.375rem;

website_next/wallets/hold/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "../dom.js";
+import { createWalletPart } from "../dom.js";
 
 const FILL_MS = 2_000;
 const DRAIN_MS = 600;
@@ -24,7 +24,7 @@ function bindHold(button, onHold) {
   function render() {
     button.style.setProperty("--hold-progress", String(progress));
     button.style.setProperty("--hold-progress-width", `${progress * 100}%`);
-    button.classList.toggle("active", progress > 0);
+    button.toggleAttribute("data-active", progress > 0);
   }
 
   function stop() {
@@ -49,7 +49,7 @@ function bindHold(button, onHold) {
       stop();
       holding = false;
       progress = 0;
-      button.classList.remove("holding");
+      button.removeAttribute("data-holding");
       render();
       onHold();
       return;
@@ -74,7 +74,7 @@ function bindHold(button, onHold) {
     if (!holding) return;
 
     holding = false;
-    button.classList.remove("holding");
+    button.removeAttribute("data-holding");
     run();
   }
 
@@ -82,7 +82,7 @@ function bindHold(button, onHold) {
     stop();
 
     holding = true;
-    button.classList.add("holding");
+    button.dataset.holding = "";
     run();
   }
 
@@ -115,16 +115,14 @@ function bindHold(button, onHold) {
  * @param {Object} options
  * @param {string} options.label
  * @param {string} options.title
- * @param {string} [options.className]
+ * @param {string} [options.variant]
  * @param {() => void} options.onHold
  */
 export function createHoldButton(options) {
-  const button = createElement("button", "hold");
+  const button = createWalletPart("button", "hold");
   const label = document.createElement("span");
 
-  if (options.className) {
-    button.classList.add(options.className);
-  }
+  if (options.variant) button.dataset.variant = options.variant;
   button.type = "button";
   button.dataset.label = options.label;
   button.title = options.title;

website_next/wallets/hold/style.css

@@ -1,5 +1,5 @@
-main.wallets {
-  .hold {
+main[data-page="wallets"] {
+  [data-wallet="hold"] {
     position: relative;
     isolation: isolate;
     overflow: hidden;
@@ -40,23 +40,23 @@ main.wallets {
     }
 
     @media (hover: hover) and (pointer: fine) {
-      &:hover:not(.holding) {
+      &:hover:not([data-holding]) {
         color: var(--red);
         background: transparent;
       }
     }
 
-    &:is(:focus-visible, :active, [data-press]):not(.holding) {
+    &:is(:focus-visible, :active, [data-press]):not([data-holding]) {
       color: var(--red);
       background: transparent;
     }
 
-    &.active {
+    &[data-active] {
       color: var(--red);
     }
 
-    &.active::before,
-    &.active::after {
+    &[data-active]::before,
+    &[data-active]::after {
       opacity: 1;
     }
   }

website_next/wallets/index.js

@@ -18,7 +18,6 @@ import {
 } from "./wallet/index.js";
 import { createVault } from "./vault/index.js";
 import { generateAddressesFromWalletSource } from "./derive/index.js";
-import { syncBtcAmounts } from "./amount/index.js";
 
 /**
  * @typedef {import("./scan/index.js").WalletScan} WalletScan
@@ -106,7 +105,6 @@ export function createWalletsPage() {
 
   privacyButton.addEventListener("click", () => {
     redaction.toggle(privacyButton);
-    syncBtcAmounts();
   });
 
   sessionButton.addEventListener("click", () => {

website_next/wallets/layout/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "../dom.js";
+import { createWalletPart } from "../dom.js";
 
 /**
  * @typedef {Object} WalletsLayout
@@ -16,15 +16,16 @@ import { createElement } from "../dom.js";
  * @returns {WalletsLayout}
  */
 export function createLayout() {
-  const main = createElement("main", "wallets");
+  const main = document.createElement("main");
   const utilities = document.createElement("footer");
   const privacyButton = document.createElement("button");
   const sessionButton = document.createElement("button");
-  const selector = createElement("section", "selector");
+  const selector = createWalletPart("section", "selector");
   const walletList = document.createElement("nav");
   const content = document.createElement("article");
   const addDialog = document.createElement("dialog");
 
+  main.dataset.page = "wallets";
   privacyButton.type = "button";
   sessionButton.type = "button";
   sessionButton.append("Lock");

website_next/wallets/layout/style.css

@@ -1,4 +1,4 @@
-main.wallets {
+main[data-page="wallets"] {
   > footer {
     position: fixed;
     right: var(--page-x);

website_next/wallets/lookup/index.js

@@ -106,22 +106,31 @@ function isNotFound(error) {
   );
 }
 
+/**
+ * @param {AddressClient} client
+ * @param {string} address
+ * @param {Map<string, Promise<AddressStats>>} cache
+ */
+function getBucketMetadata(client, address, cache) {
+  let metadata = cache.get(address);
+
+  if (!metadata) {
+    metadata = client.getAddress(address, { cache: false });
+    cache.set(address, metadata);
+  }
+
+  return metadata;
+}
+
 /**
  * @param {AddressClient} client
  * @param {readonly string[]} addresses
  * @param {Map<string, Promise<AddressStats>>} cache
  */
 async function fetchBucketMetadata(client, addresses, cache) {
-  for (const address of addresses) {
-    if (!cache.has(address)) {
-      cache.set(
-        address,
-        client.getAddress(address, { cache: false }),
-      );
-    }
-  }
-
-  await Promise.all(addresses.map((address) => cache.get(address)));
+  await Promise.all(
+    addresses.map((address) => getBucketMetadata(client, address, cache)),
+  );
 }
 
 /**
@@ -160,18 +169,18 @@ async function fetchWalletAddress(client, generated, metadataCache) {
 
   await fetchBucketMetadata(client, matches.addresses, metadataCache);
 
-  const stats = await metadataCache.get(generated.address);
-
-  if (!stats) {
-    return createEmptyWalletAddress(generated);
-  }
+  const stats = await getBucketMetadata(
+    client,
+    generated.address,
+    metadataCache,
+  );
 
   const historyAddresses = [];
 
   for (const address of matches.addresses) {
-    const bucketStats = await metadataCache.get(address);
+    const bucketStats = await getBucketMetadata(client, address, metadataCache);
 
-    if (bucketStats && getAddressTxCount(bucketStats) > 0) {
+    if (getAddressTxCount(bucketStats) > 0) {
       historyAddresses.push(address);
     }
   }

website_next/wallets/lookup/local.js

@@ -6,20 +6,27 @@ const localDomains = new Set([
   "[::1]",
 ]);
 
+/**
+ * @param {string} domain
+ */
+function isIpv4Octet(domain) {
+  return /^\d+$/.test(domain);
+}
+
 /**
  * @param {string} domain
  */
 function isPrivateIpv4(domain) {
-  const parts = domain.split(".").map(Number);
+  const parts = domain.split(".");
 
   if (
     parts.length !== 4 ||
-    parts.some((part) => !Number.isInteger(part) || part < 0 || part > 255)
+    parts.some((part) => !isIpv4Octet(part) || Number(part) > 255)
   ) {
     return false;
   }
 
-  const [a, b] = parts;
+  const [a, b] = parts.map(Number);
 
   return (
     a === 10 ||

website_next/wallets/read.js

@@ -0,0 +1,28 @@
+/** @param {unknown} value */
+export function readObject(value) {
+  return value && typeof value === "object"
+    ? /** @type {Record<string, unknown>} */ (value)
+    : undefined;
+}
+
+/** @param {unknown} value */
+export function readNumber(value) {
+  return typeof value === "number" && Number.isFinite(value)
+    ? value
+    : undefined;
+}
+
+/** @param {unknown} value */
+export function readString(value) {
+  return typeof value === "string" ? value : undefined;
+}
+
+/**
+ * @param {unknown} value
+ * @param {string} key
+ */
+export function readArray(value, key) {
+  const array = readObject(value)?.[key];
+
+  return Array.isArray(array) ? array : [];
+}

website_next/wallets/redaction/index.js

@@ -132,6 +132,7 @@ function toggle(button) {
 export const redaction = /** @type {const} */ ({
   isHidden,
   createText,
+  addEffect,
   setValue,
   setTitle,
   setAddress,

website_next/wallets/scan/activity.js

@@ -0,0 +1,4 @@
+/** @param {{ received: number, sent: number, txCount: number }} address */
+export function isUsedAddress(address) {
+  return address.received > 0 || address.sent > 0 || address.txCount > 0;
+}

website_next/wallets/scan/branch.js

@@ -1,5 +1,6 @@
 import { fetchWalletAddresses } from "../lookup/index.js";
 import { generateAddressesFromWalletSource } from "../derive/index.js";
+import { isUsedAddress } from "./activity.js";
 
 export const GAP_LIMIT = 10;
 
@@ -34,13 +35,6 @@ const MAX_SCANNED_ADDRESSES = 1_000;
  * @property {boolean} maxed
  */
 
-/**
- * @param {WalletAddress} address
- */
-function isUsedAddress(address) {
-  return address.received > 0 || address.sent > 0 || address.txCount > 0;
-}
-
 /**
  * @param {AddressClient} client
  * @param {string} source

website_next/wallets/scan/branches.js

@@ -6,6 +6,7 @@ import {
   getOutputDescriptorBranchIds,
   isOutputDescriptor,
 } from "../derive/index.js";
+import { isUsedAddress } from "./activity.js";
 
 const keyBranches = /** @type {const} */ ([
   { id: "receive", label: "Receive", path: [0] },
@@ -58,13 +59,6 @@ const descriptorBranches = /** @type {const} */ ([
  * @property {boolean} maxed
  */
 
-/**
- * @param {WalletAddress} address
- */
-function isUsedAddress(address) {
-  return address.received > 0 || address.sent > 0 || address.txCount > 0;
-}
-
 /**
  * @param {ScannedAddress} a
  * @param {ScannedAddress} b

website_next/wallets/selector/index.js

@@ -30,7 +30,7 @@ function renderButtons(walletList, wallets, options) {
   const remove = createHoldButton({
     label: "DELETE",
     title: "Hold to delete",
-    className: "delete",
+    variant: "delete",
     onHold: options.onDelete,
   });
 

website_next/wallets/selector/style.css

@@ -1,5 +1,5 @@
-main.wallets {
-  .selector {
+main[data-page="wallets"] {
+  [data-wallet="selector"] {
     min-width: 0;
 
     > nav {
@@ -18,7 +18,7 @@ main.wallets {
         background: var(--gray);
         color: var(--white);
         font-size: var(--font-size-lg);
-        font-weight: 400;
+        font-weight: var(--font-weight-regular);
         line-height: 1;
 
         @media (max-width: 56rem) {
@@ -47,7 +47,7 @@ main.wallets {
           background: var(--white);
         }
 
-        &.delete {
+        &[data-variant="delete"] {
           color: color-mix(in oklch, var(--gray) 76%, transparent);
           background: transparent;
 

website_next/wallets/start/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "../dom.js";
+import { createWalletPart } from "../dom.js";
 import { createPersistentVault } from "./persistent.js";
 import { createStartStory } from "./story.js";
 import { createTemporaryVault } from "./temporary.js";
@@ -15,12 +15,11 @@ import { createTemporaryVault } from "./temporary.js";
  * @property {() => void} [onReset]
  */
 
-
 /**
  * @param {StartOptions} options
  */
 export function createStart(options) {
-  const section = createElement("section", "start");
+  const section = createWalletPart("section", "start");
   const modes = document.createElement("div");
   const divider = document.createElement("p");
   const persistent = createPersistentVault({

website_next/wallets/start/reset/index.js

@@ -7,7 +7,7 @@ export function createResetButton(onReset) {
   return createHoldButton({
     label: "Reset vault",
     title: "Hold to reset",
-    className: "reset",
+    variant: "reset",
     onHold: onReset,
   });
 }

website_next/wallets/start/reset/style.css

@@ -1,6 +1,6 @@
-main.wallets {
-  .start {
-    .reset {
+main[data-page="wallets"] {
+  [data-wallet="start"] {
+    [data-variant="reset"] {
       justify-self: start;
       width: 100%;
     }

website_next/wallets/start/style.css

@@ -1,5 +1,5 @@
-main.wallets {
-  .start {
+main[data-page="wallets"] {
+  [data-wallet="start"] {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem);
     gap: 4rem;
@@ -24,7 +24,7 @@ main.wallets {
     h1 {
       margin: 0;
       font-size: 4.5rem;
-      font-weight: 400;
+      font-weight: var(--font-weight-regular);
       line-height: 0.95;
 
       span {
@@ -126,7 +126,7 @@ main.wallets {
         color: var(--white);
         font-family: var(--font-mono);
         font-size: var(--font-size-sm);
-        font-weight: 400;
+        font-weight: var(--font-weight-regular);
         line-height: var(--line-height-sm);
       }
 

website_next/wallets/style.css

@@ -1,4 +1,4 @@
-main.wallets {
+main[data-page="wallets"] {
   --offset: 4rem;
   --content-width: 72rem;
 
@@ -20,7 +20,7 @@ main.wallets {
     line-height: var(--line-height-sm);
   }
 
-  .results {
+  [data-wallet="results"] {
     min-width: 0;
   }
 

website_next/wallets/vault/storage.js

@@ -1,3 +1,4 @@
+import { readArray, readObject } from "../read.js";
 import { encryption } from "./encryption.js";
 
 const STORAGE_KEY = "bitview.wallets.v3";
@@ -31,9 +32,9 @@ const STORAGE_KEY = "bitview.wallets.v3";
  * @returns {EncryptedSecret | undefined}
  */
 function readEncryptedVault(value) {
-  return value && typeof value === "object"
-    ? /** @type {EncryptedSecret} */ (value)
-    : undefined;
+  const vault = readObject(value);
+
+  return vault ? /** @type {EncryptedSecret} */ (vault) : undefined;
 }
 
 /**
@@ -41,13 +42,9 @@ function readEncryptedVault(value) {
  * @returns {WalletVault}
  */
 function readVault(value) {
-  if (!value || typeof value !== "object" || !("wallets" in value)) {
-    return { wallets: [] };
-  }
-
-  return Array.isArray(value.wallets)
-    ? /** @type {WalletVault} */ (value)
-    : { wallets: [] };
+  return {
+    wallets: /** @type {StoredWallet[]} */ (readArray(value, "wallets")),
+  };
 }
 
 function createWalletId() {

website_next/wallets/wallet/address/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "../../dom.js";
+import { createWalletPart } from "../../dom.js";
 import { formatNumber } from "../../format.js";
 import { redaction } from "../../redaction/index.js";
 
@@ -10,7 +10,7 @@ import { redaction } from "../../redaction/index.js";
  * @param {string} text
  */
 export function createGroupedAddress(text) {
-  const element = createElement("code", "address");
+  const element = createWalletPart("code", "address");
   const groups = text.match(/.{1,4}/g) ?? [];
 
   for (let groupIndex = 0; groupIndex < groups.length; groupIndex += 1) {
@@ -65,7 +65,7 @@ function createAddressBadge(row) {
  * @param {WalletAddress} row
  */
 export function createAddressCellContent(row) {
-  const element = createElement("div", "address-cell");
+  const element = createWalletPart("div", "address-cell");
   const anonSet = document.createElement("small");
 
   anonSet.append(`anon set: ${formatNumber(row.historyBucketSize)}`);

website_next/wallets/wallet/address/style.css

@@ -1,5 +1,5 @@
-main.wallets {
-  .address-cell {
+main[data-page="wallets"] {
+  [data-wallet="address-cell"] {
     display: grid;
     gap: 0.25rem;
 
@@ -12,7 +12,7 @@ main.wallets {
       border-radius: 0.25rem;
       padding: 0 0.25rem;
       color: color-mix(in oklch, var(--white) 76%, var(--gray));
-      font-weight: 400;
+      font-weight: var(--font-weight-regular);
       line-height: 1;
     }
 
@@ -23,7 +23,7 @@ main.wallets {
     }
   }
 
-  .address {
+  [data-wallet="address"] {
     display: flex;
     flex-wrap: wrap;
     gap: 0 0.375rem;

website_next/wallets/wallet/addresses/index.js

@@ -1,5 +1,5 @@
 import { createBtcAmount } from "../../amount/index.js";
-import { createElement } from "../../dom.js";
+import { createWalletPart } from "../../dom.js";
 import { formatNumber } from "../../format.js";
 import { createAddressCellContent } from "../address/index.js";
 
@@ -31,7 +31,7 @@ function createAddressRow(address) {
  * @param {readonly WalletAddress[]} addresses
  */
 function renderAddresses(panel, addresses) {
-  const section = createElement("section", "addresses");
+  const section = createWalletPart("section", "addresses");
   const title = document.createElement("h2");
   const list = document.createElement("ol");
 

website_next/wallets/wallet/addresses/style.css

@@ -1,5 +1,5 @@
-main.wallets {
-  .addresses {
+main[data-page="wallets"] {
+  [data-wallet="addresses"] {
     display: grid;
     gap: 1rem;
 
@@ -10,7 +10,7 @@ main.wallets {
     h2 {
       color: var(--white);
       font-size: var(--font-size-lg);
-      font-weight: 400;
+      font-weight: var(--font-weight-regular);
       line-height: var(--line-height-lg);
     }
 

website_next/wallets/wallet/bucket-key.js

@@ -0,0 +1,4 @@
+/** @param {readonly string[]} addresses */
+export function createBucketKey(addresses) {
+  return [...addresses].sort().join("\n");
+}

website_next/wallets/wallet/history/address.js

@@ -1,4 +1,5 @@
 import { mapConcurrent } from "../../concurrent.js";
+import { createBucketKey } from "../bucket-key.js";
 
 const HISTORY_CONCURRENCY = 4;
 const MAX_SELECTED_ADDRESS_TXS = 100;
@@ -21,13 +22,6 @@ const historyByBucketKey =
  * @property {ApiTransaction[]} transactions
  */
 
-/**
- * @param {readonly string[]} addresses
- */
-function createBucketKey(addresses) {
-  return [...addresses].sort().join("\n");
-}
-
 /**
  * @param {AddressHistoryClient} client
  * @param {readonly string[]} addresses

website_next/wallets/wallet/history/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "../../dom.js";
+import { createWalletPart } from "../../dom.js";
 import { historyCache } from "./cache.js";
 import { createTransactionSection } from "./section.js";
 
@@ -29,7 +29,7 @@ function groupTransactionsByDate(transactions) {
  * @param {readonly WalletTransaction[]} transactions
  */
 function renderHistory(element, transactions) {
-  const activity = createElement("section", "activity");
+  const activity = createWalletPart("section", "activity");
   const title = document.createElement("h2");
   const groups = groupTransactionsByDate(transactions);
 

website_next/wallets/wallet/history/row.js

@@ -61,10 +61,10 @@ export function createTransactionRow(transaction) {
 
   label.append(typeLabels[transaction.type]);
   if (transaction.amount > 0) {
-    amount.classList.add("positive");
+    amount.dataset.tone = "positive";
   }
   if (transaction.amount < 0) {
-    amount.classList.add("negative");
+    amount.dataset.tone = "negative";
   }
   redaction.setTitle(txid, transaction.txid);
   redaction.setValue(txid, formatTxid(transaction.txid));

website_next/wallets/wallet/history/style.css

@@ -1,5 +1,5 @@
-main.wallets {
-  .activity {
+main[data-page="wallets"] {
+  [data-wallet="activity"] {
     display: grid;
     gap: 1.25rem;
 
@@ -10,14 +10,14 @@ main.wallets {
     h2 {
       color: var(--white);
       font-size: var(--font-size-lg);
-      font-weight: 400;
+      font-weight: var(--font-weight-regular);
       line-height: var(--line-height-lg);
     }
 
     h3 {
       color: var(--gray);
       font-size: var(--font-size-xs);
-      font-weight: 400;
+      font-weight: var(--font-weight-regular);
       line-height: var(--line-height-xs);
       text-transform: uppercase;
     }
@@ -68,18 +68,18 @@ main.wallets {
 
                 strong {
                   color: var(--white);
-                  font-weight: 500;
+                  font-weight: var(--font-weight-strong);
                 }
 
                 > span {
                   color: var(--white);
                   white-space: nowrap;
 
-                  &.positive {
+                  &[data-tone="positive"] {
                     color: var(--green);
                   }
 
-                  &.negative {
+                  &[data-tone="negative"] {
                     color: var(--red);
                   }
                 }

website_next/wallets/wallet/history/transaction.js

@@ -1,3 +1,5 @@
+import { readArray, readNumber, readObject, readString } from "../../read.js";
+
 /**
  * @typedef {import("../../scan/index.js").WalletAddress} WalletAddress
  * @typedef {Record<string, unknown>} ApiTransaction
@@ -20,41 +22,6 @@
  * @property {unknown} raw
  */
 
-/**
- * @param {unknown} value
- */
-function readObject(value) {
-  return value && typeof value === "object"
-    ? /** @type {Record<string, unknown>} */ (value)
-    : undefined;
-}
-
-/**
- * @param {unknown} value
- */
-function readNumber(value) {
-  return typeof value === "number" && Number.isFinite(value)
-    ? value
-    : undefined;
-}
-
-/**
- * @param {unknown} value
- */
-function readString(value) {
-  return typeof value === "string" ? value : undefined;
-}
-
-/**
- * @param {unknown} value
- * @param {string} key
- */
-function readArray(value, key) {
-  const array = readObject(value)?.[key];
-
-  return Array.isArray(array) ? array : [];
-}
-
 /**
  * @param {unknown} output
  * @param {string} address

website_next/wallets/wallet/holdings/cache.js

@@ -1,4 +1,5 @@
 import { mapConcurrent } from "../../concurrent.js";
+import { createBucketKey } from "../bucket-key.js";
 
 const UTXO_CONCURRENCY = 4;
 
@@ -40,13 +41,6 @@ function isNotFound(error) {
   );
 }
 
-/**
- * @param {readonly string[]} addresses
- */
-function createBucketKey(addresses) {
-  return [...addresses].sort().join("\n");
-}
-
 /**
  * @param {UtxoClient} client
  * @param {string} address

website_next/wallets/wallet/holdings/index.js

@@ -1,5 +1,5 @@
 import { createBtcAmount } from "../../amount/index.js";
-import { createElement } from "../../dom.js";
+import { createWalletPart } from "../../dom.js";
 import { redaction } from "../../redaction/index.js";
 import { createAddressCellContent } from "../address/index.js";
 import { utxoCache } from "./cache.js";
@@ -75,7 +75,7 @@ async function loadWalletUtxos(client, addresses) {
  * @param {readonly WalletUtxo[]} utxos
  */
 function renderHoldings(panel, utxos) {
-  const section = createElement("section", "holdings");
+  const section = createWalletPart("section", "holdings");
   const title = document.createElement("h2");
   const list = document.createElement("ol");
 

website_next/wallets/wallet/holdings/style.css

@@ -1,5 +1,5 @@
-main.wallets {
-  .holdings {
+main[data-page="wallets"] {
+  [data-wallet="holdings"] {
     display: grid;
     gap: 1rem;
 
@@ -10,7 +10,7 @@ main.wallets {
     h2 {
       color: var(--white);
       font-size: var(--font-size-lg);
-      font-weight: 400;
+      font-weight: var(--font-weight-regular);
       line-height: var(--line-height-lg);
     }
 
@@ -52,7 +52,7 @@ main.wallets {
 
           strong {
             color: var(--white);
-            font-weight: 500;
+            font-weight: var(--font-weight-strong);
           }
         }
 
@@ -68,7 +68,7 @@ main.wallets {
           }
         }
 
-        > .address-cell {
+        > [data-wallet="address-cell"] {
           grid-column: 1 / -1;
         }
       }

website_next/wallets/wallet/holdings/utxo.js

@@ -1,3 +1,5 @@
+import { readNumber, readObject, readString } from "../../read.js";
+
 /**
  * @typedef {import("../../scan/index.js").WalletAddress} WalletAddress
  *
@@ -9,31 +11,6 @@
  * @property {boolean} confirmed
  */
 
-/**
- * @param {unknown} value
- */
-function readObject(value) {
-  return value && typeof value === "object"
-    ? /** @type {Record<string, unknown>} */ (value)
-    : undefined;
-}
-
-/**
- * @param {unknown} value
- */
-function readNumber(value) {
-  return typeof value === "number" && Number.isFinite(value)
-    ? value
-    : undefined;
-}
-
-/**
- * @param {unknown} value
- */
-function readString(value) {
-  return typeof value === "string" ? value : undefined;
-}
-
 /**
  * @param {unknown} utxo
  */

website_next/wallets/wallet/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "../dom.js";
+import { createWalletPart } from "../dom.js";
 import { createAddressesTab } from "./addresses/index.js";
 import { createHistoryTab } from "./history/index.js";
 import { createHoldingsTab } from "./holdings/index.js";
@@ -21,9 +21,9 @@ import { createWalletTabs } from "./tabs/index.js";
  * @returns {WalletPanel}
  */
 export function createWalletPanel() {
-  const summary = createElement("section", "summary");
+  const summary = createWalletPart("section", "summary");
   const status = document.createElement("output");
-  const results = createElement("section", "results");
+  const results = createWalletPart("section", "results");
 
   summary.setAttribute("aria-label", "Wallets summary");
   results.setAttribute("aria-label", "Wallets results");

website_next/wallets/wallet/receive/index.js

@@ -1,31 +1,13 @@
-import * as leanQr from "../../../modules/lean-qr/2.7.1/index.mjs";
+import { createQrDataUrl } from "../../../qr/index.js";
+import { openDialog } from "../../../dialog/index.js";
 import { createGroupedAddress } from "../address/index.js";
-import { createElement } from "../../dom.js";
+import { createWalletPart } from "../../dom.js";
 import { formatNumber } from "../../format.js";
 
 /**
  * @typedef {import("../../scan/index.js").WalletAddress} ReceiveAddress
  */
 
-/**
- * @typedef {Object} QrCode
- * @property {(options?: { scale?: number }) => string} toDataURL
- */
-
-const generateQr =
-  /** @type {(value: string) => QrCode | undefined} */ (
-    /** @type {unknown} */ (leanQr.generate)
-  );
-
-/**
- * @param {string} value
- */
-function createQrDataUrl(value) {
-  const qr = generateQr(value);
-
-  return qr?.toDataURL({ scale: 8 }) ?? "";
-}
-
 /**
  * @param {ReceiveAddress} receiveAddress
  */
@@ -47,7 +29,7 @@ function createReceiveQr(receiveAddress) {
   const uri = `bitcoin:${receiveAddress.address}`;
 
   image.alt = `QR code for ${receiveAddress.address}`;
-  image.src = createQrDataUrl(uri);
+  image.src = createQrDataUrl(uri, { scale: 8 });
 
   return image;
 }
@@ -77,7 +59,7 @@ async function copyReceiveAddress(receiveAddress, copy) {
  * @param {ReceiveAddress} receiveAddress
  */
 function openReceiveDialog(host, receiveAddress) {
-  const dialog = createElement("dialog", "receive");
+  const dialog = createWalletPart("dialog", "receive");
   const content = document.createElement("article");
   const actions = document.createElement("footer");
   const copy = document.createElement("button");
@@ -98,22 +80,13 @@ function openReceiveDialog(host, receiveAddress) {
     actions,
   );
   dialog.append(content);
-  host.append(dialog);
 
   copy.addEventListener("click", () => {
     void copyReceiveAddress(receiveAddress, copy).catch(() => {
       copy.textContent = "Copy failed";
     });
   });
-  dialog.addEventListener("close", () => {
-    dialog.remove();
-  });
-  dialog.addEventListener("click", (event) => {
-    if (event.target === dialog) {
-      dialog.close();
-    }
-  });
-  dialog.showModal();
+  openDialog(dialog, host);
 }
 
 /**

website_next/wallets/wallet/receive/style.css

@@ -1,5 +1,5 @@
-main.wallets {
-  dialog.receive {
+main[data-page="wallets"] {
+  dialog[data-wallet="receive"] {
     width: min(100% - 2rem, 32rem);
 
     > article {
@@ -9,7 +9,7 @@ main.wallets {
       > h2 {
         margin: 0;
         font-size: var(--font-size-lg);
-        font-weight: 400;
+        font-weight: var(--font-weight-regular);
         line-height: var(--line-height-lg);
       }
 

website_next/wallets/wallet/summary/style.css

@@ -1,5 +1,5 @@
-main.wallets {
-  .summary {
+main[data-page="wallets"] {
+  [data-wallet="summary"] {
     display: flex;
     gap: 1rem;
     align-items: end;
@@ -25,7 +25,7 @@ main.wallets {
         overflow-wrap: anywhere;
         color: var(--white);
         font-size: 4rem;
-        font-weight: 400;
+        font-weight: var(--font-weight-regular);
         line-height: 1;
       }
 

website_next/wallets/wallet/tabs/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "../../dom.js";
+import { createWalletPart } from "../../dom.js";
 
 /**
  * @typedef {Object} WalletTab
@@ -36,7 +36,7 @@ function setupTabPanel(tab) {
  * @param {readonly WalletTab[]} tabs
  */
 export function createWalletTabs(tabs) {
-  const element = createElement("section", "tabs");
+  const element = createWalletPart("section", "tabs");
   const nav = document.createElement("nav");
   const panels = document.createElement("div");
   const buttons = tabs.map(createTabButton);

website_next/wallets/wallet/tabs/style.css

@@ -1,5 +1,5 @@
-main.wallets {
-  .tabs {
+main[data-page="wallets"] {
+  [data-wallet="tabs"] {
     display: grid;
     gap: 1rem;
     min-width: 0;