Rearrange home address layout and widen rename input
Some checks failed
check / check (push) Has been cancelled
Some checks failed
check / check (push) Has been cancelled
Each address now shows: title on its own line, full untruncated address with ACTIVE/select marker on the next line, USD total right-aligned on the next line, then token balances below. The wallet rename input now fills the available width.
This commit is contained in:
@@ -4,7 +4,6 @@ const {
|
||||
showFlash,
|
||||
balanceLinesForAddress,
|
||||
addressDotHtml,
|
||||
truncateMiddle,
|
||||
} = require("./helpers");
|
||||
const { state, saveState, currentAddress } = require("../../shared/state");
|
||||
const { updateSendBalance, renderSendTokenSelect } = require("./send");
|
||||
@@ -47,16 +46,17 @@ function render(ctx) {
|
||||
const activeHtml = isActive
|
||||
? `<span class="font-bold text-xs">ACTIVE</span>`
|
||||
: `<span class="btn-select-active text-xs font-normal cursor-pointer" data-addr="${addr.address}">[<span class="underline decoration-dashed">select</span>]</span>`;
|
||||
html += `<div class="text-xs font-bold flex justify-between items-center"><span>Address ${wi + 1}.${ai + 1}</span>${activeHtml}</div>`;
|
||||
const dot = addressDotHtml(addr.address);
|
||||
html += `<div class="text-xs font-bold">Address ${wi + 1}.${ai + 1}</div>`;
|
||||
if (addr.ensName) {
|
||||
html += `<div class="text-xs font-bold flex items-center">${dot}${addr.ensName}</div>`;
|
||||
}
|
||||
const addrUsd = formatUsd(getAddressValueUsd(addr));
|
||||
html += `<div class="flex text-xs">`;
|
||||
html += `<span class="flex items-center" style="width:42ch;max-width:100%">${addr.ensName ? "" : dot}${truncateMiddle(addr.address, 40)}</span>`;
|
||||
html += `<span class="text-right text-muted flex-1">${addrUsd}</span>`;
|
||||
html += `<div class="flex text-xs items-center justify-between">`;
|
||||
html += `<span class="flex items-center break-all">${addr.ensName ? "" : dot}${addr.address}</span>`;
|
||||
html += `<span class="flex-shrink-0 ml-1">${activeHtml}</span>`;
|
||||
html += `</div>`;
|
||||
const addrUsd = formatUsd(getAddressValueUsd(addr));
|
||||
html += `<div class="text-xs text-muted text-right">${addrUsd}</div>`;
|
||||
html += balanceLinesForAddress(
|
||||
addr,
|
||||
state.trackedTokens,
|
||||
@@ -122,7 +122,7 @@ function render(ctx) {
|
||||
input.value = wallet.name;
|
||||
input.className =
|
||||
"font-bold border border-border p-0 bg-bg text-fg";
|
||||
input.style.width = span.offsetWidth + 20 + "px";
|
||||
input.style.width = "100%";
|
||||
const save = async () => {
|
||||
const val = input.value.trim();
|
||||
if (val && val !== wallet.name) {
|
||||
|
||||
Reference in New Issue
Block a user