wip: single nft view

terra-money · Dec 11, 2023 · f0225fd · f0225fd
1 parent 0a848ab
commit f0225fd
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 52 deletions.
diff --git a/frontend/src/hooks/useNFTFromCollection.tsx b/frontend/src/hooks/useNFTFromCollection.tsx
@@ -3,9 +3,11 @@ import { AllNftInfoResponseForMetadata } from "types/AllianceNftCollection"
 import { contracts } from "config"
 import { useAppContext } from "contexts"
 
-const useNFTFromCollection = (token_id: string | number) => {
+const useNFTFromCollection = (token_id: string | number | undefined) => {
   const { chainId, lcd } = useAppContext()
 
+  const token = token_id ? token_id.toString() : ""
+
   return useQuery<AllNftInfoResponseForMetadata, Error>({
     queryKey: ["nft_info", token_id],
     queryFn: () => {
@@ -14,7 +16,7 @@ const useNFTFromCollection = (token_id: string | number) => {
           contracts[chainId].collection,
           {
             all_nft_info: {
-              token_id: token_id.toString(),
+              token_id: token,
             },
           }
         )

diff --git a/frontend/src/pages/nft-view/NFTView.tsx b/frontend/src/pages/nft-view/NFTView.tsx
@@ -1,36 +1,58 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { mockNFTs } from 'fakeData/mockNFTs';
-import { useParams } from 'react-router-dom';
-import styles from './NFTView.module.scss';
-import { useMediaQuery } from 'usehooks-ts';
-import { NFTViewMobile } from './NFTViewMobile';
-import StarMap from 'components/starmap';
+import { mockNFTs } from "fakeData/mockNFTs"
+import { useParams } from "react-router-dom"
+import styles from "./NFTView.module.scss"
+import { useMediaQuery } from "usehooks-ts"
+import { NFTViewMobile } from "./NFTViewMobile"
+// import StarMap from "components/starmap"
+import { useNFTFromCollection } from "hooks"
+
+type NFTDetail = Record<string, string>
 
 export const NFTView = () => {
-  const { id } = useParams();
-  const allNFTs = mockNFTs;
-  const nft = allNFTs[Number(id)];
+  const { id } = useParams()
+  const { data: nftInfo } = useNFTFromCollection(id)
+
+  const ipfsUrl = "https://ipfs.io/ipfs/{id}"
+
+  const details: NFTDetail = {}
+
+  if (nftInfo?.info?.extension?.attributes) {
+    nftInfo?.info?.extension?.attributes.map((attr) => {
+      if (attr.trait_type !== "broken" && attr.trait_type !== "rewards") {
+        details[attr.trait_type] = attr.value
+      }
+    })
+  }
 
-  const isMobile = useMediaQuery('(max-width: 976px)');
+  const allNFTs = mockNFTs
+  const nft = allNFTs[Number(id)]
+
+  const isMobile = useMediaQuery("(max-width: 976px)")
 
   if (!id) {
-    return (
-      <div>
-        NFT Not Found
-      </div>
-    )
+    return <div>NFT Not Found</div>
   }
 
   if (isMobile) {
-    return (
-      <NFTViewMobile nft={nft} />
-    )
+    return <NFTViewMobile nft={nft} />
   }
 
   return (
     <div className={styles.nft__view}>
       <div className={styles.nft__image__container}>
-        <img className={styles.image} src={nft.image} alt="NFT" />
+        <img
+          className={styles.image}
+          src={
+            nftInfo?.info.extension.image
+              ? ipfsUrl.replace(
+                  "{id}",
+                  nftInfo?.info.extension.image.split("ipfs://")[1]
+                )
+              : "" // stick filler image src if query fails.
+          }
+          alt="NFT"
+        />
       </div>
 
       <div className={styles.nft__details__container}>
@@ -42,42 +64,25 @@ export const NFTView = () => {
           <div className={styles.attributes}>
             <div className={styles.row}>
               <div className={styles.attribute__title}>Unique ID</div>
-              <div className={styles.attribute__value}>{nft.id}</div>
-            </div>
-            <div className={styles.row}>
-              <div className={styles.attribute__title}>Biome</div>
-              <div className={styles.attribute__value}>{nft.biome}</div>
-            </div>
-            <div className={styles.row}>
-              <div className={styles.attribute__title}>Character</div>
-              <div className={styles.attribute__value}>{nft.character}</div>
-            </div>
-            <div className={styles.row}>
-              <div className={styles.attribute__title}>Object</div>
-              <div className={styles.attribute__value}>{nft.object}</div>
-            </div>
-            <div className={styles.row}>
-              <div className={styles.attribute__title}>Rarity Score</div>
-              <div className={styles.attribute__value}>{nft.rarityScore}</div>
-            </div>
-            <div className={styles.row}>
-              <div className={styles.attribute__title}>Rewards Accrued</div>
-              <div className={styles.attribute__value}>{nft.rewards}</div>
-            </div>
-            <div className={styles.row}>
-              <div className={styles.attribute__title}>Claimed</div>
-              {/* <div className={styles.attribute__value}>{nft.claimed}</div> */}
-              <div className={styles.attribute__value}>24 Dec 2023</div>
+              <div className={styles.attribute__value}>{id}</div>
             </div>
+            {Object.entries(details).map((entry, i) => {
+              return (
+                <div key={"detail_entry" + i} className={styles.row}>
+                  <div className={styles.attribute__title}>{entry[0]}</div>
+                  <div className={styles.attribute__value}>{entry[1]}</div>
+                </div>
+              )
+            })}
           </div>
 
-          <div className={styles.star__map}>
+          {/* <div className={styles.star__map}>
             <StarMap planet={nft.biome} />
-          </div>
+          </div> */}
         </div>
 
-        <button className={styles.button}>Break NFT & Claim Rewards</button>
+        {/* <button className={styles.button}>Break NFT & Claim Rewards</button> */}
       </div>
     </div>
-  );
-};
+  )
+}