轻语

主题

原文地址

Web3-Frontend-Bootcamp-Task | GitHub

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

提交要求 ​

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

教程： ​

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

提交要求： ​

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

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

学习资料 ​

任务要求及步骤 ​

  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。

提交要求 ​

君子慎独

Copyright © 2024-present 轻语

君子慎独

Copyright © 2024-present 轻语