1.2.0.beta.6 : Merge pull request #888 from Itheum/hotfix-preview-data

preview-data-hotfix -> main
Itheum · Aug 7, 2023 · 84b11d5 · 84b11d5
2 parents 787a6db + 06be071
commit 84b11d5
Show file tree

Hide file tree

Showing 10 changed files with 251 additions and 784 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "data-dex",
-  "version": "1.2.0.beta.5",
+  "version": "1.2.0.beta.6",
   "description": "The Itheum Data DEX enables you to trade your data using web3 tech",
   "dependencies": {
     "@chakra-ui/icons": "2.0.19",
@@ -9,7 +9,7 @@
     "@emotion/styled": "11.11.0",
     "@hookform/resolvers": "3.1.0",
     "@multiversx/sdk-core": "12.4.2",
-    "@multiversx/sdk-dapp": "2.15.1",
+    "@multiversx/sdk-dapp": "2.18.4",
     "@multiversx/sdk-native-auth-client": "^1.0.4",
     "@multiversx/sdk-network-providers": "1.4.0",
     "@sentry/react": "7.51.2",

diff --git a/src/components/MarketplaceLowerCard.tsx b/src/components/MarketplaceLowerCard.tsx
@@ -22,7 +22,7 @@ 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 } from "libs/utils";
+import { isValidNumericCharacter, networkIdBasedOnLoggedInStatus } from "libs/utils";
 import { useMarketStore } from "store";
 import { useChainMeta } from "store/ChainMetaContext";
 
