hd-wallet-ui 2.0.18 → 2.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +2 -2
  2. package/src/app.js +145 -191
  3. package/src/template.js +57 -44
  4. package/src/trust-ui.js +4 -6
  5. package/styles/main.css +83 -201
  6. package/styles/widget.css +83 -201
package/src/template.js CHANGED
@@ -3,25 +3,67 @@ export function getModalHTML() {
3
3
  <!-- Keys Modal -->
4
4
  <div id="keys-modal" class="modal">
5
5
  <div class="modal-glass modal-wide">
6
- <div class="modal-header account-modal-header"><div class="account-header-info"><div class="account-wallet-row"><select id="account-wallet-select" class="glass-input compact account-wallet-select" aria-label="Select wallet"></select></div><div class="account-wallet-summary"><div class="account-wallet-balance-line"><div class="ph-portfolio-value" id="wallet-bond-value">$0.00</div><div class="ph-portfolio-label">Bond</div></div></div></div><button class="modal-close account-modal-close" type="button" aria-label="Close"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>
6
+ <div class="modal-header"><div class="account-header-info"><div class="account-header-top"><h3>Account</h3><h3 class="account-total-value" id="account-total-value"></h3></div><div class="account-address-row"><span class="account-address-label">xpub</span><code class="account-address-display" id="account-address-display"></code><button class="account-address-copy" id="account-address-copy" title="Copy xpub"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button></div><div class="account-address-row" id="account-peerid-row" style="display:none"><span class="account-address-label">PeerID</span><code class="account-address-display" id="account-peerid-display"></code><button class="account-address-copy" id="account-peerid-copy" title="Copy PeerID"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button></div></div><button class="modal-close">&times;</button></div>
7
7
  <div class="modal-tabs">
8
8
  <button class="modal-tab active" data-modal-tab="vcard-tab-content">Identity</button>
9
9
  <button class="modal-tab" data-modal-tab="trust-tab-content">Trust Map</button>
10
10
  <button class="modal-tab" data-modal-tab="messaging-tab-content">Messaging</button>
11
11
  <button class="modal-tab" data-modal-tab="wallet-tab-content">Wallet</button>
12
- <button class="modal-tab" id="wallet-manage-tab" type="button">Manage</button>
13
12
  </div>
14
13
  <div class="modal-body">
15
14
  <!-- Wallet Tab -->
16
15
  <div id="wallet-tab-content" class="modal-tab-content">
17
16
  <!-- Main Wallet View -->
18
17
  <div id="wallet-main-view">
18
+ <!-- Portfolio Value (Phantom-style hero) -->
19
+ <div class="ph-portfolio">
20
+ <div class="ph-portfolio-value" id="wallet-bond-value">$0.00</div>
21
+ <div class="ph-portfolio-label">Total Balance</div>
22
+ <div class="ph-portfolio-xpub">
23
+ <code id="wallet-tab-xpub" class="ph-xpub-text truncate"></code>
24
+ <button class="ph-xpub-copy copy-key-btn" data-copy="wallet-tab-xpub" title="Copy xPub"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
25
+ </div>
26
+ <div class="ph-portfolio-xpub" id="ph-portfolio-peerid-row" style="display:none">
27
+ <code id="wallet-tab-peerid" class="ph-xpub-text truncate"></code>
28
+ <button class="ph-xpub-copy copy-key-btn" data-copy="wallet-tab-peerid" title="Copy PeerID"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
29
+ </div>
30
+ </div>
31
+
32
+ <div class="wallet-selector-row">
33
+ <div class="wallet-selector-control">
34
+ <select id="wallet-active-select" class="glass-input compact wallet-selector-input"></select>
35
+ <button id="wallet-manage-btn" class="glass-btn small">Manage</button>
36
+ </div>
37
+ </div>
38
+
19
39
  <!-- Action Buttons Row -->
20
40
  <div class="ph-actions">
21
41
  <button class="ph-action-btn" id="wallet-scan-btn">
22
42
  <div class="ph-action-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></div>
23
43
  <span>Scan</span>
24
44
  </button>
45
+ <div class="ph-action-wrap" id="wallet-send-action">
46
+ <button class="ph-action-btn" id="wallet-send-btn">
47
+ <div class="ph-action-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg></div>
48
+ <span>Send</span>
49
+ </button>
50
+ <div class="ph-action-menu" id="wallet-send-menu">
51
+ <button class="ph-action-menu-item" type="button" data-chain="BTC">Bitcoin (BTC)</button>
52
+ <button class="ph-action-menu-item" type="button" data-chain="ETH">Ethereum (ETH)</button>
53
+ <button class="ph-action-menu-item" type="button" data-chain="SOL">Solana (SOL)</button>
54
+ </div>
55
+ </div>
56
+ <div class="ph-action-wrap" id="wallet-receive-action">
57
+ <button class="ph-action-btn" id="wallet-receive-btn-main">
58
+ <div class="ph-action-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></div>
59
+ <span>Receive</span>
60
+ </button>
61
+ <div class="ph-action-menu" id="wallet-receive-menu">
62
+ <button class="ph-action-menu-item" type="button" data-chain="BTC">Bitcoin (BTC)</button>
63
+ <button class="ph-action-menu-item" type="button" data-chain="ETH">Ethereum (ETH)</button>
64
+ <button class="ph-action-menu-item" type="button" data-chain="SOL">Solana (SOL)</button>
65
+ </div>
66
+ </div>
25
67
  <button class="ph-action-btn" id="wallet-export-btn-main">
26
68
  <div class="ph-action-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></div>
27
69
  <span>Export</span>
@@ -47,22 +89,6 @@ export function getModalHTML() {
47
89
  <p class="ph-token-empty-sub">Log in and tap Scan to discover your accounts</p>
48
90
  </div>
49
91
  </div>
50
- <div id="wallet-asset-action-overlay" class="wallet-asset-action-overlay" style="display:none;">
51
- <div class="wallet-asset-action-card">
52
- <div class="wallet-asset-action-header">
53
- <div>
54
- <h4 id="wallet-asset-action-title"></h4>
55
- <div id="wallet-asset-action-path" class="wallet-asset-action-path"></div>
56
- </div>
57
- <button id="wallet-asset-action-close" class="modal-close" type="button" aria-label="Close"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
58
- </div>
59
- <code id="wallet-asset-action-address" class="wallet-asset-action-address"></code>
60
- <div class="wallet-asset-action-buttons">
61
- <button id="wallet-asset-send" class="glass-btn primary">Send</button>
62
- <button id="wallet-asset-receive" class="glass-btn">Receive</button>
63
- </div>
64
- </div>
65
- </div>
66
92
  </div>
67
93
 
68
94
  <!-- Wallets View (replaces main view) -->
@@ -191,7 +217,7 @@ export function getModalHTML() {
191
217
  <video id="vcard-camera-video" autoplay playsinline style="display:none;width:100%;height:100%;object-fit:contain;"></video>
192
218
  <div id="vcard-photo-actions" class="photo-actions">
193
219
  <label class="glass-btn small" for="vcard-photo-input">Upload</label>
194
- <button id="vcard-camera-btn" class="glass-btn small" style="display:none;">Use Camera</button>
220
+ <button id="vcard-camera-btn" class="glass-btn small" style="display:none;">Take Photo</button>
195
221
  <button id="vcard-camera-capture" class="glass-btn small primary" style="display:none;">Capture</button>
196
222
  <button id="vcard-camera-cancel" class="glass-btn small" style="display:none;">Cancel</button>
197
223
  <button id="vcard-photo-remove" class="glass-btn small" style="display:none;">Remove</button>
@@ -215,19 +241,6 @@ export function getModalHTML() {
215
241
  </div>
216
242
  </div>
217
243
 
218
- <div class="identity-wallet-keys">
219
- <div class="identity-wallet-key-row">
220
- <span class="identity-wallet-key-label">XPUB</span>
221
- <code id="identity-wallet-xpub" class="identity-wallet-key-value truncate"></code>
222
- <button class="identity-wallet-copy copy-key-btn" data-copy="identity-wallet-xpub" title="Copy XPUB"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
223
- </div>
224
- <div class="identity-wallet-key-row">
225
- <span class="identity-wallet-key-label">PeerID</span>
226
- <code id="identity-wallet-peerid" class="identity-wallet-key-value truncate"></code>
227
- <button class="identity-wallet-copy copy-key-btn" data-copy="identity-wallet-peerid" title="Copy PeerID"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
228
- </div>
229
- </div>
230
-
231
244
  <div class="vcard-actions-footer">
232
245
  <div class="vcard-split-btn-group">
233
246
  <button id="generate-vcard" class="glass-btn vcard-split-btn vcard-split-export">Export vCard</button>
@@ -543,9 +556,9 @@ export function getModalHTML() {
543
556
  <!-- Login Modal -->
544
557
  <div id="login-modal" class="modal">
545
558
  <div class="modal-glass login-modal-content">
546
- <div class="modal-header"><h3>Login</h3><button class="modal-close" type="button" aria-label="Close"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>
559
+ <div class="modal-header"><h3>Login</h3><button class="modal-close">&times;</button></div>
547
560
  <div id="wallet-info-box" class="wallet-info-box">
548
- <div id="wallet-info-expanded" class="wallet-info-expanded"><div class="wallet-info-content"><strong>Decentralized Wallet</strong> — Your credentials never leave your browser.</div><button class="wallet-info-close" id="wallet-info-dismiss" title="Dismiss" aria-label="Dismiss"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>
561
+ <div id="wallet-info-expanded" class="wallet-info-expanded"><div class="wallet-info-content"><strong>Decentralized Wallet</strong> — Your credentials never leave your browser.</div><button class="wallet-info-close" id="wallet-info-dismiss" title="Dismiss">&times;</button></div>
549
562
  <div id="wallet-info-collapsed" class="wallet-info-collapsed" style="display:none"><span>Decentralized Wallet</span><div class="wallet-info-icon-wrap"><svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="0.75"/><text x="8" y="8" text-anchor="middle" dominant-baseline="central" font-size="11" fill="currentColor">i</text></svg></div></div>
550
563
  </div>
551
564
  <div class="modal-body">
@@ -562,11 +575,11 @@ export function getModalHTML() {
562
575
  <span class="entropy-label"><span id="entropy-bits">0</span> bits entropy</span>
563
576
  </div>
564
577
  <div class="remember-wallet-group">
565
- <label class="glass-checkbox"><input type="checkbox" id="remember-wallet-password" checked><span class="checkmark"></span><span>Remember wallet</span></label>
566
- <div class="remember-options" id="remember-options-password">
567
- <div class="remember-method-selector"><button type="button" class="remember-method-btn active" data-method="pin" data-target="password">PIN</button><button type="button" class="remember-method-btn" data-method="passkey" data-target="password" id="passkey-btn-password">Passkey</button></div>
568
- <div class="pin-input-group" id="pin-group-password"><input type="password" id="pin-input-password" class="glass-input pin-input" placeholder="6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*"></div>
569
- <div class="passkey-info" id="passkey-info-password" style="display: none;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 0 1 5 5v3H7V7a5 5 0 0 1 5-5z"/><rect x="3" y="10" width="18" height="12" rx="2"/><circle cx="12" cy="16" r="1"/></svg><span>Use Face ID, Touch ID, or device PIN</span></div>
578
+ <label class="glass-checkbox"><input type="checkbox" id="remember-wallet-password"><span class="checkmark"></span><span>Remember wallet</span></label>
579
+ <div class="remember-options" id="remember-options-password" style="display: none;">
580
+ <div class="remember-method-selector"><button type="button" class="remember-method-btn" data-method="pin" data-target="password">PIN</button><button type="button" class="remember-method-btn active" data-method="passkey" data-target="password" id="passkey-btn-password">Passkey</button></div>
581
+ <div class="pin-input-group" id="pin-group-password" style="display: none;"><input type="password" id="pin-input-password" class="glass-input pin-input" placeholder="6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*"></div>
582
+ <div class="passkey-info" id="passkey-info-password"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 0 1 5 5v3H7V7a5 5 0 0 1 5-5z"/><rect x="3" y="10" width="18" height="12" rx="2"/><circle cx="12" cy="16" r="1"/></svg><span>Use Face ID, Touch ID, or device PIN</span></div>
570
583
  </div>
571
584
  </div>
572
585
  <button id="derive-from-password" class="glass-btn primary full-width" disabled type="button">Login</button>
@@ -574,11 +587,11 @@ export function getModalHTML() {
574
587
  <div id="seed-method" class="method-content">
575
588
  <div class="glass-input-group"><textarea id="seed-phrase" class="glass-input glass-textarea" rows="3" placeholder="Enter 12 or 24 word seed phrase..."></textarea><div class="seed-actions"><button id="generate-seed" class="glass-btn small">Generate</button><button id="validate-seed" class="glass-btn small">Validate</button></div></div>
576
589
  <div class="remember-wallet-group">
577
- <label class="glass-checkbox"><input type="checkbox" id="remember-wallet-seed" checked><span class="checkmark"></span><span>Remember wallet</span></label>
578
- <div class="remember-options" id="remember-options-seed">
579
- <div class="remember-method-selector"><button type="button" class="remember-method-btn active" data-method="pin" data-target="seed">PIN</button><button type="button" class="remember-method-btn" data-method="passkey" data-target="seed" id="passkey-btn-seed">Passkey</button></div>
580
- <div class="pin-input-group" id="pin-group-seed"><input type="password" id="pin-input-seed" class="glass-input pin-input" placeholder="6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*"></div>
581
- <div class="passkey-info" id="passkey-info-seed" style="display: none;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 0 1 5 5v3H7V7a5 5 0 0 1 5-5z"/><rect x="3" y="10" width="18" height="12" rx="2"/><circle cx="12" cy="16" r="1"/></svg><span>Use Face ID, Touch ID, or device PIN</span></div>
590
+ <label class="glass-checkbox"><input type="checkbox" id="remember-wallet-seed"><span class="checkmark"></span><span>Remember wallet</span></label>
591
+ <div class="remember-options" id="remember-options-seed" style="display: none;">
592
+ <div class="remember-method-selector"><button type="button" class="remember-method-btn" data-method="pin" data-target="seed">PIN</button><button type="button" class="remember-method-btn active" data-method="passkey" data-target="seed" id="passkey-btn-seed">Passkey</button></div>
593
+ <div class="pin-input-group" id="pin-group-seed" style="display: none;"><input type="password" id="pin-input-seed" class="glass-input pin-input" placeholder="6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*"></div>
594
+ <div class="passkey-info" id="passkey-info-seed"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 0 1 5 5v3H7V7a5 5 0 0 1 5-5z"/><rect x="3" y="10" width="18" height="12" rx="2"/><circle cx="12" cy="16" r="1"/></svg><span>Use Face ID, Touch ID, or device PIN</span></div>
582
595
  </div>
583
596
  </div>
584
597
  <button id="derive-from-seed" class="glass-btn primary full-width" disabled>Login</button>
package/src/trust-ui.js CHANGED
@@ -19,8 +19,6 @@ import {
19
19
  // Helpers
20
20
  // =============================================================================
21
21
 
22
- const CLOSE_ICON = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
23
-
24
22
  export function truncatePubkey(pubkey, prefixLen = 12, suffixLen = 8) {
25
23
  if (!pubkey) return '';
26
24
  if (pubkey.length <= prefixLen + suffixLen + 3) return pubkey;
@@ -259,7 +257,7 @@ export function showEstablishTrustModal(onConfirm) {
259
257
  <div class="modal-glass">
260
258
  <div class="modal-header">
261
259
  <h3>Establish Trust</h3>
262
- <button class="modal-close" type="button" aria-label="Close">${CLOSE_ICON}</button>
260
+ <button class="modal-close">&times;</button>
263
261
  </div>
264
262
  <div class="modal-body">
265
263
 
@@ -476,7 +474,7 @@ export function showRevokeTrustModal(originalTxHash, onConfirm) {
476
474
  <div class="modal-glass">
477
475
  <div class="modal-header">
478
476
  <h3>Revoke Trust</h3>
479
- <button class="modal-close" type="button" aria-label="Close">${CLOSE_ICON}</button>
477
+ <button class="modal-close">&times;</button>
480
478
  </div>
481
479
  <div class="modal-body">
482
480
  <div class="trust-warning">
@@ -566,7 +564,7 @@ function buildRuleRow(rule, index) {
566
564
  <select class="glass-select rule-severity">${severityOptions}</select>
567
565
  </div>
568
566
  <div class="rule-field rule-field-actions">
569
- <button class="glass-btn glass-btn-sm rule-delete-btn" data-index="${index}" title="Delete rule" aria-label="Delete rule"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
567
+ <button class="glass-btn glass-btn-sm rule-delete-btn" data-index="${index}" title="Delete rule">&times;</button>
570
568
  </div>
571
569
  </div>
572
570
  </div>
@@ -592,7 +590,7 @@ export function showRulesModal(rules, onSave) {
592
590
  <div class="modal-glass">
593
591
  <div class="modal-header">
594
592
  <h3>Trust Rules</h3>
595
- <button class="modal-close" type="button" aria-label="Close">${CLOSE_ICON}</button>
593
+ <button class="modal-close">&times;</button>
596
594
  </div>
597
595
  <div class="modal-body">
598
596
  <div class="rules-list">
package/styles/main.css CHANGED
@@ -653,42 +653,42 @@ body:has(.modal.active) .nav-bar {
653
653
  display: block;
654
654
  }
655
655
 
656
- /* Modal Tabs */
656
+ /* Modal Tabs (Account modal - Keys / vCard) - Bootstrap-style nav tabs */
657
657
  .modal-tabs {
658
658
  display: flex;
659
- gap: 6px;
659
+ gap: 0;
660
660
  margin: 0;
661
- padding: 8px 24px;
661
+ padding: 0 24px;
662
662
  background: transparent;
663
- border-bottom: 1px solid var(--white-10, rgba(255,255,255,0.1));
663
+ border-bottom: 2px solid var(--white-10, rgba(255,255,255,0.1));
664
664
  }
665
665
 
666
666
  .modal-tab {
667
- padding: 8px 14px;
667
+ padding: 10px 16px;
668
668
  background: transparent;
669
- border: 1px solid transparent;
670
- border-radius: 8px;
669
+ border: none;
670
+ border-bottom: 2px solid transparent;
671
+ margin-bottom: -2px;
671
672
  color: var(--white-60);
672
673
  font-family: var(--font-sans);
673
674
  font-size: 13px;
674
675
  font-weight: 500;
675
676
  line-height: 1;
676
677
  cursor: pointer;
677
- transition: color 0.2s, border-color 0.2s, background 0.2s;
678
+ transition: color 0.2s, border-color 0.2s;
678
679
  text-align: center;
679
680
  white-space: nowrap;
680
681
  }
681
682
 
682
683
  .modal-tab:hover {
683
684
  color: var(--white, #fff);
684
- background: var(--white-05);
685
- border-color: var(--white-10);
685
+ border-bottom-color: var(--white-30, rgba(255,255,255,0.3));
686
686
  }
687
687
 
688
688
  .modal-tab.active {
689
689
  color: var(--white, #fff);
690
- border-color: var(--white-20);
691
- background: var(--white-10);
690
+ border-bottom-color: var(--accent, #00dc82);
691
+ background: transparent;
692
692
  }
693
693
 
694
694
  .modal-tab-content {
@@ -977,10 +977,9 @@ body:has(.modal.active) .nav-bar {
977
977
 
978
978
  .wallet-info-expanded {
979
979
  display: flex;
980
- align-items: center;
980
+ align-items: flex-start;
981
981
  gap: 8px;
982
- min-height: 30px;
983
- padding: 6px 24px;
982
+ padding: 12px 24px;
984
983
  background: rgba(59, 130, 246, 0.1);
985
984
  font-size: 13px;
986
985
  line-height: 1.5;
@@ -996,17 +995,12 @@ body:has(.modal.active) .nav-bar {
996
995
  }
997
996
 
998
997
  .wallet-info-close {
999
- display: inline-flex;
1000
- align-items: center;
1001
- justify-content: center;
1002
998
  background: none;
1003
999
  border: none;
1004
1000
  color: rgba(255, 255, 255, 0.5);
1005
1001
  font-size: 18px;
1006
1002
  cursor: pointer;
1007
- padding: 0;
1008
- width: 22px;
1009
- height: 22px;
1003
+ padding: 0 2px;
1010
1004
  line-height: 1;
1011
1005
  flex-shrink: 0;
1012
1006
  }
@@ -1191,78 +1185,95 @@ body:has(.modal.active) .nav-bar {
1191
1185
  user-drag: none;
1192
1186
  }
1193
1187
 
1188
+ .modal-header h3 {
1189
+ font-size: 18px;
1190
+ font-weight: 600;
1191
+ }
1192
+
1194
1193
  .account-header-info {
1195
1194
  display: flex;
1196
1195
  flex-direction: column;
1197
- align-items: flex-start;
1198
- justify-content: center;
1199
- gap: 8px;
1196
+ gap: 2px;
1200
1197
  flex: 1 1 auto;
1201
1198
  min-width: 0;
1202
1199
  }
1203
1200
 
1204
- .account-modal-header {
1205
- position: relative;
1206
- align-items: center;
1207
- min-height: 118px;
1208
- padding-right: 56px;
1201
+ .account-header-top {
1202
+ display: flex;
1203
+ align-items: baseline;
1204
+ gap: 12px;
1205
+ }
1206
+
1207
+ .account-total-value {
1208
+ font-weight: 500;
1209
+ color: #4ade80;
1210
+ letter-spacing: 0.02em;
1211
+ opacity: 0.9;
1209
1212
  }
1210
1213
 
1211
- .account-wallet-row {
1214
+ .account-address-row {
1212
1215
  display: flex;
1213
1216
  align-items: center;
1214
- justify-content: flex-start;
1215
- gap: 8px;
1216
- width: auto;
1217
+ gap: 10px;
1218
+ margin-top: 4px;
1219
+ width: 100%;
1217
1220
  min-width: 0;
1218
1221
  }
1219
1222
 
1220
- .account-wallet-select.glass-input.compact {
1223
+ .account-address-label {
1221
1224
  flex: 0 0 auto;
1222
- min-width: 0;
1223
- width: auto;
1224
- max-width: min(260px, calc(100vw - 112px));
1225
- height: 32px;
1226
- font-size: 13px;
1227
- padding: 4px 34px 4px 10px;
1225
+ }
1226
+
1227
+ .account-address-select {
1228
+ min-width: 90px;
1229
+ max-width: 130px;
1230
+ font-size: 12px;
1231
+ padding: 4px 28px 4px 10px;
1232
+ height: 28px;
1233
+ background-position: right 6px center;
1228
1234
  color: var(--white-90);
1229
- appearance: none;
1230
- -webkit-appearance: none;
1231
- -moz-appearance: none;
1232
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4 4.5-4' stroke='rgba(255,255,255,0.9)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
1233
- background-repeat: no-repeat;
1234
- background-position: right 11px center;
1235
+ user-select: none;
1236
+ -webkit-user-select: none;
1235
1237
  }
1236
1238
 
1237
- .account-wallet-summary {
1238
- text-align: left;
1239
+ .account-address-display {
1240
+ box-sizing: border-box;
1241
+ font-family: var(--font-mono, 'SF Mono', monospace);
1242
+ font-size: 11px;
1243
+ color: var(--white-90);
1244
+ background: var(--white-05);
1245
+ border: 1px solid var(--glass-border);
1246
+ border-radius: 6px;
1247
+ padding: 2px 6px;
1248
+ letter-spacing: 0.04em;
1249
+ white-space: nowrap;
1250
+ overflow: hidden;
1251
+ text-overflow: ellipsis;
1252
+ flex: 1 1 auto;
1253
+ min-width: 12ch;
1254
+ width: 100%;
1239
1255
  }
1240
1256
 
1241
- .account-wallet-balance-line {
1257
+ .account-address-copy {
1258
+ background: none;
1259
+ border: none;
1260
+ color: var(--white-30);
1261
+ cursor: pointer;
1262
+ height: 24px;
1263
+ padding: 2px;
1264
+ width: 24px;
1265
+ flex-shrink: 0;
1242
1266
  display: flex;
1243
1267
  align-items: center;
1244
- gap: 16px;
1245
- }
1246
-
1247
- .account-wallet-summary .ph-portfolio-value {
1248
- color: #4ade80;
1249
- font-size: 25px;
1268
+ justify-content: center;
1250
1269
  }
1251
-
1252
- .account-wallet-summary .ph-portfolio-label {
1253
- font-size: 18px;
1254
- color: var(--white-80);
1255
- margin-top: 0;
1270
+ .account-address-copy:hover {
1271
+ color: var(--white-70);
1256
1272
  }
1257
1273
 
1258
1274
  @media (max-width: 600px) {
1259
- .account-wallet-row {
1260
- gap: 8px;
1261
- }
1262
-
1263
- .account-wallet-select.glass-input.compact {
1264
- min-width: 0;
1265
- max-width: calc(100vw - 96px);
1275
+ .account-address-display {
1276
+ min-width: 10ch;
1266
1277
  }
1267
1278
  }
1268
1279
 
@@ -1279,23 +1290,17 @@ body:has(.modal.active) .nav-bar {
1279
1290
  display: flex;
1280
1291
  align-items: center;
1281
1292
  justify-content: center;
1282
- background: transparent;
1293
+ background: var(--white-10);
1283
1294
  border: none;
1295
+ border-radius: 50%;
1284
1296
  color: var(--white);
1297
+ font-size: 20px;
1285
1298
  cursor: pointer;
1286
- padding: 0;
1287
- transition: color 0.2s, opacity 0.2s;
1299
+ transition: background 0.2s;
1288
1300
  }
1289
1301
 
1290
1302
  .modal-close:hover {
1291
- color: var(--white-80);
1292
- opacity: 0.9;
1293
- }
1294
-
1295
- .account-modal-close {
1296
- position: absolute;
1297
- top: 12px;
1298
- right: 14px;
1303
+ background: var(--white-20);
1299
1304
  }
1300
1305
 
1301
1306
  .modal-body {
@@ -1937,10 +1942,6 @@ body:has(.modal.active) .nav-bar {
1937
1942
  ============================================================================= */
1938
1943
 
1939
1944
  /* Portfolio Hero */
1940
- #wallet-main-view {
1941
- position: relative;
1942
- }
1943
-
1944
1945
  .ph-portfolio {
1945
1946
  text-align: center;
1946
1947
  padding: 24px 0 20px;
@@ -2207,68 +2208,6 @@ body:has(.modal.active) .nav-bar {
2207
2208
  opacity: 0.45;
2208
2209
  }
2209
2210
 
2210
- .wallet-asset-action-overlay {
2211
- position: absolute;
2212
- inset: 0;
2213
- z-index: 40;
2214
- display: none;
2215
- align-items: flex-end;
2216
- justify-content: center;
2217
- padding: 16px;
2218
- background: rgba(0, 0, 0, 0.42);
2219
- }
2220
-
2221
- .wallet-asset-action-card {
2222
- width: min(100%, 420px);
2223
- border: 1px solid var(--glass-border);
2224
- border-radius: 12px;
2225
- background: rgba(28, 28, 31, 0.98);
2226
- box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
2227
- padding: 16px;
2228
- }
2229
-
2230
- .wallet-asset-action-header {
2231
- display: flex;
2232
- align-items: flex-start;
2233
- justify-content: space-between;
2234
- gap: 12px;
2235
- margin-bottom: 12px;
2236
- }
2237
-
2238
- .wallet-asset-action-header h4 {
2239
- margin: 0 0 4px;
2240
- font-size: 16px;
2241
- line-height: 1.2;
2242
- }
2243
-
2244
- .wallet-asset-action-path {
2245
- font-size: 11px;
2246
- color: var(--muted);
2247
- font-family: var(--font-mono);
2248
- }
2249
-
2250
- .wallet-asset-action-address {
2251
- display: block;
2252
- box-sizing: border-box;
2253
- width: 100%;
2254
- padding: 8px 10px;
2255
- border: 1px solid var(--glass-border);
2256
- border-radius: 8px;
2257
- background: var(--white-05);
2258
- color: var(--white-90);
2259
- font-size: 12px;
2260
- overflow: hidden;
2261
- text-overflow: ellipsis;
2262
- white-space: nowrap;
2263
- }
2264
-
2265
- .wallet-asset-action-buttons {
2266
- display: grid;
2267
- grid-template-columns: 1fr 1fr;
2268
- gap: 10px;
2269
- margin-top: 14px;
2270
- }
2271
-
2272
2211
  .ph-token-icon {
2273
2212
  width: 40px;
2274
2213
  height: 40px;
@@ -5289,63 +5228,6 @@ body:has(.modal.active) .nav-bar {
5289
5228
  display: none;
5290
5229
  }
5291
5230
 
5292
- .identity-wallet-keys {
5293
- display: flex;
5294
- flex-direction: column;
5295
- gap: 8px;
5296
- margin: 14px 0 4px;
5297
- }
5298
-
5299
- .identity-wallet-key-row {
5300
- display: grid;
5301
- grid-template-columns: 62px minmax(0, 1fr) 28px;
5302
- align-items: center;
5303
- gap: 8px;
5304
- min-width: 0;
5305
- }
5306
-
5307
- .identity-wallet-key-label {
5308
- color: var(--muted);
5309
- font-family: var(--font-mono);
5310
- font-size: 11px;
5311
- text-transform: uppercase;
5312
- }
5313
-
5314
- .identity-wallet-key-value {
5315
- box-sizing: border-box;
5316
- min-width: 0;
5317
- width: 100%;
5318
- padding: 5px 8px;
5319
- border: 1px solid var(--glass-border);
5320
- border-radius: 7px;
5321
- background: var(--white-05);
5322
- color: var(--white-90);
5323
- font-family: var(--font-mono);
5324
- font-size: 12px;
5325
- line-height: 1.3;
5326
- overflow: hidden;
5327
- text-overflow: ellipsis;
5328
- white-space: nowrap;
5329
- }
5330
-
5331
- .identity-wallet-copy {
5332
- width: 28px;
5333
- height: 28px;
5334
- padding: 0;
5335
- border: 1px solid var(--glass-border);
5336
- border-radius: 7px;
5337
- background: var(--white-05);
5338
- color: var(--white-50);
5339
- display: inline-flex;
5340
- align-items: center;
5341
- justify-content: center;
5342
- }
5343
-
5344
- .identity-wallet-copy:hover {
5345
- color: var(--white);
5346
- background: var(--white-10);
5347
- }
5348
-
5349
5231
  /* Identity edit button (pencil icon in card) */
5350
5232
  .identity-edit-btn {
5351
5233
  position: absolute;