feature: update data nft sdk and add landing page and market page per…

package.json

@@ -1,14 +1,14 @@
 {
   "name": "data-dex",
-  "version": "1.17.45",
+  "version": "1.18.0",
   "description": "The Itheum Data DEX enables you to trade your data using web3 tech",
   "dependencies": {
     "@chakra-ui/icons": "2.1.1",
     "@chakra-ui/react": "2.8.2",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "@hookform/resolvers": "3.6.0",
-    "@itheum/sdk-mx-data-nft": "3.8.0-alpha.2",
+    "@itheum/sdk-mx-data-nft": "^3.8.0-alpha.12",
     "@itheum/sdk-mx-enterprise": "0.3.0",
     "@multiversx/sdk-core": "13.9.0",
     "@multiversx/sdk-dapp": "2.33.3",

src/components/ListDataNFTModal.tsx

@@ -22,7 +22,7 @@ import axios from "axios";
 import BigNumber from "bignumber.js";
 import DataNFTLiveUptime from "components/UtilComps/DataNFTLiveUptime";
 import { contractsForChain } from "libs/config";
-import { getApi } from "libs/MultiversX/api";
+import { getMvxRpcApi } from "libs/MultiversX/api";
 import { DataNftMarketContract } from "libs/MultiversX/dataNftMarket";
 import { sleep, printPrice, convertToLocalString, getTokenWantedRepresentation, backendApi, getApiDataMarshal, convertWeiToEsdt } from "libs/utils";
 import { useMarketStore } from "store";
@@ -106,7 +106,7 @@ export default function ListDataNFTModal({ isOpen, onClose, sellerFee, nftData,
     maxQuantityPerAddress = maxPerAddress
   ) {
     const indexResponse = await axios.get(
-      `https://${getApi(chainID)}/accounts/${contractsForChain(chainID).market}/transactions?hashes=${txHash}&status=success&withScResults=true&withLogs=true`
+      `https://${getMvxRpcApi(chainID)}/accounts/${contractsForChain(chainID).market}/transactions?hashes=${txHash}&status=success&withScResults=true&withLogs=true`
     );
 
     const results = indexResponse.data[0].results;

src/components/MyListedDataNFT.tsx

@@ -24,7 +24,7 @@ import BigNumber from "bignumber.js";
 import moment from "moment/moment";
 import ShortAddress from "components/UtilComps/ShortAddress";
 import { CHAIN_TX_VIEWER, uxConfig } from "libs/config";
-import { getApi } from "libs/MultiversX/api";
+import { getMvxRpcApi } from "libs/MultiversX/api";
 import { convertWeiToEsdt, convertToLocalString, getTokenWantedRepresentation, hexZero, tokenDecimals } from "libs/utils";
 import { useMarketStore, useMintStore } from "store";
 import FrozenOverlay from "./FrozenOverlay";
@@ -81,7 +81,7 @@ const MyListedDataNFT: FC<MyListedDataNFTProps> = (props) => {
         <Box maxW="xs" borderWidth="1px" borderRadius="lg" overflow="wrap" mb="1rem" position="relative" w="13.5rem">
           <Flex justifyContent="center" pt={5}>
             <NftMediaComponent
-              imageUrls={[`https://${getApi(chainID)}/nfts/${offer.offeredTokenIdentifier}-${hexZero(offer.offeredTokenNonce)}/thumbnail`]}
+              imageUrls={[`https://${getMvxRpcApi(chainID)}/nfts/${offer.offeredTokenIdentifier}-${hexZero(offer.offeredTokenNonce)}/thumbnail`]}
               imageHeight="200px"
               imageWidth="200px"
               borderRadius="md"

src/components/ProfileCard.tsx

@@ -20,7 +20,7 @@ import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks";
 import { motion } from "framer-motion";
 import moment from "moment/moment";
 import { CHAIN_TX_VIEWER, uxConfig } from "libs/config";
-import { getApi } from "libs/MultiversX/api";
+import { getMvxRpcApi } from "libs/MultiversX/api";
 import { DEFAULT_NFT_IMAGE } from "libs/mxConstants";
 import { convertToLocalString, createNftId, transformDescription } from "libs/utils";
 import NftMediaComponent from "./NftMediaComponent";
@@ -56,7 +56,7 @@ const ProfileCard = ({
   const ChainExplorer = CHAIN_TX_VIEWER[chainID as keyof typeof CHAIN_TX_VIEWER];
 
   const nftId = createNftId(collection, nonce);
-  const imageUrl = collection ? `https://${getApi(chainID)}/nfts/${nftId}/thumbnail` : DEFAULT_NFT_IMAGE;
+  const imageUrl = collection ? `https://${getMvxRpcApi(chainID)}/nfts/${nftId}/thumbnail` : DEFAULT_NFT_IMAGE;
   const parsedCreationTime = moment(creationTime);
   return (
     <Skeleton fitContent={true} isLoaded={hasLoaded} borderRadius="lg" display={"flex"} alignItems={"center"} justifyContent={"center"}>

src/components/Sections/AppFooter.tsx

@@ -3,7 +3,7 @@ import { ExternalLinkIcon } from "@chakra-ui/icons";
 import { Box, Text, Flex, HStack, Link, useColorMode } from "@chakra-ui/react";
 import { ApiNetworkProvider } from "@multiversx/sdk-core/out";
 import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks";
-import { getApi, getNetworkProvider, getNetworkProviderCodification } from "libs/MultiversX/api";
+import { getMvxRpcApi, getNetworkProvider, getNetworkProviderCodification } from "libs/MultiversX/api";
 import { getSentryProfile } from "libs/utils";
 
 const dataDexVersion = import.meta.env.VITE_APP_VERSION ?? "version number unknown";
@@ -12,7 +12,7 @@ const nonProdEnv = `env:${getSentryProfile()}`;
 export default function () {
   const { colorMode } = useColorMode();
   const { chainID } = useGetNetworkConfig();
-  const isPublicApi = getApi(chainID).includes("api.multiversx.com");
+  const isPublicApi = getMvxRpcApi(chainID).includes("api.multiversx.com");
   const isPublicNetworkProvider = getNetworkProviderCodification(chainID).includes(".multiversx.com");
   const isApiNetworkProvider = getNetworkProvider(chainID) instanceof ApiNetworkProvider;
 

src/components/Sections/NoDataHere.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import { Text, Flex, Icon } from "@chakra-ui/react";
 import { FaEyeSlash } from "react-icons/fa";
 
-export const NoDataHere = ({ imgFromTop = "10rem" }: { imgFromTop?: string }) => {
+export const NoDataHere = ({ imgFromTop = "10rem", customMsg = "Nothing here yet..." }: { imgFromTop?: string; customMsg?: string }) => {
   return (
     <Flex direction={"column"} justify={"center"} align={"center"} minW={"full"} opacity=".5">
-      <Text marginTop={imgFromTop}>Nothing here yet...</Text>
+      <Text marginTop={imgFromTop}>{customMsg}</Text>
       <Icon as={FaEyeSlash} boxSize={"10"} marginTop={"3"} />
     </Flex>
   );

src/components/Sections/RecentDataNFTs.tsx

@@ -1,16 +1,15 @@
 import React, { useEffect, useState } from "react";
-import { Card, CardBody, Heading, Image, Link, SimpleGrid, Skeleton, Stack, Text } from "@chakra-ui/react";
+import { Card, CardBody, Heading, Link, SimpleGrid, Skeleton, Stack, Text } from "@chakra-ui/react";
 import { DataNft, Offer, createTokenIdentifier } from "@itheum/sdk-mx-data-nft/out";
 import { Address } from "@multiversx/sdk-core/out";
 import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks";
 import { useGetLoginInfo } from "@multiversx/sdk-dapp/hooks/account";
 import { Link as ReactRouterLink } from "react-router-dom";
 import NftMediaComponent from "components/NftMediaComponent";
 import { IS_DEVNET, getFavoritesFromBackendApi, getHealthCheckFromBackendApi, getRecentOffersFromBackendApi } from "libs/MultiversX";
-import { getApi, getNftsByIds } from "libs/MultiversX/api";
-import { DataNftMarketContract } from "libs/MultiversX/dataNftMarket";
+import { getMvxRpcApi } from "libs/MultiversX/api";
 import { RecentDataNFTType } from "libs/types";
-import { convertWeiToEsdt, hexZero, sleep } from "libs/utils";
+import { convertWeiToEsdt } from "libs/utils";
 import { useAccountStore, useMarketStore } from "store";
 import { NoDataHere } from "./NoDataHere";
 import { Favourite } from "../Favourite/Favourite";
@@ -46,7 +45,7 @@ const RecentDataNFTs = ({ headingText, headingSize }: { headingText: string; hea
   const marketRequirements = useMarketStore((state) => state.marketRequirements);
   const favoriteNfts = useAccountStore((state) => state.favoriteNfts);
   const updateFavoriteNfts = useAccountStore((state) => state.updateFavoriteNfts);
-  const marketContract = new DataNftMarketContract(chainID);
+  const [web2ApiDown, setWeb2ApiDown] = useState<boolean>(false);
 
   useEffect(() => {
     apiWrapper();
@@ -69,16 +68,17 @@ const RecentDataNFTs = ({ headingText, headingSize }: { headingText: string; hea
   };
 
   const apiWrapper = async () => {
-    DataNft.setNetworkConfig(IS_DEVNET ? "devnet" : "mainnet");
+    DataNft.setNetworkConfig(IS_DEVNET ? "devnet" : "mainnet", `https://${getMvxRpcApi(chainID)}`);
 
     try {
       const isApiUp = await getHealthCheckFromBackendApi(chainID);
 
       if (isApiUp) {
         const offers = await getRecentOffersFromBackendApi(chainID);
         const recentNonces = offers.map((nft: any) => ({ nonce: nft.offeredTokenNonce }));
-        const dataNfts: DataNft[] = await DataNft.createManyFromApi(recentNonces);
 
+        console.log("Debug ABOUT TO HIT RecentDataNFTs:createManyFromApi");
+        const dataNfts: DataNft[] = await DataNft.createManyFromApi(recentNonces);
         const _latestOffers: RecentDataNFTType[] = [];
 
         offers.forEach((offer: Offer) => {
@@ -105,54 +105,17 @@ const RecentDataNFTs = ({ headingText, headingSize }: { headingText: string; hea
             });
           }
         });
+
         setLatestOffers(_latestOffers);
         setLoadedOffers(true);
       } else {
         throw new Error("API is down");
       }
     } catch (error) {
-      const highestOfferIndex = await marketContract.getLastValidOfferId();
-
-      // get latest 10 offers from the SC
-      const startIndex = Math.max(highestOfferIndex - 40, 0);
-      const stopIndex = highestOfferIndex;
-
-      const offers = await marketContract.viewOffers(startIndex, stopIndex);
-      const slicedOffers = offers.slice(0, 10);
-      // get these offers metadata from the API
-      const nftIds = slicedOffers.map((offer) => `${offer.offeredTokenIdentifier}-${hexZero(offer.offeredTokenNonce)}`);
-      const dataNfts = await getNftsByIds(nftIds, chainID);
-
-      // merge the offer data and meta data
-      const _latestOffers: RecentDataNFTType[] = [];
-
-      slicedOffers.forEach((offer, idx) => {
-        const _nft = dataNfts.find((nft) => createTokenIdentifier(nft.collection, nft.nonce) === nft.identifier);
-
-        if (_nft !== undefined) {
-          const _nftMetaData = DataNft.decodeAttributes(_nft.attributes);
-
-          _latestOffers.push({
-            creator: new Address(_nftMetaData.creator ?? ""),
-            owner: new Address(offer.owner),
-            offeredTokenIdentifier: offer.offeredTokenIdentifier,
-            offeredTokenNonce: offer.offeredTokenNonce,
-            offeredTokenAmount: offer.offeredTokenAmount,
-            index: idx,
-            wantedTokenIdentifier: offer.wantedTokenIdentifier,
-            wantedTokenNonce: offer.wantedTokenNonce,
-            wantedTokenAmount: offer.wantedTokenAmount,
-            quantity: offer.quantity,
-            tokenName: _nftMetaData.tokenName,
-            title: _nftMetaData.title,
-            nftImgUrl: "https://" + getApi(chainID) + "/nfts/" + _nft.identifier + "/thumbnail",
-            royalties: _nftMetaData.royalties,
-            media: _nftMetaData.media,
-          });
-        }
-      });
-      await sleep(1);
-      setLatestOffers(_latestOffers);
+      console.log("Web2 API is down so gracefully handle it");
+      console.error(error);
+      setWeb2ApiDown(true);
+      setLatestOffers([]);
       setLoadedOffers(true);
     }
   };
@@ -169,7 +132,9 @@ const RecentDataNFTs = ({ headingText, headingSize }: { headingText: string; hea
         {headingText}
       </Heading>
 
-      {loadedOffers && latestOffers.length === 0 && <NoDataHere imgFromTop="5rem" />}
+      {loadedOffers && latestOffers.length === 0 && (
+        <NoDataHere imgFromTop="5rem" customMsg={`${web2ApiDown ? "Web2 API is down, gracefully roll down to full Web3 Mode" : undefined}`} />
+      )}
 
       <SimpleGrid spacing={4} templateColumns="repeat(auto-fill, minmax(240px, 1fr))">
         {latestOffers.map((item: RecentDataNFTType, idx: number) => {

src/components/Tables/InteractionTxTable.tsx

@@ -9,7 +9,7 @@ import { ColumnDef } from "@tanstack/react-table";
 import axios from "axios";
 import ShortAddress from "components/UtilComps/ShortAddress";
 import { CHAIN_TX_VIEWER, contractsForChain, uxConfig } from "libs/config";
-import { getApi } from "libs/MultiversX/api";
+import { getMvxRpcApi } from "libs/MultiversX/api";
 import { convertWeiToEsdt } from "libs/utils";
 import { useMarketStore } from "store";
 import { DataTable } from "./Components/DataTable";
@@ -132,7 +132,7 @@ export const getInteractionTransactions = async (
   chainID: string,
   marketRequirements: MarketplaceRequirements
 ) => {
-  const api = getApi(chainID);
+  const api = getMvxRpcApi(chainID);
   try {
     const minterTxs = `https://${api}/accounts/${address}/transactions?size=50&status=success&senderOrReceiver=${minterSmartContractAddress}&withOperations=true`;
     const marketTxs = `https://${api}/accounts/${address}/transactions?size=50&status=success&senderOrReceiver=${marketSmartContractAddress}&withOperations=true`;

src/components/Tables/TokenTxTable.tsx

@@ -6,7 +6,7 @@ import { ColumnDef } from "@tanstack/react-table";
 import axios from "axios";
 import ShortAddress from "components/UtilComps/ShortAddress";
 import { CHAIN_TX_VIEWER } from "libs/config";
-import { getApi } from "libs/MultiversX/api";
+import { getMvxRpcApi } from "libs/MultiversX/api";
 import { backendApi } from "libs/utils";
 import { useMarketStore } from "store";
 import { DataTable } from "./Components/DataTable";
@@ -87,7 +87,7 @@ export default function TokenTxTable(props: TokenTableProps) {
 
   useEffect(() => {
     async function getInteractions() {
-      const response = await axios.get(`https://${getApi(chainID)}/nfts/${props.tokenId}/transactions?size=50&status=success`);
+      const response = await axios.get(`https://${getMvxRpcApi(chainID)}/nfts/${props.tokenId}/transactions?size=50&status=success`);
       const interactions = response.data;
       const dataTemp: TransactionInTable[] = [];
 

src/components/UtilComps/AppSettings.tsx

@@ -4,15 +4,15 @@ import { ApiNetworkProvider } from "@multiversx/sdk-core/out";
 import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks";
 import { PREVIEW_DATA_ON_DEVNET_SESSION_KEY } from "libs/config";
 import { useLocalStorage } from "libs/hooks";
-import { getApi, getNetworkProvider, getNetworkProviderCodification } from "libs/MultiversX/api";
+import { getMvxRpcApi, getNetworkProvider, getNetworkProviderCodification } from "libs/MultiversX/api";
 import { getApiDataDex, getApiDataMarshal, getSentryProfile } from "libs/utils";
 
 const dataDexVersion = import.meta.env.VITE_APP_VERSION ? `v${import.meta.env.VITE_APP_VERSION}` : "version number unknown";
 const nonProdEnv = `${getSentryProfile()}`;
 
 export default function () {
   const { chainID } = useGetNetworkConfig();
-  const isPublicApi = getApi(chainID).includes("api.multiversx.com");
+  const isPublicApi = getMvxRpcApi(chainID).includes("api.multiversx.com");
   const isPublicNetworkProvider = getNetworkProviderCodification(chainID).includes(".multiversx.com");
   const isApiNetworkProvider = getNetworkProvider(chainID) instanceof ApiNetworkProvider;
   const [previewDataOnDevnetSession, setPreviewDataOnDevnetSession] = useLocalStorage(PREVIEW_DATA_ON_DEVNET_SESSION_KEY, null);
@@ -81,7 +81,7 @@ export default function () {
                 Dynamic Settings
               </Heading>
               <Box fontSize="sm">
-                <Text>MultiversX API being used : {getApi(chainID)}</Text>
+                <Text>MultiversX API being used : {getMvxRpcApi(chainID)}</Text>
                 <Text>MultiversX Gateway being used : {getNetworkProviderCodification(chainID)}</Text>
                 <Text>Web2 Data DEX API : {getApiDataDex(chainID)}</Text>
                 <Text>Web2 Data Marshal API : {getApiDataMarshal(chainID)}</Text>

src/components/WalletDataNFTMX/WalletDataNFTMX.tsx

@@ -41,7 +41,7 @@ import ShortAddress from "components/UtilComps/ShortAddress";
 import { CHAIN_TX_VIEWER, PREVIEW_DATA_ON_DEVNET_SESSION_KEY, contractsForChain, uxConfig } from "libs/config";
 import { useLocalStorage } from "libs/hooks";
 import { labels } from "libs/language";
-import { getApi } from "libs/MultiversX/api";
+import { getMvxRpcApi } from "libs/MultiversX/api";
 import { DataNftMarketContract } from "libs/MultiversX/dataNftMarket";
 import {
   backendApi,
@@ -59,6 +59,7 @@ import AccessDataStreamModal from "./AccessDatastreamModal";
 import BurnDataNFTModal from "./BurnDataNFTModal";
 import ListDataNFTModal from "../ListDataNFTModal";
 import { isNFMeIDVaultClassDataNFT } from "libs/utils";
+import { IS_DEVNET } from "libs/MultiversX";
 
 export default function WalletDataNFTMX(item: any) {
   const { chainID, network } = useGetNetworkConfig();
@@ -160,7 +161,7 @@ export default function WalletDataNFTMX(item: any) {
       // Use a loop with a boolean condition
       while (!success) {
         indexResponse = await axios.get(
-          `https://${getApi(chainID)}/accounts/${contractsForChain(chainID).market}/transactions?hashes=${txHash}&withScResults=true&withLogs=true`
+          `https://${getMvxRpcApi(chainID)}/accounts/${contractsForChain(chainID).market}/transactions?hashes=${txHash}&withScResults=true&withLogs=true`
         );
 
         if (indexResponse.data[0].status === "success" && typeof indexResponse.data[0].pendingResults === "undefined") {
@@ -238,7 +239,8 @@ export default function WalletDataNFTMX(item: any) {
         throw Error(labels.ERR_NATIVE_AUTH_TOKEN_MISSING);
       }
 
-      DataNft.setNetworkConfig(network.id);
+      DataNft.setNetworkConfig(IS_DEVNET ? "devnet" : "mainnet", `https://${getMvxRpcApi(chainID)}`);
+
       const dataNft = await DataNft.createFromApi({ tokenIdentifier, nonce });
       const arg = {
         mvxNativeAuthOrigins: [decodeNativeAuthToken(tokenLogin.nativeAuthToken).origin],