fix: small pools filter showing at least 10

Author: DanielSchiavini

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

@@ -1,10 +1,13 @@
 import { isEqual } from 'lodash'
 import { useCallback, useMemo, useState } from 'react'
+import { type PoolListItem } from '@/dex/features/pool-list/types'
+import { useNetworkFromUrl } from '@/dex/hooks/useChainId'
 import { type NetworkConfig } from '@/dex/types/main.types'
+import { notFalsy } from '@curvefi/prices-api/objects.util'
 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 { MIN_POOLS_DISPLAYED, 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'
@@ -16,6 +19,7 @@ import { EmptyStateRow } from '@ui-kit/shared/ui/DataTable/EmptyStateRow'
 import { useColumnFilters } from '@ui-kit/shared/ui/DataTable/hooks/useColumnFilters'
 import { TableFilters } from '@ui-kit/shared/ui/DataTable/TableFilters'
 import { TableFiltersTitles } from '@ui-kit/shared/ui/DataTable/TableFiltersTitles'
+import { takeTopWithMin } from '@ui-kit/utils'
 import { PoolListChips } from './chips/PoolListChips'
 import { POOL_LIST_COLUMNS, PoolColumnId } from './columns'
 import { PoolListEmptyState } from './components/PoolListEmptyState'
@@ -27,16 +31,23 @@ const LOCAL_STORAGE_KEY = 'dex-pool-list'
 
 const migration: MigrationOptions<ColumnFiltersState> = { version: 1 }
 
-const useDefaultPoolsFilter = (minLiquidity: number) =>
-  useMemo(
-    () => [
-      {
-        id: PoolColumnId.Tvl,
-        value: [minLiquidity, null],
-      },
-    ],
-    [minLiquidity],
+const useStaticPoolsFilter = (data: PoolListItem[]) => {
+  const hideSmallPools = useUserProfileStore((s) => s.hideSmallPools)
+  const { hideSmallPoolsTvl: tvl = SMALL_POOL_TVL } = useNetworkFromUrl() ?? {}
+  return useMemo(
+    () =>
+      notFalsy(
+        hideSmallPools && {
+          id: PoolColumnId.Tvl,
+          value: [
+            takeTopWithMin(data, (pool) => +(pool.tvl?.value ?? 0), tvl, MIN_POOLS_DISPLAYED),
+            null, // no upper limit
+          ],
+        },
+      ),
+    [data, tvl, hideSmallPools],
   )
+}
 
 const useSearch = (columnFiltersById: Record<string, unknown>, setColumnFilter: (id: string, value: unknown) => void) =>
   [
@@ -45,22 +56,21 @@ const useSearch = (columnFiltersById: Record<string, unknown>, setColumnFilter:
   ] as const
 
 const PER_PAGE = 50
+const EMPTY: never[] = []
 
 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
   const { isLite, poolFilters } = network
   const { signerAddress } = curve ?? {}
 
   // todo: use isReady to show a loading spinner close to the data
   const { data, isLoading, isReady, userHasPositions } = usePoolListData(network)
 
-  const defaultFilters = useDefaultPoolsFilter(minLiquidity)
-  const [columnFilters, columnFiltersById, setColumnFilter, resetFilters] = useColumnFilters(
-    LOCAL_STORAGE_KEY,
+  const staticFilters = useStaticPoolsFilter(data)
+  const { columnFilters, columnFiltersById, setColumnFilter, resetFilters } = useColumnFilters({
+    title: LOCAL_STORAGE_KEY,
     migration,
-    defaultFilters,
-  )
+    staticFilters,
+  })
   const [sorting, onSortingChange] = useSortFromQueryString(DEFAULT_SORT)
   const [pagination, onPaginationChange] = usePageFromQueryString(PER_PAGE)
   const { columnSettings, columnVisibility, sortField } = usePoolListVisibilitySettings(LOCAL_STORAGE_KEY, {
@@ -71,7 +81,7 @@ export const PoolListTable = ({ network, curve }: { network: NetworkConfig; curv
   const [searchText, onSearch] = useSearch(columnFiltersById, setColumnFilter)
   const table = useReactTable({
     columns: POOL_LIST_COLUMNS,
-    data: useMemo(() => data ?? [], [data]),
+    data: data ?? EMPTY,
     state: { expanded, sorting, columnVisibility, columnFilters, pagination },
     onSortingChange,
     onExpandedChange,
@@ -109,7 +119,7 @@ export const PoolListTable = ({ network, curve }: { network: NetworkConfig; curv
           <PoolListChips
             poolFilters={poolFilters}
             hiddenMarketCount={data ? data.length - resultCount : 0}
-            hasFilters={columnFilters.length > 0 && !isEqual(columnFilters, defaultFilters)}
+            hasFilters={columnFilters.length > 0 && !isEqual(columnFilters, staticFilters)}
             resetFilters={resetFilters}
             onSortingChange={onSortingChange}
             sortField={sortField}

apps/main/src/dex/store/createPoolListSlice.ts

@@ -28,6 +28,7 @@ import type { Chain } from '@curvefi/prices-api'
 import { combineCampaigns } from '@ui-kit/entities/campaigns'
 import { getCampaignsExternal } from '@ui-kit/entities/campaigns/campaigns-external'
 import { getCampaignsMerkl } from '@ui-kit/entities/campaigns/campaigns-merkl'
+import { MIN_POOLS_DISPLAYED } from '@ui-kit/features/user-profile/store'
 import { groupSearchTerms, searchByText, takeTopWithMin } from '@ui-kit/utils'
 import { fetchNetworks, getNetworks } from '../entities/networks'
 
@@ -153,10 +154,12 @@ const createPoolListSlice = (set: StoreApi<State>['setState'], get: StoreApi<Sta
     filterSmallTvl: (poolDatas, tvlMapper, chainId) => {
       const networks = getNetworks()
       const { hideSmallPoolsTvl } = networks[chainId]
-
-      const result = takeTopWithMin(poolDatas, (pd) => +(tvlMapper?.[pd.pool.id]?.value || '0'), hideSmallPoolsTvl, 10)
-
-      return result
+      return takeTopWithMin(
+        poolDatas,
+        (pd) => +(tvlMapper?.[pd.pool.id]?.value || '0'),
+        hideSmallPoolsTvl,
+        MIN_POOLS_DISPLAYED,
+      )
     },
     sortFn: (sortKey, order, poolDatas, rewardsApyMapper, tvlMapper, volumeMapper, isCrvRewardsEnabled, chainId) => {
       const networks = getNetworks()

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

@@ -58,11 +58,11 @@ export const LlamaMarketsTable = ({
 
   const minLiquidity = useUserProfileStore((s) => s.hideSmallPools) ? SMALL_POOL_TVL : 0
   const defaultFilters = useDefaultLlamaFilter(minLiquidity)
-  const [columnFilters, columnFiltersById, setColumnFilter, resetFilters] = useColumnFilters(
-    LOCAL_STORAGE_KEY,
+  const { columnFilters, columnFiltersById, setColumnFilter, resetFilters } = useColumnFilters({
+    title: LOCAL_STORAGE_KEY,
     migration,
     defaultFilters,
-  )
+  })
   const [sorting, onSortingChange] = useSortFromQueryString(DEFAULT_SORT)
   const { columnSettings, columnVisibility, toggleVisibility, sortField } = useLlamaTableVisibility(
     LOCAL_STORAGE_KEY,

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

@@ -48,11 +48,11 @@ export const UserPositionsTable = ({ result, loading, tab }: UserPositionsTableP
   const { markets: data = [], userHasPositions } = result ?? {}
   const defaultFilters = useDefaultUserFilter(tab)
   const title = LOCAL_STORAGE_KEYS[tab]
-  const [columnFilters, columnFiltersById, setColumnFilter, resetFilters] = useColumnFilters(
+  const [columnFilters, columnFiltersById, setColumnFilter, resetFilters] = useColumnFilters({
     title,
     migration,
     defaultFilters,
-  )
+  })
   const [sorting, onSortingChange] = useSortFromQueryString(DEFAULT_SORT[tab], 'userSort')
   const { columnSettings, columnVisibility, sortField } = useLlamaTableVisibility(title, sorting, tab)
   const [expanded, onExpandedChange] = useState<ExpandedState>({})

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

@@ -5,6 +5,7 @@ import { devtools, persist, type PersistOptions } from 'zustand/middleware'
 import type { ThemeKey } from '@ui-kit/themes/basic-theme'
 
 export const SMALL_POOL_TVL = 10000
+export const MIN_POOLS_DISPLAYED = 10
 
 export type UserProfileState = {
   theme: ThemeKey

packages/curve-ui-kit/src/shared/ui/DataTable/hooks/useColumnFilters.tsx

@@ -7,16 +7,27 @@ const DEFAULT: ColumnFiltersState = []
 
 /**
  * A hook to manage filters for a table. Currently saved in the state, but the URL could be a better place.
+ * @param defaultFilters - The default filters to apply to the table.
+ * @param staticFilters - Filters that cannot be changed by the user and are not stored in local storage.
+ * @param title - The title of the table, used as a key for local storage.
+ * @param migration - Migration options for the stored state.
+ * @return An object containing the current filters, a mapping of filters by column ID, a function to set a filter, and a function to reset filters.
  */
-export function useColumnFilters(
-  tableTitle: string,
-  migration: MigrationOptions<ColumnFiltersState>,
-  defaultFilters: ColumnFiltersState = DEFAULT,
-) {
-  const [columnFilters, setColumnFilters] = useTableFilters(tableTitle, defaultFilters, migration)
+export function useColumnFilters({
+  title,
+  migration,
+  defaultFilters = DEFAULT,
+  staticFilters = DEFAULT,
+}: {
+  title: string
+  migration: MigrationOptions<ColumnFiltersState>
+  defaultFilters?: ColumnFiltersState
+  staticFilters?: ColumnFiltersState
+}) {
+  const [storedFilters, setStoredFilters] = useTableFilters(title, defaultFilters, migration)
   const setColumnFilter = useCallback(
     (id: string, value: unknown) =>
-      setColumnFilters((filters) => [
+      setStoredFilters((filters) => [
         ...filters.filter((f) => f.id !== id),
         ...(value == null
           ? []
@@ -27,8 +38,10 @@ export function useColumnFilters(
               },
             ]),
       ]),
-    [setColumnFilters],
+    [setStoredFilters],
   )
+  const columnFilters = useMemo(() => [...storedFilters, ...staticFilters], [storedFilters, staticFilters])
+
   const columnFiltersById: Record<string, unknown> = useMemo(
     () =>
       columnFilters.reduce(
@@ -41,7 +54,6 @@ export function useColumnFilters(
     [columnFilters],
   )
 
-  const resetFilters = useCallback(() => setColumnFilters(defaultFilters), [defaultFilters, setColumnFilters])
-
-  return [columnFilters, columnFiltersById, setColumnFilter, resetFilters] as const
+  const resetFilters = useCallback(() => setStoredFilters(defaultFilters), [defaultFilters, setStoredFilters])
+  return { columnFilters, columnFiltersById, setColumnFilter, resetFilters }
 }