hd-wallet-ui 2.0.18 → 2.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-wallet-ui",
-  "version": "2.0.18",
+  "version": "2.0.20",
   "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.18",
+    "hd-wallet-wasm": "^2.0.20",
     "qrcode": "^1.5.3",
     "spacedatastandards.org": "^1.93.3",
     "vcard-cryptoperson": "^1.1.11"

package/src/app.js

@@ -526,50 +526,6 @@ 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';
@@ -821,60 +777,30 @@ function updateCustomPathDefault() {
   input.dataset.autogenerated = 'true';
 }
 
-function fitWalletSelectorToSelectedLabel(select) {
-  if (!select) return;
-  const selected = select.options[select.selectedIndex];
-  const label = selected?.textContent || '';
-  const width = Math.max(72, Math.min(260, (label.length * 8) + 46));
-  select.style.width = `${width}px`;
-}
-
 function renderWalletSelector() {
-  const selects = [$('account-wallet-select'), $('wallet-active-select')].filter(Boolean);
-  if (selects.length === 0) return;
+  const select = $('wallet-active-select');
+  if (!select) return;
   ensureWalletNamesNormalized();
 
   const currentWallet = getCurrentWallet();
   if (!currentWallet) {
-    selects.forEach((select) => { select.innerHTML = ''; });
+    select.innerHTML = '';
     return;
   }
   state.activeWalletId = currentWallet.id;
 
+  select.innerHTML = '';
   const displayCurrency = state.walletFiatCurrency || getSelectedCurrency();
   const activeWallets = getActiveWallets();
-  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.id === state.activeWalletId
-        ? wallet.name
-        : `${wallet.name} (${formatCurrencyValue(walletValue, displayCurrency)})`;
-      select.appendChild(option);
-    });
-    select.value = String(state.activeWalletId);
-    fitWalletSelectorToSelectedLabel(select);
+  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);
   updateCustomPathWalletLabel();
