uniswap 学习笔记

973 阅读1分钟

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)