fix: Blockscout and Etherscan lookups are off until the user turns them on (closes #668)

Out of the box the wallet sent the user's addresses to Blockscout and each
recipient to Etherscan. Two settings, "Use Blockscout" and "Check recipients on
Etherscan", now gate those requests. Both are off in a new install and offered
unticked on Welcome and in Settings. While one is off, the screens that relied
on it say so in a plain line. Each gated request reads its setting from storage
before it asks and when the answer lands, and drops a late answer. An open popup
takes another page's change and draws its screens again. While "Use Blockscout"
is off, no address keeps an untracked token, and no screen names a token from
Blockscout's report. ENS lookups ask only the RPC endpoint.

Model: opus-5-5

src/popup/views/settings.js

@@ -17,6 +17,7 @@ const {
 const { state, saveState, currentNetwork } = require("../../shared/state");
 const { onChainSwitch } = require("../../shared/chainSwitch");
 const { restorableStack } = require("../../shared/persistedState");
+const { dropUntrackedTokens } = require("../../shared/balances");
 const { resetRenderedViews, markViewRendered } = require("../viewRouter");
 const {
     log,
@@ -201,6 +202,10 @@ function show() {
     $("settings-rpc").value = state.rpcUrl;
     $("settings-blockscout").value = state.blockscoutUrl;
     $("settings-network").value = state.networkId;
+    // Set on every show, not only at init: Welcome can change these two.
+    $("settings-use-blockscout").checked = state.useBlockscout;
+    $("settings-check-recipients-on-etherscan").checked =
+        state.checkRecipientsOnEtherscan;
     renderTrackedTokens();
     renderSiteLists();
     renderWalletListSettings();
@@ -247,16 +252,20 @@ async function renderSiteLists() {
 
 // A network switch, made by the user here or saved by the background once the
 // user approved a site's request (src/popup/index.js), leaves every screen on
-// the page showing the previous network. These two leave the page as README's
-// Screen Map describes, the first before the switch is saved, so that save
-// keeps the cut for a popup closed straight after, the second once `state`
-// holds the new network.
+// the page showing the previous network. Two functions leave the page as
+// README's Screen Map describes:
+//
+// - cutViewStack(), before the switch is saved, so that save keeps the cut for
+//   a popup closed straight after
+// - showNewSettings(), once `state` holds the new network
 //
 // The stack is cut at the first screen that cannot be rendered from saved
 // state, such as Send or AddToken, and at AddressToken unless it shows the
 // native token: any other token there was picked on the previous network, so
 // it is no longer selected either. Without a wallet the stack starts at
 // Welcome, which that cut would drop, and Welcome shows nothing from a network.
+// A change to "Use Blockscout" cuts the stack the same way (setUseBlockscout()
+// below).
 function cutViewStack() {
     if (!state.hasWallet) return;
     if (state.selectedToken !== "ETH") {
@@ -269,18 +278,39 @@ function cutViewStack() {
     state.viewStack = restorableStack(state.viewStack, state.currentView);
 }
 
-// Every screen counts as not yet rendered, so "Back" renders the one it lands
-// on for the new network. Settings on top is brought up to date in place;
-// any other screen is drawn again as a reopened popup draws it, which is Home
-// for one that cannot be rendered from saved state. Without a wallet any other
-// screen is Welcome or AddWallet, which show nothing from a network.
-function showNewNetwork() {
+// Sets "Use Blockscout" to `on` on this page. It is called inside a save,
+// holding the lock, for the user's change here or another page's
+// (followStoredSettings() in src/popup/index.js).
+//
+// Send's token dropdown was filled under the old setting, and Back cannot draw
+// Send again. So the stack is cut, as for a network switch. Turning the setting
+// off also drops every token the user has not tracked.
+function setUseBlockscout(on) {
+    state.useBlockscout = on;
+    cutViewStack();
+    if (!on) dropUntrackedTokens(state.wallets, state.trackedTokens);
+}
+
+// Draws the page again after a network switch, or after another page changed
+// "Use Blockscout" or "Check recipients on Etherscan". Every screen counts as
+// not yet rendered, so "Back" renders the one it lands on under the new
+// settings. Settings on top is brought up to date in place; any other screen is
+// drawn again as a reopened popup draws it, which is Home for one that cannot
+// be rendered from saved state. Without a wallet any other screen is Welcome or
+// AddWallet. Back only unhides Welcome, so its two checkboxes are set here.
+function showNewSettings() {
     resetRenderedViews();
+    $("welcome-use-blockscout").checked = state.useBlockscout;
+    $("welcome-check-recipients-on-etherscan").checked =
+        state.checkRecipientsOnEtherscan;
     if (state.currentView === "settings") {
         markViewRendered("settings");
         $("settings-network").value = state.networkId;
         $("settings-rpc").value = state.rpcUrl;
         $("settings-blockscout").value = state.blockscoutUrl;
+        $("settings-use-blockscout").checked = state.useBlockscout;
+        $("settings-check-recipients-on-etherscan").checked =
+            state.checkRecipientsOnEtherscan;
         renderTrackedTokens();
     } else if (state.hasWallet) {
         ctx.restoreView();
@@ -363,6 +393,35 @@ function init(_ctx) {
         showFlash("Saved.");
     });
 
+    // Each change is made inside the save, holding the lock. Then
+    // followStoredSettings() in src/popup/index.js never takes this page's
+    // unsaved change for another page's.
+    //
+    // The screens under Settings were drawn under the old setting. So each
+    // change makes every screen but Settings count as not yet drawn, as a
+    // network switch does. Back then draws again any screen a reopened popup
+    // can draw. Back only unhides Welcome, so its boxes are set here too.
+    $("settings-use-blockscout").addEventListener("change", async () => {
+        const on = $("settings-use-blockscout").checked;
+        await saveState(() => setUseBlockscout(on));
+        $("welcome-use-blockscout").checked = on;
+        resetRenderedViews();
+        markViewRendered("settings");
+    });
+
+    $("settings-check-recipients-on-etherscan").addEventListener(
+        "change",
+        async () => {
+            const on = $("settings-check-recipients-on-etherscan").checked;
+            await saveState(() => {
+                state.checkRecipientsOnEtherscan = on;
+            });
+            $("welcome-check-recipients-on-etherscan").checked = on;
+            resetRenderedViews();
+            markViewRendered("settings");
+        },
+    );
+
     const networkSelect = $("settings-network");
     networkSelect.addEventListener("change", async () => {
         // Whether `state` already has the network picked is asked only once
@@ -376,7 +435,7 @@ function init(_ctx) {
         // Open pages are told by the background, as after a site's approved
         // switch request.
         notify({ type: "AUTISTMASK_NETWORK_CHANGED", chainId: net.chainId });
-        showNewNetwork();
+        showNewSettings();
         showFlash("Switched to " + net.name + ".");
     });
 
@@ -516,5 +575,6 @@ module.exports = {
     show,
     renderSiteLists,
     cutViewStack,
-    showNewNetwork,
+    setUseBlockscout,
+    showNewSettings,
 };