fix: only the user switches the wallet's network (closes #408)

A connected site's wallet_switchEthereumChain request for the other
supported network now opens a prompt in its own window, through the
existing approval machinery, naming the site and both networks. The
network, endpoints, balances and caches change, and chainChanged is
sent, only when the user approves it; rejecting or closing the prompt
answers 4001. One such prompt per site at a time; a request for the
active network needs none. The approval window no longer shows the
connection prompt while it waits for the approval's description,
since both prompts answer on the same port.

Model: opus-5-5

src/popup/views/approval.js

@@ -14,6 +14,7 @@ const {
 } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const {
+    networkById,
     networkByChainId,
     nativeCurrencyByChainId,
 } = require("../../shared/networks");
@@ -328,9 +329,9 @@ function showTxApproval(details) {
     const ethUsd = ethPrice ? parseFloat(ethValueFormatted) * ethPrice : null;
     const usdStr = formatUsd(ethUsd);
     // In the native currency of the network the transaction is for, which the
-    // Network line names, not the active network's: a site can switch the
-    // active network after this transaction is prepared and back before it is
-    // signed.
+    // Network line names, not the active network's: the active network can
+    // change, in Settings or when the user approves a site's request, after
+    // this transaction is prepared and change back before it is signed.
     $("approve-tx-value").textContent =
         ethValueFormatted +
         " " +
@@ -752,9 +753,29 @@ function showSignApproval(details) {
     );
 }
 
+function showNetworkApproval(details) {
+    showPhishingWarning(
+        "approve-network-phishing-warning",
+        details.isPhishingDomain,
+    );
+    $("approve-network-origin").textContent = details.origin;
+    $("approve-network-current").textContent = networkById(
+        details.currentNetworkId,
+    ).name;
+    $("approve-network-requested").textContent = networkById(
+        details.requestedNetworkId,
+    ).name;
+    showView("approve-network");
+}
+
 // Awaited by nobody: the popup entry point calls this and moves on. It
 // therefore has to absorb its own failure, and a background that cannot
 // describe the approval is the same outcome as an approval that is gone.
+//
+// Nothing is on screen until the background has described the approval, so
+// the screen shown is always the one for the approval this window answers:
+// the connection prompt's "Allow" and the network switch prompt's "Switch"
+// answer on the same port, and either would approve the other.
 async function show(id) {
     approvalId = id;
     approvalPort = runtimeApi().connect({ name: "approval:" + id });
@@ -778,6 +799,10 @@ async function show(id) {
         showSignApproval(details);
         return;
     }
+    if (details.type === "network") {
+        showNetworkApproval(details);
+        return;
+    }
     // Site connection approval
     showPhishingWarning(
         "approve-site-phishing-warning",
@@ -787,6 +812,7 @@ async function show(id) {
     $("approve-address").innerHTML = approvalAddressHtml(state.activeAddress);
     attachCopyHandlers("view-approve-site");
     $("approve-remember").checked = state.rememberSiteChoice;
+    showView("approve-site");
 }
 
 let approvalId = null;
@@ -866,20 +892,21 @@ function clearSignPassword() {
     hideError("approve-sign-error");
 }
 
-// Answer a site-connection approval and close. The decision goes out on the
-// approval port — see approvalPort above for why — and carries no approval id,
-// because the port name already names the approval the background will settle.
-// The post is guarded because a throw must not cost the close: posting on a
-// port whose background worker has been torn down throws, and the approval it
-// would have settled died with that worker, so the only thing left to do is
-// what the user asked for — go away.
-function decideSite(approved) {
+// Answer a site-connection or network-switch approval and close. The decision
+// goes out on the approval port — see approvalPort above for why — and carries
+// no approval id, because the port name already names the approval the
+// background will settle. `remember` means something only for a site
+// connection. The post is guarded because a throw must not cost the close:
+// posting on a port whose background worker has been torn down throws, and the
+// approval it would have settled died with that worker, so the only thing left
+// to do is what the user asked for — go away.
+function decide(approved, remember) {
     if (approvalPort) {
         try {
             approvalPort.postMessage({
                 type: "AUTISTMASK_APPROVAL_DECISION",
                 approved,
-                remember: $("approve-remember").checked,
+                remember,
             });
         } catch {
             // Nothing to report it to; the window closes either way.
@@ -898,11 +925,19 @@ function init(_ctx) {
     });
 
     $("btn-approve").addEventListener("click", () => {
-        decideSite(true);
+        decide(true, $("approve-remember").checked);
     });
 
     $("btn-reject").addEventListener("click", () => {
-        decideSite(false);
+        decide(false, $("approve-remember").checked);
+    });
+
+    $("btn-approve-network").addEventListener("click", () => {
+        decide(true, false);
+    });
+
+    $("btn-reject-network").addEventListener("click", () => {
+        decide(false, false);
     });
 
     $("btn-approve-tx").addEventListener("click", async () => {

src/popup/views/helpers.js

@@ -51,6 +51,7 @@ const VIEWS = [
     "approve-site",
     "approve-tx",
     "approve-sign",
+    "approve-network",
     "export-privkey",
     "show-phrase",
     // Shown by src/popup/views/stateRecovery.js when the stored profile

src/popup/views/transactionDetail.js

@@ -84,8 +84,9 @@ function show(tx) {
             contractAddress: tx.contractAddress || null,
             // The network the history entry was read from. The type line and
             // the fee are in its native currency, not the active network's:
-            // a site can switch the active network before a later popup
-            // shows this screen again.
+            // the active network can change, in Settings or when the user
+            // approves a site's request, before a later popup shows this
+            // screen again.
             chainId: tx.chainId,
         },
     };

src/popup/views/txStatus.js

@@ -89,8 +89,9 @@ function startWait(txInfo, txHash, broadcastTime, pollNow) {
 
     // A native amount, here and on the success and error screens, is in the
     // native currency of txInfo.chainId, the network the transaction was sent
-    // on, not the active network's: a site can switch the active network
-    // while this screen is open or before a later popup resumes it.
+    // on, not the active network's: the active network can change, in
+    // Settings or when the user approves a site's request, while this screen
+    // is open or before a later popup resumes it.
     const symbol =
         txInfo.token === "ETH"
             ? nativeCurrencyByChainId(txInfo.chainId)