代币交换 ERC-20 代币 – 我们的示例演示 Dapp
以下是我们示例 ERC-20 代币交换 dapp 的屏幕截图：
通过检查上图可以看出，我们专注于创建一个简单而整洁的用户界面。因此，我们的示例 dapp 在顶部显示用户的钱包地址。当然，要做到这一点，用户必须首先进行身份验证。这就是我们使用 Moralis 的Web3 身份验证解决方案的地方。
在连接的 Web3 钱包地址下方，我们的 UI 还显示了原生代币余额。由于我们专注于 Polygon 区块链，因此您可以看到 MATIC（Polygon 的原生代币）的余额。不过，值得一提的是，Moralis 完全专注于跨链互操作性。因此，您可以在以太坊或任何其他兼容 EVM 的链上部署您的 dapp。
在我们的 dapp 用户界面中，用户可以选择“entry”代币——他们想要交换的代币。菜单右侧是一个输入字段。后者允许用户输入或选择他们想要交换的“entry”代币的数量：
接下来，您可以看到第二个下拉菜单，它允许用户选择“输出”代币——他们想要交换的代币。我们在这里添加了“USDC”和“WETH”，如下所示。但是，您可以根据需要向该列表添加任意数量的 ERC-20 代币：
因此，用户输入要兑换的原生代币数量并选择“输出”代币后，需要点击“获取兑换”。此按钮可确保用户看到可以收到的“输出”代币数量：
兑换 ERC-20 代币
尽管如此，查看上面的两个屏幕截图，获取当前转换率会激活“交换代币”按钮。因此，用户可以单击该按钮最终交换 ERC-20 代币。因此，当用户单击“交换代币”按钮时，他们的 MetaMask 扩展程序会弹出，要求他们确认：
上面的截图表明 MetaMask 已连接到 Polygon 链（“Matic Mainnet”）。您还可以看到与此特定交换相关的一些 gas 费用。当然，您可能知道 gas 费用对于任何类型的区块链上的所有链上交易都是必不可少的。本质上，用户需要通过单击“确认”按钮来确认上述通知：
在用户交换 ERC-20 代币后，我们的 dapp 还会显示其交易哈希：
此外，用户可以复制交易哈希并将其与相关的区块链浏览器一起使用。这样，他们就可以查看相关交易的详细信息。由于我们的 dap 基于 Polygon 链，因此用户需要使用 PolygonScan 来探索他们的交易：
一旦交易处理完毕，PolygonScan 将显示其所有详细信息：
此外，用户的钱包也反映了他们的代币交换：
此外，当用户刷新 dapp 的页面时，它会显示更新后的余额：
最后但同样重要的一点是，我们的示例 dapp 还允许用户通过单击“退出”按钮断开他们的钱包连接。
如果您喜欢上述演示，您可能已经迫不及待地想要开始构建。如果是这样，我们邀请您跟随我们的脚步，创建您自己的代币交换 dapp 实例。
为用户提供 ERC-20 代币兑换服务 – 使用 NextJS、Moralis、1inch 和 Wagmi 进行构建
我们将基于我们之前的一个示例项目构建今天的项目，该项目已包含 Web3 身份验证。因此，请转到GitHub并克隆“ MultipleWalletAuthentication ”代码（入门代码）。另一方面，您也可以克隆我们完成的代码。但是，请记住，我们假定您从入门代码开始。
入门
克隆起始代码后，就可以打开项目了。为了避免混淆，我们建议您按照我们的指导使用 Visual Studio Code (VSC)。然后，使用 VSC 的终端安装所有必需的依赖项。您可以使用“ npm i ”命令执行此操作：
接下来，打开“.env.local”文件，您需要在其中粘贴您的 Moralis Web3 API 密钥：
这是您获取 Moralis Web3 API 密钥的提示。因此，您需要准备好您的 Moralis 帐户。如果您还没有这样做，请使用简介中的“创建您的免费 Moralis 帐户”链接。设置好您的 Moralis 帐户后，您将能够访问您的管理区域。在那里，您将可以复制您的 Web3 API 密钥。成功设置 Moralis 帐户后（这不会花费您一分钟以上的时间），您将访问您的 Moralis 仪表板。在这里，您将在侧面菜单中看到“Web3 API”选项卡：
进入“Web3 API”页面后，使用“复制”图标获取您的 Moralis Web3 API 密钥：
最后，返回“.env.local”文件并粘贴您的密钥。
接下来，使用“ npm run dev ”命令打开开发服务器。完成后，您将能够使用浏览器预览交换 dapp 的初始阶段：
我们鼓励您使用“通过 MetaMask 进行身份验证”按钮进入“用户”页面：
接下来，我们将重点调整上述“用户”页面。我们将添加代币交换 ERC-20 代币所需的功能，如上面的演示所示。
将“ user.js ”编码为代币交换 ERC-20 代币
首先打开位于“pages”文件夹内的“user.js”文件：
查看初始代码行，它已经包含有关连接钱包的一些详细信息。因此，您可以将其用作添加代币交换功能的基础。
因此，转到文件顶部并导入 Moralis：
然后，使用“ getServerSideProps ”异步函数初始化 Moralis。此外，还可以使用Moralis EVM API 的“ account ” API 类型中的“ getNativeBalance ”端点：
注意：您可以看到上面使用了“0x89”。这是 Polygon 链 ID。如果您想在任何其他兼容 EVM 的链上交换 ERC-20 代币，则需要使用该链的 ID。使用 Moralis 文档探索受支持的链的 ID。
接下来，调整“ getServerSideProps ”函数的“ return ”部分以获得正确的响应：
尽管如此，请确保在“ User ”函数中传递“ balance ”属性：
接下来，您需要调整“用户”功能的代码，以便它能够呈现用户的余额。
实现 ERC-20 代币交换功能
首先返回“user.js”文件的顶部并从 React导入“ useState ”：
然后，返回“ User ”函数并添加以下常量：
注意：当前代码尚未使用上述常量。您将在后续步骤中使用它们。
有了常量，就开始添加适当的函数。这些函数必须正确显示选定的标记及其值。您可以使用“ changeToToken ”和“ changeValue ”函数来实现这一点：
实施 1inch 聚合器
要实现 1inch 聚合器，请在“ User ”函数中添加“ get1inchSwap() ”函数。此功能将使用户能够交换 ERC-20 代币。以下是所需的代码行：
如果您有兴趣了解有关 1inch 聚合器的更多信息，请使用下面的视频 (9:22)。在这里，我们的内部专家将向您展示如何生成上述“ get1inchSwap() ”函数中使用的 URL 地址。但是，正如您所见，我们已经调整了这个 URL，以便它接受上面定义的常量。当然，您可以根据需要调整上述常量。
尽管如此，你还可以看到“ get1inchSwap() ”函数也使用了“ axios ”。因此，请确保跳回到“ user.js ”文件的顶部并导入该 HTTP 客户端：
另外，还可以看到我们在“ get1inchSwap() ”函数内部设置了适当的状态变量。
瓦格米钩
因此，要放置“ get1inchSwap() ”函数将使用的数据，您的代码需要发送交易。这就是“ wagmi ”登场的地方。通过使用此 React 钩子工具，您可以向“交换代币”按钮添加执行功能。更准确地说，您将使用“ useSendTransaction ”。因此，返回“ user.js ”文件的顶部并从“ wagmi ”导入该钩子：
这是让用户能够交换 ERC-20 代币的最后一块拼图。现在，您的 dapp 将能够将交换交易发送到 1inch 聚合器。
因此，您现在需要设置一个适当的 UI，其中包括可以触发适当功能的按钮。
UI 到代币兑换 ERC-20 代币
以下“用户”函数的“返回”部分负责 ERC-20 交换 dapp 的 UI：
查看上面的代码行，您可以看到“获取转换”和“交换代币”按钮。您还可以看到它们触发了上面定义的函数。此外，在上面，您可以看到此代码专注于“USDC”和“WETH”。因此，值得重复的是，您可以轻松添加许多其他 ERC-20 代币并扩展选项列表。要做到这一点，您只需要一个代币的代码和地址，并添加一个额外的“期权价值”。当然，1inch 聚合器还需要有一个该交易对的池，以便用户能够交换那些感兴趣的 ERC-20 代币。
代码演练
如果您有兴趣深入了解上面提供的代码，请使用下面的视频。您还可以在此处看到我们上面介绍的几个阶段的示例 dapp 的预览。不过，我们还要提醒您，您可以使用上面的“完成的代码”链接访问整个代码：
打开“pages”文件夹以访问“user.js”文件：
这使您有机会选择整个代码并将其粘贴到 VSC 中并确保没有错误。
