uniswap 学习笔记
swap 页面:
1 通过url参数获取两个待交易的token: useDefaultsFromURLSearch()
2 通过currencyId生成一个currency,实际返回一个unisdk Token, 因为Token 属于currecy。
useCurrency(currencyId: string):Currency
3 获取所有token,以map的方式返回。
function useAllTokens(): { [address: string]: Token }
默认从 const GEMINI_LIST = 'www.gemini.com/uniswap/man…' 取到token list。
然后根据获得的 token list 按照chainId进行分组,每一组都是address -> Token 的map。
4 如果url获取的Token不在defult tokens(第二步获得的token)中,就显示warning modal,并引导用户加入新的ToeknTokenWarningModal。
5 通过useActiveWeb3React 获取连接wallet信息,Acccount, ChaiId等。
6 样式是单独引入的,改UI的时候主要改动theme,在src/theme文件下,包括媒体查询,颜色定义,布局网格,暗黑主题,页面元素,fixed定位元素样式。
const theme = useContext(ThemeContext)
7 监听wallet是否断联
useWalletModalToggle
8 用户设置专家模式
useExpertModeManager
9 设置滑点
useUserSlippageTolerance
10 通过state获取 independentField, typedValue, recipient: 输入的input,输入的数值,交易接收者。
11 获取衍生交易信息 useDerivedSwapInfo
const {
v1Trade,
v2Trade,
currencyBalances,
parsedAmount,
currencies,
inputError: swapInputError
} = useDerivedSwapInfo()
12 交易路径在 trade.route, trade 是获取交易衍生信息中的 v1Trade 或者 v2Trade
13 是否显示最大数量按钮:atMaxAmountInput
14 执行swap:swapCallback,显示遍历根据trade运算出来的swapCalls,通过contract.estimateGas[methodName] 的方式试执行,如果成功执行,再用contract[methodName] 进行上链执行。addTransaction 用来在右上角显示交易进度。
const swapCalls = useSwapCallArguments(trade, allowedSlippage, recipientAddressOrName)