TS migrations and commit hash in code link (#730)

* TypeScript in the utils directory, README fixes * Remove unused methods * Added unnecessary space * Some env variable cleanup * Bug in change * Another file to ts * App.tsx * Header and Footer to tsx * Few more TS migrations and add a commit hash title to the uni icon * Few more TS migrations and put commit hash in code link * Splitting up files * Splitting up files (merged dark mode changes)
2020-05-07 18:52:26 -04:00 · 2020-05-07 18:52:26 -04:00 · 7fcecc22d9
commit 7fcecc22d9
parent 404d7a60e5
13 changed files with 439 additions and 396 deletions
--- a/package.json
+++ b/package.json
@ -24,6 +24,7 @@
    "@web3-react/walletconnect-connector": "^6.0.2",
    "@web3-react/walletlink-connector": "^6.0.2",
    "copy-to-clipboard": "^3.2.0",
+    "cross-env": "^7.0.2",
    "escape-string-regexp": "^2.0.0",
    "ethers": "^4.0.44",
    "history": "^4.9.0",
@ -51,8 +52,8 @@
    "use-media": "^1.4.0"
  },
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "cross-env REACT_APP_GIT_COMMIT_HASH=$(git show -s --format=%H) react-scripts start",
+    "build": "cross-env REACT_APP_GIT_COMMIT_HASH=$(git show -s --format=%H) react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint:base": "yarn eslint './src/**/*.{js,jsx}'",
@ -80,4 +81,4 @@
    ]
  },
  "license": "GPL-3.0-or-later"
-}
+}
--- a/src/components/ExchangePage/index.tsx
+++ b/src/components/ExchangePage/index.tsx
@ -1,15 +1,28 @@
 import React, { useState, useReducer, useCallback, useEffect } from 'react'
-import styled from 'styled-components'
 import { ethers } from 'ethers'
 import { withRouter } from 'react-router-dom'
 import { parseUnits, parseEther } from '@ethersproject/units'
-import { WETH, TradeType, Pair, Trade, TokenAmount, JSBI, Percent } from '@uniswap/sdk'
-
+import { Field, initializeSwapState, reducer, SwapAction } from './swap-store'
+import { WETH, TradeType, Pair, Trade, TokenAmount, JSBI, Percent, Fraction } from '@uniswap/sdk'
+import {
+  AdvancedDropwdown,
+  ArrowWrapper,
+  BottomGrouping,
+  Dots,
+  ErrorText,
+  FixedBottom,
+  InputGroup,
+  MaxButton,
+  SectionBreak,
+  StyledBalanceMaxMini,
+  StyledNumerical,
+  TruncatedText,
+  Wrapper
+} from './styleds'
 import Copy from '../AccountDetails/Copy'
 import TokenLogo from '../TokenLogo'
 import SlippageTabs from '../SlippageTabs'
 import QuestionHelper from '../Question'
-import NumericalInput from '../NumericalInput'
 import AddressInputPanel from '../AddressInputPanel'
 import ConfirmationModal from '../ConfirmationModal'
 import CurrencyInputPanel from '../CurrencyInputPanel'
