Condor测试网任务二-发布一个DAPP

在第一个部署合约的任务中,我们已经学会了如何部署一个链上合约,

如果不会的可以参考官方教程和大佬的教程。

https://mirror.xyz/0x5953D009299f31fac1d7B08176Cc7a7A571405Cb/RtPby_mY-It-cF4-kqH8wwugBlurQL6_qy4VUu8Ixfc

https://mirror.xyz/joio.eth/uW3qffe_byHABaMCcE9b8bbAPbfhj_d9xSqdCu4Knv4

开发DAPP

注意事项:该教程必须使用以下配套的合约(Comments)才能正常使用此 DAPP,否则运行会报错!

https://explorer.condor.systems/address/0x9b6c936c9fa2a9e3fCbB10C2163a148e7A47CB7B/contracts#address-tabs

第二个任务需要编写一个测试网应用(dapp),这时候我们就可以用到第一个任务中的合约来进行各种合约操作,这里我拿自己发布的dapp为例来说明一下吧。

我的示例dapp
我的示例dapp

打开我的dapp示例地址

https://replit.com/@hsl947/Condor-Comment-Panel?v=1

点击 `Fork Repl`, 仓库名称和介绍可以不用改,直接确认.

Fork-1
Fork-1
Fork-2
Fork-2

Fork 完自动会自动打开代码,接下来我们只需要修改几处代码

  1. 修改 `pages/index.tsx`中的 RPC地址

  2. 修改`hooks/useCommentsContract.ts` 中的 abi 和 合约地址

其实这里的 RPC 地址我已经替换成正确的了,这边可以略过。

修改
修改
修改
修改

这个我们需要合约地址和abi信息,我就拿这个dapp的合约示例来说明一下。

这是我的开源合约,大家可以复制代码过去重新部署一下

https://explorer.condor.systems/address/0x9b6c936c9fa2a9e3fCbB10C2163a148e7A47CB7B/contracts#address-tabs

获取合约地址,部署完在右下角直接复制即可

获取合约地址
获取合约地址

关于获取 abi信息,这里有两种方法

  • 合约验证过的话,在区块浏览器的Code栏就能看到 copy abi

找到Code 栏
找到Code 栏

找到 copy abi

复制 abi
复制 abi
  • 合约没验证的可以在 remix上找到 abi,复制后面的 [ … ] 数组就行了

获取abi信息
获取abi信息

把以上获取的合约地址和abi复制并替换到上一步的文件中

替换好后,直接点击顶部正中间的 `RUN`起来

运行示例
运行示例

如果连接不了钱包,建议新窗口打开

新窗口打开
新窗口打开

然后我们就可以链接钱包,切换到 CONDOR 测试网进行交互了

在区块浏览器上能看到我们进行过的交互

区块浏览器的交互记录
区块浏览器的交互记录

以上,如果有不清楚的一起互相交流,谢谢大家

我是 Souleigh, 欢迎关注推特

https://twitter.com/Souleigh_Hong