fix: eslint

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2020,
@@ -13,26 +14,7 @@
       "version": "detect"
     }
   },
-  "ignorePatterns": [
-    "src/types/v3",
-    "src/abis/types",
-    "src/locales/**/*.js",
-    "src/locales/**/en-US.po",
-    "src/state/data/generated.ts",
-    "node_modules",
-    "coverage",
-    "build",
-    "dist",
-    ".DS_Store",
-    ".env.local",
-    ".env.development.local",
-    ".env.test.local",
-    ".env.production.local",
-    ".idea/",
-    ".vscode/",
-    "package-lock.json",
-    "yarn.lock"
-  ],
+  "ignorePatterns": ["src/types/v3", "src/abis/types", "src/locales/", "node_modules/", "yarn.lock", "dist/"],
   "extends": [
     "react-app",
     "plugin:react/recommended",
@@ -63,11 +45,6 @@
             "name": "ethers",
             "message": "Please import from '@ethersproject/module' directly to support tree-shaking."
           },
-          {
-            "name": "@lingui/macro",
-            "importNames": ["t"],
-            "message": "Please use <Trans> instead of t."
-          },
           {
             "name": "react-feather",
             "message": "Please import from lib/icons to ensure performant usage."

package.json

@@ -74,8 +74,8 @@
     "@types/styled-components": "^5.1.0",
     "@types/ua-parser-js": "^0.7.35",
     "@types/wcag-contrast": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.1.0",
-    "@typescript-eslint/parser": "^4.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
     "@uniswap/default-token-list": "^3.0.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
@@ -98,10 +98,11 @@
     "d3": "^7.0.0",
     "eslint": "^7.11.0",
     "eslint-config-prettier": "^6.11.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-better-styled-components": "^1.1.2",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "firebase": "^9.1.3",

rollup.config.ts

@@ -20,7 +20,6 @@ import dts from 'rollup-plugin-dts'
 import multi from 'rollup-plugin-multi-input'
 import externals from 'rollup-plugin-node-externals'
 import sass from 'rollup-plugin-scss'
-import { CompilerOptions } from 'typescript'
 
 const REPLACEMENTS = {
   // esm requires fully-specified paths:

src/components/ActionButton.tsx

@@ -1,6 +1,6 @@
 import { AlertTriangle, Icon, LargeIcon } from 'icons'
-import styled, { Color, css, keyframes, ThemedText } from 'theme'
 import { ReactNode, useMemo } from 'react'
+import styled, { Color, css, keyframes, ThemedText } from 'theme'
 
 import Button from './Button'
 import Row from './Row'

src/components/BrandedFooter.tsx

@@ -1,8 +1,8 @@
 import { Trans } from '@lingui/macro'
 import Row from 'components/Row'
 import { Logo } from 'icons'
-import styled, { brand, ThemedText } from 'theme'
 import { memo } from 'react'
+import styled, { brand, ThemedText } from 'theme'
 
 import ExternalLink from './ExternalLink'
 

src/components/Button.tsx

@@ -1,6 +1,6 @@
 import { Icon } from 'icons'
-import styled, { Color, css } from 'theme'
 import { ComponentProps, forwardRef } from 'react'
+import styled, { Color, css } from 'theme'
 
 export const BaseButton = styled.button`
   background-color: transparent;

src/components/Dialog.tsx

@@ -1,10 +1,10 @@
 import 'wicg-inert'
 
 import { X } from 'icons'
-import styled, { Color, Layer, ThemeProvider } from 'theme'
-import { delayUnmountForAnimation } from 'utils/animations'
 import { createContext, ReactElement, ReactNode, useContext, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
+import styled, { Color, Layer, ThemeProvider } from 'theme'
+import { delayUnmountForAnimation } from 'utils/animations'
 
 import { IconButton } from './Button'
 import Column from './Column'

src/components/Error/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import React, { ErrorInfo } from 'react'
+import { Component, ErrorInfo, PropsWithChildren } from 'react'
 
 import Dialog from '../Dialog'
 import ErrorDialog from './ErrorDialog'
@@ -14,7 +14,7 @@ type ErrorBoundaryState = {
   error: Error | null
 }
 
-export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+export default class ErrorBoundary extends Component<PropsWithChildren<ErrorBoundaryProps>, ErrorBoundaryState> {
   constructor(props: ErrorBoundaryProps) {
     super(props)
     this.state = { error: null }

src/components/Error/ErrorDialog.tsx

@@ -3,8 +3,8 @@ import ActionButton from 'components/ActionButton'
 import Column from 'components/Column'
 import Expando from 'components/Expando'
 import { AlertTriangle, Icon, LargeIcon } from 'icons'
-import styled, { Color, ThemedText } from 'theme'
 import { ReactNode, useCallback, useState } from 'react'
+import styled, { Color, ThemedText } from 'theme'
 
 const HeaderIcon = styled(LargeIcon)`
   flex-grow: 1;

src/components/EtherscanLink.tsx

@@ -1,8 +1,8 @@
 import { SupportedChainId } from 'constants/chains'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { Link } from 'icons'
-import styled, { Color } from 'theme'
 import { ReactNode, useMemo } from 'react'
+import styled, { Color } from 'theme'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 import ExternalLink from './ExternalLink'

src/components/Expando.tsx

@@ -4,8 +4,8 @@ import Row from 'components/Row'
 import Rule from 'components/Rule'
 import useScrollbar from 'hooks/useScrollbar'
 import { Expando as ExpandoIcon } from 'icons'
-import styled from 'theme'
 import { PropsWithChildren, ReactNode, useState } from 'react'
+import styled from 'theme'
 
 const HeaderColumn = styled(Column)`
   transition: gap 0.25s;

src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { largeIconCss } from 'icons'
-import styled, { ThemedText } from 'theme'
 import { ReactElement, ReactNode } from 'react'
+import styled, { ThemedText } from 'theme'
 
 import Row from './Row'
 

src/components/Input.tsx

@@ -1,7 +1,7 @@
 import { loadingOpacity } from 'css/loading'
-import styled, { css } from 'theme'
 import { transparentize } from 'polished'
 import { ChangeEvent, forwardRef, HTMLProps, useCallback } from 'react'
+import styled, { css } from 'theme'
 
 const Input = styled.input`
   -webkit-appearance: textfield;
@@ -50,13 +50,14 @@ const Input = styled.input`
 
 export default Input
 
-interface StringInputProps extends Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'as' | 'value'> {
+interface InputProps extends Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'as' | 'value'> {
   value: string
   onChange: (input: string) => void
+  placeholder?: string
 }
 
-export const StringInput = forwardRef<HTMLInputElement, StringInputProps>(function StringInput(
-  { value, onChange, ...props }: StringInputProps,
+export const StringInput = forwardRef<HTMLInputElement, InputProps>(function StringInput(
+  { value, onChange, ...props }: InputProps,
   ref
 ) {
   return (
@@ -78,18 +79,14 @@ export const StringInput = forwardRef<HTMLInputElement, StringInputProps>(functi
   )
 })
 
-interface NumericInputProps extends Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'as' | 'value'> {
-  value: string
-  onChange: (input: string) => void
-}
-
-interface EnforcedNumericInputProps extends NumericInputProps {
+interface EnforcedInputProps extends InputProps {
   // Validates nextUserInput; returns stringified value, or null if invalid
   enforcer: (nextUserInput: string) => string | null
+  pattern: string
 }
 
-const NumericInput = forwardRef<HTMLInputElement, EnforcedNumericInputProps>(function NumericInput(
-  { value, onChange, enforcer, pattern, ...props }: EnforcedNumericInputProps,
+const NumericInput = forwardRef<HTMLInputElement, EnforcedInputProps>(function NumericInput(
+  { value, onChange, enforcer, pattern, ...props }: EnforcedInputProps,
   ref
 ) {
   const validateChange = useCallback(
@@ -131,7 +128,7 @@ const integerEnforcer = (nextUserInput: string) => {
   }
   return null
 }
-export const IntegerInput = forwardRef(function IntegerInput(props: NumericInputProps, ref) {
+export const IntegerInput = forwardRef(function IntegerInput(props: InputProps, ref) {
   return <NumericInput pattern="^[0-9]*$" enforcer={integerEnforcer} ref={ref as any} {...props} />
 })
 
@@ -146,7 +143,7 @@ const decimalEnforcer = (nextUserInput: string) => {
   }
   return null
 }
-export const DecimalInput = forwardRef(function DecimalInput(props: NumericInputProps, ref) {
+export const DecimalInput = forwardRef(function DecimalInput(props: InputProps, ref) {
   return <NumericInput pattern="^[0-9]*[.,]?[0-9]*$" enforcer={decimalEnforcer} ref={ref as any} {...props} />
 })
 

src/components/Popover.tsx

@@ -1,9 +1,9 @@
 import { Options, Placement } from '@popperjs/core'
-import styled, { Layer } from 'theme'
 import maxSize from 'popper-max-size-modifier'
 import React, { createContext, useContext, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { usePopper } from 'react-popper'
+import styled, { Layer } from 'theme'
 
 const BoundaryContext = createContext<HTMLDivElement | null>(null)
 

src/components/RecentTransactionsDialog.tsx

@@ -1,8 +1,8 @@
 import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
 import { AlertTriangle, ArrowRight, CheckCircle, Spinner, Trash2 } from 'icons'
-import styled, { ThemedText } from 'theme'
 import { useMemo, useState } from 'react'
+import styled, { ThemedText } from 'theme'
 
 import Button from './Button'
 import Column from './Column'

src/components/Row.tsx

@@ -1,5 +1,5 @@
-import styled, { Color, Theme } from 'theme'
 import { Children, ReactNode } from 'react'
+import styled, { Color, Theme } from 'theme'
 
 const Row = styled.div<{
   color?: Color

src/components/Swap/Input.tsx

@@ -9,10 +9,10 @@ import {
   useSwapInfo,
 } from 'hooks/swap'
 import { usePrefetchCurrencyColor } from 'hooks/useCurrencyColor'
-import { Field } from 'state/swap'
-import styled, { ThemedText } from 'theme'
 import { useMemo } from 'react'
 import { TradeState } from 'state/routing/types'
+import { Field } from 'state/swap'
+import styled, { ThemedText } from 'theme'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 import { maxAmountSpend } from 'utils/maxAmountSpend'
 

src/components/Swap/Output.tsx

@@ -1,14 +1,14 @@
 import { Trans } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
-import { atom } from 'jotai'
-import { useAtomValue } from 'jotai/utils'
 import BrandedFooter from 'components/BrandedFooter'
 import { useIsSwapFieldIndependent, useSwapAmount, useSwapCurrency, useSwapInfo } from 'hooks/swap'
 import useCurrencyColor from 'hooks/useCurrencyColor'
-import { Field } from 'state/swap'
-import styled, { DynamicThemeProvider, ThemedText } from 'theme'
+import { atom } from 'jotai'
+import { useAtomValue } from 'jotai/utils'
 import { PropsWithChildren } from 'react'
 import { TradeState } from 'state/routing/types'
+import { Field } from 'state/swap'
+import styled, { DynamicThemeProvider, ThemedText } from 'theme'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import Column from '../Column'

src/components/Swap/Price.tsx

@@ -2,10 +2,10 @@ import { useLingui } from '@lingui/react'
 import { Trade } from '@uniswap/router-sdk'
 import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
 import Row from 'components/Row'
-import { ThemedText } from 'theme'
-import formatLocaleNumber from 'utils/formatLocaleNumber'
 import { useCallback, useMemo, useState } from 'react'
+import { ThemedText } from 'theme'
 import { formatCurrencyAmount, formatPrice } from 'utils/formatCurrencyAmount'
+import formatLocaleNumber from 'utils/formatLocaleNumber'
 
 import { TextButton } from '../Button'
 

src/components/Swap/ReverseButton.tsx

@@ -1,7 +1,7 @@
 import { useSwitchSwapCurrencies } from 'hooks/swap'
 import { ArrowDown as ArrowDownIcon, ArrowUp as ArrowUpIcon } from 'icons'
-import styled, { Layer } from 'theme'
 import { useCallback, useState } from 'react'
+import styled, { Layer } from 'theme'
 
 import Button from '../Button'
 import Row from '../Row'

src/components/Swap/RoutingDiagram/index.tsx

@@ -7,9 +7,9 @@ import Row from 'components/Row'
 import Rule from 'components/Rule'
 import TokenImg from 'components/TokenImg'
 import { AutoRouter } from 'icons'
-import styled, { Layer, ThemedText } from 'theme'
 import { useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
+import styled, { Layer, ThemedText } from 'theme'
 
 import { getTokenPath, RoutingDiagramEntry } from './utils'
 

src/components/Swap/Settings/MaxSlippageSelect.tsx

@@ -1,12 +1,12 @@
 import { Trans } from '@lingui/macro'
-import { useAtom } from 'jotai'
 import Popover from 'components/Popover'
 import { useTooltip } from 'components/Tooltip'
 import { getSlippageWarning, toPercent } from 'hooks/useSlippage'
 import { AlertTriangle, Check, Icon, LargeIcon, XOctagon } from 'icons'
+import { useAtom } from 'jotai'
+import { forwardRef, memo, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { autoSlippageAtom, maxSlippageAtom } from 'state/settings'
 import styled, { ThemedText } from 'theme'
-import { forwardRef, memo, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { BaseButton, TextButton } from '../../Button'
 import Column from '../../Column'

src/components/Swap/Settings/TransactionTtlInput.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { useDefaultTransactionTtl, useTransactionTtl } from 'hooks/useTransactionDeadline'
-import styled, { ThemedText } from 'theme'
 import { useRef } from 'react'
+import styled, { ThemedText } from 'theme'
 
 import Column from '../../Column'
 import { inputCss, IntegerInput } from '../../Input'

src/components/Swap/Settings/components.tsx

@@ -1,7 +1,7 @@
-import styled, { css, ThemedText } from 'theme'
 import { ReactNode } from 'react'
 // eslint-disable-next-line no-restricted-imports
 import { AnyStyledComponent } from 'styled-components'
+import styled, { css, ThemedText } from 'theme'
 
 import Row from '../../Row'
 import Tooltip from '../../Tooltip'

src/components/Swap/Settings/index.tsx

@@ -1,10 +1,10 @@
 import { Trans } from '@lingui/macro'
-import { useResetAtom } from 'jotai/utils'
 import useScrollbar from 'hooks/useScrollbar'
 import { Settings as SettingsIcon } from 'icons'
+import { useResetAtom } from 'jotai/utils'
+import React, { useState } from 'react'
 import { settingsAtom } from 'state/settings'
 import styled, { ThemedText } from 'theme'
-import React, { useState } from 'react'
 
 import { IconButton, TextButton } from '../../Button'
 import Column from '../../Column'

src/components/Swap/Status/StatusDialog.tsx

@@ -5,10 +5,10 @@ import Rule from 'components/Rule'
 import SwapSummary from 'components/Swap/Summary'
 import useInterval from 'hooks/useInterval'
 import { CheckCircle, Clock, Spinner } from 'icons'
-import { SwapTransactionInfo, Transaction, TransactionType, WrapTransactionInfo } from 'state/transactions'
-import styled, { ThemedText } from 'theme'
 import ms from 'ms.macro'
 import { useCallback, useMemo, useState } from 'react'
+import { SwapTransactionInfo, Transaction, TransactionType, WrapTransactionInfo } from 'state/transactions'
+import styled, { ThemedText } from 'theme'
 import { ExplorerDataType } from 'utils/getExplorerLink'
 
 import ActionButton from '../../ActionButton'