Alchemy的the Road to Web3第九周文本教程- 使用 0x API 构建代币交换 Dapp

在本教程中,我们将学习如何使用0x API 交换端点它允许用户在流动性供应和使用中获取可用报价智能订单路由在分散的交易网络中拆分交易,以尽可能降低滑点,同时最大限度地降低交易成本。请注意,我们不需要编写任何智能合约来查找和结算交易!相反,0x API 允许 web3 开发人员轻松利用 0x 协议智能合约,该合约负责处理用于结算交易的所有逻辑,让 web 开发人员专注于构建最佳交易体验。

在本教程结束时,将学习如何执行以下操作:

  • 了解为什么流动性聚合很重要

  • 查询并显示ERC20 代币列表

  • 使用0x API /swap 端点

  • 设置代币限额

  • 构建一个使用web3.js连接到MetaMask的简单代币交换DApp

结果展示

post image

正课开始

1.clone 代码

因为我们需要在浏览器中使用节点模块,所以需要安装下面的依赖

# 可能权限不足 则使用sudo
npm install -g browserify
npm i qs
# 每一步修改了代码为了最新的代码都必须执行下面的
browserify index.js --standalone bundle -o bundle.js
npm install bignumber.js

2.使用vscode打开我们的代码

我们将clone的代码使用VScode打开后,为了方便使用则需要安装一些扩展工具,按照下面安装即可:

post image
post image

当上面都安装好后,我们使用安装的工具运行代码,会出现下面的页面,系统会自动去加载token信息。

post image
post image

系统会自动给我们计算Gas,我们连接上钱包,点击Swap,小狐狸钱包会提示我们授权

post image

当我们批准授权后,小狐狸钱包会再次提醒我们去和合约交互做Swap,我们再次同意后就可以等待事物的完成。

post image

当你完成后,可以多种方式查询结构,如去区块浏览器查询,或者在自己钱包查看

post image

注意事项:因为合理0x是使用主网的哦,切记。

最后我们别忘了去填写表格哦。