initial commit

README.md

@@ -0,0 +1,39 @@
+# macu wallet
+
+A non-custodial, multi-chain (Ethereum/EVM, Bitcoin, Solana) desktop wallet built on Electron.
+One seed phrase, standard BIP44 derivation, encrypted at rest.
+
+## Run it
+
+```bash
+npm install
+npm start
+```
+
+Requires Node.js 18+ and npm. First run creates a new wallet (or import an existing 12/24-word phrase).
+
+## What's here
+
+- `src/core/keystore.js` — mnemonic generation, scrypt + AES-256-GCM encryption at rest
+- `src/core/chains.js` — BIP44 derivation for Ethereum, Bitcoin (native segwit), and Solana from one seed
+- `src/core/balances.js` — reads balances over RPC / a block explorer API
+- `main.js` / `preload.js` — Electron process split: **only** `main.js` ever touches a decrypted private key; the UI talks to it over a narrow IPC bridge
+- `src/renderer/` — the UI (create/import, backup phrase, password, dashboard, send ETH)
+
+## Before this holds real funds — read this
+
+This is a solid, correctly-structured foundation, not a finished, audited product. Specifically:
+
+1. **No security audit.** Wallet software handling real private keys should get an independent security review before real money touches it. I can't provide that as a chat assistant — please have someone qualified review this, or start on testnets.
+2. **Sending is only wired up for Ethereum.** Bitcoin needs UTXO selection + PSBT signing; Solana needs instruction building. Same pattern as `wallet:sendEth` in `main.js`, but each chain's transaction format is different — happy to build these out next.
+3. **Default RPC endpoints in `config.json` are free public ones.** Rate-limited, and you're trusting a third party's node for balance data. Swap in your own Infura/Alchemy/Helius keys for anything beyond testing.
+4. **No hardware wallet support.** A production wallet usually lets a user keep keys on a Ledger/Trezor instead of software-only storage — worth adding before this holds meaningful amounts.
+5. **The password is the only thing standing between the encrypted file and your funds.** There's no recovery mechanism by design (that's what non-custodial means) — losing the recovery phrase means losing access, permanently.
+6. **Test on testnets first.** Use Sepolia (Ethereum), Bitcoin testnet, and Solana devnet before ever sending real assets.
+
+## Next steps I'd suggest, in order
+
+1. Get it running locally and create a test wallet on testnets
+2. Wire up Bitcoin and Solana sending (I can help build these)
+3. Add a "confirm transaction details" screen before any send fires — right now it sends immediately, which is too easy to fat-finger
+4. Get a real security review before mainnet use with meaningful funds

config.json

@@ -0,0 +1,14 @@
+{
+  "ethereum": {
+    "rpcUrl": "https://eth.llamarpc.com",
+    "_note": "Free public endpoint, rate-limited. Swap in your own Infura/Alchemy URL for real use."
+  },
+  "solana": {
+    "rpcUrl": "https://api.mainnet-beta.solana.com",
+    "_note": "Free public endpoint, rate-limited. Swap in your own Helius/QuickNode URL for real use."
+  },
+  "bitcoin": {
+    "apiBase": "https://blockstream.info/api",
+    "_note": "Public block explorer API. Fine for balance checks; run your own node for anything serious."
+  }
+}

main.js

