项目地址
https://github.com/gaojianshuai/uniswapv2
vercel已部署
地址：
https://uniswapv2-mu.vercel.app/
uniswapv2-c61jo038s-gaojianshuais-projects.vercel.app
📋 项目概述
这是一个完整的 Uniswap DEX 克隆应用，实现了去中心化交易所的核心功能，包括代币交换、流动性管理和钱包连接。
🎯 实现的功能
核心功能
-
钱包连接
- 支持 MetaMask 等 Web3 钱包
- 自动检测钱包安装状态
- 账户切换和断开连接
- 实时余额显示
-
代币交换（Swap）
- 代币选择和搜索
- 实时汇率计算
- 价格影响显示
- 滑点容差设置
- 交易确认流程
-
流动性管理（Pool）
- 添加流动性
- 移除流动性
- 流动性池列表
- 份额和价值显示
UI/UX 特性
- 🎨 现代化设计，仿 Uniswap V3 风格
- 📱 完全响应式布局
- 🌈 渐变背景和毛玻璃效果
- 🔔 实时通知系统（Toast）
- ⚡ 流畅的交互动画
📂 项目结构
uniswap-clone/
├── src/
│ ├── components/ # React组件
│ │ ├── Header.jsx # 顶部导航栏
│ │ ├── TokenInput.jsx # 代币输入框
│ │ └── TokenModal.jsx # 代币选择模态框
│ ├── contexts/ # Context API
│ │ └── Web3Context.jsx # Web3状态管理
│ ├── pages/ # 页面组件
│ │ ├── Swap.jsx # 交换页面
│ │ └── Pool.jsx # 流动性页面
│ ├── utils/ # 工具函数
│ │ ├── tokens.js # 代币数据
│ │ └── swap.js # 交换计算
│ ├── App.jsx # 主应用组件
│ ├── main.jsx # 入口文件
│ └── index.css # 全局样式
├── public/ # 静态资源
├── package.json # 项目配置
├── vite.config.js # Vite配置
├── tailwind.config.js # Tailwind配置
├── index.html # HTML模板
├── README.md # 项目说明
├── QUICKSTART.md # 快速开始
├── DEPLOYMENT.md # 部署指南
├── start.bat # Windows启动脚本
└── start.sh # Linux/Mac启动脚本
🛠️ 技术栈
前端框架
- React 18: 现代化UI框架
- Vite: 快速构建工具
- React Router: 客户端路由
Web3集成
- Ethers.js 6: 以太坊JavaScript库
- MetaMask: 钱包连接
样式方案
- Tailwind CSS: 实用优先的CSS框架
- Lucide React: 图标库
- 自定义渐变和动画
工具库
- React Hot Toast: 通知系统
- PostCSS: CSS处理
🔧 关键文件说明
Web3Context.jsx
核心状态管理，负责：
- 钱包连接和断开
- 账户状态管理
- 余额更新
- 事件监听
Swap.jsx
交换页面的主要逻辑：
- 代币选择
- 金额输入和计算
- 汇率显示
- 交易执行（当前为模拟）
Pool.jsx
流动性管理：
- 添加/移除流动性
- 池列表显示
- 份额计算
TokenInput.jsx
可复用的代币输入组件：
- 金额输入
- 代币选择按钮
- 余额显示
- 最大按钮
📝 代码特点
1. 详细注释
每个文件、函数、变量都有清晰的中文注释，方便理解代码逻辑。
2. 模块化设计
组件按功能拆分，便于维护和扩展。
3. 错误处理
所有异步操作都包含错误处理和用户提示。
4. 类型安全
虽然使用JavaScript，但通过注释和命名约定保证代码质量。
🚀 部署说明
本地开发
npm install
npm run dev
生产构建
npm run build
构建后的文件在 dist 目录，可部署到任何静态服务器。
推荐部署平台
- Vercel: 一键部署，自动HTTPS
- Netlify: 简单配置，CDN加速
- GitHub Pages: 免费托管
⚠️ 注意事项
当前限制
- 模拟交易：当前版本中交易为模拟实现，不会产生真实链上交易
- 代币地址：使用的代币地址为演示地址，需要替换为真实地址
- 汇率计算：使用模拟汇率，实际应调用Uniswap Router合约
完整集成需要
- 部署或连接 Uniswap V2/V3 Router 合约
- 配置真实的代币合约地址
- 实现完整的链上交易逻辑
- 添加交易历史记录功能
- 实现真实的流动性池数据查询
🔄 后续改进方向
功能增强
- 添加更多钱包支持（WalletConnect等）
- 实现真实的链上交易
- 添加交易历史页面
- 实现价格图表
- 添加代币导入功能
性能优化
- 添加代码分割
- 优化图片加载
- 实现虚拟滚动（长列表）
- 添加缓存机制
用户体验
- 深色/浅色主题切换
- 多语言支持
- 更好的移动端体验
- 加载状态优化
📚 学习资源
相关文档
推荐阅读
- Ethereum 智能合约开发
- DeFi 协议原理
- Web3 前端开发最佳实践
📄 许可证
本项目仅供学习和研究使用。
👥 贡献
欢迎提交 Issue 和 Pull Request！
项目创建时间: 2025
最后更新: 2025
评论区