DAO-743 Added pagination

src/app/treasury/HoldersSection.tsx

@@ -6,8 +6,6 @@ import { useFetchTokenHolders } from '@/app/treasury/hooks/useFetchTokenHolders'
 import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
 import Image from 'next/image'
 import { LoadingSpinner } from '@/components/LoadingSpinner'
-import { Button } from '@/components/Button'
-import { ReactNode } from 'react'
 
 interface HolderColumnProps {
   address: string
@@ -31,31 +29,19 @@ const HolderColumn = ({ address, rns }: HolderColumnProps) => {
 
 export const HoldersSection = () => {
   // Fetch st rif holders
-  const { data, isLoading, hasNextPage, isFetchingNextPage, fetchNextPage } =
-    useFetchTokenHolders(STRIF_ADDRESS)
+  const { currentResults, paginationElement, isLoading } = useFetchTokenHolders(STRIF_ADDRESS)
 
-  const holders = data?.pages?.reduce<{ holder: ReactNode; quantity: string }[]>((prev, currentPage) => {
-    currentPage.items.forEach(({ address, value }) => {
-      prev.push({
-        holder: <HolderColumn address={address.hash} rns={address.ens_domain_name} />,
-        quantity: `${formatBalanceToHuman(value)} stRIF`,
-      })
-    })
-    return prev
-  }, [])
+  const holders = currentResults.map(({ address, value }) => ({
+    holder: <HolderColumn address={address.hash} rns={address.ens_domain_name} />,
+    quantity: `${formatBalanceToHuman(value)} stRIF`,
+  }))
 
   return (
     <div>
       <HeaderTitle className="mb-4">Holders</HeaderTitle>
       {holders && holders?.length > 0 && <Table data={holders} />}
+      {paginationElement}
       {isLoading && <LoadingSpinner />}
-      {isFetchingNextPage ? (
-        <LoadingSpinner className="w-52" />
-      ) : hasNextPage ? (
-        <Button variant="secondary" onClick={() => fetchNextPage()}>
-          Load more
-        </Button>
-      ) : null}
     </div>
   )
 }

src/app/treasury/hooks/useFetchTokenHolders.ts

@@ -1,15 +1,20 @@
 import { fetchTokenHoldersOfAddress } from '@/app/user/Balances/actions'
-import { useInfiniteQuery } from '@tanstack/react-query'
 import { Address } from 'viem'
-import { NextPageParams, ServerResponseV2, TokenHoldersResponse } from '@/app/user/Balances/types'
+import { NextPageParams } from '@/app/user/Balances/types'
+import { usePagination } from '@/shared/hooks/usePagination'
+import { usePaginationUi } from '@/shared/hooks/usePaginationUi'
 
 export const useFetchTokenHolders = (address: Address) => {
-  return useInfiniteQuery<ServerResponseV2<TokenHoldersResponse>, Error>({
-    queryKey: [`tokenHolders${address}`, address],
+  const query = usePagination({
+    queryKey: ['tokenHolders'],
+    queryFn: ({ pageParam }) => fetchTokenHoldersOfAddress(address, pageParam as NextPageParams),
+    getNextPageParam: lastPage => lastPage.next_page_params,
     initialPageParam: null,
-    queryFn: async ({ pageParam }) => fetchTokenHoldersOfAddress(address, pageParam as NextPageParams),
-    getNextPageParam: lastPage => {
-      return lastPage.next_page_params
-    },
+    resultsPerTablePage: 10,
+    hasMorePagesProperty: 'next_page_params',
   })
+
+  const ui = usePaginationUi(query)
+
+  return { ...query, ...ui }
 }

src/app/user/Balances/actions.ts

@@ -126,9 +126,13 @@ export async function fetchIpfsUri(
 export const fetchNftInfo = (address: string) =>
   axiosInstance.get(getNftInfo.replace('{{nftAddress}}', address))
 
-export const fetchTokenHoldersOfAddress = (address: string, nextParams: NextPageParams | null) =>
-  axiosInstance
-    .get<
-      ServerResponseV2<TokenHoldersResponse>
-    >(getTokenHoldersOfAddress.replace('{{address}}', address), { params: nextParams })
-    .then(res => res.data)
+export const fetchTokenHoldersOfAddress = async (address: string, nextParams: NextPageParams | null) => {
+  const { data } = await axiosInstance.get<ServerResponseV2<TokenHoldersResponse>>(
+    getTokenHoldersOfAddress.replace('{{address}}', address),
+    { params: nextParams },
+  )
+  if (data.error) {
+    throw new Error(data.error)
+  }
+  return data
+}

src/app/user/Balances/types.ts

@@ -51,4 +51,5 @@ export interface NextPageParams {
 export interface ServerResponseV2<T> {
   items: T[]
   next_page_params: NextPageParams | null
+  error?: string
 }

src/components/Button/Button.tsx

@@ -5,10 +5,14 @@ import { FaSpinner } from 'react-icons/fa6'
 import { Span } from '../Typography'
 import { DivWithGradient } from '@/components/Button/DivWithGradient'
 
-export const BUTTON_DEFAULT_CLASSES = 'px-[24px] py-[12px] flex gap-x-1 items-center relative'
+export const BUTTON_DEFAULT_CLASSES = 'px-[24px] py-[12px] flex gap-x-1 items-center relative rounded-[6px]'
+
+const DEFAULT_PAGINATION_CLASSES = 'w-[32px] h-[32px] p-0'
+
+const DEFAULT_PAGINATION_ACTIVE_CLASSES = [DEFAULT_PAGINATION_CLASSES, 'bg-primary text-black'].join(' ')
 
 interface Props {
-  children: string
+  children: ReactNode
   onClick?: (e: MouseEvent<HTMLButtonElement>) => void
   startIcon?: ReactNode
   variant?: ButtonVariants
@@ -55,6 +59,8 @@ export const Button: FC<Props> = ({
     'justify-start': !centerContent,
     'justify-center': centerContent,
     'cursor-not-allowed': disabled,
+    [DEFAULT_PAGINATION_CLASSES]: variant === 'pagination',
+    [DEFAULT_PAGINATION_ACTIVE_CLASSES]: variant === 'pagination-active',
     [className]: true,
   })
 

src/components/Button/types.ts

@@ -6,3 +6,5 @@ export type ButtonVariants =
   | 'outlined'
   | 'white'
   | 'sidebar-active'
+  | 'pagination'
+  | 'pagination-active'

src/lib/endpoints.ts

@@ -19,4 +19,4 @@ export const fetchProposalsCreatedByGovernorAddress =
 export const getNftInfo =
   process.env.NEXT_PUBLIC_API_RWS_NFT_INFO || `/nfts/{{nftAddress}}?chainId=${CHAIN_ID}`
 
-export const getTokenHoldersOfAddress = '/address/{{address}}/holders'
+export const getTokenHoldersOfAddress = `/address/{{address}}/holders?chainId=${CHAIN_ID}`

src/shared/hooks/usePagination.ts

@@ -0,0 +1,110 @@
+import { InfiniteData, useInfiniteQuery, UseInfiniteQueryResult } from '@tanstack/react-query'
+import { useState, useCallback, useMemo, useEffect } from 'react'
+
+interface PaginatedResponse<T> {
+  items: T[]
+  [key: string]: any
+}
+
+interface UsePaginatedQueryOptions<T> {
+  queryKey: string[]
+  queryFn: (pageParam: any) => Promise<PaginatedResponse<T>>
+  getNextPageParam: (lastPage: PaginatedResponse<T>) => any
+  initialPageParam: any
+  resultsPerTablePage: number
+  hasMorePagesProperty: keyof PaginatedResponse<T>
+}
+
+export interface UsePaginatedQueryResult<T>
+  extends Omit<UseInfiniteQueryResult<InfiniteData<PaginatedResponse<T>>>, 'data'> {
+  currentResults: T[]
+  tablePage: number
+  totalPages: number
+  nextTablePage: () => void
+  previousTablePage: () => void
+  isFirstFetch: boolean
+  hasMorePages: boolean
+}
+
+export function usePagination<T>({
+  queryKey,
+  queryFn,
+  getNextPageParam,
+  initialPageParam,
+  resultsPerTablePage,
+  hasMorePagesProperty,
+}: UsePaginatedQueryOptions<T>): UsePaginatedQueryResult<T> {
+  const [tablePage, setTablePage] = useState(0)
+  const [isFirstFetch, setIsFirstFetch] = useState(true)
+
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, ...restQueryResult } = useInfiniteQuery<
+    PaginatedResponse<T>,
+    Error
+  >({
+    queryKey,
+    queryFn,
+    getNextPageParam,
+    initialPageParam,
+    refetchOnWindowFocus: false,
+  })
+
+  const allItems = useMemo(() => {
+    return data?.pages.flatMap(page => page.items) || []
+  }, [data])
+
+  const totalItems = allItems.length
+  const totalPages = Math.ceil(totalItems / resultsPerTablePage)
+
+  const currentResults = useMemo(() => {
+    const start = tablePage * resultsPerTablePage
+    const end = start + resultsPerTablePage
+    return allItems.slice(start, end)
+  }, [allItems, tablePage, resultsPerTablePage])
+
+  const nextTablePage = useCallback(() => {
+    if (tablePage < totalPages - 1) {
+      setTablePage(prev => prev + 1)
+    }
+  }, [tablePage, totalPages])
+
+  const previousTablePage = useCallback(() => {
+    if (tablePage > 0) {
+      setTablePage(prev => prev - 1)
+    }
+  }, [tablePage])
+
+  const hasMorePages = useMemo(() => {
+    if (!data || data.pages.length === 0) return true
+    const lastPage = data.pages[data.pages.length - 1]
+    return lastPage[hasMorePagesProperty] !== null
+  }, [data, hasMorePagesProperty])
+
+  useEffect(() => {
+    // Check if we need to fetch the next page
+    const currentItemIndex = (tablePage + 1) * resultsPerTablePage
+    if (currentItemIndex >= totalItems && hasMorePages && !isFetchingNextPage) {
+      fetchNextPage()
+    }
+  }, [tablePage, resultsPerTablePage, totalItems, hasMorePages, isFetchingNextPage, fetchNextPage])
+
+  useEffect(() => {
+    // Update isFirstFetch
+    if (isFirstFetch && data && data.pages.length > 0) {
+      setIsFirstFetch(false)
+    }
+  }, [data, isFirstFetch])
+
+  return {
+    currentResults,
+    totalPages,
+    tablePage,
+    nextTablePage,
+    previousTablePage,
+    isFirstFetch,
+    hasMorePages,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    ...restQueryResult,
+  }
+}

src/shared/hooks/usePaginationUi.tsx

@@ -0,0 +1,78 @@
+import { ReactNode, useMemo } from 'react'
+import { UsePaginatedQueryResult } from '@/shared/hooks/usePagination'
+import { Button } from '@/components/Button'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+interface UseSimplePaginationResult<T> {
+  paginationElement: ReactNode
+  currentResults: T[]
+}
+
+export function usePaginationUi<T>(
+  paginationResult: UsePaginatedQueryResult<T>,
+): UseSimplePaginationResult<T> {
+  const { currentResults, totalPages, tablePage, nextTablePage, previousTablePage, isLoading } =
+    paginationResult
+
+  const paginationElement = useMemo(() => {
+    const getPageNumbers = () => {
+      const maxVisiblePages = 5
+      const pages = []
+      const start = Math.max(0, Math.min(tablePage - 2, totalPages - maxVisiblePages))
+      const end = Math.min(start + maxVisiblePages, totalPages)
+
+      for (let i = start; i < end; i++) {
+        pages.push(i)
+      }
+
+      return pages
+    }
+
+    return (
+      <div className="flex gap-x-1 items-center justify-center">
+        <PaginationButton
+          text={<ChevronLeft />}
+          onClick={previousTablePage}
+          disabled={tablePage === 0 || isLoading}
+        />
+        {getPageNumbers().map(pageNumber => (
+          <PaginationButton
+            key={pageNumber}
+            onClick={() =>
+              tablePage !== pageNumber && (pageNumber > tablePage ? nextTablePage() : previousTablePage())
+            }
+            disabled={isLoading}
+            text={pageNumber + 1}
+            isActive={pageNumber === tablePage}
+          />
+        ))}
+        <PaginationButton
+          text={<ChevronRight />}
+          onClick={nextTablePage}
+          disabled={tablePage === totalPages - 1 || isLoading}
+        />
+      </div>
+    )
+  }, [tablePage, totalPages, isLoading, nextTablePage, previousTablePage])
+
+  return {
+    paginationElement,
+    currentResults,
+  }
+}
+
+const PaginationButton = ({
+  text,
+  onClick,
+  disabled,
+  isActive,
+}: {
+  text: ReactNode
+  onClick: () => void
+  disabled?: boolean
+  isActive?: boolean
+}) => (
+  <Button onClick={onClick} disabled={disabled} variant={isActive ? 'pagination-active' : 'pagination'}>
+    {text}
+  </Button>
+)