@@ -0,0 +1,111 @@
+const { app, BrowserWindow, ipcMain } = require('electron');
+const path = require('path');
+const fs = require('fs');
+const { ethers } = require('ethers');
+
+const keystore = require('./src/core/keystore');
+const chains = require('./src/core/chains');
+const balances = require('./src/core/balances');
+
+const KEYSTORE_PATH = path.join(app.getPath('userData'), 'keystore.json');
+const config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json'), 'utf8'));
+
+// Holds the derived accounts ONLY while unlocked, in memory. Never written
+// to disk in plaintext. Cleared on lock/quit.
+let session = null;
+
+function createWindow() {
+  const win = new BrowserWindow({
+    width: 1180,
+    height: 780,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false,
+    },
+  });
+  win.loadFile(path.join(__dirname, 'src/renderer/index.html'));
+}
+
+app.whenReady().then(createWindow);
+app.on('window-all-closed', () => {
+  session = null;
+  if (process.platform !== 'darwin') app.quit();
+});
+
+// ---------- IPC handlers ----------
+
+ipcMain.handle('wallet:hasKeystore', () => fs.existsSync(KEYSTORE_PATH));
+
+ipcMain.handle('wallet:generateMnemonic', () => keystore.generateMnemonic());
+
+function createOrImportWallet(mnemonic, password) {
+  if (!keystore.validateMnemonic(mnemonic)) {
+    throw new Error('That recovery phrase does not look valid. Check the word list and try again.');
+  }
+  const encrypted = keystore.encryptMnemonic(mnemonic.trim(), password);
+  keystore.saveKeystore(KEYSTORE_PATH, encrypted);
+  session = { accounts: chains.deriveAllChains(mnemonic.trim()) };
+  return publicAccounts();
+}
+
+ipcMain.handle('wallet:create', (_evt, { mnemonic, password }) => createOrImportWallet(mnemonic, password));
+ipcMain.handle('wallet:import', (_evt, { mnemonic, password }) => createOrImportWallet(mnemonic, password));
+
+ipcMain.handle('wallet:unlock', (_evt, { password }) => {
+  if (!fs.existsSync(KEYSTORE_PATH)) throw new Error('No wallet found on this device.');
+  const stored = keystore.loadKeystore(KEYSTORE_PATH);
+  let mnemonic;
+  try {
+    mnemonic = keystore.decryptMnemonic(stored, password);
+  } catch {
+    throw new Error('Incorrect password.');
+  }
+  session = { accounts: chains.deriveAllChains(mnemonic) };
+  return publicAccounts();
+});
+
+ipcMain.handle('wallet:lock', () => {
+  session = null;
+  return true;
+});
+
+ipcMain.handle('wallet:balances', async () => {
+  requireSession();
+  const { ethereum, bitcoin, solana } = session.accounts;
+  const [eth, btc, sol] = await Promise.allSettled([
+    balances.getEthBalance(ethereum.address, config.ethereum.rpcUrl),
+    balances.getBtcBalance(bitcoin.address, config.bitcoin.apiBase),
+    balances.getSolBalance(solana.address, config.solana.rpcUrl),
+  ]);
+  return {
+    ethereum: eth.status === 'fulfilled' ? eth.value : null,
+    bitcoin: btc.status === 'fulfilled' ? btc.value : null,
+    solana: sol.status === 'fulfilled' ? sol.value : null,
+  };
+});
+
+// Ethereum send is wired up as the reference implementation; Bitcoin/Solana
+// sending follow the same shape but need UTXO selection / instruction
+// building respectively — see README for what's left to fill in.
+ipcMain.handle('wallet:sendEth', async (_evt, { to, amountEth }) => {
+  requireSession();
+  const provider = new ethers.JsonRpcProvider(config.ethereum.rpcUrl);
+  const wallet = new ethers.Wallet(session.accounts.ethereum.privateKey, provider);
+  const tx = await wallet.sendTransaction({ to, value: ethers.parseEther(amountEth) });
+  return { hash: tx.hash };
+});
+
+function requireSession() {
+  if (!session) throw new Error('Wallet is locked.');
+}
+
+function publicAccounts() {
+  // Strip private keys before sending anything to the renderer process.
+  const { ethereum, bitcoin, solana } = session.accounts;
+  return {
+    ethereum: { address: ethereum.address, path: ethereum.path },
+    bitcoin: { address: bitcoin.address, path: bitcoin.path },
+    solana: { address: solana.address, path: solana.path },
+  };
+}

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "macu-wallet",
+  "version": "0.1.0",
+  "description": "Non-custodial multi-chain desktop wallet (Ethereum/EVM, Bitcoin, Solana)",
+  "main": "main.js",
+  "scripts": {
+    "start": "electron .",
+    "dist": "electron-builder"
+  },
+  "dependencies": {
+    "bip39": "^3.1.0",
+    "bip32": "^4.0.0",
+    "tiny-secp256k1": "^2.2.3",
+    "ethers": "^6.13.0",
+    "bitcoinjs-lib": "^6.1.5",
+    "ecpair": "^2.1.0",
+    "@solana/web3.js": "^1.95.0",
+    "ed25519-hd-key": "^1.3.0"
+  },
+  "devDependencies": {
+    "electron": "^31.0.0",
+    "electron-builder": "^24.13.3"
+  }
+}

