Merge pull request #1210 from Itheum/stg

1.11.0 STG -> MAIN

package.json

@@ -1,6 +1,6 @@
 {
   "name": "data-dex",
-  "version": "1.10.5",
+  "version": "1.11.0",
   "description": "The Itheum Data DEX enables you to trade your data using web3 tech",
   "dependencies": {
     "@chakra-ui/icons": "2.1.1",

src/components/MarketplaceLowerCard.tsx

@@ -9,20 +9,15 @@ import {
   NumberInputStepper,
   Text,
   useDisclosure,
-  useColorMode,
   Flex,
   Box,
-  Tooltip,
 } from "@chakra-ui/react";
-import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks";
 import { useGetAccountInfo, useGetLoginInfo } from "@multiversx/sdk-dapp/hooks/account";
 import { useGetPendingTransactions } from "@multiversx/sdk-dapp/hooks/transactions";
 import ProcureDataNFTModal from "components/ProcureDataNFTModal";
 import ExploreAppButton from "components/UtilComps/ExploreAppButton";
-import { PREVIEW_DATA_ON_DEVNET_SESSION_KEY } from "libs/config";
-import { useLocalStorage } from "libs/hooks";
 import { DataNftMetadataType, OfferType } from "libs/MultiversX/types";
-import { isValidNumericCharacter, shouldPreviewDataBeEnabled, viewDataDisabledMessage } from "libs/utils";
+import { isValidNumericCharacter } from "libs/utils";
 import { useMarketStore } from "store";
 import PreviewDataButton from "./PreviewDataButton";
 
@@ -32,9 +27,7 @@ type MarketplaceLowerCardProps = {
 };
 
 const MarketplaceLowerCard: FC<MarketplaceLowerCardProps> = ({ offer, nftMetadata }) => {
-  const { chainID } = useGetNetworkConfig();
-  const { loginMethod, isLoggedIn: isMxLoggedIn } = useGetLoginInfo();
-  const { colorMode } = useColorMode();
+  const { isLoggedIn: isMxLoggedIn } = useGetLoginInfo();
   const { address } = useGetAccountInfo();
   const { hasPendingTransactions } = useGetPendingTransactions();
   const marketRequirements = useMarketStore((state) => state.marketRequirements);

src/components/MyListedDataLowerCard.tsx

@@ -15,7 +15,6 @@ import {
   NumberInputField,
   NumberInputStepper,
   Text,
-  Tooltip,
   useColorMode,
   useDisclosure,
   useToast,
@@ -36,9 +35,7 @@ import {
   sleep,
   getTokenWantedRepresentation,
   tokenDecimals,
-  shouldPreviewDataBeEnabled,
   backendApi,
-  viewDataDisabledMessage,
 } from "libs/utils";
 import { useMarketStore } from "store";
 import PreviewDataButton from "./PreviewDataButton";

src/components/MyListedDataNFT.tsx

@@ -16,27 +16,17 @@ import {
   PopoverTrigger,
   Skeleton,
   Text,
-  Tooltip,
 } from "@chakra-ui/react";
 import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks";
-import { useGetAccountInfo, useGetLoginInfo } from "@multiversx/sdk-dapp/hooks/account";
+import { useGetAccountInfo } from "@multiversx/sdk-dapp/hooks/account";
 import { useGetPendingTransactions } from "@multiversx/sdk-dapp/hooks/transactions";
 import BigNumber from "bignumber.js";
 import moment from "moment/moment";
 import ShortAddress from "components/UtilComps/ShortAddress";
-import { CHAIN_TX_VIEWER, uxConfig, PREVIEW_DATA_ON_DEVNET_SESSION_KEY } from "libs/config";
-import { useLocalStorage } from "libs/hooks";
+import { CHAIN_TX_VIEWER, uxConfig } from "libs/config";
 import { getApi } from "libs/MultiversX/api";
 import { DataNftMetadataType, OfferType } from "libs/MultiversX/types";
-import {
-  convertWeiToEsdt,
-  convertToLocalString,
-  getTokenWantedRepresentation,
-  hexZero,
-  tokenDecimals,
-  shouldPreviewDataBeEnabled,
-  viewDataDisabledMessage,
-} from "libs/utils";
+import { convertWeiToEsdt, convertToLocalString, getTokenWantedRepresentation, hexZero, tokenDecimals } from "libs/utils";
 import { useMarketStore, useMintStore } from "store";
 import FrozenOverlay from "./FrozenOverlay";
 import PreviewDataButton from "./PreviewDataButton";
@@ -80,9 +70,7 @@ const MyListedDataNFT: FC<MyListedDataNFTProps> = (props) => {
   const { chainID } = useGetNetworkConfig();
   const { hasPendingTransactions } = useGetPendingTransactions();
   const { address } = useGetAccountInfo();
-  const { loginMethod } = useGetLoginInfo();
   const ChainExplorer = CHAIN_TX_VIEWER[chainID as keyof typeof CHAIN_TX_VIEWER];
-  const [previewDataOnDevnetSession] = useLocalStorage(PREVIEW_DATA_ON_DEVNET_SESSION_KEY, null);
 
   const marketRequirements = useMarketStore((state) => state.marketRequirements);
   const userData = useMintStore((state) => state.userData);

src/components/Sections/AppFooter.tsx

@@ -38,6 +38,9 @@ export default function () {
           <Link fontSize="xs" href="https://itheum.com/legal/datadex/privacypolicy" isExternal>
             Privacy Policy <ExternalLinkIcon mx={1} />
           </Link>
+          <Link fontSize="xs" href="https://stats.uptimerobot.com/D8JBwIo983" isExternal>
+            Status <ExternalLinkIcon mx={1} />
+          </Link>
         </HStack>
       </Flex>
     </Box>

src/components/Tables/InteractionTxTable.tsx

@@ -1,18 +1,18 @@
 import React, { useEffect, useState, useMemo } from "react";
 import { ExternalLinkIcon, WarningTwoIcon } from "@chakra-ui/icons";
 import { Box, HStack, Link, Spinner, useToast } from "@chakra-ui/react";
+import { MarketplaceRequirements } from "@itheum/sdk-mx-data-nft/out";
 import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks";
 import { TransactionDecoder } from "@multiversx/sdk-transaction-decoder/lib/src/transaction.decoder";
 import { ColumnDef } from "@tanstack/react-table";
-import axios, { all } from "axios";
+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 { convertWeiToEsdt } from "libs/utils";
+import { useMarketStore } from "store";
 import { DataTable } from "./Components/DataTable";
 import { InteractionsInTable, timeSince } from "./Components/tableUtils";
-import { useMarketStore } from "store";
-import { MarketplaceRequirements } from "@itheum/sdk-mx-data-nft/out";
 
 export default function InteractionTxTable(props: { address: string }) {
   const { chainID } = useGetNetworkConfig();

src/components/UtilComps/UpperCardComponent.tsx

@@ -26,13 +26,13 @@ import { motion } from "framer-motion";
 import moment from "moment/moment";
 import { MdOutlineInfo } from "react-icons/md";
 import { useNavigate } from "react-router-dom";
+import FrozenOverlay from "components/FrozenOverlay";
 import { CHAIN_TX_VIEWER, uxConfig } from "libs/config";
 import { DataNftMetadataType, OfferType } from "libs/MultiversX/types";
 import { DEFAULT_NFT_IMAGE } from "libs/mxConstants";
 import { convertToLocalString, convertWeiToEsdt, getTokenWantedRepresentation, printPrice, tokenDecimals, transformDescription } from "libs/utils";
 import { useMarketStore, useMintStore } from "store";
 import ShortAddress from "./ShortAddress";
-import FrozenOverlay from "components/FrozenOverlay";
 
 type UpperCardComponentProps = {
   nftImageLoading: boolean;

src/components/WalletDataNFTMX/WalletDataNFTMX.tsx

@@ -36,6 +36,7 @@ import moment from "moment";
 import { MdOutlineInfo } from "react-icons/md";
 import { useNavigate } from "react-router-dom";
 import FrozenOverlay from "components/FrozenOverlay";
+import PreviewDataButton from "components/PreviewDataButton";
 import ExploreAppButton from "components/UtilComps/ExploreAppButton";
 import ShortAddress from "components/UtilComps/ShortAddress";
 import { CHAIN_TX_VIEWER, PREVIEW_DATA_ON_DEVNET_SESSION_KEY, contractsForChain, uxConfig } from "libs/config";
@@ -58,7 +59,6 @@ import { useMarketStore, useMintStore } from "store";
 import AccessDataStreamModal from "./AccessDatastreamModal";
 import BurnDataNFTModal from "./BurnDataNFTModal";
 import ListDataNFTModal from "../ListDataNFTModal";
-import PreviewDataButton from "components/PreviewDataButton";
 
 export type WalletDataNFTMxPropType = {
   hasLoaded: boolean;

src/libs/utils/number.ts

@@ -22,14 +22,17 @@ const formatToHundreds = (number: number) => {
 const formatToThousands = (number: number) => {
   const thousands = Math.floor(number / 1000);
   const remainder = Math.floor((number % 1000) * 100) / 100;
-  return `${thousands},${remainder !== 0 ? remainder : ""}`;
+  const paddedRemainder = remainder < 10 ? `00${remainder}` : remainder < 100 ? `0${remainder}` : remainder;
+  return `${thousands},${paddedRemainder}`;
 };
 
 const formatToMillions = (number: number) => {
   const millions = Math.floor(number / 1000000);
   const thousands = Math.floor((number % 1000000) / 1000);
+  const paddedThousands = thousands < 10 ? `00${thousands}` : thousands < 100 ? `0${thousands}` : thousands;
   const remainder = Math.floor((number % 1000) * 100) / 100;
-  return `${millions},${thousands !== 0 ? `${thousands}` : ""},${remainder !== 0 ? remainder : ""}`;
+  const paddedRemainder = remainder < 10 ? `00${remainder}` : remainder < 100 ? `0${remainder}` : remainder;
+  return `${millions},${paddedThousands},${paddedRemainder}`;
 };
 //
 const BIG_NUMBER_ROUNDING_MODE = BigNumber.ROUND_FLOOR;

src/pages/AdvertiseData/components/TradeForm.tsx

@@ -149,7 +149,7 @@ export const TradeForm: React.FC<TradeFormProps> = (props) => {
   // Destructure the methods needed from React Hook Form useForm component
   const {
     control,
-    formState: { errors },
+    formState: { errors, isValid },
     handleSubmit,
     getValues,
   } = useForm<TradeDataFormType>({
@@ -203,6 +203,7 @@ export const TradeForm: React.FC<TradeFormProps> = (props) => {
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const mintTxFail = (_foo: any) => {
     setErrDataNFTStreamGeneric(new Error("Transaction to mint Data NFT has failed"));
   };
@@ -696,7 +697,7 @@ export const TradeForm: React.FC<TradeFormProps> = (props) => {
             colorScheme="teal"
             isLoading={isMintingModalOpen}
             onClick={dataNFTSellSubmit}
-            isDisabled={!userData?.userWhitelistedForMint && userData?.contractWhitelistEnabled}>
+            isDisabled={!isValid || !readTermsChecked || !readAntiSpamFeeChecked}>
             Mint Your Data NFT
           </Button>
         </ChainSupportedInput>

src/pages/AdvertiseData/components/TradeFormModal.tsx

@@ -4,6 +4,8 @@ import {
   AlertDescription,
   AlertIcon,
   AlertTitle,
+  Box,
+  Button,
   CloseButton,
   Drawer,
   DrawerBody,
@@ -23,6 +25,7 @@ import { labels } from "../../../libs/language";
 import { DataNftMintContract } from "../../../libs/MultiversX/dataNftMint";
 import { getApiDataDex, getApiDataMarshal, getTypedValueFromContract } from "../../../libs/utils";
 import { useMintStore } from "../../../store";
+import { useNavigate } from "react-router-dom";
 
 type TradeFormProps = {
   isOpen: boolean;
@@ -35,6 +38,8 @@ export const TradeFormModal: React.FC<TradeFormProps> = (props) => {
 
   const { chainID } = useGetNetworkConfig();
 
+  const navigate = useNavigate();
+
   const [minRoyalties, setMinRoyalties] = useState<number>(-1);
   const [maxRoyalties, setMaxRoyalties] = useState<number>(-1);
   const [maxSupply, setMaxSupply] = useState<number>(-1);
@@ -72,18 +77,25 @@ export const TradeFormModal: React.FC<TradeFormProps> = (props) => {
   }
 
   const checkUrlReturns200 = async (url: string) => {
-    const { statusCode, isError } = await makeRequest(url);
-
+    let statusCodeF, isErrorF;
     let isSuccess = false;
     let message = "";
-    if (isError) {
-      message = "Data Stream URL is not appropriate for minting into Data NFT (Unknown Error)";
-    } else if (statusCode === 200) {
+    if (url.includes("dmf-dnslink=1") && url.includes("dmf-http=1")) {
+      isErrorF = false;
       isSuccess = true;
-    } else if (statusCode === 404) {
-      message = "Data Stream URL is not reachable (Status Code 404 received)";
     } else {
-      message = `Data Stream URL must be a publicly accessible url (Status Code ${statusCode} received)`;
+      const { statusCode, isError } = await makeRequest(url);
+      statusCodeF = statusCode;
+      isErrorF = isError;
+      if (isErrorF) {
+        message = "Data Stream URL is not appropriate for minting into Data NFT (Unknown Error)";
+      } else if (statusCodeF === 200) {
+        isSuccess = true;
+      } else if (statusCodeF === 404) {
+        message = "Data Stream URL is not reachable (Status Code 404 received)";
+      } else {
+        message = `Data Stream URL must be a publicly accessible url (Status Code ${statusCodeF} received)`;
+      }
     }
 
     return {
@@ -212,6 +224,39 @@ export const TradeFormModal: React.FC<TradeFormProps> = (props) => {
             dataToPrefill={dataToPrefill}
           />
         </DrawerBody>
+        <Box
+          position="absolute"
+          top="5rem"
+          bottom="0"
+          display={"flex"}
+          justifyContent={"center"}
+          alignItems={"center"}
+          flexDirection={"column"}
+          left="0"
+          right="0"
+          height="100%"
+          width="100%"
+          backgroundColor="blackAlpha.800"
+          rounded="lg"
+          visibility={userData?.contractWhitelistEnabled && !userData.userWhitelistedForMint ? "visible" : "hidden"}
+          borderTop="solid .1rem"
+          borderColor="teal.200">
+          <Text fontSize="24px" fontWeight="500" lineHeight="38px" textAlign="center" textColor="teal.200" px="2">
+            - You are not whitelisted -
+          </Text>
+          <Button
+            variant="solid"
+            colorScheme="teal"
+            px={7}
+            py={6}
+            rounded="lg"
+            mt={7}
+            onClick={() => {
+              navigate("/getwhitelisted");
+            }}>
+            Find out how you can get whitelisted
+          </Button>
+        </Box>
       </DrawerContent>
     </Drawer>
   );

src/pages/DataNFT/DataNFTDetails.tsx

@@ -32,7 +32,8 @@ import BigNumber from "bignumber.js";
 import moment from "moment";
 import { FaStore } from "react-icons/fa";
 import { MdOutlineInfo } from "react-icons/md";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import PreviewDataButton from "components/PreviewDataButton";
 import ProcureDataNFTModal from "components/ProcureDataNFTModal";
 import { NoDataHere } from "components/Sections/NoDataHere";
 import TokenTxTable from "components/Tables/TokenTxTable";
@@ -57,7 +58,6 @@ import {
   transformDescription,
 } from "libs/utils";
 import { useMarketStore } from "store";
-import PreviewDataButton from "components/PreviewDataButton";
 import { Favourite } from "../../components/Favourite/Favourite";
 
 type DataNFTDetailsProps = {
@@ -135,21 +135,22 @@ export default function DataNFTDetails(props: DataNFTDetailsProps) {
   });
 
   const getAddressTokenInformation = () => {
-    const apiLink = getApi(chainID);
-    const nftApiLink = `https://${apiLink}/accounts/${address}/nfts/${tokenId}`;
-
-    axios
-      .get(nftApiLink)
-      .then((res) => {
-        if (res.data.identifier == tokenId) {
-          setAddressHasNft(true);
-        }
-      })
-      .catch((err) => {
-        if (err) {
-          setAddressHasNft(false);
-        }
-      });
+    if (isMxLoggedIn) {
+      const apiLink = getApi(chainID);
+      const nftApiLink = `https://${apiLink}/accounts/${address}/nfts/${tokenId}`;
+      axios
+        .get(nftApiLink)
+        .then((res) => {
+          if (res.data.identifier == tokenId) {
+            setAddressHasNft(true);
+          }
+        })
+        .catch((err) => {
+          if (err) {
+            setAddressHasNft(false);
+          }
+        });
+    }
   };
 
   useEffect(() => {
@@ -285,6 +286,13 @@ export default function DataNFTDetails(props: DataNFTDetailsProps) {
     return `/datanfts/marketplace/${identifier}/offer-${offerArg}`;
   };
 
+  const [searchParams, setSearchParams] = useSearchParams();
+  useEffect(() => {
+    if (tokenId && offerId && location.pathname === "/datanfts/marketplace/market") {
+      setSearchParams({ tokenId: tokenId, offerId: String(offerId) });
+    }
+  }, []);
+
   return (
     <Box mx={tokenIdParam ? { base: "5 !important", xl: "28 !important" } : 0}>
       {!isLoadingNftData() ? (