add pagination to collection grid

frontend/src/components/NFTGrid/NFTGrid.module.css

@@ -38,3 +38,11 @@
   padding: 20px;
   font-size: 12px;
 }
+
+.pageButtons {
+  display: flex;
+  gap: 20px;
+  margin-top: 20px;
+  justify-content: center;
+  align-items: center;
+}

frontend/src/components/NFTGrid/index.tsx

@@ -9,6 +9,7 @@ import useTokenBalances from "../../hooks/useTokenBalances"
 import { getNFTContext, getNFTContexts } from "../../utils/getNFTContext"
 import { MoralisNFT } from "../../types/Token"
 import useCollection from "../../hooks/useCollection"
+import Button from "../Button"
 
 interface Props {
   address: string
@@ -57,11 +58,16 @@ export const AccountNftGrid: React.FC<Props> = ({ address }) => {
 
 export const CollectionNftGrid: React.FC<Props> = ({ address }) => {
   const chainId = useChainId()
-  const { data, isLoading, error } = useCollection({
+  const { data, isLoading, fetchNextPage, fetchPreviousPage } = useCollection({
     tokenAddress: address,
     chainId,
   })
-  const nftBalances = data || []
+  const currentPage = data?.pages[0]
+  const nftBalances =
+    (currentPage?.result as MoralisNFT[]) || ([] as MoralisNFT[])
+
+  const previousPageAvailable = (data?.pageParams[0] as string[]).length > 0
+  const nextPageAvailable = currentPage?.cursor && currentPage.cursor.length > 0
 
   const deployedMechs = useDeployedMechs(getNFTContexts(nftBalances), chainId)
 
@@ -78,12 +84,31 @@ export const CollectionNftGrid: React.FC<Props> = ({ address }) => {
   if (isLoading) return <Spinner />
 
   return (
-    <ul className={classes.grid}>
-      {nfts.map((nft, index) => (
-        <li key={`${index}-${nft.token_address}`}>
-          <NFTGridItem chainId={chainId} nft={nft} />
-        </li>
-      ))}
-    </ul>
+    <>
+      <ul className={classes.grid}>
+        {nfts.map((nft, index) => (
+          <li key={`${index}-${nft.token_address}`}>
+            <NFTGridItem chainId={chainId} nft={nft} />
+          </li>
+        ))}
+      </ul>
+      <div className={classes.pageButtons}>
+        <Button
+          secondary
+          onClick={() => fetchPreviousPage()}
+          disabled={!previousPageAvailable}
+        >
+          Previous
+        </Button>
+
+        <Button
+          secondary
+          onClick={() => fetchNextPage()}
+          disabled={!nextPageAvailable}
+        >
+          Next
+        </Button>
+      </div>
+    </>
   )
 }

frontend/src/components/NFTItem/NFTItem.module.css

@@ -32,6 +32,10 @@
 
 .tokenName {
   max-width: 68%;
+  color: var(--text-color);
+}
+.tokenName:hover {
+  filter: brightness(1.2);
 }
 
 .main {

frontend/src/components/NFTItem/index.tsx

@@ -13,6 +13,8 @@ import { formatUnits } from "viem"
 import { MoralisNFT } from "../../types/Token"
 import { getNFTContext } from "../../utils/getNFTContext"
 import { AccountNftGrid } from "../NFTGrid"
+import NFTMedia from "../NFTMedia"
+import { Link } from "react-router-dom"
 
 interface Props {
   nft: MoralisNFT
@@ -41,26 +43,19 @@ const NFTItem: React.FC<Props> = ({ nft, chainId }) => {
   return (
     <div className={classes.itemContainer}>
       <div className={classes.header}>
-        <p className={classes.tokenName}>{name}</p>
+        <Link
+          to={`/collection/${nft.token_address}`}
+          className={classes.tokenName}
+        >
+          <p>{name}</p>
+        </Link>
 
         <p className={classes.tokenId} title={nft.token_id}>
           {nft.token_id}
         </p>
       </div>
       <div className={classes.main}>
-        {(imageError || !metadata?.image) && (
-          <div className={classes.noImage}></div>
-        )}
-        {!imageError && metadata?.image && (
-          <div className={classes.imageContainer}>
-            <img
-              src={metadata?.image}
-              alt={name}
-              className={classes.image}
-              onError={() => setImageError(true)}
-            />
-          </div>
-        )}
+        <NFTMedia nft={nft} />
 
         <ul className={classes.info}>
           <li>

frontend/src/hooks/useCollection.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query"
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query"
 import { MoralisApiListResponse, MoralisNFT } from "../types/Token"
 
 interface Props {
@@ -12,21 +12,30 @@ if (!process.env.REACT_APP_PROXY_URL) {
 }
 
 const useCollection = ({ tokenAddress, chainId, page = 0 }: Props) => {
-  return useQuery({
+  return useInfiniteQuery({
     queryKey: ["collection", chainId, tokenAddress],
-    queryFn: async () => {
+    queryFn: async ({ pageParam }) => {
       if (!chainId || !tokenAddress) throw new Error("No chainId or token")
-
+      const params = new URLSearchParams([
+        ["cursor", pageParam],
+        ["media_items", "true"],
+      ])
       // get collection metadata
       const nftRes = await fetch(
-        `${process.env.REACT_APP_PROXY_URL}/${chainId}/moralis/nft/${tokenAddress}?media_items=true`
+        `${
+          process.env.REACT_APP_PROXY_URL
+        }/${chainId}/moralis/nft/${tokenAddress}?${params.toString()}`
       )
       if (!nftRes.ok) {
         throw new Error("NFT request failed")
       }
       const collection = (await nftRes.json()) as MoralisApiListResponse
-      return collection.result as MoralisNFT[]
+      return collection
     },
+    initialPageParam: "",
+    maxPages: 1,
+    getNextPageParam: (lastPage) => lastPage.cursor || "",
+    getPreviousPageParam: (firstPage) => firstPage.cursor || "",
     enabled: !!chainId && !!tokenAddress,
   })
 }