preload.js

@@ -0,0 +1,16 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+// Only these specific calls are exposed to the renderer (webpage) side.
+// Nothing here touches the filesystem or private keys directly — every
+// call is proxied through main.js, which is the only place that ever
+// holds a decrypted mnemonic or private key.
+contextBridge.exposeInMainWorld('macu', {
+  hasKeystore: () => ipcRenderer.invoke('wallet:hasKeystore'),
+  generateMnemonic: () => ipcRenderer.invoke('wallet:generateMnemonic'),
+  createWallet: (mnemonic, password) => ipcRenderer.invoke('wallet:create', { mnemonic, password }),
+  importWallet: (mnemonic, password) => ipcRenderer.invoke('wallet:import', { mnemonic, password }),
+  unlock: (password) => ipcRenderer.invoke('wallet:unlock', { password }),
+  lock: () => ipcRenderer.invoke('wallet:lock'),
+  getBalances: () => ipcRenderer.invoke('wallet:balances'),
+  sendEth: (to, amountEth) => ipcRenderer.invoke('wallet:sendEth', { to, amountEth }),
+});

src/core/balances.js

@@ -0,0 +1,39 @@
+/**
+ * balances.js
+ *
+ * Reads on-chain balances. Requires the user to configure RPC endpoints
+ * (config.json) — we don't bake in a paid provider's API key. Free public
+ * endpoints are set as defaults so it works out of the box, but they are
+ * rate-limited and not meant for production use.
+ */
+
+const { ethers } = require('ethers');
+const { Connection, PublicKey, LAMPORTS_PER_SOL } = require('@solana/web3.js');
+
+async function getEthBalance(address, rpcUrl) {
+  const provider = new ethers.JsonRpcProvider(rpcUrl);
+  const wei = await provider.getBalance(address);
+  return ethers.formatEther(wei); // returns a decimal string, e.g. "1.234"
+}
+
+async function getSolBalance(address, rpcUrl) {
+  const connection = new Connection(rpcUrl);
+  const lamports = await connection.getBalance(new PublicKey(address));
+  return (lamports / LAMPORTS_PER_SOL).toString();
+}
+
+/** Bitcoin: no JSON-RPC by default without running your own node, so we
+ * use a block explorer's public REST API (Blockstream) instead. */
+async function getBtcBalance(address, apiBase = 'https://blockstream.info/api') {
+  const res = await fetch(`${apiBase}/address/${address}`);
+  if (!res.ok) throw new Error(`Blockstream API error: ${res.status}`);
+  const data = await res.json();
+  const sats =
+    data.chain_stats.funded_txo_sum -
+    data.chain_stats.spent_txo_sum +
+    data.mempool_stats.funded_txo_sum -
+    data.mempool_stats.spent_txo_sum;
+  return (sats / 1e8).toString();
+}
+
+module.exports = { getEthBalance, getSolBalance, getBtcBalance };

src/core/chains.js

