与前端交互

您已成功设置前端的所有内容。是时候同时与 dex 和忠诚度 dApp 进行交互,看看它是如何工作的了。

与前端交互

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

yarn dev

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

interact-1.png

最初,如果您之前没有与 dex dApp 进行过交互,您会在所有或部分字段中看到 0 余额。要使用忠诚度 dApp,我们必须填写“DEX 掉期”和“DEXC 余额”字段。为了填充这些字段,我们需要互换一些代币。

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

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

将 ETH 兑换为 USDC 代币

以下是我们如何将 ETH 代币兑换成 USDC 代币。

interact-gif-1.gif

将 USDC 兑换为 ETH 代币

以下是我们如何将 USDC 代币兑换为 ETH 代币。

interact-gif-2.gif

交换代币后,您将看到余额字段的变化,如下所示。

interact-2.png

前往忠诚度 dApp

是时候质押您的 DEXC 代币来赚取使用 Dex 应用程序的奖励了。当您质押 DEXC 代币一次时,您将开始在每第二次代币交换中获得奖励。当您集齐5个奖励后,您将有资格获得奖励。

单击左上角的 Loyalty dApp 按钮前往忠诚度 dApp,然后质押或取消质押您的 DEXC 代币。

interact-gif-3.gif

获得5次奖励后,即可领取奖励。让我们看看它是如何工作的。在我们的例子中,奖励将是 NFT。

interact-gif-4.gif

小结

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

quiz

分享一下你的前端截图,弹出“NFT奖励成功领取”的提示