fix: the address screen shows a token just added at its fetched balance, not 0.0000 (closes #516)

A balance refresh that returns now draws the balances on AddressDetail or
AddressToken again when that screen is up, not only the wallet list; their
transaction lists are left alone. Every add path on AddToken and
SettingsAddToken tracks a token through one step, trackToken(), which also
lists it in the new stored field tokensNotFetched: its line reads `quantity
unknown` instead of 0.0000 until a refresh that started with it tracked has
fetched every address's token balances, even if the popup closes first. To
tell an address whose token balances the explorer did not return, the refresh
takes them off its copy of the wallets before fetching.

Model: opus-5-5

src/popup/views/addToken.js

@@ -1,4 +1,11 @@
-const { $, showView, showFlash, escapeHtml, goBack } = require("./helpers");
+const {
+    $,
+    showView,
+    showFlash,
+    escapeHtml,
+    goBack,
+    trackToken,
+} = require("./helpers");
 const { getTopTokens } = require("../../shared/tokenList");
 const { state, saveState, currentNetwork } = require("../../shared/state");
 const { lookupTokenInfo } = require("../../shared/balances");
@@ -72,7 +79,7 @@ function init(ctx) {
                 return;
             }
             log.infof("Adding token", info.symbol, contractAddr);
-            state.trackedTokens.push({
+            trackToken({
                 address: contractAddr,
                 symbol: info.symbol,
                 decimals: info.decimals,

src/popup/views/addressDetail.js

@@ -65,11 +65,25 @@ function show() {
     });
     $("address-line").dataset.full = addr.address;
     attachCopyHandlers($("address-line"));
-    const usdTotal = formatAddressTotal(getAddressValue(addr));
-    $("address-usd-total").innerHTML = escapeHtml(usdTotal) || " ";
     const ensEl = $("address-ens");
     // ENS is now shown inside renderAddressHtml, hide the separate element
     ensEl.classList.add("hidden");
+    renderBalances();
+    renderSendTokenSelect(addr);
+    $("tx-list").innerHTML =
+        '<div class="text-muted text-xs py-1">Loading...</div>';
+    showView("address");
+    loadTransactions(addr.address);
+}
+
+// The USD total and the balance list. Drawn again by each balance refresh
+// that returns while this screen is up (doRefreshAndRender() in
+// src/popup/index.js), which leaves the rest of the screen as it is.
+function renderBalances() {
+    const addr =
+        state.wallets[state.selectedWallet].addresses[state.selectedAddress];
+    const usdTotal = formatAddressTotal(getAddressValue(addr));
+    $("address-usd-total").innerHTML = escapeHtml(usdTotal) || "&nbsp;";
     $("address-balances").innerHTML = balanceLinesForAddress(
         addr,
         state.trackedTokens,
@@ -83,11 +97,6 @@ function show() {
                 ctx.showAddressToken();
             });
         });
-    renderSendTokenSelect(addr);
-    $("tx-list").innerHTML =
-        '<div class="text-muted text-xs py-1">Loading...</div>';
-    showView("address");
-    loadTransactions(addr.address);
 }
 
 let loadedTxs = [];
@@ -280,4 +289,4 @@ function init(_ctx) {
     exportPrivkey.init();
 }
 
-module.exports = { init, show };
+module.exports = { init, show, renderBalances };

src/popup/views/addressToken.js

@@ -48,37 +48,18 @@ function show() {
     const addr = wallet.addresses[state.selectedAddress];
     const ai = state.selectedAddress;
     const tokenId = state.selectedToken;
-
-    // Determine token symbol and balance
-    let symbol, amount, price;
     const knownToken = TOKEN_BY_ADDRESS.get(tokenId.toLowerCase());
-    if (tokenId === "ETH") {
-        symbol = nativeCurrency();
-        amount = parseFloat(addr.balance || "0");
-        price = getPrice("ETH");
-    } else {
-        const tb = (addr.tokenBalances || []).find(
-            (t) => t.address.toLowerCase() === tokenId.toLowerCase(),
-        );
-        symbol = resolveSymbol(
-            tokenId,
-            addr.tokenBalances,
-            state.trackedTokens,
-        );
-        // null when the scale is unknown: no quantity to show, and none to
-        // price. balanceLine() states that rather than printing 0.0000.
-        amount = tb ? unknownableAmount(tb.balance) : 0;
-        price = getPrice(symbol);
-    }
-
-    currentSymbol = symbol;
+    currentSymbol =
+        tokenId === "ETH"
+            ? nativeCurrency()
+            : resolveSymbol(tokenId, addr.tokenBalances, state.trackedTokens);
 
     $("address-token-title").textContent =
         wallet.name +
         " \u2014 Address " +
         (ai + 1) +
         " \u2014 " +
-        displaySymbol(symbol);
+        displaySymbol(currentSymbol);
 
     // Blockie
     const blockieEl = $("address-token-jazzicon");
@@ -100,13 +81,7 @@ function show() {
     $("address-token-line").dataset.full = addr.address;
     attachCopyHandlers($("address-token-line"));
 
-    // USD total for this token only
-    const usdVal = price && amount !== null ? amount * price : null;
-    const usdStr = formatUsd(usdVal);
-    $("address-token-usd-total").innerHTML = escapeHtml(usdStr) || " ";
-
-    // Single token balance line (no tokenId — not clickable here)
-    $("address-token-balance").innerHTML = balanceLine(symbol, amount, price);
+    renderBalance();
 
     // Token contract details (ERC-20 only)
     const contractInfo = $("address-token-contract-info");
@@ -168,6 +143,44 @@ function show() {
     loadTransactions(addr.address, tokenId);
 }
 
+// The USD total and the balance line of the selected token. Drawn again by
+// each balance refresh that returns while this screen is up
+// (doRefreshAndRender() in src/popup/index.js), which leaves the rest of the
+// screen as it is.
+function renderBalance() {
+    const addr =
+        state.wallets[state.selectedWallet].addresses[state.selectedAddress];
+    const tokenId = state.selectedToken;
+    let amount, price;
+    if (tokenId === "ETH") {
+        amount = parseFloat(addr.balance || "0");
+        price = getPrice("ETH");
+    } else {
+        const id = tokenId.toLowerCase();
+        const tb = (addr.tokenBalances || []).find(
+            (t) => t.address.toLowerCase() === id,
+        );
+        // null when the scale is unknown, or when no refresh has fetched a
+        // token just added: no quantity to show, and none to price.
+        // balanceLine() states that rather than printing 0.0000.
+        if (tb) amount = unknownableAmount(tb.balance);
+        else amount = state.tokensNotFetched.includes(id) ? null : 0;
+        price = getPrice(currentSymbol);
+    }
+
+    // USD total for this token only
+    const usdVal = price && amount !== null ? amount * price : null;
+    const usdStr = formatUsd(usdVal);
+    $("address-token-usd-total").innerHTML = escapeHtml(usdStr) || " ";
+
+    // Single token balance line (no tokenId — not clickable here)
+    $("address-token-balance").innerHTML = balanceLine(
+        currentSymbol,
+        amount,
+        price,
+    );
+}
+
 async function loadTransactions(address, tokenId) {
     try {
         const rawTxs = await fetchRecentTransactions(
@@ -343,4 +356,4 @@ function init(_ctx) {
     });
 }
 
-module.exports = { init, show };
+module.exports = { init, show, renderBalance };

src/popup/views/helpers.js

@@ -380,6 +380,18 @@ function balanceLine(symbol, amount, price, tokenId) {
     );
 }
 
+// Tracks `token` on the active network, as every add path on AddToken and
+// SettingsAddToken does, and lists it in `state.tokensNotFetched`: no refresh
+// has fetched its balance yet. An address with no balance row for it has no
+// known balance of it, so its line says the quantity is unknown rather than
+// 0.0000. doRefreshAndRender() in src/popup/index.js takes it off once a
+// refresh that started with it tracked has fetched every address's token
+// balances (https://git.eeqj.de/sneak/AutistMask/issues/516).
+function trackToken(token) {
+    state.trackedTokens.push(token);
+    state.tokensNotFetched.push(token.address.toLowerCase());
+}
+
 function balanceLinesForAddress(addr, trackedTokens, showZero) {
     let html = balanceLine(
         nativeCurrency(),
@@ -409,12 +421,13 @@ function balanceLinesForAddress(addr, trackedTokens, showZero) {
     }
     if (showZero && trackedTokens) {
         for (const t of trackedTokens) {
-            if (seen.has(t.address.toLowerCase())) continue;
+            const id = t.address.toLowerCase();
+            if (seen.has(id)) continue;
             html += balanceLine(
                 t.symbol,
-                0,
+                state.tokensNotFetched.includes(id) ? null : 0,
                 getPrice(t.symbol),
-                t.address.toLowerCase(),
+                id,
             );
         }
     }
@@ -786,6 +799,7 @@ module.exports = {
     flashCopyFeedback,
     balanceLine,
     balanceLinesForAddress,
+    trackToken,
     addressHoldsFunds,
     keyMaterialName,
     unknownableAmount,

src/popup/views/settingsAddToken.js

@@ -1,4 +1,11 @@
-const { $, showView, showFlash, escapeHtml, goBack } = require("./helpers");
+const {
+    $,
+    showView,
+    showFlash,
+    escapeHtml,
+    goBack,
+    trackToken,
+} = require("./helpers");
 const { getTopTokens } = require("../../shared/tokenList");
 const { state, saveState, currentNetwork } = require("../../shared/state");
 const { lookupTokenInfo } = require("../../shared/balances");
@@ -43,7 +50,7 @@ function renderTop10() {
                     decimals: parseInt(btn.dataset.decimals, 10),
                     name: btn.dataset.name || btn.dataset.symbol,
                 };
-                state.trackedTokens.push(token);
+                trackToken(token);
                 await saveState();
                 showFlash("Added " + token.symbol);
                 renderTop10();
@@ -110,7 +117,7 @@ function init(_ctx) {
             decimals: parseInt(opt.dataset.decimals, 10),
             name: opt.dataset.name || opt.dataset.symbol,
         };
-        state.trackedTokens.push(token);
+        trackToken(token);
         await saveState();
         showFlash("Added " + token.symbol);
         renderTop10();
@@ -156,7 +163,7 @@ function init(_ctx) {
                 return;
             }
             log.infof("Adding token", info.symbol, addr);
-            state.trackedTokens.push({
+            trackToken({
                 address: addr,
                 symbol: info.symbol,
                 decimals: info.decimals,