Fix more linting errors

.eslintrc.json

@@ -24,6 +24,9 @@
   ],
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
-    "prettier/prettier": "error"
+    "prettier/prettier": "error",
+    "react/prop-types": "warn",
+    "@typescript-eslint/no-empty-function": "warn",
+    "react/display-name": "warn"
   }
 }

cypress/plugins/index.js

@@ -15,7 +15,7 @@
 /**
  * @type {Cypress.PluginConfig}
  */
-module.exports = (on, config) => {
+module.exports = () => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 }

src/components/AccountDetails/Transaction.tsx

@@ -70,7 +70,7 @@ const ButtonWrapper = styled.div<{ pending: boolean }>`
   }
 `
 
-export default function Transaction({ hash, pending }) {
+export default function Transaction({ hash, pending }: { hash: string; pending: boolean }) {
   const { chainId } = useWeb3React()
   const allTransactions = useAllTransactions()
 

src/components/AccountDetails/index.tsx

@@ -223,13 +223,21 @@ function renderTransactions(transactions, pending) {
   )
 }
 
+interface AccountDetailsProps {
+  toggleWalletModal: () => void
+  pendingTransactions: any[]
+  confirmedTransactions: any[]
+  ENSName?: string
+  openOptions: () => void
+}
+
 export default function AccountDetails({
   toggleWalletModal,
   pendingTransactions,
   confirmedTransactions,
   ENSName,
   openOptions
-}) {
+}: AccountDetailsProps) {
   const { chainId, account, connector } = useWeb3React()
   const theme = useContext(ThemeContext)
 

src/components/AddressInputPanel/index.tsx

@@ -63,7 +63,15 @@ const Input = styled.input<{ error: boolean }>`
 //   border-radius: 8px;
 // `
 
-export default function AddressInputPanel({ initialInput = '', onChange, onError }) {
+export default function AddressInputPanel({
+  initialInput = '',
+  onChange,
+  onError
+}: {
+  initialInput?: string
+  onChange: (val: { address: string; name?: string }) => void
+  onError: (error: boolean, input: string) => void
+}) {
   const { library } = useWeb3React()
 
   const [input, setInput] = useState(initialInput ? initialInput : '')

src/components/ExchangePage/index.tsx

@@ -353,6 +353,17 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
   const showInputApprove: boolean =
     parsedAmounts[Field.INPUT] && inputApproval && JSBI.greaterThan(parsedAmounts[Field.INPUT].raw, inputApproval.raw)
 
+  // reset modal state when closed
+  function resetModal() {
+    // clear input if txn submitted
+    if (!pendingConfirmation) {
+      onUserInput(Field.INPUT, '')
+    }
+    setPendingConfirmation(true)
+    setAttemptingTxn(false)
+    setShowAdvanced(false)
+  }
+
   // function for a pure send
   async function onSend() {
     setAttemptingTxn(true)
@@ -644,17 +655,6 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
   const warningHigh: boolean =
     slippageFromTrade && parseFloat(slippageFromTrade.toFixed(4)) > ALLOWED_SLIPPAGE_HIGH / 100
 
-  // reset modal state when closed
-  function resetModal() {
-    // clear input if txn submitted
-    if (!pendingConfirmation) {
-      onUserInput(Field.INPUT, '')
-    }
-    setPendingConfirmation(true)
-    setAttemptingTxn(false)
-    setShowAdvanced(false)
-  }
-
   function modalHeader() {
     if (sending && !sendingWithSwap) {
       return (

src/components/Header/index.tsx

@@ -133,7 +133,7 @@ const MigrateBanner = styled(AutoColumn)`
   `};
 `
 
-function Header({ history }) {
+export default function Header() {
   const { account, chainId } = useWeb3React()
 
   const userEthBalance = useAddressBalance(account, WETH[chainId])
@@ -196,5 +196,3 @@ function Header({ history }) {
     </HeaderFrame>
   )
 }
-
-export default withRouter(Header)

src/components/NumericalInput/index.tsx

@@ -45,8 +45,20 @@ function escapeRegExp(string: string): string {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // $& means the whole matched string
 }
 
-export const Input = React.memo(({ value, onUserInput, placeHolder = null, ...rest }: any) => {
+export const Input = React.memo(function InnerInput({
-  function enforcer(nextUserInput: string) {
+  value,
+  onUserInput,
+  placeHolder,
+  ...rest
+}: {
+  value: string | number
+  onUserInput: (string) => void
+  placeHolder?: string
+  align?: 'right' | 'left'
+  id?: string
+  onClick?: () => void
+}) {
+  const enforcer = (nextUserInput: string) => {
     if (nextUserInput === '' || inputRegex.test(escapeRegExp(nextUserInput))) {
       onUserInput(nextUserInput)
     }

src/components/PoolFinder/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { withRouter } from 'react-router-dom'
+import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { TokenAmount, JSBI, Token, Pair } from '@uniswap/sdk'
 
 import Row from '../Row'
@@ -21,7 +21,7 @@ import { useWeb3React } from '@web3-react/core'
 import { useAddressBalance } from '../../contexts/Balances'
 import { usePair, useAllPairs } from '../../contexts/Pairs'
 
-function PoolFinder({ history }) {
+function PoolFinder({ history }: RouteComponentProps) {
   const Fields = {
     TOKEN0: 0,
     TOKEN1: 1

src/components/Question/index.tsx

@@ -62,7 +62,7 @@ const Popup = styled.div`
   `}
 `
 
-export default function QuestionHelper({ text }) {
+export default function QuestionHelper({ text }: { text: string }) {
   const [showPopup, setPopup] = useState(false)
 
   return (

src/components/SlippageTabs/index.tsx

@@ -153,22 +153,6 @@ export default function TransactionDetails({
 
   const [deadlineInput, setDeadlineInput] = useState(deadline / 60)
 
-  function parseCustomDeadline(e) {
-    const val = e.target.value
-    const acceptableValues = [/^$/, /^\d+$/]
-    if (acceptableValues.some(re => re.test(val))) {
-      setDeadlineInput(val)
-      setDeadline(val * 60)
-    }
-  }
-
-  const setFromCustom = () => {
-    setActiveIndex(4)
-    inputRef.current.focus()
-    // if there's a value, evaluate the bounds
-    checkBounds(debouncedInput)
-  }
-
   const updateSlippage = useCallback(
     newSlippage => {
       // round to 2 decimals to prevent ethers error
@@ -180,6 +164,45 @@ export default function TransactionDetails({
     [setRawSlippage]
   )
 
+  const checkBounds = useCallback(
+    slippageValue => {
+      setWarningType(WARNING_TYPE.none)
+
+      if (slippageValue === '' || slippageValue === '.') {
+        return setWarningType(WARNING_TYPE.emptyInput)
+      }
+
+      // check bounds and set errors
+      if (Number(slippageValue) < 0 || Number(slippageValue) > 50) {
+        return setWarningType(WARNING_TYPE.invalidEntryBound)
+      }
+      if (Number(slippageValue) >= 0 && Number(slippageValue) < 0.1) {
+        setWarningType(WARNING_TYPE.riskyEntryLow)
+      }
+      if (Number(slippageValue) > 5) {
+        setWarningType(WARNING_TYPE.riskyEntryHigh)
+      }
+      //update the actual slippage value in parent
+      updateSlippage(Number(slippageValue))
+    },
+    [updateSlippage]
+  )
+
+  function parseCustomDeadline(e) {
+    const val = e.target.value
+    const acceptableValues = [/^$/, /^\d+$/]
+    if (acceptableValues.some(re => re.test(val))) {
+      setDeadlineInput(val)
+      setDeadline(val * 60)
+    }
+  }
+  const setFromCustom = () => {
+    setActiveIndex(4)
+    inputRef.current.focus()
+    // if there's a value, evaluate the bounds
+    checkBounds(debouncedInput)
+  }
+
   // used for slippage presets
   const setFromFixed = useCallback(
     (index, slippage) => {
@@ -213,30 +236,6 @@ export default function TransactionDetails({
     }
   }, [initialSlippage, setFromFixed])
 
-  const checkBounds = useCallback(
-    slippageValue => {
-      setWarningType(WARNING_TYPE.none)
-
-      if (slippageValue === '' || slippageValue === '.') {
-        return setWarningType(WARNING_TYPE.emptyInput)
-      }
-
-      // check bounds and set errors
-      if (Number(slippageValue) < 0 || Number(slippageValue) > 50) {
-        return setWarningType(WARNING_TYPE.invalidEntryBound)
-      }
-      if (Number(slippageValue) >= 0 && Number(slippageValue) < 0.1) {
-        setWarningType(WARNING_TYPE.riskyEntryLow)
-      }
-      if (Number(slippageValue) > 5) {
-        setWarningType(WARNING_TYPE.riskyEntryHigh)
-      }
-      //update the actual slippage value in parent
-      updateSlippage(Number(slippageValue))
-    },
-    [updateSlippage]
-  )
-
   // check that the theyve entered number and correct decimal
   const parseInput = e => {
     const input = e.target.value

src/contexts/Allowances.tsx

@@ -1,13 +1,27 @@
-import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
+import { BigintIsh, Token, TokenAmount, WETH } from '@uniswap/sdk'
-import { Token, TokenAmount, WETH } from '@uniswap/sdk'
+import { BigNumber } from 'ethers/utils'
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useReducer } from 'react'
 
 import { useWeb3React } from '../hooks'
-import { safeAccess, isAddress, getTokenAllowance } from '../utils'
+import { getTokenAllowance, isAddress } from '../utils'
 import { useBlockNumber } from './Application'
 
 const UPDATE = 'UPDATE'
 
-const AllowancesContext = createContext([])
+interface AllowancesState {
+  [chainId: number]: {
+    [address: string]: {
+      [tokenAddress: string]: {
+        [spenderAddress: string]: {
+          value: BigintIsh
+          blockNumber: BigNumber
+        }
+      }
+    }
+  }
+}
+
+const AllowancesContext = createContext<[AllowancesState, any]>([{}, {}])
 
 function useAllowancesContext() {
   return useContext(AllowancesContext)
@@ -20,11 +34,11 @@ function reducer(state, { type, payload }) {
       return {
         ...state,
         [networkId]: {
-          ...(safeAccess(state, [networkId]) || {}),
+          ...state?.[networkId],
           [address]: {
-            ...(safeAccess(state, [networkId, address]) || {}),
+            ...state?.[networkId]?.[address],
             [tokenAddress]: {
-              ...(safeAccess(state, [networkId, address, tokenAddress]) || {}),
+              ...state?.[networkId]?.[address]?.[tokenAddress],
               [spenderAddress]: {
                 value,
                 blockNumber
@@ -34,11 +48,10 @@ function reducer(state, { type, payload }) {
         }
       }
     }
-    default: {
+    default:
       throw Error(`Unexpected action type in AllowancesContext reducer: '${type}'.`)
   }
 }
-}
 
 export default function Provider({ children }) {
   const [state, dispatch] = useReducer(reducer, {})
@@ -60,7 +73,7 @@ export function useAddressAllowance(address: string, token: Token, spenderAddres
   const globalBlockNumber = useBlockNumber()
 
   const [state, { update }] = useAllowancesContext()
-  const { value, blockNumber } = safeAccess(state, [chainId, address, token?.address, spenderAddress]) || {}
+  const { value, blockNumber } = state?.[chainId]?.[address]?.[token?.address]?.[spenderAddress] ?? {}
 
   useEffect(() => {
     if (
@@ -92,6 +105,5 @@ export function useAddressAllowance(address: string, token: Token, spenderAddres
     }
   }, [address, token, spenderAddress, value, blockNumber, globalBlockNumber, chainId, library, update])
 
-  const newTokenAmount: TokenAmount = value ? new TokenAmount(token, value) : null
+  return value ? new TokenAmount(token, value) : null
-  return newTokenAmount
 }

src/contexts/Application.tsx

@@ -1,7 +1,6 @@
 import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
 
 import { useWeb3React } from '../hooks'
-import { safeAccess } from '../utils'
 
 const BLOCK_NUMBER = 'BLOCK_NUMBER'
 const USD_PRICE = 'USD_PRICE'
@@ -48,7 +47,7 @@ function reducer(state: ApplicationState, { type, payload }): ApplicationState {
       return {
         ...state,
         [BLOCK_NUMBER]: {
-          ...(safeAccess(state, [BLOCK_NUMBER]) || {}),
+          ...state?.[BLOCK_NUMBER],
           [networkId]: blockNumber
         }
       }
@@ -163,7 +162,7 @@ export function useBlockNumber() {
 
   const [state] = useApplicationContext()
 
-  return safeAccess(state, [BLOCK_NUMBER, chainId])
+  return state?.[BLOCK_NUMBER]?.[chainId]
 }
 
 export function useWalletModalOpen() {

src/contexts/Transactions.tsx

@@ -3,20 +3,26 @@ import React, { createContext, useContext, useReducer, useMemo, useCallback, use
 import TxnPopup from '../components/TxnPopup'
 
 import { useWeb3React } from '../hooks'
-import { safeAccess } from '../utils'
 import { useBlockNumber, usePopups } from './Application'
 
-const RESPONSE = 'response'
-const CUSTOM_DATA = 'CUSTOM_DATA'
 const BLOCK_NUMBER_CHECKED = 'BLOCK_NUMBER_CHECKED'
-const RECEIPT = 'receipt'
 const SUMMARY = 'summary'
 
 const ADD = 'ADD'
 const CHECK = 'CHECK'
 const FINALIZE = 'FINALIZE'
 
-interface TransactionState {}
+interface TransactionState {
+  [chainId: number]: {
+    [txHash: string]: {
+      response: {
+        customData?: any
+        summary: any
+      }
+      receipt: any
+    }
+  }
+}
 
 const TransactionsContext = createContext<[TransactionState, { [updater: string]: (...args: any[]) => void }]>([{}, {}])
 
@@ -24,21 +30,21 @@ export function useTransactionsContext() {
   return useContext(TransactionsContext)
 }
 
-function reducer(state, { type, payload }) {
+function reducer(state: TransactionState, { type, payload }): TransactionState {
   switch (type) {
     case ADD: {
       const { networkId, hash, response } = payload
 
-      if (safeAccess(state, [networkId, hash]) !== null) {
+      if (state[networkId]?.[hash]) {
         throw Error('Attempted to add existing transaction.')
       }
 
       return {
         ...state,
         [networkId]: {
-          ...(safeAccess(state, [networkId]) || {}),
+          ...state[networkId],
           [hash]: {
-            [RESPONSE]: response
+            response
           }
         }
       }
@@ -46,16 +52,16 @@ function reducer(state, { type, payload }) {
     case CHECK: {
       const { networkId, hash, blockNumber } = payload
 
-      if (safeAccess(state, [networkId, hash]) === null) {
+      if (!state[networkId]?.[hash]) {
         throw Error('Attempted to check non-existent transaction.')
       }
 
       return {
         ...state,
         [networkId]: {
-          ...(safeAccess(state, [networkId]) || {}),
+          ...state[networkId],
           [hash]: {
-            ...(safeAccess(state, [networkId, hash]) || {}),
+            ...state[networkId]?.[hash],
             [BLOCK_NUMBER_CHECKED]: blockNumber
           }
         }
@@ -64,17 +70,17 @@ function reducer(state, { type, payload }) {
     case FINALIZE: {
       const { networkId, hash, receipt } = payload
 
-      if (safeAccess(state, [networkId, hash]) === null) {
+      if (!state[networkId]?.[hash]) {
         throw Error('Attempted to finalize non-existent transaction.')
       }
 
       return {
         ...state,
         [networkId]: {
-          ...(safeAccess(state, [networkId]) || {}),
+          ...state[networkId],
           [hash]: {
-            ...(safeAccess(state, [networkId, hash]) || {}),
+            ...state[networkId]?.[hash],
-            [RECEIPT]: receipt
+            receipt
           }
         }
       }
@@ -113,7 +119,7 @@ export function Updater() {
   const globalBlockNumber = useBlockNumber()
 
   const [state, { check, finalize }] = useTransactionsContext()
-  const allTransactions = safeAccess(state, [chainId]) || {}
+  const allTransactions = state[chainId] ?? {}
 
   // show popup on confirm
   const [, addPopup] = usePopups()
@@ -123,7 +129,7 @@ export function Updater() {
       let stale = false
       Object.keys(allTransactions)
         .filter(
-          hash => !allTransactions[hash][RECEIPT] && allTransactions[hash][BLOCK_NUMBER_CHECKED] !== globalBlockNumber
+          hash => !allTransactions[hash].receipt && allTransactions[hash][BLOCK_NUMBER_CHECKED] !== globalBlockNumber
         )
         .forEach(hash => {
           library
@@ -181,11 +187,11 @@ export function useTransactionAdder() {
       if (!(chainId || chainId === 0)) {
         throw Error(`Invalid networkId '${chainId}`)
       }
-      const hash = safeAccess(response, ['hash'])
+      const hash = response?.hash
       if (!hash) {
         throw Error('No transaction hash found.')
       }
-      add(chainId, hash, { ...response, [CUSTOM_DATA]: customData, [SUMMARY]: summary })
+      add(chainId, hash, { ...response, customData: customData, [SUMMARY]: summary })
     },
     [chainId, add]
   )
@@ -196,18 +202,18 @@ export function useAllTransactions() {
 
   const [state] = useTransactionsContext()
 
-  return safeAccess(state, [chainId]) || {}
+  return state[chainId] || {}
 }
 
 export function usePendingApproval(tokenAddress) {
   const allTransactions = useAllTransactions()
   return (
     Object.keys(allTransactions).filter(hash => {
-      if (allTransactions[hash][RECEIPT]) {
+      if (allTransactions[hash]?.receipt) {
         return false
-      } else if (!allTransactions[hash][RESPONSE]) {
+      } else if (!allTransactions[hash]?.response) {
         return false
-      } else if (allTransactions[hash][RESPONSE][CUSTOM_DATA].approval !== tokenAddress) {
+      } else if (allTransactions[hash]?.response?.customData?.approval !== tokenAddress) {
         return false
       } else {
         return true

src/pages/Pool/RemoveLiquidity.tsx

@@ -425,6 +425,13 @@ export default function RemoveLiquidity({ token0, token1 }) {
     })
   }
 
+  function resetModalState() {
+    setSigned(false)
+    setSigInputs(null)
+    setAttemptedRemoval(false)
+    setPendingConfirmation(true)
+  }
+
   async function onRemove() {
     setAttemptedRemoval(true)
     const router = getRouterContract(chainId, library, account)
@@ -499,13 +506,6 @@ export default function RemoveLiquidity({ token0, token1 }) {
       })
   }
 
-  function resetModalState() {
-    setSigned(false)
-    setSigInputs(null)
-    setAttemptedRemoval(false)
-    setPendingConfirmation(true)
-  }
-
   function modalHeader() {
     return (
       <AutoColumn gap={'sm'} style={{ marginTop: '20px' }}>

src/theme/index.tsx

@@ -1,10 +1,14 @@
 import React, { useEffect } from 'react'
-import styled, { ThemeProvider as StyledComponentsThemeProvider, createGlobalStyle, css } from 'styled-components'
+import styled, {
+  ThemeProvider as StyledComponentsThemeProvider,
+  createGlobalStyle,
+  css,
+  DefaultTheme
+} from 'styled-components'
 import { getQueryParam, checkSupportedTheme } from '../utils'
 import { SUPPORTED_THEMES } from '../constants'
 import { useDarkModeManager } from '../contexts/LocalStorage'
 import { Text } from 'rebass'
-import { UniswapTheme } from './styled'
 
 export * from './components'
 
@@ -30,23 +34,8 @@ const mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css }
 const white = '#FFFFFF'
 const black = '#000000'
 
-export default function ThemeProvider({ children }) {
+export function theme(darkMode: boolean): DefaultTheme {
-  const [darkMode, toggleDarkMode] = useDarkModeManager()
+  return {
-  const themeURL = checkSupportedTheme(getQueryParam(window.location, 'theme'))
-  const themeToRender = themeURL
-    ? themeURL.toUpperCase() === SUPPORTED_THEMES.DARK
-      ? true
-      : themeURL.toUpperCase() === SUPPORTED_THEMES.LIGHT
-      ? false
-      : darkMode
-    : darkMode
-  useEffect(() => {
-    toggleDarkMode(themeToRender)
-  }, [toggleDarkMode, themeToRender])
-  return <StyledComponentsThemeProvider theme={theme(themeToRender)}>{children}</StyledComponentsThemeProvider>
-}
-
-export const theme: (darkMode: boolean) => UniswapTheme = darkMode => ({
     // base
     white,
     black,
@@ -116,7 +105,24 @@ export const theme: (darkMode: boolean) => UniswapTheme = darkMode => ({
       display: flex;
       flex-flow: row nowrap;
     `
-})
+  }
+}
+
+export default function ThemeProvider({ children }) {
+  const [darkMode, toggleDarkMode] = useDarkModeManager()
+  const themeURL = checkSupportedTheme(getQueryParam(window.location, 'theme'))
+  const themeToRender = themeURL
+    ? themeURL.toUpperCase() === SUPPORTED_THEMES.DARK
+      ? true
+      : themeURL.toUpperCase() === SUPPORTED_THEMES.LIGHT
+      ? false
+      : darkMode
+    : darkMode
+  useEffect(() => {
+    toggleDarkMode(themeToRender)
+  }, [toggleDarkMode, themeToRender])
+  return <StyledComponentsThemeProvider theme={theme(themeToRender)}>{children}</StyledComponentsThemeProvider>
+}
 
 const TextWrapper = styled(Text)`
   color = ${({ color, theme }) => theme[color]}

src/theme/styled.d.ts

@@ -1,6 +1,7 @@
 import { css, FlattenSimpleInterpolation } from 'styled-components'
 
-export interface UniswapTheme {
+declare module 'styled-components' {
+  export interface DefaultTheme {
     // base
     white: string
     black: string
@@ -58,7 +59,4 @@ export interface UniswapTheme {
     flexColumnNoWrap: FlattenSimpleInterpolation
     flexRowNoWrap: FlattenSimpleInterpolation
   }
-
-declare module 'styled-components' {
-  export interface DefaultTheme extends UniswapTheme {}
 }

src/utils/index.ts

@@ -25,15 +25,6 @@ export enum ERROR_CODES {
   TOKEN_DECIMALS = 2
 }
 
-export function safeAccess(object, path) {
-  return object
-    ? path.reduce(
-        (accumulator, currentValue) => (accumulator && accumulator[currentValue] ? accumulator[currentValue] : null),
-        object
-      )
-    : null
-}
-
 const ETHERSCAN_PREFIXES = {
   1: '',
   3: 'ropsten.',