hd-wallet-ui 1.0.0

package/README.md

@@ -0,0 +1,158 @@
+# HD Wallet UI
+
+Standalone HD wallet interface with glass morphism design. Supports BIP-32/39/44 key derivation across multiple blockchain networks.
+
+## Features
+
+- **Multi-chain support** -- BTC, ETH, SOL, SUI, Monad, Cardano (and more via HD derivation)
+- **Three login methods** -- Password, BIP39 seed phrase, or stored wallet (PIN/Passkey)
+- **HD key derivation** -- BIP44 paths with configurable network, account, and index
+- **Secure storage** -- PIN (PBKDF2 + AES-256-GCM) or Passkey (WebAuthn PRF)
+- **vCard generation** -- Export identity with cryptographic public keys
+- **Live balance checking** -- Fetches balances from public blockchain APIs
+- **Glass morphism UI** -- Frosted glass aesthetic with blurred background
+
+## Quick Start
+
+```bash
+npm install
+npm run dev
+```
+
+Opens on `http://localhost:3000`.
+
+## Build
+
+```bash
+npm run build    # Output in dist/
+npm run preview  # Preview the build
+```
+
+## Project Structure
+
+```
+wallet-ui/
+├── index.html                  # Main HTML
+├── src/
+│   ├── app.js                  # Entry point, login/logout, UI handlers
+│   ├── wallet-storage.js       # Encrypted wallet storage (PIN/Passkey)
+│   ├── address-derivation.js   # Multi-chain address generation
+│   └── constants.js            # Coin configs, explorer URLs, path helpers
+├── styles/
+│   └── main.css                # Glass morphism styles
+├── package.json
+└── vite.config.js
+```
+
+## Usage Examples
+
+### Address Derivation
+
+```js
+import {
+  generateBtcAddress,
+  generateEthAddress,
+  generateSolAddress,
+  deriveSuiAddress,
+  deriveCardanoAddress,
+} from './src/address-derivation.js';
+
+// Bitcoin P2PKH from compressed secp256k1 pubkey
+const btcAddr = generateBtcAddress(compressedPubKey);   // "1A1zP1..."
+
+// Ethereum from secp256k1 (handles 33, 64, or 65 byte keys)
+const ethAddr = generateEthAddress(compressedPubKey);   // "0x..."
+
+// Solana from Ed25519 pubkey
+const solAddr = generateSolAddress(ed25519PubKey);      // Base58 string
+
+// SUI from Ed25519 with BLAKE2b
+const suiAddr = deriveSuiAddress(ed25519PubKey, 'ed25519');  // "0x..."
+
+// Cardano enterprise address (Bech32)
+const adaAddr = deriveCardanoAddress(ed25519PubKey);    // "addr1..."
+```
+
+### Derivation Paths
+
+```js
+import { buildSigningPath, buildEncryptionPath } from './src/constants.js';
+
+buildSigningPath(0, 0, 0);      // "m/44'/0'/0'/0/0"   (Bitcoin)
+buildSigningPath(60, 0, 0);     // "m/44'/60'/0'/0/0"  (Ethereum)
+buildEncryptionPath(0, 0, 0);   // "m/44'/0'/0'/1/0"   (encryption key)
+```
+
+### Coin Configuration
+
+```js
+import { cryptoConfig, coinTypeToConfig } from './src/constants.js';
+
+cryptoConfig.btc.explorer;            // "https://blockstream.info/address/"
+coinTypeToConfig[60].name;            // "Ethereum"
+cryptoConfig.eth.formatBalance(1e18); // "1.000000 ETH"
+```
+
+### Wallet Storage
+
+```js
+import WalletStorage, { StorageMethod } from './src/wallet-storage.js';
+
+// Store with PIN
+await WalletStorage.storeWithPIN('123456', { type: 'seed', seedPhrase: '...' });
+
+// Retrieve with PIN
+const data = await WalletStorage.retrieveWithPIN('123456');
+
+// Store with Passkey (WebAuthn PRF)
+await WalletStorage.storeWithPasskey(walletData, {
+  rpName: 'My Wallet',
+  userName: 'user',
+});
+
+// Check storage status
+const meta = WalletStorage.getStorageMetadata();
+// { method: 'passkey', storedAt: 1706000000000, version: 2 }
+```
+
+### Balance Fetching
+
+```js
+import {
+  fetchBtcBalance,
+  fetchEthBalance,
+  fetchSolBalance,
+} from './src/address-derivation.js';
+
+const { balance } = await fetchBtcBalance('1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa');
+// "50.00000000"
+
+const { balance: ethBal } = await fetchEthBalance('0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe');
+// "0.000000"
+```
+
+## Dependencies
+
+| Package | Purpose |
+|---------|---------|
+| `hd-wallet-wasm` | HD key derivation (BIP-32/39/44), WASM runtime |
+| `@noble/curves` | secp256k1, ed25519, p256 elliptic curves |
+| `@noble/hashes` | SHA-256, Keccak-256, RIPEMD-160, BLAKE2b |
+| `@scure/base` | Base58, Base58Check encoding |
+| `@scure/bip32` | BIP-32 extended key derivation |
+| `bip39` | BIP-39 mnemonic generation/validation |
+| `qrcode` | QR code rendering for addresses and vCards |
+| `vcard-cryptoperson` | vCard 4.0 with cryptographic keys |
+| `buffer` | Buffer polyfill for browser |
+
+## Tests
+
+```bash
+npm test
+```
+
+Runs unit tests for address derivation, Bech32 encoding, and coin configuration. See [test/](test/) for details.
+
+## License
+
+Same as parent `hd-wallet-wasm` repository.

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "hd-wallet-ui",
+  "version": "1.0.0",
+  "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",
+  "module": "src/app.js",
+  "exports": {
+    ".": "./src/app.js",
+    "./lib": "./src/lib.js",
+    "./styles": "./styles/main.css"
+  },
+  "files": [
+    "src/",
+    "styles/"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build:wasm": "emcmake cmake -B ../build-wasm -S .. -DCMAKE_BUILD_TYPE=Release -DHD_WALLET_BUILD_WASM=ON && cmake --build ../build-wasm --target hd_wallet_wasm_npm -j8",
+    "dev": "vite",
+    "dev:full": "npm run build:wasm && vite",
+    "build": "npm run build:wasm && vite build",
+    "build:docs": "npm run build:wasm && vite build --outDir ../docs --emptyOutDir",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@noble/curves": "^1.9.7",
+    "@noble/hashes": "^1.7.2",
+    "@peculiar/x509": "^1.14.3",
+    "@scure/base": "^1.2.4",
+    "@scure/bip32": "^2.0.1",
+    "bip39": "^3.1.0",
+    "buffer": "^6.0.3",
+    "flatbuffers": "^25.9.23",
+    "hd-wallet-wasm": "file:../wasm",
+    "qrcode": "^1.5.3",
+    "vcard-cryptoperson": "^1.1.10"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "vitest": "^4.0.18"
+  },
+  "keywords": [
+    "hd-wallet",
+    "wallet-ui",
+    "webassembly",
+    "wasm",
+    "bip32",
+    "bip39",
+    "bip44",
+    "cryptocurrency",
+    "bitcoin",
+    "ethereum",
+    "solana"
+  ],
+  "license": "Apache-2.0"
+}