@@ -0,0 +1,83 @@
+/**
+ * chains.js
+ *
+ * Derives per-chain keypairs/addresses from one BIP39 mnemonic, using the
+ * standard BIP44 derivation paths so the wallet is compatible with other
+ * wallets/tools if the user ever needs to import the same seed elsewhere.
+ *
+ *   Ethereum / EVM : m/44'/60'/0'/0/0
+ *   Bitcoin (native segwit, bech32) : m/84'/0'/0'/0/0
+ *   Solana : m/44'/501'/0'/0'   (ed25519, hardened-only path per SLIP-0010)
+ *
+ * Private keys are returned in-memory only — callers are responsible for
+ * not logging them, not writing them to disk unencrypted, and clearing
+ * references when done.
+ */
+
+const bip39 = require('bip39');
+const { BIP32Factory } = require('bip32');
+const ecc = require('tiny-secp256k1');
+const bitcoin = require('bitcoinjs-lib');
+const { ethers } = require('ethers');
+const { Keypair } = require('@solana/web3.js');
+const { derivePath: edDerivePath } = require('ed25519-hd-key');
+
+const bip32 = BIP32Factory(ecc);
+
+function seedFromMnemonic(mnemonic) {
+  return bip39.mnemonicToSeedSync(mnemonic.trim());
+}
+
+function deriveEthereum(mnemonic, index = 0) {
+  const path = `m/44'/60'/0'/0/${index}`;
+  const wallet = ethers.HDNodeWallet.fromPhrase(mnemonic.trim(), undefined, path);
+  return {
+    chain: 'ethereum',
+    path,
+    address: wallet.address,
+    privateKey: wallet.privateKey, // 0x-prefixed hex
+  };
+}
+
+function deriveBitcoin(mnemonic, index = 0, network = bitcoin.networks.bitcoin) {
+  const path = `m/84'/0'/0'/0/${index}`; // native segwit (bech32, "bc1...")
+  const seed = seedFromMnemonic(mnemonic);
+  const root = bip32.fromSeed(seed, network);
+  const child = root.derivePath(path);
+  const { address } = bitcoin.payments.p2wpkh({ pubkey: child.publicKey, network });
+  return {
+    chain: 'bitcoin',
+    path,
+    address,
+    privateKeyWIF: child.toWIF(),
+  };
+}
+
+function deriveSolana(mnemonic, index = 0) {
+  const path = `m/44'/501'/${index}'/0'`;
+  const seed = seedFromMnemonic(mnemonic);
+  const { key } = edDerivePath(path, seed.toString('hex'));
+  const keypair = Keypair.fromSeed(key);
+  return {
+    chain: 'solana',
+    path,
+    address: keypair.publicKey.toBase58(),
+    secretKey: Buffer.from(keypair.secretKey).toString('hex'),
+  };
+}
+
+/** Derive the default (index 0) account on every supported chain at once. */
+function deriveAllChains(mnemonic) {
+  return {
+    ethereum: deriveEthereum(mnemonic, 0),
+    bitcoin: deriveBitcoin(mnemonic, 0),
+    solana: deriveSolana(mnemonic, 0),
+  };
+}
+
+module.exports = {
+  deriveEthereum,
+  deriveBitcoin,
+  deriveSolana,
+  deriveAllChains,
+};

src/core/keystore.js

