Fix: sandbox coingecko icons

apps/web/src/components/common/TokenIcon/index.tsx

@@ -1,8 +1,11 @@
-import { type ReactElement } from 'react'
+import { memo, type ReactElement } from 'react'
 import ImageFallback from '../ImageFallback'
 import css from './styles.module.css'
 
 const FALLBACK_ICON = '/images/common/token-placeholder.svg'
+const COINGECKO_URL = 'https://assets.coingecko.com/'
+const COINGECKO_THUMB = '/thumb/'
+const COINGECKO_SMALL = '/small/'
 
 const TokenIcon = ({
   logoUri,
@@ -15,15 +18,26 @@ const TokenIcon = ({
   size?: number
   fallbackSrc?: string
 }): ReactElement => {
+  let crossOrigin = false
+  let src = logoUri
+
+  if (logoUri?.startsWith(COINGECKO_URL)) {
+    src = logoUri?.replace(COINGECKO_THUMB, COINGECKO_SMALL)
+    crossOrigin = true
+  }
+
   return (
     <ImageFallback
-      src={logoUri}
+      src={src}
       alt={tokenSymbol}
       fallbackSrc={fallbackSrc || FALLBACK_ICON}
       height={size}
       className={css.image}
+      loading="lazy"
+      referrerPolicy={crossOrigin ? 'no-referrer' : undefined}
+      crossOrigin={crossOrigin ? 'anonymous' : undefined}
     />
   )
 }
 
-export default TokenIcon
+export default memo(TokenIcon)