block import of unsupported tokens (#2673)

generalize custom import token block ui

src/components/SearchModal/BlockedToken.tsx

+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, TYPE } 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(TYPE.body)`
+  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.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 />}
+      <TYPE.mediumHeader>
+        <Trans>Token not supported</Trans>
+      </TYPE.mediumHeader>
+      {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

src/components/SearchModal/CurrencySearchModal.tsx

@@ -68,10 +68,10 @@ export default function CurrencySearchModal({
 
   // change min height if not searching
   const minHeight = modalView === CurrencyModalView.importToken || modalView === CurrencyModalView.importList ? 40 : 80
-
-  return (
-    <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={80} minHeight={minHeight}>
-      {modalView === CurrencyModalView.search ? (
+  let content = null
+  switch (modalView) {
+    case CurrencyModalView.search:
+      content = (
         <CurrencySearch
           isOpen={isOpen}
           onDismiss={onDismiss}
@@ -85,19 +85,30 @@ export default function CurrencySearchModal({
           setImportToken={setImportToken}
           showManageView={() => setModalView(CurrencyModalView.manage)}
         />
-      ) : modalView === CurrencyModalView.importToken && importToken ? (
-        <ImportToken
-          tokens={[importToken]}
-          onDismiss={onDismiss}
-          list={importToken instanceof WrappedTokenInfo ? importToken.list : undefined}
-          onBack={() =>
-            setModalView(prevView && prevView !== CurrencyModalView.importToken ? prevView : CurrencyModalView.search)
-          }
-          handleCurrencySelect={handleCurrencySelect}
-        />
-      ) : modalView === CurrencyModalView.importList && importList && listURL ? (
-        <ImportList list={importList} listURL={listURL} onDismiss={onDismiss} setModalView={setModalView} />
-      ) : modalView === CurrencyModalView.manage ? (
+      )
+      break
+    case CurrencyModalView.importToken:
+      if (importToken) {
+        content = (
+          <ImportToken
+            tokens={[importToken]}
+            onDismiss={onDismiss}
+            list={importToken instanceof WrappedTokenInfo ? importToken.list : undefined}
+            onBack={() =>
+              setModalView(prevView && prevView !== CurrencyModalView.importToken ? prevView : CurrencyModalView.search)
+            }
+            handleCurrencySelect={handleCurrencySelect}
+          />
+        )
+      }
+      break
+    case CurrencyModalView.importList:
+      if (importList && listURL) {
+        content = <ImportList list={importList} listURL={listURL} onDismiss={onDismiss} setModalView={setModalView} />
+      }
+      break
+    case CurrencyModalView.manage:
+      content = (
         <Manage
           onDismiss={onDismiss}
           setModalView={setModalView}
@@ -105,9 +116,12 @@ export default function CurrencySearchModal({
           setImportList={setImportList}
           setListUrl={setListUrl}
         />
-      ) : (
-        ''
-      )}
+      )
+      break
+  }
+  return (
+    <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={80} minHeight={minHeight}>
+      {content}
     </Modal>
   )
 }

src/components/SearchModal/ImportToken.tsx

@@ -2,23 +2,19 @@ import { Plural, Trans } from '@lingui/macro'
 import { Currency, Token } from '@uniswap/sdk-core'
 import { TokenList } from '@uniswap/token-lists'
 import { ButtonPrimary } from 'components/Button'
-import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'
-import CurrencyLogo from 'components/CurrencyLogo'
-import ListLogo from 'components/ListLogo'
-import { RowBetween, RowFixed } from 'components/Row'
+import { RowBetween } from 'components/Row'
 import { SectionBreak } from 'components/swap/styleds'
+import { useUnsupportedTokens } from 'hooks/Tokens'
 import useTheme from 'hooks/useTheme'
-import { useActiveWeb3React } from 'hooks/web3'
-import { transparentize } from 'polished'
 import { AlertCircle, ArrowLeft } from 'react-feather'
 import { useAddUserToken } from 'state/user/hooks'
 import styled from 'styled-components/macro'
 import { CloseIcon, TYPE } from 'theme'
 
-import { ExternalLink } from '../../theme/components'
-import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
+import BlockedToken from './BlockedToken'
 import { PaddedColumn } from './styleds'
+import TokenImportCard from './TokenImportCard'
 
 const Wrapper = styled.div`
   position: relative;
@@ -26,21 +22,6 @@ const Wrapper = styled.div`
   overflow: auto;
 `
 
