Use eslint/prettier for typescript files

.eslintrc.json

+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      // Allows for the parsing of JSX
+      "jsx": true
+    }
+  },
+  "ignorePatterns": [
+    "node_modules/**/*"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "prettier/prettier": "error"
+  }
+}
\ No newline at end of file

.github/workflows/tests.yaml

@@ -31,4 +31,15 @@ jobs:
       - run: yarn
       - run: yarn test
 
-# todo: add job for typescript linting
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '12'
+      - run: yarn
+      - run: yarn lint
+

cypress/integration/no-connect.ts

@@ -15,4 +15,4 @@ describe('Homepage', () => {
   it('can enter an amount into output', () => {
     cy.get('#swapOutputField').type('0.001')
   })
-})
\ No newline at end of file
+})

cypress/support/commands.ts

@@ -24,4 +24,4 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
-// TODO(moodysalem): commands for connecting a mock ethereum provider.
\ No newline at end of file
+// TODO(moodysalem): commands for connecting a mock ethereum provider.

package.json

@@ -57,7 +57,13 @@
     "@types/react-dom": "^16.9.7",
     "@types/react-router-dom": "^5.0.0",
     "@types/styled-components": "^4.2.0",
+    "@typescript-eslint/eslint-plugin": "^2.31.0",
+    "@typescript-eslint/parser": "^2.31.0",
     "cypress": "^4.5.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.19.0",
     "prettier": "^1.17.0",
     "serve": "^11.3.0",
     "start-server-and-test": "^1.11.0",
@@ -68,14 +74,8 @@
     "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}'",
-    "format:base": "yarn prettier './src/**/*.{js,jsx,scss}'",
-    "fix:lint": "yarn lint:base --fix",
-    "fix:format": "yarn format:base --write",
-    "fix:all": "yarn fix:lint && yarn fix:format",
-    "check:lint": "yarn lint:base",
-    "check:format": "yarn format:base --check",
-    "check:all": "yarn check:lint && yarn check:format",
+    "lint": "eslint '**/*.{js,jsx,ts,tsx}'",
+    "lint:fix": "eslint '**/*.{js,jsx,ts,tsx}' --fix",
     "cy:run": "cypress run",
     "serve:build": "serve -s build -l 3000",
     "integration-test": "yarn build && start-server-and-test 'yarn run serve:build' http://localhost:3000 cy:run"

src/components/AccountDetails/Copy.tsx

