please merge

.env

@@ -0,0 +1,3 @@
+REACT_APP_NEAR_NETWORK=testnet
+REACT_APP_MINTBASE_API=511a3b51-2ed5-4a27-b165-a27a01eebe0a 
+CONTRACT_ID=unlockableteststore.mintspace2.testnet

components/Buy.jsx

@@ -1,8 +1,10 @@
+/* eslint-disable @next/next/no-img-element */
+// eslint-disable-next-line @next/next/no-img-element
 import { useEffect, useState } from "react";
 import { Wallet, Chain, Network } from "mintbase";
 
 export const Buy = ({ meta }) => {
-  const [nftdata, setNFTData] = useState();
+  const [nftData, setNFTData] = useState();
 
   useEffect(() => {
     async function fetchGraphQL(operationsDoc, operationName, variables) {
@@ -17,8 +19,7 @@ export const Buy = ({ meta }) => {
           }),
         }
       );
-      //   console.log(`hi: ${await result.json()}`);
-      return await result;
+      return result.json();
     }
     const operations = (metadata_id_) => {
       return `
@@ -40,76 +41,90 @@ export const Buy = ({ meta }) => {
     };
 
     const setbuydata = async () => {
-      setNFTData(
-        await (await fetchGraphQL(operations(meta), "checkNFT", {})).json()
+      const returnedNftData = await fetchGraphQL(
+        operations(meta),
+        "checkNFT",
+        {}
       );
+      setNFTData(returnedNftData.data.mb_views_active_listings[0]);
     };
     setbuydata();
-  }, []);
+  });
+
   const onclkBtn = async () => {
-    console.log(nftdata);
     const { data, error } = await new Wallet().init({
       networkName: Network.testnet,
       chain: Chain.near,
       apiKey: "511a3b51-2ed5-4a27-b165-a27a01eebe0a",
     });
+
     const { wallet } = data;
-    const tokenId = `${nftdata.data.mb_views_active_listings[0].nft_contract_id}:${nftdata.data.mb_views_active_listings[0].token_id}`;
-    const price = `${nftdata.data.mb_views_active_listings[0].price.toLocaleString(
-      "fullwide",
-      { useGrouping: false }
-    )}`;
+    const tokenId = `${nftData.nft_contract_id}:${nftData.token_id}`;
+    const price = `${nftData.price.toLocaleString("fullwide", {
+      useGrouping: false,
+    })}`;
 
-    const marketAddress = nftdata.data.mb_views_active_listings[0].market_id;
+    const marketAddress = nftData.market_id;
 
-    const buyNFT = await wallet.makeOffer(tokenId, price, {
+    await wallet.makeOffer(tokenId, price, {
       marketAddress,
     });
-    console.log(`buynft: ${buyNFT}`);
   };
 
-  const ele = nftdata ? (
-    <section class="section section-buy-nft">
-      <div class="collection">
-        <div class="collection__left">
-          <div class="right">
-            <img
-              src={nftdata.data.mb_views_active_listings[0].media}
-              alt="NFT image"
-              class="collection__nft ma--bottom"
-            />
-            <h2 class="collection__name ma--bottom">
-              {nftdata.data.mb_views_active_listings[0].title}
-            </h2>
-            <p class="collection__description ma--bottom text-base--1">
-              {nftdata.data.mb_views_active_listings[0].description}
-            </p>
-            <span class="collection__price text--h2 ma--bottom">
-              {nftdata.data.mb_views_active_listings[0].price.toLocaleString(
-                "fullwide",
-                { useGrouping: false }
-              ) % 18}
+  const ele = nftData ? (
+    <>
+      <section className="section section-buy-nft">
+        <h1 className="text--h1">
+          Buy This NFT To Unlock This Collection
+        </h1>
+      </section>
+      <section className="section section-buy-nft">
+        <div className="collection">
+          <div className="collection__left">
+            <div className="right">
               <img
-                src="https://cryptologos.cc/logos/near-protocol-near-logo.svg?v=023"
-                alt="NEAR"
-                class="collection__price--img"
+                src={nftData.media}
+                alt="NFT image"
+                className="collection__nft ma--bottom"
               />
-            </span>
-          </div>
-          <div class="left">
-            <button
-              class="btn collection__btn"
-              id="btn-buy-nft"
-              onClick={() => onclkBtn()}
-            >
-              Buy to Unlock
-            </button>
+              <h2 className="collection__name ma--bottom">{nftData.title}</h2>
+              <p className="collection__description ma--bottom text-base--1">
+                {nftData.description}
+              </p>
+              <span className="collection__price text--h2 ma--bottom">
+                {Math.round(
+                  nftData.price.toLocaleString("fullwide", {
+                    useGrouping: false,
+                  }) *
+                    10 ** -24
+                )}
+                <img
+                  src="https://cryptologos.cc/logos/near-protocol-near-logo.svg?v=023"
+                  alt="NEAR"
+                  className="collection__price--img"
+                />
+              </span>
+            </div>
+            <div className="left">
+              <button
+                className="btn collection__btn"
+                id="btn-buy-nft"
+                onClick={() => onclkBtn()}
+              >
+                Buy to Unlock
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </>
   ) : (
-    <h1>hi</h1>
+    <section className="section section-buy-nft">
+      <h1 className="text--h1">
+        Sorry! This NFT is Sold Out. <br />
+        Please Check Other Collections.
+      </h1>
+    </section>
   );
 
   return ele;

components/Footer.jsx

@@ -1,40 +1,40 @@
 export const Footer = () => {
   return (
-    <footer class="flex footer">
-      <div class="footer__div">
-        <div class="flex">
-          <img src="/star.svg" class="footer__logo" />
-          <h2 class="text--h2 footer__title ma--side">Allie eve knox</h2>
+    <footer className="flex footer">
+      <div className="footer__div">
+        <div className="flex">
+          <img src="/star.svg" className="footer__logo" />
+          <h2 className="text--h2 footer__title ma--side">Allie eve knox</h2>
         </div>
-        <div class="">
+        <div className="">
           <ul>
-            <li class="footer__list">
+            <li className="footer__list">
               <a href="#">Privacy Policy</a>
             </li>
-            <li class="footer__list">
+            <li className="footer__list">
               <a href="#">Terms of Service</a>
             </li>
           </ul>
         </div>
       </div>
-      <div class="footer__div">
-        <h4 class="text--h2 footer__title">Follow Me</h4>
-        <div class="">
-          <a href="#" class="footer__link">
-            <img src="/facebook.svg" alt="social-icons" class="footer__img" />
+      <div className="footer__div">
+        <h4 className="text--h2 footer__title">Follow Me</h4>
+        <div className="">
+          <a href="#" className="footer__link">
+            <img src="/facebook.svg" alt="social-icons" className="footer__img" />
           </a>
-          <a href="#" class="footer__link">
+          <a href="#" className="footer__link">
             <img
               src="/instagram-alt.svg"
               alt="social-icons"
-              class="footer__img"
+              className="footer__img"
             />
           </a>
-          <a href="#" class="footer__link">
-            <img src="/twitter.svg" alt="social-icons" class="footer__img" />
+          <a href="#" className="footer__link">
+            <img src="/twitter.svg" alt="social-icons" className="footer__img" />
           </a>
-          <a href="#" class="footer__link">
-            <img src="/google.svg" alt="social-icons" class="footer__img" />
+          <a href="#" className="footer__link">
+            <img src="/google.svg" alt="social-icons" className="footer__img" />
           </a>
         </div>
       </div>

components/HowItWorks.jsx

@@ -1,26 +1,26 @@
 export const HowItWorks = () => {
   return (
-    <section class="section-how-it-works section text--center">
-      <div class="container">
-        <h2 class="text--h2 ma--bottom">How it works</h2>
-        <h1 class="HIW text--h1">Mint, Watch and Sell.</h1>
+    <section className="section-how-it-works section text--center">
+      <div className="container">
+        <h2 className="text--h2 ma--bottom">How it works</h2>
+        <h1 className="HIW text--h1">Mint, Watch and Sell.</h1>
       </div>
-      <div class="container flex">
-        <div class="">
-          <img class="HIW__img" src="/master-card.svg" alt="" />
-          <h3 class="HIW__text">Buy NFT</h3>
+      <div className="container flex">
+        <div className="">
+          <img className="HIW__img" src="/master-card.svg" alt="" />
+          <h3 className="HIW__text">Buy NFT</h3>
         </div>
-        <div class="">
-          <img class="HIW__img" src="/unlock-alt.svg" alt="" />
-          <h3 class="HIW__text">Unlock Content</h3>
+        <div className="">
+          <img className="HIW__img" src="/unlock-alt.svg" alt="" />
+          <h3 className="HIW__text">Unlock Content</h3>
         </div>
-        <div class="">
-          <img class="HIW__img" src="/image-v.svg" alt="" />
-          <h3 class="HIW__text">Watch</h3>
+        <div className="">
+          <img className="HIW__img" src="/image-v.svg" alt="" />
+          <h3 className="HIW__text">Watch</h3>
         </div>
-        <div class="">
-          <img class="HIW__img" src="/process.svg" alt="" />
-          <h3 class="HIW__text">Resell NFT</h3>
+        <div className="">
+          <img className="HIW__img" src="/process.svg" alt="" />
+          <h3 className="HIW__text">Resell NFT</h3>
         </div>
       </div>
     </section>

components/List.jsx

@@ -0,0 +1,116 @@
+import { Wallet, Network, Chain } from "mintbase";
+import { useState, useEffect, useRef } from "react";
+import { MintbaseNFT } from "./mintBaseNFT";
+
+const List = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [nftList, setNftList] = useState();
+  const dataFetchedRef = useRef(false);
+
+  const loadOwnedNFT = async () => {
+    try {
+      const { data: walletData, error } = await new Wallet().init({
+        networkName: Network.testnet,
+        chain: Chain.near,
+        apiKey: process.env.REACT_APP_MINTBASE_API,
+      });
+
+      console.log(process.env.REACT_APP_MINTBASE_API);
+
+      const { wallet } = walletData;
+
+      const { data: details } = await wallet.details();
+
+      if (error) {
+        console.log(error);
+      }
+
+      async function fetchGraphQL(operationsDoc, operationName, variables) {
+        const result = await fetch(
+          "https://interop-testnet.hasura.app/v1/graphql",
+          {
+            method: "POST",
+            body: JSON.stringify({
+              query: operationsDoc,
+              variables: variables,
+              operationName: operationName,
+            }),
+          }
+        );
+        return result.json();
+      }
+      const operations = (accountId, contract_id) => {
+        return `
+        query ownedNFT {
+          mb_views_nft_tokens(
+            distinct_on: metadata_id
+            where: {owner: {_eq: "${accountId}"}, _and: {burned_timestamp: {_is_null: true}}, minter: {_eq: "${accountId}"}, nft_contract_id: {_eq: "${contract_id}"}}
+            ) {
+            nft_contract_id
+            title
+            description
+            media
+            metadata_id
+          }
+        }
+      `;
+      };
+
+      const contract_id = "unlockableteststore.mintspace2.testnet"
+
+      const returnedNftList = await fetchGraphQL(
+        operations(details.accountId , contract_id),
+        "ownedNFT",
+        {}
+      );
+
+      setNftList(returnedNftList.data.mb_views_nft_tokens);
+      setIsLoading(false);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    if (dataFetchedRef.current) return;
+    dataFetchedRef.current = true;
+    loadOwnedNFT();
+  });
+
+  return (
+    <div className="main">
+      <section className="title text--center">
+        <div className="container">
+          <h1 className="HIW text--h1">List Your NFT</h1>
+        </div>
+      </section>
+
+      {isLoading === true ? (
+        <section className="section section-buy-nft">
+          <h2 className="text--h2 ma--bottom">Loading...</h2>
+        </section>
+      ) : (
+        <section className="flex">
+          {nftList.length === 0 ? (
+            <section className="section section-buy-nft">
+              <h2 className="text--h2 ma--bottom">No NFT</h2>
+            </section>
+          ) : (
+            nftList.map((nftData, id) => {
+              return (
+                <MintbaseNFT
+                  nft={nftData}
+                  buttonName={"List for sale"}
+                  route={"list"}
+                  key={id}
+                />
+              );
+            })
+          )}
+        </section>
+      )}
+    </div>
+  );
+};
+
+export default List;