A comprehensive decentralized application (DApp) for ERC-20 token management with advanced features, built with React, Solidity, and Web3.js.
一个功能全面的 ERC-20 代币管理去中心化应用，具有高级功能，基于 React、Solidity 和 Web3.js 构建。
- Smart Contract Management / 智能合约管理: Deploy and manage ERC-20 token contracts
- Token Balance Checking / 代币余额查询: Real-time balance checking for any Ethereum address
- Token Transfer / 代币转账: Secure token transfers with transaction tracking
- Account Management / 账户管理: Comprehensive Ganache account overview with ETH and token balances
- Bulk Operations / 批量操作: Batch token transfers and airdrops
- Token Approval System / 代币授权系统: ERC-20 allowance management and approval tracking
- Transaction History / 交易历史: Complete transaction logging with export functionality
- Multi-language Support / 多语言支持: Full English and Simplified Chinese interface
- Local Development / 本地开发: Integrated Ganache blockchain environment
- Real-time Updates / 实时更新: Automatic balance and transaction updates
- Error Handling / 错误处理: Comprehensive error handling and user feedback
- Modern UI/UX / 现代化界面: Beautiful Ant Design interface with responsive design
- Frontend / 前端: React 18, Vite, Redux Toolkit, RTK Query, Ant Design
- Backend / 后端: Node.js, Express.js, Web3.js, CORS
- Blockchain / 区块链: Solidity, Ganache (local Ethereum blockchain)
- Development Tools / 开发工具: Concurrently, dotenv
- Node.js (v16 or higher / v16 或更高版本)
- npm or yarn
- Git
- 4GB+ RAM for Ganache / 4GB+ 内存用于 Ganache
-
Clone the repository / 克隆仓库
git clone <repository-url> cd DApp
-
Install dependencies / 安装依赖
npm install
-
Start the development environment / 启动开发环境
npm run dev
This will start:
- 🔗 Ganache blockchain on
http://localhost:8545 - 🖥️ Express server on
http://localhost:3000 - 🌐 React frontend on
http://localhost:5173
这将启动：
- 🔗 Ganache 区块链在
http://localhost:8545 - 🖥️ Express 服务器在
http://localhost:3000 - 🌐 React 前端在
http://localhost:5173
- 🔗 Ganache blockchain on
- Navigate to the Contract tab / 导航到合约选项卡
- Deploy your ERC-20 token contract / 部署您的 ERC-20 代币合约
- View contract details and specifications / 查看合约详情和规格
- Accounts tab shows all Ganache accounts / 账户选项卡显示所有 Ganache 账户
- View ETH and token balances / 查看 ETH 和代币余额
- Copy addresses and select accounts / 复制地址并选择账户
- Overview tab for basic balance checking and transfers / 概览选项卡用于基本余额查询和转账
- Real-time balance updates after transactions / 交易后实时余额更新
- Bulk Ops tab for batch transfers / 批量操作选项卡用于批量转账
- Add recipients individually or import in bulk / 单独添加接收者或批量导入
- Execute multiple transfers with progress tracking / 执行多个转账并跟踪进度
- Approvals tab for ERC-20 allowance management / 授权选项卡用于 ERC-20 授权额度管理
- Approve spending limits for other addresses / 为其他地址批准支出限额
- Check and revoke existing approvals / 检查和撤销现有授权
- History tab shows all transactions / 历史选项卡显示所有交易
- Export transaction data / 导出交易数据
- Filter and search transaction records / 过滤和搜索交易记录
DApp/
├── contracts/ # Smart contracts / 智能合约
│ └── SimpleToken.sol # ERC-20 token contract / ERC-20 代币合约
├── scripts/ # Deployment scripts / 部署脚本
│ ├── deploy.js # Contract deployment / 合约部署
│ └── start-ganache.js # Ganache configuration / Ganache 配置
├── frontend/ # React frontend / React 前端
│ ├── src/
│ │ ├── components/ # React components / React 组件
│ │ │ ├── TokenBalance.jsx # Balance checker / 余额查询器
│ │ │ ├── TokenTransfer.jsx # Transfer interface / 转账界面
│ │ │ ├── ContractDeployment.jsx # Contract management / 合约管理
│ │ │ ├── AccountManager.jsx # Account overview / 账户概览
│ │ │ ├── BulkOperations.jsx # Batch operations / 批量操作
│ │ │ ├── TokenApproval.jsx # Approval management / 授权管理
│ │ │ └── TransactionHistory.jsx # Transaction log / 交易日志
│ │ ├── store/ # Redux store / Redux 存储
│ │ │ └── apiSlice.js # RTK Query API / RTK Query API
│ │ └── App.jsx # Main app / 主应用
│ └── package.json
├── server.js # Express backend / Express 后端
├── package.json # Dependencies / 依赖项
└── README.md # Documentation / 文档
POST /deploy- Deploy smart contract / 部署智能合约GET /contract-info- Get contract information / 获取合约信息GET /token-info- Get token details / 获取代币详情GET /total-supply- Get total token supply / 获取代币总供应量
GET /balance/:address- Get token balance / 获取代币余额POST /transfer- Transfer tokens / 转账代币POST /approve- Approve token spending / 授权代币支出GET /allowance/:owner/:spender- Check allowance / 检查授权额度
- Name / 名称: Simple Token
- Symbol / 符号: STK
- Decimals / 小数位数: 18
- Total Supply / 总供应量: 1,000,000 STK
- Standard / 标准: ERC-20
- ✅ Standard ERC-20 functions / 标准 ERC-20 功能
- ✅ Transfer and approval mechanisms / 转账和授权机制
- ✅ Balance and allowance queries / 余额和授权额度查询
- ✅ Event emission for transparency / 事件发射以提高透明度
# Full development environment / 完整开发环境
npm run dev
# Individual services / 单独服务
npm start # Backend only / 仅后端
npm run start:ganache # Ganache only / 仅 Ganache
npm run frontend # Frontend only / 仅前端Create .env file / 创建 .env 文件:
ETHEREUM_NODE_URL=http://localhost:8545
PORT=3000
NODE_ENV=development- Network ID: 1337
- Gas Limit: 10,000,000
- Gas Price: 20 Gwei
- Accounts: 10 pre-funded accounts with 1000 ETH each
- Hardfork: London
-
Port Conflicts / 端口冲突
# Kill processes on specific ports / 终止特定端口的进程 npx kill-port 3000 8545 -
Contract Deployment Issues / 合约部署问题
- Ensure Ganache is running / 确保 Ganache 正在运行
- Check gas limits and balances / 检查 gas 限制和余额
- Verify network connectivity / 验证网络连接
-
Transaction Failures / 交易失败
- Insufficient gas / Gas 不足
- Invalid addresses / 地址无效
- Insufficient token balance / 代币余额不足
-
Frontend Connection Issues / 前端连接问题
- Check CORS configuration / 检查 CORS 配置
- Verify API endpoints / 验证 API 端点
- Ensure backend is running / 确保后端正在运行
Enable detailed logging / 启用详细日志记录:
DEBUG=* npm run devThis section outlines exciting smart contract concepts that could be implemented to extend the DApp's functionality. These ideas range from beginner-friendly to advanced implementations.
本节概述了可以实施以扩展 DApp 功能的令人兴奋的智能合约概念。这些想法从初学者友好到高级实现不等。
// Stake tokens to earn rewards / 质押代币以获得奖励
Features / 功能:
- Multiple staking pools with different APY rates / 不同 APY 利率的多个质押池
- Lock-up periods for higher rewards / 锁定期以获得更高奖励
- Compound interest calculations / 复利计算
- Emergency withdrawal mechanisms / 紧急提取机制// Governance and community decision making / 治理和社区决策
Features / 功能:
- Proposal creation and voting / 提案创建和投票
- Token-weighted voting power / 代币加权投票权
- Execution of passed proposals / 执行通过的提案
- Treasury management / 财库管理// Gamified NFT experience / 游戏化 NFT 体验
Features / 功能:
- Mint lottery tickets as NFTs / 将彩票作为 NFT 铸造
- Provably fair random number generation / 可证明公平的随机数生成
- Winner announcements and prize distribution / 获奖者公告和奖品分发
- Collectible ticket designs / 可收藏的票据设计// Decentralized finance lending platform / 去中心化金融借贷平台
Features / 功能:
- Collateralized loans / 抵押贷款
- Dynamic interest rate calculations / 动态利率计算
- Liquidation mechanisms / 清算机制
- Credit scoring system / 信用评分系统// Automated Market Maker (AMM) / 自动做市商
Features / 功能:
- Liquidity pools / 流动性池
- Token swapping mechanisms / 代币交换机制
- Liquidity provider rewards / 流动性提供者奖励
- Price oracles integration / 价格预言机集成// Time-locked token distribution / 时间锁定代币分发
Features / 功能:
- Linear and cliff vesting schedules / 线性和悬崖归属时间表
- Team and investor allocations / 团队和投资者分配
- Revocable vesting for employees / 员工可撤销归属
- Milestone-based releases / 基于里程碑的发布// Enhanced security for fund management / 增强资金管理安全性
Features / 功能:
- Require multiple signatures for transactions / 交易需要多重签名
- Time-locked transactions / 时间锁定交易
- Emergency recovery mechanisms / 紧急恢复机制
- Role-based access control / 基于角色的访问控制// Decentralized insurance coverage / 去中心化保险覆盖
Features / 功能:
- Smart contract coverage / 智能合约覆盖
- Premium calculations / 保费计算
- Automated claim processing / 自动理赔处理
- Risk assessment pools / 风险评估池// Gaming ecosystem with tokenized rewards / 具有代币化奖励的游戏生态系统
Features / 功能:
- Achievement tokens/badges / 成就代币/徽章
- Leaderboards and tournaments / 排行榜和锦标赛
- In-game asset trading / 游戏内资产交易
- Play-to-earn mechanisms / 边玩边赚机制// Create and trade digital assets / 创建和交易数字资产
Features / 功能:
- Mint custom NFTs with metadata / 使用元数据铸造自定义 NFT
- Auction and fixed-price sales / 拍卖和固定价格销售
- Royalty payments to creators / 向创作者支付版税
- Collection management / 收藏管理// Product authenticity and lifecycle tracking / 产品真实性和生命周期跟踪
Features / 功能:
- Product lifecycle tracking / 产品生命周期跟踪
- Authenticity verification / 真实性验证
- Quality assurance records / 质量保证记录
- Recall management / 召回管理// Environmental impact tokenization / 环境影响代币化
Features / 功能:
- Carbon offset tokenization / 碳抵消代币化
- Verification and certification / 验证和认证
- Trading marketplace / 交易市场
- Impact tracking and reporting / 影响跟踪和报告- Staking Contract - Easy DeFi introduction / 简单的 DeFi 介绍
- Voting DAO - Governance concepts / 治理概念
- Multi-Sig Wallet - Security practices / 安全实践
- Lending Protocol - Complex financial logic / 复杂的金融逻辑
- Mini DEX - AMM implementation / AMM 实现
- Token Vesting - Time-based mechanics / 基于时间的机制
- NFT Marketplace - Digital asset economy / 数字资产经济
- Gaming Platform - Tokenized entertainment / 代币化娱乐
- Insurance Protocol - Risk management / 风险管理
- Supply Chain - Enterprise applications / 企业应用
- Carbon Credits - Environmental impact / 环境影响
- Cross-chain Bridge - Interoperability / 互操作性
- Gas Optimization - Efficient contract design / 高效的合约设计
- Security Audits - Professional code review / 专业代码审查
- Testing Coverage - Comprehensive test suites / 全面的测试套件
- Documentation - Clear implementation guides / 清晰的实施指南
- Interactive Dashboards - Real-time data visualization / 实时数据可视化
- Mobile Responsiveness - Cross-platform compatibility / 跨平台兼容性
- User Onboarding - Guided tutorials / 引导教程
- Accessibility - Inclusive design principles / 包容性设计原则
- Wallet Connectivity - MetaMask, WalletConnect / MetaMask, WalletConnect
- Price Feeds - Chainlink oracles / Chainlink 预言机
- IPFS Storage - Decentralized file storage / 去中心化文件存储
- Analytics - Transaction and usage metrics / 交易和使用指标
We welcome community input on which contracts to implement next! Consider factors like:
我们欢迎社区对下一步实施哪些合约的意见！考虑以下因素：
- Learning Value - Educational benefit / 教育价值
- Market Demand - Real-world utility / 现实世界实用性
- Technical Challenge - Skill development / 技能发展
- Innovation Potential - Unique features / 独特功能
Vote for your favorite contract idea or suggest new ones! / 为您最喜欢的合约创意投票或提出新的想法！
- Fork the repository / 分叉仓库
- Create feature branch / 创建功能分支
git checkout -b feature/amazing-feature
- Commit changes / 提交更改
git commit -m 'Add amazing feature' - Push to branch / 推送到分支
git push origin feature/amazing-feature
- Open Pull Request / 开启拉取请求
This project is licensed under the MIT License - see the LICENSE file for details.
本项目采用 MIT 许可证 - 详情请参阅 LICENSE 文件。
- Ethereum Foundation for Web3 standards and blockchain infrastructure / 以太坊基金会的 Web3 标准和区块链基础设施
- OpenZeppelin for secure smart contract patterns and libraries / OpenZeppelin 的安全智能合约模式和库
- Ant Design for the comprehensive React UI component library that powers our beautiful interface / Ant Design 提供的全面 React UI 组件库，为我们的美观界面提供支持
- Ganache for local blockchain development and testing environment / Ganache 的本地区块链开发和测试环境
- React Team for the powerful frontend framework / React 团队提供的强大前端框架
- Redux Toolkit for efficient state management / Redux Toolkit 的高效状态管理
- Vite for fast development build tooling / Vite 的快速开发构建工具
- Web3.js for Ethereum blockchain interaction / Web3.js 的以太坊区块链交互功能
Happy Coding! / 编程愉快！ 🚀