前端开发

VibeCoding: 利用 EIP-7702批量打包 Approve与Deposit

视频 AI 总结： 视频主要讲解了如何在 Token Bank 项目中利用 EIP-7702 将 approve 和 deposit 两笔交易打包成一次批量交易，并纠正了 AI 认为“无法实现”的误导。主讲人指出 AI 对新标准（如 7702）的语料库滞后，需手动分析；通过实际代码部署和演示，说明前端与 demo 网站本质相同，均可实现。最终成功添加了 7702 批量存款功能，并介绍了 MetaMask 的 5792 标准及委托合约的执行流程。 视频中提出的关键信息： 1. AI 对较新的 EIP-7702 存在知识盲区，容易产生幻觉，不能完全依赖。 2. EIP-7702 允许将 EOA 账户临时加载合约代码，使其像合约一样执行批量交易。 3. 通过 MetaMask 的 `wallet_sendCalls`（ERC-5792）接口，可以将多个调用打包成数组一次性发送。 4. 本地测试可能因缺少 MetaMask 预设的委托合约地址而困难，建议在测试网上验证。 5. 实现时需检查钱包是否支持 batch 能力，并在前端条件渲染。

9 0 0 2026-06-03 07:11

VibeCoding：为 TokenBank 开发前端

视频 AI 总结： 本视频讲解了为Token Bank合约添加前端界面的过程，重点介绍了DApp与钱包交互的常见方式（浏览器插件钱包、原生应用钱包），以及游戏类应用的特殊处理（内部集成钱包）。演示了使用AI工具（如DeepSeek、Claude）辅助编写前端代码和接入APKIT钱包SDK，并分析了开发中的常见问题与调试方法。 关键信息： 1. DApp前端交互的常见模式：通过浏览器插件钱包（如MetaMask）或原生应用钱包（如手机App）发起交易。 2. 游戏类DApp的特殊方案：在应用内部集成轻量钱包，本地存储私钥/助记词，避免频繁弹窗签名。 3. AI辅助开发：利用AI工具（如DeepSeek、Claude）生成前端代码、修改合约交互、调试错误，但需注意AI知识库可能过时。 4. 接入AppKit钱包：安装SDK，修改钱包连接逻辑（用useAppKit替换useConnect），配置Provider，支持扫码和WalletConnect。 5. 开发调试建议：明确指定技术方案给AI，交叉验证方案，及时记录AI的常见错误以优化提示。

15 0 0 2026-05-26 10:14

Web3 前端开发：Wagmi 与钱包连接库

视频 AI 总结： 视频系统讲解了前端与以太坊合约交互的完整流程，涵盖钱包连接方式、状态管理库使用、身份认证机制等核心内容，强调用户体验和多钱包兼容性，并介绍了借助现代工具和 AI 简化开发的方法。 关键信息： 1. 前端通过 JSON RPC 与链交互，常用 Viem.sh 等 SDK 封装底层调用。 2. 钱包连接方式包括：浏览器插件注入（window.ethereum）、EIP-6963 事件驱动多钱包兼容、WalletConnect 桥接手机钱包、社交账号登录（MPC 分片技术）。 3. Wagmi 库提供 React Hooks，自动维护钱包状态、余额、合约数据缓存和交易状态，简化前端开发。 4. 以太坊登录（Sign in with Ethereum）用于后端身份认证，需包含 nonce 防止重放，签名验证后下发 Token。 5. 推荐使用 Web3Kit 等第三方 SDK 统一接入多种钱包，并借助 AI 工具（如 Figma Make、Google Stich）辅助前端界面生成。

39 0 0 2026-05-23 10:14

Web3 应用开发初探

视频 AI 总结： 本期课程讲解了 Web3 应用的开发，重点是如何在前端用户界面中调用智能合约。与传统的后端为中心的应用不同，Web3 应用的后端运行在去中心化区块链网络上，用户通过前端直接与链交互。课程介绍了 Web3 应用的架构变化、与链交互的几种方式（读合约数据、写交易、监听事件），并通过实际代码演示了如何使用 RPC 调用以及 Win 等库封装这些交互。特别强调了前端通过钱包（如 MetaMask）获取用户签名发起交易，以及通过 WebSocket 实时监听链上事件。 关键信息： 1. Web3 应用的架构区别于传统应用：后端逻辑运行在去中心化网络上，用户通过前端直接与区块链交互，数据所有权归用户。 2. 与链交互的核心动作：读合约数据（通过 `eth_call`）、写交易（通过 `eth_sendRawTransaction`）、监听链上事件（通过 WebSocket）。 3. 直接使用 RPC 调用复杂，通常使用库（如 Win、Web3.js）进行封装，简化开发。 4. 前端开发中，用户的私钥保存在钱包插件（如 MetaMask）中，前端通过钱包注入的对象获取签名并发起交易。 5. 历史数据（如转账记录）难以直接从链上获取，通常需要后端或第三方数据平台（如索引器）进行缓存和查询。 6. 课程演示了如何使用 Win 库创建客户端、读取余额、调用合约、发送交易以及解析事件日志。

