feat: hide logo on swap currency selector modal (and other areas that use...

feat: hide logo on swap currency selector modal (and other areas that use CurrencyLogo) for unsupported currencies (#6659)

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

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

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

@@ -79,11 +79,16 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
 }
 
 .c11 {
-  width: 36px;
+  --size: 36px;
+  border-radius: 100px;
+  color: #0D111C;
+  background-color: #E8ECFB;
+  font-size: calc(var(--size) / 3);
+  font-weight: 500;
   height: 36px;
-  border-radius: 50%;
-  background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
-  box-shadow: 0 0 1px white;
+  line-height: 36px;
+  text-align: center;
+  width: 36px;
 }
 
 .c10 {
@@ -155,11 +160,11 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
         <div
           class="c10"
         >
-          <img
-            alt="ABC logo"
+          <div
             class="c11"
-            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
-          />
+          >
+            ABC
+          </div>
         </div>
       </div>
       <div
@@ -198,11 +203,11 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
         <div
           class="c10"
         >
-          <img
-            alt="DEF logo"
+          <div
             class="c11"
-            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
-          />
+          >
+            DEF
+          </div>
         </div>
       </div>
     </div>
@@ -292,11 +297,16 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
 }
 
 .c11 {
-  width: 36px;
+  --size: 36px;
+  border-radius: 100px;
+  color: #0D111C;
+  background-color: #E8ECFB;
+  font-size: calc(var(--size) / 3);
+  font-weight: 500;
   height: 36px;
-  border-radius: 50%;
-  background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
-  box-shadow: 0 0 1px white;
+  line-height: 36px;
+  text-align: center;
+  width: 36px;
 }
 
 .c10 {
@@ -368,11 +378,11 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
         <div
           class="c10"
         >
-          <img
-            alt="ABC logo"
+          <div
             class="c11"
-            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
-          />
+          >
+            ABC
+          </div>
         </div>
       </div>
       <div
@@ -411,11 +421,11 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
         <div
           class="c10"
         >
-          <img
-            alt="GHI logo"
+          <div
             class="c11"
-            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000003/logo.png"
-          />
+          >
+            GHI
+          </div>
         </div>
       </div>
     </div>

src/hooks/useAssetLogoSource.ts

@@ -4,6 +4,8 @@ import uriToHttp from 'lib/utils/uriToHttp'
 import { useCallback, useEffect, useState } from 'react'
 import { isAddress } from 'utils'
 
+import { checkWarning } from '../constants/tokenSafety'
+
 const BAD_SRCS: { [tokenAddress: string]: true } = {}
 
 // Converts uri's into fetchable urls
@@ -52,13 +54,17 @@ export default function useAssetLogoSource(
   isNative?: boolean,
   backupImg?: string | null
 ): [string | undefined, () => void] {
-  const [current, setCurrent] = useState<string | undefined>(getInitialUrl(address, chainId, isNative))
+  const hasWarning = Boolean(address && checkWarning(address))
+  const [current, setCurrent] = useState<string | undefined>(
+    hasWarning ? undefined : getInitialUrl(address, chainId, isNative)
+  )
   const [fallbackSrcs, setFallbackSrcs] = useState<string[] | undefined>(undefined)
 
   useEffect(() => {
+    if (hasWarning) return
     setCurrent(getInitialUrl(address, chainId, isNative))
     setFallbackSrcs(undefined)
-  }, [address, chainId, isNative])
+  }, [hasWarning, address, chainId, isNative])
 
   const nextSrc = useCallback(() => {
     if (current) {