Merge pull request #1559 from curvefi/feat/dex-table-pagination

feat: table pagination & e2e tests

Author: DanielSchiavini

apps/main/src/dex/features/pool-list/PoolListTable.tsx

@@ -1,11 +1,12 @@
 import { isEqual } from 'lodash'
 import { useCallback, useMemo, useState } from 'react'
 import { type NetworkConfig } from '@/dex/types/main.types'
-import { ColumnFiltersState, ExpandedState, useReactTable } from '@tanstack/react-table'
+import { ColumnFiltersState, ExpandedState, getPaginationRowModel, useReactTable } from '@tanstack/react-table'
 import { CurveApi } from '@ui-kit/features/connect-wallet'
 import { useUserProfileStore } from '@ui-kit/features/user-profile'
 import { SMALL_POOL_TVL } from '@ui-kit/features/user-profile/store'
 import { useIsTablet } from '@ui-kit/hooks/useBreakpoints'
+import { usePageFromQueryString } from '@ui-kit/hooks/usePageFromQueryString'
 import { useSortFromQueryString } from '@ui-kit/hooks/useSortFromQueryString'
 import type { MigrationOptions } from '@ui-kit/hooks/useStoredState'
 import { t } from '@ui-kit/lib/i18n'
@@ -43,6 +44,8 @@ const useSearch = (columnFiltersById: Record<string, unknown>, setColumnFilter:
     useCallback((search: string) => setColumnFilter(PoolColumnId.PoolName, search || undefined), [setColumnFilter]),
   ] as const
 
