与前端交互

您已成功设置前端的所有内容,但还剩下最后一步。在本课中,我们将配置 ZK 登录凭证、运行前端、探索其功能,并学习如何通过前端与 move 合约交互。

设置ZK登录

请导航到前端目录中的 .env 文件并添加以下行。为了您的方便,我们已经配置了 ZK Login,因此您只需复制并粘贴 ZK Prover URL,而无需花费数小时进行设置。

URL_ZK_PROVER=http://142.93.211.174:8001/v1

如果您想自行设置 ZK Login,请按照此链接中提供的 Readme.md 文件中给出的说明进行操作。

与前端交互

现在所有凭据都已设置完毕,让我们在位于前端目录的终端中输入以下命令来运行我们的应用程序。

yarn dev

这次,通过单击“使用 Google 签名”按钮再次尝试登录。验证您的 Google 帐户,然后登录。登录后等待几秒钟,让 ZK 与您的应用程序建立连接。请求完成后,你会看到这样的页面。

frontend-interact-1.png

让我们尝试一下应用程序的不同功能,看看它是如何工作的。

  1. 首先,点击“Mint Sui”按钮来增加您的 Sui 余额。
  2. 要填充您的 USDC 和 ETH 余额,请分别单击“铸造 ETH”和“铸造 USDC”按钮。
  3. 在兑换之前,需要增加余额,因为没有任何 ETH 或 USDC,您将无法兑换代币。
  4. 要交换代币,请填写余额并单击“交换”按钮。
  5. 如果您想将 ETH 兑换成 USDC 或将 USDC 兑换成 ETH,请点击箭头按钮切换位置。

小结

我们为您完成课程并建立您自己的 Dex 应用程序感到非常自豪。在下一课中,我们将总结本课程并概述您到目前为止所学到的内容

quiz

使用您的 Google 帐户登录并与我们分享前端的屏幕截图。