sneak
cef3d2ad37
All checks were successful
check / check (push) Successful in 13s
The 42ch fixed-width spans with shrink-0 prevented flex from shrinking them when the container was narrower, causing horizontal scrolling. Also added overflow-x: hidden on body and #app as a safety net.
110 lines
2.3 KiB
JavaScript
110 lines
2.3 KiB
JavaScript
// Shared DOM helpers used by all views.
|
|
|
|
const { DEBUG } = require("../../shared/constants");
|
|
const {
|
|
formatUsd,
|
|
getPrice,
|
|
getAddressValueUsd,
|
|
} = require("../../shared/prices");
|
|
|
|
const VIEWS = [
|
|
"welcome",
|
|
"add-wallet",
|
|
"import-key",
|
|
"main",
|
|
"address",
|
|
"send",
|
|
"confirm-tx",
|
|
"receive",
|
|
"add-token",
|
|
"settings",
|
|
"transaction",
|
|
"approve",
|
|
];
|
|
|
|
function $(id) {
|
|
return document.getElementById(id);
|
|
}
|
|
|
|
function showError(id, msg) {
|
|
const el = $(id);
|
|
el.textContent = msg;
|
|
el.classList.remove("hidden");
|
|
}
|
|
|
|
function hideError(id) {
|
|
$(id).classList.add("hidden");
|
|
}
|
|
|
|
function showView(name) {
|
|
for (const v of VIEWS) {
|
|
const el = document.getElementById(`view-${v}`);
|
|
if (el) {
|
|
el.classList.toggle("hidden", v !== name);
|
|
}
|
|
}
|
|
clearFlash();
|
|
if (DEBUG) {
|
|
const banner = document.getElementById("debug-banner");
|
|
if (banner) {
|
|
banner.textContent = "DEBUG / INSECURE (" + name + ")";
|
|
}
|
|
}
|
|
}
|
|
|
|
let flashTimer = null;
|
|
|
|
function clearFlash() {
|
|
if (flashTimer) {
|
|
clearTimeout(flashTimer);
|
|
flashTimer = null;
|
|
}
|
|
$("flash-msg").textContent = "";
|
|
}
|
|
|
|
function showFlash(msg, duration = 2000) {
|
|
clearFlash();
|
|
$("flash-msg").textContent = msg;
|
|
flashTimer = setTimeout(() => {
|
|
$("flash-msg").textContent = "";
|
|
flashTimer = null;
|
|
}, duration);
|
|
}
|
|
|
|
function balanceLine(symbol, amount, price) {
|
|
const qty = amount.toFixed(4);
|
|
const usd = price ? formatUsd(amount * price) : "";
|
|
return (
|
|
`<div class="flex text-xs">` +
|
|
`<span class="flex justify-between" style="width:42ch">` +
|
|
`<span>${symbol}</span>` +
|
|
`<span>${qty}</span>` +
|
|
`</span>` +
|
|
`<span class="text-right text-muted flex-1">${usd}</span>` +
|
|
`</div>`
|
|
);
|
|
}
|
|
|
|
function balanceLinesForAddress(addr) {
|
|
let html = balanceLine(
|
|
"ETH",
|
|
parseFloat(addr.balance || "0"),
|
|
getPrice("ETH"),
|
|
);
|
|
for (const t of addr.tokenBalances || []) {
|
|
const bal = parseFloat(t.balance || "0");
|
|
if (bal === 0) continue;
|
|
html += balanceLine(t.symbol, bal, getPrice(t.symbol));
|
|
}
|
|
return html;
|
|
}
|
|
|
|
module.exports = {
|
|
$,
|
|
showError,
|
|
hideError,
|
|
showView,
|
|
showFlash,
|
|
balanceLinesForAddress,
|
|
};
|