fix: show logos on warned tokens (#6978)

* fix: show logos on warned tokens

* test: update snapshots

* fix: hide logos for unsupported tokens

src/components/AccountDrawer/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap

@@ -84,7 +84,7 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
       />
       <img
         class="c2 c3"
-        src="blank_token.svg"
+        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/arbitrum/assets/0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8/logo.png"
       />
     </div>
     <div

src/components/swap/__snapshots__/SwapModalHeader.test.tsx.snap

@@ -79,16 +79,11 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
 }
 
 .c11 {
-  --size: 36px;
-  border-radius: 100px;
-  color: #0D111C;
-  background-color: #E8ECFB;
-  font-size: calc(var(--size) / 3);
-  font-weight: 500;
-  height: 36px;
-  line-height: 36px;
-  text-align: center;
   width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
+  box-shadow: 0 0 1px white;
 }
 
 .c10 {
@@ -160,11 +155,11 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
         <div
           class="c10"
         >
-          <div
+          <img
+            alt="ABC logo"
             class="c11"
-          >
-            ABC
-          </div>
+            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
+          />
         </div>
       </div>
       <div
@@ -203,11 +198,11 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
         <div
           class="c10"
         >
-          <div
+          <img
+            alt="DEF logo"
             class="c11"
-          >
-            DEF
-          </div>
+            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
+          />
         </div>
       </div>
     </div>
@@ -252,7 +247,7 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
   color: #0D111C;
 }
 
-.c13 {
+.c12 {
   width: 100%;
   height: 1px;
   border-width: 0;
@@ -296,19 +291,6 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
   grid-row-gap: 8px;
 }
 
-.c12 {
-  --size: 36px;
-  border-radius: 100px;
-  color: #0D111C;
-  background-color: #E8ECFB;
-  font-size: calc(var(--size) / 3);
-  font-weight: 500;
-  height: 36px;
-  line-height: 36px;
-  text-align: center;
-  width: 36px;
-}
-
 .c11 {
   width: 36px;
   height: 36px;
@@ -336,7 +318,7 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
   margin-right: 8px;
 }
 
-.c14 {
+.c13 {
   margin: 16px 2px 24px 2px;
 }
 
@@ -429,16 +411,16 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
         <div
           class="c10"
         >
-          <div
-            class="c12"
-          >
-            DEF
-          </div>
+          <img
+            alt="DEF logo"
+            class="c11"
+            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
+          />
         </div>
       </div>
     </div>
     <div
-      class="c13 c14"
+      class="c12 c13"
     />
   </div>
 </DocumentFragment>
@@ -523,16 +505,11 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
 }
 
 .c11 {
-  --size: 36px;
-  border-radius: 100px;
-  color: #0D111C;
-  background-color: #E8ECFB;
-  font-size: calc(var(--size) / 3);
-  font-weight: 500;
-  height: 36px;
-  line-height: 36px;
-  text-align: center;
   width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
+  box-shadow: 0 0 1px white;
 }
 
 .c10 {
@@ -604,11 +581,11 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
         <div
           class="c10"
         >
-          <div
+          <img
+            alt="ABC logo"
             class="c11"
-          >
-            ABC
-          </div>
+            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
+          />
         </div>
       </div>
       <div
@@ -647,11 +624,11 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
         <div
           class="c10"
         >
-          <div
+          <img
+            alt="GHI logo"
             class="c11"
-          >
-            GHI
-          </div>
+            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000003/logo.png"
+          />
         </div>
       </div>
     </div>

src/hooks/useAssetLogoSource.ts

 import tokenLogoLookup from 'constants/tokenLogoLookup'
 import { isCelo, nativeOnChain } from 'constants/tokens'
+import { checkWarning, WARNING_LEVEL } from 'constants/tokenSafety'
 import { chainIdToNetworkName, getNativeLogoURI } from 'lib/hooks/useCurrencyLogoURIs'
 import uriToHttp from 'lib/utils/uriToHttp'
 import { useCallback, useEffect, useState } from 'react'
 import { isAddress } from 'utils'
 
 import celoLogo from '../assets/svg/celo_logo.svg'
-import { checkWarning } from '../constants/tokenSafety'
 
 const BAD_SRCS: { [tokenAddress: string]: true } = {}
 
@@ -66,17 +66,17 @@ export default function useAssetLogoSource(
   isNative?: boolean,
   backupImg?: string | null
 ): [string | undefined, () => void] {
-  const showLogo = Boolean((address && checkWarning(address, chainId) === null) || isNative)
+  const hideLogo = Boolean(address && checkWarning(address, chainId)?.level === WARNING_LEVEL.BLOCKED)
   const [current, setCurrent] = useState<string | undefined>(
-    showLogo ? getInitialUrl(address, chainId, isNative, backupImg) : undefined
+    hideLogo ? undefined : getInitialUrl(address, chainId, isNative, backupImg)
   )
   const [fallbackSrcs, setFallbackSrcs] = useState<string[] | undefined>(undefined)
 
   useEffect(() => {
-    if (!showLogo) return
+    if (hideLogo) return
     setCurrent(getInitialUrl(address, chainId, isNative))
     setFallbackSrcs(undefined)
-  }, [address, chainId, isNative, showLogo])
+  }, [address, chainId, hideLogo, isNative])
 
   const nextSrc = useCallback(() => {
     if (current) {