hd-wallet-ui 1.6.0 → 2.0.1

package/package.json

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

package/src/app.js

@@ -3498,11 +3498,49 @@ function verifyVCardSignature(vcardText) {
   }
 }
 
+function hideImportedVcardPreview() {
+  state.importedVcardPreview = null;
+  const resultEl = $('vcf-import-result');
+  const fieldsEl = $('vcf-import-fields');
+  const sigStatus = $('vcf-import-sig-status');
+  if (fieldsEl) fieldsEl.innerHTML = '';
+  if (sigStatus) {
+    sigStatus.innerHTML = '';
+    sigStatus.style.display = 'none';
+  }
+  if (resultEl) resultEl.style.display = 'none';
+}
+
+function applyImportedVcardPreview() {
+  const imported = state.importedVcardPreview;
+  if (!imported) return;
+
+  for (const id of vcardFieldIds) {
+    const el = $(id);
+    if (el) el.value = imported.formValues[id] || '';
+  }
+
+  state.vcardPhoto = imported.photo || null;
+  if (imported.photo) {
+    showPhotoPreview(imported.photo);
+  } else {
+    resetPhotoPreview();
+  }
+
+  saveVcardIdentity();
+  updateIdentityCardSummary();
+  setPhotoActionsVisible(false);
+  $('vcard-edit-view').style.display = 'none';
+  $('vcard-form-view').style.display = '';
+  hideImportedVcardPreview();
+}
+
 function parseAndDisplayVCF(vcfText) {
   const lines = vcfText.replace(/\r?\n /g, '').split(/\r?\n/);
   const fields = {};
   const keys = [];
   let photo = null;
+  const formValues = Object.fromEntries(vcardFieldIds.map(id => [id, '']));
 
   for (const line of lines) {
     const colonIdx = line.indexOf(':');
@@ -3512,19 +3550,38 @@ function parseAndDisplayVCF(vcfText) {
 
     if (prop === 'FN') {
       fields.name = value;
-    } else if (prop.startsWith('N')) {
+    } else if (prop === 'N') {
+      const parts = value.split(';');
+      formValues['vcard-lastname'] = parts[0] || '';
+      formValues['vcard-firstname'] = parts[1] || '';
+      formValues['vcard-middlename'] = parts[2] || '';
+      formValues['vcard-prefix'] = parts[3] || '';
+      formValues['vcard-suffix'] = parts[4] || '';
       if (!fields.name) {
-        const parts = value.split(';');
         fields.name = [parts[3], parts[1], parts[2], parts[0], parts[4]].filter(Boolean).join(' ');
       }
+    } else if (prop === 'NICKNAME') {
+      formValues['vcard-nickname'] = value;
     } else if (prop.startsWith('EMAIL')) {
+      formValues['vcard-email'] ||= value;
       fields.email = value;
     } else if (prop.startsWith('ORG')) {
-      fields.org = value.replace(/;/g, ', ');
+      const normalized = value.replace(/;/g, ', ');
+      formValues['vcard-org'] ||= normalized;
+      fields.org = normalized;
     } else if (prop.startsWith('TITLE')) {
+      formValues['vcard-title'] ||= value;
       fields.title = value;
     } else if (prop.startsWith('TEL')) {
+      formValues['vcard-phone'] ||= value;
       fields.tel = value;
+    } else if (prop.startsWith('ADR')) {
+      const parts = value.split(';');
+      formValues['vcard-street'] ||= [parts[1], parts[2]].filter(Boolean).join(' ');
+      formValues['vcard-city'] ||= parts[3] || '';
+      formValues['vcard-region'] ||= parts[4] || '';
+      formValues['vcard-postal'] ||= parts[5] || '';
+      formValues['vcard-country'] ||= parts[6] || '';
     } else if (prop.startsWith('PHOTO')) {
       if (prop.includes('VALUE=URI') || value.startsWith('data:') || value.startsWith('http')) {
         photo = value;
@@ -3541,6 +3598,10 @@ function parseAndDisplayVCF(vcfText) {
     }
   }
 
+  if (!formValues['vcard-firstname'] && !formValues['vcard-lastname'] && fields.name) {
+    formValues['vcard-firstname'] = fields.name;
+  }
+
   const resultEl = $('vcf-import-result');
   const photoEl = $('vcf-import-photo');
   const fieldsEl = $('vcf-import-fields');
@@ -3601,6 +3662,11 @@ function parseAndDisplayVCF(vcfText) {
     sigStatus.style.display = 'flex';
   }
 
+  state.importedVcardPreview = {
+    formValues,
+    photo,
+  };
+
   fieldsEl.innerHTML = html;
   resultEl.style.display = 'block';
 }
@@ -4534,6 +4600,14 @@ function setupMainAppHandlers() {
     e.target.value = '';
   });
 
+  $('vcf-import-apply')?.addEventListener('click', () => {
+    applyImportedVcardPreview();
+  });
+
+  $('vcf-import-close')?.addEventListener('click', () => {
+    hideImportedVcardPreview();
+  });
+
   // Reveal sensitive key buttons
   $qa('.reveal-key-btn').forEach(btn => {
     btn.addEventListener('click', () => {

package/src/template.js

@@ -256,6 +256,10 @@ export function getModalHTML() {
                 <div class="vcf-import-fields" id="vcf-import-fields"></div>
               </div>
               <div id="vcf-import-sig-status" class="vcard-sig-badge" style="display:none;"></div>
+              <div class="vcf-import-actions">
+                <button id="vcf-import-apply" class="glass-btn primary">Replace Identity</button>
+                <button id="vcf-import-close" class="glass-btn">Dismiss</button>
+              </div>
             </div>
           </div>
 

package/styles/main.css

@@ -10,6 +10,13 @@
   padding: 0;
 }
 
+/* Button reset — counteract host-page normalize/tachyons leaking into the widget */
+button {
+  -webkit-appearance: none;
+  appearance: none;
+  line-height: inherit;
+}
+
 /* Prevent dragging on headings, headers, and links */
 h1, h2, h3, h4, h5, h6,
 a, button, nav, nav * {
@@ -4937,6 +4944,13 @@ body:has(.modal.active) .nav-bar {
   color: rgba(255, 255, 255, 0.9) !important;
 }
 
+.vcf-import-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
 /* Readonly badge */
 .readonly-badge {
   font-size: 0.6875rem;
@@ -4968,6 +4982,10 @@ body:has(.modal.active) .nav-bar {
   .vcard-form-row.address-row {
     grid-template-columns: 1fr;
   }
+
+  .vcf-import-actions {
+    flex-direction: column;
+  }
   
   .photo-upload-section {
     flex-direction: column;
@@ -5861,6 +5879,76 @@ a.chain-card:hover {
   display: block;
 }
 
+.x509-overview {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+  gap: 24px;
+  padding: 32px;
+  margin-bottom: 24px;
+  align-items: start;
+}
+
+.x509-copy {
+  min-width: 0;
+}
+
+.x509-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  margin-bottom: 14px;
+  border-radius: 999px;
+  background: rgba(96, 165, 250, 0.12);
+  color: #93c5fd;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.x509-copy h3 {
+  font-size: 1.35rem;
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 12px;
+}
+
+.x509-copy p {
+  color: var(--white-60);
+  font-size: 0.95rem;
+  line-height: 1.75;
+  margin-bottom: 14px;
+}
+
+.x509-tag-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.x509-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 7px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--white-80);
+  font-size: 0.78rem;
+  font-family: var(--font-mono);
+}
+
+.x509-flow {
+  margin-bottom: 24px;
+  padding: 28px 24px;
+}
+
+.x509-grid {
+  grid-template-columns: repeat(2, 1fr);
+}
+
 @media (max-width: 600px) {
   .code-block pre {
     padding: 14px;
@@ -5875,6 +5963,16 @@ a.chain-card:hover {
     padding-left: 8px;
     padding-right: 8px;
   }
+  .x509-overview {
+    grid-template-columns: 1fr;
+    padding: 20px;
+  }
+  .x509-copy h3 {
+    font-size: 1.1rem;
+  }
+  .x509-copy p {
+    font-size: 0.88rem;
+  }
 }
 
 /* =============================================================================

package/styles/widget.css

@@ -20,6 +20,13 @@
   padding: 0;
 }
 
+/* Button reset — counteract host-page normalize/tachyons leaking into the widget */
+#hd-wallet-ui-container button {
+  -webkit-appearance: none;
+  appearance: none;
+  line-height: inherit;
+}
+
 /* Prevent dragging on headings, headers, and links */
 #hd-wallet-ui-container h1, #hd-wallet-ui-container h2, #hd-wallet-ui-container h3, #hd-wallet-ui-container h4, #hd-wallet-ui-container h5, #hd-wallet-ui-container h6, #hd-wallet-ui-container a, #hd-wallet-ui-container button, #hd-wallet-ui-container nav, #hd-wallet-ui-container nav * {
   -webkit-user-drag: none;
@@ -4930,6 +4937,13 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   color: rgba(255, 255, 255, 0.9) !important;
 }
 
+#hd-wallet-ui-container .vcf-import-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
 /* Readonly badge */
 #hd-wallet-ui-container .readonly-badge {
   font-size: 0.6875rem;
@@ -4961,6 +4975,10 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   #hd-wallet-ui-container .vcard-form-row.address-row {
     grid-template-columns: 1fr;
   }
+
+  #hd-wallet-ui-container .vcf-import-actions {
+    flex-direction: column;
+  }
   
   #hd-wallet-ui-container .photo-upload-section {
     flex-direction: column;
@@ -5853,6 +5871,76 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   display: block;
 }
 
+#hd-wallet-ui-container .x509-overview {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+  gap: 24px;
+  padding: 32px;
+  margin-bottom: 24px;
+  align-items: start;
+}
+
+#hd-wallet-ui-container .x509-copy {
+  min-width: 0;
+}
+
+#hd-wallet-ui-container .x509-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  margin-bottom: 14px;
+  border-radius: 999px;
+  background: rgba(96, 165, 250, 0.12);
+  color: #93c5fd;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+#hd-wallet-ui-container .x509-copy h3 {
+  font-size: 1.35rem;
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 12px;
+}
+
+#hd-wallet-ui-container .x509-copy p {
+  color: var(--white-60);
+  font-size: 0.95rem;
+  line-height: 1.75;
+  margin-bottom: 14px;
+}
+
+#hd-wallet-ui-container .x509-tag-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 18px;
+}
+
+#hd-wallet-ui-container .x509-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 7px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--white-80);
+  font-size: 0.78rem;
+  font-family: var(--font-mono);
+}
+
+#hd-wallet-ui-container .x509-flow {
+  margin-bottom: 24px;
+  padding: 28px 24px;
+}
+
+#hd-wallet-ui-container .x509-grid {
+  grid-template-columns: repeat(2, 1fr);
+}
+
 @media (max-width: 600px) {
   #hd-wallet-ui-container .code-block pre {
     padding: 14px;
@@ -5867,6 +5955,16 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
     padding-left: 8px;
     padding-right: 8px;
   }
+  #hd-wallet-ui-container .x509-overview {
+    grid-template-columns: 1fr;
+    padding: 20px;
+  }
+  #hd-wallet-ui-container .x509-copy h3 {
+    font-size: 1.1rem;
+  }
+  #hd-wallet-ui-container .x509-copy p {
+    font-size: 0.88rem;
+  }
 }
 
 /* =============================================================================