项目状态：已归档。 ATB DApp 的线上服务已经停止，本文不提供可操作的在线演示。请勿向项目历史地址或合约转入任何资产。本文只记录前端工程实现，不构成投资建议。
项目概览
ATB DApp 是一个运行在 BNB Smart Chain（BSC）主网上的 Web3 前端应用。项目围绕钱包连接、USDT 激活、ATB 质押、收益领取和团队数据展示，组成了一套完整的 DApp 用户界面。
目前保留的仓库只有前端代码。链上余额与交易依赖已经部署的智能合约，用户、收益、团队、签名和记录等数据依赖独立后端。因此，在后端停止服务后，仓库仍可用于理解界面和交互架构，但无法独立还原原有业务。
桌面端质押与收益面板。截图来自项目运行期间的历史版本。
核心用户流程
前端将一次完整交互拆分为几个连续步骤：
- 用户通过 RainbowKit 连接浏览器钱包。
- 应用校验钱包网络，并读取 USDT、ATB 和资金池余额。
- 用户支付指定数量的 USDT 激活服务。
- 用户将 ATB 转入后端返回的接收地址，完成质押操作。
- 前端从后端获取收益、团队等级和邀请关系等业务数据。
- 领取收益时，后端生成签名参数，前端再调用合约的
withdrawPermit方法提交交易。
这种结构把职责分成了三层：钱包与链上交易由前端和合约完成，业务状态由后端维护，领取操作通过后端签名与合约校验连接起来。
前端技术实现
钱包与网络接入
项目使用 RainbowKit 提供连接界面，并通过 wagmi 和 viem 与链上数据交互。Provider 只注册 BSC 主网，支持 MetaMask、WalletConnect、Trust Wallet、TokenPocket、OKX Wallet 等常见钱包。
前端会读取用户的 USDT、ATB、LP Token 余额以及资金池余额，并监听账户切换后的状态变化。合约地址、ABI 和 Chain ID 集中放在独立配置模块中，避免页面重复声明。
激活与质押
首页的激活流程会先校验用户状态、邀请关系和 USDT 余额，再从后端获取接收地址并发起代币转账。
质押页面采用相似的处理方式：检查 ATB 余额和输入数量，将数量转换为代币精度，然后调用 ATB 合约的 transfer 方法。交易成功后，页面刷新收益数据并给出状态提示。
签名领取
收益领取不是单纯调用一个公开转账接口。前端先向后端请求领取签名，得到领取编号、金额、代币地址、截止时间以及签名的 r、s、v 参数，再调用领取合约。
这套流程减少了前端自行决定领取金额的空间，同时也意味着完整功能依赖后端签名服务。后端停止后，即使页面仍能打开，也无法完成原有领取流程。
团队数据与邀请关系
个人中心展示上级地址、邀请链接、节点等级、团队业绩和直推数据。邀请信息通过 URL 参数传递，连接钱包后再与当前地址组合成分享链接。
团队节点等级、直推条件与业绩数据的桌面端布局。
响应式设计与国际化
桌面端使用多列信息面板承载余额、收益和团队指标；移动端则将内容转换为纵向卡片，并使用折叠菜单减少导航占用空间。
移动端首页保留钱包入口、核心认购信息和业务说明。
移动端质押、收益统计和领取入口。
仓库保留了多套语言资源，产品界面实际开放中文和英文切换。语言选择保存在浏览器本地，刷新后可以继续使用上次选择。
技术栈
- Next.js 14、React 18、TypeScript
- wagmi、viem、RainbowKit
- Tailwind CSS、daisyUI、Material UI
- Axios
- i18next、react-i18next
- PM2
项目边界
ATB DApp 前端仓库不包含以下部分：
- 后端服务及数据库
- 后端签名密钥与签名实现
- 智能合约源码及部署流程
- 可继续运营的线上环境
如果今天重新实现
回看这个项目，最值得改进的方向包括：
- 使用明确的接口类型替代页面中的宽泛
any。 - 全程使用
bigint、formatUnits和parseUnits处理代币精度，避免转换为 JavaScriptNumber。 - 将后端请求、链上读取和交易状态整理成更清晰的数据层。
- 统一 loading、成功、失败和钱包未连接状态，避免无数据时出现
NaN。 - 将测试网、主网、合约地址和 API 地址拆分为可验证的环境配置。
- 为邀请链接、输入校验和签名领取流程补充单元测试与端到端测试。
- 统一包管理器，并改进环境变量示例和仓库发布规范。
这些问题也是归档旧项目的价值所在：它不仅记录当时完成了什么，也能清楚呈现后续工程能力的成长方向。
总结
ATB DApp 覆盖了 Web3 前端中常见但彼此关联紧密的能力：钱包连接、链上余额、代币转账、后端签名、合约领取、团队数据和响应式界面。
虽然线上服务已经停止，但它仍是一份完整的历史工程案例。相比继续维护一个不可用的 Demo，保留源码、界面截图和技术复盘，更能准确说明项目的实现范围与前端经验。
仓库当前未声明开源许可证，因此这里使用“源码公开”而非“开源项目”。代码仅供阅读和项目回顾，具体授权范围请以仓库后续许可证为准。
