hd-wallet-ui 2.0.7 → 2.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-wallet-ui",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "description": "HD Wallet modal UI — login, keys, identity, trust map, and security bond. Attach to any button in your app.",
   "type": "module",
   "main": "src/app.js",
@@ -40,7 +40,7 @@
     "buffer": "^6.0.3",
     "flatbuffers": "^25.9.23",
     "flatc-wasm": "^26.1.32",
-    "hd-wallet-wasm": "^2.0.7",
+    "hd-wallet-wasm": "^2.0.10",
     "qrcode": "^1.5.3",
     "spacedatastandards.org": "^1.93.3",
     "vcard-cryptoperson": "^1.1.11"

package/src/app.js

@@ -526,6 +526,50 @@ function deriveAccountPeerId() {
   }
 }
 
+function getWalletIdentityPath(wallet = getCurrentWallet()) {
+  if (!wallet) return "m/44'/0'/0'";
+  return `m/44'/0'/${wallet.accountIndex}'`;
+}
+
+function getCurrentWalletIdentity(wallet = getCurrentWallet()) {
+  if (!state.hdRoot || !wallet) return { xpub: '', peerId: '', path: getWalletIdentityPath(wallet) };
+  const path = getWalletIdentityPath(wallet);
+  try {
+    const accountKey = deriveHDKey(path);
+    return {
+      xpub: accountKey?.toXpub?.() || '',
+      peerId: accountKey?.peerIdString?.() || '',
+      path,
+    };
+  } catch (e) {
+    console.warn('Failed to derive wallet identity keys:', e);
+    return { xpub: '', peerId: '', path };
+  }
+}
+
+function getCurrentWalletSigningAccounts(wallet = getCurrentWallet()) {
+  if (!wallet) return [];
+  return state.activeAccounts.filter(a => a.active && getAccountWalletId(a) === wallet.id && isSigningAccountForWallet(a, wallet));
+}
+
+function getCurrentWalletSignatureKey(wallet = getCurrentWallet()) {
+  if (!state.hdRoot || !wallet) return null;
+  const accountIndex = wallet.accountIndex;
+  try {
+    const path = buildSigningPath(501, accountIndex, 0);
+    const derived = deriveHDKey(path);
+    return {
+      privateKey: derived.privateKey(),
+      accountIndex,
+      index: 0,
+      path,
+    };
+  } catch (e) {
+    console.warn('Failed to derive selected wallet signature key:', e);
+    return null;
+  }
+}
+
 function updatePathDisplay() {
   const coin = $('hd-coin')?.value;
   const account = $('hd-account')?.value || '0';
@@ -778,29 +822,41 @@ function updateCustomPathDefault() {
 }
 
 function renderWalletSelector() {
-  const select = $('wallet-active-select');
-  if (!select) return;
+  const selects = [$('account-wallet-select'), $('wallet-active-select')].filter(Boolean);
+  if (selects.length === 0) return;
   ensureWalletNamesNormalized();
 
   const currentWallet = getCurrentWallet();
   if (!currentWallet) {
-    select.innerHTML = '';
+    selects.forEach((select) => { select.innerHTML = ''; });
     return;
   }
   state.activeWalletId = currentWallet.id;
 
-  select.innerHTML = '';
   const displayCurrency = state.walletFiatCurrency || getSelectedCurrency();
   const activeWallets = getActiveWallets();
-  activeWallets.forEach((wallet) => {
-    const option = document.createElement('option');
-    option.value = String(wallet.id);
-    const walletValue = state.walletFiatTotals[wallet.id] ?? 0;
-    option.textContent = `${wallet.name} (${formatCurrencyValue(walletValue, displayCurrency)})`;
-    select.appendChild(option);
+  selects.forEach((select) => {
+    select.innerHTML = '';
+    activeWallets.forEach((wallet) => {
+      const option = document.createElement('option');
+      option.value = String(wallet.id);
+      const walletValue = state.walletFiatTotals[wallet.id] ?? 0;
+      option.textContent = `${wallet.name} (${formatCurrencyValue(walletValue, displayCurrency)})`;
+      select.appendChild(option);
+    });
+    select.value = String(state.activeWalletId);
   });
-  select.value = String(state.activeWalletId);
   updateCustomPathWalletLabel();
+  updateIdentityWalletKeys();
+}
+
+function updateIdentityWalletKeys() {
+  const identity = getCurrentWalletIdentity();
+  const xpubEl = $('identity-wallet-xpub');
+  const peerIdEl = $('identity-wallet-peerid');
+
+  if (xpubEl) setTruncatedValue(xpubEl, identity.xpub || 'N/A');
+  if (peerIdEl) setTruncatedValue(peerIdEl, identity.peerId || 'N/A');
 }
 
 function sleep(ms) {
@@ -1221,6 +1277,7 @@ function hideWalletOverlays() {
 function showWalletMainView() {
   const main = $('wallet-main-view');
   hideWalletOverlays();
+  closeAssetActionOverlay();
   if (main) main.style.display = 'block';
 }
 
@@ -1523,6 +1580,49 @@ function closeWalletActionMenus() {
   $('wallet-receive-menu')?.classList.remove('visible');
 }
 
+function closeAssetActionOverlay() {
+  const overlay = $('wallet-asset-action-overlay');
+  if (overlay) overlay.style.display = 'none';
+  state.selectedWalletAssetIdx = null;
+}
+
+function showAssetActionOverlay(acct, idx) {
+  const overlay = $('wallet-asset-action-overlay');
+  if (!overlay || !acct) return;
+
+  state.selectedWalletAssetIdx = idx;
+  const icon = CHAIN_ICONS[acct.name] || { symbol: '?' };
+  const fullName = CHAIN_FULL_NAMES[acct.name] || acct.name;
+  const pathLabel = acct.path || `m/44'/${acct.coinType}'/${acct.account}'/0/${acct.index}`;
+
+  const titleEl = $('wallet-asset-action-title');
+  const pathEl = $('wallet-asset-action-path');
+  const addressEl = $('wallet-asset-action-address');
+  if (titleEl) titleEl.textContent = `${icon.symbol} ${fullName}`;
+  if (pathEl) pathEl.textContent = pathLabel;
+  if (addressEl) {
+    addressEl.textContent = acct.address || '';
+    addressEl.title = acct.address || '';
+  }
+
+  const sendBtn = $('wallet-asset-send');
+  const receiveBtn = $('wallet-asset-receive');
+  if (sendBtn) {
+    sendBtn.onclick = () => {
+      closeAssetActionOverlay();
+      showSendView(idx);
+    };
+  }
+  if (receiveBtn) {
+    receiveBtn.onclick = () => {
+      closeAssetActionOverlay();
+      showReceiveModal(acct);
+    };
+  }
+
+  overlay.style.display = 'flex';
+}
+
 function renderAccountsList() {
   const listEl = $('wallet-accounts-list');
   const emptyEl = $('wallet-accounts-empty');
@@ -1571,7 +1671,7 @@ function renderAccountsList() {
       '</div>';
 
     row.addEventListener('click', () => {
-      showReceiveModal(acct);
+      showAssetActionOverlay(acct, idx);
     });
 
     listEl.appendChild(row);
@@ -2559,21 +2659,6 @@ function login(keys) {
     if (xpubEl) {
       setTruncatedValue(xpubEl, state.hdRoot.toXpub() || 'N/A');
     }
-    // Populate wallet tab xpub display
-    const walletTabXpubEl = $('wallet-tab-xpub');
-    if (walletTabXpubEl) {
-      setTruncatedValue(walletTabXpubEl, state.hdRoot.toXpub() || 'N/A');
-    }
-    // Populate wallet tab PeerID display
-    const walletTabPeerIdEl = $('wallet-tab-peerid');
-    const peerIdRow = $('ph-portfolio-peerid-row');
-    if (walletTabPeerIdEl && peerIdRow) {
-      const peerIdStr = deriveAccountPeerId();
-      if (peerIdStr) {
-        setTruncatedValue(walletTabPeerIdEl, peerIdStr);
-        peerIdRow.style.display = '';
-      }
-    }
     populateAccountAddressDropdown();
     if (xprvEl) {
       xprvEl.textContent = 'Hidden (click reveal)';
@@ -2817,43 +2902,9 @@ function downloadData(data, filename, mimeType) {
 // Wallet Address Population & Balance Fetching
 // =============================================================================
 
-// Account header — show xpub only
 function populateAccountAddressDropdown() {
-  const addrEl = $('account-address-display');
-  if (!addrEl) return;
-
-  const xpubStr = state.hdRoot ? state.hdRoot.toXpub() : '';
-  addrEl.textContent = `${xpubStr.slice(0,10)}...${xpubStr.slice(-10)}`;
-  addrEl.title = xpubStr;
-
-  const copyBtn = $('account-address-copy');
-  if (copyBtn) {
-    copyBtn.onclick = async () => {
-      if (xpubStr && await safeCopyText(xpubStr)) {
-        copyBtn.title = 'Copied!';
-        setTimeout(() => { copyBtn.title = 'Copy xpub'; }, 1500);
-      }
-    };
-  }
-
-  // Populate PeerID row (derived from account-level secp256k1 key)
-  const peerIdStr = deriveAccountPeerId();
-  const peerIdRow = $('account-peerid-row');
-  const peerIdEl = $('account-peerid-display');
-  if (peerIdStr && peerIdRow && peerIdEl) {
-    peerIdRow.style.display = '';
-    peerIdEl.textContent = `${peerIdStr.slice(0,8)}...${peerIdStr.slice(-8)}`;
-    peerIdEl.title = peerIdStr;
-  }
-  const peerCopyBtn = $('account-peerid-copy');
-  if (peerCopyBtn) {
-    peerCopyBtn.onclick = async () => {
-      if (peerIdStr && await safeCopyText(peerIdStr)) {
-        peerCopyBtn.title = 'Copied!';
-        setTimeout(() => { peerCopyBtn.title = 'Copy PeerID'; }, 1500);
-      }
-    };
-  }
+  renderWalletSelector();
+  updateIdentityWalletKeys();
 }
 
 function populateWalletAddresses() {
@@ -3312,10 +3363,11 @@ function generateVCard(info, { skipPhoto = false } = {}) {
   }
 
   if (info.includeKeys && state.wallet?.x25519) {
+    const identity = getCurrentWalletIdentity();
     person.KEY = [
-      // Always include xPub
-      ...(state.hdRoot?.toXpub ? [{
-        XPUB: state.hdRoot.toXpub(),
+      // Always include the selected wallet xPub.
+      ...(identity.xpub ? [{
+        XPUB: identity.xpub,
         LABEL: '',
       }] : []),
       // X25519 encryption key
@@ -3324,8 +3376,7 @@ function generateVCard(info, { skipPhoto = false } = {}) {
         LABEL: 'X25519',
       },
       // Active accounts from wallet scan
-      ...state.activeAccounts
-        .filter(a => a.active && isSigningAccount(a))
+      ...getCurrentWalletSigningAccounts()
         .flatMap(a => {
           const entries = [];
           const pathLabel = a.path || `m/44'/${a.coinType}'/${a.account}'/0/${a.index}`;
@@ -3346,8 +3397,9 @@ function generateVCard(info, { skipPhoto = false } = {}) {
           return entries;
         }),
     ];
-  } else if (info.xpubOnly && state.hdRoot?.toXpub) {
-    person.KEY = [{ XPUB: state.hdRoot.toXpub(), LABEL: '' }];
+  } else if (info.xpubOnly) {
+    const identity = getCurrentWalletIdentity();
+    if (identity.xpub) person.KEY = [{ XPUB: identity.xpub, LABEL: '' }];
   }
 
   const note = info.includeKeys
@@ -3399,15 +3451,16 @@ function getSignableBody(vcardText) {
 }
 
 function signVCard(vcardText) {
-  if (!state.wallet?.ed25519?.privateKey) return vcardText;
+  const signatureKey = getCurrentWalletSignatureKey();
+  if (!signatureKey?.privateKey) return vcardText;
 
   const body = getSignableBody(vcardText);
   const messageBytes = new TextEncoder().encode(body);
-  const signature = hdWallet().curves.ed25519.sign(messageBytes, state.wallet.ed25519.privateKey);
+  const signature = hdWallet().curves.ed25519.sign(messageBytes, signatureKey.privateKey);
   const sigB64 = toBase64(signature);
 
-  // Encode signature + derivation path (coinType=501, account=0, index=0)
-  const sigValue = `${sigB64}:501:0:0`;
+  // Encode signature + selected wallet derivation path.
+  const sigValue = `${sigB64}:501:${signatureKey.accountIndex}:${signatureKey.index}`;
 
   // Find highest itemN and key index
   let maxItem = 0;
@@ -4650,10 +4703,12 @@ function setupMainAppHandlers() {
       if (targetEl) {
         try {
           let value = '';
-          if (targetId === 'wallet-xpub' || targetId === 'wallet-tab-xpub') {
+          if (targetId === 'wallet-xpub') {
             value = state.hdRoot?.toXpub?.() || '';
-          } else if (targetId === 'wallet-tab-peerid') {
-            value = deriveAccountPeerId() || '';
+          } else if (targetId === 'identity-wallet-xpub') {
+            value = getCurrentWalletIdentity().xpub || '';
+          } else if (targetId === 'identity-wallet-peerid') {
+            value = getCurrentWalletIdentity().peerId || '';
           } else if (targetId === 'wallet-xprv') {
             if (targetEl.dataset.revealed !== 'true') {
               alert('Reveal the xprv first to copy it.');
@@ -4746,74 +4801,42 @@ function setupMainAppHandlers() {
   });
 
   // Wallet tab controls
-  $('wallet-active-select')?.addEventListener('change', (e) => {
+  const handleWalletSelectChange = (e) => {
     const walletId = Number.parseInt(e.target.value, 10);
     if (Number.isNaN(walletId)) return;
     state.activeWalletId = walletId;
     closeWalletActionMenus();
+    closeAssetActionOverlay();
     renderWalletSelector();
     renderAccountsList();
     updateCustomPathDefault();
+  };
+  $('account-wallet-select')?.addEventListener('change', handleWalletSelectChange);
+  $('wallet-active-select')?.addEventListener('change', handleWalletSelectChange);
+  $('account-wallet-manage-btn')?.addEventListener('click', () => {
+    closeWalletActionMenus();
+    closeAssetActionOverlay();
+    const walletTab = _root.querySelector?.('.modal-tab[data-modal-tab="wallet-tab-content"]');
+    if (walletTab) walletTab.click();
+    showWalletsView();
   });
   $('wallet-manage-btn')?.addEventListener('click', () => {
     closeWalletActionMenus();
+    closeAssetActionOverlay();
     showWalletsView();
   });
   $('wallet-scan-btn')?.addEventListener('click', () => {
     scanActiveAccounts();
   });
-  const sendAction = $('wallet-send-action');
-  const receiveAction = $('wallet-receive-action');
-  $('wallet-send-btn')?.addEventListener('click', (e) => {
-    e.stopPropagation();
-    updateWalletActionMenus();
-    const sendMenu = $('wallet-send-menu');
-    const receiveMenu = $('wallet-receive-menu');
-    if (!sendMenu || !receiveMenu) return;
-    const nextVisible = !sendMenu.classList.contains('visible');
-    receiveMenu.classList.remove('visible');
-    sendMenu.classList.toggle('visible', nextVisible);
-  });
-  $('wallet-receive-btn-main')?.addEventListener('click', (e) => {
-    e.stopPropagation();
-    updateWalletActionMenus();
-    const sendMenu = $('wallet-send-menu');
-    const receiveMenu = $('wallet-receive-menu');
-    if (!sendMenu || !receiveMenu) return;
-    const nextVisible = !receiveMenu.classList.contains('visible');
-    sendMenu.classList.remove('visible');
-    receiveMenu.classList.toggle('visible', nextVisible);
-  });
-  $qa('#wallet-send-menu .ph-action-menu-item').forEach((btn) => {
-    btn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      const chain = btn.dataset.chain;
-      const acct = getWalletAccountForChain(chain);
-      closeWalletActionMenus();
-      if (!acct) return;
-      showSendView(state.activeAccounts.indexOf(acct));
-    });
-  });
-  $qa('#wallet-receive-menu .ph-action-menu-item').forEach((btn) => {
-    btn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      const chain = btn.dataset.chain;
-      const acct = getWalletAccountForChain(chain);
-      closeWalletActionMenus();
-      if (!acct) return;
-      showReceiveModal(acct);
-    });
-  });
-  _root.addEventListener('click', (e) => {
-    if (sendAction?.contains(e.target) || receiveAction?.contains(e.target)) return;
-    closeWalletActionMenus();
-  });
+  $('wallet-asset-action-close')?.addEventListener('click', closeAssetActionOverlay);
   $('wallet-export-btn-main')?.addEventListener('click', () => {
     closeWalletActionMenus();
+    closeAssetActionOverlay();
     showExportView();
   });
   $('wallet-advanced-btn-main')?.addEventListener('click', () => {
     closeWalletActionMenus();
+    closeAssetActionOverlay();
     showAdvancedView();
   });
   $('wallet-wallets-back')?.addEventListener('click', () => {

package/src/template.js

@@ -3,7 +3,7 @@ export function getModalHTML() {
   <!-- Keys Modal -->
   <div id="keys-modal" class="modal">
   <div class="modal-glass modal-wide">
-      <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>
+      <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-wallet-row"><select id="account-wallet-select" class="glass-input compact account-wallet-select" aria-label="Select wallet"></select><button id="account-wallet-manage-btn" class="glass-btn small">Manage</button></div></div><button class="modal-close">&times;</button></div>
       <div class="modal-tabs">
         <button class="modal-tab active" data-modal-tab="vcard-tab-content">Identity</button>
         <button class="modal-tab" data-modal-tab="trust-tab-content">Trust Map</button>
@@ -19,21 +19,6 @@ export function getModalHTML() {
             <div class="ph-portfolio">
               <div class="ph-portfolio-value" id="wallet-bond-value">$0.00</div>
               <div class="ph-portfolio-label">Total Balance</div>
-              <div class="ph-portfolio-xpub">
-                <code id="wallet-tab-xpub" class="ph-xpub-text truncate"></code>
-                <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>
-              </div>
-              <div class="ph-portfolio-xpub" id="ph-portfolio-peerid-row" style="display:none">
-                <code id="wallet-tab-peerid" class="ph-xpub-text truncate"></code>
-                <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>
-              </div>
-            </div>
-
-            <div class="wallet-selector-row">
-              <div class="wallet-selector-control">
-                <select id="wallet-active-select" class="glass-input compact wallet-selector-input"></select>
-                <button id="wallet-manage-btn" class="glass-btn small">Manage</button>
-              </div>
             </div>
 
             <!-- Action Buttons Row -->
@@ -42,28 +27,6 @@ export function getModalHTML() {
                 <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>
                 <span>Scan</span>
               </button>
-              <div class="ph-action-wrap" id="wallet-send-action">
-                <button class="ph-action-btn" id="wallet-send-btn">
-                  <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>
-                  <span>Send</span>
-                </button>
-                <div class="ph-action-menu" id="wallet-send-menu">
-                  <button class="ph-action-menu-item" type="button" data-chain="BTC">Bitcoin (BTC)</button>
-                  <button class="ph-action-menu-item" type="button" data-chain="ETH">Ethereum (ETH)</button>
-                  <button class="ph-action-menu-item" type="button" data-chain="SOL">Solana (SOL)</button>
-                </div>
-              </div>
-              <div class="ph-action-wrap" id="wallet-receive-action">
-                <button class="ph-action-btn" id="wallet-receive-btn-main">
-                  <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>
-                  <span>Receive</span>
-                </button>
-                <div class="ph-action-menu" id="wallet-receive-menu">
-                  <button class="ph-action-menu-item" type="button" data-chain="BTC">Bitcoin (BTC)</button>
-                  <button class="ph-action-menu-item" type="button" data-chain="ETH">Ethereum (ETH)</button>
-                  <button class="ph-action-menu-item" type="button" data-chain="SOL">Solana (SOL)</button>
-                </div>
-              </div>
               <button class="ph-action-btn" id="wallet-export-btn-main">
                 <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>
                 <span>Export</span>
@@ -89,6 +52,22 @@ export function getModalHTML() {
                 <p class="ph-token-empty-sub">Log in and tap Scan to discover your accounts</p>
               </div>
             </div>
+            <div id="wallet-asset-action-overlay" class="wallet-asset-action-overlay" style="display:none;">
+              <div class="wallet-asset-action-card">
+                <div class="wallet-asset-action-header">
+                  <div>
+                    <h4 id="wallet-asset-action-title"></h4>
+                    <div id="wallet-asset-action-path" class="wallet-asset-action-path"></div>
+                  </div>
+                  <button id="wallet-asset-action-close" class="modal-close" type="button">&times;</button>
+                </div>
+                <code id="wallet-asset-action-address" class="wallet-asset-action-address"></code>
+                <div class="wallet-asset-action-buttons">
+                  <button id="wallet-asset-send" class="glass-btn primary">Send</button>
+                  <button id="wallet-asset-receive" class="glass-btn">Receive</button>
+                </div>
+              </div>
+            </div>
           </div>
 
           <!-- Wallets View (replaces main view) -->
@@ -241,6 +220,19 @@ export function getModalHTML() {
               </div>
             </div>
 
+            <div class="identity-wallet-keys">
+              <div class="identity-wallet-key-row">
+                <span class="identity-wallet-key-label">XPUB</span>
+                <code id="identity-wallet-xpub" class="identity-wallet-key-value truncate"></code>
+                <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>
+              </div>
+              <div class="identity-wallet-key-row">
+                <span class="identity-wallet-key-label">PeerID</span>
+                <code id="identity-wallet-peerid" class="identity-wallet-key-value truncate"></code>
+                <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>
+              </div>
+            </div>
+
             <div class="vcard-actions-footer">
               <div class="vcard-split-btn-group">
                 <button id="generate-vcard" class="glass-btn vcard-split-btn vcard-split-export">Export vCard</button>

package/styles/main.css

@@ -653,42 +653,42 @@ body:has(.modal.active) .nav-bar {
   display: block;
 }
 
-/* Modal Tabs (Account modal - Keys / vCard) - Bootstrap-style nav tabs */
+/* Modal Tabs */
 .modal-tabs {
   display: flex;
-  gap: 0;
+  gap: 6px;
   margin: 0;
-  padding: 0 24px;
+  padding: 8px 24px;
   background: transparent;
-  border-bottom: 2px solid var(--white-10, rgba(255,255,255,0.1));
+  border-bottom: 1px solid var(--white-10, rgba(255,255,255,0.1));
 }
 
 .modal-tab {
-  padding: 10px 16px;
+  padding: 8px 14px;
   background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -2px;
+  border: 1px solid transparent;
+  border-radius: 8px;
   color: var(--white-60);
   font-family: var(--font-sans);
   font-size: 13px;
   font-weight: 500;
   line-height: 1;
   cursor: pointer;
-  transition: color 0.2s, border-color 0.2s;
+  transition: color 0.2s, border-color 0.2s, background 0.2s;
   text-align: center;
   white-space: nowrap;
 }
 
 .modal-tab:hover {
   color: var(--white, #fff);
-  border-bottom-color: var(--white-30, rgba(255,255,255,0.3));
+  background: var(--white-05);
+  border-color: var(--white-10);
 }
 
 .modal-tab.active {
   color: var(--white, #fff);
-  border-bottom-color: var(--accent, #00dc82);
-  background: transparent;
+  border-color: var(--white-20);
+  background: var(--white-10);
 }
 
 .modal-tab-content {
@@ -1194,6 +1194,8 @@ body:has(.modal.active) .nav-bar {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 .account-header-top {
@@ -1209,63 +1211,42 @@ body:has(.modal.active) .nav-bar {
   opacity: 0.9;
 }
 
-.account-address-row {
+.account-wallet-row {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 4px;
+  width: 100%;
   min-width: 0;
 }
 
-.account-address-label {
-  flex: 0 0 auto;
-}
-
-.account-address-select {
-  min-width: 90px;
-  max-width: 130px;
-  font-size: 12px;
-  padding: 4px 28px 4px 10px;
-  height: 28px;
-  background-position: right 6px center;
-  color: var(--white-90);
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.account-address-display {
-  font-family: var(--font-mono, 'SF Mono', monospace);
-  font-size: 11px;
-  color: var(--white-50);
-  letter-spacing: 0.04em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.account-wallet-select.glass-input.compact {
   flex: 1 1 auto;
-  min-width: 12ch;
+  min-width: 180px;
   width: 100%;
+  height: 32px;
+  font-size: 13px;
+  padding: 4px 34px 4px 10px;
+  color: var(--white-90);
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  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");
+  background-repeat: no-repeat;
+  background-position: right 11px center;
 }
 
-.account-address-copy {
-  background: none;
-  border: none;
-  color: var(--white-30);
-  cursor: pointer;
-  height: 24px;
-  padding: 2px;
-  width: 24px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.account-address-copy:hover {
-  color: var(--white-70);
+#account-wallet-manage-btn {
+  flex: 0 0 auto;
 }
 
 @media (max-width: 600px) {
-  .account-address-display {
-    min-width: 10ch;
+  .account-wallet-row {
+    gap: 8px;
+  }
+
+  .account-wallet-select.glass-input.compact {
+    min-width: 0;
   }
 }
 
@@ -1934,6 +1915,10 @@ body:has(.modal.active) .nav-bar {
    ============================================================================= */
 
 /* Portfolio Hero */
+#wallet-main-view {
+  position: relative;
+}
+
 .ph-portfolio {
   text-align: center;
   padding: 24px 0 20px;
@@ -1960,12 +1945,21 @@ body:has(.modal.active) .nav-bar {
   justify-content: center;
   gap: 6px;
   margin-top: 10px;
+  width: 100%;
+  max-width: 100%;
 }
 
 .ph-xpub-text {
+  box-sizing: border-box;
   font-size: 11px;
-  color: var(--white-40);
-  max-width: 200px;
+  color: var(--white-90);
+  background: var(--white-05);
+  border: 1px solid var(--glass-border);
+  border-radius: 6px;
+  padding: 2px 6px;
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2191,6 +2185,68 @@ body:has(.modal.active) .nav-bar {
   opacity: 0.45;
 }
 
+.wallet-asset-action-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  display: none;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.42);
+}
+
+.wallet-asset-action-card {
+  width: min(100%, 420px);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  background: rgba(28, 28, 31, 0.98);
+  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
+  padding: 16px;
+}
+
+.wallet-asset-action-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.wallet-asset-action-header h4 {
+  margin: 0 0 4px;
+  font-size: 16px;
+  line-height: 1.2;
+}
+
+.wallet-asset-action-path {
+  font-size: 11px;
+  color: var(--muted);
+  font-family: var(--font-mono);
+}
+
+.wallet-asset-action-address {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--glass-border);
+  border-radius: 8px;
+  background: var(--white-05);
+  color: var(--white-90);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wallet-asset-action-buttons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-top: 14px;
+}
+
 .ph-token-icon {
   width: 40px;
   height: 40px;
@@ -5211,6 +5267,63 @@ body:has(.modal.active) .nav-bar {
   display: none;
 }
 
+.identity-wallet-keys {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 14px 0 4px;
+}
+
+.identity-wallet-key-row {
+  display: grid;
+  grid-template-columns: 62px minmax(0, 1fr) 28px;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.identity-wallet-key-label {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.identity-wallet-key-value {
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
+  padding: 5px 8px;
+  border: 1px solid var(--glass-border);
+  border-radius: 7px;
+  background: var(--white-05);
+  color: var(--white-90);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.identity-wallet-copy {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--glass-border);
+  border-radius: 7px;
+  background: var(--white-05);
+  color: var(--white-50);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.identity-wallet-copy:hover {
+  color: var(--white);
+  background: var(--white-10);
+}
+
 /* Identity edit button (pencil icon in card) */
 .identity-edit-btn {
   position: absolute;

package/styles/widget.css

@@ -656,42 +656,42 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   display: block;
 }
 
-/* Modal Tabs (Account modal - Keys / vCard) - Bootstrap-style nav tabs */
+/* Modal Tabs */
 #hd-wallet-ui-container .modal-tabs {
   display: flex;
-  gap: 0;
+  gap: 6px;
   margin: 0;
-  padding: 0 24px;
+  padding: 8px 24px;
   background: transparent;
-  border-bottom: 2px solid var(--white-10, rgba(255,255,255,0.1));
+  border-bottom: 1px solid var(--white-10, rgba(255,255,255,0.1));
 }
 
 #hd-wallet-ui-container .modal-tab {
-  padding: 10px 16px;
+  padding: 8px 14px;
   background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -2px;
+  border: 1px solid transparent;
+  border-radius: 8px;
   color: var(--white-60);
   font-family: var(--font-sans);
   font-size: 13px;
   font-weight: 500;
   line-height: 1;
   cursor: pointer;
-  transition: color 0.2s, border-color 0.2s;
+  transition: color 0.2s, border-color 0.2s, background 0.2s;
   text-align: center;
   white-space: nowrap;
 }
 
 #hd-wallet-ui-container .modal-tab:hover {
   color: var(--white, #fff);
-  border-bottom-color: var(--white-30, rgba(255,255,255,0.3));
+  background: var(--white-05);
+  border-color: var(--white-10);
 }
 
 #hd-wallet-ui-container .modal-tab.active {
   color: var(--white, #fff);
-  border-bottom-color: var(--accent, #00dc82);
-  background: transparent;
+  border-color: var(--white-20);
+  background: var(--white-10);
 }
 
 #hd-wallet-ui-container .modal-tab-content {
@@ -1196,6 +1196,8 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   display: flex;
   flex-direction: column;
   gap: 2px;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 #hd-wallet-ui-container .account-header-top {
@@ -1211,63 +1213,42 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   opacity: 0.9;
 }
 
-#hd-wallet-ui-container .account-address-row {
+#hd-wallet-ui-container .account-wallet-row {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 4px;
+  width: 100%;
   min-width: 0;
 }
 
-#hd-wallet-ui-container .account-address-label {
-  flex: 0 0 auto;
-}
-
-#hd-wallet-ui-container .account-address-select {
-  min-width: 90px;
-  max-width: 130px;
-  font-size: 12px;
-  padding: 4px 28px 4px 10px;
-  height: 28px;
-  background-position: right 6px center;
-  color: var(--white-90);
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-#hd-wallet-ui-container .account-address-display {
-  font-family: var(--font-mono, 'SF Mono', monospace);
-  font-size: 11px;
-  color: var(--white-50);
-  letter-spacing: 0.04em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+#hd-wallet-ui-container .account-wallet-select.glass-input.compact {
   flex: 1 1 auto;
-  min-width: 12ch;
+  min-width: 180px;
   width: 100%;
+  height: 32px;
+  font-size: 13px;
+  padding: 4px 34px 4px 10px;
+  color: var(--white-90);
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  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");
+  background-repeat: no-repeat;
+  background-position: right 11px center;
 }
 
-#hd-wallet-ui-container .account-address-copy {
-  background: none;
-  border: none;
-  color: var(--white-30);
-  cursor: pointer;
-  height: 24px;
-  padding: 2px;
-  width: 24px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-#hd-wallet-ui-container .account-address-copy:hover {
-  color: var(--white-70);
+#hd-wallet-ui-container #account-wallet-manage-btn {
+  flex: 0 0 auto;
 }
 
 @media (max-width: 600px) {
-  #hd-wallet-ui-container .account-address-display {
-    min-width: 10ch;
+  #hd-wallet-ui-container .account-wallet-row {
+    gap: 8px;
+  }
+
+  #hd-wallet-ui-container .account-wallet-select.glass-input.compact {
+    min-width: 0;
   }
 }
 
@@ -1932,6 +1913,10 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
    ============================================================================= */
 
 /* Portfolio Hero */
+#hd-wallet-ui-container #wallet-main-view {
+  position: relative;
+}
+
 #hd-wallet-ui-container .ph-portfolio {
   text-align: center;
   padding: 24px 0 20px;
@@ -1958,12 +1943,21 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   justify-content: center;
   gap: 6px;
   margin-top: 10px;
+  width: 100%;
+  max-width: 100%;
 }
 
 #hd-wallet-ui-container .ph-xpub-text {
+  box-sizing: border-box;
   font-size: 11px;
-  color: var(--white-40);
-  max-width: 200px;
+  color: var(--white-90);
+  background: var(--white-05);
+  border: 1px solid var(--glass-border);
+  border-radius: 6px;
+  padding: 2px 6px;
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2189,6 +2183,68 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   opacity: 0.45;
 }
 
+#hd-wallet-ui-container .wallet-asset-action-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  display: none;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.42);
+}
+
+#hd-wallet-ui-container .wallet-asset-action-card {
+  width: min(100%, 420px);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  background: rgba(28, 28, 31, 0.98);
+  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
+  padding: 16px;
+}
+
+#hd-wallet-ui-container .wallet-asset-action-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+#hd-wallet-ui-container .wallet-asset-action-header h4 {
+  margin: 0 0 4px;
+  font-size: 16px;
+  line-height: 1.2;
+}
+
+#hd-wallet-ui-container .wallet-asset-action-path {
+  font-size: 11px;
+  color: var(--muted);
+  font-family: var(--font-mono);
+}
+
+#hd-wallet-ui-container .wallet-asset-action-address {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--glass-border);
+  border-radius: 8px;
+  background: var(--white-05);
+  color: var(--white-90);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#hd-wallet-ui-container .wallet-asset-action-buttons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-top: 14px;
+}
+
 #hd-wallet-ui-container .ph-token-icon {
   width: 40px;
   height: 40px;
@@ -5203,6 +5259,63 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   display: none;
 }
 
+#hd-wallet-ui-container .identity-wallet-keys {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 14px 0 4px;
+}
+
+#hd-wallet-ui-container .identity-wallet-key-row {
+  display: grid;
+  grid-template-columns: 62px minmax(0, 1fr) 28px;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+#hd-wallet-ui-container .identity-wallet-key-label {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+#hd-wallet-ui-container .identity-wallet-key-value {
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
+  padding: 5px 8px;
+  border: 1px solid var(--glass-border);
+  border-radius: 7px;
+  background: var(--white-05);
+  color: var(--white-90);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#hd-wallet-ui-container .identity-wallet-copy {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--glass-border);
+  border-radius: 7px;
+  background: var(--white-05);
+  color: var(--white-50);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#hd-wallet-ui-container .identity-wallet-copy:hover {
+  color: var(--white);
+  background: var(--white-10);
+}
+
 /* Identity edit button (pencil icon in card) */
 #hd-wallet-ui-container .identity-edit-btn {
   position: absolute;