Add address-token detail view for per-token transaction filtering

Clicking a token balance on the address detail view navigates to a
focused view showing only that token's transactions. Send pre-selects
and locks the token dropdown, Receive shows an ERC-20 warning for
non-ETH tokens, and all back buttons return to the correct parent view.

src/popup/views/helpers.js

@@ -13,6 +13,7 @@ const VIEWS = [
     "import-key",
     "main",
     "address",
+    "address-token",
     "send",
     "confirm-tx",
     "receive",
@@ -72,11 +73,15 @@ function showFlash(msg, duration = 2000) {
     }, duration);
 }
 
-function balanceLine(symbol, amount, price) {
+function balanceLine(symbol, amount, price, tokenId) {
     const qty = amount.toFixed(4);
     const usd = price ? formatUsd(amount * price) : "";
+    const tokenAttr = tokenId ? ` data-token="${tokenId}"` : "";
+    const clickClass = tokenId
+        ? " cursor-pointer hover:bg-hover balance-row"
+        : "";
     return (
-        `<div class="flex text-xs">` +
+        `<div class="flex text-xs${clickClass}"${tokenAttr}>` +
         `<span class="flex justify-between" style="width:42ch;max-width:100%">` +
         `<span>${symbol}</span>` +
         `<span>${qty}</span>` +
@@ -91,18 +96,29 @@ function balanceLinesForAddress(addr, trackedTokens, showZero) {
         "ETH",
         parseFloat(addr.balance || "0"),
         getPrice("ETH"),
+        "ETH",
     );
     const seen = new Set();
     for (const t of addr.tokenBalances || []) {
         const bal = parseFloat(t.balance || "0");
         if (bal === 0 && !showZero) continue;
-        html += balanceLine(t.symbol, bal, getPrice(t.symbol));
+        html += balanceLine(
+            t.symbol,
+            bal,
+            getPrice(t.symbol),
+            t.address.toLowerCase(),
+        );
         seen.add(t.address.toLowerCase());
     }
     if (showZero && trackedTokens) {
         for (const t of trackedTokens) {
             if (seen.has(t.address.toLowerCase())) continue;
-            html += balanceLine(t.symbol, 0, getPrice(t.symbol));
+            html += balanceLine(
+                t.symbol,
+                0,
+                getPrice(t.symbol),
+                t.address.toLowerCase(),
+            );
         }
     }
     return html;
@@ -193,6 +209,7 @@ module.exports = {
     hideError,
     showView,
     showFlash,
+    balanceLine,
     balanceLinesForAddress,
     addressColor,
     addressDotHtml,