refactor: add an import sorting plugin (#2417)

* refactor: add an import sorting plugin

* Fix code style issues with ESLint

Co-authored-by: Lint Action <[email protected]>

.eslintrc.json

@@ -21,7 +21,10 @@
     "prettier/@typescript-eslint",
     "plugin:prettier/recommended"
   ],
+  "plugins": ["simple-import-sort"],
   "rules": {
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
     "@typescript-eslint/explicit-function-return-type": "off",
     "prettier/prettier": "error",
     "@typescript-eslint/no-explicit-any": "off",

cypress/integration/add-liquidity.test.ts

@@ -1,4 +1,5 @@
 import { CyHttpMessages } from 'cypress/types/net-stubbing'
+
 import { aliasQuery, hasQuery } from '../utils/graphql-test-utils'
 
 describe('Add Liquidity', () => {

cypress/support/commands.js

@@ -4,9 +4,9 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 
+import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
 import { JsonRpcProvider } from '@ethersproject/providers'
 import { Wallet } from '@ethersproject/wallet'
-import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
 
 // todo: figure out how env vars actually work in CI
 // const TEST_PRIVATE_KEY = Cypress.env('INTEGRATION_TEST_PRIVATE_KEY')

package.json

@@ -78,6 +78,7 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.0.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
     "ethers": "^5.4.6",
     "graphql": "^15.5.0",
     "graphql-request": "^3.4.0",

src/components/AccountDetails/Copy.tsx

@@ -1,10 +1,10 @@
+import { Trans } from '@lingui/macro'
 import React from 'react'
+import { CheckCircle, Copy } from 'react-feather'
 import styled from 'styled-components/macro'
-import useCopyClipboard from '../../hooks/useCopyClipboard'
 
+import useCopyClipboard from '../../hooks/useCopyClipboard'
 import { LinkStyledButton } from '../../theme'
-import { CheckCircle, Copy } from 'react-feather'
-import { Trans } from '@lingui/macro'
 
 const CopyIcon = styled(LinkStyledButton)`
   color: ${({ theme }) => theme.text3};

src/components/AccountDetails/TransactionSummary.tsx

@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { Fraction, TradeType } from '@uniswap/sdk-core'
 import JSBI from 'jsbi'
+
 import { useCurrency, useToken } from '../../hooks/Tokens'
 import useENSName from '../../hooks/useENSName'
 import { VoteOption } from '../../state/governance/types'

src/components/AccountDetails/index.tsx

@@ -1,27 +1,27 @@
+import { Trans } from '@lingui/macro'
 import { useCallback, useContext } from 'react'
+import { ExternalLink as LinkIcon } from 'react-feather'
+import { useAppDispatch } from 'state/hooks'
 import styled, { ThemeContext } from 'styled-components/macro'
+
+import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
+import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
+import PortisIcon from '../../assets/images/portisIcon.png'
+import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
+import { ReactComponent as Close } from '../../assets/images/x.svg'
+import { fortmatic, injected, portis, walletconnect, walletlink } from '../../connectors'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { clearAllTransactions } from '../../state/transactions/actions'
+import { ExternalLink, LinkStyledButton, TYPE } from '../../theme'
 import { shortenAddress } from '../../utils'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
+import { ButtonSecondary } from '../Button'
+import Identicon from '../Identicon'
 import { AutoRow } from '../Row'
 import Copy from './Copy'
 import Transaction from './Transaction'
 
-import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { injected, walletconnect, walletlink, fortmatic, portis } from '../../connectors'
-import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
-import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
-import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
-import PortisIcon from '../../assets/images/portisIcon.png'
-import Identicon from '../Identicon'
-import { ButtonSecondary } from '../Button'
-import { ExternalLink as LinkIcon } from 'react-feather'
-import { ExternalLink, LinkStyledButton, TYPE } from '../../theme'
-import { Trans } from '@lingui/macro'
-import { useAppDispatch } from 'state/hooks'
-
 const HeaderRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
   padding: 1rem 1rem;

src/components/AddressInputPanel/index.tsx

@@ -1,6 +1,7 @@
 import { t, Trans } from '@lingui/macro'
-import { useContext, useCallback, ReactNode } from 'react'
+import { ReactNode, useCallback, useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components/macro'
+
 import useENS from '../../hooks/useENS'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { ExternalLink, TYPE } from '../../theme'

src/components/Badge/RangeBadge.tsx

@@ -1,9 +1,9 @@
+import { Trans } from '@lingui/macro'
 import Badge, { BadgeVariant } from 'components/Badge'
+import { AlertCircle } from 'react-feather'
 import styled from 'styled-components/macro'
 
 import { MouseoverTooltip } from '../../components/Tooltip'
-import { Trans } from '@lingui/macro'
-import { AlertCircle } from 'react-feather'
 
 const BadgeWrapper = styled.div`
   font-size: 14px;

src/components/Blocklist/index.tsx

@@ -1,6 +1,7 @@
+import { Trans } from '@lingui/macro'
 import { ReactNode, useMemo } from 'react'
+
 import { useActiveWeb3React } from '../../hooks/web3'
-import { Trans } from '@lingui/macro'
 
 // SDN OFAC addresses
 const BLOCKED_ADDRESSES: string[] = [

src/components/Button/index.tsx

@@ -1,10 +1,10 @@
-import styled from 'styled-components/macro'
+import useTheme from 'hooks/useTheme'
 import { darken } from 'polished'
+import { Check, ChevronDown } from 'react-feather'
+import { Button as RebassButton, ButtonProps as ButtonPropsOriginal } from 'rebass/styled-components'
+import styled from 'styled-components/macro'
 
 import { RowBetween } from '../Row'
-import { ChevronDown, Check } from 'react-feather'
-import { Button as RebassButton, ButtonProps as ButtonPropsOriginal } from 'rebass/styled-components'
-import useTheme from 'hooks/useTheme'
 
 type ButtonProps = Omit<ButtonPropsOriginal, 'css'>
 

src/components/Card/index.tsx

@@ -1,5 +1,5 @@
-import styled from 'styled-components/macro'
 import { Box } from 'rebass/styled-components'
+import styled from 'styled-components/macro'
 
 const Card = styled(Box)<{ width?: string; padding?: string; border?: string; $borderRadius?: string }>`
   width: ${({ width }) => width ?? '100%'};

src/components/Confetti/index.tsx

@@ -1,4 +1,5 @@
 import ReactConfetti from 'react-confetti'
+
 import { useWindowSize } from '../../hooks/useWindowSize'
 
 // eslint-disable-next-line react/prop-types

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -1,10 +1,11 @@
+import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
+import HoverInlineText from 'components/HoverInlineText'
 import { useMemo } from 'react'
+
 import useTheme from '../../hooks/useTheme'
 import { TYPE } from '../../theme'
 import { warningSeverity } from '../../utils/prices'
-import HoverInlineText from 'components/HoverInlineText'
-import { Trans } from '@lingui/macro'
 
 export function FiatValue({
   fiatValue,

src/components/CurrencyInputPanel/index.tsx

@@ -2,12 +2,13 @@ import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { AutoColumn } from 'components/Column'
-import { loadingOpacityMixin, LoadingOpacityContainer } from 'components/Loader/styled'
+import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
 import styled from 'styled-components/macro'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
+
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
 import useTheme from '../../hooks/useTheme'
 import { useActiveWeb3React } from '../../hooks/web3'

src/components/CurrencyLogo/index.tsx

@@ -1,6 +1,7 @@
 import { Currency } from '@uniswap/sdk-core'
 import React, { useMemo } from 'react'
 import styled from 'styled-components/macro'
+
 import EthereumLogo from '../../assets/images/ethereum-logo.png'
 import useHttpLocations from '../../hooks/useHttpLocations'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'

src/components/DoubleLogo/index.tsx

@@ -1,5 +1,6 @@
 import { Currency } from '@uniswap/sdk-core'
 import styled from 'styled-components/macro'
+
 import CurrencyLogo from '../CurrencyLogo'
 
 const Wrapper = styled.div<{ margin: boolean; sizeraw: number }>`

src/components/ErrorBoundary/index.tsx

@@ -1,11 +1,12 @@
 import { Trans } from '@lingui/macro'
 import React, { ErrorInfo } from 'react'
+import ReactGA from 'react-ga'
+import styled from 'styled-components/macro'
+
 import store, { AppState } from '../../state'
 import { ExternalLink, TYPE } from '../../theme'
-import { AutoColumn } from '../Column'
-import styled from 'styled-components/macro'
-import ReactGA from 'react-ga'
 import { getUserAgent } from '../../utils/getUserAgent'
+import { AutoColumn } from '../Column'
 import { AutoRow } from '../Row'
 
 const FallbackWrapper = styled.div`

src/components/FeeSelector/index.tsx

@@ -1,19 +1,19 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { FeeAmount } from '@uniswap/v3-sdk'
-import { Currency } from '@uniswap/sdk-core'
 import { Trans } from '@lingui/macro'
-import { AutoColumn } from 'components/Column'
-import { DynamicSection } from 'pages/AddLiquidity/styled'
-import { TYPE } from 'theme'
-import { RowBetween } from 'components/Row'
-import { ButtonGray, ButtonRadioChecked } from 'components/Button'
-import styled, { keyframes } from 'styled-components/macro'
+import { Currency } from '@uniswap/sdk-core'
+import { FeeAmount } from '@uniswap/v3-sdk'
 import Badge from 'components/Badge'
+import { ButtonGray, ButtonRadioChecked } from 'components/Button'
 import Card from 'components/Card'
-import usePrevious from 'hooks/usePrevious'
+import { AutoColumn } from 'components/Column'
+import { RowBetween } from 'components/Row'
 import { useFeeTierDistribution } from 'hooks/useFeeTierDistribution'
+import usePrevious from 'hooks/usePrevious'
+import { DynamicSection } from 'pages/AddLiquidity/styled'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import ReactGA from 'react-ga'
 import { Box } from 'rebass'
+import styled, { keyframes } from 'styled-components/macro'
+import { TYPE } from 'theme'
 
 const pulse = (color: string) => keyframes`
   0% {

src/components/FormattedCurrencyAmount/index.tsx

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

src/components/Header/Polling.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useAppSelector } from 'state/hooks'
 import styled, { keyframes } from 'styled-components/macro'
+
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useBlockNumber } from '../../state/application/hooks'
 import { ExternalLink, TYPE } from '../../theme'

src/components/Header/UniBalanceContent.tsx

@@ -4,6 +4,7 @@ import { CHAIN_INFO, SupportedChainId } from 'constants/chains'
 import { useMemo } from 'react'
 import { X } from 'react-feather'
 import styled from 'styled-components/macro'
+
 import tokenLogo from '../../assets/images/token-logo.png'
 import { UNI } from '../../constants/tokens'
 import { useMerkleDistributorContract } from '../../hooks/useContract'

src/components/Header/index.tsx

@@ -11,6 +11,7 @@ import { useUserHasSubmittedClaim } from 'state/transactions/hooks'
 import { useDarkModeManager } from 'state/user/hooks'
 import { useETHBalances } from 'state/wallet/hooks'
 import styled from 'styled-components/macro'
+
 import { ReactComponent as Logo } from '../../assets/svg/logo.svg'
 import { ReactComponent as LogoDark } from '../../assets/svg/logo_white.svg'
 import { useActiveWeb3React } from '../../hooks/web3'

src/components/Identicon/index.tsx

@@ -1,7 +1,7 @@
+import Davatar from '@davatar/react'
 import styled from 'styled-components/macro'
 
 import { useActiveWeb3React } from '../../hooks/web3'
-import Davatar from '@davatar/react'
 
 const StyledIdenticonContainer = styled.div`
   height: 1rem;

src/components/InputStepCounter/InputStepCounter.tsx

@@ -1,13 +1,14 @@
-import { useState, useCallback, useEffect, ReactNode } from 'react'
+import { Trans } from '@lingui/macro'
+import { FeeAmount } from '@uniswap/v3-sdk'
+import { ButtonGray } from 'components/Button'
 import { OutlineCard } from 'components/Card'
-import { Input as NumericalInput } from '../NumericalInput'
+import { AutoColumn } from 'components/Column'
+import { ReactNode, useCallback, useEffect, useState } from 'react'
+import { Minus, Plus } from 'react-feather'
 import styled, { keyframes } from 'styled-components/macro'
 import { TYPE } from 'theme'
-import { AutoColumn } from 'components/Column'
-import { ButtonGray } from 'components/Button'
-import { FeeAmount } from '@uniswap/v3-sdk'
-import { Trans } from '@lingui/macro'
-import { Plus, Minus } from 'react-feather'
+
+import { Input as NumericalInput } from '../NumericalInput'
 
 const pulse = (color: string) => keyframes`
   0% {

src/components/LiquidityChartRangeInput/Area.tsx

@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react'
 import { area, curveStepAfter, ScaleLinear } from 'd3'
+import inRange from 'lodash/inRange'
+import React, { useMemo } from 'react'
 import styled from 'styled-components/macro'
+
 import { ChartEntry } from './types'
-import inRange from 'lodash/inRange'
 
 const Path = styled.path<{ fill: string | undefined }>`
   opacity: 0.5;

src/components/LiquidityChartRangeInput/AxisBottom.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react'
 import { Axis as d3Axis, axisBottom, NumberValue, ScaleLinear, select } from 'd3'
+import React, { useMemo } from 'react'
 import styled from 'styled-components/macro'
 
 const StyledGroup = styled.g`

src/components/LiquidityChartRangeInput/Brush.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { BrushBehavior, brushX, D3BrushEvent, ScaleLinear, select } from 'd3'
-import styled from 'styled-components/macro'
 import { brushHandleAccentPath, brushHandlePath, OffScreenHandle } from 'components/LiquidityChartRangeInput/svg'
+import { BrushBehavior, brushX, D3BrushEvent, ScaleLinear, select } from 'd3'
 import usePrevious from 'hooks/usePrevious'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styled from 'styled-components/macro'
 
 const Handle = styled.path<{ color: string }>`
   cursor: ew-resize;

src/components/LiquidityChartRangeInput/Chart.tsx

@@ -1,6 +1,7 @@
 import { max, scaleLinear, ZoomTransform } from 'd3'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Bound } from 'state/mint/v3/actions'
+
 import { Area } from './Area'
 import { AxisBottom } from './AxisBottom'
 import { Brush } from './Brush'

src/components/LiquidityChartRangeInput/Line.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react'
 import { ScaleLinear } from 'd3'
+import React, { useMemo } from 'react'
 import styled from 'styled-components/macro'
 
 const StyledLine = styled.line`

src/components/LiquidityChartRangeInput/Zoom.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useMemo, useRef } from 'react'
 import { ButtonGray } from 'components/Button'
-import styled from 'styled-components/macro'
-import { ScaleLinear, select, ZoomBehavior, zoom, ZoomTransform, zoomIdentity } from 'd3'
+import { ScaleLinear, select, zoom, ZoomBehavior, zoomIdentity, ZoomTransform } from 'd3'
+import React, { useEffect, useMemo, useRef } from 'react'
 import { RefreshCcw, ZoomIn, ZoomOut } from 'react-feather'
+import styled from 'styled-components/macro'
+
 import { ZoomLevels } from './types'
 
 const Wrapper = styled.div<{ count: number }>`

src/components/LiquidityChartRangeInput/hooks.ts

@@ -1,9 +1,10 @@
-import { useCallback, useMemo } from 'react'
 import { Currency } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
 import { usePoolActiveLiquidity } from 'hooks/usePoolTickData'
-import { ChartEntry } from './types'
 import JSBI from 'jsbi'
+import { useCallback, useMemo } from 'react'
+
+import { ChartEntry } from './types'
 
 export interface TickProcessed {
   liquidityActive: JSBI