refactor: remove unused selector list/import components (#5145)
* removed unnused components
This commit is contained in:
cartcrom
GitHub
parent
4b282d7813
commit
44163f54b1
@ -1,28 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import styled from 'styled-components/macro'
|
|
||||||
|
|
||||||
import useHttpLocations from '../../hooks/useHttpLocations'
|
|
||||||
import Logo from '../Logo'
|
|
||||||
|
|
||||||
const StyledListLogo = styled(Logo)<{ size: string }>`
|
|
||||||
width: ${({ size }) => size};
|
|
||||||
height: ${({ size }) => size};
|
|
||||||
`
|
|
||||||
|
|
||||||
export default function ListLogo({
|
|
||||||
logoURI,
|
|
||||||
style,
|
|
||||||
size = '24px',
|
|
||||||
alt,
|
|
||||||
symbol,
|
|
||||||
}: {
|
|
||||||
logoURI: string
|
|
||||||
size?: string
|
|
||||||
style?: React.CSSProperties
|
|
||||||
alt?: string
|
|
||||||
symbol?: string
|
|
||||||
}) {
|
|
||||||
const srcs: string[] = useHttpLocations(logoURI)
|
|
||||||
|
|
||||||
return <StyledListLogo alt={alt} size={size} symbol={symbol} srcs={srcs} style={style} />
|
|
||||||
}
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
import { Trans } from '@lingui/macro'
|
|
||||||
import { Token } from '@uniswap/sdk-core'
|
|
||||||
import { ButtonPrimary } from 'components/Button'
|
|
||||||
import { AlertCircle, ArrowLeft } from 'react-feather'
|
|
||||||
import styled from 'styled-components/macro'
|
|
||||||
import { CloseIcon, ThemedText } from 'theme'
|
|
||||||
|
|
||||||
import TokenImportCard from './TokenImportCard'
|
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
`
|
|
||||||
const Button = styled(ButtonPrimary)`
|
|
||||||
margin-top: 1em;
|
|
||||||
padding: 10px 1em;
|
|
||||||
`
|
|
||||||
const Content = styled.div`
|
|
||||||
padding: 1em;
|
|
||||||
`
|
|
||||||
const Copy = styled(ThemedText.DeprecatedBody)`
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 2em 1em !important;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 16px;
|
|
||||||
`
|
|
||||||
const Header = styled.div`
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
gap: 14px;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 20px;
|
|
||||||
width: 100%;
|
|
||||||
`
|
|
||||||
const Icon = styled(AlertCircle)`
|
|
||||||
stroke: ${({ theme }) => theme.deprecated_text2};
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
`
|
|
||||||
interface BlockedTokenProps {
|
|
||||||
onBack: (() => void) | undefined
|
|
||||||
onDismiss: (() => void) | undefined
|
|
||||||
blockedTokens: Token[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const BlockedToken = ({ onBack, onDismiss, blockedTokens }: BlockedTokenProps) => (
|
|
||||||
<Wrapper>
|
|
||||||
<Header>
|
|
||||||
{onBack ? <ArrowLeft style={{ cursor: 'pointer' }} onClick={onBack} /> : <div />}
|
|
||||||
<ThemedText.DeprecatedMediumHeader>
|
|
||||||
<Trans>Token not supported</Trans>
|
|
||||||
</ThemedText.DeprecatedMediumHeader>
|
|
||||||
{onDismiss ? <CloseIcon onClick={onDismiss} /> : <div />}
|
|
||||||
</Header>
|
|
||||||
<Icon />
|
|
||||||
<Content>
|
|
||||||
<Copy>
|
|
||||||
<Trans>This token is not supported in the Uniswap Labs app</Trans>
|
|
||||||
</Copy>
|
|
||||||
<TokenImportCard token={blockedTokens[0]} />
|
|
||||||
<Button disabled>
|
|
||||||
<Trans>Import</Trans>
|
|
||||||
</Button>
|
|
||||||
</Content>
|
|
||||||
</Wrapper>
|
|
||||||
)
|
|
||||||
export default BlockedToken
|
|
||||||
@ -1,106 +0,0 @@
|
|||||||
import { Trans } from '@lingui/macro'
|
|
||||||
import { Token } from '@uniswap/sdk-core'
|
|
||||||
import { ButtonPrimary } from 'components/Button'
|
|
||||||
import { AutoColumn } from 'components/Column'
|
|
||||||
import CurrencyLogo from 'components/CurrencyLogo'
|
|
||||||
import ListLogo from 'components/ListLogo'
|
|
||||||
import { AutoRow, RowFixed } from 'components/Row'
|
|
||||||
import { useIsTokenActive, useIsUserAddedToken } from 'hooks/Tokens'
|
|
||||||
import { CSSProperties } from 'react'
|
|
||||||
import { CheckCircle } from 'react-feather'
|
|
||||||
import styled, { useTheme } from 'styled-components/macro'
|
|
||||||
import { ThemedText } from 'theme'
|
|
||||||
|
|
||||||
import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
|
|
||||||
|
|
||||||
const TokenSection = styled.div<{ dim?: boolean }>`
|
|
||||||
padding: 4px 20px;
|
|
||||||
height: 56px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto minmax(auto, 1fr) auto;
|
|
||||||
grid-gap: 16px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
opacity: ${({ dim }) => (dim ? '0.4' : '1')};
|
|
||||||
`
|
|
||||||
|
|
||||||
const CheckIcon = styled(CheckCircle)`
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
margin-right: 6px;
|
|
||||||
stroke: ${({ theme }) => theme.deprecated_green1};
|
|
||||||
`
|
|
||||||
|
|
||||||
const NameOverflow = styled.div`
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
max-width: 140px;
|
|
||||||
font-size: 12px;
|
|
||||||
`
|
|
||||||
|
|
||||||
export default function ImportRow({
|
|
||||||
token,
|
|
||||||
style,
|
|
||||||
dim,
|
|
||||||
showImportView,
|
|
||||||
setImportToken,
|
|
||||||
}: {
|
|
||||||
token: Token
|
|
||||||
style?: CSSProperties
|
|
||||||
dim?: boolean
|
|
||||||
showImportView: () => void
|
|
||||||
setImportToken: (token: Token) => void
|
|
||||||
}) {
|
|
||||||
const theme = useTheme()
|
|
||||||
|
|
||||||
// check if already active on list or local storage tokens
|
|
||||||
const isAdded = useIsUserAddedToken(token)
|
|
||||||
const isActive = useIsTokenActive(token)
|
|
||||||
|
|
||||||
const list = token instanceof WrappedTokenInfo ? token.list : undefined
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TokenSection tabIndex={0} style={style}>
|
|
||||||
<CurrencyLogo currency={token} size={'24px'} style={{ opacity: dim ? '0.6' : '1' }} />
|
|
||||||
<AutoColumn gap="4px" style={{ opacity: dim ? '0.6' : '1' }}>
|
|
||||||
<AutoRow>
|
|
||||||
<ThemedText.DeprecatedBody fontWeight={500}>{token.symbol}</ThemedText.DeprecatedBody>
|
|
||||||
<ThemedText.DeprecatedDarkGray ml="8px" fontWeight={300}>
|
|
||||||
<NameOverflow title={token.name}>{token.name}</NameOverflow>
|
|
||||||
</ThemedText.DeprecatedDarkGray>
|
|
||||||
</AutoRow>
|
|
||||||
{list && list.logoURI && (
|
|
||||||
<RowFixed>
|
|
||||||
<ThemedText.DeprecatedSmall mr="4px" color={theme.deprecated_text3}>
|
|
||||||
<Trans>via {list.name} </Trans>
|
|
||||||
</ThemedText.DeprecatedSmall>
|
|
||||||
<ListLogo logoURI={list.logoURI} size="12px" />
|
|
||||||
</RowFixed>
|
|
||||||
)}
|
|
||||||
</AutoColumn>
|
|
||||||
{!isActive && !isAdded ? (
|
|
||||||
<ButtonPrimary
|
|
||||||
width="fit-content"
|
|
||||||
padding="6px 12px"
|
|
||||||
fontWeight={500}
|
|
||||||
fontSize="14px"
|
|
||||||
onClick={() => {
|
|
||||||
setImportToken && setImportToken(token)
|
|
||||||
showImportView()
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Trans>Import</Trans>
|
|
||||||
</ButtonPrimary>
|
|
||||||
) : (
|
|
||||||
<RowFixed style={{ minWidth: 'fit-content' }}>
|
|
||||||
<CheckIcon />
|
|
||||||
<ThemedText.DeprecatedMain color={theme.deprecated_green1}>
|
|
||||||
<Trans>Active</Trans>
|
|
||||||
</ThemedText.DeprecatedMain>
|
|
||||||
</RowFixed>
|
|
||||||
)}
|
|
||||||
</TokenSection>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,100 +0,0 @@
|
|||||||
import { Plural, Trans } from '@lingui/macro'
|
|
||||||
import { Currency, Token } from '@uniswap/sdk-core'
|
|
||||||
import { TokenList } from '@uniswap/token-lists'
|
|
||||||
import { ElementName, Event, EventName } from 'analytics/constants'
|
|
||||||
import { TraceEvent } from 'analytics/TraceEvent'
|
|
||||||
import { ButtonPrimary } from 'components/Button'
|
|
||||||
import { AutoColumn } from 'components/Column'
|
|
||||||
import { RowBetween } from 'components/Row'
|
|
||||||
import { SectionBreak } from 'components/swap/styleds'
|
|
||||||
import { useUnsupportedTokens } from 'hooks/Tokens'
|
|
||||||
import { AlertCircle, ArrowLeft } from 'react-feather'
|
|
||||||
import { useAddUserToken } from 'state/user/hooks'
|
|
||||||
import styled, { useTheme } from 'styled-components/macro'
|
|
||||||
import { CloseIcon, ThemedText } from 'theme'
|
|
||||||
|
|
||||||
import BlockedToken from './BlockedToken'
|
|
||||||
import { PaddedColumn } from './styleds'
|
|
||||||
import TokenImportCard from './TokenImportCard'
|
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
`
|
|
||||||
|
|
||||||
interface ImportProps {
|
|
||||||
tokens: Token[]
|
|
||||||
list?: TokenList
|
|
||||||
onBack?: () => void
|
|
||||||
onDismiss?: () => void
|
|
||||||
handleCurrencySelect?: (currency: Currency) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const formatAnalyticsEventProperties = (tokens: Token[]) => ({
|
|
||||||
token_symbols: tokens.map((token) => token?.symbol),
|
|
||||||
token_addresses: tokens.map((token) => token?.address),
|
|
||||||
token_chain_ids: tokens.map((token) => token?.chainId),
|
|
||||||
})
|
|
||||||
|
|
||||||
export function ImportToken(props: ImportProps) {
|
|
||||||
const { tokens, list, onBack, onDismiss, handleCurrencySelect } = props
|
|
||||||
const theme = useTheme()
|
|
||||||
|
|
||||||
const addToken = useAddUserToken()
|
|
||||||
|
|
||||||
const unsupportedTokens = useUnsupportedTokens()
|
|
||||||
const unsupportedSet = new Set(Object.keys(unsupportedTokens))
|
|
||||||
const intersection = new Set(tokens.filter((token) => unsupportedSet.has(token.address)))
|
|
||||||
if (intersection.size > 0) {
|
|
||||||
return <BlockedToken onBack={onBack} onDismiss={onDismiss} blockedTokens={Array.from(intersection)} />
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Wrapper>
|
|
||||||
<PaddedColumn gap="14px" style={{ width: '100%', flex: '1 1' }}>
|
|
||||||
<RowBetween>
|
|
||||||
{onBack ? <ArrowLeft style={{ cursor: 'pointer' }} onClick={onBack} /> : <div />}
|
|
||||||
<ThemedText.DeprecatedMediumHeader>
|
|
||||||
<Plural value={tokens.length} _1="Import token" other="Import tokens" />
|
|
||||||
</ThemedText.DeprecatedMediumHeader>
|
|
||||||
{onDismiss ? <CloseIcon onClick={onDismiss} /> : <div />}
|
|
||||||
</RowBetween>
|
|
||||||
</PaddedColumn>
|
|
||||||
<SectionBreak />
|
|
||||||
<AutoColumn gap="md" style={{ marginBottom: '32px', padding: '1rem' }}>
|
|
||||||
<AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', padding: '1rem' }}>
|
|
||||||
<AlertCircle size={48} stroke={theme.deprecated_text2} strokeWidth={1} />
|
|
||||||
<ThemedText.DeprecatedBody fontWeight={400} fontSize={16}>
|
|
||||||
<Trans>
|
|
||||||
This token doesn't appear on the active token list(s). Make sure this is the token that you want to
|
|
||||||
trade.
|
|
||||||
</Trans>
|
|
||||||
</ThemedText.DeprecatedBody>
|
|
||||||
</AutoColumn>
|
|
||||||
{tokens.map((token) => (
|
|
||||||
<TokenImportCard token={token} list={list} key={'import' + token.address} />
|
|
||||||
))}
|
|
||||||
<TraceEvent
|
|
||||||
events={[Event.onClick]}
|
|
||||||
name={EventName.TOKEN_IMPORTED}
|
|
||||||
properties={formatAnalyticsEventProperties(tokens)}
|
|
||||||
element={ElementName.IMPORT_TOKEN_BUTTON}
|
|
||||||
>
|
|
||||||
<ButtonPrimary
|
|
||||||
altDisabledStyle={true}
|
|
||||||
$borderRadius="20px"
|
|
||||||
padding="10px 1rem"
|
|
||||||
onClick={() => {
|
|
||||||
tokens.map((token) => addToken(token))
|
|
||||||
handleCurrencySelect && handleCurrencySelect(tokens[0])
|
|
||||||
}}
|
|
||||||
className=".token-dismiss-button"
|
|
||||||
>
|
|
||||||
<Trans>Import</Trans>
|
|
||||||
</ButtonPrimary>
|
|
||||||
</TraceEvent>
|
|
||||||
</AutoColumn>
|
|
||||||
</Wrapper>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
import { Trans } from '@lingui/macro'
|
|
||||||
import { Token } from '@uniswap/sdk-core'
|
|
||||||
import { useWeb3React } from '@web3-react/core'
|
|
||||||
import Card from 'components/Card'
|
|
||||||
import Column from 'components/Column'
|
|
||||||
import CurrencyLogo from 'components/CurrencyLogo'
|
|
||||||
import Row, { RowBetween, RowFixed } from 'components/Row'
|
|
||||||
import { useToken } from 'hooks/Tokens'
|
|
||||||
import { ChangeEvent, RefObject, useCallback, useMemo, useRef, useState } from 'react'
|
|
||||||
import { useRemoveUserAddedToken, useUserAddedTokens } from 'state/user/hooks'
|
|
||||||
import styled, { useTheme } from 'styled-components/macro'
|
|
||||||
import { ButtonText, ExternalLink, ExternalLinkIcon, ThemedText, TrashIcon } from 'theme'
|
|
||||||
import { isAddress } from 'utils'
|
|
||||||
|
|
||||||
import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
|
|
||||||
import { CurrencyModalView } from './CurrencySearchModal'
|
|
||||||
import ImportRow from './ImportRow'
|
|
||||||
import { PaddedColumn, SearchInput, Separator } from './styleds'
|
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 60px);
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 80px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const Footer = styled.div`
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 20px;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-top: 1px solid ${({ theme }) => theme.deprecated_bg3};
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
`
|
|
||||||
|
|
||||||
export default function ManageTokens({
|
|
||||||
setModalView,
|
|
||||||
setImportToken,
|
|
||||||
}: {
|
|
||||||
setModalView: (view: CurrencyModalView) => void
|
|
||||||
setImportToken: (token: Token) => void
|
|
||||||
}) {
|
|
||||||
const { chainId } = useWeb3React()
|
|
||||||
|
|
||||||
const [searchQuery, setSearchQuery] = useState<string>('')
|
|
||||||
const theme = useTheme()
|
|
||||||
|
|
||||||
// manage focus on modal show
|
|
||||||
const inputRef = useRef<HTMLInputElement>()
|
|
||||||
const handleInput = useCallback((event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const input = event.target.value
|
|
||||||
const checksummedInput = isAddress(input)
|
|
||||||
setSearchQuery(checksummedInput || input)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
// if they input an address, use it
|
|
||||||
const isAddressSearch = isAddress(searchQuery)
|
|
||||||
const searchToken = useToken(searchQuery)
|
|
||||||
|
|
||||||
// all tokens for local lisr
|
|
||||||
const userAddedTokens: Token[] = useUserAddedTokens()
|
|
||||||
const removeToken = useRemoveUserAddedToken()
|
|
||||||
|
|
||||||
const handleRemoveAll = useCallback(() => {
|
|
||||||
if (chainId && userAddedTokens) {
|
|
||||||
userAddedTokens.map((token) => {
|
|
||||||
return removeToken(chainId, token.address)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}, [removeToken, userAddedTokens, chainId])
|
|
||||||
|
|
||||||
const tokenList = useMemo(() => {
|
|
||||||
return (
|
|
||||||
chainId &&
|
|
||||||
userAddedTokens.map((token) => (
|
|
||||||
<RowBetween key={token.address} width="100%">
|
|
||||||
<RowFixed>
|
|
||||||
<CurrencyLogo currency={token} size={'20px'} />
|
|
||||||
<ExternalLink href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)}>
|
|
||||||
<ThemedText.DeprecatedMain ml={'10px'} fontWeight={600}>
|
|
||||||
{token.symbol}
|
|
||||||
</ThemedText.DeprecatedMain>
|
|
||||||
</ExternalLink>
|
|
||||||
</RowFixed>
|
|
||||||
<RowFixed>
|
|
||||||
<TrashIcon onClick={() => removeToken(chainId, token.address)} />
|
|
||||||
<ExternalLinkIcon href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)} />
|
|
||||||
</RowFixed>
|
|
||||||
</RowBetween>
|
|
||||||
))
|
|
||||||
)
|
|
||||||
}, [userAddedTokens, chainId, removeToken])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Wrapper>
|
|
||||||
<Column style={{ width: '100%', height: '100%', flex: '1 1' }}>
|
|
||||||
<PaddedColumn gap="14px">
|
|
||||||
<Row>
|
|
||||||
<SearchInput
|
|
||||||
type="text"
|
|
||||||
id="token-search-input"
|
|
||||||
placeholder={'0x0000'}
|
|
||||||
value={searchQuery}
|
|
||||||
autoComplete="off"
|
|
||||||
ref={inputRef as RefObject<HTMLInputElement>}
|
|
||||||
onChange={handleInput}
|
|
||||||
/>
|
|
||||||
</Row>
|
|
||||||
{searchQuery !== '' && !isAddressSearch && (
|
|
||||||
<ThemedText.DeprecatedError error={true}>
|
|
||||||
<Trans>Enter valid token address</Trans>
|
|
||||||
</ThemedText.DeprecatedError>
|
|
||||||
)}
|
|
||||||
{searchToken && (
|
|
||||||
<Card backgroundColor={theme.deprecated_bg2} padding="10px 0">
|
|
||||||
<ImportRow
|
|
||||||
token={searchToken}
|
|
||||||
showImportView={() => setModalView(CurrencyModalView.importToken)}
|
|
||||||
setImportToken={setImportToken}
|
|
||||||
style={{ height: 'fit-content' }}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</PaddedColumn>
|
|
||||||
<Separator />
|
|
||||||
<PaddedColumn gap="lg" style={{ overflow: 'auto', marginBottom: '10px' }}>
|
|
||||||
<RowBetween>
|
|
||||||
<ThemedText.DeprecatedMain fontWeight={600}>
|
|
||||||
<Trans>{userAddedTokens?.length} Custom Tokens</Trans>
|
|
||||||
</ThemedText.DeprecatedMain>
|
|
||||||
{userAddedTokens.length > 0 && (
|
|
||||||
<ButtonText onClick={handleRemoveAll}>
|
|
||||||
<ThemedText.DeprecatedBlue>
|
|
||||||
<Trans>Clear all</Trans>
|
|
||||||
</ThemedText.DeprecatedBlue>
|
|
||||||
</ButtonText>
|
|
||||||
)}
|
|
||||||
</RowBetween>
|
|
||||||
{tokenList}
|
|
||||||
</PaddedColumn>
|
|
||||||
</Column>
|
|
||||||
<Footer>
|
|
||||||
<ThemedText.DeprecatedDarkGray>
|
|
||||||
<Trans>Tip: Custom tokens are stored locally in your browser</Trans>
|
|
||||||
</ThemedText.DeprecatedDarkGray>
|
|
||||||
</Footer>
|
|
||||||
</Wrapper>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
import { Trans } from '@lingui/macro'
|
|
||||||
import { Token } from '@uniswap/sdk-core'
|
|
||||||
import { TokenList } from '@uniswap/token-lists'
|
|
||||||
import { useWeb3React } from '@web3-react/core'
|
|
||||||
import Card from 'components/Card'
|
|
||||||
import { AutoColumn } from 'components/Column'
|
|
||||||
import CurrencyLogo from 'components/CurrencyLogo'
|
|
||||||
import ListLogo from 'components/ListLogo'
|
|
||||||
import { RowFixed } from 'components/Row'
|
|
||||||
import { transparentize } from 'polished'
|
|
||||||
import { AlertCircle } from 'react-feather'
|
|
||||||
import styled, { useTheme } from 'styled-components/macro'
|
|
||||||
import { ExternalLink, ThemedText } from 'theme'
|
|
||||||
import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
|
|
||||||
|
|
||||||
const WarningWrapper = styled(Card)<{ highWarning: boolean }>`
|
|
||||||
background-color: ${({ theme, highWarning }) =>
|
|
||||||
highWarning ? transparentize(0.8, theme.deprecated_red1) : transparentize(0.8, theme.deprecated_yellow2)};
|
|
||||||
width: fit-content;
|
|
||||||
`
|
|
||||||
|
|
||||||
const AddressText = styled(ThemedText.DeprecatedBlue)`
|
|
||||||
font-size: 12px;
|
|
||||||
word-break: break-all;
|
|
||||||
|
|
||||||
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
|
|
||||||
font-size: 10px;
|
|
||||||
`}
|
|
||||||
`
|
|
||||||
interface TokenImportCardProps {
|
|
||||||
list?: TokenList
|
|
||||||
token: Token
|
|
||||||
}
|
|
||||||
const TokenImportCard = ({ list, token }: TokenImportCardProps) => {
|
|
||||||
const theme = useTheme()
|
|
||||||
const { chainId } = useWeb3React()
|
|
||||||
return (
|
|
||||||
<Card backgroundColor={theme.deprecated_bg2} padding="2rem">
|
|
||||||
<AutoColumn gap="10px" justify="center">
|
|
||||||
<CurrencyLogo currency={token} size={'32px'} />
|
|
||||||
<AutoColumn gap="4px" justify="center">
|
|
||||||
<ThemedText.DeprecatedBody ml="8px" mr="8px" fontWeight={500} fontSize={20}>
|
|
||||||
{token.symbol}
|
|
||||||
</ThemedText.DeprecatedBody>
|
|
||||||
<ThemedText.DeprecatedDarkGray fontWeight={400} fontSize={14}>
|
|
||||||
{token.name}
|
|
||||||
</ThemedText.DeprecatedDarkGray>
|
|
||||||
</AutoColumn>
|
|
||||||
{chainId && (
|
|
||||||
<ExternalLink href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)}>
|
|
||||||
<AddressText fontSize={12}>{token.address}</AddressText>
|
|
||||||
</ExternalLink>
|
|
||||||
)}
|
|
||||||
{list !== undefined ? (
|
|
||||||
<RowFixed>
|
|
||||||
{list.logoURI && <ListLogo logoURI={list.logoURI} size="16px" />}
|
|
||||||
<ThemedText.DeprecatedSmall ml="6px" fontSize={14} color={theme.deprecated_text3}>
|
|
||||||
<Trans>via {list.name} token list</Trans>
|
|
||||||
</ThemedText.DeprecatedSmall>
|
|
||||||
</RowFixed>
|
|
||||||
) : (
|
|
||||||
<WarningWrapper $borderRadius="4px" padding="4px" highWarning={true}>
|
|
||||||
<RowFixed>
|
|
||||||
<AlertCircle stroke={theme.deprecated_red1} size="10px" />
|
|
||||||
<ThemedText.DeprecatedBody color={theme.deprecated_red1} ml="4px" fontSize="10px" fontWeight={500}>
|
|
||||||
<Trans>Unknown Source</Trans>
|
|
||||||
</ThemedText.DeprecatedBody>
|
|
||||||
</RowFixed>
|
|
||||||
</WarningWrapper>
|
|
||||||
)}
|
|
||||||
</AutoColumn>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TokenImportCard
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import { Token } from '@uniswap/sdk-core'
|
|
||||||
import { ImportToken } from 'components/SearchModal/ImportToken'
|
|
||||||
|
|
||||||
import Modal from '../Modal'
|
|
||||||
|
|
||||||
export default function TokenWarningModal({
|
|
||||||
isOpen,
|
|
||||||
tokens,
|
|
||||||
onConfirm,
|
|
||||||
onDismiss,
|
|
||||||
}: {
|
|
||||||
isOpen: boolean
|
|
||||||
tokens: Token[]
|
|
||||||
onConfirm: () => void
|
|
||||||
onDismiss: () => void
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={100}>
|
|
||||||
<ImportToken tokens={tokens} handleCurrencySelect={onConfirm} />
|
|
||||||
</Modal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user