hd-wallet-ui 2.0.12 → 2.0.14

package/package.json

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

package/src/app.js

@@ -821,6 +821,14 @@ function updateCustomPathDefault() {
   input.dataset.autogenerated = 'true';
 }
 
+function fitWalletSelectorToSelectedLabel(select) {
+  if (!select) return;
+  const selected = select.options[select.selectedIndex];
+  const label = selected?.textContent || '';
+  const width = Math.max(72, Math.min(260, (label.length * 8) + 46));
+  select.style.width = `${width}px`;
+}
+
 function renderWalletSelector() {
   const selects = [$('account-wallet-select'), $('wallet-active-select')].filter(Boolean);
   if (selects.length === 0) return;
@@ -847,6 +855,7 @@ function renderWalletSelector() {
       select.appendChild(option);
     });
     select.value = String(state.activeWalletId);
+    fitWalletSelectorToSelectedLabel(select);
   });
   updateCustomPathWalletLabel();
   updateIdentityWalletKeys();

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 account-modal-header"><div class="account-header-info"><div class="account-wallet-row"><select id="account-wallet-select" class="glass-input compact account-wallet-select" aria-label="Select wallet"></select></div></div><button class="modal-close account-modal-close" type="button" aria-label="Close"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>
+      <div class="modal-header account-modal-header"><div class="account-header-info"><div class="account-wallet-row"><select id="account-wallet-select" class="glass-input compact account-wallet-select" aria-label="Select wallet"></select></div><div class="account-wallet-summary"><div class="account-wallet-balance-line"><div class="ph-portfolio-value" id="wallet-bond-value">$0.00</div><div class="ph-portfolio-label">Bond</div></div></div></div><button class="modal-close account-modal-close" type="button" aria-label="Close"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></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>
@@ -16,12 +16,6 @@ export function getModalHTML() {
         <div id="wallet-tab-content" class="modal-tab-content">
           <!-- Main Wallet View -->
           <div id="wallet-main-view">
-            <!-- Portfolio Value (Phantom-style hero) -->
-            <div class="ph-portfolio">
-              <div class="ph-portfolio-value" id="wallet-bond-value">$0.00</div>
-              <div class="ph-portfolio-label">Bond</div>
-            </div>
-
             <!-- Action Buttons Row -->
             <div class="ph-actions">
               <button class="ph-action-btn" id="wallet-scan-btn">
@@ -197,7 +191,7 @@ export function getModalHTML() {
                   <video id="vcard-camera-video" autoplay playsinline style="display:none;width:100%;height:100%;object-fit:contain;"></video>
                   <div id="vcard-photo-actions" class="photo-actions">
                     <label class="glass-btn small" for="vcard-photo-input">Upload</label>
-                    <button id="vcard-camera-btn" class="glass-btn small" style="display:none;">Take Photo</button>
+                    <button id="vcard-camera-btn" class="glass-btn small" style="display:none;">Use Camera</button>
                     <button id="vcard-camera-capture" class="glass-btn small primary" style="display:none;">Capture</button>
                     <button id="vcard-camera-cancel" class="glass-btn small" style="display:none;">Cancel</button>
                     <button id="vcard-photo-remove" class="glass-btn small" style="display:none;">Remove</button>

package/styles/main.css

@@ -1188,28 +1188,32 @@ body:has(.modal.active) .nav-bar {
 .account-header-info {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  align-items: flex-start;
+  gap: 8px;
   flex: 1 1 auto;
   min-width: 0;
 }
 
 .account-modal-header {
   position: relative;
+  min-height: 118px;
   padding-right: 56px;
 }
 
 .account-wallet-row {
   display: flex;
   align-items: center;
-  gap: 10px;
-  width: 100%;
+  justify-content: flex-start;
+  gap: 8px;
+  width: auto;
   min-width: 0;
 }
 
 .account-wallet-select.glass-input.compact {
-  flex: 1 1 auto;
-  min-width: 180px;
-  width: 100%;
+  flex: 0 0 auto;
+  min-width: 0;
+  width: auto;
+  max-width: min(260px, calc(100vw - 112px));
   height: 32px;
   font-size: 13px;
   padding: 4px 34px 4px 10px;
@@ -1222,6 +1226,26 @@ body:has(.modal.active) .nav-bar {
   background-position: right 11px center;
 }
 
+.account-wallet-summary {
+  text-align: left;
+}
+
+.account-wallet-balance-line {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.account-wallet-summary .ph-portfolio-value {
+  color: #4ade80;
+}
+
+.account-wallet-summary .ph-portfolio-label {
+  font-size: 26px;
+  color: var(--white-80);
+  margin-top: 0;
+}
+
 @media (max-width: 600px) {
   .account-wallet-row {
     gap: 8px;
@@ -1229,6 +1253,7 @@ body:has(.modal.active) .nav-bar {
 
   .account-wallet-select.glass-input.compact {
     min-width: 0;
+    max-width: calc(100vw - 96px);
   }
 }
 

package/styles/widget.css

@@ -1190,28 +1190,32 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 #hd-wallet-ui-container .account-header-info {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  align-items: flex-start;
+  gap: 8px;
   flex: 1 1 auto;
   min-width: 0;
 }
 
 #hd-wallet-ui-container .account-modal-header {
   position: relative;
+  min-height: 118px;
   padding-right: 56px;
 }
 
 #hd-wallet-ui-container .account-wallet-row {
   display: flex;
   align-items: center;
-  gap: 10px;
-  width: 100%;
+  justify-content: flex-start;
+  gap: 8px;
+  width: auto;
   min-width: 0;
 }
 
 #hd-wallet-ui-container .account-wallet-select.glass-input.compact {
-  flex: 1 1 auto;
-  min-width: 180px;
-  width: 100%;
+  flex: 0 0 auto;
+  min-width: 0;
+  width: auto;
+  max-width: min(260px, calc(100vw - 112px));
   height: 32px;
   font-size: 13px;
   padding: 4px 34px 4px 10px;
@@ -1224,6 +1228,26 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   background-position: right 11px center;
 }
 
+#hd-wallet-ui-container .account-wallet-summary {
+  text-align: left;
+}
+
+#hd-wallet-ui-container .account-wallet-balance-line {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+#hd-wallet-ui-container .account-wallet-summary .ph-portfolio-value {
+  color: #4ade80;
+}
+
+#hd-wallet-ui-container .account-wallet-summary .ph-portfolio-label {
+  font-size: 26px;
+  color: var(--white-80);
+  margin-top: 0;
+}
+
 @media (max-width: 600px) {
   #hd-wallet-ui-container .account-wallet-row {
     gap: 8px;
@@ -1231,6 +1255,7 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 
   #hd-wallet-ui-container .account-wallet-select.glass-input.compact {
     min-width: 0;
+    max-width: calc(100vw - 96px);
   }
 }