refactor: remove unneeded react import (#1801)

* Add rules

* Remove React import

* remove React import

.eslintrc.json

@@ -27,6 +27,7 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-ts-ignore": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off"
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "react/react-in-jsx-scope": "off"
   }
 }

src/components/AccountDetails/Transaction.tsx

-import React from 'react'
 import styled from 'styled-components/macro'
 import { CheckCircle, Triangle } from 'react-feather'
 

src/components/AccountDetails/index.tsx

-import React, { useCallback, useContext } from 'react'
+import { useCallback, useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import { useActiveWeb3React } from '../../hooks/web3'

src/components/AddressInputPanel/index.tsx

-import React, { useContext, useCallback } from 'react'
+import { useContext, useCallback } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 import useENS from '../../hooks/useENS'
 import { useActiveWeb3React } from '../../hooks/web3'

src/components/Badge/RangeBadge.tsx

-import React from 'react'
-
 import Badge, { BadgeVariant } from 'components/Badge'
 import styled from 'styled-components/macro'
 

src/components/Blocklist/index.tsx

-import React, { ReactNode, useMemo } from 'react'
+import { ReactNode, useMemo } from 'react'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { Trans } from '@lingui/macro'
 

src/components/Button/index.tsx

-import React from 'react'
 import styled from 'styled-components/macro'
 import { darken } from 'polished'
 

src/components/Confetti/index.tsx

-import React from 'react'
 import ReactConfetti from 'react-confetti'
 import { useWindowSize } from '../../hooks/useWindowSize'
 

src/components/CurrencyInputPanel/FiatValue.tsx

 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import useTheme from '../../hooks/useTheme'
 import { TYPE } from '../../theme'
 import { warningSeverity } from '../../utils/prices'

src/components/CurrencyInputPanel/index.tsx

 import { Pair } from '@uniswap/v2-sdk'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
-import React, { useState, useCallback, ReactNode } from 'react'
+import { useState, useCallback, ReactNode } from 'react'
 import styled from 'styled-components/macro'
 import { darken } from 'polished'
 import { useCurrencyBalance } from '../../state/wallet/hooks'

src/components/DoubleLogo/index.tsx

 import { Currency } from '@uniswap/sdk-core'
-import React from 'react'
 import styled from 'styled-components/macro'
 import CurrencyLogo from '../CurrencyLogo'
 

src/components/FeeSelector/index.tsx

-import React from 'react'
 import { FeeAmount } from '@uniswap/v3-sdk'
 import { Trans } from '@lingui/macro'
 import { AutoColumn } from 'components/Column'

src/components/FormattedCurrencyAmount/index.tsx

 import JSBI from 'jsbi'
-import React from 'react'
 import { Currency, CurrencyAmount, Fraction } from '@uniswap/sdk-core'
 
 const CURRENCY_AMOUNT_MIN = new Fraction(JSBI.BigInt(1), JSBI.BigInt(1000000))

src/components/Header/Polling.tsx

-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import styled, { keyframes } from 'styled-components'
 import { useActiveWeb3React } from '../../hooks/web3'
 

src/components/Header/URLWarning.tsx

-import React from 'react'
 import styled from 'styled-components/macro'
 
 import { AlertTriangle, X } from 'react-feather'

src/components/Header/UniBalanceContent.tsx

 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { X } from 'react-feather'
 import styled from 'styled-components/macro'
 import tokenLogo from '../../assets/images/token-logo.png'

src/components/Header/index.tsx

 import { Trans } from '@lingui/macro'
 import useScrollPosition from '@react-hook/window-scroll'
 import { darken } from 'polished'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Moon, Sun } from 'react-feather'
 import { NavLink } from 'react-router-dom'
 import { Text } from 'rebass'

