fix(asset-details): if an asset has no listings, don't try to render them (#5088)

* fix(asset-details): if an asset has no listings, don't try to render them

* add todo

src/graphql/data/nft/Details.ts

@@ -96,7 +96,8 @@ export function useDetailsQuery(address: string, tokenId: string): [GenieAsset,
 
   const asset = queryData.nftAssets?.edges[0]?.node
   const collection = asset?.collection
-  const ethPrice = parseEther(asset?.listings?.edges[0].node.price.value?.toString() ?? '0').toString()
+  const listing = asset?.listings?.edges[0]?.node
+  const ethPrice = parseEther(listing?.price.value?.toString() ?? '0').toString()
 
   return [
     {
@@ -107,7 +108,8 @@ export function useDetailsQuery(address: string, tokenId: string): [GenieAsset,
       collectionSymbol: asset?.collection?.image?.url,
       imageUrl: asset?.image?.url,
       animationUrl: asset?.animationUrl ?? undefined,
-      marketplace: asset?.listings?.edges[0]?.node.marketplace.toLowerCase() as any,
+      // todo: fix the back/frontend discrepency here and drop the any
+      marketplace: listing?.marketplace.toLowerCase() as any,
       name: asset?.name ?? undefined,
       priceInfo: {
         ETHPrice: ethPrice,

src/nft/components/details/AssetDetails.tsx

@@ -7,8 +7,13 @@ import { AssetPriceDetails } from 'nft/components/details/AssetPriceDetails'
 import { Center } from 'nft/components/Flex'
 import { VerifiedIcon } from 'nft/components/icons'
 import { ActivityFetcher } from 'nft/queries/genie/ActivityFetcher'
-import { ActivityEventResponse, ActivityEventType } from 'nft/types'
-import { CollectionInfoForAsset, GenieAsset, GenieCollection } from 'nft/types'
+import {
+  ActivityEventResponse,
+  ActivityEventType,
+  CollectionInfoForAsset,
+  GenieAsset,
+  GenieCollection,
+} from 'nft/types'
 import { shortenAddress } from 'nft/utils/address'
 import { formatEthPrice } from 'nft/utils/currency'
 import { isAudio } from 'nft/utils/isAudio'