fix: restores styling for verified and blocked tokens (#4753)

* fix

* update snapshot

* add blocked token icon

* repsond to vm

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

@@ -100,6 +100,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
         </div>
         <div
           class="c5"
+          style="opacity: 1;"
         >
           <div
             class="c0 c1"
@@ -138,6 +139,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
         </div>
         <div
           class="c5"
+          style="opacity: 1;"
         >
           <div
             class="c0 c1"
@@ -176,6 +178,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
         </div>
         <div
           class="c5"
+          style="opacity: 1;"
         >
           <div
             class="c0 c1"

src/components/SearchModal/CurrencyList/index.tsx

@@ -3,9 +3,12 @@ import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { ElementName, Event, EventName } from 'analytics/constants'
 import { TraceEvent } from 'analytics/TraceEvent'
+import TokenSafetyIcon from 'components/TokenSafety/TokenSafetyIcon'
 import { checkWarning } from 'constants/tokenSafety'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
+import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/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'
@@ -63,6 +66,12 @@ const Tag = styled.div`
   margin-right: 4px;
 `
 
+export const BlockedTokenIcon = styled(XOctagon)<{ size?: string }>`
+  margin-left: 0.3em;
+  width: 1em;
+  height: 1em;
+`
+
 function Balance({ balance }: { balance: CurrencyAmount<Currency> }) {
   return <StyledBalanceText title={balance.toExact()}>{balance.toSignificant(4)}</StyledBalanceText>
 }
@@ -125,8 +134,10 @@ export function CurrencyRow({
   const customAdded = useIsUserAddedToken(currency)
   const balance = useCurrencyBalance(account ?? undefined, currency)
   const warning = currency.isNative ? null : checkWarning(currency.address)
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
+  const redesignFlagEnabled = useRedesignFlag() === RedesignVariant.Enabled
+  const tokenSafetyFlagEnabled = useTokenSafetyFlag() === TokenSafetyVariant.Enabled
+  const isBlockedToken = !!warning && !warning.canProceed
+  const blockedTokenOpacity = '0.6'
 
   // only show add or remove buttons if not on selected list
   return (
@@ -145,13 +156,20 @@ export function CurrencyRow({
         onClick={() => (isSelected ? null : onSelect(!!warning))}
         disabled={isSelected}
         selected={otherSelected}
+        dim={isBlockedToken}
       >
         <Column>
-          <CurrencyLogo currency={currency} size={'36px'} />
+          <CurrencyLogo
+            currency={currency}
+            size={'36px'}
+            style={{ opacity: isBlockedToken ? blockedTokenOpacity : '1' }}
+          />
         </Column>
-        <AutoColumn>
+        <AutoColumn style={{ opacity: isBlockedToken ? blockedTokenOpacity : '1' }}>
           <Row>
             <CurrencyName title={currency.name}>{currency.name}</CurrencyName>
+            {tokenSafetyFlagEnabled && <TokenSafetyIcon warning={warning} />}
+            {isBlockedToken && <BlockedTokenIcon />}
           </Row>
           <ThemedText.DeprecatedDarkGray ml="0px" fontSize={'12px'} fontWeight={300}>
             {!currency.isNative && !isOnSelectedList && customAdded ? (

src/components/SearchModal/styleds.tsx

@@ -22,7 +22,7 @@ export const PaddedColumn = styled(AutoColumn)`
   padding: 20px;
 `
 
-export const MenuItem = styled(RowBetween)<{ redesignFlag?: boolean }>`
+export const MenuItem = styled(RowBetween)<{ redesignFlag?: boolean; dim?: boolean }>`
   padding: 4px 20px;
   height: 56px;
   display: grid;
@@ -34,7 +34,7 @@ export const MenuItem = styled(RowBetween)<{ redesignFlag?: boolean }>`
     background-color: ${({ theme, disabled, redesignFlag }) =>
       (redesignFlag && theme.hoverDefault) || (!disabled && theme.deprecated_bg2)};
   }
-  opacity: ${({ disabled, selected }) => (disabled || selected ? 0.5 : 1)};
+  opacity: ${({ disabled, selected, dim }) => (dim || disabled || selected ? 0.4 : 1)};
 `
 
 export const SearchInput = styled.input<{ redesignFlag?: boolean }>`

src/components/TokenSafety/TokenSafetyIcon.tsx

 import { ReactComponent as Verified } from 'assets/svg/verified.svg'
-import { Warning, WARNING_LEVEL } from 'constants/tokenSafety'
-import { useTokenWarningColor } from 'hooks/useTokenWarningColor'
-import { AlertOctagon, AlertTriangle } from 'react-feather'
+import { Warning } from 'constants/tokenSafety'
 import styled from 'styled-components/macro'
-import { Color } from 'theme/styled'
-
-const Container = styled.div<{ color: Color }>`
-  width: 0.9rem;
-  height: 0.9rem;
-  margin-left: 4px;
-  color: ${({ color }) => color};
-  display: inline-flex;
-  align-items: center;
-`
 
 const VerifiedContainer = styled.div`
   margin-left: 4px;
@@ -26,13 +14,10 @@ export const VerifiedIcon = styled(Verified)<{ size?: string }>`
 `
 
 export default function TokenSafetyIcon({ warning }: { warning: Warning | null }) {
-  const color = useTokenWarningColor(warning ? warning.level : WARNING_LEVEL.UNKNOWN)
-  if (!warning) {
-    return (
-      <VerifiedContainer>
-        <VerifiedIcon />
-      </VerifiedContainer>
-    )
-  }
-  return <Container color={color}>{warning.canProceed ? <AlertTriangle /> : <AlertOctagon />}</Container>
+  if (warning) return null
+  return (
+    <VerifiedContainer>
+      <VerifiedIcon />
+    </VerifiedContainer>
+  )
 }