-  updateIdentityWalletKeys();
-}
-
-function updateWalletBondDisplay(currency = state.walletFiatCurrency || getSelectedCurrency()) {
-  const valueEl = $('wallet-bond-value');
-  const wallet = getCurrentWallet();
-  const walletValue = wallet ? state.walletFiatTotals?.[wallet.id] ?? 0 : 0;
-  if (valueEl) valueEl.textContent = formatCurrencyValue(walletValue, currency);
-}
-
-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) {
@@ -1295,7 +1221,6 @@ function hideWalletOverlays() {
 function showWalletMainView() {
   const main = $('wallet-main-view');
   hideWalletOverlays();
-  closeAssetActionOverlay();
   if (main) main.style.display = 'block';
 }
 
@@ -1598,49 +1523,6 @@ 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');
@@ -1689,7 +1571,7 @@ function renderAccountsList() {
       '</div>';
 
     row.addEventListener('click', () => {
-      showAssetActionOverlay(acct, idx);
+      showReceiveModal(acct);
     });
 
     listEl.appendChild(row);
@@ -2146,6 +2028,7 @@ async function updateWalletBondTotal() {
     const currency = getSelectedCurrency();
     const prices = await fetchCryptoPrices(currency);
 
+    let total = 0;
     const walletTotals = {};
     let hasPositiveBalance = false;
     let missingPriceForFundedAccount = false;
@@ -2162,20 +2045,27 @@ async function updateWalletBondTotal() {
       }
 
       const fiatValue = bal * price;
+      total += fiatValue;
       const walletId = getAccountWalletId(acct);
       walletTotals[walletId] = (walletTotals[walletId] || 0) + fiatValue;
     }
 
-    const pricedTotal = Object.values(walletTotals).reduce((sum, v) => sum + (Number.isFinite(v) ? v : 0), 0);
-    if (hasPositiveBalance && pricedTotal <= 0 && missingPriceForFundedAccount) {
+    if (hasPositiveBalance && total <= 0 && missingPriceForFundedAccount) {
       throw new Error('Funded accounts found but fiat pricing is unavailable');
     }
 
     state.walletFiatTotals = walletTotals;
     state.walletFiatCurrency = currency;
 
-    updateWalletBondDisplay(currency);
+    const formatted = formatCurrencyValue(total, currency);
+    if (valueEl) valueEl.textContent = formatted;
     renderWalletSelector();
+
+    // Also update the header bond total
+    const accountTotalEl = $('account-total-value');
+    if (accountTotalEl) {
+      accountTotalEl.textContent = 'Bond: ' + formatted;
+    }
   } catch (e) {
     console.warn('Bond total calculation failed:', e);
     // Keep last known totals if pricing endpoint is temporarily unavailable.
@@ -2183,7 +2073,10 @@ async function updateWalletBondTotal() {
     const cachedTotal = Object.values(cachedTotals).reduce((sum, v) => sum + (Number.isFinite(v) ? v : 0), 0);
     if (cachedTotal > 0) {
       const displayCurrency = state.walletFiatCurrency || getSelectedCurrency();
-      updateWalletBondDisplay(displayCurrency);
+      const formatted = formatCurrencyValue(cachedTotal, displayCurrency);
+      if (valueEl) valueEl.textContent = formatted;
+      const accountTotalEl = $('account-total-value');
+      if (accountTotalEl) accountTotalEl.textContent = 'Bond: ' + formatted;
     } else if (valueEl && !valueEl.textContent) {
       valueEl.textContent = '$0.00';
     }
@@ -2666,6 +2559,21 @@ 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)';
@@ -2909,9 +2817,43 @@ function downloadData(data, filename, mimeType) {
 // Wallet Address Population & Balance Fetching
 // =============================================================================
 
+// Account header — show xpub only
 function populateAccountAddressDropdown() {
-  renderWalletSelector();
-  updateIdentityWalletKeys();
+  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);
+      }
+    };
+  }
 }
 
 function populateWalletAddresses() {
@@ -3370,11 +3312,10 @@ function generateVCard(info, { skipPhoto = false } = {}) {
   }
 
   if (info.includeKeys && state.wallet?.x25519) {
-    const identity = getCurrentWalletIdentity();
     person.KEY = [
-      // Always include the selected wallet xPub.
-      ...(identity.xpub ? [{
-        XPUB: identity.xpub,
+      // Always include xPub
+      ...(state.hdRoot?.toXpub ? [{
+        XPUB: state.hdRoot.toXpub(),
         LABEL: '',
       }] : []),
       // X25519 encryption key
@@ -3383,7 +3324,8 @@ function generateVCard(info, { skipPhoto = false } = {}) {
         LABEL: 'X25519',
       },
       // Active accounts from wallet scan
-      ...getCurrentWalletSigningAccounts()
+      ...state.activeAccounts
+        .filter(a => a.active && isSigningAccount(a))
         .flatMap(a => {
           const entries = [];
           const pathLabel = a.path || `m/44'/${a.coinType}'/${a.account}'/0/${a.index}`;
@@ -3404,9 +3346,8 @@ function generateVCard(info, { skipPhoto = false } = {}) {
           return entries;
         }),
     ];
-  } else if (info.xpubOnly) {
-    const identity = getCurrentWalletIdentity();
-    if (identity.xpub) person.KEY = [{ XPUB: identity.xpub, LABEL: '' }];
+  } else if (info.xpubOnly && state.hdRoot?.toXpub) {
+    person.KEY = [{ XPUB: state.hdRoot.toXpub(), LABEL: '' }];
   }
 
   const note = info.includeKeys
@@ -3458,16 +3399,15 @@ function getSignableBody(vcardText) {
 }
 
 function signVCard(vcardText) {
-  const signatureKey = getCurrentWalletSignatureKey();
-  if (!signatureKey?.privateKey) return vcardText;
+  if (!state.wallet?.ed25519?.privateKey) return vcardText;
 
   const body = getSignableBody(vcardText);
   const messageBytes = new TextEncoder().encode(body);
-  const signature = hdWallet().curves.ed25519.sign(messageBytes, signatureKey.privateKey);
+  const signature = hdWallet().curves.ed25519.sign(messageBytes, state.wallet.ed25519.privateKey);
   const sigB64 = toBase64(signature);
 
-  // Encode signature + selected wallet derivation path.
-  const sigValue = `${sigB64}:501:${signatureKey.accountIndex}:${signatureKey.index}`;
+  // Encode signature + derivation path (coinType=501, account=0, index=0)
+  const sigValue = `${sigB64}:501:0:0`;
 
   // Find highest itemN and key index
   let maxItem = 0;
@@ -3836,8 +3776,8 @@ function isPasskeySupported() {
 
 // Track selected remember method (pin or passkey) for each login type
 const rememberMethod = {
-  password: 'pin',
-  seed: 'pin'
+  password: 'passkey',
+  seed: 'passkey'
 };
 
 function setupLoginHandlers() {
@@ -4283,7 +4223,7 @@ function setupMainAppHandlers() {
   // Modal close handlers
   $qa('.modal').forEach(modal => {
     modal.addEventListener('click', (e) => {
-      if (e.target === modal || e.target.closest?.('.modal-close')) {
+      if (e.target === modal || e.target.classList.contains('modal-close')) {
         modal.classList.remove('active');
       }
     });
@@ -4292,7 +4232,7 @@ function setupMainAppHandlers() {
   // Account modal tab switching
   $qa('.modal-tab[data-modal-tab]').forEach(tab => {
     tab.addEventListener('click', () => {
-      $qa('.modal-tab').forEach(t => t.classList.remove('active'));
+      $qa('.modal-tab[data-modal-tab]').forEach(t => t.classList.remove('active'));
       $qa('.modal-tab-content').forEach(c => c.classList.remove('active'));
       tab.classList.add('active');
       const target = $(tab.dataset.modalTab);
@@ -4710,12 +4650,10 @@ function setupMainAppHandlers() {
       if (targetEl) {
         try {
           let value = '';
-          if (targetId === 'wallet-xpub') {
+          if (targetId === 'wallet-xpub' || targetId === 'wallet-tab-xpub') {
             value = state.hdRoot?.toXpub?.() || '';
-          } else if (targetId === 'identity-wallet-xpub') {
-            value = getCurrentWalletIdentity().xpub || '';
-          } else if (targetId === 'identity-wallet-peerid') {
-            value = getCurrentWalletIdentity().peerId || '';
+          } else if (targetId === 'wallet-tab-peerid') {
+            value = deriveAccountPeerId() || '';
           } else if (targetId === 'wallet-xprv') {
             if (targetEl.dataset.revealed !== 'true') {
               alert('Reveal the xprv first to copy it.');
@@ -4808,45 +4746,74 @@ function setupMainAppHandlers() {
   });
 
   // Wallet tab controls
-  const handleWalletSelectChange = (e) => {
+  $('wallet-active-select')?.addEventListener('change', (e) => {
     const walletId = Number.parseInt(e.target.value, 10);
     if (Number.isNaN(walletId)) return;
     state.activeWalletId = walletId;
     closeWalletActionMenus();
-    closeAssetActionOverlay();
     renderWalletSelector();
-    updateWalletBondDisplay();
     renderAccountsList();
     updateCustomPathDefault();
-  };
-  $('account-wallet-select')?.addEventListener('change', handleWalletSelectChange);
-  $('wallet-active-select')?.addEventListener('change', handleWalletSelectChange);
-  $('wallet-manage-tab')?.addEventListener('click', () => {
-    closeWalletActionMenus();
-    closeAssetActionOverlay();
-    $qa('.modal-tab').forEach(t => t.classList.remove('active'));
-    $qa('.modal-tab-content').forEach(c => c.classList.remove('active'));
-    $('wallet-manage-tab')?.classList.add('active');
-    $('wallet-tab-content')?.classList.add('active');
-    showWalletsView();
   });
   $('wallet-manage-btn')?.addEventListener('click', () => {
     closeWalletActionMenus();
-    closeAssetActionOverlay();
     showWalletsView();
   });
   $('wallet-scan-btn')?.addEventListener('click', () => {
     scanActiveAccounts();
   });
-  $('wallet-asset-action-close')?.addEventListener('click', closeAssetActionOverlay);
+  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-export-btn-main')?.addEventListener('click', () => {
     closeWalletActionMenus();
-    closeAssetActionOverlay();
     showExportView();
   });
   $('wallet-advanced-btn-main')?.addEventListener('click', () => {
     closeWalletActionMenus();
-    closeAssetActionOverlay();
     showAdvancedView();
   });
   $('wallet-wallets-back')?.addEventListener('click', () => {
@@ -6024,27 +5991,14 @@ export async function createWalletUI(rootElement, options = {}) {
   return {
     /** Open the login modal */
     openLogin() {
-      if (state.loggedIn) {
-        const accountModal = document.getElementById('keys-modal');
-        if (accountModal) accountModal.classList.add('active');
-        return;
-      }
-      const loginModal = document.getElementById('login-modal');
-      if (loginModal) {
-        loginModal.classList.add('active');
-        const storedTab = loginModal.querySelector('[data-method="stored"]');
-        if (storedTab && storedTab.style.display !== 'none') storedTab.click();
-      }
+      const modal = document.getElementById('login-modal');
+      if (modal) modal.classList.add('active');
     },
     /** Open the account / keys modal (requires login first) */
     openAccount() {
       const modal = document.getElementById('keys-modal');
       if (modal) modal.classList.add('active');
     },
-    /** Clear the wallet session; host applications own any visible logout control */
-    logout() {
-      logout();
-    },
     /** Remove all injected wallet UI elements from the DOM */
     destroy() {
       const container = document.getElementById('hd-wallet-ui-container');