-const WarningWrapper = styled(Card)<{ highWarning: boolean }>`
-  background-color: ${({ theme, highWarning }) =>
-    highWarning ? transparentize(0.8, theme.red1) : transparentize(0.8, theme.yellow2)};
-  width: fit-content;
-`
-
-const AddressText = styled(TYPE.blue)`
-  font-size: 12px;
-  word-break: break-all;
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    font-size: 10px;
-  `}
-`
-
 interface ImportProps {
   tokens: Token[]
   list?: TokenList
@@ -49,13 +30,18 @@ interface ImportProps {
   handleCurrencySelect?: (currency: Currency) => void
 }
 
-export function ImportToken({ tokens, list, onBack, onDismiss, handleCurrencySelect }: ImportProps) {
+export function ImportToken(props: ImportProps) {
+  const { tokens, list, onBack, onDismiss, handleCurrencySelect } = props
   const theme = useTheme()
 
-  const { chainId } = useActiveWeb3React()
-
   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' }}>
@@ -78,52 +64,9 @@ export function ImportToken({ tokens, list, onBack, onDismiss, handleCurrencySel
             </Trans>
           </TYPE.body>
         </AutoColumn>
-        {tokens.map((token) => {
-          return (
-            <Card
-              backgroundColor={theme.bg2}
-              key={'import' + token.address}
-              className=".token-warning-container"
-              padding="2rem"
-            >
-              <AutoColumn gap="10px" justify="center">
-                <CurrencyLogo currency={token} size={'32px'} />
-
-                <AutoColumn gap="4px" justify="center">
-                  <TYPE.body ml="8px" mr="8px" fontWeight={500} fontSize={20}>
-                    {token.symbol}
-                  </TYPE.body>
-                  <TYPE.darkGray fontWeight={400} fontSize={14}>
-                    {token.name}
-                  </TYPE.darkGray>
-                </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" />}
-                    <TYPE.small ml="6px" fontSize={14} color={theme.text3}>
-                      <Trans>via {list.name} token list</Trans>
-                    </TYPE.small>
-                  </RowFixed>
-                ) : (
-                  <WarningWrapper $borderRadius="4px" padding="4px" highWarning={true}>
-                    <RowFixed>
-                      <AlertCircle stroke={theme.red1} size="10px" />
-                      <TYPE.body color={theme.red1} ml="4px" fontSize="10px" fontWeight={500}>
-                        <Trans>Unknown Source</Trans>
-                      </TYPE.body>
-                    </RowFixed>
-                  </WarningWrapper>
-                )}
-              </AutoColumn>
-            </Card>
-          )
-        })}
-
+        {tokens.map((token) => (
+          <TokenImportCard token={token} list={list} key={'import' + token.address} />
+        ))}
         <ButtonPrimary
           altDisabledStyle={true}
           $borderRadius="20px"

src/components/SearchModal/TokenImportCard.tsx

+import { Trans } from '@lingui/macro'
+import { Token } from '@uniswap/sdk-core'
+import { TokenList } from '@uniswap/token-lists'
+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 { useActiveWeb3React } from 'hooks/web3'
+import { transparentize } from 'polished'
+import { AlertCircle } from 'react-feather'
+import styled, { useTheme } from 'styled-components/macro'
+import { ExternalLink, TYPE } from 'theme'
+import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
+
+const WarningWrapper = styled(Card)<{ highWarning: boolean }>`
+  background-color: ${({ theme, highWarning }) =>
+    highWarning ? transparentize(0.8, theme.red1) : transparentize(0.8, theme.yellow2)};
+  width: fit-content;
+`
+
+const AddressText = styled(TYPE.blue)`
+  font-size: 12px;
+  word-break: break-all;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    font-size: 10px;
+  `}
+`
+interface TokenImportCardProps {
+  list?: TokenList
+  token: Token
+}
+const TokenImportCard = ({ list, token }: TokenImportCardProps) => {
+  const theme = useTheme()
+  const { chainId } = useActiveWeb3React()
+  return (
+    <Card backgroundColor={theme.bg2} padding="2rem">
+      <AutoColumn gap="10px" justify="center">
+        <CurrencyLogo currency={token} size={'32px'} />
+        <AutoColumn gap="4px" justify="center">
+          <TYPE.body ml="8px" mr="8px" fontWeight={500} fontSize={20}>
+            {token.symbol}
+          </TYPE.body>
+          <TYPE.darkGray fontWeight={400} fontSize={14}>
+            {token.name}
+          </TYPE.darkGray>
+        </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" />}
+            <TYPE.small ml="6px" fontSize={14} color={theme.text3}>
+              <Trans>via {list.name} token list</Trans>
+            </TYPE.small>
+          </RowFixed>
+        ) : (
+          <WarningWrapper $borderRadius="4px" padding="4px" highWarning={true}>
+            <RowFixed>
+              <AlertCircle stroke={theme.red1} size="10px" />
+              <TYPE.body color={theme.red1} ml="4px" fontSize="10px" fontWeight={500}>
+                <Trans>Unknown Source</Trans>
+              </TYPE.body>
+            </RowFixed>
+          </WarningWrapper>
+        )}
+      </AutoColumn>
+    </Card>
+  )
+}
+
+export default TokenImportCard

src/components/swap/UnsupportedCurrencyFooter.tsx

 import { Trans } from '@lingui/macro'
-import { Currency, Token } from '@uniswap/sdk-core'
+import { Currency } from '@uniswap/sdk-core'
 import { ButtonEmpty } from 'components/Button'
 import Card, { OutlineCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
@@ -62,7 +62,7 @@ export default function UnsupportedCurrencyFooter({
         })
       : []
 
-  const unsupportedTokens: { [address: string]: Token } = useUnsupportedTokens()
+  const unsupportedTokens = useUnsupportedTokens()
 
   return (
     <DetailsFooter show={show}>