Added: LISTING tokens fully

components/Buy.jsx

@@ -88,7 +88,8 @@ export const Buy = ({ meta }) => {
               {nftdata.data.mb_views_active_listings[0].price.toLocaleString(
                 "fullwide",
                 { useGrouping: false }
-              ) % 18}
+              ) *
+                10 ** -24}
               <img
                 src="https://cryptologos.cc/logos/near-protocol-near-logo.svg?v=023"
                 alt="NEAR"
@@ -109,7 +110,9 @@ export const Buy = ({ meta }) => {
       </div>
     </section>
   ) : (
-    <h1>hi</h1>
+    <section class="section section-buy-nft">
+      <h1 className="text--h1">Sorry, You have to buy the nft.</h1>
+    </section>
   );
 
   return ele;

components/Minter.jsx

@@ -0,0 +1,131 @@
+import { useForm } from "react-hook-form";
+import { Wallet, Chain, Network, MetadataField } from "mintbase";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+
+const Minter = () => {
+  const router = useRouter();
+  const [nftTitle, setNftTitle] = useState();
+  const [nftDescription, setNftDescription] = useState();
+  const [nftImage, setNftImage] = useState();
+  const [nftAmount, setNftAmount] = useState();
+  // console.log(nftImage);
+  const onClickMint = async (e) => {
+    const formData = {
+      title: nftTitle,
+      description: nftDescription,
+      image: nftImage,
+      amount: Number(nftAmount),
+    };
+    console.log("hello maongus");
+    e.preventDefault();
+    const { data, error } = await new Wallet().init({
+      networkName: Network.testnet,
+      chain: Chain.near,
+      apiKey: "511a3b51-2ed5-4a27-b165-a27a01eebe0a",
+    });
+    const { wallet } = data;
+
+    const { data: fileUploadResult, error: fileError } =
+      await wallet.minter.uploadField(MetadataField.Media, formData.image);
+
+    if (fileError) {
+      console.error("ERROR : ", fileError);
+    }
+
+    await wallet.minter.setMetadata({
+      title: formData.title,
+      description: formData.description,
+    });
+    const mintData = await wallet.mint(
+      formData.amount,
+      "neimand7777.mintspace2.testnet",
+      undefined,
+      undefined,
+      undefined
+    );
+    // if (mintData) {
+    //   router.push("/list");
+    // }
+  };
+
+  return (
+    <div className="main">
+      <section className="title text--center">
+        <div className="container">
+          <h1 className="HIW text--h1">Create Collection</h1>
+          <h2 className="text--h2 ma--bottom">
+            Mint the NFT, Upload the Videos and Create the collection.
+          </h2>
+        </div>
+      </section>
+
+      <section className="section section-collection ma--bottom-lg">
+        <form>
+          <div className="">
+            <label htmlFor="form-title">Name </label>
+            <input
+              type="text"
+              name="title"
+              id="form-title"
+              value={nftTitle}
+              onChange={(e) => {
+                setNftTitle(e.currentTarget.value);
+              }}
+              className="input input__text"
+              placeholder="Halloween Nights NFT"
+            />
+          </div>
+          <div className="">
+            <label htmlFor="form-title">Description </label>
+            <textarea
+              name="description"
+              id="form-description"
+              rows="8"
+              value={nftDescription}
+              onChange={(e) => {
+                setNftDescription(e.currentTarget.value);
+              }}
+              placeholder="This a NFT that containes 25+ Halloween Nights collections."
+            ></textarea>
+          </div>
+          <div className="">
+            <label htmlFor="form-title"> Image </label>
+            <input
+              type="file"
+              accept="image/*"
+              name="title"
+              //   value={nftImage}
+              onChange={(e) => {
+                setNftImage(e.currentTarget.files[0]);
+              }}
+              id="form-nftImage"
+            />
+          </div>
+
+          <div className="">
+            <label htmlFor="form-nft-amount"> Amount to mint </label>
+            <input
+              type="number"
+              name="amount"
+              id="form-nft-amount"
+              value={nftAmount}
+              onChange={(e) => {
+                setNftAmount(e.currentTarget.value);
+              }}
+            />
+          </div>
+          <button
+            className="btn btn--primary text-base--1 ma--top-side"
+            id="btn-mint-nft"
+            onClick={(e) => onClickMint(e)}
+          >
+            Mint NFT
+          </button>
+        </form>
+      </section>
+    </div>
+  );
+};
+
+export default Minter;