25 0 0 2026-05-22 09:45

VibeCoding: TokenBank前端

视频 AI 总结： 视频演示了如何利用AI工具（如Codex）快速开发一个TokenBank去中心化应用的前端界面。核心功能包括代币的存入（deposit）和取出（withdraw），并涉及合约部署、ABI获取、钱包连接（Web3Modal）以及必要的代币授权流程。视频强调了AI在代码生成和UI设计（如Google Stitch、Figma Make）方面的强大能力，甚至能从图片生成前端代码，极大地提升了开发效率和便利性。 关键信息： 1. **项目目标与核心功能**：为TokenBank智能合约构建前端界面，实现代币的存入（deposit）和取出（withdraw）功能。 2. **开发流程**： * 部署Token和TokenBank智能合约，获取合约地址和ABI（接口描述）。 * 使用AI工具（如Codex）生成前端代码，采用Next.js作为前端框架，Web3Modal进行钱包连接。 * 前端界面需包含输入框、存取按钮、用户余额显示，并处理代币授权（approve）步骤。 * 开发环境可使用本地节点（如Hardhat/Anvil）进行合约部署和测试。 3. **AI在前端开发中的应用**： * **代码生成**：AI工具（如Codex）能根据需求生成完整的Next.js前端代码，包括合约交互逻辑、React Hooks等。 * **UI/UX设计**：介绍Google Stitch和Figma Make等AI工具，它们能根据文本提示生成UI设计，并支持导出到Figma或直接生成带样式的代码。 * **图片转代码**：AI能够将UI图片转换为HTML/CSS前端代码，进一步加速开发。 4. **开发理念**：强调“思路”的重要性，鼓励开发者信任AI工具，利用其大幅提升开发效率，减少重复性工作。 5. **后端开发（简述）**：提及后端开发类似，主要关注监听合约事件，通过AI生成监听脚本。 6. **NFT托管问题解答**：澄清在NFT市场中，一旦用户授权并上架NFT，NFT的所有权已转移至市场合约，买家购买时无需原所有者再次“放行”。

76 0 0 2026-03-14 10:53

通过这 6 个实践快速入门 Web3

视频 AI 总结： 该视频的核心内容是 Tiny熊分享了六个Web3入门实践项目，旨在帮助学习者通过动手实践，更好地掌握Web3开发技能。这六个项目涵盖了智能合约、Token发行、DEX、NFT市场、前端开发和后端数据索引等关键领域，为初学者提供了一个清晰的学习路径和实践方向。 视频中提出的关键信息： 1. **项目一：资产管理合约**：编写合约实现用户资产的托管和提取。 2. **项目二：Token发行**：发行ERC20或ERC721 Token，并能在浏览器和钱包中查看。 3. **项目三：简易DEX**：实现Token间的兑换（Swap）、添加流动性（Add Liquidity）和移除流动性（Remove Liquidity）功能，可参考Uniswap V2。 4. **项目四：NFT市场**：编写合约实现NFT的上架（List）和购买（Buy）功能，使用Token购买NFT。 5. **项目五：前端开发**：为DEX或NFT市场编写前端界面，使用Viem/Wagmi（以太坊）或web3js（Solana）等库连接区块链，并使用React框架。 6. **项目六：后端开发**：编写后端程序，使用与前端相同的库连接区块链，将链上数据索引到数据库，并提供API供前端访问，例如用户交易记录。

2218 0 0 2025-11-18 11:08

AI 辅助 Web3 DApp 前端快速开发

