Merge pull request #1534 from Itheum/hotfix-perf-upgrades-nov24_2

feature: fix image issues on private rpc, roll lback to sdk-dapp
Itheum · Nov 13, 2024 · 80c39d5 · 80c39d5
2 parents 47b0894 + aaf37a5
commit 80c39d5
Show file tree

Hide file tree

Showing 19 changed files with 133 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "data-dex",
-  "version": "1.18.11",
+  "version": "1.18.12",
   "description": "The Itheum Data DEX enables you to trade your data using web3 tech",
   "dependencies": {
     "@chakra-ui/icons": "2.1.1",
@@ -11,7 +11,7 @@
     "@itheum/sdk-mx-data-nft": "3.8.0-alpha.12",
     "@itheum/sdk-mx-enterprise": "0.3.0",
     "@multiversx/sdk-core": "13.14.2",
-    "@multiversx/sdk-dapp": "npm:@bucurdavid/[email protected]",
+    "@multiversx/sdk-dapp": "3.0.10",
     "@peerme/sdk": "0.2.1",
     "@sentry/react": "7.118.0",
     "@tanstack/match-sorter-utils": "8.15.1",

diff --git a/src/components/ListDataNFTModal.tsx b/src/components/ListDataNFTModal.tsx
@@ -288,7 +288,7 @@ export default function ListDataNFTModal({ isOpen, onClose, sellerFee, nftData,
                 </Flex>
               </Box>
               <Box flex="1">
-                <NftMediaComponent nftMedia={nftData?.media} imageHeight={"120px"} imageWidth="120px" borderRadius="md" />
+                <NftMediaComponent nftMedia={nftData?.media} imageUrls={[nftData?.nftImgUrl]} imageHeight={"120px"} imageWidth="120px" borderRadius="md" />
               </Box>
             </HStack>
 

diff --git a/src/components/MarketplaceLowerCard.tsx b/src/components/MarketplaceLowerCard.tsx
@@ -49,7 +49,6 @@ const MarketplaceLowerCard: FC<MarketplaceLowerCardProps> = ({ extendedOffer: of
     <>
       <HStack justifyContent="stretch" pb={2}>
         <PreviewDataButton previewDataURL={nftMetadata.dataPreview} tokenName={nftMetadata.tokenName} />
-
         <ExploreAppButton collection={offer.offeredTokenIdentifier} nonce={offer.offeredTokenNonce} />
       </HStack>
 

diff --git a/src/components/MyListedDataLowerCard.tsx b/src/components/MyListedDataLowerCard.tsx
@@ -278,7 +278,13 @@ const MyListedDataLowerCard: FC<MyListedDataLowerCardProps> = ({ offer, nftMetad
                       </Flex>
                     </Box>
                     <Box flex="1">
-                      <NftMediaComponent nftMedia={nftMetadata.media} imageHeight={"120px"} imageWidth="120px" borderRadius="md" />
+                      <NftMediaComponent
+                        nftMedia={nftMetadata.media}
+                        imageUrls={nftMetadata?.nftImgUrl ? [nftMetadata.nftImgUrl] : []}
+                        imageHeight={"120px"}
+                        imageWidth="120px"
+                        borderRadius="md"
+                      />
                     </Box>
                   </HStack>
                   <Flex mt="40px" justifyContent="flex-start" alignItems="center">
@@ -349,7 +355,13 @@ const MyListedDataLowerCard: FC<MyListedDataLowerCardProps> = ({ offer, nftMetad
                       </Flex>
                     </Box>
                     <Box flex="1">
-                      <NftMediaComponent nftMedia={nftMetadata.media} imageHeight={"120px"} imageWidth="120px" borderRadius="md" />
+                      <NftMediaComponent
+                        nftMedia={nftMetadata.media}
+                        imageUrls={nftMetadata?.nftImgUrl ? [nftMetadata.nftImgUrl] : []}
+                        imageHeight={"120px"}
+                        imageWidth="120px"
+                        borderRadius="md"
+                      />
                     </Box>
                   </HStack>
                   <Text fontSize="md" mt="28px">
@@ -396,7 +408,13 @@ const MyListedDataLowerCard: FC<MyListedDataLowerCardProps> = ({ offer, nftMetad
                   </Flex>
                 </Box>
                 <Box flex="1">
-                  <NftMediaComponent nftMedia={nftMetadata.media} imageHeight={"120px"} imageWidth="120px" borderRadius="md" />
+                  <NftMediaComponent
+                    nftMedia={nftMetadata.media}
+                    imageUrls={nftMetadata?.nftImgUrl ? [nftMetadata.nftImgUrl] : []}
+                    imageHeight={"120px"}
+                    imageWidth="120px"
+                    borderRadius="md"
+                  />
                 </Box>
               </HStack>
               <Box mt="8">

diff --git a/src/components/NftMediaComponent.tsx b/src/components/NftMediaComponent.tsx
@@ -42,12 +42,26 @@ const NftMediaComponent: React.FC<NftMediaComponentProps> = (props) => {
     openNftDetailsDrawer,
   } = props;
 
-  const media = imageUrls || nftMedia?.map((mediaObj) => mediaObj.url) || [DEFAULT_NFT_IMAGE];
   const [imageIndex, setImageIndex] = useState(0);
   const [switchedImageManually, setSwitchedImageManually] = useState(false);
   const [nextImageIndex, setNextImageIndex] = useState(0);
   const makeFlip = nextImageIndex !== imageIndex;
   const isMobile = window.innerWidth <= 480;
+  let media: string[] = [];
+
+  // if they send both nftMedia and imageUrls, only use imageUrls first if nftMedia has a default issue (known issue in Private PRC)
+  if (nftMedia && imageUrls && nftMedia?.length > 0 && imageUrls?.length > 0) {
+    const nftMediaSentAndMainIsADefaultOne = Boolean(nftMedia?.find((mediaObj) => mediaObj.url.includes("default.png")));
+
+    if (nftMediaSentAndMainIsADefaultOne) {
+      media = imageUrls;
+    } else {
+      media = nftMedia?.map((mediaObj) => mediaObj.url);
+    }
+  } else {
+    // default to normal legacy logic
+    media = imageUrls || nftMedia?.map((mediaObj) => mediaObj.url) || [DEFAULT_NFT_IMAGE];
+  }
 
   useEffect(() => {
     if (autoSlide && media.length > 1 && !switchedImageManually) {

diff --git a/src/components/ProcureDataNFTModal.tsx b/src/components/ProcureDataNFTModal.tsx
@@ -170,7 +170,6 @@ export default function ProcureDataNFTModal({
         const isOnOfferPage = window.location.pathname.includes("/offer-");
         const shouldUseCallbackRoute = isWebWallet && amount == offer.quantity && isOnOfferPage;
         const callbackRoute = "/datanfts/wallet";
-
         const { sessionId } = await marketContract.sendAcceptOfferEsdtTransaction(
           offer.index,
           paymentAmount.toFixed(),
@@ -243,7 +242,13 @@ export default function ProcureDataNFTModal({
                 </Flex>
               </Box>
               <Box flex="1">
-                <NftMediaComponent nftMedia={nftData?.media} imageHeight={"120px"} imageWidth="120px" borderRadius="md" />
+                <NftMediaComponent
+                  nftMedia={nftData?.media}
+                  imageUrls={nftData?.nftImgUrl ? [nftData.nftImgUrl] : []}
+                  imageHeight={"120px"}
+                  imageWidth="120px"
+                  borderRadius="md"
+                />
               </Box>
             </HStack>
 

diff --git a/src/components/ProcureDataNFTSuccessCTAModel.tsx b/src/components/ProcureDataNFTSuccessCTAModel.tsx
@@ -38,7 +38,13 @@ export default function ProcureDataNFTSuccessCTAModel({ isOpen, onClose, nftData
                   {nftData.tokenName}
                 </Text>
                 <Box>
-                  <NftMediaComponent nftMedia={nftData?.media} imageHeight="140px" imageWidth="140px" borderRadius="md" />
+                  <NftMediaComponent
+                    nftMedia={nftData?.media}
+                    imageUrls={nftData?.nftImgUrl ? [nftData.nftImgUrl] : []}
+                    imageHeight="140px"
+                    imageWidth="140px"
+                    borderRadius="md"
+                  />
                 </Box>
               </Stack>
             )}

diff --git a/src/components/Sections/AppHeader.tsx b/src/components/Sections/AppHeader.tsx
@@ -290,7 +290,7 @@ const AppHeader = ({ onShowConnectWalletModal, setMenuItem, handleLogout }: { on
                 <Box display={{ base: "none", md: "block" }} zIndex="11">
                   {exploreRouterMenu.map((menu) => (
                     <Menu key={menu.sectionId} isLazy>
-                      <MenuButton as={Button} size={{ md: "md", "2xl": "lg" }} rightIcon={<TiArrowSortedDown size="18px" />}>
+                      <MenuButton as={Button} size="md" rightIcon={<TiArrowSortedDown size="18px" />}>
                         <ShortAddress address={mxAddress} fontSize="md" />
                       </MenuButton>
                       <MenuList maxW={"fit-content"} backgroundColor={colorMode === "dark" ? "#181818" : "bgWhite"}>

diff --git a/src/components/Sections/RecentDataNFTs.tsx b/src/components/Sections/RecentDataNFTs.tsx
@@ -149,6 +149,7 @@ const RecentDataNFTs = ({ headingText, headingSize }: { headingText: string; hea
                     as={ReactRouterLink}>
                     <NftMediaComponent
                       nftMedia={item?.media}
+                      imageUrls={item.nftImgUrl ? [item.nftImgUrl] : []}
                       imageHeight="210px"
                       imageWidth="210px"
                       borderRadius="md"

diff --git a/src/components/UtilComps/UpperCardComponent.tsx b/src/components/UtilComps/UpperCardComponent.tsx
@@ -1,5 +1,4 @@
 import React, { Dispatch, FC, SetStateAction } from "react";
-
 import { ExternalLinkIcon } from "@chakra-ui/icons";
 import {
   Box,
@@ -55,18 +54,15 @@ const UpperCardComponent: FC<UpperCardComponentProps> = ({
   openNftDetailsDrawer,
 }) => {
   const { colorMode } = useColorMode();
-  // Multiversx API
   const { address } = useGetAccountInfo();
   const {
     network: { chainId: chainID },
   } = useGetNetworkConfig();
   const { isLoggedIn: isMxLoggedIn } = useGetLoginInfo();
   const ChainExplorer = CHAIN_TX_VIEWER[chainID as keyof typeof CHAIN_TX_VIEWER];
   const navigate = useNavigate();
-
   const userData = useMintStore((state) => state.userData);
   const itheumPrice = useMarketStore((state) => state.itheumPrice);
-
   const feePrice = offer
     ? printPrice(
         convertWeiToEsdt(offer.wantedTokenAmount as BigNumber.Value, tokenDecimals(offer.wantedTokenIdentifier)).toNumber(),
@@ -75,6 +71,7 @@ const UpperCardComponent: FC<UpperCardComponentProps> = ({
     : "";
   const fee = offer ? convertWeiToEsdt(offer.wantedTokenAmount as BigNumber.Value, tokenDecimals(offer.wantedTokenIdentifier)).toNumber() : 0;
   const parsedCreationTime = moment(nftMetadata?.creationTime);
+
   return (
     <Skeleton fitContent={true} isLoaded={nftImageLoading} borderRadius="lg" display={"flex"} alignItems={"center"} justifyContent={"center"}>
       <Box
@@ -88,6 +85,7 @@ const UpperCardComponent: FC<UpperCardComponentProps> = ({
         mb="1.5rem">
         <NftMediaComponent
           nftMedia={nftMetadata?.media}
+          imageUrls={[nftMetadata?.nftImgUrl]}
           autoSlide
           imageHeight="236px"
           imageWidth="236px"

diff --git a/src/components/WalletDataNFTMX/BurnDataNFTModal.tsx b/src/components/WalletDataNFTMX/BurnDataNFTModal.tsx
@@ -105,6 +105,7 @@ export default function BurnDataNFTModal(props: BurnDataNFTModalPropType) {
                   <Stack>
                     <NftMediaComponent
                       nftMedia={selectedDataNft?.media}
+                      imageUrls={selectedDataNft?.nftImgUrl ? [selectedDataNft.nftImgUrl] : []}
                       shouldDisplayArrows={false}
                       imageHeight="100px"
                       imageWidth="100px"

diff --git a/src/components/WalletDataNFTMX/WalletDataNFTMX.tsx b/src/components/WalletDataNFTMX/WalletDataNFTMX.tsx
@@ -345,6 +345,7 @@ export default function WalletDataNFTMX(item: any) {
         position="relative">
         <NftMediaComponent
           nftMedia={item?.media}
+          imageUrls={[item?.nftImgUrl]}
           autoSlide
           imageHeight="236px"
           imageWidth="236px"

diff --git a/src/pages/DataNFT/DataNFTDetails.tsx b/src/pages/DataNFT/DataNFTDetails.tsx
@@ -143,8 +143,6 @@ export default function DataNFTDetails(props: DataNFTDetailsProps) {
     if (tokenId && offerId && location.pathname === "/datanfts/marketplace/market") {
       setSearchParams({ tokenId: tokenId, offerId: String(offerId) });
     }
-
-    window.scrollTo(0, 0);
   }, []);
 
   useEffect(() => {
@@ -432,7 +430,7 @@ export default function DataNFTDetails(props: DataNFTDetailsProps) {
                   alignItems={{ base: "initial", md: "initial" }}
                   justifyContent={{ xl: "space-between" }}>
                   <Box margin="auto" mb={{ base: "50px", md: "25px" }}>
-                    <NftMediaComponent nftMedia={nftData?.media} autoSlide marginTop="1rem" borderRadius="md" />
+                    <NftMediaComponent nftMedia={nftData?.media} autoSlide marginTop="1rem" borderRadius="md" imageUrls={[nftData?.nftImgUrl]} />
                   </Box>
 
                   <Flex mr={{ base: `${tokenIdParam ? "0" : "0"}`, md: `${tokenIdParam ? "75px" : "30px"}` }}>
@@ -890,7 +888,13 @@ export default function DataNFTDetails(props: DataNFTDetailsProps) {
                                           <Link
                                             as={ReactRouterLink}
                                             to={`/datanfts/marketplace/${nftData.tokenIdentifier}/offer-${to.index}`}
-                                            style={{ textDecoration: "none" }}>
+                                            style={{ textDecoration: "none" }}
+                                            onClick={() => {
+                                              window.scrollTo({
+                                                top: 0,
+                                                behavior: "smooth",
+                                              });
+                                            }}>
                                             <Button w="full" colorScheme="teal" variant="outline" size="sm">
                                               {window.innerWidth > 500 ? "View Offer" : "View"}
                                             </Button>
@@ -899,7 +903,13 @@ export default function DataNFTDetails(props: DataNFTDetailsProps) {
                                           <Link
                                             as={ReactRouterLink}
                                             to={`/datanfts/marketplace/${nftData.tokenIdentifier}/offer-${to.index}`}
-                                            style={{ textDecoration: "none" }}>
+                                            style={{ textDecoration: "none" }}
+                                            onClick={() => {
+                                              window.scrollTo({
+                                                top: 0,
+                                                behavior: "smooth",
+                                              });
+                                            }}>
                                             <Button w="full" colorScheme="teal" variant="outline" size="sm">
                                               {window.innerWidth > 500 ? "View Offer" : "View"}
                                             </Button>

diff --git a/src/pages/DataNFT/DataNFTMarketplaceMultiversX.tsx b/src/pages/DataNFT/DataNFTMarketplaceMultiversX.tsx
@@ -673,7 +673,14 @@ export const Marketplace: FC<PropsType> = ({ tabState }) => {
                           borderRadius="0.75rem">
                           <CardBody pb={4}>
                             <Box cursor={"pointer"} onClick={() => openNftDetailsModal(index)}>
-                              <NftMediaComponent nftMedia={dataNft?.media} autoSlide imageHeight="230px" imageWidth="225px" borderRadius="md" />
+                              <NftMediaComponent
+                                nftMedia={dataNft?.media}
+                                imageUrls={dataNft?.nftImgUrl ? [dataNft.nftImgUrl] : []}
+                                autoSlide
+                                imageHeight="230px"
+                                imageWidth="225px"
+                                borderRadius="md"
+                              />
 
                               <Stack mt={"4"}>
                                 <Heading size="md" noOfLines={1} fontFamily="Clash-Medium">

diff --git a/src/pages/DataNFT/DataNftCollection.tsx b/src/pages/DataNFT/DataNftCollection.tsx
@@ -115,7 +115,7 @@ export const DataNftCollectionCard: FC<DataNftCollectionCardComponentProps> = ({
             borderRadius="8px"
             width="70%"
             height="12%">
-            <Text fontFamily="Clash-Light" lineHeight="1.6" fontWeight="medium" fontSize="14px" color="#0F0F0F">
+            <Text fontFamily="Clash-Medium" lineHeight="1.6" fontWeight="medium" fontSize="14px" color="#0F0F0F">
               View Data NFT Collection
             </Text>
           </Button>
@@ -136,7 +136,7 @@ export const DataNftCollectionCard: FC<DataNftCollectionCardComponentProps> = ({
                 onClick={() => {
                   window.open(dataPreview);
                 }}>
-                <Text fontFamily="Clash-Light" lineHeight="1.6" fontWeight="medium" fontSize="14px" textAlign="center">
+                <Text fontFamily="Clash-Medium" lineHeight="1.6" fontWeight="medium" fontSize="14px" textAlign="center">
                   Preview Data
                 </Text>
               </Button>

diff --git a/src/pages/DataNFT/components/BondingCards.tsx b/src/pages/DataNFT/components/BondingCards.tsx
@@ -242,7 +242,13 @@ export const BondingCards: React.FC = () => {
                     <Flex flexDirection={{ base: "column", md: "row" }}>
                       <Box minW="250px" textAlign="center">
                         <Box minH="263px">
-                          <NftMediaComponent nftMedia={dataNft?.media} imageHeight="220px" imageWidth="220px" borderRadius="10px" />
+                          <NftMediaComponent
+                            nftMedia={dataNft?.media}
+                            imageUrls={dataNft?.nftImgUrl ? [dataNft.nftImgUrl] : []}
+                            imageHeight="220px"
+                            imageWidth="220px"
+                            borderRadius="10px"
+                          />
                         </Box>
                         <Box>
                           {nfmeIdNonce !== dataNft.nonce ? (
@@ -406,7 +412,13 @@ export const BondingCards: React.FC = () => {
                             <Text fontFamily="Clash-Medium" pb={3}>
                               {dataNft.tokenName}
                             </Text>
-                            <NftMediaComponent nftMedia={dataNft?.media} imageHeight="180px" imageWidth="180px" borderRadius="5px" />
+                            <NftMediaComponent
+                              nftMedia={dataNft?.media}
+                              imageUrls={dataNft?.nftImgUrl ? [dataNft.nftImgUrl] : []}
+                              imageHeight="180px"
+                              imageWidth="180px"
+                              borderRadius="5px"
+                            />
 
                             <Box>
                               {nfmeIdNonce === dataNft.nonce && (

diff --git a/src/pages/Home/components/TrendingData.tsx b/src/pages/Home/components/TrendingData.tsx
@@ -108,7 +108,14 @@ export const TrendingData: React.FC = () => {
               <CardBody>
                 <Skeleton height={skeletonHeight} isLoaded={loadedOffers} fadeDuration={1} display="flex" justifyContent={"center"}>
                   <Link to={`/datanfts/marketplace/${trendingDataNft.tokenIdentifier}`} as={ReactRouterLink}>
-                    <NftMediaComponent nftMedia={trendingDataNft?.media} imageHeight="210px" imageWidth="210px" borderRadius="md" shouldDisplayArrows={false} />
+                    <NftMediaComponent
+                      nftMedia={trendingDataNft?.media}
+                      imageUrls={[trendingDataNft?.nftImgUrl]}
+                      imageHeight="210px"
+                      imageWidth="210px"
+                      borderRadius="md"
+                      shouldDisplayArrows={false}
+                    />
                   </Link>
                 </Skeleton>
                 <Skeleton height="76px" isLoaded={loadedOffers} fadeDuration={2}>

diff --git a/src/pages/Home/components/VolumesDataNfts.tsx b/src/pages/Home/components/VolumesDataNfts.tsx
@@ -100,7 +100,14 @@ const VolumesDataNfts: React.FC<VolumesDataNftsProps> = () => {
               <CardBody>
                 <Skeleton height={skeletonHeight} isLoaded={!loadingOffers} fadeDuration={1} display="flex" justifyContent={"center"}>
                   <Link to={`/datanfts/marketplace/${volumeDataNft.tokenIdentifier}`}>
-                    <NftMediaComponent nftMedia={volumeDataNft?.media} imageHeight="210px" imageWidth="210px" borderRadius="md" shouldDisplayArrows={false} />
+                    <NftMediaComponent
+                      nftMedia={volumeDataNft?.media}
+                      imageUrls={[volumeDataNft?.nftImgUrl]}
+                      imageHeight="210px"
+                      imageWidth="210px"
+                      borderRadius="md"
+                      shouldDisplayArrows={false}
+                    />
                   </Link>
                 </Skeleton>
                 <Skeleton height="56px" isLoaded={!loadingOffers} fadeDuration={2}>