package.json

@@ -15,6 +15,7 @@
     "mintbase": "^0.8.3",
     "next": "13.0.3",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.40.0"
   }
 }

pages/collection/[metadata_id].jsx

@@ -31,7 +31,9 @@ export default function SingleCollection() {
             signerRes,
           },
         });
-        setDat(res);
+        console.log(`res not json: ${res}`);
+        console.log(`res: ${res.json()}`);
+        setDat(res.json());
       } catch (error) {
         setErr(error);
         console.log(error);
@@ -49,6 +51,7 @@ export default function SingleCollection() {
       <h1 className="text--h1">Checking Access... Please wait</h1>
     </section>
   );
+  console.log(`dat: ${dat}`);
   const ele = dat ? (
     <>
       <header className="header">
@@ -82,7 +85,9 @@ export default function SingleCollection() {
               return <MediaCollection img={img} />;
             })
           ) : (
-            <h1>hi</h1>
+            <section class="section section-buy-nft">
+              <h1 className="text--h1">Sorry, You have to buy the nft.</h1>
+            </section>
           )}
         </div>
       </section>

pages/list.jsx

@@ -0,0 +1,107 @@
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+const List = () => {
+  const router = useRouter();
+  const [nftData, setNftData] = useState({});
+  useEffect(() => {
+    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 await result.json();
+    }
+    let nft_contract_id = "neimand7777.mintspace2.testnet";
+    const operations = (nft_contract_id) => {
+      return `
+      query MyQuery {
+        mb_views_nft_tokens(
+          where: {nft_contract_id: {_eq: "${nft_contract_id}"}}
+          order_by: {token_id: desc, minted_timestamp: desc}
+          limit: 1
+        ) {
+          description
+          media
+          metadata_id
+          minter
+          owner
+          title
+          copies
+          token_id
+          nft_contract_id
+        }
+      }
+    `;
+    };
+
+    async function fetchCheckNFT() {
+      const { errors, data } = await fetchGraphQL(
+        operations(nft_contract_id),
+        "MyQuery",
+        {}
+      );
+      // console.log(data.mb_views_nft_tokens[0]);
+      setNftData(data.mb_views_nft_tokens[0]);
+    }
+    fetchCheckNFT();
+  }, []);
+  //   const [data, setData] = useState();
+  //   const [errors, setErrors] = useState();
+
+  console.log(nftData);
+
+  const ele = nftData ? (
+    <>
+      <div class="">
+        <img src={nftData.media} alt="NFT Image" class="ma--bottom" />
+      </div>
+      <section class="title text--center">
+        <div class="container">
+          <h1 class="HIW text--h1">Create Collection</h1>
+          <h2 class="text--h2 ma--bottom">
+            Mint the NFT, Upload the Videos and Create the collection.
+          </h2>
+        </div>
+      </section>
+
+      <section class="section section-collection ma--bottom-lg">
+        <form id="form-list-nft">
+          <div class="">
+            <label for="form-nft-amount"> Price to List </label>
+            <input
+              type="number"
+              name="amount"
+              id="input-list-price"
+              placeholder="NEAR"
+            />
+          </div>
+          <button
+            class="btn btn--primary text-base--1 ma--top-side"
+            id="btn-list-nft"
+            onClick={() => {
+              router.push("/uploadFiles");
+            }}
+          >
+            List NFT
+          </button>
+        </form>
+      </section>
+    </>
+  ) : (
+    <>
+      <h1>hi</h1>
+    </>
+  );
+  return ele;
+};
+
+export default List;

pages/minter.jsx

@@ -0,0 +1,11 @@
+import Minter from "./../components/Minter";
+
+const Mint = () => {
+  return (
+    <>
+      <Minter />
+    </>
+  );
+};
+
+export default Mint;