Merge pull request dabit3#3 from vytjan/v0

V0

Author: Kodonas

lib/api.js

@@ -4,10 +4,19 @@ export const getMetadataById = async (id, contract) => {
 
     const tokenUri = await contract.tokenURI(id)
     const ipfs_gateway = "https://daturians.mypinata.cloud/ipfs/"
-    
+
     let newUri = tokenUri.replace("ipfs://", ipfs_gateway)
     const meta = await axios.get(newUri)
     let imgUri = meta.data.image.replace("ipfs://", ipfs_gateway)
+    // append class name
+    meta.data.extras.forEach(element => {
+      element['className'] = element.trait_type.toLowerCase().replace(" ", "-").replace("/","-");
+    });
+    meta.data.attributes.forEach(element => {
+      console.log(element);
+      element['className'] = element.trait_type.toLowerCase().replace(" ", "-").replace("/","-");
+    });
+
     let item = {
       tokenId: id,
       image: imgUri,
@@ -18,3 +27,9 @@ export const getMetadataById = async (id, contract) => {
     return item
   };
 
+  export const getQueryMetadata = (query, items) => {
+
+    const resultItems = items.filter(item => item.name.includes(query) ? item : null);
+
+    return resultItems
+  };

package-lock.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^1.1.7",
     "@chakra-ui/react": "^1.8.6",
     "@nomiclabs/hardhat-ethers": "^2.0.5",
     "@nomiclabs/hardhat-waffle": "^2.0.3",

package.json

@@ -0,0 +1,36 @@
+import {
+    Input,
+    IconButton,
+    InputGroup,
+  } from "@chakra-ui/react";
+  import { SearchIcon } from "@chakra-ui/icons";
+
+ /**
+ * search box component
+ * searches for matching names
+ * @return {object} SearchBox component
+ */
+const SearchBox = ({query, setQuery, handleSubmit }) => {
+  
+    return (
+        <form onSubmit={handleSubmit} className="max-w-xs">
+        <InputGroup pb="1rem">
+            <Input
+            placeholder="Search for Daturian ID"
+            variant="ghost"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            />
+            <IconButton
+            aria-label="Search"
+            icon={<SearchIcon />}
+            onClick={handleSubmit}
+            bg="black"
+            color="white"
+            />
+        </InputGroup>
+        </form>
+    );
+  };
+
+export default SearchBox

pages/components/search.js

@@ -5,13 +5,16 @@ import { trackWindowScroll } from 'react-lazy-load-image-component';
 
 import { nftcontractaddress } from '../config'
 import DaturiansNFT from '../artifacts/Daturians.json'
-import { getMetadataById } from "../lib/api";
+import { getMetadataById, getQueryMetadata } from "../lib/api";
 
 import NFT from './components/nft';
+import SearchBox from './components/search';
 
 // export default function Home({scrollPosition}) {
 const Home = ({scrollPosition}) => {
+  const [totalNfts, setTotalNfts] = useState([])
   const [nfts, setNfts] = useState([])
+  const [query, setQuery] = useState("");
   const [loadingState, setLoadingState] = useState('not-loaded')
   const ipfs_gateway = "https://daturians.mypinata.cloud/ipfs/"
 
@@ -26,10 +29,7 @@ const Home = ({scrollPosition}) => {
     const contract = new ethers.Contract(nftcontractaddress, DaturiansNFT.abi, provider)
     // get minted number
     const minted = await contract.totalMinted.call();
-    // console.log(minted.toNumber());
-    // const data = await contract.walletOfOwner("0x55d9fc8d5f84cf151d9578c6713a0c0ec35e0e5f")
     const data = Array.from({length: minted}, (x, i) => i+1);
-    // console.log(data);
 
     /*
     *  map over items returned from smart contract and format 
@@ -38,7 +38,6 @@ const Home = ({scrollPosition}) => {
     const ipfsUrl = 'https://daturians.mypinata.cloud/ipfs/QmWeRSySd3RJ9BhoRHzpDsu8PjjNnGYhWwHn44BKDpgvJG/'
     const items = await Promise.all(data.map(async i => {
 
-      // let item = await getMetadataById(i, contract);
       const currentUrl = ipfsUrl+String(i)+'.json';
       const meta = await axios.get(currentUrl)
       let imgUri = meta.data.image.replace("ipfs://", ipfs_gateway)
@@ -52,45 +51,24 @@ const Home = ({scrollPosition}) => {
 
       return item
     }))
-
+    // console.log(items[13])
+    setTotalNfts(items)
     setNfts(items)
     setLoadingState('loaded') 
   }
 
-  // if (loadingState === 'loaded' && !nfts.length) return (<h1 className="px-20 py-10 text-3xl">No items in marketplace</h1>)
-  if (!nfts.length) return (<h1 className="px-20 py-10 text-3xl">Loading Daturians NFT</h1>)
-  // return (
-  //   <div className="flex justify-center">
-  //     <div className="px-4" style={{ maxWidth: '1600px' }}>
-  //       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
-  //           {nfts.map((nft) => (
-  //               <div
-  //                 key={nft.tokenId} 
-  //                 className="border shadow rounded-xl overflow-hidden"
-  //                 >
-  //                 <Link href={`/single_nft/${nft.tokenId}`}>
-  //                   <a>
-  //                     <img 
-  //                       src={nft.image}
-  //                       alt={nft.data.image}
-  //                       />
-  //                     <div className="p-4">
-  //                       <p style={{ height: '64px' }} className="text-2xl font-semibold">{nft.name}</p>
-  //                       <div style={{ height: '70px', overflow: 'hidden' }}>
-  //                         <p className="text-gray-400">{nft.description}</p>
-  //                       </div>
-  //                     </div>
-  //                   </a>
-  //                 </Link>
-  //               </div>
-  //             ))}
-  //         </div>
-  //     </div>
-  //   </div>
-  // )
+  const handleSubmit = async (e) => {
+    await e.preventDefault();
+    const res = getQueryMetadata(query, totalNfts);
+    setNfts(res);
+  }
+
+  if (!totalNfts.length) return (<h1 className="px-20 py-10 text-3xl">Loading Daturians NFT</h1>)
+  // if (!nfts.length) return (<h1 className="px-20 py-10 text-3xl">No Daturians match your search</h1>)
   return (
     <div className="flex justify-center">
       <div className="px-4" style={{ maxWidth: '1600px' }}>
+      <SearchBox handleSubmit={handleSubmit} query={query} setQuery={setQuery} />
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
             {nfts.map((nft) => (
                 <NFT key={nft.tokenId} scrollPosition={scrollPosition} values={nft} />