hd-wallet-ui 1.2.4 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-wallet-ui",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "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",
@@ -35,7 +35,7 @@
     "buffer": "^6.0.3",
     "flatbuffers": "^25.9.23",
     "flatc-wasm": "^25.12.19-wasm.43",
-    "hd-wallet-wasm": "^1.2.4",
+    "hd-wallet-wasm": "^1.2.6",
     "qrcode": "^1.5.3",
     "spacedatastandards.org": "^23.3.3-0.3.4",
     "vcard-cryptoperson": "^1.1.11"

package/src/app.js

@@ -2378,10 +2378,10 @@ function login(keys) {
   state.addresses = deriveAllAddressesFromHD();
   state.selectedCrypto = 'btc';
 
-  // Fire onLogin callback with SDN identity (coin type 9999)
+  // Fire onLogin callback with SDN identity (coin type 1957 — Sputnik)
   if (_onLoginCallback && state.hdRoot) {
     try {
-      const sdnSigning = getSigningKey(state.hdRoot, 9999, 0, 0);
+      const sdnSigning = getSigningKey(state.hdRoot, 1957, 0, 0);
       const sdnPubKey = ed25519.getPublicKey(sdnSigning.privateKey);
       const xpub = state.hdRoot.toXpub();
       _onLoginCallback({
@@ -3371,11 +3371,16 @@ function parseAndDisplayVCF(vcfText) {
   if (!resultEl || !fieldsEl) return;
 
   if (photoEl) {
-    photoEl.innerHTML = photo
-      ? `<img src="${photo}" alt="Contact photo">`
-      : `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:32px;height:32px;opacity:0.3">
+    const fallbackSvg = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:32px;height:32px;opacity:0.3">
           <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
         </svg>`;
+    if (photo) {
+      photoEl.innerHTML = `<img src="${photo}" alt="Contact photo">`;
+      const img = photoEl.querySelector('img');
+      if (img) img.onerror = () => { photoEl.innerHTML = fallbackSvg; };
+    } else {
+      photoEl.innerHTML = fallbackSvg;
+    }
   }
 
   let html = '';
@@ -3638,6 +3643,19 @@ function setupLoginHandlers() {
     updatePasswordStrength(e.target.value);
   });
 
+  // Password show/hide toggle
+  $('toggle-password-vis')?.addEventListener('click', () => {
+    const pw = $('wallet-password');
+    const btn = $('toggle-password-vis');
+    if (!pw || !btn) return;
+    const showing = pw.type === 'text';
+    pw.type = showing ? 'password' : 'text';
+    btn.querySelector('.eye-open').style.display = showing ? '' : 'none';
+    btn.querySelector('.eye-closed').style.display = showing ? 'none' : '';
+    btn.title = showing ? 'Show password' : 'Hide password';
+    pw.focus();
+  });
+
   $('wallet-username')?.addEventListener('input', () => {
     const pw = $('wallet-password');
     if (pw) updatePasswordStrength(pw.value);
@@ -4187,6 +4205,7 @@ function setupMainAppHandlers() {
     const img = document.createElement('img');
     img.src = dataUrl;
     img.alt = 'Photo';
+    img.onerror = () => { img.remove(); resetPhotoPreview(); };
     preview.appendChild(img);
     const removeBtn = $('vcard-photo-remove');
     if (removeBtn) removeBtn.style.display = '';
@@ -5363,7 +5382,7 @@ export async function init(rootElement, options = {}) {
  * @param {Node}   [rootElement]  - Optional root element for DOM queries
  * @param {Object} [options]      - Options passed to init()
  * @param {Function} [options.onLogin] - Callback fired after successful login with
- *   `{ xpub, signingPublicKey, sign(message) }` for SDN identity (coin type 9999)
+ *   `{ xpub, signingPublicKey, sign(message) }` for SDN identity (coin type 1957)
  * @returns {Promise<{openLogin: Function, openAccount: Function, destroy: Function}>}
  */
 export async function createWalletUI(rootElement, options = {}) {

package/src/template.js

@@ -538,7 +538,7 @@ export function getModalHTML() {
         <form id="password-method" class="method-content active" onsubmit="return false;">
           <div class="glass-input-group"><input type="text" id="wallet-username" class="glass-input" placeholder="Username" autocomplete="username"></div>
           <div class="glass-input-group">
-            <input type="password" id="wallet-password" class="glass-input" placeholder="Password (24+ chars)" autocomplete="new-password">
+            <div class="password-input-wrap"><input type="password" id="wallet-password" class="glass-input" placeholder="Password (24+ chars)" autocomplete="new-password"><button type="button" id="toggle-password-vis" class="password-toggle" title="Show password"><svg class="eye-open" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><svg class="eye-closed" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg></button></div>
             <div class="entropy-bar"><div class="entropy-fill" id="strength-fill"></div><div class="entropy-threshold"></div></div>
             <span class="entropy-label"><span id="entropy-bits">0</span> bits entropy</span>
           </div>

package/styles/main.css

@@ -450,6 +450,32 @@ body:has(.modal.active) .nav-bar {
   background: var(--white-10);
 }
 
+.password-input-wrap {
+  position: relative;
+}
+.password-input-wrap .glass-input {
+  padding-right: 48px;
+}
+.password-toggle {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--white-40);
+  cursor: pointer;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: color 0.15s;
+}
+.password-toggle:hover {
+  color: var(--white-80);
+}
+
 .glass-textarea {
   resize: vertical;
   min-height: 80px;