integrated 'nft_token' contract function

EdwardsVO · Apr 9, 2022 · 86a4c5d · 86a4c5d
1 parent 279c9d5
commit 86a4c5d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 52 deletions.
diff --git a/frontend/components/NFT/NFTProfile.tsx b/frontend/components/NFT/NFTProfile.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
+import Token from '../../models/Token';
+import { toNEAR } from '../utils';
 
 interface NFTProfileProps {
-  data: any;
+  data: Token;
 }
 
 export default function NFTProfile({ data }: NFTProfileProps) {
@@ -11,29 +13,29 @@ export default function NFTProfile({ data }: NFTProfileProps) {
         <img src="/logo.png" alt="logo" className="w-36" />
       </div>
       <div className="mt-6 mx-3 lg:px-4 lg:w-full lg:text-center">
-        <h2 className="text-figma-100 font-bold text-xl">{data?.collection}</h2>
+        <h2 className="text-figma-100 font-bold text-xl">Collection</h2>
       </div>
       <div className="lg:w-full">
         <div className=" bg-figma-300 rounded-3xl drop-shadow-lg shadow-black p-5 mx-3 mt-2 lg:max-w-xl lg:mx-auto">
           <img
-            src={data?.banner}
-            alt={data?.title}
+            src={data?.metadata?.media}
+            alt={data?.metadata?.title}
             className="rounded-3xl object-cover"
           />
         </div>
         <div className="flex mx-3 lg:mx-0 justify-between mt-3 lg:w-full lg:justify-center">
           <div className="flex w-full lg:w-1/3 justify-between lg:px-8">
             <div className="mt-2">
               <h2 className="text-xl font-semibold text-figma-400">
-                {data?.title}
+                {data?.metadata?.title}
               </h2>
               <h2 className="text-xl font-semibold text-figma-100">
-                {data?.owner}
+                {data?.owner_id}
               </h2>
             </div>
             <div className="mt-2">
               <h2 className="text-xl font-bold text-figma-400 ">
-                {data?.price} N
+                {toNEAR(data?.metadata?.price)} N
               </h2>
             </div>
           </div>

diff --git a/frontend/components/near/near.ts b/frontend/components/near/near.ts
@@ -42,7 +42,7 @@ export const initContract = async () => {
     nearConfig.contractName,
     {
       // View methods are read-only – they don't modify the state, but usually return some value
-      viewMethods: ['obtener_pagina_v2', 'tokens_of'],
+      viewMethods: ['obtener_pagina_v2', 'tokens_of', 'nft_token'],
       // Change methods can modify the state, but you don't receive the returned value when called
       changeMethods: ['minar'],
       // Sender is the account ID to initialize transactions.

diff --git a/frontend/pages/app/nft/[_id].tsx b/frontend/pages/app/nft/[_id].tsx
@@ -2,56 +2,47 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import Layout from '../../../components/Layout';
 import NFTProfile from '../../../components/NFT/NFTProfile';
+import { useNear } from '../../../hooks/useNear';
+import Token from '../../../models/Token';
 
 export default function NFTProfilePage() {
   const router = useRouter();
-  const [nft, setNft] = React.useState({});
-  const activeNFT = router.query._id;
-  const galleryData = [
-    {
-      _id: 0,
-      title: 'Lion King',
-      price: 10,
-      collection: 'Collection Name',
-      banner: '/Lion.jpg',
-      owner: 'mzterdox.near',
-    },
-    {
-      _id: 1,
-      title: 'NEARLien 0',
-      price: 10,
-      collection: 'Collection Name',
-      banner: '/12.png',
-      owner: 'mzterdox.near',
-    },
-    {
-      _id: 2,
-      title: 'Blitzcreg Bop',
-      price: 10,
-      collection: 'Collection Name',
-      banner: '/blitz.png',
-      owner: 'mzterdox.near',
-    },
-    {
-      _id: 3,
-      title: 'Yakuza Kuza',
-      price: 10,
-      collection: 'Collection Name',
-      banner: '/yakuza.png',
-      owner: 'mzterdox.near',
-    },
-  ];
+  const [nft, setNft] = React.useState<Token>();
+  const [nearContext] = useNear();
 
-  React.useEffect(() => {
-    const getNFTData = () => {
-      for (let x = 0; x < galleryData.length; x++) {
-        if (galleryData[x]._id.toString() == activeNFT) {
-          setNft(galleryData[x]);
-        }
+
+  const id = router.query.token_id;
+
+  const start = async () => {
+    const idInt = await router.query;
+    const token_id = String(idInt);
+    console.log(token_id.toString());
+    try {
+      if (token_id) {
+        // @ts-ignore: Unreachable code error
+        const token = await nearContext.contract.nft_token({token_id: token_id})
+        setNft(token);
       }
+    } catch (e) {
+      router.push('/app');
+    }
+  };
+
+
+
+  React.useEffect(() => {
+    if (!id) {
+      console.log(id)
+      return;
+    }
+    const startClass = async () => {
+      console.log('starting...')
+      await start();
     };
-    getNFTData();
-  }, [activeNFT]);
+    startClass();
+  }, [id]);
+
+
   return (
     <Layout>
       <div className="p-4">