Web Crypto Wallet Development: Architecture, Security, Timelines

Web Crypto Wallet Development

The last time you entered a seed phrase into a web form? That's an XSS trap. A web wallet is the most vulnerable link, yet also the most accessible. We solve the problem: how to store keys in the browser without risk of compromise while ensuring user convenience. With 7 years of blockchain development experience and over 50 implemented wallets — from simple EOA to smart contracts with ERC-4337 — we deliver production-grade solutions. The cost is estimated individually after analyzing your requirements.

The key dilemma: security vs. UX. Traditional EOA wallets lose funds if a key is stolen. Smart Accounts (ERC-4337) add social recovery and session keys but require more gas. In practice, for mass adoption, the choice is clear — Account Abstraction. We'll show you how to build a wallet that doesn't compromise either aspect.

Key Architectural Decisions for a Web Crypto Wallet

EOA vs. Smart Account

EOA (Externally Owned Account) is a classic wallet with a single private key. Key loss means permanent access loss. Smart Account (ERC-4337) is programmable signing logic: social recovery, session keys, batched transactions. In practice, Smart Account reduces fund loss risk by up to 5x through recovery via trusted parties. However, EOA is 10-15% cheaper in gas — prioritize security or cost accordingly.

How to Protect Private Keys in the Browser?

Options from least to most secure:

• localStorage / sessionStorage — never. Accessible to any JavaScript.
• IndexedDB with AES-GCM 256-bit encryption via Web Crypto API. Key derived from password (PBKDF2, 600,000 iterations). This is standard for browser wallets.

async function encryptPrivateKey( privateKey: Uint8Array, password: string ): Promise<{ encrypted: ArrayBuffer; salt: Uint8Array; iv: Uint8Array }> { const salt = crypto.getRandomValues(new Uint8Array(32)); const iv = crypto.getRandomValues(new Uint8Array(12)); const keyMaterial = await crypto.subtle.importKey( "raw", new TextEncoder().encode(password), "PBKDF2", false, ["deriveKey"] ); const encryptionKey = await crypto.subtle.deriveKey( { name: "PBKDF2", salt, iterations: 600000, hash: "SHA-256", }, keyMaterial, { name: "AES-GCM", length: 256 }, false, ["encrypt"] ); const encrypted = await crypto.subtle.encrypt( { name: "AES-GCM", iv }, encryptionKey, privateKey ); return { encrypted, salt, iv }; } 

• WebAuthn + hardware key — most secure. Private key never leaves the TPM/Secure Enclave. Signing occurs inside the device. Daimo and Coinbase Smart Wallet use this approach. Its security is 3x higher than IndexedDB.
• MPC — key never exists as a whole. Split into shares, signing requires a threshold. Downsides: 30-50% slower.

Key Derivation and HD Wallets

BIP-39 and BIP-44: seed phrase → master key → child keys. Path m/44'/60'/0'/0/0 is the first Ethereum account. Libraries: @scure/bip39 and @scure/bip32 — audited, tree-shakeable.

import { mnemonicToSeed } from "@scure/bip39"; import { HDKey } from "@scure/bip32"; async function deriveAccount(mnemonic: string, index: number) { const seed = await mnemonicToSeed(mnemonic); const masterKey = HDKey.fromMasterSeed(seed); const derivationPath = `m/44'/60'/0'/0/${index}`; const childKey = masterKey.derive(derivationPath); return { privateKey: childKey.privateKey!, address: computeAddress(childKey.publicKey!), }; } 

Web Wallet Architecture

Separation of Concerns: UI vs. Signing

Critical rule: code with access to the key is isolated from UI via a Web Worker. XSS in UI does not compromise the key.

// Main thread — UI async function signTransaction(txRequest: TransactionRequest): Promise<string> { return new Promise((resolve, reject) => { const worker = new Worker("/signing-worker.js"); worker.postMessage({ type: "SIGN_TX", payload: txRequest }); worker.onmessage = (e) => { if (e.data.type === "SIGNED") resolve(e.data.signature); if (e.data.type === "REJECTED") reject(new Error("User rejected")); if (e.data.type === "ERROR") reject(new Error(e.data.error)); }; }); } 

WalletConnect and dApp Integration We use the @walletconnect/web3wallet SDK v2.

import { Web3Wallet } from "@walletconnect/web3wallet"; import { Core } from "@walletconnect/core"; const core = new Core({ projectId: WALLETCONNECT_PROJECT_ID }); const web3wallet = await Web3Wallet.init({ core, metadata: { name: "My Wallet", description: "Custom Web3 Wallet", url: "https://mywallet.app", icons: ["https://mywallet.app/icon.png"], }, }); web3wallet.on("session_request", async (event) => { const { id, topic, params } = event; const { request } = params; if (request.method === "eth_sendTransaction") { const approved = await showTransactionConfirmation(request.params[0]); if (approved) { const txHash = await sendTransaction(request.params[0]); await web3wallet.respondSessionRequest({ topic, response: { id, result: txHash, jsonrpc: "2.0" }, }); } else { await web3wallet.respondSessionRequest({ topic, response: { id, error: { code: 4001, message: "User rejected" }, jsonrpc: "2.0" }, }); } } }); 

What's Included in Our Work

Web Wallet Development Stages

1. Architecture and threat model (1-2 weeks)
2. Key management and HD wallet (3-4 weeks)
3. Transaction signing and RPC layer (2-3 weeks)
4. ERC-4337 integration (3-4 weeks)
5. WalletConnect and dApp integration (2-3 weeks)
6. UI (React + TypeScript) (5-7 weeks)
7. Security hardening and audit (2-3 weeks)
8. Multi-chain support (3-4 weeks)
9. Testing and bug fixing (3-4 weeks)

Why Is Signing Isolation from UI Critical?

Main threats: XSS, clipboard attacks, phishing, supply chain. Mitigations:

• Strict CSP + Subresource Integrity
• Show first and last address characters, use identicons
• PWA with verified domain, ENS verification
• Seed phrase never transmitted over network
• Private key zeroed out in memory after use

What Makes a Wallet Truly Secure?

WebAuthn + hardware key is the gold standard. Private key is physically inaccessible to the browser. The second layer is MPC, where signing is assembled from split parts. The third is a bug bounty program on Immunefi. We use all three layers for production solutions.

Estimated Timelines

MVP web wallet (EOA, Ethereum, basic UI): 8-10 weeks. Production-ready with ERC-4337, multi-chain, WalletConnect, WebAuthn: 6-9 months. Contact us to discuss your project — we'll assess the scope and propose the optimal solution. Order web wallet development and get an engineer consultation.