Updated message on unsupported tokens (Uniswap#350)

* add pageview hits * Fix code style issues with ESLint * update undefined values and add Tik Tok to blacklist * Fix code style issues with ESLint * update message on token page * Fix code style issues with ESLint Co-authored-by: Lint Action <[email protected]>
calebpara · Feb 7, 2021 · 98dcb42 · 98dcb42
1 parent fa69d28
commit 98dcb42
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 24 deletions.
diff --git a/src/App.js b/src/App.js
@@ -15,7 +15,7 @@ import PinnedData from './components/PinnedData'
 
 import SideNav from './components/SideNav'
 import AccountLookup from './pages/AccountLookup'
-import { OVERVIEW_TOKEN_BLACKLIST, PAIR_BLACKLIST } from './constants'
+import { PAIR_BLACKLIST } from './constants'
 import LocalLoader from './components/LocalLoader'
 import { useLatestBlocks } from './contexts/Application'
 import GoogleAnalyticsReporter from './components/analytics/GoogleAnalyticsReporter'
@@ -127,9 +127,6 @@ function App() {
                 strict
                 path="/token/:tokenAddress"
                 render={({ match }) => {
-                  if (OVERVIEW_TOKEN_BLACKLIST.includes(match.params.tokenAddress.toLowerCase())) {
-                    return <Redirect to="/home" />
-                  }
                   if (isAddress(match.params.tokenAddress.toLowerCase())) {
                     return (
                       <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>

diff --git a/src/components/PairList/index.js b/src/components/PairList/index.js
@@ -14,6 +14,7 @@ import DoubleTokenLogo from '../DoubleLogo'
 import FormattedName from '../FormattedName'
 import QuestionHelper from '../QuestionHelper'
 import { TYPE } from '../../Theme'
+import { PAIR_BLACKLIST } from '../../constants'
 
 dayjs.extend(utc)
 
@@ -208,7 +209,9 @@ function PairList({ pairs, color, disbaleLinks, maxItems = 10, useTracked = fals
   const pairList =
     pairs &&
     Object.keys(pairs)
-      .filter((address) => (useTracked ? !!pairs[address]?.trackedReserveUSD : true))
+      .filter(
+        (address) => !PAIR_BLACKLIST.includes(address) && (useTracked ? !!pairs[address]?.trackedReserveUSD : true)
+      )
       .sort((addressA, addressB) => {
         const pairA = pairs[addressA]
         const pairB = pairs[addressB]

diff --git a/src/components/Search/index.js b/src/components/Search/index.js
@@ -11,7 +11,7 @@ import { useAllPairData, usePairData } from '../../contexts/PairData'
 import DoubleTokenLogo from '../DoubleLogo'
 import { useMedia } from 'react-use'
 import { useAllPairsInUniswap, useAllTokensInUniswap } from '../../contexts/GlobalData'
-import { OVERVIEW_TOKEN_BLACKLIST, PAIR_BLACKLIST } from '../../constants'
+import { TOKEN_BLACKLIST, PAIR_BLACKLIST } from '../../constants'
 
 import { transparentize } from 'polished'
 import { client } from '../../apollo/client'
@@ -274,12 +274,6 @@ export const Search = ({ small = false }) => {
     return uniqueTokens
       ? uniqueTokens
           .sort((a, b) => {
-            if (OVERVIEW_TOKEN_BLACKLIST.includes(a.id)) {
-              return 1
-            }
-            if (OVERVIEW_TOKEN_BLACKLIST.includes(b.id)) {
-              return -1
-            }
             const tokenA = allTokenData[a.id]
             const tokenB = allTokenData[b.id]
             if (tokenA?.oneDayVolumeUSD && tokenB?.oneDayVolumeUSD) {
@@ -294,7 +288,7 @@ export const Search = ({ small = false }) => {
             return 1
           })
           .filter((token) => {
-            if (OVERVIEW_TOKEN_BLACKLIST.includes(token.id)) {
+            if (TOKEN_BLACKLIST.includes(token.id)) {
               return false
             }
             const regexMatches = Object.keys(token).map((tokenEntryKey) => {

diff --git a/src/components/TokenList/index.js b/src/components/TokenList/index.js
@@ -12,7 +12,7 @@ import { Divider } from '..'
 import { formattedNum, formattedPercent } from '../../utils'
 import { useMedia } from 'react-use'
 import { withRouter } from 'react-router-dom'
-import { OVERVIEW_TOKEN_BLACKLIST } from '../../constants'
+import { TOKEN_BLACKLIST } from '../../constants'
 import FormattedName from '../FormattedName'
 import { TYPE } from '../../Theme'
 
@@ -145,7 +145,7 @@ function TopTokenList({ tokens, itemMax = 10, useTracked = false }) {
       tokens &&
       Object.keys(tokens)
         .filter((key) => {
-          return !OVERVIEW_TOKEN_BLACKLIST.includes(key)
+          return !TOKEN_BLACKLIST.includes(key)
         })
         .map((key) => tokens[key])
     )

diff --git a/src/constants/index.js b/src/constants/index.js
@@ -17,15 +17,25 @@ export const SUPPORTED_LIST_URLS__NO_ENS = [
 ]
 
 // hide from overview list
-export const OVERVIEW_TOKEN_BLACKLIST = [
+export const TOKEN_BLACKLIST = [
   '0x495c7f3a713870f68f8b418b355c085dfdc412c3',
   '0xc3761eb917cd790b30dad99f6cc5b4ff93c4f9ea',
   '0xe31debd7abff90b06bca21010dd860d8701fd901',
   '0xfc989fbb6b3024de5ca0144dc23c18a063942ac1',
+  '0xf4eda77f0b455a12f3eb44f8653835f377e36b76',
 ]
 
 // pair blacklist
-export const PAIR_BLACKLIST = ['0xb6a741f37d6e455ebcc9f17e2c16d0586c3f57a5']
+export const PAIR_BLACKLIST = [
+  '0xb6a741f37d6e455ebcc9f17e2c16d0586c3f57a5',
+  '0x97cb8cbe91227ba87fc21aaf52c4212d245da3f8',
+]
+
+// warnings to display if page contains info about blocked token
+export const BLOCKED_WARNINGS = {
+  '0xf4eda77f0b455a12f3eb44f8653835f377e36b76':
+    'TikTok Inc. has asserted this token is violating its trademarks and therefore is not available.',
+}
 
 /**
  * For tokens that cause erros on fee calculations

diff --git a/src/pages/GlobalPage.js b/src/pages/GlobalPage.js
@@ -84,9 +84,9 @@ function GlobalPage() {
                       </RowBetween>
                       <RowBetween align="flex-end">
                         <TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={600}>
-                          {formattedNum(oneDayVolumeUSD, true)}
+                          {oneDayVolumeUSD ? formattedNum(oneDayVolumeUSD, true) : '-'}
                         </TYPE.main>
-                        <TYPE.main fontSize={12}>{formattedPercent(volumeChangeUSD)}</TYPE.main>
+                        <TYPE.main fontSize={12}>{volumeChangeUSD ? formattedPercent(volumeChangeUSD) : '-'}</TYPE.main>
                       </RowBetween>
                     </AutoColumn>
                     <AutoColumn gap="20px">
@@ -96,9 +96,11 @@ function GlobalPage() {
                       </RowBetween>
                       <RowBetween align="flex-end">
                         <TYPE.main fontSize={'1.5rem'} lineHeight={1} fontWeight={600}>
-                          {formattedNum(totalLiquidityUSD, true)}
+                          {totalLiquidityUSD ? formattedNum(totalLiquidityUSD, true) : '-'}
+                        </TYPE.main>
+                        <TYPE.main fontSize={12}>
+                          {liquidityChangeUSD ? formattedPercent(liquidityChangeUSD) : '-'}
                         </TYPE.main>
-                        <TYPE.main fontSize={12}>{formattedPercent(liquidityChangeUSD)}</TYPE.main>
                       </RowBetween>
                     </AutoColumn>
                   </AutoColumn>

diff --git a/src/pages/TokenPage.js b/src/pages/TokenPage.js
@@ -31,9 +31,10 @@ import { PlusCircle, Bookmark, AlertCircle } from 'react-feather'
 import FormattedName from '../components/FormattedName'
 import { useListedTokens } from '../contexts/Application'
 import HoverText from '../components/HoverText'
-import { UNTRACKED_COPY } from '../constants'
+import { UNTRACKED_COPY, TOKEN_BLACKLIST, BLOCKED_WARNINGS } from '../constants'
 import QuestionHelper from '../components/QuestionHelper'
 import Checkbox from '../components/Checkbox'
+import { shortenAddress } from '../utils'
 
 const DashboardWrapper = styled.div`
   width: 100%;
@@ -170,6 +171,41 @@ function TokenPage({ address, history }) {
 
   const [useTracked, setUseTracked] = useState(true)
 
+  const BlockedWrapper = styled.div`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `
+
+  const BlockedMessageWrapper = styled.div`
+    border: 1px solid ${({ theme }) => theme.text3};
+    border-radius: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    max-width: 80%;
+  `
+
+  if (TOKEN_BLACKLIST.includes(address)) {
+    return (
+      <BlockedWrapper>
+        <BlockedMessageWrapper>
+          <AutoColumn gap="1rem" justify="center">
+            <TYPE.light style={{ textAlign: 'center' }}>
+              {BLOCKED_WARNINGS[address] ?? `This token is not supported.`}
+            </TYPE.light>
+            <Link external={true} href={'https://etherscan.io/address/' + address}>{`More about ${shortenAddress(
+              address
+            )}`}</Link>
+          </AutoColumn>
+        </BlockedMessageWrapper>
+      </BlockedWrapper>
+    )
+  }
+
   return (
     <PageWrapper>
       <ThemedBackground backgroundColor={transparentize(0.6, backgroundColor)} />
@@ -184,7 +220,6 @@ function TokenPage({ address, history }) {
           <AutoRow align="flex-end" style={{ width: 'fit-content' }}>
             <TYPE.body>
               <BasicLink to="/tokens">{'Tokens '}</BasicLink>→ {symbol}
-              {'  '}
             </TYPE.body>
             <Link
               style={{ width: 'fit-content' }}
@@ -199,7 +234,6 @@ function TokenPage({ address, history }) {
           </AutoRow>
           {!below600 && <Search small={true} />}
         </RowBetween>
-
         <WarningGrouping disabled={!dismissed && listedTokens && !listedTokens.includes(address)}>
           <DashboardWrapper style={{ marginTop: below1080 ? '0' : '1rem' }}>
             <RowBetween

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -87,6 +87,15 @@ export const toNiceDate = (date) => {
   return x
 }
 
+// shorten the checksummed version of the input address to have 0x + 4 characters at start and end
+export function shortenAddress(address, chars = 4) {
+  const parsed = isAddress(address)
+  if (!parsed) {
+    throw Error(`Invalid 'address' parameter '${address}'.`)
+  }
+  return `${parsed.substring(0, chars + 2)}...${parsed.substring(42 - chars)}`
+}
+
 export const toWeeklyDate = (date) => {
   const formatted = dayjs.utc(dayjs.unix(date))
   date = new Date(formatted)