Type safety for styled components (#733)

a1a9d9f0 · Moody Salem · GitHub · 9b2fe0bd · a1a9d9f0 · 9b2fe0bd
Commit a1a9d9f0 authored May 08, 2020 by Moody Salem Committed by GitHub May 08, 2020
23 changed files
--- a/package.json
+++ b/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"
  },

--- a/src/assets/svg/SVGArrowDown.js
+++ b/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
--- a/src/components/AccountDetails/Copy.js
+++ b/src/components/AccountDetails/Copy.js
@@ -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>

--- a/src/components/AccountDetails/Transaction.js
+++ b/src/components/AccountDetails/Transaction.js
@@ -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)};
  }

--- a/src/components/AccountDetails/index.js
+++ b/src/components/AccountDetails/index.js
@@ -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' }}

--- a/src/components/AdvancedSettings/index.js
+++ b/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'

--- a/src/components/BalanceCard/index.tsx
+++ b/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">

--- a/src/components/Column/index.js
+++ b/src/components/Column/index.js
@@ -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};

--- a/src/components/ExchangePage/index.tsx
+++ b/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">

--- a/src/components/ExchangePage/styleds.ts
+++ b/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;

--- a/src/components/Header/index.tsx
+++ b/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);

--- a/src/components/Menu/index.tsx
+++ b/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;

--- a/src/components/NumericalInput/index.tsx
+++ b/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;

--- a/src/components/PoolFinder/index.tsx
+++ b/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>

--- a/src/components/SearchModal/index.js
+++ b/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'

--- a/src/hooks/index.ts
+++ b/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 => {

--- a/src/pages/Pool/RemoveLiquidity.tsx
+++ b/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}

--- a/src/pages/Pool/index.js
+++ b/src/pages/Pool/index.js
--- a/src/pages/Swap/index.js
+++ b/src/pages/Swap/index.js
--- a/src/theme/components.js
+++ b/src/theme/components.js
@@ -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;

--- a/src/theme/index.js
+++ b/src/theme/index.js
 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) => {
+const mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css } =
-  accumulator[size] = (...args) => 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,
-  html,
+body {
-  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);
-  }
+}
 `
--- a/src/theme/styled.d.ts
+++ b/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 {
+  }
+}
--- a/yarn.lock
+++ b/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==