package/src/address-derivation.js

@@ -0,0 +1,476 @@
+/**
+ * Address Derivation Module
+ *
+ * Functions for generating blockchain addresses from public keys:
+ * BTC, ETH, SOL, SUI, Monad, Cardano
+ */
+
+import { secp256k1 } from '@noble/curves/secp256k1';
+import { blake2b } from '@noble/hashes/blake2b';
+import { keccak_256 } from '@noble/hashes/sha3';
+import { ripemd160 } from '@noble/hashes/ripemd160';
+import { sha256 as sha256Noble } from '@noble/hashes/sha256';
+import { base58check, base58 } from '@scure/base';
+
+import { coinTypeToConfig } from './constants.js';
+
+// =============================================================================
+// API Proxy (dev mode CORS workaround)
+// =============================================================================
+
+const isDev = import.meta.env?.DEV ?? false;
+
+const proxyMap = {
+  'https://blockchain.info': '/api/blockchain',
+  'https://cloudflare-eth.com': '/api/eth',
+  'https://api.mainnet-beta.solana.com': '/api/solana/official',
+  'https://solana-rpc.publicnode.com': '/api/solana/publicnode',
+  'https://mainnet.helius-rpc.com': '/api/solana/helius',
+  /* Commented out — BTC/ETH/SOL only for now
+  'https://fullnode.mainnet.sui.io:443': '/api/sui',
+  'https://testnet-rpc.monad.xyz': '/api/monad',
+  'https://api.koios.rest': '/api/koios',
+  'https://s1.ripple.com:51234': '/api/xrp',
+  */
+  'https://api.coinbase.com': '/api/coinbase',
+  'https://api.hiro.so': '/api/hiro',
+};
+
+export function apiUrl(url) {
+  if (!isDev) return url;
+  for (const [origin, proxy] of Object.entries(proxyMap)) {
+    if (url.startsWith(origin)) {
+      return url.replace(origin, proxy);
+    }
+  }
+  return url;
+}
+
+// =============================================================================
+// Utility Helpers
+// =============================================================================
+
+/**
+ * Convert a Uint8Array to a compact hex string (no spaces)
+ * @param {Uint8Array} bytes
+ * @returns {string}
+ */
+export function toHexCompact(bytes) {
+  return Array.from(bytes).map(b => b.toString(16).padStart(2, '0')).join('');
+}
+
+/**
+ * Alias for toHexCompact
+ */
+export function toHex(bytes) {
+  return toHexCompact(bytes);
+}
+
+/**
+ * Convert hex string to Uint8Array
+ * @param {string} hex
+ * @returns {Uint8Array}
+ */
+export function hexToBytes(hex) {
+  const bytes = new Uint8Array(hex.length / 2);
+  for (let i = 0; i < hex.length; i += 2) {
+    bytes[i / 2] = parseInt(hex.substr(i, 2), 16);
+  }
+  return bytes;
+}
+
+/**
+ * Ensure a value is a Uint8Array.
+ * Handles localStorage deserialization which produces plain objects.
+ * @param {*} value
+ * @returns {Uint8Array}
+ */
+export function ensureUint8Array(value) {
+  if (value instanceof Uint8Array) {
+    return value;
+  }
+  if (typeof value === 'object' && value !== null) {
+    return new Uint8Array(Object.values(value));
+  }
+  return new Uint8Array(value);
+}
+
+// =============================================================================
+// Base58Check encoder for Bitcoin
+// =============================================================================
+
+const base58checkBtc = base58check(sha256Noble);
+
+// =============================================================================
+// Address Generation Functions
+// =============================================================================
+
+/**
+ * Generate a Bitcoin P2PKH address from a compressed secp256k1 public key
+ * Uses @scure/base for proper Base58Check encoding
+ * @param {Uint8Array} publicKey - Compressed secp256k1 public key (33 bytes)
+ * @returns {string} Bitcoin address starting with '1'
+ */
+export function generateBtcAddress(publicKey) {
+  const hash160 = ripemd160(sha256Noble(publicKey));
+  return base58checkBtc.encode(new Uint8Array([0x00, ...hash160]));
+}
+
+/**
+ * Generate an Ethereum address from a secp256k1 public key
+ * Uses @noble/hashes keccak_256 for proper Ethereum address derivation
+ * @param {Uint8Array} publicKey - Compressed secp256k1 public key (33 bytes)
+ * @returns {string} Ethereum address with 0x prefix
+ */
+export function generateEthAddress(publicKey) {
+  const point = secp256k1.ProjectivePoint.fromHex(publicKey);
+  const uncompressed = point.toRawBytes(false); // 65 bytes: 04 || x || y
+  const hash = keccak_256(uncompressed.slice(1));
+  return '0x' + toHexCompact(hash.slice(-20));
+}
+
+/**
+ * Generate a Solana address from an Ed25519 public key
+ * Uses @scure/base for proper Base58 encoding
+ * @param {Uint8Array} publicKey - Ed25519 public key (32 bytes)
+ * @returns {string} Solana address
+ */
+export function generateSolAddress(publicKey) {
+  return base58.encode(publicKey);
+}
+
+/**
+ * Generate an XRP address from a compressed secp256k1 public key
+ * Uses SHA-256 → RIPEMD-160 hash, then Base58Check with version byte 0x00
+ * @param {Uint8Array} publicKey - Compressed secp256k1 public key (33 bytes)
+ * @returns {string} XRP address starting with 'r'
+ */
+export function generateXrpAddress(publicKey) {
+  const hash160 = ripemd160(sha256Noble(publicKey));
+  // XRP uses the same Base58Check as BTC but the alphabet produces 'r' prefix
+  return base58checkBtc.encode(new Uint8Array([0x00, ...hash160]));
+}
+
+/**
+ * Derive an Ethereum/Monad-compatible address from a secp256k1 public key.
+ * Handles compressed (33 bytes), uncompressed (65 bytes), and raw (64 bytes) formats.
+ * @param {Uint8Array} publicKey
+ * @returns {string|null} Ethereum address with 0x prefix, or null on failure
+ */
+export function deriveEthAddress(publicKey) {
+  try {
+    if (publicKey.length === 33) {
+      const point = secp256k1.ProjectivePoint.fromHex(publicKey);
+      const uncompressed = point.toRawBytes(false).slice(1);
+      const hash = keccak_256(uncompressed);
+      return '0x' + toHex(hash.slice(-20));
+    }
+    if (publicKey.length === 65) {
+      const hash = keccak_256(publicKey.slice(1));
+      return '0x' + toHex(hash.slice(-20));
+    }
+    if (publicKey.length === 64) {
+      const hash = keccak_256(publicKey);
+      return '0x' + toHex(hash.slice(-20));
+    }
+    return null;
+  } catch (e) {
+    return null;
+  }
+}
+
+/**
+ * Derive a SUI address from a public key using BLAKE2b
+ * @param {Uint8Array} publicKey - Public key bytes
+ * @param {string} scheme - Key scheme: 'ed25519', 'secp256k1', or 'secp256r1'
+ * @returns {string} SUI address with 0x prefix
+ */
+export function deriveSuiAddress(publicKey, scheme = 'ed25519') {
+  const schemeFlags = {
+    'ed25519': 0x00,
+    'secp256k1': 0x01,
+    'secp256r1': 0x02,
+  };
+  const flag = schemeFlags[scheme] ?? 0x00;
+
+  const data = new Uint8Array(1 + publicKey.length);
+  data[0] = flag;
+  data.set(publicKey, 1);
+
+  const hash = blake2b(data, { dkLen: 32 });
+  return '0x' + Array.from(hash).map(b => b.toString(16).padStart(2, '0')).join('');
+}
+
+/**
+ * Derive a Monad address from a secp256k1 public key (same as Ethereum derivation)
+ * @param {Uint8Array} publicKey - secp256k1 public key (33 or 65 bytes)
+ * @returns {string} Monad address with 0x prefix
+ */
+export function deriveMonadAddress(publicKey) {
+  let uncompressedPubKey;
+  if (publicKey.length === 33) {
+    const point = secp256k1.ProjectivePoint.fromHex(publicKey);
+    uncompressedPubKey = point.toRawBytes(false);
+  } else if (publicKey.length === 65) {
+    uncompressedPubKey = publicKey;
+  } else {
+    throw new Error('Invalid public key length for Monad address derivation');
+  }
+
+  const hash = keccak_256(uncompressedPubKey.slice(1));
+  const address = hash.slice(-20);
+  return '0x' + Array.from(address).map(b => b.toString(16).padStart(2, '0')).join('');
+}
+
+/**
+ * Derive a Cardano enterprise address from an Ed25519 public key
+ * Uses Bech32 encoding with "addr" prefix for mainnet
+ * @param {Uint8Array} publicKey - Ed25519 public key (32 bytes)
+ * @returns {string} Cardano address in Bech32 format
+ */
+export function deriveCardanoAddress(publicKey) {
+  const keyHash = blake2b(publicKey, { dkLen: 28 }); // 224-bit hash
+  const addressBytes = new Uint8Array(29);
+  addressBytes[0] = 0x61; // Enterprise address, mainnet
+  addressBytes.set(keyHash, 1);
+  return bech32Encode('addr', addressBytes);
+}
+
+// =============================================================================
+// Bech32 Encoding (for Cardano)
+// =============================================================================
+
+function bech32Encode(prefix, data) {
+  const CHARSET = 'qpzry9x8gf2tvdw0s3jn54khce6mua7l';
+
+  const data5bit = convertBits(data, 8, 5, true);
+  const checksumData = expandHrp(prefix).concat(data5bit).concat([0, 0, 0, 0, 0, 0]);
+  const polymod = bech32Polymod(checksumData) ^ 1;
+  const checksum = [];
+  for (let i = 0; i < 6; i++) {
+    checksum.push((polymod >> (5 * (5 - i))) & 31);
+  }
+
+  let result = prefix + '1';
+  for (const d of data5bit.concat(checksum)) {
+    result += CHARSET[d];
+  }
+  return result;
+}
+
+function convertBits(data, fromBits, toBits, pad) {
+  let acc = 0;
+  let bits = 0;
+  const ret = [];
+  const maxv = (1 << toBits) - 1;
+  for (const value of data) {
+    acc = (acc << fromBits) | value;
+    bits += fromBits;
+    while (bits >= toBits) {
+      bits -= toBits;
+      ret.push((acc >> bits) & maxv);
+    }
+  }
+  if (pad) {
+    if (bits > 0) {
+      ret.push((acc << (toBits - bits)) & maxv);
+    }
+  }
+  return ret;
+}
+
+function expandHrp(hrp) {
+  const ret = [];
+  for (const c of hrp) {
+    ret.push(c.charCodeAt(0) >> 5);
+  }
+  ret.push(0);
+  for (const c of hrp) {
+    ret.push(c.charCodeAt(0) & 31);
+  }
+  return ret;
+}
+
+function bech32Polymod(values) {
+  const GEN = [0x3b6a57b2, 0x26508e6d, 0x1ea119fa, 0x3d4233dd, 0x2a1462b3];
+  let chk = 1;
+  for (const v of values) {
+    const b = chk >> 25;
+    chk = ((chk & 0x1ffffff) << 5) ^ v;
+    for (let i = 0; i < 5; i++) {
+      if ((b >> i) & 1) {
+        chk ^= GEN[i];
+      }
+    }
+  }
+  return chk;
+}
+
+// =============================================================================
+// Composite Address Generation
+// =============================================================================
+
+/**
+ * Generate BTC, ETH, and SOL addresses from a wallet key set
+ * @param {{ secp256k1: { publicKey: Uint8Array }, ed25519: { publicKey: Uint8Array } }} wallet
+ * @returns {{ btc: string, eth: string, sol: string }}
+ */
+export function generateAddresses(wallet) {
+  return {
+    btc: generateBtcAddress(wallet.secp256k1.publicKey),
+    eth: generateEthAddress(wallet.secp256k1.publicKey),
+    sol: generateSolAddress(wallet.ed25519.publicKey),
+    // xrp: generateXrpAddress(wallet.secp256k1.publicKey), // Commented out — BTC/ETH/SOL only for now
+  };
+}
+
+/**
+ * Generate address from public key based on coin type for HD derivation
+ * @param {Uint8Array} publicKey - The derived public key
+ * @param {number} coinType - BIP44 coin type
+ * @returns {string} The generated address
+ */
+export function generateAddressForCoin(publicKey, coinType) {
+  const config = coinTypeToConfig[coinType];
+  if (!config) {
+    return toHexCompact(publicKey);
+  }
+
+  switch (coinType) {
+    case 0:   // Bitcoin
+    case 2:   // Litecoin
+    case 3:   // Dogecoin
+    case 145: // Bitcoin Cash
+      return generateBtcAddress(publicKey);
+
+    case 60:  // Ethereum
+      return generateEthAddress(publicKey);
+
+    case 501: // Solana - uses ed25519, but we generate from secp256k1 for demo
+      return base58.encode(publicKey.slice(0, 32));
+
+    case 144: // XRP
+      return generateXrpAddress(publicKey);
+
+    case 118: // Cosmos
+    case 330: // Algorand
+    case 354: // Polkadot
+    case 1815: { // Cardano
+      const hash = sha256Noble(publicKey);
+      return toHexCompact(hash.slice(0, 20));
+    }
+
+    default: {
+      const defaultHash = sha256Noble(publicKey);
+      return toHexCompact(defaultHash.slice(0, 20));
+    }
+  }
+}
+
+/**
+ * Truncate an address for display
+ * @param {string} address
+ * @returns {string}
+ */
+export function truncateAddress(address) {
+  if (address.length <= 16) return address;
+  return address.slice(0, 8) + '...' + address.slice(-6);
+}
+
+// =============================================================================
+// Balance Fetching
+// =============================================================================
+
+/**
+ * Fetch Bitcoin balance
+ * @param {string} address
+ * @returns {Promise<{balance: string, error?: string}>}
+ */
+export async function fetchBtcBalance(address) {
+  try {
+    const response = await fetch(apiUrl(`https://blockchain.info/q/addressbalance/${address}?cors=true`));
+    if (!response.ok) {
+      return { balance: '0', error: 'API error' };
+    }
+    const satoshis = await response.text();
+    const btc = parseInt(satoshis, 10) / 1e8;
+    return { balance: btc.toFixed(8) };
+  } catch (e) {
+    console.debug('BTC balance fetch unavailable:', e.message);
+    return { balance: '--', error: e.message };
+  }
+}
+
+/**
+ * Fetch Ethereum balance
+ * @param {string} address
+ * @returns {Promise<{balance: string, error?: string}>}
+ */
+export async function fetchEthBalance(address) {
+  try {
+    const response = await fetch(apiUrl('https://cloudflare-eth.com'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        jsonrpc: '2.0',
+        id: 1,
+        method: 'eth_getBalance',
+        params: [address, 'latest']
+      })
+    });
+    const data = await response.json();
+    if (data.error) {
+      return { balance: '0', error: data.error.message };
+    }
+    const balanceWei = BigInt(data.result || '0x0');
+    const balanceEth = Number(balanceWei) / 1e18;
+    return { balance: balanceEth.toFixed(6) };
+  } catch (e) {
+    console.debug('ETH balance fetch unavailable:', e.message);
+    return { balance: '--', error: e.message };
+  }
+}
+
+/**
+ * Fetch Solana balance
+ * @param {string} address
+ * @returns {Promise<{balance: string, error?: string}>}
+ */
+export async function fetchSolBalance(address) {
+  const endpoints = [
+    'https://api.mainnet-beta.solana.com',
+    'https://solana-rpc.publicnode.com',
+    'https://mainnet.helius-rpc.com/?api-key=1d8740dc-e5f4-421c-b823-e1bad1889eda',
+  ];
+
+  for (const endpoint of endpoints) {
+    try {
+      const response = await fetch(apiUrl(endpoint), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          jsonrpc: '2.0',
+          id: 1,
+          method: 'getBalance',
+          params: [address]
+        })
+      });
+      if (!response.ok) continue;
+      const data = await response.json();
+      if (data.error) continue;
+      const lamports = data.result?.value || 0;
+      const sol = lamports / 1e9;
+      return { balance: sol.toFixed(6) };
+    } catch (e) {
+      continue;
+    }
+  }
+  console.debug('SOL balance fetch unavailable: all endpoints failed');
+  return { balance: '--', error: 'No available endpoint' };
+}
+
+// Commented out — BTC/ETH/SOL only for now
+// export async function fetchSuiBalance(address) { ... }
+// export async function fetchMonadBalance(address) { ... }
+// export async function fetchAdaBalance(address) { ... }
+// export async function fetchXrpBalance(address) { ... }