From 1c2e0fc9bb8a011b13e9492e9c250c2945f96b06 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Fri, 13 Feb 2026 07:45:44 -0700
Subject: [PATCH] Combine chain selector with legend, move spam warning to
 bottom

- Chain buttons now serve as both selector and color legend (dot + name)
- Removed redundant color-bar and logo circle, replaced with simple dot
- Moved spam warning below transfer tables, made it subtle
- Added "tx" suffix to transfer counts for clarity

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 wallet-multichain-visualization.html | 42 +++++++++-------------------
 1 file changed, 13 insertions(+), 29 deletions(-)

diff --git a/wallet-multichain-visualization.html b/wallet-multichain-visualization.html
index 87a6115..773ed41 100644
--- a/wallet-multichain-visualization.html
+++ b/wallet-multichain-visualization.html
@@ -45,16 +45,13 @@
         /* Chain Selector */
         .chain-selector { display: flex; justify-content: center; gap: 12px; margin-bottom: 30px; flex-wrap: wrap; }
         .chain-btn {
-            padding: 12px 24px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.1);
+            padding: 10px 18px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.1);
             background: rgba(255,255,255,0.03); cursor: pointer; transition: all 0.3s;
-            display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: #e0e0e0;
+            display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #e0e0e0;
         }
         .chain-btn:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }
         .chain-btn.active { border-color: var(--chain-color, #00d4ff); background: rgba(255,255,255,0.1); box-shadow: 0 0 20px rgba(var(--chain-rgb, 0,212,255), 0.3); }
-        .chain-btn .logo {
-            width: 28px; height: 28px; border-radius: 50%; display: flex;
-            align-items: center; justify-content: center; font-weight: bold; font-size: 0.8rem;
-        }
+        .chain-btn .chain-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
         .chain-btn .count { background: rgba(0,0,0,0.3); padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; color: #888; }
         .chain-btn.active .count { background: var(--chain-color, #00d4ff); color: #000; }
 
@@ -96,12 +93,7 @@
         .amount.negative { color: #f87171; }
         .token-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; background: #555; }
 
-        /* Legend */
-        .legend { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; font-size: 0.85rem; }
-        .legend-item { display: flex; align-items: center; gap: 6px; }
-        .legend-color { width: 14px; height: 14px; border-radius: 3px; }
-
-        .warning-box { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 12px; padding: 14px 20px; margin-bottom: 24px; font-size: 0.85rem; display: flex; align-items: center; gap: 12px; }
+        .warning-box { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 10px 16px; font-size: 0.85rem; display: flex; align-items: center; gap: 10px; }
 
         /* Loading */
         .loading { text-align: center; padding: 80px 20px; color: #888; }
@@ -171,9 +163,9 @@
             // Build chain buttons
             const chainButtons = [
                 `<button class="chain-btn active" data-chain="all" style="--chain-color:#00d4ff;--chain-rgb:0,212,255">
-                    <span class="logo" style="background:linear-gradient(135deg,#00d4ff,#8b5cf6)">&#8704;</span>
+                    <span class="chain-dot" style="background:linear-gradient(135deg,#00d4ff,#8b5cf6)"></span>
                     All Chains
-                    <span class="count">${chainStats.all?.transfers || 0}</span>
+                    <span class="count">${chainStats.all?.transfers || 0} tx</span>
                 </button>`
             ];
 
@@ -183,9 +175,9 @@
                 const rgb = hexToRgb(chain.color);
                 chainButtons.push(
                     `<button class="chain-btn" data-chain="${name}" style="--chain-color:${chain.color};--chain-rgb:${rgb}">
-                        <span class="logo" style="background:${chain.color}">${chain.name[0]}</span>
+                        <span class="chain-dot" style="background:${chain.color}"></span>
                         ${chain.name}
-                        <span class="count">${stats?.transfers || 0}</span>
+                        <span class="count">${stats?.transfers || 0} tx</span>
                     </button>`
                 );
             }
@@ -200,13 +192,6 @@
                     <div class="stat-card"><h4>Active Period</h4><div class="value neutral" id="stat-period">-</div></div>
                 </div>
 
-                <div class="warning-box">
-                    <span style="font-size:1.2rem;">&#9888;&#65039;</span>
-                    <span><strong>Spam filtered:</strong> This analysis uses Safe's trusted token list and excludes known spam tokens.</span>
-                </div>
-
-                <div class="legend" id="chain-legend"></div>
-
                 <div class="flow-section">
                     <h2>Transaction Flow Diagram</h2>
                     <div id="flow-chart"></div>
@@ -228,13 +213,12 @@
                         </div>
                     </div>
                 </div>
-            `;
 
-            // Build legend
-            const legend = document.getElementById('chain-legend');
-            legend.innerHTML = detectedChains.map(({ chain }) =>
-                `<div class="legend-item"><div class="legend-color" style="background:${chain.color}"></div> ${chain.name}</div>`
-            ).join('');
+                <div class="warning-box" style="opacity:0.5;">
+                    <span style="font-size:0.85rem;">&#9888;&#65039;</span>
+                    <span style="font-size:0.75rem; color:#888;">Spam filtered &mdash; uses Safe's trusted token list, excludes known spam tokens.</span>
+                </div>
+            `;
 
             // Bind chain selector
             content.querySelectorAll('.chain-btn').forEach(btn => {