fix: the swap summary is shown only for a transaction sent to a Universal Router (closes #520)

The Universal Router decoder recognised execute() by its selector alone, so
the same calldata sent to any address was described as a swap through the
router. It now keeps the router deployments Uniswap publishes for Ethereum
Mainnet and Sepolia, and decodes only a transaction sent to one of them on
its network, ignoring address case. TxApproval passes the transaction's
chain id, TransactionDetail the active network's.

Model: opus-5-5

src/popup/index.js

@@ -64,8 +64,8 @@ window.addEventListener("pagehide", () => pageClosed.abort());
 
 let refreshInFlight = false;
 
-// The ten-second refresh init() starts, stopped when the popup moves to the
-// recovery screen: there is no profile left to refresh.
+// The ten-second refresh startRefresh() starts, stopped when the popup moves to
+// the recovery screen: there is no profile left to refresh.
 let refreshTimer = null;
 
 async function doRefreshAndRender() {
@@ -99,9 +99,23 @@ async function doRefreshAndRender() {
     }
 }
 
+// Refreshes now and every ten seconds from then on. Called once a wallet
+// exists: by init() when the popup opens with one, and by AddWallet when it
+// adds one, which in a popup that opened on Welcome is the first
+// (https://git.eeqj.de/sneak/AutistMask/issues/530). With the refresh already
+// running it starts no second one, and on the recovery screen it does nothing.
+function startRefresh() {
+    if (!$("view-state-recovery").classList.contains("hidden")) return;
+    doRefreshAndRender();
+    if (refreshTimer === null) {
+        refreshTimer = setInterval(doRefreshAndRender, 10000);
+    }
+}
+
 const ctx = {
     renderWalletList,
     doRefreshAndRender,
+    startRefresh,
     pageClosed: pageClosed.signal,
     showAddWalletView: () => {
         pushCurrentView();
@@ -318,8 +332,7 @@ async function init() {
     } else {
         renderWalletList();
         restoreView();
-        doRefreshAndRender();
-        refreshTimer = setInterval(doRefreshAndRender, 10000);
+        startRefresh();
     }
 }
 

src/popup/views/addWallet.js

@@ -234,7 +234,7 @@ async function importMnemonic(ctx) {
         showFlash("Ready.", 1000);
     }
 
-    ctx.doRefreshAndRender();
+    ctx.startRefresh();
 }
 
 async function importPrivateKey(ctx) {
@@ -274,7 +274,7 @@ async function importPrivateKey(ctx) {
     ctx.renderWalletList();
     showView("main");
 
-    ctx.doRefreshAndRender();
+    ctx.startRefresh();
 }
 
 async function importXprvKey(ctx) {
@@ -368,7 +368,7 @@ async function importXprvKey(ctx) {
         showFlash("Ready.", 1000);
     }
 
-    ctx.doRefreshAndRender();
+    ctx.startRefresh();
 }
 
 function init(ctx) {

tests/addressKey.test.js

@@ -230,7 +230,7 @@ beforeEach(() => {
 
     addWallet.init({
         renderWalletList: () => {},
-        doRefreshAndRender: () => {},
+        startRefresh: () => {},
         pageClosed: new AbortController().signal,
     });
     confirmTx.init({});

tests/addressScanCancelled.test.js

@@ -94,7 +94,7 @@ describe.each([
     async function create(pageClosed) {
         addWallet.init({
             renderWalletList: () => {},
-            doRefreshAndRender: () => {},
+            startRefresh: () => {},
             pageClosed,
         });
         element("tab-" + mode).listeners.click();

tests/firstWalletRefresh.test.js

@@ -0,0 +1,135 @@
+// A popup that opened with no wallet never started the ten-second refresh, so
+// after the first wallet was added Home went on showing the balance it had then
+// until the popup was reopened
+// (https://git.eeqj.de/sneak/AutistMask/issues/530). Each test boots the real
+// popup, adds wallets through AddWallet, and runs the intervals the popup set
+// with tick(). The balance stand-in writes what the chain holds onto every
+// address, as the real refreshBalances() does.
+
+const { HDNodeWallet, Mnemonic } = require("ethers");
+
+const {
+    bootPopup,
+    cleanupPopup,
+    unversionedValidProfile,
+    ADDRESS,
+} = require("./support/popupBoot");
+
+const PHRASE =
+    "abandon abandon abandon abandon abandon abandon " +
+    "abandon abandon abandon abandon abandon about";
+const PRIVATE_KEY = "0x" + "11".repeat(32);
+const XPRV = HDNodeWallet.fromSeed(
+    Mnemonic.fromPhrase(PHRASE).computeSeed(),
+).extendedKey;
+const PASSWORD = "correct horse battery staple";
+
+const TABS = [
+    { tab: "tab-mnemonic", field: "wallet-mnemonic", secret: PHRASE },
+    { tab: "tab-privkey", field: "import-private-key", secret: PRIVATE_KEY },
+    { tab: "tab-xprv", field: "import-xprv-key", secret: XPRV },
+];
+
+// A record this build cannot read: its wallets are a string.
+const UNREADABLE = {
+    hasWallet: true,
+    wallets: ADDRESS,
+    activeAddress: ADDRESS,
+};
+
+// The ETH balance the chain holds for every address, in ether.
+let chainBalance = "0.0";
+
+// Boots the popup over `stored`, with the balance stand-in reading the chain.
+async function boot(stored) {
+    const page = await bootPopup(stored);
+    const { refreshBalances } = require("../src/shared/balances");
+    refreshBalances.mockImplementation(async (wallets) => {
+        for (const wallet of wallets) {
+            for (const addr of wallet.addresses) addr.balance = chainBalance;
+        }
+    });
+    return { page, refreshBalances };
+}
+
+// Fills in the open AddWallet screen and presses "Import".
+async function importOn(page, { tab, field, secret }) {
+    await page.click(tab);
+    page.node(field).value = secret;
+    page.node("add-wallet-password").value = PASSWORD;
+    page.node("add-wallet-password-confirm").value = PASSWORD;
+    await page.click("btn-add-wallet-confirm");
+}
+
+beforeEach(() => {
+    chainBalance = "0.0";
+});
+
+afterEach(() => {
+    cleanupPopup();
+});
+
+describe("a popup that opened on Welcome", () => {
+    test.each(TABS)(
+        "after the first wallet is added from $tab, funds that arrive show on Home",
+        async (entry) => {
+            const { page } = await boot(undefined);
+            expect(page.pageErrors).toEqual([]);
+            await page.click("btn-welcome-add");
+            await importOn(page, entry);
+            expect(page.visibleViews()).toEqual(["main"]);
+            expect(page.text("total-value")).toBe("0.0000 ETH");
+
+            chainBalance = "2.0";
+            await page.tick();
+
+            expect(page.text("total-value")).toBe("2.0000 ETH");
+        },
+    );
+
+    test("a second wallet starts no second refresh", async () => {
+        const { page, refreshBalances } = await boot(undefined);
+        await page.click("btn-welcome-add");
+        await importOn(page, TABS[1]);
+        await page.click("btn-add-wallet-bottom");
+        await importOn(page, TABS[0]);
+        const calls = refreshBalances.mock.calls.length;
+
+        await page.tick();
+
+        expect(refreshBalances).toHaveBeenCalledTimes(calls + 1);
+    });
+
+    test("a wallet added as the recovery screen goes up starts no refresh", async () => {
+        const { page, refreshBalances } = await boot(undefined);
+        // The stored record becomes unreadable during the address scan that
+        // follows the import, and a save finds it.
+        const { scanForAddresses } = require("../src/shared/balances");
+        const { saveState } = require("../src/shared/state");
+        scanForAddresses.mockImplementationOnce(async () => {
+            page.storage.write("autistmask", UNREADABLE);
+            await saveState().catch(() => {});
+            return { addresses: [], nextIndex: 1 };
+        });
+        await page.click("btn-welcome-add");
+        await importOn(page, TABS[0]);
+        expect(page.visibleViews()).toEqual(["state-recovery"]);
+
+        await page.tick();
+
+        expect(refreshBalances).not.toHaveBeenCalled();
+    });
+});
+
+describe("a popup that opened with a wallet", () => {
+    test("adding a wallet starts no second refresh", async () => {
+        const { page, refreshBalances } = await boot(unversionedValidProfile());
+        await page.click("btn-add-wallet-bottom");
+        await importOn(page, TABS[1]);
+        const calls = refreshBalances.mock.calls.length;
+
+        await page.tick();
+
+        expect(refreshBalances).toHaveBeenCalledTimes(calls + 1);
+    });
+});

tests/popupBoot.test.js

@@ -0,0 +1,42 @@
+// A timer the popup started and that fires after cleanupPopup() has removed
+// the page throws "document is not defined", and the throw fails whatever test
+// the jest worker is running by then, in this file or another
+// (https://git.eeqj.de/sneak/AutistMask/issues/578). The flash message's
+// timer is the one that did it. A throw from a timer during a test fails that
+// test, so each test here passes only if nothing throws.
+
+const {
+    bootPopup,
+    cleanupPopup,
+    unversionedValidProfile,
+} = require("./support/popupBoot");
+
+const FLASH_MS = 10;
+
+function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+afterEach(() => {
+    cleanupPopup();
+});
+
+test("a flash message clears while the page is up", async () => {
+    const page = await bootPopup(unversionedValidProfile());
+    const { showFlash } = require("../src/popup/views/helpers");
+    showFlash("Copied.", FLASH_MS);
+    expect(page.text("flash-msg")).toBe("Copied.");
+
+    await wait(FLASH_MS * 5);
+
+    expect(page.text("flash-msg")).toBe("");
+});
+
+test("a flash message's timer does not fire after cleanupPopup()", async () => {
+    await bootPopup(unversionedValidProfile());
+    const { showFlash } = require("../src/popup/views/helpers");
+    showFlash("Copied.", FLASH_MS);
+    cleanupPopup();
+
+    await wait(FLASH_MS * 5);
+});

tests/support/popupBoot.js

@@ -43,6 +43,12 @@ jest.doMock("ethereum-blockies-base64", () => makeBlockie);
 // Taken before any boot replaces them; see bootPopup().
 const realSetInterval = globalThis.setInterval;
 const realClearInterval = globalThis.clearInterval;
+const realSetTimeout = globalThis.setTimeout;
+const realClearTimeout = globalThis.clearTimeout;
+
+// Every timeout set since the last cleanupPopup() that has neither fired nor
+// been cleared. cleanupPopup() clears them all.
+const pendingTimeouts = new Set();
 
 const POPUP_HTML = fs.readFileSync(
     path.join(__dirname, "..", "..", "src", "popup", "index.html"),
@@ -342,6 +348,24 @@ async function bootPopup(stored, options) {
     globalThis.clearInterval = (id) => {
         intervals.delete(id);
     };
+    // Timeouts, such as the one that clears a flash message, run for real, but
+    // each is recorded until it fires or is cleared, so cleanupPopup() can
+    // clear the ones still pending. One that fired after the page was removed
+    // would throw "document is not defined" into whatever test the worker runs
+    // by then. jest.useFakeTimers() in a test does not reach them. Put back by
+    // cleanupPopup().
+    globalThis.setTimeout = (fn, ms, ...args) => {
+        const timer = realSetTimeout(() => {
+            pendingTimeouts.delete(timer);
+            fn(...args);
+        }, ms);
+        pendingTimeouts.add(timer);
+        return timer;
+    };
+    globalThis.clearTimeout = (timer) => {
+        pendingTimeouts.delete(timer);
+        realClearTimeout(timer);
+    };
 
     require("../../src/popup/index");
 
@@ -407,6 +431,10 @@ function cleanupPopup() {
     delete globalThis.window;
     globalThis.setInterval = realSetInterval;
     globalThis.clearInterval = realClearInterval;
+    for (const timer of pendingTimeouts) realClearTimeout(timer);
+    pendingTimeouts.clear();
+    globalThis.setTimeout = realSetTimeout;
+    globalThis.clearTimeout = realClearTimeout;
 }
 
 module.exports = {

tests/uniswapRouterAddress.test.js

@@ -7,8 +7,9 @@
 // only when the transaction is sent to a Universal Router deployment on the
 // network it is for; anywhere else it is left to the raw data.
 //
-// The transaction detail screen is driven against a minimal DOM stub in the
-// shape tests/tokenTransferDetail.test.js uses.
+// The transaction detail screen and the approval screen are driven against a
+// minimal DOM stub in the shape tests/tokenTransferDetail.test.js uses, the
+// approval screen opened the way tests/swapStatusAmount.test.js opens it.
 
 const { AbiCoder, Interface, getAddress, solidityPacked } = require("ethers");
 
@@ -32,7 +33,8 @@ globalThis.chrome = {
 };
 
 const { state } = require("../src/shared/state");
-const { decodeCalldata } = require("../src/popup/views/approval");
+const approval = require("../src/popup/views/approval");
+const { decodeCalldata } = approval;
 const transactionDetail = require("../src/popup/views/transactionDetail");
 
 const MAINNET = "0x1";
@@ -220,6 +222,13 @@ describe("execute() calldata on the transaction detail screen", () => {
         );
     });
 
+    test("sent to an ordinary address, it is not decoded", async () => {
+        await showDetailSentTo(ORDINARY);
+        expect(node("tx-detail-calldata-action").textContent).toBe("execute");
+        expect(node("tx-detail-calldata-details").innerHTML).toBe("");
+        expect(node("tx-detail-rawdata").innerHTML).toContain(SWAP_DATA);
+    });
+
     test("sent to a router of the other network only, it is not decoded", async () => {
         await showDetailSentTo(MAINNET_ROUTER);
         expect(node("tx-detail-calldata-action").textContent).toBe("execute");
@@ -227,3 +236,63 @@ describe("execute() calldata on the transaction detail screen", () => {
         expect(node("tx-detail-rawdata").innerHTML).toContain(SWAP_DATA);
     });
 });
+
+// Open the approval screen with Ethereum Mainnet active, for a site's Sepolia
+// transaction that sends SWAP_DATA to `sentTo`.
+async function showApprovalSentTo(sentTo) {
+    globalThis.document = makeDocument();
+    globalThis.window = { location: { search: "" }, close: () => {} };
+    globalThis.chrome.runtime = {
+        connect: () => ({ postMessage: () => {} }),
+        sendMessage: (_msg, reply) =>
+            reply({
+                type: "tx",
+                origin: "https://dapp.example",
+                isPhishingDomain: false,
+                approvedFrom: RECIPIENT,
+                approvedTx: {
+                    type: 2,
+                    from: RECIPIENT,
+                    chainId: SEPOLIA,
+                    nonce: "0x7",
+                    gasLimit: "0x30d40",
+                    maxPriorityFeePerGas: "0x3b9aca00",
+                    maxFeePerGas: "0x77359400",
+                    to: sentTo,
+                    value: "0x" + HUNDREDTH_ETH.toString(16),
+                    data: SWAP_DATA,
+                    accessList: [],
+                },
+            }),
+    };
+    state.networkId = "mainnet";
+    state.currentView = null;
+    await approval.show(1);
+}
+
+// The router is on Sepolia's list only, so the swap is shown only if the
+// screen decodes for the transaction's network: on Ethereum Mainnet, the
+// active network, that address is not a router.
+describe("execute() calldata on the approval screen, for a Sepolia transaction while Ethereum Mainnet is active", () => {
+    test("sent to a router on Sepolia, it is a swap", async () => {
+        await showApprovalSentTo(SEPOLIA_ROUTER);
+        expect(node("approve-tx-decoded").classList.contains("hidden")).toBe(
+            false,
+        );
+        expect(node("approve-tx-decoded-details").innerHTML).toContain(
+            "Swap via Uniswap Universal Router",
+        );
+    });
+
+    test("sent to an ordinary address, it is shown as raw data", async () => {
+        await showApprovalSentTo(ORDINARY);
+        expect(node("approve-tx-decoded").classList.contains("hidden")).toBe(
+            true,
+        );
+        expect(node("approve-tx-decoded-details").innerHTML).toBe("");
+        expect(node("approve-tx-data").textContent).toBe(SWAP_DATA);
+        expect(
+            node("approve-tx-data-section").classList.contains("hidden"),
+        ).toBe(false);
+    });
+});