Merge pull request #1059 from Itheum/stg

STG -> MAIN : 1.7.0
Itheum · Oct 18, 2023 · 7528294 · 7528294
2 parents 23afaae + 553c54b
commit 7528294
Show file tree

Hide file tree

Showing 34 changed files with 6,081 additions and 3,003 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -67,6 +67,8 @@
         "endOfLine": "auto"
       }
     ],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error"],
     "@typescript-eslint/indent": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-explicit-any": "off",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,40 +1,40 @@
 {
   "name": "data-dex",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "The Itheum Data DEX enables you to trade your data using web3 tech",
   "dependencies": {
-    "@chakra-ui/icons": "2.1.0",
-    "@chakra-ui/react": "2.8.0",
+    "@chakra-ui/icons": "2.1.1",
+    "@chakra-ui/react": "2.8.1",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@hookform/resolvers": "3.1.1",
-    "@itheum/sdk-mx-data-nft": "1.2.0",
-    "@multiversx/sdk-core": "12.8.0",
-    "@multiversx/sdk-dapp": "2.20.5",
+    "@hookform/resolvers": "3.3.1",
+    "@itheum/sdk-mx-data-nft": "2.1.5",
+    "@multiversx/sdk-core": "12.9.0",
+    "@multiversx/sdk-dapp": "2.22.1",
     "@multiversx/sdk-native-auth-client": "1.0.5",
     "@multiversx/sdk-network-providers": "2.0.0",
-    "@sentry/react": "7.60.1",
+    "@sentry/react": "7.72.0",
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.9.3",
-    "@testing-library/jest-dom": "5.17.0",
+    "@tanstack/react-table": "8.10.3",
+    "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
-    "axios": "1.4.0",
+    "@testing-library/user-event": "14.5.1",
+    "axios": "1.5.1",
     "dotenv": "16.3.1",
-    "framer-motion": "10.15.0",
+    "framer-motion": "10.16.4",
     "mime": "3.0.0",
     "moment": "2.29.4",
     "nft.storage": "7.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
-    "react-hook-form": "7.45.2",
-    "react-icons": "4.10.1",
-    "react-router-dom": "6.14.2",
+    "react-hook-form": "7.46.2",
+    "react-icons": "4.11.0",
+    "react-router-dom": "6.16.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "3.3.1",
-    "yup": "1.2.0",
-    "zustand": "4.3.9"
+    "web-vitals": "3.5.0",
+    "yup": "1.3.2",
+    "zustand": "4.4.1"
   },
   "scripts": {
     "start": "REACT_APP_VERSION=$(node -pe 'require(\"./package.json\").version') react-scripts start",
@@ -66,28 +66,28 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
-    "@types/node": "18.17.1",
-    "@types/react": "18.2.17",
-    "@types/react-dom": "18.2.7",
+    "@types/node": "18.18.0",
+    "@types/react": "18.2.23",
+    "@types/react-dom": "18.2.8",
     "@types/react-router-dom": "5.3.3",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
-    "eslint": "8.46.0",
-    "eslint-config-prettier": "8.9.0",
+    "eslint": "8.50.0",
+    "eslint-config-prettier": "9.0.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-config-standard": "17.1.0",
-    "eslint-import-resolver-typescript": "3.5.5",
-    "eslint-plugin-import": "2.28.0",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-import-resolver-typescript": "3.6.1",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-react": "7.33.0",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "prettier": "2.8.8",
+    "prettier": "3.0.3",
     "react-error-overlay": "6.0.11",
     "react-scripts": "5.0.1",
     "typescript": "4.9.5"
   },
   "engines": {
-    "node": "18.17.1"
+    "node": "18.18.0"
   }
 }
diff --git a/src/components/ListDataNFTModal.tsx b/src/components/ListDataNFTModal.tsx
@@ -17,6 +17,7 @@ import {
 } from "@chakra-ui/react";
 import { useGetAccountInfo, useGetLoginInfo, useGetNetworkConfig, useGetPendingTransactions, useTrackTransactionStatus } from "@multiversx/sdk-dapp/hooks";
 import axios from "axios";
