登录 后可观看高清视频

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

293次播放
2025-07-05

视频 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 进行端到端测试，确保网站功能正常。