src/popup/index.html

@@ -637,10 +637,16 @@
                 <div class="flex justify-center mb-3">
                     <canvas id="receive-qr"></canvas>
                 </div>
+                <div
+                    id="receive-ens"
+                    class="font-bold mb-1 hidden flex items-center"
+                ></div>
                 <div
                     class="border border-border p-2 break-all mb-3 text-xs cursor-pointer"
+                    title="Click to copy"
                 >
-                    <span id="receive-address-block" class="select-all"></span>
+                    <span id="receive-address-dot"></span>
+                    <span id="receive-address-full"></span>
                     <span id="receive-etherscan-link"></span>
                 </div>
                 <button

src/popup/views/receive.js

@@ -2,8 +2,8 @@ const {
     $,
     showView,
     showFlash,
-    formatAddressHtml,
-    addressTitle,
+    addressDotHtml,
+    escapeHtml,
 } = require("./helpers");
 const { state, currentAddress } = require("../../shared/state");
 const QRCode = require("qrcode");
@@ -18,12 +18,17 @@ const EXT_ICON =
 function show() {
     const addr = currentAddress();
     const address = addr ? addr.address : "";
-    const title = address ? addressTitle(address, state.wallets) : null;
+    $("receive-address-dot").innerHTML = address ? addressDotHtml(address) : "";
+    $("receive-address-full").textContent = address;
+    $("receive-address-full").dataset.full = address;
     const ensName = addr ? addr.ensName || null : null;
-    $("receive-address-block").innerHTML = address
-        ? formatAddressHtml(address, ensName, null, title)
-        : "";
-    $("receive-address-block").dataset.full = address;
+    const ensEl = $("receive-ens");
+    if (ensName) {
+        ensEl.innerHTML = addressDotHtml(address) + escapeHtml(ensName);
+        ensEl.classList.remove("hidden");
+    } else {
+        ensEl.classList.add("hidden");
+    }
     const link = address ? `https://etherscan.io/address/${address}` : "";
     $("receive-etherscan-link").innerHTML = link
         ? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
@@ -60,8 +65,8 @@ function show() {
 }
 
 function init(ctx) {
-    $("receive-address-block").addEventListener("click", () => {
-        const addr = $("receive-address-block").dataset.full;
+    $("receive-address-full").addEventListener("click", () => {
+        const addr = $("receive-address-full").dataset.full;
         if (addr) {
             navigator.clipboard.writeText(addr);
             showFlash("Copied!");
@@ -69,7 +74,7 @@ function init(ctx) {
     });
 
     $("btn-receive-copy").addEventListener("click", () => {
-        const addr = $("receive-address-block").dataset.full;
+        const addr = $("receive-address-full").dataset.full;
         if (addr) {
             navigator.clipboard.writeText(addr);
             showFlash("Copied!");