找网络的网站：https://chainlist.org/ 点一下就可以添加网络到小狐狸中来。 在下载依赖的时候建议使用yarn install node版本切换为16，如果是22会出现问题。

准备合约代码

1.Router合约

https://cn.etherscan.com/address/0x5C69bEe701ef814a2B6a3EDD4B1652CB9cc5aA6f#code

2.工厂合约

https://cn.etherscan.com/address/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2#code

3.WETH合约

https://cn.etherscan.com/address/0x7a250d5630b4cf539739df2c5dacb4c659f2488d#code

4.multicall合约（用来一次性读取大量数据）

https://cn.etherscan.com/address/0x5e227ad1969ea493b43f840cff78d08a6fc17796#code

项目代码仓库：

本文所有相关代码（合约 / SDK / 前端 Interface） 已统一整理在 GitHub 仓库中：big-dudu-mosty/uniswapv2-UI

建议在阅读过程中对照仓库结构一起操作， 可以显著减少踩坑成本。

准备前端代码

1.Interface文件

现在大部分都是V2和V3杂在一块的。我们需要干净的V2版本，找到日期为2020/9/1.

会有标识，下载的时候不要下载错了。

2.SDK准备

SDK是V2和V3分开的，找到对应版本来下载就可以了。不过建议找旧一些的版本，可能会出现兼容问题。2020/8/6这个版本。 <!--StartFragment-->

<!--EndFragment-->

怎么找相关代码？可以Github或者在区块链浏览器上找合订版的开源代码

这里会有主合约名字和编译版本，还有gas优化数。你在remix中编译的时候，要记得对照。

怎么找其他合约？同理，点击地址找合约。

操作

一定要记好自己部署的合约地址！！

1.部署工厂合约

在Remix中编译先开gas优化，不然有时候代码太长他会说超出范围。

我们需要init code hash来是确定 Uniswap V2 交易对（Pair）的合约地址。记得添加这一行代码，不然得不到这个hash。添加好了，在进行编译。

我们首先部署工厂合约，并拿到工厂合约的地址。在这里我们要选择Optimization Enabled的选择要和以太坊浏览器工厂合约开源代码页面的一致。 _feeToSetter是 管理员地址——可以设置哪一个地址接收平台奖励（就是手续费中的0.05%）这个地址大家随意设置，使用到概率不大。

现在部署完毕要记录工厂合约的地址和init code hash

2.修改Router中hash，不要带0x

要保存哈，修改完了之后。一定是修改完了在进行部署！！

3.部署WETH合约，记录地址

4.拿工厂合约和WETH合约的地址进行部署Router合约。

部署Router合约，传入WETH和工厂合约地址。一样的选择部署的时候要选择和源码一样的哪一个哈！

5.修改SDK

找到我们刚刚拉下来的sdk，放到编译器中。

1.修改工厂合约地址和init_code_HASH

需要修改的文件路径：/mnt/c/wyf/more/uniswap v2/ui-uniswap2/v2-sdk-00a1eca9456d37c3d467f56e57a0496d1bf28e40/src/constants.ts

2.修改链ID

把链ID改为我们要部署的链上去。 在这里添加，你需要的链ID就可以（你链叫什么你就取什么名字）。如果你需要多条链，那么你的工厂地址需要变成一个数组来表示或者说一一对应这些链上的工厂合约地址。

3.修改WETH地址

修改WETH合约地址在/uniswapv2-tutorial/src/entities/token.ts 这个地址的修改根据你刚刚添加的链ID来。代币名字自己取，无所谓。

6.修改interface

1.修改路由合约

修改路由合约地址，在 interface-b8c383c20e1a9d2cf29d8becce3e31b69219f1f8/src/constants/index.ts

2.添加链ID

修改supportedChainIds内容，这里你要加上你需要跑的链ID。也就是你在SDK中加的链ID，别数字不一样哈！路径： interface-b8c383c20e1a9d2cf29d8becce3e31b69219f1f8/src/connectors/index.ts

3.通过链ID来加multicall合约地址

在Remix中部署multicall合约拿到地址，来到前端代码中进行修改multicall合约地址。 地址：interface-b8c383c20e1a9d2cf29d8becce3e31b69219f1f8/src/constants/multicall/index.ts 通过链ID来加multicall合约地址。填完了会报错，因为还没有切换到新版的SDK上，不要担心。

