fix: give a bunch of list renders keys (#5158)

* fix: give a bunch of list renders keys

* pr feedback

* pr feedback

src/nft/components/collection/ActivitySwitcher.tsx

@@ -6,7 +6,9 @@ import { useIsCollectionLoading } from 'nft/hooks'
 
 import * as styles from './ActivitySwitcher.css'
 
-export const ActivitySwitcherLoading = new Array(2).fill(<div className={styles.styledLoading} />)
+export const ActivitySwitcherLoading = new Array(2)
+  .fill(null)
+  .map((_, index) => <div className={styles.styledLoading} key={`ActivitySwitcherLoading-key-${index}`} />)
 
 export const ActivitySwitcher = ({
   showActivity,

src/nft/components/collection/CollectionStats.tsx

@@ -255,14 +255,19 @@ const StatsItem = ({ children, label, shouldHide }: { children: ReactNode; label
 }
 
 const statsLoadingSkeleton = (isMobile: boolean) =>
-  new Array(5).fill(
-    <>
-      <Box display="flex" flexDirection={isMobile ? 'row' : 'column'} alignItems="baseline" gap="2" height="min">
-        <div className={styles.statsLabelLoading} />
-        <span className={styles.statsValueLoading} />
-      </Box>
-    </>
-  )
+  new Array(5).fill(null).map((_, index) => (
+    <Box
+      display="flex"
+      flexDirection={isMobile ? 'row' : 'column'}
+      alignItems="baseline"
+      gap="2"
+      height="min"
+      key={`statsLoadingSkeleton-key-${index}`}
+    >
+      <div className={styles.statsLabelLoading} />
+      <span className={styles.statsValueLoading} />
+    </Box>
+  ))
 
 const StatsRow = ({ stats, isMobile, ...props }: { stats: GenieCollection; isMobile?: boolean } & BoxProps) => {
   const uniqueOwnersPercentage = stats?.stats?.total_supply

src/nft/components/explore/CarouselCard.tsx

@@ -227,12 +227,15 @@ export const CarouselCard = ({ collection, onClick }: CarouselCardProps) => {
               const marketplace = gqlCollection.marketplaceCount?.find(
                 (marketplace) => marketplace.marketplace === market
               )
+              if (!marketplace) {
+                return null
+              }
               return (
                 <MarketplaceRow
-                  key={'trendingCollection' + collection.address}
+                  key={`CarouselCard-key-${collection.address}-${marketplace.marketplace}`}
                   marketplace={MARKETS_ENUM_TO_NAME[market]}
-                  listings={marketplace?.count?.toString()}
-                  floor={marketplace?.floorPrice?.toString()}
+                  listings={marketplace.count.toString()}
+                  floor={marketplace.floorPrice.toString()}
                 />
               )
             })}