+
 import BigNumber from "bignumber.js";
 import DataNFTLiveUptime from "components/UtilComps/DataNFTLiveUptime";
 import { contractsForChain } from "libs/config";
@@ -99,7 +100,7 @@ export default function ListDataNFTModal({ isOpen, onClose, sellerFee, nftData,
     wanted_token_identifier = offer.wanted_token_identifier,
     wanted_token_nonce = offer.wanted_token_nonce,
     wanted_token_amount = Number(
-      (Number(offer.wanted_token_amount) + (Number(offer.wanted_token_amount) * (marketRequirements?.buyer_fee ?? 200)) / 10000) * Number(10 ** 18)
+      (Number(offer.wanted_token_amount) + (Number(offer.wanted_token_amount) * (marketRequirements.buyerTaxPercentage ?? 200)) / 10000) * Number(10 ** 18)
     ).toString(),
     quantity = amount * 1,
     owner = address
@@ -197,7 +198,7 @@ export default function ListDataNFTModal({ isOpen, onClose, sellerFee, nftData,
 
     const { sessionId } = await marketContract.addToMarket(nftData.collection, nftData.nonce, amount, offer.wanted_token_amount, address);
     if (isWebWallet) {
-      const price = Number(offer.wanted_token_amount) + (Number(offer.wanted_token_amount) * (marketRequirements?.buyer_fee ?? 200)) / 10000;
+      const price = Number(offer.wanted_token_amount) + (Number(offer.wanted_token_amount) * (marketRequirements.buyerTaxPercentage ?? 200)) / 10000;
       sessionStorage.setItem(
         "web-wallet-tx",
         JSON.stringify({

diff --git a/src/components/MarketplaceLowerCard.tsx b/src/components/MarketplaceLowerCard.tsx
@@ -139,7 +139,7 @@ const MarketplaceLowerCard: FC<MarketplaceLowerCardProps> = ({ offer, nftMetadat
         <ProcureDataNFTModal
           isOpen={isProcureModalOpen}
           onClose={onProcureModalClose}
-          buyerFee={marketRequirements?.buyer_fee || 0}
+          buyerFee={marketRequirements.buyerTaxPercentage || 0}
           nftData={nftMetadata}
           offer={offer}
           amount={amount}

diff --git a/src/components/MyListedDataLowerCard.tsx b/src/components/MyListedDataLowerCard.tsx
@@ -81,6 +81,7 @@ const MyListedDataLowerCard: FC<MyListedDataLowerCardProps> = ({ offer, nftMetad
     if (!hasSignedTransactions) return;
 
     try {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const session = signedTransactionsArray[0][0];
     } catch (e) {
       sessionStorage.removeItem("web-wallet-tx");
@@ -132,7 +133,7 @@ const MyListedDataLowerCard: FC<MyListedDataLowerCardProps> = ({ offer, nftMetad
         "Content-Type": "application/json",
       };
 
-      const price = newPrice + (newPrice * (marketRequirements?.buyer_fee ?? 200)) / 10000;
+      const price = newPrice + (newPrice * (marketRequirements.buyerTaxPercentage ?? 200)) / 10000;
 
       const requestBody = { price: convertEsdtToWei(price, tokenDecimals(offer.wanted_token_identifier)).toFixed() };
       const response = await fetch(`${backendUrl}/updateOffer/${index}`, {
@@ -182,7 +183,7 @@ const MyListedDataLowerCard: FC<MyListedDataLowerCardProps> = ({ offer, nftMetad
   const fee =
     marketRequirements && offer
       ? convertWeiToEsdt(
-          new BigNumber(offer.wanted_token_amount).multipliedBy(10000).div(10000 + (marketRequirements.buyer_fee as number)),
+          new BigNumber(offer.wanted_token_amount).multipliedBy(10000).div(10000 + (marketRequirements.buyerTaxPercentage as number)),
           tokenDecimals(offer.wanted_token_identifier)
         ).toNumber()
       : 0;
@@ -302,7 +303,7 @@ const MyListedDataLowerCard: FC<MyListedDataLowerCardProps> = ({ offer, nftMetad
             if (marketRequirements) {
               setNewListingPrice(
                 convertWeiToEsdt(
-                  new BigNumber(offer.wanted_token_amount).multipliedBy(10000).div(10000 + marketRequirements.buyer_fee),
+                  new BigNumber(offer.wanted_token_amount).multipliedBy(10000).div(10000 + marketRequirements.buyerTaxPercentage),
                   tokenDecimals(offer.wanted_token_identifier)
                 ).toNumber()
               );

diff --git a/src/components/MyListedDataNFT.tsx b/src/components/MyListedDataNFT.tsx
@@ -246,7 +246,7 @@ const MyListedDataNFT: FC<MyListedDataNFTProps> = (props) => {
                                 new BigNumber(offers[index].wanted_token_amount)
                                   .multipliedBy(amountOfTokens[index])
                                   .multipliedBy(10000)
-                                  .div(10000 + marketRequirements.buyer_fee),
+                                  .div(10000 + marketRequirements.buyerTaxPercentage),
                                 tokenDecimals(offers[index].wanted_token_identifier)
                               ).toNumber()
                             );

diff --git a/src/components/ProcureDataNFTModal.tsx b/src/components/ProcureDataNFTModal.tsx
@@ -82,6 +82,7 @@ export default function ProcureDataNFTModal({ isOpen, onClose, buyerFee, nftData
     if (!hasSignedTransactions) return;
 
     try {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const session = signedTransactionsArray[0][0];
     } catch (e) {
       sessionStorage.removeItem("web-wallet-tx");

diff --git a/src/components/Sections/AppHeader.tsx b/src/components/Sections/AppHeader.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { WarningTwoIcon } from "@chakra-ui/icons";
+import { WarningTwoIcon, SunIcon } from "@chakra-ui/icons";
 import {
   Accordion,
   AccordionItem,
@@ -38,10 +38,9 @@ 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 { AiFillHome } from "react-icons/ai";
-import { FaStore, FaUserCheck } from "react-icons/fa";
+import { FaStore, FaUserCheck, FaLaptop } from "react-icons/fa";
 import { MdAccountBalanceWallet, MdDarkMode, MdMenu, MdPerson, MdSpaceDashboard } from "react-icons/md";
 import { RiExchangeFill } from "react-icons/ri";
-import { TbSunset2 } from "react-icons/tb";
 import { TiArrowSortedDown } from "react-icons/ti";
 import { Link as ReactRouterLink, useLocation, useNavigate } from "react-router-dom";
 import logoSmlL from "assets/img/logo-icon-b.png";
@@ -126,7 +125,7 @@ const AppHeader = ({ onShowConnectWalletModal, setMenuItem, handleLogout }: { on
   const { isLoggedIn: isMxLoggedIn } = useGetLoginInfo();
   const { hasPendingTransactions } = useGetPendingTransactions();
   const { address: mxAddress } = useGetAccountInfo();
-  const { colorMode, toggleColorMode } = useColorMode();
+  const { colorMode, setColorMode } = useColorMode();
   const { pathname } = useLocation();
 
   const [mxShowClaimsHistory, setMxShowClaimsHistory] = useState(false);
@@ -224,7 +223,7 @@ const AppHeader = ({ onShowConnectWalletModal, setMenuItem, handleLogout }: { on
               </Heading>
             </HStack>
           </Link>
-          {isMxLoggedIn ? (
+          {/* {isMxLoggedIn ? (
             <Box display={{ base: "block", md: "none" }}>
               <IconButton
                 size="lg"
@@ -246,7 +245,7 @@ const AppHeader = ({ onShowConnectWalletModal, setMenuItem, handleLogout }: { on
                 onClick={toggleColorMode}
               />
             </Box>
-          )}
+          )} */}
         </HStack>
         <Flex backgroundColor="none">
           <HStack alignItems={"center"} spacing={2}>
@@ -331,7 +330,9 @@ const AppHeader = ({ onShowConnectWalletModal, setMenuItem, handleLogout }: { on
 
                         <MenuGroup title="My Address Quick Copy">
                           <MenuItemOption closeOnSelect={false} backgroundColor={colorMode === "dark" ? "#181818" : "bgWhite"}>
-                            <ShortAddress address={mxAddress} fontSize="md" marginLeftSet="-20px" />
+                            <Text as={"div"} color="teal.200" fontWeight={"bold"}>
+                              <ShortAddress address={mxAddress} fontSize="md" marginLeftSet="-20px" isCopyAddress={true} />
+                            </Text>
                           </MenuItemOption>
 
                           <MenuDivider />
@@ -387,7 +388,7 @@ const AppHeader = ({ onShowConnectWalletModal, setMenuItem, handleLogout }: { on
                   <IconButton
                     display={{ base: "none", md: "inline-flex" }}
                     size={{ md: "md", xl: "lg", "2xl": "lg" }}
-                    px="2 !important"
+                    p="2 !important"
                     color="teal.200"
                     icon={<AiFillHome fontSize={"1.4rem"} />}
                     aria-label={"Back to home"}
@@ -413,17 +414,38 @@ const AppHeader = ({ onShowConnectWalletModal, setMenuItem, handleLogout }: { on
               </Button>
             )}
             Toggle Mode
-            <Box display={{ base: "none", md: "block", xl: "block" }}>
-              <IconButton
+            <Menu>
+              <MenuButton
+                marginRight={{ base: "10", md: "none" }}
+                as={IconButton}
+                aria-label="Options"
                 size={{ md: "md", xl: "lg", "2xl": "lg" }}
-                px="2 !important"
-                mr={{ md: "1", xl: "0" }}
-                icon={colorMode === "light" ? <MdDarkMode fontSize={"1.4rem"} /> : <TbSunset2 fontSize={"1.4rem"} />}
-                aria-label="Change Color Theme"
+                p="2 !important"
                 color="teal.200"
-                onClick={toggleColorMode}
+                icon={colorMode === "light" ? <SunIcon fontSize={"1.4rem"} /> : <MdDarkMode fontSize={"1.4rem"} />}
+                variant="solid"
               />
-            </Box>
+              <MenuList backgroundColor={colorMode === "dark" ? "#181818" : "bgWhite"}>
+                <MenuItem
+                  icon={<SunIcon color="teal.200" />}
+                  onClick={() => setColorMode("light")}
+                  backgroundColor={colorMode === "dark" ? "#181818" : "bgWhite"}>
+                  Light
+                </MenuItem>
+                <MenuItem
+                  icon={<MdDarkMode color="#00C797" />}
+                  onClick={() => setColorMode("dark")}
+                  backgroundColor={colorMode === "dark" ? "#181818" : "bgWhite"}>
+                  Dark
+                </MenuItem>
+                <MenuItem
+                  icon={<FaLaptop color="#00C797" />}
+                  onClick={() => setColorMode("system")}
+                  backgroundColor={colorMode === "dark" ? "#181818" : "bgWhite"}>
+                  System
+                </MenuItem>
+              </MenuList>
+            </Menu>
           </HStack>
         </Flex>
       </Flex>
@@ -444,13 +466,13 @@ const AppHeader = ({ onShowConnectWalletModal, setMenuItem, handleLogout }: { on
             <Accordion allowMultiple>
               {exploreRouterMenu.map((menu) => (
                 <AccordionItem key={menu.sectionId}>
-                  {({ isExpanded }) => (
+                  {() => (
                     <>
                       <Text as={"header"} fontWeight="700" fontSize="md" ml={4} mt={2}>
                         My Address Quick Copy
                       </Text>
                       <Text as={"div"} m={"2 !important"} pl={8} color="teal.200" fontWeight={"bold"}>
-                        <ShortAddress address={mxAddress} fontSize="md" marginLeftSet="-20px" />
+                        <ShortAddress address={mxAddress} fontSize="md" marginLeftSet="-20px" isCopyAddress={true} />
                       </Text>
                       <hr />
                       <List>

diff --git a/src/components/Tables/InteractionTxTable.tsx b/src/components/Tables/InteractionTxTable.tsx
@@ -82,8 +82,13 @@ export default function InteractionTxTable(props: { address: string }) {
 
   useEffect(() => {
     const fetchData = async () => {
-      if (!contractsForChain(chainID).dataNftMint || !contractsForChain(chainID).market) return;
-      const interactions = await getInteractionTransactions(props.address, contractsForChain(chainID).dataNftMint, contractsForChain(chainID).market, chainID);
+      if (!props.address || !contractsForChain(chainID).dataNftTokens[0].contract || !contractsForChain(chainID).market) return;
+      const interactions = await getInteractionTransactions(
+        props.address,
+        contractsForChain(chainID).dataNftTokens[0].contract,
+        contractsForChain(chainID).market,
+        chainID
+      );
       if ("error" in interactions) {
         toast({
           title: "ER4: Could not get your recent transactions from the MultiversX blockchain.",

diff --git a/src/components/UtilComps/DataNFTLiveUptime.tsx b/src/components/UtilComps/DataNFTLiveUptime.tsx
@@ -45,6 +45,13 @@ const DataNFTLiveUptime = (props: DataNFTLiveUptimeProps) => {
         if (data.response_code >= 200 && data.response_code < 300) {
           setLiveUptimeOKMsg(`The live check of the Data Steam is returning an HTTP Status code ${data.response_code}, which indicates that it is available.`);
 
+          props.handleFlagAsFailed(false);
+          _isLiveUptimeSuccessful = true;
+        } else if (data.response_code === 403) {
+          setLiveUptimeOKMsg(
+            `The live check of the Data Steam is returning an HTTP Status code ${data.response_code}, which indicates that it is available but protected via authentication.`
+          );
+
           props.handleFlagAsFailed(false);
           _isLiveUptimeSuccessful = true;
         } else {

diff --git a/src/components/WalletDataNFTMX.tsx b/src/components/WalletDataNFTMX.tsx
@@ -89,6 +89,8 @@ export default function WalletDataNFTMX(item: WalletDataNFTMxPropType) {
   const isWebWallet = loginMethod == "wallet";
   const userData = useMintStore((state) => state.userData);
   const isMarketPaused = useMarketStore((state) => state.isMarketPaused);
+  const marketRequirements = useMarketStore((state) => state.marketRequirements);
+
   const { isOpen: isAccessProgressModalOpen, onOpen: onAccessProgressModalOpen, onClose: onAccessProgressModalClose } = useDisclosure();
   const [unlockAccessProgress, setUnlockAccessProgress] = useState({
     s1: 0,
@@ -281,7 +283,13 @@ export default function WalletDataNFTMX(item: WalletDataNFTMxPropType) {
       return;
     }
 
-    mintContract.sendBurnTransaction(address, selectedDataNft.collection, selectedDataNft.nonce, dataNftBurnAmount);
+    mintContract.sendBurnTransaction(
+      address,
+      selectedDataNft.collection,
+      selectedDataNft.nonce,
+      dataNftBurnAmount,
+      contractsForChain(chainID).dataNftTokens.find((t) => t.id === selectedDataNft.collection)?.contract
+    );
 
     onBurnNFTClose();
   };
@@ -651,7 +659,14 @@ export default function WalletDataNFTMX(item: WalletDataNFTMxPropType) {
                 display={item.isProfile === true ? "none" : "flex"}
                 colorScheme="teal"
                 variant="outline"
-                isDisabled={hasPendingTransactions || !!amountError || !!priceError || isMarketPaused}
+                isDisabled={
+                  hasPendingTransactions ||
+                  !!amountError ||
+                  !!priceError ||
+                  isMarketPaused ||
+                  marketRequirements.maximumPaymentFees[0] === undefined ||
+                  marketRequirements.maximumPaymentFees[0] === null
+                }
                 onClick={() => onListButtonClick(item)}>
                 <Text py={3} color={colorMode === "dark" ? "white" : "black"} style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                   List {amount} NFT{amount > 1 && "s"} for {formatButtonNumber(price, amount)}