feat: improve nftstorefront view

33-Labs · Oct 27, 2023 · 95f9c40 · 95f9c40
1 parent 79ac535
commit 95f9c40
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 52 deletions.
diff --git a/components/common/NFTView.js b/components/common/NFTView.js
@@ -30,9 +30,9 @@ export default function NFTView(props) {
           }, undefined, { shallow: true })
         } else {
           if (display.transferrable == false) {
-              setShowBasicNotification(true)
-              setBasicNotificationContent({ type: "exclamation", title: `This NFT is not transferrable`, detail: null })
-              return
+            setShowBasicNotification(true)
+            setBasicNotificationContent({ type: "exclamation", title: `This NFT is not transferrable`, detail: null })
+            return
           }
           let tokens = Object.assign({}, selectedTokens)
           if (!tokens[tokenId] || tokens[tokenId].isSelected == false) {
@@ -61,24 +61,24 @@ export default function NFTView(props) {
         {`${display.name}`}
       </label>
       <div className="flex flex-col items-center justify-center">
-      <div className="flex gap-x-1 justify-center items-center">
+        <div className="flex gap-x-1 justify-center items-center">
+          {
+            display.transferrable == true ? null :
+              <div className={`w-4 h-4 text-center bg-indigo-100 text-indigo-800 rounded-full font-flow font-medium text-xs`}>
+                {"S"}
+              </div>
+          }
+          <label className="font-flow font-medium text-xs text-gray-400">
+            {`#${display.tokenID}`}
+          </label>
+        </div>
         {
-          display.transferrable == true ? null :
-            <div className={`w-4 h-4 text-center bg-indigo-100 text-indigo-800 rounded-full font-flow font-medium text-xs`}>
-              {"S"}
+          selectMode == "Select" && selectedTokens[tokenId] && selectedTokens[tokenId].isSelected && selectedTokens[tokenId].recipient ?
+            <div className={`px-1 h-4 text-center bg-indigo-100 text-indigo-800 rounded-full font-flow font-medium text-xs`}>
+              {selectedTokens[tokenId].recipient}
             </div>
+            : null
         }
-        <label className="font-flow font-medium text-xs text-gray-400">
-          {`#${display.tokenID}`}
-        </label>
-      </div>
-      {
-        selectMode == "Select" && selectedTokens[tokenId] && selectedTokens[tokenId].isSelected && selectedTokens[tokenId].recipient ?
-        <div className={`px-1 h-4 text-center bg-indigo-100 text-indigo-800 rounded-full font-flow font-medium text-xs`}>
-          {selectedTokens[tokenId].recipient}
-        </div>
-        : null
-      }
       </div>
     </div>
   )

diff --git a/components/storefront/Listing.js b/components/storefront/Listing.js
@@ -7,11 +7,9 @@ import {
 } from "../../lib/atoms"
 import { removeItem } from "../../flow/storefront_transactions"
 import { useSWRConfig } from "swr"
-
-// const getImageUrl = (listing) => {
-//   const url = listing?.nft?.metadata?.imageUrl ?? "/token_placeholder.png"
-//   return url
-// }
+import Image from "next/image"
+import { getImageSrcFromMetadataViewsFile, getRarityColor } from "../../lib/utils"
+import { list } from "postcss"
 
 const getPaymentTokenSymbol = (listing) => {
   const symbol = listing?.paymentTokenInfo?.symbol ?? "UNKN"
@@ -28,35 +26,89 @@ export default function Listing(props) {
 
   const symbol = getPaymentTokenSymbol(listing)
   const loggedIn = user && user.loggedIn && user.addr == account
+  const display = listing.display
+
+  const getListingView = (listing) => {
+    if (!listing || !listing.display) {
+      return null
+    }
+
+    const display = listing.display
+    const rarity = listing.rarity
+    const rarityColor = getRarityColor(rarity && rarity.description ? rarity.description.toLowerCase() : null)
+
+    return (
+      <>
+        <div className="flex justify-center w-full rounded-t-2xl aspect-square bg-drizzle-ultralight relative overflow-hidden">
+          <Image className={"object-contain"} src={getImageSrcFromMetadataViewsFile(display.thumbnail)} fill alt="" priority sizes="5vw" />
+          {
+            rarity ?
+              <div className={`absolute top-2 px-2 ${rarityColor} rounded-full font-flow font-medium text-xs`}>
+                {`${rarity.description}`.toUpperCase()}
+              </div> : null
+          }
+        </div>
+        <label className="px-3 py-1 max-h-[50px] break-words overflow-auto text-ellipsis font-flow font-semibold text-xs text-black">
+          {`${display.name}`}
+        </label>
+      </>
+    )
+  }
+
+  const getCustomIdView = (listing) => {
+    if (!listing || !listing.details || !listing.details.customID) {
+      return null
+    }
+
+    let customId = listing.details.customID
+    if (customId == "flowverse-nft-marketplace") {
+      customId = "flowverse"
+    }
+    return (
+      <div className="px-2 shrink-0">
+        <label className={`shrink-0 text-xs px-2 py-1 leading-3 rounded-full bg-green-100 text-green-800`}>
+          {customId}
+        </label>
+      </div>
+    )
+  }
 
   return (
-    <div className={`w-36 bg-white rounded-2xl flex flex-col gap-y-1 pt-2 pb-2 justify-between items-center shrink-0 overflow-hidden shadow-md ring-1 ring-black ring-opacity-5`}>
-      {/* <div className="flex justify-center w-full rounded-t-2xl aspect-square bg-drizzle-ultralight relative overflow-hidden">
-        <Image className={"object-contain"} src={imageUrl} fill alt="" priority sizes="5vw" />
-      </div> */}
-      <label className="mt-3 px-3 break-words overflow-hidden text-ellipsis font-flow font-medium text-xs text-gray-400">
-        {`${typeId}`}
-      </label>
-      <label className="-mt-1 px-3 font-flow font-medium text-xs text-gray-400">
+    <div className={`h-80 w-36 bg-white rounded-2xl flex flex-col gap-y-1 pb-2 justify-between items-center shrink-0 overflow-hidden shadow-md ring-1 ring-black ring-opacity-5`}
+      onClick={() => {
+        router.push({
+          pathname: `/account/[account]/collection/[path]/[tokenId]`,
+          query: { account: account, path: listing.collectionData.storagePath.identifier, tokenId: listing.details.nftID}
+        }, undefined, { shallow: true, scroll: false })
+      }}>
+      {getListingView(listing)}
+      <label className="px-3 py-1 font-flow font-medium text-xs text-gray-400">
         {`#${listing.details.nftID}`}
       </label>
-      <label className="mt-3 mb-3 px-3 break-words overflow-hidden text-ellipsis font-flow font-semibold text-sm text-black">
-        {`${new Decimal(listing.details.salePrice).toString()} ${symbol}`}
-      </label>
-      {
-        loggedIn ?
-          <button
-            className={`mb-3 text-black disabled:bg-drizzle-light disabled:text-gray-500 bg-drizzle hover:bg-drizzle-dark px-3 py-2 text-sm h-9 rounded-2xl font-semibold shrink-0`}
-            disabled={transactionInProgress}
-            onClick={async () => {
-              await removeItem(listing.listingResourceId, setTransactionInProgress, setTransactionStatus)
-              mutate(["listingsFetcher", account])
-            }}
-          >
-            Remove
-          </button>
-          : null
-      }
+      <div className="flex flex-col gap-y-1">
+        <div className="bg-gray-200 w-full h-[1px]"></div>
+        {getCustomIdView(listing)}
+        <label className="mt-2 mb-2 px-2 break-words overflow-hidden text-ellipsis font-flow font-semibold text-sm text-black">
+          {`${new Decimal(listing.details.salePrice).toString()} ${symbol}`}
+        </label>
+        {
+          loggedIn ?
+            <button
+              className={`mb-1 text-black disabled:bg-drizzle-light disabled:text-gray-500 bg-drizzle hover:bg-drizzle-dark px-2 py-1 text-sm h-9 rounded-2xl font-semibold shrink-0`}
+              disabled={transactionInProgress}
+              onClick={async (event) => {
+                event.stopPropagation()
+                await removeItem(listing.listingResourceId, setTransactionInProgress, setTransactionStatus)
+                mutate(["listingsFetcher", account])
+              }}
+            >
+              Remove
+            </button>
+            : null
+
+        }
+      </div>
+
     </div>
   )
 }
diff --git a/public/scripts/storefront/get_listings.cdc b/public/scripts/storefront/get_listings.cdc
@@ -1,6 +1,6 @@
 import NFTStorefrontV2 from 0x4eb8a10cb9f87357
 import NonFungibleToken from 0x1d7e57aa55817448
-import HWGarageCardV2 from 0xd0bcefdf1e67ea85
+import MetadataViews from 0x1d7e57aa55817448
 import FTRegistry from 0x097bafa4e0b48eef
 
 pub struct FTInfo {
@@ -13,6 +13,22 @@ pub struct FTInfo {
     }
 }
 
+pub struct CollectionData {
+  pub let storagePath: StoragePath
+  pub let publicPath: PublicPath
+  pub let providerPath: PrivatePath
+
+  init(
+    storagePath: StoragePath,
+    publicPath: PublicPath,
+    providerPath: PrivatePath
+  ) {
+    self.storagePath = storagePath
+    self.publicPath = publicPath
+    self.providerPath = providerPath
+  }
+}
+
 pub struct Listings {
     pub let validItems: [Item]
     pub let invalidItems: [Item]
@@ -31,6 +47,10 @@ pub struct Item {
     pub let isExpired: Bool
     pub let nft: &NonFungibleToken.NFT?
     pub let paymentTokenInfo: FTInfo?
+    pub let conformMetadataViews: Bool
+    pub let collectionData: AnyStruct?
+    pub let display: AnyStruct?
+    pub let rarity: AnyStruct?
 
     init(
         listingResourceId: UInt64,
@@ -39,7 +59,11 @@ pub struct Item {
         isPurchased: Bool,
         isExpired: Bool,
         nft: &NonFungibleToken.NFT?, 
-        paymentTokenInfo: FTInfo?
+        paymentTokenInfo: FTInfo?,
+        conformMetadataViews: Bool,
+        collectionData: AnyStruct?,
+        display: AnyStruct?,
+        rarity: AnyStruct?
     ) {
         self.listingResourceId = listingResourceId
         self.details = details
@@ -48,6 +72,10 @@ pub struct Item {
         self.isExpired = isExpired
         self.nft = nft
         self.paymentTokenInfo = paymentTokenInfo
+        self.conformMetadataViews = conformMetadataViews
+        self.collectionData = collectionData
+        self.display = display
+        self.rarity = rarity
     }
 }
 
@@ -79,7 +107,11 @@ pub fun main(account: Address): Listings {
                 isPurchased: isPurchased,
                 isExpired: isExpired,
                 nft: nil,
-                paymentTokenInfo: nil
+                paymentTokenInfo: nil,
+                conformMetadataViews: false,
+                collectionData: nil,
+                display: nil,
+                rarity: nil
             )
             invalidItems.append(item)
             continue
@@ -90,6 +122,23 @@ pub fun main(account: Address): Listings {
             continue
         }
 
+        let conformMetadataViews = nft!.getType().isSubtype(of: Type<@AnyResource{MetadataViews.Resolver}>())
+        if !conformMetadataViews {
+            continue
+        }
+
+        let display: AnyStruct? = nft!.resolveView(Type<MetadataViews.Display>())
+        let rarity: AnyStruct? = nft!.resolveView(Type<MetadataViews.Rarity>())
+        let nftCollectionData: MetadataViews.NFTCollectionData? = nft!.resolveView(Type<MetadataViews.NFTCollectionData>()) as! MetadataViews.NFTCollectionData?
+        var collectionData: CollectionData? = nil
+        if let data = nftCollectionData {
+            collectionData = CollectionData(
+                storagePath: data.storagePath,
+                publicPath: data.publicPath,
+                providerPath: data.providerPath
+            )
+        }
+
         var ftInfo: FTInfo? = nil
         let rawFtInfo = FTRegistry.getFTInfoByTypeIdentifier(details.salePaymentVaultType.identifier)
         if let _rawFtInfo = rawFtInfo {
@@ -103,7 +152,11 @@ pub fun main(account: Address): Listings {
             isPurchased: isPurchased,
             isExpired: isExpired,
             nft: nft, 
-            paymentTokenInfo: ftInfo
+            paymentTokenInfo: ftInfo,
+            conformMetadataViews: conformMetadataViews,
+            collectionData: collectionData,
+            display: display,
+            rarity: rarity
         )
         validItems.append(item)
     }