diff --git a/package-lock.json b/package-lock.json index 47c0e08c..ff32b813 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@types/react-modal": "^3.16.0", "axios": "0.24.0", "bootstrap": "4.6.2", + "chartjs-plugin-zoom": "^2.0.1", "d3": "^7.8.5", "moment": "2.29.4", "moment-timezone": "^0.5.43", @@ -7869,6 +7870,17 @@ "pnpm": ">=7" } }, + "node_modules/chartjs-plugin-zoom": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.0.1.tgz", + "integrity": "sha512-ogOmLu6e+Q7E1XWOCOz9YwybMslz9qNfGV2a+qjfmqJYpsw5ZMoRHZBUyW+NGhkpQ5PwwPA/+rikHpBZb7PZuA==", + "dependencies": { + "hammerjs": "^2.0.8" + }, + "peerDependencies": { + "chart.js": ">=3.2.0" + } + }, "node_modules/check-error": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz", @@ -12270,6 +12282,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==", + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/hamt-sharding": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/hamt-sharding/-/hamt-sharding-2.0.1.tgz", diff --git a/package.json b/package.json index 63d62829..f5ad3f03 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@types/react-modal": "^3.16.0", "axios": "0.24.0", "bootstrap": "4.6.2", + "chartjs-plugin-zoom": "^2.0.1", "d3": "^7.8.5", "moment": "2.29.4", "moment-timezone": "^0.5.43", diff --git a/src/assets/sass/theme.scss b/src/assets/sass/theme.scss index e3af1316..dfa434f0 100644 --- a/src/assets/sass/theme.scss +++ b/src/assets/sass/theme.scss @@ -413,6 +413,19 @@ $font-poppins: "Poppins", sans-serif; } } + +.zoom-reset { + position: -webkit-sticky; /* Safari */ + position: sticky; + // margin-top: 5rem !important; + top: 2rem; + left: 0; + transform: translateY(-50%); + width: 4rem !important; + height: 4rem !important; + border-radius: 100px !important; + z-index: 100; + /* Apps Custom Styles -------------------------------------------------- */ diff --git a/src/components/CustomPagination.tsx b/src/components/CustomPagination.tsx new file mode 100644 index 00000000..8ac07396 --- /dev/null +++ b/src/components/CustomPagination.tsx @@ -0,0 +1,117 @@ +import React, { FC, useState } from "react"; +import { + FaAngleDoubleLeft, + FaAngleDoubleRight, + FaAngleLeft, + FaAngleRight, +} from "react-icons/fa"; + +// const PAGE_SIZES: number[] = [8, 16, 24]; +const THROTTLE_TIME = 500; + +interface PropsType { + pageCount: number; + pageIndex: number; + pageSize: number; + gotoPage: (e: number) => void; + disabled?: boolean; + // setPageSize: (e: number) => void, +} + +export const CustomPagination: FC = ({ + pageCount, + pageIndex, + pageSize, + gotoPage, + disabled = false, + // setPageSize, +}) => { + const canPreviousPage = pageIndex > 0; + const canNextPage = pageIndex < pageCount - 1; + const [isInThrottle, setIsInThrottle] = useState(false); + const previousPage = () => { + if (canPreviousPage) { + gotoPage(pageIndex - 1); + } + }; + const nextPage = () => { + if (canNextPage) { + gotoPage(pageIndex + 1); + } + }; + + return ( +
+
+ + +
+ +
+ + Page{" "} + + {pageIndex + 1} + {" "} + of{" "} + + {pageCount} + + {" "} +
+ +
+ + +
+
+ ); +}; diff --git a/src/components/DataNftCard.tsx b/src/components/DataNftCard.tsx new file mode 100644 index 00000000..0454b199 --- /dev/null +++ b/src/components/DataNftCard.tsx @@ -0,0 +1,134 @@ +import React from "react"; +import { DataNft } from "@itheum/sdk-mx-data-nft/out"; +import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks/useGetNetworkConfig"; +import { FaExternalLinkAlt } from "react-icons/fa"; +import { MARKETPLACE_DETAILS_PAGE } from "config"; +import { convertToLocalString } from "libs/utils"; +import { ElrondAddressLink } from "./ElrondAddressLink"; + +export function DataNftCard({ + index, + dataNft, + isLoading, + owned, + viewData, +} : { + index: number, + dataNft: DataNft, + isLoading: boolean, + owned: boolean, + viewData: (e: number) => void, +}) { + const { + network: { explorerAddress }, + } = useGetNetworkConfig(); + + function goToMarketplace(tokenIdentifier: string) { + window.open(`${MARKETPLACE_DETAILS_PAGE}${tokenIdentifier}`)?.focus(); + } + + return ( +
+
+
+
+ +
+ +
+
+ Data NFT Info +
+
+
+ Title: + {dataNft.title} +
+
+ Description: + + {dataNft.description.length > 20 + ? dataNft.description.slice(0, 20) + " ..." + : dataNft.description} + +
+
+ Creator: + + { + + } + +
+
+ Created At: + + {dataNft.creationTime.toLocaleString()} + +
+ +
+ Identifier: + + {dataNft.tokenIdentifier} + + + + +
+
+ Supply: + {dataNft.supply} +
+
+ Royalties: + + {convertToLocalString(dataNft.royalties * 100, 2) + "%"} + +
+ +
+
+ You have this Data NFT +
+
+ +
+ {owned ? ( + + ) : ( + + )} +
+
+
+
+ ); +} diff --git a/src/components/ElrondAddressLink.tsx b/src/components/ElrondAddressLink.tsx index 948f949d..58371f5d 100644 --- a/src/components/ElrondAddressLink.tsx +++ b/src/components/ElrondAddressLink.tsx @@ -1,6 +1,5 @@ import React, { FC } from "react"; -import { faLink } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { FaExternalLinkAlt } from "react-icons/fa"; interface ElrondAddressLinkPropsType { explorerAddress: string; @@ -17,10 +16,10 @@ export const ElrondAddressLink: FC = ({ {precision > 0 ? address.slice(0, precision) + " ... " + address.slice(-precision) : address} - + ); }; diff --git a/src/components/index.tsx b/src/components/index.tsx index fe4713ed..4cd94ab6 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -2,5 +2,7 @@ export * from "./Layout"; export * from "./PageTitle"; export * from "./AuthRedirectWrapper"; export * from "./CopyAddress"; +export * from "./CustomPagination"; +export * from "./DataNftCard"; export * from "./ElrondAddressLink"; export * from "./sdkDappComponents"; diff --git a/src/config.tsx b/src/config.tsx index c171e8b2..7ffd869e 100644 --- a/src/config.tsx +++ b/src/config.tsx @@ -29,3 +29,5 @@ export const MARKETPLACE_DETAILS_PAGE = process.env.REACT_APP_ENV_NETWORK === EnvironmentsEnum.devnet ? "https://stg.datadex.itheum.io/datanfts/marketplace/" : "https://datadex.itheum.io/datanfts/marketplace/"; + +export const MAINNET_EXPLORER_ADDRESS = 'https://explorer.multiversx.com'; diff --git a/src/libs/ui.ts b/src/libs/ui.ts index 68845d58..7c20ecef 100644 --- a/src/libs/ui.ts +++ b/src/libs/ui.ts @@ -1,3 +1,5 @@ +import { MARKETPLACE_DETAILS_PAGE } from "config"; + export const modalStyles = { overlay: { backgroundColor: 'var(--light-20) !important', diff --git a/src/pages/CantinaCorner.tsx b/src/pages/CantinaCorner.tsx index 905af146..780728fe 100644 --- a/src/pages/CantinaCorner.tsx +++ b/src/pages/CantinaCorner.tsx @@ -16,7 +16,7 @@ import { Radar } from "react-chartjs-2"; import { IoClose } from "react-icons/io5"; import Modal from "react-modal"; import imgBlurChart from "assets/img/blur-chart.png"; -import { ElrondAddressLink, Loader } from "components"; +import { DataNftCard, ElrondAddressLink, Loader } from "components"; import { CANTINA_CORNER_NONCES, CC_SHOW_SIZE } from "config"; import { useGetAccount, @@ -240,103 +240,14 @@ export const CantinaCorner = () => {
{ccDataNfts.length > 0 ? ( - ccDataNfts.map((dataNft, index) => { - return ( -
-
-
-
- -
- -
-
- Data NFT Info -
-
-
- Title: - {dataNft.title} -
-
- Description: - - {dataNft.description.length > 20 - ? dataNft.description.slice(0, 20) + " ..." - : dataNft.description} - -
-
- Creator: - - { - - } - -
-
- Created At: - - {dataNft.creationTime.toLocaleString()} - -
- -
- Identifier: - - {dataNft.tokenIdentifier} - -
-
- Supply: - {dataNft.supply} -
-
- Royalties: - - {dataNft.royalties + "%"} - -
- -
- {flags[index] ? ( -
- You have this Data NFT -
- ) : ( -
- You do not have this Data NFT -
- )} -
- -
- -
-
-
-
- ); - }) + ccDataNfts.map((dataNft, index) => ) ) : (

No DataNFT

)} diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 44103ed1..e61248e2 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -62,7 +62,7 @@ export const Dashboard = () => { {scAddress.slice(0, 24) + " ... " + diff --git a/src/pages/EsdtBubble.tsx b/src/pages/EsdtBubble.tsx index 88cc3580..858c54d4 100644 --- a/src/pages/EsdtBubble.tsx +++ b/src/pages/EsdtBubble.tsx @@ -1,6 +1,6 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { DataNft } from "@itheum/sdk-mx-data-nft"; -import { SignableMessage } from "@multiversx/sdk-core/out"; +import { Address, SignableMessage } from "@multiversx/sdk-core/out"; import { signMessage } from "@multiversx/sdk-dapp/utils/account"; import BigNumber from "bignumber.js"; import { @@ -10,24 +10,33 @@ import { Tooltip, Legend, } from "chart.js"; +import zoomPlugin from 'chartjs-plugin-zoom'; import { pointRadial } from "d3"; import { ModalBody, Table } from "react-bootstrap"; import ModalHeader from "react-bootstrap/esm/ModalHeader"; -import { Bubble } from "react-chartjs-2"; +import { Bubble, getDatasetAtEvent } from "react-chartjs-2"; +import { FaFileAlt } from "react-icons/fa"; import { IoClose } from "react-icons/io5"; import Modal from "react-modal"; import imgBlurChart from "assets/img/blur-chart.png"; -import { ElrondAddressLink, Loader } from "components"; -import { EB_SHOW_SIZE, ESDT_BUBBLE_NONCES } from "config"; +import { CustomPagination, DataNftCard, ElrondAddressLink, Loader } from "components"; +import { + ESDT_BUBBLE_NONCES, + MAINNET_EXPLORER_ADDRESS, +} from "config"; import { useGetAccount, useGetNetworkConfig, useGetPendingTransactions, } from "hooks"; import { modalStyles } from "libs/ui"; -import { convertToLocalString, convertWeiToEsdt, shortenAddress, toastError } from "libs/utils"; +import { + convertWeiToEsdt, + shortenAddress, + toastError, +} from "libs/utils"; -ChartJS.register(LinearScale, PointElement, Tooltip, Legend); +ChartJS.register(LinearScale, PointElement, Tooltip, Legend, zoomPlugin); const maxScaleSize = 800; const chartOptions = { @@ -40,13 +49,26 @@ const chartOptions = { tooltip: { callbacks: { label: (ctx: any) => { - console.log(ctx); return `${shortenAddress( ctx.dataset.label )} (${ctx.dataset.percent.toFixed(4)}%)`; }, }, }, + zoom: { + zoom: { + wheel: { + enabled: true, + }, + pinch: { + enabled: true + }, + drag: { + enabled: true, + }, + // mode: 'xy', + } + }, }, scales: { x: { @@ -62,6 +84,65 @@ const chartOptions = { }, }; +export const ChartDescription = () => ( +
+
+
+ + + + {"> 1%"} +
+
+ + + + {"> 0.1%"} +
+
+ + + + {"> 0.01%"} +
+
+ + + + {"< 0.01%"} +
+
+
+); + export const EsdtBubble = () => { const { network: { explorerAddress }, @@ -73,9 +154,7 @@ export const EsdtBubble = () => { const [selectedDataNft, setSelectedDataNft] = useState(); const [flags, setFlags] = useState([]); const [isLoading, setIsLoading] = useState(true); - const [isNftLoading, setIsNftLoading] = useState(false); - const [dataMarshalRes, setDataMarshalRes] = useState(""); const [isFetchingDataMarshal, setIsFetchingDataMarshal] = useState(true); const [owned, setOwned] = useState(false); @@ -91,6 +170,16 @@ export const EsdtBubble = () => { setIsModalOpenend(false); } + const pageSize = 50; + const pageCount = Math.max(Math.floor(dataItems.length / pageSize), 1); + const [pageIndex, setPageIndex] = useState(0); + function onGotoPage(value: number) { + if (value < 0) return; + if (value >= pageCount) return; + setPageIndex(value); + } + console.log({pageSize, pageCount, pageIndex}); + async function fetchDataNfts() { setIsLoading(true); @@ -104,8 +193,6 @@ export const EsdtBubble = () => { } async function fetchMyNfts() { - setIsNftLoading(true); - const _dataNfts = await DataNft.ownedByAddress(address); console.log("myDataNfts", _dataNfts); @@ -116,8 +203,6 @@ export const EsdtBubble = () => { } console.log("_flags", _flags); setFlags(_flags); - - setIsNftLoading(false); } useEffect(() => { @@ -143,7 +228,6 @@ export const EsdtBubble = () => { if (_owned) { setIsFetchingDataMarshal(true); - setDataMarshalRes(""); openModal(); const dataNft = dataNfts[index]; @@ -159,7 +243,6 @@ export const EsdtBubble = () => { res.data = await (res.data as Blob).text(); res.data = JSON.parse(res.data); console.log("viewData", res); - setDataMarshalRes(JSON.stringify(res.data, null, 4)); processData(res.data); @@ -219,6 +302,23 @@ export const EsdtBubble = () => { setData(_data); } + const chartRef = useRef>(); + function onChartClick(event: any) { + if (!chartRef.current) return; + const items = getDatasetAtEvent(chartRef.current, event); + if (items.length > 0) { + const datasetIndex = getDatasetAtEvent(chartRef.current, event)[0].datasetIndex; + window.open(`${MAINNET_EXPLORER_ADDRESS}/accounts/${dataItems[datasetIndex].address}/tokens`, '_blank')?.focus(); + } + } + + function onClickResetZoom() { + if (chartRef.current) { + const chart = chartRef.current as ChartJS; + chart.resetZoom(); + } + } + if (isLoading) { return ; } @@ -233,104 +333,14 @@ export const EsdtBubble = () => {
{dataNfts.length > 0 ? ( - dataNfts.map((dataNft, index) => { - return ( -
-
-
-
- -
- -
-
- Data NFT Info -
-
-
- Title: - {dataNft.title} -
-
- Description: - - {dataNft.description.length > 20 - ? dataNft.description.slice(0, 20) + " ..." - : dataNft.description} - -
-
- Creator: - - { - - } - -
-
- Created At: - - {dataNft.creationTime.toLocaleString()} - -
- -
- Identifier: - - {dataNft.tokenIdentifier} - -
-
- Supply: - {dataNft.supply} -
-
- Royalties: - - {dataNft.royalties + "%"} - -
- -
- {flags[index] ? ( -
- You have this Data NFT -
- ) : ( -
- You do not have this Data NFT -
- )} -
- -
- -
-
-
-
- ); - }) + dataNfts.map((dataNft, index) => ) ) : (

No DataNFT

)} @@ -404,70 +414,31 @@ export const EsdtBubble = () => { (TOP {data.datasets.length} Accounts)
-
+ +
+
-
-
-
- - - - {"> 1%"} -
-
- - - - {"> 0.1%"} -
-
- - - - {"> 0.01%"} -
-
- - - - {"< 0.01%"} -
-
-
+ +
+ +
@@ -479,23 +450,34 @@ export const EsdtBubble = () => { {dataItems - .slice(0, EB_SHOW_SIZE) + .slice(pageSize * pageIndex, pageSize * (pageIndex + 1)) .map((row: any, index: number) => ( - + - + ))}
{index + 1}{pageSize * pageIndex + index + 1} + { + + } {convertToLocalString(convertWeiToEsdt(row.balance))} EGLD{convertWeiToEsdt(row.balance).toFixed(4)} EGLD {row.percent.toFixed(4)}%
+
+ +
)} diff --git a/src/pages/GamerPassportGamer.tsx b/src/pages/GamerPassportGamer.tsx index f1e3e7c0..e69b98a8 100644 --- a/src/pages/GamerPassportGamer.tsx +++ b/src/pages/GamerPassportGamer.tsx @@ -6,7 +6,7 @@ import ModalHeader from "react-bootstrap/esm/ModalHeader"; import { IoClose } from "react-icons/io5"; import Modal from "react-modal"; import imgBlurChart from "assets/img/blur-chart.png"; -import { ElrondAddressLink, Loader } from "components"; +import { DataNftCard, ElrondAddressLink, Loader } from "components"; import { GAMER_PASSPORT_GAMER_NONCES, MARKETPLACE_DETAILS_PAGE } from "config"; import { useGetAccount, @@ -275,10 +275,6 @@ export const GamerPassportGamer = () => { } }; - function goToMarketplace(tokenIdentifier: string) { - window.open(`${MARKETPLACE_DETAILS_PAGE}${tokenIdentifier}`); - } - if (isLoading) { return ; } @@ -298,114 +294,14 @@ export const GamerPassportGamer = () => {
{ccDataNfts.length > 0 ? ( - ccDataNfts.map((dataNft, index) => { - return ( -
-
-
-
- -
- -
-
- Data NFT Info -
-
-
- Title: - {dataNft.title} -
-
- Description: - - {dataNft.description.length > 20 - ? dataNft.description.slice(0, 20) + " ..." - : dataNft.description} - -
-
- Creator: - - { - - } - -
-
- Created At: - - {dataNft.creationTime.toLocaleString()} - -
- -
- Identifier: - - {dataNft.tokenIdentifier} - -
-
- Supply: - {dataNft.supply} -
-
- Royalties: - - {dataNft.royalties + "%"} - -
- -
- {flags[index] ? ( -
- You have this Data NFT -
- ) : ( -
- You do not have this Data NFT -
- )} -
- -
- {flags[index] ? ( - - ) : ( - - )} -
-
-
-
- ); - }) + ccDataNfts.map((dataNft, index) => ) ) : (

No Data NFTs

)} diff --git a/src/pages/ItheumTrailblazer.tsx b/src/pages/ItheumTrailblazer.tsx index 542052f6..e55b5659 100644 --- a/src/pages/ItheumTrailblazer.tsx +++ b/src/pages/ItheumTrailblazer.tsx @@ -22,7 +22,7 @@ import { VerticalTimelineElement, } from "react-vertical-timeline-component"; import imgBlurChart from "assets/img/blur-chart.png"; -import { ElrondAddressLink, Loader } from "components"; +import { DataNftCard, ElrondAddressLink, Loader } from "components"; import { MARKETPLACE_DETAILS_PAGE, TRAILBLAZER_NONCES } from "config"; import { useGetAccount, @@ -149,10 +149,6 @@ export const ItheumTrailblazer = () => { } } - function goToMarketplace(tokenIdentifier: string) { - window.open(`${MARKETPLACE_DETAILS_PAGE}${tokenIdentifier}`); - } - if (isLoading) { return ; } @@ -349,114 +345,14 @@ export const ItheumTrailblazer = () => {
{itDataNfts.length > 0 ? ( - itDataNfts.map((dataNft, index) => { - return ( -
-
-
-
- -
- -
-
- Data NFT Info -
-
-
- Title: - {dataNft.title} -
-
- Description: - - {dataNft.description.length > 20 - ? dataNft.description.slice(0, 20) + " ..." - : dataNft.description} - -
-
- Creator: - - { - - } - -
-
- Created At: - - {dataNft.creationTime.toLocaleString()} - -
- -
- Identifier: - - {dataNft.tokenIdentifier} - -
-
- Supply: - {dataNft.supply} -
-
- Royalties: - - {dataNft.royalties + "%"} - -
- -
- {flags[index] ? ( -
- You have this Data NFT -
- ) : ( -
- You do not have this Data NFT -
- )} -
- -
- {flags[index] ? ( - - ) : ( - - )} -
-
-
-
- ); - }) + itDataNfts.map((dataNft, index) => ) ) : (

No Data NFTs

)} diff --git a/src/pages/MyListed.tsx b/src/pages/MyListed.tsx index 4fa6f5d7..c4114974 100644 --- a/src/pages/MyListed.tsx +++ b/src/pages/MyListed.tsx @@ -1,14 +1,16 @@ import React, { useEffect, useState } from "react"; +import { DataNft, Offer } from "@itheum/sdk-mx-data-nft"; import { Address } from "@multiversx/sdk-core/out"; +import { FaExternalLinkAlt } from "react-icons/fa"; import { ElrondAddressLink, Loader } from "components"; -import { dataNftMarket } from "libs/mvx"; +import { MARKETPLACE_DETAILS_PAGE } from "config"; import { useGetAccount, useGetNetworkConfig, useGetPendingTransactions, } from "hooks"; -import { DataNft, Offer } from "@itheum/sdk-mx-data-nft"; -import { convertWeiToEsdt } from "libs/utils"; +import { dataNftMarket } from "libs/mvx"; +import { convertToLocalString, convertWeiToEsdt } from "libs/utils"; import { createNftId } from "libs/utils/token"; export const MyListed = () => { @@ -78,6 +80,8 @@ export const MyListed = () => { offers.map((offer, index) => { const isDataNftLoaded = !isNftLoading && dataNfts.length > index; + const nftId = createNftId(offer.offeredTokenIdentifier, offer.offeredTokenNonce); + return (
{
Offer Info
@@ -171,7 +181,7 @@ export const MyListed = () => {
Royalties: - {isDataNftLoaded && dataNfts[index].royalties + "%"} + {isDataNftLoaded && `${convertToLocalString(dataNfts[index].royalties * 100, 2)}%`}
diff --git a/src/pages/MyWallet.tsx b/src/pages/MyWallet.tsx index 884cafdb..ef75f617 100644 --- a/src/pages/MyWallet.tsx +++ b/src/pages/MyWallet.tsx @@ -2,14 +2,13 @@ import React, { useEffect, useState } from "react"; import { DataNft, ViewDataReturnType } from "@itheum/sdk-mx-data-nft"; import { SignableMessage } from "@multiversx/sdk-core/out"; import { signMessage } from "@multiversx/sdk-dapp/utils/account"; -import { Image, ModalBody } from "react-bootstrap"; +import { ModalBody } from "react-bootstrap"; import ModalHeader from "react-bootstrap/esm/ModalHeader"; import { IoClose } from "react-icons/io5"; import Modal from "react-modal"; -import { ElrondAddressLink, Loader } from "components"; +import { DataNftCard, Loader } from "components"; import { useGetAccount, - useGetNetworkConfig, useGetPendingTransactions, } from "hooks"; import { modalStyles } from "libs/ui"; @@ -20,9 +19,6 @@ interface ExtendedViewDataReturnType extends ViewDataReturnType { } export const MyWallet = () => { - const { - network: { explorerAddress }, - } = useGetNetworkConfig(); const { address } = useGetAccount(); const { hasPendingTransactions } = useGetPendingTransactions(); @@ -114,91 +110,14 @@ export const MyWallet = () => {
{dataNfts.length > 0 ? ( - dataNfts.map((dataNft, index) => { - return ( -
-
-
-
- -
- -
-
- Data NFT Info -
-
-
- Title: - {dataNft.title} -
-
- Description: - - {dataNft.description.length > 20 - ? dataNft.description.slice(0, 20) + " ..." - : dataNft.description} - -
-
- Creator: - - { - - } - -
-
- Created At: - - {dataNft.creationTime.toLocaleString()} - -
- -
- Identifier: - - {dataNft.tokenIdentifier} - -
-
- Supply: - {dataNft.supply} -
-
- Royalties: - - {dataNft.royalties + "%"} - -
- -
- -
-
-
-
- ); - }) + dataNfts.map((dataNft, index) => ) ) : (

You have not listed any offer diff --git a/src/pages/PlayStationGamer.tsx b/src/pages/PlayStationGamer.tsx index 6ae78c4e..6bb9078b 100644 --- a/src/pages/PlayStationGamer.tsx +++ b/src/pages/PlayStationGamer.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from "react"; +import { DataNft } from "@itheum/sdk-mx-data-nft"; import { SignableMessage } from "@multiversx/sdk-core/out"; import { signMessage } from "@multiversx/sdk-dapp/utils/account"; import { ModalBody } from "react-bootstrap"; @@ -6,32 +7,26 @@ import ModalHeader from "react-bootstrap/esm/ModalHeader"; import { IoClose } from "react-icons/io5"; import Modal from "react-modal"; import imgBlurChart from "assets/img/blur-chart.png"; -import { ElrondAddressLink, Loader } from "components"; +import { DataNftCard, Loader } from "components"; import { PLAYSTATION_GAMER_PASSPORT_NONCES, MARKETPLACE_DETAILS_PAGE, } from "config"; import { useGetAccount, - useGetNetworkConfig, useGetPendingTransactions, } from "hooks"; -import { DataNft } from "@itheum/sdk-mx-data-nft"; +import { modalStyles } from "libs/ui"; import { toastError } from "libs/utils"; import PlaystationGamerInsights from "./PlaystationGamerInsights"; -import { modalStyles } from "libs/ui"; export const PlayStationGamer = () => { - const { - network: { explorerAddress }, - } = useGetNetworkConfig(); const { address } = useGetAccount(); const { hasPendingTransactions } = useGetPendingTransactions(); const [ccDataNfts, setCcDataNfts] = useState([]); const [flags, setFlags] = useState([]); const [isLoading, setIsLoading] = useState(true); - const [isNftLoading, setIsNftLoading] = useState(false); const [dataMarshalRes, setDataMarshalRes] = useState(""); const [isFetchingDataMarshal, setIsFetchingDataMarshal] = @@ -63,8 +58,6 @@ export const PlayStationGamer = () => { } async function fetchMyNfts() { - setIsNftLoading(true); - const _dataNfts = await DataNft.ownedByAddress(address); console.log("myDataNfts", _dataNfts); @@ -75,8 +68,6 @@ export const PlayStationGamer = () => { } console.log("_flags", _flags); setFlags(_flags); - - setIsNftLoading(false); } useEffect(() => { @@ -295,10 +286,6 @@ export const PlayStationGamer = () => { // } }; - function goToMarketplace(tokenIdentifier: string) { - window.open(`${MARKETPLACE_DETAILS_PAGE}${tokenIdentifier}`); - } - if (isLoading) { return ; } @@ -318,114 +305,14 @@ export const PlayStationGamer = () => {
{ccDataNfts.length > 0 ? ( - ccDataNfts.map((dataNft, index) => { - return ( -
-
-
-
- -
- -
-
- Data NFT Info -
-
-
- Title: - {dataNft.title} -
-
- Description: - - {dataNft.description.length > 20 - ? dataNft.description.slice(0, 20) + " ..." - : dataNft.description} - -
-
- Creator: - - { - - } - -
-
- Created At: - - {dataNft.creationTime.toLocaleString()} - -
- -
- Identifier: - - {dataNft.tokenIdentifier} - -
-
- Supply: - {dataNft.supply} -
-
- Royalties: - - {dataNft.royalties + "%"} - -
- -
- {flags[index] ? ( -
- You have this Data NFT -
- ) : ( -
- You do not have this Data NFT -
- )} -
- -
- {flags[index] ? ( - - ) : ( - - )} -
-
-
-
- ); - }) + ccDataNfts.map((dataNft, index) => ) ) : (

No Data NFTs

)}