@@ -0,0 +1,101 @@
+/**
+ * keystore.js
+ *
+ * Handles the ONE thing that must never go wrong: turning a 12/24-word
+ * recovery phrase into an encrypted file on disk, and back again.
+ *
+ * Design choices (why):
+ * - We never persist the mnemonic in plaintext, anywhere, ever.
+ * - Key derivation from password uses scrypt (memory-hard, resists GPU
+ *   brute-force better than PBKDF2 at equivalent settings).
+ * - Encryption is AES-256-GCM, which gives us both confidentiality and
+ *   integrity (tamper detection) in one primitive.
+ * - Every encryption uses a fresh random salt + IV, stored alongside the
+ *   ciphertext (this is safe — salts/IVs are not secret).
+ */
+
+const crypto = require('crypto');
+const fs = require('fs');
+const bip39 = require('bip39');
+
+const SCRYPT_PARAMS = { N: 2 ** 17, r: 8, p: 1 }; // ~0.5-1s on modern hardware
+const KEY_LEN = 32; // AES-256
+
+/** Generate a brand-new 24-word mnemonic (256 bits of entropy). */
+function generateMnemonic() {
+  return bip39.generateMnemonic(256);
+}
+
+function validateMnemonic(mnemonic) {
+  return bip39.validateMnemonic(mnemonic.trim());
+}
+
+/**
+ * Encrypt a mnemonic with a user password.
+ * Returns a JSON-serializable object safe to write to disk.
+ */
+function encryptMnemonic(mnemonic, password) {
+  const salt = crypto.randomBytes(16);
+  const iv = crypto.randomBytes(12); // GCM standard IV length
+  const key = crypto.scryptSync(password, salt, KEY_LEN, SCRYPT_PARAMS);
+
+  const cipher = crypto.createCipheriv('aes-256-gcm', key, iv);
+  const ciphertext = Buffer.concat([
+    cipher.update(mnemonic, 'utf8'),
+    cipher.final(),
+  ]);
+  const authTag = cipher.getAuthTag();
+
+  return {
+    version: 1,
+    kdf: 'scrypt',
+    kdfParams: { ...SCRYPT_PARAMS, salt: salt.toString('hex') },
+    cipher: 'aes-256-gcm',
+    iv: iv.toString('hex'),
+    ciphertext: ciphertext.toString('hex'),
+    authTag: authTag.toString('hex'),
+  };
+}
+
+/**
+ * Decrypt a keystore object with the user's password.
+ * Throws if the password is wrong (auth tag check fails) — this is
+ * intentional; GCM detects tampering/incorrect keys and we don't want to
+ * silently return garbage.
+ */
+function decryptMnemonic(keystoreObj, password) {
+  const { kdfParams, iv, ciphertext, authTag } = keystoreObj;
+  const salt = Buffer.from(kdfParams.salt, 'hex');
+  const key = crypto.scryptSync(password, salt, KEY_LEN, {
+    N: kdfParams.N,
+    r: kdfParams.r,
+    p: kdfParams.p,
+  });
+
+  const decipher = crypto.createDecipheriv('aes-256-gcm', key, Buffer.from(iv, 'hex'));
+  decipher.setAuthTag(Buffer.from(authTag, 'hex'));
+
+  const plaintext = Buffer.concat([
+    decipher.update(Buffer.from(ciphertext, 'hex')),
+    decipher.final(), // throws "Unsupported state or unable to authenticate data" on wrong password
+  ]);
+
+  return plaintext.toString('utf8');
+}
+
+function saveKeystore(path, keystoreObj) {
+  fs.writeFileSync(path, JSON.stringify(keystoreObj, null, 2), { mode: 0o600 });
+}
+
+function loadKeystore(path) {
+  return JSON.parse(fs.readFileSync(path, 'utf8'));
+}
+
+module.exports = {
+  generateMnemonic,
+  validateMnemonic,
+  encryptMnemonic,
+  decryptMnemonic,
+  saveKeystore,
+  loadKeystore,
+};

src/renderer/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>macu</title>
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script src="renderer.js"></script>
+</body>
+</html>

src/renderer/renderer.js