视频 AI 总结： 该视频主要讲解了如何利用 AI 工具（Claude 和 ChatGPT）快速开发 Web3 DApp 项目的前端页面，并分享了编写提示词的技巧和思路。核心内容是利用 ChatGPT 生成 Claude Code 可用的提示词，从而让 AI 逐步完成项目开发，提高开发效率。 关键信息： 1. **核心目标：** 利用 AI 快速生成 Web3 DApp 项目的前端页面，包括 Launchpad、Dashboard、Bridge 等。 2. **工具选择：** Claude Code 用于代码生成，ChatGPT 用于生成提示词。 3. **提示词技巧：** 详细描述项目背景、目标、具体要求、输出产物描述、验收标准和注意事项，确保 AI 理解并准确执行任务。 4. **任务拆解：** 将大型项目拆解为多个小步骤，逐步执行，并进行 commit 提交，方便 debug 和回溯。 5. **全局提示词：** 提供全局的项目背景、任务、规则和交付标准，让 AI 能够理解整个项目的架构和规范。 6. **AI 的局限性：** AI 在样式还原方面可能存在不足，需要手动微调。 7. **开发者角色：** 开发者需要具备业务知识和技术能力，才能更好地利用 AI 工具，并对 AI 生成的代码进行调试和优化。 8. **未来趋势：** AI 将会越来越强大，开发者需要提升自身能力，掌握 AI 工具的使用，才能在未来的职场中保持竞争力。 9. **实战演示：** 演示了如何利用 AI 生成 Launchpad 和 Bridge 页面，并展示了生成结果。

66 0 0 2025-11-13 10:29

DApp 实战：Next.js 开发 Swap/Pool/Farm

视频 AI 总结： 1. **核心内容：** 本视频是 Web3 项目实战课程的第二节，主要讲解了如何利用 Next.js 和 RainbowKit 等工具库开发 Swap、Pool 和 Farm 三个核心页面。强调了利用 AI 辅助编程的重要性，并鼓励学员掌握 AI 工具，提高开发效率。 2. **关键信息：** * **项目结构与环境配置：** 强调了项目环境配置的重要性，包括 Next.js 配置、工具包安装等，并建议参考官方文档和利用 AI 辅助配置。 * **页面开发：** 详细讲解了 Swap、Pool 和 Farm 三个页面的开发流程，包括页面结构拆分、样式编写、业务逻辑实现等。 * **组件化开发：** 强调了组件化开发的重要性，鼓励学员将可复用的代码封装成组件，提高代码复用率。 * **Web3 集成：** 讲解了如何利用 RainbowKit 等工具集成 Web3 功能，包括连接钱包、调用合约、发送交易等。 * **AI 辅助编程：** 强调了利用 AI 辅助编程的重要性，建议学员掌握 AI 工具，提高开发效率。 * **代码规范：** 强调了代码规范的重要性，建议学员遵循统一的代码规范，提高代码可读性和可维护性。 * **全局配置：** 讲解了如何在全局配置 Web3 环境，包括配置链、连接器、项目 ID 等。 * **路由跳转：** 讲解了如何利用 Next.js 的 Link 组件实现页面路由跳转。 * **数据获取：** 讲解了如何从后端获取数据，包括利用 Fetch API 请求后端接口。

126 0 0 2025-11-10 22:37

DeFi DApp 实战：从零构建去中心化应用

视频 AI 总结： 1. **核心内容：** 本视频是 DeFi 项目实战阶段的第一节，主要介绍了去中心化应用（DApp）的开发流程、项目概览、前端项目从零到一的构建过程、目录结构分析以及所需插件和工具库的配置。该项目模拟了主流 DeFi 业务，包括 Launchpad、跨链桥（Bridge）、Swap、Pool 和 Farm。 2. **关键信息：** * **DApp 开发流程：** 理论上可以只有合约开发和前端，但通常包括产品经理、测试，以及合约审计。 * **前端职责：** 除了调用 API 外，还需要与合约 ABI 进行交互。 * **项目结构：** * `web3DAPP`：已完成的项目，可参考。 * `web3DAPP Demo`：分天任务，指导逐步构建项目。 * **DeFi 业务：** * **Launchpad：** 代币发行平台，项目方可便捷发行 ERC20 代币。 * **Bridge：** 跨链桥，实现不同链上资产转移。 * **Swap：** 代币兑换，如 Uniswap。 * **Pool：** 提供流动性，获得 LP Token。 * **Farm：** LP Token 质押挖矿，获取额外奖励。 * **技术栈：** Next.js, React, Tailwind CSS, web3modal, RainbowKit, wagmi。 * **目录结构：** * `app`：页面路由。 * `lib`：存放 ABI、常量、工具函数等。 * **环境变量：** 需配置 Sepolia RPC URL 和 Wallet Connect Project ID。 * **作业要求：** 完成整个项目，提交 GitHub 链接，并附上各业务执行截图。

230 0 0 2025-11-06 23:29

