feat: show debug banner on testnet or debug mode, add TESTNET tag
All checks were successful
check / check (push) Successful in 26s

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
This commit is contained in:
2026-03-01 11:17:51 -08:00
parent 6b40fa8836
commit 29ff5393d3
2 changed files with 29 additions and 9 deletions

View File

@@ -2,7 +2,12 @@
// Loads state, initializes views, triggers first render. // Loads state, initializes views, triggers first render.
const { DEBUG } = require("../shared/constants"); 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 { refreshPrices } = require("../shared/prices");
const { refreshBalances } = require("../shared/balances"); const { refreshBalances } = require("../shared/balances");
const { $, showView } = require("./views/helpers"); const { $, showView } = require("./views/helpers");
@@ -167,12 +172,24 @@ function fallbackView() {
} }
async function init() { async function init() {
if (DEBUG) { const net = currentNetwork();
if (DEBUG || net.isTestnet) {
const banner = document.createElement("div"); const banner = document.createElement("div");
banner.id = "debug-banner"; banner.id = "debug-banner";
banner.textContent = "DEBUG / INSECURE";
banner.style.cssText = 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;"; "background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;display:flex;justify-content:center;align-items:center;";
const label = document.createElement("span");
label.id = "debug-banner-label";
label.style.cssText = "flex:1;text-align:center;";
label.textContent = DEBUG ? "DEBUG / INSECURE" : net.name;
banner.appendChild(label);
if (net.isTestnet) {
const tag = document.createElement("span");
tag.id = "debug-banner-testnet";
tag.style.cssText = "position:absolute;right:6px;font-weight:bold;";
tag.textContent = "TESTNET";
banner.appendChild(tag);
}
document.body.prepend(banner); document.body.prepend(banner);
} }

View File

@@ -6,7 +6,7 @@ const {
getPrice, getPrice,
getAddressValueUsd, getAddressValueUsd,
} = require("../../shared/prices"); } = require("../../shared/prices");
const { state, saveState } = require("../../shared/state"); const { state, saveState, currentNetwork } = require("../../shared/state");
// When views are added, removed, or transitions between them change, // When views are added, removed, or transitions between them change,
// update the view-navigation documentation in README.md to match. // update the view-navigation documentation in README.md to match.
@@ -59,10 +59,13 @@ function showView(name) {
clearFlash(); clearFlash();
state.currentView = name; state.currentView = name;
saveState(); saveState();
if (DEBUG) { const net = currentNetwork();
const banner = document.getElementById("debug-banner"); if (DEBUG || net.isTestnet) {
if (banner) { const label = document.getElementById("debug-banner-label");
banner.textContent = "DEBUG / INSECURE (" + name + ")"; if (label) {
label.textContent = DEBUG
? "DEBUG / INSECURE (" + name + ")"
: net.name + " (" + name + ")";
} }
} }
} }