🖊️

开发组笔试

目标

完成一个区块链转账的前端项目
预计学习时间:1-2h
预计编码时间:0.5-2h
预计部署时间:15min

具体要求

  • 一个按钮:连接MetaMask测试网
  • 一个输入框:输入想要转账的金额
  • 一个输入框:输入收款地址
  • 一个按钮:确认转账
  • 页面布局、美学考虑不重要,代码能实现转账功能即可
  • 要求代码比较Robust,至少要考虑到Metamask没有在对应的测试网情况下该如何解决

技术栈

  • 前端框架:React (CSS框架Bulma)
  • 区块链交互库:ethers.js
  • 钱包:Metamask
  • 部署:Vercel
  • 版本管理:Github & Yarn

教程

  1. 安装NodeJS版本管理工具Yarn
  1. 从Github下载协会提供的React Scaffold代码
    1. entrydemo
      FudanBlockchainUpdated Apr 22, 2023
  1. 进入Folder,运行yarn install安装依赖项
  1. yarn start启动UI界面
  1. 下载安装MetaMask
  1. 将Metamask切换到Georli测试网并领取测试币
  1. 为UI填写相应的逻辑代码
    1. 使用yarn安装ethers.js
    2. 使用ethers.js连接MetaMask
    3. 填写输入框逻辑
    4. 完成转账按钮逻辑
  1. 部署到Vercel

Tips

面向chatGPT编程:
所有搭建环境过程中的问题都可以问chatGPT
教程
demo
Demo of signing into a backend website from Web3 using JSON Web Tokens.
A simple demo for connecting with metamask and minting an NFT