Add address color dots and cached ENS reverse lookups

Deterministic colored dots derived from address bytes (16-color palette)
displayed before every address. ENS reverse resolution for transaction
counterparties with 12-hour localStorage cache.

src/popup/views/home.js

@@ -1,4 +1,10 @@
-const { $, showView, showFlash, balanceLinesForAddress } = require("./helpers");
+const {
+    $,
+    showView,
+    showFlash,
+    balanceLinesForAddress,
+    addressDotHtml,
+} = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { deriveAddressFromXpub } = require("../../shared/wallet");
 const {
@@ -35,12 +41,13 @@ function render(ctx) {
         wallet.addresses.forEach((addr, ai) => {
             html += `<div class="address-row py-1 border-b border-border-light cursor-pointer hover:bg-hover" data-wallet="${wi}" data-address="${ai}">`;
             html += `<div class="text-xs font-bold">Address ${wi + 1}.${ai + 1}</div>`;
+            const dot = addressDotHtml(addr.address);
             if (addr.ensName) {
-                html += `<div class="text-xs font-bold">${addr.ensName}</div>`;
+                html += `<div class="text-xs font-bold flex items-center">${dot}${addr.ensName}</div>`;
             }
             const addrUsd = formatUsd(getAddressValueUsd(addr));
             html += `<div class="flex text-xs">`;
-            html += `<span style="width:42ch;max-width:100%">${addr.address}</span>`;
+            html += `<span class="flex items-center" style="width:42ch;max-width:100%">${addr.ensName ? "" : dot}${addr.address}</span>`;
             html += `<span class="text-right text-muted flex-1">${addrUsd}</span>`;
             html += `</div>`;
             html += balanceLinesForAddress(addr);