Cover photo

Condor Systems任务二-Simple Dapp详尽流程版

看到DC很多小伙伴在做任务二的过程中遇到了各种细节问题,因此想整合MOD:souleigh.eth大中天#9164 的教程重新整理一份更加详细的流程,希望可以帮到大家。

打开replit实例地址 https://replit.com/@hsl947/Condor-Comment-Panel?v=1 ,点击Fork Repl

post image

名称和介绍随意填写,也可以不用改,直接确认

post image

Fork完会自动打开代码,我们找到“pages/index.tsx”中15行的 RPC地址,确认已被替换成如图所示

post image

确认“hooks/useCommentsContract.ts” 中的 abi 和 合约地址,后续替换

post image

打开remix,点击箭头处的create创建新工作区

post image

新工作区随意命名,点OK

post image

contracts上右键,点击new file,建立新sol文档

post image

打开souleigh.eth部署的合约链接,点击“code”

post image

将Contract source code内的代码内容复制下来

post image

粘贴到remix里刚刚新建的sol文档内

post image

点击小箭头处,将compiler切换成0.8.7(已经是0.8.7就不用动),再点击大箭头处开始编译,等待完成

post image

点击最左侧小箭头,确认是否为Metamask,是否为当前链接的钱包地址,是否为你的合约。都没问题了之后点击Deploy开始部署合约,直至左下角出现合约地址和右下角绿色小勾

post image

部署完成后复制合约地址,打开浏览器,将地址粘贴进去

post image

出现合约信息后点击code,再点击Verify&Publish

post image

如图确认合约地址和选项后点击next

post image

注意:输入contract name为“Comments”,compiler为“v0.8.7”,optimization为“NO”,代码处粘贴本文第十步骤复制的代码,点击Verify,等待验证通过,code右侧出现对号,至此合约部分完成

post image

回到remix,找到“contracts/artifacts/comments_metadata.json”文件,复制其中第9行到123行内容。

post image

回到replit,找到“hooks/useCommentsContract.ts”,将复制内容替换掉第28行到142行内容,并将第160行的 addressOrName改成本文第十三步骤部署的合约地址。

post image

替换好后,点击顶部正中间的“RUN”,测试能否连接钱包及发言。如果连接不了钱包,建议新窗口打开

post image

点击“sign in”登录钱包,经过授权签名后测试下留言功能

post image

如能成功显示则表示构建成功

post image

在浏览器上可以查看到我们进行过的交互 注意:确保code旁边出现绿色对号,也就是验证通过

post image

去discord提交证明,身份到手!

post image