refactor: add an import sorting plugin (#2417)

* refactor: add an import sorting plugin

* Fix code style issues with ESLint
Co-authored-by: Lint Action <lint-action@samuelmeuli.com>

.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

 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

+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

 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

+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

 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

+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

+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

-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

-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

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

src/components/CurrencyInputPanel/FiatValue.tsx

+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

 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

 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

 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

-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

-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

 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

+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

-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

-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

-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

-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

 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

-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

-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

-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

src/components/LiquidityChartRangeInput/index.tsx

-import React, { ReactNode, useCallback, useMemo } from 'react'
 import { Trans } from '@lingui/macro'
 import { Currency, Price, Token } from '@uniswap/sdk-core'
+import { FeeAmount } from '@uniswap/v3-sdk'
 import { AutoColumn, ColumnCenter } from 'components/Column'
 import Loader from 'components/Loader'
+import { format } from 'd3'
 import { useColor } from 'hooks/useColor'
 import useTheme from 'hooks/useTheme'
 import { saturate } from 'polished'
-import { BarChart2, Inbox, CloudOff } from 'react-feather'
+import React, { ReactNode, useCallback, useMemo } from 'react'
+import { BarChart2, CloudOff, Inbox } from 'react-feather'
+import ReactGA from 'react-ga'
 import { batch } from 'react-redux'
+import { Bound } from 'state/mint/v3/actions'
 import styled from 'styled-components/macro'
+
 import { TYPE } from '../../theme'
 import { Chart } from './Chart'
 import { useDensityChartData } from './hooks'
-import { format } from 'd3'
-import { Bound } from 'state/mint/v3/actions'
-import { FeeAmount } from '@uniswap/v3-sdk'
-import ReactGA from 'react-ga'
 import { ZoomLevels } from './types'
 
 const ZOOM_LEVELS: Record<FeeAmount, ZoomLevels> = {

src/components/ListLogo/index.tsx

 import React from 'react'
 import styled from 'styled-components/macro'
-import useHttpLocations from '../../hooks/useHttpLocations'
 
+import useHttpLocations from '../../hooks/useHttpLocations'
 import Logo from '../Logo'
 
 const StyledListLogo = styled(Logo)<{ size: string }>`

src/components/Logo/index.tsx

 import { useState } from 'react'
 import { Slash } from 'react-feather'
 import { ImageProps } from 'rebass'
+
 import useTheme from '../../hooks/useTheme'
 
 const BAD_SRCS: { [tokenAddress: string]: true } = {}

src/components/Menu/index.tsx

 import { t } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
+import { CHAIN_INFO, L2_CHAIN_IDS, SupportedChainId } from 'constants/chains'
+import { LOCALE_LABEL, SUPPORTED_LOCALES, SupportedLocale } from 'constants/locales'
+import { useActiveLocale } from 'hooks/useActiveLocale'
+import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
 import React, { useEffect, useRef, useState } from 'react'
-import { BookOpen, Code, Info, MessageCircle, PieChart, Moon, Sun, Globe, ChevronLeft, Check } from 'react-feather'
+import { BookOpen, Check, ChevronLeft, Code, Globe, Info, MessageCircle, Moon, PieChart, Sun } from 'react-feather'
 import { Link } from 'react-router-dom'
+import { useDarkModeManager } from 'state/user/hooks'
 import styled, { css } from 'styled-components/macro'
+
 import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
-import { useActiveWeb3React } from '../../hooks/web3'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useToggleModal } from '../../state/application/hooks'
-import { Trans } from '@lingui/macro'
 import { ExternalLink } from '../../theme'
 import { ButtonPrimary } from '../Button'
-import { useDarkModeManager } from 'state/user/hooks'
-
-import { L2_CHAIN_IDS, CHAIN_INFO, SupportedChainId } from 'constants/chains'
-import { LOCALE_LABEL, SupportedLocale, SUPPORTED_LOCALES } from 'constants/locales'
-import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
-import { useActiveLocale } from 'hooks/useActiveLocale'
 
 export enum FlyoutAlignment {
   LEFT = 'LEFT',

src/components/Modal/index.tsx

+import { DialogContent, DialogOverlay } from '@reach/dialog'
+import { transparentize } from 'polished'
 import React from 'react'
-import styled, { css } from 'styled-components/macro'
-import { animated, useTransition, useSpring } from 'react-spring'
-import { DialogOverlay, DialogContent } from '@reach/dialog'
 import { isMobile } from 'react-device-detect'
-import { transparentize } from 'polished'
+import { animated, useSpring, useTransition } from 'react-spring'
 import { useGesture } from 'react-use-gesture'
+import styled, { css } from 'styled-components/macro'
 
 const AnimatedDialogOverlay = animated(DialogOverlay)
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

src/components/ModalViews/index.tsx

+import { Trans } from '@lingui/macro'
 import { useContext } from 'react'
-import { useActiveWeb3React } from '../../hooks/web3'
-import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
-
-import { AutoColumn, ColumnCenter } from '../Column'
-import styled, { ThemeContext } from 'styled-components/macro'
-import { RowBetween } from '../Row'
-import { TYPE, CloseIcon, CustomLightSpinner } from '../../theme'
 import { ArrowUpCircle } from 'react-feather'
-import { Trans } from '@lingui/macro'
+import styled, { ThemeContext } from 'styled-components/macro'
 
 import Circle from '../../assets/images/blue-loader.svg'
+import { useActiveWeb3React } from '../../hooks/web3'
+import { CloseIcon, CustomLightSpinner, TYPE } from '../../theme'
 import { ExternalLink } from '../../theme/components'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
+import { AutoColumn, ColumnCenter } from '../Column'
+import { RowBetween } from '../Row'
 
 const ConfirmOrLoadingWrapper = styled.div`
   width: 100%;

src/components/NavigationTabs/index.tsx

-import styled from 'styled-components/macro'
-import { darken } from 'polished'
 import { Trans } from '@lingui/macro'
-import { NavLink, Link as HistoryLink, useLocation } from 'react-router-dom'
 import { Percent } from '@uniswap/sdk-core'
-
+import useTheme from 'hooks/useTheme'
+import { darken } from 'polished'
+import { ReactNode } from 'react'
 import { ArrowLeft } from 'react-feather'
-import Row, { RowBetween } from '../Row'
-import SettingsTab from '../Settings'
-
+import { Link as HistoryLink, NavLink, useLocation } from 'react-router-dom'
+import { Box } from 'rebass'
 import { useAppDispatch } from 'state/hooks'
 import { resetMintState } from 'state/mint/actions'
 import { resetMintState as resetMintV3State } from 'state/mint/v3/actions'
+import styled from 'styled-components/macro'
 import { TYPE } from 'theme'
-import useTheme from 'hooks/useTheme'
-import { ReactNode } from 'react'
-import { Box } from 'rebass'
+
+import Row, { RowBetween } from '../Row'
+import SettingsTab from '../Settings'
 
 const Tabs = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}

src/components/NetworkAlert/NetworkAlert.tsx

@@ -13,6 +13,7 @@ import { useArbitrumAlphaAlert, useDarkModeManager, useOptimismAlphaAlert } from
 import { useETHBalances } from 'state/wallet/hooks'
 import styled, { css } from 'styled-components/macro'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'
+
 import { CHAIN_INFO } from '../../constants/chains'
 
 export const DesktopTextBreak = styled.div`

src/components/NumericalInput/index.tsx

 import React from 'react'
 import styled from 'styled-components/macro'
+
 import { escapeRegExp } from '../../utils'
 
 const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`

src/components/Popover/index.tsx

@@ -3,6 +3,7 @@ import Portal from '@reach/portal'
 import React, { useCallback, useMemo, useState } from 'react'
 import { usePopper } from 'react-popper'
 import styled from 'styled-components/macro'
+
 import useInterval from '../../hooks/useInterval'
 
 const PopoverContainer = styled.div<{ show: boolean }>`

src/components/Popups/ClaimPopup.tsx

 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useCallback, useEffect } from 'react'
-import ReactGA from 'react-ga'
 import { Heart, X } from 'react-feather'
+import ReactGA from 'react-ga'
 import styled, { keyframes } from 'styled-components/macro'
+
 import tokenLogo from '../../assets/images/token-logo.png'
 import { ButtonPrimary } from '../../components/Button'
 import { useActiveWeb3React } from '../../hooks/web3'
@@ -14,7 +15,6 @@ import {
   useToggleSelfClaimModal,
   useToggleShowClaimPopup,
 } from '../../state/application/hooks'
-
 import { useUserHasAvailableClaim, useUserUnclaimedAmount } from '../../state/claim/hooks'
 import { TYPE } from '../../theme'
 import { AutoColumn } from '../Column'

src/components/Popups/PopupItem.tsx

 import { useCallback, useContext, useEffect } from 'react'
 import { X } from 'react-feather'
+import { animated } from 'react-spring'
 import { useSpring } from 'react-spring/web'
 import styled, { ThemeContext } from 'styled-components/macro'
-import { animated } from 'react-spring'
+
 import { PopupContent } from '../../state/application/actions'
 import { useRemovePopup } from '../../state/application/hooks'
 import TransactionPopup from './TransactionPopup'

src/components/Popups/TransactionPopup.tsx

 import { useContext } from 'react'
 import { AlertCircle, CheckCircle } from 'react-feather'
 import styled, { ThemeContext } from 'styled-components/macro'
+
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useTransaction } from '../../state/transactions/hooks'
 import { TYPE } from '../../theme'

src/components/Popups/index.tsx

+import { SupportedChainId } from 'constants/chains'
+import { useActiveWeb3React } from 'hooks/web3'
 import styled from 'styled-components/macro'
+import { MEDIA_WIDTHS } from 'theme'
+
 import { useActivePopups } from '../../state/application/hooks'
+import { useURLWarningVisible } from '../../state/user/hooks'
 import { AutoColumn } from '../Column'
-import PopupItem from './PopupItem'
 import ClaimPopup from './ClaimPopup'
-import { useURLWarningVisible } from '../../state/user/hooks'
-import { useActiveWeb3React } from 'hooks/web3'
-import { SupportedChainId } from 'constants/chains'
-import { MEDIA_WIDTHS } from 'theme'
+import PopupItem from './PopupItem'
 
 const MobilePopupWrapper = styled.div<{ height: string | number }>`
   position: relative;

src/components/PositionCard/Sushi.tsx

+import { Trans } from '@lingui/macro'
 import { Token } from '@uniswap/sdk-core'
+import Badge, { BadgeVariant } from 'components/Badge'
+import { transparentize } from 'polished'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
-import { Trans } from '@lingui/macro'
 
+import { useColor } from '../../hooks/useColor'
 import { unwrappedToken } from '../../utils/unwrappedToken'
 import { ButtonEmpty } from '../Button'
-import { transparentize } from 'polished'
-import { CardNoise } from '../earn/styled'
-
-import { useColor } from '../../hooks/useColor'
-
 import { LightCard } from '../Card'
 import { AutoColumn } from '../Column'
 import DoubleCurrencyLogo from '../DoubleLogo'
-import { RowFixed, AutoRow } from '../Row'
+import { CardNoise } from '../earn/styled'
+import { AutoRow, RowFixed } from '../Row'
 import { Dots } from '../swap/styleds'
 import { FixedHeightRow } from '.'
-import Badge, { BadgeVariant } from 'components/Badge'
 
 const StyledPositionCard = styled(LightCard)<{ bgColor: any }>`
   border: none;

src/components/PositionCard/V2.tsx

+import { Trans } from '@lingui/macro'
+import { CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
+import { Pair } from '@uniswap/v2-sdk'
 import JSBI from 'jsbi'
+import { transparentize } from 'polished'
 import { useState } from 'react'
-import { Percent, CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { Pair } from '@uniswap/v2-sdk'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
-import { useTotalSupply } from '../../hooks/useTotalSupply'
-import { Trans } from '@lingui/macro'
 
+import { BIG_INT_ZERO } from '../../constants/misc'
+import { useColor } from '../../hooks/useColor'
+import { useTotalSupply } from '../../hooks/useTotalSupply'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useTokenBalance } from '../../state/wallet/hooks'
 import { currencyId } from '../../utils/currencyId'
 import { unwrappedToken } from '../../utils/unwrappedToken'
-import { ButtonPrimary, ButtonSecondary, ButtonEmpty } from '../Button'
-import { transparentize } from 'polished'
-import { CardNoise } from '../earn/styled'
-
-import { useColor } from '../../hooks/useColor'
-
+import { ButtonEmpty, ButtonPrimary, ButtonSecondary } from '../Button'
 import { LightCard } from '../Card'
 import { AutoColumn } from '../Column'
 import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
-import { RowBetween, RowFixed, AutoRow } from '../Row'
+import { CardNoise } from '../earn/styled'
+import { AutoRow, RowBetween, RowFixed } from '../Row'
 import { Dots } from '../swap/styleds'
-import { BIG_INT_ZERO } from '../../constants/misc'
 import { FixedHeightRow } from '.'
 
 const StyledPositionCard = styled(LightCard)<{ bgColor: any }>`

src/components/PositionCard/index.tsx

-import JSBI from 'jsbi'
-import { Percent, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { Trans } from '@lingui/macro'
+import { CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
+import JSBI from 'jsbi'
+import { transparentize } from 'polished'
 import { useState } from 'react'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
-import { useTotalSupply } from '../../hooks/useTotalSupply'
-import { Trans } from '@lingui/macro'
 
+import { BIG_INT_ZERO } from '../../constants/misc'
+import { useColor } from '../../hooks/useColor'
+import { useTotalSupply } from '../../hooks/useTotalSupply'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useTokenBalance } from '../../state/wallet/hooks'
 import { ExternalLink, TYPE } from '../../theme'
 import { currencyId } from '../../utils/currencyId'
 import { unwrappedToken } from '../../utils/unwrappedToken'
-import { ButtonPrimary, ButtonSecondary, ButtonEmpty } from '../Button'
-import { transparentize } from 'polished'
-import { CardNoise } from '../earn/styled'
-
-import { useColor } from '../../hooks/useColor'
-
+import { ButtonEmpty, ButtonPrimary, ButtonSecondary } from '../Button'
 import { GreyCard, LightCard } from '../Card'
 import { AutoColumn } from '../Column'
 import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
-import { RowBetween, RowFixed, AutoRow } from '../Row'
+import { CardNoise } from '../earn/styled'
+import { AutoRow, RowBetween, RowFixed } from '../Row'
 import { Dots } from '../swap/styleds'
-import { BIG_INT_ZERO } from '../../constants/misc'
 
 export const FixedHeightRow = styled(RowBetween)`
   height: 24px;

src/components/PositionList/index.tsx

+import { Trans } from '@lingui/macro'
 import PositionListItem from 'components/PositionListItem'
 import React from 'react'
-import { Trans } from '@lingui/macro'
 import styled from 'styled-components/macro'
 import { MEDIA_WIDTHS } from 'theme'
 import { PositionDetails } from 'types/position'

src/components/PositionListItem/index.tsx

-import { useMemo } from 'react'
+import { Trans } from '@lingui/macro'
+import { Percent, Price, Token } from '@uniswap/sdk-core'
 import { Position } from '@uniswap/v3-sdk'
 import Badge from 'components/Badge'
+import RangeBadge from 'components/Badge/RangeBadge'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
-import { usePool } from 'hooks/usePools'
+import HoverInlineText from 'components/HoverInlineText'
+import Loader from 'components/Loader'
+import { RowBetween } from 'components/Row'
 import { useToken } from 'hooks/Tokens'
+import useIsTickAtLimit from 'hooks/useIsTickAtLimit'
+import { usePool } from 'hooks/usePools'
+import { useMemo } from 'react'
 import { Link } from 'react-router-dom'
+import { Bound } from 'state/mint/v3/actions'
 import styled from 'styled-components/macro'
 import { HideSmall, MEDIA_WIDTHS, SmallOnly } from 'theme'
 import { PositionDetails } from 'types/position'
-import { Price, Token, Percent } from '@uniswap/sdk-core'
 import { formatTickPrice } from 'utils/formatTickPrice'
-import Loader from 'components/Loader'
 import { unwrappedToken } from 'utils/unwrappedToken'
-import RangeBadge from 'components/Badge/RangeBadge'
-import { RowBetween } from 'components/Row'
-import HoverInlineText from 'components/HoverInlineText'
+
 import { DAI, USDC, USDT, WBTC, WETH9_EXTENDED } from '../../constants/tokens'
-import { Trans } from '@lingui/macro'
-import useIsTickAtLimit from 'hooks/useIsTickAtLimit'
-import { Bound } from 'state/mint/v3/actions'
 
 const LinkRow = styled(Link)`
   align-items: center;

src/components/PositionPreview/index.tsx

-import { useState, useCallback, useContext, ReactNode } from 'react'
+import { Trans } from '@lingui/macro'
+import { Currency } from '@uniswap/sdk-core'
 import { Position } from '@uniswap/v3-sdk'
+import RangeBadge from 'components/Badge/RangeBadge'
 import { LightCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
-import { TYPE } from 'theme'
-import { RowBetween, RowFixed } from 'components/Row'
 import CurrencyLogo from 'components/CurrencyLogo'
-import { unwrappedToken } from 'utils/unwrappedToken'
+import DoubleCurrencyLogo from 'components/DoubleLogo'
 import { Break } from 'components/earn/styled'
-import { Trans } from '@lingui/macro'
-import { Currency } from '@uniswap/sdk-core'
 import RateToggle from 'components/RateToggle'
-import DoubleCurrencyLogo from 'components/DoubleLogo'
-import RangeBadge from 'components/Badge/RangeBadge'
-import { ThemeContext } from 'styled-components/macro'
+import { RowBetween, RowFixed } from 'components/Row'
 import JSBI from 'jsbi'
+import { ReactNode, useCallback, useContext, useState } from 'react'
 import { Bound } from 'state/mint/v3/actions'
+import { ThemeContext } from 'styled-components/macro'
+import { TYPE } from 'theme'
 import { formatTickPrice } from 'utils/formatTickPrice'
+import { unwrappedToken } from 'utils/unwrappedToken'
 
 export const PositionPreview = ({
   position,

src/components/ProgressSteps/index.tsx

 import { useContext } from 'react'
 import styled from 'styled-components/macro'
-import { AutoColumn } from '../Column'
 import { ThemeContext } from 'styled-components/macro'
+
 import { TYPE } from '../../theme'
+import { AutoColumn } from '../Column'
 
 const Wrapper = styled(AutoColumn)`
   margin-right: 8px;

src/components/QuestionHelper/index.tsx

 import { ReactNode, useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
+
 import Tooltip from '../Tooltip'
 
 const QuestionWrapper = styled.div`

src/components/RangeSelector/PresetsButtons.tsx

-import React from 'react'
+import { Trans } from '@lingui/macro'
 import { ButtonOutlined } from 'components/Button'
 import { AutoRow } from 'components/Row'
-import { TYPE } from 'theme'
-import styled from 'styled-components/macro'
-import { Trans } from '@lingui/macro'
+import React from 'react'
 import ReactGA from 'react-ga'
+import styled from 'styled-components/macro'
+import { TYPE } from 'theme'
 
 const Button = styled(ButtonOutlined).attrs(() => ({
   padding: '8px',

src/components/RangeSelector/index.tsx

 import { Trans } from '@lingui/macro'
 import { Currency, Price, Token } from '@uniswap/sdk-core'
+import { AutoColumn } from 'components/Column'
 import StepCounter from 'components/InputStepCounter/InputStepCounter'
 import { RowBetween } from 'components/Row'
-import { AutoColumn } from 'components/Column'
 import { Bound } from 'state/mint/v3/actions'
 
 // currencyA is the base token

src/components/RoutingDiagram/RoutingDiagram.test.tsx

@@ -2,6 +2,7 @@ import { Currency, Percent } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
 import { DAI, USDC, WBTC } from 'constants/tokens'
 import { render } from 'test-utils'
+
 import RoutingDiagram, { RoutingDiagramEntry } from './RoutingDiagram'
 
 const percent = (strings: TemplateStringsArray) => new Percent(parseInt(strings[0]), 100)

src/components/Row/index.tsx

-import styled from 'styled-components/macro'
 import { Box } from 'rebass/styled-components'
+import styled from 'styled-components/macro'
 
 const Row = styled(Box)<{
   width?: string

src/components/SearchModal/CommonBases.tsx

 import { Trans } from '@lingui/macro'
-import { Text } from 'rebass'
 import { Currency } from '@uniswap/sdk-core'
+import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 
 import { COMMON_BASES } from '../../constants/routing'
 import { currencyId } from '../../utils/currencyId'
 import { AutoColumn } from '../Column'
+import CurrencyLogo from '../CurrencyLogo'
 import QuestionHelper from '../QuestionHelper'
 import { AutoRow } from '../Row'
-import CurrencyLogo from '../CurrencyLogo'
 
 const MobileWrapper = styled(AutoColumn)`
   ${({ theme }) => theme.mediaWidth.upToSmall`

src/components/SearchModal/CurrencyList.tsx

 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { LightGreyCard } from 'components/Card'
+import QuestionHelper from 'components/QuestionHelper'
+import useTheme from 'hooks/useTheme'
 import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
+
+import TokenListLogo from '../../assets/svg/tokenlist.svg'
+import { useIsUserAddedToken } from '../../hooks/Tokens'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useCombinedActiveList } from '../../state/lists/hooks'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
 import { useCurrencyBalance } from '../../state/wallet/hooks'
 import { TYPE } from '../../theme'
-import { useIsUserAddedToken } from '../../hooks/Tokens'
+import { isTokenOnList } from '../../utils'
 import Column from '../Column'
-import { RowFixed, RowBetween } from '../Row'
 import CurrencyLogo from '../CurrencyLogo'
-import { MouseoverTooltip } from '../Tooltip'
-import { MenuItem } from './styleds'
 import Loader from '../Loader'
-import { isTokenOnList } from '../../utils'
+import { RowBetween, RowFixed } from '../Row'
+import { MouseoverTooltip } from '../Tooltip'
 import ImportRow from './ImportRow'
-import { LightGreyCard } from 'components/Card'
-import TokenListLogo from '../../assets/svg/tokenlist.svg'
-import QuestionHelper from 'components/QuestionHelper'
-import useTheme from 'hooks/useTheme'
+import { MenuItem } from './styleds'
 
 function currencyKey(currency: Currency): string {
   return currency.isToken ? currency.address : 'ETHER'

src/components/SearchModal/CurrencySearch.tsx

+import { t, Trans } from '@lingui/macro'
 import { Currency, Token } from '@uniswap/sdk-core'
+import useDebounce from 'hooks/useDebounce'
+import { useOnClickOutside } from 'hooks/useOnClickOutside'
+import useTheme from 'hooks/useTheme'
+import useToggle from 'hooks/useToggle'
 import { KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Edit } from 'react-feather'
 import ReactGA from 'react-ga'
-import { t, Trans } from '@lingui/macro'
+import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
+import styled from 'styled-components/macro'
+
 import { ExtendedEther } from '../../constants/tokens'
+import { useAllTokens, useIsUserAddedToken, useSearchInactiveTokenLists, useToken } from '../../hooks/Tokens'
 import { useActiveWeb3React } from '../../hooks/web3'
-import { useAllTokens, useToken, useIsUserAddedToken, useSearchInactiveTokenLists } from '../../hooks/Tokens'
-import { CloseIcon, TYPE, ButtonText, IconWrapper } from '../../theme'
+import { ButtonText, CloseIcon, IconWrapper, TYPE } from '../../theme'
 import { isAddress } from '../../utils'
 import Column from '../Column'
 import Row, { RowBetween, RowFixed } from '../Row'
 import CommonBases from './CommonBases'
 import CurrencyList from './CurrencyList'
 import { filterTokens, useSortedTokensByQuery } from './filtering'
+import ImportRow from './ImportRow'
 import { useTokenComparator } from './sorting'
 import { PaddedColumn, SearchInput, Separator } from './styleds'
-import AutoSizer from 'react-virtualized-auto-sizer'
-import styled from 'styled-components/macro'
-import useToggle from 'hooks/useToggle'
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
-import useTheme from 'hooks/useTheme'
-import ImportRow from './ImportRow'
-import { Edit } from 'react-feather'
-import useDebounce from 'hooks/useDebounce'
 
 const ContentWrapper = styled(Column)`
   width: 100%;

src/components/SearchModal/CurrencySearchModal.tsx

 import { Currency, Token } from '@uniswap/sdk-core'
+import { TokenList } from '@uniswap/token-lists'
+import usePrevious from 'hooks/usePrevious'
 import { useCallback, useEffect, useState } from 'react'
+
 import useLast from '../../hooks/useLast'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
 import Modal from '../Modal'
 import { CurrencySearch } from './CurrencySearch'
+import { ImportList } from './ImportList'
 import { ImportToken } from './ImportToken'
-import usePrevious from 'hooks/usePrevious'
 import Manage from './Manage'
-import { TokenList } from '@uniswap/token-lists'
-import { ImportList } from './ImportList'
 
 interface CurrencySearchModalProps {
   isOpen: boolean

src/components/SearchModal/ImportList.tsx

-import { useState, useCallback } from 'react'
-import styled from 'styled-components/macro'
-import ReactGA from 'react-ga'
-import { TYPE, CloseIcon } from 'theme'
+import { Trans } from '@lingui/macro'
+import { TokenList } from '@uniswap/token-lists'
+import { ButtonPrimary } from 'components/Button'
 import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'
-import { RowBetween, RowFixed, AutoRow } from 'components/Row'
-import { ArrowLeft, AlertTriangle } from 'react-feather'
+import ListLogo from 'components/ListLogo'
+import { AutoRow, RowBetween, RowFixed } from 'components/Row'
+import { SectionBreak } from 'components/swap/styleds'
+import { useFetchListCallback } from 'hooks/useFetchListCallback'
 import useTheme from 'hooks/useTheme'
 import { transparentize } from 'polished'
-import { ButtonPrimary } from 'components/Button'
-import { SectionBreak } from 'components/swap/styleds'
-import { ExternalLink } from '../../theme/components'
-import ListLogo from 'components/ListLogo'
-import { PaddedColumn, Checkbox, TextDot } from './styleds'
-import { TokenList } from '@uniswap/token-lists'
-
+import { useCallback, useState } from 'react'
+import { AlertTriangle, ArrowLeft } from 'react-feather'
+import ReactGA from 'react-ga'
 import { useAppDispatch } from 'state/hooks'
-import { useFetchListCallback } from 'hooks/useFetchListCallback'
-import { removeList, enableList } from 'state/lists/actions'
-import { CurrencyModalView } from './CurrencySearchModal'
+import { enableList, removeList } from 'state/lists/actions'
 import { useAllLists } from 'state/lists/hooks'
-import { Trans } from '@lingui/macro'
+import styled from 'styled-components/macro'
+import { CloseIcon, TYPE } from 'theme'
+
+import { ExternalLink } from '../../theme/components'
+import { CurrencyModalView } from './CurrencySearchModal'
+import { Checkbox, PaddedColumn, TextDot } from './styleds'
 
 const Wrapper = styled.div`
   position: relative;

src/components/SearchModal/ImportRow.tsx

-import { CSSProperties } from 'react'
+import { Trans } from '@lingui/macro'
 import { Token } from '@uniswap/sdk-core'
-import { AutoRow, RowFixed } from 'components/Row'
+import { ButtonPrimary } from 'components/Button'
 import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
-import { TYPE } from 'theme'
 import ListLogo from 'components/ListLogo'
+import { AutoRow, RowFixed } from 'components/Row'
+import { useIsTokenActive, useIsUserAddedToken } from 'hooks/Tokens'
 import useTheme from 'hooks/useTheme'
-import { ButtonPrimary } from 'components/Button'
-import styled from 'styled-components/macro'
-import { useIsUserAddedToken, useIsTokenActive } from 'hooks/Tokens'
+import { CSSProperties } from 'react'
 import { CheckCircle } from 'react-feather'
+import styled from 'styled-components/macro'
+import { TYPE } from 'theme'
+
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
-import { Trans } from '@lingui/macro'
 
 const TokenSection = styled.div<{ dim?: boolean }>`
   padding: 4px 20px;

src/components/SearchModal/ImportToken.tsx

+import { Plural, Trans } from '@lingui/macro'
+import { Currency, Token } from '@uniswap/sdk-core'
 import { TokenList } from '@uniswap/token-lists/dist/types'
-import { Token, Currency } from '@uniswap/sdk-core'
-import styled from 'styled-components/macro'
-import { TYPE, CloseIcon } from 'theme'
+import { ButtonPrimary } from 'components/Button'
 import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'
-import { RowBetween, RowFixed } from 'components/Row'
 import CurrencyLogo from 'components/CurrencyLogo'
-import { ArrowLeft, AlertCircle } from 'react-feather'
-import { transparentize } from 'polished'
-import useTheme from 'hooks/useTheme'
-import { ButtonPrimary } from 'components/Button'
+import ListLogo from 'components/ListLogo'
+import { RowBetween, RowFixed } from 'components/Row'
 import { SectionBreak } from 'components/swap/styleds'
-import { useAddUserToken } from 'state/user/hooks'
+import useTheme from 'hooks/useTheme'
 import { useActiveWeb3React } from 'hooks/web3'
+import { transparentize } from 'polished'
+import { AlertCircle, ArrowLeft } from 'react-feather'
+import { useAddUserToken } from 'state/user/hooks'
+import styled from 'styled-components/macro'
+import { CloseIcon, TYPE } from 'theme'
+
 import { ExternalLink } from '../../theme/components'
-import ListLogo from 'components/ListLogo'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { PaddedColumn } from './styleds'
-import { Plural, Trans } from '@lingui/macro'
 
 const Wrapper = styled.div`
   position: relative;

src/components/SearchModal/Manage.tsx

 import { Trans } from '@lingui/macro'
-import { useState } from 'react'
-import { PaddedColumn, Separator } from './styleds'
+import { Token } from '@uniswap/sdk-core'
+import { TokenList } from '@uniswap/token-lists'
 import { RowBetween } from 'components/Row'
+import { useState } from 'react'
 import { ArrowLeft } from 'react-feather'
 import { Text } from 'rebass'
-import { CloseIcon } from 'theme'
 import styled from 'styled-components/macro'
-import { Token } from '@uniswap/sdk-core'
+import { CloseIcon } from 'theme'
+
+import { CurrencyModalView } from './CurrencySearchModal'
 import { ManageLists } from './ManageLists'
 import ManageTokens from './ManageTokens'
-import { TokenList } from '@uniswap/token-lists'
-import { CurrencyModalView } from './CurrencySearchModal'
+import { PaddedColumn, Separator } from './styleds'
 
 const Wrapper = styled.div`
   width: 100%;

src/components/SearchModal/ManageLists.tsx

@@ -10,6 +10,7 @@ import ReactGA from 'react-ga'
 import { usePopper } from 'react-popper'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import styled from 'styled-components/macro'
+
 import { useFetchListCallback } from '../../hooks/useFetchListCallback'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import useTheme from '../../hooks/useTheme'

src/components/SearchModal/ManageTokens.tsx

-import { useRef, RefObject, useCallback, useState, useMemo } from 'react'
+import { Trans } from '@lingui/macro'
+import { Token } from '@uniswap/sdk-core'
+import Card from 'components/Card'
 import Column from 'components/Column'
-import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
-import { PaddedColumn, Separator, SearchInput } from './styleds'
+import CurrencyLogo from 'components/CurrencyLogo'
 import Row, { RowBetween, RowFixed } from 'components/Row'
-import { TYPE, ExternalLinkIcon, TrashIcon, ButtonText, ExternalLink } from 'theme'
 import { useToken } from 'hooks/Tokens'
+import { useActiveWeb3React } from 'hooks/web3'
+import { RefObject, useCallback, useMemo, useRef, useState } from 'react'
+import { useRemoveUserAddedToken, useUserAddedTokens } from 'state/user/hooks'
 import styled from 'styled-components/macro'
-import { useUserAddedTokens, useRemoveUserAddedToken } from 'state/user/hooks'
-import { Token } from '@uniswap/sdk-core'
-import CurrencyLogo from 'components/CurrencyLogo'
+import { ButtonText, ExternalLink, ExternalLinkIcon, TrashIcon, TYPE } from 'theme'
 import { isAddress } from 'utils'
-import { useActiveWeb3React } from 'hooks/web3'
-import Card from 'components/Card'
-import ImportRow from './ImportRow'
-import useTheme from '../../hooks/useTheme'
-import { Trans } from '@lingui/macro'
 
+import useTheme from '../../hooks/useTheme'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { CurrencyModalView } from './CurrencySearchModal'
+import ImportRow from './ImportRow'
+import { PaddedColumn, SearchInput, Separator } from './styleds'
 
 const Wrapper = styled.div`
   width: 100%;

src/components/SearchModal/filtering.ts

+import { Token } from '@uniswap/sdk-core'
 import { TokenInfo } from '@uniswap/token-lists'
 import { useMemo } from 'react'
+
 import { isAddress } from '../../utils'
-import { Token } from '@uniswap/sdk-core'
 
 const alwaysTrue = () => true
 

src/components/SearchModal/sorting.ts

-import { Token, CurrencyAmount, Currency } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useMemo } from 'react'
+
 import { useAllTokenBalances } from '../../state/wallet/hooks'
 
 // compare two token amounts with highest one coming first

src/components/SearchModal/styleds.tsx

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

src/components/Settings/index.tsx

 import { t, Trans } from '@lingui/macro'
+import { Percent } from '@uniswap/sdk-core'
+import { SupportedChainId } from 'constants/chains'
+import { useActiveWeb3React } from 'hooks/web3'
 import { useContext, useRef, useState } from 'react'
 import { Settings, X } from 'react-feather'
 import ReactGA from 'react-ga'
 import { Text } from 'rebass'
 import styled, { ThemeContext } from 'styled-components/macro'
+
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useToggleSettingsMenu } from '../../state/application/hooks'
-import { useExpertModeManager, useClientSideRouter } from '../../state/user/hooks'
+import { useClientSideRouter, useExpertModeManager } from '../../state/user/hooks'
 import { TYPE } from '../../theme'
 import { ButtonError } from '../Button'
 import { AutoColumn } from '../Column'
@@ -16,9 +20,6 @@ import QuestionHelper from '../QuestionHelper'
 import { RowBetween, RowFixed } from '../Row'
 import Toggle from '../Toggle'
 import TransactionSettings from '../TransactionSettings'
-import { Percent } from '@uniswap/sdk-core'
-import { useActiveWeb3React } from 'hooks/web3'
-import { SupportedChainId } from 'constants/chains'
 
 const StyledMenuIcon = styled(Settings)`
   height: 20px;

src/components/SwitchLocaleLink/index.tsx

 import { Trans } from '@lingui/macro'
+import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
 import { useMemo } from 'react'
 import styled from 'styled-components/macro'
+
 import { DEFAULT_LOCALE, LOCALE_LABEL, SupportedLocale } from '../../constants/locales'
 import { navigatorLocale, useActiveLocale } from '../../hooks/useActiveLocale'
 import { StyledInternalLink, TYPE } from '../../theme'
-import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
 
 const Container = styled(TYPE.small)`
   opacity: 0.6;

src/components/TextInput/index.test.tsx

-import { TextInput, ResizingTextArea } from './'
-import { render, screen, fireEvent } from 'test-utils'
 // include style rules in snapshots
 import 'jest-styled-components'
 
+import { fireEvent, render, screen } from 'test-utils'
+
+import { ResizingTextArea, TextInput } from './'
+
 describe('TextInput', () => {
   it('renders correctly', () => {
     const { asFragment } = render(

src/components/Toggle/ListToggle.tsx

 import { Trans } from '@lingui/macro'
 import styled from 'styled-components/macro'
+
 import { TYPE } from '../../theme'
 
 const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`

src/components/TokenWarningModal/index.tsx

 import { Token } from '@uniswap/sdk-core'
-import Modal from '../Modal'
 import { ImportToken } from 'components/SearchModal/ImportToken'
 
+import Modal from '../Modal'
+
 export default function TokenWarningModal({
   isOpen,
   tokens,

src/components/Tooltip/index.tsx

 import { transparentize } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
+
 import Popover, { PopoverProps } from '../Popover'
 
 export const TooltipContainer = styled.div`

src/components/TransactionConfirmationModal/index.tsx

+import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
+import Badge from 'components/Badge'
+import { CHAIN_INFO, L2_CHAIN_IDS, SupportedL2ChainId } from 'constants/chains'
+import useAddTokenToMetamask from 'hooks/useAddTokenToMetamask'
 import { ReactNode, useContext } from 'react'
-import styled, { ThemeContext } from 'styled-components/macro'
-import { getExplorerLink, ExplorerDataType } from '../../utils/getExplorerLink'
-import { TransactionSummary } from '../AccountDetails/TransactionSummary'
-import Modal from '../Modal'
-import { ExternalLink } from '../../theme'
-import { Text } from 'rebass'
-import { CloseIcon, CustomLightSpinner } from '../../theme/components'
-import { RowBetween, RowFixed } from '../Row'
 import { AlertCircle, AlertTriangle, ArrowUpCircle, CheckCircle } from 'react-feather'
-import { ButtonPrimary, ButtonLight } from '../Button'
-import { AutoColumn, ColumnCenter } from '../Column'
+import { Text } from 'rebass'
+import { useIsTransactionConfirmed, useTransaction } from 'state/transactions/hooks'
+import styled, { ThemeContext } from 'styled-components/macro'
+
 import Circle from '../../assets/images/blue-loader.svg'
 import MetaMaskLogo from '../../assets/images/metamask.png'
 import { useActiveWeb3React } from '../../hooks/web3'
-import useAddTokenToMetamask from 'hooks/useAddTokenToMetamask'
-import { Trans } from '@lingui/macro'
-import { CHAIN_INFO, L2_CHAIN_IDS, SupportedL2ChainId } from 'constants/chains'
-import { useIsTransactionConfirmed, useTransaction } from 'state/transactions/hooks'
-import Badge from 'components/Badge'
+import { ExternalLink } from '../../theme'
+import { CloseIcon, CustomLightSpinner } from '../../theme/components'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
+import { TransactionSummary } from '../AccountDetails/TransactionSummary'
+import { ButtonLight, ButtonPrimary } from '../Button'
+import { AutoColumn, ColumnCenter } from '../Column'
+import Modal from '../Modal'
+import { RowBetween, RowFixed } from '../Row'
 import AnimatedConfirmation from './AnimatedConfirmation'
 
 const Wrapper = styled.div`

src/components/TransactionSettings/index.tsx

 import { t, Trans } from '@lingui/macro'
-import { useState, useContext } from 'react'
 import { Percent } from '@uniswap/sdk-core'
+import { L2_CHAIN_IDS } from 'constants/chains'
+import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
+import { useActiveWeb3React } from 'hooks/web3'
+import { darken } from 'polished'
+import { useContext, useState } from 'react'
+import { useSetUserSlippageTolerance, useUserSlippageTolerance, useUserTransactionTTL } from 'state/user/hooks'
 import styled, { ThemeContext } from 'styled-components/macro'
 
-import QuestionHelper from '../QuestionHelper'
 import { TYPE } from '../../theme'
 import { AutoColumn } from '../Column'
+import QuestionHelper from '../QuestionHelper'
 import { RowBetween, RowFixed } from '../Row'
-import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
-import { darken } from 'polished'
-import { useSetUserSlippageTolerance, useUserSlippageTolerance, useUserTransactionTTL } from 'state/user/hooks'
-import { L2_CHAIN_IDS } from 'constants/chains'
-import { useActiveWeb3React } from 'hooks/web3'
 
 enum SlippageError {
   InvalidInput = 'InvalidInput',

src/components/WalletModal/Option.tsx

 import React from 'react'
 import styled from 'styled-components/macro'
+
 import { ExternalLink } from '../../theme'
 
 const InfoCard = styled.button<{ active?: boolean }>`

src/components/WalletModal/PendingView.tsx

+import { Trans } from '@lingui/macro'
 import { AbstractConnector } from '@web3-react/abstract-connector'
+import { darken } from 'polished'
 import styled from 'styled-components/macro'
-import { SUPPORTED_WALLETS } from '../../constants/wallet'
-import Option from './Option'
+
 import { injected } from '../../connectors'
-import { darken } from 'polished'
+import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import Loader from '../Loader'
-import { Trans } from '@lingui/macro'
+import Option from './Option'
 
 const PendingSection = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap};

src/components/WalletModal/index.tsx

+import { Trans } from '@lingui/macro'
 import { AbstractConnector } from '@web3-react/abstract-connector'
 import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
@@ -6,6 +7,7 @@ import { useEffect, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import ReactGA from 'react-ga'
 import styled from 'styled-components/macro'
+
 import MetamaskIcon from '../../assets/images/metamask.png'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
 import { fortmatic, injected, portis } from '../../connectors'
@@ -16,12 +18,10 @@ import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useWalletModalToggle } from '../../state/application/hooks'
 import { ExternalLink, TYPE } from '../../theme'
 import AccountDetails from '../AccountDetails'
-import { Trans } from '@lingui/macro'
-
+import { LightCard } from '../Card'
 import Modal from '../Modal'
 import Option from './Option'
 import PendingView from './PendingView'
-import { LightCard } from '../Card'
 
 const CloseIcon = styled.div`
   position: absolute;

src/components/Web3ReactManager/index.tsx

-import { useState, useEffect } from 'react'
+import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
+import { useEffect, useState } from 'react'
 import styled from 'styled-components/macro'
-import { Trans } from '@lingui/macro'
 
 import { network } from '../../connectors'
-import { useEagerConnect, useInactiveListener } from '../../hooks/web3'
 import { NetworkContextName } from '../../constants/misc'
+import { useEagerConnect, useInactiveListener } from '../../hooks/web3'
 import Loader from '../Loader'
 
 const MessageWrapper = styled.div`

src/components/Web3Status/index.tsx

+import { t, Trans } from '@lingui/macro'
 import { AbstractConnector } from '@web3-react/abstract-connector'
 import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 import { darken } from 'polished'
 import { useMemo } from 'react'
 import { Activity } from 'react-feather'
-import { t, Trans } from '@lingui/macro'
 import styled, { css } 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'
@@ -18,10 +19,8 @@ import { isTransactionRecent, useAllTransactions } from '../../state/transaction
 import { TransactionDetails } from '../../state/transactions/reducer'
 import { shortenAddress } from '../../utils'
 import { ButtonSecondary } from '../Button'
-
 import Identicon from '../Identicon'
 import Loader from '../Loader'
-
 import { RowBetween } from '../Row'
 import WalletModal from '../WalletModal'
 

src/components/analytics/GoogleAnalyticsReporter.tsx

 import { useEffect } from 'react'
 import ReactGA from 'react-ga'
-import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 import { RouteComponentProps } from 'react-router-dom'
+import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 
 function reportWebVitals({ name, delta, id }: Metric) {
   ReactGA.timing({

src/components/claim/AddressClaimModal.tsx

+import { Trans } from '@lingui/macro'
+import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { isAddress } from 'ethers/lib/utils'
 import { useState } from 'react'
-import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
-import Modal from '../Modal'
-import { AutoColumn, ColumnCenter } from '../Column'
+import { Text } from 'rebass'
 import styled from 'styled-components/macro'
-import { DataCard, CardSection, Break } from '../earn/styled'
-import { RowBetween } from '../Row'
-import { TYPE, ExternalLink, CloseIcon, CustomLightSpinner, UniTokenAnimated } from '../../theme'
-import { ButtonPrimary } from '../Button'
-import { useClaimCallback, useUserUnclaimedAmount, useUserHasAvailableClaim } from '../../state/claim/hooks'
-import tokenLogo from '../../assets/images/token-logo.png'
+
 import Circle from '../../assets/images/blue-loader.svg'
-import { Text } from 'rebass'
-import AddressInputPanel from '../AddressInputPanel'
+import tokenLogo from '../../assets/images/token-logo.png'
 import useENS from '../../hooks/useENS'
 import { useActiveWeb3React } from '../../hooks/web3'
-import { isAddress } from 'ethers/lib/utils'
-import Confetti from '../Confetti'
-import { CardNoise, CardBGImage, CardBGImageSmaller } from '../earn/styled'
+import { useClaimCallback, useUserHasAvailableClaim, useUserUnclaimedAmount } from '../../state/claim/hooks'
 import { useIsTransactionPending } from '../../state/transactions/hooks'
-import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { CloseIcon, CustomLightSpinner, ExternalLink, TYPE, UniTokenAnimated } from '../../theme'
 import { shortenAddress } from '../../utils'
-import { Trans } from '@lingui/macro'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
+import AddressInputPanel from '../AddressInputPanel'
+import { ButtonPrimary } from '../Button'
+import { AutoColumn, ColumnCenter } from '../Column'
+import Confetti from '../Confetti'
+import { Break, CardSection, DataCard } from '../earn/styled'
+import { CardBGImage, CardBGImageSmaller, CardNoise } from '../earn/styled'
+import Modal from '../Modal'
+import { RowBetween } from '../Row'
 
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;

src/components/claim/ClaimModal.tsx

-import JSBI from 'jsbi'
+import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { isAddress } from 'ethers/lib/utils'
+import JSBI from 'jsbi'
 import { useEffect, useState } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
+
 import Circle from '../../assets/images/blue-loader.svg'
 import tokenLogo from '../../assets/images/token-logo.png'
 import { useActiveWeb3React } from '../../hooks/web3'
@@ -17,8 +19,6 @@ import { ButtonPrimary } from '../Button'
 import { AutoColumn, ColumnCenter } from '../Column'
 import Confetti from '../Confetti'
 import { Break, CardBGImage, CardBGImageSmaller, CardNoise, CardSection, DataCard } from '../earn/styled'
-import { Trans } from '@lingui/macro'
-
 import Modal from '../Modal'
 import { RowBetween } from '../Row'
 

src/components/earn/ClaimRewardModal.tsx

@@ -2,6 +2,7 @@ import { TransactionResponse } from '@ethersproject/providers'
 import { t, Trans } from '@lingui/macro'
 import { useState } from 'react'
 import styled from 'styled-components/macro'
+
 import { useStakingContract } from '../../hooks/useContract'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { StakingInfo } from '../../state/stake/hooks'

src/components/earn/PoolCard.tsx

-import { AutoColumn } from '../Column'
-import { RowBetween } from '../Row'
-import styled from 'styled-components/macro'
-import { TYPE, StyledInternalLink } from '../../theme'
-import DoubleCurrencyLogo from '../DoubleLogo'
+import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import JSBI from 'jsbi'
-import { ButtonPrimary } from '../Button'
-import { StakingInfo } from '../../state/stake/hooks'
+import styled from 'styled-components/macro'
+
+import { BIG_INT_SECONDS_IN_WEEK } from '../../constants/misc'
 import { useColor } from '../../hooks/useColor'
-import { currencyId } from '../../utils/currencyId'
-import { Break, CardNoise, CardBGImage } from './styled'
-import { unwrappedToken } from '../../utils/unwrappedToken'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
-import { useV2Pair } from '../../hooks/useV2Pairs'
 import useUSDCPrice from '../../hooks/useUSDCPrice'
-import { BIG_INT_SECONDS_IN_WEEK } from '../../constants/misc'
-import { Trans } from '@lingui/macro'
+import { useV2Pair } from '../../hooks/useV2Pairs'
+import { StakingInfo } from '../../state/stake/hooks'
+import { StyledInternalLink, TYPE } from '../../theme'
+import { currencyId } from '../../utils/currencyId'
+import { unwrappedToken } from '../../utils/unwrappedToken'
+import { ButtonPrimary } from '../Button'
+import { AutoColumn } from '../Column'
+import DoubleCurrencyLogo from '../DoubleLogo'
+import { RowBetween } from '../Row'
+import { Break, CardBGImage, CardNoise } from './styled'
 
 const StatContainer = styled.div`
   display: flex;

src/components/earn/StakingModal.tsx

@@ -4,6 +4,7 @@ import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
+
 import { ApprovalState, useApproveCallback } from '../../hooks/useApproveCallback'
 import { usePairContract, useStakingContract, useV2RouterContract } from '../../hooks/useContract'
 import { useV2LiquidityTokenPermit } from '../../hooks/useERC20Permit'

src/components/earn/UnstakingModal.tsx

@@ -2,6 +2,7 @@ import { TransactionResponse } from '@ethersproject/providers'
 import { t, Trans } from '@lingui/macro'
 import { useState } from 'react'
 import styled from 'styled-components/macro'
+
 import { useStakingContract } from '../../hooks/useContract'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { StakingInfo } from '../../state/stake/hooks'

src/components/earn/styled.ts

 import styled from 'styled-components/macro'
-import { AutoColumn } from '../Column'
 
 import uImage from '../../assets/images/big_unicorn.png'
-import xlUnicorn from '../../assets/images/xl_uni.png'
 import noise from '../../assets/images/noise.png'
+import xlUnicorn from '../../assets/images/xl_uni.png'
+import { AutoColumn } from '../Column'
 
 export const DataCard = styled(AutoColumn)<{ disabled?: boolean }>`
   background: radial-gradient(76.02% 75.41% at 1.84% 0%, #ff007a 0%, #2172e5 100%);

src/components/swap/AdvancedSwapDetails.tsx

@@ -5,6 +5,7 @@ import { Trade as V3Trade } from '@uniswap/v3-sdk'
 import { LoadingRows } from 'components/Loader/styled'
 import { useContext, useMemo } from 'react'
 import { ThemeContext } from 'styled-components/macro'
+
 import { TYPE } from '../../theme'
 import { computeRealizedLPFeePercent } from '../../utils/prices'
 import { AutoColumn } from '../Column'

src/components/swap/ConfirmSwapModal.tsx

@@ -3,6 +3,7 @@ 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 { ReactNode, useCallback, useMemo } from 'react'
+
 import TransactionConfirmationModal, {
   ConfirmationModalContent,
   TransactionErrorContent,

src/components/swap/FormattedPriceImpact.tsx

 import { Percent } from '@uniswap/sdk-core'
+
 import { warningSeverity } from '../../utils/prices'
 import { ErrorText } from './styleds'
 

src/components/swap/RouterLabel.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import { useRoutingAPIEnabled } from 'state/user/hooks'
 import styled from 'styled-components/macro'
 import { TYPE } from 'theme'
+
 import { ReactComponent as AutoRouterIcon } from '../../assets/svg/auto_router.svg'
 import { ReactComponent as StaticRouterIcon } from '../../assets/svg/static_route.svg'
 

src/components/swap/SwapHeader.tsx

 import { Trans } from '@lingui/macro'
-import styled from 'styled-components/macro'
-import SettingsTab from '../Settings'
 import { Percent } from '@uniswap/sdk-core'
+import styled from 'styled-components/macro'
 
-import { RowBetween, RowFixed } from '../Row'
 import { TYPE } from '../../theme'
+import { RowBetween, RowFixed } from '../Row'
+import SettingsTab from '../Settings'
 
 const StyledSwapHeader = styled.div`
   padding: 1rem 1.25rem 0.5rem 1.25rem;

src/components/swap/SwapModalFooter.tsx

@@ -2,9 +2,9 @@ import { Trans } from '@lingui/macro'
 import { Currency, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
-
 import { ReactNode } from 'react'
 import { Text } from 'rebass'
+
 import { ButtonError } from '../Button'
 import { AutoRow } from '../Row'
 import { SwapCallbackError } from './styleds'

src/components/swap/SwapModalHeader.tsx

+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 { useContext, useState } from 'react'
-import { ArrowDown, AlertTriangle } from 'react-feather'
+import { AlertTriangle, ArrowDown } from 'react-feather'
 import { Text } from 'rebass'
 import styled, { ThemeContext } from 'styled-components/macro'
+
 import { useUSDCValue } from '../../hooks/useUSDCPrice'
 import { TYPE } from '../../theme'
-import { ButtonPrimary } from '../Button'
 import { isAddress, shortenAddress } from '../../utils'
 import { computeFiatValuePriceImpact } from '../../utils/computeFiatValuePriceImpact'
+import { ButtonPrimary } from '../Button'
+import { LightCard } from '../Card'
 import { AutoColumn } from '../Column'
 import { FiatValue } from '../CurrencyInputPanel/FiatValue'
 import CurrencyLogo from '../CurrencyLogo'
 import { RowBetween, RowFixed } from '../Row'
-import { TruncatedText, SwapShowAcceptChanges } from './styleds'
-import { Trans } from '@lingui/macro'
-
-import { AdvancedSwapDetails } from './AdvancedSwapDetails'
-import { LightCard } from '../Card'
-
 import TradePrice from '../swap/TradePrice'
+import { AdvancedSwapDetails } from './AdvancedSwapDetails'
+import { SwapShowAcceptChanges, TruncatedText } from './styleds'
 
 const ArrowWrapper = styled.div`
   padding: 4px;

src/components/swap/SwapRoute.tsx

@@ -13,6 +13,7 @@ import { useRoutingAPIEnabled } from 'state/user/hooks'
 import styled from 'styled-components/macro'
 import { TYPE } from 'theme'
 import { getTradeVersion } from 'utils/getTradeVersion'
+
 import { AutoRouterLabel, AutoRouterLogo } from './RouterLabel'
 
 const Separator = styled.div`