Type safety for styled components (#733)

package.json

@@ -55,6 +55,7 @@
     "@types/node": "^13.13.5",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
+    "@types/styled-components": "^4.2.0",
     "prettier": "^1.17.0",
     "typescript": "^3.8.3"
   },

src/assets/svg/SVGArrowDown.js

-import React from 'react'
-
-const SVGArrowDown = props => (
-  <svg width="1em" height="1em" viewBox="0 0 9 10" fill="currentColor" {...props}>
-    <path
-      d="M5.298 0H4.24v7.911h-.075L1.256 4.932l-.717.735L4.769 10 9 5.667l-.718-.735-2.908 2.979h-.076V0z"
-      fill="currentColor"
-    />
-  </svg>
-)
-
-export default SVGArrowDown

src/components/AccountDetails/Copy.js → src/components/AccountDetails/Copy.tsx

@@ -25,7 +25,7 @@ const TransactionStatusText = styled.span`
   align-items: center;
 `
 
-export default function CopyHelper(props) {
+export default function CopyHelper(props: { toCopy: string; children?: React.ReactNode }) {
   const [isCopied, setCopied] = useCopyClipboard()
 
   return (
@@ -33,12 +33,12 @@ export default function CopyHelper(props) {
       {props.children}
       {isCopied ? (
         <TransactionStatusText>
-          <CheckCircle size={'16'} />
+          <CheckCircle size={'16'}/>
           <TransactionStatusText>Copied</TransactionStatusText>
         </TransactionStatusText>
       ) : (
         <TransactionStatusText>
-          <Copy size={'16'} />
+          <Copy size={'16'}/>
         </TransactionStatusText>
       )}
     </CopyIcon>

src/components/AccountDetails/Transaction.js → src/components/AccountDetails/Transaction.tsx

@@ -43,7 +43,7 @@ const rotate = keyframes`
   }
 `
 
-const TransactionState = styled.div`
+const TransactionState = styled.div<{pending?: boolean;}>`
   display: flex;
   background-color: ${({ pending, theme }) =>
     pending ? transparentize(0.95, theme.blue1) : transparentize(0.95, theme.green1)};
@@ -64,7 +64,7 @@ const TransactionState = styled.div`
       pending ? transparentize(0, theme.blue1) : transparentize(0, theme.green1)};
   }
 `
-const ButtonWrapper = styled.div`
+const ButtonWrapper = styled.div<{pending: boolean}>`
   a {
     color: ${({ pending, theme }) => (pending ? theme.blue1 : theme.green1)};
   }

src/components/AccountDetails/index.js → src/components/AccountDetails/index.tsx

@@ -129,7 +129,7 @@ const LowerSection = styled.div`
   }
 `
 
-const AccountControl = styled.div`
+const AccountControl = styled.div<{ hasENS: boolean; isENS: boolean; }>`
   ${({ theme }) => theme.flexRowNoWrap};
   align-items: center;
   min-width: 0;
@@ -156,7 +156,7 @@ const ConnectButtonRow = styled.div`
   margin: 10px 0;
 `
 
-const StyledLink = styled(Link)`
+const StyledLink = styled(Link) <{ hasENS: boolean; isENS: boolean; }>`
   color: ${({ hasENS, isENS, theme }) => (hasENS ? (isENS ? theme.blue1 : theme.text3) : theme.blue1)};
 `
 
@@ -181,7 +181,7 @@ const WalletName = styled.div`
   width: initial;
 `
 
-const IconWrapper = styled.div`
+const IconWrapper = styled.div<{size?: number}>`
   ${({ theme }) => theme.flexColumnNoWrap};
   align-items: center;
   justify-content: center;
@@ -217,7 +217,7 @@ function renderTransactions(transactions, pending) {
   return (
     <TransactionListWrapper>
       {transactions.map((hash, i) => {
-        return <Transaction key={i} hash={hash} pending={pending} />
+        return <Transaction key={i} hash={hash} pending={pending}/>
       })}
     </TransactionListWrapper>
   )
@@ -229,12 +229,13 @@ export default function AccountDetails({
                                          confirmedTransactions,
                                          ENSName,
                                          openOptions
-}) {
+                                       }) {
   const { chainId, account, connector } = useWeb3React()
   const theme = useContext(ThemeContext)
 
   function formatConnectorName() {
-    const isMetaMask = window.ethereum && window.ethereum.isMetaMask ? true : false
+    const { ethereum } = window as any
+    const isMetaMask = ethereum && ethereum.isMetaMask ? true : false
     const name = Object.keys(SUPPORTED_WALLETS)
       .filter(
         k =>
@@ -248,32 +249,32 @@ export default function AccountDetails({
     if (connector === injected) {
       return (
         <IconWrapper size={16}>
-          <Identicon /> {formatConnectorName()}
+          <Identicon/> {formatConnectorName()}
         </IconWrapper>
       )
     } else if (connector === walletconnect) {
       return (
         <IconWrapper size={16}>
-          <img src={WalletConnectIcon} alt={''} /> {formatConnectorName()}
+          <img src={WalletConnectIcon} alt={''}/> {formatConnectorName()}
         </IconWrapper>
       )
     } else if (connector === walletlink) {
       return (
         <IconWrapper size={16}>
-          <img src={CoinbaseWalletIcon} alt={''} /> {formatConnectorName()}
+          <img src={CoinbaseWalletIcon} alt={''}/> {formatConnectorName()}
         </IconWrapper>
       )
     } else if (connector === fortmatic) {
       return (
         <IconWrapper size={16}>
-          <img src={FortmaticIcon} alt={''} /> {formatConnectorName()}
+          <img src={FortmaticIcon} alt={''}/> {formatConnectorName()}
         </IconWrapper>
       )
     } else if (connector === portis) {
       return (
         <>
           <IconWrapper size={16}>
-            <img src={PortisIcon} alt={''} /> {formatConnectorName()}
+            <img src={PortisIcon} alt={''}/> {formatConnectorName()}
             <MainWalletAction
               onClick={() => {
                 portis.portis.showPortis()
@@ -291,7 +292,7 @@ export default function AccountDetails({
     <>
       <UpperSection>
         <CloseIcon onClick={toggleWalletModal}>
-          <CloseColor alt={'close icon'} />
+          <CloseColor/>
         </CloseIcon>
         <HeaderRow>Account</HeaderRow>
         <AccountSection>
@@ -303,7 +304,7 @@ export default function AccountDetails({
                   {connector !== injected && connector !== walletlink && (
                     <WalletAction
                       onClick={() => {
-                        connector.close()
+                        (connector as any).close()
                       }}
                     >
                       Disconnect
@@ -311,7 +312,7 @@ export default function AccountDetails({
                   )}
                   <CircleWrapper>
                     <GreenCircle>
-                      <div />
+                      <div/>
                     </GreenCircle>
                   </CircleWrapper>
                 </div>
@@ -322,21 +323,21 @@ export default function AccountDetails({
                     <StyledLink hasENS={!!ENSName} isENS={true} href={getEtherscanLink(chainId, ENSName, 'address')}>
                       {ENSName} ↗{' '}
                     </StyledLink>
-                    <Copy toCopy={ENSName} />
+                    <Copy toCopy={ENSName}/>
                   </AccountControl>
                 ) : (
                   <AccountControl hasENS={!!ENSName} isENS={false}>
                     <StyledLink hasENS={!!ENSName} isENS={false} href={getEtherscanLink(chainId, account, 'address')}>
                       {account} ↗{' '}
                     </StyledLink>
-                    <Copy toCopy={account} />
+                    <Copy toCopy={account}/>
                   </AccountControl>
                 )}
               </AccountGroupingRow>
             </InfoCard>
           </YourAccount>
 
-          {!(isMobile && (window.web3 || window.ethereum)) && (
+          {!(isMobile && ((window as any).web3 || (window as any).ethereum)) && (
             <ConnectButtonRow>
               <ButtonEmpty
                 style={{ fontWeight: '400' }}

src/components/AdvancedSettings/index.js

@@ -5,7 +5,7 @@ import QuestionHelper from '../Question'
 import NumericalInput from '../NumericalInput'
 import { Link } from '../../theme/components'
 import { TYPE } from '../../theme'
-import { AutoColumn } from '../../components/Column'
+import { AutoColumn } from '../Column'
 import { ButtonRadio } from '../Button'
 import { useTranslation } from 'react-i18next'
 import Row, { RowBetween, RowFixed } from '../../components/Row'

src/components/BalanceCard/index.tsx

@@ -27,7 +27,7 @@ export default function BalanceCard({ token0, balance0, import0, token1, balance
         zIndex: '99'
       }}
     >
-      <AutoColumn style={{ width: '100%' }} padding="12px">
+      <AutoColumn style={{ width: '100%', padding: '12px' }}>
         {!showInfo ? (
           <Hover>
             <GreyCard padding="16px 20px">

src/components/Column/index.js → src/components/Column/index.tsx

@@ -10,7 +10,7 @@ export const ColumnCenter = styled(Column)`
   align-items: center;
 `
 
-export const AutoColumn = styled.div`
+export const AutoColumn = styled.div<{gap?: 'sm' | 'md' | 'lg' | string; justify?: 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end';}>`
   display: grid;
   grid-auto-rows: auto;
   grid-row-gap: ${({ gap }) => (gap === 'sm' && '8px') || (gap === 'md' && '12px') || (gap === 'lg' && '24px') || gap};

src/components/ExchangePage/index.tsx

@@ -716,7 +716,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
               </Text>
             </RowFixed>
           </RowBetween>
-          <AutoColumn justify="flex-start" gap="sm" padding={'20px 0 0 0px'}>
+          <AutoColumn justify="flex-start" gap="sm" style={{padding: '20px 0 0 0px'}}>
             {independentField === Field.INPUT ? (
               <TYPE.italic textAlign="left" style={{ width: '100%', paddingTop: '.5rem' }}>
                 {`Output is estimated. You will receive at least `}
@@ -1022,7 +1022,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
               </ColumnCenter>
             ) : (
               <Hover>
-                <ColumnCenter padding="0 1rem">
+                <ColumnCenter style={{padding: '0 1rem'}}>
                   <ArrowWrapper>
                     <ArrowDown
                       size="16"
@@ -1325,7 +1325,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
             <AutoColumn gap="lg">
               {warningHigh && (
                 <YellowCard style={{ padding: '20px', paddingTop: '10px' }}>
-                  <AutoColumn gap="md" mt={2}>
+                  <AutoColumn gap="md">
                     <RowBetween>
                       <RowFixed style={{ paddingTop: '8px' }}>
                         <span role="img" aria-label="warning">

src/components/ExchangePage/styleds.ts

@@ -98,7 +98,7 @@ export const MaxButton = styled.button`
   }
 `
 
-export const StyledBalanceMaxMini = styled.button`
+export const StyledBalanceMaxMini = styled.button<{ active?: boolean }>`
   height: 24px;
   background-color: ${({ theme }) => theme.bg2};
   border: none;

src/components/Header/index.tsx

@@ -64,7 +64,7 @@ const TitleText = styled(Row)`
   `};
 `
 
-const AccountElement = styled.div`
+const AccountElement = styled.div<{active: boolean;}>`
   display: flex;
   display: flex;
   flex-direction: row;
@@ -107,7 +107,7 @@ const Alpha = styled(GreyCard)`
   font-weight: 600;
 `
 
-const UniIcon = styled.div`
+const UniIcon = styled.div<{href: string}>`
   transition: transform 0.3s ease;
   :hover {
     transform: rotate(-5deg);

src/components/Menu/index.tsx

@@ -56,7 +56,6 @@ const StyledMenu = styled.div`
 const MenuFlyout = styled.span`
   min-width: 8.125rem;
   background-color: ${({ theme }) => theme.bg1};
-  ${({ theme }) => theme.dropShadow}
   border: 1px solid ${({ theme }) => theme.bg3};
   border-radius: 0.5rem;
   padding: 0.5rem;

src/components/NumericalInput/index.tsx

 import React from 'react'
 import styled from 'styled-components'
 
-const StyledInput = styled.input`
+const StyledInput = styled.input<{error?: boolean; fontSize?: string; align?: string}>`
   color: ${({ error, theme }) => error && theme.red1};
   color: ${({ theme }) => theme.text1};
   width: 0;

src/components/PoolFinder/index.tsx

@@ -71,7 +71,7 @@ function PoolFinder({ history }) {
           Pool Imported
         </Text>
         <Row>
-            <DoubleTokenLogo a0={token0Address || ''} a1={token1Address || ''} margin={true} />
+          <DoubleTokenLogo a0={token0Address || ''} a1={token1Address || ''} margin={true}/>
           <Text fontSize={16} fotnWeight={500}>
             UNI {token0?.symbol} / {token1?.symbol}
           </Text>
@@ -101,7 +101,7 @@ function PoolFinder({ history }) {
             }}
           >
             <Row>
-              <TokenLogo address={token0Address} />
+              <TokenLogo address={token0Address}/>
               <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
                 {token0?.symbol}
               </Text>
@@ -109,7 +109,7 @@ function PoolFinder({ history }) {
           </ButtonDropwdownLight>
         )}
         <ColumnCenter>
-          <Plus size="16" color="#888D9B" />
+          <Plus size="16" color="#888D9B"/>
         </ColumnCenter>
         {!token1Address ? (
           <ButtonDropwdown
@@ -128,7 +128,7 @@ function PoolFinder({ history }) {
             }}
           >
             <Row>
-              <TokenLogo address={token1Address} />
+              <TokenLogo address={token1Address}/>
               <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
                 {token1?.symbol}
               </Text>
@@ -136,7 +136,8 @@ function PoolFinder({ history }) {
           </ButtonDropwdownLight>
         )}
         {allowImport && (
-          <ColumnCenter justify="center" style={{ backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}>
+          <ColumnCenter
+            style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}>
             <Text textAlign="center" fontWeight={500} color="">
               {newLiquidity ? 'Pool Found!' : 'Pool already imported.'}
             </Text>

src/components/SearchModal/index.js

@@ -17,7 +17,7 @@ import { Text } from 'rebass'
 import { Hover } from '../../theme'
 import { ArrowLeft, X } from 'react-feather'
 import { CloseIcon } from '../../theme/components'
-import { ColumnCenter } from '../../components/Column'
+import { ColumnCenter } from '../Column'
 import Card from '../../components/Card'
 import { ButtonPrimary } from '../../components/Button'
 import { Spinner, TYPE } from '../../theme'

src/hooks/index.ts

@@ -209,7 +209,7 @@ export function usePairContract(pairAddress, withSignerIfPossible = true) {
   }, [pairAddress, library, withSignerIfPossible, account])
 }
 
-export function useCopyClipboard(timeout = 500) {
+export function useCopyClipboard(timeout = 500): [boolean, (toCopy: string) => void] {
   const [isCopied, setIsCopied] = useState(false)
 
   const staticCopy = useCallback(text => {

src/pages/Pool/RemoveLiquidity.tsx

@@ -57,7 +57,7 @@ const ClickableText = styled(Text)`
 //   font-weight: 500;
 // `
 
-const MaxButton = styled.button`
+const MaxButton = styled.button<{ width: string }>`
   padding: 0.5rem 1rem;
   background-color: ${({ theme }) => theme.blue5};
   border: 1px solid ${({ theme }) => theme.blue5};
@@ -514,21 +514,21 @@ export default function RemoveLiquidity({ token0, token1 }) {
             {!!parsedAmounts[Field.TOKEN0] && parsedAmounts[Field.TOKEN0].toSignificant(6)}
           </Text>
           <RowFixed gap="4px">
-            <TokenLogo address={tokens[Field.TOKEN0]?.address} size={'24px'} />
+            <TokenLogo address={tokens[Field.TOKEN0]?.address} size={'24px'}/>
             <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
               {tokens[Field.TOKEN0]?.symbol || ''}
             </Text>
           </RowFixed>
         </RowBetween>
         <RowFixed>
-          <Plus size="16" color={'#888D9B'} />
+          <Plus size="16" color={'#888D9B'}/>
         </RowFixed>
         <RowBetween align="flex-end">
           <Text fontSize={24} fontWeight={600}>
             {!!parsedAmounts[Field.TOKEN1] && parsedAmounts[Field.TOKEN1].toSignificant(6)}
           </Text>
           <RowFixed gap="4px">
-            <TokenLogo address={tokens[Field.TOKEN1]?.address} size={'24px'} />
+            <TokenLogo address={tokens[Field.TOKEN1]?.address} size={'24px'}/>
             <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
               {tokens[Field.TOKEN1]?.symbol || ''}
             </Text>
@@ -595,6 +595,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
       </>
     )
   }
+
   const pendingText: string = `Removing ${parsedAmounts[Field.TOKEN0]?.toSignificant(6)} ${
     tokens[Field.TOKEN0]?.symbol
   } and ${parsedAmounts[Field.TOKEN1]?.toSignificant(6)} ${tokens[Field.TOKEN1]?.symbol}`
@@ -636,7 +637,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
               </Text>
             </Row>
             {!showAdvanced && (
-              <Slider value={parseFloat(derivedPerecent)} onChange={handleSliderChange} override={override} />
+              <Slider value={parseFloat(derivedPerecent)} onChange={handleSliderChange} override={override}/>
             )}
             {!showAdvanced && (
               <RowBetween>
@@ -659,7 +660,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
         {!showAdvanced && (
           <>
             <ColumnCenter>
-              <ArrowDown size="16" color="#888D9B" />
+              <ArrowDown size="16" color="#888D9B"/>
             </ColumnCenter>{' '}
             <LightCard>
               <AutoColumn gap="10px">
@@ -668,7 +669,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
                     {formattedAmounts[Field.TOKEN0] ? formattedAmounts[Field.TOKEN0] : '-'}
                   </Text>
                   <RowFixed>
-                    <TokenLogo address={tokens[Field.TOKEN0]?.address || ''} style={{ marginRight: '12px' }} />
+                    <TokenLogo address={tokens[Field.TOKEN0]?.address || ''} style={{ marginRight: '12px' }}/>
                     <Text fontSize={24} fontWeight={500}>
                       {tokens[Field.TOKEN0]?.symbol}
                     </Text>
@@ -679,7 +680,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
                     {formattedAmounts[Field.TOKEN1] ? formattedAmounts[Field.TOKEN1] : '-'}
                   </Text>
                   <RowFixed>
-                    <TokenLogo address={tokens[Field.TOKEN1]?.address || ''} style={{ marginRight: '12px' }} />
+                    <TokenLogo address={tokens[Field.TOKEN1]?.address || ''} style={{ marginRight: '12px' }}/>
                     <Text fontSize={24} fontWeight={500}>
                       {tokens[Field.TOKEN1]?.symbol}
                     </Text>
@@ -705,7 +706,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
               pair={pair}
             />
             <ColumnCenter>
-              <ArrowDown size="16" color="#888D9B" />
+              <ArrowDown size="16" color="#888D9B"/>
             </ColumnCenter>
             <CurrencyInputPanel
               field={Field.TOKEN0}
@@ -719,7 +720,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
               disableTokenSelect
             />
             <ColumnCenter>
-              <Plus size="16" color="#888D9B" />
+              <Plus size="16" color="#888D9B"/>
             </ColumnCenter>
             <CurrencyInputPanel
               field={Field.TOKEN1}

src/theme/components.js → src/theme/components.tsx

@@ -2,9 +2,10 @@ import styled, { keyframes } from 'styled-components'
 import { darken } from 'polished'
 import { X } from 'react-feather'
 
-export const Button = styled.button.attrs(({ warning, theme }) => ({
+export const Button = styled.button.attrs<{ warning: boolean }, { backgroundColor: string }>(
+  ({ warning, theme }) => ({
     backgroundColor: warning ? theme.red1 : theme.blue1
-}))`
+  }))`
   padding: 1rem 2rem 1rem 2rem;
   border-radius: 3rem;
   cursor: pointer;

src/theme/index.js → src/theme/index.tsx

 import React, { useEffect } from 'react'
-import styled, { ThemeProvider as StyledComponentsThemeProvider, createGlobalStyle, css } from 'styled-components'
+import styled, {
+  ThemeProvider as StyledComponentsThemeProvider,
+  createGlobalStyle,
+  css,
+} from 'styled-components'
 import { getQueryParam, checkSupportedTheme } from '../utils'
 import { SUPPORTED_THEMES } from '../constants'
 import { useDarkModeManager } from '../contexts/LocalStorage'
 import { Text } from 'rebass'
+import { UniswapTheme } from './styled'
 
 export * from './components'
 
@@ -14,14 +19,16 @@ const MEDIA_WIDTHS = {
   upToLarge: 1280
 }
 
-const mediaWidthTemplates = Object.keys(MEDIA_WIDTHS).reduce((accumulator, size) => {
-  accumulator[size] = (...args) => css`
+const mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css } =
+  Object.keys(MEDIA_WIDTHS)
+    .reduce((accumulator, size) => {
+      accumulator[size] = (a, b, c) => css`
     @media (max-width: ${MEDIA_WIDTHS[size]}px) {
-      ${css(...args)}
+      ${css(a, b, c)}
     }
   `
       return accumulator
-}, {})
+    }, {}) as any
 
 const white = '#FFFFFF'
 const black = '#000000'
@@ -42,7 +49,7 @@ export default function ThemeProvider({ children }) {
   return <StyledComponentsThemeProvider theme={theme(themeToRender)}>{children}</StyledComponentsThemeProvider>
 }
 
-export const theme = darkMode => ({
+export const theme: (darkMode: boolean) => UniswapTheme = darkMode => ({
   // base
   white,
   black,
@@ -102,6 +109,7 @@ export const theme = darkMode => ({
 
   // media queries
   mediaWidth: mediaWidthTemplates,
+
   // css snippets
   flexColumnNoWrap: css`
     display: flex;
@@ -192,23 +200,22 @@ html { font-family: 'Inter', sans-serif; letter-spacing: -0.018em;}
   html { font-family: 'Inter var', sans-serif; }
 }
 
-  
-  html,
-  body {
+html,
+body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;    
-  }
+}
 
-  body > div {
+body > div {
   height: 100%;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
 
-  html {
+html {
   font-size: 16px;
   font-variant: none;
   color: ${({ theme }) => theme.text1};
@@ -216,5 +223,5 @@ html { font-family: 'Inter', sans-serif; letter-spacing: -0.018em;}
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  }
+}
 `

src/theme/styled.d.ts

+import { css, FlattenSimpleInterpolation } from 'styled-components'
+
+export interface UniswapTheme {
+  // base
+  white: string
+  black: string
+
+  // text
+  text1: string
+  text2: string
+  text3: string
+  text4: string
+  text5: string
+
+  // backgrounds / greys
+  bg1: string
+  bg2: string
+  bg3: string
+  bg4: string
+  bg5: string
+
+  modalBG: string
+  advancedBG: string
+
+  //blues
+  blue1: string
+  blue2: string
+  blue3: string
+  blue4: string
+  blue5: string
+
+  buttonSecondaryText: string
+
+  // pinks
+  pink1: string
+  pink2: string
+  pink3: string
+  pink4: string
+
+  // other
+  red1: string
+  green1: string
+  yellow1: string
+  yellow2: string
+
+  grids: {
+    sm: number,
+    md: number,
+    lg: number
+  },
+
+  // shadows
+  shadow1: string
+
+  // media queries
+  mediaWidth: { [width in keyof typeof MEDIA_WIDTHS]: typeof css },
+  // css snippets
+  flexColumnNoWrap: FlattenSimpleInterpolation
+  flexRowNoWrap: FlattenSimpleInterpolation
+}
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends UniswapTheme {
+  }
+}
+

yarn.lock

@@ -2308,6 +2308,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@*":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
@@ -2383,6 +2391,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-native@*":
+  version "0.62.7"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.62.7.tgz#bfc5ed03ba576f288603daa3f67f0f67d9a8bf57"
+  integrity sha512-FGFEt9GcFVl//XxWmxkeBxAx0YnzyEhJpR8hOJrjfaFKZm0KjHzzyCmCksBAP2qHSTrcJCiBkIvYCX/kGiOgww==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.2.0":
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.4.tgz#c7416225987ccdb719262766c1483da8f826838d"
@@ -2403,6 +2418,16 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/styled-components@^4.2.0":
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.3.tgz#74dd00ad760845a98890a8539361d8afc32059de"
+  integrity sha512-U0udeNOZBfUkJycmGJwmzun0FBt11rZy08weVQmE2xfUNAbX8AGOEWxWna2d+qAUKxKgMlcG+TZT0+K2FfDcnQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    "@types/react-native" "*"
+    csstype "^2.2.0"
+
 "@types/web3-provider-engine@^14.0.0":
   version "14.0.0"
   resolved "https://registry.yarnpkg.com/@types/web3-provider-engine/-/web3-provider-engine-14.0.0.tgz#43adc3b39dc9812b82aef8cd2d66577665ad59b0"
@@ -8318,7 +8343,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==