ralexandrec/vrf-lotto-frontend

# Lotchain 前端 🎟️✨ 欢迎使用 **Lotchain** 的前端应用，这是一个优质、去中心化且可审计的智能合约抽奖应用。该 Web 界面使用 **React**、**Vite**、**Ethers.js (v6)** 构建，并采用了旨在呈现时尚的*暗黑与金色*现代美感的自定义 CSS 样式。 该应用利用 **Chainlink VRF v2.5** 来保证加密安全且防篡改的随机数以抽取获胜者，并集成了 **ChangeNOW** 小组件功能，以实现流畅的法币/加密货币引导流程。 ## 🔗 相关仓库与资源 - **智能合约后端：** [vrf-lotto](https://github.com/ralexandrec/vrf-lotto) - 包含 Solidity 智能合约、Hardhat 脚本、部署设置和后端抽奖测试覆盖率的代码库。 - **合约地址 (Base Sepolia)：** `0x10ed17d3F4AAD4043f34b9A9AD024c743f2Db46F` - **所有者地址：** `0xc545124FA9704BA2eC880e3E5A141eBb6bE98B41` ## ✨ 功能 - **Web3 钱包连接：** 集成了 MetaMask 连接，支持动态链检测。 - **自动网络切换：** 自动添加并提示用户切换到 **Base Sepolia** 测试网。 - **动态引导向导 (投注助手)：** - **第 1 步：** 钱包连接触发器。 - **第 2 步：** 根据当前的链配置，提供交互式水龙头 (Faucets) 列表 (Base Sepolia) 或 ChangeNOW 小组件 (Base 主网)，帮助用户轻松获取 ETH。 - **第 3 步：** 动态购票界面。 - **实时同步状态：** 动态轮询（10秒间隔）和事件监听器，用于实时奖池、玩家数量、状态更新以及祝贺触发。 - **活动日志控制台：** 内联可视化日志控制台，用于监控交易状态和区块事件。 - **管理面板 (动态)：** 仅对智能合约所有者钱包可见，允许管理员直接从 Web 界面触发抽奖 (`sortearVencedor()`)。 - **多语言 (i18n)：** 支持葡萄牙语 (PT) 和英语 (EN) 的轻量级、响应式翻译。 ## 🚀 快速开始 ### 1. 前置条件 请确保您已安装 **Node.js** (v18+)。 ### 2. 安装 克隆仓库并安装依赖： ``` git clone https://github.com/ralexandrec/vrf-lotto-frontend.git cd vrf-lotto-frontend npm install ``` ### 3. 本地运行 启动开发服务器： ``` npm run dev ``` 在浏览器中打开 **`http://localhost:5173`**。 ### 4. 生产环境构建 打包静态应用资源： ``` npm run build ``` 输出的文件将构建在 `/dist` 目录中。由于采用了相对资产基础路径配置，它们可以从任何子目录或云 S3/GCS 存储桶中提供服务。 ## 🧪 测试 该仓库包含基于 **Cucumber**、**Playwright** 和 **Chai** 构建的行为驱动 E2E 测试，用于验证 Web3 钱包状态、动态翻译和智能合约模拟输入。 运行测试套件： ``` npx cucumber-js ``` ## 🌍 GitHub Pages 部署 该仓库预先打包了 `.github/workflows/deploy.yml` 中的 GitHub Actions 工作流，用于处理自动编译和部署到 GitHub Pages。 要激活自动部署： 1. 将代码推送到您的 GitHub 仓库：`vrf-lotto-frontend`。 2. 进入您 GitHub 仓库的 **Settings -> Pages**。 3. 在 **Build and deployment -> Source** 下，选择 **GitHub Actions**。 4. 每次推送到 `main` 或 `master` 分支都将触发自动构建和部署。 ## 📄 许可证 本项目是开源的，基于 [MIT License](LICENSE) 提供。

标签：DApp, Ethers.js, React, Syscalls, Vite, Web3, 区块链, 智能合约, 特征检测, 自定义脚本