fix: Settings ignores an endpoint check once the same "Save" is tapped again (closes #698)

Each RPC and Blockscout "Save" in Settings now counts its taps. A check
that answers after a newer tap of the same "Save" stores nothing and
leaves the flash message alone. Before this change, the older check's
error or refusal replaced the newer tap's "Saved.".

The save also checks for a newer tap at two points. A tap made while the
save waits for the lock means nothing is stored. A tap made during the
write means no flash message is shown.

Model: opus-5-5

src/popup/views/settings.js

@@ -50,6 +50,11 @@ let versionClickTimer = null;
 // not the one in `state`.
 let shownNetwork = null;
 
+// Each endpoint "Save" counts its taps here, under the field that it stores. A
+// tap stores its URL and shows a flash message only while it is the latest tap
+// of its "Save".
+const saveTaps = { rpcUrl: 0, blockscoutUrl: 0 };
+
 // One row per site origin, however many addresses it appears under, each with
 // an [x] that hands it to onRemove.
 function renderSiteList(containerId, origins, onRemove) {
@@ -347,10 +352,16 @@ function showNewSettings() {
 // shows `url`, nothing is saved. The flash message then says that the URL was
 // changed during the check. The save compares the input and sets `url` in
 // `state` in one step. So a redraw after the comparison shows `url`.
-async function saveEndpoint(field, input, url, networkId) {
+//
+// `tap` is the number of the "Save" tap that checked `url`. If the user taps
+// the same "Save" again before this save holds the lock, nothing is stored. If
+// the user taps the same "Save" again before the write ends, no flash message
+// is shown.
+async function saveEndpoint(field, input, url, networkId, tap) {
     let refused = false;
     let inputChanged = false;
     await saveState((stored) => {
+        if (saveTaps[field] !== tap) return false;
         refused =
             state.networkId !== networkId || stored.networkId !== networkId;
         inputChanged = $(input).value.trim() !== url;
@@ -358,6 +369,7 @@ async function saveEndpoint(field, input, url, networkId) {
         state[field] = url;
         stored[field] = url;
     });
+    if (saveTaps[field] !== tap) return;
     if (refused) {
         showFlash("The URL was not saved because the network changed.");
     } else if (inputChanged) {
@@ -375,6 +387,8 @@ function init(_ctx) {
     showPhrase.init();
 
     $("btn-save-rpc").addEventListener("click", async () => {
+        saveTaps.rpcUrl++;
+        const tap = saveTaps.rpcUrl;
         const url = $("settings-rpc").value.trim();
         if (!url) {
             showFlash("Please enter an RPC URL.");
@@ -395,6 +409,8 @@ function init(_ctx) {
                 }),
             });
             const json = await resp.json();
+            // The user has tapped this "Save" again since the check began.
+            if (tap !== saveTaps.rpcUrl) return;
             if (json.error) {
                 log.errorf("RPC validation error:", json.error);
                 showFlash("Endpoint returned an error.");
@@ -408,6 +424,7 @@ function init(_ctx) {
             // Cancelled by the popup closing, not failed: see pageClosed in
             // src/popup/index.js.
             if (ctx.pageClosed.aborted) return;
+            if (tap !== saveTaps.rpcUrl) return;
             // Not the error's message: fetch puts the whole URL, password and
             // key included, in the message of the error it throws for a URL
             // with a user name and password or one it cannot parse.
@@ -415,10 +432,12 @@ function init(_ctx) {
             showFlash("Could not reach endpoint.");
             return;
         }
-        await saveEndpoint("rpcUrl", "settings-rpc", url, net.id);
+        await saveEndpoint("rpcUrl", "settings-rpc", url, net.id, tap);
     });
 
     $("btn-save-blockscout").addEventListener("click", async () => {
+        saveTaps.blockscoutUrl++;
+        const tap = saveTaps.blockscoutUrl;
         const url = $("settings-blockscout").value.trim();
         if (!url) {
             showFlash("Please enter a Blockscout API URL.");
@@ -428,18 +447,26 @@ function init(_ctx) {
         showFlash("Testing endpoint...");
         try {
             const resp = await debugFetch(url + "/stats");
+            if (tap !== saveTaps.blockscoutUrl) return;
             if (!resp.ok) {
                 showFlash("Endpoint returned HTTP " + resp.status + ".");
                 return;
             }
         } catch {
             if (ctx.pageClosed.aborted) return;
+            if (tap !== saveTaps.blockscoutUrl) return;
             // Not the error's message, as for the RPC check above.
             log.errorf("Blockscout validation failed:", urlOrigin(url));
             showFlash("Could not reach endpoint.");
             return;
         }
-        await saveEndpoint("blockscoutUrl", "settings-blockscout", url, net.id);
+        await saveEndpoint(
+            "blockscoutUrl",
+            "settings-blockscout",
+            url,
+            net.id,
+            tap,
+        );
     });
 
     // Each change is made inside the save, holding the lock. So