@ -37,263 +50,17 @@ import { getRouterContract, calculateGasMargin, getProviderOrSigner, getEthersca
 import { useLocalStorageTokens } from '../../contexts/LocalStorage'
 import { useDarkModeManager } from '../../contexts/LocalStorage'

-const Wrapper = styled.div`
-  position: relative;
-`
-
-const ArrowWrapper = styled.div`
-  padding: 2px;
-  border-radius: 12px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  :hover {
-    cursor: pointer;
-    opacity: 0.8;
-  }
-`
-
-const FixedBottom = styled.div`
-  position: absolute;
-  margin-top: 1.5rem;
-  width: 100%;
-  margin-bottom: 40px;
-`
-
-const AdvancedDropwdown = styled.div`
-  position: absolute;
-  margin-top: -12px;
-  max-width: 455px;
-  width: 100%;
-  margin-bottom: 100px;
-  padding: 10px 0;
-  padding-top: 36px;
-  border-bottom-left-radius: 20px;
-  border-bottom-right-radius: 20px;
-  color: ${({ theme }) => theme.text2};
-  background-color: ${({ theme }) => theme.advancedBG};
-  color: ${({ theme }) => theme.text2};
-  z-index: -1;
-`
-
-const SectionBreak = styled.div`
-  height: 1px;
-  width: 100%;
-  background-color: ${({ theme }) => theme.bg3};
-`
-
-const BottomGrouping = styled.div`
-  margin-top: 12px;
-  position: relative;
-`
-
-const ErrorText = styled(Text)`
-  color: ${({ theme, warningLow, warningMedium, warningHigh }) =>
-    warningHigh ? theme.red1 : warningMedium ? theme.yellow2 : warningLow ? theme.green1 : theme.text1};
-`
-
-const InputGroup = styled(AutoColumn)`
-  position: relative;
-  padding: 40px 0 20px 0;
-`
-
-const StyledNumerical = styled(NumericalInput)`
-  text-align: center;
-  font-size: 48px;
-  font-weight: 500px;
-  width: 100%;
-
-  ::placeholder {
-    color: ${({ theme }) => theme.text4};
-  }
-`
-
-const MaxButton = styled.button`
-  position: absolute;
-  right: 70px;
-  padding: 0.5rem 0.5rem;
-  background-color: ${({ theme }) => theme.blue5};
-  border: 1px solid ${({ theme }) => theme.blue5};
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  cursor: pointer;
-  margin-right: 0.5rem;
-  color: ${({ theme }) => theme.blue1};
-  :hover {
-    border: 1px solid ${({ theme }) => theme.blue1};
-  }
-  :focus {
-    border: 1px solid ${({ theme }) => theme.blue1};
-    outline: none;
-  }
-`
-
-const StyledBalanceMaxMini = styled.button`
-  height: 24px;
-  background-color: ${({ theme }) => theme.bg2};
-  border: none;
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 400;
-  margin-left: 6px;
-  cursor: pointer;
-  color: ${({ theme }) => theme.text2};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: fit-content;
-  float: right;
-
-  :hover {
-    background-color: ${({ theme }) => theme.bg3};
-
-    /* border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)}; */
-  }
-  :focus {
-    background-color: ${({ theme }) => theme.bg3};
-    /* border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)}; */
-    outline: none;
-  }
-`
-
-const TruncatedText = styled(Text)`
-  text-overflow: ellipsis;
-  width: 220px;
-  overflow: hidden;
-`
-
-// styles
-const Dots = styled.span`
-  &::after {
-    display: inline-block;
-    animation: ellipsis 1.25s infinite;
-    content: '.';
-    width: 1em;
-    text-align: left;
-  }
-  @keyframes ellipsis {
-    0% {
-      content: '.';
-    }
-    33% {
-      content: '..';
-    }
-    66% {
-      content: '...';
-    }
-  }
-`
-
-enum Field {
-  INPUT,
-  OUTPUT
-}
-
-interface SwapState {
-  independentField: Field
-  typedValue: string
-  [Field.INPUT]: {
-    address: string | undefined
-  }
-  [Field.OUTPUT]: {
-    address: string | undefined
-  }
-}
-
-function initializeSwapState({ inputTokenAddress, outputTokenAddress, typedValue, independentField }): SwapState {
-  return {
-    independentField: independentField,
-    typedValue: typedValue,
-    [Field.INPUT]: {
-      address: inputTokenAddress
-    },
-    [Field.OUTPUT]: {
-      address: outputTokenAddress
-    }
-  }
-}
-
-enum SwapAction {
-  SELECT_TOKEN,
-  SWITCH_TOKENS,
-  TYPE
-}
-
-interface Payload {
-  [SwapAction.SELECT_TOKEN]: {
-    field: Field
-    address: string
-  }
-  [SwapAction.SWITCH_TOKENS]: undefined
-  [SwapAction.TYPE]: {
-    field: Field
-    typedValue: string
-  }
-}
-
-function reducer(
-  state: SwapState,
-  action: {
-    type: SwapAction
-    payload: Payload[SwapAction]
-  }
-): SwapState {
-  switch (action.type) {
-    case SwapAction.SELECT_TOKEN: {
-      const { field, address } = action.payload as Payload[SwapAction.SELECT_TOKEN]
-      const otherField = field === Field.INPUT ? Field.OUTPUT : Field.INPUT
-      if (address === state[otherField].address) {
-        // the case where we have to swap the order
-        return {
-          ...state,
-          independentField: state.independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT,
-          [field]: { address },
-          [otherField]: { address: state[field].address }
-        }
-      } else {
-        // the normal case
-        return {
-          ...state,
-          [field]: { address }
-        }
-      }
-    }
-    case SwapAction.SWITCH_TOKENS: {
-      return {
-        ...state,
-        independentField: state.independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT,
-        [Field.INPUT]: { address: state[Field.OUTPUT].address },
-        [Field.OUTPUT]: { address: state[Field.INPUT].address }
-      }
-    }
-    case SwapAction.TYPE: {
-      const { field, typedValue } = action.payload as Payload[SwapAction.TYPE]
-      return {
-        ...state,
-        independentField: field,
-        typedValue
-      }
-    }
-    default: {
-      throw Error
-    }
-  }
-}
-
 function hex(value: JSBI) {
  return ethers.utils.bigNumberify(value.toString())
 }

-const SWAP_TYPE = {
-  EXACT_TOKENS_FOR_TOKENS: 'EXACT_TOKENS_FOR_TOKENS',
-  EXACT_TOKENS_FOR_ETH: 'EXACT_TOKENS_FOR_ETH',
-  EXACT_ETH_FOR_TOKENS: 'EXACT_ETH_FOR_TOKENS',
-  TOKENS_FOR_EXACT_TOKENS: 'TOKENS_FOR_EXACT_TOKENS',
-  TOKENS_FOR_EXACT_ETH: 'TOKENS_FOR_EXACT_ETH',
-  ETH_FOR_EXACT_TOKENS: 'ETH_FOR_EXACT_TOKENS'
+enum SwapType {
+  EXACT_TOKENS_FOR_TOKENS,
+  EXACT_TOKENS_FOR_ETH,
+  EXACT_ETH_FOR_TOKENS,
+  TOKENS_FOR_EXACT_TOKENS,
+  TOKENS_FOR_EXACT_ETH,
+  ETH_FOR_EXACT_TOKENS
 }

 const GAS_MARGIN = ethers.utils.bigNumberify(1000)
@ -333,21 +100,21 @@ function ExchangePage({ sendingInput = false, history, params }) {
      typedValue:
        params.inputTokenAddress && !params.outputTokenAddress
          ? params.inputTokenAmount
-            ? params.inputTokenAmount
-            : ''
+          ? params.inputTokenAmount
+          : ''
          : !params.inputTokenAddress && params.outputTokenAddress
          ? params.outputTokenAmount
            ? params.outputTokenAmount
            : ''
          : params.inputTokenAddress && params.outputTokenAddress
-          ? params.inputTokenAmount
            ? params.inputTokenAmount
+              ? params.inputTokenAmount
+              : ''
            : ''
-          : ''
-          ? ''
-          : ''
-          ? ''
-          : ''
+              ? ''
+              : ''
+                ? ''
+                : ''
    },
    initializeSwapState
  )
@ -441,7 +208,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
      !!route && !!parsedAmounts[independentField]
        ? new Trade(route, parsedAmounts[independentField], tradeType)
        : undefined
-  } catch (error) {}
+  } catch (error) {
+  }

  const slippageFromTrade: Percent = trade && trade.slippage

@ -524,10 +292,11 @@ function ExchangePage({ sendingInput = false, history, params }) {
      WETH[chainId] &&
      JSBI.greaterThan(userBalances[Field.INPUT].raw, isWETH(tokens[Field.INPUT]) ? MIN_ETHER.raw : JSBI.BigInt(0))
        ? isWETH(tokens[Field.INPUT])
-          ? userBalances[Field.INPUT].subtract(MIN_ETHER)
-          : userBalances[Field.INPUT]
+        ? userBalances[Field.INPUT].subtract(MIN_ETHER)
+        : userBalances[Field.INPUT]
        : undefined
-  } catch {}
+  } catch {
+  }

  const atMaxAmountInput: boolean =
    !!maxAmountInput && !!parsedAmounts[Field.INPUT]
