fix: TransactionDetail drops a Blockscout answer for another transaction (closes #675)

TransactionDetail asks Blockscout for its transaction and does not wait for the answer. If the user pressed Back and opened another transaction first, the first answer filled the second screen with its block, network details, decoded details and raw data. The answer is now dropped unless TransactionDetail is still on screen for the same transaction, beside the check of "Use Blockscout". A request for another transaction that fails no longer logs its error.

Model: opus-5-5

README.md

@@ -905,8 +905,8 @@ src/
     prices.js         — ETH/USD and token/USD from Chainlink price feeds
     scamlist.js       — known fraud contract addresses
     state.js          — persisted state (extension storage)
-    storedSettings.js — "Use Blockscout", "Check recipients on Etherscan" and
-                        the active network, read from storage
+    storedSettings.js — "Use Blockscout" and "Check recipients on Etherscan",
+                        read from storage for the requests those settings gate
     symbolSpoof.js    — the known-symbol spoof rule, shared by all surfaces
     tokenList.js      — top ERC-20 tokens by market cap, and their Chainlink
                         price feeds (hardcoded)

src/popup/views/addressDetail.js

@@ -22,7 +22,6 @@ const {
     filterTransactions,
 } = require("../../shared/transactions");
 const { resolveEnsNames } = require("../../shared/ens");
-const { storedNetworkIs } = require("../../shared/storedSettings");
 const {
     updateSendBalance,
     renderSendTokenSelect,
@@ -99,7 +98,6 @@ let loadedTxs = [];
 let ensNameMap = new Map();
 
 async function loadTransactions(address) {
-    const networkId = state.networkId;
     try {
         const rawTxs = await fetchRecentTransactions(
             address,
@@ -116,74 +114,43 @@ async function loadTransactions(address) {
         });
         const txs = result.transactions;
 
+        // Persist any newly discovered fraud contracts
+        if (result.newFraudContracts.length > 0) {
+            for (const addr of result.newFraudContracts) {
+                if (!state.fraudContracts.includes(addr)) {
+                    state.fraudContracts.push(addr);
+                }
+            }
+            await saveState();
+        }
+
+        loadedTxs = txs;
+
         // Collect ALL unique addresses (from + to) for ENS resolution so
         // that reverse lookups work for every displayed address, not just
         // the ones that were originally entered as ENS names.
         const counterparties = [
             ...new Set(txs.flatMap((tx) => [tx.from, tx.to].filter(Boolean))),
         ];
-        let names = new Map();
         if (counterparties.length > 0) {
             try {
-                names = await resolveEnsNames(
+                ensNameMap = await resolveEnsNames(
                     counterparties,
                     state.rpcUrl,
                     state.networkId,
                     ctx.pageClosed,
                 );
             } catch {
-                // The rows then show no ENS names.
+                ensNameMap = new Map();
             }
         }
 
-        // If the network changed during the lookups above, or the screen now
-        // shows another address, nothing is saved or drawn. See
-        // src/shared/storedSettings.js.
-        if (
-            state.networkId !== networkId ||
-            !(await storedNetworkIs(networkId)) ||
-            $("address-line").dataset.full !== address
-        ) {
-            return;
-        }
-
-        // Persist any newly discovered fraud contracts, inside the save and
-        // holding the lock. Nothing is added unless this page and the stored
-        // record both still name the request's network.
-        if (result.newFraudContracts.length > 0) {
-            let saved = false;
-            await saveState((stored) => {
-                if (state.networkId !== networkId) return false;
-                if (stored.networkId !== networkId) return false;
-                for (const addr of result.newFraudContracts) {
-                    if (!state.fraudContracts.includes(addr)) {
-                        state.fraudContracts.push(addr);
-                    }
-                }
-                saved = true;
-            });
-            // If the network changed while the save waited for the lock,
-            // nothing is drawn.
-            if (!saved) return;
-        }
-
-        loadedTxs = txs;
-        ensNameMap = names;
         renderTransactions(txs);
     } catch (e) {
         // Cancelled by the popup closing, not failed: see pageClosed in
         // src/popup/index.js.
         if (ctx.pageClosed.aborted) return;
         log.errorf("loadTransactions failed:", e.message);
-        // If the network changed, or the screen now shows another address,
-        // the failure is not shown.
-        if (
-            state.networkId !== networkId ||
-            !(await storedNetworkIs(networkId)) ||
-            $("address-line").dataset.full !== address
-        ) {
-            return;
-        }
         $("tx-list").innerHTML =
             '<div class="text-muted text-xs py-1">Failed to load transactions.</div>';
     }

src/popup/views/addressToken.js

@@ -29,7 +29,6 @@ const {
     filterTransactions,
 } = require("../../shared/transactions");
 const { resolveEnsNames } = require("../../shared/ens");
-const { storedNetworkIs } = require("../../shared/storedSettings");
 const {
     updateSendBalance,
     renderSendTokenSelect,
@@ -171,7 +170,6 @@ function show() {
 }
 
 async function loadTransactions(address, tokenId) {
-    const networkId = state.networkId;
     try {
         const rawTxs = await fetchRecentTransactions(
             address,
@@ -188,6 +186,16 @@ async function loadTransactions(address, tokenId) {
         });
         let txs = result.transactions;
 
+        // Persist any newly discovered fraud contracts
+        if (result.newFraudContracts.length > 0) {
+            for (const addr of result.newFraudContracts) {
+                if (!state.fraudContracts.includes(addr)) {
+                    state.fraudContracts.push(addr);
+                }
+            }
+            await saveState();
+        }
+
         // Filter to this token only
         if (tokenId === "ETH") {
             txs = txs.filter((tx) => tx.contractAddress === null);
@@ -199,75 +207,32 @@ async function loadTransactions(address, tokenId) {
             );
         }
 
+        loadedTxs = txs;
+
         // Collect ALL unique addresses for ENS resolution so reverse
         // lookups work for every displayed address.
         const counterparties = [
             ...new Set(txs.flatMap((tx) => [tx.from, tx.to].filter(Boolean))),
         ];
-        let names = new Map();
         if (counterparties.length > 0) {
             try {
-                names = await resolveEnsNames(
+                ensNameMap = await resolveEnsNames(
                     counterparties,
                     state.rpcUrl,
                     state.networkId,
                     ctx.pageClosed,
                 );
             } catch {
-                // The rows then show no ENS names.
+                ensNameMap = new Map();
             }
         }
 
-        // If the network changed during the lookups above, or the screen now
-        // shows another address or token, nothing is saved or drawn. See
-        // src/shared/storedSettings.js.
-        if (
-            state.networkId !== networkId ||
-            !(await storedNetworkIs(networkId)) ||
-            $("address-token-line").dataset.full !== address ||
-            state.selectedToken !== tokenId
-        ) {
-            return;
-        }
-
-        // Persist any newly discovered fraud contracts, inside the save and
-        // holding the lock. Nothing is added unless this page and the stored
-        // record both still name the request's network.
-        if (result.newFraudContracts.length > 0) {
-            let saved = false;
-            await saveState((stored) => {
-                if (state.networkId !== networkId) return false;
-                if (stored.networkId !== networkId) return false;
-                for (const addr of result.newFraudContracts) {
-                    if (!state.fraudContracts.includes(addr)) {
-                        state.fraudContracts.push(addr);
-                    }
-                }
-                saved = true;
-            });
-            // If the network changed while the save waited for the lock,
-            // nothing is drawn.
-            if (!saved) return;
-        }
-
-        loadedTxs = txs;
-        ensNameMap = names;
         renderTransactions(txs);
     } catch (e) {
         // Cancelled by the popup closing, not failed: see pageClosed in
         // src/popup/index.js.
         if (ctx.pageClosed.aborted) return;
         log.errorf("loadTransactions failed:", e.message);
-        // If the network changed, or the screen now shows another address or
-        // token, the failure is not shown.
-        if (
-            state.networkId !== networkId ||
-            !(await storedNetworkIs(networkId)) ||
-            $("address-token-line").dataset.full !== address ||
-            state.selectedToken !== tokenId
-        ) {
-            return;
-        }
         $("address-token-tx-list").innerHTML =
             '<div class="text-muted text-xs py-1">Failed to load transactions.</div>';
     }

src/popup/views/home.js

@@ -44,7 +44,6 @@ const {
     fetchRecentTransactions,
     filterTransactions,
 } = require("../../shared/transactions");
-const { storedNetworkIs } = require("../../shared/storedSettings");
 const { log } = require("../../shared/log");
 
 function findActiveAddr() {
@@ -184,7 +183,6 @@ async function loadHomeTxs(ctx) {
     }
     if (allAddresses.length === 0) return;
 
-    const networkId = state.networkId;
     const filters = {
         hideSpoofedSymbols: state.hideSpoofedSymbols,
         hideLowHolderTokens: state.hideLowHolderTokens,
@@ -204,15 +202,6 @@ async function loadHomeTxs(ctx) {
         );
         const results = await Promise.all(fetches);
 
-        // If the network changed during the lookups, nothing is saved or
-        // drawn. See src/shared/storedSettings.js.
-        if (
-            state.networkId !== networkId ||
-            !(await storedNetworkIs(networkId))
-        ) {
-            return;
-        }
-
         // Merge, deduplicate by hash, filter, sort, take 25
         const seen = new Set();
         let merged = [];
@@ -226,24 +215,14 @@ async function loadHomeTxs(ctx) {
 
         const filtered = filterTransactions(merged, filters);
 
-        // Persist any newly discovered fraud contracts, inside the save and
-        // holding the lock. Nothing is added unless this page and the stored
-        // record both still name the request's network.
+        // Persist any newly discovered fraud contracts
         if (filtered.newFraudContracts.length > 0) {
-            let saved = false;
-            await saveState((stored) => {
-                if (state.networkId !== networkId) return false;
-                if (stored.networkId !== networkId) return false;
-                for (const addr of filtered.newFraudContracts) {
-                    if (!state.fraudContracts.includes(addr)) {
-                        state.fraudContracts.push(addr);
-                    }
+            for (const addr of filtered.newFraudContracts) {
+                if (!state.fraudContracts.includes(addr)) {
+                    state.fraudContracts.push(addr);
                 }
-                saved = true;
-            });
-            // If the network changed while the save waited for the lock,
-            // nothing is drawn.
-            if (!saved) return;
+            }
+            await saveState();
         }
 
         merged = filtered.transactions;
@@ -255,13 +234,6 @@ async function loadHomeTxs(ctx) {
         // src/popup/index.js.
         if (ctx.pageClosed.aborted) return;
         log.errorf("loadHomeTxs failed:", e.message);
-        // If the network changed, the failure is not shown.
-        if (
-            state.networkId !== networkId ||
-            !(await storedNetworkIs(networkId))
-        ) {
-            return;
-        }
         const list = $("home-tx-list");
         if (list) {
             list.innerHTML =

src/popup/views/transactionDetail.js

@@ -311,10 +311,25 @@ function populateOnChainDetails(txData, chainId) {
     }
 }
 
+// Whether TransactionDetail is on screen for the transaction with `txHash` on
+// `chainId`.
+function isOnScreen(txHash, chainId) {
+    const tx = state.viewData.tx;
+    return (
+        state.currentView === "transaction" &&
+        tx?.hash === txHash &&
+        tx?.chainId === chainId
+    );
+}
+
 // Reads the block, network details and calldata from Blockscout, and decodes
 // the calldata. While the stored "Use Blockscout" is off, Blockscout is not
 // asked. An answer that lands after the setting went off is dropped
 // (src/shared/storedSettings.js). Either way none of them is shown.
+//
+// Blockscout can answer after the user has left this screen or opened another
+// transaction. That answer is dropped. If that request fails, its error is not
+// logged.
 async function loadFullTxDetails(txHash, chainId) {
     if (!(await storedSettingIsOn("useBlockscout"))) return;
     const section = $("tx-detail-calldata-section");
@@ -333,6 +348,7 @@ async function loadFullTxDetails(txHash, chainId) {
         if (!resp.ok) return;
         const txData = await resp.json();
         if (!(await storedSettingIsOn("useBlockscout"))) return;
+        if (!isOnScreen(txHash, chainId)) return;
 
         // Populate on-chain detail fields (block, nonce, gas, fee)
         populateOnChainDetails(txData, chainId);
@@ -399,7 +415,9 @@ async function loadFullTxDetails(txHash, chainId) {
             attachCopyHandlers(container);
         }
     } catch (e) {
-        log.errorf("loadCalldata failed:", e.message);
+        if (isOnScreen(txHash, chainId)) {
+            log.errorf("loadCalldata failed:", e.message);
+        }
     }
 }
 

src/shared/storedSettings.js

@@ -1,5 +1,5 @@
-// Reads "Use Blockscout", "Check recipients on Etherscan" or the active network
-// from the stored profile.
+// Reads "Use Blockscout" or "Check recipients on Etherscan" from the stored
+// profile.
 //
 // Before each request that sends the user's data to Blockscout or Etherscan, the
 // wallet reads that service's setting from storage. The wallet reads the setting
@@ -7,11 +7,6 @@
 // made, and an answer that lands after the setting went off is dropped. A page's
 // own copy of the setting is not used, because another page may have just
 // changed it.
-//
-// Before asking Blockscout for the transaction history, a screen remembers
-// which network is active. If another network is active on the page or in
-// storage when the answer lands, the screen drops the answer. A switch saved
-// elsewhere reaches storage first and the page later.
 
 const { storageGet } = require("./browserApi");
 const { normalizePersisted } = require("./persistedState");
@@ -29,15 +24,4 @@ async function storedSettingIsOn(name) {
     }
 }
 
-// Whether `networkId` is the active network in the stored profile. A failed
-// read counts as no.
-async function storedNetworkIs(networkId) {
-    try {
-        const { autistmask } = await storageGet("autistmask");
-        return normalizePersisted(autistmask).networkId === networkId;
-    } catch {
-        return false;
-    }
-}
-
-module.exports = { storedSettingIsOn, storedNetworkIs };
+module.exports = { storedSettingIsOn };

tests/historyAfterNetworkSwitch.test.js

@@ -1,493 +0,0 @@
-// Home, AddressDetail and AddressToken drop a transaction history answer that
-// lands after a network switch. A dropped answer draws no rows and saves no
-// fraud contracts (https://git.eeqj.de/sneak/AutistMask/issues/657).
-//
-// Most tests hold the history request open, switch the network or what the
-// screen shows, and then let the answer land. The views run against a minimal
-// DOM stub, as in tests/transactionListCancelled.test.js, and over
-// tests/support/storageStub.js.
-
-const { makeStorageStub } = require("./support/storageStub");
-const { STATE_SCHEMA_VERSION } = require("../src/shared/stateSchema");
-
-jest.mock("../src/shared/transactions", () => ({
-    ...jest.requireActual("../src/shared/transactions"),
-    fetchRecentTransactions: jest.fn(async () => []),
-}));
-jest.mock("../src/shared/ens", () => ({
-    resolveEnsNames: jest.fn(async () => new Map()),
-}));
-
-const { fetchRecentTransactions } = require("../src/shared/transactions");
-const { resolveEnsNames } = require("../src/shared/ens");
-const { state, loadState } = require("../src/shared/state");
-const { onChainSwitch } = require("../src/shared/chainSwitch");
-const { applyChainSwitchFields } = require("../src/shared/chainSwitchFields");
-const { storedNetworkIs } = require("../src/shared/storedSettings");
-const home = require("../src/popup/views/home");
-const addressDetail = require("../src/popup/views/addressDetail");
-const addressToken = require("../src/popup/views/addressToken");
-
-const ADDRESS = "0x1111111111111111111111111111111111111111";
-const OTHER_ADDRESS = "0x2222222222222222222222222222222222222222";
-const RECIPIENT = "0x66133E8ea0f5D1d612D2502a968757D1048c214a";
-// A contract that sends a token claiming USDT's symbol. Spotting the spoof
-// adds this contract to the fraud contracts.
-const SPOOF_CONTRACT = "0x3333333333333333333333333333333333333333";
-const TOKEN = "0x6B175474E89094C44Da98b954EedeAC495271d0F";
-
-// A profile on Ethereum Mainnet with two addresses, "Use Blockscout" on and no
-// fraud contracts.
-function profile() {
-    return {
-        schemaVersion: STATE_SCHEMA_VERSION,
-        hasWallet: true,
-        wallets: [
-            {
-                type: "hd",
-                name: "Main",
-                xpub: "xpub-main",
-                encryptedSecret: "encrypted-secret",
-                nextIndex: 2,
-                addresses: [
-                    { address: ADDRESS, balance: "1.0", tokenBalances: [] },
-                    {
-                        address: OTHER_ADDRESS,
-                        balance: "0.0",
-                        tokenBalances: [],
-                    },
-                ],
-            },
-        ],
-        activeAddress: ADDRESS,
-        networkId: "mainnet",
-        rpcUrl: "https://ethereum-rpc.publicnode.com",
-        blockscoutUrl: "https://eth.blockscout.com/api/v2",
-        useBlockscout: true,
-        fraudContracts: [],
-    };
-}
-
-// What Blockscout answers for ADDRESS on Ethereum Mainnet:
-//
-// - a transfer of ETH from ADDRESS;
-// - a transfer of the fake USDT from SPOOF_CONTRACT.
-function history() {
-    return [
-        {
-            hash: "0x85215772ed26ea8b39c2b3b18779030487efbe0b5fd7e882592b2f62b837be84",
-            blockNumber: 2,
-            from: ADDRESS,
-            to: RECIPIENT,
-            value: "1.0000",
-            exactValue: "1.0",
-            rawAmount: "1000000000000000000",
-            rawUnit: "wei",
-            symbol: "ETH",
-            timestamp: 1790000000,
-            isError: false,
-            directionLabel: "Sent",
-            direction: "sent",
-            contractAddress: null,
-        },
-        {
-            hash: "0x0d6a6e0a0d1b7d4c3b2a19087f6e5d4c3b2a19087f6e5d4c3b2a19087f6e5d4c",
-            blockNumber: 1,
-            from: SPOOF_CONTRACT,
-            to: ADDRESS,
-            value: "100.0000",
-            exactValue: "100.0",
-            rawAmount: "100000000",
-            rawUnit: "base units",
-            symbol: "USDT",
-            timestamp: 1790000000,
-            isError: false,
-            directionLabel: "Received",
-            direction: "received",
-            contractAddress: SPOOF_CONTRACT,
-        },
-    ];
-}
-
-// The next history request waits until the returned function is called, and
-// then answers with `answer`.
-function holdHistory(answer = history()) {
-    let land;
-    fetchRecentTransactions.mockImplementationOnce(
-        () =>
-            new Promise((resolve) => {
-                land = () => resolve(answer);
-            }),
-    );
-    return () => land();
-}
-
-// The next history request waits until the returned function is called, and
-// then fails.
-function holdFailure() {
-    let fail;
-    fetchRecentTransactions.mockImplementationOnce(
-        () =>
-            new Promise((resolve, reject) => {
-                fail = () => reject(new Error("Blockscout is down"));
-            }),
-    );
-    return () => fail();
-}
-
-// Another write holds the lock until the returned function is called. Every
-// save waits until then.
-function holdLock() {
-    let release;
-    const held = navigator.locks.request(
-        "autistmask",
-        () =>
-            new Promise((resolve) => {
-                release = resolve;
-            }),
-    );
-    return async () => {
-        release();
-        await held;
-    };
-}
-
-function makeElement(id) {
-    const el = {
-        id,
-        textContent: "",
-        value: "",
-        innerHTML: "",
-        style: {},
-        dataset: {},
-        classList: {
-            add: () => {},
-            remove: () => {},
-            contains: () => false,
-            toggle: () => false,
-        },
-        addEventListener: () => {},
-        querySelectorAll: () => [],
-        appendChild: () => {},
-    };
-    // Views reach for .parentElement to hide whole sections.
-    Object.defineProperty(el, "parentElement", {
-        get: () => node(id + "-parent"),
-    });
-    return el;
-}
-
-function makeDocument() {
-    const els = new Map();
-    return {
-        getElementById(id) {
-            // The debug banner is created on demand by helpers.js; absent
-            // is the state a non-debug, non-testnet popup is in.
-            if (id === "debug-banner") return null;
-            if (!els.has(id)) els.set(id, makeElement(id));
-            return els.get(id);
-        },
-        createElement: () => makeElement("created"),
-        addEventListener: () => {},
-        body: { prepend: () => {} },
-    };
-}
-
-function node(id) {
-    return globalThis.document.getElementById(id);
-}
-
-// Lets every promise that is not held open settle.
-function settle() {
-    return new Promise((resolve) => setTimeout(resolve, 0));
-}
-
-let storage;
-
-beforeEach(async () => {
-    storage = makeStorageStub({ autistmask: profile() });
-    globalThis.chrome = {
-        storage: { local: storage.local, onChanged: storage.onChanged },
-    };
-    globalThis.document = makeDocument();
-    globalThis.window = { location: { search: "" } };
-    await loadState();
-    state.viewStack = [];
-    state.selectedWallet = 0;
-    state.selectedAddress = 0;
-    state.selectedToken = "ETH";
-    const ctx = { pageClosed: new AbortController().signal };
-    addressDetail.init(ctx);
-    addressToken.init(ctx);
-});
-
-afterEach(() => {
-    delete globalThis.chrome;
-    delete globalThis.document;
-    delete globalThis.window;
-});
-
-const HOME = {
-    name: "Home",
-    listId: "home-tx-list",
-    open: () => home.render({ pageClosed: new AbortController().signal }),
-};
-const ADDRESS_DETAIL = {
-    name: "AddressDetail",
-    listId: "tx-list",
-    open: () => addressDetail.show(),
-};
-const ADDRESS_TOKEN = {
-    name: "AddressToken",
-    listId: "address-token-tx-list",
-    open: () => addressToken.show(),
-};
-
-// Three ways a test switches the network:
-//
-// - made in Settings: the page and storage have both switched;
-// - saved elsewhere: storage has switched and the page has not;
-// - not yet stored: the page has switched and storage has not.
-const SWITCHES = [
-    {
-        how: "made in Settings",
-        to: (networkId) => onChainSwitch(networkId),
-    },
-    {
-        // Another page or the background stored the switch, and this page has
-        // not followed it yet.
-        how: "saved elsewhere",
-        to: async (networkId) => {
-            const record = storage.read("autistmask");
-            applyChainSwitchFields(record, networkId);
-            storage.write("autistmask", record);
-        },
-    },
-    {
-        // The switch's own save has changed the page and has not yet written
-        // storage.
-        how: "not yet stored",
-        to: async (networkId) => {
-            applyChainSwitchFields(state, networkId);
-        },
-    },
-];
-
-// The list still shows `before`, and neither the page nor storage holds a
-// fraud contract.
-function expectNothingAdded(screen, before) {
-    expect(node(screen.listId).innerHTML).toBe(before);
-    expect(state.fraudContracts).toEqual([]);
-    expect(storage.read("autistmask").fraudContracts).toEqual([]);
-}
-
-describe.each([HOME, ADDRESS_DETAIL, ADDRESS_TOKEN])("$name", (screen) => {
-    test("an answer that lands on the same network is drawn and saved", async () => {
-        const land = holdHistory();
-        screen.open();
-        land();
-        await settle();
-
-        expect(node(screen.listId).innerHTML).toContain("tx-row");
-        expect(state.fraudContracts).toEqual([SPOOF_CONTRACT]);
-        expect(storage.read("autistmask").fraudContracts).toEqual([
-            SPOOF_CONTRACT,
-        ]);
-    });
-
-    test.each(SWITCHES)(
-        "an answer that lands after a switch $how adds nothing",
-        async ({ to }) => {
-            const land = holdHistory();
-            screen.open();
-            await settle();
-            const before = node(screen.listId).innerHTML;
-            await to("sepolia");
-            land();
-            await settle();
-
-            expectNothingAdded(screen, before);
-        },
-    );
-
-    // The answer is the transfer of ETH alone, which adds no fraud contract.
-    // Nothing is saved, so only the check before the save can drop the answer.
-    test.each(SWITCHES)(
-        "an answer without a fraud contract that lands after a switch $how adds nothing",
-        async ({ to }) => {
-            const land = holdHistory(history().slice(0, 1));
-            screen.open();
-            await settle();
-            const before = node(screen.listId).innerHTML;
-            await to("sepolia");
-            land();
-            await settle();
-
-            expectNothingAdded(screen, before);
-        },
-    );
-
-    test.each(SWITCHES)(
-        "a request that fails after a switch $how shows no message",
-        async ({ to }) => {
-            const fail = holdFailure();
-            screen.open();
-            await settle();
-            const before = node(screen.listId).innerHTML;
-            await to("sepolia");
-            fail();
-            await settle();
-
-            expect(node(screen.listId).innerHTML).toBe(before);
-        },
-    );
-
-    // The user picks Sepolia in Settings while another write holds the lock.
-    // The answer lands, and its save waits behind the switch.
-    test("an answer whose save waits behind a switch made in Settings adds nothing", async () => {
-        const land = holdHistory();
-        screen.open();
-        const before = node(screen.listId).innerHTML;
-        const releaseLock = holdLock();
-        const switching = onChainSwitch("sepolia");
-        land();
-        await settle();
-        await releaseLock();
-        await switching;
-        await settle();
-
-        expectNothingAdded(screen, before);
-    });
-
-    // The answer lands and its save waits for the lock. Another page or the
-    // background then stores a switch.
-    test("an answer whose save waits while a switch is saved elsewhere adds nothing", async () => {
-        const land = holdHistory();
-        screen.open();
-        const before = node(screen.listId).innerHTML;
-        const releaseLock = holdLock();
-        land();
-        await settle();
-        const record = storage.read("autistmask");
-        applyChainSwitchFields(record, "sepolia");
-        storage.write("autistmask", record);
-        await releaseLock();
-        await settle();
-
-        expectNothingAdded(screen, before);
-    });
-
-    // The answer lands and its save waits for the lock. The page then switches,
-    // and storage has not.
-    test("an answer whose save waits while the page switches adds nothing", async () => {
-        const land = holdHistory();
-        screen.open();
-        const before = node(screen.listId).innerHTML;
-        const releaseLock = holdLock();
-        land();
-        await settle();
-        applyChainSwitchFields(state, "sepolia");
-        await releaseLock();
-        await settle();
-
-        expectNothingAdded(screen, before);
-    });
-
-    test("a request that fails after a switch leaves the new network's rows", async () => {
-        const fail = holdFailure();
-        screen.open();
-        await onChainSwitch("sepolia");
-        fetchRecentTransactions.mockImplementationOnce(async () => history());
-        screen.open();
-        await settle();
-        const drawn = node(screen.listId).innerHTML;
-        fail();
-        await settle();
-
-        expect(drawn).toContain("tx-row");
-        expect(node(screen.listId).innerHTML).toBe(drawn);
-    });
-});
-
-describe.each([ADDRESS_DETAIL, ADDRESS_TOKEN])("$name", (screen) => {
-    test("an answer that lands once the screen shows another address adds nothing", async () => {
-        const land = holdHistory();
-        screen.open();
-        state.selectedAddress = 1;
-        screen.open();
-        await settle();
-        const before = node(screen.listId).innerHTML;
-        land();
-        await settle();
-
-        expectNothingAdded(screen, before);
-    });
-
-    test("a request that fails once the screen shows another address shows no message", async () => {
-        const fail = holdFailure();
-        screen.open();
-        state.selectedAddress = 1;
-        screen.open();
-        await settle();
-        const before = node(screen.listId).innerHTML;
-        fail();
-        await settle();
-
-        expect(node(screen.listId).innerHTML).toBe(before);
-    });
-
-    test("an answer whose name lookup lands after a switch adds nothing", async () => {
-        let landNames;
-        resolveEnsNames.mockImplementationOnce(
-            () =>
-                new Promise((resolve) => {
-                    landNames = () => resolve(new Map());
-                }),
-        );
-        fetchRecentTransactions.mockImplementationOnce(async () => history());
-        screen.open();
-        await settle();
-        const before = node(screen.listId).innerHTML;
-        await onChainSwitch("sepolia");
-        landNames();
-        await settle();
-
-        expectNothingAdded(screen, before);
-    });
-});
-
-test("AddressToken: an answer that lands once the screen shows another token adds nothing", async () => {
-    const land = holdHistory();
-    addressToken.show();
-    state.selectedToken = TOKEN;
-    addressToken.show();
-    await settle();
-    const before = node(ADDRESS_TOKEN.listId).innerHTML;
-    land();
-    await settle();
-
-    expectNothingAdded(ADDRESS_TOKEN, before);
-});
-
-test("AddressToken: a request that fails once the screen shows another token shows no message", async () => {
-    const fail = holdFailure();
-    addressToken.show();
-    state.selectedToken = TOKEN;
-    addressToken.show();
-    await settle();
-    const before = node(ADDRESS_TOKEN.listId).innerHTML;
-    fail();
-    await settle();
-
-    expect(node(ADDRESS_TOKEN.listId).innerHTML).toBe(before);
-});
-
-test("storedNetworkIs(): a failed read counts as no", async () => {
-    globalThis.chrome.storage.local = {
-        get: async () => {
-            throw new Error("storage is down");
-        },
-    };
-
-    await expect(storedNetworkIs("mainnet")).resolves.toBe(false);
-});

tests/transactionDetailLateAnswer.test.js

@@ -0,0 +1,172 @@
+// TransactionDetail shows only details that Blockscout gave for the
+// transaction on screen (https://git.eeqj.de/sneak/AutistMask/issues/675).
+//
+// The screen asks Blockscout for its transaction and does not wait for the
+// answer. So the user can press Back and open a second transaction before
+// Blockscout answers for the first. The first answer must then fill nothing on
+// the second transaction's screen. If the first request fails instead, its
+// error must not be logged.
+//
+// Driven through the real popup over a stored profile
+// (tests/support/popupBoot.js). Each transaction is opened as a history screen
+// opens it: the current screen is pushed, then transactionDetail.show() draws
+// the transaction.
+
+"use strict";
+
+const {
+    bootPopup,
+    cleanupPopup,
+    unversionedValidProfile,
+    ADDRESS,
+} = require("./support/popupBoot");
+
+const BLOCKSCOUT = "https://eth.blockscout.com/api/v2";
+const RECIPIENT = "0x2222222222222222222222222222222222222222";
+
+// A history entry for a send of 1 ETH from ADDRESS to RECIPIENT on mainnet.
+function historyEntry(hash) {
+    return {
+        hash,
+        from: ADDRESS,
+        to: RECIPIENT,
+        value: "1.0000",
+        exactValue: "1.0",
+        symbol: "ETH",
+        timestamp: 1790000000,
+        isError: false,
+        direction: "sent",
+        directionLabel: "Sent",
+        contractAddress: null,
+        chainId: "0x1",
+    };
+}
+
+const FIRST = historyEntry("0x" + "aa".repeat(32));
+const SECOND = historyEntry("0x" + "bb".repeat(32));
+
+// What Blockscout reports for each transaction.
+const ANSWERS = {
+    [FIRST.hash]: {
+        block_number: 21000001,
+        nonce: 4441,
+        fee: { value: "21000000000000" },
+        raw_input: "0x11111111",
+        method: "firstMethod",
+    },
+    [SECOND.hash]: {
+        block_number: 21000002,
+        nonce: 4442,
+        fee: { value: "42000000000000" },
+        raw_input: "0x22222222",
+        method: "secondMethod",
+    },
+};
+
+// The text each answer puts on screen: its block, nonce, fee, method name and
+// raw data. No text from one answer appears in the other.
+const FIRST_SHOWN = [
+    "21000001",
+    "4441",
+    "0.000021 ETH",
+    "firstMethod",
+    "0x11111111",
+];
+const SECOND_SHOWN = [
+    "21000002",
+    "4442",
+    "0.000042 ETH",
+    "secondMethod",
+    "0x22222222",
+];
+
+// The error the first request fails with in the second test.
+const FIRST_FAILURE = "Blockscout did not answer the first request";
+
+// Everything drawn in the fields that Blockscout's answer fills.
+function drawnDetails(page) {
+    return [
+        "tx-detail-block",
+        "tx-detail-nonce",
+        "tx-detail-fee",
+        "tx-detail-calldata-action",
+        "tx-detail-rawdata",
+    ]
+        .map((id) => page.node(id).innerHTML + page.node(id).textContent)
+        .join("\n");
+}
+
+// Opens `entry` on TransactionDetail, as a history screen does.
+function open(entry) {
+    require("../src/popup/views/helpers").pushCurrentView();
+    require("../src/popup/views/transactionDetail").show(entry);
+}
+
+// Boots the popup on Home with "Use Blockscout" on. The user opens FIRST,
+// whose request to Blockscout is held. Then the user presses Back and opens
+// SECOND, whose request is answered at once. Returns the page and the held
+// request's two outcomes: answer() lets FIRST's answer land, and fail() makes
+// the request fail.
+async function secondOpenedWhileFirstIsOut() {
+    const page = await bootPopup(
+        unversionedValidProfile({ useBlockscout: true }),
+    );
+    let answer;
+    let fail;
+    const firstHeld = new Promise((resolve, reject) => {
+        answer = resolve;
+        fail = reject;
+    });
+    globalThis.fetch = jest.fn(async (url) => {
+        const hash = String(url).slice((BLOCKSCOUT + "/transactions/").length);
+        if (hash === FIRST.hash) await firstHeld;
+        return { ok: true, status: 200, json: async () => ANSWERS[hash] };
+    });
+
+    open(FIRST);
+    await page.settle();
+    await page.click("btn-tx-back");
+    expect(page.visibleViews()).toEqual(["main"]);
+    open(SECOND);
+    await page.settle();
+    expect(globalThis.fetch.mock.calls.map(([url]) => url)).toEqual([
+        BLOCKSCOUT + "/transactions/" + FIRST.hash,
+        BLOCKSCOUT + "/transactions/" + SECOND.hash,
+    ]);
+    return {
+        page,
+        answer: () => answer(),
+        fail: () => fail(new Error(FIRST_FAILURE)),
+    };
+}
+
+beforeEach(() => {
+    jest.spyOn(console, "error").mockImplementation(() => {});
+});
+
+afterEach(() => {
+    cleanupPopup();
+    jest.restoreAllMocks();
+});
+
+test("an answer for the first transaction that lands on the second one's screen fills nothing", async () => {
+    const { page, answer } = await secondOpenedWhileFirstIsOut();
+    answer();
+    await page.settle();
+
+    expect(page.visibleViews()).toEqual(["transaction"]);
+    const drawn = drawnDetails(page);
+    for (const text of SECOND_SHOWN) expect(drawn).toContain(text);
+    for (const text of FIRST_SHOWN) expect(drawn).not.toContain(text);
+});
+
+test("a request for the first transaction that fails on the second one's screen logs nothing", async () => {
+    const { page, fail } = await secondOpenedWhileFirstIsOut();
+    fail();
+    await page.settle();
+
+    expect(page.visibleViews()).toEqual(["transaction"]);
+    const drawn = drawnDetails(page);
+    for (const text of SECOND_SHOWN) expect(drawn).toContain(text);
+    expect(console.error.mock.calls.flat()).not.toContain(FIRST_FAILURE);
+});