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)

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",
+    "start": "cross-env REACT_APP_GIT_COMMIT_HASH=$(git show -s --format=%H) react-scripts start",
-    "build": "react-scripts build",
+    "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}'",

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 = {
+enum SwapType {
-  EXACT_TOKENS_FOR_TOKENS: 'EXACT_TOKENS_FOR_TOKENS',
+  EXACT_TOKENS_FOR_TOKENS,
-  EXACT_TOKENS_FOR_ETH: 'EXACT_TOKENS_FOR_ETH',
+  EXACT_TOKENS_FOR_ETH,
-  EXACT_ETH_FOR_TOKENS: 'EXACT_ETH_FOR_TOKENS',
+  EXACT_ETH_FOR_TOKENS,
-  TOKENS_FOR_EXACT_TOKENS: 'TOKENS_FOR_EXACT_TOKENS',
+  TOKENS_FOR_EXACT_TOKENS,
-  TOKENS_FOR_EXACT_ETH: 'TOKENS_FOR_EXACT_ETH',
+  TOKENS_FOR_EXACT_ETH,
-  ETH_FOR_EXACT_TOKENS: 'ETH_FOR_EXACT_TOKENS'
+  ETH_FOR_EXACT_TOKENS
 }
 
 const GAS_MARGIN = ethers.utils.bigNumberify(1000)
@@ -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
 
@@ -527,7 +295,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
         ? 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
       }
     }
   }
@@ -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 (getSwapType()) {
-    switch (swapType) {
+      case SwapType.EXACT_TOKENS_FOR_TOKENS:
-      case SWAP_TYPE.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 = [
@@ -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}>
@@ -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
@@ -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>
                 )}
@@ -1518,12 +1289,12 @@ 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'
+                          ? slippageAdjustedAmounts[Field.INPUT]?.lessThan(new Fraction(JSBI.BigInt(1), JSBI.BigInt(10000)))
                             ? '<0.00001'
                             : slippageAdjustedAmounts[Field.INPUT]?.toFixed(5)
                           : '-'}
@@ -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
@@ -1577,7 +1350,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
                 <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}

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: '...';
+    }
+  }
+`

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
+    }
+  }
+}

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 />

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/">

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,
+        apiKey,
-        this.chainId === 1 || this.chainId === 4 ? undefined : chainIdToNetwork[this.chainId]
+        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 }
   }
 }

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) {
+    if ((this as any).active) {
-      this.providers[this.currentChainId].stop()
+      (this as any).providers[(this as any).currentChainId].stop()
     }
   }
 
   resume() {
-    if (this.active) {
+    if ((this as any).active) {
-      this.providers[this.currentChainId].start()
+      (this as any).providers[(this as any).currentChainId].start()
     }
   }
 }

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]

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>

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"