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

By [0xCarroll](https://paragraph.com/@0xcarroll) · 2022-10-10

---

看到DC很多小伙伴在做任务二的过程中遇到了各种细节问题，因此想整合MOD：[souleigh.eth](https://mirror.xyz/souleigh.eth/KnWsGobTvWOLg0rARlOBaglM8_ty7GczHN1k6HkseV4)和[大中天#9164](https://medium.com/@wchen6596/condor%E6%B8%AC%E8%A9%A6%E7%B6%B2-%E4%BB%BB%E5%8B%992-%E7%99%BC%E5%B8%83%E4%B8%80%E5%80%8Bdapp-%E7%BD%AE%E6%8F%9Babi%E5%8F%8A%E5%90%88%E7%B4%84%E5%9C%B0%E5%9D%80-5bd3fd48a393) 的教程重新整理一份更加详细的流程，希望可以帮到大家。

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

![](https://storage.googleapis.com/papyrus_images/7bb259495d7a0c29e40a2b4606b4f6828dd492491f0602bbfb15272c5ce8be1d.png)

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

![](https://storage.googleapis.com/papyrus_images/962622c77f19ac5fd42a704aba194aa2bd83bef357a66642e7697d64e77729c4.png)

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

![](https://storage.googleapis.com/papyrus_images/6a273f17c5d773cd6fd5593a4476575febefd4688c02a976fadf4a8a0ed37421.png)

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

![](https://storage.googleapis.com/papyrus_images/b9b56b46d02c9fdc5c57f6efc6bc509bbfaecdeaa13c72c57a8fb53948cbaaaf.png)

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

![](https://storage.googleapis.com/papyrus_images/c62b8cc448c2d927f40cc503ec25b8bc1569f1eebd81cae264baf4de8eecf64d.png)

新工作区随意命名，点OK

![](https://storage.googleapis.com/papyrus_images/eb08f4c722ab3e368aace6ad71d10836c5ecd8e2a05ca817325a420904f0ad0e.png)

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

![](https://storage.googleapis.com/papyrus_images/38088a15c4d37335cf2f1312bc31fc90dc99f3b5f6ea41b1daa8326530960ac1.png)

打开souleigh.eth部署的[合约链接](https://explorer.condor.systems/address/0x9b6c936c9fa2a9e3fCbB10C2163a148e7A47CB7B/contracts#address-tabs)，点击“code”

![](https://storage.googleapis.com/papyrus_images/929bd634bfa9123a808c80ad356ef6967e772784249196b05421ead771222b69.png)

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

![](https://storage.googleapis.com/papyrus_images/210bdf14dcdcc6bb560e89cbea25273642656b5e12a2e6d83dcb28b823eb87e1.png)

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

![](https://storage.googleapis.com/papyrus_images/79cede589174fbcf75ccf9b59ca63181336d22715edf83590f9ecc47899cea05.png)

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

![](https://storage.googleapis.com/papyrus_images/2a328f5448d009d547d5faeeb77826f6937fcdf3bb93a8b19ed306ba15dae975.png)

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

![](https://storage.googleapis.com/papyrus_images/ae0eac2c4c3233f1c21d105366f1a0f6b53d0555a56e3534320937ff2568cd41.png)

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

![](https://storage.googleapis.com/papyrus_images/9ffb5915e515afbf3032cc35251dc5beb55b8119e16f98b515f0564631a90a52.png)

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

![](https://storage.googleapis.com/papyrus_images/51f6df08ecbc82adcc1f75475e1a0dcdc706574c1f67c207356563adc80a01dc.png)

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

![](https://storage.googleapis.com/papyrus_images/469c40061f3e547f56c91f69b5f25edf5deabd23599d048a238385deef4a88b4.png)

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

![](https://storage.googleapis.com/papyrus_images/d9b4e140363207cd241659b944943d3f9d490dd225a6ae000daefa1f2848c15b.png)

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

![](https://storage.googleapis.com/papyrus_images/35f3461d07a24d83d66b48841f60e5a22dbb17b576c4b45575343f87afe6d065.png)

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

![](https://storage.googleapis.com/papyrus_images/2429b28b3d791e5936185afbe49ce03e32865ffd9e423871505b09ddd8087525.png)

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

![](https://storage.googleapis.com/papyrus_images/172c116c0ef7c8a4e355876aea45310779ec983773eaaa4cbce0e9f42ea35e14.png)

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

![](https://storage.googleapis.com/papyrus_images/03d1727f9de76e6a09c36e37b68334f1578a673379ce68f54d974c95926f8354.png)

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

![](https://storage.googleapis.com/papyrus_images/f093ce946e66c26795fe70d2a8985ba5a5a1097a782866eb4bd4e872619d0dc2.png)

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

![](https://storage.googleapis.com/papyrus_images/381ba807ca399de1192220c6f2b77d8cb2148d057869bf2584215ee4203299c5.png)

去discord提交证明，身份到手！

![](https://storage.googleapis.com/papyrus_images/f188831860215073a7320d65bee5d9c243e275c4d1acc7524f05a75dc8e11ff5.png)

---

*Originally published on [0xCarroll](https://paragraph.com/@0xcarroll/condor-systems-simple-dapp)*