@enbox/browser 0.3.57 → 0.3.59

package/src/ui/connect-modal.ts

@@ -346,6 +346,19 @@ function createRelaySession(): RelaySession {
   return session as RelaySession;
 }
 
+/**
+ * Wraps `settler` so the returned thunk runs it through `settle()`. Defined
+ * at module scope — not as an inline closure inside each render function —
+ * so the returned closure is lexically nested one level (inside this
+ * function), not several levels inside `runConnectModal()`'s own render
+ * closures (Sonar S2004). `settle` and `settler` are threaded through
+ * unchanged, so behavior is identical to writing `() => settle(settler)`
+ * inline.
+ */
+function settleWith(settle: (settler: () => void) => void, settler: () => void): () => void {
+  return () => settle(settler);
+}
+
 /**
  * Opens the connect modal and resolves when the session ends.
  *
@@ -410,7 +423,7 @@ export function runConnectModal(options: ConnectModalOptions): Promise<ConnectRe
     const theme = options.theme ?? {};
     const appearance = theme.appearance ?? 'auto';
     if (appearance !== 'auto') {
-      modal.setAttribute('data-appearance', appearance);
+      modal.dataset.appearance = appearance;
     }
 
     // Dapp palette overrides land as inline custom properties: setProperty
@@ -420,9 +433,8 @@ export function runConnectModal(options: ConnectModalOptions): Promise<ConnectRe
     const hasPaletteOverrides = theme.accent !== undefined || theme.accentContrast !== undefined
       || theme.light !== undefined || theme.dark !== undefined;
     const applyPaletteTokens = (): void => {
-      const scheme = appearance === 'auto'
-        ? (systemDark?.matches === true ? 'dark' : 'light')
-        : appearance;
+      const systemScheme = systemDark?.matches === true ? 'dark' : 'light';
+      const scheme = appearance === 'auto' ? systemScheme : appearance;
       const palette: ConnectModalPalette = {
         accent         : theme.accent,
         accentContrast : theme.accentContrast,
@@ -452,6 +464,11 @@ export function runConnectModal(options: ConnectModalOptions): Promise<ConnectRe
     let remintAt: number | undefined;
     let popupBusy = false;
     let pinResolve: ((pin: string) => void) | undefined;
+    // Proxy pinResolve reads/clears for buildPinInputs (module scope), whose
+    // per-input closures would otherwise be nested inside renderPin()'s own
+    // executor chain too deeply (Sonar S2004).
+    const getPinResolve = (): ((pin: string) => void) | undefined => pinResolve;
+    const clearPinResolve = (): void => { pinResolve = undefined; };
     const discoveryCache = new Map<string, Promise<string | undefined>>();
 
     // Collapsed identity row: the selected wallet plus the next catalog
@@ -489,7 +506,7 @@ export function runConnectModal(options: ConnectModalOptions): Promise<ConnectRe
       document.removeEventListener('keydown', onKeydown);
       document.removeEventListener('visibilitychange', onVisibilityReturn);
       systemDark?.removeEventListener?.('change', onSchemeChange);
-      try { document.body.removeChild(host); } catch { /* best effort */ }
+      try { host.remove(); } catch { /* best effort */ }
     };
 
     const settle = (settler: () => void): void => {
@@ -504,8 +521,7 @@ export function runConnectModal(options: ConnectModalOptions): Promise<ConnectRe
         writeLastChoice(deps.storage, { method, walletUrl: walletUrl ?? '' });
       }
       renderConnected();
-      const finish = (): void => settle(() => resolve(result));
-      setTimeout(finish, 1_200);
+      setTimeout(settleWith(settle, () => resolve(result)), 1_200);
     };
 
     const cancelModal = (): void => settle(() => reject(new Error('[@enbox/browser] Connect cancelled.')));
@@ -659,54 +675,7 @@ export function runConnectModal(options: ConnectModalOptions): Promise<ConnectRe
           boxes.classList.add('shake');
         }
 
