Featuring Not On Sale NFTs (#4232)

* Fix useFeaturedNftsVideos query

* show not for sale nfts in the featured nfts section

* include not for sale nfts in hero

packages/atlas/src/api/hooks/nfts.ts

@@ -196,13 +196,6 @@ export const useFeaturedNftsVideos = () => {
       orderBy: [OwnedNftOrderByInput.VideoViewsNumDesc],
       where: {
         isFeatured_eq: true,
-        transactionalStatus: {
-          isTypeOf_in: ['TransactionalStatusAuction', 'TransactionalStatusBuyNow'],
-          auction: {
-            isCompleted_eq: false,
-            isCanceled_eq: false,
-          },
-        },
       },
     },
   })

packages/atlas/src/components/NftCarousel/components/MarketplaceCarouselCard/NftCarouselDetails.tsx

@@ -5,6 +5,7 @@ import { CSSTransition } from 'react-transition-group'
 
 import { getNftStatus } from '@/api/hooks/nfts'
 import { GetFeaturedNftsVideosQuery } from '@/api/queries/__generated__/nfts.generated'
+import { SvgActionNotForSale } from '@/assets/icons'
 import { AvatarGroup } from '@/components/Avatar/AvatarGroup'
 import { JoyTokenIcon } from '@/components/JoyTokenIcon'
 import {
@@ -210,6 +211,15 @@ export const NftCarouselDetails = ({
                     icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
                   />
                 )}
+                {nftStatus?.status === 'idle' && (
+                  <DetailsContent
+                    tileSize={smMatch ? 'big' : 'bigSmall'}
+                    caption="STATUS"
+                    content="Not for sale"
+                    secondary
+                    icon={<SvgActionNotForSale width={smMatch ? 24 : 16} height={smMatch ? 24 : 16} />}
+                  />
+                )}
 
                 {timeLeft && (
                   <DetailsContent

packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeatureNftModal.tsx

@@ -109,22 +109,11 @@ export const FeatureNftModal: FC<FeatureNftModalProps> = ({ isOpen, onClose }) =
         },
       })
       if (!ownedNftById) {
-        return 'This video is not an NFT.'
+        setVideoId('')
+        return "This video doesn't exists or is not an NFT."
       }
       setVideoId(id)
-      if (
-        ownedNftById.transactionalStatus?.__typename === 'TransactionalStatusIdle' ||
-        ownedNftById.transactionalStatus?.__typename === 'TransactionalStatusInitiatedOfferToMember'
-      ) {
-        return "This video's NFT is not put on sale."
-      }
 
-      if (
-        ownedNftById.transactionalStatus?.__typename === 'TransactionalStatusAuction' &&
-        ownedNftById.transactionalStatus.auction.isCompleted
-      ) {
-        return "This video's NFT is not put on sale."
-      }
       return true
     },
     [client]

packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx

@@ -56,31 +56,15 @@ export const FeaturedNftsSection: FC = () => {
   const { nfts, loading } = useNfts({
     variables: {
       where: {
-        OR: [
-          {
-            isFeatured_eq: true,
-            transactionalStatus: {
-              isTypeOf_eq: 'TransactionalStatusAuction',
-              auction: {
-                isCompleted_eq: false,
-                isCanceled_eq: false,
-              },
-            },
-          },
-          {
-            isFeatured_eq: true,
-            transactionalStatus: {
-              isTypeOf_eq: 'TransactionalStatusBuyNow',
-            },
-          },
-        ],
+        isFeatured_eq: true,
       },
     },
   })
+  const nftsToSort = nfts || []
 
   // 1. English auctions(not upcoming) first - sorted by blocks left
-  const englishAuctions = nfts
-    ?.filter(
+  const englishAuctions = nftsToSort
+    .filter(
       (nft) =>
         nft.transactionalStatus?.__typename === 'TransactionalStatusAuction' &&
         nft.transactionalStatus.auction.auctionType.__typename === 'AuctionTypeEnglish' &&
@@ -103,8 +87,8 @@ export const FeaturedNftsSection: FC = () => {
     })
 
   // 2. Open and buy now auctions(not upcoming) - sorted by popularity
-  const openAuctionsAndBuyNowAuctions = nfts
-    ?.filter(
+  const openAuctionsAndBuyNowAuctions = nftsToSort
+    .filter(
       (nft) =>
         nft.transactionalStatus?.__typename === 'TransactionalStatusBuyNow' ||
         (nft.transactionalStatus?.__typename === 'TransactionalStatusAuction' &&
@@ -114,8 +98,8 @@ export const FeaturedNftsSection: FC = () => {
     .sort((a, b) => b.video.viewsNum - a.video.viewsNum)
 
   // 3. Upcoming auctions - sorted by planned start
-  const plannedAuctions = nfts
-    ?.filter(
+  const plannedAuctions = nftsToSort
+    .filter(
       (nft) =>
         nft.transactionalStatus?.__typename === 'TransactionalStatusAuction' &&
         nft.transactionalStatus.auction.startsAtBlock > currentBlock
@@ -133,9 +117,15 @@ export const FeaturedNftsSection: FC = () => {
       return aPlannedStart - bPlannedStart
     })
 
-  const sorted = [...(englishAuctions || []), ...(openAuctionsAndBuyNowAuctions || []), ...(plannedAuctions || [])]
+  // 4. Not for sale - sorted by popularity
+
+  const notForSale = nftsToSort
+    .filter((nft) => nft.transactionalStatus?.__typename === 'TransactionalStatusIdle')
+    .sort((a, b) => b.video.viewsNum - a.video.viewsNum)
+
+  const sortedNfts = [...englishAuctions, ...openAuctionsAndBuyNowAuctions, ...plannedAuctions, ...notForSale]
 
-  const items = loading ? createPlaceholderData(10) : sorted ?? []
+  const items = loading ? createPlaceholderData(10) : sortedNfts ?? []
 
   const mdMatch = useMediaMatch('md')