Interface 是 User Interface 的含义,此为Uniswap网站的代码,包括token交易,添加和移除流动性等功能。
代码分析使用版本tag 3.2.7
主要使用的技术栈
- 搭建框架
React
,React-dom
,React-router-dom
- 状态管理
react-redux
,@reduxjs/toolkit
, - Web3
ethers
,typechain
,@web3-react
- Uniswap相关依赖
sdk-core
,v2-core
,v2-periphery
,token-list
,liquidity-staker
... - 缓存管理
workbox
- UI 样式、动效、组件、图标、字体、数据展示、语言国际化、交互事件、色彩、文档等
- 工具类
了解详细的技术栈图示请戳这里 👉Interface 技术栈详细图示
从状态管理(State)的角度来看,主要分为六个部分:
- UserSate 用户的钱包数据,使用习惯,自定义token和自定义交易对等信息
- User Interface 用户的交互界面状态,主要是 swap 和 添加/删除流动性 的操作产生的数据变化
- Multicall 使用链上的Multicall合约进行批量请求的模块,其具备以下特点:
- 针对请求的三个要素(合约地址/调用方法/调用参数)进行归档并建立追踪机制
- 请求失败自动重连
- 监听相关状态的改变(如区块高度,chainid变化),及时取消无用的请求,及时更新过期的数据
- 批量化请求
- 将不同请求合并为一个个批次同时发送,节省gas费用
- 保证每个请求批次不会超过最大gas限制
- 这也是相对复杂的一个模块
- 针对请求的三个要素(合约地址/调用方法/调用参数)进行归档并建立追踪机制
- TokenList 从其他服务器获取交易用的token列表,用户可自定义获取的节点,如 Gemini Token List
- Govemance 社区治理模块
- Application 存储当前区块高度,弹窗数据
了解详细的状态数据结构图请戳这里 👉 状态数据的结构-详细
- Multicall Contract
- State 结构
- Reducer 初始值和规定触发state事件的方法
- Updater 更新state的具体逻辑
- Hooks 页面中实际使用Multicall模块的钩子函数
详细解析请戳这里 👉 Multicall模块解析
追踪交互动作与状态数据变化的关系,可以帮助我们更好的理解程序运行的逻辑
- 添加自定义的token流程
- Swap交易流程
- WatchingTransaction 发送交易,及监听和更新的流程
- Approve Token流程
- PoolList 索引用户池子的流程
- AddLiquidity 添加流动性的流程(add/mint)
- RemoveLiquidity 移除流动性的流程
详细解析请戳这里 👉 V2的用户交互流程及状态变化
- Swap
- Transaction
- PoolList
- AddLiquidity
- RemoveLiquidity
详细解析请戳这里 👉 V2 interface 代码解析
请戳这里 👉 辅助数据列表
- UniswapV2Interface 源码地址:https://github.com/Uniswap/uniswap-interface/tree/v3.2.7
- [催眠大师]手把手教你开发去中心化交易所-Uniswap交易所开发课程:https://www.youtube.com/watch?v=38mVbslZpS4