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,6 +63,7 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({ data, isLoading }) => {
       ))}
     </GridContainer>
   ) : (
+    <>
       <GridContainer>
         {data.slice(0, itemsCount).map((operator, index) => {
           if (index === itemsCount - 1) {
@@ -82,6 +89,7 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({ data, isLoading }) => {
               <Link
                 href={`/operators/${operator?.id}`}
                 key={'explore-operator-' + index}
+                prefetch={false}
               >
                 <GridItem>
                   <img
@@ -98,6 +106,10 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({ data, isLoading }) => {
           }
         })}
       </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>
   ) : (
+    <CustomLink
+      href="https://gamma.io/ordinals/collections/logos-operators"
+      target="_blank"
+    >
       <ToastContainer showTopToast={showTopToast}>
-      <span>
-        Logos Ordinals Mint Begins 16th December, 2024 at 1PM UTC
-        <TimeRemaining>Time remaining : {time}</TimeRemaining>
-      </span>
+        <span>Logos Operators mint is LIVE</span>
         <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>
+    </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`
-  margin-left: 20px;
+const CustomLink = styled(Link)`
+  text-decoration: none;
+  color: inherit;
 `
 
 export default Toast