From 8aecdd072fdad35c5f46bd0b6ec4e6a6069c65ad Mon Sep 17 00:00:00 2001 From: EnzoVezzaro Date: Sun, 18 Sep 2022 17:18:20 -0400 Subject: [PATCH] added nft to dashboard --- .../helpers/GetCollectionPageColumns.tsx | 2 - .../partials/components/NFTTimeline/index.tsx | 232 ++++++++++++++++++ .../components/NFTTimeline/timeline.scss | 0 .../partials/components/Stats/index.tsx | 1 - src/_start/partials/components/index.ts | 1 + .../sidebar-partials/SidebarGeneral.tsx | 3 +- .../start-dashboard/StartDashboardPage.tsx | 5 +- .../start-dashboard/SinglePageWrapper.tsx | 11 +- src/setup/web3js/index.js | 4 +- 9 files changed, 247 insertions(+), 12 deletions(-) create mode 100644 src/_start/partials/components/NFTTimeline/index.tsx create mode 100644 src/_start/partials/components/NFTTimeline/timeline.scss diff --git a/src/_start/helpers/GetCollectionPageColumns.tsx b/src/_start/helpers/GetCollectionPageColumns.tsx index dd4b70e..ba65196 100644 --- 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 new file mode 100644 index 0000000..ab90ed7 --- /dev/null +++ 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 = ({ 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 ( +
+ {/* begin::Header */} +
+

+ PDNFTs + Loading ... +

+
+ {/* begin::Dropdown */} + + + {/* end::Dropdown */} +
+
+ {/* end::Header */} + + {/* begin::Body */} +
+ {/* + {/* begin::Item */} +
+ {/* begin::Label */} +
+ 00:00 +
+ {/* end::Label */} + + {/* begin::Badge */} +
+ +
+ {/* end::Badge */} + + {/* begin::Content */} +
+ + Loading ... + +
+ {/* end::Content */} +
+ {/* end::Item */} +
+ {/* + + {/* + ); + } + + console.log(data); + + return ( +
+ {/* begin::Header */} +
+

+ PDNFTs + + { + dataCount.nftsConnection.groupBy.cid[0].connection.aggregate + .totalCount + }{" "} + NFTs + +

+
+ {/* begin::Dropdown + + + */} + {/* end::Dropdown */} +
+
+ {/* end::Header */} + + {/* begin::Body */} +
+ {/* + {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 ( + + {`${truncate(`${cid}`, 15)}`} + + ); + }; + + 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 ( + + {`${truncate(`${item.transactionHash}`, 15)}`} + + ); + }; + + return ( +
+ {/* begin::Label */} +
+ {time.toLocaleTimeString([], { + hour: "2-digit", + minute: "2-digit", + })} +
+ {/* end::Label */} + + {/* begin::Badge */} +
+ +
+ {/* end::Badge */} + + {/* begin::Content */} +
+ + {`${message}`} {getLinkAsset(cid, asset)}
+ {txReceipt ? getLinkOpensea(txReceipt) : null} + +
+ {/* end::Content */} +
+ ); + })} +
+ {/* + + {/* + ); +}; + +export { NFTTimeline }; diff --git a/src/_start/partials/components/NFTTimeline/timeline.scss b/src/_start/partials/components/NFTTimeline/timeline.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/_start/partials/components/Stats/index.tsx b/src/_start/partials/components/Stats/index.tsx index f037020..c8fbd4b 100644 --- a/src/_start/partials/components/Stats/index.tsx +++ b/src/_start/partials/components/Stats/index.tsx @@ -411,7 +411,6 @@ const Stats: React.FC = ({ /> ); }; - console.log(activeTabTotal); return (
= ({ }, body: JSON.stringify({ cid: props.alexandrias[0].cid, + asset: props.alexandrias[0].id, txReceipt: tx, }), }) @@ -178,7 +179,7 @@ export const SidebarGeneral: React.FC = ({ .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 index aa4fa5c..88b681d 100644 --- 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 */}
-
+
+ +
{ + 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 index 0e46107..ad8f9bc 100644 --- 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: {