@@ -0,0 +1,211 @@
+const app = document.getElementById('app');
+
+let pendingMnemonic = null; // held briefly in renderer memory during onboarding only
+let accounts = null;
+
+async function boot() {
+  const hasKeystore = await window.macu.hasKeystore();
+  hasKeystore ? renderUnlock() : renderWelcome();
+}
+
+// ---------- Welcome / choose create vs import ----------
+function renderWelcome() {
+  app.innerHTML = `
+    <div class="center-screen">
+      <div class="card">
+        <h1 class="serif">Welcome to macu</h1>
+        <p class="sub">A non-custodial wallet. Your keys are generated and encrypted on this device only — macu never sees them, and there's no account recovery if you lose your recovery phrase and password.</p>
+        <button class="btn btn-primary" id="btn-create">Create a new wallet</button>
+        <button class="btn btn-ghost" id="btn-import">Import an existing wallet</button>
+      </div>
+    </div>`;
+  document.getElementById('btn-create').onclick = startCreate;
+  document.getElementById('btn-import').onclick = renderImport;
+}
+
+// ---------- Create: generate + show backup phrase ----------
+async function startCreate() {
+  pendingMnemonic = await window.macu.generateMnemonic();
+  renderBackup();
+}
+
+function renderBackup() {
+  const words = pendingMnemonic.split(' ');
+  app.innerHTML = `
+    <div class="center-screen">
+      <div class="card" style="max-width:560px;">
+        <h1 class="serif">Your recovery phrase</h1>
+        <p class="sub">Write these 24 words down in order and store them somewhere safe and offline. Anyone with this phrase can access your funds on every chain — including you, if you lose it.</p>
+        <div class="warning">macu cannot recover this for you. There is no "forgot password" for a recovery phrase.</div>
+        <div class="mnemonic-grid">
+          ${words.map((w, i) => `<div class="mnemonic-word"><span class="idx">${i + 1}</span>${w}</div>`).join('')}
+        </div>
+        <button class="btn btn-primary" id="btn-saved">I've saved it — continue</button>
+      </div>
+    </div>`;
+  document.getElementById('btn-saved').onclick = renderSetPassword;
+}
+
+// ---------- Import: paste existing phrase ----------
+function renderImport() {
+  app.innerHTML = `
+    <div class="center-screen">
+      <div class="card">
+        <h1 class="serif">Import wallet</h1>
+        <p class="sub">Enter your existing 12 or 24-word recovery phrase, separated by spaces.</p>
+        <textarea id="mnemonic-input" rows="4" style="width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg-panel-2);font-family:'Inter',sans-serif;font-size:13px;margin-bottom:8px;"></textarea>
+        <div class="error" id="import-error"></div>
+        <button class="btn btn-primary" id="btn-continue">Continue</button>
+        <button class="link-btn" id="btn-back">Back</button>
+      </div>
+    </div>`;
+  document.getElementById('btn-back').onclick = renderWelcome;
+  document.getElementById('btn-continue').onclick = () => {
+    const value = document.getElementById('mnemonic-input').value.trim();
+    if (value.split(/\s+/).length < 12) {
+      document.getElementById('import-error').textContent = 'That phrase looks too short — check the word count.';
+      return;
+    }
+    pendingMnemonic = value;
+    renderSetPassword();
+  };
+}
+
+// ---------- Set a password to encrypt the phrase at rest ----------
+function renderSetPassword() {
+  app.innerHTML = `
+    <div class="center-screen">
+      <div class="card">
+        <h1 class="serif">Set a password</h1>
+        <p class="sub">This encrypts your recovery phrase on this device. You'll need it every time you open macu.</p>
+        <input type="password" id="pw1" placeholder="Password (12+ characters recommended)">
+        <input type="password" id="pw2" placeholder="Confirm password">
+        <div class="error" id="pw-error"></div>
+        <button class="btn btn-primary" id="btn-finish">Create wallet</button>
+      </div>
+    </div>`;
+  document.getElementById('btn-finish').onclick = async () => {
+    const pw1 = document.getElementById('pw1').value;
+    const pw2 = document.getElementById('pw2').value;
+    const errEl = document.getElementById('pw-error');
+    if (pw1.length < 8) { errEl.textContent = 'Use at least 8 characters.'; return; }
+    if (pw1 !== pw2) { errEl.textContent = 'Passwords do not match.'; return; }
+    try {
+      accounts = await window.macu.createWallet(pendingMnemonic, pw1);
+      pendingMnemonic = null; // drop it from renderer memory as soon as we're done with it
+      renderDashboard();
+    } catch (e) {
+      errEl.textContent = e.message;
+    }
+  };
+}
+
+// ---------- Unlock existing keystore ----------
+function renderUnlock() {
+  app.innerHTML = `
+    <div class="center-screen">
+      <div class="card">
+        <h1 class="serif">Welcome back</h1>
+        <p class="sub">Enter your password to unlock macu.</p>
+        <input type="password" id="unlock-pw" placeholder="Password">
+        <div class="error" id="unlock-error"></div>
+        <button class="btn btn-primary" id="btn-unlock">Unlock</button>
+      </div>
+    </div>`;
+  const tryUnlock = async () => {
+    const pw = document.getElementById('unlock-pw').value;
+    const errEl = document.getElementById('unlock-error');
+    try {
+      accounts = await window.macu.unlock(pw);
+      renderDashboard();
+    } catch (e) {
+      errEl.textContent = e.message;
+    }
+  };
+  document.getElementById('btn-unlock').onclick = tryUnlock;
+  document.getElementById('unlock-pw').addEventListener('keydown', (e) => { if (e.key === 'Enter') tryUnlock(); });
+}
+
+// ---------- Dashboard ----------
+async function renderDashboard() {
+  app.innerHTML = `
+    <div class="topbar">
+      <div class="brand"><div class="brand-mark"></div><div class="brand-name serif">macu</div></div>
+      <button class="btn btn-ghost" style="width:auto;margin:0;" id="btn-lock">Lock</button>
+    </div>
+
+    <div class="grid3" id="chain-cards">
+      ${chainCard('Ethereum', accounts.ethereum.address)}
+      ${chainCard('Bitcoin', accounts.bitcoin.address)}
+      ${chainCard('Solana', accounts.solana.address)}
+    </div>
+
+    <div class="panel">
+      <h2>Send ETH</h2>
+      <div class="row">
+        <input type="text" id="send-to" placeholder="Recipient address (0x...)">
+      </div>
+      <div class="row">
+        <input type="text" id="send-amt" placeholder="Amount in ETH">
+      </div>
+      <button class="btn btn-primary" id="btn-send" style="width:auto;">Send</button>
+      <div class="status-msg" id="send-status"></div>
+    </div>`;
+
+  document.getElementById('btn-lock').onclick = async () => {
+    await window.macu.lock();
+    accounts = null;
+    renderUnlock();
+  };
+
+  document.querySelectorAll('.address').forEach((el) => {
+    el.onclick = () => navigator.clipboard.writeText(el.dataset.full);
+  });
+
+  document.getElementById('btn-send').onclick = async () => {
+    const to = document.getElementById('send-to').value.trim();
+    const amt = document.getElementById('send-amt').value.trim();
+    const statusEl = document.getElementById('send-status');
+    statusEl.className = 'status-msg';
+    statusEl.textContent = 'Sending…';
+    try {
+      const { hash } = await window.macu.sendEth(to, amt);
+      statusEl.className = 'status-msg ok';
+      statusEl.textContent = `Sent. Tx hash: ${hash}`;
+    } catch (e) {
+      statusEl.className = 'status-msg err';
+      statusEl.textContent = e.message;
+    }
+  };
+
+  loadBalances();
+}
+
+function chainCard(label, address) {
+  const short = address.length > 14 ? `${address.slice(0, 8)}…${address.slice(-6)}` : address;
+  return `
+    <div class="chain-card">
+      <div class="chain-label">${label}</div>
+      <div class="balance" data-balance="${label.toLowerCase()}">…</div>
+      <div class="address" data-full="${address}" title="Click to copy full address">${short}</div>
+    </div>`;
+}
+
+async function loadBalances() {
+  try {
+    const bal = await window.macu.getBalances();
+    setBalance('ethereum', bal.ethereum, 'ETH');
+    setBalance('bitcoin', bal.bitcoin, 'BTC');
+    setBalance('solana', bal.solana, 'SOL');
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+function setBalance(chain, value, symbol) {
+  const el = document.querySelector(`[data-balance="${chain}"]`);
+  if (!el) return;
+  el.textContent = value === null ? 'Unavailable' : `${Number(value).toFixed(4)} ${symbol}`;
+}
+
+boot();

src/renderer/styles.css

@@ -0,0 +1,87 @@
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600&family=Inter:wght@400;500;600;700&display=swap');
+
+:root{
+  --bg:#f4ede1; --bg-panel:#fffaf2; --bg-panel-2:#eee3d0; --line:#e0d2b8;
+  --ink:#2c241c; --ink-soft:#7c705d;
+  --clay:#bd6a3f; --clay-deep:#9c522d; --gold:#c99a4a;
+  --good:#5f7a4f; --bad:#b5563f;
+  --radius:18px;
+}
+*{box-sizing:border-box;margin:0;padding:0;}
+body{
+  font-family:'Inter',sans-serif;
+  background:var(--bg); color:var(--ink);
+  min-height:100vh; display:flex; align-items:center; justify-content:center;
+}
+#app{width:100%; max-width:1180px; min-height:100vh; padding:24px;}
+
+.serif{font-family:'Fraunces',serif;}
+.center-screen{min-height:80vh; display:flex; align-items:center; justify-content:center;}
+.card{
+  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
+  padding:36px; max-width:460px; width:100%;
+}
+.card h1{font-family:'Fraunces',serif; font-size:24px; margin-bottom:10px;}
+.card p.sub{color:var(--ink-soft); font-size:13.5px; margin-bottom:24px; line-height:1.5;}
+
+.btn{
+  display:inline-flex; align-items:center; justify-content:center; gap:8px;
+  padding:12px 20px; border-radius:12px; border:none; cursor:pointer;
+  font-weight:600; font-size:13.5px; font-family:'Inter',sans-serif;
+  width:100%; margin-top:10px; transition:transform .1s;
+}
+.btn:hover{transform:translateY(-1px);}
+.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}
+.btn-primary{background:linear-gradient(135deg,var(--clay),var(--gold)); color:#fff8ee;}
+.btn-ghost{background:var(--bg-panel-2); color:var(--ink); border:1px solid var(--line);}
+
+input[type=password], input[type=text]{
+  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
+  background:var(--bg-panel-2); color:var(--ink); font-family:'Inter',sans-serif;
+  font-size:14px; margin-bottom:8px;
+}
+
+.mnemonic-grid{
+  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
+  background:var(--bg-panel-2); border:1px solid var(--line); border-radius:12px;
+  padding:16px; margin-bottom:18px;
+}
+.mnemonic-word{
+  font-size:13px; padding:8px 10px; background:var(--bg-panel); border-radius:8px;
+  display:flex; gap:6px; align-items:baseline;
+}
+.mnemonic-word .idx{color:var(--ink-soft); font-size:11px; min-width:16px;}
+
+.warning{
+  background:rgba(181,86,63,.1); border:1px solid rgba(181,86,63,.3); color:var(--bad);
+  border-radius:10px; padding:10px 14px; font-size:12.5px; margin-bottom:16px; line-height:1.5;
+}
+.error{color:var(--bad); font-size:12.5px; margin-top:6px; min-height:16px;}
+.link-btn{background:none; border:none; color:var(--clay-deep); font-weight:600; font-size:12.5px; cursor:pointer; margin-top:14px;}
+
+/* dashboard */
+.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}
+.brand{display:flex; align-items:center; gap:10px;}
+.brand-mark{
+  width:32px;height:32px;border-radius:10px;
+  background:linear-gradient(135deg,var(--clay),var(--gold));
+}
+.brand-name{font-family:'Fraunces',serif; font-weight:600; font-size:18px;}
+
+.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:22px;}
+.chain-card{
+  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
+}
+.chain-card .chain-label{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); margin-bottom:8px;}
+.chain-card .balance{font-family:'Fraunces',serif; font-size:24px; margin-bottom:8px;}
+.chain-card .address{
+  font-size:11px; color:var(--ink-soft); word-break:break-all;
+  background:var(--bg-panel-2); padding:6px 8px; border-radius:8px; cursor:pointer;
+}
+
+.panel{background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px;}
+.panel h2{font-family:'Fraunces',serif; font-size:16px; margin-bottom:16px;}
+.row{display:flex; gap:10px; margin-bottom:10px;}
+.status-msg{font-size:12.5px; margin-top:8px; color:var(--ink-soft);}
+.status-msg.ok{color:var(--good);}
+.status-msg.err{color:var(--bad);}