Merge pull request #235 from Propy/dev

dev -> main
Propy · Jul 31, 2024 · d30404a · d30404a
2 parents d7559df + d7116de
commit d30404a
Show file tree

Hide file tree

Showing 25 changed files with 548 additions and 319 deletions.
diff --git a/src/components/BasicAreaChart/BasicAreaChartInner.tsx b/src/components/BasicAreaChart/BasicAreaChartInner.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useCallback } from 'react';
+import React, { useMemo, useState, useCallback, useId } from 'react';
 import { AreaClosed, Line, Bar, LinePath } from '@visx/shape';
 import { curveStep } from '@visx/curve';
 import { scaleLinear, scaleTime, scaleSymlog } from "d3-scale";
@@ -81,6 +81,8 @@ export default withTooltip<AreaProps, ITimeseries>(
   }: AreaProps & WithTooltipProvidedProps<ITimeseries>) => {
     if (width < 10) return null;
 
+    const uniqueId = useId();
+
     const [tooltipDateTranslateLeft, setTooltipDateTranslateLeft] = useState(false);
     const [tooltipDateTranslateRight, setTooltipDateTranslateRight] = useState(false);
 
@@ -340,7 +342,7 @@ export default withTooltip<AreaProps, ITimeseries>(
         {tooltipData && (
           <div>
             <TooltipWithBounds
-              key={Math.random()}
+              key={`${uniqueId}-tooltip`}
               top={((innerHeight - tooltipTop) < 30) ? (innerHeight - 40) : tooltipTop - 12}
               left={tooltipLeft + 12}
               style={{

diff --git a/src/components/CollectionBanner.tsx b/src/components/CollectionBanner.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from 'react'
+import React, { useEffect, useState, useMemo, useId } from 'react'
 
 import { useLocation, useSearchParams } from 'react-router-dom';
 
@@ -110,6 +110,8 @@ interface INftAssets {
 
 const CollectionBanner = (props: ICollectionBanner & PropsFromRedux) => {
 
+  const uniqueId = useId();
+
   const location = useLocation();
   let [searchParams, setSearchParams] = useSearchParams();
 
@@ -131,7 +133,6 @@ const CollectionBanner = (props: ICollectionBanner & PropsFromRedux) => {
     collectionSlug,
     showPagination = false,
     isConsideredMobile,
-    isConsideredMedium,
     firstElementShim,
     showFilters = false,
     overrideTitle,
@@ -150,7 +151,7 @@ const CollectionBanner = (props: ICollectionBanner & PropsFromRedux) => {
     data: collectionDataTanstack,
     isLoading: isLoadingCollectionDataTanstack,
   } = useQuery({
-    queryKey: [contractNameOrCollectionNameOrAddress, network, perPage, page, searchParamsMemo, filterShims, overrideTitle, sortBy],
+    queryKey: ['collection-banner', contractNameOrCollectionNameOrAddress, network, perPage, page, searchParamsMemo, filterShims, overrideTitle, sortBy],
     queryFn: async () => {
       let additionalFilters : ICollectionQueryFilter[] = [];
       if(searchParams.get("city")) {
@@ -173,6 +174,8 @@ const CollectionBanner = (props: ICollectionBanner & PropsFromRedux) => {
       }
       if(sortBy) {
         additionalFilters.push({filter_type: "sort_by", value: sortBy});
+      } else if(searchParams.get("sort_by")) {
+        additionalFilters.push({filter_type: "sort_by", value: `${searchParams.get("sort_by")}`});
       }
       let collectionResponse = await NFTService.getCollectionPaginated(
         network,
@@ -284,7 +287,7 @@ const CollectionBanner = (props: ICollectionBanner & PropsFromRedux) => {
           }
         </>
       }
-      {!isLoadingCollectionDataTanstack && collectionDataTanstack?.nftRecords && !isConsideredMobile && !isConsideredMedium && showHeroGallery && 
+      {!isLoadingCollectionDataTanstack && collectionDataTanstack?.nftRecords && showHeroGallery && 
         <div className={classes.collectionExplorerGalleryContainer}>
           <CollectionExplorerGalleryContainer 
             explorerEntries={
@@ -301,7 +304,7 @@ const CollectionBanner = (props: ICollectionBanner & PropsFromRedux) => {
       }
       <Grid className={[classes.sectionSpacer, isLoadingCollectionDataTanstack ? classes.loadingZone : ''].join(" ")} container spacing={2} columns={{ xs: 4, sm: 8, md: 12, lg: 20, xl: 30 }}>
         {!isLoadingCollectionDataTanstack && collectionDataTanstack?.nftRecords && firstElementShim && 
-          <Grid key={`single-token-card-first-element-shim-${new Date().getTime()}`} item xs={4} sm={4} md={6} lg={5} xl={6}>
+          <Grid key={`${uniqueId}-single-token-card-first-element-shim-${new Date().getTime()}`} item xs={4} sm={4} md={6} lg={5} xl={6}>
             {firstElementShim}
           </Grid>
         }
@@ -311,13 +314,13 @@ const CollectionBanner = (props: ICollectionBanner & PropsFromRedux) => {
           }
           return 0;
         }).slice(0,(maxRecords && (collectionDataTanstack?.nftRecords.length > maxRecords)) ? maxRecords : collectionDataTanstack?.nftRecords.length).map((item, index) => 
-          <Grid key={`single-token-card-${index}-${item.token_id}`} item xs={4} sm={4} md={6} lg={5} xl={6}>
+          <Grid key={`${uniqueId}-single-token-card-${index}-${item.token_id}`} item xs={4} sm={4} md={6} lg={5} xl={6}>
             <SingleTokenCard nftRecord={item} assetRecord={collectionDataTanstack?.nftAssets[item?.asset_address]} />
           </Grid>
         )}
         {isLoadingCollectionDataTanstack && maxRecords &&
           Array.from({length: maxRecords}).map((entry, index) => 
-            <Grid key={`single-token-card-loading-${index}`} item xs={4} sm={4} md={6} lg={5} xl={6}>
+            <Grid key={`${uniqueId}-single-token-card-loading-${index}`} item xs={4} sm={4} md={6} lg={5} xl={6}>
               <SingleTokenCardLoading />
             </Grid>
           )

diff --git a/src/components/CollectionExplorerGallery.tsx b/src/components/CollectionExplorerGallery.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useId } from 'react';
 
 import { animated, useTransition } from '@react-spring/web';
 
@@ -32,33 +32,52 @@ import {
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    root: {
+    rootDesktop: {
       width: '100%',
       height: '512px',  // Adjust as needed
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
       position: 'relative',
     },
+    rootMobile: {
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+    },
     rootChild: {
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       width: '100%',
     },
+    rootChildDesktop: {
+      flexDirection: "row",
+    },
+    rootChildMobile: {
+      flexDirection: "column",
+    },
     carouselContainer: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      width: '512px',
-      height: '512px',
       overflow: 'hidden',
       boxShadow: '0px 0px 5px -1px rgba(0, 0, 0, 0.5)',
       borderRadius: 15,
       position: 'relative',
       border: '4px solid white',
     },
+    carouselContainerDesktop: {
+      width: '512px',
+      height: '512px',
+    },
+    carouselContainerMobile: {
+      width: '100%',
+      aspectRatio: '1 / 1',
+    },
     image: {
       position: 'absolute',
       height: '100%',  // Adjust as needed
@@ -88,11 +107,16 @@ const useStyles = makeStyles((theme: Theme) =>
       alignItems: 'center',
       padding: theme.spacing(2),
     },
-    infoZone: {
+    infoZoneDesktop: {
       paddingLeft: theme.spacing(4),
       width: 'calc(100% - 512px)',
       alignSelf: 'flex-start',
     },
+    infoZoneMobile: {
+      marginTop: theme.spacing(2),
+      width: 'calc(100%)',
+      alignSelf: 'flex-start',
+    },
     animatedTitle: {
       position: 'absolute',
     },
@@ -115,11 +139,14 @@ interface ICollectionExplorerGallery {
 const CollectionExplorerGallery = ({ 
   explorerEntries,
   isConsideredMobile,
+  isConsideredMedium,
   fullWidth,
   overrideTitle,
   overrideSlug,
 }: ICollectionExplorerGallery & PropsFromRedux) => {
 
+  const uniqueId = useId();
+
   const classes = useStyles()
   const [selectedEntryIndex, setSelectedEntryIndex] = useState(0)
 
@@ -193,12 +220,12 @@ const CollectionExplorerGallery = ({
   } = explorerEntries[selectedEntryIndex]?.assetRecord ? explorerEntries[selectedEntryIndex]?.assetRecord : {};
 
   return (
-    <div className={classes.root}>
-      <div className={classes.rootChild}>
-        <div className={classes.carouselContainer}>
+    <div className={isConsideredMobile ? classes.rootMobile : classes.rootDesktop}>
+      <div className={[classes.rootChild, isConsideredMobile ? classes.rootChildMobile : classes.rootChildDesktop].join(" ")}>
+        <div className={[classes.carouselContainer, isConsideredMobile ? classes.carouselContainerMobile : classes.carouselContainerDesktop].join(" ")}>
           {transitions((style, index) => (
             <animated.img
-              key={index}
+              key={`${uniqueId}-index`}
               style={style}
               className={classes.image}
               src={getResolvableIpfsLink(explorerEntries[index]?.nftRecord?.metadata?.image ? explorerEntries[index]?.nftRecord?.metadata?.image : "")}
@@ -214,7 +241,7 @@ const CollectionExplorerGallery = ({
             </Fab>
           </div>
         </div>
-        <div className={classes.infoZone}>
+        <div className={isConsideredMobile ? classes.infoZoneMobile : classes.infoZoneDesktop}>
             <LinkWrapper link={`collection/${network_name}/${overrideSlug ? overrideSlug : slug}`}>
               <Typography variant="h6" style={{color: PROPY_LIGHT_BLUE}}>
                 {!overrideTitle &&

diff --git a/src/components/EventHistory.tsx b/src/components/EventHistory.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useId } from 'react';
 
 import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
@@ -189,14 +189,16 @@ const EventHistory = (props: PropsFromRedux & ITokenEventHistory) => {
       assetRecord,
     } = props;
 
+    const uniqueId = useId();
+
     return (
         <>
           <div className={classes.root}>
               <div className={classes.content}>
                 {eventRecords && eventRecords.sort((a, b) => {
                   return Number(b.evm_transaction?.block_timestamp) - Number(a.evm_transaction?.block_timestamp)
                 }).map((eventRecord, index) => 
-                  <div className={classes.eventRecord} key={`event-history-${eventRecord.transaction_hash}-${index}`}>
+                  <div className={classes.eventRecord} key={`${uniqueId}-event-history-${eventRecord.transaction_hash}-${index}`}>
                     <div className={classes.eventIconOuterContainer}>
                       <div className={classes.eventIconInnerContainer}>
                         {getEventIcon(eventRecord)}

diff --git a/src/components/FullScreenGallery.tsx b/src/components/FullScreenGallery.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useId } from 'react';
 import { createPortal } from 'react-dom';
 
 import Typography from '@mui/material/Typography';
@@ -135,6 +135,8 @@ const FullScreenGallery = (props: PropsFromRedux & IFullScreenGallery) => {
 
   const classes = useStyles();
 
+  const uniqueId = useId();
+
   const {
     fullScreenGalleryConfig,
     setFullScreenGalleryConfig,
@@ -207,7 +209,7 @@ const FullScreenGallery = (props: PropsFromRedux & IFullScreenGallery) => {
           >
             <div className={[classes.primaryImageBackgroundContainer, 'image-filter-blur-heavy'].join(' ')} style={fullScreenGalleryConfig?.images?.length > 0 ? { backgroundImage: `url(${fullScreenGalleryConfig?.images[fullScreenGalleryConfig?.selectedImageIndex]})` } : {}} />
             <div className={classes.primaryImageForegroundContainer}>
-              <img alt={`fullscreen listing ${fullScreenGalleryConfig?.selectedImageIndex}`} key={`listing-image-${fullScreenGalleryConfig?.selectedImageIndex}`} className={classes.primaryImage} src={fullScreenGalleryConfig?.images?.length > 0 ? fullScreenGalleryConfig?.images[fullScreenGalleryConfig?.selectedImageIndex] : ""}/>
+              <img alt={`fullscreen listing ${fullScreenGalleryConfig?.selectedImageIndex}`} key={`${uniqueId}-listing-image-${fullScreenGalleryConfig?.selectedImageIndex}`} className={classes.primaryImage} src={fullScreenGalleryConfig?.images?.length > 0 ? fullScreenGalleryConfig?.images[fullScreenGalleryConfig?.selectedImageIndex] : ""}/>
             </div>
             <div className={classes.controlsOverlayContainer}>
               <div className={classes.primaryImageControlsTopRow}>