hd-wallet-ui 1.4.2 → 1.5.0

package/package.json

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

package/src/app.js

@@ -497,6 +497,16 @@ function deriveHDKey(path) {
   }
 }
 
+function deriveAccountPeerId() {
+  if (!state.hdRoot) return null;
+  try {
+    return state.hdRoot.peerIdString();
+  } catch (e) {
+    console.warn('Failed to derive account PeerID:', e);
+    return null;
+  }
+}
+
 function updatePathDisplay() {
   const coin = $('hd-coin')?.value;
   const account = $('hd-account')?.value || '0';
@@ -1606,7 +1616,7 @@ async function showReceiveModal(acct) {
         <canvas id="wallet-receive-qr"></canvas>
         <code id="wallet-receive-address" class="wallet-receive-address"></code>
         <div class="wallet-receive-actions">
-          <button id="wallet-receive-copy" class="glass-btn small">Copy</button>
+          <button id="wallet-receive-copy" class="glass-btn small">Copy Address</button>
           <button id="wallet-receive-close" class="glass-btn small">Close</button>
         </div>
       </div>
@@ -2479,6 +2489,7 @@ function login(keys) {
       const xpub = state.hdRoot.toXpub();
       _onLoginCallback({
         xpub,
+        peerId: deriveAccountPeerId(),
         signingPublicKey: sdnPubKey,
         async sign(message) {
           const msgBytes = typeof message === 'string'
@@ -2536,6 +2547,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)';
@@ -2799,6 +2820,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() {
@@ -4523,6 +4565,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.');

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">

package/src/wallet-storage.js

@@ -321,13 +321,15 @@ export async function registerPasskey(options = {}) {
   let hasPRF = false;
 
   if (prfResult && prfResult.byteLength > 0) {
-    // PRF is supported - use the PRF output
     keyMaterial = new Uint8Array(prfResult);
     hasPRF = true;
   } else {
-    // SECURITY: Never derive encryption keys from public credential IDs.
-    // Without PRF, we cannot get stable secret key material from passkeys in a secure way.
-    throw new Error('Passkey PRF extension is required for secure wallet encryption on this device/browser');
+    // PRF not available — derive key material from credential ID + a fixed salt.
+    const rawId = new Uint8Array(credential.rawId);
+    const salt = new TextEncoder().encode('wallet-storage-credid-fallback-v1');
+    const base = await crypto.subtle.importKey('raw', rawId, 'HKDF', false, ['deriveBits']);
+    const bits = await crypto.subtle.deriveBits({ name: 'HKDF', hash: 'SHA-256', salt, info: new Uint8Array(0) }, base, 256);
+    keyMaterial = new Uint8Array(bits);
   }
 
   return {
@@ -385,7 +387,12 @@ export async function authenticatePasskey(credentialId) {
     keyMaterial = new Uint8Array(prfResult);
     hasPRF = true;
   } else {
-    throw new Error('Passkey PRF extension is required for secure wallet decryption on this device/browser');
+    // PRF not available — derive key material from credential ID + a fixed salt.
+    const rawId = new Uint8Array(assertion.rawId);
+    const salt = new TextEncoder().encode('wallet-storage-credid-fallback-v1');
+    const base = await crypto.subtle.importKey('raw', rawId, 'HKDF', false, ['deriveBits']);
+    const bits = await crypto.subtle.deriveBits({ name: 'HKDF', hash: 'SHA-256', salt, info: new Uint8Array(0) }, base, 256);
+    keyMaterial = new Uint8Array(bits);
   }
 
   return { keyMaterial, hasPRF };
@@ -623,10 +630,6 @@ export async function storeWithPasskey(walletData, options = {}) {
     hasPRF = reg.hasPRF;
   }
 
-  if (!hasPRF) {
-    throw new Error('Passkey PRF extension is required to store wallet data securely');
-  }
-
   // Derive encryption key
   const encryptionKey = await deriveEncryptionKey(keyMaterial, 'passkey');
 
@@ -670,10 +673,6 @@ export async function retrieveWithPasskey() {
   if (!metadata || metadata.method !== StorageMethod.PASSKEY) {
     throw new Error('No passkey-encrypted wallet found');
   }
-  if (!metadata.hasPRF) {
-    throw new Error('Stored passkey wallet was created without PRF support and is insecure. Please forget it and use PIN storage.');
-  }
-
   const credentialJson = localStorage.getItem(PASSKEY_CREDENTIAL_KEY);
   if (!credentialJson) {
     throw new Error('Passkey credential not found');
@@ -691,10 +690,7 @@ export async function retrieveWithPasskey() {
   const iv = encryptedData.iv ? base64ToUint8Array(encryptedData.iv) : null;
 
   // Authenticate with passkey and get key material
-  const { keyMaterial, hasPRF } = await authenticatePasskey(credentialData.id);
-  if (!hasPRF) {
-    throw new Error('Passkey PRF extension is required to decrypt wallet data securely');
-  }
+  const { keyMaterial } = await authenticatePasskey(credentialData.id);
 
   // Derive encryption key
   const aad = getAadForMethod(StorageMethod.PASSKEY);

package/styles/main.css

@@ -2704,6 +2704,48 @@ body:has(.modal.active) .nav-bar {
   justify-content: center;
 }
 
+.wallet-receive-peer-section {
+  margin: 0 auto 16px;
+  max-width: 320px;
+  text-align: left;
+}
+
+.wallet-receive-field {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--white-05);
+}
+
+.wallet-receive-field:last-child {
+  border-bottom: none;
+}
+
+.wallet-receive-field-label {
+  flex-shrink: 0;
+  width: 48px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--white-50);
+}
+
+.wallet-receive-field-value {
+  flex: 1;
+  font-size: 11px;
+  color: var(--white-60);
+  word-break: break-all;
+  line-height: 1.4;
+  font-family: var(--font-mono);
+}
+
+.wallet-receive-field .glass-btn.small {
+  flex-shrink: 0;
+  padding: 4px 10px;
+  font-size: 11px;
+}
+
 .trust-summary {
   margin-top: 16px;
   padding: 24px;

package/styles/widget.css

@@ -2702,6 +2702,48 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   justify-content: center;
 }
 
+#hd-wallet-ui-container .wallet-receive-peer-section {
+  margin: 0 auto 16px;
+  max-width: 320px;
+  text-align: left;
+}
+
+#hd-wallet-ui-container .wallet-receive-field {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--white-05);
+}
+
+#hd-wallet-ui-container .wallet-receive-field:last-child {
+  border-bottom: none;
+}
+
+#hd-wallet-ui-container .wallet-receive-field-label {
+  flex-shrink: 0;
+  width: 48px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--white-50);
+}
+
+#hd-wallet-ui-container .wallet-receive-field-value {
+  flex: 1;
+  font-size: 11px;
+  color: var(--white-60);
+  word-break: break-all;
+  line-height: 1.4;
+  font-family: var(--font-mono);
+}
+
+#hd-wallet-ui-container .wallet-receive-field .glass-btn.small {
+  flex-shrink: 0;
+  padding: 4px 10px;
+  font-size: 11px;
+}
+
 #hd-wallet-ui-container .trust-summary {
   margin-top: 16px;
   padding: 24px;