fix: remove empty collections from trending (#5215)

* fix: remove cyberpunks from trading

* nits

* chore: refactor loading a bit

* chore: bring back hardcoded value

* chore: remove import

* chore: filter out

* chore: use memo

src/graphql/data/nft/Collection.ts

@@ -99,7 +99,7 @@ export function useLoadCollectionQuery(address?: string | string[]): void {
 // Lazy-loads an already loaded CollectionQuery.
 // This will *not* trigger a query - that must be done from a parent component to ensure proper query coalescing and to
 // prevent waterfalling. Use useLoadCollectionQuery to trigger the query.
-export function useCollectionQuery(address: string): GenieCollection | undefined {
+export function useCollectionQuery(address: string): GenieCollection {
   const queryData = useLazyLoadQuery<CollectionQuery>( // this will suspend if not yet loaded
     collectionQuery,
     { addresses: [address] },

src/nft/components/explore/Banner.tsx

@@ -59,16 +59,23 @@ const HeaderContainer = styled.div`
     padding-top: 0px;
   }
 `
-const DEFAULT_TRENDING_COLLECTION_QUERY_AMOUNT = 5
+
+// Exclude collections that are not available in any of the following - OpenSea, X2Y2 and LooksRare:
+const EXCLUDED_COLLECTIONS = ['0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb']
+const TRENDING_COLLECTION_SIZE = 5
 
 const Banner = () => {
   const navigate = useNavigate()
   const isMobile = useIsMobile()
 
-  const { data: collections } = useQuery(
+  const { data } = useQuery(
     ['trendingCollections'],
     () => {
-      return fetchTrendingCollections({ volumeType: 'eth', timePeriod: TimePeriod.OneDay, size: 5 })
+      return fetchTrendingCollections({
+        volumeType: 'eth',
+        timePeriod: TimePeriod.OneDay,
+        size: TRENDING_COLLECTION_SIZE + EXCLUDED_COLLECTIONS.length,
+      })
     },
     {
       refetchOnReconnect: false,
@@ -77,6 +84,11 @@ const Banner = () => {
     }
   )
 
+  const collections = useMemo(
+    () => data?.filter((collection) => !EXCLUDED_COLLECTIONS.includes(collection.address)).slice(0, 5),
+    [data]
+  )
+
   // Trigger queries for the top trending collections, so that the data is immediately available if the user clicks through.
   const collectionAddresses = useMemo(() => collections?.map(({ address }) => address), [collections])
   useLoadCollectionQuery(collectionAddresses)
@@ -90,7 +102,7 @@ const Banner = () => {
       {collections ? (
         <Carousel>
           {collections.map((collection) => (
-            <Suspense fallback={<LoadingCarouselCard />} key={collection.address}>
+            <Suspense fallback={<LoadingCarouselCard collection={collection} />} key={collection.address}>
               <CarouselCard
                 key={collection.address}
                 collection={collection}
@@ -101,7 +113,7 @@ const Banner = () => {
         </Carousel>
       ) : (
         <Carousel>
-          {[...Array(DEFAULT_TRENDING_COLLECTION_QUERY_AMOUNT)].map((index) => (
+          {[...Array(TRENDING_COLLECTION_SIZE)].map((index) => (
             <LoadingCarouselCard key={'carouselCard' + index} />
           ))}
         </Carousel>

src/nft/components/explore/CarouselCard.tsx

@@ -193,54 +193,31 @@ const MARKETS_ENUM_TO_NAME = {
 export const CarouselCard = ({ collection, onClick }: CarouselCardProps) => {
   const gqlCollection = useCollectionQuery(collection.address)
 
-  const theme = useTheme()
-
   return (
     <CarouselCardContainer onClick={onClick}>
-      <CardHeaderContainer src={collection.bannerImageUrl}>
-        <CardHeaderRow>
-          <CollectionImage src={collection.imageUrl} />
-          <CardNameRow>
-            <CollectionNameContainer>
-              <ThemedText.MediumHeader color={theme.accentTextLightPrimary} fontWeight="500" lineHeight="28px">
-                {collection.name}
-              </ThemedText.MediumHeader>
-            </CollectionNameContainer>
-            {collection.isVerified && (
-              <IconContainer>
-                <VerifiedIcon width="24px" height="24px" />
-              </IconContainer>
-            )}
-          </CardNameRow>
-        </CardHeaderRow>
-        <HeaderOverlay />
-      </CardHeaderContainer>
+      <CarouselCardHeader collection={collection} />
       <CardBottomContainer>
-        {!gqlCollection ? (
-          <LoadingTable />
-        ) : (
-          <>
-            <HeaderRow>Uniswap</HeaderRow>
-            <HeaderRow>{formatWeiToDecimal(collection.floor.toString())} ETH Floor</HeaderRow>
-            <HeaderRow>{gqlCollection.marketplaceCount?.reduce((acc, cur) => acc + cur.count, 0)} Listings</HeaderRow>
-            {MARKETS_TO_CHECK.map((market) => {
-              const marketplace = gqlCollection.marketplaceCount?.find(
-                (marketplace) => marketplace.marketplace === market
-              )
-              if (!marketplace) {
-                return null
-              }
-              return (
-                <MarketplaceRow
-                  key={`CarouselCard-key-${collection.address}-${marketplace.marketplace}`}
-                  marketplace={MARKETS_ENUM_TO_NAME[market]}
-                  listings={marketplace.count.toString()}
-                  floorInEth={marketplace.floorPrice.toString()}
-                />
-              )
-            })}
-          </>
-        )}
+        <>
+          <HeaderRow>Uniswap</HeaderRow>
+          <HeaderRow>{formatWeiToDecimal(collection.floor.toString())} ETH Floor</HeaderRow>
+          <HeaderRow>{gqlCollection.marketplaceCount?.reduce((acc, cur) => acc + cur.count, 0)} Listings</HeaderRow>
+          {MARKETS_TO_CHECK.map((market) => {
+            const marketplace = gqlCollection.marketplaceCount?.find(
+              (marketplace) => marketplace.marketplace === market
+            )
+            if (!marketplace) {
+              return null
+            }
+            return (
+              <MarketplaceRow
+                key={`CarouselCard-key-${collection.address}-${marketplace.marketplace}`}
+                marketplace={MARKETS_ENUM_TO_NAME[market]}
+                listings={marketplace.count.toString()}
+                floorInEth={marketplace.floorPrice.toString()}
+              />
+            )
+          })}
+        </>
       </CardBottomContainer>
     </CarouselCardContainer>
   )
@@ -258,16 +235,44 @@ export const LoadingTable = () => {
   )
 }
 
-export const LoadingCarouselCard = () => {
+const CarouselCardHeader = ({ collection }: { collection: TrendingCollection }) => {
+  const theme = useTheme()
+  return (
+    <CardHeaderContainer src={collection.bannerImageUrl}>
+      <CardHeaderRow>
+        <CollectionImage src={collection.imageUrl} />
+        <CardNameRow>
+          <CollectionNameContainer>
+            <ThemedText.MediumHeader color={theme.accentTextLightPrimary} fontWeight="500" lineHeight="28px">
+              {collection.name}
+            </ThemedText.MediumHeader>
+          </CollectionNameContainer>
+          {collection.isVerified && (
+            <IconContainer>
+              <VerifiedIcon width="24px" height="24px" />
+            </IconContainer>
+          )}
+        </CardNameRow>
+      </CardHeaderRow>
+      <HeaderOverlay />
+    </CardHeaderContainer>
+  )
+}
+
+export const LoadingCarouselCard = ({ collection }: { collection?: TrendingCollection }) => {
   return (
     <CarouselCardContainer>
-      <LoadingCardHeaderContainer>
-        <CardHeaderRow>
-          <LoadingCollectionImage />
-          <LoadingCollectionNameContainer />
-        </CardHeaderRow>
-        <HeaderOverlay />
-      </LoadingCardHeaderContainer>
+      {collection ? (
+        <CarouselCardHeader collection={collection} />
+      ) : (
+        <LoadingCardHeaderContainer>
+          <CardHeaderRow>
+            <LoadingCollectionImage />
+            <LoadingCollectionNameContainer />
+          </CardHeaderRow>
+          <HeaderOverlay />
+        </LoadingCardHeaderContainer>
+      )}
       <CardBottomContainer>
         <LoadingTable />
       </CardBottomContainer>