added an NFT item overlay when hovered to display attributes faster a…

frontend/package.json

@@ -17,6 +17,7 @@
     "@terra-money/wallet-kit": "^1.0.15",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
+    "papaparse": "^5.4.1",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-confetti-explosion": "^2.1.2",
@@ -30,6 +31,7 @@
     "vite-tsconfig-paths": "^4.2.1"
   },
   "devDependencies": {
+    "@types/papaparse": "^5.3.14",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",

frontend/src/components/filters/dropdowns/FilterDropdown.module.scss

@@ -6,7 +6,7 @@
 }
 
 .filter__dropdown__container {
-  max-width: 200px;
+  max-width: 210px;
   width: 100%;
   display: flex;
   gap: 24px;
@@ -70,7 +70,7 @@
     border: 1px solid var(--token-dark-700);
 
     border-radius: 8px;
-    z-index: 10;
+    z-index: 1000;
     max-height: 200px;
     box-shadow: 0px 5px 7px 0px #0000009c;
     top: 40px;
@@ -105,7 +105,6 @@
 
 @media (max-width: 590px) {
   .filter__row {
-    // flex-direction: column;
     flex-wrap: wrap;
     align-items: flex-start;
     gap: 4px;

frontend/src/components/filters/helpers.ts

@@ -1,32 +1,37 @@
-import { NFTType } from 'fakeData/mockNFTs';
-import { GalleryFiltersProps } from 'pages/nft/NFTs';
+import { GalleryFiltersProps, CSVItem } from 'pages/nft/NFTs';
 
 export const filterNFTs = (
-  nfts: NFTType[],
+  csvData: CSVItem[],
+  nfts: string[],
   filters: GalleryFiltersProps
 ) => {
-  return nfts.filter((nft) => {
+  const filteredNFTs = nfts.filter((nft) => {
     let match = true;
 
     // Filter by planetNumber, if it's set
     if (filters.planetNumber !== null) {
-      match = match && nft.id === filters.planetNumber;
+      // match = match && nft.id === filters.planetNumber;
     }
 
     if (filters.planetNames.length !== 0) {
-      match = match && filters.planetNames.includes(nft.planet);
+      const nftPlanet = csvData[parseInt(nft)].attributes['Planet'];
+      match = match && filters.planetNames.includes(nftPlanet);
     }
 
     // Filter by planetInhabitants, if it's set
     if (filters.planetInhabitants.length !== 0) {
-      match = match && filters.planetInhabitants.includes(nft.character);
+      const nftInhabitants = csvData[parseInt(nft)].attributes['Inhabitant'];
+      match = match && filters.planetInhabitants.includes(nftInhabitants);
     }
 
     // Filter by planetObjects, if it's set
     if (filters.nftObjects.length !== 0) {
-      match = match && filters.nftObjects.includes(nft.object);
+      const nftObjects = csvData[parseInt(nft)].attributes['Object'];
+      match = match && filters.nftObjects.includes(nftObjects);
     }
 
     return match;
   });
+
+  return filteredNFTs;
 }

frontend/src/components/nft/NFTItem.module.scss

@@ -49,6 +49,141 @@
         z-index: 101;
       }
     }
+
+    .hover__container {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      max-width: 100%;
+      width: 100%;
+      height: 100%;
+      z-index: 102;
+      border-radius: 7%;
+      background-color: #2f2e2dc0;
+      padding: 20px 18px;
+
+      h3 {
+        color: white;
+        font-size: 18px;
+        font-weight: 600;
+        margin-bottom: 12px;
+      }
+
+      .hover__content {
+        color: white;
+        font-size: 16px;
+        font-weight: 600;
+        display: flex;
+        justify-content: flex-start;
+        flex-direction: column;
+        height: 100%;
+
+        .rows {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          justify-content: center;
+          height: 100%;
+        }
+
+        .hover__content__inner {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          div:last-child {
+            text-align: end;
+            font-size: 14px;
+          }
+        }
+      }
+
+      @media ((max-width: 1670px) and (min-width: 1570px)) {
+        padding: 20px 14px;
+
+        h3 {
+          font-size: 14px;
+          margin-bottom: 4px;
+        }
+
+        .hover__content {
+          font-size: 14px;
+
+          .rows {
+            gap: 8px;
+          }
+        }
+      }
+
+      @media ((max-width: 1370px) and (min-width: 1244px)) {
+        padding: 20px 14px;
+
+        h3 {
+          font-size: 14px;
+          margin-bottom: 4px;
+        }
+
+        .hover__content {
+          font-size: 14px;
+
+          .rows {
+            gap: 8px;
+          }
+        }
+      }
+
+      @media ((max-width: 950px) and (min-width: 704px)) {
+        padding: 20px 14px;
+
+        h3 {
+          font-size: 14px;
+          margin-bottom: 4px;
+        }
+
+        .hover__content {
+          font-size: 12px;
+
+          .rows {
+            gap: 4px;
+          }
+        }
+      }
+
+      @media (max-width: 660px) {
+        padding: 20px 14px;
+
+        h3 {
+          font-size: 14px;
+          margin-bottom: 4px;
+        }
+
+        .hover__content {
+          font-size: 12px;
+
+          .rows {
+            gap: 4px;
+          }
+        }
+      }
+
+      @media (max-width: 450px) {
+        padding: 8px 8px;
+
+        h3 {
+          font-size: 14px;
+          margin-bottom: 4px;
+        }
+
+        .hover__content {
+          font-size: 12px;
+
+          .rows {
+            gap: 4px;
+          }
+        }
+      }
+    }
   }
 
   h3 {

frontend/src/components/nft/NFTItem.tsx

@@ -1,8 +1,11 @@
-import { useState } from 'react';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useRef, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import classNames from 'classnames/bind';
 import LoadingCircular from 'components/loading/circular';
 import styles from './NFTItem.module.scss';
+import { useHover } from 'usehooks-ts';
+import { useNFTFromCollection } from 'hooks';
 
 const cx = classNames.bind(styles);
 
@@ -14,10 +17,14 @@ type NFTCardProps = {
 
 const NFTItem = ({ id, imageUrl, title }: NFTCardProps) => {
   const [loading, setLoading] = useState(true);
+  const hoverRef = useRef(null);
+  const isHover = useHover(hoverRef);
+  const { data: nftInfo } = useNFTFromCollection(id)
+  const attributes = nftInfo?.info.extension.attributes;
 
   return (
     <NavLink to={`/nft/${id}`} className={styles.card}>
-      <div className={styles.image__wrapper}>
+      <div className={styles.image__wrapper} ref={hoverRef}>
         {loading && (
           <div className={styles.loading__container}>
             <LoadingCircular />
@@ -29,8 +36,31 @@ const NFTItem = ({ id, imageUrl, title }: NFTCardProps) => {
           alt={title || `NFT ${id}`}
           onLoad={() => setLoading(false)}
         />
+        {isHover && (
+          <div className={styles.hover__container}>
+            <div className={styles.hover__content}>
+              <h3>#{id.toString().padStart(5, '0')}</h3>
+              <div className={styles.rows}>
+                {attributes?.map((attribute: any) => {
+                  if (attribute.trait_type !== "rewards"  && attribute.trait_type !== "broken" && attribute.trait_type !== "staked") {
+                    return (
+                      <div className={styles.hover__content__inner}>
+                        <div className={styles.hover__content__inner__title}>
+                          {attribute.trait_type}
+                        </div>
+                        <div className={styles.hover__content__inner__subtitle}>
+                          {attribute.value}
+                        </div>
+                      </div>
+                    )
+                  }
+                })}
+              </div>
+            </div>
+          </div>
+        )}
       </div>
-      {title && <h3># {title}</h3>}
+      {title && <h3>#{title.toString().padStart(5, '0')}</h3>}
     </NavLink>
   );
 };

frontend/src/pages/nft-view/NFTView.tsx

@@ -117,7 +117,7 @@ export const NFTView = () => {
       <div className={styles.nft__details__container}>
         <div className={styles.header}>
           <div className={styles.collection__title}>Alliance DAO NFT</div>
-          <div className={styles.nft__number}>#{id}</div>
+          <div className={styles.nft__number}>#{id.toString().padStart(5, '0')}</div>
         </div>
         <div className={styles.nft__attributes__container}>
           <div className={styles.attributes}>