From 933c13ad1a0a875608c1316396db57f1eedbeb5e Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Wed, 25 Feb 2026 17:09:44 +0700
Subject: [PATCH] Add ENS support: reverse lookup and forward resolution
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reverse ENS lookup on balance refresh — if an address has an
ENS name, it's shown in the wallet list and address detail view.
Send form accepts ENS names in the To field (resolves before
sending). Placeholder updated to indicate ENS support.
---
 src/popup/index.html |  3 ++-
 src/popup/index.js   | 53 ++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index 78528cd..a7ada43 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -166,6 +166,7 @@
                     </button>
                 </div>
 
+                <div id="address-ens" class="font-bold mb-1 hidden"></div>
                 <div
                     id="address-full"
                     class="text-xs break-all mb-1 cursor-pointer"
@@ -242,7 +243,7 @@
                         type="text"
                         id="send-to"
                         class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
-                        placeholder="Recipient address (0x...)"
+                        placeholder="Address (0x...) or ENS name"
                     />
                 </div>
                 <div class="mb-2">
diff --git a/src/popup/index.js b/src/popup/index.js
index e658f15..7f04280 100644
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -138,14 +138,24 @@ async function refreshBalances() {
     const updates = [];
     for (const wallet of state.wallets) {
         for (const addr of wallet.addresses) {
+            // Fetch ETH balance
             updates.push(
                 provider
                     .getBalance(addr.address)
                     .then((bal) => {
                         addr.balance = formatBalance(bal);
                     })
+                    .catch(() => {}),
+            );
+            // Reverse ENS lookup
+            updates.push(
+                provider
+                    .lookupAddress(addr.address)
+                    .then((name) => {
+                        addr.ensName = name || null;
+                    })
                     .catch(() => {
-                        // leave balance unchanged on error
+                        addr.ensName = null;
                     }),
             );
         }
@@ -174,10 +184,15 @@ function renderWalletList() {
         html += `</div>`;
 
         wallet.addresses.forEach((addr, ai) => {
-            html += `<div class="address-row flex justify-between items-center py-1 border-b border-border-light cursor-pointer hover:bg-hover px-1" data-wallet="${wi}" data-address="${ai}">`;
+            html += `<div class="address-row py-1 border-b border-border-light cursor-pointer hover:bg-hover px-1" data-wallet="${wi}" data-address="${ai}">`;
+            if (addr.ensName) {
+                html += `<div class="text-xs font-bold">${addr.ensName}</div>`;
+            }
+            html += `<div class="flex justify-between items-center">`;
             html += `<span class="text-xs break-all">${addr.address}</span>`;
             html += `<span class="text-xs ml-1 whitespace-nowrap">${addr.balance} ETH</span>`;
             html += `</div>`;
+            html += `</div>`;
         });
 
         html += `</div>`;
@@ -221,6 +236,13 @@ function showAddressDetail() {
     $("address-copied-msg").textContent = "";
     $("address-eth-balance").textContent = addr.balance;
     $("address-usd-value").textContent = "";
+    const ensEl = $("address-ens");
+    if (addr.ensName) {
+        ensEl.textContent = addr.ensName;
+        ensEl.classList.remove("hidden");
+    } else {
+        ensEl.classList.add("hidden");
+    }
     updateTokenList(addr);
     updateSendTokenSelect(addr);
     showView("address");
@@ -442,7 +464,7 @@ async function init() {
     });
 
     // -- Send --
-    $("btn-send-confirm").addEventListener("click", () => {
+    $("btn-send-confirm").addEventListener("click", async () => {
         const to = $("send-to").value.trim();
         const amount = $("send-amount").value.trim();
         if (!to) {
@@ -455,9 +477,32 @@ async function init() {
             $("send-status").classList.remove("hidden");
             return;
         }
+        // Resolve ENS name if it looks like one
+        let resolvedTo = to;
+        if (to.includes(".") && !to.startsWith("0x")) {
+            const statusEl = $("send-status");
+            statusEl.textContent = "Resolving " + to + "...";
+            statusEl.classList.remove("hidden");
+            try {
+                const provider = getProvider();
+                const resolved = await provider.resolveName(to);
+                if (!resolved) {
+                    showError("send-status", "Could not resolve " + to);
+                    return;
+                }
+                resolvedTo = resolved;
+                statusEl.textContent = to + " = " + resolvedTo;
+            } catch (e) {
+                showError("send-status", "Failed to resolve ENS name.");
+                return;
+            }
+        }
         // TODO: prompt for password, decrypt key, construct and send transaction
         const el = $("send-status");
-        el.textContent = "Sent! (stub — password/signing not yet implemented)";
+        el.textContent =
+            "Sending to " +
+            resolvedTo +
+            " (stub — password/signing not yet implemented)";
         el.classList.remove("hidden");
     });