Let's implement secure wallet storage using encrypted local storage for your dApp. We'll use the Web Cryptography API to handle encryption and decryption securely. ### Step-by-Step Implementation 1. First, let's create a utility file for handling cryptographic operations: ```javascript // src/utils/crypto.js const crypto = require('crypto'); export const generateKeyPair = async () => { try { const keyPair = await window.crypto.subtle.generateKey( { name: "RSA-OAEP", modulusLength: 4096, publicExponent: new Uint8Array([1, 0, 1]), hash: { name: "SHA-256" } }, false, ["encrypt", "decrypt"] ); const publicKey = await window.crypto.subtle.exportKey( "jwk", keyPair.publicKey ); const privateKey = await window.crypto.subtle.exportKey( "jwk", keyPair.privateKey ); return { publicKey, privateKey }; } catch (error) { console.error("Error generating key pair:", error); throw error; } }; export const encryptPrivateKey = async (privateKey, password) => { try { // Convert password to a Uint8Array const passwordKey = await window.crypto.subtle.importKey( "raw", new TextEncoder().encode(password), { name: "PBKDF2" }, false, ["deriveKey"] ); // Derive key using PBKDF2 const salt = new Uint8Array(16); window.crypto.getRandomValues(salt); const key = await window.crypto.subtle.deriveKey( { name: "PBKDF2", salt: salt, iterations: 100000, hash: { name: "SHA-256" } }, passwordKey, { name: "AES-GCM", length: 256 } ); // Encrypt the private key const iv = new Uint8Array(12); window.crypto.getRandomValues(iv); const encrypted = await window.crypto.subtle.encrypt( { name: "AES-GCM", iv: iv }, key, new TextEncoder().encode(privateKey) ); // Return as base64 string return btoa(String.fromCharCode.apply(null, new Uint8Array(encrypted))); } catch (error) { console.error("Error encrypting private key:", error); throw error; } }; export const decryptPrivateKey = async (encryptedPrivateKey, password) => { try { const encryptedBytes = new Uint8Array( atob(encryptedPrivateKey).split('').map(c => c.charCodeAt(0)) ); // Convert password to a Uint8Array const passwordKey = await window.crypto.subtle.importKey( "raw", new TextEncoder().encode(password), { name: "PBKDF2" }, false, ["deriveKey"] ); // Derive key using PBKDF2 const salt = new Uint8Array(16); window.crypto.getRandomValues(salt); const key = await window.crypto.subtle.deriveKey( { name: "PBKDF2", salt: salt, iterations: 100000, hash: { name: "SHA-256" } }, passwordKey, { name: "AES-GCM", length: 256 } ); // Decrypt the private key const iv = new Uint8Array(12); window.crypto.getRandomValues(iv); const decrypted = await window.crypto.subtle.decrypt( { name: "AES-GCM", iv: iv }, key, encryptedBytes ); return new TextDecoder().decode(decrypted); } catch (error) { console.error("Error decrypting private key:", error); throw error; } }; ``` 2. Create a wallet storage service: ```javascript // src/services/WalletService.js export class WalletService { static async createWallet(password) { try { const { publicKey, privateKey } = await generateKeyPair(); // Encrypt the private key with the password const encryptedPrivateKey = await encryptPrivateKey( privateKey, password ); // Store the wallet in localStorage const wallet = { publicKey, encryptedPrivateKey, createdAt: new Date().toISOString() }; localStorage.setItem('wallet', JSON.stringify(wallet)); return wallet; } catch (error) { console.error("Error creating wallet:", error); throw error; } } static async loadWallet(password) { try { const storedWallet = localStorage.getItem('wallet'); if (!storedWallet) { throw new Error("No wallet found"); } const wallet = JSON.parse(storedWallet); if (!wallet.encryptedPrivateKey) { throw new Error("Wallet private key is not encrypted"); } // Decrypt the private key const privateKey = await decryptPrivateKey( wallet.encryptedPrivateKey, password ); return { ...wallet, privateKey }; } catch (error) { console.error("Error loading wallet:", error); throw error; } } } ``` 3. Create a wallet component in React: ```javascript // src/components/Wallet/Wallet.js import React, { useState, useEffect } from 'react'; import { WalletService } from '../services/WalletService'; export const WalletComponent = () => { const [wallet, setWallet] = useState(null); const [password, setPassword] = useState(''); const [error, setError] = useState(null); const [isCreating, setIsCreating] = useState(true); useEffect(() => { const loadExistingWallet = async () => { try { const existingWallet = await WalletService.loadWallet(password); setWallet(existingWallet); setIsCreating(false); } catch (error) { setError("Invalid password or wallet not found"); } }; if (password && !wallet) { loadExistingWallet(); } }, [password, wallet]); const handleCreateWallet = async (event) => { event.preventDefault(); try { const newWallet = await WalletService.createWallet(password); setWallet(newWallet); setError(null); } catch (error) { setError("Failed to create wallet"); } }; const handleLogin = async (event) => { event.preventDefault(); try { const existingWallet = await WalletService.loadWallet(password); setWallet(existingWallet); setError(null); } catch (error) { setError("Invalid password or wallet not found"); } }; if (!wallet) { return (

); } return (

Wallet Information

Public Key: {wallet.publicKey}

Private Key: {wallet.privateKey}

); }; ``` ### Explanation 1. **Crypto Utility Functions**: - `generateKeyPair()`: Generates RSA key pair using WebCrypto - `encryptPrivateKey()`: Encrypts private key using AES-GCM - `decryptPrivateKey()`: Decrypts private key using AES-GCM 2. **Wallet Service**: - `createWallet()`: Creates new wallet and stores it encrypted - `loadWallet()`: Loads and decrypts existing wallet 3. **Wallet Component**: - Handles wallet creation and login - Manages password input and error states - Displays wallet information when available ### Security Considerations - **Key Generation**: Uses RSA-OAEP with 4096-bit modulus - **Encryption**: Uses AES-GCM with 256-bit keys - **Password-based Key Derivation**: Uses PBKDF2 with 100,000 iterations - **Secure Storage**: Stores encrypted private key in localStorage ### Next Steps 1. Implement user authentication system 2. Add input validation for transaction amounts and addresses 3. Implement rate limiting for transaction attempts ### Further Reading - [Web Cryptography API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) - [PBKDF2](https://en.wikipedia.org/wiki/PBKDF2) - [AES-GCM](https://en.wikipedia.org/wiki/Galois/Counter_Mode)