From 546b8f576792b2a08f687cada98ecbc0cf7ceeda Mon Sep 17 00:00:00 2001 From: Local Dev Date: Sun, 27 Sep 2026 00:47:57 +0200 Subject: [PATCH] =?UTF-8?q?feat(aegis):=200.10.0=20=E2=80=94=20lead=20with?= =?UTF-8?q?=20the=20balance,=20and=20make=20the=20section=20bar=20read=20a?= =?UTF-8?q?s=20an=20app?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit First pass of the wallet-app restyle. The panel led with a 22px balance that carried no more weight than the labels around it, so the one number people open the sidebar to read had to be hunted for. It is now the hero: 32px, thousands-grouped, with the fractional part dimmed so magnitude reads before precision. The ticker and the fiat conversion sit on its baseline as annotations rather than peers, and wrap to their own line intact once the amount outgrows a narrow panel. The Receive/Send/History/Settings bar used an underline for the active tab, which read as browser chrome and all but vanished at sidebar widths — a 2px rule under a short label is easy to miss. It is a segmented pill bar now, active section filled in the accent. The hover tint derives from --ink so it shows in the light theme too, where a white overlay was invisible. No charts yet: there is no price history behind Coin-Spectrum to draw, so nothing here fakes a trend line. --- bundled-addons/aegis/addon.json | 2 +- bundled-addons/aegis/panel.html | 34 ++++++++++++++++++++++++--------- bundled-addons/aegis/panel.js | 22 ++++++++++++++++++--- 3 files changed, 45 insertions(+), 13 deletions(-) diff --git a/bundled-addons/aegis/addon.json b/bundled-addons/aegis/addon.json index 4e516cad..c19a9259 100644 --- a/bundled-addons/aegis/addon.json +++ b/bundled-addons/aegis/addon.json @@ -1,7 +1,7 @@ { "id": "aegis", "name": "Aegis Wallet", - "version": "0.9.10", + "version": "0.10.0", "category": "plugin", "description": "Multi-chain wallet (BCH, BTC, TRX, ETH, SOL, SC, DGB) derived from your Theseus vault. Dapps get window.bitcoincash on .x sites; window.tronWeb / window.tronLink / window.ethereum / window.solana on any https page.", "author": "Silent Mode", diff --git a/bundled-addons/aegis/panel.html b/bundled-addons/aegis/panel.html index d8e1c6e9..2adfec67 100644 --- a/bundled-addons/aegis/panel.html +++ b/bundled-addons/aegis/panel.html @@ -32,10 +32,19 @@ .net { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 11.5px; white-space: nowrap; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); } .dot.on { background: var(--ok); } .dot.busy { background: #e0b341; } - .bal { margin-top: 8px; font-variant-numeric: tabular-nums; } - .bal .big { font-size: 22px; font-weight: 650; letter-spacing: .2px; } - .bal .big small { font-size: 13px; color: var(--mut); font-weight: 500; margin-left: 4px; } - .bal .sub { color: var(--dim); font-size: 11.5px; display: flex; align-items: center; gap: 8px; } + /* Balance hero. Every modern wallet leads with one large numeral and pushes + the fractional part back to ~40% opacity, so the eye reads magnitude + before precision; the ticker and the fiat conversion are annotations on + that number rather than peers of it. Baseline-aligned flex keeps them on + the numeral's baseline however long the amount grows. */ + .bal { margin-top: 10px; font-variant-numeric: tabular-nums; } + .bal .big { font-size: 32px; font-weight: 680; letter-spacing: -.6px; line-height: 1.1; + display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; } + .bal .big .dec { color: var(--dim); font-weight: 620; } + .bal .big small { font-size: 13px; color: var(--mut); font-weight: 500; margin-left: 0; } + /* Scoped to the hero — .fiat is also the Send form's conversion line. */ + .bal .big .fiat { font-size: 14px; margin-left: 6px; } + .bal .sub { color: var(--dim); font-size: 11.5px; display: flex; align-items: center; gap: 8px; margin-top: 3px; } .bal .sub .netlbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Full-panel sheet — fills most of the sidebar but stops above the footer so the aegis.x brand + version chip stay visible. Users @@ -161,11 +170,18 @@ .setsecnav button.on { background: rgb(from var(--acid, #d6ff3d) r g b / .16); color: var(--acid, #d6ff3d); font-weight: 600; } .setsecnav button:hover:not(.on) { color: var(--ink); } - nav { display: flex; border-bottom: 1px solid var(--line); background: var(--panel); } - nav button { flex: 1; padding: 9px 0 8px; border: 0; background: transparent; color: var(--mut); cursor: pointer; - font: inherit; font-size: 12.5px; border-bottom: 2px solid transparent; } - nav button.on { color: var(--acid); border-bottom-color: var(--acid); } - nav button:hover { color: var(--ink); } + /* Segmented pill bar. The underline-tab treatment read as browser chrome, + and a 2px underline under a short label is nearly invisible once the + sidebar is narrow. A filled pill for the active section is what the + wallet apps use and it holds up at any width. The hover tint derives + from --ink so it also shows in the light theme, where a white overlay + would vanish. */ + nav { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--panel); } + nav button { flex: 1; padding: 7px 0; border: 0; border-radius: 999px; background: transparent; + color: var(--mut); cursor: pointer; font: inherit; font-size: 12.5px; + transition: background .12s, color .12s; } + nav button.on { background: var(--acid); color: #0b0f08; font-weight: 650; } + nav button:hover:not(.on) { background: rgb(from var(--ink) r g b / .08); color: var(--ink); } main { flex: 1; overflow: auto; padding: 14px; } /* Persistent aegis.x brand strip. Sticks to the panel's bottom edge so the wallet always advertises its own front-door site — helps users bookmark diff --git a/bundled-addons/aegis/panel.js b/bundled-addons/aegis/panel.js index 5b86e1a9..3d0b6e07 100644 --- a/bundled-addons/aegis/panel.js +++ b/bundled-addons/aegis/panel.js @@ -140,6 +140,22 @@ function fmtBig(units, dec) { const s = (Number(units || 0) / Math.pow(10, d)).toFixed(d); return s.replace(/(\.\d*?[1-9])0+$|\.0+$/, "$1"); } +// Paint the header balance. Groups the integer part with thousands +// separators and wraps the fraction in .dec so CSS can dim it — the +// "$98,230.02" treatment the reference wallets lead with. Anything that is +// not a bare number (an em dash, a skeleton, an error) falls through to +// plain text. The regex guarantees the interpolated pieces are digits, +// sign and dot only, so building this with innerHTML cannot inject markup. +function setBalMain(text) { + const el = $("balMain"); + if (!el) return; + const s = String(text == null ? "—" : text); + const m = /^(-?)(d+)(.d+)?$/.exec(s); + if (!m) { el.textContent = s; return; } + const grouped = m[2].replace(/B(?=(d{3})+(?!d))/g, ","); + el.innerHTML = m[1] + grouped + (m[3] ? '' + m[3] + "" : ""); +} + function fmtSmall(units) { if (typeof units === "string" && /^-?\d+$/.test(units)) return units.replace(/\B(?=(\d{3})+(?!\d))/g, ","); return Number(units || 0).toLocaleString("en-US"); @@ -2991,7 +3007,7 @@ function render() { // Sia-specific gate: adapter is up, keys are derived, but no walletd URL // means no balance / history until the user configures one in Settings. if (chain() === "sc" && s.needsWalletdUrl) { - $("balMain").textContent = "—"; $("balTicker").textContent = s.meta.ticker; + setBalMain("—"); $("balTicker").textContent = s.meta.ticker; $("netlbl").textContent = "point Aegis at a walletd node in Settings"; $("tabs").hidden = true; gate.hidden = false; @@ -2999,7 +3015,7 @@ function render() { return; } const total = balanceSum(s.balance); - $("balMain").textContent = fmtBig(total); + setBalMain(fmtBig(total)); $("balTicker").textContent = s.meta.ticker; const uc = s.balance?.unconfirmed; if (uc && uc !== "0" && uc !== 0) $("netlbl").textContent += ` · ${fmtBig(uc)} unconfirmed`; @@ -3009,7 +3025,7 @@ function render() { $("balFiat").textContent = fiat || ""; $("balFiat").hidden = !fiat; } else { - $("balMain").textContent = "—"; $("balTicker").textContent = ""; + setBalMain("—"); $("balTicker").textContent = ""; $("balFiat").hidden = true; } renderPortfolio();