feat: grid limit to 200 and adjust toast

src/components/Explore/OperatorGrid/OperatorGrid.tsx

@@ -13,6 +13,7 @@ interface OperatorGridProps {
 }
 
 const OFFSET = 18
+const LIMIT = 200
 
 const OperatorGrid: React.FC<OperatorGridProps> = ({ data, isLoading }) => {
   const [itemsCount, setItemsCount] = useState(18)
@@ -24,7 +25,12 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({ data, isLoading }) => {
   const handleObserver = useCallback(
     (entries: IntersectionObserverEntry[]) => {
       const target = entries[0]
-      if (target.isIntersecting && itemsCount < data.length) {
+      // Less than 200 operators
+      if (
+        target.isIntersecting &&
+        itemsCount < data.length &&
+        itemsCount < LIMIT
+      ) {
         setItemsCount((prevCount) => prevCount + OFFSET)
       }
     },
@@ -37,7 +43,7 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({ data, isLoading }) => {
     observerRef.current = new IntersectionObserver(handleObserver, {
       root: null,
       rootMargin: '20px',
-      threshold: 1.0,
+      threshold: 0.8,
     })
 
     if (lastElementRef.current)
@@ -57,47 +63,53 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({ data, isLoading }) => {
       ))}
     </GridContainer>
   ) : (
-    <GridContainer>
+    <>
-      {data.slice(0, itemsCount).map((operator, index) => {
+      <GridContainer>
-        if (index === itemsCount - 1) {
+        {data.slice(0, itemsCount).map((operator, index) => {
-          return (
+          if (index === itemsCount - 1) {
-            <Link
+            return (
-              href={`/operators/${operator.id}`}
+              <Link
-              key={'explore-operator-' + index}
+                href={`/operators/${operator.id}`}
-            >
+                key={'explore-operator-' + index}
-              <GridItem ref={lastElementRef}>
+              >
-                <img
+                <GridItem ref={lastElementRef}>
-                  key={index}
+                  <img
-                  src={isDegenMode ? operator?.pixelated : operator.image}
+                    key={index}
-                  data-src={isDegenMode ? operator?.pixelated : operator?.gif}
+                    src={isDegenMode ? operator?.pixelated : operator.image}
-                  alt={`Operator ${index + 1}`}
+                    data-src={isDegenMode ? operator?.pixelated : operator?.gif}
-                  loading="lazy"
+                    alt={`Operator ${index + 1}`}
-                  className="lazyload"
+                    loading="lazy"
-                />
+                    className="lazyload"
-              </GridItem>
+                  />
-            </Link>
+                </GridItem>
-          )
+              </Link>
-        } else {
+            )
-          return (
+          } else {
-            <Link
+            return (
-              href={`/operators/${operator?.id}`}
+              <Link
-              key={'explore-operator-' + index}
+                href={`/operators/${operator?.id}`}
-            >
+                key={'explore-operator-' + index}
-              <GridItem>
+                prefetch={false}
-                <img
+              >
-                  key={index}
+                <GridItem>
-                  src={isDegenMode ? operator?.pixelated : operator?.image}
+                  <img
-                  data-src={isDegenMode ? operator?.pixelated : operator?.gif}
+                    key={index}
-                  alt={`Operator ${index + 1}`}
+                    src={isDegenMode ? operator?.pixelated : operator?.image}
-                  loading="lazy"
+                    data-src={isDegenMode ? operator?.pixelated : operator?.gif}
-                  className="lazyload"
+                    alt={`Operator ${index + 1}`}
-                />
+                    loading="lazy"
-              </GridItem>
+                    className="lazyload"
-            </Link>
+                  />
-          )
+                </GridItem>
-        }
+              </Link>
-      })}
+            )
-    </GridContainer>
+          }
+        })}
+      </GridContainer>
+      {itemsCount >= LIMIT && (
+        <GridLimit>Please refresh the page to see other Operators.</GridLimit>
+      )}
+    </>
   )
 }
 
@@ -138,4 +150,15 @@ const Placeholder = styled.div`
   opacity: 0.5;
 `
 
+const GridLimit = styled.p`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+  color: white;
+  padding-top: 32px;
+  padding-bottom: 64px;
+`
+
 export default OperatorGrid

src/components/Toast/Toast.tsx

@@ -1,6 +1,7 @@
 import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import { useAtomValue } from 'jotai'
+import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { userInfoAtom } from '../../../atoms/userInfo'
 
@@ -45,6 +46,12 @@ const Toast: React.FC = () => {
     return () => clearInterval(interval)
   }, [])
 
+  const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setShowTopToast(false)
+  }
+
   return userInfo?.alert_message?.length > 0 ? (
     <ToastContainer showTopToast={showTopToast}>
       {/* <div>Logos Operators Ordinals Mint Is Live</div>
@@ -53,23 +60,25 @@ const Toast: React.FC = () => {
       </a> */}
       {userInfo.alert_message}
       <div>
-        <button className="close-button" onClick={() => setShowTopToast(false)}>
+        <button className="close-button" onClick={handleClose}>
           <img src="/assets/close-orange.svg" alt="close" />
         </button>
       </div>
     </ToastContainer>
   ) : (
-    <ToastContainer showTopToast={showTopToast}>
+    <CustomLink
-      <span>
+      href="https://gamma.io/ordinals/collections/logos-operators"
-        Logos Ordinals Mint Begins 16th December, 2024 at 1PM UTC
+      target="_blank"
-        <TimeRemaining>Time remaining : {time}</TimeRemaining>
+    >
-      </span>
+      <ToastContainer showTopToast={showTopToast}>
-      <div>
+        <span>Logos Operators mint is LIVE</span>
-        <button className="close-button" onClick={() => setShowTopToast(false)}>
+        <div>
-          <img src="/assets/close-orange.svg" alt="close" />
+          <button className="close-button" onClick={handleClose}>
-        </button>
+            <img src="/assets/close-orange.svg" alt="close" />
-      </div>
+          </button>
-    </ToastContainer>
+        </div>
+      </ToastContainer>
+    </CustomLink>
   )
 }
 
@@ -93,7 +102,7 @@ const ToastContainer = styled.div<{ showTopToast: boolean }>`
 
   a {
     color: #fe740c;
-    margin-left: 20px;
+    margin-left: 8px;
   }
 
   .close-button {
@@ -129,8 +138,9 @@ const ToastContainer = styled.div<{ showTopToast: boolean }>`
   }
 `
 
-const TimeRemaining = styled.div`
+const CustomLink = styled(Link)`
-  margin-left: 20px;
+  text-decoration: none;
+  color: inherit;
 `
 
 export default Toast