hd-wallet-ui 2.0.5 → 2.0.7

package/package.json

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

package/src/app.js

@@ -28,6 +28,8 @@ window.Buffer = Buffer;
 
 import { getModalHTML } from './template.js';
 import WalletStorage, { StorageMethod } from './wallet-storage.js';
+import { safeCopyText } from './clipboard.js';
+import { normalizeTabHash } from './hash.js';
 
 import {
   cryptoConfig,
@@ -74,14 +76,7 @@ const $ = (id) => {
   return null;
 };
 
-export function normalizeTabHash(rawHash) {
-  return String(rawHash || '')
-    .replace(/^\/+/g, '')
-    .split(/[/?#]/)[0]
-    .replace(/[^a-z0-9_-]/gi, '')
-    .replace(/-tab$/i, '')
-    .toLowerCase();
-}
+export { normalizeTabHash };
 
 const $q = (sel) => _root.querySelector(sel) || (_root !== document ? document.querySelector(sel) : null);
 const $qa = (sel) => {
@@ -1612,9 +1607,7 @@ async function handleAccountAction(action, idx) {
       showReceiveModal(acct);
       break;
     case 'copy':
-      try {
-        await navigator.clipboard.writeText(acct.address);
-      } catch {}
+      await safeCopyText(acct.address);
       break;
     case 'toggle':
       toggleAccountActive(idx);
@@ -1669,7 +1662,7 @@ async function showReceiveModal(acct) {
   overlay.style.display = 'flex';
 
   overlay.querySelector('#wallet-receive-copy')?.addEventListener('click', () => {
-    navigator.clipboard.writeText(acct.address).catch(() => {});
+    void safeCopyText(acct.address);
   }, { once: true });
 
   overlay.querySelector('#wallet-receive-close')?.addEventListener('click', () => {
@@ -2835,12 +2828,10 @@ function populateAccountAddressDropdown() {
 
   const copyBtn = $('account-address-copy');
   if (copyBtn) {
-    copyBtn.onclick = () => {
-      if (xpubStr) {
-        navigator.clipboard.writeText(xpubStr).then(() => {
-          copyBtn.title = 'Copied!';
-          setTimeout(() => { copyBtn.title = 'Copy xpub'; }, 1500);
-        });
+    copyBtn.onclick = async () => {
+      if (xpubStr && await safeCopyText(xpubStr)) {
+        copyBtn.title = 'Copied!';
+        setTimeout(() => { copyBtn.title = 'Copy xpub'; }, 1500);
       }
     };
   }
@@ -2856,12 +2847,10 @@ function populateAccountAddressDropdown() {
   }
   const peerCopyBtn = $('account-peerid-copy');
   if (peerCopyBtn) {
-    peerCopyBtn.onclick = () => {
-      if (peerIdStr) {
-        navigator.clipboard.writeText(peerIdStr).then(() => {
-          peerCopyBtn.title = 'Copied!';
-          setTimeout(() => { peerCopyBtn.title = 'Copy PeerID'; }, 1500);
-        });
+    peerCopyBtn.onclick = async () => {
+      if (peerIdStr && await safeCopyText(peerIdStr)) {
+        peerCopyBtn.title = 'Copied!';
+        setTimeout(() => { peerCopyBtn.title = 'Copy PeerID'; }, 1500);
       }
     };
   }
@@ -4683,9 +4672,12 @@ function setupMainAppHandlers() {
           if (!value) {
             throw new Error('Nothing to copy');
           }
-          await navigator.clipboard.writeText(value);
-          btn.classList.add('copied');
-          setTimeout(() => btn.classList.remove('copied'), 1500);
+          if (await safeCopyText(value)) {
+            btn.classList.add('copied');
+            setTimeout(() => btn.classList.remove('copied'), 1500);
+          } else {
+            throw new Error('Clipboard unavailable');
+          }
         } catch (err) {
           console.error('Copy failed:', err);
         }
@@ -5050,7 +5042,9 @@ function setupMainAppHandlers() {
   $('copy-vcard')?.addEventListener('click', async () => {
     const vcard = state._exportedVCard || '';
     try {
-      await navigator.clipboard.writeText(vcard);
+      if (!await safeCopyText(vcard)) {
+        throw new Error('Clipboard unavailable');
+      }
       const btn = $('copy-vcard');
       if (btn) {
         btn.textContent = 'Copied!';
@@ -5697,7 +5691,7 @@ function setupTrustHandlers() {
   $('encrypt-copy-bundle')?.addEventListener('click', () => {
     const bundle = $('encrypt-bundle')?.value;
     if (bundle) {
-      navigator.clipboard.writeText(bundle).catch(() => {});
+      void safeCopyText(bundle);
     }
   });
 
@@ -5853,7 +5847,8 @@ function setupHomepageHandlers() {
     btn.addEventListener('click', () => {
       const code = btn.closest('.code-block')?.querySelector('code');
       if (code) {
-        navigator.clipboard.writeText(code.textContent).then(() => {
+        safeCopyText(code.textContent).then((copied) => {
+          if (!copied) return;
           btn.title = 'Copied!';
           setTimeout(() => { btn.title = 'Copy code'; }, 2000);
         });

package/src/clipboard.js

@@ -0,0 +1,44 @@
+export async function safeCopyText(value) {
+  const text = String(value ?? '');
+  if (!text) return false;
+
+  try {
+    const writeText = globalThis.navigator?.clipboard?.writeText;
+    if (typeof writeText === 'function') {
+      await writeText.call(globalThis.navigator.clipboard, text);
+      return true;
+    }
+  } catch {
+    // Fall through to the legacy DOM copy path below.
+  }
+
+  return fallbackCopyText(text);
+}
+
+function fallbackCopyText(text) {
+  const doc = globalThis.document;
+  if (!doc?.body || typeof doc.createElement !== 'function' || typeof doc.execCommand !== 'function') {
+    return false;
+  }
+
+  const textarea = doc.createElement('textarea');
+  textarea.value = text;
+  textarea.readOnly = true;
+  textarea.setAttribute('aria-hidden', 'true');
+  textarea.style.position = 'fixed';
+  textarea.style.left = '-9999px';
+  textarea.style.top = '0';
+  textarea.style.opacity = '0';
+
+  doc.body.appendChild(textarea);
+  try {
+    textarea.focus();
+    textarea.select();
+    textarea.setSelectionRange(0, textarea.value.length);
+    return Boolean(doc.execCommand('copy'));
+  } catch {
+    return false;
+  } finally {
+    textarea.remove();
+  }
+}

package/src/hash.js

@@ -0,0 +1,9 @@
+export function normalizeTabHash(rawHash) {
+  return String(rawHash || '')
+    .replace(/^#+/g, '')
+    .replace(/^\/+/g, '')
+    .split(/[/?#]/)[0]
+    .replace(/[^a-z0-9_-]/gi, '')
+    .replace(/-tab$/i, '')
+    .toLowerCase();
+}

package/styles/main.css

@@ -1214,6 +1214,11 @@ body:has(.modal.active) .nav-bar {
   align-items: center;
   gap: 10px;
   margin-top: 4px;
+  min-width: 0;
+}
+
+.account-address-label {
+  flex: 0 0 auto;
 }
 
 .account-address-select {
@@ -1236,9 +1241,9 @@ body:has(.modal.active) .nav-bar {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 280px;
-  flex: 1;
-  min-width: 0;
+  flex: 1 1 auto;
+  min-width: 12ch;
+  width: 100%;
 }
 
 .account-address-copy {
@@ -1246,10 +1251,13 @@ body:has(.modal.active) .nav-bar {
   border: none;
   color: var(--white-30);
   cursor: pointer;
+  height: 24px;
   padding: 2px;
+  width: 24px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 .account-address-copy:hover {
   color: var(--white-70);
@@ -1257,7 +1265,7 @@ body:has(.modal.active) .nav-bar {
 
 @media (max-width: 600px) {
   .account-address-display {
-    max-width: 140px;
+    min-width: 10ch;
   }
 }
 

package/styles/widget.css

@@ -1216,6 +1216,11 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   align-items: center;
   gap: 10px;
   margin-top: 4px;
+  min-width: 0;
+}
+
+#hd-wallet-ui-container .account-address-label {
+  flex: 0 0 auto;
 }
 
 #hd-wallet-ui-container .account-address-select {
@@ -1238,9 +1243,9 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 280px;
-  flex: 1;
-  min-width: 0;
+  flex: 1 1 auto;
+  min-width: 12ch;
+  width: 100%;
 }
 
 #hd-wallet-ui-container .account-address-copy {
@@ -1248,10 +1253,13 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   border: none;
   color: var(--white-30);
   cursor: pointer;
+  height: 24px;
   padding: 2px;
+  width: 24px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 #hd-wallet-ui-container .account-address-copy:hover {
   color: var(--white-70);
@@ -1259,7 +1267,7 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 
 @media (max-width: 600px) {
   #hd-wallet-ui-container .account-address-display {
-    max-width: 140px;
+    min-width: 10ch;
   }
 }