src/components/HoverInlineText/index.tsx

 import Tooltip from 'components/Tooltip'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import styled from 'styled-components/macro'
 
 const TextWrapper = styled.span<{ margin: boolean; link?: boolean; fontSize?: string; adjustSize?: boolean }>`

src/components/Identicon/index.tsx

-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 
 import styled from 'styled-components/macro'
 

src/components/InputStepCounter/InputStepCounter.tsx

-import React, { useState, useCallback, useEffect, ReactNode } from 'react'
+import { useState, useCallback, useEffect, ReactNode } from 'react'
 import { LightCard } from 'components/Card'
 import { RowBetween } from 'components/Row'
 import { Input as NumericalInput } from '../NumericalInput'

src/components/Loader/index.tsx

-import React from 'react'
-
 import styled, { keyframes } from 'styled-components'
 
 const rotate = keyframes`

src/components/Logo/index.tsx

-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Slash } from 'react-feather'
 import { ImageProps } from 'rebass'
 import useTheme from '../../hooks/useTheme'

src/components/ModalViews/index.tsx

-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 

src/components/NavigationTabs/index.tsx

-import React from 'react'
 import styled from 'styled-components/macro'
 import { darken } from 'polished'
 import { Trans } from '@lingui/macro'

src/components/Popups/ClaimPopup.tsx

 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import React, { useCallback, useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import ReactGA from 'react-ga'
 import { Heart, X } from 'react-feather'
 import styled, { keyframes } from 'styled-components'

src/components/Popups/PopupItem.tsx

-import React, { useCallback, useContext, useEffect } from 'react'
+import { useCallback, useContext, useEffect } from 'react'
 import { X } from 'react-feather'
 import { useSpring } from 'react-spring/web'
 import styled, { ThemeContext } from 'styled-components'

src/components/Popups/TransactionPopup.tsx

-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { AlertCircle, CheckCircle } from 'react-feather'
 import styled, { ThemeContext } from 'styled-components'
 import { useActiveWeb3React } from '../../hooks/web3'

src/components/Popups/index.tsx

-import React from 'react'
 import styled from 'styled-components/macro'
 import { useActivePopups } from '../../state/application/hooks'
 import { AutoColumn } from '../Column'

src/components/PositionCard/Sushi.tsx

-import React from 'react'
 import { Token } from '@uniswap/sdk-core'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'

src/components/PositionCard/V2.tsx

 import JSBI from 'jsbi'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Percent, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { ChevronDown, ChevronUp } from 'react-feather'

src/components/PositionCard/index.tsx

@@ -2,7 +2,7 @@ import JSBI from 'jsbi'
 import { Percent, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { darken } from 'polished'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'

src/components/PositionListItem/index.tsx

-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { Position } from '@uniswap/v3-sdk'
 import Badge from 'components/Badge'
 import DoubleCurrencyLogo from 'components/DoubleLogo'

src/components/PositionPreview/index.tsx

-import React, { useState, useCallback, useContext, ReactNode } from 'react'
+import { useState, useCallback, useContext, ReactNode } from 'react'
 import { Position } from '@uniswap/v3-sdk'
 import { LightCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'

src/components/ProgressSteps/index.tsx

-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import styled from 'styled-components/macro'
 import { AutoColumn } from '../Column'
 import { ThemeContext } from 'styled-components'

src/components/QuestionHelper/index.tsx

-import React, { ReactNode, useCallback, useState } from 'react'
+import { ReactNode, useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
 import Tooltip from '../Tooltip'
 

src/components/RangeSelector/index.tsx

 import { Trans } from '@lingui/macro'
-import React from 'react'
 import { Currency, Price, Token } from '@uniswap/sdk-core'
 import StepCounter from 'components/InputStepCounter/InputStepCounter'
 import { RowBetween } from 'components/Row'

src/components/RateToggle/index.tsx

 import { Trans } from '@lingui/macro'
-import React from 'react'
 import { Currency } from '@uniswap/sdk-core'
 import { ToggleElement, ToggleWrapper } from 'components/Toggle/MultiToggle'
 

src/components/SearchModal/CommonBases.tsx

 import { Trans } from '@lingui/macro'
-import React from 'react'
 import { Text } from 'rebass'
 import { Currency } from '@uniswap/sdk-core'
 import styled from 'styled-components/macro'

src/components/SearchModal/CurrencyList.tsx

 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
-import React, { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
+import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'

src/components/SearchModal/CurrencySearch.tsx

 import { Currency, Token } from '@uniswap/sdk-core'
-import React, { KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import ReactGA from 'react-ga'
 import { t, Trans } from '@lingui/macro'
 import { FixedSizeList } from 'react-window'

src/components/SearchModal/CurrencySearchModal.tsx

 import { Currency, Token } from '@uniswap/sdk-core'
-import React, { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import useLast from '../../hooks/useLast'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
 import Modal from '../Modal'

src/components/SearchModal/ImportList.tsx

-import React, { useState, useCallback } from 'react'
+import { useState, useCallback } from 'react'
 import styled from 'styled-components/macro'
 import ReactGA from 'react-ga'
 import { TYPE, CloseIcon } from 'theme'

src/components/SearchModal/ImportRow.tsx

-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
 import { Token } from '@uniswap/sdk-core'
 import { AutoRow, RowFixed } from 'components/Row'
 import { AutoColumn } from 'components/Column'

src/components/SearchModal/ImportToken.tsx

 import { TokenList } from '@uniswap/token-lists/dist/types'
-import React from 'react'
 import { Token, Currency } from '@uniswap/sdk-core'
 import styled from 'styled-components/macro'
 import { TYPE, CloseIcon } from 'theme'

src/components/SearchModal/Manage.tsx

 import { Trans } from '@lingui/macro'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { PaddedColumn, Separator } from './styleds'
 import { RowBetween } from 'components/Row'
 import { ArrowLeft } from 'react-feather'

src/components/SearchModal/ManageLists.tsx

-import React, { memo, useCallback, useMemo, useRef, useState, useEffect } from 'react'
+import { memo, useCallback, useMemo, useRef, useState, useEffect } from 'react'
 import { Settings, CheckCircle } from 'react-feather'
 import ReactGA from 'react-ga'
 import { useAppDispatch, useAppSelector } from 'state/hooks'

src/components/SearchModal/ManageTokens.tsx

-import React, { useRef, RefObject, useCallback, useState, useMemo } from 'react'
+import { useRef, RefObject, useCallback, useState, useMemo } from 'react'
 import Column from 'components/Column'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { PaddedColumn, Separator, SearchInput } from './styleds'

src/components/SearchModal/SortButton.tsx

-import React from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import { RowFixed } from '../Row'

src/components/Settings/index.tsx

 import { t, Trans } from '@lingui/macro'
-import React, { useContext, useRef, useState } from 'react'
+import { useContext, useRef, useState } from 'react'
 import { Settings, X } from 'react-feather'
 import ReactGA from 'react-ga'
 import { Text } from 'rebass'

src/components/Slider/index.tsx

-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components/macro'
 
 const StyledRangeInput = styled.input<{ size: number }>`

src/components/SwitchLocaleLink/index.tsx

 import { Trans } from '@lingui/macro'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import ReactGA from 'react-ga'
 import { useLocation } from 'react-router'
 import styled from 'styled-components/macro'

src/components/ThemeColorPalette/index.tsx

 import { readableColor } from 'polished'
-import React from 'react'
 import styled from 'styled-components/macro'
 import { colors } from 'theme'
 

src/components/Toggle/ListToggle.tsx

 import { Trans } from '@lingui/macro'
-import React from 'react'
 import styled from 'styled-components/macro'
 import { TYPE } from '../../theme'
 

src/components/Toggle/index.tsx

 import { Trans } from '@lingui/macro'
 import { darken } from 'polished'
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import styled from 'styled-components/macro'
 
 const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`

src/components/TokenWarningModal/index.tsx

 import { Token } from '@uniswap/sdk-core'
-import React from 'react'
 import Modal from '../Modal'
 import { ImportToken } from 'components/SearchModal/ImportToken'
 

src/components/Tooltip/index.tsx

-import React, { ReactNode, useCallback, useState } from 'react'
+import { ReactNode, useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
 import Popover, { PopoverProps } from '../Popover'
 

src/components/TransactionConfirmationModal/index.tsx

 import { Currency } from '@uniswap/sdk-core'
-import React, { ReactNode, useContext } from 'react'
+import { ReactNode, useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 import { getExplorerLink, ExplorerDataType } from '../../utils/getExplorerLink'
 import Modal from '../Modal'

src/components/TransactionSettings/index.tsx

 import { t, Trans } from '@lingui/macro'
-import React, { useState, useContext } from 'react'
+import { useState, useContext } from 'react'
 import { Percent } from '@uniswap/sdk-core'
 import styled, { ThemeContext } from 'styled-components'
 

src/components/WalletModal/PendingView.tsx

 import { AbstractConnector } from '@web3-react/abstract-connector'
-import React from 'react'
 import styled from 'styled-components/macro'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import Option from './Option'

src/components/WalletModal/index.tsx

@@ -2,7 +2,7 @@ import { AbstractConnector } from '@web3-react/abstract-connector'
 import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 import { AutoRow } from 'components/Row'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import ReactGA from 'react-ga'
 import styled from 'styled-components/macro'

src/components/Web3ReactManager/index.tsx

-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { useWeb3React } from '@web3-react/core'
 import styled from 'styled-components/macro'
 import { Trans } from '@lingui/macro'

src/components/Web3Status/index.tsx

 import { AbstractConnector } from '@web3-react/abstract-connector'
 import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 import { darken, lighten } from 'polished'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { Activity } from 'react-feather'
 import { t, Trans } from '@lingui/macro'
 import styled, { css } from 'styled-components'

src/components/claim/AddressClaimModal.tsx

-import React, { useState } from 'react'
+import { useState } from 'react'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import Modal from '../Modal'
 import { AutoColumn, ColumnCenter } from '../Column'

src/components/claim/ClaimModal.tsx

 import JSBI from 'jsbi'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { isAddress } from 'ethers/lib/utils'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import Circle from '../../assets/images/blue-loader.svg'

src/components/earn/ClaimRewardModal.tsx

-import React, { useState } from 'react'
+import { useState } from 'react'
 import Modal from '../Modal'
 import { AutoColumn } from '../Column'
 import styled from 'styled-components/macro'

src/components/earn/PoolCard.tsx

-import React from 'react'
 import { AutoColumn } from '../Column'
 import { RowBetween } from '../Row'
 import styled from 'styled-components/macro'

src/components/earn/StakingModal.tsx

-import React, { useState, useCallback } from 'react'
+import { useState, useCallback } from 'react'
 import { useV2LiquidityTokenPermit } from '../../hooks/useERC20Permit'
 import useTransactionDeadline from '../../hooks/useTransactionDeadline'
 import { formatCurrencyAmount } from '../../utils/formatCurrencyAmount'

src/components/earn/UnstakingModal.tsx

-import React, { useState } from 'react'
+import { useState } from 'react'
 import Modal from '../Modal'
 import { AutoColumn } from '../Column'
 import styled from 'styled-components/macro'

src/components/swap/AdvancedSwapDetails.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { Percent, Currency, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
-import React, { useContext, useMemo } from 'react'
+import { useContext, useMemo } from 'react'
 import { ThemeContext } from 'styled-components'
 import { TYPE } from '../../theme'
 import { computeRealizedLPFeePercent } from '../../utils/prices'

src/components/swap/AdvancedSwapDetailsDropdown.tsx

-import React from 'react'
 import styled from 'styled-components/macro'
 import { useLastTruthy } from '../../hooks/useLast'
 import { AdvancedSwapDetails, AdvancedSwapDetailsProps } from './AdvancedSwapDetails'

src/components/swap/BetterTradeLink.tsx

 import { stringify } from 'qs'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { useLocation } from 'react-router'
 import { Link } from 'react-router-dom'
 

src/components/swap/ConfirmSwapModal.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
-import React, { ReactNode, useCallback, useMemo } from 'react'
+import { ReactNode, useCallback, useMemo } from 'react'
 import TransactionConfirmationModal, {
   ConfirmationModalContent,
   TransactionErrorContent,

src/components/swap/FormattedPriceImpact.tsx

 import { Percent } from '@uniswap/sdk-core'
-import React from 'react'
 import { warningSeverity } from '../../utils/prices'
 import { ErrorText, ErrorPill } from './styleds'
 

src/components/swap/SwapHeader.tsx

 import { Trans } from '@lingui/macro'
-import React from 'react'
 import styled from 'styled-components/macro'
 import SettingsTab from '../Settings'
 import { Percent } from '@uniswap/sdk-core'

src/components/swap/SwapModalFooter.tsx

@@ -3,7 +3,7 @@ import { Currency, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
 
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import { Text } from 'rebass'
 import { ButtonError } from '../Button'
 import { AutoRow } from '../Row'

src/components/swap/SwapModalHeader.tsx

 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
-import React, { useContext, useState } from 'react'
+import { useContext, useState } from 'react'
 import { ArrowDown, AlertTriangle } from 'react-feather'
 import { Text } from 'rebass'
 import styled, { ThemeContext } from 'styled-components'

src/components/swap/SwapRoute.tsx

 import { Currency, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade, FeeAmount } from '@uniswap/v3-sdk'
-import React, { Fragment, memo, useContext } from 'react'
+import { Fragment, memo, useContext } from 'react'
 import { ChevronRight } from 'react-feather'
 import { Flex } from 'rebass'
 import { ThemeContext } from 'styled-components'

src/components/swap/TradePrice.tsx

-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { Price, Currency } from '@uniswap/sdk-core'
 import { useContext } from 'react'
 import { Text } from 'rebass'

src/components/swap/UnsupportedCurrencyFooter.tsx

-import React, { useState } from 'react'
+import { useState } from 'react'
 import styled from 'styled-components/macro'
 import { TYPE, CloseIcon, ExternalLink } from 'theme'
 import { ButtonEmpty } from 'components/Button'

src/components/swap/styleds.tsx

 import { transparentize } from 'polished'
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 
 import { AlertTriangle } from 'react-feather'

src/components/vote/DelegateModal.tsx

-import React, { ReactNode, useState } from 'react'
+import { ReactNode, useState } from 'react'
 import { UNI } from '../../constants/tokens'
 
 import Modal from '../Modal'

src/components/vote/VoteModal.tsx

-import React, { useState, useContext } from 'react'
+import { useState, useContext } from 'react'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { getExplorerLink, ExplorerDataType } from '../../utils/getExplorerLink'
 

src/i18n.tsx

-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { i18n } from '@lingui/core'
 import { I18nProvider } from '@lingui/react'
 import { ReactNode } from 'react'

src/index.tsx

 import 'inter-ui'
 import '@reach/dialog/styles.css'
 import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core'
-import React, { StrictMode } from 'react'
+import { StrictMode } from 'react'
 import { isMobile } from 'react-device-detect'
 import ReactDOM from 'react-dom'
 import ReactGA from 'react-ga'

src/pages/AddLiquidity/PoolPriceBar.tsx

 import { Currency, Percent, Price } from '@uniswap/sdk-core'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
 import { AutoColumn } from '../../components/Column'

src/pages/AddLiquidity/Review.tsx

-import React from 'react'
 import { Field } from '../../state/mint/v3/actions'
 import { AutoColumn } from 'components/Column'
 import Card from 'components/Card'

src/pages/AddLiquidity/index.tsx

-import React, { useCallback, useContext, useMemo, useState } from 'react'
+import { useCallback, useContext, useMemo, useState } from 'react'
 import { TransactionResponse } from '@ethersproject/providers'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import { AlertTriangle, AlertCircle } from 'react-feather'

src/pages/AddLiquidity/redirects.tsx

 import { useActiveWeb3React } from 'hooks/web3'
-import React from 'react'
 import { Redirect, RouteComponentProps } from 'react-router-dom'
 import { WETH9_EXTENDED } from '../../constants/tokens'
 import AddLiquidity from './index'

src/pages/AddLiquidityV2/ConfirmAddModalBottom.tsx

 import { Currency, CurrencyAmount, Fraction, Percent } from '@uniswap/sdk-core'
-import React from 'react'
 import { Text } from 'rebass'
 import { ButtonPrimary } from '../../components/Button'
 import { RowBetween, RowFixed } from '../../components/Row'

src/pages/AddLiquidityV2/PoolPriceBar.tsx

 import { Currency, Percent, Price } from '@uniswap/sdk-core'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
 import { AutoColumn } from '../../components/Column'

src/pages/AddLiquidityV2/index.tsx

 import { BigNumber } from '@ethersproject/bignumber'
 import { TransactionResponse } from '@ethersproject/providers'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
-import React, { useCallback, useContext, useState } from 'react'
+import { useCallback, useContext, useState } from 'react'
 import { Plus } from 'react-feather'
 import ReactGA from 'react-ga'
 import { RouteComponentProps } from 'react-router-dom'

src/pages/AddLiquidityV2/redirects.tsx

-import React from 'react'
 import { Redirect, RouteComponentProps } from 'react-router-dom'
 import AddLiquidityV2 from './index'
 

src/pages/App.tsx

-import React from 'react'
 import { Route, Switch } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import GoogleAnalyticsReporter from '../components/analytics/GoogleAnalyticsReporter'

src/pages/Earn/Countdown.tsx

-import React, { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { STAKING_GENESIS, REWARDS_DURATION_DAYS } from '../../state/stake/hooks'
 import { TYPE } from '../../theme'
 

src/pages/Earn/Manage.tsx

-import React, { useCallback, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { AutoColumn } from '../../components/Column'
 import styled from 'styled-components/macro'
 import { Link } from 'react-router-dom'

src/pages/Earn/index.tsx

 import JSBI from 'jsbi'
-import React from 'react'
 import { AutoColumn } from '../../components/Column'
 import styled from 'styled-components/macro'
 import { STAKING_REWARDS_INFO, useStakingInfo } from '../../state/stake/hooks'

src/pages/MigrateV2/MigrateV2Pair.tsx

 import JSBI from 'jsbi'
-import React, { useCallback, useMemo, useState, useEffect, ReactNode } from 'react'
+import { useCallback, useMemo, useState, useEffect, ReactNode } from 'react'
 import { Fraction, Percent, Price, Token, CurrencyAmount } from '@uniswap/sdk-core'
 import { Redirect, RouteComponentProps } from 'react-router'
 import { Text } from 'rebass'

src/pages/MigrateV2/index.tsx

-import React, { ReactNode, useContext, useMemo } from 'react'
+import { ReactNode, useContext, useMemo } from 'react'
 import { Pair } from '@uniswap/v2-sdk'
 import { Token } from '@uniswap/sdk-core'
 import { ThemeContext } from 'styled-components'

src/pages/Pool/CTACards.tsx

-import React from 'react'
 import styled from 'styled-components/macro'
 import { TYPE } from 'theme'
 import { Trans } from '@lingui/macro'

src/pages/Pool/PositionPage.tsx

-import React, { useCallback, useMemo, useRef, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { NonfungiblePositionManager, Pool, Position } from '@uniswap/v3-sdk'
 
 import { PoolState, usePool } from 'hooks/usePools'