hd-wallet-ui 2.0.15 → 2.0.18

package/package.json

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

package/src/app.js

@@ -3836,8 +3836,8 @@ function isPasskeySupported() {
 
 // Track selected remember method (pin or passkey) for each login type
 const rememberMethod = {
-  password: 'passkey',
-  seed: 'passkey'
+  password: 'pin',
+  seed: 'pin'
 };
 
 function setupLoginHandlers() {
@@ -6024,14 +6024,27 @@ export async function createWalletUI(rootElement, options = {}) {
   return {
     /** Open the login modal */
     openLogin() {
-      const modal = document.getElementById('login-modal');
-      if (modal) modal.classList.add('active');
+      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();
+      }
     },
     /** 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');

package/src/template.js

@@ -562,11 +562,11 @@ export function getModalHTML() {
             <span class="entropy-label"><span id="entropy-bits">0</span> bits entropy</span>
           </div>
           <div class="remember-wallet-group">
-            <label class="glass-checkbox"><input type="checkbox" id="remember-wallet-password"><span class="checkmark"></span><span>Remember wallet</span></label>
-            <div class="remember-options" id="remember-options-password" style="display: none;">
-              <div class="remember-method-selector"><button type="button" class="remember-method-btn" data-method="pin" data-target="password">PIN</button><button type="button" class="remember-method-btn active" data-method="passkey" data-target="password" id="passkey-btn-password">Passkey</button></div>
-              <div class="pin-input-group" id="pin-group-password" style="display: none;"><input type="password" id="pin-input-password" class="glass-input pin-input" placeholder="6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*"></div>
-              <div class="passkey-info" id="passkey-info-password"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 0 1 5 5v3H7V7a5 5 0 0 1 5-5z"/><rect x="3" y="10" width="18" height="12" rx="2"/><circle cx="12" cy="16" r="1"/></svg><span>Use Face ID, Touch ID, or device PIN</span></div>
+            <label class="glass-checkbox"><input type="checkbox" id="remember-wallet-password" checked><span class="checkmark"></span><span>Remember wallet</span></label>
+            <div class="remember-options" id="remember-options-password">
+              <div class="remember-method-selector"><button type="button" class="remember-method-btn active" data-method="pin" data-target="password">PIN</button><button type="button" class="remember-method-btn" data-method="passkey" data-target="password" id="passkey-btn-password">Passkey</button></div>
+              <div class="pin-input-group" id="pin-group-password"><input type="password" id="pin-input-password" class="glass-input pin-input" placeholder="6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*"></div>
+              <div class="passkey-info" id="passkey-info-password" style="display: none;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 0 1 5 5v3H7V7a5 5 0 0 1 5-5z"/><rect x="3" y="10" width="18" height="12" rx="2"/><circle cx="12" cy="16" r="1"/></svg><span>Use Face ID, Touch ID, or device PIN</span></div>
             </div>
           </div>
           <button id="derive-from-password" class="glass-btn primary full-width" disabled type="button">Login</button>
@@ -574,11 +574,11 @@ export function getModalHTML() {
         <div id="seed-method" class="method-content">
           <div class="glass-input-group"><textarea id="seed-phrase" class="glass-input glass-textarea" rows="3" placeholder="Enter 12 or 24 word seed phrase..."></textarea><div class="seed-actions"><button id="generate-seed" class="glass-btn small">Generate</button><button id="validate-seed" class="glass-btn small">Validate</button></div></div>
           <div class="remember-wallet-group">
-            <label class="glass-checkbox"><input type="checkbox" id="remember-wallet-seed"><span class="checkmark"></span><span>Remember wallet</span></label>
-            <div class="remember-options" id="remember-options-seed" style="display: none;">
-              <div class="remember-method-selector"><button type="button" class="remember-method-btn" data-method="pin" data-target="seed">PIN</button><button type="button" class="remember-method-btn active" data-method="passkey" data-target="seed" id="passkey-btn-seed">Passkey</button></div>
-              <div class="pin-input-group" id="pin-group-seed" style="display: none;"><input type="password" id="pin-input-seed" class="glass-input pin-input" placeholder="6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*"></div>
-              <div class="passkey-info" id="passkey-info-seed"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 0 1 5 5v3H7V7a5 5 0 0 1 5-5z"/><rect x="3" y="10" width="18" height="12" rx="2"/><circle cx="12" cy="16" r="1"/></svg><span>Use Face ID, Touch ID, or device PIN</span></div>
+            <label class="glass-checkbox"><input type="checkbox" id="remember-wallet-seed" checked><span class="checkmark"></span><span>Remember wallet</span></label>
+            <div class="remember-options" id="remember-options-seed">
+              <div class="remember-method-selector"><button type="button" class="remember-method-btn active" data-method="pin" data-target="seed">PIN</button><button type="button" class="remember-method-btn" data-method="passkey" data-target="seed" id="passkey-btn-seed">Passkey</button></div>
+              <div class="pin-input-group" id="pin-group-seed"><input type="password" id="pin-input-seed" class="glass-input pin-input" placeholder="6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*"></div>
+              <div class="passkey-info" id="passkey-info-seed" style="display: none;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 0 1 5 5v3H7V7a5 5 0 0 1 5-5z"/><rect x="3" y="10" width="18" height="12" rx="2"/><circle cx="12" cy="16" r="1"/></svg><span>Use Face ID, Touch ID, or device PIN</span></div>
             </div>
           </div>
           <button id="derive-from-seed" class="glass-btn primary full-width" disabled>Login</button>

package/styles/main.css

@@ -977,9 +977,10 @@ body:has(.modal.active) .nav-bar {
 
 .wallet-info-expanded {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 8px;
-  padding: 12px 24px;
+  min-height: 30px;
+  padding: 6px 24px;
   background: rgba(59, 130, 246, 0.1);
   font-size: 13px;
   line-height: 1.5;
@@ -995,12 +996,17 @@ body:has(.modal.active) .nav-bar {
 }
 
 .wallet-info-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: none;
   border: none;
   color: rgba(255, 255, 255, 0.5);
   font-size: 18px;
   cursor: pointer;
-  padding: 0 2px;
+  padding: 0;
+  width: 22px;
+  height: 22px;
   line-height: 1;
   flex-shrink: 0;
 }
@@ -1235,11 +1241,12 @@ body:has(.modal.active) .nav-bar {
 .account-wallet-balance-line {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 16px;
 }
 
 .account-wallet-summary .ph-portfolio-value {
   color: #4ade80;
+  font-size: 25px;
 }
 
 .account-wallet-summary .ph-portfolio-label {

package/styles/widget.css

@@ -979,9 +979,10 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 
 #hd-wallet-ui-container .wallet-info-expanded {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 8px;
-  padding: 12px 24px;
+  min-height: 30px;
+  padding: 6px 24px;
   background: rgba(59, 130, 246, 0.1);
   font-size: 13px;
   line-height: 1.5;
@@ -997,12 +998,17 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 }
 
 #hd-wallet-ui-container .wallet-info-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: none;
   border: none;
   color: rgba(255, 255, 255, 0.5);
   font-size: 18px;
   cursor: pointer;
-  padding: 0 2px;
+  padding: 0;
+  width: 22px;
+  height: 22px;
   line-height: 1;
   flex-shrink: 0;
 }
@@ -1237,11 +1243,12 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 #hd-wallet-ui-container .account-wallet-balance-line {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 16px;
 }
 
 #hd-wallet-ui-container .account-wallet-summary .ph-portfolio-value {
   color: #4ade80;
+  font-size: 25px;
 }
 
 #hd-wallet-ui-container .account-wallet-summary .ph-portfolio-label {