jeffemmett
/
rwallet-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Jeff Emmett 2026-02-13 07:45:44 -07:00
parent 9dc2b01896
commit 1c2e0fc9bb
1 changed files with 13 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
wallet-multichain-visualization.html
View File

@ -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 => {