@@ -48,19 +48,19 @@ const MarketplaceLowerCard: FC<MarketplaceLowerCardProps> = ({ offer, nftMetadat
   const maxBuyLimit = process.env.REACT_APP_MAX_BUY_LIMIT_PER_SFT ? Number(process.env.REACT_APP_MAX_BUY_LIMIT_PER_SFT) : 0;
   const maxBuyNumber = maxBuyLimit > 0 ? Math.min(maxBuyLimit, offer.quantity) : offer.quantity;
   const [previewDataOnDevnetSession] = useLocalStorage(PREVIEW_DATA_ON_DEVNET_SESSION_KEY, null);
-
+  const networkId = networkIdBasedOnLoggedInStatus(isMxLoggedIn, _chainMeta.networkId);
   return (
     <>
       <HStack justifyContent="stretch">
-        <Tooltip colorScheme="teal" hasArrow label="Preview Data is disabled on devnet" isDisabled={network.id != "devnet" || !!previewDataOnDevnetSession}>
+        <Tooltip colorScheme="teal" hasArrow label="Preview Data is disabled on devnet" isDisabled={!(networkId == "ED" && !previewDataOnDevnetSession)}>
           <Button
             my="3"
             size="sm"
             w="full"
             colorScheme="teal"
             variant="outline"
             _disabled={{ opacity: 0.2 }}
-            isDisabled={network.id == "devnet" && !previewDataOnDevnetSession}
+            isDisabled={networkId == "ED" && !previewDataOnDevnetSession}
             onClick={() => {
               window.open(nftMetadata.dataPreview);
             }}>

diff --git a/src/components/MyListedDataLowerCard.tsx b/src/components/MyListedDataLowerCard.tsx
@@ -36,6 +36,7 @@ import {
   sleep,
   getTokenWantedRepresentation,
   tokenDecimals,
+  networkIdBasedOnLoggedInStatus,
 } from "libs/utils";
 import { useMarketStore } from "store";
 import { useChainMeta } from "store/ChainMetaContext";
@@ -66,6 +67,7 @@ const MyListedDataLowerCard: FC<MyListedDataLowerCardProps> = ({ offer, nftMetad
   const itheumToken = _chainMeta.contracts.itheumToken;
   const toast = useToast();
   const { address } = useGetAccountInfo();
+  const isMxLoggedIn = !!address;
 
   const [previewDataOnDevnetSession] = useLocalStorage(PREVIEW_DATA_ON_DEVNET_SESSION_KEY, null);
 
@@ -138,16 +140,17 @@ const MyListedDataLowerCard: FC<MyListedDataLowerCardProps> = ({ offer, nftMetad
     onUpdatePriceModalClose();
   };
 
+  const networkId = networkIdBasedOnLoggedInStatus(isMxLoggedIn, _chainMeta.networkId);
   return (
     <>
-      <Tooltip colorScheme="teal" hasArrow label="View Data is disabled on devnet" isDisabled={network.id != "devnet" || !!previewDataOnDevnetSession}>
+      <Tooltip colorScheme="teal" hasArrow label="View Data is disabled on devnet" isDisabled={!(networkId == "ED" && !previewDataOnDevnetSession)}>
         <Button
           my="3"
           size="sm"
           colorScheme="teal"
           variant="outline"
           _disabled={{ opacity: 0.2 }}
-          isDisabled={network.id == "devnet" && !previewDataOnDevnetSession}
+          isDisabled={networkId == "ED" && !previewDataOnDevnetSession}
           onClick={() => {
             window.open(nftMetadata.dataPreview);
           }}>

diff --git a/src/components/MyListedDataNFT.tsx b/src/components/MyListedDataNFT.tsx
@@ -28,7 +28,7 @@ import { CHAIN_TX_VIEWER, uxConfig, PREVIEW_DATA_ON_DEVNET_SESSION_KEY } from "l
 import { useLocalStorage } from "libs/hooks";
 import { getApi } from "libs/MultiversX/api";
 import { DataNftMetadataType, OfferType } from "libs/MultiversX/types";
-import { convertWeiToEsdt, convertToLocalString, getTokenWantedRepresentation, hexZero, tokenDecimals } from "libs/utils";
+import { convertWeiToEsdt, convertToLocalString, getTokenWantedRepresentation, hexZero, tokenDecimals, networkIdBasedOnLoggedInStatus } from "libs/utils";
 import { useMarketStore, useMintStore } from "store";
 import { useChainMeta } from "store/ChainMetaContext";
 
@@ -73,12 +73,15 @@ const MyListedDataNFT: FC<MyListedDataNFTProps> = (props) => {
   const { network } = useGetNetworkConfig();
   const { hasPendingTransactions } = useGetPendingTransactions();
   const { address } = useGetAccountInfo();
+  const isMxLoggedIn = !!address;
+
   const { chainMeta: _chainMeta } = useChainMeta() as any;
   const ChainExplorer = CHAIN_TX_VIEWER[_chainMeta.networkId as keyof typeof CHAIN_TX_VIEWER];
-  const [previewDataOnDevnetSession,] = useLocalStorage(PREVIEW_DATA_ON_DEVNET_SESSION_KEY, null);
+  const [previewDataOnDevnetSession] = useLocalStorage(PREVIEW_DATA_ON_DEVNET_SESSION_KEY, null);
 
   const marketRequirements = useMarketStore((state) => state.marketRequirements);
   const userData = useMintStore((state) => state.userData);
+  const networkId = networkIdBasedOnLoggedInStatus(isMxLoggedIn, _chainMeta.networkId);
 
   return (
     <Skeleton isLoaded={nftMetadataLoading}>
@@ -187,14 +190,18 @@ const MyListedDataNFT: FC<MyListedDataNFTProps> = (props) => {
                   </Text>
                 </Box>
 
-                <Tooltip colorScheme="teal" hasArrow label="Preview Data is disabled on devnet" isDisabled={network.id != "devnet" || !!previewDataOnDevnetSession}>
+                <Tooltip
+                  colorScheme="teal"
+                  hasArrow
+                  label="Preview Data is disabled on devnet"
+                  isDisabled={!(networkId == "ED" && !previewDataOnDevnetSession)}>
                   <Button
                     mt="2"
                     size="sm"
                     colorScheme="teal"
                     height="7"
                     variant="outline"
-                    isDisabled={network.id == "devnet" && !previewDataOnDevnetSession}
+                    isDisabled={networkId == "ED" && !previewDataOnDevnetSession}
                     onClick={() => {
                       window.open(nftMetadata[index].dataPreview);
                     }}>

diff --git a/src/components/UtilComps/ExploreAppButton.tsx b/src/components/UtilComps/ExploreAppButton.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { Button, Text, Tooltip } from "@chakra-ui/react";
 import { useGetLoginInfo } from "@multiversx/sdk-dapp/hooks/account";
-import { TRAILBLAZER_NONCES } from "libs/config";
-import { networkIdBasedOnLoggedInStatus, getExplorerTrailBlazerURL } from "libs/utils";
+import { EXPLORER_APP_SUPPORTED_NONCES, EXPLORER_APP_FOR_NONCE } from "libs/config";
+import { networkIdBasedOnLoggedInStatus } from "libs/utils";
 import { useChainMeta } from "store/ChainMetaContext";
 
 export default function ExploreAppButton({ nonce, w, size }: { nonce: number; w?: string; size?: any }) {
@@ -12,7 +12,7 @@ export default function ExploreAppButton({ nonce, w, size }: { nonce: number; w?
 
   return (
     <>
-      {TRAILBLAZER_NONCES[networkId].indexOf(nonce) >= 0 && (
+      {Object.values(EXPLORER_APP_SUPPORTED_NONCES[networkId]).flat().indexOf(nonce) >= 0 && (
         <Tooltip hasArrow label="Unlocks custom app on Itheum Explorer">
           <Button
             size={size ? size : "sm"}
@@ -22,7 +22,16 @@ export default function ExploreAppButton({ nonce, w, size }: { nonce: number; w?
             }}
             w={w ? w : "full"}
             onClick={() => {
-              window.open(getExplorerTrailBlazerURL(networkId))?.focus();
+              const appNonceMappings = EXPLORER_APP_SUPPORTED_NONCES[networkId];
+
+              // find the app key id based on nonce
+              const appKey = Object.keys(appNonceMappings).find((_appKey) => {
+                return appNonceMappings[_appKey].includes(nonce);
+              });
+
+              if (appKey) {
+                window.open(EXPLORER_APP_FOR_NONCE[networkId][appKey])?.focus();
+              }
             }}>
             <Text py={3} color="black">
               Explore

diff --git a/src/components/WalletDataNFTMX.tsx b/src/components/WalletDataNFTMX.tsx
@@ -54,7 +54,7 @@ import { labels } from "libs/language";
 import { DataNftMarketContract } from "libs/MultiversX/dataNftMarket";
 import { DataNftMintContract } from "libs/MultiversX/dataNftMint";
 import { DataNftType } from "libs/MultiversX/types";
-import { convertToLocalString, transformDescription, isValidNumericCharacter, sleep } from "libs/utils";
+import { convertToLocalString, transformDescription, isValidNumericCharacter, sleep, networkIdBasedOnLoggedInStatus } from "libs/utils";
 import { useMarketStore, useMintStore } from "store";
 import { useChainMeta } from "store/ChainMetaContext";
 import ListDataNFTModal from "./ListDataNFTModal";
@@ -72,10 +72,12 @@ export default function WalletDataNFTMX(item: WalletDataNFTMxPropType) {
   const { colorMode } = useColorMode();
   const { chainMeta: _chainMeta } = useChainMeta();
   const { address } = useGetAccountInfo();
+  const isMxLoggedIn = !!address;
   const { hasPendingTransactions } = useGetPendingTransactions();
   const toast = useToast();
   const { signMessage } = useSignMessage();
   const loginInfo = useGetLoginInfo();
+  const networkId = networkIdBasedOnLoggedInStatus(isMxLoggedIn, _chainMeta.networkId);
 
   const navigate = useNavigate();
   const { nftId, dataNonce } = useParams();
@@ -443,30 +445,26 @@ export default function WalletDataNFTMX(item: WalletDataNFTMxPropType) {
             </Box>
 
             <HStack mt="2">
-              <Tooltip colorScheme="teal" hasArrow label="View Data is disabled on devnet" isDisabled={network.id != "devnet" || !!previewDataOnDevnetSession}>
+              <Tooltip colorScheme="teal" hasArrow label="View Data is disabled on devnet" isDisabled={!(networkId == "ED" && !previewDataOnDevnetSession)}>
                 <Button
                   size="sm"
                   colorScheme="teal"
                   w="full"
-                  isDisabled={network.id == "devnet" && !previewDataOnDevnetSession}
+                  isDisabled={networkId == "ED" && !previewDataOnDevnetSession}
                   onClick={() => {
                     accessDataStream(item.dataMarshal, item.id);
                   }}>
                   View Data
                 </Button>
               </Tooltip>
 
-              <Tooltip
-                colorScheme="teal"
-                hasArrow
-                label="Preview Data is disabled on devnet"
-                isDisabled={network.id != "devnet" || !!previewDataOnDevnetSession}>
+              <Tooltip colorScheme="teal" hasArrow label="Preview Data is disabled on devnet" isDisabled={!(networkId == "ED" && !previewDataOnDevnetSession)}>
                 <Button
                   size="sm"
                   colorScheme="teal"
                   w="full"
                   variant="outline"
-                  isDisabled={network.id == "devnet" && !previewDataOnDevnetSession}
+                  isDisabled={networkId == "ED" && !previewDataOnDevnetSession}
                   onClick={() => {
                     window.open(item.dataPreview);
                   }}>

diff --git a/src/libs/config.ts b/src/libs/config.ts
@@ -504,7 +504,24 @@ export const whitelistWallets: Array<string> = [];
 
 export const PREVIEW_DATA_ON_DEVNET_SESSION_KEY = "preview-data-on-devnet";
 
-export const TRAILBLAZER_NONCES: Record<string, Array<number>> = {
-  "ED": [407, 423],
-  "E1": [1],
+export const EXPLORER_APP_SUPPORTED_NONCES: Record<string, Record<string, Array<number>>> = {
+  "ED": {
+    "trailblazer": [407, 423],
+    "multiversxbubbles": [416],
+  },
+  "E1": {
+    "trailblazer": [1],
+    "multiversxbubbles": [2],
+  },
+};
+
+export const EXPLORER_APP_FOR_NONCE: Record<string, Record<string, string>> = {
+  "ED": {
+    "trailblazer": "https://stg.explorer.itheum.io/project-trailblazer",
+    "multiversxbubbles": "https://stg.explorer.itheum.io/multiversx-bubbles",
+  },
+  "E1": {
+    "trailblazer": "https://explorer.itheum.io/project-trailblazer",
+    "multiversxbubbles": "https://explorer.itheum.io/multiversx-bubbles",
+  },
 };
diff --git a/src/libs/utils/util.ts b/src/libs/utils/util.ts
@@ -187,10 +187,6 @@ export const getApiDataMarshal = (networkId: NetworkIdType) => {
   return process.env[envKey] || defaultUrl;
 };
 
-export const getExplorerTrailBlazerURL = (networkId: NetworkIdType) => {
-  return networkId === "E1" ? "https://explorer.itheum.io/project-trailblazer" : "https://stg.explorer.itheum.io/project-trailblazer";
-};
-
 // utility to return mainnet if user is NOT logged in and they are on datadex.itheum.io
 // ... this is used only for "public" components and routes where the user has not connected their wallet
 export const networkIdBasedOnLoggedInStatus = (isMxLoggedIn: boolean, networkId: NetworkIdType) => {

diff --git a/src/pages/DataNFT/DataNFTDetails.tsx b/src/pages/DataNFT/DataNFTDetails.tsx
@@ -509,12 +509,12 @@ export default function DataNFTDetails(props: DataNFTDetailsProps) {
                       colorScheme="teal"
                       hasArrow
                       label="Preview Data is disabled on devnet"
-                      isDisabled={network.id != "devnet" || !!previewDataOnDevnetSession}>
+                      isDisabled={!(networkId == "ED" && !previewDataOnDevnetSession)}>
                       <Button
                         size={{ base: "md", lg: "lg" }}
                         colorScheme="teal"
                         variant="outline"
-                        isDisabled={network.id == "devnet" && !previewDataOnDevnetSession}
+                        isDisabled={networkId == "ED" && !previewDataOnDevnetSession}
                         onClick={() => {
                           window.open(nftData.attributes.dataPreview);
                         }}>