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
[简答题] 简述区块链的网络结构
在此处填写你的答案
1
[简答题] 智能合约是什么,有何作用?
在此处填写你的答案
1
[简答题] 怎么理解大家常说的 EVM
这个词汇?
在此处填写你的答案
1
[分析题] 你对去中心化的理解
在此处填写你的答案
1
[分析题] 比较区块链与传统数据库,你的看法?
在此处填写你的答案
1
操作题
安装一个 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
任务要求及步骤
- 安装Graph CLI 在本地环境中安装Graph CLI工具
- 初始化子图 使用Graph CLI初始化一个新的子图
- 配置子图(subgraph.yaml) 设置要索引的NFTMarket合约和List、Buy事件
- 定义Schema(schema.graphql) 定义List和Buy实体
- 编写映射(mapping.ts) 编写映射逻辑,以处理合约事件并更新子图的存储
- 部署子图 使用Graph CLI工具部署子图到The Graph Studio。
提交要求
- 提交NFTMarket合约地址
- 提交在The Graph Sudio ( https://thegraph.com/studio/ ) 上部署的子图的链接以及截图