hd-wallet-ui 1.4.3 → 1.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-wallet-ui",
-  "version": "1.4.3",
+  "version": "1.5.4",
   "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.15",
-    "hd-wallet-wasm": "^1.4.3",
+    "hd-wallet-wasm": "^1.5.4",
     "qrcode": "^1.5.3",
     "spacedatastandards.org": "^23.3.3-0.3.4",
     "vcard-cryptoperson": "^1.1.11"

package/src/app.js

@@ -77,6 +77,16 @@ const $ = (id) => {
   if (_root !== document) return document.getElementById(id);
   return null;
 };
+
+export function normalizeTabHash(rawHash) {
+  return String(rawHash || '')
+    .replace(/^\/+/g, '')
+    .split(/[/?#]/)[0]
+    .replace(/[^a-z0-9_-]/gi, '')
+    .replace(/-tab$/i, '')
+    .toLowerCase();
+}
+
 const $q = (sel) => _root.querySelector(sel) || (_root !== document ? document.querySelector(sel) : null);
 const $qa = (sel) => {
   const list = _root.querySelectorAll(sel);
@@ -497,26 +507,12 @@ function deriveHDKey(path) {
   }
 }
 
-function derivePeerInfo(acct) {
-  if (!state.hdRoot || !state.hdWalletModule) return null;
+function deriveAccountPeerId() {
+  if (!state.hdRoot) return null;
   try {
-    const path = acct.path || buildSigningPath(acct.coinType, acct.account, acct.index);
-    const derived = state.hdRoot.derivePath(path);
-    let pubKey, curve;
-    if (acct.coinType === 501) {
-      pubKey = ed25519.getPublicKey(derived.privateKey());
-      curve = Curve.ED25519;
-    } else {
-      pubKey = derived.publicKey();
-      curve = Curve.SECP256K1;
-    }
-    const peerIdBytes = state.hdWalletModule.libp2p.peerIdFromPublicKey(pubKey, curve);
-    return {
-      peerIdStr: state.hdWalletModule.libp2p.peerIdToString(peerIdBytes),
-      ipnsHash: state.hdWalletModule.libp2p.ipnsHash(peerIdBytes),
-    };
+    return state.hdRoot.peerIdString();
   } catch (e) {
-    console.warn('Failed to derive peer info:', e);
+    console.warn('Failed to derive account PeerID:', e);
     return null;
   }
 }
@@ -1629,18 +1625,6 @@ async function showReceiveModal(acct) {
         <h4 id="wallet-receive-title" class="section-label"></h4>
         <canvas id="wallet-receive-qr"></canvas>
         <code id="wallet-receive-address" class="wallet-receive-address"></code>
-        <div id="wallet-receive-peer-section" class="wallet-receive-peer-section" style="display:none">
-          <div class="wallet-receive-field">
-            <span class="wallet-receive-field-label">PeerID</span>
-            <code id="wallet-receive-peerid" class="wallet-receive-field-value"></code>
-            <button id="wallet-receive-copy-peerid" class="glass-btn small">Copy</button>
-          </div>
-          <div class="wallet-receive-field">
-            <span class="wallet-receive-field-label">IPNS</span>
-            <code id="wallet-receive-ipns" class="wallet-receive-field-value"></code>
-            <button id="wallet-receive-copy-ipns" class="glass-btn small">Copy</button>
-          </div>
-        </div>
         <div class="wallet-receive-actions">
           <button id="wallet-receive-copy" class="glass-btn small">Copy Address</button>
           <button id="wallet-receive-close" class="glass-btn small">Close</button>
@@ -1655,18 +1639,6 @@ async function showReceiveModal(acct) {
   if (titleEl) titleEl.textContent = `Receive ${acct.name}`;
   if (addrEl) addrEl.textContent = acct.address;
 
-  const peerSection = overlay.querySelector('#wallet-receive-peer-section');
-  const peerIdEl = overlay.querySelector('#wallet-receive-peerid');
-  const ipnsEl = overlay.querySelector('#wallet-receive-ipns');
-  const peerInfo = derivePeerInfo(acct);
-  if (peerInfo && peerSection) {
-    peerSection.style.display = '';
-    if (peerIdEl) peerIdEl.textContent = peerInfo.peerIdStr;
-    if (ipnsEl) ipnsEl.textContent = peerInfo.ipnsHash;
-  } else if (peerSection) {
-    peerSection.style.display = 'none';
-  }
-
   try {
     const qrCanvas = overlay.querySelector('#wallet-receive-qr');
     if (qrCanvas) {
@@ -1689,16 +1661,6 @@ async function showReceiveModal(acct) {
   overlay.querySelector('#wallet-receive-close')?.addEventListener('click', () => {
     overlay.style.display = 'none';
   }, { once: true });
-
-  overlay.querySelector('#wallet-receive-copy-peerid')?.addEventListener('click', () => {
-    const val = overlay.querySelector('#wallet-receive-peerid')?.textContent;
-    if (val) navigator.clipboard.writeText(val).catch(() => {});
-  }, { once: true });
-
-  overlay.querySelector('#wallet-receive-copy-ipns')?.addEventListener('click', () => {
-    const val = overlay.querySelector('#wallet-receive-ipns')?.textContent;
-    if (val) navigator.clipboard.writeText(val).catch(() => {});
-  }, { once: true });
 }
 
 // =============================================================================
@@ -2537,6 +2499,7 @@ function login(keys) {
       const xpub = state.hdRoot.toXpub();
       _onLoginCallback({
         xpub,
+        peerId: deriveAccountPeerId(),
         signingPublicKey: sdnPubKey,
         async sign(message) {
           const msgBytes = typeof message === 'string'
@@ -2594,6 +2557,16 @@ function login(keys) {
     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)';
@@ -2857,6 +2830,27 @@ function populateAccountAddressDropdown() {
       }
     };
   }
+
+  // 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 = () => {
+      if (peerIdStr) {
+        navigator.clipboard.writeText(peerIdStr).then(() => {
+          peerCopyBtn.title = 'Copied!';
+          setTimeout(() => { peerCopyBtn.title = 'Copy PeerID'; }, 1500);
+        });
+      }
+    };
+  }
 }
 
 function populateWalletAddresses() {
@@ -4581,6 +4575,8 @@ function setupMainAppHandlers() {
           let value = '';
           if (targetId === 'wallet-xpub' || targetId === 'wallet-tab-xpub') {
             value = state.hdRoot?.toXpub?.() || '';
+          } 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.');
@@ -5839,14 +5835,15 @@ export async function init(rootElement, options = {}) {
 
     // Handle initial hash navigation
     const initialHash = window.location.hash.slice(1);
-    if (initialHash) {
-      const tabEl = $(`${initialHash}-tab`);
+    const normalizedTab = normalizeTabHash(initialHash);
+    if (normalizedTab) {
+      const tabEl = $(`${normalizedTab}-tab`);
       if (tabEl) {
         setTimeout(() => {
           tabEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
           $qa('.nav-link[data-tab]').forEach(link => {
             link.classList.remove('active');
-            if (link.dataset.tab === initialHash) {
+            if (link.dataset.tab === normalizedTab) {
               link.classList.add('active');
             }
           });

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><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-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-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>
@@ -23,6 +23,10 @@ export function getModalHTML() {
                 <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">