fix: tracked tokens are kept per network, and bundled picks are offered on mainnet only (closes #523)

A network switch puts the outgoing network's tracked tokens away in a new
persisted field, networkTrackedTokens, and brings back the incoming network's
list, or an empty one, as endpoints are kept; the background's switch uses the
same function. The two add-token screens offer their common-token picks on
Ethereum Mainnet only. After a switch in Settings, Back renders the screen it
lands on again, and the stack is cut at the first screen that cannot be
rendered from saved state, or at AddressToken for any token but the native
one; the cut stack is saved with the switch. ConfirmTx drawn again keeps the
network it was reviewed on. A contract lookup that answers after a switch adds
nothing.

Model: opus-5-5

src/popup/index.html

@@ -852,7 +852,7 @@
                     id="add-token-info"
                     class="text-xs text-muted mb-2 min-h-[1.25rem] invisible"
                 ></div>
-                <div class="mb-2">
+                <div id="add-token-common" class="mb-2">
                     <label class="block mb-1 text-xs text-muted"
                         >Or pick a common token:</label
                     >
@@ -1336,36 +1336,39 @@
                 <h2 class="font-bold mb-2">Add Token</h2>
                 <p class="text-xs text-muted mb-3">
                     Pick a common token or enter a contract address manually.
+                    Common tokens are offered on Ethereum Mainnet only.
                 </p>
 
-                <!-- top 10 quick-pick buttons -->
-                <div class="mb-3">
-                    <label class="block mb-1 text-xs text-muted"
-                        >Top tokens:</label
-                    >
-                    <div
-                        id="settings-addtoken-top10"
-                        class="flex flex-wrap gap-1"
-                    ></div>
-                </div>
+                <div id="settings-addtoken-common">
+                    <!-- top 10 quick-pick buttons -->
+                    <div class="mb-3">
+                        <label class="block mb-1 text-xs text-muted"
+                            >Top tokens:</label
+                        >
+                        <div
+                            id="settings-addtoken-top10"
+                            class="flex flex-wrap gap-1"
+                        ></div>
+                    </div>
 
-                <!-- top 100 dropdown -->
-                <div class="mb-3">
-                    <label class="block mb-1 text-xs text-muted"
-                        >Or pick from top 100:</label
-                    >
-                    <select
-                        id="settings-addtoken-select"
-                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
-                    >
-                        <option value="">-- select --</option>
-                    </select>
-                    <button
-                        id="btn-settings-addtoken-select"
-                        class="border border-border px-2 py-1 mt-1 hover:bg-fg hover:text-bg cursor-pointer"
-                    >
-                        Add selected
-                    </button>
+                    <!-- top 100 dropdown -->
+                    <div class="mb-3">
+                        <label class="block mb-1 text-xs text-muted"
+                            >Or pick from top 100:</label
+                        >
+                        <select
+                            id="settings-addtoken-select"
+                            class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
+                        >
+                            <option value="">-- select --</option>
+                        </select>
+                        <button
+                            id="btn-settings-addtoken-select"
+                            class="border border-border px-2 py-1 mt-1 hover:bg-fg hover:text-bg cursor-pointer"
+                        >
+                            Add selected
+                        </button>
+                    </div>
                 </div>
 
                 <!-- manual contract address -->

src/popup/viewRouter.js

@@ -38,9 +38,11 @@ function markViewRendered(view) {
     if (view) renderedViews.add(view);
 }
 
-// Begin a fresh page-load scope. The popup gets one by being loaded; the
+// Begin a fresh page-load scope. The popup gets one by being loaded, and
+// asks for one when the user switches the network, because every screen
+// then on the page shows the previous network (views/settings.js); the
 // unit tests, which simulate several page loads against one module
-// instance, ask for one.
+// instance, ask for one too.
 function resetRenderedViews() {
     renderedViews.clear();
 }
@@ -217,9 +219,10 @@ function renderView(view, state, views) {
 // in the two cases where the view is known to be on the page already:
 //
 //   - It is not one the popup renders from persisted state. The restored
-//     stack is filtered against RESTORABLE_VIEWS, so such a view can only
-//     be on the stack from this page load, where forward navigation
-//     rendered it on the way in.
+//     stack is filtered against RESTORABLE_VIEWS, and a network switch cuts
+//     it the same way (views/settings.js), so such a view can only be on the
+//     stack from this page load, where forward navigation rendered it on the
+//     way in.
 //   - This page load has rendered it. Re-rendering would re-fetch and
 //     clobber what it holds; Home is rendered anyway, see above.
 //

src/popup/views/addToken.js

@@ -1,6 +1,6 @@
 const { $, showView, showFlash, escapeHtml, goBack } = require("./helpers");
 const { getTopTokens } = require("../../shared/tokenList");
-const { state, saveState } = require("../../shared/state");
+const { state, saveState, currentNetwork } = require("../../shared/state");
 const { lookupTokenInfo } = require("../../shared/balances");
 const { isScamAddress } = require("../../shared/scamlist");
 const { log } = require("../../shared/log");
@@ -9,6 +9,12 @@ function show() {
     $("add-token-address").value = "";
     $("add-token-info").textContent = "";
     $("add-token-info").style.visibility = "hidden";
+    // The bundled list holds Ethereum Mainnet contracts, which name no token
+    // on any other network.
+    $("add-token-common").classList.toggle(
+        "hidden",
+        state.networkId !== "mainnet",
+    );
     const list = $("common-token-list");
     list.innerHTML = getTopTokens(25)
         .map(
@@ -46,6 +52,9 @@ function init(ctx) {
         infoEl.textContent = "Looking up token...";
         infoEl.style.visibility = "visible";
         log.debugf("Looking up token contract", contractAddr);
+        // The network the lookup asks, which Settings may switch away from
+        // before it answers, as for a transaction in confirmTx.js.
+        const chainId = currentNetwork().chainId;
         try {
             const info = await lookupTokenInfo(
                 contractAddr,
@@ -53,6 +62,15 @@ function init(ctx) {
                 state.networkId,
                 ctx.pageClosed,
             );
+            // A contract address names a token on one network only, so an
+            // answer after a switch is not added to the new network's list.
+            if (currentNetwork().chainId !== chainId) {
+                showFlash(
+                    "The active network changed before the lookup finished," +
+                        " so the token was not added.",
+                );
+                return;
+            }
             log.infof("Adding token", info.symbol, contractAddr);
             state.trackedTokens.push({
                 address: contractAddr,

src/popup/views/confirmTx.js

@@ -647,9 +647,9 @@ function init(_ctx) {
         }
 
         // The screen describes the network the transaction was reviewed for,
-        // which Settings may have switched away from since: with this screen
-        // open, where Back only unhides it, or before the popup reopened onto
-        // it.
+        // which Settings may have switched away from since: "Back" from
+        // Settings after a switch draws this screen again from the saved
+        // transaction, as a popup reopened onto it does.
         if (currentNetwork().chainId !== pendingTx.chainId) {
             showSendError(
                 "The active network changed after this transaction was" +

src/popup/views/settings.js

@@ -16,6 +16,8 @@ const {
 } = require("../dustThreshold");
 const { state, saveState, currentNetwork } = require("../../shared/state");
 const { onChainSwitch } = require("../../shared/chainSwitch");
+const { restorableStack } = require("../../shared/persistedState");
+const { resetRenderedViews, markViewRendered } = require("../viewRouter");
 const {
     log,
     debugFetch,
@@ -319,12 +321,33 @@ function init(ctx) {
     networkSelect.addEventListener("change", async () => {
         const newId = networkSelect.value;
         if (newId === state.networkId) return;
+        // The screens beneath Settings show the previous network, so Back
+        // finds them as it does in a reopened popup: each is rendered again
+        // when Back lands on it, and the stack is cut at the first one that
+        // cannot be rendered from saved state, such as Send or AddToken. It
+        // is cut at AddressToken too, unless that shows the native token: any
+        // other token there was picked on the previous network. Without a
+        // wallet the stack starts at Welcome, which that cut would drop, and
+        // Welcome shows nothing from a network. The cut comes before the
+        // switch so that the switch's save keeps it for a popup closed
+        // straight after.
+        if (state.hasWallet) {
+            const tokenView = state.viewStack.indexOf("address-token");
+            if (tokenView !== -1 && state.selectedToken !== "ETH") {
+                state.viewStack = state.viewStack.slice(0, tokenView);
+            }
+            state.viewStack = restorableStack(state.viewStack, "settings");
+        }
         const net = await onChainSwitch(newId);
         // Open pages are told by the background, as after a site's approved
         // switch request.
         notify({ type: "AUTISTMASK_NETWORK_CHANGED", chainId: net.chainId });
+        resetRenderedViews();
+        // Settings itself is brought up to date for the new network here.
+        markViewRendered("settings");
         $("settings-rpc").value = state.rpcUrl;
         $("settings-blockscout").value = state.blockscoutUrl;
+        renderTrackedTokens();
         showFlash("Switched to " + net.name + ".");
     });
 

src/popup/views/settingsAddToken.js

@@ -1,6 +1,6 @@
 const { $, showView, showFlash, escapeHtml, goBack } = require("./helpers");
 const { getTopTokens } = require("../../shared/tokenList");
-const { state, saveState } = require("../../shared/state");
+const { state, saveState, currentNetwork } = require("../../shared/state");
 const { lookupTokenInfo } = require("../../shared/balances");
 const { isScamAddress } = require("../../shared/scamlist");
 const { log } = require("../../shared/log");
@@ -75,6 +75,12 @@ function show() {
     $("settings-addtoken-address").value = "";
     $("settings-addtoken-info").textContent = "";
     $("settings-addtoken-info").style.visibility = "hidden";
+    // The bundled list holds Ethereum Mainnet contracts, which name no token
+    // on any other network.
+    $("settings-addtoken-common").classList.toggle(
+        "hidden",
+        state.networkId !== "mainnet",
+    );
     renderTop10();
     renderDropdown();
     showView("settings-addtoken");
@@ -130,6 +136,9 @@ function init(_ctx) {
         infoEl.textContent = "Looking up token...";
         infoEl.style.visibility = "visible";
         log.debugf("Looking up token contract", addr);
+        // The network the lookup asks, which Settings may switch away from
+        // before it answers, as for a transaction in confirmTx.js.
+        const chainId = currentNetwork().chainId;
         try {
             const info = await lookupTokenInfo(
                 addr,
@@ -137,6 +146,15 @@ function init(_ctx) {
                 state.networkId,
                 ctx.pageClosed,
             );
+            // A contract address names a token on one network only, so an
+            // answer after a switch is not added to the new network's list.
+            if (currentNetwork().chainId !== chainId) {
+                showFlash(
+                    "The active network changed before the lookup finished," +
+                        " so the token was not added.",
+                );
+                return;
+            }
             log.infof("Adding token", info.symbol, addr);
             state.trackedTokens.push({
                 address: addr,