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. -
IndexedDBwith 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.
Derivation code example
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
| Deliverable | Description |
|---|---|
| Architecture documentation | Diagrams, module descriptions, threat model |
| Turnkey source code | Full wallet repository |
| External service integration | WalletConnect, RPC, bundler, paymaster |
| Unit and integration tests | Coverage of key scenarios |
| Security audit | Code and contract audit by a third party |
| Deployment and support | Production launch, 3 months post-launch support |
Web Wallet Development Stages
- Architecture and threat model (1-2 weeks)
- Key management and HD wallet (3-4 weeks)
- Transaction signing and RPC layer (2-3 weeks)
- ERC-4337 integration (3-4 weeks)
- WalletConnect and dApp integration (2-3 weeks)
- UI (React + TypeScript) (5-7 weeks)
- Security hardening and audit (2-3 weeks)
- Multi-chain support (3-4 weeks)
- 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
| Component | Technology | Duration |
|---|---|---|
| Key management | Web Crypto API + @scure | 3-4 weeks |
| HD wallet (BIP-39/44) | @scure/bip32 + bip39 | 1-2 weeks |
| Transaction signing | viem + ethers | 2-3 weeks |
| ERC-4337 integration | permissionless.js + Pimlico | 3-4 weeks |
| WalletConnect v2 | @walletconnect/web3wallet | 2-3 weeks |
| UI (React + TypeScript) | React + Tailwind | 5-7 weeks |
| Security hardening | CSP + Web Worker isolation | 2-3 weeks |
| Multi-chain | Chain abstraction layer | 3-4 weeks |
| Testing + audit prep | Vitest + Playwright | 3-4 weeks |
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.