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/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;
@@ -88,16 +88,16 @@ const IconWrapper = styled.div`
 `
 
 export default function Option({
-  link = null,
-  clickable = true,
-  size = null,
-  onClick = null,
-  color,
-  header,
-  subheader = null,
-  icon,
-  active = false
-}) {
+                                 link = null,
+                                 clickable = true,
+                                 size = null,
+                                 onClick = null,
+                                 color,
+                                 header,
+                                 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