Wagmi Web3 前端开发实战：React Hooks 教程

视频 AI 总结： 该视频主要讲解了如何使用 Wagmi 这个 React Hooks 库进行 Web3 前端开发，简化钱包连接、监听链变化、合约状态更新等操作。Wagmi 是在 Viem 的基础上进行封装，更偏向于前端应用，提供了更便捷的 Hooks 接口。视频详细介绍了 Wagmi 的安装配置、连接钱包、获取余额、执行转账以及与合约交互（读取和写入合约数据）等功能，并结合 Token Bank 的业务场景进行了代码演示。 关键信息： * Wagmi 是一个 React Hooks 库，简化了 Web3 前端开发。 * Wagmi 在 Viem 的基础上进行了封装，提供了更便捷的 Hooks 接口。 * Wagmi 的核心功能包括钱包连接、监听链变化、合约状态更新等。 * 视频详细介绍了 Wagmi 的安装配置、连接钱包、获取余额、执行转账以及与合约交互等功能。 * 视频结合 Token Bank 的业务场景进行了代码演示，讲解了 approve、deposit 和 withdraw 等操作的实现原理。 * 强调了理解合约交互的本质是根据 ABI 传递参数，不要被业务逻辑绕晕。 * 布置了作业，要求使用 Wagmi 实现转账、读取 Token Bank 数据、进行 approve、deposit 和 withdraw 操作，并在页面上展示相关信息。

279 0 0 2025-10-30 23:18

Viem 前端开发：账户、交易与合约交互

视频 AI 总结： 该视频主要讲解了如何使用 Viem 库进行前端开发，包括 Client 和 Transport 的概念，以及如何使用 Public Client 和 Wallet Client 与区块链进行交互。视频还深入探讨了账户的生成原理，包括私钥、助记词以及分层确定性推导（BIP32、BIP44、BIP39）等概念，并介绍了 Keystore、MPC 私钥分片等私钥管理方式。最后，视频演示了如何使用 Viem 进行转账、读写合约等操作，并布置了相关作业。 关键信息： * **Client 和 Transport：** Client 提供对某组操作的访问，Transport 定义了连接 RPC 节点的方式（HTTP、WebSocket、Custom）。 * **Public Client：** 用于访问链上的公共操作，如获取区块信息、账户余额等。 * **Wallet Client：** 用于对钱包进行操作，如签名交易、发送交易等。 * **账户生成原理：** 私钥通过椭圆曲线算法推导出公钥，公钥经过哈希函数推导出地址。 * **分层确定性推导（BIP32、BIP44、BIP39）：** 通过种子和路径生成无数个安全的私钥和地址，方便管理。 * **助记词（BIP39）：** 通过 12 个单词生成种子，再推导出密钥和地址。 * **私钥管理：** Keystore、MPC 私钥分片、硬件钱包等方式。 * **Viem 读写合约：** 通过 Public Client 或 Wallet Client，使用合约对象或 Client 的方法进行读写。 * **Viem 监听事件：** 使用 `watchEvent` 监听链上事件，获取交易结果。

313 0 0 2025-10-28 09:01

Web3 应用开发初探：前后端与合约交互

视频 AI 总结： 1. **核心内容：** 本视频主要讲解了如何将智能合约与前端、后端结合，构建一个完整的 Web3 应用。重点介绍了 Web3 应用的架构，以及前端和后端如何与链进行交互，包括读取链上数据、发起交易和监听链上事件。 2. **关键信息：** * **Web3 应用架构：** 包含前端用户界面、后端数据层（缓存链上数据）和区块链网络。用户通过前端发起交易，需要钱包签名确认，交易通过 RPC 请求发送到链上的节点。 * **与链交互方式：** * **读取合约内容/链上状态：** 通过 RPC 请求，使用库（如 Viem.sh）封装的接口，简化操作。 * **发起交易（写合约）：** 需要用户钱包签名，通过 RPC 请求将签名后的交易数据发送到链上。 * **监听链上事件：** 使用 WebSocket 建立长连接，实时获取链上发生的事件通知。 * **前端与后端交互：** 前端主要负责展示数据和发起交易，后端负责缓存链上数据，提供 API 供前端读取。 * **用户钱包的重要性：** Web3 应用强调用户对数据的拥有权，因此交易必须由用户使用自己的钱包签名确认。

298 0 0 2025-07-30 08:18

Web3 前端训练营AMA答疑第二期

大纲 1.社区、活动简介 2.作业讲解答疑 3.开放交流

1025 0 0 2024-07-11 17:22