hd-wallet-ui 1.2.2 → 1.2.4

package/package.json

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

package/src/app.js

@@ -204,6 +204,9 @@ async function p384GenerateKeyPairAsync() {
 // State
 // =============================================================================
 
+// Integration callback — set via options.onLogin in createWalletUI / init
+let _onLoginCallback = null;
+
 const state = {
   initialized: false,
   loggedIn: false,
@@ -1297,9 +1300,10 @@ async function scanActiveAccounts() {
   updateWalletBondTotal();
 
   const statusEl = $('wallet-scan-status');
-  const labelEl = $('wallet-scan-label');
+  const barEl = $('wallet-scan-bar');
   const scanBtn = $('wallet-scan-btn');
-  if (statusEl) statusEl.style.display = 'flex';
+  if (statusEl) statusEl.style.display = 'block';
+  if (barEl) barEl.style.width = '0%';
   if (scanBtn) scanBtn.disabled = true;
 
   try {
@@ -1329,10 +1333,9 @@ async function scanActiveAccounts() {
       });
     });
 
-    for (const target of targets) {
-      if (labelEl) {
-        labelEl.textContent = `Scanning ${target.name} m/44'/${target.coinType}'/${target.account}'/0/${target.index}...`;
-      }
+    for (let ti = 0; ti < targets.length; ti++) {
+      const target = targets[ti];
+      if (barEl) barEl.style.width = Math.round(((ti + 1) / targets.length) * 100) + '%';
 
       let derived;
       try {
@@ -2375,6 +2378,27 @@ function login(keys) {
   state.addresses = deriveAllAddressesFromHD();
   state.selectedCrypto = 'btc';
 
+  // Fire onLogin callback with SDN identity (coin type 9999)
+  if (_onLoginCallback && state.hdRoot) {
+    try {
+      const sdnSigning = getSigningKey(state.hdRoot, 9999, 0, 0);
+      const sdnPubKey = ed25519.getPublicKey(sdnSigning.privateKey);
+      const xpub = state.hdRoot.toXpub();
+      _onLoginCallback({
+        xpub,
+        signingPublicKey: sdnPubKey,
+        async sign(message) {
+          const msgBytes = typeof message === 'string'
+            ? new TextEncoder().encode(message)
+            : message;
+          return ed25519.sign(msgBytes, sdnSigning.privateKey);
+        },
+      });
+    } catch (err) {
+      console.error('onLogin callback error:', err);
+    }
+  }
+
   // Close login modal if open
   $('login-modal')?.classList.remove('active');
 
@@ -5224,9 +5248,10 @@ function setupHomepageHandlers() {
 // =============================================================================
 
 export async function init(rootElement, options = {}) {
-  const { autoOpenWallet = false } = typeof rootElement === 'object' && !(rootElement instanceof Node)
+  const { autoOpenWallet = false, onLogin = null } = typeof rootElement === 'object' && !(rootElement instanceof Node)
     ? (options = rootElement, {}) : options;
   if (rootElement && rootElement instanceof Node) _root = rootElement;
+  if (typeof onLogin === 'function') _onLoginCallback = onLogin;
 
   // Inject modal HTML if not already present in the DOM
   if (!document.getElementById('keys-modal')) {
@@ -5337,6 +5362,8 @@ 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)
  * @returns {Promise<{openLogin: Function, openAccount: Function, destroy: Function}>}
  */
 export async function createWalletUI(rootElement, options = {}) {

package/src/template.js

@@ -70,10 +70,9 @@ export function getModalHTML() {
               </button>
             </div>
 
-            <!-- Scan Status -->
-            <div id="wallet-scan-status" class="ph-scan-status" style="display:none;">
-              <div class="wallet-scan-spinner"></div>
-              <span id="wallet-scan-label">Scanning derivation paths...</span>
+            <!-- Scan Progress Bar -->
+            <div id="wallet-scan-status" class="wallet-scan-progress" style="display:none;">
+              <div id="wallet-scan-bar" class="wallet-scan-bar"></div>
             </div>
 
             <!-- Token List -->

package/styles/main.css

@@ -2081,30 +2081,21 @@ body:has(.modal.active) .nav-bar {
   cursor: not-allowed;
 }
 
-/* Scan Status */
-.ph-scan-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 14px;
-  margin-bottom: 8px;
-  font-size: 12px;
-  color: var(--muted);
-  background: var(--white-05);
-  border-radius: 12px;
-}
-
-.wallet-scan-spinner {
-  width: 14px;
-  height: 14px;
-  border: 2px solid var(--glass-border);
-  border-top-color: #AB82FF;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
+/* Scan Progress Bar */
+.wallet-scan-progress {
+  height: 2px;
+  background: var(--glass-border);
+  border-radius: 1px;
+  overflow: hidden;
+  margin-bottom: 4px;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
+.wallet-scan-bar {
+  height: 100%;
+  width: 0%;
+  background: #22c55e;
+  border-radius: 1px;
+  transition: width 0.3s ease;
 }
 
 /* Token List */