fix: blocked tokens not appearing or having icons (#5251)

* fixed blocked tokens not appearing or having icons
* removed previous blocked Icon
* updated snapshot
* changed to slash icon

src/components/ConnectedAccountBlocked/index.tsx

 import { Trans } from '@lingui/macro'
 import Column from 'components/Column'
-import { AlertOctagon } from 'react-feather'
+import { BlockedIcon } from 'components/TokenSafety/TokenSafetyIcon'
 import styled, { useTheme } from 'styled-components/macro'
 import { ExternalLink, ThemedText } from 'theme'
 
@@ -13,11 +13,6 @@ const ContentWrapper = styled(Column)`
   text-align: center;
   font-size: 12px;
 `
-const WarningIcon = styled(AlertOctagon)`
-  min-height: 22px;
-  min-width: 22px;
-  color: ${({ theme }) => theme.deprecated_warning};
-`
 const Copy = styled(CopyHelper)`
   font-size: 12px;
 `
@@ -32,7 +27,7 @@ export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedPr
   return (
     <Modal isOpen={props.isOpen} onDismiss={Function.prototype()}>
       <ContentWrapper>
-        <WarningIcon />
+        <BlockedIcon size="22px" />
         <ThemedText.DeprecatedLargeHeader lineHeight={2} marginBottom={1} marginTop={1}>
           <Trans>Blocked Address</Trans>
         </ThemedText.DeprecatedLargeHeader>

src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap

@@ -2,11 +2,11 @@
 
 exports[`renders currency rows correctly when currencies list is non-empty 1`] = `
 <DocumentFragment>
-  .c9 {
+  .c10 {
   color: #98A1C0;
 }
 
-.c7 {
+.c8 {
   margin-left: 4px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -18,7 +18,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
   justify-content: center;
 }
 
-.c8 {
+.c9 {
   width: 1em;
   height: 1em;
   color: #98A1C0;
@@ -73,7 +73,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
   justify-content: space-between;
 }
 
-.c10 {
+.c11 {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
@@ -100,6 +100,10 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
   text-overflow: ellipsis;
 }
 
+.c7 {
+  margin-left: 0.3em;
+}
+
 <div
     style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
   >
@@ -132,8 +136,11 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             <div
               class="c7"
             >
-              <svg
+              <div
                 class="c8"
+              >
+                <svg
+                  class="c9"
                   fill="none"
                   height="24"
                   stroke="currentColor"
@@ -162,8 +169,9 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
                 </svg>
               </div>
             </div>
+          </div>
           <div
-            class="c9 css-1j6a53a"
+            class="c10 css-1j6a53a"
           >
             DAI
           </div>
@@ -172,7 +180,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
           class="c4"
         >
           <div
-            class="c0 c1 c10"
+            class="c0 c1 c11"
             style="justify-self: flex-end;"
           />
         </div>
@@ -203,8 +211,11 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             <div
               class="c7"
             >
-              <svg
+              <div
                 class="c8"
+              >
+                <svg
+                  class="c9"
                   fill="none"
                   height="24"
                   stroke="currentColor"
@@ -233,8 +244,9 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
                 </svg>
               </div>
             </div>
+          </div>
           <div
-            class="c9 css-1j6a53a"
+            class="c10 css-1j6a53a"
           >
             USDC
           </div>
@@ -243,7 +255,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
           class="c4"
         >
           <div
-            class="c0 c1 c10"
+            class="c0 c1 c11"
             style="justify-self: flex-end;"
           />
         </div>
@@ -274,8 +286,11 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             <div
               class="c7"
             >
-              <svg
+              <div
                 class="c8"
+              >
+                <svg
+                  class="c9"
                   fill="none"
                   height="24"
                   stroke="currentColor"
@@ -304,8 +319,9 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
                 </svg>
               </div>
             </div>
+          </div>
           <div
-            class="c9 css-1j6a53a"
+            class="c10 css-1j6a53a"
           >
             WBTC
           </div>
@@ -314,7 +330,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
           class="c4"
         >
           <div
-            class="c0 c1 c10"
+            class="c0 c1 c11"
             style="justify-self: flex-end;"
           />
         </div>

src/components/SearchModal/CurrencyList/index.tsx

@@ -5,7 +5,6 @@ import { useWeb3React } from '@web3-react/core'
 import TokenSafetyIcon from 'components/TokenSafety/TokenSafetyIcon'
 import { checkWarning } from 'constants/tokenSafety'
 import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
-import { XOctagon } from 'react-feather'
 import { Check } from 'react-feather'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
@@ -61,10 +60,8 @@ const Tag = styled.div`
   margin-right: 4px;
 `
 
-export const BlockedTokenIcon = styled(XOctagon)<{ size?: string }>`
+export const WarningContainer = styled.div`
   margin-left: 0.3em;
-  width: 1em;
-  height: 1em;
 `
 
 function Balance({ balance }: { balance: CurrencyAmount<Currency> }) {
@@ -158,8 +155,9 @@ export function CurrencyRow({
         <AutoColumn style={{ opacity: isBlockedToken ? blockedTokenOpacity : '1' }}>
           <Row>
             <CurrencyName title={currency.name}>{currency.name}</CurrencyName>
+            <WarningContainer>
               <TokenSafetyIcon warning={warning} />
-            {isBlockedToken && <BlockedTokenIcon />}
+            </WarningContainer>
           </Row>
           <ThemedText.DeprecatedDarkGray ml="0px" fontSize="12px" fontWeight={300}>
             {currency.symbol}

src/components/TokenSafety/TokenSafetyIcon.tsx

 import { Warning, WARNING_LEVEL } from 'constants/tokenSafety'
-import { AlertTriangle } from 'react-feather'
-import styled from 'styled-components/macro'
+import { AlertTriangle, Slash } from 'react-feather'
+import styled, { css } from 'styled-components/macro'
 
-const VerifiedContainer = styled.div`
+const WarningContainer = styled.div`
   margin-left: 4px;
   display: flex;
   justify-content: center;
 `
 
-export const WarningIcon = styled(AlertTriangle)<{ size?: string }>`
+const WarningIconStyle = css<{ size?: string }>`
   width: ${({ size }) => size ?? '1em'};
   height: ${({ size }) => size ?? '1em'};
+`
+
+const WarningIcon = styled(AlertTriangle)`
+  ${WarningIconStyle};
   color: ${({ theme }) => theme.textTertiary};
 `
 
+export const BlockedIcon = styled(Slash)`
+  ${WarningIconStyle}
+  color: ${({ theme }) => theme.textSecondary};
+`
+
 export default function TokenSafetyIcon({ warning }: { warning: Warning | null }) {
-  if (warning?.level !== WARNING_LEVEL.UNKNOWN) return null
+  switch (warning?.level) {
+    case WARNING_LEVEL.BLOCKED:
+      return (
+        <WarningContainer>
+          <BlockedIcon strokeWidth={2.5} />
+        </WarningContainer>
+      )
+    case WARNING_LEVEL.UNKNOWN:
       return (
-    <VerifiedContainer>
+        <WarningContainer>
           <WarningIcon />
-    </VerifiedContainer>
+        </WarningContainer>
       )
+    default:
+      return null
+  }
 }

src/components/TokenSafety/TokenSafetyLabel.tsx

 import { WARNING_LEVEL } from 'constants/tokenSafety'
 import { useTokenWarningColor } from 'hooks/useTokenWarningColor'
 import { ReactNode } from 'react'
-import { AlertOctagon, AlertTriangle } from 'react-feather'
+import { AlertTriangle, Slash } from 'react-feather'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 
@@ -30,7 +30,7 @@ export default function TokenSafetyLabel({ level, canProceed, children }: TokenW
   return (
     <Label color={useTokenWarningColor(level)}>
       <Title marginRight="5px">{children}</Title>
-      {canProceed ? <AlertTriangle strokeWidth={2.5} size="14px" /> : <AlertOctagon strokeWidth={2.5} size="14px" />}
+      {canProceed ? <AlertTriangle strokeWidth={2.5} size="14px" /> : <Slash strokeWidth={2.5} size="14px" />}
     </Label>
   )
 }

src/components/TokenSafety/TokenSafetyMessage.tsx

 import { Trans } from '@lingui/macro'
 import { getWarningCopy, TOKEN_SAFETY_ARTICLE, Warning } from 'constants/tokenSafety'
 import { useTokenWarningColor } from 'hooks/useTokenWarningColor'
-import { AlertOctagon, AlertTriangle } from 'react-feather'
+import { AlertTriangle, Slash } from 'react-feather'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import { ExternalLink } from 'theme'
@@ -51,7 +51,7 @@ export default function TokenWarningMessage({ warning, tokenAddress }: TokenWarn
   return (
     <Label color={color}>
       <TitleRow>
-        {warning.canProceed ? <AlertTriangle size="16px" /> : <AlertOctagon size="16px" />}
+        {warning.canProceed ? <AlertTriangle size="16px" /> : <Slash size="16px" />}
         <Title marginLeft="7px">{warning.message}</Title>
       </TitleRow>
 

src/constants/lists.ts

@@ -34,13 +34,7 @@ export const DEFAULT_INACTIVE_LIST_URLS: string[] = [
   ARBITRUM_LIST,
   OPTIMISM_LIST,
   CELO_LIST,
+  ...UNSUPPORTED_LIST_URLS,
 ]
 
-// this is the default list of lists that are exposed to users
-// lower index == higher priority for token import
-const DEFAULT_LIST_OF_LISTS_TO_DISPLAY: string[] = [...DEFAULT_ACTIVE_LIST_URLS, ...DEFAULT_INACTIVE_LIST_URLS]
-
-export const DEFAULT_LIST_OF_LISTS: string[] = [
-  ...DEFAULT_LIST_OF_LISTS_TO_DISPLAY,
-  ...UNSUPPORTED_LIST_URLS, // need to load dynamic unsupported tokens as well
-]
+export const DEFAULT_LIST_OF_LISTS: string[] = [...DEFAULT_ACTIVE_LIST_URLS, ...DEFAULT_INACTIVE_LIST_URLS]

src/constants/tokenSafety.tsx

@@ -54,7 +54,7 @@ export function getWarningCopy(warning: Warning | null, plural = false) {
 export type Warning = {
   level: WARNING_LEVEL
   message: JSX.Element
-  /* canProceed determines whether triangle/octagon alert icon is used, and
+  /* canProceed determines whether triangle/slash alert icon is used, and
     whether this token is supported/able to be traded */
   canProceed: boolean
 }