added nft to dashboard

Aletheia-Data · Sep 18, 2022 · 8aecdd0 · 8aecdd0
1 parent b9f4be7
commit 8aecdd0
Show file tree

Hide file tree

Showing 9 changed files with 247 additions and 12 deletions.
diff --git a/src/_start/helpers/GetCollectionPageColumns.tsx b/src/_start/helpers/GetCollectionPageColumns.tsx
@@ -92,8 +92,6 @@ export const getCollectionPageColumns = (
       {
         title: "Action",
         cells: data?.map((recordItem: Record) => {
-          console.log(recordItem);
-
           if (
             recordItem.status === "on_line" ||
             recordItem.status === "under_review"

diff --git a/src/_start/partials/components/NFTTimeline/index.tsx b/src/_start/partials/components/NFTTimeline/index.tsx
@@ -0,0 +1,232 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from "react";
+import { Ktsvg, truncate } from "../../../helpers";
+import { Dropdown1 } from "../../content/dropdown/Dropdown1";
+import gql from "graphql-tag";
+import { useQuery } from "@apollo/react-hooks";
+import { OPENSEA } from "setup/web3js";
+
+type Props = {
+  className: string;
+};
+
+const NFTTimeline: React.FC<Props> = ({ className }) => {
+  const NFTS_QUERY = gql`
+    query latestNfts {
+      nfts(limit: 5, sort: "createdAt:desc", where: {}) {
+        id
+        cid
+        asset {
+          id
+        }
+        txReceipt
+        createdAt
+      }
+    }
+  `;
+
+  var { data, loading, error } = useQuery(NFTS_QUERY, {
+    variables: {},
+  });
+
+  console.log(data);
+
+  const NFTS_QUERY_ALL = gql`
+    query NFTCount {
+      nftsConnection {
+        groupBy {
+          cid {
+            key
+            connection {
+              aggregate {
+                count
+                totalCount
+              }
+            }
+          }
+        }
+      }
+    }
+  `;
+
+  var {
+    data: dataCount,
+    loading: loadingCount,
+    error,
+  } = useQuery(NFTS_QUERY_ALL, {
+    variables: {},
+  });
+
+  if (loading || loadingCount) {
+    return (
+      <div className={`card ${className}`}>
+        {/* begin::Header */}
+        <div className="card-header align-items-center border-0 mt-5">
+          <h3 className="card-title align-items-start flex-column">
+            <span className="fw-bolder text-dark fs-3">PDNFTs</span>
+            <span className="text-muted mt-2 fw-bold fs-6">Loading ...</span>
+          </h3>
+          <div className="card-toolbar">
+            {/* begin::Dropdown */}
+            <button
+              type="button"
+              className="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
+              data-kt-menu-trigger="click"
+              data-kt-menu-placement="bottom-end"
+              data-kt-menu-flip="top-end"
+            >
+              <Ktsvg
+                path="/media/icons/duotone/Layout/Layout-4-blocks-2.svg"
+                className="svg-icon-1"
+              />
+            </button>
+            <Dropdown1 />
+            {/* end::Dropdown */}
+          </div>
+        </div>
+        {/* end::Header */}
+
+        {/* begin::Body */}
+        <div className="card-body pt-3">
+          {/* <begin::Timeline */}
+          <div className="timeline-label">
+            {/* begin::Item */}
+            <div className="timeline-item">
+              {/* begin::Label */}
+              <div className="timeline-label fw-bolder text-gray-800 fs-6">
+                00:00
+              </div>
+              {/* end::Label */}
+
+              {/* begin::Badge */}
+              <div className="timeline-badge">
+                <i className="fa fa-genderless text-success fs-1"></i>
+              </div>
+              {/* end::Badge */}
+
+              {/* begin::Content */}
+              <div className="timeline-content d-flex">
+                <span className="fw-bolder text-gray-800 ps-3">
+                  Loading ...
+                </span>
+              </div>
+              {/* end::Content */}
+            </div>
+            {/* end::Item */}
+          </div>
+          {/* <end::Timeline */}
+        </div>
+
+        {/* <end: Card Body */}
+      </div>
+    );
+  }
+
+  console.log(data);
+
+  return (
+    <div className={`card ${className}`}>
+      {/* begin::Header */}
+      <div className="card-header align-items-center border-0 mt-5">
+        <h3 className="card-title align-items-start flex-column">
+          <span className="fw-bolder text-dark fs-3">PDNFTs</span>
+          <span className="text-muted mt-2 fw-bold fs-6">
+            {
+              dataCount.nftsConnection.groupBy.cid[0].connection.aggregate
+                .totalCount
+            }{" "}
+            NFTs
+          </span>
+        </h3>
+        <div className="card-toolbar">
+          {/* begin::Dropdown 
+          <button
+            type="button"
+            className="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
+            data-kt-menu-trigger="click"
+            data-kt-menu-placement="bottom-end"
+            data-kt-menu-flip="top-end"
+          >
+            <Ktsvg
+              path="/media/icons/duotone/Layout/Layout-4-blocks-2.svg"
+              className="svg-icon-1"
+            />
+          </button>
+          <Dropdown1 />
+          */}
+          {/* end::Dropdown */}
+        </div>
+      </div>
+      {/* end::Header */}
+
+      {/* begin::Body */}
+      <div className="card-body pt-3">
+        {/* <begin::Timeline */}
+        <div className="timeline-label">
+          {data.nfts.map(function (item: any) {
+            let txReceipt = item.txReceipt;
+            let cid = item.cid;
+            let time = new Date(item.createdAt);
+            let asset = item.asset;
+
+            const getLinkAsset = (cid: string, item: any) => {
+              let url = item?.id ? `/single/src/${cid}?assetId=${item.id}` : ``;
+
+              return (
+                <a href={url} target={""}>
+                  {`${truncate(`${cid}`, 15)}`}
+                </a>
+              );
+            };
+
+            let message = `NFT creado para CID:`;
+            let badge_color = `color-xls`;
+
+            const getLinkOpensea = (item: any) => {
+              let url = `${OPENSEA}/${item.events["Transfer"]["address"]}/${item.events["Transfer"]["returnValues"].tokenId}`;
+
+              return (
+                <a href={url} target={"_blank"}>
+                  {`${truncate(`${item.transactionHash}`, 15)}`}
+                </a>
+              );
+            };
+
+            return (
+              <div className="timeline-item" key={`import_${item.id}}`}>
+                {/* begin::Label */}
+                <div className="timeline-label fw-bolder text-gray-800 fs-6">
+                  {time.toLocaleTimeString([], {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })}
+                </div>
+                {/* end::Label */}
+
+                {/* begin::Badge */}
+                <div className="timeline-badge">
+                  <i className={`fa fa-genderless ${badge_color} fs-1`}></i>
+                </div>
+                {/* end::Badge */}
+
+                {/* begin::Content */}
+                <div className="timeline-content d-flex">
+                  <span className="fw-bolder text-gray-800 ps-3">
+                    {`${message}`} {getLinkAsset(cid, asset)} <br />
+                    {txReceipt ? getLinkOpensea(txReceipt) : null}
+                  </span>
+                </div>
+                {/* end::Content */}
+              </div>
+            );
+          })}
+        </div>
+        {/* <end::Timeline */}
+      </div>
+
+      {/* <end: Card Body */}
+    </div>
+  );
+};
+
+export { NFTTimeline };
diff --git a/src/_start/partials/components/NFTTimeline/timeline.scss b/src/_start/partials/components/NFTTimeline/timeline.scss
diff --git a/src/_start/partials/components/Stats/index.tsx b/src/_start/partials/components/Stats/index.tsx
@@ -411,7 +411,6 @@ const Stats: React.FC<Props> = ({
                     />
                   );
                 };
-                console.log(activeTabTotal);
 
                 return (
                   <div

diff --git a/src/_start/partials/components/index.ts b/src/_start/partials/components/index.ts
@@ -4,5 +4,6 @@ export * from "./BigUploader";
 export * from "./TypeStats";
 export * from "./Achievements";
 export * from "./Timeline";
+export * from "./NFTTimeline";
 export * from "./LibraryStats";
 export * from "./MiniSearchService";
diff --git a/src/_start/partials/layout/sidebar-partials/SidebarGeneral.tsx b/src/_start/partials/layout/sidebar-partials/SidebarGeneral.tsx
@@ -171,14 +171,15 @@ export const SidebarGeneral: React.FC<Props> = ({
           },
           body: JSON.stringify({
             cid: props.alexandrias[0].cid,
+            asset: props.alexandrias[0].id,
             txReceipt: tx,
           }),
         })
           .then((response) => response.json())
           .then((newData) => {
             console.log("minted new nft: ", newData);
             setIsLoadingMinting(false);
-            updateNFTList(props.alexandrias[0].cid);
+            updateNFTList(props.alexandrias[0].cid, props.alexandrias[0].id);
           })
           .catch((err) => {
             console.log(err);

diff --git a/src/app/pages/dashboards/start-dashboard/StartDashboardPage.tsx b/src/app/pages/dashboards/start-dashboard/StartDashboardPage.tsx
@@ -4,6 +4,7 @@ import {
   BigUploader,
   LibraryStats,
   Timeline,
+  NFTTimeline,
 } from "_start/partials/components";
 import { CreateAppModal } from "../_modals/create-app-stepper/CreateAppModal";
 import { Stats, TypeStats } from "../../../../_start/partials/components";
@@ -73,7 +74,9 @@ export const StartDashboardPage: React.FC = () => {
 
       {/* begin::Row */}
       <div className="row g-0 g-xl-5 g-xxl-8">
-        <div className="col-xl-4" />
+        <div className="col-xl-4">
+          <NFTTimeline className="card-stretch mb-5 mb-xxl-8" />
+        </div>
 
         <div className="col-xl-8">
           <Stats

diff --git a/src/app/pages/single/start-dashboard/SinglePageWrapper.tsx b/src/app/pages/single/start-dashboard/SinglePageWrapper.tsx
@@ -157,11 +157,10 @@ export function SinglePageWrapper(): JSX.Element {
     setMinisearchActive(!minisearchActive);
   };
 
-  async function refreshNfts(cid: string) {
+  async function refreshNfts(cid: string, assetId: string) {
     try {
-      console.log("Refreshing nfts list");
-
-      return getMintedNFT(cid).then((nfts) => {
+      return getMintedNFT(cid, assetId).then((nfts) => {
+        console.log("Refreshing nfts list: ", nfts);
         setNftList(nfts);
       });
     } catch (error) {
@@ -170,7 +169,9 @@ export function SinglePageWrapper(): JSX.Element {
   }
 
   useEffect(() => {
-    refreshNfts(component?.props?.data?.cid);
+    if (!component?.props?.data?.cid || !component?.props?.data?.id) return;
+
+    refreshNfts(component?.props?.data?.cid, component?.props?.data?.id);
   }, [component?.props?.data?.cid]);
 
   if (component?.props?.data) {

diff --git a/src/setup/web3js/index.js b/src/setup/web3js/index.js
@@ -47,8 +47,8 @@ export async function getOwnersNFT (cid) {
   return owners;
 }
 
-export async function getMintedNFT (cid) {
-  const endpoint = `${process.env.REACT_APP_API_ENDPOINT}/nfts/?cid=${cid}&_sort=createdAt:DESC`;
+export async function getMintedNFT (cid, asset_id) {
+  const endpoint = `${process.env.REACT_APP_API_ENDPOINT}/nfts/?cid=${cid}&asset=${asset_id}&_sort=createdAt:DESC`;
   return fetch(endpoint, {
     method: "get",
     headers: {