从零开始构建你的以太坊轻钱包,开发教程与实践指南

以太坊轻钱包开发步骤

环境搭建与项目初始化

1. 安装 Node.js 和 npm/yarn：确保你的开发环境已安装 Node.js (v14+) 和 npm 或 yarn。
2. 创建 React 项目：

   npx create-react-app ethereum-light-wallet
   cd ethereum-light-wallet
   npm install

3. 安装必要依赖：

   npm install ethers @reduxjs/toolkit react-redux
   # 或 UI 库，
   npm install antd

钱包核心功能实现 - 账户管理

账户管理是钱包的基础,包括创建新账户、导入账户、导出私钥/助记词（需谨慎处理）。

1. 生成新账户： 使用 ethers.Wallet.createRandom() 可以生成一个新的随机钱包。

   import { Wallet } from 'ethers';
   const newWallet = Wallet.createRandom();
   console.log('新钱包地址:', newWallet.address);
   console.log('助记词:', newWallet.mnemonic.phrase); // 助记词需安全存储！
   console.log('私钥:', newWallet.privateKey); // 私钥需严格保密！

   重要：在实际应用中，助记词和私钥的存储和传输必须极度安全，建议使用加密存储，并且不要在前端直接暴露。

2. 通过助记词/私钥导入账户：

   // 通过助记词导入
   const mnemonic = "your twelve word mnemonic phrase";
   const walletFromMnemonic = Wallet.fromMnemonic(mnemonic);
   console.log('从助记词导入的地址:', walletFromMnemonic.address);
   // 通过私钥导入
   const privateKey = "your private key";
   const walletFromPrivateKey = new Wallet(privateKey);
   console.log('从私钥导入的地址:', walletFromPrivateKey.address);

连接到以太坊节点

选择一个以太坊节点服务商（如 Infura），注册并获取一个 Project ID。

1. 初始化 Provider： Provider 是与以太坊节点通信的桥梁，用于读取链上数据。

   import { ethers } from 'ethers';
   const INFURA_PROJECT_ID = 'your_infura_project_id';
   const provider = new ethers.providers.JsonRpcProvider(`https://mainnet.infura.io/v3/${INFURA_PROJECT_ID}`);
   // 测试连接
   provider.getNetwork().then(network => {
     console.log('当前网络:', network.name, chainId);
   });

2. 使用 Provider 获取账户信息：

   const address = '0x...'; // 用户钱包地址
   provider.getBalance(address).then(balance => {
     console.log('余额(ETH):', ethers.utils.formatEther(balance));
   });
   provider.getTransactionCount(address).then(transactionCount => {
     console.log('交易次数:', transactionCount);
   });

发送交易

发送交易是钱包的核心功能之一,需要用户签名交易。

1. 创建钱包实例（带私钥）： 要发送交易，需要用私钥对交易进行签名，通常这个私钥存储在用户本地安全的地方（如浏览器的 localStorage 加密存储，或硬件钱包）。

   const userPrivateKey = 'user_private_key'; // 实际应用中应从安全存储中获取
   const walletWithSigner = new Wallet(userPrivateKey, provider);

2. 构建并发送交易：

   const recipientAddress = '0x...'; // 接收地址
   const amountToSend = ethers.utils.parseEther('0.01'); // 转换为 wei
   const tx = {
     to: recipientAddress,
     value: amountToSend,
     // gasLimit: 21000, // 可选，默认 21000 for simple ETH transfer
     // gasPrice: await provider.getGasPrice(), // 可选，获取当前建议 gasPrice
     // nonce: await provider.getTransactionCount(walletWithSigner.address), // 可选，获取当前 nonce
   };
   walletWithSigner.sendTransaction(tx)
     .then(tx => {
       console.log('交易已发送:', tx.hash);
       return tx.wait(); // 等待交易被打包
     })
     .then(receipt => {
       console.log('交易已确认:', receipt.blockHash);
     })
     .catch(error => {
       console.error('交易失败:', error);
     });

集成 UI 与状态管理

将上述功能集成到 React 应用的 UI 中，并使用 Redux 等状态管理工具管理钱包状态。

1. 定义 Redux State：

   // walletSlice.js
   import { createSlice } from '@reduxjs/toolkit';
   const initialState = {
     address: null,
     balance: null,
     transactionHistory: [],
     isLoading: false,
     error: null,
   };
   const walletSlice = createSlice({
     name: 'wallet',
     initialState,
     reducers: {
       setWalletAddress: (state, action) => {
         state.address = action.payload;
       },
       setWalletBalance: (state, action) => {
         state.balance = action.payload;
       },
       // ... 其他 reducers (addTransaction, setLoading, setError 等)
     },
   });
   export const { setWalletAddress, setWalletBalance } = walletSlice.actions;
   export default walletSlice.reducer;

2. 创建 React 组件：

   • 创建/导入钱包组件：输入助记词或私钥，导入或创建钱包，并将地址存入 Redux。
   • 钱包主页组件：显示钱包地址、余额、交易记录等。
   • 发送交易组件：输入接收地址和金额，调用发送交易逻辑。

测试与优化

1. 测试网络：优先在以太坊测试网（如 Sepolia）进行开发和测试，可以使用测试 ETH。
2. 错误处理：对各种可能的错误（如余额不足、gas 不足、网络错误、用户取消签名等）进行友好提示。
3. 用户体验：优化加载状态、交易状态反馈（如签名中、已发送、已确认）。
4. 安全性：
   • 绝不私钥上云：私钥必须且只应存储在用户本地。
   • 助记词/私钥输入安全：使用密码输入框，避免明文显示。