From 166bb461497612a6da2c3fae03d78a4739a73591 Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Thu, 26 Feb 2026 03:29:09 +0700
Subject: [PATCH] Truncate addresses by 2 chars to compensate for color dot
 width

Move truncateMiddle to helpers.js for reuse. Shorten displayed addresses
by 2 characters wherever a dot is shown: home view (40 char max), tx list
(maxAddr - 2), and address detail container (40ch width).
---
 src/popup/index.html             |  2 +-
 src/popup/views/addressDetail.js | 10 ++--------
 src/popup/views/helpers.js       |  8 ++++++++
 src/popup/views/home.js          |  3 ++-
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index 4e423f1..934bdd2 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -207,7 +207,7 @@
                     <span id="address-dot"></span>
                     <span
                         id="address-full"
-                        style="width: 42ch; max-width: 100%"
+                        style="width: 40ch; max-width: 100%"
                     ></span>
                     <span
                         id="address-usd-total"
diff --git a/src/popup/views/addressDetail.js b/src/popup/views/addressDetail.js
index 7c88576..3910025 100644
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -4,6 +4,7 @@ const {
     showFlash,
     balanceLinesForAddress,
     addressDotHtml,
+    truncateMiddle,
 } = require("./helpers");
 const { state, currentAddress } = require("../../shared/state");
 const { formatUsd, getAddressValueUsd } = require("../../shared/prices");
@@ -74,13 +75,6 @@ function timeAgo(timestamp) {
     return years + " year" + (years !== 1 ? "s" : "") + " ago";
 }
 
-function truncateMiddle(str, maxLen) {
-    if (str.length <= maxLen) return str;
-    if (maxLen < 5) return str.slice(0, maxLen);
-    const half = Math.floor((maxLen - 1) / 2);
-    return str.slice(0, half) + "\u2026" + str.slice(-(maxLen - 1 - half));
-}
-
 function escapeHtml(s) {
     const div = document.createElement("div");
     div.textContent = s;
@@ -135,7 +129,7 @@ function renderTransactions(txs) {
         const ensName = ensNameMap.get(counterparty) || null;
         const dirLabel = tx.direction === "sent" ? "Sent" : "Received";
         const amountStr = escapeHtml(tx.value + " " + tx.symbol);
-        const maxAddr = Math.max(10, 38 - Math.max(0, amountStr.length - 10));
+        const maxAddr = Math.max(10, 36 - Math.max(0, amountStr.length - 10));
         const displayAddr = ensName || truncateMiddle(counterparty, maxAddr);
         const addrStr = escapeHtml(displayAddr);
         const dot = addressDotHtml(counterparty);
diff --git a/src/popup/views/helpers.js b/src/popup/views/helpers.js
index 687b5b8..a6db37c 100644
--- a/src/popup/views/helpers.js
+++ b/src/popup/views/helpers.js
@@ -99,6 +99,13 @@ function balanceLinesForAddress(addr) {
     return html;
 }
 
+function truncateMiddle(str, maxLen) {
+    if (str.length <= maxLen) return str;
+    if (maxLen < 5) return str.slice(0, maxLen);
+    const half = Math.floor((maxLen - 1) / 2);
+    return str.slice(0, half) + "\u2026" + str.slice(-(maxLen - 1 - half));
+}
+
 // 16 colors evenly spaced around the hue wheel (22.5° apart),
 // all at HSL saturation 70%, lightness 50% for uniform vibrancy.
 const ADDRESS_COLORS = [
@@ -139,4 +146,5 @@ module.exports = {
     balanceLinesForAddress,
     addressColor,
     addressDotHtml,
+    truncateMiddle,
 };
diff --git a/src/popup/views/home.js b/src/popup/views/home.js
index e36f69e..bea8fc3 100644
--- a/src/popup/views/home.js
+++ b/src/popup/views/home.js
@@ -4,6 +4,7 @@ const {
     showFlash,
     balanceLinesForAddress,
     addressDotHtml,
+    truncateMiddle,
 } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { deriveAddressFromXpub } = require("../../shared/wallet");
@@ -47,7 +48,7 @@ function render(ctx) {
             }
             const addrUsd = formatUsd(getAddressValueUsd(addr));
             html += `<div class="flex text-xs">`;
-            html += `<span class="flex items-center" style="width:42ch;max-width:100%">${addr.ensName ? "" : dot}${addr.address}</span>`;
+            html += `<span class="flex items-center" style="width:42ch;max-width:100%">${addr.ensName ? "" : dot}${truncateMiddle(addr.address, 40)}</span>`;
             html += `<span class="text-right text-muted flex-1">${addrUsd}</span>`;
             html += `</div>`;
             html += balanceLinesForAddress(addr);