diff --git a/src/components/ListLogo/index.tsx b/src/components/ListLogo/index.tsx deleted file mode 100644 index e337ee0602..0000000000 --- a/src/components/ListLogo/index.tsx +++ /dev/null @@ -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 -} diff --git a/src/components/SearchModal/BlockedToken.tsx b/src/components/SearchModal/BlockedToken.tsx deleted file mode 100644 index 358ca3e8bb..0000000000 --- a/src/components/SearchModal/BlockedToken.tsx +++ /dev/null @@ -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) => ( - -
- {onBack ? :
} - - Token not supported - - {onDismiss ? :
} -
- - - - This token is not supported in the Uniswap Labs app - - - - -
-) -export default BlockedToken diff --git a/src/components/SearchModal/ImportRow.tsx b/src/components/SearchModal/ImportRow.tsx deleted file mode 100644 index e241243e1c..0000000000 --- a/src/components/SearchModal/ImportRow.tsx +++ /dev/null @@ -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 ( - - - - - {token.symbol} - - {token.name} - - - {list && list.logoURI && ( - - - via {list.name} - - - - )} - - {!isActive && !isAdded ? ( - { - setImportToken && setImportToken(token) - showImportView() - }} - > - Import - - ) : ( - - - - Active - - - )} - - ) -} diff --git a/src/components/SearchModal/ImportToken.tsx b/src/components/SearchModal/ImportToken.tsx deleted file mode 100644 index 62de526b66..0000000000 --- a/src/components/SearchModal/ImportToken.tsx +++ /dev/null @@ -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 - } - - return ( - - - - {onBack ? :
} - - - - {onDismiss ? :
} - - - - - - - - - This token doesn't appear on the active token list(s). Make sure this is the token that you want to - trade. - - - - {tokens.map((token) => ( - - ))} - - { - tokens.map((token) => addToken(token)) - handleCurrencySelect && handleCurrencySelect(tokens[0]) - }} - className=".token-dismiss-button" - > - Import - - - - - ) -} diff --git a/src/components/SearchModal/ManageTokens.tsx b/src/components/SearchModal/ManageTokens.tsx deleted file mode 100644 index ab6f43ccfc..0000000000 --- a/src/components/SearchModal/ManageTokens.tsx +++ /dev/null @@ -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('') - const theme = useTheme() - - // manage focus on modal show - const inputRef = useRef() - const handleInput = useCallback((event: ChangeEvent) => { - 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) => ( - - - - - - {token.symbol} - - - - - removeToken(chainId, token.address)} /> - - - - )) - ) - }, [userAddedTokens, chainId, removeToken]) - - return ( - - - - - } - onChange={handleInput} - /> - - {searchQuery !== '' && !isAddressSearch && ( - - Enter valid token address - - )} - {searchToken && ( - - setModalView(CurrencyModalView.importToken)} - setImportToken={setImportToken} - style={{ height: 'fit-content' }} - /> - - )} - - - - - - {userAddedTokens?.length} Custom Tokens - - {userAddedTokens.length > 0 && ( - - - Clear all - - - )} - - {tokenList} - - -
- - Tip: Custom tokens are stored locally in your browser - -
-
- ) -} diff --git a/src/components/SearchModal/TokenImportCard.tsx b/src/components/SearchModal/TokenImportCard.tsx deleted file mode 100644 index d6ec98826e..0000000000 --- a/src/components/SearchModal/TokenImportCard.tsx +++ /dev/null @@ -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 ( - - - - - - {token.symbol} - - - {token.name} - - - {chainId && ( - - {token.address} - - )} - {list !== undefined ? ( - - {list.logoURI && } - - via {list.name} token list - - - ) : ( - - - - - Unknown Source - - - - )} - - - ) -} - -export default TokenImportCard diff --git a/src/components/TokenWarningModal/index.tsx b/src/components/TokenWarningModal/index.tsx deleted file mode 100644 index 504bcd1d99..0000000000 --- a/src/components/TokenWarningModal/index.tsx +++ /dev/null @@ -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 ( - - - - ) -}