仿PancakeSwap前端 vue版本

i am duck 发布于 2021-12-29 阅读 8219

Vue版Swap

? 肝了好久 肝了一个仿PancakeSwap的闪兑前端

市面上大部分dapp都是由React开发,不想学React只能自己肝一个Vue项目了。也给用Vue开发的朋友一些分享。

奈何我不会react, 无法拿开源代码直接用,只能看着源码一点一点肝出Vue版本,核心js慢慢肝出来的。

该JieSwap用的是PancakeSwap主网的合约,在这里闪兑相当于在Pancake的池子闪兑,如有错误,不负责任。

开发须知

首先要了解AMM的概念,动手体验一下什么是闪兑。 可以在SushiSwap切换测试网即可体验。https://app.sushi.com/swap

需要大概了解uniswap的合约源码,知道他的闪兑逻辑,Pair池子的概念,池子的定价等

项目前端源代码

https://github.com/Sexy-J/JieSwap

前端网站

部署在免费的服务器https://jieswap-x4uvs6eu-sexy-j.4everland.app/#/swap

目前核心功能 闪兑

支持多路径闪兑,中间路径可能有BNB,USDT,BUSD

支持普通ERC20,燃烧型ERC20 闪兑

支持查看在本网站的交易记录

这三个功能也是项目的难点

多路径

首先要先筛选出所有的路径,然后查询路径中每个池子的reserve,再通过输入或者输出 计算中每一条路径的输入或者输出,选择最优解。

燃烧型ERC20 闪兑

默认使用普通的swap方法,如果普通的swap方法报错,则使用支持燃烧币swap方法再调用一遍。

查看交易记录

当用户进行授权,交易等操作时,一旦得到hash就立马存入localstoage,然后每6秒去查询当前区块,如果当前区块发生变化,则去查询一遍所有的未完成的交易记录

相关文章

20 条评论

虽然不是全套,但是也支持一下

2021-12-30 00:38

写的不错,点赞!!

2021-12-30 12:07

谢谢,有问题在这边留言就好啦

2021-12-30 16:36

怎么联系你?

2022-02-22 23:12
i am duck 回复 wufan

发私信加我v

2022-03-06 02:13

感谢!

2022-04-22 00:25

老师向您请教一下我输入一个币是怎么能得出要兑换的那个币的数量的,还有价格

2022-05-23 11:08
agys 回复 Crypto0xCat

不是全套是什么意思?不能用么?

2022-07-11 23:55
Crypto0xCat 回复 agys

能用啊,但只有swap模块

2022-07-12 09:43
agys 回复 Crypto0xCat

足够了,你想要啥功能给添加上去

2022-07-12 13:06

作者大佬,你这样子写 切换测试网或者其它网络的时候好像不容易吧,为何不把节点、chaimid、配对的合约地址这些放在一个地方呢

2022-07-12 21:34
i am duck 回复 agys

我这是demo,没做完 哈哈

2022-07-12 22:47

这个你得看uniswap的代码 我不好说

2022-07-12 22:48
agys 回复 i am duck

能直接用了吧?我想在测试网走一遍

2022-07-12 23:26
i am duck 回复 agys

应该可以,不过Bug肯定有

2022-07-13 09:27