Gallery improvements + Fixes

packages/dapp/components/Gallery/Cell/Cell.js

@@ -13,7 +13,7 @@ import styles from './Cell.module.scss';
 
 const MAX_PRIORITY_ITEMS = 24;
 
-const Cell = ({ assetId, isRevealed, kind, isMiddleCell }) => {
+const Cell = ({ assetId, tokenId, isRevealed, kind, isMiddleCell }) => {
   const { breakpoint } = useBreakpoint(BREAKPOINTS, 'desktop');
 
   const isMobile = breakpoint === 'mobile';
@@ -22,7 +22,7 @@ const Cell = ({ assetId, isRevealed, kind, isMiddleCell }) => {
 
   const imageSrc = useMemo(() => {
     if (isRevealed && !isDev)
-      return `https://storageapi.fleek.co/${FLEEK_BUCKET_ID}/assets/${assetId}.png`;
+      return `https://storageapi2.fleek.co/${FLEEK_BUCKET_ID}/assets/${assetId}.png`;
 
     if (isRevealed && isDev) return '/assets/revealed-token.png';
 
@@ -37,7 +37,7 @@ const Cell = ({ assetId, isRevealed, kind, isMiddleCell }) => {
 
   return (
     <div
-      key={`cell-${assetId}`}
+      key={`cell-${tokenId}`}
       className={cn(styles.cellContainer, {
         [styles.middle]: isMiddleCell,
         [styles.all]: kind === ALL,
@@ -51,10 +51,10 @@ const Cell = ({ assetId, isRevealed, kind, isMiddleCell }) => {
           {...imageSize}
           {...imageSize}
           className={styles.image}
-          priority={hasPriority}
+          priority={hasPriority.toString()}
         />
       </Zoom>
-      <span className={styles.assetId}>#{assetId}</span>
+      <span className={styles.tokenId}>#{tokenId}</span>
     </div>
   );
 };

packages/dapp/components/Gallery/Cell/Cell.module.scss

@@ -12,7 +12,7 @@
     width: 360px;
   }
 
-  .assetId {
+  .tokenId {
     top: -22px;
     position: relative;
     left: 6px;

packages/dapp/components/Gallery/Grid/Grid.js

@@ -22,11 +22,11 @@ const Grid = ({ items, kind }) => {
 
   const chunks = useMemo(() => chunk(items, columns), [items, columns]);
 
-  const isMiddleCell = (assetId) => {
+  const isMiddleCell = (tokenId) => {
     if (kind === ME) return false;
 
     return chunks.some((item) => {
-      return item[1]?.assetId === assetId;
+      return item[1]?.tokenId === tokenId;
     });
   };
 
@@ -39,11 +39,12 @@ const Grid = ({ items, kind }) => {
           [styles.mobileGrid]: isMobile,
         })}
       >
-        {items?.map(({ assetId, isRevealed }) => {
-          const isMiddle = isMiddleCell(assetId);
+        {items?.map(({ assetId, tokenId, isRevealed }) => {
+          const isMiddle = isMiddleCell(tokenId);
           return (
             <Cell
-              key={assetId}
+              key={tokenId}
+              tokenId={tokenId}
               assetId={assetId}
               isRevealed={isRevealed}
               kind={kind}

packages/dapp/hooks/useGallery.js

@@ -43,8 +43,17 @@ const useGallery = () => {
         Ethernauts.totalSupply().then(Number),
       ]);
 
+      const maxBatchRevealed = Math.floor(totalSupply / batchSize - 1);
       const maxTokenIdRevealed = totalSupply - (totalSupply % batchSize) - 1;
 
+      const offsets = [];
+
+      for (let batchId = 0; batchId <= maxBatchRevealed; batchId++) {
+        const randomNumber = await Ethernauts.getRandomNumberForBatch(batchId);
+        const offset = Number(randomNumber.mod(batchSize));
+        offsets.push(offset);
+      }
+
       const logs = await provider.getLogs(filter);
 
       const galleryItems = await logs.reduce(async (pGalleryItems, curr) => {
@@ -58,16 +67,19 @@ const useGallery = () => {
 
         const to = parsedLog.args.to.toLowerCase();
         const tokenId = parsedLog.args.tokenId.toNumber();
+        const isRevealed = tokenId <= maxTokenIdRevealed;
+        const batchNumber = Math.floor(tokenId / batchSize);
+        const maxTokenIdInBatch = batchSize * (batchNumber + 1) - 1;
+        const offset = offsets[batchNumber];
 
-        const assetId = await Ethernauts.getAssetIdForTokenId(tokenId);
-
-        // getAssetIdForTokenId returns "assetId,boolean" so it takes the first position;
-        const [formattedAssetId] = assetId.toString().split(',');
+        let assetId = tokenId + offset;
+        if (assetId > maxTokenIdInBatch) assetId -= batchSize;
 
         const item = {
-          assetId: formattedAssetId,
+          tokenId,
+          assetId,
           owner: to,
-          isRevealed: tokenId <= maxTokenIdRevealed,
+          isRevealed,
         };
 
         // Push all nfts

packages/dapp/next.config.js

@@ -9,7 +9,7 @@ module.exports = {
     };
   },
   images: {
-    domains: ['https://storageapi.fleek.co/'],
+    domains: ['https://storageapi.fleek.co/', 'https://storageapi2.fleek.co/'],
   },
   // Fix fast refresh for Windows users
   webpackDevMiddleware: (config) => {