Cover photo

Condor System 任务7:Advance Dapp

我的推特:LiCrazy

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

一、克隆代码并在gitpod打开

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

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

post image
post image
注:此代码库为discord社区成员已经添加过condor网络的代码,省去了任务中需要自行添加condor网络代码的步骤。
注:此代码库为discord社区成员已经添加过condor网络的代码,省去了任务中需要自行添加condor网络代码的步骤。

二、在condor上部署合约

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

post image

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

post image

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

post image

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

post image

三、部署前端

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

post image

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

post image

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

post image

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

post image

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

图一:成功图示
图一:成功图示
图二:任务提交网址格式
图二:任务提交网址格式