hd-wallet-ui 2.0.10 → 2.0.12

package/package.json

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

package/src/app.js

@@ -841,7 +841,9 @@ function renderWalletSelector() {
       const option = document.createElement('option');
       option.value = String(wallet.id);
       const walletValue = state.walletFiatTotals[wallet.id] ?? 0;
-      option.textContent = `${wallet.name} (${formatCurrencyValue(walletValue, displayCurrency)})`;
+      option.textContent = wallet.id === state.activeWalletId
+        ? wallet.name
+        : `${wallet.name} (${formatCurrencyValue(walletValue, displayCurrency)})`;
       select.appendChild(option);
     });
     select.value = String(state.activeWalletId);
@@ -850,6 +852,13 @@ function renderWalletSelector() {
   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');
@@ -2128,7 +2137,6 @@ async function updateWalletBondTotal() {
     const currency = getSelectedCurrency();
     const prices = await fetchCryptoPrices(currency);
 
-    let total = 0;
     const walletTotals = {};
     let hasPositiveBalance = false;
     let missingPriceForFundedAccount = false;
@@ -2145,27 +2153,20 @@ async function updateWalletBondTotal() {
       }
 
       const fiatValue = bal * price;
-      total += fiatValue;
       const walletId = getAccountWalletId(acct);
       walletTotals[walletId] = (walletTotals[walletId] || 0) + fiatValue;
     }
 
-    if (hasPositiveBalance && total <= 0 && missingPriceForFundedAccount) {
+    const pricedTotal = Object.values(walletTotals).reduce((sum, v) => sum + (Number.isFinite(v) ? v : 0), 0);
+    if (hasPositiveBalance && pricedTotal <= 0 && missingPriceForFundedAccount) {
       throw new Error('Funded accounts found but fiat pricing is unavailable');
     }
 
     state.walletFiatTotals = walletTotals;
     state.walletFiatCurrency = currency;
 
-    const formatted = formatCurrencyValue(total, currency);
-    if (valueEl) valueEl.textContent = formatted;
+    updateWalletBondDisplay(currency);
     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.
@@ -2173,10 +2174,7 @@ 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();
-      const formatted = formatCurrencyValue(cachedTotal, displayCurrency);
-      if (valueEl) valueEl.textContent = formatted;
-      const accountTotalEl = $('account-total-value');
-      if (accountTotalEl) accountTotalEl.textContent = 'Bond: ' + formatted;
+      updateWalletBondDisplay(displayCurrency);
     } else if (valueEl && !valueEl.textContent) {
       valueEl.textContent = '$0.00';
     }
@@ -4276,7 +4274,7 @@ function setupMainAppHandlers() {
   // Modal close handlers
   $qa('.modal').forEach(modal => {
     modal.addEventListener('click', (e) => {
-      if (e.target === modal || e.target.classList.contains('modal-close')) {
+      if (e.target === modal || e.target.closest?.('.modal-close')) {
         modal.classList.remove('active');
       }
     });
@@ -4285,7 +4283,7 @@ function setupMainAppHandlers() {
   // Account modal tab switching
   $qa('.modal-tab[data-modal-tab]').forEach(tab => {
     tab.addEventListener('click', () => {
-      $qa('.modal-tab[data-modal-tab]').forEach(t => t.classList.remove('active'));
+      $qa('.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);
@@ -4808,16 +4806,19 @@ function setupMainAppHandlers() {
     closeWalletActionMenus();
     closeAssetActionOverlay();
     renderWalletSelector();
+    updateWalletBondDisplay();
     renderAccountsList();
     updateCustomPathDefault();
   };
   $('account-wallet-select')?.addEventListener('change', handleWalletSelectChange);
   $('wallet-active-select')?.addEventListener('change', handleWalletSelectChange);
-  $('account-wallet-manage-btn')?.addEventListener('click', () => {
+  $('wallet-manage-tab')?.addEventListener('click', () => {
     closeWalletActionMenus();
     closeAssetActionOverlay();
-    const walletTab = _root.querySelector?.('.modal-tab[data-modal-tab="wallet-tab-content"]');
-    if (walletTab) walletTab.click();
+    $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', () => {

package/src/template.js

@@ -3,12 +3,13 @@ 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-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-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><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>
       <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>
         <button class="modal-tab" data-modal-tab="messaging-tab-content">Messaging</button>
         <button class="modal-tab" data-modal-tab="wallet-tab-content">Wallet</button>
+        <button class="modal-tab" id="wallet-manage-tab" type="button">Manage</button>
       </div>
       <div class="modal-body">
         <!-- Wallet Tab -->
@@ -18,7 +19,7 @@ export function getModalHTML() {
             <!-- Portfolio Value (Phantom-style hero) -->
             <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-label">Bond</div>
             </div>
 
             <!-- Action Buttons Row -->
@@ -59,7 +60,7 @@ export function getModalHTML() {
                     <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>
+                  <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>
                 </div>
                 <code id="wallet-asset-action-address" class="wallet-asset-action-address"></code>
                 <div class="wallet-asset-action-buttons">
@@ -548,9 +549,9 @@ export function getModalHTML() {
   <!-- Login Modal -->
   <div id="login-modal" class="modal">
     <div class="modal-glass login-modal-content">
-      <div class="modal-header"><h3>Login</h3><button class="modal-close">&times;</button></div>
+      <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>
       <div id="wallet-info-box" class="wallet-info-box">
-        <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>
+        <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>
         <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>
       </div>
       <div class="modal-body">

package/src/trust-ui.js

@@ -19,6 +19,8 @@ import {
 // Helpers
 // =============================================================================
 
+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>';
+
 export function truncatePubkey(pubkey, prefixLen = 12, suffixLen = 8) {
   if (!pubkey) return '';
   if (pubkey.length <= prefixLen + suffixLen + 3) return pubkey;
@@ -257,7 +259,7 @@ export function showEstablishTrustModal(onConfirm) {
     <div class="modal-glass">
       <div class="modal-header">
         <h3>Establish Trust</h3>
-        <button class="modal-close">&times;</button>
+        <button class="modal-close" type="button" aria-label="Close">${CLOSE_ICON}</button>
       </div>
       <div class="modal-body">
 
@@ -474,7 +476,7 @@ export function showRevokeTrustModal(originalTxHash, onConfirm) {
     <div class="modal-glass">
       <div class="modal-header">
         <h3>Revoke Trust</h3>
-        <button class="modal-close">&times;</button>
+        <button class="modal-close" type="button" aria-label="Close">${CLOSE_ICON}</button>
       </div>
       <div class="modal-body">
         <div class="trust-warning">
@@ -564,7 +566,7 @@ function buildRuleRow(rule, index) {
           <select class="glass-select rule-severity">${severityOptions}</select>
         </div>
         <div class="rule-field rule-field-actions">
-          <button class="glass-btn glass-btn-sm rule-delete-btn" data-index="${index}" title="Delete rule">&times;</button>
+          <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>
         </div>
       </div>
     </div>
@@ -590,7 +592,7 @@ export function showRulesModal(rules, onSave) {
       <div class="modal-glass">
         <div class="modal-header">
           <h3>Trust Rules</h3>
-          <button class="modal-close">&times;</button>
+          <button class="modal-close" type="button" aria-label="Close">${CLOSE_ICON}</button>
         </div>
         <div class="modal-body">
           <div class="rules-list">

package/styles/main.css

@@ -1185,11 +1185,6 @@ body:has(.modal.active) .nav-bar {
   user-drag: none;
 }
 
-.modal-header h3 {
-  font-size: 18px;
-  font-weight: 600;
-}
-
 .account-header-info {
   display: flex;
   flex-direction: column;
@@ -1198,24 +1193,15 @@ body:has(.modal.active) .nav-bar {
   min-width: 0;
 }
 
-.account-header-top {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-}
-
-.account-total-value {
-  font-weight: 500;
-  color: #4ade80;
-  letter-spacing: 0.02em;
-  opacity: 0.9;
+.account-modal-header {
+  position: relative;
+  padding-right: 56px;
 }
 
 .account-wallet-row {
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-top: 4px;
   width: 100%;
   min-width: 0;
 }
@@ -1236,10 +1222,6 @@ body:has(.modal.active) .nav-bar {
   background-position: right 11px center;
 }
 
-#account-wallet-manage-btn {
-  flex: 0 0 auto;
-}
-
 @media (max-width: 600px) {
   .account-wallet-row {
     gap: 8px;
@@ -1263,17 +1245,23 @@ body:has(.modal.active) .nav-bar {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--white-10);
+  background: transparent;
   border: none;
-  border-radius: 50%;
   color: var(--white);
-  font-size: 20px;
   cursor: pointer;
-  transition: background 0.2s;
+  padding: 0;
+  transition: color 0.2s, opacity 0.2s;
 }
 
 .modal-close:hover {
-  background: var(--white-20);
+  color: var(--white-80);
+  opacity: 0.9;
+}
+
+.account-modal-close {
+  position: absolute;
+  top: 12px;
+  right: 14px;
 }
 
 .modal-body {

package/styles/widget.css

@@ -1187,11 +1187,6 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   user-drag: none;
 }
 
-#hd-wallet-ui-container .modal-header h3 {
-  font-size: 18px;
-  font-weight: 600;
-}
-
 #hd-wallet-ui-container .account-header-info {
   display: flex;
   flex-direction: column;
@@ -1200,24 +1195,15 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   min-width: 0;
 }
 
-#hd-wallet-ui-container .account-header-top {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-}
-
-#hd-wallet-ui-container .account-total-value {
-  font-weight: 500;
-  color: #4ade80;
-  letter-spacing: 0.02em;
-  opacity: 0.9;
+#hd-wallet-ui-container .account-modal-header {
+  position: relative;
+  padding-right: 56px;
 }
 
 #hd-wallet-ui-container .account-wallet-row {
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-top: 4px;
   width: 100%;
   min-width: 0;
 }
@@ -1238,10 +1224,6 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   background-position: right 11px center;
 }
 
-#hd-wallet-ui-container #account-wallet-manage-btn {
-  flex: 0 0 auto;
-}
-
 @media (max-width: 600px) {
   #hd-wallet-ui-container .account-wallet-row {
     gap: 8px;
@@ -1265,17 +1247,23 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--white-10);
+  background: transparent;
   border: none;
-  border-radius: 50%;
   color: var(--white);
-  font-size: 20px;
   cursor: pointer;
-  transition: background 0.2s;
+  padding: 0;
+  transition: color 0.2s, opacity 0.2s;
 }
 
 #hd-wallet-ui-container .modal-close:hover {
-  background: var(--white-20);
+  color: var(--white-80);
+  opacity: 0.9;
+}
+
+#hd-wallet-ui-container .account-modal-close {
+  position: absolute;
+  top: 12px;
+  right: 14px;
 }
 
 #hd-wallet-ui-container .modal-body {