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

大家好,我是帝哥(推特:@CoinmanLabs),今天帝哥带大家一起来看看第九周的任务。看到这里可能很多人就在问,帝哥为啥不讲第八周啊?同学们,不是帝哥不想讲啊,主要是官方自己第八周都没有出来。

是否曾经使用你最喜欢的代币交易 dapp 将 ETH 换成 DAI,并想知道它是如何为您找到最优惠的价格的?

它很可能使用流动性聚合器它从链下(例如做市商、订单簿)和链上(例如 DEX、AMM)获取所有可能的价格,并为用户提供最优惠的价格。

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

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

  • 了解为什么流动性聚合很重要
  • 查询并显示ERC20 代币列表
  • 使用0x API /swap 端点
  • 设置代币限额
  • 构建一个使用web3.js连接到MetaMask的简单代币交换DApp

结果展示

其实帝哥把第九周的课程看了好久,一直在研究给自己找bug,修复bug,因为有的东西是无法使用的,帝哥经历九九八十一难,终于将代码调试可以了切通过运行了。我们先看成果吧,第九周帝哥会以最简单的方式带大家实现。

正课开始

1.clone 代码

帝哥已经将修复的代码上传到帝哥的Github仓库了,首先我们去clone到本地,下面是帝哥的Github的仓库地址。

首先你需要将帝哥的代码clone到本地:

 git clone https://github.com/CoinmanLabs/ROAD3_WEEK09

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

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

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

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

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

因为本地课程我们需要做swap,帝哥刚好自己的钱包里面还有个DAI,就使用DAI和WETH来进行SWAP.首先我们在上面选中DAI,下面选中WETH,如下面所示:

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

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

当你完成后,可以多种方式查询结构,如去区块浏览器查询,或者在自己钱包查看,下面是帝哥的查询结果:

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

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

我是懂币帝,用技术带你领略区块链魅力,第一时间获取行业最新资讯:

推特:@CoinmanLabs

微信:CoinmanLabs(社群客服微信进群)

Subscribe to Coinman.eth
Receive the latest updates directly to your inbox.
Mint this entry as an NFT to add it to your collection.
Verification
This entry has been permanently stored onchain and signed by its creator.