fix: enforce styled-components/macro usage and upgrade react-scripts (#1981)

* upgrade react-scripts and enforce macro rule

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

.eslintrc.json

@@ -28,6 +28,18 @@
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "styled-components",
+            "message": "Please import from styled-components/macro."
+          }
+        ],
+        "patterns": ["!styled-components/macro"]
+      }
+    ]
   }
 }

src/components/AccountDetails/index.tsx

 import { useCallback, useContext } from 'react'
-import styled, { ThemeContext } from 'styled-components'
+import styled, { ThemeContext } from 'styled-components/macro'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { clearAllTransactions } from '../../state/transactions/actions'

src/components/AddressInputPanel/index.tsx

 import { t, Trans } from '@lingui/macro'
 import { useContext, useCallback, ReactNode } from 'react'
-import styled, { ThemeContext } from 'styled-components'
+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/index.tsx

 import { readableColor } from 'polished'
 import { PropsWithChildren } from 'react'
-import styled, { DefaultTheme } from 'styled-components'
+import styled, { DefaultTheme } from 'styled-components/macro'
 import { Color } from 'theme/styled'
 
 export enum BadgeVariant {

src/components/Header/NetworkCard.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from 'react'
 import { ArrowDownCircle } from 'react-feather'
 import { ApplicationModal } from 'state/application/actions'
 import { useModalOpen, useToggleModal } from 'state/application/hooks'
-import styled, { css } from 'styled-components'
+import styled, { css } from 'styled-components/macro'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'
 import { switchToNetwork } from 'utils/switchToNetwork'
 import { L2_CHAIN_IDS, L2_INFO, NETWORK_LABELS, SupportedChainId } from '../../constants/chains'

src/components/Header/Polling.tsx

 import { useEffect, useState } from 'react'
-import styled, { keyframes } from 'styled-components'
+import styled, { keyframes } from 'styled-components/macro'
 import { useActiveWeb3React } from '../../hooks/web3'
 
 import { useBlockNumber } from '../../state/application/hooks'

src/components/InputStepCounter/InputStepCounter.tsx

@@ -2,7 +2,7 @@ import { useState, useCallback, useEffect, ReactNode } from 'react'
 import { LightCard } from 'components/Card'
 import { RowBetween } from 'components/Row'
 import { Input as NumericalInput } from '../NumericalInput'
-import styled, { keyframes } from 'styled-components'
+import styled, { keyframes } from 'styled-components/macro'
 import { TYPE } from 'theme'
 import { AutoColumn } from 'components/Column'
 import { ButtonPrimary } from 'components/Button'

src/components/Loader/index.tsx

-import styled, { keyframes } from 'styled-components'
+import styled, { keyframes } from 'styled-components/macro'
 
 const rotate = keyframes`
   from {

src/components/Menu/index.tsx

 import React, { useRef } from 'react'
 import { BookOpen, Code, Info, MessageCircle, PieChart } from 'react-feather'
 import { Link } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+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'

src/components/Modal/index.tsx

 import React from 'react'
-import styled, { css } from 'styled-components'
+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'

src/components/ModalViews/index.tsx

@@ -3,7 +3,7 @@ import { useActiveWeb3React } from '../../hooks/web3'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 
 import { AutoColumn, ColumnCenter } from '../Column'
-import styled, { ThemeContext } from 'styled-components'
+import styled, { ThemeContext } from 'styled-components/macro'
 import { RowBetween } from '../Row'
 import { TYPE, CloseIcon, CustomLightSpinner } from '../../theme'
 import { ArrowUpCircle } from 'react-feather'

src/components/Popups/ClaimPopup.tsx

@@ -3,7 +3,7 @@ import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useCallback, useEffect } from 'react'
 import ReactGA from 'react-ga'
 import { Heart, X } from 'react-feather'
-import styled, { keyframes } from 'styled-components'
+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'

src/components/Popups/PopupItem.tsx

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

src/components/Popups/TransactionPopup.tsx

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

src/components/PositionPreview/index.tsx

@@ -12,7 +12,7 @@ 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'
+import { ThemeContext } from 'styled-components/macro'
 import JSBI from 'jsbi'
 
 export const PositionPreview = ({

src/components/ProgressSteps/index.tsx

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

src/components/Settings/index.tsx

@@ -3,7 +3,7 @@ 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'
+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'

src/components/TextInput/index.tsx

 import React, { memo, useCallback, useRef } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 const Input = styled.input<{ error?: boolean; fontSize?: string }>`
   font-size: ${({ fontSize }) => fontSize || '1.25rem'};

src/components/TransactionConfirmationModal/index.tsx

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

src/components/TransactionSettings/index.tsx

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

src/components/Web3Status/index.tsx

@@ -4,7 +4,7 @@ import { darken, lighten } from 'polished'
 import { useMemo } from 'react'
 import { Activity } from 'react-feather'
 import { t, Trans } from '@lingui/macro'
-import styled, { css } from 'styled-components'
+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'

src/components/swap/AdvancedSwapDetails.tsx

@@ -3,7 +3,7 @@ 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 { useContext, useMemo } from 'react'
-import { ThemeContext } from 'styled-components'
+import { ThemeContext } from 'styled-components/macro'
 import { TYPE } from '../../theme'
 import { computeRealizedLPFeePercent } from '../../utils/prices'
 import { AutoColumn } from '../Column'

src/components/swap/SwapModalHeader.tsx

@@ -4,7 +4,7 @@ import { Trade as V3Trade } from '@uniswap/v3-sdk'
 import { useContext, useState } from 'react'
 import { ArrowDown, AlertTriangle } from 'react-feather'
 import { Text } from 'rebass'
-import styled, { ThemeContext } from 'styled-components'
+import styled, { ThemeContext } from 'styled-components/macro'
 import { useUSDCValue } from '../../hooks/useUSDCPrice'
 import { TYPE } from '../../theme'
 import { ButtonPrimary } from '../Button'

src/components/swap/SwapRoute.tsx

@@ -4,7 +4,7 @@ import { Trade as V3Trade, FeeAmount } from '@uniswap/v3-sdk'
 import { Fragment, memo, useContext } from 'react'
 import { ChevronRight } from 'react-feather'
 import { Flex } from 'rebass'
-import { ThemeContext } from 'styled-components'
+import { ThemeContext } from 'styled-components/macro'
 import { TYPE } from '../../theme'
 import { unwrappedToken } from 'utils/unwrappedToken'
 

src/components/swap/TradePrice.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import { Price, Currency } from '@uniswap/sdk-core'
 import { useContext } from 'react'
 import { Text } from 'rebass'
-import styled, { ThemeContext } from 'styled-components'
+import styled, { ThemeContext } from 'styled-components/macro'
 
 interface TradePriceProps {
   price: Price<Currency, Currency>

src/components/swap/styleds.tsx

@@ -2,7 +2,7 @@ import { transparentize } from 'polished'
 import { ReactNode } from 'react'
 
 import { AlertTriangle } from 'react-feather'
-import styled, { css } from 'styled-components'
+import styled, { css } from 'styled-components/macro'
 import { Text } from 'rebass'
 import { AutoColumn } from '../Column'
 

src/components/vote/VoteModal.tsx

@@ -4,7 +4,7 @@ import { getExplorerLink, ExplorerDataType } from '../../utils/getExplorerLink'
 
 import Modal from '../Modal'
 import { AutoColumn, ColumnCenter } from '../Column'
-import styled, { ThemeContext } from 'styled-components'
+import styled, { ThemeContext } from 'styled-components/macro'
 import { RowBetween } from '../Row'
 import { TYPE, CustomLightSpinner } from '../../theme'
 import { X, ArrowUpCircle } from 'react-feather'

src/hooks/useTheme.ts

-import { ThemeContext } from 'styled-components'
+import { ThemeContext } from 'styled-components/macro'
 import { useContext } from 'react'
 
 export default function useTheme() {

src/pages/AddLiquidity/index.tsx

@@ -10,7 +10,7 @@ import { useArgentWalletContract } from '../../hooks/useArgentWalletContract'
 import { useV3NFTPositionManagerContract } from '../../hooks/useContract'
 import { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
-import { ThemeContext } from 'styled-components'
+import { ThemeContext } from 'styled-components/macro'
 import { ButtonError, ButtonLight, ButtonPrimary, ButtonText } from '../../components/Button'
 import { YellowCard, OutlineCard, BlueCard, LightCard } from '../../components/Card'
 import { AutoColumn } from '../../components/Column'

src/pages/AddLiquidityV2/PoolPriceBar.tsx

 import { Currency, Percent, Price } from '@uniswap/sdk-core'
 import { useContext } from 'react'
 import { Text } from 'rebass'
-import { ThemeContext } from 'styled-components'
+import { ThemeContext } from 'styled-components/macro'
 import { AutoColumn } from '../../components/Column'
 import { AutoRow } from '../../components/Row'
 import { ONE_BIPS } from '../../constants/misc'

src/pages/AddLiquidityV2/index.tsx

@@ -6,7 +6,7 @@ import { Plus } from 'react-feather'
 import ReactGA from 'react-ga'
 import { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
-import { ThemeContext } from 'styled-components'
+import { ThemeContext } from 'styled-components/macro'
 import { ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button'
 import { BlueCard, LightCard } from '../../components/Card'
 import { AutoColumn, ColumnCenter } from '../../components/Column'

src/pages/CreateProposal/ProposalActionDetail.tsx

 import React from 'react'
 import AddressInputPanel from 'components/AddressInputPanel'
 import CurrencyInputPanel from 'components/CurrencyInputPanel'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { ProposalAction } from './ProposalActionSelector'
 import { Currency } from '@uniswap/sdk-core'
 import { Trans } from '@lingui/macro'

src/pages/CreateProposal/ProposalActionSelector.tsx

 import React, { useCallback } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { Text } from 'rebass'
 import { CloseIcon } from 'theme'
 import { Trans } from '@lingui/macro'
@@ -34,7 +34,7 @@ const ActionSelectorHeader = styled.div`
 const ActionDropdown = styled(ButtonDropdown)`
   padding: 0px;
   background-color: transparent;
-  color: ${({ theme }) => theme.text1}
+  color: ${({ theme }) => theme.text1};
   font-size: 1.25rem;
 
   :hover,

src/pages/CreateProposal/ProposalEditor.tsx

 import React, { memo } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { Text } from 'rebass'
 import { ResizingTextArea, TextInput } from 'components/TextInput'
 import { t, Trans } from '@lingui/macro'

src/pages/CreateProposal/ProposalSubmissionModal.tsx

 import React, { useContext } from 'react'
-import { ThemeContext } from 'styled-components'
+import { ThemeContext } from 'styled-components/macro'
 import { Text } from 'rebass'
 import { ExternalLink, TYPE } from 'theme'
 import { ButtonPrimary } from 'components/Button'

src/pages/CreateProposal/index.tsx

 import React, { useCallback, useMemo, useState } from 'react'
 import JSBI from 'jsbi'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { utils } from 'ethers'
 import { ExternalLink, TYPE } from 'theme'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'

src/pages/MigrateV2/index.tsx

 import { ReactNode, useContext, useMemo } from 'react'
 import { Pair } from '@uniswap/v2-sdk'
 import { Token } from '@uniswap/sdk-core'
-import { ThemeContext } from 'styled-components'
+import { ThemeContext } from 'styled-components/macro'
 import { AutoColumn } from '../../components/Column'
 import { AutoRow } from '../../components/Row'
 import { Text } from 'rebass'

src/pages/Pool/index.tsx

@@ -15,7 +15,7 @@ import { BookOpen, ChevronDown, ChevronsRight, Download, Inbox, Layers, PlusCirc
 import { Link } from 'react-router-dom'
 import { useWalletModalToggle } from 'state/application/hooks'
 import { useUserHideClosedPositions } from 'state/user/hooks'
-import styled, { ThemeContext } from 'styled-components'
+import styled, { ThemeContext } from 'styled-components/macro'
 import { HideSmall, TYPE } from 'theme'
 import { PositionDetails } from 'types/position'
 import CTACards from './CTACards'

src/pages/Pool/styleds.tsx

 import { Text } from 'rebass'
-import styled, { keyframes } from 'styled-components'
+import styled, { keyframes } from 'styled-components/macro'
 
 export const Wrapper = styled.div`
   position: relative;

src/pages/Pool/v2.tsx

 import { useContext, useMemo } from 'react'
-import styled, { ThemeContext } from 'styled-components'
+import styled, { ThemeContext } from 'styled-components/macro'
 import JSBI from 'jsbi'
 import { Link } from 'react-router-dom'
 import { SwapPoolTabs } from '../../components/NavigationTabs'

src/pages/RemoveLiquidity/index.tsx

@@ -6,7 +6,7 @@ import { ArrowDown, Plus } from 'react-feather'
 import ReactGA from 'react-ga'
 import { RouteComponentProps } from 'react-router'
 import { Text } from 'rebass'
-import { ThemeContext } from 'styled-components'
+import { ThemeContext } from 'styled-components/macro'
 import { ButtonPrimary, ButtonLight, ButtonError, ButtonConfirmed } from '../../components/Button'
 import { BlueCard, LightCard } from '../../components/Card'
 import { AutoColumn, ColumnCenter } from '../../components/Column'

src/pages/Swap/index.tsx

@@ -12,7 +12,7 @@ import { ArrowDown, ArrowLeft, CheckCircle, HelpCircle, Info } from 'react-feath
 import ReactGA from 'react-ga'
 import { Link, RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
-import styled, { ThemeContext } from 'styled-components'
+import styled, { ThemeContext } from 'styled-components/macro'
 import AddressInputPanel from '../../components/AddressInputPanel'
 import { ButtonConfirmed, ButtonError, ButtonGray, ButtonLight, ButtonPrimary } from '../../components/Button'
 import { GreyCard } from '../../components/Card'

src/pages/Vote/styled.tsx

 import { Trans } from '@lingui/macro'
-import styled, { DefaultTheme } from 'styled-components'
+import styled, { DefaultTheme } from 'styled-components/macro'
 import { ProposalState } from '../../state/governance/hooks'
 
 const handleColorType = (status: ProposalState, theme: DefaultTheme) => {

src/theme/components.tsx

@@ -2,7 +2,7 @@ import React, { HTMLProps } from 'react'
 import { ArrowLeft, ExternalLink as LinkIconFeather, Trash, X } from 'react-feather'
 import ReactGA from 'react-ga'
 import { Link } from 'react-router-dom'
-import styled, { keyframes } from 'styled-components'
+import styled, { keyframes } from 'styled-components/macro'
 import { anonymizeLink } from '../utils/anonymizeLink'
 
 export const ButtonText = styled.button`

src/theme/index.tsx

@@ -5,7 +5,7 @@ import styled, {
   css,
   DefaultTheme,
   ThemeProvider as StyledComponentsThemeProvider,
-} from 'styled-components'
+} from 'styled-components/macro'
 import { useIsDarkMode } from '../state/user/hooks'
 import { Colors } from './styled'
 

src/theme/styled.d.ts

-import { FlattenSimpleInterpolation, ThemedCssFunction } from 'styled-components'
+import { FlattenSimpleInterpolation, ThemedCssFunction } from 'styled-components/macro'
 
 export type Color = string
 export interface Colors {
@@ -57,7 +57,7 @@ export interface Colors {
   warning: Color
 }
 
-declare module 'styled-components' {
+declare module 'styled-components/macro' {
   export interface DefaultTheme extends Colors {
     grids: Grids