campustudio/blockchain-vesting-app

# 🔒 区块链代币解锁平台 [](https://blockchain-vesting-app-ihvy.vercel.app) [](https://angular.io/) [](https://www.typescriptlang.org/) [](https://tailwindcss.com/) ## 🎯 审核者快速入门 **📖 [查看完整指南](./DEV_GUIDE.md)** - 包含应用开发与测试的详细步骤说明 **在线演示：** [https://blockchain-vesting-app-ihvy.vercel.app](https://blockchain-vesting-app-ihvy.vercel.app) **快速测试（3 个步骤）：** 1. 安装 [MetaMask](https://metamask.io/download/) 浏览器插件 2. 在 MetaMask 中切换至 **Sepolia 测试网** 3. 点击网站上的“连接钱包” (Connect Wallet) ## 📋 关于 这是一个展示代币解锁计划管理的 Web 应用，提供简洁、专业的用户界面。本项目涉及对代币经济学、金融计算以及现代 Web3 开发实践的理解。 ### 什么是代币解锁？ 代币解锁是区块链项目中使用的一种机制，用于随时间推移逐步释放代币，而不是一次性全部分发。常见用例： - **团队与顾问**：长期承诺激励 - **投资者**：防止代币被立即抛售 - **社区**：公平且受控的分配 ### 平台功能 - 📊 **仪表盘**：实时统计与概览 - 📅 **计划管理**：追踪多个解锁协议 - 💰 **领取界面**：交互式代币领取 - 📈 **进度追踪**：可视化时间轴与进度条 - 🔍 **筛选**：基于状态的计划筛选 - 🌓 **暗黑模式**：完整的深色主题支持 ## ✨ 特性 ### 📊 **仪表盘** - 所有解锁计划的概览 - 实时统计数据（总锁定、可领取、已领取） - 可视化进度指标 - 基于状态分类（进行中、待开始、已完成） ### 📅 **解锁计划** - 所有解锁协议的详细列表 - 交互式领取功能 - 带时间轴可视化的进度追踪 - 按状态筛选 ### 🎨 **用户体验** - 现代、响应式的设计 - 支持暗黑模式 - 平滑的动画与过渡效果 - 对移动端友好的界面 ### 🔧 **技术特性** - TypeScript 类型安全 - 基于 RxJS 的响应式状态管理 - 模块化组件架构 - 丰富的工具函数 - 开发用模拟数据 ## 🚀 快速入门 ### 前置条件 - Node.js 18+ - npm 9+ ### 安装 ``` # Clone 仓库 git clone https://github.com/YOUR_USERNAME/blockchain-vesting-app.git cd blockchain-vesting-app # 安装 dependencies npm install # 启动 development server npm start ``` 访问 `http://localhost:4200` 即可查看应用。 ### 生产环境构建 ``` # 创建 production build npm run build # 输出将在 dist/blockchain-vesting-app/ 中 ``` ## 📐 架构 ### 项目结构 ``` src/app/ ├── lib/ │ ├── interfaces/ │ │ └── vesting.interface.ts # TypeScript type definitions │ ├── services/ │ │ └── vesting/ │ │ └── vesting.service.ts # Business logic & state management │ ├── utils/ │ │ └── vesting.util.ts # Calculation utilities │ └── constants/ │ └── mock-data.constant.ts │ └── pages/ └── vesting/ ├── dashboard/ # Overview dashboard ├── schedules/ # Detailed schedules list └── index.ts # Routing configuration ``` ### 设计模式 - **服务层**：集中的业务逻辑与状态管理 - **响应式状态**：使用 RxJS BehaviorSubjects 进行实时更新 - **独立组件**：现代 Angular 16 模式 - **工具函数**：用于计算的纯函数 - **类型安全**：全面的 TypeScript 接口 ## 🎯 核心算法 ### 1. **解锁计算** ``` // Calculate vested amount based on time elapsed const vestedAmount = (totalAmount * timeElapsed) / totalDuration; const claimableAmount = vestedAmount - alreadyClaimed; ``` ### 2. **锁定 Cliff 周期** 初始阶段内不解锁任何代币： ``` if (currentTime < startTime + cliffPeriod) { return 0; // No tokens vested during cliff } ``` ### 3. **线性解锁** Cliff 周期结束后，代币将随时间线性解锁： ``` Total: 1,000,000 tokens Duration: 24 months Vesting rate: ~41,667 tokens/month ``` ### 4. **状态管理** - **待开始**：解锁尚未开始 - **进行中**：正在解锁 - **已完成**：完全解锁 - **已撤销**：被管理员取消 ## 🛠️ 技术栈 | 技术 | 用途 | | ------------------- | ----------------------------------- | | **Angular 16** | 具备独立组件的前端框架 | | **TypeScript 5.0** | 类型安全的开发环境 | | **RxJS 7.8** | 响应式状态管理 | | **TailwindCSS 3.3** | 实用优先的样式设计 | | **ethers.js 5** | Ethereum 区块链交互 | | **Solidity 0.8.20** | 智能合约开发 | | **Hardhat** | Ethereum 开发环境 | | **Iconify** | 现代图标系统 | ## 🔒 智能合约安全与 Gas 优化 本项目涉及专业的智能合约开发，采用了行业标准的安全实践和 Gas 优化技术。 ### 🛡️ 安全增强（7 项重大改进） 1. **紧急暂停机制** - 用于应急响应的 Pausable 合约 - 检测到漏洞时，Owner 可暂停所有操作 2. **Token 地址验证** - 移除了关键函数中的外部 token 参数 - 使用已存储的 token 地址以防止操纵 3. **开始时间验证** - 防止创建开始时间在过去的解锁计划 - 确保解锁时间轴的逻辑合理性 4. **锁定代币总量追踪** - 通过 `totalLockedTokens` 映射进行合约级记账 - 允许紧急提取未解锁的代币 - 有助于检测记账错误 5. **增强的 Event 索引** - Event 中的 token 地址现已支持索引 - 提供更好的区块链分析和筛选功能 6. **受益人更改功能** - 处理钱包迁移和更正 - 对于生产环境的解锁系统至关重要 7. **紧急提款** - 找回意外发送的代币 - 仅限提取未解锁的代币，以保护受益人 ### ⚡ Gas 优化技术（已应用 6 项） 1. **存储打包** - 将布尔值字段打包到同一个存储槽中 - 创建计划时**节省约 20,000 gas** 2. **Unchecked 算术** - 应用于安全操作（计数器递增、时间计算） - 每次操作**节省约 100-200 gas** 3. **内存缓存** - 将存储变量缓存到内存中 - 每避免一次 SLOAD **节省约 2,100 gas** 4. **批量操作** - 使用 `batchCreateVestingSchedules()` 处理多个计划 - 创建多个计划时最多可**节省 90%** 的费用 5. **循环优化** - 在安全循环中移除了不必要的溢出检查 - 每次迭代**节省约 30 gas** 6. **高效的返回值** - 函数返回计算出的 ID - 在不增加额外 gas 成本的情况下提升用户体验 ### 📊 Gas 节省对比 | 操作 | 原始成本 | 优化后 | 节省量 | 节省百分比 | | ----------------- | ---------- | ---------- | ------- | ---------- | | 创建计划 | ~180,000 | ~165,000 | 15,000 | 8.3% | | 释放代币 | ~85,000 | ~78,000 | 7,000 | 8.2% | | 撤销计划 | ~95,000 | ~88,000 | 7,000 | 7.4% | | 批量创建 (10 个) | ~1,800,000 | ~1,620,000 | 180,000 | 10% | **现实影响：** 使用批量操作创建 100 个解锁计划，大约可节省 **$1,600** 的 gas 费用（按 ETH 为 $2K，50 gwei 计算）。 ### 🎯 专业功能 **批量操作：** ``` batchCreateVestingSchedules( [addr1, addr2, addr3], token, [100e18, 200e18, 300e18], startTime, cliff, duration, true ) ``` **受益人管理：** ``` changeBeneficiary(vestingId, newWallet) ``` **紧急控制：** ``` pause() / unpause() emergencyWithdraw(token, amount) ``` **增强的信息查询：** ``` getVestingInfo(vestingId) // Get all data in single call ``` 📖 **[查看详细优化报告](./SECURITY_AND_OPTIMIZATION.md)** ## 🔄 未来增强计划 ### ✅ 已完成：区块链集成 - [x] 连接到 Sepolia 测试网 - [x] 部署解锁智能合约 - [x] 读取真实的链上数据 - [x] 执行真实的领取交易 - [x] 支持多账户 - [x] 网络切换检测 ### 阶段 2：高级功能 - [ ] 多代币支持 - [ ] 导出解锁数据为 CSV - [ ] 领取的电子邮件通知 - [ ] 用于创建解锁计划的管理员仪表盘 - [ ] 撤销功能 ## 📝 Sepolia 上的实测数据 该应用已连接到部署在 Sepolia 测试网上的**优化版智能合约**，并包含多样化的测试数据： **智能合约（优化版）：** - **解锁合约：** `0x186FBa7B212C5aCCAe3f264178f28922080Bf5a5` - **PROJ Token：** `0x10FDc7A86a2EB3864b18e26B5a204134DD85Cb1c` **测试账户：** `0x006Ac68Ea58Ea14cEd038bE25350A44929ADbAda` **多样化测试数据（12 个解锁计划 - 锁定 1,565 万 PROJ）：** | Token | 状态 | 总量 | 已解锁 % | Cliff | 周期 | 备注 | | ----- | --------- | ----------- | -------- | ----- | ----- | --------------------------- | | PROJ | 进行中 | 500,000 | 75% | 无 | 1 年 | 解锁 90 天 | | PROJ | 进行中 | 1,000,000 | 50% | 1 个月 | 1 年 | 180 天，Cliff 已过 | | PROJ | 进行中 | 250,000 | 17% | 1 周 | 6 个月 | 早期阶段 | | PROJ | 已完成 | 2,000,000 | 100% | 3 个月 | 1 年 | 完全解锁，可领取！ | | PROJ | 待开始 | 750,000 | 0% | 1 个月 | 1 年 | 15 天后开始 | | PROJ | 待开始 | 300,000 | 0% | 2 周 | 6 个月 | 7 天后开始 | | PROJ | 进行中 | 450,000 | 67% | 无 | 3 个月 | 快速解锁 (60/90 天) | | PROJ | 进行中 | 5,000,000 | 25% | 6 个月 | 2 年 | 长期解锁 | | PROJ | 进行中 | 800,000 | 12% | 1 个月 | 1 年 | Cliff 刚过 | | PROJ | 进行中 | 1,500,000 | 55% | 2 个月 | 1 年 | 中期解锁 | | PROJ | 进行中 | 100,000 | 50% | 无 | 1 个月 | 快速短期解锁 | | PROJ | 待开始 | 3,000,000 | 0% | 3 个月 | 2 年 | 30 天后开始 | **分布情况：** - ✅ **进行中：** 8 个计划（正在解锁中） - ⏳ **待开始：** 3 个计划（尚未开始） - 🎉 **已完成：** 1 个计划（100% 解锁，随时可领取） **在 Etherscan 上查看：** - [优化的解锁合约](https://sepolia.etherscan.io/address/0x186FBa7B212C5aCCAe3f264178f28922080Bf5a5) - [PROJ Token 合约](https://sepolia.etherscan.io/address/0x10FDc7A86a2EB3864b18e26B5a204134DD85Cb1c) ## 🧪 测试 ### 手动测试清单 - [x] 所有路由均可访问 - [x] 统计数据计算正确 - [x] 进度条显示准确 - [x] 领取功能正常工作 - [x] 筛选器应用正确 - [x] 暗黑模式切换正常 - [x] 移动端响应正常 - [x] 错误状态正常显示 - [x] 成功消息正常显示 - [x] 加载状态可见 ### 未来的自动化测试 - 计算工具的单元测试 - 服务集成测试 - 组件渲染测试 - 端到端（E2E）用户流程测试 ## 📊 项目指标 - **TypeScript 文件**：约 15 个文件 - **代码行数**：约 2,500 行 - **组件**：2 个主要组件 - **服务**：1 个核心服务 - **工具函数**7 个函数 - **打包体积**：< 500KB（gzipped 压缩后） ## 🎓 学习资源 - [代币解锁详解](https://www.investopedia.com/terms/v/vesting.asp) - [智能合约解锁模式](https://docs.openzeppelin.com/contracts/4.x/api/finance#VestingWallet) - [Angular 最佳实践](https://angular.io/guide/styleguide) - [ethers.js 文档](https://docs.ethers.org/) ## 📄 许可证 MIT 许可证 - 随意将本项目作为参考，或作为您自己解锁平台开发的起点。 ## 👤 作者 本项目的创建旨在展示 Web3 开发能力以及对代币经济学的理解。 **作品集项目：** - [MetaMask 集成测试](../angular-test) - 基础钱包连接 - [代币解锁平台](.) - 高级代币管理（即本项目） ## 🗝️ 关键收获 本项目涉及： ### 技术技能 - 使用 RxJS 进行复杂状态管理 - 高级 TypeScript 应用与类型安全 - 响应式编程模式 - 组件架构设计 - 使用 BigInt 进行金融计算 ### 业务理解 - 代币经济学与解锁机制 - 金融界面的用户体验 - 数据可视化最佳实践 - 基于状态的工作流设计 ### 开发实践 - 整洁代码原则 - 全面的文档说明 - Git 工作流与部署 - 遵守 ESLint 配置规范 **注意**：这是一个部署在 Sepolia 测试网上的项目。若要在主网（Mainnet）用于生产环境，还需要： - 安全审计 - Gas 优化 - 增强的错误处理 - 主网部署 - 管理员控制 ## 📞 联系方式 如果您对实现细节或设计决策有任何疑问，欢迎随时联系！

标签：Angular, Grype, TailwindCSS, TypeScript, Web3, 代币锁仓, 区块链, 安全插件, 自动化攻击