TL;DR：Copy别人合约代码部署一个staking dapp，copy大法好啊，几个命令就搞定。但貌似审核程序有bug同样的操作可能要几次才能通过，有点靠运气，so你们通不过也不要问我，我也是重复了四五次才侥幸通过。o(╥﹏╥)o

一、准备工作

1、老样子，去https://speedrunethereum.com/challenge/decentralized-staking 找到“open in gitpod”打开代码库，坐等加载完，需要一定的时间。

许多人不知道如何打开/登陆Gitpod，拜托这就像你天天登陆微信一样简单，别再问了好吗？╮(╯▽╰)╭

加载完大概是下面这个鬼样子，是不是很面熟，是的就是这么巧，我又来了。

二、修改代码

这次我打算偷点懒不会写的那么保姆级了，你们爱懂不懂（指关节昨晚有点痛）。

1、既然要用copy大法我们先找到大神的合约代码。ding的一下，找到了：https://goerli.etherscan.io/address/0x23bcf7e1a822e5645b497cfa111bf89e129cef8f#code 为啥我能这么快找到？因为这就是我的代码。^_^

看到下图这三坨代码没？不管你看到没，反正记下来等下要copy到Gitpod里面去。

2、打开Packages文件夹下的hardhat文件夹，这次我们一次性搞定四个文件的修改，怕了么。

3、打开packages/react-app/src/App.jsx文件，把里面targetNetwork改成goerli，又是好熟悉的操作，要不要截个图呢？你猜我截不截。

三、在Goerli网络部署合约

1、在terminal控制台输入yarn run generate创建一个钱包地址，并转入少量goerliETH进去做gas。

2、在Terminal控制台输入yarn deploy --reset部署合约代码,红框2为我们部署的合约。

四、部署前端

1、在Terminal控制台输入yarn build,创建前端，需要等待较长的时间，如下图显示即为成功。

2、在Terminal控制台输入yarn surge，期间让会让你输入邮箱/密码创建surge账号，输入后每次回车即可。当出现domaim网址后再次回车，等待上传完成100%。

3、复制上一步红框内的网址，即为我们此次任务构建的前端网址。

4，差点忘了还有一个小步骤，部署的合约需要验证。

打开packages/hardhat/package.json将api修改为7C1S3PXQSGCERT5PJ67XR7TH74X2AH9ZR6（这玩意是我注册申请的，你想用自己的api去Etherscan 自己注册申请很简单，我不想教你们这种基础性操作了。）

在Terminal控制台输入yarn verify --network goerli坐等合约验证完成。

五、递交任务审核

