Merge 506b430 into 04fafbb

src/components/common/TokenImg.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import styled from 'styled-components'
 
 import { getImageUrl, RequireContextMock, safeTokenName } from 'utils'
@@ -13,9 +13,15 @@ const Wrapper = styled.img<WrapperProps>`
   padding: 2px;
   opacity: ${(props): number => (props.faded ? 0.4 : 1)};
 `
+// keep track of 404 token images
+// so we don't retry fetching them
+const failedTokenImages = new Set<string>()
 
 function _loadFallbackTokenImage(event: React.SyntheticEvent<HTMLImageElement>): void {
   const image = event.currentTarget
+
+  failedTokenImages.add(image.src)
+
   image.src = unknownTokenImg
 }
 
@@ -46,23 +52,36 @@ const tokensIconsFilesByAddress: Record<string, string> = tokensIconsRequire.key
   return acc
 }, {})
 
-export const TokenImg: React.FC<Props> = (props) => {
-  const { address, addressMainnet, symbol, name } = props
+type ImageLoadProps = Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError'>
 
-  let iconFile = tokensIconsFilesByAddress[address.toLowerCase()]
-  if (!iconFile && addressMainnet) {
-    iconFile = tokensIconsFilesByAddress[addressMainnet.toLowerCase()]
-  }
+const useFailOnceImage = ({ address, addressMainnet, symbol, name }: Omit<Props, 'faded'>): ImageLoadProps => {
+  return useMemo(() => {
+    let iconFile = tokensIconsFilesByAddress[address.toLowerCase()]
+    if (!iconFile && addressMainnet) {
+      iconFile = tokensIconsFilesByAddress[addressMainnet.toLowerCase()]
+    }
+
+    const iconFileUrl: string | undefined = iconFile
+      ? tokensIconsRequire(iconFile).default
+      : getImageUrl(addressMainnet || address)
 
-  const iconFileUrl: string | undefined = iconFile
-    ? tokensIconsRequire(iconFile).default
-    : getImageUrl(addressMainnet || address)
+    // if we know the image failed before, use fallback image right away
+    const imgSrc = iconFileUrl && !failedTokenImages.has(iconFileUrl) ? iconFileUrl : unknownTokenImg
+
+    // TODO: Simplify safeTokenName signature, it doesn't need the addressMainnet or id!
+    // https://github.com/gnosis/dex-react/issues/1442
+    const safeName = safeTokenName({ address, symbol, name })
+
+    return { src: imgSrc, alt: safeName, onError: _loadFallbackTokenImage }
+  }, [address, addressMainnet, symbol, name])
+}
+
+export const TokenImg: React.FC<Props> = (props) => {
+  const { faded } = props
 
-  // TODO: Simplify safeTokenName signature, it doesn't need the addressMainnet or id!
-  // https://github.com/gnosis/dex-react/issues/1442
-  const safeName = safeTokenName({ address, symbol, name })
+  const imageProps = useFailOnceImage(props)
 
-  return <Wrapper alt={safeName} src={iconFileUrl} onError={_loadFallbackTokenImage} {...props} />
+  return <Wrapper {...imageProps} faded={faded} />
 }
 
 export const TokenImgWrapper = styled(TokenImg)`