@@ -33,12 +33,12 @@ export default function CopyHelper(props: { toCopy: string; children?: React.Rea
       {props.children}
       {isCopied ? (
         <TransactionStatusText>
-          <CheckCircle size={'16'}/>
+          <CheckCircle size={'16'} />
           <TransactionStatusText>Copied</TransactionStatusText>
         </TransactionStatusText>
       ) : (
         <TransactionStatusText>
-          <Copy size={'16'}/>
+          <Copy size={'16'} />
         </TransactionStatusText>
       )}
     </CopyIcon>

src/components/AccountDetails/Transaction.tsx

@@ -43,7 +43,7 @@ const rotate = keyframes`
   }
 `
 
-const TransactionState = styled.div<{pending?: boolean;}>`
+const TransactionState = styled.div<{ pending?: boolean }>`
   display: flex;
   background-color: ${({ pending, theme }) =>
     pending ? transparentize(0.95, theme.blue1) : transparentize(0.95, theme.green1)};
@@ -64,7 +64,7 @@ const TransactionState = styled.div<{pending?: boolean;}>`
       pending ? transparentize(0, theme.blue1) : transparentize(0, theme.green1)};
   }
 `
-const ButtonWrapper = styled.div<{pending: boolean}>`
+const ButtonWrapper = styled.div<{ pending: boolean }>`
   a {
     color: ${({ pending, theme }) => (pending ? theme.blue1 : theme.green1)};
   }

src/components/AccountDetails/index.tsx

@@ -129,7 +129,7 @@ const LowerSection = styled.div`
   }
 `
 
-const AccountControl = styled.div<{ hasENS: boolean; isENS: boolean; }>`
+const AccountControl = styled.div<{ hasENS: boolean; isENS: boolean }>`
   ${({ theme }) => theme.flexRowNoWrap};
   align-items: center;
   min-width: 0;
@@ -156,7 +156,7 @@ const ConnectButtonRow = styled.div`
   margin: 10px 0;
 `
 
-const StyledLink = styled(Link) <{ hasENS: boolean; isENS: boolean; }>`
+const StyledLink = styled(Link)<{ hasENS: boolean; isENS: boolean }>`
   color: ${({ hasENS, isENS, theme }) => (hasENS ? (isENS ? theme.blue1 : theme.text3) : theme.blue1)};
 `
 
@@ -181,7 +181,7 @@ const WalletName = styled.div`
   width: initial;
 `
 
-const IconWrapper = styled.div<{size?: number}>`
+const IconWrapper = styled.div<{ size?: number }>`
   ${({ theme }) => theme.flexColumnNoWrap};
   align-items: center;
   justify-content: center;
@@ -217,19 +217,19 @@ function renderTransactions(transactions, pending) {
   return (
     <TransactionListWrapper>
       {transactions.map((hash, i) => {
-        return <Transaction key={i} hash={hash} pending={pending}/>
+        return <Transaction key={i} hash={hash} pending={pending} />
       })}
     </TransactionListWrapper>
   )
 }
 
 export default function AccountDetails({
-                                         toggleWalletModal,
-                                         pendingTransactions,
-                                         confirmedTransactions,
-                                         ENSName,
-                                         openOptions
-                                       }) {
+  toggleWalletModal,
+  pendingTransactions,
+  confirmedTransactions,
+  ENSName,
+  openOptions
+}) {
   const { chainId, account, connector } = useWeb3React()
   const theme = useContext(ThemeContext)
 
@@ -249,32 +249,32 @@ export default function AccountDetails({
     if (connector === injected) {
       return (
         <IconWrapper size={16}>
-          <Identicon/> {formatConnectorName()}
+          <Identicon /> {formatConnectorName()}
         </IconWrapper>
       )
     } else if (connector === walletconnect) {
       return (
         <IconWrapper size={16}>
-          <img src={WalletConnectIcon} alt={''}/> {formatConnectorName()}
+          <img src={WalletConnectIcon} alt={''} /> {formatConnectorName()}
         </IconWrapper>
       )
     } else if (connector === walletlink) {
       return (
         <IconWrapper size={16}>
-          <img src={CoinbaseWalletIcon} alt={''}/> {formatConnectorName()}
+          <img src={CoinbaseWalletIcon} alt={''} /> {formatConnectorName()}
         </IconWrapper>
       )
     } else if (connector === fortmatic) {
       return (
         <IconWrapper size={16}>
-          <img src={FortmaticIcon} alt={''}/> {formatConnectorName()}
+          <img src={FortmaticIcon} alt={''} /> {formatConnectorName()}
         </IconWrapper>
       )
     } else if (connector === portis) {
       return (
         <>
           <IconWrapper size={16}>
-            <img src={PortisIcon} alt={''}/> {formatConnectorName()}
+            <img src={PortisIcon} alt={''} /> {formatConnectorName()}
             <MainWalletAction
               onClick={() => {
                 portis.portis.showPortis()
@@ -292,7 +292,7 @@ export default function AccountDetails({
     <>
       <UpperSection>
         <CloseIcon onClick={toggleWalletModal}>
-          <CloseColor/>
+          <CloseColor />
         </CloseIcon>
         <HeaderRow>Account</HeaderRow>
         <AccountSection>
@@ -304,7 +304,7 @@ export default function AccountDetails({
                   {connector !== injected && connector !== walletlink && (
                     <WalletAction
                       onClick={() => {
-                        (connector as any).close()
+                        ;(connector as any).close()
                       }}
                     >
                       Disconnect
@@ -312,7 +312,7 @@ export default function AccountDetails({
                   )}
                   <CircleWrapper>
                     <GreenCircle>
-                      <div/>
+                      <div />
                     </GreenCircle>
                   </CircleWrapper>
                 </div>
@@ -323,14 +323,14 @@ export default function AccountDetails({
                     <StyledLink hasENS={!!ENSName} isENS={true} href={getEtherscanLink(chainId, ENSName, 'address')}>
                       {ENSName} ↗{' '}
                     </StyledLink>
-                    <Copy toCopy={ENSName}/>
+                    <Copy toCopy={ENSName} />
                   </AccountControl>
                 ) : (
                   <AccountControl hasENS={!!ENSName} isENS={false}>
                     <StyledLink hasENS={!!ENSName} isENS={false} href={getEtherscanLink(chainId, account, 'address')}>
                       {account} ↗{' '}
                     </StyledLink>
-                    <Copy toCopy={account}/>
+                    <Copy toCopy={account} />
                   </AccountControl>
                 )}
               </AccountGroupingRow>

src/components/AdvancedSettings/index.tsx

@@ -17,7 +17,7 @@ const InputWrapper = styled(RowBetween)`
   padding: 4px 8px;
   border: 1px solid transparent;
   border: ${({ active, error, theme }) =>
-  error ? '1px solid ' + theme.red1 : active ? '1px solid ' + theme.blue1 : ''};
+    error ? '1px solid ' + theme.red1 : active ? '1px solid ' + theme.blue1 : ''};
 `
 
 const SLIPPAGE_INDEX = {
@@ -34,7 +34,12 @@ interface AdvancedSettingsProps {
   setAllowedSlippage: (number) => void
 }
 
-export default function AdvancedSettings({ setIsOpen, setDeadline, allowedSlippage, setAllowedSlippage }: AdvancedSettingsProps) {
+export default function AdvancedSettings({
+  setIsOpen,
+  setDeadline,
+  allowedSlippage,
+  setAllowedSlippage
+}: AdvancedSettingsProps) {
   // text translation
   const { t } = useTranslation()
 
@@ -78,7 +83,7 @@ export default function AdvancedSettings({ setIsOpen, setDeadline, allowedSlippa
       setActiveIndex(3)
     } else {
       setActiveIndex(4)
-      setSlippageInput('' + (allowedSlippage / 100))
+      setSlippageInput('' + allowedSlippage / 100)
       parseCustomInput(allowedSlippage)
     }
   }, [allowedSlippage, parseCustomInput])
@@ -94,7 +99,7 @@ export default function AdvancedSettings({ setIsOpen, setDeadline, allowedSlippa
       </Link>
       <RowBetween>
         <TYPE.main>Front-running tolerance</TYPE.main>
-        <QuestionHelper text={t('toleranceExplanation')}/>
+        <QuestionHelper text={t('toleranceExplanation')} />
       </RowBetween>
       <Row>
         <ButtonRadio

src/components/Column/index.tsx

@@ -10,7 +10,10 @@ export const ColumnCenter = styled(Column)`
   align-items: center;
 `
 
-export const AutoColumn = styled.div<{gap?: 'sm' | 'md' | 'lg' | string; justify?: 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end';}>`
+export const AutoColumn = styled.div<{
+  gap?: 'sm' | 'md' | 'lg' | string
+  justify?: 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end'
+}>`
   display: grid;
   grid-auto-rows: auto;
   grid-row-gap: ${({ gap }) => (gap === 'sm' && '8px') || (gap === 'md' && '12px') || (gap === 'lg' && '24px') || gap};

src/components/ConfirmationModal/index.tsx

@@ -45,17 +45,17 @@ interface ConfirmationModalProps extends RouteComponentProps<{}> {
 }
 
 function ConfirmationModal({
-                             history,
-                             isOpen,
-                             onDismiss,
-                             hash,
-                             topContent,
-                             bottomContent,
-                             attemptingTxn,
-                             pendingConfirmation,
-                             pendingText,
-                             title = ''
-                           }: ConfirmationModalProps) {
+  history,
+  isOpen,
+  onDismiss,
+  hash,
+  topContent,
+  bottomContent,
+  attemptingTxn,
+  pendingConfirmation,
+  pendingText,
+  title = ''
+}: ConfirmationModalProps) {
   const { chainId } = useWeb3React()
 
   const dismissAndReturn = useCallback(() => {
@@ -74,7 +74,7 @@ function ConfirmationModal({
               <Text fontWeight={500} fontSize={20}>
                 {title}
               </Text>
-              <CloseIcon onClick={onDismiss}/>
+              <CloseIcon onClick={onDismiss} />
             </RowBetween>
             {topContent()}
           </Section>
@@ -84,14 +84,14 @@ function ConfirmationModal({
         <Wrapper>
           <Section>
             <RowBetween>
-              <div/>
-              <CloseIcon onClick={onDismiss}/>
+              <div />
+              <CloseIcon onClick={onDismiss} />
             </RowBetween>
             <ConfirmedIcon>
               {pendingConfirmation ? (
-                <Loader size="90px"/>
+                <Loader size="90px" />
               ) : (
-                <ArrowUpCircle strokeWidth={0.5} size={90} color="#ff007a"/>
+                <ArrowUpCircle strokeWidth={0.5} size={90} color="#ff007a" />
               )}
             </ConfirmedIcon>
             <AutoColumn gap="12px" justify={'center'}>

src/components/CurrencyInputPanel/index.tsx

@@ -139,41 +139,41 @@ interface CurrencyInputPanelProps {
   onUserInput: (field: number, val: string) => void
   onMax: () => void
   atMax: boolean
-  label?: string,
+  label?: string
   urlAddedTokens?: Token[]
   onTokenSelection?: (tokenAddress: string) => void
-  token?: Token | null,
-  disableTokenSelect?: boolean,
-  hideBalance?: boolean,
-  isExchange?: boolean,
-  pair?: Pair | null,
-  hideInput?: boolean,
-  showSendWithSwap?: boolean,
-  otherSelectedTokenAddress?: string | null,
-  advanced?: boolean,
+  token?: Token | null
+  disableTokenSelect?: boolean
+  hideBalance?: boolean
+  isExchange?: boolean
+  pair?: Pair | null
+  hideInput?: boolean
+  showSendWithSwap?: boolean
+  otherSelectedTokenAddress?: string | null
+  advanced?: boolean
   inputId: string
 }
 
 export default function CurrencyInputPanel({
-                                             value,
-                                             field,
-                                             onUserInput,
-                                             onMax,
-                                             atMax,
-                                             label = 'Input',
-                                             urlAddedTokens = [], // used
-                                             onTokenSelection = null,
-                                             token = null,
-                                             disableTokenSelect = false,
-                                             hideBalance = false,
-                                             isExchange = false,
-                                             pair = null, // used for double token logo
-                                             hideInput = false,
-                                             showSendWithSwap = false,
-                                             otherSelectedTokenAddress = null,
-                                             advanced = false,
-                                             inputId,
-                                           }: CurrencyInputPanelProps) {
+  value,
+  field,
+  onUserInput,
+  onMax,
+  atMax,
+  label = 'Input',
+  urlAddedTokens = [], // used
+  onTokenSelection = null,
+  token = null,
+  disableTokenSelect = false,
+  hideBalance = false,
+  isExchange = false,
+  pair = null, // used for double token logo
+  hideInput = false,
+  showSendWithSwap = false,
+  otherSelectedTokenAddress = null,
+  advanced = false,
+  inputId
+}: CurrencyInputPanelProps) {
   const { t } = useTranslation()
 
   const [modalOpen, setModalOpen] = useState(false)
@@ -207,10 +207,7 @@ export default function CurrencyInputPanel({
             </RowBetween>
           </LabelRow>
         )}
-        <InputRow
-          style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}
-          selected={disableTokenSelect}
-        >
+        <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={disableTokenSelect}>
           {!hideInput && (
             <>
               <NumericalInput
@@ -235,9 +232,9 @@ export default function CurrencyInputPanel({
           >
             <Aligner>
               {isExchange ? (
-                <DoubleLogo a0={pair?.token0.address} a1={pair?.token1.address} size={24} margin={true}/>
+                <DoubleLogo a0={pair?.token0.address} a1={pair?.token1.address} size={24} margin={true} />
               ) : token?.address ? (
-                <TokenLogo address={token?.address} size={'24px'}/>
+                <TokenLogo address={token?.address} size={'24px'} />
               ) : null}
               {isExchange ? (
                 <StyledTokenName>
@@ -248,7 +245,7 @@ export default function CurrencyInputPanel({
                   {(token && token.symbol) || t('selectToken')}
                 </StyledTokenName>
               )}
-              {!disableTokenSelect && <StyledDropDown selected={!!token?.address}/>}
+              {!disableTokenSelect && <StyledDropDown selected={!!token?.address} />}
             </Aligner>
           </CurrencySelect>
         </InputRow>

src/components/DoubleLogo/index.tsx

@@ -3,11 +3,11 @@ import styled from 'styled-components'
 import TokenLogo from '../TokenLogo'
 
 const TokenWrapper = styled.div<{ margin: boolean; sizeraw: number }>`
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    margin-right: ${({ sizeraw, margin }) => margin && (sizeraw / 3 + 8).toString() + 'px'};
-  `
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  margin-right: ${({ sizeraw, margin }) => margin && (sizeraw / 3 + 8).toString() + 'px'};
+`
 
 interface DoubleTokenLogoProps {
   margin?: boolean
@@ -17,18 +17,18 @@ interface DoubleTokenLogoProps {
 }
 
 const HigherLogo = styled(TokenLogo)`
-    z-index: 2;
-  `
+  z-index: 2;
+`
 const CoveredLogo = styled(TokenLogo)<{ sizeraw: number }>`
-    position: absolute;
-    left: ${({ sizeraw }) => (sizeraw / 2).toString() + 'px'};
-  `
+  position: absolute;
+  left: ${({ sizeraw }) => (sizeraw / 2).toString() + 'px'};
+`
 
 export default function DoubleTokenLogo({ a0, a1, size = 16, margin = false }: DoubleTokenLogoProps) {
   return (
     <TokenWrapper sizeraw={size} margin={margin}>
-      <HigherLogo address={a0} size={size.toString() + 'px'}/>
-      <CoveredLogo address={a1} size={size.toString() + 'px'} sizeraw={size}/>
+      <HigherLogo address={a0} size={size.toString() + 'px'} />
+      <CoveredLogo address={a1} size={size.toString() + 'px'} sizeraw={size} />
     </TokenWrapper>
   )
 }

src/components/ExchangePage/styleds.ts

@@ -57,7 +57,7 @@ export const BottomGrouping = styled.div`
 
 export const ErrorText = styled(Text)`
   color: ${({ theme, warningLow, warningMedium, warningHigh }) =>
-  warningHigh ? theme.red1 : warningMedium ? theme.yellow2 : warningLow ? theme.green1 : theme.text1};
+    warningHigh ? theme.red1 : warningMedium ? theme.yellow2 : warningLow ? theme.green1 : theme.text1};
 `
 
 export const InputGroup = styled(AutoColumn)`
@@ -152,4 +152,4 @@ export const Dots = styled.span`
       content: '...';
     }
   }
-`
\ No newline at end of file
+`

src/components/ExchangePage/swap-store.ts

@@ -19,7 +19,12 @@ export interface SwapState {
   }
 }
 
-export function initializeSwapState({ inputTokenAddress, outputTokenAddress, typedValue, independentField }): SwapState {
+export function initializeSwapState({
+  inputTokenAddress,
+  outputTokenAddress,
+  typedValue,
+  independentField
+}): SwapState {
   return {
     independentField: independentField,
     typedValue: typedValue,
@@ -110,21 +115,21 @@ export function useSwapStateReducer(params: QueryParams) {
       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
   )

src/components/Header/index.tsx

@@ -64,7 +64,7 @@ const TitleText = styled(Row)`
   `};
 `
 
-const AccountElement = styled.div<{active: boolean;}>`
+const AccountElement = styled.div<{ active: boolean }>`
   display: flex;
   display: flex;
   flex-direction: row;
@@ -107,7 +107,7 @@ const Alpha = styled(GreyCard)`
   font-weight: 600;
 `
 
-const UniIcon = styled.div<{href: string}>`
+const UniIcon = styled.div<{ href: string }>`
   transition: transform 0.3s ease;
   :hover {
     transform: rotate(-5deg);

src/components/Identicon/index.tsx

@@ -24,5 +24,5 @@ export default function Identicon() {
     }
   }, [account])
 
-  return <StyledIdenticon ref={ref}/>
+  return <StyledIdenticon ref={ref} />
 }

src/components/Loader/index.tsx

@@ -11,5 +11,5 @@ const SpinnerWrapper = styled(Spinner)<{ size: string }>`
 `
 
 export default function Loader({ size }: { size: string }) {
-  return <SpinnerWrapper src={Circle} alt="loader" size={size}/>
+  return <SpinnerWrapper src={Circle} alt="loader" size={size} />
 }

src/components/Menu/index.tsx

@@ -78,9 +78,9 @@ 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'
+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<HTMLDivElement>()

src/components/Modal/index.tsx

