MetaSwap - 去中心化交易所前端

这是一个基于 Next.js 和 Wagmi 构建的现代化去中心化交易所前端应用，类似于 Uniswap V3 的功能实现。

🚀 项目概述

MetaSwap 是一个功能完整的 DeFi 交易界面，提供代币交换、流动性池管理和持仓管理功能。项目采用现代化技术栈，使用 Ant Design + Tailwind CSS 构建响应式用户界面，集成 RainbowKit 进行多钱包连接支持。

✨ 核心功能

🔄 代币交换 (Swap)

• 实时价格计算: 基于 Uniswap V3 算法的精确价格计算
• 双向交换: 支持 exactInput 和 exactOutput 两种交换模式
• 智能路由: 自动选择最优交易路径和流动性池
• 实时余额显示: 动态显示钱包代币余额
• 交换方向切换: 一键切换输入输出代币
• 价格影响保护: 内置滑点保护机制

💧 流动性池管理 (Pool)

• 池子列表展示: 显示所有可用的流动性池
• 池子详细信息: 包含代币对、手续费层级、当前价格、流动性等
• 添加流动性池: 支持创建新的流动性池
• 响应式表格: 支持分页和横向滚动
• 实时数据更新: 自动刷新池子状态

📊 持仓管理 (Positions)

• 我的持仓: 显示用户在各个池子中的流动性持仓
• 详细持仓信息: 包含持仓范围、手续费收益、代币数量等
• 持仓操作: 支持移除流动性和收取手续费
• 添加持仓: 在现有池子中增加流动性
• 实时收益计算: 动态显示手续费收益

🪙 代币水龙头 (Faucet)

• 测试代币获取: 支持 DTA、DTB、DTC 三种测试代币
• 批量铸造: 可自定义铸造数量
• 交易状态跟踪: 实时显示铸造交易状态
• 余额更新: 铸造完成后自动更新余额显示

🔗 钱包集成

• 多钱包支持: 集成 RainbowKit，支持 MetaMask、WalletConnect 等
• 网络切换: 支持 Mainnet、Sepolia、Hardhat 本地网络
• 连接状态管理: 优雅的连接状态处理和错误提示
• 交易签名: 安全的交易签名和确认流程

🛠 技术栈

前端框架

• Next.js 14: React 全栈框架，支持 SSR 和 SSG
• React 18: 最新的 React 特性和 Hooks
• TypeScript 5: 完整的类型安全支持

样式系统

• Tailwind CSS v4: 原子化 CSS 框架
• Ant Design 5: 企业级 UI 组件库
• 响应式设计: 完美适配桌面端和移动端

区块链集成

• Wagmi: 现代化的以太坊 React Hooks 库
• Viem: 轻量级以太坊接口
• RainbowKit: 钱包连接组件库
• Uniswap V3 SDK: 用于价格计算和路由

开发工具

• pnpm: 高效的包管理器
• Wagmi CLI: 自动生成合约交互代码
• PostCSS: CSS 后处理器

📁 项目结构

MetaSwap-Fe/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── faucet/            # 代币水龙头页面
│   │   │   └── page.tsx
│   │   ├── pool/              # 流动性池页面
│   │   │   └── page.tsx
│   │   ├── positions/         # 持仓管理页面
│   │   │   └── page.tsx
│   │   ├── swap/              # 代币交换页面
│   │   │   └── swapPage.tsx
│   │   ├── globals.css        # 全局样式
│   │   ├── header.tsx         # 头部导航组件
│   │   ├── layout.tsx         # 根布局
│   │   ├── page.tsx           # 主页（重定向到 Swap）
│   │   └── providers.tsx      # 全局提供者配置
│   ├── components/            # 可复用组件
│   │   ├── AddPoolModal.tsx   # 添加流动性池模态框
│   │   ├── AddPositionModal.tsx # 添加持仓模态框
│   │   └── Balance.tsx        # 余额显示组件
│   ├── hooks/                 # 自定义 Hooks
│   │   └── useTokenAddress.ts # 代币地址获取 Hook
│   ├── utils/                 # 工具函数
│   │   ├── common.ts          # 通用工具函数
│   │   └── contracts.ts       # 合约交互函数（自动生成）
│   └── wagmi.ts              # Wagmi 配置
├── .env.local                # 环境变量配置
├── next.config.js            # Next.js 配置
├── package.json              # 项目依赖
├── tailwind.config.js        # Tailwind 配置
├── tsconfig.json             # TypeScript 配置
└── wagmi.config.ts           # Wagmi CLI 配置

🔧 开发指南

环境要求

• Node.js 18+
• pnpm 8+
• Git

环境变量配置

# WalletConnect 项目 ID（可选）
NEXT_PUBLIC_WC_PROJECT_ID=your_walletconnect_project_id

# 禁用 Next.js 遥测
NEXT_TELEMETRY_DISABLED=1

构建命令

# 开发环境
pnpm dev

# 构建生产版本
pnpm build

# 启动生产服务器
pnpm start

# 代码检查
pnpm lint

# 生成合约交互代码
pnpm wagmi generate

🌐 支持的网络

• Ethereum Mainnet: 以太坊主网
• Sepolia Testnet: 以太坊测试网
• Hardhat Local: 本地开发网络 (http://127.0.0.1:8545)

📝 更新日志

v1.0.0

• ✅ 完整的代币交换功能
• ✅ 流动性池管理
• ✅ 持仓管理系统
• ✅ 代币水龙头
• ✅ 多钱包支持
• ✅ 响应式设计
• ✅ 完整的错误处理