Skip to content

I
interface
Commit 17eceebc authored by Moody Salem's avatar Moody Salem
Browse files
Options

Final typescript migration push

parent 6112c8a2
Hide whitespace changes
Inline Side-by-side
Showing with 140 additions and 118 deletions
src/components/CurrencyInputPanel/index.tsx
View file @ 17eceebc
......@@ -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
View file @ 17eceebc
......@@ -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,19 +140,32 @@ 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,
onDismiss,
onTokenSelect,
urlAddedTokens,
filterType,
hiddenToken,
showSendWithSwap,
otherSelectedTokenAddress,
otherSelectedText,
showCommonBases = false
}) {
history,
isOpen,
onDismiss,
onTokenSelect,
urlAddedTokens,
filterType,
hiddenToken,
showSendWithSwap,
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>
......@@ -417,16 +431,16 @@ function SearchModal({
return <TokenModalInfo>{t('noToken')}</TokenModalInfo>
}
}
// TODO is this the right place to link to create exchange?
// else if (isAddress(searchQuery) && tokenAddress === ethers.constants.AddressZero) {
// return (
// <>
// <TokenModalInfo>{t('noToken')}</TokenModalInfo>
// <TokenModalInfo>
// <Link to={`/create-exchange/${searchQuery}`}>{t('createExchange')}</Link>
// </TokenModalInfo>
// </>
// )
// TODO is this the right place to link to create exchange?
// else if (isAddress(searchQuery) && tokenAddress === ethers.constants.AddressZero) {
// return (
// <>
// <TokenModalInfo>{t('noToken')}</TokenModalInfo>
// <TokenModalInfo>
// <Link to={`/create-exchange/${searchQuery}`}>{t('createExchange')}</Link>
// </TokenModalInfo>
// </>
// )
// }
else {
return filteredTokenList
......@@ -439,8 +453,8 @@ function SearchModal({
? -1
: 1
: sortDirection
? 1
: -1
? 1
: -1
})
.map(({ address, symbol, balance }) => {
const urlAdded = urlAddedTokens && urlAddedTokens.hasOwnProperty(address)
......@@ -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
View file @ 17eceebc
......@@ -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
View file @ 17eceebc
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
View file @ 17eceebc
......@@ -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
View file @ 17eceebc
......@@ -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
View file @ 17eceebc
......@@ -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
View file @ 17eceebc
......@@ -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 0 → 100644
View file @ 17eceebc
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment