From cbb92f2a69ffbd8e19ba96439e542cbbd17258ed Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Wed, 25 Feb 2026 18:31:39 +0700
Subject: [PATCH] Add common token picker on Add Token screen

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.
---
 src/popup/index.html |  9 +++++++++
 src/popup/index.js   | 14 +++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index a9077a1..2659003 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -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"
diff --git a/src/popup/index.js b/src/popup/index.js
index 14ea481..e494a6a 100644
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -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");
     });