Fleek

Web3 全栈开发 #3 - 构建 ERC-20 代币空投网站

视频 AI 总结： 本视频是 AI Vibe Coding 全栈 Web3 开发者速成课程的第二部分，重点在于构建一个实际存在的网站 tsender.com，该网站允许用户连接钱包并向不同的人空投 ERC-20 代币。视频详细介绍了如何使用 Next.js 和 React 框架，以及 RainbowKit 和 Wagme 等工具来构建一个静态网站，并使用 Fleek 平台进行部署。最终目标是创建一个高效、安全的代币空投工具，类似于 CodeHawks 团队用于奖励竞赛审计获胜者的工具。 关键信息： 1. **项目目标**：构建一个名为 TCender 的网站，用于高效空投 ERC-20 代币。 2. **技术栈**：使用 Next.js 和 React 构建前端，RainbowKit 用于钱包连接，Wagme 用于与区块链交互，Fleek 用于静态网站部署。 3. **核心功能**：实现 airdrop ERC-20 函数，该函数接受 ERC-20 代币地址、接收者列表和金额列表作为输入。 4. **开发流程**：创建基本的 React/Next.js 应用程序，连接钱包，实现空投功能，并部署到 Fleek。 5. **安全考虑**：强调代码正确性的重要性，以避免潜在的黑客攻击和资金损失。 6. **使用 Huff 语言优化**：TCender 使用 Huff 语言编写智能合约，以实现最高的 gas 效率。 7. **测试和部署**：使用 Anvil 进行本地测试，并使用 Fleek 部署静态网站。 8. **质量提升**：添加加载指示器，交易详情框，并保持页面刷新后输入框内容不变。 9. **端到端测试**：使用 Synpress 和 Playwright 进行端到端测试，确保网站功能正常。