Merge pull request #6064 from leather-io/dev

Release: SRC-20 Image Fix

Author: camerow

src/app/components/src20/src20-image.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import { css } from 'leather-styles/css';
+
+import { Src20AvatarIcon } from '@leather.io/ui';
+
+interface Src20ImageProps {
+  alt?: string;
+  src: string;
+}
+export function Src20Image(props: Src20ImageProps) {
+  const { alt, src } = props;
+  const [isError, setIsError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [width, setWidth] = useState(0);
+
+  if (isError) return <Src20AvatarIcon />;
+
+  return (
+    <img
+      alt={alt}
+      onError={() => setIsError(true)}
+      loading="lazy"
+      onLoad={event => {
+        const target = event.target as HTMLImageElement;
+        setWidth(target.naturalWidth);
+        setIsLoading(false);
+      }}
+      src={src}
+      className={css({
+        width: 'xl',
+        borderRadius: '100%',
+        objectFit: 'cover',
+        // display: 'none' breaks onLoad event firing
+        opacity: isLoading ? '0' : '1',
+        imageRendering: width <= 40 ? 'pixelated' : 'auto',
+      })}
+    />
+  );
+}

src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list.tsx

@@ -4,9 +4,9 @@ import { Src20AvatarIcon } from '@leather.io/ui';
 import { getAssetDisplayName } from '@leather.io/utils';
 
 import { useManageTokens } from '@app/common/hooks/use-manage-tokens';
-import { CollectibleImage } from '@app/components/collectibles/collectible-image';
 import { CryptoAssetItem } from '@app/components/crypto-asset-item/crypto-asset-item';
 import type { Src20TokenAssetDetails } from '@app/components/loaders/src20-tokens-loader';
+import { Src20Image } from '@app/components/src20/src20-image';
 import { useIsPrivateMode } from '@app/store/settings/settings.selectors';
 
 import type { AssetRightElementVariant } from '../../asset-list';
@@ -36,13 +36,7 @@ export function Src20TokenAssetList({
     const key = `${token.info.id}${i}`;
     const captionLeft = getAssetDisplayName(token.info).toUpperCase();
     const icon = token.info.deploy_img ? (
-      <CollectibleImage
-        alt={token.info.symbol}
-        icon={<Src20AvatarIcon size="lg" />}
-        src={token.info.deploy_img}
-        title={`# ${token.info.id}`}
-        subtitle={`# ${token.info.symbol}`}
-      />
+      <Src20Image src={token.info.deploy_img} />
     ) : (
       <Src20AvatarIcon />
     );