fix: TxApproval links addresses to the explorer of the transaction's network (closes #631)

TxApproval built its From, Contract and decoded-action address links for
the active network, so a Sepolia transaction reviewed with mainnet active
linked to the mainnet explorer. approvalAddressHtml() now takes the
transaction's chain id and passes it to renderAddressHtml(), as SuccessTx
and ErrorTx do. A chain id that names no network has no explorer, so its
address lines are drawn without a link and the screen still shows. SignApproval
and SiteApproval still link for the active network. The walletDefects
fixture's numeric chain id, which names no network, is now the hex string
the background sends.

Model: opus-5-5

src/popup/views/approval.js

@@ -59,9 +59,13 @@ const { notify, runtimeApi, sendMessage } = require("../../shared/browserApi");
 const erc20Iface = new Interface(ERC20_ABI);
 
 // The link opens the explorer of the network with `chainId`, or of the active
-// network when none is given.
+// network when none is given. A chain id that names no network has no
+// explorer, so the address is drawn without a link.
 function approvalAddressHtml(address, chainId) {
     const title = addressTitle(address, state.wallets);
+    if (chainId && !networkByChainId(chainId)) {
+        return renderAddressHtml(address, { title, noLink: true });
+    }
     return renderAddressHtml(address, { title, chainId });
 }
 

tests/approvalTokenNetwork.test.js

@@ -112,10 +112,13 @@ function decodedLine(label) {
 }
 
 // Open the approval screen, with Ethereum Mainnet active and FROM holding
-// `tokenBalances` there, for the site's Sepolia transaction sending
-// TRANSFER_DATA to the token. Confirm answers the signed transaction with a
-// failure, which leads to the error screen.
-async function showSepoliaTransfer(tokenBalances = []) {
+// `tokenBalances` there, for the site's transaction sending TRANSFER_DATA to
+// the token, on Sepolia unless `chainId` names another chain. Confirm answers
+// the signed transaction with a failure, which leads to the error screen.
+async function showSepoliaTransfer(
+    tokenBalances = [],
+    chainId = NETWORKS.sepolia.chainId,
+) {
     globalThis.document = makeDocument();
     globalThis.window = { location: { search: "" }, close: () => {} };
     globalThis.chrome.runtime = {
@@ -136,7 +139,7 @@ async function showSepoliaTransfer(tokenBalances = []) {
                 approvedTx: {
                     type: 2,
                     from: FROM,
-                    chainId: NETWORKS.sepolia.chainId,
+                    chainId,
                     nonce: "0x7",
                     gasLimit: "0x30d40",
                     maxPriorityFeePerGas: "0x3b9aca00",
@@ -248,3 +251,20 @@ test("every address links to the Sepolia explorer", async () => {
         expect(node(id).innerHTML).not.toContain(NETWORKS.mainnet.explorerUrl);
     }
 });
+
+// Chain id 1337 names no network here, so it has no explorer to link to.
+test("a transaction on a chain id that names no network is shown with no address links", async () => {
+    await showSepoliaTransfer([], "0x539");
+    expect(state.currentView).toBe("approve-tx");
+    expect(node("approve-tx-network").textContent).toBe(
+        "Unknown network (chain id 1337)",
+    );
+    expect(node("approve-tx-from").innerHTML).toContain(FROM);
+    for (const id of [
+        "approve-tx-from",
+        "approve-tx-to",
+        "approve-tx-decoded-details",
+    ]) {
+        expect(node(id).innerHTML).not.toContain("href=");
+    }
+});