-        const inputs: HTMLInputElement[] = [];
-        for (let i = 0; i < PIN_LENGTH; i++) {
-          const input = document.createElement('input');
-          input.className = 'pin-input';
-          input.type = 'text';
-          input.inputMode = 'numeric';
-          input.maxLength = 1;
-          input.setAttribute('aria-label', `Code digit ${i + 1}`);
-          inputs.push(input);
-          boxes.appendChild(input);
-        }
-
-        const submitIfComplete = (): void => {
-          const code = inputs.map((i) => i.value).join('');
-          if (code.length === PIN_LENGTH && pinResolve !== undefined) {
-            const resolveOnce = pinResolve;
-            pinResolve = undefined;
-            renderBusy('Checking the code…');
-            resolveOnce(code);
-          }
-        };
-
-        inputs.forEach((input, index) => {
-          input.addEventListener('input', () => {
-            input.value = input.value.replace(/\D/g, '').slice(0, 1);
-            if (input.value !== '' && index + 1 < inputs.length) {
-              inputs[index + 1].focus();
-            }
-            submitIfComplete();
-          });
-          input.addEventListener('keydown', (event) => {
-            if (event.key === 'Backspace' && input.value === '' && index > 0) {
-              inputs[index - 1].focus();
-            }
-          });
-          input.addEventListener('paste', (event) => {
-            const digits = (event.clipboardData?.getData('text') ?? '').replace(/\D/g, '').slice(0, PIN_LENGTH);
-            if (digits.length === 0) { return; }
-            event.preventDefault();
-            digits.split('').forEach((digit, digitIndex) => {
-              if (inputs[digitIndex] !== undefined) {
-                inputs[digitIndex].value = digit;
-              }
-            });
-            inputs[Math.min(digits.length, PIN_LENGTH) - 1]?.focus();
-            submitIfComplete();
-          });
-        });
+        const inputs = buildPinInputs(boxes, getPinResolve, clearPinResolve, renderBusy);
 
         setStage(
           el('p', 'stage-caption', `Enter the code shown in ${walletName}`),
@@ -730,7 +699,7 @@ export function runConnectModal(options: ConnectModalOptions): Promise<ConnectRe
       setStage(
         el('p', 'stage-caption', 'No problem — nothing was shared.'),
         stageButton('Start over', () => { void startMethod(); }),
-        stageLinkButton('Close', () => settle(() => resolve(undefined))),
+        stageLinkButton('Close', settleWith(settle, () => resolve(undefined))),
       );
     };
 
@@ -738,7 +707,7 @@ export function runConnectModal(options: ConnectModalOptions): Promise<ConnectRe
       setStage(
         el('p', 'stage-caption', message),
         stageButton('Start over', () => { void startMethod(); }),
-        stageLinkButton('Close', () => settle(() => reject(error ?? new Error(`[@enbox/browser] ${message}`)))),
+        stageLinkButton('Close', settleWith(settle, () => reject(error ?? new Error(`[@enbox/browser] ${message}`)))),
       );
     };
 
@@ -911,7 +880,7 @@ export function runConnectModal(options: ConnectModalOptions): Promise<ConnectRe
       }
     };
 
