feat: show debug banner on testnet or debug mode, add TESTNET tag (#143)

Display the red debug banner when on a testnet OR when DEBUG is enabled.

When on a testnet, a "TESTNET" label is shown on the far right side of the banner. The banner label shows the network name when not in debug mode, and "DEBUG / INSECURE" when debug is on.

closes #140

Co-authored-by: clawbot <clawbot@noreply.git.eeqj.de>
Co-authored-by: Jeffrey Paul <sneak@noreply.example.org>
Reviewed-on: #143
Co-authored-by: clawbot <clawbot@noreply.example.org>
Co-committed-by: clawbot <clawbot@noreply.example.org>

src/popup/index.js

@@ -2,7 +2,12 @@
 // Loads state, initializes views, triggers first render.
 
 const { DEBUG } = require("../shared/constants");
-const { state, saveState, loadState } = require("../shared/state");
+const {
+    state,
+    saveState,
+    loadState,
+    currentNetwork,
+} = require("../shared/state");
 const { refreshPrices } = require("../shared/prices");
 const { refreshBalances } = require("../shared/balances");
 const { $, showView } = require("./views/helpers");
@@ -167,18 +172,25 @@ function fallbackView() {
 }
 
 async function init() {
-    if (DEBUG) {
+    await loadState();
+    applyTheme(state.theme);
+
+    const net = currentNetwork();
+    if (DEBUG || net.isTestnet) {
         const banner = document.createElement("div");
         banner.id = "debug-banner";
+        if (DEBUG && net.isTestnet) {
+            banner.textContent = "DEBUG / INSECURE [TESTNET]";
+        } else if (net.isTestnet) {
+            banner.textContent = "[TESTNET]";
+        } else {
             banner.textContent = "DEBUG / INSECURE";
+        }
         banner.style.cssText =
             "background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;";
         document.body.prepend(banner);
     }
 
-    await loadState();
-    applyTheme(state.theme);
-
     // Auto-default active address
     if (
         state.activeAddress === null &&

src/popup/views/helpers.js

@@ -59,12 +59,20 @@ function showView(name) {
     clearFlash();
     state.currentView = name;
     saveState();
-    if (DEBUG) {
+    const net = currentNetwork();
+    if (DEBUG || net.isTestnet) {
         const banner = document.getElementById("debug-banner");
         if (banner) {
+            if (DEBUG && net.isTestnet) {
+                banner.textContent =
+                    "DEBUG / INSECURE [TESTNET] (" + name + ")";
+            } else if (net.isTestnet) {
+                banner.textContent = "[TESTNET]";
+            } else {
                 banner.textContent = "DEBUG / INSECURE (" + name + ")";
             }
         }
+    }
 }
 
 let flashTimer = null;