fix: show available metadata for stacks nfts, ref #5349

Author: pete-watters

src/app/components/collectibles/collectible-image.tsx

@@ -1,5 +1,7 @@
 import { ReactNode, useState } from 'react';
 
+import { isValidUrl } from '@shared/utils/validate-url';
+
 import { CollectibleItemLayout, CollectibleItemLayoutProps } from './collectible-item.layout';
 import { ImageUnavailable } from './image-unavailable';
 
@@ -13,36 +15,34 @@ export function CollectibleImage(props: CollectibleImageProps) {
   const [isError, setIsError] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [width, setWidth] = useState(0);
-
-  if (isError)
-    return (
-      <CollectibleItemLayout collectibleTypeIcon={icon} {...rest}>
-        <ImageUnavailable />
-      </CollectibleItemLayout>
-    );
+  const isImageAvailable = src && isValidUrl(src);
 
   return (
     <CollectibleItemLayout collectibleTypeIcon={icon} {...rest}>
-      <img
-        alt={alt}
-        onError={() => setIsError(true)}
-        loading="lazy"
-        onLoad={event => {
-          const target = event.target as HTMLImageElement;
-          setWidth(target.naturalWidth);
-          setIsLoading(false);
-        }}
-        src={src}
-        style={{
-          width: '100%',
-          height: '100%',
-          aspectRatio: '1 / 1',
-          objectFit: 'cover',
-          // display: 'none' breaks onLoad event firing
-          opacity: isLoading ? '0' : '1',
-          imageRendering: width <= 40 ? 'pixelated' : 'auto',
-        }}
-      />
+      {isError || !isImageAvailable ? (
+        <ImageUnavailable />
+      ) : (
+        <img
+          alt={alt}
+          onError={() => setIsError(true)}
+          loading="lazy"
+          onLoad={event => {
+            const target = event.target as HTMLImageElement;
+            setWidth(target.naturalWidth);
+            setIsLoading(false);
+          }}
+          src={src}
+          style={{
+            width: '100%',
+            height: '100%',
+            aspectRatio: '1 / 1',
+            objectFit: 'cover',
+            // display: 'none' breaks onLoad event firing
+            opacity: isLoading ? '0' : '1',
+            imageRendering: width <= 40 ? 'pixelated' : 'auto',
+          }}
+        />
+      )}
     </CollectibleItemLayout>
   );
 }

src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx

@@ -2,19 +2,13 @@ import { Metadata as StacksNftMetadata } from '@hirosystems/token-metadata-api-c
 
 import { StxAvatarIcon } from '@leather.io/ui';
 
-import { isValidUrl } from '@shared/utils/validate-url';
-
 import { CollectibleImage } from '../../../../components/collectibles/collectible-image';
-import { ImageUnavailable } from '../../../../components/collectibles/image-unavailable';
 
 interface StacksNonFungibleTokensProps {
   metadata: StacksNftMetadata;
 }
-export function StacksNonFungibleTokens({ metadata }: StacksNonFungibleTokensProps) {
-  const isImageAvailable = metadata.cached_image && isValidUrl(metadata.cached_image);
-
-  if (!isImageAvailable) return <ImageUnavailable />;
 
+export function StacksNonFungibleTokens({ metadata }: StacksNonFungibleTokensProps) {
   return (
     <CollectibleImage
       alt="stacks nft"