-    const startPopup = (): void => {
+    const startPopup = async (): Promise<void> => {
       // Synchronous popup open inside the click's call stack.
       relaySession?.cancel();
       clearRemint();
@@ -928,8 +897,12 @@ export function runConnectModal(options: ConnectModalOptions): Promise<ConnectRe
       popupBusy = true;
       renderPopupWaiting();
 
+      // `runPopup(...)` is invoked synchronously (its `window.open` runs before the
+      // first `await`), preserving the user-gesture popup open. Awaiting it inside the
+      // try means both a synchronous throw (a custom transport) and an async rejection
+      // are handled here — no unhandled promise sits inside the try (Sonar S4822).
       try {
-        deps.runPopup({
+        const result = await deps.runPopup({
           walletUrl,
           permissionRequests  : options.permissionRequests,
           appName,
@@ -937,20 +910,17 @@ export function runConnectModal(options: ConnectModalOptions): Promise<ConnectRe
           timeoutMs           : options.timeout,
           delegatePortableDid : options.delegatePortableDid,
           requestType         : options.mode,
-        })
-          .then((result) => {
-            if (settled) { return; }
-            if (result === undefined) {
-              renderDenied();
-            } else {
-              succeed(result);
-            }
-          })
-          .catch(renderPopupFailure)
-          .finally(() => { popupBusy = false; });
+        });
+        if (settled) { return; }
+        if (result === undefined) {
+          renderDenied();
+        } else {
+          succeed(result);
+        }
       } catch (error) {
-        popupBusy = false;
         renderPopupFailure(error);
+      } finally {
+        popupBusy = false;
       }
     };
 
@@ -1044,7 +1014,7 @@ export function runConnectModal(options: ConnectModalOptions): Promise<ConnectRe
 
       // The panel grid holds only the wallets NOT already visible in the
       // row, so expanding never shows the same wallet twice.
-      const gridWallets = wallets.filter((wallet) => !rowWallets.some((shown) => shown.url === wallet.url));
+      const gridWallets = wallets.filter((wallet) => !walletInCatalog(rowWallets, wallet.url));
 
       const more = document.createElement('button');
       more.className = 'row-tile more-tile';
@@ -1340,6 +1310,77 @@ function buildHeader(titleText: string, appIcon: string | undefined, onCancel: (
   return header;
 }
 
+/**
+ * Builds the PIN-entry boxes, wires their input/keydown/paste behavior, and
+ * returns the input elements in order. Module-level — `renderPin()`'s own
+ * `new Promise` executor already nests two levels deep inside
+ * `runConnectModal()`, so a per-input closure defined there would sit too
+ * deep for Sonar's S2004 nesting-depth check.
+ *
+ * `getPinResolve`/`clearPinResolve` proxy the `pinResolve` state kept in
+ * `runConnectModal()`'s closure: a completed code needs it read once, then
+ * cleared — in that order, before the busy state renders and the pending
+ * promise resolves — exactly as it was inline.
+ */
+function buildPinInputs(
+  boxes: HTMLDivElement,
+  getPinResolve: () => ((pin: string) => void) | undefined,
+  clearPinResolve: () => void,
+  renderBusy: (message: string) => void,
+): HTMLInputElement[] {
+  const inputs: HTMLInputElement[] = [];
+  for (let i = 0; i < PIN_LENGTH; i++) {
+    const input = document.createElement('input');
+    input.className = 'pin-input';
+    input.type = 'text';
+    input.inputMode = 'numeric';
+    input.maxLength = 1;
+    input.setAttribute('aria-label', `Code digit ${i + 1}`);
+    inputs.push(input);
+    boxes.appendChild(input);
+  }
+
+  const submitIfComplete = (): void => {
+    const code = inputs.map((i) => i.value).join('');
+    const pinResolve = getPinResolve();
+    if (code.length === PIN_LENGTH && pinResolve !== undefined) {
+      const resolveOnce = pinResolve;
+      clearPinResolve();
+      renderBusy('Checking the code…');
+      resolveOnce(code);
+    }
+  };
+
+  inputs.forEach((input, index) => {
+    input.addEventListener('input', () => {
+      input.value = input.value.replace(/\D/g, '').slice(0, 1);
+      if (input.value !== '' && index + 1 < inputs.length) {
+        inputs[index + 1].focus();
+      }
+      submitIfComplete();
+    });
+    input.addEventListener('keydown', (event) => {
+      if (event.key === 'Backspace' && input.value === '' && index > 0) {
+        inputs[index - 1].focus();
+      }
+    });
+    input.addEventListener('paste', (event) => {
+      const digits = (event.clipboardData?.getData('text') ?? '').replace(/\D/g, '').slice(0, PIN_LENGTH);
+      if (digits.length === 0) { return; }
+      event.preventDefault();
+      digits.split('').forEach((digit, digitIndex) => {
+        if (inputs[digitIndex] !== undefined) {
+          inputs[digitIndex].value = digit;
+        }
+      });
+      inputs[Math.min(digits.length, PIN_LENGTH) - 1]?.focus();
+      submitIfComplete();
+    });
+  });
+
+  return inputs;
+}
+
 function trapFocus(shadow: ShadowRoot, event: KeyboardEvent): void {
   const focusables = Array.from(
     shadow.querySelectorAll<HTMLElement>('button, input, a[href], [tabindex]:not([tabindex="-1"])'),

package/src/ui/qr.ts

@@ -59,21 +59,58 @@ function dataCodewords(version: number): number {
 export function encodeQr(text: string, forcedMask?: number): QrCode {
   const data = new TextEncoder().encode(text);
 
-  // ── Version selection: smallest version that fits the segment. ──
-  let version = 0;
+  const version = selectVersion(data.length);
+  if (version === 0) {
+    throw new Error(`[@enbox/browser] QR payload too long (${data.length} bytes exceeds version ${MAX_VERSION}-M capacity).`);
+  }
+
+  const codewords = buildDataCodewords(data, version);
+
+  // ── Reed-Solomon blocks + interleave. ──
+  const allCodewords = buildInterleavedCodewords(codewords, version);
+
+  // ── Module placement. ──
+  const size = 17 + 4 * version;
+  const modules: boolean[][] = Array.from({ length: size }, () => new Array<boolean>(size).fill(false));
+  const isFunction: boolean[][] = Array.from({ length: size }, () => new Array<boolean>(size).fill(false));
+
+  drawFunctionPatterns(modules, isFunction, version);
+  drawCodewords(modules, isFunction, allCodewords);
+
+  // ── Mask selection: apply each mask, score, keep the best. ──
+  let mask = forcedMask ?? -1;
+  if (mask === -1) {
+    mask = selectBestMask(modules, isFunction);
+  }
+
+  applyMask(modules, isFunction, mask);
+  drawFormatBits(modules, isFunction, mask);
+
+  return { size, modules, version, mask };
+}
+
+/**
+ * Smallest version (1–{@link MAX_VERSION}) whose level-M byte-mode capacity
+ * fits a `dataLength`-byte payload plus its mode/char-count header; `0` if
+ * none fits.
+ */
+function selectVersion(dataLength: number): number {
   for (let candidate = 1; candidate <= MAX_VERSION; candidate++) {
     const capacityBits = dataCodewords(candidate) * 8;
     const headerBits = 4 + (candidate <= 9 ? 8 : 16);
-    if (headerBits + data.length * 8 <= capacityBits) {
-      version = candidate;
-      break;
+    if (headerBits + dataLength * 8 <= capacityBits) {
+      return candidate;
     }
   }
-  if (version === 0) {
-    throw new Error(`[@enbox/browser] QR payload too long (${data.length} bytes exceeds version ${MAX_VERSION}-M capacity).`);
-  }
+  return 0;
+}
 
-  // ── Segment bits: mode 0100, char count, data, terminator, padding. ──
+/**
+ * Builds the packed data codewords for `data` at `version`: mode indicator,
+ * char count, byte data, terminator, byte-alignment padding, and the
+ * alternating pad-byte fill up to the version's level-M data capacity.
+ */
+function buildDataCodewords(data: Uint8Array, version: number): Uint8Array {
   const bits: number[] = [];
   const pushBits = (value: number, length: number): void => {
     for (let i = length - 1; i >= 0; i--) {
@@ -92,46 +129,34 @@ export function encodeQr(text: string, forcedMask?: number): QrCode {
   pushBits(0, (8 - (bits.length % 8)) % 8); // byte align
 
   const padBytes = [0xEC, 0x11];
-  for (let i = 0; bits.length < capacityBits; i++) {
-    pushBits(padBytes[i % 2], 8);
+  let padIndex = 0;
+  while (bits.length < capacityBits) {
+    pushBits(padBytes[padIndex], 8);
+    padIndex ^= 1; // alternate the two pad bytes
   }
 
   const codewords = new Uint8Array(capacityBits / 8);
   for (let i = 0; i < bits.length; i++) {
     codewords[i >> 3] |= bits[i] << (7 - (i & 7));
   }
+  return codewords;
+}
 
-  // ── Reed-Solomon blocks + interleave. ──
-  const allCodewords = buildInterleavedCodewords(codewords, version);
-
-  // ── Module placement. ──
-  const size = 17 + 4 * version;
-  const modules: boolean[][] = Array.from({ length: size }, () => new Array<boolean>(size).fill(false));
-  const isFunction: boolean[][] = Array.from({ length: size }, () => new Array<boolean>(size).fill(false));
-
-  drawFunctionPatterns(modules, isFunction, version);
-  drawCodewords(modules, isFunction, allCodewords);
-
-  // ── Mask selection: apply each mask, score, keep the best. ──
-  let mask = forcedMask ?? -1;
-  if (mask === -1) {
-    let bestPenalty = Infinity;
-    for (let candidate = 0; candidate < 8; candidate++) {
-      applyMask(modules, isFunction, candidate);
-      drawFormatBits(modules, isFunction, candidate);
-      const penalty = computePenalty(modules);
-      if (penalty < bestPenalty) {
-        bestPenalty = penalty;
-        mask = candidate;
-      }
-      applyMask(modules, isFunction, candidate); // undo (XOR is involutive)
+/** Applies each of the 8 mask patterns, scores it, and returns the lowest-penalty mask index. */
+function selectBestMask(modules: boolean[][], isFunction: boolean[][]): number {
+  let bestMask = 0;
+  let bestPenalty = Infinity;
+  for (let candidate = 0; candidate < 8; candidate++) {
+    applyMask(modules, isFunction, candidate);
+    drawFormatBits(modules, isFunction, candidate);
+    const penalty = computePenalty(modules);
+    if (penalty < bestPenalty) {
+      bestPenalty = penalty;
+      bestMask = candidate;
     }
+    applyMask(modules, isFunction, candidate); // undo (XOR is involutive)
   }
-
-  applyMask(modules, isFunction, mask);
-  drawFormatBits(modules, isFunction, mask);
-
-  return { size, modules, version, mask };
+  return bestMask;
 }
 
 /** Splits data codewords into level-M blocks, computes ECC, interleaves. */
@@ -357,21 +382,46 @@ function drawCodewords(modules: boolean[][], isFunction: boolean[][], codewords:
   let bitIndex = 0;
 
   for (let right = size - 1; right >= 1; right -= 2) {
-    if (right === 6) {
-      right = 5;
-    }
-    for (let vertical = 0; vertical < size; vertical++) {
-      for (let j = 0; j < 2; j++) {
-        const x = right - j;
-        const upward = ((right + 1) & 2) === 0;
-        const y = upward ? size - 1 - vertical : vertical;
-        if (!isFunction[y][x] && bitIndex < codewords.length * 8) {
-          modules[y][x] = ((codewords[bitIndex >> 3] >>> (7 - (bitIndex & 7))) & 1) !== 0;
-          bitIndex++;
-        }
+    // Visit columns in right-to-left pairs, shifting one column left of the
+    // vertical timing column (index 6) so it is skipped — without mutating the
+    // loop counter (Sonar S2310). `size` is always odd, so `right` is always
+    // even and `right - 1` maps 6→5, 4→3, 2→1, matching the original traversal.
+    const rightCol = right <= 6 ? right - 1 : right;
+    bitIndex = placeColumnPairBits(modules, isFunction, codewords, rightCol, size, bitIndex);
+  }
+}
+
+/**
+ * Places codeword bits into the zig-zag column pair (`rightCol`,
+ * `rightCol - 1`) top-to-bottom or bottom-to-top per {@link zigZagCoordinate},
+ * starting at `bitIndex`; returns the updated bit index.
+ */
+function placeColumnPairBits(
+  modules: boolean[][],
+  isFunction: boolean[][],
+  codewords: Uint8Array,
+  rightCol: number,
+  size: number,
+  bitIndex: number,
+): number {
+  for (let vertical = 0; vertical < size; vertical++) {
+    for (let j = 0; j < 2; j++) {
+      const { x, y } = zigZagCoordinate(rightCol, vertical, j, size);
+      if (!isFunction[y][x] && bitIndex < codewords.length * 8) {
+        modules[y][x] = ((codewords[bitIndex >> 3] >>> (7 - (bitIndex & 7))) & 1) !== 0;
+        bitIndex++;
       }
     }
   }
+  return bitIndex;
+}
+
+/** Module coordinate for column-pair `rightCol`, row `vertical`, sub-column `j` (0 = right, 1 = left). */
+function zigZagCoordinate(rightCol: number, vertical: number, j: number, size: number): { x: number; y: number } {
+  const x = rightCol - j;
+  const upward = ((rightCol + 1) & 2) === 0;
+  const y = upward ? size - 1 - vertical : vertical;
+  return { x, y };
 }
 
 /** XORs the mask pattern over non-function modules (involutive). */
@@ -402,11 +452,10 @@ function applyMask(modules: boolean[][], isFunction: boolean[][], mask: number):
 
 // ── Mask penalty scoring (rules N1–N4) ──────────────────────────
 
-function computePenalty(modules: boolean[][]): number {
-  const size = modules.length;
+/** N1: runs of ≥5 same-colour modules in a row/column. */
+function penaltyAdjacentRuns(modules: boolean[][], size: number): number {
   let penalty = 0;
 
-  // N1: runs of ≥5 same-colour modules in a row/column.
   for (let y = 0; y < size; y++) {
     let runColor = false;
     let runLength = 0;
@@ -442,7 +491,13 @@ function computePenalty(modules: boolean[][]): number {
     }
   }
 
-  // N2: 2×2 blocks of the same colour.
+  return penalty;
+}
+
+/** N2: 2×2 blocks of the same colour. */
+function penaltyBlocks(modules: boolean[][], size: number): number {
+  let penalty = 0;
+
   for (let y = 0; y < size - 1; y++) {
     for (let x = 0; x < size - 1; x++) {
       const c = modules[y][x];
@@ -452,17 +507,24 @@ function computePenalty(modules: boolean[][]): number {
     }
   }
 
-  // N3: finder-like 1:1:3:1:1 patterns with 4-module light flank.
-  const hasFinderPattern = (line: boolean[], start: number): number => {
-    const core = [true, false, true, true, true, false, true];
-    const matchesCore = core.every((value, index) => line[start + index] === value);
-    if (!matchesCore) {
-      return 0;
-    }
-    const lightBefore = start >= 4 && line.slice(start - 4, start).every((v) => !v);
-    const lightAfter = start + 11 <= line.length && line.slice(start + 7, start + 11).every((v) => !v);
-    return (lightBefore ? 40 : 0) + (lightAfter ? 40 : 0);
-  };
+  return penalty;
+}
+
+/** Checks `line` for a 1:1:3:1:1 finder-like core starting at `start`, scoring a 4-module light flank on either side. */
+function hasFinderPattern(line: boolean[], start: number): number {
+  const core = [true, false, true, true, true, false, true];
+  const matchesCore = core.every((value, index) => line[start + index] === value);
+  if (!matchesCore) {
+    return 0;
+  }
+  const lightBefore = start >= 4 && line.slice(start - 4, start).every((v) => !v);
+  const lightAfter = start + 11 <= line.length && line.slice(start + 7, start + 11).every((v) => !v);
+  return (lightBefore ? 40 : 0) + (lightAfter ? 40 : 0);
+}
+
+/** N3: finder-like 1:1:3:1:1 patterns with 4-module light flank. */
+function penaltyFinderPatterns(modules: boolean[][], size: number): number {
+  let penalty = 0;
 
   for (let y = 0; y < size; y++) {
     const row = modules[y];
@@ -473,7 +535,11 @@ function computePenalty(modules: boolean[][]): number {
     }
   }
 
-  // N4: dark-module proportion deviation from 50%, in 5% steps.
+  return penalty;
+}
+
+/** N4: dark-module proportion deviation from 50%, in 5% steps. */
+function penaltyDarkRatio(modules: boolean[][], size: number): number {
   let dark = 0;
   for (const row of modules) {
     for (const module of row) {
@@ -484,7 +550,17 @@ function computePenalty(modules: boolean[][]): number {
   }
   const total = size * size;
   const k = Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1;
-  penalty += k * 10;
+  return k * 10;
+}
+
+function computePenalty(modules: boolean[][]): number {
+  const size = modules.length;
+  let penalty = 0;
+
+  penalty += penaltyAdjacentRuns(modules, size);
+  penalty += penaltyBlocks(modules, size);
+  penalty += penaltyFinderPatterns(modules, size);
+  penalty += penaltyDarkRatio(modules, size);
 
   return penalty;
 }