@ -544,22 +313,22 @@ function ExchangePage({ sendingInput = false, history, params }) {
      ? JSBI.equal(maxAmountOutput.raw, parsedAmounts[Field.OUTPUT].raw)
      : undefined

-  function getSwapType(): string {
+  function getSwapType(): SwapType {
    if (tradeType === TradeType.EXACT_INPUT) {
      if (tokens[Field.INPUT] === WETH[chainId]) {
-        return SWAP_TYPE.EXACT_ETH_FOR_TOKENS
+        return SwapType.EXACT_ETH_FOR_TOKENS
      } else if (tokens[Field.OUTPUT] === WETH[chainId]) {
-        return SWAP_TYPE.EXACT_TOKENS_FOR_ETH
+        return SwapType.EXACT_TOKENS_FOR_ETH
      } else {
-        return SWAP_TYPE.EXACT_TOKENS_FOR_TOKENS
+        return SwapType.EXACT_TOKENS_FOR_TOKENS
      }
    } else if (tradeType === TradeType.EXACT_OUTPUT) {
      if (tokens[Field.INPUT] === WETH[chainId]) {
-        return SWAP_TYPE.ETH_FOR_EXACT_TOKENS
+        return SwapType.ETH_FOR_EXACT_TOKENS
      } else if (tokens[Field.OUTPUT] === WETH[chainId]) {
-        return SWAP_TYPE.TOKENS_FOR_EXACT_ETH
+        return SwapType.TOKENS_FOR_EXACT_ETH
      } else {
-        return SWAP_TYPE.TOKENS_FOR_EXACT_TOKENS
+        return SwapType.TOKENS_FOR_EXACT_TOKENS
      }
    }
  }
@ -577,12 +346,12 @@ function ExchangePage({ sendingInput = false, history, params }) {
      Field.INPUT === independentField
        ? parsedAmounts[Field.INPUT]
        : calculateSlippageAmount(parsedAmounts[Field.INPUT])?.[0] &&
-          new TokenAmount(tokens[Field.INPUT], calculateSlippageAmount(parsedAmounts[Field.INPUT])?.[1]),
+        new TokenAmount(tokens[Field.INPUT], calculateSlippageAmount(parsedAmounts[Field.INPUT])?.[1]),
    [Field.OUTPUT]:
      Field.OUTPUT === independentField
        ? parsedAmounts[Field.OUTPUT]
        : calculateSlippageAmount(parsedAmounts[Field.OUTPUT])?.[0] &&
-          new TokenAmount(tokens[Field.INPUT], calculateSlippageAmount(parsedAmounts[Field.OUTPUT])?.[0])
+        new TokenAmount(tokens[Field.INPUT], calculateSlippageAmount(parsedAmounts[Field.OUTPUT])?.[0])
  }

  const showInputApprove: boolean =
@ -603,11 +372,11 @@ function ExchangePage({ sendingInput = false, history, params }) {
          addTransaction(
            response,
            'Send ' +
-              parsedAmounts[Field.INPUT]?.toSignificant(3) +
-              ' ' +
-              tokens[Field.INPUT]?.symbol +
-              ' to ' +
-              recipient
+            parsedAmounts[Field.INPUT]?.toSignificant(3) +
+            ' ' +
+            tokens[Field.INPUT]?.symbol +
+            ' to ' +
+            recipient
          )
          setPendingConfirmation(false)
        })
@ -632,11 +401,11 @@ function ExchangePage({ sendingInput = false, history, params }) {
          addTransaction(
            response,
            'Send ' +
-              parsedAmounts[Field.INPUT]?.toSignificant(3) +
-              ' ' +
-              tokens[Field.INPUT]?.symbol +
-              ' to ' +
-              recipient
+            parsedAmounts[Field.INPUT]?.toSignificant(3) +
+            ' ' +
+            tokens[Field.INPUT]?.symbol +
+            ' to ' +
+            recipient
          )
          setPendingConfirmation(false)
        })
@ -659,9 +428,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
    let estimate: Function, method: Function, args: any[], value: ethers.utils.BigNumber
    const deadlineFromNow: number = Math.ceil(Date.now() / 1000) + deadline

