Done with linter errors!

.eslintrc.json

@@ -19,14 +19,13 @@
   "extends": [
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
     "prettier/@typescript-eslint",
     "plugin:prettier/recommended"
   ],
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
     "prettier/prettier": "error",
-    "react/prop-types": "off",
-    "@typescript-eslint/no-empty-function": "off",
-    "react/display-name": "off"
+    "@typescript-eslint/no-explicit-any": "off"
   }
 }
\ No newline at end of file

package.json

@@ -56,6 +56,7 @@
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
     "@types/react-router-dom": "^5.0.0",
+    "@types/rebass": "^4.0.5",
     "@types/styled-components": "^4.2.0",
     "@typescript-eslint/eslint-plugin": "^2.31.0",
     "@typescript-eslint/parser": "^2.31.0",
@@ -64,6 +65,7 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
     "prettier": "^1.17.0",
     "serve": "^11.3.0",
     "start-server-and-test": "^1.11.0",
@@ -74,8 +76,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": "eslint '**/*.{js,jsx,ts,tsx}'",
-    "lint:fix": "eslint '**/*.{js,jsx,ts,tsx}' --fix",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+    "lint:fix": "eslint 'src/**/*.{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/index.tsx

@@ -242,8 +242,8 @@ export default function AccountDetails({
   const theme = useContext(ThemeContext)
 
   function formatConnectorName() {
-    const { ethereum } = window as any
-    const isMetaMask = ethereum && ethereum.isMetaMask ? true : false
+    const { ethereum } = window
+    const isMetaMask = !!(ethereum && ethereum.isMetaMask)
     const name = Object.keys(SUPPORTED_WALLETS)
       .filter(
         k =>
@@ -345,12 +345,12 @@ export default function AccountDetails({
             </InfoCard>
           </YourAccount>
 
-          {!(isMobile && ((window as any).web3 || (window as any).ethereum)) && (
+          {!(isMobile && (window.web3 || window.ethereum)) && (
             <ConnectButtonRow>
               <ButtonEmpty
-                style={{ fontWeight: '400' }}
-                padding={'px 12px'}
-                width={260}
+                style={{ fontWeight: 400 }}
+                padding={'12px'}
+                width={'260px'}
                 onClick={() => {
                   openOptions()
                 }}

src/components/AdvancedSettings/index.tsx

@@ -10,7 +10,7 @@ import { ButtonRadio } from '../Button'
 import { useTranslation } from 'react-i18next'
 import Row, { RowBetween, RowFixed } from '../Row'
 
-const InputWrapper = styled(RowBetween)`
+const InputWrapper = styled(RowBetween)<{ active?: boolean; error?: boolean }>`
   width: 200px;
   background-color: ${({ theme }) => theme.bg1};
   border-radius: 8px;
@@ -105,7 +105,6 @@ export default function AdvancedSettings({
         <ButtonRadio
           active={SLIPPAGE_INDEX[1] === activeIndex}
           padding="4px 6px"
-          borderRadius="8px"
           style={{ marginRight: '16px' }}
           width={'60px'}
           onClick={() => {
@@ -118,7 +117,6 @@ export default function AdvancedSettings({
         <ButtonRadio
           active={SLIPPAGE_INDEX[2] === activeIndex}
           padding="4px 6px"
-          borderRadius="8px"
           style={{ marginRight: '16px' }}
           width={'180px'}
           onClick={() => {
@@ -131,7 +129,6 @@ export default function AdvancedSettings({
         <ButtonRadio
           active={SLIPPAGE_INDEX[3] === activeIndex}
           padding="4px"
-          borderRadius="8px"
           width={'60px'}
           onClick={() => {
             setActiveIndex(SLIPPAGE_INDEX[3])

src/components/BalanceCard/index.tsx

@@ -11,8 +11,18 @@ import { RowBetween, AutoRow } from '../Row'
 import { Copy as CopyIcon, BarChart2, Info, Share, ChevronDown, ChevronUp, Plus } from 'react-feather'
 import DoubleLogo from '../DoubleLogo'
 import { ButtonSecondary, ButtonGray } from '../Button'
+import { Token } from '@uniswap/sdk'
 
-export default function BalanceCard({ token0, balance0, import0, token1, balance1, import1 }) {
+interface BalanceCardProps {
+  token0: Token
+  balance0: boolean
+  import0: boolean
+  token1: Token
+  balance1: boolean
+  import1: boolean
+}
+
+export default function BalanceCard({ token0, balance0, import0, token1, balance1, import1 }: BalanceCardProps) {
   const [showInfo, setshowInfo] = useState(false)
 
   return (
@@ -24,7 +34,7 @@ export default function BalanceCard({ token0, balance0, import0, token1, balance
         maxWidth: '355px',
         flexWrap: 'nowrap',
         alignItems: 'flex-end',
-        zIndex: '99'
+        zIndex: 99
       }}
     >
       <AutoColumn style={{ width: '100%', padding: '12px' }}>

src/components/Button/index.tsx

@@ -4,9 +4,9 @@ import { darken, lighten } from 'polished'
 
 import { RowBetween } from '../Row'
 import { ChevronDown } from 'react-feather'
-import { Button as RebassButton } from 'rebass/styled-components'
+import { Button as RebassButton, ButtonProps } from 'rebass/styled-components'
 
-const Base = styled(RebassButton)`
+const Base = styled(RebassButton)<{ padding?: string; width?: string; borderRadius?: string }>`
   padding: ${({ padding }) => (padding ? padding : '18px')};
   width: ${({ width }) => (width ? width : '100%')};
   font-weight: 500;
@@ -184,13 +184,14 @@ export const ButtonWhite = styled(Base)`
   color: black;
 
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, '#edeef2')};
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    box-shadow: 0 0 0 1pt ${darken(0.05, '#edeef2')};
   }
   &:hover {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, '#edeef2')};
+    box-shadow: 0 0 0 1pt ${darken(0.1, '#edeef2')};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, '#edeef2')};
+    box-shadow: 0 0 0 1pt ${darken(0.1, '#edeef2')};
   }
   &:disabled {
     opacity: 50%;
@@ -229,23 +230,23 @@ const ButtonErrorStyle = styled(Base)`
   }
 `
 
-export function ButtonConfirmed({ children, confirmed, ...rest }) {
+export function ButtonConfirmed({ confirmed, ...rest }: { confirmed?: boolean } & ButtonProps) {
   if (confirmed) {
-    return <ButtonConfirmedStyle {...rest}>{children}</ButtonConfirmedStyle>
+    return <ButtonConfirmedStyle {...rest} />
   } else {
-    return <ButtonPrimary {...rest}>{children}</ButtonPrimary>
+    return <ButtonPrimary {...rest} />
   }
 }
 
-export function ButtonError({ children, error, ...rest }) {
+export function ButtonError({ error, ...rest }: { error?: boolean } & ButtonProps) {
   if (error) {
-    return <ButtonErrorStyle {...rest}>{children}</ButtonErrorStyle>
+    return <ButtonErrorStyle {...rest} />
   } else {
-    return <ButtonPrimary {...rest}>{children}</ButtonPrimary>
+    return <ButtonPrimary {...rest} />
   }
 }
 
-export function ButtonDropwdown({ disabled = false, children, ...rest }) {
+export function ButtonDropwdown({ disabled = false, children, ...rest }: { disabled?: boolean } & ButtonProps) {
   return (
     <ButtonPrimary {...rest} disabled={disabled}>
       <RowBetween>
@@ -256,7 +257,7 @@ export function ButtonDropwdown({ disabled = false, children, ...rest }) {
   )
 }
 
-export function ButtonDropwdownLight({ disabled = false, children, ...rest }) {
+export function ButtonDropwdownLight({ disabled = false, children, ...rest }: { disabled?: boolean } & ButtonProps) {
   return (
     <ButtonOutlined {...rest} disabled={disabled}>
       <RowBetween>
@@ -267,10 +268,10 @@ export function ButtonDropwdownLight({ disabled = false, children, ...rest }) {
   )
 }
 
-export function ButtonRadio({ active, children, ...rest }) {
+export function ButtonRadio({ active, ...rest }: { active?: boolean } & ButtonProps) {
   if (!active) {
-    return <ButtonWhite {...rest}>{children}</ButtonWhite>
+    return <ButtonWhite {...rest} />
   } else {
-    return <ButtonPrimary {...rest}>{children}</ButtonPrimary>
+    return <ButtonPrimary {...rest} />
   }
 }

src/components/Card/index.tsx

 import React from 'react'
 import styled from 'styled-components'
-import { Text } from 'rebass'
+import { CardProps, Text } from 'rebass'
 import { Box } from 'rebass/styled-components'
 
-const Card = styled(Box)`
+const Card = styled(Box)<{ padding?: string; border?: string; borderRadius?: string }>`
   width: 100%;
   border-radius: 16px;
   padding: 1.25rem;
@@ -44,9 +44,9 @@ const BlueCardStyled = styled(Card)`
   width: fit-content;
 `
 
-export const BlueCard = ({ children }) => {
+export const BlueCard = ({ children, ...rest }: CardProps) => {
   return (
-    <BlueCardStyled>
+    <BlueCardStyled {...rest}>
       <Text fontWeight={500} color="#2172E5">
         {children}
       </Text>

src/components/CurrencyInputPanel/index.tsx

@@ -31,7 +31,7 @@ const CurrencySelect = styled.button<{ selected: boolean }>`
   background-color: ${({ selected, theme }) => (selected ? theme.bg1 : theme.blue1)};
   color: ${({ selected, theme }) => (selected ? theme.text1 : theme.white)};
   border-radius: 12px;
-  box-shadow: ${({ selected, theme }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
+  box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
   /* padding: 0px; */
   outline: none;
   cursor: pointer;

src/components/ExchangePage/index.tsx

@@ -724,7 +724,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
               {!!formattedAmounts[Field.INPUT] && formattedAmounts[Field.INPUT]}
               {/* {!!slippageAdjustedAmounts[Field.INPUT] && slippageAdjustedAmounts[Field.INPUT].toSignificant(6)} */}
             </TruncatedText>
-            <RowFixed gap="4px">
+            <RowFixed>
               <TokenLogo address={tokens[Field.INPUT]?.address} size={'24px'} />
               <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
                 {tokens[Field.INPUT]?.symbol || ''}
@@ -740,7 +740,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
 
               {/* {!!slippageAdjustedAmounts[Field.OUTPUT] && slippageAdjustedAmounts[Field.OUTPUT].toSignificant(6)} */}
             </TruncatedText>
-            <RowFixed gap="4px">
+            <RowFixed>
               <TokenLogo address={tokens[Field.OUTPUT]?.address} size={'24px'} />
               <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
                 {tokens[Field.OUTPUT]?.symbol || ''}
@@ -789,7 +789,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
         <>
           <AutoColumn gap="0px">
             {!noRoute && tokens[Field.OUTPUT] && tokens[Field.INPUT] && (
-              <RowBetween align="center" justify="center">
+              <RowBetween align="center">
                 <Text fontWeight={400} fontSize={14} color={theme(isDark).text2}>
                   Price
                 </Text>
@@ -1116,7 +1116,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
             ) : (
               <AutoColumn gap="4px">
                 {' '}
-                <RowBetween align="center" justify="center">
+                <RowBetween align="center">
                   <Text fontWeight={500} fontSize={14} color={theme(isDark).text2}>
                     Price
                   </Text>

src/components/ExchangePage/styleds.ts

@@ -55,7 +55,7 @@ export const BottomGrouping = styled.div`
   position: relative;
 `
 
-export const ErrorText = styled(Text)`
+export const ErrorText = styled(Text)<{ warningLow?: boolean; warningMedium?: boolean; warningHigh?: boolean }>`
   color: ${({ theme, warningLow, warningMedium, warningHigh }) =>
     warningHigh ? theme.red1 : warningMedium ? theme.yellow2 : warningLow ? theme.green1 : theme.text1};
 `

src/components/Modal/index.tsx

@@ -9,17 +9,15 @@ import '@reach/dialog/styles.css'
 import { transparentize } from 'polished'
 import { useGesture } from 'react-use-gesture'
 
+// errors emitted, fix with https://github.com/styled-components/styled-components/pull/3006
 const AnimatedDialogOverlay = animated(DialogOverlay)
-const WrappedDialogOverlay = ({ suppressClassNameWarning, mobile, ...rest }) => <AnimatedDialogOverlay {...rest} />
-const StyledDialogOverlay = styled(WrappedDialogOverlay).attrs({
-  suppressClassNameWarning: true
-})`
+const StyledDialogOverlay = styled(AnimatedDialogOverlay)`
   &[data-reach-dialog-overlay] {
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: ${({ theme }) => 'transparent'};
+    background-color: transparent;
 
     ${({ mobile }) =>
       mobile &&
@@ -42,10 +40,7 @@ const StyledDialogOverlay = styled(WrappedDialogOverlay).attrs({
   }
 `
 
-const FilteredDialogContent = ({ minHeight, maxHeight, isOpen, slideInAnimation, mobile, ...rest }) => (
-  <DialogContent {...rest} />
-)
-const StyledDialogContent = styled(FilteredDialogContent)`
+const StyledDialogContent = styled(DialogContent)<{ mobile?: boolean }>`
   &[data-reach-dialog-content] {
     margin: 0 0 2rem 0;
     border: 1px solid ${({ theme }) => theme.bg1};
@@ -73,7 +68,7 @@ const StyledDialogContent = styled(FilteredDialogContent)`
       max-height: 65vh;
       margin: 0;
     `}
-    ${({ theme, mobile, isOpen }) => theme.mediaWidth.upToSmall`
+    ${({ theme, mobile }) => theme.mediaWidth.upToSmall`
       width:  85vw;
       max-height: 66vh;
       ${mobile &&

src/components/PoolFinder/index.tsx

@@ -72,7 +72,7 @@ function PoolFinder({ history }: RouteComponentProps) {
           </Text>
           <Row>
             <DoubleTokenLogo a0={token0Address || ''} a1={token1Address || ''} margin={true} />
-            <Text fontSize={16} fotnWeight={500}>
+            <Text fontSize={16} fontWeight={500}>
               UNI {token0?.symbol} / {token1?.symbol}
             </Text>
           </Row>

src/components/Row/index.tsx

@@ -21,9 +21,9 @@ export const RowFlat = styled.div`
   align-items: flex-end;
 `
 
-export const AutoRow = styled(Row)<{ gap: string; justify?: string }>`
+export const AutoRow = styled(Row)<{ gap?: string; justify?: string }>`
   flex-wrap: wrap;
-  margin: -${({ gap }) => gap};
+  margin: ${({ gap }) => gap && `-${gap}`};
   justify-content: ${({ justify }) => justify && justify};
 
   & > * {

src/components/SearchModal/index.tsx

@@ -119,7 +119,7 @@ const MenuItem = styled(PaddedItem)`
   opacity: ${({ disabled, selected }) => (disabled || selected ? 0.5 : 1)};
 `
 
-const BaseWrapper = styled(AutoRow)`
+const BaseWrapper = styled(AutoRow)<{ disable?: boolean }>`
   border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.bg3)};
   padding: 0 6px;
   border-radius: 10px;
@@ -473,7 +473,7 @@ function SearchModal({
           return (
             <MenuItem
               key={address}
-              onClick={() => (hiddenToken && hiddenToken === address ? () => {} : _onTokenSelect(address))}
+              onClick={() => (hiddenToken && hiddenToken === address ? null : _onTokenSelect(address))}
               disabled={hiddenToken && hiddenToken === address}
               selected={otherSelectedTokenAddress === address}
             >
@@ -528,7 +528,7 @@ function SearchModal({
     }
   }
 
-  const Filter = ({ title, filter, filterType }) => {
+  const Filter = ({ title, filter, filterType }: { title: string; filter: string; filterType: string }) => {
     return (
       <FilterWrapper
         onClick={() => {

src/components/SlippageTabs/index.tsx

@@ -80,14 +80,10 @@ const Input = styled.input<{ active?: boolean }>`
     `}
 `
 
-const BottomError = styled(Text)`
+const BottomError = styled(Text)<{ show?: boolean }>`
   font-size: 14px;
   font-weight: 400;
-  ${({ show }) =>
-    show &&
-    css`
-      padding-top: 12px;
-    `}
+  padding-top: ${({ show }) => (show ? '12px' : '')};
 `
 
 const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }>`

src/components/TokenLogo/index.tsx

@@ -35,7 +35,15 @@ const StyledEthereumLogo = styled(EthereumLogo)<{ size: string }>`
   height: ${({ size }) => size};
 `
 
-export default function TokenLogo({ address, size = '24px', ...rest }) {
+export default function TokenLogo({
+  address,
+  size = '24px',
+  ...rest
+}: {
+  address: string
+  size?: string
+  style?: React.CSSProperties
+}) {
   const [error, setError] = useState(false)
   const { chainId } = useWeb3React()
 

src/components/TxnPopup/index.tsx

@@ -26,7 +26,17 @@ const Fader = styled.div<{ count: number }>`
 
 const delay = 100
 
-export default function TxnPopup({ hash, success, summary, popKey }) {
+export default function TxnPopup({
+  hash,
+  success,
+  summary,
+  popKey
+}: {
+  hash: string
+  success?: boolean
+  summary?: string
+  popKey?: number
+}) {
   const { chainId } = useWeb3React()
   const [count, setCount] = useState(1)
 

src/components/WalletModal/PendingView.tsx

+import { AbstractConnector } from '@web3-react/abstract-connector'
 import React from 'react'
 import styled from 'styled-components'
 import Option from './Option'
@@ -70,8 +71,22 @@ const LoadingWrapper = styled.div`
   justify-content: center;
 `
 
-export default function PendingView({ uri = '', size, connector, error = false, setPendingError, tryActivation }) {
-  const isMetamask = (window as any).ethereum && (window as any).ethereum.isMetaMask
+export default function PendingView({
+  uri = '',
+  size,
+  connector,
+  error = false,
+  setPendingError,
+  tryActivation
+}: {
+  uri?: string
+  size?: number
+  connector?: AbstractConnector
+  error?: boolean
+  setPendingError: (error: boolean) => void
+  tryActivation: (connector: AbstractConnector) => void
+}) {
+  const isMetamask = window.ethereum && window.ethereum.isMetaMask
 
   return (
     <PendingSection>

src/components/WalletModal/index.tsx

@@ -115,7 +115,15 @@ const WALLET_VIEWS = {
   PENDING: 'pending'
 }
 
-export default function WalletModal({ pendingTransactions, confirmedTransactions, ENSName }) {
+export default function WalletModal({
+  pendingTransactions,
+  confirmedTransactions,
+  ENSName
+}: {
+  pendingTransactions: any[]
+  confirmedTransactions: any[]
+  ENSName?: string
+}) {
   const { active, account, connector, activate, error } = useWeb3React()
 
   const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
@@ -200,7 +208,7 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
 
   // get wallets user can switch too, depending on device/browser
   function getOptions() {
-    const isMetamask = (window as any).ethereum && (window as any).ethereum.isMetaMask
+    const isMetamask = window.ethereum && window.ethereum.isMetaMask
     return Object.keys(SUPPORTED_WALLETS).map(key => {
       const option = SUPPORTED_WALLETS[key]
       // check for mobile options
@@ -210,7 +218,7 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
           return null
         }
 
-        if (!(window as any).web3 && !(window as any).ethereum && option.mobile) {
+        if (!window.web3 && !window.ethereum && option.mobile) {
           return (
             <Option
               onClick={() => {
@@ -232,7 +240,7 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
       // overwrite injected when needed
       if (option.connector === injected) {
         // don't show injected if there's no injected provider
-        if (!((window as any).web3 || (window as any).ethereum)) {
+        if (!(window.web3 || window.ethereum)) {
           if (option.name === 'MetaMask') {
             return (
               <Option

src/components/Web3Status/index.tsx

@@ -63,7 +63,7 @@ const Web3StatusError = styled(Web3StatusGeneric)`
   }
 `
 
-const Web3StatusConnect = styled(Web3StatusGeneric)`
+const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
   background-color: ${({ theme }) => theme.blue4};
   border: none;
   color: ${({ theme }) => theme.buttonSecondaryText};
@@ -90,7 +90,7 @@ const Web3StatusConnect = styled(Web3StatusGeneric)`
     `}
 `
 
-const Web3StatusConnected = styled(Web3StatusGeneric)`
+const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
   background-color: ${({ pending, theme }) => (pending ? theme.blue1 : theme.bg2)};
   border: 1px solid ${({ pending, theme }) => (pending ? theme.blue1 : theme.bg3)};
   color: ${({ pending, theme }) => (pending ? theme.white : theme.text1)};

src/contexts/Allowances.tsx

@@ -53,7 +53,7 @@ function reducer(state, { type, payload }) {
   }
 }
 
-export default function Provider({ children }) {
+export default function Provider({ children }: { children: React.ReactNode }) {
   const [state, dispatch] = useReducer(reducer, {})
 
   const update = useCallback((networkId, address, tokenAddress, spenderAddress, value, blockNumber) => {

src/contexts/Application.tsx

@@ -72,7 +72,7 @@ function reducer(state: ApplicationState, { type, payload }): ApplicationState {
   }
 }
 
-export default function Provider({ children }) {
+export default function Provider({ children }: { children: React.ReactNode }) {
   const [state, dispatch] = useReducer(reducer, {
     [BLOCK_NUMBER]: {},
     [USD_PRICE]: {},

src/contexts/LocalStorage.tsx

@@ -72,7 +72,7 @@ function useLocalStorageContext() {
   return useContext(LocalStorageContext)
 }
 
-export default function Provider({ children }) {
+export default function Provider({ children }: { children: React.ReactNode }) {
   // global localstorage state
   const [version, setVersion] = useLocalStorage<number>(LocalStorageKeys.VERSION, 0)
   const [lastSaved, setLastSaved] = useLocalStorage<number>(LocalStorageKeys.LAST_SAVED, Math.floor(Date.now() / 1000))

src/contexts/Pairs.tsx

@@ -90,7 +90,7 @@ function reducer(state, { type, payload }) {
   }
 }
 
-export default function Provider({ children }) {
+export default function Provider({ children }: { children: React.ReactNode }) {
   const [state, dispatch] = useReducer(reducer, PAIR_MAP)
 
   const update = useCallback((chainId, tokens) => {
@@ -203,7 +203,9 @@ export function useTotalSupply(tokenA?: Token, tokenB?: Token) {
             })
           }
         })
-        .catch(() => {})
+        .catch(error => {
+          console.log(error)
+        })
   }, [pairContract, pair])
 
   // on the block make sure we're updated

src/contexts/Transactions.tsx

@@ -89,7 +89,7 @@ function reducer(state: TransactionState, { type, payload }): TransactionState {
   }
 }
 
-export default function Provider({ children }) {
+export default function Provider({ children }: { children: React.ReactNode }) {
   const [state, dispatch] = useReducer(reducer, {})
 
   const add = useCallback((networkId, hash, response) => {

src/ethereum.d.ts

+interface Window {
+  ethereum?: {
+    isMetaMask?: true
+    on?: (...args: any[]) => void
+    removeListener?: (...args: any[]) => void
+  }
+  web3?: {}
+}

src/hooks/index.ts

@@ -25,7 +25,7 @@ export function useEagerConnect() {
           setTried(true)
         })
       } else {
-        if (isMobile && (window as any).ethereum) {
+        if (isMobile && window.ethereum) {
           activate(injected, undefined, true).catch(() => {
             setTried(true)
           })
@@ -54,24 +54,30 @@ export function useInactiveListener(suppress = false) {
   const { active, error, activate } = useWeb3ReactCore() // specifically using useWeb3React because of what this hook does
 
   useEffect(() => {
-    const { ethereum } = window as any
+    const { ethereum } = window
 
     if (ethereum && ethereum.on && !active && !error && !suppress) {
       const handleChainChanged = () => {
         // eat errors
-        activate(injected, undefined, true).catch(() => {})
+        activate(injected, undefined, true).catch(error => {
+          console.log(error)
+        })
       }
 
       const handleAccountsChanged = accounts => {
         if (accounts.length > 0) {
           // eat errors
-          activate(injected, undefined, true).catch(() => {})
+          activate(injected, undefined, true).catch(error => {
+            console.log(error)
+          })
         }
       }
 
       const handleNetworkChanged = () => {
         // eat errors
-        activate(injected, undefined, true).catch(() => {})
+        activate(injected, undefined, true).catch(error => {
+          console.log(error)
+        })
       }
 
       ethereum.on('chainChanged', handleChainChanged)
@@ -86,8 +92,6 @@ export function useInactiveListener(suppress = false) {
         }
       }
     }
-
-    return () => {}
   }, [active, error, suppress, activate])
 }
 

src/index.tsx

@@ -35,7 +35,7 @@ if (process.env.NODE_ENV === 'production') {
 
 ReactGA.pageview(window.location.pathname + window.location.search)
 
-function ContextProviders({ children }) {
+function ContextProviders({ children }: { children: React.ReactNode }) {
   return (
     <LocalStorageContextProvider>
       <ApplicationContextProvider>

src/pages/Pool/RemoveLiquidity.tsx

@@ -145,11 +145,11 @@ function reducer(
   }
 }
 
-const ConfirmedText = styled(Text)`
+const ConfirmedText = styled(Text)<{ confirmed?: boolean }>`
   color: ${({ theme, confirmed }) => (confirmed ? theme.green1 : theme.white)};
 `
 
-export default function RemoveLiquidity({ token0, token1 }) {
+export default function RemoveLiquidity({ token0, token1 }: { token0: string; token1: string }) {
   const { account, chainId, library } = useWeb3React()
 
   const [showConfirm, setShowConfirm] = useState<boolean>(false)
@@ -513,7 +513,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
           <Text fontSize={24} fontWeight={500}>
             {!!parsedAmounts[Field.TOKEN0] && parsedAmounts[Field.TOKEN0].toSignificant(6)}
           </Text>
-          <RowFixed gap="4px">
+          <RowFixed>
             <TokenLogo address={tokens[Field.TOKEN0]?.address} size={'24px'} />
             <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
               {tokens[Field.TOKEN0]?.symbol || ''}
@@ -527,7 +527,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
           <Text fontSize={24} fontWeight={600}>
             {!!parsedAmounts[Field.TOKEN1] && parsedAmounts[Field.TOKEN1].toSignificant(6)}
           </Text>
-          <RowFixed gap="4px">
+          <RowFixed>
             <TokenLogo address={tokens[Field.TOKEN1]?.address} size={'24px'} />
             <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
               {tokens[Field.TOKEN1]?.symbol || ''}
@@ -574,7 +574,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
             }`}
           </Text>
         </RowBetween>
-        <RowBetween gap="16px">
+        <RowBetween>
           <ButtonConfirmed
             style={{ margin: '20px 0 0 0' }}
             width="48%"
@@ -641,16 +641,16 @@ export default function RemoveLiquidity({ token0, token1 }) {
             )}
             {!showAdvanced && (
               <RowBetween>
-                <MaxButton onClick={e => handlePresetPercentage(25)} width="20%">
+                <MaxButton onClick={() => handlePresetPercentage(25)} width="20%">
                   25%
                 </MaxButton>
-                <MaxButton onClick={e => handlePresetPercentage(50)} width="20%">
+                <MaxButton onClick={() => handlePresetPercentage(50)} width="20%">
                   50%
                 </MaxButton>
-                <MaxButton onClick={e => handlePresetPercentage(75)} width="20%">
+                <MaxButton onClick={() => handlePresetPercentage(75)} width="20%">
                   75%
                 </MaxButton>
-                <MaxButton onClick={e => handlePresetPercentage(100)} width="20%">
+                <MaxButton onClick={() => handlePresetPercentage(100)} width="20%">
                   Max
                 </MaxButton>
               </RowBetween>

src/pages/Send/index.tsx

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

src/theme/index.tsx

@@ -8,7 +8,8 @@ import styled, {
 import { getQueryParam, checkSupportedTheme } from '../utils'
 import { SUPPORTED_THEMES } from '../constants'
 import { useDarkModeManager } from '../contexts/LocalStorage'
-import { Text } from 'rebass'
+import { Text, TextProps } from 'rebass'
+import { Colors } from './styled'
 
 export * from './components'
 
@@ -34,7 +35,7 @@ const mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css }
 const white = '#FFFFFF'
 const black = '#000000'
 
-export function theme(darkMode: boolean): DefaultTheme {
+export function colors(darkMode: boolean): Colors {
   return {
     // base
     white,
@@ -82,7 +83,13 @@ export function theme(darkMode: boolean): DefaultTheme {
     red1: '#FF6871',
     green1: '#27AE60',
     yellow1: '#FFE270',
-    yellow2: '#F3841E',
+    yellow2: '#F3841E'
+  }
+}
+
+export function theme(darkMode: boolean): DefaultTheme {
+  return {
+    ...colors(darkMode),
 
     grids: {
       sm: 8,
@@ -108,7 +115,7 @@ export function theme(darkMode: boolean): DefaultTheme {
   }
 }
 
-export default function ThemeProvider({ children }) {
+export default function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [darkMode, toggleDarkMode] = useDarkModeManager()
   const themeURL = checkSupportedTheme(getQueryParam(window.location, 'theme'))
   const themeToRender = themeURL
@@ -124,76 +131,47 @@ export default function ThemeProvider({ children }) {
   return <StyledComponentsThemeProvider theme={theme(themeToRender)}>{children}</StyledComponentsThemeProvider>
 }
 
-const TextWrapper = styled(Text)`
+const TextWrapper = styled(Text)<{ color: keyof Colors }>`
   color = ${({ color, theme }) => theme[color]}
 `
 
 export const TYPE = {
-  main: ({ children, ...rest }) => (
-    <TextWrapper fontWeight={500} color={'text2'} {...rest}>
-      {children}
-    </TextWrapper>
-  ),
-  black: ({ children, ...rest }) => (
-    <TextWrapper fontWeight={500} color={'text1'} {...rest}>
-      {children}
-    </TextWrapper>
-  ),
-  largeHeader: ({ children, ...rest }) => (
-    <TextWrapper fontWeight={600} fontSize={24} {...rest}>
-      {children}
-    </TextWrapper>
-  ),
-  mediumHeader: ({ children, ...rest }) => (
-    <TextWrapper fontWeight={500} fontSize={20} color={'text1'} {...rest}>
-      {children}
-    </TextWrapper>
-  ),
-  subHeader: ({ children, ...rest }) => (
-    <TextWrapper fontWeight={400} fontSize={14} color={'text1'} {...rest}>
-      {children}
-    </TextWrapper>
-  ),
-  body: ({ children, ...rest }) => (
-    <TextWrapper fontWeight={400} fontSize={16} color={'text1'} {...rest}>
-      {children}
-    </TextWrapper>
-  ),
-  blue: ({ children, ...rest }) => (
-    <TextWrapper fontWeight={500} color={'blue1'} {...rest}>
-      {children}
-    </TextWrapper>
-  ),
-  yellow: ({ children, ...rest }) => (
-    <TextWrapper fontWeight={500} color={'yellow2'} {...rest}>
-      {children}
-    </TextWrapper>
-  ),
-  green: ({ children, ...rest }) => (
-    <TextWrapper fontWeight={500} color={'green1'} {...rest}>
-      {children}
-    </TextWrapper>
-  ),
-  gray: ({ children, ...rest }) => (
-    <TextWrapper fontWeight={500} color={'bg3'} {...rest}>
-      {children}
-    </TextWrapper>
-  ),
-  darkGray: ({ children, ...rest }) => (
-    <TextWrapper fontWeight={500} color={'text3'} {...rest}>
-      {children}
-    </TextWrapper>
-  ),
-  italic: ({ children, ...rest }) => (
-    <TextWrapper fontWeight={500} fontSize={12} fontStyle={'italic'} color={'text2'} {...rest}>
-      {children}
-    </TextWrapper>
-  ),
-  error: ({ children, error, ...rest }) => (
-    <TextWrapper fontWeight={500} color={error ? 'red1' : 'text2'} {...rest}>
-      {children}
-    </TextWrapper>
-  )
+  main(props: TextProps) {
+    return <TextWrapper fontWeight={500} color={'text2'} {...props} />
+  },
+  black(props: TextProps) {
+    return <TextWrapper fontWeight={500} color={'text1'} {...props} />
+  },
+  body(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={16} color={'text1'} {...props} />
+  },
+  largeHeader(props: TextProps) {
+    return <TextWrapper fontWeight={600} fontSize={24} {...props} />
+  },
+  mediumHeader(props: TextProps) {
+    return <TextWrapper fontWeight={500} fontSize={20} {...props} />
+  },
+  subHeader(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={14} {...props} />
+  },
+  blue(props: TextProps) {
+    return <TextWrapper fontWeight={500} color={'blue1'} {...props} />
+  },
+  yellow(props: TextProps) {
+    return <TextWrapper fontWeight={500} color={'yellow1'} {...props} />
+  },
+  darkGray(props: TextProps) {
+    return <TextWrapper fontWeight={500} color={'text3'} {...props} />
+  },
+  gray(props: TextProps) {
+    return <TextWrapper fontWeight={500} color={'bg3'} {...props} />
+  },
+  italic(props: TextProps) {
+    return <TextWrapper fontWeight={500} fontSize={12} fontStyle={'italic'} color={'text2'} {...props} />
+  },
+  error({ error, ...props }: { error: boolean } & TextProps) {
+    return <TextWrapper fontWeight={500} color={error ? 'red1' : 'text2'} {...props} />
+  }
 }
 
 export const GlobalStyle = createGlobalStyle`

src/theme/styled.d.ts

-import { css, FlattenSimpleInterpolation } from 'styled-components'
+import { FlattenSimpleInterpolation, ThemedCssFunction } from 'styled-components'
+
+export type Color = string
+export interface Colors {
+  // base
+  white: Color
+  black: Color
+
+  // text
+  text1: Color
+  text2: Color
+  text3: Color
+  text4: Color
+  text5: Color
+
+  // backgrounds / greys
+  bg1: Color
+  bg2: Color
+  bg3: Color
+  bg4: Color
+  bg5: Color
+
+  modalBG: Color
+  advancedBG: Color
+
+  //blues
+  blue1: Color
+  blue2: Color
+  blue3: Color
+  blue4: Color
+  blue5: Color
+
+  buttonSecondaryText: Color
+
+  // pinks
+  pink1: Color
+  pink2: Color
+  pink3: Color
+  pink4: Color
+
+  // other
+  red1: Color
+  green1: Color
+  yellow1: Color
+  yellow2: Color
+}
+
+export interface Grids {
+  sm: number
+  md: number
+  lg: number
+}
 
 declare module 'styled-components' {
-  export interface DefaultTheme {
-    // base
-    white: string
-    black: string
-
-    // text
-    text1: string
-    text2: string
-    text3: string
-    text4: string
-    text5: string
-
-    // backgrounds / greys
-    bg1: string
-    bg2: string
-    bg3: string
-    bg4: string
-    bg5: string
-
-    modalBG: string
-    advancedBG: string
-
-    //blues
-    blue1: string
-    blue2: string
-    blue3: string
-    blue4: string
-    blue5: string
-
-    buttonSecondaryText: string
-
-    // pinks
-    pink1: string
-    pink2: string
-    pink3: string
-    pink4: string
-
-    // other
-    red1: string
-    green1: string
-    yellow1: string
-    yellow2: string
-
-    grids: {
-      sm: number
-      md: number
-      lg: number
-    }
+  export interface DefaultTheme extends Colors {
+    grids: Grids
 
     // shadows
     shadow1: string
 
     // media queries
-    mediaWidth: { [width in keyof typeof MEDIA_WIDTHS]: typeof css }
+    mediaWidth: {
+      upToExtraSmall: ThemedCssFunction<DefaultTheme>
+      upToSmall: ThemedCssFunction<DefaultTheme>
+      upToMedium: ThemedCssFunction<DefaultTheme>
+      upToLarge: ThemedCssFunction<DefaultTheme>
+    }
+
     // css snippets
     flexColumnNoWrap: FlattenSimpleInterpolation
     flexRowNoWrap: FlattenSimpleInterpolation

src/utils/index.ts

@@ -33,7 +33,11 @@ const ETHERSCAN_PREFIXES = {
   42: 'kovan.'
 }
 
-export function getEtherscanLink(networkId: 1 | 3 | 4 | 5 | 42 | any, data: string, type: 'transaction' | 'address') {
+export function getEtherscanLink(
+  networkId: 1 | 3 | 4 | 5 | 42 | string | number,
+  data: string,
+  type: 'transaction' | 'address'
+) {
   const prefix = `https://${ETHERSCAN_PREFIXES[networkId] || ETHERSCAN_PREFIXES[1]}etherscan.io`
 
   switch (type) {
@@ -47,7 +51,7 @@ export function getEtherscanLink(networkId: 1 | 3 | 4 | 5 | 42 | any, data: stri
   }
 }
 
-export function getQueryParam(windowLocation, name) {
+export function getQueryParam(windowLocation: Location, name: string): string | undefined {
   const q = windowLocation.search.match(new RegExp('[?&]' + name + '=([^&#?]*)'))
   return q && q[1]
 }
@@ -84,44 +88,21 @@ export function getAllQueryParams(): QueryParams {
   }
 }
 
-export function checkSupportedTheme(themeName) {
+export function checkSupportedTheme(themeName: string) {
   if (themeName && themeName.toUpperCase() in SUPPORTED_THEMES) {
     return themeName.toUpperCase()
   }
   return null
 }
 
-export function getNetworkName(networkId) {
-  switch (networkId) {
-    case 1: {
-      return 'the Ethereum Mainnet'
-    }
-    case 3: {
-      return 'the Ropsten Test Network'
-    }
-    case 4: {
-      return 'the Rinkeby Test Network'
-    }
-    case 5: {
-      return 'the Görli Test Network'
-    }
-    case 42: {
-      return 'the Kovan Test Network'
-    }
-    default: {
-      return 'the correct network'
-    }
-  }
-}
-
-export function shortenAddress(address, digits = 4) {
+export function shortenAddress(address: string, chars = 4): string {
   if (!isAddress(address)) {
     throw Error(`Invalid 'address' parameter '${address}'.`)
   }
-  return `${address.substring(0, digits + 2)}...${address.substring(42 - digits)}`
+  return `${address.substring(0, chars + 2)}...${address.substring(42 - chars)}`
 }
 
-export function calculateGasMargin(value: BigNumber) {
+export function calculateGasMargin(value: BigNumber): BigNumber {
   return value.mul(BigNumber.from(10000).add(BigNumber.from(1000))).div(BigNumber.from(10000)) // add 10%
 }
 

yarn.lock

@@ -2559,6 +2559,16 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/rebass@^4.0.5":
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/@types/rebass/-/rebass-4.0.5.tgz#cd6bc6b71c7fe46c18c4692e68235ae7fc306d0d"
+  integrity sha512-c2CLauMY//8Oig3M4+9oDRWn7wZjUlEcJwmQdojjRCX6OWL5ZHidcG4febD81WRMyu40fkx8QcvcPlcFCrh9Fw==
+  dependencies:
+    "@types/react" "*"
+    "@types/styled-components" "*"
+    "@types/styled-system" "*"
+    "@types/styled-system__css" "*"
+
 "@types/sinon-chai@3.2.3":
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/@types/sinon-chai/-/sinon-chai-3.2.3.tgz#afe392303dda95cc8069685d1e537ff434fa506e"
@@ -2594,6 +2604,16 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/styled-components@*":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.0.tgz#24d3412ba5395aa06e14fbc93c52f9454cebd0d6"
+  integrity sha512-ZFlLCuwF5r+4Vb7JUmd+Yr2S0UBdBGmI7ctFTgJMypIp3xOHI4LCFVn2dKMvpk6xDB2hLRykrEWMBwJEpUAUIQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    "@types/react-native" "*"
+    csstype "^2.2.0"
+
 "@types/styled-components@^4.2.0":
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.3.tgz#74dd00ad760845a98890a8539361d8afc32059de"
@@ -2604,6 +2624,20 @@
     "@types/react-native" "*"
     csstype "^2.2.0"
 
+"@types/styled-system@*":
+  version "5.1.9"
+  resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.9.tgz#8baac8f6eca9e0bd5768c175ca5ce1f2d6f61ade"
+  integrity sha512-QlWv6tmQV8dqk8s+LSLb9QAtmuQEnfv4f8lKKZkMgDqRFVmxJDBwEw0u4zhpxp56u0hdR+TCIk9dGfOw3TkCoQ==
+  dependencies:
+    csstype "^2.6.9"
+
+"@types/styled-system__css@*":
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/@types/styled-system__css/-/styled-system__css-5.0.8.tgz#3886fc89e003aadda858349a5cf324fe54b09980"
+  integrity sha512-skv+daDje8vWQ8wnqVV0GCzgWVKx4gI9lJpAxWE77s52Ne6k/SCPP8HGE4BFbWDvK+qi5O3p89BGWVOQ1VHjMg==
+  dependencies:
+    csstype "^2.6.6"
+
 "@types/web3-provider-engine@^14.0.0":
   version "14.0.0"
   resolved "https://registry.yarnpkg.com/@types/web3-provider-engine/-/web3-provider-engine-14.0.0.tgz#43adc3b39dc9812b82aef8cd2d66577665ad59b0"
@@ -5960,7 +5994,7 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
   dependencies:
     cssom "0.3.x"
 
-csstype@^2.2.0, csstype@^2.5.2, csstype@^2.5.7, csstype@^2.6.5, csstype@^2.6.7:
+csstype@^2.2.0, csstype@^2.5.2, csstype@^2.5.7, csstype@^2.6.5, csstype@^2.6.6, csstype@^2.6.7, csstype@^2.6.9:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
   integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
@@ -6865,6 +6899,11 @@ eslint-plugin-react-hooks@^1.6.1:
   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-hooks@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.0.tgz#81196b990043cde339e25c6662aeebe32ac52d01"
+  integrity sha512-YKBY+kilK5wrwIdQnCF395Ya6nDro3EAMoe+2xFkmyklyhF16fH83TrQOo9zbZIDxBsXFgBbywta/0JKRNFDkw==
+
 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"