fix: an open popup follows a network switch the background saves (closes #650)

When the background saves a network switch after the user approves a
site's request, or another popup page saves one, an open popup takes the
new network from the stored record inside a save, holding the lock, and
checks the record once at start-up for a switch saved before it
listened. It then leaves the page as a switch in Settings does: the cut
and the redraw are two Settings functions both paths call, and both
reset the popup's caches through one function. A switch in Settings is
now made inside its own save too, so one picked while a follow waits for
the lock is made after it. The popup never switches the network itself.

Model: opus-5-5

README.md

@@ -461,13 +461,15 @@ address, the transaction assertions run against the raw signed transaction
 captured at `eth_sendRawTransaction` rather than against anything the extension
 reported, rejecting each prompt is required to return a rejection to the page
 rather than hang or resolve, a network switch request is required to leave the
-stored network unchanged and send no `chainChanged` until it is approved, a
+stored network unchanged and send no `chainChanged` until it is approved, the
-network switch in Settings is required to send the page `chainChanged` with the
+popup open all along is required to show the `[TESTNET]` banner once a switch to
-new chain id, a prompt raised while another approval window has focus is
+Sepolia is approved and to drop it once the switch back is, a network switch in
-required to open a window of its own, and the password is required to be absent
+Settings is required to send the page `chainChanged` with the new chain id, a
-from every message the approval window sends to the background — with the
+prompt raised while another approval window has focus is required to open a
-message that would carry it required to be present, so that check cannot pass by
+window of its own, and the password is required to be absent from every message
-observing nothing. That last one is the standing floor under
+the approval window sends to the background — with the message that would carry
+it required to be present, so that check cannot pass by observing nothing. That
+last one is the standing floor under
 [#157](https://git.eeqj.de/sneak/AutistMask/issues/157).
 
 The limits of that coverage and of the rest of the Chrome suite, none of them
@@ -603,9 +605,10 @@ suite), wallet creation through the UI, the Add Token screen, and the dApp round
 trips — `eth_requestAccounts`, `personal_sign`, `wallet_switchEthereumChain`
 rejected and then approved, `eth_sendTransaction`, and a closed approval window
 rejecting with EIP-1193 4001 — driven through the real content script,
-background page and approval windows. The `personal_sign` prompt is also
+background page and approval windows. The popup open all along is required to
-required to fit its window without scrolling sideways, with the extension's
+show the `[TESTNET]` banner once the switch to Sepolia is approved and to drop
-pages at 170% zoom.
+it once the switch back is. The `personal_sign` prompt is also required to fit
+its window without scrolling sideways, with the extension's pages at 170% zoom.
 
 The suite lives in `tests/e2e/firefox/`. Its WebDriver client (`driver.js`) has
 **no npm dependencies at all**: it is built on global `fetch` and
@@ -1564,20 +1567,29 @@ such as an edit typed into Settings and not yet saved. Home is the one screen
 "Back" always re-renders, so the wallet list reflects anything that changed
 while the user was away from it.
 
-A network switch in Settings leaves every screen beneath Settings showing the
+A network switch leaves every screen on the page showing the previous network.
-previous network, so after it "Back" behaves as in a reopened popup: every
+The user makes it in Settings, or approves a site's request and the background
-screen on the stack counts as not yet rendered, and the stack is cut at the
+saves it. Any other popup open meanwhile takes the switch from the stored
-first screen that cannot be rendered from saved state, such as Send or AddToken,
+record, even one saved while it was opening, and never switches the network
-or at AddressToken for any token but the native one, because that token was
+itself. A switch the user picks in its Settings while it takes one is made after
-picked on the previous network. The cut stack is saved with the switch, so a
+it, not overwritten by it. An approval window does not take the switch. After
-popup closed straight after it and reopened onto Settings lands in the same
+the switch, whichever way the page got it, "Back" behaves as in a reopened
-place. "Back" then renders the screen it lands on for the new network, and
+popup: every screen on the stack counts as not yet rendered, and the stack is
-anything typed there and not saved, which belonged to the previous network, is
+cut at the first screen that cannot be rendered from saved state, such as Send
-dropped. ConfirmTx, WaitTx, SuccessTx, ErrorTx and TransactionDetail are
+or AddToken, or at AddressToken for any token but the native one, because that
-rendered instead for the network of the transaction they show: the network it
+token was picked on the previous network and is no longer selected. The cut
-was reviewed on for ConfirmTx, and the network it was sent on for the others.
+stack is saved with the popup's new network, so a popup closed straight after
-Without a wallet the stack is not cut, because it starts at Welcome, which shows
+and reopened lands in the same place. The screen on top is drawn again for the
-nothing from a network.
+new network: Settings in place, and any other screen as a reopened popup draws
+it, so Home takes the place of one that cannot be rendered from saved state or
+of AddressToken for a token no longer selected. "Back" then renders the screen
+it lands on for the new network, and anything typed there and not saved, which
+belonged to the previous network, is dropped. ConfirmTx, WaitTx, SuccessTx,
+ErrorTx and TransactionDetail are rendered instead for the network of the
+transaction they show: the network it was reviewed on for ConfirmTx, and the
+network it was sent on for the others. Without a wallet the stack is not cut and
+only Settings is drawn again, because the stack starts at Welcome, and Welcome
+and AddWallet show nothing from a network.
 
 Every screen that holds secret material in the page registers a cleanup with
 `onViewLeave()` (`src/popup/views/helpers.js`), which `showView()` runs on every
@@ -2428,10 +2440,11 @@ view would leave a wallet one click from deletion.
     - Decoded action (if calldata is recognized): action name, token details,
       amounts, what each swap step spends that the `Amount` line does not give,
       what each `PERMIT2_TRANSFER_FROM` moves and where to, what each
-      `PERMIT2_PERMIT` whose amount is not the `Amount` figure lets its spender
+      `PERMIT2_PERMIT` whose amount is not the `Amount` figure, and each
-      take, steps, deadline, and unless a swap pays only the From address, a
+      `PERMIT2_PERMIT_BATCH`, lets its spender take, steps, deadline, and unless
-      `Paid to` line for each other address it pays, or saying that a token
+      a swap pays only the From address, a `Paid to` line for each other address
-      stays in the router or who it pays is unknown (see Transaction Decoding)
+      it pays, or saying that a token stays in the router or who it pays is
+      unknown (see Transaction Decoding)
     - From: color dot + full address + etherscan link
     - Contract: color dot + full address + etherscan link, token symbol label if
       known; for a contract creation, the same sentence as on WaitTx
@@ -3224,38 +3237,39 @@ Currently supported:
   `Unlimited` included, stands as the `Amount` figure in place of the total,
   which it does only in the plain shape of Uniswap's own routes: it comes before
   the step that sets the input side, it is the only `PERMIT2_PERMIT` in the
-  transaction, its spender is the router, the router may not let it fail, no
+  transaction and there is no `PERMIT2_PERMIT_BATCH`, its spender is the router,
-  step before it takes its token or a token the decoder does not know, and the
+  the router may not let it fail, no step before it takes its token or a token
-  decoder reads every step after it in full. Permit2 then lets the router take
+  the decoder does not know, and the decoder reads every step after it in full.
-  no more of the token than that amount, so the permit covers every take of it.
+  Permit2 then lets the router take no more of the token than that amount, so
-  A step the decoder does not read in full may raise what Permit2 lets the
+  the permit covers every take of it. A later permit or batch may raise what
-  router take, as a `PERMIT2_PERMIT_BATCH` can: a command the decoder does not
+  Permit2 lets the router take, and so may a step the decoder does not read in
-  read (listed at the end of this section), a step whose input it cannot read,
+  full: a command the decoder does not read (listed at the end of this section),
-  in whole or in part, and a step it fails on. Every other `PERMIT2_PERMIT`,
+  a step whose input it cannot read, in whole or in part, and a step it fails
-  before the step that sets the input side or after it, leaves `Token In` and
+  on. Every other `PERMIT2_PERMIT`, before the step that sets the input side or
-  the `Amount` line as they read with no permit: a permit of 5,000 DAI to
+  after it, leaves `Token In` and the `Amount` line as they read with no permit:
-  another address and then a V3 exact-in of 600 USDT read `Swap USDT → USDC`
+  a permit of 5,000 DAI to another address and then a V3 exact-in of 600 USDT
-  with `Amount 600.0000 USDT`, and so do that exact-in and then a permit of
+  read `Swap USDT → USDC` with `Amount 600.0000 USDT`, and so do that exact-in
-  5,000 DAI to the router. When a permit's amount stands and the step that sets
+  and then a permit of 5,000 DAI to the router. When a permit's amount stands
-  the input side spends a token other than the permit's, or one the decoder does
+  and the step that sets the input side spends a token other than the permit's,
-  not know, that step's amount gets lines of its own, unless it states no amount
+  or one the decoder does not know, that step's amount gets lines of its own,
-  and the user pays it none of its input token. Each take the total does not
+  unless it states no amount and the user pays it none of its input token. Each
-  count gives three lines after the `Amount` line (after `Token In` when there
+  take the total does not count gives three lines after the `Amount` line (after
-  is none): one of a token other than `Token In`; one of `Token In` after an
+  `Token In` when there is none): one of a token other than `Token In`; one of
-  amount that is not a quantity (a V4 open delta, `ALREADY_PAID`, which keep
+  `Token In` after an amount that is not a quantity (a V4 open delta,
-  their wording on the `Amount` line, or no stated amount, as of a V4 exact-out
+  `ALREADY_PAID`, which keep their wording on the `Amount` line, or no stated
-  step); and one whose amount the decoder does not know. When the step that sets
+  amount, as of a V4 exact-out step); and one whose amount the decoder does not
-  the input side states no amount, the user pays it some of its input token, and
+  know. When the step that sets the input side states no amount, the user pays
-  there is no `Amount` line, that step gets them too whenever another take's
+  it some of its input token, and there is no `Amount` line, that step gets them
-  lines give a figure, or a `PERMIT2_TRANSFER_FROM` of its token gives one, on
+  too whenever another take's lines give a figure, or a `PERMIT2_TRANSFER_FROM`
-  the lines below or, into the router, on its `Paid to` line, so that figure
+  of its token gives one, on the lines below or, into the router, on its
-  cannot read as all that leaves. When it states no amount and the user pays it
+  `Paid to` line, so that figure cannot read as all that leaves. When it states
-  none of its input token, as when the router pays it, that step takes none of
+  no amount and the user pays it none of its input token, as when the router
-  that token from the user's wallet and never gets them, with a permit or
+  pays it, that step takes none of that token from the user's wallet and never
-  without. They come in step order, the step that sets the input side first when
+  gets them, with a permit or without. They come in step order, the step that
-  it has them: `Moved from the sender`, its amount, worded as the `Amount` line
+  sets the input side first when it has them: `Moved from the sender`, its
-  words one, or `Unknown (could not be decoded)` when the decoder does not know
+  amount, worded as the `Amount` line words one, or
-  it; `Token moved`, giving the token's address as the `Token In` line does; and
+  `Unknown (could not be decoded)` when the decoder does not know it;
+  `Token moved`, giving the token's address as the `Token In` line does; and
   `Moved to`, which reads `The swap step that spends it`. A token the decoder
   does not know gives the `Moved from the sender` line alone. A step may also
   take from the user's wallet what the decoder did not read: a V4 step whose
@@ -3284,17 +3298,25 @@ Currently supported:
   giving the token's address as the `Token In` line does; and
   `Allowance spender`, the address it lets take the token. Only a permit whose
   amount stands gives none: the `Amount` line gives its amount, `Token In` its
-  token, and its spender is the router. These lines change neither the `Paid to`
+  token, and its spender is the router. Each allowance a `PERMIT2_PERMIT_BATCH`
-  lines nor the minimum's label. A step goes unread when its recipient does not
+  grants, one for each token it names, all for its one spender, gives the same
-  decode as an address, when it is a V3 swap step whose path is shorter than one
+  three lines, in step order with those of each `PERMIT2_PERMIT`. A
-  token address or has bytes after its last hop, or when it is a command the
+  `PERMIT2_PERMIT` or `PERMIT2_PERMIT_BATCH` whose input the decoder cannot
-  decoder does not read: every command other than `PERMIT2_PERMIT`,
+  read, such as one whose token or spender word has a nonzero top byte, may let
-  `PERMIT2_TRANSFER_FROM`, `V2_SWAP_EXACT_IN`, `V2_SWAP_EXACT_OUT`,
+  any spender take any amount of any token: it gives one `Permit2 allowance`
-  `V3_SWAP_EXACT_IN`, `V3_SWAP_EXACT_OUT`, `V4_SWAP`, `SWEEP`, `TRANSFER`,
+  line alone, reading `Unknown (could not be decoded)`, and leaves no `Amount`
-  `PAY_PORTION`, `PAY_PORTION_FULL_PRECISION`, `ACROSS_V4_DEPOSIT_V3`,
+  line, whose figure might be too low. These lines change neither the `Paid to`
-  `WRAP_ETH`, `UNWRAP_WETH` and `BALANCE_CHECK_ERC20`
+  lines nor the minimum's label: a permit or batch pays nobody. A step goes
-  (`PERMIT2_TRANSFER_FROM_BATCH`, `EXECUTE_SUB_PLAN` and the NFT commands among
+  unread when its recipient does not decode as an address, when it is a V3 swap
-  them), or a type its release names no command for.
+  step whose path is shorter than one token address or has bytes after its last
+  hop, or when it is a command the decoder does not read: every command other
+  than `PERMIT2_PERMIT`, `PERMIT2_PERMIT_BATCH`, `PERMIT2_TRANSFER_FROM`,
+  `V2_SWAP_EXACT_IN`, `V2_SWAP_EXACT_OUT`, `V3_SWAP_EXACT_IN`,
+  `V3_SWAP_EXACT_OUT`, `V4_SWAP`, `SWEEP`, `TRANSFER`, `PAY_PORTION`,
+  `PAY_PORTION_FULL_PRECISION`, `ACROSS_V4_DEPOSIT_V3`, `WRAP_ETH`,
+  `UNWRAP_WETH` and `BALANCE_CHECK_ERC20` (`PERMIT2_TRANSFER_FROM_BATCH`,
+  `EXECUTE_SUB_PLAN` and the NFT commands among them), or a type its release
+  names no command for.
 
 ### Non-Goals Forever
 

src/popup/index.js

@@ -11,6 +11,8 @@ const { StateUnusableError } = require("../shared/stateSchema");
 const { log, setRuntimeDebug } = require("../shared/log");
 const { refreshPrices } = require("../shared/prices");
 const { refreshBalances } = require("../shared/balances");
+const { copyChainSwitchFields } = require("../shared/chainSwitchFields");
+const { clearPopupCaches } = require("../shared/chainSwitch");
 const {
     $,
     showView,
@@ -22,6 +24,7 @@ const {
 } = require("./views/helpers");
 const { applyTheme } = require("./theme");
 const {
+    onStorageChanged,
     tabsGetCurrent,
     tabsGetZoom,
     windowsGetCurrent,
@@ -72,12 +75,13 @@ let refreshTimer = null;
 // lock, its results are copied onto the address records in `state` only if the
 // network it ran on is still the active one, on this page and in the stored
 // record; the background's switch, after the user approves a site's request,
-// changes only the stored record. A switch while the refresh ran cleared every
+// reaches this page only after the stored record (followNetworkSwitch() below).
-// address's balances (applyChainSwitchFields() in
+// A switch while the refresh ran cleared every address's balances
-// src/shared/chainSwitchFields.js), and the previous network's must not come
+// (applyChainSwitchFields() in src/shared/chainSwitchFields.js), and the
-// back over them (https://git.eeqj.de/sneak/AutistMask/issues/577). A dropped
+// previous network's must not come back over them
-// refresh is not recorded as done. Results are copied by address, so an address
+// (https://git.eeqj.de/sneak/AutistMask/issues/577). A dropped refresh is not
-// added or removed meanwhile is left as it is.
+// recorded as done. Results are copied by address, so an address added or
+// removed meanwhile is left as it is.
 async function doRefreshAndRender() {
     if (refreshInFlight) return;
     refreshInFlight = true;
@@ -147,6 +151,7 @@ const ctx = {
     renderWalletList,
     doRefreshAndRender,
     startRefresh,
+    restoreView,
     pageClosed: pageClosed.signal,
     showAddWalletView: () => {
         pushCurrentView();
@@ -214,6 +219,28 @@ function fallbackView() {
     showView("main");
 }
 
+// When the background saves a network switch, once the user approves a site's
+// request, or another popup page saves one, this page follows the stored
+// record. It takes the network the record names as a save reads it, holding
+// the lock, so no later save of this page writes the previous network back, and
+// then leaves the page as a switch in Settings leaves it. This page's own
+// switch in Settings is made under the lock as well (onChainSwitch() in
+// src/shared/chainSwitch.js), so a record naming a network other than this
+// page's always holds a switch saved elsewhere, and a switch the user picks
+// here while this waits for the lock is made after it.
+async function followNetworkSwitch() {
+    let switched = false;
+    // A failed save is reported by saveState() itself: see onSaveFailure().
+    await saveState((stored) => {
+        if (stored.networkId === state.networkId) return false;
+        settings.cutViewStack();
+        copyChainSwitchFields(state, stored);
+        clearPopupCaches();
+        switched = true;
+    }).catch(() => {});
+    if (switched) settings.showNewNetwork();
+}
+
 // The background opens the approval window as wide as the page, but the
 // browser counts the window's frame in that width, and a screen taller than
 // the window takes a vertical scrollbar out of it too. So once the screen is
@@ -358,6 +385,17 @@ async function init() {
     settingsAddToken.init(ctx);
     deleteAddress.init(ctx);
 
+    // Only a record naming a network other than this page's is followed: the
+    // one this page's own switch in Settings saves names the network it
+    // already has, and a record naming none is no switch.
+    onStorageChanged((changes) => {
+        const written = changes.autistmask && changes.autistmask.newValue;
+        if (!written || !written.networkId) return;
+        if (written.networkId !== state.networkId) followNetworkSwitch();
+    });
+    // A switch saved since loadState() above, before there was a listener.
+    followNetworkSwitch();
+
     if (!state.hasWallet) {
         showView("welcome");
     } else {

src/popup/viewRouter.js

@@ -39,8 +39,8 @@ function markViewRendered(view) {
 }
 
 // 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
+// asks for one after a network switch, because every screen then on the page
-// then on the page shows the previous network (views/settings.js); the
+// shows the previous network (showNewNetwork() in views/settings.js); the
 // unit tests, which simulate several page loads against one module
 // instance, ask for one too.
 function resetRenderedViews() {

src/popup/views/settings.js

@@ -38,6 +38,8 @@ const {
 
 const { notify, sendMessage } = require("../../shared/browserApi");
 
+let ctx;
+
 let versionClickCount = 0;
 let versionClickTimer = null;
 
@@ -243,7 +245,51 @@ async function renderSiteLists() {
     );
 }
 
-function init(ctx) {
+// 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 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.
+function cutViewStack() {
+    if (!state.hasWallet) return;
+    if (state.selectedToken !== "ETH") {
+        const tokenView = state.viewStack.indexOf("address-token");
+        if (tokenView !== -1) {
+            state.viewStack = state.viewStack.slice(0, tokenView);
+        }
+        state.selectedToken = null;
+    }
+    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() {
+    resetRenderedViews();
+    if (state.currentView === "settings") {
+        markViewRendered("settings");
+        $("settings-network").value = state.networkId;
+        $("settings-rpc").value = state.rpcUrl;
+        $("settings-blockscout").value = state.blockscoutUrl;
+        renderTrackedTokens();
+    } else if (state.hasWallet) {
+        ctx.restoreView();
+    }
+    updateDebugBanner(state.currentView);
+}
+
+function init(_ctx) {
+    ctx = _ctx;
     deleteWallet.init(ctx);
     showPhrase.init();
 
@@ -319,37 +365,18 @@ function init(ctx) {
 
     const networkSelect = $("settings-network");
     networkSelect.addEventListener("change", async () => {
+        // Whether `state` already has the network picked is asked only once
+        // the switch holds the lock: while an earlier pick waits for it,
+        // `state` still has the network before that pick, and a pick back to
+        // that network must still be made.
         const newId = networkSelect.value;
-        if (newId === state.networkId) return;
+        cutViewStack();
-        // 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);
+        if (!net) return;
         // Open pages are told by the background, as after a site's approved
         // switch request.
         notify({ type: "AUTISTMASK_NETWORK_CHANGED", chainId: net.chainId });
-        resetRenderedViews();
+        showNewNetwork();
-        // Settings itself, and the testnet banner above it, are brought up
-        // to date for the new network here.
-        markViewRendered("settings");
-        $("settings-rpc").value = state.rpcUrl;
-        $("settings-blockscout").value = state.blockscoutUrl;
-        renderTrackedTokens();
-        updateDebugBanner(state.currentView);
         showFlash("Switched to " + net.name + ".");
     });
 
@@ -484,4 +511,10 @@ function init(ctx) {
     });
 }
 
-module.exports = { init, show, renderSiteLists };
+module.exports = {
+    init,
+    show,
+    renderSiteLists,
+    cutViewStack,
+    showNewNetwork,
+};

src/shared/browserApi.js

@@ -224,6 +224,19 @@ function storageRemove(keys) {
     return Promise.resolve(storage.remove(keys));
 }
 
+/**
+ * Call `listener` after every write to `storage.local`, whether this page,
+ * another page or the background made it, with what the write changed, as the
+ * browser reports it: `{ [key]: { oldValue, newValue } }`.
+ *
+ * @param {function(Object): void} listener
+ */
+function onStorageChanged(listener) {
+    namespaceMember("storage").onChanged.addListener((changes, areaName) => {
+        if (areaName === "local") listener(changes);
+    });
+}
+
 /**
  * Run `fn` while holding the browser's lock called `name`
  * (`navigator.locks`), and settle as `fn` settles. Every page of the extension
@@ -385,6 +398,7 @@ module.exports = {
     getPlatformInfo,
     hasBrowserNamespace,
     notify,
+    onStorageChanged,
     runtimeApi,
     sendMessage,
     sessionStorageGet,

src/shared/chainSwitch.js

@@ -1,8 +1,17 @@
-// Consolidated chain-switch handler for the popup.
+// The popup's network switch.
 //
-// Every state change required when the active network changes is
+// A network switch reaches the popup's `state` in one of two ways:
-// performed here so that callers (settings UI, future chain additions) all go
+//
-// through a single code path.
+// - onChainSwitch() below makes the switch the user picks in Settings, with
+//   applyChainSwitchFields() (chainSwitchFields.js).
+// - followNetworkSwitch() in src/popup/index.js takes a switch the background
+//   or another popup page saved, from the stored record, with
+//   copyChainSwitchFields() (chainSwitchFields.js).
+//
+// Both change `state` inside a save, holding the lock, and both reset the
+// popup's own caches through clearPopupCaches(), so a reset added there
+// reaches both. A field applyChainSwitchFields() sets has to be copied by
+// copyChainSwitchFields() too.
 //
 // Adding a new chain (e.g. ETC) requires only a new entry in
 // networks.js — no per-caller wiring is needed.
@@ -20,22 +29,32 @@
 const { applyChainSwitchFields } = require("./chainSwitchFields");
 const { clearPrices } = require("./prices");
 
+// The popup's own caches a network switch resets. Prices are chain-specific
+// (testnet tokens are worthless, ETC has different pricing, etc.). In-memory
+// and per bundle, so this is the popup's own cache — the only context that
+// ever fills it.
+function clearPopupCaches() {
+    clearPrices();
+}
+
 // Switch the active chain and reset all chain-specific cached state.
-// Returns the network configuration object for the new chain.
+// Returns the network configuration object for the new chain, or null when
+// `state` already has that network once the save holds the lock, and nothing
+// is switched.
+//
+// `state` is switched inside the save that stores the switch, holding the
+// lock, so it is never switched while a follow of a switch saved elsewhere
+// waits for the lock (followNetworkSwitch() in src/popup/index.js): that
+// follow runs first, and this switch is made after it.
 async function onChainSwitch(newNetworkId) {
     const { state, saveState } = require("./state");
-
+    let net = null;
-    const net = applyChainSwitchFields(state, newNetworkId);
+    await saveState(() => {
-
+        if (state.networkId === newNetworkId) return false;
-    // --- price cache ---
+        net = applyChainSwitchFields(state, newNetworkId);
-    // Prices are chain-specific (testnet tokens are worthless,
+        clearPopupCaches();
-    // ETC has different pricing, etc.). In-memory and per bundle, so this is
+    });
-    // the popup's own cache — the only context that ever fills it.
-    clearPrices();
-
-    await saveState();
-
     return net;
 }
 
-module.exports = { onChainSwitch };
+module.exports = { onChainSwitch, clearPopupCaches };

src/shared/chainSwitchFields.js

@@ -7,7 +7,7 @@
 // the singleton and saves; the background applies it to the detached record of
 // its own read-modify-write (src/background/state.js).
 //
-// Everything here is synchronous and touches nothing but the object it is
+// Everything here is synchronous and touches nothing but the objects it is
 // given: no storage, no caches, no imports beyond the network table. That is
 // what makes it usable on a record that has been read fresh from storage
 // microseconds earlier and is about to be written back.
@@ -76,4 +76,32 @@ function applyChainSwitchFields(s, newNetworkId) {
     return net;
 }
 
-module.exports = { applyChainSwitchFields };
+// Give `s` every field applyChainSwitchFields() sets, as `switched` holds it:
+// the popup takes a switch the background saved from the stored record this
+// way, rather than performing it again (src/popup/index.js). Balances are
+// taken by address, and an address `switched` does not have keeps none.
+function copyChainSwitchFields(s, switched) {
+    s.networkEndpoints = switched.networkEndpoints;
+    s.networkTrackedTokens = switched.networkTrackedTokens;
+    s.trackedTokens = switched.trackedTokens;
+    s.networkId = switched.networkId;
+    s.rpcUrl = switched.rpcUrl;
+    s.blockscoutUrl = switched.blockscoutUrl;
+    s.lastBalanceRefresh = switched.lastBalanceRefresh;
+    s.tokenHolderCache = switched.tokenHolderCache;
+    s.fraudContracts = switched.fraudContracts;
+
+    const stored = new Map();
+    for (const wallet of switched.wallets) {
+        for (const addr of wallet.addresses) stored.set(addr.address, addr);
+    }
+    for (const wallet of s.wallets) {
+        for (const addr of wallet.addresses) {
+            const got = stored.get(addr.address);
+            addr.balance = got ? got.balance : "0";
+            addr.tokenBalances = got ? got.tokenBalances : [];
+        }
+    }
+}
+
+module.exports = { applyChainSwitchFields, copyChainSwitchFields };

src/shared/state.js

@@ -466,7 +466,9 @@ function mergeNetworkEndpoints(base, ours, theirs) {
 // exists to remove, just delayed and confined to one page instead of two
 // (caught by tests/txStatus.test.js). A page's live picture of a field it
 // does not own goes on being whatever its last loadState() saw, same as
-// before this fix; only the persisted record is guaranteed current.
+// before this fix; only the persisted record is guaranteed current. The
+// network is the exception: the popup takes a switch another context saved
+// through `beforeWrite` (followNetworkSwitch() in src/popup/index.js).
 async function saveStateOnce(beforeWrite) {
     const result = await storageGet("autistmask");
     // The record in storage right now is about to be merged into and written

src/shared/uniswap.js

@@ -336,7 +336,8 @@ const UNNAMED_CURRENCY = "Unknown (not named in the calldata)";
 // currencies, and those commands may name one, so saying the calldata did not
 // name it would be false. The Paid to line uses it too, when a step may pay an
 // address this decoder did not read, and so do the lines for what a step
-// takes from the sender, when this decoder does not know it.
+// takes from the sender, when this decoder does not know it, and for what a
+// permit it could not read allows.
 const UNDECODED_CURRENCY = "Unknown (could not be decoded)";
 
 // The Paid to line for each token paid to the router, the swap's output or
@@ -528,6 +529,32 @@ function decodePermit2(input) {
     }
 }
 
+// Decode PERMIT2_PERMIT_BATCH (command 0x03) input bytes into the allowances
+// it grants, one for each token it names, all for its one spender, in the
+// shape decodePermit2() returns. Each release's
+// `contracts/base/Dispatcher.sol`, at the commit linked for it above, hands
+// Permit2 the batch in this shape.
+// ABI: (((address token, uint160 amount, uint48 expiration, uint48 nonce)[],
+//        address spender, uint256 sigDeadline), bytes signature)
+function decodePermit2Batch(input) {
+    try {
+        const d = coder.decode(
+            [
+                "tuple(tuple(address,uint160,uint48,uint48)[],address,uint256)",
+                "bytes",
+            ],
+            input,
+        );
+        return d[0][0].map((details) => ({
+            token: details[0],
+            amount: details[1],
+            spender: d[0][1],
+        }));
+    } catch {
+        return null;
+    }
+}
+
 // Decode BALANCE_CHECK_ERC20 (command 0x0e) input bytes. The router passes the
 // check when `owner` holds at least `minBalance` of `token`, and reads `owner`
 // as written, without map(), on every release that has the command:
@@ -1214,10 +1241,12 @@ function decode(data, toAddress, chainId, sources, fromAddress) {
         // The last PERMIT2_PERMIT this decoder read before a step set the
         // input side, or null (see permitStands after the loop).
         let permit = null;
-        // Every PERMIT2_PERMIT this decoder read, before a step set the input
+        // Every allowance a PERMIT2_PERMIT or PERMIT2_PERMIT_BATCH grants,
-        // side or after, in step order, as { token, amount, spender, step }.
+        // before a step set the input side or after, in step order, as
-        // Each whose amount is not the Amount figure gets lines of its own
+        // { token, amount, spender, step }. A permit or batch whose input
-        // (see after the PERMIT2_TRANSFER_FROM lines).
+        // this decoder cannot read is one with a null token, amount and
+        // spender. Each but a permit whose amount is the Amount figure gets
+        // lines of its own (see after the PERMIT2_TRANSFER_FROM lines).
         const permits = [];
         // The index of each step this decoder did not read in full: a
         // command it does not read, a step whose input it cannot read, in
@@ -1322,6 +1351,14 @@ function decode(data, toAddress, chainId, sources, fromAddress) {
         const spentUnread = () => {
             userPaid.push({ token: null, amount: null });
         };
+        // A PERMIT2_PERMIT or PERMIT2_PERMIT_BATCH at `step` whose input this
+        // decoder cannot read may let any spender take any amount of any
+        // token: one line says so, and there is no Amount line, whose figure
+        // may then be too low.
+        const permitUnread = (step) => {
+            permits.push({ token: null, amount: null, spender: null, step });
+            stepsUnread.push(step);
+        };
 
         // Who the steps pay, in whichever step and of whatever token.
         // MSG_SENDER is the sender. The router itself, as ADDRESS_THIS or by
@@ -1477,7 +1514,7 @@ function decode(data, toAddress, chainId, sources, fromAddress) {
                         permits.push({ ...p, step: i });
                         keepsRouterWeth = true;
                     } else {
-                        stepsUnread.push(i);
+                        permitUnread(i);
                     }
                     // Only a permit whose amount stands as the Amount figure
                     // names Token In (see permitStands). Every other permit,
@@ -1502,6 +1539,15 @@ function decode(data, toAddress, chainId, sources, fromAddress) {
                             beforeEveryTake: !tookBefore,
                         };
                     }
+                } else if (command === "PERMIT2_PERMIT_BATCH") {
+                    // Each allowance it grants gets the lines of a permit
+                    // whose amount does not stand. It pays nobody.
+                    const batch = decodePermit2Batch(inputs[i]);
+                    if (batch) {
+                        permits.push(...batch.map((p) => ({ ...p, step: i })));
+                    } else {
+                        permitUnread(i);
+                    }
                 } else if (command === "PERMIT2_TRANSFER_FROM") {
                     const p = decodePermit2TransferFrom(inputs[i]);
                     if (!p) {
@@ -1910,8 +1956,8 @@ function decode(data, toAddress, chainId, sources, fromAddress) {
                     }
                 } else {
                     // Any other step may pay an address this decoder does not
-                    // read: PERMIT2_PERMIT_BATCH and the NFT commands among
+                    // read: the NFT commands among them, and a type the
-                    // them, and a type the release names no command for.
+                    // release names no command for.
                     payeeUnread = true;
                     stepsUnread.push(i);
                 }
@@ -1961,17 +2007,19 @@ function decode(data, toAddress, chainId, sources, fromAddress) {
         // Amount figure in place of the total, which it does only in the
         // plain shape of Uniswap's own routes: it comes before the step that
         // set the input side, it is the only PERMIT2_PERMIT in the
-        // transaction, its spender is the router, the router may not let it
+        // transaction and there is no PERMIT2_PERMIT_BATCH, its spender is
-        // fail, no step before it took its token or one not known, and this
+        // the router, the router may not let it fail, no step before it took
-        // decoder read every step after it in full (see stepsUnread). Permit2
+        // its token or one not known, and this decoder read every step after
-        // then lets the router take no more of the token than that amount, so
+        // it in full (see stepsUnread). Permit2 then lets the router take no
-        // the permit covers every take of it. A later step this decoder did
+        // more of the token than that amount, so the permit covers every take
-        // not read may raise what Permit2 lets the router take, as a
+        // of it. A later permit or batch, or a later step this decoder did
-        // PERMIT2_PERMIT_BATCH can. Every other PERMIT2_PERMIT leaves Token In
+        // not read, may raise what Permit2 lets the router take. Every other
-        // and the Amount line as they read with no permit, and gets lines of
+        // PERMIT2_PERMIT leaves Token In and the Amount line as they read with
-        // its own below. A step that may take from the sender what this decoder
+        // no permit, and gets lines of its own below. A step that may take
-        // did not read leaves no figure, permit or not (see spentUnread()),
+        // from the sender what this decoder did not read leaves no figure,
-        // and an EXECUTE_SUB_PLAN step leaves both sides unknown (below).
+        // permit or not (see spentUnread()), and so does a permit or batch
+        // whose input it cannot read (see permitUnread()). An
+        // EXECUTE_SUB_PLAN step leaves both sides unknown (below).
         const stepCommands = Array.from(
             commandsBytes,
             (b) => commands[b & commandTypeMask],
@@ -1979,6 +2027,7 @@ function decode(data, toAddress, chainId, sources, fromAddress) {
         const permitStands =
             permit !== null &&
             stepCommands.filter((c) => c === "PERMIT2_PERMIT").length === 1 &&
+            !stepCommands.includes("PERMIT2_PERMIT_BATCH") &&
             sameAddress(permit.spender, toAddress) &&
             !permit.allowedToFail &&
             permit.beforeEveryTake &&
@@ -2147,11 +2196,13 @@ function decode(data, toAddress, chainId, sources, fromAddress) {
         };
 
         // A null token in `spentFromSender`, a step this decoder did not read
-        // or a token it does not know, leaves no Amount figure, which may
+        // or a token it does not know, and one in `permits`, a permit or
-        // then be too low.
+        // batch it could not read, leave no Amount figure, which may then be
+        // too low.
         if (
             present(inputAmount) &&
-            spentFromSender.every((s) => present(s.token))
+            spentFromSender.every((s) => present(s.token)) &&
+            permits.every((p) => present(p.token))
         ) {
             const amount = spentText(inputAmount, inInfo);
             details.push({
@@ -2201,16 +2252,24 @@ function decode(data, toAddress, chainId, sources, fromAddress) {
             );
         }
 
-        // What each PERMIT2_PERMIT lets its spender take: its amount, its
+        // What each allowance of a PERMIT2_PERMIT or PERMIT2_PERMIT_BATCH lets
-        // token and the spender, an address on a line of its own. Permit2's
+        // its spender take: its amount, its token and the spender, an address
-        // maximum is unbounded. Only a permit whose amount stands as the
+        // on a line of its own. Permit2's maximum is unbounded. Only a permit
-        // Amount figure (see permitStands) gets none: that line already gives
+        // whose amount stands as the Amount figure (see permitStands) gets
-        // its amount and Token In its token, and its spender is the router.
+        // none: that line already gives its amount and Token In its token,
-        // Every other permit, one after the step that set the input side
+        // and its spender is the router. Every other allowance, one after the
-        // included, gets these lines, so nothing it lets anyone take goes
+        // step that set the input side included, gets these lines, so nothing
-        // unstated.
+        // it lets anyone take goes unstated. A permit or batch this decoder
+        // could not read gets one line saying so.
         for (const p of permits) {
             if (permitStands && p.step === permit.step) continue;
+            if (!present(p.token)) {
+                details.push({
+                    label: "Permit2 allowance",
+                    value: UNDECODED_CURRENCY,
+                });
+                continue;
+            }
             details.push({
                 label: "Permit2 allowance",
                 value:

tests/balanceRefreshNetworkSwitch.test.js

@@ -97,9 +97,9 @@ test("a refresh that returns after a switch in Settings writes nothing, and the
     );
 });
 
-// The stored record still holds Ethereum Mainnet while the refresh's save reads
+// The switch is made only once the refresh's save, holding the lock, has
-// it, so only this page's own network shows the switch.
+// written Ethereum Mainnet's balances, and the switch then clears them.
-test("a refresh whose save is reading the stored record when the user switches in Settings writes nothing", async () => {
+test("a refresh whose save is reading the stored record when the user switches in Settings leaves none of its balances stored", async () => {
     const page = await bootPopup(unversionedValidProfile());
     expect(page.pageErrors).toEqual([]);
     const { state } = require("../src/shared/state");
@@ -145,7 +145,8 @@ test("a refresh that returns after the background switched the network writes no
 
     const refresh = await holdRefresh(page);
     // The background writes the switch to Sepolia, as its updateState() does
-    // once the user approves a site's request. This page is not told.
+    // once the user approves a site's request. This page is not told of it
+    // yet.
     const record = page.storage.read("autistmask");
     applyChainSwitchFields(record, "sepolia");
     page.storage.write("autistmask", record);

tests/chainSwitchGate.test.js

@@ -446,7 +446,10 @@ describe("switching the network in Settings tells every open tab", () => {
         global.chrome.runtime.sendMessage = (msg) => {
             bg.send(msg, POPUP);
         };
-        await require("../src/shared/state").loadState();
+        const { state, loadState } = require("../src/shared/state");
+        await loadState();
+        // Set by showView(), which is mocked above.
+        state.currentView = "settings";
         require("../src/popup/views/settings").init({
             pageClosed: new AbortController().signal,
         });

tests/e2e/firefox/run.js

@@ -867,6 +867,14 @@ step(
             "the page was not told of the approved switch: " +
                 JSON.stringify(events),
         );
+        // The popup, open all along, shows the new network
+        // (https://git.eeqj.de/sneak/AutistMask/issues/650).
+        await d.switchToWindow(env.popupWindow);
+        await d.waitFor(
+            "the open popup to show the testnet banner",
+            `const banner = document.getElementById("debug-banner");
+             return banner !== null && banner.textContent === "[TESTNET]";`,
+        );
 
         await openNetworkPrompt(env, "switch-restore", sepolia, mainnet);
         await d.click("#btn-approve-network");
@@ -881,6 +889,10 @@ step(
             isDeepStrictEqual(await storedNetwork(env), before),
             "switching back did not restore the mainnet network and endpoints",
         );
+        await d.waitFor(
+            "the open popup to drop the testnet banner",
+            `return document.getElementById("debug-banner") === null;`,
+        );
         await d.switchToWindow(env.dappWindow);
     },
 );

tests/e2e/run.js

@@ -4865,6 +4865,12 @@ test("a site's network switch changes nothing until the user approves it (#408)"
         "the page was not told of the approved switch: " +
             JSON.stringify(events),
     );
+    // The popup, open all along, shows the new network
+    // (https://git.eeqj.de/sneak/AutistMask/issues/650).
+    await env.page.waitForFunction(() => {
+        const banner = document.getElementById("debug-banner");
+        return banner !== null && banner.textContent === "[TESTNET]";
+    });
 
     const restored = await openNetworkPrompt(
         env,
@@ -4886,6 +4892,9 @@ test("a site's network switch changes nothing until the user approves it (#408)"
         isDeepStrictEqual(await storedNetwork(env.page), before),
         "switching back did not restore the mainnet network and endpoints",
     );
+    await env.page.waitForFunction(
+        () => document.getElementById("debug-banner") === null,
+    );
 });
 
 // Switching the network in Settings tells the page too, as an approved site

tests/popupFollowsNetworkSwitch.test.js

@@ -0,0 +1,267 @@
+// An open popup follows a network switch the background saves once the user
+// approves a site's request: it takes the new network from the stored record
+// and draws the screen it is on for it, as a switch in Settings does
+// (https://git.eeqj.de/sneak/AutistMask/issues/650). Driven through the real
+// popup over a stored profile on Ethereum Mainnet. The background's write is
+// the storage stub's set, which the stub reports to the page as the browser
+// does.
+
+const {
+    bootPopup,
+    cleanupPopup,
+    unversionedValidProfile,
+    TOKEN_ADDRESS,
+} = require("./support/popupBoot");
+const { makeStorageStub } = require("./support/storageStub");
+const {
+    applyChainSwitchFields,
+    copyChainSwitchFields,
+} = require("../src/shared/chainSwitchFields");
+const { NETWORKS } = require("../src/shared/networks");
+const { STATE_SCHEMA_VERSION } = require("../src/shared/stateSchema");
+
+afterEach(() => {
+    cleanupPopup();
+});
+
+const SEPOLIA_TOKEN = {
+    address: TOKEN_ADDRESS,
+    symbol: "TST",
+    decimals: 18,
+    name: "Test Token",
+};
+const MAINNET_TOKEN = {
+    address: "0x6B175474E89094C44Da98b954EedeAC495271d0F",
+    symbol: "DAI",
+    decimals: 18,
+    name: "Dai Stablecoin",
+};
+
+// A profile on Ethereum Mainnet that reopens the popup onto AddressDetail,
+// with DAI tracked there and TST tracked on Sepolia.
+function profileOnAddress() {
+    return unversionedValidProfile({
+        currentView: "address",
+        viewStack: ["main"],
+        selectedWallet: 0,
+        selectedAddress: 0,
+        trackedTokens: [MAINNET_TOKEN],
+        networkTrackedTokens: { sepolia: [SEPOLIA_TOKEN] },
+    });
+}
+
+// The popup reopened onto it.
+function bootOnAddress() {
+    return bootPopup(profileOnAddress());
+}
+
+// The background saves a switch to `networkId`, as its updateState() does
+// once the user approves a site's request.
+async function backgroundSwitch(page, networkId) {
+    const record = page.storage.read("autistmask");
+    applyChainSwitchFields(record, networkId);
+    await page.storage.local.set({ autistmask: record });
+    await page.settle();
+    await page.settle();
+}
+
+test("the popup open on AddressDetail shows the new network and its balances", async () => {
+    const page = await bootOnAddress();
+    expect(page.pageErrors).toEqual([]);
+    expect(page.visibleViews()).toEqual(["address"]);
+    expect(page.node("address-balances").innerHTML).toContain("DAI");
+    expect(page.node("debug-banner")).toBeNull();
+
+    await backgroundSwitch(page, "sepolia");
+
+    const { state } = require("../src/shared/state");
+    expect(state.networkId).toBe("sepolia");
+    expect(state.rpcUrl).toBe(NETWORKS.sepolia.defaultRpcUrl);
+    expect(page.visibleViews()).toEqual(["address"]);
+    const balances = page.node("address-balances").innerHTML;
+    expect(balances).toContain("TST");
+    expect(balances).toContain("SepoliaETH");
+    expect(balances).not.toContain("DAI");
+    expect(page.text("debug-banner")).toBe("[TESTNET]");
+
+    // Its next refresh runs on Sepolia, and what it fetched is stored.
+    await page.tick();
+    const { refreshBalances } = require("../src/shared/balances");
+    expect(refreshBalances.mock.lastCall[4]).toBe("sepolia");
+    const stored = page.storage.read("autistmask");
+    expect(stored.networkId).toBe("sepolia");
+    expect(stored.lastBalanceRefresh).toBeGreaterThan(0);
+});
+
+test("the popup open on Settings shows the new network, and Back draws the screen beneath for it", async () => {
+    const page = await bootOnAddress();
+    await page.click("btn-settings");
+    expect(page.visibleViews()).toEqual(["settings"]);
+
+    await backgroundSwitch(page, "sepolia");
+
+    expect(page.visibleViews()).toEqual(["settings"]);
+    expect(page.value("settings-network")).toBe("sepolia");
+    expect(page.value("settings-rpc")).toBe(NETWORKS.sepolia.defaultRpcUrl);
+    expect(page.node("settings-tracked-tokens").innerHTML).toContain("TST");
+    expect(page.text("debug-banner")).toBe("[TESTNET]");
+
+    await page.click("btn-settings-back");
+    expect(page.visibleViews()).toEqual(["address"]);
+    expect(page.node("address-balances").innerHTML).not.toContain("DAI");
+});
+
+// Neither can be drawn again for the new network: Send cannot be rendered from
+// saved state, and DAI was picked on Ethereum Mainnet, where alone it is
+// tracked. A reopened popup goes to Home in their place.
+test.each([
+    ["Send", (page) => page.click("btn-send")],
+    [
+        "AddressToken for DAI",
+        async (page) => {
+            const { state } = require("../src/shared/state");
+            state.selectedToken = MAINNET_TOKEN.address;
+            require("../src/popup/views/helpers").pushCurrentView();
+            require("../src/popup/views/addressToken").show();
+            await page.settle();
+        },
+    ],
+])("the popup open on %s goes to Home", async (_view, open) => {
+    const page = await bootOnAddress();
+    await open(page);
+    expect(page.visibleViews()).not.toEqual(["address"]);
+
+    await backgroundSwitch(page, "sepolia");
+
+    expect(page.visibleViews()).toEqual(["main"]);
+    expect(page.text("total-value")).toBe("0.0000 SepoliaETH");
+});
+
+// The report of the switch's own save names the network the page already has.
+test("a switch in Settings is not taken a second time when its save is reported", async () => {
+    const page = await bootOnAddress();
+    await page.click("btn-settings");
+    const { get, set } = page.storage.local;
+    const reads = get.mock.calls.length;
+    const writes = set.mock.calls.length;
+
+    const select = page.node("settings-network");
+    select.value = "sepolia";
+    for (const fn of select.listeners.change) await fn();
+    await page.settle();
+    await page.settle();
+
+    expect(get).toHaveBeenCalledTimes(reads + 1);
+    expect(set).toHaveBeenCalledTimes(writes + 1);
+    expect(page.text("flash-msg")).toBe("Switched to Sepolia Testnet.");
+});
+
+// The background saves the switch once the popup has read the stored record
+// and before it listens for changes to it, so the browser tells the page
+// nothing of it. Nor is any later write reported here: Chrome reports none
+// that leaves the record as it was, such as the popup's own save at start-up.
+test("a switch saved while the popup opens, before it listens for one, is followed", async () => {
+    const storage = makeStorageStub({ autistmask: profileOnAddress() });
+    storage.onChanged = { addListener: () => {} };
+    const read = storage.local.get.getMockImplementation();
+    storage.local.get.mockImplementationOnce(async (key) => {
+        const loaded = await read(key);
+        const record = storage.read("autistmask");
+        applyChainSwitchFields(record, "sepolia");
+        storage.write("autistmask", record);
+        return loaded;
+    });
+    const page = await bootPopup(undefined, { storage });
+    await page.settle();
+
+    const { state } = require("../src/shared/state");
+    expect(page.pageErrors).toEqual([]);
+    expect(state.networkId).toBe("sepolia");
+    expect(page.visibleViews()).toEqual(["address"]);
+    expect(page.node("address-balances").innerHTML).toContain("SepoliaETH");
+    expect(page.text("debug-banner")).toBe("[TESTNET]");
+});
+
+// While the popup's follow of the background's switch to Sepolia waits for the
+// lock, the user picks Sepolia in Settings and then Ethereum Mainnet again. The
+// last pick is the network stored, and the last one sites are told of.
+test("a switch in Settings made while a follow waits for the lock is not overwritten by it", async () => {
+    const page = await bootOnAddress();
+    await page.click("btn-settings");
+
+    // Another write holds the lock, so every save of the page waits for it.
+    let releaseLock;
+    const lockHeld = navigator.locks.request(
+        "autistmask",
+        () =>
+            new Promise((resolve) => {
+                releaseLock = resolve;
+            }),
+    );
+    await backgroundSwitch(page, "sepolia");
+    const select = page.node("settings-network");
+    const picks = [];
+    for (const networkId of ["sepolia", "mainnet"]) {
+        select.value = networkId;
+        for (const fn of select.listeners.change) picks.push(fn());
+    }
+    releaseLock();
+    await lockHeld;
+    await Promise.all(picks);
+    await page.settle();
+
+    const { state } = require("../src/shared/state");
+    expect(state.networkId).toBe("mainnet");
+    expect(page.storage.read("autistmask").networkId).toBe("mainnet");
+    expect(page.value("settings-network")).toBe("mainnet");
+    const told = globalThis.chrome.runtime.sendMessage.mock.calls
+        .map(([message]) => message)
+        .filter((message) => message.type === "AUTISTMASK_NETWORK_CHANGED");
+    expect(told.at(-1).chainId).toBe(NETWORKS.mainnet.chainId);
+});
+
+// Such as one a newer build wrote, which this build cannot read. Nothing reads
+// or writes the stored record for it: the popup's next save finds it, as
+// before.
+test("a record that names no network is not followed", async () => {
+    const page = await bootOnAddress();
+    const { get, set } = page.storage.local;
+    const reads = get.mock.calls.length;
+
+    await set({
+        autistmask: {
+            schemaVersion: STATE_SCHEMA_VERSION + 1,
+            wallets: [{ type: "hd", name: "Main", addresses: [] }],
+        },
+    });
+    await page.settle();
+
+    expect(get).toHaveBeenCalledTimes(reads);
+    expect(page.visibleViews()).toEqual(["address"]);
+});
+
+// A record that takes the switch from the switched record ends up as that
+// record, balances the background fetched since included.
+test("copyChainSwitchFields() takes every field applyChainSwitchFields() sets", () => {
+    const before = unversionedValidProfile({
+        trackedTokens: [MAINNET_TOKEN],
+        networkTrackedTokens: { sepolia: [SEPOLIA_TOKEN] },
+        networkEndpoints: {
+            sepolia: {
+                rpcUrl: "http://127.0.0.1:8545",
+                blockscoutUrl: "http://127.0.0.1:4000/api/v2",
+            },
+        },
+        lastBalanceRefresh: 1,
+        tokenHolderCache: { [MAINNET_TOKEN.address]: 5000 },
+        fraudContracts: ["0x1111111111111111111111111111111111111111"],
+    });
+    const switched = structuredClone(before);
+    applyChainSwitchFields(switched, "sepolia");
+    switched.wallets[0].addresses[0].balance = "2.0";
+
+    const follower = structuredClone(before);
+    copyChainSwitchFields(follower, switched);
+
+    expect(follower).toEqual(switched);
+});

tests/support/popupBoot.js

@@ -311,7 +311,7 @@ async function bootPopup(stored, options) {
     const windowListeners = {};
 
     globalThis.chrome = {
-        storage: { local: storage.local },
+        storage: { local: storage.local, onChanged: storage.onChanged },
         runtime: {
             sendMessage: jest.fn(async () => ({})),
             getURL: (p) => "chrome-extension://autistmask/" + p,

tests/support/storageStub.js

@@ -18,7 +18,9 @@
 // a storage stub by hand.
 
 // One storage area: get, set and remove over its own store, cloning both ways.
-function makeArea(store, tick) {
+// `changed` is handed what each set or remove changed, in the shape
+// storage.onChanged reports it.
+function makeArea(store, tick, changed) {
     const get = jest.fn(async (key) => {
         tick();
         if (key === undefined || key === null) return structuredClone(store);
@@ -34,14 +36,25 @@ function makeArea(store, tick) {
 
     const set = jest.fn(async (items) => {
         tick();
+        const changes = {};
         for (const k of Object.keys(items)) {
+            changes[k] = structuredClone({
+                oldValue: store[k],
+                newValue: items[k],
+            });
             store[k] = structuredClone(items[k]);
         }
+        changed(changes);
     });
 
     const remove = jest.fn(async (key) => {
         tick();
-        for (const k of Array.isArray(key) ? key : [key]) delete store[k];
+        const changes = {};
+        for (const k of Array.isArray(key) ? key : [key]) {
+            changes[k] = { oldValue: store[k] };
+            delete store[k];
+        }
+        changed(changes);
     });
 
     return { get, set, remove };
@@ -54,12 +67,22 @@ function makeArea(store, tick) {
 function makeStorageStub(initial, onOp) {
     const store = initial ? structuredClone(initial) : {};
     const tick = onOp || (() => {});
-    const local = makeArea(store, tick);
+    // storage.onChanged: after a set or remove has finished, every listener is
+    // called with what it changed and the area's name, as the browser calls
+    // them for a write by any page or the background.
+    const listeners = [];
+    const announce = (areaName) => (changes) => {
+        Promise.resolve().then(() => {
+            for (const fn of listeners) fn(structuredClone(changes), areaName);
+        });
+    };
+    const local = makeArea(store, tick, announce("local"));
 
     return {
         // Drop this straight in as chrome.storage.
         local,
-        session: makeArea({}, tick),
+        session: makeArea({}, tick, announce("session")),
+        onChanged: { addListener: (fn) => listeners.push(fn) },
         get: local.get,
         set: local.set,
         remove: local.remove,
@@ -71,7 +94,9 @@ function makeStorageStub(initial, onOp) {
                 ? structuredClone(store)
                 : structuredClone(store[key]),
         // Seed or replace a record without going through the module under
-        // test — for standing in as "another page wrote this".
+        // test — for standing in as "another page wrote this". Nothing is
+        // announced to storage.onChanged, so it also stands in for the time
+        // before the browser tells this page of such a write.
         write: (key, value) => {
             store[key] = structuredClone(value);
         },

tests/trackedTokensPerNetwork.test.js

@@ -161,6 +161,7 @@ test("a token added by contract address on Sepolia is tracked on Sepolia only",
     );
     expect(stored().trackedTokens).toEqual([SEPOLIA_TOKEN]);
 
+    await boot.click("btn-settings");
     await chooseNetwork(boot, "mainnet");
     expect(stored().networkId).toBe("mainnet");
     expect(stored().trackedTokens).toEqual([MAINNET_TOKEN]);

tests/uniswap.test.js

@@ -59,6 +59,25 @@ function encodePermit2(token, amount, spender) {
     );
 }
 
+// Helper: encode a PERMIT2_PERMIT_BATCH input (command 0x03), one allowance
+// for each [token, amount], all for `spender`
+function encodePermit2Batch(allowances, spender) {
+    return coder.encode(
+        [
+            "tuple(tuple(address,uint160,uint48,uint48)[],address,uint256)",
+            "bytes",
+        ],
+        [
+            [
+                allowances.map(([token, amount]) => [token, amount, 0, 0]),
+                spender,
+                9999999999,
+            ],
+            "0x1234",
+        ],
+    );
+}
+
 // Helper: encode a BALANCE_CHECK_ERC20 input (command 0x0e)
 function encodeBalanceCheck(owner, token, minBalance) {
     return coder.encode(
@@ -2100,28 +2119,17 @@ describe("uniswap decoder", () => {
             ROUTER_ADDR,
         );
 
-        // A PERMIT2_PERMIT_BATCH, which this decoder does not read, may raise
+        // A PERMIT2_PERMIT_BATCH may raise what the router may take of the
-        // what the router may take of the permit's token again.
+        // permit's token again, and its allowance gets lines of its own.
         test("a split after a PERMIT2_PERMIT and a PERMIT2_PERMIT_BATCH shows the total the steps take", () => {
-            const permitBatch = coder.encode(
-                [
-                    "tuple(tuple(address,uint160,uint48,uint48)[],address,uint256)",
-                    "bytes",
-                ],
-                [
-                    [
-                        [[USDT_ADDR, 10000000000n, 0, 0]], // 10,000 USDT
-                        ROUTER_ADDR,
-                        9999999999,
-                    ],
-                    "0x1234",
-                ],
-            );
             const result = decodeSteps(
                 [0x0a, 0x03, 0x00, 0x08],
                 [
                     encodePermit2(USDT_ADDR, USDT_600, ROUTER_ADDR),
-                    permitBatch,
+                    encodePermit2Batch(
+                        [[USDT_ADDR, 10000000000n]], // 10,000 USDT
+                        ROUTER_ADDR,
+                    ),
                     V3_600,
                     encodeV2SwapExactIn(USER_ADDR, 9400000000n, 1n, [
                         USDT_ADDR,
@@ -2132,6 +2140,12 @@ describe("uniswap decoder", () => {
             expect(linesBetweenTokens(result)).toEqual([
                 ["Amount", "10000.0000 USDT"],
                 ...USDT_600_LINES,
+                ...permitLines(
+                    "10000.0000 USDT",
+                    USDT_ADDR,
+                    "USDT",
+                    ROUTER_ADDR,
+                ),
             ]);
         });
 
@@ -2418,6 +2432,121 @@ describe("uniswap decoder", () => {
             });
         });
 
+        // https://git.eeqj.de/sneak/AutistMask/issues/652 — a
+        // PERMIT2_PERMIT_BATCH, and a PERMIT2_PERMIT this decoder cannot read,
+        // showed nothing of what they allow. Each allowance a batch grants now
+        // gets the lines of a permit whose amount does not stand, and a permit
+        // or batch that cannot be read gets one line saying so and leaves no
+        // Amount figure.
+        describe("a PERMIT2_PERMIT_BATCH, or a permit that cannot be read", () => {
+            const USDT_5000 = 5000000000n;
+            const DAI_5000 = 5000000000000000000000n;
+            const MAX_UINT160 = 2n ** 160n - 1n;
+
+            // A batch names one spender for all its allowances.
+            test.each([
+                { kind: "the router", spender: ROUTER_ADDR },
+                { kind: "another spender", spender: OTHER_ADDR },
+            ])(
+                "a PERMIT2_PERMIT_BATCH of 5,000 USDT and unlimited DAI to $kind, then a V3 exact-in of 600 USDT, shows each allowance",
+                ({ spender }) => {
+                    const result = decodeSteps(
+                        [0x03, 0x00],
+                        [
+                            encodePermit2Batch(
+                                [
+                                    [USDT_ADDR, USDT_5000],
+                                    [DAI_ADDR, MAX_UINT160],
+                                ],
+                                spender,
+                            ),
+                            V3_600,
+                        ],
+                    );
+                    expect(result.name).toBe("Swap USDT → USDC");
+                    expect(linesBetweenTokens(result)).toEqual([
+                        ["Amount", "600.0000 USDT"],
+                        ...permitLines(
+                            "5000.0000 USDT",
+                            USDT_ADDR,
+                            "USDT",
+                            spender,
+                        ),
+                        ...permitLines("Unlimited", DAI_ADDR, "DAI", spender),
+                    ]);
+                    // A batch pays nobody, so the swap's minimum is what the
+                    // sender receives.
+                    expect(detail(result, "Paid to")).toBeUndefined();
+                    expect(detail(result, "Min. received").value).toBe(
+                        "590.0000 USDC",
+                    );
+                },
+            );
+
+            // A batch keeps a PERMIT2_PERMIT's amount from standing as the
+            // Amount figure, before the permit as after it.
+            test("a PERMIT2_PERMIT_BATCH of 5,000 DAI, then a PERMIT2_PERMIT of 5,000 USDT to the router and a V3 exact-in of 600 USDT, shows the swap's 600 USDT and both permits' lines", () => {
+                const result = decodeSteps(
+                    [0x03, 0x0a, 0x00],
+                    [
+                        encodePermit2Batch([[DAI_ADDR, DAI_5000]], ROUTER_ADDR),
+                        encodePermit2(USDT_ADDR, USDT_5000, ROUTER_ADDR),
+                        V3_600,
+                    ],
+                );
+                expect(linesBetweenTokens(result)).toEqual([
+                    ["Amount", "600.0000 USDT"],
+                    ...permitLines(
+                        "5000.0000 DAI",
+                        DAI_ADDR,
+                        "DAI",
+                        ROUTER_ADDR,
+                    ),
+                    ...permitLines(
+                        "5000.0000 USDT",
+                        USDT_ADDR,
+                        "USDT",
+                        ROUTER_ADDR,
+                    ),
+                ]);
+            });
+
+            // The permit's token word, and the batch's spender word, have a
+            // nonzero top byte.
+            test.each([
+                {
+                    kind: "a PERMIT2_PERMIT",
+                    command: 0x0a,
+                    input: dirtyWord(
+                        encodePermit2(USDT_ADDR, USDT_5000, ROUTER_ADDR),
+                        0,
+                    ),
+                },
+                {
+                    kind: "a PERMIT2_PERMIT_BATCH",
+                    command: 0x03,
+                    input: dirtyWord(
+                        encodePermit2Batch(
+                            [[USDT_ADDR, USDT_5000]],
+                            ROUTER_ADDR,
+                        ),
+                        3,
+                    ),
+                },
+            ])(
+                "$kind that cannot be read, then a V3 exact-in of 600 USDT, says its allowances could not be decoded and shows no Amount figure",
+                ({ command, input }) => {
+                    const result = decodeSteps(
+                        [command, 0x00],
+                        [input, V3_600],
+                    );
+                    expect(linesBetweenTokens(result)).toEqual([
+                        ["Permit2 allowance", UNDECODED],
+                    ]);
+                },
+            );
+        });
+
         // A V3_SWAP_EXACT_OUT whose path is shorter than one token cannot be
         // read. It may pay any address and take from the sender, so it
         // leaves no Amount figure.