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 链接，并附上各业务执行截图。

前端连接钱包：Web3 登录与实战准备

视频 AI 总结： 1. **核心内容：** 本视频是课程的最后一节知识点讲解，主要回顾和深入讲解了前端连接钱包的各种方式，包括 Web2 和 Web3 登录的区别，以及如何通过 Metamask、WalletConnect、APPKit 等工具实现钱包连接，并介绍了 Sign-in with Ethereum 的身份验证方式。强调了理解底层原理和熟悉常用 EIP 协议的重要性，并布置了课后作业，为后续的项目实战做准备。 2. **关键信息：** * **Web2 和 Web3 登录的区别：** Web2 需要管理多个用户名和密码，账号体系割裂；Web3 通过密钥对实现统一身份，无需中央服务器，可跨应用登录。 * **Metamask 连接钱包：** 通过浏览器扩展注入，利用 window.ethereum 对象和 EIP-1193/6963 协议实现连接。 * **WalletConnect 连接钱包：** 通过扫描二维码连接移动端钱包，需要 Project ID，并遵循特定的字符串格式。 * **APPKit 连接钱包：** Reown 提供的 SDK，整合了多种钱包功能，支持社交登录、多链和智能合约交互。 * **RainbowKit 连接钱包：** 基于 Wegami 和 Vim 的 Red Cool，提供 Connect Button 组件，简化钱包连接流程。 * **Sign-in with Ethereum：** 通过签名消息进行身份验证，后端验证签名后下发 Session ID 或 JWT Token。 * **EIP 协议的重要性：** 强调了熟悉 EIP-1193 等常用协议的重要性，以便理解钱包交互的底层原理。 * **作业内容：** 安装多个钱包插件，尝试使用 WalletConnect、APPKit 等工具连接钱包，并提交代码和截图。 * **项目实战预告：** 下一节课开始项目实战，将运用之前学过的知识，构建一个 lunchpad、dex、lp-java 框加 bridge 的应用。

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 操作，并在页面上展示相关信息。

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` 监听链上事件，获取交易结果。

Web3 应用开发：架构、钱包连接

视频 AI 总结： 1. **核心内容：** 本视频主要讲解了 Web3 应用开发的基础架构、前端如何与 RPC 节点和钱包进行交互，以及 Metamask 等浏览器注入钱包的原理。通过回顾 Web 应用的进化历程，对比 Web2 和 Web3 的架构差异，强调了 Web3 中用户对数据的真正所有权。重点介绍了如何使用 Rainbow Kit 快速连接钱包，并演示了转账和读取合约数据等功能。 2. **关键信息：** * **Web3 应用架构：** 前端通过 HTTP 请求与 RPC 节点交互，RPC 节点连接区块链网络，通过智能合约地址和函数签名进行交互。 * **RPC 节点连接：** 可以使用公开的 RPC 节点（如 Chainlist），也可以使用第三方服务商（如 Infura、Alchemy）提供的节点，或者公司自建节点。 * **钱包连接：** Metamask 等浏览器扩展通过注入 `window.ethereum` 对象实现与前端的交互，遵循 EIP-1193 和 EIP-6963 协议。 * **Rainbow Kit：** 一个傻瓜式的钱包连接库，可以快速实现钱包连接功能。 * **交易构建：** 通过构建交易对象，包含目标地址、金额、数据等信息，并使用用户私钥签名后发送给 RPC 节点。 * **合约交互：** 使用 `useReadContract` 等方法读取合约数据，使用 `sender transaction` 等方法调用合约。 * **数据处理：** 链上数据通常由后端或第三方数据平台处理后，再提供给前端展示。

DeFi核心机制：流动性挖矿、借贷与预言机

AI 总结： 视频主要讲解了流动性挖矿、借贷协议及预言机等DeFi核心机制的业务逻辑与实现方式。课程还涉及了智能合约开发中的常见问题及数据可视化工具的应用。 1、DeFi相关内容回顾 上节课讲解了DeFi相关内容，包括DEX（去中心化交易所）和Uniswap。 Uniswap的核心功能是交换不同代币，用户通过提供流动性获得LP token，从而赚取交易费。 2、Sushiswap与Pancakeswap的区别 Sushiswap早期是Uniswap的仿盘，核心功能相同，但引入了流动性挖矿机制，通过奖励SUSHI代币吸引用户。 Pancakeswap是BNB链上的最大DEX，借鉴了Uniswap和Sushiswap的核心业务和挖矿机制。 3、流动性挖矿机制 流动性挖矿通过质押LP token获得SUSHI奖励，形成正向循环，但存在螺旋上升和下降的风险。 奖励分配通过区块号和质押份额计算，采用扣除方式确保公平。 4、借贷协议 借贷是DeFi中锁仓金额最大的分类，知名项目包括AAVE和Compound。 Compound采用动态利率模型，通过利率控制资金池的流动性。 AAVE引入闪电贷，利用交易原子性实现同一笔交易内先借后还。 5、预言机与清算 预言机将现实世界的资产价格传递给链上，用于计算抵押品和借款价值。 清算机制在抵押品价值接近借款价值时触发，清算人通过折扣收购抵押品获利。 6、ERC4626标准与漏洞 ERC4626规范了抵押资产获得份额资产的接口，但存在算法漏洞，可能导致早期参与者获利。 避免漏洞的方法包括设置最小存款门槛和虚拟资产稀释份额。 7、数据可视化与作业 使用ECharts库展示DeFi数据，包括TVL变化、代币价格走向和持仓分布。 作业要求尝试用ECharts展示DeFi数据，数据源可通过Dune Analytics或AI生成。

DEFI：ERC-20 发行、Uniswap原理、流动性挖矿等

AI 总结：视频重点讲解了ERC-20代币、智能合约以及Uniswap等DeFi协议的工作原理和应用场景。讲师还介绍了代币发行流程、流动性挖矿以及三明治攻击等概念，帮助学员理解Web3金融的基础运作机制。 1、课程介绍与作业回顾 课程开始，提醒学生完成上节课的作业，强调作业设计有深意，通过ERC20合约理解代币概念。 区块链技术是去中心化的分布式记账本，不仅记录比特币和以太坊原生代币，也记录ERC20和ERC721等代币的持有情况。 2、DeFi业务介绍 DeFi（去中心化金融）是当前Web3领域最繁荣的业务，涉及金融衍生品如期权、期货、债券和杠杆等。 稳定币分为抵押型和算法型，抵押型稳定币通过机构或银行抵押资产发行等价的链上代币。 去中心化交易所（DEX）如Uniswap、Sushiswap和Pancakeswap，用于代币之间的交换。 3、Web3行业发展历程 2009年比特币诞生，2010年首次与现实世界交互（1万枚比特币换披萨）。 2014年USDT发行，2015年以太坊上线，2016年以太坊DAO攻击事件导致硬分叉。 2017年BCH扩容，2018年NFT（ERC721）上线，2019年提出Rollup二层链概念。 2020年DeFi Summer热潮，2022年以太坊从POW转为POS，2024年以太坊现货ETF获批。 4、代币发行与经济模型 代币发行方式包括ICO、STO、IEO、IDO等，经济模型对项目成败至关重要。 代币分配需平衡开发者、投资者和社区份额，用户可通过购买、挖矿和空投获取代币。 私募锁仓机制通过智能合约实现，如线性释放或悬崖期，确保项目长期稳定发展。 5、DEX与Uniswap DEX分为订单簿和流动性池两种模式，Uniswap采用AMM自动做市商协议。 Uniswap的核心功能是代币交换，通过流动性池实现，用户提供流动性可获得LP代币奖励。 滑点是交易价格与预期价格的差异，流动性小的池子滑点更明显，需设置合理滑点防御攻击。 6、Uniswap前端代码解析 Uniswap前端核心功能包括连接钱包、构建交易和发送交易，代码结构清晰。 作业要求学生fork Uniswap仓库，添加代码注释并撰写文章理解其业务逻辑。 7、交易攻击与防御 三明治攻击通过操纵交易排序获利，防御方法包括设置合理滑点和分批交易。 私人节点或交易路由可避免交易被广播，减少被攻击风险。

以太坊智能合约：ABI、ERC20/ERC721与DeFi

视频 AI 总结： 该视频主要讲解了以太坊智能合约的相关知识，包括智能合约的定义、ABI 的作用、ERC20 和 ERC721 标准，以及 DeFi 合约的概念。视频通过对比 Web2 和 Web3 应用的架构，详细解释了智能合约在以太坊虚拟机（EVM）上的运行机制，以及如何通过 ABI 与智能合约进行交互。 关键信息： 1. **智能合约定义：** 智能合约是图灵完备的，可以独立执行，不受干扰，是代码和数据的集合。 2. **Web2 vs Web3 架构：** Web3 应用通过钱包连接，使用 RPC 请求与节点上的智能合约交互，而非直接与中心化服务器交互。 3. **以太坊交易类型：** 以太坊有三种交易类型：普通转账、创建合约和调用合约，本质上都是交易，只是参数不同。 4. **EVM 兼容链：** 多个链（如 BNB、Polygon、Avalanche）兼容以太坊虚拟机，合约在这些链上执行方式相同，但 ChainID 不同。 5. **ABI 的作用：** ABI 是应用程序二进制接口，定义了与合约交互的标准方式，包括接口描述和编码规范。 6. **ERC20 标准：** ERC20 是同质化代币标准，定义了代币的名称、符号、小数位数、总发行量、余额等方法。 7. **ERC721 标准：** ERC721 是非同质化代币标准，每个代币都是独一无二的，可用于表示画作、收藏品等。 8. **EIP 和 ERC：** EIP 是以太坊改进提案，ERC 是应用标准，如 ERC20 和 ERC721。 9. **Coin vs Token：** Coin 是原生代币（如比特币、以太币），Token 是一种标准（如 ERC20），一个链上可以有多个 Token。

Web3 应用开发需要掌握的区块链核心概念

视频 AI 总结： 1. **核心内容：** 视频主要介绍了 Web3 的基础知识，重点讲解了区块链技术的核心概念、价值、关键技术、交易构成以及账户与钱包的含义。通过对比 Web2 的现状，引出 Web3 解决数据控制权问题的希望，并详细阐述了区块链的不可篡改性、去中心化特性以及密码学在其中的作用。 2. **关键信息：** * Web2 的便利性与中心化弊端：互联网大厂掌握资源和服务，体验割裂，用户数据受控。 * 区块链的价值：通过密码学和去中心化网络，解决数据控制权问题，实现基于代码的信任。 * 区块链的关键技术： * 去中心化：服务器节点独立平等，运行同一套开源代码。 * 密码学：通过公钥和私钥实现非对称加密，确保交易安全和身份验证。 * 链式结构：通过哈希指针连接区块，保证数据不可篡改。 * 共识机制：POW（工作量证明）通过计算难题获得记账权，POS（权益证明）通过质押代币参与验证。 * 交易构成：比特币采用 UTXO 结构，以太坊采用账户模型，包含 from、to、value 和 data 等字段。 * 账户与钱包：以太坊区分外部账户（EOA）和合约账户，EOA 由私钥控制，合约账户由代码控制。钱包用于管理私钥和签名交易。 * 双花攻击：通过控制算力回溯交易，实现重复消费，但 PoS 机制和多区块确认可以有效防止。 * Gas 费：以太坊引入 Gas 费，防止图灵完备的智能合约出现死循环导致网络崩溃。

第 3 课：React Hooks 与 Next.js 路由

视频 AI 总结： 1. **核心内容：** 本视频主要讲解了 React 开发中常用的 Hooks 以及 Next.js 的路由管理。首先强调了按时完成作业的重要性，然后深入讲解了 Next.js 中 App Router 的路由方案，以及 React Router 的前端路由方案。接着详细介绍了 useState、useReducer、useContext、useEffect、useCallback、useMemo 和 useRef 等常用的 React Hooks，并结合代码示例讲解了它们的使用方法和注意事项，最后布置了关于路由和 Hooks 的作业。 2. **关键信息：** * Next.js 路由基于文件系统，有 Pages Router 和 App Router 两种方案，App Router 是默认方案。 * React Router 是前端路由方案，底层原理是对 URL 的 Hash 和 HTML5 的 History 对象进行封装。 * App Router 内置了 Page、Layout、Template、Loading、Error 等约定俗成的文件命名。 * useState 用于管理应用程序的状态，返回 state 值和修改 state 的方法。 * useReducer 也是用于管理状态，但适用于更复杂的状态逻辑，需要配合 reducer 函数使用。 * useContext 用于在组件之间传递数据，需要使用 Provider 组件包裹需要共享数据的组件。 * useEffect 用于处理副作用，可以同步组件和外部系统，但需要注意避免滥用，防止性能问题。 * useCallback 用于缓存函数，避免组件多次渲染，进行性能优化。 * useMemo 用于缓存计算结果，避免重复计算，进行性能优化。 * useRef 用于引用不需要渲染的值，在组件的整个生命周期都保持不变。 * useLayoutEffect 在浏览器重新绘制屏幕之前触发，可以获取 DOM 元素的大小和位置等信息。 * 作业包括使用不同的路由方案，实现上课讲解的 Hooks，并阅读相关文档，理解 Hooks 的使用场景和注意事项。