4.添加tokenList

Uniswap的tokenList格式： https://app.unpkg.com/@uniswap/default-token-list@2.0.0/files/build/uniswap-default.tokenlist.json 保存一下，等会使用到。 添加代币，按照他的格式添加就可以了。

我们需要对这个list进行修改，并且使用链接进行访问。可以放在github中去，通过raw来读取。找到一个墙内地址来存放地址，确保他是可以被访问到的。 或者可以直接放在项目中，不过如果进行修改token信息。需要前端重新部署。 将tokenlist.json文件内容放在List.ts中，记得是string类型。

5.添加链的访问路径

这里不能只是填二级域名。需要全部地址。 etherscan.io是为了兼容以太坊网络，你如果不需要你就不要加。不加你就是只能访问BSC网络（就是你自己添加的网络）。

7.将项目发布到npm上去

回到SDK中来 Npmjs网址：https://www.npmjs.com/ 流程就是：注册，登录，获得token，修改包名字，发布。

改uniswapv2-tutorial/package.json 将name和version修改为你自己的即可。改为普通包名“wyf-v2-sdk”不要重名，不然发不上去。或者你自己注册作用域（在npm)就可以了。 版本号使用1.0.0. 版本号记得迭代，不然重新发布会出现问题哈！

接下来需要将次sdk发布到npmjs，需要登录，输入账号、密码、邮箱，登录成功之后，执行npm publish命令，即可发布到npmjs，如果出现错误，可能的原因为名字重复，或npm版本不兼容。

npm login 如果在wsl中会出现问题， 在 CLI 模式下会尝试通过浏览器打开下面这个地址 。而wsl没办法做到。就会报错。

我们可以直接手动复制链接，在网页中打开。注册登录。

做到这个步骤这里还是会出现问题，因为你网页登录的信息没有写到代码中，所以他不知道。会一直报错！！ 下面是解决方案 获取npm token到cursor中运行，保证这个账户有被正确登录。 npm set //registry.npmjs.org/:_authToken=你的token

在查看登入是否成功 npm whoami

记得npm install 在进行pubilsh 不然出错

进行npm publish --access public 因为npm要钱才能发私包。成功了！

8.替换Interface中uniswap的SDK

Interface中会有自己的SDK，但是我们需要删掉这个SDK换成我们自己的SDK。 如果这里报错的话，直接修改package.json中的版本号。在进行npm install就可以。修改成 "react-i18next": "^10.13.2", "i18next": "^22.0.0", 当然你一开始进行npm install会报错，也可以这样试一下。 如果一直下载依赖出现问题，可以试一下：npm install --legacy-peer-deps npm remove @uniswap/sdk他不一定是@uniswap/sdk，主要自己看自己的package.json中写了什么。

把我们刚刚发布上去的SDK进行下载到interface中来。下载格式：npm i SDK名字 如果后续要升级：npm i SDK名字 版本号。不需要你在重新发一个SDK包上去。 你要是实在不知道，不确定。就去npmjs中看一下你发布上去的包叫什么。

更新完SDK后会存在于package.json文件中

替换成我们的SDK在代码的import中。替换掉interface/scr文件中的所有。

改完了就可以npm run

9.铸币

我们进行铸币开始添加流动性。在Remix中，我们铸币（要在你自己对应的网络下哈）。获得铸币地址并将这个代币添加到我们的钱包中。

把这两个代币进行添加流动性。授权，等待交易完成。就可以看见池子里面的LP。

10.兑换

可以看见其实代币是有增减的

11.撤销池子

如何让他人使用我们的uniswap网页进行交易？

将我们的interface文件代码上传到我们的Github上去

我们进行vercel中进行发布 进行创建新的项目

选择你需要发布的github上的项目

在进行deploy

这个时候deploy会出现一些问题。这是因为我们使用的代码太老了，无法使用很新的版本。比如 Error: error:0308010C:digital envelope routines::unsupported ● 进入左侧菜单：Settings → Environment Variables ● 添加一个新的环境变量： ● Key：NODE_OPTIONS ● Value：--openssl-legacy-provider ● Environment：选择 Production 和 Preview（都勾上） ● 然后点右上角的 "Save" 保存变量 <!--StartFragment-->

<!--EndFragment-->

如果你想要别人可以访问你的链接， 你需要关闭这个地方。否则别人无法访问！！ 这个选择在设置中去找他！！