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。

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

二、在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频道即可,格式如图二。

图一:成功图示
图一:成功图示
图二:任务提交网址格式
图二:任务提交网址格式
Subscribe to Licrazy
Receive the latest updates directly to your inbox.
Mint this entry as an NFT to add it to your collection.
Verification
This entry has been permanently stored onchain and signed by its creator.