assetx/webapp/QWEN.md

AssetX Webapp 项目记忆文件

项目概述

AssetX 是一个 DeFi 资产管理平台前端，基于 Next.js 15 + React 19 + TypeScript 构建。

技术栈

• 框架: Next.js 15 (App Router)
• UI库: React 19, HeroUI, Tailwind CSS
• Web3: wagmi, viem, Reown AppKit, MetaMask SDK, Coinbase Wallet SDK, WalletConnect
• 图表: ECharts
• 动画: Framer Motion
• 通知: Sonner
• 包管理: npm/bun

目录结构

webapp/
├── app/                      # Next.js App Router 页面
│   ├── layout.tsx           # 根布局
│   ├── page.tsx             # 首页
│   ├── alp/                 # ALP (资产流动性池) 模块
│   ├── ecosystem/           # 生态系统页面
│   ├── lending/             # 借贷模块
│   ├── market/              # 市场模块
│   ├── points/              # 积分模块
│   ├── product/             # 产品详情页
│   ├── swap/                # 交易兑换模块
│   └── transparency/         # 透明度页面
│
├── components/              # React 组件
│   ├── alp/                 # ALP 相关组件
│   ├── common/              # 通用组件
│   ├── fundmarket/          # 基金市场组件
│   ├── icons/               # 图标组件
│   ├── layout/              # 布局组件 (Sidebar, TopBar等)
│   ├── lending/             # 借贷相关组件
│   ├── modals/              # 弹窗组件
│   ├── points/              # 积分相关组件
│   ├── product/             # 产品相关组件
│   ├── transparency/        # 透明度组件
│   ├── wallet/              # 钱包组件
│   ├── Providers.tsx        # 全局 Provider 包装器
│   └── ResourcePreload.tsx  # 资源预加载
│
├── hooks/                   # 自定义 React Hooks
│   ├── useBalance.ts        # 余额查询
│   ├── useCollateral.ts     # 抵押品操作
│   ├── useContractRegistry.ts # 合约注册表
│   ├── useDeposit.ts        # 存款操作
│   ├── useHealthFactor.ts   # 健康因子
│   ├── useLendingCollateral.ts # 借贷抵押
│   ├── useLendingSupply.ts  # 借贷供应
│   ├── useLendingWithdraw.ts # 借贷提取
│   ├── usePoolDeposit.ts    # 池存款
│   ├── usePoolWithdraw.ts   # 池提取
│   ├── useSwap.ts           # 交换操作
│   ├── useTokenBySymbol.ts  # 按符号获取代币
│   ├── useTokenDecimals.ts  # 代币精度
│   ├── useTokenList.ts      # 代币列表
│   ├── useWalletStatus.ts   # 钱包状态
│   └── useWithdraw.ts       # 提款操作
│
├── lib/                     # 工具库
│   ├── api/                 # API 接口
│   │   ├── contracts.ts     # 合约 API
│   │   ├── fundmarket.ts    # 基金市场 API
│   │   ├── lending.ts       # 借贷 API
│   │   ├── points.ts        # 积分 API
│   │   └── tokens.ts        # 代币 API
│   ├── contracts/           # 合约相关
│   │   ├── abis/           # 合约 ABI 文件
│   │   │   ├── lendingProxy.json
│   │   │   ├── USDY.json
│   │   │   ├── YT-Token.json
│   │   │   ├── YTAssetFactory.json
│   │   │   ├── YTLPToken.json
│   │   │   ├── YTPoolManager.json
│   │   │   ├── YTPriceFeed.json
│   │   │   ├── YTRewardRouter.json
│   │   │   └── YTVault.json
│   │   ├── index.ts
│   │   └── registry.ts      # 动态合约地址注册表
│   ├── wagmi.ts             # Wagmi 配置
│   └── buttonStyles.ts      # 按钮样式
│
├── contexts/                # React Context
│   └── AppContext.tsx       # 全局应用状态
│
├── locales/                 # 国际化
│   ├── en.json              # 英文
│   └── zh.json              # 中文
│
├── public/                  # 静态资源
├── scripts/                 # 脚本工具
└── logs/                    # 日志目录

支持的区块链网络

• Ethereum Mainnet
• Sepolia (测试网)
• Arbitrum
• Base
• BSC (Binance Smart Chain)
• Arbitrum Sepolia (测试网)
• BSC Testnet

核心功能模块

1. Product - 产品详情展示 (APY, TVL, 资产概述等)
2. ALP - 资产流动性池
3. Swap - 代币交换
4. Lending - 借贷系统
5. Transparency - 透明度/验证
6. Points - 积分系统
7. Ecosystem - 生态系统
8. Market - 市场模块

常用命令

npm run dev      # 开发模式 (端口 3010)
npm run build    # 构建生产版本
npm start        # 启动生产服务器
npm run lint     # 代码检查

钱包支持

• MetaMask
• OKX Wallet
• Trust Wallet
• Coinbase Wallet
• Backpack Wallet
• WalletConnect

合约 ABI 文件

项目包含以下智能合约 ABI:

• YTVault - 金库合约
• YTPoolManager - 池管理合约
• YTLPToken - LP 代币合约
• YT-Token - YT 代币合约
• YTAssetFactory - 资产工厂合约
• YTPriceFeed - 价格预言机合约
• YTRewardRouter - 奖励路由合约
• USDY - USDY 代币合约
• lendingProxy - 借贷代理合约

开发注意事项

• 使用 App Router (Next.js 15)
• 全局状态通过 AppContext.tsx 管理
• Web3 配置在 lib/wagmi.ts
• 合约地址支持动态注册 (lib/contracts/registry.ts)
• 支持中英文国际化 (locales/)