Swap address row click behavior: row selects active, [info] opens detail
Some checks failed
check / check (push) Has been cancelled

Clicking an address row now makes it the active address (bold title,
updates headline and active address display, broadcasts to dapps).
The [info] button on each row opens the address detail page. This
replaces the previous [ ]/ACTIVE toggle.
This commit is contained in:
2026-02-26 16:04:23 +07:00
parent 881217b16c
commit 72cf4aab8c

View File

@@ -103,17 +103,16 @@ function render(ctx) {
wallet.addresses.forEach((addr, ai) => { wallet.addresses.forEach((addr, ai) => {
html += `<div class="address-row py-1 border-b border-border-light cursor-pointer hover:bg-hover" data-wallet="${wi}" data-address="${ai}">`; html += `<div class="address-row py-1 border-b border-border-light cursor-pointer hover:bg-hover" data-wallet="${wi}" data-address="${ai}">`;
const isActive = state.activeAddress === addr.address; const isActive = state.activeAddress === addr.address;
const activeHtml = isActive const infoBtn = `<span class="btn-addr-info text-xs cursor-pointer border border-border px-1 hover:bg-fg hover:text-bg" data-wallet="${wi}" data-address="${ai}">[info]</span>`;
? `<span class="font-bold text-xs">ACTIVE</span>`
: `<span class="btn-select-active text-xs cursor-pointer" data-addr="${addr.address}">[ ]</span>`;
const dot = addressDotHtml(addr.address); const dot = addressDotHtml(addr.address);
html += `<div class="text-xs font-bold">Address ${wi + 1}.${ai + 1}</div>`; const titleBold = isActive ? "font-bold" : "";
html += `<div class="text-xs ${titleBold}">Address ${wi + 1}.${ai + 1}</div>`;
if (addr.ensName) { if (addr.ensName) {
html += `<div class="text-xs font-bold flex items-center">${dot}${addr.ensName}</div>`; html += `<div class="text-xs font-bold flex items-center">${dot}${addr.ensName}</div>`;
} }
html += `<div class="flex text-xs items-center justify-between">`; 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 items-center break-all">${addr.ensName ? "" : dot}${addr.address}</span>`;
html += `<span class="flex-shrink-0 ml-1">${activeHtml}</span>`; html += `<span class="flex-shrink-0 ml-1">${infoBtn}</span>`;
html += `</div>`; html += `</div>`;
const addrUsd = formatUsd(getAddressValueUsd(addr)); const addrUsd = formatUsd(getAddressValueUsd(addr));
html += `<div class="text-xs text-muted text-right">${addrUsd}</div>`; html += `<div class="text-xs text-muted text-right">${addrUsd}</div>`;
@@ -130,17 +129,12 @@ function render(ctx) {
container.innerHTML = html; container.innerHTML = html;
container.querySelectorAll(".address-row").forEach((row) => { container.querySelectorAll(".address-row").forEach((row) => {
row.addEventListener("click", () => { row.addEventListener("click", async () => {
state.selectedWallet = parseInt(row.dataset.wallet, 10); const wi = parseInt(row.dataset.wallet, 10);
state.selectedAddress = parseInt(row.dataset.address, 10); const ai = parseInt(row.dataset.address, 10);
ctx.showAddressDetail(); const addr = state.wallets[wi].addresses[ai].address;
}); if (state.activeAddress !== addr) {
}); state.activeAddress = addr;
container.querySelectorAll(".btn-select-active").forEach((btn) => {
btn.addEventListener("click", async (e) => {
e.stopPropagation();
state.activeAddress = btn.dataset.addr;
await saveState(); await saveState();
render(ctx); render(ctx);
const runtime = const runtime =
@@ -148,6 +142,16 @@ function render(ctx) {
? browser.runtime ? browser.runtime
: chrome.runtime; : chrome.runtime;
runtime.sendMessage({ type: "AUTISTMASK_ACTIVE_CHANGED" }); runtime.sendMessage({ type: "AUTISTMASK_ACTIVE_CHANGED" });
}
});
});
container.querySelectorAll(".btn-addr-info").forEach((btn) => {
btn.addEventListener("click", (e) => {
e.stopPropagation();
state.selectedWallet = parseInt(btn.dataset.wallet, 10);
state.selectedAddress = parseInt(btn.dataset.address, 10);
ctx.showAddressDetail();
}); });
}); });