+const PER_PAGE = 50
+
 export const PoolListTable = ({ network, curve }: { network: NetworkConfig; curve: CurveApi | null }) => {
   // todo: this needs to be more complicated, we need to show at least the top 10 per chain
   const minLiquidity = useUserProfileStore((s) => s.hideSmallPools) ? SMALL_POOL_TVL : 0
@@ -59,26 +62,27 @@ export const PoolListTable = ({ network, curve }: { network: NetworkConfig; curv
     defaultFilters,
   )
   const [sorting, onSortingChange] = useSortFromQueryString(DEFAULT_SORT)
+  const [pagination, onPaginationChange] = usePageFromQueryString(PER_PAGE)
   const { columnSettings, columnVisibility, sortField } = usePoolListVisibilitySettings(LOCAL_STORAGE_KEY, {
     isLite,
     sorting,
   })
   const [expanded, onExpandedChange] = useState<ExpandedState>({})
   const [searchText, onSearch] = useSearch(columnFiltersById, setColumnFilter)
-
   const table = useReactTable({
     columns: POOL_LIST_COLUMNS,
     data: useMemo(() => data ?? [], [data]),
-    state: { expanded, sorting, columnVisibility, columnFilters },
+    state: { expanded, sorting, columnVisibility, columnFilters, pagination },
     onSortingChange,
     onExpandedChange,
+    onPaginationChange,
     ...getTableOptions(data),
+    getPaginationRowModel: getPaginationRowModel(),
   })
 
   const resultCount = table.getFilteredRowModel().rows.length
   return (
     <DataTable
-      lazy
       table={table}
       emptyState={
         <EmptyStateRow table={table}>

apps/main/src/dex/features/pool-list/cells/RewardsOtherCell.tsx

@@ -1,11 +1,10 @@
 import { Fragment } from 'react'
 import CampaignRewardsRow from '@/dex/components/CampaignRewardsRow'
 import PoolRewardsCrv from '@/dex/components/PoolRewardsCrv'
-import { useNetworkFromUrl } from '@/dex/hooks/useChainId'
 import { RewardsApy } from '@/dex/types/main.types'
 import type { Chain } from '@curvefi/prices-api'
+import Typography from '@mui/material/Typography'
 import type { CellContext } from '@tanstack/react-table'
-import { Chip } from '@ui/Typography'
 import { FORMAT_OPTIONS, formatNumber } from '@ui/utils'
 import { useCampaignsByAddress } from '@ui-kit/entities/campaigns'
 import { isSortedBy } from '@ui-kit/shared/ui/DataTable/data-table.utils'
@@ -22,29 +21,25 @@ export const RewardsOtherCell = ({ getValue, table, column, row: { original: poo
   })
   const rewards = getValue()
   const { other, crv } = rewards ?? {}
-  const isCrvRewardsEnabled = useNetworkFromUrl()?.isCrvRewardsEnabled
   return (
     <>
-      {isCrvRewardsEnabled && crv && (
+      {crv && (
         <PoolRewardsCrv
           poolData={poolData}
           rewardsApy={rewards}
           isHighlight={isSortedBy(table, PoolColumnId.RewardsCrv)}
         />
       )}
-      {!!other?.length && (
-        <div>
-          {other?.map((o) => (
-            <Fragment key={o.tokenAddress}>
-              <Chip size="md" isBold={isSortedBy(table, PoolColumnId.RewardsIncentives)}>
-                {formatNumber(o.apy, FORMAT_OPTIONS.PERCENT)} {o.symbol}
-              </Chip>
-              <br />
-            </Fragment>
-          ))}
-        </div>
-      )}
+      {other?.map((o) => (
+        <Typography
+          fontWeight={isSortedBy(table, PoolColumnId.RewardsIncentives) ? 'bold' : 'normal'}
+          key={o.tokenAddress}
+        >
+          {formatNumber(o.apy, FORMAT_OPTIONS.PERCENT)} {o.symbol}
+        </Typography>
+      ))}
       {campaigns.length > 0 && <CampaignRewardsRow rewardItems={campaigns} />}
+      {!crv && !other?.length && !campaigns.length && '-'}
     </>
   )
 }

apps/main/src/dex/features/pool-list/drawers/PoolListFilterDrawer.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useCallback } from 'react'
+import type { PoolColumnId } from '@/dex/features/pool-list/columns'
 import { Button, Grid, Stack } from '@mui/material'
 import { useSwitch } from '@ui-kit/hooks/useSwitch'
 import { t } from '@ui-kit/lib/i18n'
@@ -25,9 +26,17 @@ export const PoolListFilterDrawer = ({
   hasFilters,
   searchText,
   onSearch,
+  setColumnFilter,
   ...filterProps
 }: Props) => {
-  const [open, openDrawer, closeDrawer] = useSwitch(false)
+  const [open, openDrawer, closeDrawer, , setOpen] = useSwitch(false)
+  const setFilterAndClose = useCallback(
+    (id: PoolColumnId, value: unknown) => {
+      setColumnFilter(id, value)
+      closeDrawer()
+    },
+    [setColumnFilter, closeDrawer],
+  )
   return (
     <SwipeableDrawer
       paperSx={{ maxHeight: SizesAndSpaces.MaxHeight.drawer }}
@@ -43,7 +52,7 @@ export const PoolListFilterDrawer = ({
         </Button>
       }
       open={open}
-      setOpen={closeDrawer}
+      setOpen={setOpen}
     >
       <DrawerHeader title={t`Filters`}>
         <HiddenMarketsResetFilters
@@ -60,7 +69,7 @@ export const PoolListFilterDrawer = ({
       >
         <DrawerHeader title={t`Popular Filters`} />
         <Grid container spacing={Spacing.sm}>
-          <PoolListFilterChips {...filterProps} />
+          <PoolListFilterChips {...filterProps} setColumnFilter={setFilterAndClose} />
         </Grid>
       </Stack>
     </SwipeableDrawer>

apps/main/src/dex/features/pool-list/hooks/usePoolListData.tsx

@@ -8,7 +8,6 @@ import type { NetworkConfig, PoolData } from '@/dex/types/main.types'
 import { getPath } from '@/dex/utils/utilsRouter'
 import { notFalsy, recordValues } from '@curvefi/prices-api/objects.util'
 import { useConnection } from '@ui-kit/features/connect-wallet'
-import { useLayoutStore } from '@ui-kit/features/layout'
 import usePageVisibleInterval from '@ui-kit/hooks/usePageVisibleInterval'
 import { REFRESH_INTERVAL } from '@ui-kit/lib/model'
 import { DEX_ROUTES } from '@ui-kit/shared/routes'
@@ -31,7 +30,6 @@ const getPoolTags = (hasPosition: boolean, { pool, pool: { address, id, name, re
 export function usePoolListData({ id: network, chainId, isLite }: NetworkConfig) {
   const { curveApi } = useConnection()
   const userActiveKey = getUserActiveKey(curveApi)
-  const isPageVisible = useLayoutStore((state) => state.isPageVisible)
   const poolDataMapper = useStore((state) => state.pools.poolsMapper[chainId])
   const rewardsApyMapper = useStore((state) => state.pools.rewardsApyMapper[chainId])
   const tvlMapper = useStore((state) => state.pools.tvlMapper[chainId])

apps/main/src/llamalend/features/market-list/LlamaMarketsTable.tsx

@@ -41,6 +41,8 @@ const migration: MigrationOptions<ColumnFiltersState> = {
   migrate: (oldValue, initial) => [...initial.filter((i) => !oldValue.some((o) => o.id === i.id)), ...oldValue],
 }
 
+const pagination = { pageIndex: 0, pageSize: 200 }
+
 export const LlamaMarketsTable = ({
   onReload,
   result,
@@ -75,6 +77,7 @@ export const LlamaMarketsTable = ({
     columns: LLAMA_MARKET_COLUMNS,
     data,
     state: { expanded, sorting, columnVisibility, columnFilters },
+    initialState: { pagination },
     onSortingChange,
     onExpandedChange,
     ...getTableOptions(result),

apps/main/src/llamalend/features/market-list/UserPositionsTable.tsx

@@ -42,6 +42,7 @@ export type UserPositionsTableProps = {
 }
 
 const migration: MigrationOptions<ColumnFiltersState> = { version: 1 }
+const pagination = { pageIndex: 0, pageSize: 50 }
 
 export const UserPositionsTable = ({ result, loading, tab }: UserPositionsTableProps) => {
   const { markets: data = [], userHasPositions } = result ?? {}
@@ -60,6 +61,7 @@ export const UserPositionsTable = ({ result, loading, tab }: UserPositionsTableP
     columns: LLAMA_MARKET_COLUMNS,
     data,
     state: { expanded, sorting, columnVisibility, columnFilters },
+    initialState: { pagination },
     onSortingChange,
     onExpandedChange,
     ...getTableOptions(result),

apps/main/src/llamalend/features/user-position-history/UserEventsTable.tsx

@@ -18,6 +18,8 @@ type UserEventsTableProps = {
   loading: boolean
 }
 
+const pagination = { pageIndex: 0, pageSize: 50 }
+
 export const UserEventsTable = ({ events, loading, isError }: UserEventsTableProps) => {
   const { columnVisibility } = useUserPositionHistoryVisibility()
   const [sorting, setSorting] = useState<SortingState>(DEFAULT_SORT)
@@ -26,6 +28,7 @@ export const UserEventsTable = ({ events, loading, isError }: UserEventsTablePro
     data: events,
     columns: USER_POSITION_HISTORY_COLUMNS,
     state: { columnVisibility, sorting },
+    initialState: { pagination },
     onSortingChange: setSorting,
     ...getTableOptions(events),
   })

packages/curve-ui-kit/src/features/user-profile/store.ts

@@ -6,7 +6,7 @@ import type { ThemeKey } from '@ui-kit/themes/basic-theme'
 
 export const SMALL_POOL_TVL = 10000
 
-type State = {
+export type UserProfileState = {
   theme: ThemeKey
   /** Key is either 'crypto', 'stable' or a chainIdPoolId from getChainPoolIdActiveKey. */
   maxSlippage: { crypto: string; stable: string } & Partial<Record<string, string>>
@@ -37,7 +37,7 @@ type Action = {
   setHideSmallPools: (hideSmallPools: boolean) => void
 }
 
-type Store = State & Action
+type Store = UserProfileState & Action
 
 const INITIAL_THEME =
   typeof window !== 'undefined'
@@ -46,7 +46,7 @@ const INITIAL_THEME =
       : 'light'
     : 'light'
 
-const INITIAL_STATE: State = {
+const INITIAL_STATE: UserProfileState = {
   theme: INITIAL_THEME,
   maxSlippage: { crypto: '0.1', stable: '0.03' },
   isAdvancedMode: false,

packages/curve-ui-kit/src/hooks/usePageFromQueryString.ts

@@ -0,0 +1,33 @@
+import { useCallback, useMemo } from 'react'
+import { OnChangeFn, PaginationState } from '@tanstack/react-table'
+import { useSearchParams } from '@ui-kit/hooks/router'
+
+/**
+ * Hook to manage pagination state synchronized with the URL query string.
+ * The page index is zero-based internally but one-based in the URL.
+ * @param pageSize - Number of items per page.
+ * @param fieldName - The query string parameter name for the page index. The default is 'page'.
+ * @returns A tuple containing the pagination state and an onChange handler.
+ */
+export function usePageFromQueryString(pageSize: number, fieldName = 'page') {
+  const searchParams = useSearchParams()
+  const pageIndex = useMemo(
+    () => (searchParams.has(fieldName) ? +searchParams.get(fieldName)! - 1 : 0),
+    [fieldName, searchParams],
+  )
+  const onChange: OnChangeFn<PaginationState> = useCallback(
+    (newPagination) => {
+      const { pageIndex: newPage } =
+        typeof newPagination == 'function' ? newPagination({ pageIndex, pageSize }) : newPagination
+      const params = new URLSearchParams(searchParams)
+      if (newPage > 0) {
+        params.set(fieldName, (newPage + 1).toString())
+      } else {
+        params.delete(fieldName)
+      }
+      window.history.pushState(null, '', params.size ? `?${params.toString()}` : window.location.pathname)
+    },
+    [pageIndex, pageSize, searchParams, fieldName],
+  )
+  return [{ pageSize, pageIndex }, onChange] as const
+}

packages/curve-ui-kit/src/hooks/useSortFromQueryString.ts

@@ -16,15 +16,15 @@ export function useSortFromQueryString(defaultSort: SortingState, fieldName = 's
   return [sort, onChange] as const
 }
 
-function parseSort(search: URLSearchParams | null, defaultSort: SortingState, fieldName: string) {
+function parseSort(search: URLSearchParams, defaultSort: SortingState, fieldName: string) {
   const sort = search
-    ?.getAll(fieldName)
+    .getAll(fieldName)
     .map((id) => (id.startsWith('-') ? { id: id.slice(1), desc: true } : { id, desc: false }))
   return sort?.length ? sort : defaultSort.map(({ id, desc }) => ({ id: id.replace(/\./g, '_'), desc }))
 }
 
-function updateSort(search: URLSearchParams | null, state: SortingState, fieldName: string): string {
-  const params = new URLSearchParams(search ?? [])
+function updateSort(search: URLSearchParams, state: SortingState, fieldName: string): string {
+  const params = new URLSearchParams(search)
   params.delete(fieldName)
   state.forEach(({ id, desc }) => params.append('sort', `${desc ? '-' : ''}${id}`))
   return `?${params.toString()}`