hd-wallet-ui 2.0.13 → 2.0.15

package/package.json

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

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 class="account-wallet-summary"><div class="ph-portfolio-value" id="wallet-bond-value">$0.00</div><div class="ph-portfolio-label">Bond</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-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>

package/styles/main.css

@@ -1188,7 +1188,8 @@ body:has(.modal.active) .nav-bar {
 .account-header-info {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
+  justify-content: center;
   gap: 8px;
   flex: 1 1 auto;
   min-width: 0;
@@ -1196,7 +1197,7 @@ body:has(.modal.active) .nav-bar {
 
 .account-modal-header {
   position: relative;
-  justify-content: center;
+  align-items: center;
   min-height: 118px;
   padding-right: 56px;
 }
@@ -1204,7 +1205,7 @@ body:has(.modal.active) .nav-bar {
 .account-wallet-row {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 8px;
   width: auto;
   min-width: 0;
@@ -1228,7 +1229,23 @@ body:has(.modal.active) .nav-bar {
 }
 
 .account-wallet-summary {
-  text-align: center;
+  text-align: left;
+}
+
+.account-wallet-balance-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.account-wallet-summary .ph-portfolio-value {
+  color: #4ade80;
+}
+
+.account-wallet-summary .ph-portfolio-label {
+  font-size: 18px;
+  color: var(--white-80);
+  margin-top: 0;
 }
 
 @media (max-width: 600px) {

package/styles/widget.css

@@ -1190,7 +1190,8 @@ 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;
-  align-items: center;
+  align-items: flex-start;
+  justify-content: center;
   gap: 8px;
   flex: 1 1 auto;
   min-width: 0;
@@ -1198,7 +1199,7 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 
 #hd-wallet-ui-container .account-modal-header {
   position: relative;
-  justify-content: center;
+  align-items: center;
   min-height: 118px;
   padding-right: 56px;
 }
@@ -1206,7 +1207,7 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 #hd-wallet-ui-container .account-wallet-row {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 8px;
   width: auto;
   min-width: 0;
@@ -1230,7 +1231,23 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 }
 
 #hd-wallet-ui-container .account-wallet-summary {
-  text-align: center;
+  text-align: left;
+}
+
+#hd-wallet-ui-container .account-wallet-balance-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#hd-wallet-ui-container .account-wallet-summary .ph-portfolio-value {
+  color: #4ade80;
+}
+
+#hd-wallet-ui-container .account-wallet-summary .ph-portfolio-label {
+  font-size: 18px;
+  color: var(--white-80);
+  margin-top: 0;
 }
 
 @media (max-width: 600px) {