-    const swapType = getSwapType()
-    switch (swapType) {
-      case SWAP_TYPE.EXACT_TOKENS_FOR_TOKENS:
+    switch (getSwapType()) {
+      case SwapType.EXACT_TOKENS_FOR_TOKENS:
        estimate = routerContract.estimate.swapExactTokensForTokens
        method = routerContract.swapExactTokensForTokens
        args = [
@ -673,7 +441,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
        ]
        value = ethers.constants.Zero
        break
-      case SWAP_TYPE.TOKENS_FOR_EXACT_TOKENS:
+      case SwapType.TOKENS_FOR_EXACT_TOKENS:
        estimate = routerContract.estimate.swapTokensForExactTokens
        method = routerContract.swapTokensForExactTokens
        args = [
@ -685,7 +453,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
        ]
        value = ethers.constants.Zero
        break
-      case SWAP_TYPE.EXACT_ETH_FOR_TOKENS:
+      case SwapType.EXACT_ETH_FOR_TOKENS:
        estimate = routerContract.estimate.swapExactETHForTokens
        method = routerContract.swapExactETHForTokens
        args = [
@ -696,7 +464,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
        ]
        value = hex(slippageAdjustedAmounts[Field.INPUT].raw)
        break
-      case SWAP_TYPE.TOKENS_FOR_EXACT_ETH:
+      case SwapType.TOKENS_FOR_EXACT_ETH:
        estimate = routerContract.estimate.swapTokensForExactETH
        method = routerContract.swapTokensForExactETH
        args = [
@ -708,7 +476,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
        ]
        value = ethers.constants.Zero
        break
-      case SWAP_TYPE.EXACT_TOKENS_FOR_ETH:
+      case SwapType.EXACT_TOKENS_FOR_ETH:
        estimate = routerContract.estimate.swapExactTokensForETH
        method = routerContract.swapExactTokensForETH
        args = [
@ -720,7 +488,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
        ]
        value = ethers.constants.Zero
        break
-      case SWAP_TYPE.ETH_FOR_EXACT_TOKENS:
+      case SwapType.ETH_FOR_EXACT_TOKENS:
        estimate = routerContract.estimate.swapETHForExactTokens
        method = routerContract.swapETHForExactTokens
        args = [
@ -746,13 +514,13 @@ function ExchangePage({ sendingInput = false, history, params }) {
        addTransaction(
          response,
          'Swap ' +
-            slippageAdjustedAmounts?.[Field.INPUT]?.toSignificant(3) +
-            ' ' +
-            tokens[Field.INPUT]?.symbol +
-            ' for ' +
-            slippageAdjustedAmounts?.[Field.OUTPUT]?.toSignificant(3) +
-            ' ' +
-            tokens[Field.OUTPUT]?.symbol
+          slippageAdjustedAmounts?.[Field.INPUT]?.toSignificant(3) +
+          ' ' +
+          tokens[Field.INPUT]?.symbol +
+          ' for ' +
+          slippageAdjustedAmounts?.[Field.OUTPUT]?.toSignificant(3) +
+          ' ' +
+          tokens[Field.OUTPUT]?.symbol
        )
        setPendingConfirmation(false)
      })
@ -908,7 +676,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
            <Text fontSize={36} fontWeight={500}>
              {parsedAmounts[Field.INPUT]?.toSignificant(6)} {tokens[Field.INPUT]?.symbol}
            </Text>
-            <TokenLogo address={tokens[Field.INPUT]?.address} size={'30px'} />
+            <TokenLogo address={tokens[Field.INPUT]?.address} size={'30px'}/>
          </RowBetween>
          <TYPE.darkGray fontSize={20}>To</TYPE.darkGray>
          {ENS ? (
@ -920,7 +688,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
                    {recipient?.slice(0, 8)}...{recipient?.slice(34, 42)}↗
                  </TYPE.blue>
                </Link>
-                <Copy toCopy={recipient} />
+                <Copy toCopy={recipient}/>
              </AutoRow>
            </AutoColumn>
          ) : (
@ -930,7 +698,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
                  {recipient?.slice(0, 6)}...{recipient?.slice(36, 42)}↗
                </TYPE.blue>
              </Link>
-              <Copy toCopy={recipient} />
+              <Copy toCopy={recipient}/>
            </AutoRow>
          )}
        </AutoColumn>
@ -942,7 +710,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
        <AutoColumn gap="lg" style={{ marginTop: '40px' }}>
          <AutoColumn gap="sm">
            <AutoRow gap="10px">
-              <TokenLogo address={tokens[Field.OUTPUT]?.address} size={'30px'} />
+              <TokenLogo address={tokens[Field.OUTPUT]?.address} size={'30px'}/>
              <Text fontSize={36} fontWeight={500}>
                {slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(4)} {tokens[Field.OUTPUT]?.symbol}
              </Text>
@ -970,14 +738,14 @@ function ExchangePage({ sendingInput = false, history, params }) {
              {/* {!!slippageAdjustedAmounts[Field.INPUT] && slippageAdjustedAmounts[Field.INPUT].toSignificant(6)} */}
            </TruncatedText>
            <RowFixed gap="4px">
-              <TokenLogo address={tokens[Field.INPUT]?.address} size={'24px'} />
+              <TokenLogo address={tokens[Field.INPUT]?.address} size={'24px'}/>
              <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
                {tokens[Field.INPUT]?.symbol || ''}
              </Text>
            </RowFixed>
          </RowBetween>
          <RowFixed>
-            <ArrowDown size="16" color={theme(isDark).text2} />
+            <ArrowDown size="16" color={theme(isDark).text2}/>
          </RowFixed>
          <RowBetween align="flex-end">
            <TruncatedText fontSize={24} fontWeight={500} color={warningHigh ? theme(isDark).red1 : ''}>
@ -986,7 +754,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
              {/* {!!slippageAdjustedAmounts[Field.OUTPUT] && slippageAdjustedAmounts[Field.OUTPUT].toSignificant(6)} */}
            </TruncatedText>
            <RowFixed gap="4px">
-              <TokenLogo address={tokens[Field.OUTPUT]?.address} size={'24px'} />
+              <TokenLogo address={tokens[Field.OUTPUT]?.address} size={'24px'}/>
              <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
                {tokens[Field.OUTPUT]?.symbol || ''}
              </Text>
@ -1046,17 +814,17 @@ function ExchangePage({ sendingInput = false, history, params }) {
                >
                  {pair && showInverted
                    ? route.midPrice.invert().toSignificant(6) +
-                      ' ' +
-                      tokens[Field.INPUT]?.symbol +
-                      ' / ' +
-                      tokens[Field.OUTPUT]?.symbol
+                    ' ' +
+                    tokens[Field.INPUT]?.symbol +
+                    ' / ' +
+                    tokens[Field.OUTPUT]?.symbol
                    : route.midPrice.toSignificant(6) +
-                      ' ' +
-                      tokens[Field.OUTPUT]?.symbol +
-                      ' / ' +
-                      tokens[Field.INPUT]?.symbol}
+                    ' ' +
+                    tokens[Field.OUTPUT]?.symbol +
+                    ' / ' +
+                    tokens[Field.INPUT]?.symbol}
                  <StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
-                    <Repeat size={14} />
+                    <Repeat size={14}/>
                  </StyledBalanceMaxMini>
                </Text>
              </RowBetween>
@ -1066,7 +834,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
                <TYPE.black fontSize={14} fontWeight={400}>
                  {independentField === Field.INPUT ? (sending ? 'Min sent' : 'Minimum received') : 'Maximum sold'}
                </TYPE.black>
-                <QuestionHelper text="A boundary is set so you are protected from large price movements after you submit your trade." />
+                <QuestionHelper
+                  text="A boundary is set so you are protected from large price movements after you submit your trade."/>
              </RowFixed>
              <RowFixed>
                <TYPE.black fontSize={14}>
@ -1077,10 +846,10 @@ function ExchangePage({ sendingInput = false, history, params }) {
                        : slippageAdjustedAmounts[Field.OUTPUT]?.toFixed(5)
                      : '-'
                    : slippageAdjustedAmounts[Field.INPUT]
-                    ? slippageAdjustedAmounts[Field.INPUT]?.toFixed(5) === '0.00000'
-                      ? '<0.00001'
-                      : slippageAdjustedAmounts[Field.INPUT]?.toFixed(5)
-                    : '-'}
+                      ? slippageAdjustedAmounts[Field.INPUT]?.toFixed(5) === '0.00000'
+                        ? '<0.00001'
+                        : slippageAdjustedAmounts[Field.INPUT]?.toFixed(5)
+                      : '-'}
                </TYPE.black>
                {parsedAmounts[Field.OUTPUT] && parsedAmounts[Field.INPUT] && (
                  <TYPE.black fontSize={14} marginLeft={'4px'}>
@ -1096,7 +865,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
                <TYPE.black color={theme(isDark).text1} fontSize={14} fontWeight={400}>
                  Price impact
                </TYPE.black>
-                <QuestionHelper text="The difference between the market price and your price due to trade size." />
+                <QuestionHelper text="The difference between the market price and your price due to trade size."/>
              </RowFixed>
              <ErrorText
                fontWeight={500}
@ -1117,7 +886,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
                <TYPE.black fontSize={14} fontWeight={400}>
                  Liquidity Provider Fee
                </TYPE.black>
-                <QuestionHelper text="A portion of each trade (0.3%) goes to liquidity providers to incentivize liquidity on the protocol." />
+                <QuestionHelper
+                  text="A portion of each trade (0.3%) goes to liquidity providers to incentivize liquidity on the protocol."/>
              </RowFixed>
              <TYPE.black fontSize={14}>
                {feeTimesInputFormatted
@ -1139,7 +909,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
    }
  }

-  const PriceBar = function() {
+  const PriceBar = function () {
    return (
      <AutoRow justify="space-between">
        <AutoColumn justify="center">
@ -1186,7 +956,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
      ? `Sending ${parsedAmounts[Field.OUTPUT]?.toSignificant(6)} ${tokens[Field.OUTPUT]?.symbol} to ${recipient}`
      : `Sending ${parsedAmounts[Field.INPUT]?.toSignificant(6)} ${tokens[Field.INPUT]?.symbol} to ${recipient}`
    : ` Swapping ${parsedAmounts[Field.INPUT]?.toSignificant(6)} ${tokens[Field.INPUT]?.symbol} for ${parsedAmounts[
-        Field.OUTPUT
+      Field.OUTPUT
      ]?.toSignificant(6)} ${tokens[Field.OUTPUT]?.symbol}`

  function _onTokenSelect(address: string) {
@ -1241,7 +1011,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
                Max
              </MaxButton>
            )}
-            <StyledNumerical value={formattedAmounts[Field.INPUT]} onUserInput={val => onUserInput(Field.INPUT, val)} />
+            <StyledNumerical value={formattedAmounts[Field.INPUT]} onUserInput={val => onUserInput(Field.INPUT, val)}/>
            <CurrencyInputPanel
              field={Field.INPUT}
              value={formattedAmounts[Field.INPUT]}
@ -1287,7 +1057,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
              <ColumnCenter>
                <RowBetween padding="0 12px">
                  <ArrowWrapper onClick={onSwapTokens}>
-                    <ArrowDown size="16" color={theme(isDark).text2} onClick={onSwapTokens} />
+                    <ArrowDown size="16" color={theme(isDark).text2} onClick={onSwapTokens}/>
                  </ArrowWrapper>
                  <StyledBalanceMaxMini onClick={() => setSendingWithSwap(false)} style={{ marginRight: '0px' }}>
                    <TYPE.blue>Remove Swap</TYPE.blue>
@ -1325,7 +1095,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
            />
            {sendingWithSwap && (
              <RowBetween padding="0 12px">
-                <ArrowDown size="16" />
+                <ArrowDown size="16"/>
              </RowBetween>
            )}
          </>
@ -1357,7 +1127,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
        {!noRoute && tokens[Field.OUTPUT] && tokens[Field.INPUT] && (
          <Card padding={advanced ? '.25rem 1.25rem 0 .75rem' : '.25rem .7rem .25rem 1.25rem'} borderRadius={'20px'}>
            {advanced ? (
-              <PriceBar />
+              <PriceBar/>
            ) : (
              <AutoColumn gap="4px">
                {' '}
@ -1373,17 +1143,17 @@ function ExchangePage({ sendingInput = false, history, params }) {
                  >
                    {pair && showInverted
                      ? route.midPrice.invert().toSignificant(6) +
-                        ' ' +
-                        tokens[Field.INPUT]?.symbol +
-                        ' per ' +
-                        tokens[Field.OUTPUT]?.symbol
+                      ' ' +
+                      tokens[Field.INPUT]?.symbol +
+                      ' per ' +
+                      tokens[Field.OUTPUT]?.symbol
                      : route.midPrice.toSignificant(6) +
-                        ' ' +
-                        tokens[Field.OUTPUT]?.symbol +
-                        ' per ' +
-                        tokens[Field.INPUT]?.symbol}
+                      ' ' +
+                      tokens[Field.OUTPUT]?.symbol +
+                      ' per ' +
+                      tokens[Field.INPUT]?.symbol}
                    <StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
-                      <Repeat size={14} />
+                      <Repeat size={14}/>
                    </StyledBalanceMaxMini>
                  </Text>
                </RowBetween>
@ -1403,7 +1173,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
                            : priceSlippage.toFixed(4) + '%'
                          : '-'}{' '}
                      </ErrorText>
-                      <QuestionHelper text="The difference between the market price and your quoted price due to trade size." />
+                      <QuestionHelper
+                        text="The difference between the market price and your quoted price due to trade size."/>
                    </RowFixed>
                  </RowBetween>
                )}
@ -1451,22 +1222,22 @@ function ExchangePage({ sendingInput = false, history, params }) {
              {!account
                ? 'Connect Wallet'
                : generalError
-                ? generalError
-                : inputError
-                ? inputError
-                : outputError
-                ? outputError
-                : recipientError
-                ? recipientError
-                : tradeError
-                ? tradeError
-                : warningHigh
-                ? sendingWithSwap
-                  ? 'Send Anyway'
-                  : 'Swap Anyway'
-                : sending
-                ? 'Send'
-                : 'Swap'}
+                  ? generalError
+                  : inputError
+                    ? inputError
+                    : outputError
+                      ? outputError
+                      : recipientError
+                        ? recipientError
+                        : tradeError
+                          ? tradeError
+                          : warningHigh
+                            ? sendingWithSwap
+                              ? 'Send Anyway'
+                              : 'Swap Anyway'
+                            : sending
+                              ? 'Send'
+                              : 'Swap'}
            </Text>
          </ButtonError>
        )}
@ -1479,7 +1250,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
                <Text fontSize={16} fontWeight={500} style={{ userSelect: 'none' }}>
                  Show Advanced
                </Text>
-                <ChevronDown color={theme(isDark).text2} />
+                <ChevronDown color={theme(isDark).text2}/>
              </RowBetween>
            </Hover>
          )}
@ -1490,10 +1261,10 @@ function ExchangePage({ sendingInput = false, history, params }) {
                  <Text fontSize={16} color={theme(isDark).text2} fontWeight={500} style={{ userSelect: 'none' }}>
                    Hide Advanced
                  </Text>
-                  <ChevronUp color={theme(isDark).text2} />
+                  <ChevronUp color={theme(isDark).text2}/>
                </RowBetween>
              </Hover>
-              <SectionBreak />
+              <SectionBreak/>
              <AutoColumn style={{ padding: '0 20px' }}>
                <RowBetween>
                  <RowFixed>
@ -1508,8 +1279,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
                      text={
                        independentField === Field.INPUT
                          ? sending
-                            ? 'Price can change between when a transaction is submitted and when it is executed. This is the minimum amount you will send. A worse rate will cause your transaction to revert.'
-                            : 'Price can change between when a transaction is submitted and when it is executed. This is the minimum amount you will receive. A worse rate will cause your transaction to revert.'
+                          ? 'Price can change between when a transaction is submitted and when it is executed. This is the minimum amount you will send. A worse rate will cause your transaction to revert.'
+                          : 'Price can change between when a transaction is submitted and when it is executed. This is the minimum amount you will receive. A worse rate will cause your transaction to revert.'
                          : 'Price can change between when a transaction is submitted and when it is executed. This is the maximum amount you will pay. A worse rate will cause your transaction to revert.'
                      }
                    />
@ -1518,15 +1289,15 @@ function ExchangePage({ sendingInput = false, history, params }) {
                    <TYPE.black color={theme(isDark).text1} fontSize={14}>
                      {independentField === Field.INPUT
                        ? slippageAdjustedAmounts[Field.OUTPUT]
-                          ? slippageAdjustedAmounts[Field.OUTPUT]?.toFixed(5) === '0.00000'
+                          ? slippageAdjustedAmounts[Field.OUTPUT]?.lessThan(new Fraction(JSBI.BigInt(1), JSBI.BigInt(10000)))
                            ? '<0.00001'
                            : slippageAdjustedAmounts[Field.OUTPUT]?.toFixed(5)
                          : '-'
                        : slippageAdjustedAmounts[Field.INPUT]
-                        ? slippageAdjustedAmounts[Field.INPUT]?.toFixed(5) === '0.00000'
-                          ? '<0.00001'
-                          : slippageAdjustedAmounts[Field.INPUT]?.toFixed(5)
-                        : '-'}
+                          ? slippageAdjustedAmounts[Field.INPUT]?.lessThan(new Fraction(JSBI.BigInt(1), JSBI.BigInt(10000)))
+                            ? '<0.00001'
+                            : slippageAdjustedAmounts[Field.INPUT]?.toFixed(5)
+                          : '-'}
                    </TYPE.black>
                    {parsedAmounts[Field.OUTPUT] && parsedAmounts[Field.INPUT] && (
                      <TYPE.black fontSize={14} marginLeft={'4px'} color={theme(isDark).text1}>
@ -1542,7 +1313,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
                    <TYPE.black fontSize={14} fontWeight={400} color={theme(isDark).text1}>
                      Price Impact
                    </TYPE.black>
-                    <QuestionHelper text="The difference between the market price and your quoted price due to trade size." />
+                    <QuestionHelper
+                      text="The difference between the market price and your quoted price due to trade size."/>
                  </RowFixed>
                  <ErrorText
                    fontWeight={500}
@ -1563,7 +1335,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
                    <TYPE.black fontSize={14} fontWeight={400} color={theme(isDark).text1}>
                      Liquidity Provider Fee
                    </TYPE.black>
-                    <QuestionHelper text="A portion of each trade (0.03%) goes to liquidity providers to incentivize liquidity on the protocol." />
+                    <QuestionHelper
+                      text="A portion of each trade (0.03%) goes to liquidity providers to incentivize liquidity on the protocol."/>
                  </RowFixed>
                  <TYPE.black fontSize={14} color={theme(isDark).text1}>
                    {feeTimesInputFormatted
@ -1572,12 +1345,13 @@ function ExchangePage({ sendingInput = false, history, params }) {
                  </TYPE.black>
                </RowBetween>
              </AutoColumn>
-              <SectionBreak />
+              <SectionBreak/>
              <RowFixed padding={'0 20px'}>
                <TYPE.black fontWeight={400} fontSize={14} color={theme(isDark).text1}>
                  Set front running resistance
                </TYPE.black>
-                <QuestionHelper text="Your transaction will revert if the price changes more than this amount after you submit your trade." />
+                <QuestionHelper
+                  text="Your transaction will revert if the price changes more than this amount after you submit your trade."/>
              </RowFixed>
              <SlippageTabs
                rawSlippage={allowedSlippage}
--- a/src/components/ExchangePage/styleds.ts
+++ b/src/components/ExchangePage/styleds.ts
@ -0,0 +1,154 @@
+import styled from 'styled-components'
+import { AutoColumn } from '../Column'
+
+import NumericalInput from '../NumericalInput'
+
+export const Wrapper = styled.div`
+  position: relative;
+`
+
+export const ArrowWrapper = styled.div`
+  padding: 2px;
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  :hover {
+    cursor: pointer;
+    opacity: 0.8;
+  }
+`
+
+export const FixedBottom = styled.div`
+  position: absolute;
+  margin-top: 1.5rem;
+  width: 100%;
+  margin-bottom: 40px;
+`
+
+export const AdvancedDropwdown = styled.div`
+  position: absolute;
+  margin-top: -12px;
+  max-width: 455px;
+  width: 100%;
+  margin-bottom: 100px;
+  padding: 10px 0;
+  padding-top: 36px;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  color: ${({ theme }) => theme.text2};
+  background-color: ${({ theme }) => theme.advancedBG};
+  color: ${({ theme }) => theme.text2};
+  z-index: -1;
+`
+
+export const SectionBreak = styled.div`
+  height: 1px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.bg3};
+`
+
+export const BottomGrouping = styled.div`
+  margin-top: 12px;
+  position: relative;
+`
+
+export const ErrorText = styled(Text)`
+  color: ${({ theme, warningLow, warningMedium, warningHigh }) =>
+  warningHigh ? theme.red1 : warningMedium ? theme.yellow2 : warningLow ? theme.green1 : theme.text1};
+`
+
+export const InputGroup = styled(AutoColumn)`
+  position: relative;
+  padding: 40px 0 20px 0;
+`
+
+export const StyledNumerical = styled(NumericalInput)`
+  text-align: center;
+  font-size: 48px;
+  font-weight: 500px;
+  width: 100%;
+
+  ::placeholder {
+    color: ${({ theme }) => theme.text4};
+  }
+`
+
+export const MaxButton = styled.button`
+  position: absolute;
+  right: 70px;
+  padding: 0.5rem 0.5rem;
+  background-color: ${({ theme }) => theme.blue5};
+  border: 1px solid ${({ theme }) => theme.blue5};
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  cursor: pointer;
+  margin-right: 0.5rem;
+  color: ${({ theme }) => theme.blue1};
+  :hover {
+    border: 1px solid ${({ theme }) => theme.blue1};
+  }
+  :focus {
+    border: 1px solid ${({ theme }) => theme.blue1};
+    outline: none;
+  }
+`
+
+export const StyledBalanceMaxMini = styled.button`
+  height: 24px;
+  background-color: ${({ theme }) => theme.bg2};
+  border: none;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  margin-left: 6px;
+  cursor: pointer;
+  color: ${({ theme }) => theme.text2};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  float: right;
+
+  :hover {
+    background-color: ${({ theme }) => theme.bg3};
+
+    /* border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)}; */
+  }
+  :focus {
+    background-color: ${({ theme }) => theme.bg3};
+    /* border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)}; */
+    outline: none;
+  }
+`
+
+export const TruncatedText = styled(Text)`
+  text-overflow: ellipsis;
+  width: 220px;
+  overflow: hidden;
+`
+
+// styles
+export const Dots = styled.span`
+  &::after {
+    display: inline-block;
+    animation: ellipsis 1.25s infinite;
+    content: '.';
+    width: 1em;
+    text-align: left;
+  }
+  @keyframes ellipsis {
+    0% {
+      content: '.';
+    }
+    33% {
+      content: '..';
+    }
+    66% {
+      content: '...';
+    }
+  }
+`
--- a/src/components/ExchangePage/swap-store.ts
+++ b/src/components/ExchangePage/swap-store.ts
@ -0,0 +1,95 @@
+export enum Field {
+  INPUT,
+  OUTPUT
+}
+
+export interface SwapState {
+  independentField: Field
+  typedValue: string
+  [Field.INPUT]: {
+    address: string | undefined
+  }
+  [Field.OUTPUT]: {
+    address: string | undefined
+  }
+}
+
+export function initializeSwapState({ inputTokenAddress, outputTokenAddress, typedValue, independentField }): SwapState {
+  return {
+    independentField: independentField,
+    typedValue: typedValue,
+    [Field.INPUT]: {
+      address: inputTokenAddress
+    },
+    [Field.OUTPUT]: {
+      address: outputTokenAddress
+    }
+  }
+}
+
+export enum SwapAction {
+  SELECT_TOKEN,
+  SWITCH_TOKENS,
+  TYPE
+}
+
+export interface Payload {
+  [SwapAction.SELECT_TOKEN]: {
+    field: Field
+    address: string
+  }
+  [SwapAction.SWITCH_TOKENS]: undefined
+  [SwapAction.TYPE]: {
+    field: Field
+    typedValue: string
+  }
+}
+
+export function reducer(
+  state: SwapState,
+  action: {
+    type: SwapAction
+    payload: Payload[SwapAction]
+  }
+): SwapState {
+  switch (action.type) {
+    case SwapAction.SELECT_TOKEN: {
+      const { field, address } = action.payload as Payload[SwapAction.SELECT_TOKEN]
+      const otherField = field === Field.INPUT ? Field.OUTPUT : Field.INPUT
+      if (address === state[otherField].address) {
+        // the case where we have to swap the order
+        return {
+          ...state,
+          independentField: state.independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT,
+          [field]: { address },
+          [otherField]: { address: state[field].address }
+        }
+      } else {
+        // the normal case
+        return {
+          ...state,
+          [field]: { address }
+        }
+      }
+    }
+    case SwapAction.SWITCH_TOKENS: {
+      return {
+        ...state,
+        independentField: state.independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT,
+        [Field.INPUT]: { address: state[Field.OUTPUT].address },
+        [Field.OUTPUT]: { address: state[Field.INPUT].address }
+      }
+    }
+    case SwapAction.TYPE: {
+      const { field, typedValue } = action.payload as Payload[SwapAction.TYPE]
+      return {
+        ...state,
+        independentField: field,
+        typedValue
+      }
+    }
+    default: {
+      throw Error
+    }
+  }
+}
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@ -13,7 +13,6 @@ import { isMobile } from 'react-device-detect'
 import { YellowCard, GreyCard } from '../Card'
 import { useWeb3React } from '../../hooks'
 import { useAddressBalance } from '../../contexts/Balances'
-import { useWalletModalToggle } from '../../contexts/Application'
 import { useDarkModeManager } from '../../contexts/LocalStorage'

 import Logo from '../../assets/svg/logo.svg'
@ -138,7 +137,6 @@ function Header({ history }) {
  const { account, chainId } = useWeb3React()

  const userEthBalance = useAddressBalance(account, WETH[chainId])
-  const toggleWalletModal = useWalletModalToggle()
  const [isDark] = useDarkModeManager()

  return (
@ -189,7 +187,7 @@ function Header({ history }) {
            ) : (
              ''
            )}
-            <Web3Status onClick={toggleWalletModal} />
+            <Web3Status />
          </AccountElement>

          <Menu />
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@ -79,13 +79,17 @@ const MenuItem = styled(Link)`
  }
 `

+const CODE_LINK = !!process.env.REACT_APP_GIT_COMMIT_HASH ?
+  `https://github.com/Uniswap/uniswap-frontend/tree/${process.env.REACT_APP_GIT_COMMIT_HASH}`:
+  'https://github.com/Uniswap/uniswap-frontend'
+
 export default function Menu() {
-  const node = useRef()
+  const node = useRef<HTMLDivElement>()
  const [open, toggle] = useToggle(false)

  useEffect(() => {
    const handleClickOutside = e => {
-      if (node.current.contains(e.target)) {
+      if (node.current?.contains(e.target) ?? false) {
        return
      }
      toggle()
@ -115,7 +119,7 @@ export default function Menu() {
          <MenuItem id="link" href="https://uniswap.org/docs/v2">
            Docs
          </MenuItem>
-          <MenuItem id="link" href="https://github.com/Uniswap">
+          <MenuItem id="link" href={CODE_LINK}>
            Code
          </MenuItem>
          <MenuItem id="link" href="https://uniswap.info/">
--- a/src/connectors/Fortmatic.ts
+++ b/src/connectors/Fortmatic.ts
@ -13,9 +13,10 @@ export class FortmaticConnector extends FortmaticConnectorCore {
  async activate() {
    if (!this.fortmatic) {
      const { default: Fortmatic } = await import('fortmatic')
+      const { apiKey, chainId } = this as any
      this.fortmatic = new Fortmatic(
-        this.apiKey,
-        this.chainId === 1 || this.chainId === 4 ? undefined : chainIdToNetwork[this.chainId]
+        apiKey,
+        chainId === 1 || chainId === 4 ? undefined : chainIdToNetwork[chainId]
      )
    }

@ -33,6 +34,6 @@ export class FortmaticConnector extends FortmaticConnectorCore {

    const [account] = await Promise.all([provider.enable().then(accounts => accounts[0]), pollForOverlayReady])

-    return { provider: this.fortmatic.getProvider(), chainId: this.chainId, account }
+    return { provider: this.fortmatic.getProvider(), chainId: (this as any).chainId, account }
  }
 }
--- a/src/connectors/Network.ts
+++ b/src/connectors/Network.ts
@ -2,14 +2,14 @@ import { NetworkConnector as NetworkConnectorCore } from '@web3-react/network-co

 export class NetworkConnector extends NetworkConnectorCore {
  pause() {
-    if (this.active) {
-      this.providers[this.currentChainId].stop()
+    if ((this as any).active) {
+      (this as any).providers[(this as any).currentChainId].stop()
    }
  }

  resume() {
-    if (this.active) {
-      this.providers[this.currentChainId].start()
+    if ((this as any).active) {
+      (this as any).providers[(this as any).currentChainId].start()
    }
  }
 }
--- a/src/connectors/index.ts
+++ b/src/connectors/index.ts
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@ -3,7 +3,7 @@ import { useWeb3React as useWeb3ReactCore } from '@web3-react/core'
 import { isMobile } from 'react-device-detect'
 import copy from 'copy-to-clipboard'

-import ERC20_ABI from '../constants/abis/erc20'
+import ERC20_ABI from '../constants/abis/erc20.json'
 import { injected } from '../connectors'
 import { NetworkContextName } from '../constants'
 import { getContract, getExchangeContract, isAddress } from '../utils'
@ -25,7 +25,7 @@ export function useEagerConnect() {
          setTried(true)
        })
      } else {
-        if (isMobile && window.ethereum) {
+        if (isMobile && (window as any).ethereum) {
          activate(injected, undefined, true).catch(() => {
            setTried(true)
          })
@ -54,7 +54,7 @@ export function useInactiveListener(suppress = false) {
  const { active, error, activate } = useWeb3ReactCore() // specifically using useWeb3React because of what this hook does

  useEffect(() => {
-    const { ethereum } = window
+    const { ethereum } = window as any

    if (ethereum && ethereum.on && !active && !error && !suppress) {
      const handleChainChanged = () => {
@ -139,7 +139,7 @@ export function useBodyKeyDown(targetKey, onKeyDown, suppressOnKeyDown = false)
 export function useENSName(address) {
  const { library } = useWeb3React()

-  const [ENSName, setENSName] = useState()
+  const [ENSName, setENSName] = useState<string | null>(null)

  useEffect(() => {
    if (isAddress(address)) {
@ -163,7 +163,7 @@ export function useENSName(address) {

      return () => {
        stale = true
-        setENSName()
+        setENSName(null)
      }
    }
  }, [library, address])
@ -247,7 +247,7 @@ export function usePrevious(value) {
  return ref.current
 }

-export function useToggle(initialState = false) {
+export function useToggle(initialState = false): [boolean, () => void] {
  const [state, setState] = useState(initialState)
  const toggle = useCallback(() => setState(state => !state), [])
  return [state, toggle]
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@ -143,7 +143,7 @@ export default function App() {
                          const t1 =
                            tokens?.[1] === 'ETH' ? 'ETH' : isAddress(tokens?.[1]) ? isAddress(tokens[1]) : undefined
                          if (t0 && t1) {
-                            return <Remove token0={t0} token1={t1} params={params} />
+                            return <Remove token0={t0} token1={t1} />
                          } else {
                            return <Redirect to="/pool" />
                          }
@ -154,7 +154,7 @@ export default function App() {
                  </Suspense>
                </Web3ReactManager>
              </Body>
-              <Footer></Footer>
+              <Footer/>
            </BodyWrapper>
            <StyledRed />
          </AppWrapper>
--- a/yarn.lock
+++ b/yarn.lock
@ -5276,6 +5276,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
    safe-buffer "^5.0.1"
    sha.js "^2.4.8"

+cross-env@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9"
+  integrity sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
 cross-fetch@^2.1.0, cross-fetch@^2.1.1:
  version "2.2.3"
  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-2.2.3.tgz#e8a0b3c54598136e037f8650f8e823ccdfac198e"
@ -5304,6 +5311,15 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
    shebang-command "^1.2.0"
    which "^1.2.9"

+cross-spawn@^7.0.1:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.2.tgz#d0d7dcfa74e89115c7619f4f721a94e1fdb716d6"
+  integrity sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypto-browserify@3.12.0, crypto-browserify@^3.11.0:
  version "3.12.0"
  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"