再次重申：这玩意有点看运气同样的代码操作有时候能过有时候不能过，┓( ´∀` )┏

2/3框内注意格式啊，最后点submint，好了本次发射已经完成，贤者时间了。

2框=教程第四大步第2小步获取的网址，3框=教程第三大步第2小步获取的合约地址前面加上goerli浏览器网址。

TL;DR:在任务3的基础上将dapp部署在condor网络上，难度不大，添加condor网络代码（代码库中已封装）后其他步骤类似任务3。

一、克隆代码并在gitpod打开

这一步很多人可能会打开不了代码库，初始化失败，原因就是gitpod跟github没有关联，应该用GitHub账号先去登陆gitpod。这应该是最基础的逻辑，你要在gitpod里面打开github的代码库，肯定要先让两个账号关联起来！！！！

1、复制该代码库网址https://github.com/mesahin001/scaffold-eth 到gitpod直接开启new workspace。

二、在condor上部署合约

1、打开packages/hardhat/hardhat.config.js文件，将defaultNetwork更改为“condor”。

2、在下方TERMINAL控制台输入yarn generate创建一个地址。第二个红框内的地址即为创建的新钱包地址，转账一点conder进去作为gas。（特别注意仔细理解这句话⚠️⚠️⚠️）

3、打开packages/hardhat/contracts下的YourContract.sol修改代码，我这里是改成了“all in web3”，你们随意。

4、在Terminal控制台输入yarn run deploy部署合约代码,红框2为我们部署的合约。

三、部署前端

1、打开packages/react-app/src文件夹下的App.jsx，将targetNetwork修改成NETWORKS.condor。

2、在Terminal控制台输入yarn build,创建前端，需要等待较长的时间，如下图显示即为成功。

3、在Terminal控制台输入yarn surge，期间让会让你输入邮箱/密码创建surge账号，输入后每次回车即可。当出现domaim网址后再次回车，等待上传完成100%。

4、复制上一步红框内的网址，即为我们此次任务构建的前端dapp。然后在浏览器中打开,连接任意小狐狸钱包并切换到condor链进行交互。

最后如下图一所示即代表成功，将第三大步第4小步中点击“debugcontracts”获取的网页地址提交到相关discord频道即可，格式如图二。

TL;DR:遵照官方文档提示，在gitpod上面创建一个mint前端网页，在gitpod编译可以避免环境问题以及无需下载本地软件。

任务需求：创建一个nft合约以及mint的前端网页。【官方文档】

步骤：在gitpod打开代码/部署nft/部署前端/提交任务，主要内容是三、四步。

一、用GitHub账户打开官方源码

1、在gitpod打开官方源码:直接点击官方文档中的下方按钮，然后在弹出的对话框选择“continue with GitHub”登陆上你的github账号就行，再选择“new workspace”，等待一会最终如图四。这里可能根据每个人的账号设置略有差异，反正自己摸索一下：主旨就是用GitHub打开官方的这部分代码。

二、试用官方本地钱包（这部分其实做不做无所谓就是在钱包界面随意试用下）

如下所示，先领水——>再转账——>再mint几次，随意点点吧。

三、在goerli上部署nft合约

1、刚才我们都是在本地钱包试用，接下来我们把它部署在goerli测试网上。

打开packages/hardhat/hardhat.config.js文件，将defaultNetwork更改为“goerli”。

2、在下方TERMINAL控制台输入yarn generate创建一个地址。第二个红框内的地址即为创建新钱包地址，将此地址复制保存⚠️⚠️⚠️。

3、去 https://faucet.paradigm.xyz/ 给上一步创建的新地址领取一点点goerli网络上的eth作为gas（⚠️⚠️⚠️仔细看这句话的意思），需要发推验证。当然不一定非得去这里领，只要你能搞到GoerliETH就行。

4、在Terminal控制台输入yarn deploy部署一个nft合约。红框2即为创建的nft合约地址，保存下来后面提交任务要用到。

四、创建mint前端网页

1、打开packages/react-app/src文件夹下的App.jsx，将targetNetwork修改成NETWORKS.goerli。

2、点击右上角重新打开一个网页，会发现已经切换到goerli网。点击“connect”连接小狐狸钱包（注意将钱包切换到goerli，且有eth），然后点击“mint nft”交互一次。（这一步只是验证，其实不做也无所谓）

3、在Terminal控制台输入yarn build,创建前端，需要等待较长的时间，如下图显示即为成功。

4、在Terminal控制台输入yarn surge，期间让会让你输入邮箱/密码创建surge账号，输入后每次回车即可。当出现domaim网址后再次回车，等待上传完成100%。

（⚠️注意：这一步可能会多次失败，不用怕重复运行yarn surge即可！！！）

5、复制上图红框内的网址在浏览器打开，可以随意连接一个钱包在goerli测试网上mint，能成功mint则代表所有部署完成。

五、任务确认以及提交

1.还记得文首的官方文档不？打开官方文档，连接钱包，点击submit，在任务平台确认任务。

红框1填入：http://polite-wine.surge.sh/ 见教程第四大步第4小步。

红框2填入：https://goerli.etherscan.io/address/0x2Cc170B6d9916c0ed2b28f24B7954f11d81F73ab 见教程第三大步第4小步。

2、在discord递交任务

将上一步红框1、2内的链接以及你的speedrun etheruem个人地址提交到相应的任务频道即可。

speedrun地址见下方红框。

一、契机

在使用zksync的时候是否有注意到钱包账户中的“+MINT NFT”按钮？理论上我们是可以在zksync上mint nft的，但是我们却很少看到zksync上的nft的项目。

点击进去我们看到其实是可以通过CID或者0xhash来mint的，那么我们怎么找到CID并mint呢？

二、查找现有NFT项目CID

1、我们以红豆(Azuki)为例，我们通过Opensea搜索找到Azuki项目，并随意点击其中一张NFT的“Details”找到其合约地址（也可以其他方式找到合约地址，方法很多并不唯一）。

2、在Ethscan搜索上一步找到的合约地址，并点击“Contract”--“Read Contract”，找到“Token url”点开，并随意输入一个数（当然这个数不能大于该nft的最大数量，比如azuki就是最多10k ），然后点“Query”会得到一个字符串，复制下图红框4里面的那串字符，这是azuki项目的元数据地址。

当然有些项目“Query”后会发现并不是跟上面的一样，比如MAYC。

我们打开这个网址也会发现编号为4677的MAYC的CID数据，可以通过更改最后的编号获取对应的CID数据。

从这里可知：如果字段前面是非IPFS则说明该NFT项目数据保存在中心化网站，那就没必要继续下面的操作。

3、打开https://ipfs.io/ipfs/QmQFkLSQysj94s5GvTHPyzTxrawwtjgiiYS2TBLgrvw8CW(加粗的字段就是2步查询获得的字符串,根据每个项目不同可以替换）。

如下图所示红框内即为每个编号所对应的CID，你想mint哪个编号就点哪个。

4、然后你会发现无法复制，点开该CID，在弹出的网址中复制下图所示红框中的内容。

三、MINT NFT

将上一步复制的CID，粘贴Meatamask钱包在zksync网络上账户，点击**“MINT”**即可，成功后可在账户里看到token。

四、注意

1、该操作只是mint了Azuki在zksync上的小图片，可以看做是一个山寨，不具备真正价值。操作的意义在于丰富zksync的链上数据，且gas极低。

2、只有是在IPFS上传元数据的项目才会有CID数据，有些古早项目比如punk是保存在中心化网站上，此操作行不通。

3、如果想mint其他项目的nft也可以自己去发掘获得CID数据就可mint。

4、“TokenURL”那一步获取的网址大家可以大胆试错，小心求证，每个项目方的保存方式/格式可能不一样，多试试就知道看是不是我们需要的CID。

5、下方是一些可以通过该方法mint的著名项目(注：有些需自己更改编号，不要一窝蜂mint相同编号)

MAYC:https://boredapeyachtclub.com/api/mutants/2732 (注意修改链接最后编号)

AZUKI:https://ipfs.io/ipfs/QmQFkLSQysj94s5GvTHPyzTxrawwtjgiiYS2TBLgrvw8CW

BAKC:https://ipfs.io/ipfs/QmTDcCdt3yb6mZitzWBmQr65AW6Wska295Dg9nbEYpSUDR

BAYC:https://ipfs.io/ipfs/QmeSjSinHpPnmXmspMjwiXyN6zS4E9zccariGR3jxcaWtq

Invisible Friends:https://ipfs.io/ipfs/QmarGRwVKPaCe2s5QSSTMEdbYDwKxFz6bAn58YZPPcWc7k

Mfers：https://ipfs.io/ipfs/QmWiQE65tmpYzcokCheQmng2DCM33DEhjXcPB6PanwpAZo

JENNIE HUMAN:https://ipfs.io/ipfs/QmeAH1Cxrmo9bMmsJZ4oM774BHxW4dkY1RacjdZ3S5GZ5j

Nyolings：https://ipfs.io/ipfs/QmPXXVR4iDXnEt4hiXUZEuAxNNyd7qRWfPwCDtKiAij3um/

Goblintown:https://ipfs.io/ipfs/QmdxDAXQZn7LtbTCrfLgYX2YbWHGi2t7UQwqSEpt45YEh2/

Beanz :https://ipfs.io/ipfs/QmTRuWHr7bpqscUWFmhXndzf5AdQqkekhqwgbyJCqKMHrL/

该周任务相对简单：从官方fork代码后只需修改一次代码，然后执行几次命令即可完成。

第一步、准备

1、进入https://github.com/qbzzt/qbzzt.github.io/tree/master/LogRocket/20220615-random，点击Fork，把代码复制到我们的Github。

2、进入到我们的replit.com账号，点击“create”---“Import from Github”，然后选择我们上一步fork的代码库:magweek8(你的名字可能不同，看你自己上一步命名的是什么)，再次点击“Import from Github”导入代码，导入时间可能要几分钟。

（注意：此步骤的前提是已经将replit账号与github账号关联，如何关联请查阅前序）

3、导入成功后点击“done”

第二步、环境搭建

1、在右侧命令栏“shell”下输入cd LogRocket/20220615-random并回车进入20220615—random子目录。

2、继续输入npm i并回车，等待安装完成，需要几分钟。

3、找到hardhat.config.js文件，将原文替换为以下代码。

require("@nomiclabs/hardhat-waffle"); require('dotenv').config()

// This is a sample Hardhat task. To learn how to create your own go to // https://hardhat.org/guides/create-task.html task("accounts", "Prints the list of accounts", async (taskArgs, hre) => { const accounts = await hre.ethers.getSigners();

for (const account of accounts) { console.log(account.address); } });

module.exports = { solidity: "0.8.4",

networks: { "goerli": { url: "alchemy账号里 Goerli url ", accounts: ["{你的metamask钱包私钥}"] } }

};

其中{你的metamask钱包私钥}需要替换为你自己的私钥，私钥用完记得删除，建议新建小号。alchemy账号里 Optimism Goerli url替换为你在alchemy里创建的Optimism Goerli API 的https。（注意：该两个字段的双引号不可删除，如何创建API请查阅前序）

第三步、部署合约

1、因为咱们所有的部署执行都是链上行为，需要用到gas，我们先去领点EHT测试币。

登陆https://goerlifaucet.com/ 账号输入钱包地址点击“Send me ETH”领取EHT goerli测试网上的ETH

将钱包切换到ETH georli网（如何添加georli请去https://chainlist.info 搜索eth找到goerli并添加到钱包）。

2、在“shell”中输入yarn hardhat console --network goerli回车，中间可能可能需要一次回车。

（注：此时可能你的shell中已经回到上一级目录，这时可以通过输入cd LogRocket/20220615-random重新进入子目录，以后遇到类似情况照此执行）

（注意：如果你想重新使用上面的命令（yarn hardhat console --network goerli）开始部署合约，记得把artifacts/cache这两个文件夹删掉）

3、输入signer = await ethers.getSigner();并回车

输入balance0 = await ethers.provider.getBalance((await ethers.getSigner()).address)并回车。

输入factory = await ethers.getContractFactory("Casino")并回车。

输入casino = await factory.deploy()并回车，至此已经完成合约部署，可以看到下方合约地址。

第四步、合约交互

输入const valA = ethers.utils.keccak256(0xBAD060A7)并回车

输入const hashA = ethers.utils.keccak256(valA)并回车

输入const valBwin = ethers.utils.keccak256(0x600D60A7)并回车

输入tx1 = await casino.proposeBet(hashA,{ value: 1e5})并回车

等待上一步代码执行完毕后，输入tx2 = await casino.acceptBet(hashA, valBwin, {value: 1e5})并回车。

执行成功后去https://goerli.etherscan.io/address/搜索第三步第3点部署的合约地址，可以看到该合约地址会有三笔交互记录，代表任务成功。

（注意：如果交互中出现错误或者无法执行下去，可以查看第三步第2点注意那里，删掉artifacts/cache这两个文件夹重新部署合约再进行交互）

第五步、发布提交

1、replit上发布，点击“publish”然后一直点“next”即可。记得删掉私钥！！！

复制好最后获得的项目网址。

2、同步更新到Github，去到github复制代码库地址。

3、提交：打开https://forms.gle/Ztv2nLqsV158XEaeA

①将第三步第3点获取的合约地址

②第五步第1点获取的项目网址

③第五步第2点你的Github代码库地址提交进去即可。

第一步、准备：

1、结合之前前序文档，创建好本周的github代码库以及同步到replit.com上。

如图，依次点击右上角github账号--“repositories”--“new”--填写“name”（随意）--“create repository”(切记勾选“add a README file”不然会是一个空库，无法导入replit)

2、登陆你的replit账号，依次点击“create”--“import”，然后选择上一步创建的代码库“magweek3”，再次点击“import from github”，完成代码的导入工作。

（注意在开始这一步之前，必须要先关联好github账号，如何关联请看之前前序）

导入完成之后，点击“DONE”

第二步、环境搭建

1、回到replit左边栏，删除掉README.md。

2、点击右侧“Shell”，创建ChainBattle目录并进入，输入mkdir ChainBattle并回车，然后输入cd ChainBattle并回车。（以下步骤的命令都是在“shell”中输入）

2、输入npm init -y并回车（中间可能会要再次回车一次）。

3、输入npm install hardhat并回车，等待安装完成，如下图所示。

4、输入npx hardhat init并回车,（中间应该需要点5次回车，多点几次也无妨😆，warn不用管）等待安装完成，如下图所示。

5、输入npm install @openzeppelin/contracts并回车，等待安装完成，如下图。

6、输入npm install @nomiclabs/hardhat-etherscan并回车，等待安装完成，如下图。

7、输入npm install @nomiclabs/hardhat-waffle并回车，等待安装完成，如下图。

8、输入npm install dotenv并回车，等待安装完成，如下图。

至此所有环境搭建已经完成，中途应该不会遇到本地环境兼容问题🏂，这就是网页端搭建的好处。

第三步、代码编译

1、打开contracts目录，把Lock.sol重命名为ChainBattles.sol。

2、将上一步重命名为ChainBattles.sol的文件里的内容替换为以下代码。

// SPDX-License-Identifier: MIT pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol"; import "@openzeppelin/contracts/utils/Counters.sol"; import "@openzeppelin/contracts/utils/Strings.sol"; import "@openzeppelin/contracts/utils/Base64.sol";

contract ChainBattles is ERC721URIStorage { using Strings for uint256; using Counters for Counters.Counter; Counters.Counter private _tokenIds;

mapping(uint256 => uint256) public tokenIdToLevels;

constructor() ERC721 ("Chain Battles", "CBTLS"){
}

function generateCharacter(uint256 tokenId) public returns(string memory){

bytes memory svg = abi.encodePacked(
    '<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 350 350">',
    '<style>.base { fill: white; font-family: serif; font-size: 14px; }</style>',
    '<rect width="100%" height="100%" fill="black" />',
    '<text x="50%" y="40%" class="base" dominant-baseline="middle" text-anchor="middle">',"Warrior",'</text>',
    '<text x="50%" y="50%" class="base" dominant-baseline="middle" text-anchor="middle">', "Levels: ",getLevels(tokenId),'</text>',
    '</svg>'
);
return string(
    abi.encodePacked(
        "data:image/svg+xml;base64,",
        Base64.encode(svg)
    )    
);

} function getLevels(uint256 tokenId) public view returns (string memory) { uint256 levels = tokenIdToLevels[tokenId]; return levels.toString(); } function getTokenURI(uint256 tokenId) public returns (string memory){ bytes memory dataURI = abi.encodePacked( '{', '"name": "Chain Battles #', tokenId.toString(), '",', '"description": "Battles on chain",', '"image": "', generateCharacter(tokenId), '"', '}' ); return string( abi.encodePacked( "data:application/json;base64,", Base64.encode(dataURI) ) ); } function mint() public { _tokenIds.increment(); uint256 newItemId = _tokenIds.current(); _safeMint(msg.sender, newItemId); tokenIdToLevels[newItemId] = 0; _setTokenURI(newItemId, getTokenURI(newItemId)); } function train(uint256 tokenId)public{ require(_exists(tokenId)); require(ownerOf(tokenId)==msg.sender,"You must own this token to train it"); uint256 currentLevel=tokenIdToLevels[tokenId]; tokenIdToLevels[tokenId]=currentLevel+1; _setTokenURI(tokenId,getTokenURI(tokenId)); } }

3、在ChainBattle文件夹下新建.env文件，并在该文件内输入以下代码。

TESTNET_RPC=

PRIVATE_KEY=

POLYGONSCAN_API_KEY=

4、在alchemy.com里面创建（如何创建详见:之前前序）一个Polygon Mumbai网络的APP，复制其URL粘贴到.env的TESTNET_RPC=后面

将metamask钱包的新建小号私钥导出（如何导出详见:之前前序），并复制粘贴到PRIVATE_KEY=后面。

进入polygonscan.com，登陆你的账号（需要先注册这里不赘述）依次点击“API keys”-- “Add”创建一个API。

然后复制你刚才创建的那个API代码粘贴到POLYGONSCAN_API_KEY=后面，如下图红框内。

5、最后.env文件内的代码大概如下图所示。

6、打开hardhat.config.js文件，将一下代码粘贴进去，如图所示。

require("dotenv").config();

require("@nomiclabs/hardhat-waffle");

require("@nomiclabs/hardhat-etherscan");

module.exports = {

solidity: "0.8.10",

networks: {

mumbai: {

url: process.env.TESTNET_RPC,

accounts: [process.env.PRIVATE_KEY]

},

},

etherscan: {

apiKey: process.env.POLYGONSCAN_API_KEY

}

};

7、代码编译已经完成，测试一下是否编译成功。在Shell那边输入npx hardhat compile并回车（中间大概需要5次回车🚒）。

第四步、部署合约

1、添加好mumbai测试网及领取测试币。

①进入chainlist.info，搜索mumbai，将matic测试网添加到Metamask钱包。

②进入https://mumbaifaucet.com/，右上角登陆Alchemy账号，粘贴钱包地址，点击“Send Me Matic”获取测试币。

2、然后回到Replit，打开scripts/deploy.js，将原文替换成以下代码。

const main = async () => { try { const nftContractFactory = await hre.ethers.getContractFactory( "ChainBattles" ); const nftContract = await nftContractFactory.deploy(); await nftContract.deployed();

  console.log("Contract deployed to:", nftContract.address);
  process.exit(0);
} catch (error) {
  console.log(error);
  process.exit(1);
}

};

main();

4、在Shell处输入npx hardhat run scripts/deploy.js --network mumbai并回车（中间可能会有一次回车）。

5、点击Metamask钱包三点处，然后点区块浏览器，然后弹出新新网页查看合约地址是否一致，并等待contract处是否出现✅。如若没有，则输入npx hardhat verify --network mumbai +你的合约地址，进行验证。

最终出现“successfully submit”则代表合约部署已经成功完成。

第五步、合约交互

1、切换到之前打开的合约网页上，点开Contract--Write contract--connect to web3，在弹出的钱包中点确定，连接之前对应的私钥钱包。

2、点击第4个“mint”下的write，在钱包中确认，等待交互成功。

3、前往 testnet.opensea.com ，连接我们刚才的钱包，点击profile，找到我们刚才mint的nft，点进去会发现如下图所示。

4、继续回到合约那边，选到第8个train，在框中输入1，点击write，弹出小狐狸，点确认等待链上确认成功。

5、再次回到testnet.opensea.com 刷新网页，如下图所示，可以看到0变成1了，表示该任务已经成功完成。

第六步、发布与提交

1、如图点击publish，填好description然后一直点下一步即可发布成功，保存好最后出来的那个网址，作为提交证明。

2、提交到github，提交之前记得删除.env（保险起见）。

将代码提交到github，并在你的github账号查看提交记录，复制好你的github本周代码库网址（图二红框处）作为任务提交证明。

3、任务提交https://forms.gle/DdnKrEvKzUHK4yLH9

主要是三个链接：1第四步第4点部署到合约地址，2第六步第1点获取的published地址

3第六步第2点获取的github代码库地址。

本文主要由六部分组成,分别为：准备、搭建环境、代码编译、代码测试、部署Dapp、发布与提交。

一、准备：

1、结合之前前序文档，创建好本周的github代码库以及同步到replit.com上。

如图，依次点击右上角github账号--“repositories”--填写“name”（随意）--“create repository”(切记勾选“add a README file”不然会是一个空库，无法导入replit)

2、登陆你的replit账号，依次点击“create”--“import”，然后选择上一步创建的代码库“magweek2”，再次点击“import from github”，完成代码的导入工作

3、进去项目后，如下图所示，点击“Done”

二、搭建环境

1、点击右边“Shell”，首先输入mkdir BuyABCACoffee-contracts并回车（ABC3个字母处，可改为任意名字，后文涉及到ABC处的均可替换为自己定义的名字，也可以不改~）；

再次输入cd BuyABCACoffee-contracts并回车。

2、输入npm init -y并回车。

3、输入npx hardhat并回车。(中间大约需要点5次回车，就是那几个√的地方需要按回车才能继续）

大概成功安装后会如下图所示：

4、输入npm install --save-dev @nomiclabs/hardhat-waffle 并回车，等待安装完成。（中间各种warn不要管）

5、输入npm install dotenv并回车，等待安装完成。至此环境搭建步骤已经完成。

三、项目代码编译

1、点开contracts目录，把Lock.sol重命名（rename）为BuyABCACoffee.sol(注意，文件名最好与前面创建的目录前缀一致)

2、点击刚才改名的“BuyABCACoffee”文件，将里面的内容替换为如下代码：

（特别注意ABC可以改成自己设置的名字，需与前面保持一致。 记得保存文件内容）

// SPDX-License-Identifier: UNLICENSED

pragma solidity ^0.8.9;

// Import this file to use console.log

import "hardhat/console.sol";

// Switch this to your own contract address once deployed, for bookkeeping!

// Example Contract Address on Goerli: 0xDBa03676a2fBb6711CB652beF5B7416A53c1421D

contract BuyABCACoffee {

// Event to emit when a Memo is created.

event NewMemo(

address indexed from,

uint256 timestamp,

string name,

string message

);

// Memo struct.

struct Memo {

address from;

uint256 timestamp;

string name;

string message;

}

// Address of contract deployer. Marked payable so that

// we can withdraw to this address later.

address payable owner;

// List of all memos received from coffee purchases.

Memo[] memos;

constructor() {

// Store the address of the deployer as a payable address.

// When we withdraw funds, we'll withdraw here.

owner = payable(msg.sender);

}

/**

* @dev fetches all stored memos

*/

function getMemos() public view returns (Memo[] memory) {

return memos;

}

/**

* @dev buy a coffee for owner (sends an ETH tip and leaves a memo)

* @param _name name of the coffee purchaser

* @param _message a nice message from the purchaser

*/

function buyCoffee(string memory _name, string memory _message) public payable {

// Must accept more than 0 ETH for a coffee.

require(msg.value > 0, "can't buy coffee for free!");

// Add the memo to storage!

memos.push(Memo(

msg.sender,

block.timestamp,

_name,

_message

));

// Emit a NewMemo event with details about the memo.

emit NewMemo(

msg.sender,

block.timestamp,

_name,

_message

);

}

/**

* @dev send the entire balance stored in this contract to the owner

*/

function withdrawTips() public {

require(owner.send(address(this).balance));

}

}

2、在scripts目录鼠标右键或者左键点击3个点处，选“Add file”，输入buycoffee.js回车来新建文件。

3、在“buycoffee.js”文件里输入以下代码。（同样，ABC可以修改，需与前面保持一致。若前面改了，此处修改会较多） const hre = require("hardhat");

// Returns the Ether balance of a given address.

async function getBalance(address) {

const balanceBigInt = await hre.ethers.provider.getBalance(address);

return hre.ethers.utils.formatEther(balanceBigInt);

}

// Logs the Ether balances for a list of addresses.

async function printBalances(addresses) {

let idx = 0;

for (const address of addresses) {

console.log(`Address ${idx} balance: `, await getBalance(address));

idx ++;

}

}

// Logs the memos stored on-chain from coffee purchases.

async function printMemos(memos) {

for (const memo of memos) {

const timestamp = memo.timestamp;

const tipper = memo.name;

const tipperAddress = memo.from;

const message = memo.message;

console.log(`At ${timestamp}, ${tipper} (${tipperAddress}) said: "${message}"`);

}

}

async function main() {

// Get the example accounts we'll be working with.

const [owner, tipper, tipper2, tipper3] = await hre.ethers.getSigners();

// We get the contract to deploy.

const BuyABCACoffee = await hre.ethers.getContractFactory("BuyABCACoffee");

const buyABCACoffee = await BuyABCACoffee.deploy();

// Deploy the contract.

await buyABCACoffee.deployed();

console.log("BuyABCACoffee deployed to:", buyABCACoffee.address);

// Check balances before the coffee purchase.

const addresses = [owner.address, tipper.address, buyABCACoffee.address];

console.log("== start ==");

await printBalances(addresses);

// Buy the owner a few coffees.

const tip = {value: hre.ethers.utils.parseEther("1")};

await buyABCACoffee.connect(tipper).buyCoffee("Carolina", "You're the best!", tip);

await buyABCACoffee.connect(tipper2).buyCoffee("Vitto", "Amazing teacher", tip);

await buyABCACoffee.connect(tipper3).buyCoffee("Kay", "I love my Proof of Knowledge", tip);

// Check balances after the coffee purchase.

console.log("== bought coffee ==");

await printBalances(addresses);

// Withdraw.

await buyABCACoffee.connect(owner).withdrawTips();

// Check balances after withdrawal.

console.log("== withdrawTips ==");

await printBalances(addresses);

// Check out the memos.

console.log("== memos ==");

const memos = await buyABCACoffee.getMemos();

printMemos(memos);

}

// We recommend this pattern to be able to use async/await everywhere

// and properly handle errors.

main()

.then(() => process.exit(0))

.catch((error) => {

console.error(error);

process.exit(1);

});

完成后如下图所示：

4、点击deploy.js文件，将原文替换成以下代码。

// scripts/deploy.js

const hre = require("hardhat");

async function main() {

// We get the contract to deploy.

const BuyABCACoffee = await hre.ethers.getContractFactory("BuyABCACoffee");

const buyABCACoffee = await BuyABCACoffee.deploy();

await buyABCACoffee.deployed();

console.log("BuyABCACoffee deployed to:", buyABCACoffee.address);

}

// We recommend this pattern to be able to use async/await everywhere

// and properly handle errors.

main()

.then(() => process.exit(0))

.catch((error) => {

console.error(error);

process.exit(1);

});

5、在scripts目录左键点击右侧3个点处，选“Add file”，新建withdraw.js文件，并回车。

6、在上一步新建的“withdraw.js”文件里，输入以下代码。

// scripts/withdraw.js

const hre = require("hardhat");

const abi = require("../artifacts/contracts/BuyABCACoffee.sol/BuyABCACoffee.json");

async function getBalance(provider, address) {

const balanceBigInt = await provider.getBalance(address);

return hre.ethers.utils.formatEther(balanceBigInt);

}

async function main() {

// Get the contract that has been deployed to Goerli.

const contractAddress="0x314Cb061D81759F339c6F026c86D09Ad528A31b5";

const contractABI = abi.abi;

// Get the node connection and wallet connection.

const provider = new hre.ethers.providers.AlchemyProvider("goerli", process.env.GOERLI_API_KEY);

// Ensure that signer is the SAME address as the original contract deployer,

// or else this script will fail with an error.

const signer = new hre.ethers.Wallet(process.env.PRIVATE_KEY, provider);

// Instantiate connected contract.

const buyABCACoffee = new hre.ethers.Contract(contractAddress, contractABI, signer);

// Check starting balances.

console.log("current balance of owner: ", await getBalance(provider, signer.address), "ETH");

const contractBalance = await getBalance(provider, buyABCACoffee.address);

console.log("current balance of contract: ", await getBalance(provider, buyABCACoffee.address), "ETH");

// Withdraw funds if there are funds to withdraw.

if (contractBalance !== "0.0") {

console.log("withdrawing funds..")

const withdrawTxn = await buyABCACoffee.withdrawTips();

await withdrawTxn.wait();

} else {

console.log("no funds to withdraw!");

}

// Check ending balance.

console.log("current balance of owner: ", await getBalance(provider, signer.address), "ETH");

}

// We recommend this pattern to be able to use async/await everywhere

// and properly handle errors.

main()

.then(() => process.exit(0))

.catch((error) => {

console.error(error);

process.exit(1);

});

7、左键点击BuyABCACoffee-contracts右边三个点，选“Add file”，新建.env文件(注意，此文件最前面有小数点)。

8、先暂时将以下代码输入.env文件

GOERLI_URL=https://eth-goerli.alchemyapi.io/v2/ GOERLI_API_KEY= PRIVATE_KEY= 9、登陆alchemy账号并创建ETH-Goerli的API（如何创建见 前序文章 第4步） 点击VIEW KEY，然后复制下图所示API KEY，粘贴到上一步的GOERLI_API_KEY=后面；复制HTTPS，粘贴到上一步的GOERLI_URL=后面。 再去metamask钱包导出钱包私钥（如何导出见 前序文章 第5步，最好新建一个新钱包），将私钥粘贴到上一步的PRIVATE_KEY=后面。 10、点击hardhat.config.js文件，并将原文替换成以下代码： // hardhat.config.js require("@nomiclabs/hardhat-ethers"); require("@nomiclabs/hardhat-waffle"); require('dotenv').config(); // You need to export an object to set up your config // Go to https://hardhat.org/config/ to learn more const GOERLI = process.env.GOERLI_URL; const PRIVATE = process.env.PRIVATE_KEY; //console.log(GOERLI); /** * @type import('hardhat/config').HardhatUserConfig */ module.exports = { solidity: "0.8.9", networks: { goerli: { url: GOERLI, accounts: [PRIVATE] } } }; 四、代码完成，开始项目测试 1、又回到右边栏了，点击“Shell”，若观察回到上一层目录了，请执行cd BuyABCACoffee-contracts （同样ABC为你应与前面你设置的名字一样**）**切换到子目录中。没有则不管。以后遇到都需要这么处理，即cd +文件名 。如下图： 然后输入npx hardhat run scripts/buycoffee.js并回车。（中间会遇到有一次”？直接回车，以后遇到该问题也是如此操作）如下图： 当运行完成后，看图可发现我们的控制台又回到了上一层目录，同理我们通过输入cd BuyABCACoffee-contracts回到子目录。 2、输入npx hardhat run scripts/deploy.js并回车。(中间会遇到有一次”？直接回车，以后遇到该问题也是如此操作） 当出现如下图：deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3，则代表运行成功。当然，这只是尝试部署，还没真正到链上。 3、输入npx hardhat run scripts/deploy.js --network goerli并回车。 若出现下图:INSUFFICIENT_FUNDS代码，则代表钱包每天Goerli网上的ETH。去https://www.goerlifaucet.com 并登陆Alchemy 帐户以获得一些免费的测试币。 正常成功的部署应该是如下图所示，会出现deployed to：后面的地址就是我们部署的合约地址，复制下来后续步骤会要用到。 这里有的朋友可能等很久都不会出现合约地址,可以试着按下回车，或者直接去自己的钱包查看链上是否有合约部署记录。 4、输入npx hardhat run scripts/withdraw.js并回车（中间可能会有一次回车）。 五、部署dapp 1、先回到上一层magweek2(你们命名的可能不一样)，输入cd 并回车(如果已经回到上一层目录了，就不用管了),然后输入cd magweek2。 输入npx create-next-app buyabcacoffee-dapp，并回车 (此目录名可以自命名，后续需保持与此一致。中间可能有一次回车。 出现SUCCESS表示成功。 2、输入cd buyabcacoffee-dapp并回车，然后输入npm install --save ethers并回车。 3、安装成功后，左边栏不一定及时出现新目录，需要手动刷新。 （1）先点左边第二个按钮version control，直到出现红框出的buyabcacoffee即可。 （2）再点回第一个按钮file，等待更新目录，会等几分钟。 4、为了让dapp找到合约，需要把BuyABCACoffee产生的合约属性文件拷贝到dapp目录下。操作流程如下：（ABC如果前面有改，则是你们改的名字） （1）点开BuyABCACoffee-contracts目录，选择artifacts/contract/BuyABCACoffee.sol这个目录，选择其中叫BuyABCACoffee.json的文件，先复制其里面的内容到其他地方（比如新建一个记事本拷贝进去），点BuyABCACoffee.json文件右边的三个点，选“rename“，复制其文件名，如图 （2）点击buyabcacoffee-dapp目录右边的三个点，选择“Add folder“，新建utils文件夹。 （3）点击utils右边三个点，选择“Add file“，新建BuyABCACoffee.json文件，再将之前复制的内容拷贝到该文件，即完成。 5、打开pages目录，点击index.js文件，将原文用以下代码替换掉。 注意：①下面ABC几处同样需要和前面保持一致。②第19行代码“contractAddress”处填上第四大步第3点里面记录的合约地址。③名字（hymnmark有3处）可以改为任意名字。④@FinderTechnical处可以改成自己的twitter号。 import abi from '../utils/BuyABCACoffee.json'; import { ethers } from "ethers"; import Head from 'next/head' import Image from 'next/image' import React, { useEffect, useState } from "react"; import styles from '../styles/Home.module.css'   export default function Home() {   // Contract Address & ABI   const contractAddress = "0x2a112B58765c93B0151C10D0Aa54a70698859676";   const contractABI = abi.abi;     // Component state   const [currentAccount, setCurrentAccount] = useState("");   const [name, setName] = useState("");   const [message, setMessage] = useState("");   const [memos, setMemos] = useState([]);     const onNameChange = (event) => {     setName(event.target.value);   }     const onMessageChange = (event) => {     setMessage(event.target.value);   }     // Wallet connection logic   const isWalletConnected = async () => {     try {       const { ethereum } = window;         const accounts = await ethereum.request({ method: 'eth_accounts' })       console.log("accounts: ", accounts);         if (accounts.length > 0) {         const account = accounts[0];         console.log("wallet is connected! " + account);       } else {         console.log("make sure MetaMask is connected");       }     } catch (error) {       console.log("error: ", error);     }   }     const connectWallet = async () => {     try {       const { ethereum } = window;         if (!ethereum) {         console.log("please install MetaMask");       }         const accounts = await ethereum.request({         method: 'eth_requestAccounts'       });         setCurrentAccount(accounts[0]);     } catch (error) {       console.log(error);     }   }     const buyCoffee = async () => {     try {       const { ethereum } = window;         if (ethereum) {         const provider = new ethers.providers.Web3Provider(ethereum, "any");         const signer = provider.getSigner();         const buyABCACoffee = new ethers.Contract(           contractAddress,           contractABI,           signer         );           console.log("buying coffee..")         const coffeeTxn = await buyABCACoffee.buyCoffee(           name ? name : "anon",           message ? message : "Enjoy your coffee!",           { value: ethers.utils.parseEther("0.001") }         );           await coffeeTxn.wait();           console.log("mined ", coffeeTxn.hash);           console.log("coffee purchased!");           // Clear the form fields.         setName("");         setMessage("");       }     } catch (error) {       console.log(error);     }   };     // Function to fetch all memos stored on-chain.   const getMemos = async () => {     try {       const { ethereum } = window;       if (ethereum) {         const provider = new ethers.providers.Web3Provider(ethereum);         const signer = provider.getSigner();         const buyABCACoffee = new ethers.Contract(           contractAddress,           contractABI,           signer         );           console.log("fetching memos from the blockchain..");         const memos = await buyABCACoffee.getMemos();         console.log("fetched!");         setMemos(memos);       } else {         console.log("Metamask is not connected");       }       } catch (error) {       console.log(error);     }   };     useEffect(() => {     let buyABCACoffee;     isWalletConnected();     getMemos();       // Create an event handler function for when someone sends     // us a new memo.     const onNewMemo = (from, timestamp, name, message) => {       console.log("Memo received: ", from, timestamp, name, message);       setMemos((prevState) => [         ...prevState,         {           address: from,           timestamp: new Date(timestamp * 1000),           message,           name         }       ]);     };       const { ethereum } = window;       // Listen for new memo events.     if (ethereum) {       const provider = new ethers.providers.Web3Provider(ethereum, "any");       const signer = provider.getSigner();       buyABCACoffee = new ethers.Contract(         contractAddress,         contractABI,         signer       );         buyABCACoffee.on("NewMemo", onNewMemo);     }       return () => {       if (buyABCACoffee) {         buyABCACoffee.off("NewMemo", onNewMemo);       }     }   }, []);     return (     <div className={styles.container}>       <Head>         <title>Buy hymnmark a Coffee!</title>         <meta name="description" content="Tipping site" />         <link rel="icon" href="/favicon.ico" />       </Head>         <main className={styles.main}>         <h1 className={styles.title}>   Buy hymnmark a Coffee!         </h1>           {currentAccount ? (           <div>             <form>               <div>                 <label>                   Name                 </label>                 <br />                   <input                   id="name"                   type="text"                   placeholder="anon"                   onChange={onNameChange}                 />               </div>               <br />               <div>                 <label>                   Send hymnmark a message                 </label>                 <br />                   <textarea                   rows={3}                   placeholder="Enjoy your coffee!"                   id="message"                   onChange={onMessageChange}                   required                 >                 </textarea>               </div>               <div>                 <button                   type="button"                   onClick={buyCoffee}                 >                   Send 1 Coffee for 0.001ETH                 </button>               </div>             </form>           </div>         ) : (             <button onClick={connectWallet}> Connect your wallet </button>           )}       </main>         {currentAccount && (<h1>Memos received</h1>)}         {currentAccount && (memos.map((memo, idx) => {         return (           <div key={idx} style={{ border: "2px solid", "borderRadius": "5px", padding: "5px", margin: "5px" }}>             <p style={{ "fontWeight": "bold" }}>"{memo.message}"</p>             <p>From: {memo.name} at {memo.timestamp.toString()}</p>           </div>         )       }))}         <footer className={styles.footer}>         <a           href="https://alchemy.com/?a=roadtoweb3weektwo"           target="_blank"           rel="noopener noreferrer"         >           Created by @FinderTechnical for Alchemy's Road to Web3 lesson two!         </a>       </footer>     </div>   ) } 6、开始准备运行dapp了。点击最上面Files右边的三个点，选择“show hidden files“,显示.replit的文件。 7、点击.replit，将原文用以下代码替换：（若之前目录名字是自定义的，请换成你们自定义的） ，最后点击上方绿色按钮“RUN” run = "npm --prefix=./buyabcacoffee-dapp run dev" entrypoint = './buyabcacoffee-dapp/pages/index.js' 8、最终出现如下图，即代表成功。我改过名字，所以显示是maggy。 点开右上角“open in a new tab”，可以试用下打赏功能。 9、点击“connect your wallet”连上钱包，进行打赏，然后可以查看钱包是否交易成功。至此所有任务步骤都已经完成，dapp已经完美运行。 10、切记！！！！！！！！删掉.env文件（env文件里有私钥），如下图。 六、发布与提交 1、发布，切记在发布钱删掉.env文件。发布没什么好说的，该填的框框填起来，就是无脑下一步，最后会有个网址保存下来作为最后的任务证明就行啦。 2、提交任务 Week 2: https://forms.gle/HeJrvT72mRcnasr99 打开该网址提交任务。 主要是提交repit项目地址即上一步保存的网址，类似于：https://replit.com/你的github名字/项目名字?v=1 这样子。 还有提交第四步第3点部署的合约地址，类似于：https://goerli.etherscan.io/address/合约地址。

教程的编写主要是在@hymnxxk#6345上的优化而成。

主要是通过将github代码库与replit连接，并在replit网页上打开代码库进行代码编译，完成任务。

每周任务准备的通用步骤：

1、设置好科学上网工具（很关键）

2、注册https://github.com/ （已有的跳过），并登录。

3、注册https://replit.com/ （已有的跳过，可以用github直接登陆），登录自己的replit，并与和github账号连接同步，操作如下：

（1）点击“create”按钮，然后选择“import from github”

（2）继续点击“Connect GitHub to import your private repos.”

（3）若前面保持了github的登录，则直接点如下图红框处，否则会进入github登录界面重新登录，然后再次回到上一步操作。

（4）等一小段时间，会回到下图页面，再次点击红框处（显示已与前不同）

（5）弹出新网页，会到下图页面，先选图中“only select repositories”，再选“All repositories”，才会让“Save”按钮变亮，然后点击“save”。

（6）再次回到replit，点击“create”，“import from github”，下图2可以看到自己github上面自己创建的各种代码库，表示replit已与github链接上，为每周任务做好准备。

（注：图中的代码库为我已经做完任务的仓库，我们每次做任务之前都需要在github上面创建代码仓库，然后从这一步导入到replit，这是所有任务开始的基础，一定要看明白）

4、注册https://www.alchemy.com/ 并创建Api

（1）我们直接通过Gmail账号登陆,无需注册。

（2）创建API

5、导出metamask私钥