chore: stx nft audio

leather-io · Jan 28, 2025 · aafcfab · aafcfab
1 parent 5d88930
commit aafcfab
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 45 deletions.
diff --git a/src/app/common/hooks/account/use-account-names.ts b/src/app/common/hooks/account/use-account-names.ts
@@ -44,6 +44,7 @@ export function useAccountDisplayName({ address, index }: { index: number; addre
     }),
     select: resp => {
       const names = resp.names ?? [];
+      console.log('pete', names, client);
       return (
         parseIfValidPunycode(formatAccountName(names[0])) ||
         getAutogeneratedAccountDisplayName(index)

diff --git a/src/app/components/collectibles/collectible-image.tsx b/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';
 
@@ -8,41 +10,40 @@ interface CollectibleImageProps extends Omit<CollectibleItemLayoutProps, 'childr
   icon: ReactNode;
   src: string;
 }
+
 export function CollectibleImage(props: CollectibleImageProps) {
   const { alt, icon, src, ...rest } = props;
   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>
   );
 }
diff --git a/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx b/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx
@@ -20,6 +20,8 @@ export function StacksCryptoAssets({ address }: StacksCryptoAssetsProps) {
 
   const stacksNftsMetadataResp = useStacksNonFungibleTokensMetadata(address);
 
+  console.log('Stacks NFTs Metadata', stacksNftsMetadataResp);
+
   useEffect(() => {
     if (stacksNftsMetadataResp.length > 0) {
       void analytics.track('view_collectibles', {
@@ -40,7 +42,7 @@ export function StacksCryptoAssets({ address }: StacksCryptoAssetsProps) {
       ))}
 
       {stacksNftsMetadataResp.map((nft, i) => {
-        console.log('Stacks NFT', nft);
+        // console.log('Stacks NFT', nft);
         if (!nft || !nft.metadata) return null;
 
         if (hideBnsCollectible(nft.metadata?.name ?? '')) {

diff --git a/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx b/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx
@@ -47,24 +47,8 @@ async function fetchJson(cid: string) {
 }
 
 export function StacksNonFungibleTokens({ metadata, nft }: StacksNonFungibleTokensProps) {
-  const isImageAvailable = metadata.cached_image && isValidUrl(metadata.cached_image);
+  // const isImageAvailable = metadata.cached_image && isValidUrl(metadata.cached_image);
 
-  // console.log('collectible StacksNonFungibleTokens', metadata);
-  // fetchJson(metadata.cached_image);
-  // const data = await fetchJson('QmaDQPK8ckuRQKhkKVyXgxELvbEge81WiwhKvmYVCM8mgM');
-  // Replace '<CID>' with the actual IPFS hash of your JSON file
-  // console.log('IPFS', data);
-  // for await (const chunk of ipfs.cat(CID)) {
-  //   chunks.push(chunk);
-  // }
-
-  // const data = concat(chunks);
-  // const decodedData = JSON.parse(new TextDecoder().decode(data).toString());
-
-  // console.log('collectible StacksNonFungibleTokens', decodedData);
-  console.log('collectible StacksNonFungibleTokens', nft);
-
-  if (!isImageAvailable) return <ImageUnavailable />;
   return (
     <CollectibleImage
       alt="stacks nft"