Web3-Frontend-Bootcamp-Task

[whisper-xiang]

Task1: 开发一个待办事项应用

任务目标

• 掌握 React 组件化开发：通过构建多个组件，理解组件的创建和复用。
• 理解和使用状态管理：通过管理待办事项的状态，掌握 React 的状态管理。
• 应用 React Hooks：使用 useState 和 useEffect 等 Hook，熟悉函数组件的开发。

任务要求

项目初始化

• 使用 Create-vite 初始化你的项目。
• 设置项目结构，创建必要的文件和文件夹。

创建组件

• App 组件：作为应用的根组件。
• Header 组件：展示应用标题。
• ToDoList 组件：展示所有待办事项。
• ToDoItem 组件：展示单个待办事项。
• AddToDo 组件：包含一个输入框和添加按钮，用于添加新的待办事项。

实现功能

• 添加待办事项：用户可以通过输入框输入待办事项，并点击按钮进行添加。
• 删除待办事项：每个待办事项旁边有一个删除按钮，点击后可以删除该事项。
• 标记完成：用户可以通过点击待办事项，标记其为已完成或未完成。
• 保存到本地存储：使用 useEffect 将待办事项保存到本地存储，并在页面刷新时恢复。

使用状态管理

• 使用 useState 管理待办事项列表和输入框的状态。

使用 Hooks

• 使用 useState 管理组件的状态。
• 使用 useEffect 实现本地存储的保存和恢复功能。

Task2 Blockchain Basic

本任务分为简答题、分析题和选择题，以此为模板，在下方填写你的答案即可。

选择题，请在你选中的项目中，将 [ ] 改为 [x] 即可

[单选题] 如果你莫名奇妙收到了一个 NFT，那么

• [ ] 天上掉米，我应该马上点开他的链接
• [ ] 这可能是在对我进行诈骗！

[单选题] 群里大哥给我发的网站，说能赚大米，我应该

• [ ] 赶紧冲啊，待会米被人抢了
• [ ] 谨慎判断，不在不信任的网站链接钱包

[单选题] 下列说法正确的是

• [ ] 一个私钥对应一个地址
• [ ] 一个私钥对应多个地址
• [ ] 多个私钥对应一个地址
• [ ] 多个私钥对应多个地址

[单选题] 下列哪个是以太坊虚拟机的简称

• [ ] CLR
• [ ] EVM
• [ ] JVM

[单选题] 以下哪个是以太坊上正确的地址格式？

• [ ] 1A4BHoT2sXFuHsyL6bnTcD1m6AP9C5uyT1
• [ ] TEEuMMSc6zPJD36gfjBAR2GmqT6Tu1Rcut
• [ ] 0x997fd71a4cf5d214009619808176b947aec122890a7fcee02e78e329596c94ba
• [ ] 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266

[多选题] 有一天某个大哥说要按市场价的 80% 出油给你，有可能

• [ ] 他在洗米
• [ ] 他良心发现
• [ ] 要给我黒米
• [ ] 给我下套呢

[多选题] 以下哪些是以太坊的二层扩容方案？

• [ ] Lightning Network（闪电网络）
• [ ] Optimsitic Rollup
• [ ] Zk Rollup

[简答题] 简述区块链的网络结构

在此处填写你的答案

[简答题] 智能合约是什么，有何作用？

在此处填写你的答案

[简答题] 怎么理解大家常说的 EVM 这个词汇？

在此处填写你的答案

[分析题] 你对去中心化的理解

在此处填写你的答案

[分析题] 比较区块链与传统数据库，你的看法？

在此处填写你的答案

操作题

安装一个 WEB3 钱包，创建账户后与 openbuild.xyz 进行绑定，截图后文件命名为 ./bind-wallet.jpg.

Task3: 编写 NFTMarket 智能合约

任务目标

编写一个智能合约，实现一个简单的NFT市场功能，允许用户上架NFT并使用自己部署的ERC20代币进行购买。

任务要求

1.部署ERC20代币

需要部署一个ERC20代币，用于NFT的购买。

2.部署NFT

需要部署NFT用于买卖

3.上架NFT

• 用户可以将自己的NFT上架到市场。
• 上架时需要指定NFT的合约地址、Token ID以及价格（使用ERC20代币）。
• 声明上架NFT事件

4.购买NFT

• 用户可以使用自己部署的ERC20代币购买上架的NFT。
• 购买成功后，NFT转移给买家，卖家收到ERC20代币。
• 声明购买NFT事件

提交要求

• 部署在Sepolia测试网上
• 提交全部合约文件（ERC20、ERC721、NFTMarket）
• 提交上架NFT、购买NFT的交易哈希

Task4: 使用ethers.js和wagmi与NFTMarket合约交互

任务目标

使用ethers.js和wagmi库编写一个前端应用程序，允许用户上架NFT并使用ERC20代币购买NFT。

