Add common token picker on Add Token screen
All checks were successful
check / check (push) Successful in 14s

Shows the top 25 tokens by market cap as clickable buttons
below the contract address input. Clicking a token fills in
its contract address automatically.
This commit is contained in:
2026-02-25 18:31:39 +07:00
parent f6a47a6cea
commit cbb92f2a69
2 changed files with 22 additions and 1 deletions

View File

@@ -384,6 +384,15 @@
id="add-token-info"
class="text-xs text-muted mb-2 hidden"
></div>
<div class="mb-2">
<label class="block mb-1 text-xs text-muted"
>Or pick a common token:</label
>
<div
id="common-token-list"
class="flex flex-wrap gap-1"
></div>
</div>
<div class="flex gap-2">
<button
id="btn-add-token-confirm"

View File

@@ -7,7 +7,7 @@ const {
formatEther,
parseEther,
} = require("ethers");
const { getTopTokenPrices } = require("../shared/tokens");
const { TOKENS, getTopTokenPrices } = require("../shared/tokens");
const { encryptWithPassword, decryptWithPassword } = require("../shared/vault");
const QRCode = require("qrcode");
@@ -560,6 +560,18 @@ async function init() {
$("add-token-address").value = "";
$("add-token-info").classList.add("hidden");
hideError("add-token-error");
const list = $("common-token-list");
list.innerHTML = TOKENS.slice(0, 25)
.map(
(t) =>
`<button class="common-token border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs" data-address="${t.address}" data-symbol="${t.symbol}" data-decimals="${t.decimals}">${t.symbol}</button>`,
)
.join("");
list.querySelectorAll(".common-token").forEach((btn) => {
btn.addEventListener("click", () => {
$("add-token-address").value = btn.dataset.address;
});
});
showView("add-token");
});