Add token management to Settings

- Tracked Tokens well in settings with [x] remove buttons
- New settings-addtoken view with:
  - Top-10 quick-pick buttons (tracked ones dimmed+disabled)
  - Top-100 dropdown showing "Token Name (SYMBOL)", tracked disabled
  - Manual contract address entry with RPC lookup
- View comment in helpers.js about keeping README in sync

src/popup/views/settings.js

@@ -1,4 +1,4 @@
-const { $, showView, showFlash } = require("./helpers");
+const { $, showView, showFlash, escapeHtml } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { ETHEREUM_MAINNET_CHAIN_ID } = require("../../shared/constants");
 const { log, debugFetch } = require("../../shared/log");
@@ -38,9 +38,37 @@ function renderSiteList(containerId, siteMap, stateKey) {
     });
 }
 
+function renderTrackedTokens() {
+    const container = $("settings-tracked-tokens");
+    if (state.trackedTokens.length === 0) {
+        container.innerHTML = '<p class="text-xs text-muted">None</p>';
+        return;
+    }
+    let html = "";
+    state.trackedTokens.forEach((token, idx) => {
+        const label = token.name
+            ? escapeHtml(token.name) + " (" + escapeHtml(token.symbol) + ")"
+            : escapeHtml(token.symbol);
+        html += `<div class="flex justify-between items-center text-xs py-1 border-b border-border-light">`;
+        html += `<span>${label}</span>`;
+        html += `<button class="btn-remove-token border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer" data-idx="${idx}">[x]</button>`;
+        html += `</div>`;
+    });
+    container.innerHTML = html;
+    container.querySelectorAll(".btn-remove-token").forEach((btn) => {
+        btn.addEventListener("click", async () => {
+            const idx = parseInt(btn.dataset.idx, 10);
+            state.trackedTokens.splice(idx, 1);
+            await saveState();
+            renderTrackedTokens();
+        });
+    });
+}
+
 function show() {
     $("settings-rpc").value = state.rpcUrl;
     $("settings-blockscout").value = state.blockscoutUrl;
+    renderTrackedTokens();
     renderSiteLists();
     showView("settings");
 }
@@ -155,6 +183,11 @@ function init(ctx) {
 
     $("btn-main-add-wallet").addEventListener("click", ctx.showAddWalletView);
 
+    $("btn-settings-add-token").addEventListener(
+        "click",
+        ctx.showSettingsAddTokenView,
+    );
+
     $("btn-settings-back").addEventListener("click", () => {
         ctx.renderWalletList();
         showView("main");