前端组件要求

• 连接钱包：用户可以通过MetaMask连接他们的钱包。
• 上架NFT：用户选择NFT设置价格上架到市场。
• 显示上架的NFT：显示所有上架的NFT，包括NFT的合约地址、Token ID、价格和卖家地址。
• 购买NFT：用户可以选择一个上架的NFT并使用ERC20代币进行购买。

提交要求

• 提交完整代码
• 提交界面截图

Task5: 开发一个完整的NFTMarket的Dapp

任务目标

在task4基础上开发一个完整的NFTMarket-Dapp并对功能点进行测试

任务要求

• 合约增加一个下架NFT的功能，用户可以在上架NFT后、被别人购买前下架NFT
• 在Market界面展示出所有上架的NFT（图片、NFT信息）
• NFT信息包括（价格、上架时间、拥有者）
• 测试上架、下架、购买NFT的功能

  提交要求

• 提交完整代码
• 提交界面的截图
• 提交测试的截图（上架后、下架后、购买NFT后买家获得NFT的三个截图）

Task6: 制作一个与uniswap交互的前端app

任务目标

根据视频学习uniswap、sdk相关知识，制作一个与uniswap交互的前端app

提交要求

• 提交全部代码
• 提交界面截图
• 提交swap操作的截图
• (选做）：提交添加流动性、移除流动性相关操作的截图

Task7: EVM++探索 - 奖励项目

任务目标

• 学习EVM++文档，了解如何使用JavaScript开发Aspect实现EVM合约功能，按照视频教程补全Aspect demo代码。
• 学习EVM++用例，构思并开发一个自己的Aspect用例

  任务要求

  1.按照EVM++技术文档进行学习

  学习OpenBuild EVM++中文技术文档 —— Chapter7中第二节EVM++开发基础

2.按照视频教程补全限流器Aspect demo代码($50奖励)

Fork工程文件夹：https://github.com/dumbeng/throttler-aspect/blob/boilerplate/aspect/index.ts 按照教程补全aspect/index.ts中preContractCall()函数

3.EVM++挑战：学习EVM++用例，构思并开发一个自己的Aspect用例($100奖励)

自建Github仓库

• 包含以下内容的README文件：
  • 用例名称和摘要。
  • 解决方案概述的问题以及团队打算通过创建这个Aspect来解决它的方式。
  • 项目的设计过程
  • 这个Aspect为Artela生态系统带来的价值。
• 包含工程文件
  • 提交示范：https://github.com/QiyuanMa/session-key-aspect-example
  • 提交截止期限为2024年7月31日
  • 期间如有用例idea/代码实现问题可联系mentor协助，或联系微信mmqiyuan

提交要求

• 限流器Aspect补全代码 - 填写问卷提交链接： https://forms.office.com/r/Fa05XQQVKW
• EVM++挑战 - 填写问卷提交链接： https://forms.office.com/r/M2QVqP3g7x

Task8: 在Morph Holesky上部署任意合约并在Morph浏览器上验证

教程：

https://docs.morphl2.io/docs/build-on-morph/code-examples/deploy-contract-on-morph

提交要求：

• 提交合约的Morph浏览器链接
• 提交验证后的截图

Task9: 为NFTMarket创建一个The Graph子图

学习资料

• 快速入门： https://thegraph.com/docs/zh/quick-start/
• 如何编写一个子图的详细介绍 https://thegraph.com/docs/zh/developing/creating-a-subgraph/
• 如何查询一个子图的详细介绍 https://thegraph.com/docs/zh/querying/querying-from-an-application/
• 中文相关资源列表： https://www.notion.so/graphprotocolcn/The-Graph-49977afa44644ebf9052b9220f539396
• The graph bounty中一个比较好的子图的例子： https://github.com/Autosaida/Zircuit-Restaking-Subgraph/
• 
The graph bounty中一个比较好的Usage of Subgraph的例子：https://github.com/ttttonyhe/stader-graph-dashboard

  任务要求及步骤

  1. 安装Graph CLI 在本地环境中安装Graph CLI工具
  2. 初始化子图 使用Graph CLI初始化一个新的子图
  3. 配置子图（subgraph.yaml） 设置要索引的NFTMarket合约和List、Buy事件
  4. 定义Schema（schema.graphql） 定义List和Buy实体
  5. 编写映射（mapping.ts） 编写映射逻辑，以处理合约事件并更新子图的存储
  6. 部署子图 使用Graph CLI工具部署子图到The Graph Studio。

     提交要求

• 提交NFTMarket合约地址
• 提交在The Graph Sudio ( https://thegraph.com/studio/ ) 上部署的子图的链接以及截图

[whisper-xiang]

系列课程地址：【第一节 React 框架介绍和优势】https://www.bilibili.com/video/BV1FfTXefEot?vd_source=0b3d917d784cbfc289920ad1e2bc2a46