@@ -22,8 +22,8 @@ const StyledDialogOverlay = styled(WrappedDialogOverlay).attrs({
     background-color: ${({ theme }) => 'transparent'};
 
     ${({ mobile }) =>
-  mobile &&
-  css`
+      mobile &&
+      css`
         align-items: flex-end;
       `}
 
@@ -56,13 +56,13 @@ const StyledDialogContent = styled(FilteredDialogContent)`
 
     max-width: 420px;
     ${({ maxHeight }) =>
-  maxHeight &&
-  css`
+      maxHeight &&
+      css`
         max-height: ${maxHeight}vh;
       `}
     ${({ minHeight }) =>
-  minHeight &&
-  css`
+      minHeight &&
+      css`
         min-height: ${minHeight}vh;
       `}
     display: flex;
@@ -77,7 +77,7 @@ const StyledDialogContent = styled(FilteredDialogContent)`
       width:  85vw;
       max-height: 66vh;
       ${mobile &&
-css`
+        css`
           width: 100vw;
           border-radius: 20px;
           border-bottom-left-radius: 0;
@@ -105,13 +105,13 @@ interface ModalProps {
 }
 
 export default function Modal({
-                                isOpen,
-                                onDismiss,
-                                minHeight = false,
-                                maxHeight = 50,
-                                initialFocusRef = null,
-                                children
-                              }: ModalProps) {
+  isOpen,
+  onDismiss,
+  minHeight = false,
+  maxHeight = 50,
+  initialFocusRef = null,
+  children
+}: ModalProps) {
   const transitions = useTransition(isOpen, null, {
     config: { duration: 200 },
     from: { opacity: 0 },
@@ -163,7 +163,9 @@ export default function Modal({
                   {props => (
                     <animated.div
                       {...bind()}
-                      style={{ transform: (xy as any).interpolate((x, y) => `translate3d(${0}px,${y > 0 ? y : 0}px,0)`) }}
+                      style={{
+                        transform: (xy as any).interpolate((x, y) => `translate3d(${0}px,${y > 0 ? y : 0}px,0)`)
+                      }}
                     >
                       <StyledDialogContent
                         style={props}
@@ -172,7 +174,7 @@ export default function Modal({
                         maxHeight={maxHeight}
                         mobile={isMobile}
                       >
-                        <HiddenCloseButton onClick={onDismiss}/>
+                        <HiddenCloseButton onClick={onDismiss} />
                         {children}
                       </StyledDialogContent>
                     </animated.div>
@@ -203,7 +205,7 @@ export default function Modal({
                   isOpen={isOpen}
                   mobile={isMobile}
                 >
-                  <HiddenCloseButton onClick={onDismiss}/>
+                  <HiddenCloseButton onClick={onDismiss} />
                   {children}
                 </StyledDialogContent>
               </StyledDialogOverlay>

src/components/NavigationTabs/index.tsx

-import React, { useCallback } from 'react';
-import styled from 'styled-components';
-import { darken } from 'polished';
-import { useTranslation } from 'react-i18next';
-import { withRouter, NavLink, Link as HistoryLink, RouteComponentProps } from 'react-router-dom';
+import React, { useCallback } from 'react'
+import styled from 'styled-components'
+import { darken } from 'polished'
+import { useTranslation } from 'react-i18next'
+import { withRouter, NavLink, Link as HistoryLink, RouteComponentProps } from 'react-router-dom'
 
-import { Hover } from '../../theme';
-import { ArrowLeft } from 'react-feather';
-import { RowBetween } from '../Row';
-import QuestionHelper from '../Question';
+import { Hover } from '../../theme'
+import { ArrowLeft } from 'react-feather'
+import { RowBetween } from '../Row'
+import QuestionHelper from '../Question'
 
-import { useBodyKeyDown } from '../../hooks';
+import { useBodyKeyDown } from '../../hooks'
 
 const tabOrder = [
   {
@@ -27,16 +27,16 @@ const tabOrder = [
     textKey: 'pool',
     regex: /\/pool/
   }
-];
+]
 
 const Tabs = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
   border-radius: 3rem;
   margin-bottom: 20px;
-`;
+`
 
-const activeClassName = 'ACTIVE';
+const activeClassName = 'ACTIVE'
 
 const StyledNavLink = styled(NavLink).attrs({
   activeClassName
@@ -65,41 +65,41 @@ const StyledNavLink = styled(NavLink).attrs({
   :focus {
     color: ${({ theme }) => darken(0.1, theme.text1)};
   }
-`;
+`
 
 const ActiveText = styled.div`
   font-weight: 500;
   font-size: 20px;
-`;
+`
 
 const ArrowLink = styled(ArrowLeft)`
   color: ${({ theme }) => theme.text1};
-`;
+`
 
 function NavigationTabs({ location: { pathname }, history }: RouteComponentProps<{}>) {
-  const { t } = useTranslation();
+  const { t } = useTranslation()
 
   const navigate = useCallback(
     direction => {
-      const tabIndex = tabOrder.findIndex(({ regex }) => pathname.match(regex));
-      history.push(tabOrder[ (tabIndex + tabOrder.length + direction) % tabOrder.length ].path);
+      const tabIndex = tabOrder.findIndex(({ regex }) => pathname.match(regex))
+      history.push(tabOrder[(tabIndex + tabOrder.length + direction) % tabOrder.length].path)
     },
     [pathname, history]
-  );
+  )
   const navigateRight = useCallback(() => {
-    navigate(1);
-  }, [navigate]);
+    navigate(1)
+  }, [navigate])
   const navigateLeft = useCallback(() => {
-    navigate(-1);
-  }, [navigate]);
+    navigate(-1)
+  }, [navigate])
 
-  useBodyKeyDown('ArrowRight', navigateRight);
-  useBodyKeyDown('ArrowLeft', navigateLeft);
+  useBodyKeyDown('ArrowRight', navigateRight)
+  useBodyKeyDown('ArrowLeft', navigateLeft)
 
-  const adding = pathname.match('/add');
-  const removing = pathname.match('/remove');
-  const finding = pathname.match('/find');
-  const creating = pathname.match('/create');
+  const adding = pathname.match('/add')
+  const removing = pathname.match('/remove')
+  const finding = pathname.match('/find')
+  const creating = pathname.match('/create')
 
   return (
     <>
@@ -107,7 +107,7 @@ function NavigationTabs({ location: { pathname }, history }: RouteComponentProps
         <Tabs>
           <RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
             <Hover onClick={() => history.goBack()}>
-              <ArrowLink/>
+              <ArrowLink />
             </Hover>
             <ActiveText>{adding ? 'Add' : 'Remove'} Liquidity</ActiveText>
             <QuestionHelper
@@ -123,20 +123,20 @@ function NavigationTabs({ location: { pathname }, history }: RouteComponentProps
         <Tabs>
           <RowBetween style={{ padding: '1rem' }}>
             <HistoryLink to="/pool">
-              <ArrowLink/>
+              <ArrowLink />
             </HistoryLink>
             <ActiveText>Import Pool</ActiveText>
-            <QuestionHelper text={'Use this tool to find pairs that don\'t automatically appear in the interface.'}/>
+            <QuestionHelper text={"Use this tool to find pairs that don't automatically appear in the interface."} />
           </RowBetween>
         </Tabs>
       ) : creating ? (
         <Tabs>
           <RowBetween style={{ padding: '1rem' }}>
             <HistoryLink to="/pool">
-              <ArrowLink/>
+              <ArrowLink />
             </HistoryLink>
             <ActiveText>Create Pool</ActiveText>
-            <QuestionHelper text={'Use this interface to create a new pool.'}/>
+            <QuestionHelper text={'Use this interface to create a new pool.'} />
           </RowBetween>
         </Tabs>
       ) : (
@@ -149,7 +149,7 @@ function NavigationTabs({ location: { pathname }, history }: RouteComponentProps
         </Tabs>
       )}
     </>
-  );
+  )
 }
 
-export default withRouter(NavigationTabs);
+export default withRouter(NavigationTabs)

src/components/NumericalInput/index.tsx

 import React from 'react'
 import styled from 'styled-components'
 
-const StyledInput = styled.input<{error?: boolean; fontSize?: string; align?: string}>`
+const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`
   color: ${({ error, theme }) => error && theme.red1};
   color: ${({ theme }) => theme.text1};
   width: 0;

src/components/PoolFinder/index.tsx

@@ -65,20 +65,20 @@ function PoolFinder({ history }) {
   function endSearch() {
     history.goBack() // return to previous page
     newLiquidity &&
-    addPopup(
-      <AutoColumn gap={'10px'}>
-        <Text fontSize={20} fontWeight={500}>
-          Pool Imported
-        </Text>
-        <Row>
-          <DoubleTokenLogo a0={token0Address || ''} a1={token1Address || ''} margin={true}/>
-          <Text fontSize={16} fotnWeight={500}>
-            UNI {token0?.symbol} / {token1?.symbol}
+      addPopup(
+        <AutoColumn gap={'10px'}>
+          <Text fontSize={20} fontWeight={500}>
+            Pool Imported
           </Text>
-        </Row>
-        <Link>View on Uniswap Info.</Link>
-      </AutoColumn>
-    )
+          <Row>
+            <DoubleTokenLogo a0={token0Address || ''} a1={token1Address || ''} margin={true} />
+            <Text fontSize={16} fotnWeight={500}>
+              UNI {token0?.symbol} / {token1?.symbol}
+            </Text>
+          </Row>
+          <Link>View on Uniswap Info.</Link>
+        </AutoColumn>
+      )
   }
 
   return (
@@ -101,7 +101,7 @@ function PoolFinder({ history }) {
             }}
           >
             <Row>
-              <TokenLogo address={token0Address}/>
+              <TokenLogo address={token0Address} />
               <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
                 {token0?.symbol}
               </Text>
@@ -109,7 +109,7 @@ function PoolFinder({ history }) {
           </ButtonDropwdownLight>
         )}
         <ColumnCenter>
-          <Plus size="16" color="#888D9B"/>
+          <Plus size="16" color="#888D9B" />
         </ColumnCenter>
         {!token1Address ? (
           <ButtonDropwdown
@@ -128,7 +128,7 @@ function PoolFinder({ history }) {
             }}
           >
             <Row>
-              <TokenLogo address={token1Address}/>
+              <TokenLogo address={token1Address} />
               <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
                 {token1?.symbol}
               </Text>
@@ -137,7 +137,8 @@ function PoolFinder({ history }) {
         )}
         {allowImport && (
           <ColumnCenter
-            style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}>
+            style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}
+          >
             <Text textAlign="center" fontWeight={500} color="">
               {newLiquidity ? 'Pool Found!' : 'Pool already imported.'}
             </Text>

src/components/Popups/index.tsx

@@ -79,7 +79,7 @@ export default function App() {
         {activePopups.map(item => {
           return (
             <Popup key={item.key}>
-              <StyledClose color="#888D9B" onClick={() => removePopup(item.key)}/>
+              <StyledClose color="#888D9B" onClick={() => removePopup(item.key)} />
               {React.cloneElement(item.content, { popKey: item.key })}
             </Popup>
           )
@@ -98,7 +98,7 @@ export default function App() {
             .map(item => {
               return (
                 <Popup key={item.key}>
-                  <StyledClose color="#888D9B" onClick={() => removePopup(item.key)}/>
+                  <StyledClose color="#888D9B" onClick={() => removePopup(item.key)} />
                   {React.cloneElement(item.content, { popKey: item.key })}
                 </Popup>
               )

src/components/PositionCard/index.tsx

@@ -31,7 +31,7 @@ const HoverCard = styled(Card)`
 `
 
 interface PositionCardProps extends RouteComponentProps<{}> {
-  pairAddress: string;
+  pairAddress: string
   token0: Token
   token1: Token
   minimal?: boolean
@@ -86,7 +86,7 @@ function PositionCard({ pairAddress, token0, token1, history, border, minimal =
               </FixedHeightRow>
               <FixedHeightRow onClick={() => setShowMore(!showMore)}>
                 <RowFixed>
-                  <DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={20}/>
+                  <DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={20} />
                   <Text fontWeight={500} fontSize={20}>
                     {token0?.symbol}:{token1?.symbol}
                   </Text>
@@ -104,7 +104,7 @@ function PositionCard({ pairAddress, token0, token1, history, border, minimal =
                   </Text>
                   {token0Deposited ? (
                     <RowFixed>
-                      {!minimal && <TokenLogo address={token0?.address || ''}/>}
+                      {!minimal && <TokenLogo address={token0?.address || ''} />}
                       <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
                         {token0Deposited?.toFixed(8)}
                       </Text>
@@ -119,7 +119,7 @@ function PositionCard({ pairAddress, token0, token1, history, border, minimal =
                   </Text>
                   {token1Deposited ? (
                     <RowFixed>
-                      {!minimal && <TokenLogo address={token1?.address || ''}/>}
+                      {!minimal && <TokenLogo address={token1?.address || ''} />}
                       <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
                         {token1Deposited?.toFixed(8)}
                       </Text>
@@ -140,16 +140,16 @@ function PositionCard({ pairAddress, token0, token1, history, border, minimal =
         <AutoColumn gap="12px">
           <FixedHeightRow onClick={() => setShowMore(!showMore)} style={{ cursor: 'pointer' }}>
             <RowFixed>
-              <DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={20}/>
+              <DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={20} />
               <Text fontWeight={500} fontSize={20}>
                 {token0?.symbol}:{token1?.symbol}
               </Text>
             </RowFixed>
             <RowFixed>
               {showMore ? (
-                <ChevronUp size="20" style={{ marginLeft: '10px' }}/>
+                <ChevronUp size="20" style={{ marginLeft: '10px' }} />
               ) : (
-                <ChevronDown size="20" style={{ marginLeft: '10px' }}/>
+                <ChevronDown size="20" style={{ marginLeft: '10px' }} />
               )}
             </RowFixed>
           </FixedHeightRow>
@@ -167,7 +167,7 @@ function PositionCard({ pairAddress, token0, token1, history, border, minimal =
                       {token0Deposited?.toFixed(8)}
                     </Text>
                     {!minimal && (
-                      <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token0?.address || ''}/>
+                      <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token0?.address || ''} />
                     )}
                   </RowFixed>
                 ) : (
@@ -187,7 +187,7 @@ function PositionCard({ pairAddress, token0, token1, history, border, minimal =
                       {token1Deposited?.toFixed(8)}
                     </Text>
                     {!minimal && (
-                      <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token1?.address || ''}/>
+                      <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token1?.address || ''} />
                     )}
                   </RowFixed>
                 ) : (

src/components/SearchModal/index.tsx

@@ -154,18 +154,18 @@ interface SearchModalProps extends RouteComponentProps<{}> {
 }
 
 function SearchModal({
-                       history,
-                       isOpen,
-                       onDismiss,
-                       onTokenSelect,
-                       urlAddedTokens,
-                       filterType,
-                       hiddenToken,
-                       showSendWithSwap,
-                       otherSelectedTokenAddress,
-                       otherSelectedText,
-                       showCommonBases = false
-                     }: SearchModalProps) {
+  history,
+  isOpen,
+  onDismiss,
+  onTokenSelect,
+  urlAddedTokens,
+  filterType,
+  hiddenToken,
+  showSendWithSwap,
+  otherSelectedTokenAddress,
+  otherSelectedText,
+  showCommonBases = false
+}: SearchModalProps) {
   const { t } = useTranslation()
   const { account, chainId } = useWeb3React()
   const theme = useContext(ThemeContext)
@@ -377,7 +377,7 @@ function SearchModal({
             }}
           >
             <RowFixed>
-              <DoubleTokenLogo a0={token0?.address || ''} a1={token1?.address || ''} size={24} margin={true}/>
+              <DoubleTokenLogo a0={token0?.address || ''} a1={token1?.address || ''} size={24} margin={true} />
               <Text fontWeight={500} fontSize={16}>{`${token0?.symbol}/${token1?.symbol}`}</Text>
             </RowFixed>
             {/* <Text fontWeight={500} fontSize={16}>
@@ -418,7 +418,7 @@ function SearchModal({
               }}
             >
               <RowFixed>
-                <TokenLogo address={temporaryToken.address} size={'24px'} style={{ marginRight: '14px' }}/>
+                <TokenLogo address={temporaryToken.address} size={'24px'} style={{ marginRight: '14px' }} />
                 <Column>
                   <Text fontWeight={500}>{temporaryToken.symbol}</Text>
                   <FadedSpan>(Found by search)</FadedSpan>
@@ -431,16 +431,16 @@ function SearchModal({
         return <TokenModalInfo>{t('noToken')}</TokenModalInfo>
       }
     }
-      // TODO is this the right place to link to create exchange?
-      // else if (isAddress(searchQuery) && tokenAddress === ethers.constants.AddressZero) {
-      //   return (
-      //     <>
-      //       <TokenModalInfo>{t('noToken')}</TokenModalInfo>
-      //       <TokenModalInfo>
-      //         <Link to={`/create-exchange/${searchQuery}`}>{t('createExchange')}</Link>
-      //       </TokenModalInfo>
-      //     </>
-      //   )
+    // TODO is this the right place to link to create exchange?
+    // else if (isAddress(searchQuery) && tokenAddress === ethers.constants.AddressZero) {
+    //   return (
+    //     <>
+    //       <TokenModalInfo>{t('noToken')}</TokenModalInfo>
+    //       <TokenModalInfo>
+    //         <Link to={`/create-exchange/${searchQuery}`}>{t('createExchange')}</Link>
+    //       </TokenModalInfo>
+    //     </>
+    //   )
     // }
     else {
       return filteredTokenList
@@ -453,8 +453,8 @@ function SearchModal({
                 ? -1
                 : 1
               : sortDirection
-                ? 1
-                : -1
+              ? 1
+              : -1
         })
         .map(({ address, symbol, balance }) => {
           const urlAdded = urlAddedTokens && urlAddedTokens.hasOwnProperty(address)
@@ -467,13 +467,12 @@ function SearchModal({
           return (
             <MenuItem
               key={address}
-              onClick={() => (hiddenToken && hiddenToken === address ? () => {
-              } : _onTokenSelect(address))}
+              onClick={() => (hiddenToken && hiddenToken === address ? () => {} : _onTokenSelect(address))}
               disabled={hiddenToken && hiddenToken === address}
               selected={otherSelectedTokenAddress === address}
             >
               <RowFixed>
-                <TokenLogo address={address} size={'24px'} style={{ marginRight: '14px' }}/>
+                <TokenLogo address={address} size={'24px'} style={{ marginRight: '14px' }} />
                 <Column>
                   <Text fontWeight={500}>
                     {symbol}
@@ -500,9 +499,7 @@ function SearchModal({
                 {balance ? (
                   <Text>
                     {zeroBalance && showSendWithSwap ? (
-                      <ColumnCenter
-                        style={{ backgroundColor: theme.bg2, padding: '8px', borderRadius: '12px' }}
-                      >
+                      <ColumnCenter style={{ backgroundColor: theme.bg2, padding: '8px', borderRadius: '12px' }}>
                         <Text textAlign="center" fontWeight={500} color={theme.blue1}>
                           Send With Swap
                         </Text>
@@ -514,7 +511,7 @@ function SearchModal({
                     )}
                   </Text>
                 ) : account ? (
-                  <SpinnerWrapper src={Circle} alt="loader"/>
+                  <SpinnerWrapper src={Circle} alt="loader" />
                 ) : (
                   '-'
                 )}
@@ -569,7 +566,7 @@ function SearchModal({
                   Import A Token
                 </Text>
               </RowFixed>
-              <CloseIcon onClick={onDismiss}/>
+              <CloseIcon onClick={onDismiss} />
             </RowBetween>
             <TYPE.body style={{ marginTop: '10px' }}>
               To import a custom token, paste token address in the search bar.
@@ -589,7 +586,7 @@ function SearchModal({
               <Text fontWeight={500} fontSize={16}>
                 {filterType === 'tokens' ? 'Select A Token' : 'Select A Pool'}
               </Text>
-              <CloseIcon onClick={onDismiss}/>
+              <CloseIcon onClick={onDismiss} />
             </RowBetween>
             <Input
               type={'text'}
@@ -604,7 +601,7 @@ function SearchModal({
                   <Text fontWeight={500} fontSize={16}>
                     Common Bases
                   </Text>
-                  <QuestionHelper text="These tokens are commonly used in pairs."/>
+                  <QuestionHelper text="These tokens are commonly used in pairs." />
                 </AutoRow>
                 <AutoRow gap="10px">
                   {COMMON_BASES[chainId]?.map(token => {
@@ -615,7 +612,7 @@ function SearchModal({
                         disable={hiddenToken === token.address}
                         key={token.address}
                       >
-                        <TokenLogo address={token.address}/>
+                        <TokenLogo address={token.address} />
                         <Text fontWeight={500} fontSize={16}>
                           {token.symbol}
                         </Text>
@@ -637,16 +634,16 @@ function SearchModal({
             </RowBetween>
           </PaddedColumn>
         )}
-        {!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }}/>}
+        {!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />}
         {!showTokenImport && <TokenList>{filterType === 'tokens' ? renderTokenList() : renderPairsList()}</TokenList>}
-        {!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }}/>}
+        {!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />}
         {!showTokenImport && (
           <Card>
             <AutoRow justify={'center'}>
               <div>
                 {filterType !== 'tokens' && (
                   <Text fontWeight={500}>
-                    {!isMobile && 'Don\'t see a pool? '}
+                    {!isMobile && "Don't see a pool? "}
                     <StyledLink
                       onClick={() => {
                         history.push('/find')
@@ -658,7 +655,7 @@ function SearchModal({
                 )}
                 {filterType === 'tokens' && (
                   <Text fontWeight={500} color={theme.text2} fontSize={14}>
-                    {!isMobile && 'Don\'t see a token? '}
+                    {!isMobile && "Don't see a token? "}
 
                     <StyledLink
                       onClick={() => {

src/components/Slider/index.tsx

@@ -58,12 +58,15 @@ export default function InputSlider({ value, onChange, override }: InputSliderPr
   const [internalVal, setInternalVal] = useState<number>(value)
   const debouncedInternalValue = useDebounce(internalVal, 100)
 
-  const handleChange = useCallback((e, val) => {
-    setInternalVal(val)
-    if (val !== debouncedInternalValue) {
-      onChange(val)
-    }
-  }, [setInternalVal, onChange, debouncedInternalValue])
+  const handleChange = useCallback(
+    (e, val) => {
+      setInternalVal(val)
+      if (val !== debouncedInternalValue) {
+        onChange(val)
+      }
+    },
+    [setInternalVal, onChange, debouncedInternalValue]
+  )
 
   useEffect(() => {
     if (override) {

src/components/SlippageTabs/index.tsx

@@ -61,21 +61,21 @@ const Input = styled.input<{ active?: boolean }>`
   color: ${({ theme }) => theme.text1};
   text-align: left;
   ${({ active }) =>
-  active &&
-  css`
+    active &&
+    css`
       color: initial;
       cursor: initial;
       text-align: right;
     `}
   ${({ placeholder }) =>
-  placeholder !== 'Custom' &&
-  css`
+    placeholder !== 'Custom' &&
+    css`
       text-align: right;
       color: ${({ theme }) => theme.text1};
     `}
   ${({ color }) =>
-  color === 'red' &&
-  css`
+    color === 'red' &&
+    css`
       color: ${({ theme }) => theme.red1};
     `}
 `
@@ -84,8 +84,8 @@ const BottomError = styled(Text)`
   font-size: 14px;
   font-weight: 400;
   ${({ show }) =>
-  show &&
-  css`
+    show &&
+    css`
       padding-top: 12px;
     `}
 `
@@ -94,9 +94,10 @@ const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }
   height: 2rem;
   position: relative;
   padding: 0 0.75rem;
-  border: ${({ theme, active, warning }) => active && `1px solid ${(warning ? theme.red1 : theme.blue1)}`};
+  border: ${({ theme, active, warning }) => active && `1px solid ${warning ? theme.red1 : theme.blue1}`};
   :hover {
-    border: ${({ theme, active, warning }) => active && `1px solid ${(warning ? darken(0.1, theme.red1) : darken(0.1, theme.blue1))}`};
+    border: ${({ theme, active, warning }) =>
+      active && `1px solid ${warning ? darken(0.1, theme.red1) : darken(0.1, theme.blue1)}`};
   }
 
   input {
@@ -116,12 +117,12 @@ const Percent = styled.div`
   font-size: 0, 8rem;
   flex-grow: 0;
   ${({ color, theme }) =>
-  (color === 'faded' &&
-    css`
+    (color === 'faded' &&
+      css`
         color: ${theme.bg1};
       `) ||
-  (color === 'red' &&
-    css`
+    (color === 'red' &&
+      css`
         color: ${theme.red1};
       `)};
 `
@@ -133,7 +134,12 @@ interface TransactionDetailsProps {
   setDeadline: (deadline: number) => void
 }
 
-export default function TransactionDetails({ setRawSlippage, rawSlippage, deadline, setDeadline }: TransactionDetailsProps) {
+export default function TransactionDetails({
+  setRawSlippage,
+  rawSlippage,
+  deadline,
+  setDeadline
+}: TransactionDetailsProps) {
   const [activeIndex, setActiveIndex] = useState(2)
 
   const [warningType, setWarningType] = useState(WARNING_TYPE.none)
@@ -148,7 +154,7 @@ export default function TransactionDetails({ setRawSlippage, rawSlippage, deadli
   const [deadlineInput, setDeadlineInput] = useState(deadline / 60)
 
   function parseCustomDeadline(e) {
-    let val = e.target.value
+    const val = e.target.value
     const acceptableValues = [/^$/, /^\d+$/]
     if (acceptableValues.some(re => re.test(val))) {
       setDeadlineInput(val)
@@ -166,7 +172,7 @@ export default function TransactionDetails({ setRawSlippage, rawSlippage, deadli
   const updateSlippage = useCallback(
     newSlippage => {
       // round to 2 decimals to prevent ethers error
-      let numParsed = newSlippage * 100
+      const numParsed = newSlippage * 100
 
       // set both slippage values in parents
       setRawSlippage(numParsed)
@@ -198,10 +204,10 @@ export default function TransactionDetails({ setRawSlippage, rawSlippage, deadli
         break
       default:
         // restrict to 2 decimal places
-        let acceptableValues = [/^$/, /^\d{1,2}$/, /^\d{0,2}\.\d{0,2}$/]
+        const acceptableValues = [/^$/, /^\d{1,2}$/, /^\d{0,2}\.\d{0,2}$/]
         // if its within accepted decimal limit, update the input state
-        if (acceptableValues.some(val => val.test('' + (initialSlippage / 100)))) {
-          setUserInput('' + (initialSlippage / 100))
+        if (acceptableValues.some(val => val.test('' + initialSlippage / 100))) {
+          setUserInput('' + initialSlippage / 100)
           setActiveIndex(4)
         }
     }
@@ -233,10 +239,10 @@ export default function TransactionDetails({ setRawSlippage, rawSlippage, deadli
 
   // check that the theyve entered number and correct decimal
   const parseInput = e => {
-    let input = e.target.value
+    const input = e.target.value
 
     // restrict to 2 decimal places
-    let acceptableValues = [/^$/, /^\d{1,2}$/, /^\d{0,2}\.\d{0,2}$/]
+    const acceptableValues = [/^$/, /^\d{1,2}$/, /^\d{0,2}\.\d{0,2}$/]
     // if its within accepted decimal limit, update the input state
     if (acceptableValues.some(a => a.test(input))) {
       setUserInput(input)
@@ -313,8 +319,8 @@ export default function TransactionDetails({ setRawSlippage, rawSlippage, deadli
                   placeholder={
                     activeIndex === 4
                       ? !!userInput
-                      ? ''
-                      : '0'
+                        ? ''
+                        : '0'
                       : activeIndex !== 4 && userInput !== ''
                       ? userInput
                       : 'Custom'
@@ -352,8 +358,8 @@ export default function TransactionDetails({ setRawSlippage, rawSlippage, deadli
                   : warningType !== WARNING_TYPE.none && warningType !== WARNING_TYPE.riskyEntryLow
                   ? 'red'
                   : warningType === WARNING_TYPE.riskyEntryLow
-                    ? '#F3841E'
-                    : ''
+                  ? '#F3841E'
+                  : ''
               }
             >
               {warningType === WARNING_TYPE.emptyInput && 'Enter a slippage percentage'}
@@ -366,12 +372,16 @@ export default function TransactionDetails({ setRawSlippage, rawSlippage, deadli
         <AutoColumn gap="sm">
           <RowFixed padding={'0 20px'}>
             <TYPE.body fontSize={14}>Deadline</TYPE.body>
-            <QuestionHelper text="Deadline in minutes. If your transaction takes longer than this it will revert."/>
+            <QuestionHelper text="Deadline in minutes. If your transaction takes longer than this it will revert." />
           </RowFixed>
           <RowFixed padding={'0 20px'}>
             <OptionCustom style={{ width: '80px' }}>
-              <Input tabIndex={-1} placeholder={'' + deadlineInput} value={deadlineInput}
-                     onChange={parseCustomDeadline}/>
+              <Input
+                tabIndex={-1}
+                placeholder={'' + deadlineInput}
+                value={deadlineInput}
+                onChange={parseCustomDeadline}
+              />
             </OptionCustom>
             <TYPE.body style={{ paddingLeft: '8px' }} fontSize={14}>
               minutes

src/components/TokenLogo/index.tsx

@@ -20,7 +20,7 @@ const Image = styled.img<{ size: string }>`
   box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
 `
 
-const Emoji = styled.span<{size?:string}>`
+const Emoji = styled.span<{ size?: string }>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -30,7 +30,7 @@ const Emoji = styled.span<{size?:string}>`
   margin-bottom: -4px;
 `
 
-const StyledEthereumLogo = styled(EthereumLogo)<{size: string}>`
+const StyledEthereumLogo = styled(EthereumLogo)<{ size: string }>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
 `

src/components/TxnPopup/index.tsx

@@ -28,7 +28,7 @@ const delay = 100
 
 export default function TxnPopup({ hash, success, summary, popKey }) {
   const { chainId } = useWeb3React()
-  let [count, setCount] = useState(1)
+  const [count, setCount] = useState(1)
 
   const [isRunning, setIsRunning] = useState(true)
   const [, , removePopup] = usePopups()
@@ -44,9 +44,9 @@ export default function TxnPopup({ hash, success, summary, popKey }) {
   return (
     <AutoRow onMouseEnter={() => setIsRunning(false)} onMouseLeave={() => setIsRunning(true)}>
       {success ? (
-        <CheckCircle color={'#27AE60'} size={24} style={{ paddingRight: '24px' }}/>
+        <CheckCircle color={'#27AE60'} size={24} style={{ paddingRight: '24px' }} />
       ) : (
-        <AlertCircle color={'#FF6871'} size={24} style={{ paddingRight: '24px' }}/>
+        <AlertCircle color={'#FF6871'} size={24} style={{ paddingRight: '24px' }} />
       )}
       <AutoColumn gap="8px">
         <TYPE.body fontWeight={500}>
@@ -54,7 +54,7 @@ export default function TxnPopup({ hash, success, summary, popKey }) {
         </TYPE.body>
         <Link href={getEtherscanLink(chainId, hash, 'transaction')}>View on Etherscan</Link>
       </AutoColumn>
-      <Fader count={count}/>
+      <Fader count={count} />
     </AutoRow>
   )
 }

src/components/WalletModal/Option.tsx

@@ -88,16 +88,16 @@ const IconWrapper = styled.div<{ size?: number }>`
 `
 
 export default function Option({
-                                 link = null,
-                                 clickable = true,
-                                 size = null,
-                                 onClick = null,
-                                 color,
-                                 header,
-                                 subheader = null,
-                                 icon,
-                                 active = false
-                               }) {
+  link = null,
+  clickable = true,
+  size = null,
+  onClick = null,
+  color,
+  header,
+  subheader = null,
+  icon,
+  active = false
+}) {
   const content = (
     <OptionCardClickable onClick={onClick} clickable={clickable && !active} active={active}>
       <OptionCardLeft>
@@ -106,7 +106,7 @@ export default function Option({
           {active ? (
             <CircleWrapper>
               <GreenCircle>
-                <div/>
+                <div />
               </GreenCircle>
             </CircleWrapper>
           ) : (
@@ -117,7 +117,7 @@ export default function Option({
         {subheader && <SubHeader>{subheader}</SubHeader>}
       </OptionCardLeft>
       <IconWrapper size={size}>
-        <img src={icon} alt={'Icon'}/>
+        <img src={icon} alt={'Icon'} />
       </IconWrapper>
     </OptionCardClickable>
   )

src/components/WalletModal/PendingView.tsx

@@ -75,10 +75,10 @@ export default function PendingView({ uri = '', size, connector, error = false,
 
   return (
     <PendingSection>
-      {!error && connector === walletconnect && <WalletConnectData size={size} uri={uri}/>}
+      {!error && connector === walletconnect && <WalletConnectData size={size} uri={uri} />}
       <LoadingMessage error={error}>
         <LoadingWrapper>
-          {!error && <SpinnerWrapper src={Circle}/>}
+          {!error && <SpinnerWrapper src={Circle} />}
           {error ? (
             <ErrorGroup>
               <div>Error connecting.</div>

src/components/WalletModal/WalletConnectData.tsx

@@ -21,7 +21,7 @@ export default function WalletConnectData({ uri = '', size }: WalletConnectDataP
   return (
     <QRCodeWrapper>
       {uri && (
-        <QRCode size={size} value={uri} bgColor={isDark ? '#333639' : 'white'} fgColor={isDark ? 'white' : 'black'}/>
+        <QRCode size={size} value={uri} bgColor={isDark ? '#333639' : 'white'} fgColor={isDark ? 'white' : 'black'} />
       )}
     </QRCodeWrapper>
   )

src/components/WalletModal/index.tsx

@@ -286,7 +286,7 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
       return (
         <UpperSection>
           <CloseIcon onClick={toggleWalletModal}>
-            <CloseColor/>
+            <CloseColor />
           </CloseIcon>
           <HeaderRow>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'}</HeaderRow>
           <ContentWrapper>
@@ -313,7 +313,7 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
     return (
       <UpperSection>
         <CloseIcon onClick={toggleWalletModal}>
-          <CloseColor/>
+          <CloseColor />
         </CloseIcon>
         {walletView !== WALLET_VIEWS.ACCOUNT ? (
           <HeaderRow color="blue">
@@ -358,12 +358,7 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
   }
 
   return (
-    <Modal
-      isOpen={walletModalOpen}
-      onDismiss={toggleWalletModal}
-      minHeight={null}
-      maxHeight={90}
-    >
+    <Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={null} maxHeight={90}>
       <Wrapper>{getModalContent()}</Wrapper>
     </Modal>
   )

src/components/Web3Status/index.tsx

@@ -76,8 +76,8 @@ const Web3StatusConnect = styled(Web3StatusGeneric)`
   }
 
   ${({ faded }) =>
-  faded &&
-  css`
+    faded &&
+    css`
       background-color: ${({ theme }) => theme.blue5};
       border: 1px solid ${({ theme }) => theme.blue5};
       color: ${({ theme }) => theme.buttonSecondaryText};
@@ -140,29 +140,29 @@ export default function Web3Status() {
   // handle the logo we want to show with the account
   function getStatusIcon() {
     if (connector === injected) {
-      return <Identicon/>
+      return <Identicon />
     } else if (connector === walletconnect) {
       return (
         <IconWrapper size={16}>
-          <img src={WalletConnectIcon} alt={''}/>
+          <img src={WalletConnectIcon} alt={''} />
         </IconWrapper>
       )
     } else if (connector === walletlink) {
       return (
         <IconWrapper size={16}>
-          <img src={CoinbaseWalletIcon} alt={''}/>
+          <img src={CoinbaseWalletIcon} alt={''} />
         </IconWrapper>
       )
     } else if (connector === fortmatic) {
       return (
         <IconWrapper size={16}>
-          <img src={FortmaticIcon} alt={''}/>
+          <img src={FortmaticIcon} alt={''} />
         </IconWrapper>
       )
     } else if (connector === portis) {
       return (
         <IconWrapper size={16}>
-          <img src={PortisIcon} alt={''}/>
+          <img src={PortisIcon} alt={''} />
         </IconWrapper>
       )
     }
@@ -174,7 +174,7 @@ export default function Web3Status() {
         <Web3StatusConnected onClick={toggleWalletModal} pending={hasPendingTransactions}>
           {hasPendingTransactions ? (
             <RowBetween>
-              <Text>{pending?.length} Pending</Text> <SpinnerWrapper src={LightCircle} alt="loader"/>
+              <Text>{pending?.length} Pending</Text> <SpinnerWrapper src={LightCircle} alt="loader" />
             </RowBetween>
           ) : (
             <Text>{ENSName || shortenAddress(account)}</Text>
@@ -185,7 +185,7 @@ export default function Web3Status() {
     } else if (error) {
       return (
         <Web3StatusError onClick={toggleWalletModal}>
-          <NetworkIcon/>
+          <NetworkIcon />
           <Text>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error'}</Text>
         </Web3StatusError>
       )
@@ -205,7 +205,7 @@ export default function Web3Status() {
   return (
     <>
       {getWeb3Status()}
-      <WalletModal ENSName={ENSName} pendingTransactions={pending} confirmedTransactions={confirmed}/>
+      <WalletModal ENSName={ENSName} pendingTransactions={pending} confirmedTransactions={confirmed} />
     </>
   )
 }

src/connectors/Fortmatic.ts

@@ -14,10 +14,7 @@ export class FortmaticConnector extends FortmaticConnectorCore {
     if (!this.fortmatic) {
       const { default: Fortmatic } = await import('fortmatic')
       const { apiKey, chainId } = this as any
-      this.fortmatic = new Fortmatic(
-        apiKey,
-        chainId === 1 || chainId === 4 ? undefined : chainIdToNetwork[chainId]
-      )
+      this.fortmatic = new Fortmatic(apiKey, chainId === 1 || chainId === 4 ? undefined : chainIdToNetwork[chainId])
     }
 
     const provider = this.fortmatic.getProvider()

src/connectors/Network.ts

@@ -3,13 +3,13 @@ import { NetworkConnector as NetworkConnectorCore } from '@web3-react/network-co
 export class NetworkConnector extends NetworkConnectorCore {
   pause() {
     if ((this as any).active) {
-      (this as any).providers[(this as any).currentChainId].stop()
+      ;(this as any).providers[(this as any).currentChainId].stop()
     }
   }
 
   resume() {
     if ((this as any).active) {
-      (this as any).providers[(this as any).currentChainId].start()
+      ;(this as any).providers[(this as any).currentChainId].start()
     }
   }
 }

src/contexts/Application.tsx

@@ -17,22 +17,25 @@ const USER_ADVANCED = 'USER_ADVANCED'
 const TOGGLE_USER_ADVANCED = 'TOGGLE_USER_ADVANCED'
 
 interface ApplicationState {
-  BLOCK_NUMBER: {},
-  USD_PRICE: {},
-  POPUP_LIST: Array<{ key: number; show: boolean; content: React.ReactElement }>,
-  POPUP_KEY: number,
-  WALLET_MODAL_OPEN: boolean,
+  BLOCK_NUMBER: {}
+  USD_PRICE: {}
+  POPUP_LIST: Array<{ key: number; show: boolean; content: React.ReactElement }>
+  POPUP_KEY: number
+  WALLET_MODAL_OPEN: boolean
   USER_ADVANCED: boolean
 }
 
-const ApplicationContext = createContext<[ApplicationState, { [updater: string]: (...args: any[]) => void }]>([{
-  [BLOCK_NUMBER]: {},
-  [USD_PRICE]: {},
-  [POPUP_LIST]: [],
-  [POPUP_KEY]: 0,
-  [WALLET_MODAL_OPEN]: false,
-  [USER_ADVANCED]: false
-}, {}])
+const ApplicationContext = createContext<[ApplicationState, { [updater: string]: (...args: any[]) => void }]>([
+  {
+    [BLOCK_NUMBER]: {},
+    [USD_PRICE]: {},
+    [POPUP_LIST]: [],
+    [POPUP_KEY]: 0,
+    [WALLET_MODAL_OPEN]: false,
+    [USER_ADVANCED]: false
+  },
+  {}
+])
 
 function useApplicationContext() {
   return useContext(ApplicationContext)
@@ -80,9 +83,12 @@ export default function Provider({ children }) {
     [USER_ADVANCED]: false
   })
 
-  const updateBlockNumber = useCallback((networkId, blockNumber) => {
-    dispatch({ type: UPDATE_BLOCK_NUMBER, payload: { networkId, blockNumber } })
-  }, [dispatch])
+  const updateBlockNumber = useCallback(
+    (networkId, blockNumber) => {
+      dispatch({ type: UPDATE_BLOCK_NUMBER, payload: { networkId, blockNumber } })
+    },
+    [dispatch]
+  )
 
   const toggleWalletModal = useCallback(() => {
     dispatch({ type: TOGGLE_WALLET_MODAL, payload: null })
@@ -92,9 +98,12 @@ export default function Provider({ children }) {
     dispatch({ type: TOGGLE_USER_ADVANCED, payload: null })
   }, [dispatch])
 
-  const setPopups = useCallback(newList => {
-    dispatch({ type: ADD_POPUP, payload: { newList } })
-  }, [dispatch])
+  const setPopups = useCallback(
+    newList => {
+      dispatch({ type: ADD_POPUP, payload: { newList } })
+    },
+    [dispatch]
+  )
 
   return (
     <ApplicationContext.Provider
@@ -180,7 +189,11 @@ export function useToggleUserAdvanced() {
   return toggleUserAdvanced
 }
 
-export function usePopups(): [ApplicationState['POPUP_LIST'], (content: React.ReactElement) => void, (key: number) => void] {
+export function usePopups(): [
+  ApplicationState['POPUP_LIST'],
+  (content: React.ReactElement) => void,
+  (key: number) => void
+] {
   const [state, { setPopups }] = useApplicationContext()
 
   const index = state[POPUP_KEY]

src/contexts/Balances.tsx

@@ -411,7 +411,7 @@ export function useAllBalances(): Array<TokenAmount> {
     if (!state || !state[chainId]) {
       return {}
     } else {
-      let newBalances = {}
+      const newBalances = {}
       Object.keys(state[chainId]).map(address => {
         return Object.keys(state[chainId][address]).map(tokenAddress => {
           if (state[chainId][address][tokenAddress].value) {

src/contexts/Transactions.tsx

@@ -16,9 +16,7 @@ const ADD = 'ADD'
 const CHECK = 'CHECK'
 const FINALIZE = 'FINALIZE'
 
-interface TransactionState {
-
-}
+interface TransactionState {}
 
 const TransactionsContext = createContext<[TransactionState, { [updater: string]: (...args: any[]) => void }]>([{}, {}])
 
@@ -138,12 +136,22 @@ export function Updater() {
                   finalize(chainId, hash, receipt)
                   // add success or failure popup
                   if (receipt.status === 1) {
-                    addPopup(<TxnPopup popKey={1} hash={hash} success={true}
-                                       summary={allTransactions[hash]?.response?.summary}/>)
+                    addPopup(
+                      <TxnPopup
+                        popKey={1}
+                        hash={hash}
+                        success={true}
+                        summary={allTransactions[hash]?.response?.summary}
+                      />
+                    )
                   } else {
                     addPopup(
-                      <TxnPopup popKey={2} hash={hash} success={false}
-                                summary={allTransactions[hash]?.response?.summary}/>
+                      <TxnPopup
+                        popKey={2}
+                        hash={hash}
+                        success={false}
+                        summary={allTransactions[hash]?.response?.summary}
+                      />
                     )
                   }
                 }

src/hooks/useInterval.ts

@@ -6,8 +6,6 @@ export default function useInterval(callback: () => void, delay: null | number)
   // Remember the latest callback.
   useEffect(() => {
     savedCallback.current = callback
-    return () => {
-    }
   }, [callback])
 
   // Set up the interval.
@@ -17,10 +15,8 @@ export default function useInterval(callback: () => void, delay: null | number)
     }
 
     if (delay !== null) {
-      let id = setInterval(tick, delay)
+      const id = setInterval(tick, delay)
       return () => clearInterval(id)
     }
-    return () => {
-    }
   }, [delay])
-}
\ No newline at end of file
+}

src/pages/App.tsx

@@ -99,21 +99,21 @@ export default function App() {
         <BrowserRouter>
           <AppWrapper>
             <HeaderWrapper>
-              <Header/>
+              <Header />
             </HeaderWrapper>
             <BodyWrapper>
-              <Popups/>
+              <Popups />
               <Body>
                 <Web3ReactManager>
-                  <NavigationTabs/>
+                  <NavigationTabs />
                   {/* this Suspense is for route code-splitting */}
                   <Switch>
-                    <Route exact strict path="/" render={() => <Redirect to="/swap"/>}/>
-                    <Route exact strict path="/swap" component={() => <Swap params={params}/>}/>
-                    <Route exact strict path="/send" component={() => <Send params={params}/>}/>
-                    <Route exact strict path="/find" component={() => <Find/>}/>
-                    <Route exact strict path="/create" component={() => <Create/>}/>
-                    <Route exact strict path="/pool" component={() => <Pool/>}/>
+                    <Route exact strict path="/" render={() => <Redirect to="/swap" />} />
+                    <Route exact strict path="/swap" component={() => <Swap params={params} />} />
+                    <Route exact strict path="/send" component={() => <Send params={params} />} />
+                    <Route exact strict path="/find" component={() => <Find />} />
+                    <Route exact strict path="/create" component={() => <Create />} />
+                    <Route exact strict path="/pool" component={() => <Pool />} />
                     <Route
                       exact
                       strict
@@ -127,7 +127,7 @@ export default function App() {
                         if (t0 && t1) {
                           return <Add token0={t0} token1={t1} />
                         } else {
-                          return <Redirect to="/pool"/>
+                          return <Redirect to="/pool" />
                         }
                       }}
                     />
@@ -142,19 +142,19 @@ 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}/>
+                          return <Remove token0={t0} token1={t1} />
                         } else {
-                          return <Redirect to="/pool"/>
+                          return <Redirect to="/pool" />
                         }
                       }}
                     />
-                    <Redirect to="/"/>
+                    <Redirect to="/" />
                   </Switch>
                 </Web3ReactManager>
               </Body>
-              <Footer/>
+              <Footer />
             </BodyWrapper>
-            <StyledRed/>
+            <StyledRed />
           </AppWrapper>
         </BrowserRouter>
       </Suspense>

src/pages/Pool/AddLiquidity.tsx

@@ -675,7 +675,7 @@ function AddLiquidity({ token0, token1 }: AddLiquidityProps) {
     )
   }
 
-  const pendingText: string = `Supplying ${parsedAmounts[Field.INPUT]?.toSignificant(6)} ${
+  const pendingText = `Supplying ${parsedAmounts[Field.INPUT]?.toSignificant(6)} ${
     tokens[Field.INPUT]?.symbol
   } ${'and'} ${parsedAmounts[Field.OUTPUT]?.toSignificant(6)} ${tokens[Field.OUTPUT]?.symbol}`
 

src/pages/Pool/RemoveLiquidity.tsx

@@ -179,15 +179,15 @@ export default function RemoveLiquidity({ token0, token1 }) {
 
   const TokensDeposited: { [field: number]: TokenAmount } = {
     [Field.TOKEN0]:
-    pair &&
-    totalPoolTokens &&
-    userLiquidity &&
-    pair.getLiquidityValue(tokens[Field.TOKEN0], totalPoolTokens, userLiquidity, false),
+      pair &&
+      totalPoolTokens &&
+      userLiquidity &&
+      pair.getLiquidityValue(tokens[Field.TOKEN0], totalPoolTokens, userLiquidity, false),
     [Field.TOKEN1]:
-    pair &&
-    totalPoolTokens &&
-    userLiquidity &&
-    pair.getLiquidityValue(tokens[Field.TOKEN1], totalPoolTokens, userLiquidity, false)
+      pair &&
+      totalPoolTokens &&
+      userLiquidity &&
+      pair.getLiquidityValue(tokens[Field.TOKEN1], totalPoolTokens, userLiquidity, false)
   }
 
   const route: Route = pair
@@ -282,7 +282,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
     )
   }
 
-  const handleSliderChange = (newPercent) => {
+  const handleSliderChange = newPercent => {
     onUserInput(
       Field.LIQUIDITY,
       new TokenAmount(
@@ -482,13 +482,13 @@ export default function RemoveLiquidity({ token0, token1 }) {
           addTransaction(
             response,
             'Remove ' +
-            parsedAmounts[Field.TOKEN0]?.toSignificant(3) +
-            ' ' +
-            tokens[Field.TOKEN0]?.symbol +
-            ' and ' +
-            parsedAmounts[Field.TOKEN1]?.toSignificant(3) +
-            ' ' +
-            tokens[Field.TOKEN1]?.symbol
+              parsedAmounts[Field.TOKEN0]?.toSignificant(3) +
+              ' ' +
+              tokens[Field.TOKEN0]?.symbol +
+              ' and ' +
+              parsedAmounts[Field.TOKEN1]?.toSignificant(3) +
+              ' ' +
+              tokens[Field.TOKEN1]?.symbol
           )
         })
       )
@@ -514,21 +514,21 @@ export default function RemoveLiquidity({ token0, token1 }) {
             {!!parsedAmounts[Field.TOKEN0] && parsedAmounts[Field.TOKEN0].toSignificant(6)}
           </Text>
           <RowFixed gap="4px">
-            <TokenLogo address={tokens[Field.TOKEN0]?.address} size={'24px'}/>
+            <TokenLogo address={tokens[Field.TOKEN0]?.address} size={'24px'} />
             <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
               {tokens[Field.TOKEN0]?.symbol || ''}
             </Text>
           </RowFixed>
         </RowBetween>
         <RowFixed>
-          <Plus size="16" color={'#888D9B'}/>
+          <Plus size="16" color={'#888D9B'} />
         </RowFixed>
         <RowBetween align="flex-end">
           <Text fontSize={24} fontWeight={600}>
             {!!parsedAmounts[Field.TOKEN1] && parsedAmounts[Field.TOKEN1].toSignificant(6)}
           </Text>
           <RowFixed gap="4px">
-            <TokenLogo address={tokens[Field.TOKEN1]?.address} size={'24px'}/>
+            <TokenLogo address={tokens[Field.TOKEN1]?.address} size={'24px'} />
             <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
               {tokens[Field.TOKEN1]?.symbol || ''}
             </Text>
@@ -596,7 +596,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
     )
   }
 
-  const pendingText: string = `Removing ${parsedAmounts[Field.TOKEN0]?.toSignificant(6)} ${
+  const pendingText = `Removing ${parsedAmounts[Field.TOKEN0]?.toSignificant(6)} ${
     tokens[Field.TOKEN0]?.symbol
   } and ${parsedAmounts[Field.TOKEN1]?.toSignificant(6)} ${tokens[Field.TOKEN1]?.symbol}`
 
@@ -637,7 +637,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
               </Text>
             </Row>
             {!showAdvanced && (
-              <Slider value={parseFloat(derivedPerecent)} onChange={handleSliderChange} override={override}/>
+              <Slider value={parseFloat(derivedPerecent)} onChange={handleSliderChange} override={override} />
             )}
             {!showAdvanced && (
               <RowBetween>
@@ -660,7 +660,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
         {!showAdvanced && (
           <>
             <ColumnCenter>
-              <ArrowDown size="16" color="#888D9B"/>
+              <ArrowDown size="16" color="#888D9B" />
             </ColumnCenter>{' '}
             <LightCard>
               <AutoColumn gap="10px">
@@ -669,7 +669,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
                     {formattedAmounts[Field.TOKEN0] ? formattedAmounts[Field.TOKEN0] : '-'}
                   </Text>
                   <RowFixed>
-                    <TokenLogo address={tokens[Field.TOKEN0]?.address || ''} style={{ marginRight: '12px' }}/>
+                    <TokenLogo address={tokens[Field.TOKEN0]?.address || ''} style={{ marginRight: '12px' }} />
                     <Text fontSize={24} fontWeight={500}>
                       {tokens[Field.TOKEN0]?.symbol}
                     </Text>
@@ -680,7 +680,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
                     {formattedAmounts[Field.TOKEN1] ? formattedAmounts[Field.TOKEN1] : '-'}
                   </Text>
                   <RowFixed>
-                    <TokenLogo address={tokens[Field.TOKEN1]?.address || ''} style={{ marginRight: '12px' }}/>
+                    <TokenLogo address={tokens[Field.TOKEN1]?.address || ''} style={{ marginRight: '12px' }} />
                     <Text fontSize={24} fontWeight={500}>
                       {tokens[Field.TOKEN1]?.symbol}
                     </Text>
@@ -706,7 +706,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
               inputId="liquidityAmount"
             />
             <ColumnCenter>
-              <ArrowDown size="16" color="#888D9B"/>
+              <ArrowDown size="16" color="#888D9B" />
             </ColumnCenter>
             <CurrencyInputPanel
               field={Field.TOKEN0}
@@ -720,7 +720,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
               inputId="removeLiquidityToken0"
             />
             <ColumnCenter>
-              <Plus size="16" color="#888D9B"/>
+              <Plus size="16" color="#888D9B" />
             </ColumnCenter>
             <CurrencyInputPanel
               field={Field.TOKEN1}

src/pages/Pool/index.tsx

 import React, { useState, useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 import { JSBI } from '@uniswap/sdk'
-import { withRouter } from 'react-router-dom'
+import { RouteComponentProps, withRouter } from 'react-router-dom'
 
 import Question from '../../components/Question'
 import SearchModal from '../../components/SearchModal'
@@ -29,7 +29,7 @@ const FixedBottom = styled.div`
   width: 100%;
 `
 
-function Supply({ history }) {
+function Supply({ history }: RouteComponentProps) {
   const { account } = useWeb3React()
   const [showPoolSearch, setShowPoolSearch] = useState(false)
 
@@ -42,7 +42,7 @@ function Supply({ history }) {
   useAccountLPBalances(account)
 
   const filteredExchangeList = Object.keys(allPairs)
-    .filter((pairAddress, i) => {
+    .filter(pairAddress => {
       return (
         allBalances &&
         allBalances[account] &&

src/pages/Swap/index.tsx

 import React from 'react'
 import ExchangePage from '../../components/ExchangePage'
+import { QueryParams } from '../../utils'
 
-export default function Swap({ params }) {
+export default function Swap({ params }: { params: QueryParams }) {
   return <ExchangePage sendingInput={false} params={params} />
 }

src/theme/components.tsx

@@ -2,10 +2,9 @@ import styled, { keyframes } from 'styled-components'
 import { darken } from 'polished'
 import { X } from 'react-feather'
 
-export const Button = styled.button.attrs<{ warning: boolean }, { backgroundColor: string }>(
-  ({ warning, theme }) => ({
-    backgroundColor: warning ? theme.red1 : theme.blue1
-  }))`
+export const Button = styled.button.attrs<{ warning: boolean }, { backgroundColor: string }>(({ warning, theme }) => ({
+  backgroundColor: warning ? theme.red1 : theme.blue1
+}))`
   padding: 1rem 2rem 1rem 2rem;
   border-radius: 3rem;
   cursor: pointer;
@@ -33,7 +32,7 @@ export const Button = styled.button.attrs<{ warning: boolean }, { backgroundColo
   }
 `
 
-export const CloseIcon = styled(X)<{ onClick: () => void}>`
+export const CloseIcon = styled(X)<{ onClick: () => void }>`
   cursor: pointer;
 `
 

src/theme/index.tsx

 import React, { useEffect } from 'react'
-import styled, {
-  ThemeProvider as StyledComponentsThemeProvider,
-  createGlobalStyle,
-  css,
-} from 'styled-components'
+import styled, { ThemeProvider as StyledComponentsThemeProvider, createGlobalStyle, css } from 'styled-components'
 import { getQueryParam, checkSupportedTheme } from '../utils'
 import { SUPPORTED_THEMES } from '../constants'
 import { useDarkModeManager } from '../contexts/LocalStorage'
@@ -19,16 +15,17 @@ const MEDIA_WIDTHS = {
   upToLarge: 1280
 }
 
-const mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css } =
-  Object.keys(MEDIA_WIDTHS)
-    .reduce((accumulator, size) => {
-      accumulator[size] = (a, b, c) => css`
-    @media (max-width: ${MEDIA_WIDTHS[size]}px) {
-      ${css(a, b, c)}
-    }
-  `
-      return accumulator
-    }, {}) as any
+const mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css } = Object.keys(MEDIA_WIDTHS).reduce(
+  (accumulator, size) => {
+    accumulator[size] = (a, b, c) => css`
+      @media (max-width: ${MEDIA_WIDTHS[size]}px) {
+        ${css(a, b, c)}
+      }
+    `
+    return accumulator
+  },
+  {}
+) as any
 
 const white = '#FFFFFF'
 const black = '#000000'
@@ -40,8 +37,8 @@ export default function ThemeProvider({ children }) {
     ? themeURL.toUpperCase() === SUPPORTED_THEMES.DARK
       ? true
       : themeURL.toUpperCase() === SUPPORTED_THEMES.LIGHT
-        ? false
-        : darkMode
+      ? false
+      : darkMode
     : darkMode
   useEffect(() => {
     toggleDarkMode(themeToRender)

src/theme/styled.d.ts

@@ -44,23 +44,21 @@ export interface UniswapTheme {
   yellow2: string
 
   grids: {
-    sm: number,
-    md: number,
+    sm: number
+    md: number
     lg: number
-  },
+  }
 
   // shadows
   shadow1: string
 
   // media queries
-  mediaWidth: { [width in keyof typeof MEDIA_WIDTHS]: typeof css },
+  mediaWidth: { [width in keyof typeof MEDIA_WIDTHS]: typeof css }
   // css snippets
   flexColumnNoWrap: FlattenSimpleInterpolation
   flexRowNoWrap: FlattenSimpleInterpolation
 }
 
 declare module 'styled-components' {
-  export interface DefaultTheme extends UniswapTheme {
-  }
+  export interface DefaultTheme extends UniswapTheme {}
 }
-

src/utils/index.test.ts

@@ -9,4 +9,4 @@ describe('utils', () => {
       expect(getEtherscanLink(1, 'abc', 'address')).toEqual('https://etherscan.io/address/abc')
     })
   })
-})
\ No newline at end of file
+})

src/utils/index.ts

@@ -12,6 +12,14 @@ import { ROUTER_ADDRESS, SUPPORTED_THEMES } from '../constants'
 import ERC20_ABI from '../constants/abis/erc20.json'
 import ERC20_BYTES32_ABI from '../constants/abis/erc20_bytes32.json'
 
+export function isAddress(value: any): string | false {
+  try {
+    return getAddress(value.toLowerCase())
+  } catch {
+    return false
+  }
+}
+
 export enum ERROR_CODES {
   TOKEN_SYMBOL = 1,
   TOKEN_DECIMALS = 2
@@ -49,7 +57,7 @@ export function getEtherscanLink(networkId: 1 | 3 | 4 | 5 | 42 | any, data: stri
 }
 
 export function getQueryParam(windowLocation, name) {
-  var q = windowLocation.search.match(new RegExp('[?&]' + name + '=([^&#?]*)'))
+  const q = windowLocation.search.match(new RegExp('[?&]' + name + '=([^&#?]*)'))
   return q && q[1]
 }
 
@@ -122,18 +130,6 @@ export function shortenAddress(address, digits = 4) {
   return `${address.substring(0, digits + 2)}...${address.substring(42 - digits)}`
 }
 
-export function shortenTransactionHash(hash, digits = 4) {
-  return `${hash.substring(0, digits + 2)}...${hash.substring(66 - digits)}`
-}
-
-export function isAddress(value: any): string | false {
-  try {
-    return getAddress(value.toLowerCase())
-  } catch {
-    return false
-  }
-}
-
 export function calculateGasMargin(value: BigNumber) {
   return value.mul(BigNumber.from(10000).add(BigNumber.from(1000))).div(BigNumber.from(10000)) // add 10%
 }

yarn.lock

@@ -2630,7 +2630,7 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^2.10.0":
+"@typescript-eslint/eslint-plugin@^2.10.0", "@typescript-eslint/eslint-plugin@^2.31.0":
   version "2.31.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.31.0.tgz#942c921fec5e200b79593c71fafb1e3f57aa2e36"
   integrity sha512-iIC0Pb8qDaoit+m80Ln/aaeu9zKQdOLF4SHcGLarSeY1gurW6aU4JsOPMjKQwXlw70MvWKZQc6S2NamA8SJ/gg==
@@ -2650,7 +2650,7 @@
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
-"@typescript-eslint/parser@^2.10.0":
+"@typescript-eslint/parser@^2.10.0", "@typescript-eslint/parser@^2.31.0":
   version "2.31.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.31.0.tgz#beddd4e8efe64995108b229b2862cd5752d40d6f"
   integrity sha512-uph+w6xUOlyV2DLSC6o+fBDzZ5i7+3/TxAsH4h3eC64tlga57oMb96vVlXoMwjR/nN+xyWlsnxtbDkB46M2EPQ==
@@ -6772,6 +6772,13 @@ escodegen@^1.11.0, escodegen@^1.9.1:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-config-prettier@^6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz#f6d2238c1290d01c859a8b5c1f7d352a0b0da8b1"
+  integrity sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==
+  dependencies:
+    get-stdin "^6.0.0"
+
 eslint-config-react-app@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz#698bf7aeee27f0cea0139eaef261c7bf7dd623df"
@@ -6846,12 +6853,19 @@ eslint-plugin-jsx-a11y@6.2.3:
     has "^1.0.3"
     jsx-ast-utils "^2.2.1"
 
+eslint-plugin-prettier@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.3.tgz#ae116a0fc0e598fdae48743a4430903de5b4e6ca"
+  integrity sha512-+HG5jmu/dN3ZV3T6eCD7a4BlAySdN7mLIbJYo0z1cFQuI+r2DiTJEFeF68ots93PsnrMxbzIZ2S/ieX+mkrBeQ==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-react-hooks@^1.6.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
   integrity sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==
 
-eslint-plugin-react@7.19.0:
+eslint-plugin-react@7.19.0, eslint-plugin-react@^7.19.0:
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz#6d08f9673628aa69c5559d33489e855d83551666"
   integrity sha512-SPT8j72CGuAP+JFbT0sJHOB80TX/pu44gQ4vXH/cq+hQTiY2PuZ6IHkqXJV6x1b28GDdo1lbInjKUrrdUf0LOQ==
@@ -6904,7 +6918,7 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
   integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
-eslint@^6.6.0:
+eslint@^6.6.0, eslint@^6.8.0:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
   integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
@@ -7800,6 +7814,11 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
   integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^2.0.2:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -8376,6 +8395,11 @@ get-own-enumerable-property-symbols@^3.0.0:
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
   integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
 
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
+
 get-stream@^2.2.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-2.3.1.tgz#5f38f93f346009666ee0150a054167f91bdd95de"
@@ -13448,6 +13472,13 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
 prettier@^1.17.0:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"