D kent

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",

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
 -------------------------------------------------- */
 

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<PropsType> = ({
+  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 (
+    <div className="d-flex justify-content-center align-items-center mt-4">
+      <div className="d-flex">
+          <button
+            className="btn btn-primary mr-2"
+            onClick={() => {
+              gotoPage(0);
+              setIsInThrottle(true);
+              setTimeout(() => {
+                setIsInThrottle(false);
+              }, THROTTLE_TIME);
+            }}
+            disabled={!canPreviousPage || isInThrottle || disabled}
+          >
+            <FaAngleDoubleLeft />
+          </button>
+          <button
+            className="btn btn-primary"
+            onClick={() => {
+              previousPage();
+              setIsInThrottle(true);
+              setTimeout(() => {
+                setIsInThrottle(false);
+              }, THROTTLE_TIME);
+            }}
+            disabled={!canPreviousPage || isInThrottle || disabled}
+          >
+            <FaAngleLeft />
+          </button>
+      </div>
+
+      <div className="d-flex align-items-center mx-2">
+        <span>
+          Page{" "}
+          <span className="font-weight-bold">
+            {pageIndex + 1}
+          </span>{" "}
+          of{" "}
+          <span className="font-weight-bold">
+            {pageCount}
+          </span>
+        </span>{" "}
+      </div>
+
+      <div className="d-flex ps-4 pe-2">
+          <button
+            className="btn btn-primary mr-2"
+            onClick={() => {
+              nextPage();
+              setIsInThrottle(true);
+              setTimeout(() => {
+                setIsInThrottle(false);
+              }, THROTTLE_TIME);
+            }}
+            disabled={!canNextPage || isInThrottle || disabled}
+          >
+            <FaAngleRight />
+          </button>
+          <button
+            className="btn btn-primary"
+            onClick={() => {
+              gotoPage(pageCount - 1);
+              setIsInThrottle(true);
+              setTimeout(() => {
+                setIsInThrottle(false);
+              }, THROTTLE_TIME);
+            }}
+            disabled={!canNextPage || isInThrottle || disabled}
+          >
+            <FaAngleDoubleRight />
+          </button>
+      </div>
+    </div>
+  );
+};

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 (
+    <div className="col-12 col-md-6 col-lg-4 mb-3 d-flex justify-content-center">
+      <div className="card shadow-sm border">
+        <div className="card-body p-3">
+          <div className="mb-4">
+            <img
+              className="data-nft-image"
+              src={
+                !isLoading
+                  ? dataNft.nftImgUrl
+                  : "https://media.elrond.com/nfts/thumbnail/default.png"
+              }
+            />
+          </div>
+
+          <div className="mt-4 mb-1">
+            <h5 className="text-center text-info">
+              Data NFT Info
+            </h5>
+          </div>
+          <div className="mb-1 row">
+            <span className="col-4 opacity-6">Title:</span>
+            <span className="col-8">{dataNft.title}</span>
+          </div>
+          <div className="mb-1 row">
+            <span className="col-4 opacity-6">Description:</span>
+            <span className="col-8">
+              {dataNft.description.length > 20
+                ? dataNft.description.slice(0, 20) + " ..."
+                : dataNft.description}
+            </span>
+          </div>
+          <div className="mb-1 row">
+            <span className="col-4 opacity-6">Creator:</span>
+            <span className="col-8 cs-creator-link">
+              {
+                <ElrondAddressLink
+                  explorerAddress={explorerAddress}
+                  address={dataNft.creator}
+                  precision={6}
+                />
+              }
+            </span>
+          </div>
+          <div className="mb-1 row">
+            <span className="col-4 opacity-6">Created At:</span>
+            <span className="col-8">
+              {dataNft.creationTime.toLocaleString()}
+            </span>
+          </div>
+
+          <div className="mb-1 row">
+            <span className="col-4 opacity-6">Identifier:</span>
+            <span className="col-8">
+              <span>{dataNft.tokenIdentifier}</span>
+              <a
+                href={`${MARKETPLACE_DETAILS_PAGE}${dataNft.tokenIdentifier}`}
+                className="ml-2 address-link text-decoration-none"
+                target="_blank"
+              >
+                <FaExternalLinkAlt />
+              </a>
+            </span>
+          </div>
+          <div className="mb-1 row">
+            <span className="col-4 opacity-6">Supply:</span>
+            <span className="col-8">{dataNft.supply}</span>
+          </div>
+          <div className="mb-1 row">
+            <span className="col-4 opacity-6">Royalties:</span>
+            <span className="col-8">
+              {convertToLocalString(dataNft.royalties * 100, 2) + "%"}
+            </span>
+          </div>
+
+          <div className="mt-3 text-center">
+              <h6 className="font-title font-weight-bold" style={{ visibility: owned ? "visible" : "hidden" }}>
+                You have this Data NFT
+              </h6>
+          </div>
+
+          <div className="mt-3 text-center">
+            {owned ? (
+              <button
+                className="btn btn-success"
+                onClick={() => viewData(index)}
+              >
+                View Data
+              </button>
+            ) : (
+              <button
+                className="btn btn-outline-success"
+                onClick={() =>
+                  goToMarketplace(dataNft.tokenIdentifier)
+                }
+              >
+                View in the Data NFT Marketplace
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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<ElrondAddressLinkPropsType> = ({
     <a
       className="text-decoration-none address-link"
       href={`${explorerAddress}/accounts/${address}`}
-      target="blank"
+      target="_blank"
     >
       {precision > 0 ? address.slice(0, precision) + " ... " + address.slice(-precision) : address}
-      <FontAwesomeIcon icon={faLink} className="ml-2" />
+      <FaExternalLinkAlt className="ml-2" />
     </a>
   );
 };

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";

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';

src/libs/ui.ts

@@ -1,3 +1,5 @@
+import { MARKETPLACE_DETAILS_PAGE } from "config";
+
 export const modalStyles = {
   overlay: {
     backgroundColor: 'var(--light-20) !important',