Uniswap study notes

Swap page:

1 Obtain two tokens to be traded using the URL parameter: useDefaultsFromURLSearch()

2 Use currencyId to generate a currency and actually return a UnisDK Token in currecy.

useCurrency(currencyId: string):Currency

3 Obtain all tokens and return them in map mode.

function useAllTokens(): { [address: string]: Token }

The default from the const GEMINI_LIST = ‘www.gemini.com/uniswap/man… ‘fetch the token list.

The obtained token list is then grouped by chainId. Each group is a map of address -> tokens.

4 If the tokens obtained by the URL are not in Defult Tokens (tokens obtained in the second step), display warning Modal and guide the user to add a new ToeknTokenWarningModal.

5 Run the useActiveWeb3React command to obtain the wallet information, Acccount, and ChaiId.

The main changes to the UI are theme. Under SRC/Theme, the main changes include media query, color definition, layout grid, dark theme, page elements, and fixed positioning element styles.

const theme = useContext(ThemeContext)

7 Check whether the WALLET is disconnected

useWalletModalToggle

8 Set the expert mode

useExpertModeManager

9 Set the slide point

useUserSlippageTolerance

10 Obtain the independentField from state, typedValue, Recipient: Input, input value, transaction recipient.

11 Obtain the derivatives transaction information useDerivedSwapInfo

  const {
    v1Trade,
    v2Trade,
    currencyBalances,
    parsedAmount,
    currencies,
    inputError: swapInputError
  } = useDerivedSwapInfo()
Copy the code

12 Trade path in trade.route, trade is the v1Trade or v2Trade in obtaining trade derivative information

13 Check whether to display the maximum quantity: atMaxAmountInput

14 Run swap: EstimateGas [methodName]; contract[methodName]; contract[methodName]; AddTransaction is used to display the transaction progress in the upper right corner.

const swapCalls = useSwapCallArguments(trade, allowedSlippage, recipientAddressOrName)
Copy the code