Final typescript migration push

src/components/CurrencyInputPanel/index.tsx

@@ -261,7 +261,6 @@ export default function CurrencyInputPanel({
           }}
           filterType="tokens"
           urlAddedTokens={urlAddedTokens}
-          field={field}
           onTokenSelect={onTokenSelection}
           showSendWithSwap={showSendWithSwap}
           hiddenToken={token?.address}

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

@@ -2,9 +2,9 @@ import React, { useState, useRef, useMemo, useEffect, useContext } from 'react'
 import '@reach/tooltip/styles.css'
 import styled, { ThemeContext } from 'styled-components'
 import escapeStringRegex from 'escape-string-regexp'
-import { JSBI, WETH } from '@uniswap/sdk'
+import { JSBI, Token, WETH } from '@uniswap/sdk'
 import { isMobile } from 'react-device-detect'
-import { withRouter } from 'react-router-dom'
+import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { COMMON_BASES } from '../../constants'
 import { Link as StyledLink } from '../../theme/components'
 
@@ -140,6 +140,19 @@ const FILTERS = {
   BALANCES: 'BALANCES'
 }
 
+interface SearchModalProps extends RouteComponentProps<{}> {
+  isOpen?: boolean
+  onDismiss?: () => void
+  filterType?: 'tokens'
+  hiddenToken?: string
+  showSendWithSwap?: boolean
+  onTokenSelect?: (address: string) => void
+  urlAddedTokens?: Token[]
+  otherSelectedTokenAddress?: string
+  otherSelectedText?: string
+  showCommonBases?: boolean
+}
+
 function SearchModal({
                        history,
                        isOpen,
@@ -152,7 +165,7 @@ function SearchModal({
                        otherSelectedTokenAddress,
                        otherSelectedText,
                        showCommonBases = false
-}) {
+                     }: SearchModalProps) {
   const { t } = useTranslation()
   const { account, chainId } = useWeb3React()
   const theme = useContext(ThemeContext)
@@ -168,7 +181,7 @@ function SearchModal({
 
   // if the current input is an address, and we don't have the token in context, try to fetch it
   const token = useToken(searchQuery)
-  const [temporaryToken, setTemporaryToken] = useState()
+  const [temporaryToken, setTemporaryToken] = useState<Token | null>()
   useEffect(() => {
     const address = isAddress(searchQuery)
     if (address && !token) {
@@ -180,7 +193,7 @@ function SearchModal({
       })
       return () => {
         stale = true
-        setTemporaryToken()
+        setTemporaryToken(null)
       }
     }
   }, [searchQuery, token, fetchTokenByAddress])
@@ -198,7 +211,7 @@ function SearchModal({
 
   const tokenList = useMemo(() => {
     return Object.keys(allTokens)
-      .sort((a, b) => {
+      .sort((a, b): number => {
         if (allTokens[a].symbol && allTokens[b].symbol) {
           const aSymbol = allTokens[a].symbol.toLowerCase()
           const bSymbol = allTokens[b].symbol.toLowerCase()
@@ -211,13 +224,13 @@ function SearchModal({
           const balanceB = allBalances?.[account]?.[b]
 
           if (balanceA && !balanceB) {
-            return sortDirection
+            return sortDirection ? -1 : 1
           }
           if (!balanceA && balanceB) {
-            return sortDirection * -1
+            return sortDirection ? 1 : -1
           }
           if (balanceA && balanceB) {
-            return sortDirection * parseFloat(balanceA.toExact()) > parseFloat(balanceB.toExact()) ? -1 : 1
+            return sortDirection && parseFloat(balanceA.toExact()) > parseFloat(balanceB.toExact()) ? -1 : 1
           }
           return aSymbol < bSymbol ? -1 : aSymbol > bSymbol ? 1 : 0
         } else {
@@ -274,6 +287,7 @@ function SearchModal({
 
   // manage focus on modal show
   const inputRef = useRef()
+
   function onInput(event) {
     const input = event.target.value
     const checksummedInput = isAddress(input)
@@ -289,19 +303,19 @@ function SearchModal({
   const escapeStringRegexp = string => string
 
   const sortedPairList = useMemo(() => {
-    return Object.keys(allPairs).sort((a, b) => {
+    return Object.keys(allPairs).sort((a, b): number => {
       // sort by balance
       const balanceA = allBalances?.[account]?.[a]
       const balanceB = allBalances?.[account]?.[b]
 
       if (balanceA && !balanceB) {
-        return sortDirection
+        return sortDirection ? -1 : 1
       }
       if (!balanceA && balanceB) {
-        return sortDirection * -1
+        return sortDirection ? 1 : -1
       }
       if (balanceA && balanceB) {
-        const order = sortDirection * (parseFloat(balanceA.toExact()) > parseFloat(balanceB.toExact()) ? -1 : 1)
+        const order = sortDirection && (parseFloat(balanceA.toExact()) > parseFloat(balanceB.toExact()) ? -1 : 1)
         return order ? 1 : -1
       } else {
         return 0
@@ -363,7 +377,7 @@ function SearchModal({
             }}
           >
             <RowFixed>
-              <DoubleTokenLogo a0={token0?.address || ''} a1={token1?.address || ''} size={24} margin={true} />
+              <DoubleTokenLogo a0={token0?.address || ''} a1={token1?.address || ''} size={24} margin={true}/>
               <Text fontWeight={500} fontSize={16}>{`${token0?.symbol}/${token1?.symbol}`}</Text>
             </RowFixed>
             {/* <Text fontWeight={500} fontSize={16}>
@@ -404,7 +418,7 @@ function SearchModal({
               }}
             >
               <RowFixed>
-                <TokenLogo address={temporaryToken.address} size={'24px'} style={{ marginRight: '14px' }} />
+                <TokenLogo address={temporaryToken.address} size={'24px'} style={{ marginRight: '14px' }}/>
                 <Column>
                   <Text fontWeight={500}>{temporaryToken.symbol}</Text>
                   <FadedSpan>(Found by search)</FadedSpan>
@@ -453,12 +467,13 @@ function SearchModal({
           return (
             <MenuItem
               key={address}
-              onClick={() => (hiddenToken && hiddenToken === address ? () => {} : _onTokenSelect(address))}
+              onClick={() => (hiddenToken && hiddenToken === address ? () => {
+              } : _onTokenSelect(address))}
               disabled={hiddenToken && hiddenToken === address}
               selected={otherSelectedTokenAddress === address}
             >
               <RowFixed>
-                <TokenLogo address={address} size={'24px'} style={{ marginRight: '14px' }} />
+                <TokenLogo address={address} size={'24px'} style={{ marginRight: '14px' }}/>
                 <Column>
                   <Text fontWeight={500}>
                     {symbol}
@@ -486,7 +501,6 @@ function SearchModal({
                   <Text>
                     {zeroBalance && showSendWithSwap ? (
                       <ColumnCenter
-                        justify="center"
                         style={{ backgroundColor: theme.bg2, padding: '8px', borderRadius: '12px' }}
                       >
                         <Text textAlign="center" fontWeight={500} color={theme.blue1}>
@@ -500,7 +514,7 @@ function SearchModal({
                     )}
                   </Text>
                 ) : account ? (
-                  <SpinnerWrapper src={Circle} alt="loader" />
+                  <SpinnerWrapper src={Circle} alt="loader"/>
                 ) : (
                   '-'
                 )}
@@ -555,7 +569,7 @@ function SearchModal({
                   Import A Token
                 </Text>
               </RowFixed>
-              <CloseIcon onClick={onDismiss} />
+              <CloseIcon onClick={onDismiss}/>
             </RowBetween>
             <TYPE.body style={{ marginTop: '10px' }}>
               To import a custom token, paste token address in the search bar.
@@ -575,7 +589,7 @@ function SearchModal({
               <Text fontWeight={500} fontSize={16}>
                 {filterType === 'tokens' ? 'Select A Token' : 'Select A Pool'}
               </Text>
-              <CloseIcon onClick={onDismiss} />
+              <CloseIcon onClick={onDismiss}/>
             </RowBetween>
             <Input
               type={'text'}
@@ -590,7 +604,7 @@ function SearchModal({
                   <Text fontWeight={500} fontSize={16}>
                     Common Bases
                   </Text>
-                  <QuestionHelper text="These tokens are commonly used in pairs." />
+                  <QuestionHelper text="These tokens are commonly used in pairs."/>
                 </AutoRow>
                 <AutoRow gap="10px">
                   {COMMON_BASES[chainId]?.map(token => {
@@ -601,7 +615,7 @@ function SearchModal({
                         disable={hiddenToken === token.address}
                         key={token.address}
                       >
-                        <TokenLogo address={token.address} />
+                        <TokenLogo address={token.address}/>
                         <Text fontWeight={500} fontSize={16}>
                           {token.symbol}
                         </Text>
@@ -623,16 +637,16 @@ function SearchModal({
             </RowBetween>
           </PaddedColumn>
         )}
-        {!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />}
+        {!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }}/>}
         {!showTokenImport && <TokenList>{filterType === 'tokens' ? renderTokenList() : renderPairsList()}</TokenList>}
-        {!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />}
+        {!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }}/>}
         {!showTokenImport && (
           <Card>
             <AutoRow justify={'center'}>
               <div>
                 {filterType !== 'tokens' && (
                   <Text fontWeight={500}>
-                    {!isMobile && "Don't see a pool? "}
+                    {!isMobile && 'Don\'t see a pool? '}
                     <StyledLink
                       onClick={() => {
                         history.push('/find')
@@ -644,7 +658,7 @@ function SearchModal({
                 )}
                 {filterType === 'tokens' && (
                   <Text fontWeight={500} color={theme.text2} fontSize={14}>
-                    {!isMobile && "Don't see a token? "}
+                    {!isMobile && 'Don\'t see a token? '}
 
                     <StyledLink
                       onClick={() => {

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

@@ -12,7 +12,7 @@ const TOKEN_ICON_API = address =>
   )}/logo.png`
 const BAD_IMAGES = {}
 
-const Image = styled.img`
+const Image = styled.img<{ size: string }>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
   background-color: white;
@@ -20,7 +20,7 @@ const Image = styled.img`
   box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
 `
 
-const Emoji = styled.span`
+const Emoji = styled.span<{size?:string}>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -30,7 +30,7 @@ const Emoji = styled.span`
   margin-bottom: -4px;
 `
 
-const StyledEthereumLogo = styled(EthereumLogo)`
+const StyledEthereumLogo = styled(EthereumLogo)<{size: string}>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
 `

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

-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState } from 'react'
 
-import { Link } from '../../theme/components'
-import { TYPE } from '../../theme'
-import { AutoColumn } from '../Column'
-import { AutoRow } from '../Row'
+import { AlertCircle, CheckCircle } from 'react-feather'
 
-import { useWeb3React } from '../../hooks'
-import { getEtherscanLink } from '../../utils'
+import styled from 'styled-components'
 import { usePopups } from '../../contexts/Application'
 
-import { CheckCircle, AlertCircle } from 'react-feather'
+import { useWeb3React } from '../../hooks'
+import useInterval from '../../hooks/useInterval'
+import { TYPE } from '../../theme'
 
-import styled from 'styled-components'
+import { Link } from '../../theme/components'
+import { getEtherscanLink } from '../../utils'
+import { AutoColumn } from '../Column'
+import { AutoRow } from '../Row'
 
-const Fader = styled.div`
+const Fader = styled.div<{ count: number }>`
   position: absolute;
   bottom: 0px;
   left: 0px;
@@ -23,28 +24,6 @@ const Fader = styled.div`
   transition: width 100ms linear;
 `
 
-function useInterval(callback, delay) {
-  const savedCallback = useRef()
-
-  // Remember the latest callback.
-  useEffect(() => {
-    savedCallback.current = callback
-    return () => {}
-  }, [callback])
-
-  // Set up the interval.
-  useEffect(() => {
-    function tick() {
-      savedCallback.current()
-    }
-    if (delay !== null) {
-      let id = setInterval(tick, delay)
-      return () => clearInterval(id)
-    }
-    return () => {}
-  }, [delay])
-}
-
 const delay = 100
 
 export default function TxnPopup({ hash, success, summary, popKey }) {
@@ -65,9 +44,9 @@ export default function TxnPopup({ hash, success, summary, popKey }) {
   return (
     <AutoRow onMouseEnter={() => setIsRunning(false)} onMouseLeave={() => setIsRunning(true)}>
       {success ? (
-        <CheckCircle color={'#27AE60'} size={24} style={{ paddingRight: '24px' }} />
+        <CheckCircle color={'#27AE60'} size={24} style={{ paddingRight: '24px' }}/>
       ) : (
-        <AlertCircle color={'#FF6871'} size={24} style={{ paddingRight: '24px' }} />
+        <AlertCircle color={'#FF6871'} size={24} style={{ paddingRight: '24px' }}/>
       )}
       <AutoColumn gap="8px">
         <TYPE.body fontWeight={500}>
@@ -75,7 +54,7 @@ export default function TxnPopup({ hash, success, summary, popKey }) {
         </TYPE.body>
         <Link href={getEtherscanLink(chainId, hash, 'transaction')}>View on Etherscan</Link>
       </AutoColumn>
-      <Fader count={count} />
+      <Fader count={count}/>
     </AutoRow>
   )
 }

src/components/WalletModal/Option.js → src/components/WalletModal/Option.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { Link } from '../../theme'
 
-const InfoCard = styled.button`
+const InfoCard = styled.button<{ active?: boolean }>`
   background-color: ${({ theme, active }) => (active ? theme.bg3 : theme.bg2)};
   padding: 1rem;
   outline: none;
@@ -30,7 +30,7 @@ const OptionCardLeft = styled.div`
   height: 100%;
 `
 
-const OptionCardClickable = styled(OptionCard)`
+const OptionCardClickable = styled(OptionCard)<{ clickable?: boolean }>`
   margin-top: 0;
   &:hover {
     cursor: ${({ clickable }) => (clickable ? 'pointer' : '')};
@@ -73,7 +73,7 @@ const SubHeader = styled.div`
   font-size: 12px;
 `
 
-const IconWrapper = styled.div`
+const IconWrapper = styled.div<{ size?: number }>`
   ${({ theme }) => theme.flexColumnNoWrap};
   align-items: center;
   justify-content: center;
@@ -97,7 +97,7 @@ export default function Option({
                                  subheader = null,
                                  icon,
                                  active = false
-}) {
+                               }) {
   const content = (
     <OptionCardClickable onClick={onClick} clickable={clickable && !active} active={active}>
       <OptionCardLeft>
@@ -106,7 +106,7 @@ export default function Option({
           {active ? (
             <CircleWrapper>
               <GreenCircle>
-                <div />
+                <div/>
               </GreenCircle>
             </CircleWrapper>
           ) : (
@@ -116,8 +116,8 @@ export default function Option({
         </HeaderText>
         {subheader && <SubHeader>{subheader}</SubHeader>}
       </OptionCardLeft>
-      <IconWrapper size={size} active={active}>
-        <img src={icon} alt={'Icon'} />
+      <IconWrapper size={size}>
+        <img src={icon} alt={'Icon'}/>
       </IconWrapper>
     </OptionCardClickable>
   )

src/components/WalletModal/PendingView.js → src/components/WalletModal/PendingView.tsx

@@ -28,7 +28,7 @@ const SpinnerWrapper = styled(Spinner)`
   }
 `
 
-const LoadingMessage = styled.div`
+const LoadingMessage = styled.div<{ error?: boolean }>`
   ${({ theme }) => theme.flexRowNoWrap};
   align-items: center;
   justify-content: flex-start;
@@ -71,14 +71,14 @@ const LoadingWrapper = styled.div`
 `
 
 export default function PendingView({ uri = '', size, connector, error = false, setPendingError, tryActivation }) {
-  const isMetamask = window.ethereum && window.ethereum.isMetaMask
+  const isMetamask = (window as any).ethereum && (window as any).ethereum.isMetaMask
 
   return (
     <PendingSection>
-      {!error && connector === walletconnect && <WalletConnectData size={size} uri={uri} />}
+      {!error && connector === walletconnect && <WalletConnectData size={size} uri={uri}/>}
       <LoadingMessage error={error}>
         <LoadingWrapper>
-          {!error && <SpinnerWrapper src={Circle} />}
+          {!error && <SpinnerWrapper src={Circle}/>}
           {error ? (
             <ErrorGroup>
               <div>Error connecting.</div>

src/components/WalletModal/WalletConnectData.js → src/components/WalletModal/WalletConnectData.tsx

@@ -11,12 +11,17 @@ const QRCodeWrapper = styled.div`
   margin-bottom: 20px;
 `
 
-export default function WalletConnectData({ uri = '', size }) {
+interface WalletConnectDataProps {
+  uri?: string
+  size: number
+}
+
+export default function WalletConnectData({ uri = '', size }: WalletConnectDataProps) {
   const [isDark] = useDarkModeManager()
   return (
     <QRCodeWrapper>
       {uri && (
-        <QRCode size={size} value={uri} bgColor={isDark ? '#333639' : 'white'} fgColor={isDark ? 'white' : 'black'} />
+        <QRCode size={size} value={uri} bgColor={isDark ? '#333639' : 'white'} fgColor={isDark ? 'white' : 'black'}/>
       )}
     </QRCodeWrapper>
   )

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

@@ -122,7 +122,7 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
 
   const [pendingWallet, setPendingWallet] = useState()
 
-  const [pendingError, setPendingError] = useState()
+  const [pendingError, setPendingError] = useState<boolean>()
 
   const walletModalOpen = useWalletModalOpen()
   const toggleWalletModal = useWalletModalToggle()
@@ -200,7 +200,7 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
 
   // get wallets user can switch too, depending on device/browser
   function getOptions() {
-    const isMetamask = window.ethereum && window.ethereum.isMetaMask
+    const isMetamask = (window as any).ethereum && (window as any).ethereum.isMetaMask
     return Object.keys(SUPPORTED_WALLETS).map(key => {
       const option = SUPPORTED_WALLETS[key]
       // check for mobile options
@@ -210,7 +210,7 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
           return null
         }
 
-        if (!window.web3 && !window.ethereum && option.mobile) {
+        if (!(window as any).web3 && !(window as any).ethereum && option.mobile) {
           return (
             <Option
               onClick={() => {
@@ -232,7 +232,7 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
       // overwrite injected when needed
       if (option.connector === injected) {
         // don't show injected if there's no injected provider
-        if (!(window.web3 || window.ethereum)) {
+        if (!((window as any).web3 || (window as any).ethereum)) {
           if (option.name === 'MetaMask') {
             return (
               <Option
@@ -286,7 +286,7 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
       return (
         <UpperSection>
           <CloseIcon onClick={toggleWalletModal}>
-            <CloseColor alt={'close icon'} />
+            <CloseColor/>
           </CloseIcon>
           <HeaderRow>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'}</HeaderRow>
           <ContentWrapper>
@@ -313,7 +313,7 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
     return (
       <UpperSection>
         <CloseIcon onClick={toggleWalletModal}>
-          <CloseColor alt={'close icon'} />
+          <CloseColor/>
         </CloseIcon>
         {walletView !== WALLET_VIEWS.ACCOUNT ? (
           <HeaderRow color="blue">
@@ -359,7 +359,6 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
 
   return (
     <Modal
-      style={{ userSelect: 'none' }}
       isOpen={walletModalOpen}
       onDismiss={toggleWalletModal}
       minHeight={null}

src/hooks/useInterval.ts

+import { useEffect, useRef } from 'react'
+
+export default function useInterval(callback: () => void, delay: null | number) {
+  const savedCallback = useRef<() => void>()
+
+  // Remember the latest callback.
+  useEffect(() => {
+    savedCallback.current = callback
+    return () => {
+    }
+  }, [callback])
+
+  // Set up the interval.
+  useEffect(() => {
+    function tick() {
+      savedCallback.current()
+    }
+
+    if (delay !== null) {
+      let id = setInterval(tick, delay)
+      return () => clearInterval(id)
+    }
+    return () => {
+    }
+  }, [delay])
+}
\ No newline at end of file