feat: save table filters in local storage

apps/main/src/llamalend/PageLlamaMarkets/LlamaMarketsTable.tsx

@@ -26,9 +26,6 @@ import { DataTable } from '@ui-kit/shared/ui/DataTable'
 import { type Option, SelectFilter } from '@ui-kit/shared/ui/DataTable/SelectFilter'
 import { TableFilters, useColumnFilters } from '@ui-kit/shared/ui/DataTable/TableFilters'
 import { useVisibilitySettings } from '@ui-kit/shared/ui/DataTable/TableVisibilitySettingsPopover'
-import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-
-const { Spacing, MaxWidth } = SizesAndSpaces
 
 /**
  * Hook to manage the visibility of columns in the Llama Markets table.
@@ -43,6 +40,8 @@ const useVisibility = (sorting: SortingState, hasPositions: boolean | undefined)
   return { sortField, ...visibilitySettings, ...(useIsMobile() && { columnVisibility }) }
 }
 
+const TITLE = 'Llamalend Markets' // not using the t`` here as the value is used as a key in the local storage
+
 export const LlamaMarketsTable = ({
   onReload,
   result,
@@ -55,7 +54,7 @@ export const LlamaMarketsTable = ({
   minLiquidity: number
 }) => {
   const { markets: data = [], hasPositions, hasFavorites } = result ?? {}
-  const [columnFilters, columnFiltersById, setColumnFilter, resetFilters] = useColumnFilters([
+  const [columnFilters, columnFiltersById, setColumnFilter, resetFilters] = useColumnFilters(TITLE, [
     { id: LlamaMarketColumnId.LiquidityUsd, value: [minLiquidity, undefined] },
   ])
   const [sorting, onSortingChange] = useSortFromQueryString(DEFAULT_SORT)
@@ -87,7 +86,7 @@ export const LlamaMarketsTable = ({
       shouldStickFirstColumn={useIsTablet() && !!hasPositions}
     >
       <TableFilters<LlamaMarketColumnId>
-        title={t`Llamalend Markets`}
+        title={TITLE}
         subtitle={t`Borrow with the power of Curve soft liquidations`}
         onReload={onReload}
         visibilityGroups={columnSettings}

apps/main/src/llamalend/PageLlamaMarkets/filters/RangeSliderFilter.tsx

@@ -55,9 +55,11 @@ export const RangeSliderFilter = <T extends unknown>({
       (newRange: NumberRange) =>
         setColumnFilter(
           id,
-          newRange.every((value, i) => value === defaultValue[i]) ? undefined : (newRange as NumberRange),
+          newRange.every((value, i) => value === defaultValue[i])
+            ? undefined // remove the filter if the range is the same as the default
+            : [newRange[0] === defaultMinimum ? null : newRange[0], newRange[1] === maxValue ? null : newRange[1]],
         ),
-      [defaultValue, id, setColumnFilter],
+      [defaultMinimum, defaultValue, id, maxValue, setColumnFilter],
     ),
   )
 

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

@@ -1,6 +1,7 @@
 import { kebabCase } from 'lodash'
 import { useMemo } from 'react'
 import type { Address } from '@curvefi/prices-api'
+import type { ColumnFiltersState } from '@tanstack/table-core'
 import { isBetaDefault } from '@ui-kit/utils'
 import { useStoredState } from './useStoredState'
 
@@ -38,6 +39,12 @@ export const useBetaFlag = () => useLocalStorage<boolean>('beta', isBetaDefault)
 export const useFilterExpanded = (tableTitle: string) =>
   useLocalStorage<boolean>(`filter-expanded-${kebabCase(tableTitle)}`, false)
 
+export const useTableFilters = (tableTitle: string, defaultFilters: ColumnFiltersState) =>
+  useLocalStorage<ColumnFiltersState>(
+    `table-filters-${kebabCase(tableTitle)}`,
+    useMemo(() => [], []),
+  )
+
 export const getFavoriteMarkets = () => getFromLocalStorage<Address[]>('favoriteMarkets') ?? []
 export const useFavoriteMarkets = () => {
   const initialValue = useMemo(() => [], [])

packages/curve-ui-kit/src/shared/ui/DataTable/TableFilters.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, ReactNode, useCallback, useMemo, useRef, useState } from 'react'
+import { forwardRef, ReactNode, useCallback, useMemo, useRef } from 'react'
 import Box from '@mui/material/Box'
 import Collapse from '@mui/material/Collapse'
 import Grid from '@mui/material/Grid'
@@ -8,7 +8,7 @@ import SvgIcon from '@mui/material/SvgIcon'
 import Typography from '@mui/material/Typography'
 import { ColumnFiltersState } from '@tanstack/react-table'
 import { useIsMobile, useIsTiny } from '@ui-kit/hooks/useBreakpoints'
-import { useFilterExpanded } from '@ui-kit/hooks/useLocalStorage'
+import { useFilterExpanded, useTableFilters } from '@ui-kit/hooks/useLocalStorage'
 import { useSwitch } from '@ui-kit/hooks/useSwitch'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 import { FilterIcon } from '../../icons/FilterIcon'
@@ -142,8 +142,8 @@ export const TableFilters = <ColumnIds extends string>({
 /**
  * A hook to manage filters for a table. Currently saved in the state, but the URL could be a better place.
  */
-export function useColumnFilters(defaultFilters: ColumnFiltersState = []) {
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(defaultFilters)
+export function useColumnFilters(tableTitle: string, defaultFilters: ColumnFiltersState = []) {
+  const [columnFilters, setColumnFilters] = useTableFilters(tableTitle, defaultFilters)
   const setColumnFilter = useCallback(
     (id: string, value: unknown) =>
       setColumnFilters((filters) => [
@@ -157,7 +157,7 @@ export function useColumnFilters(defaultFilters: ColumnFiltersState = []) {
               },
             ]),
       ]),
-    [],
+    [setColumnFilters],
   )
   const columnFiltersById: Record<string, unknown> = useMemo(
     () =>
@@ -171,7 +171,7 @@ export function useColumnFilters(defaultFilters: ColumnFiltersState = []) {
     [columnFilters],
   )
 
-  const resetFilters = useCallback(() => setColumnFilters(defaultFilters), [defaultFilters])
+  const resetFilters = useCallback(() => setColumnFilters(defaultFilters), [defaultFilters, setColumnFilters])
 
   return [columnFilters, columnFiltersById, setColumnFilter, resetFilters] as const
 }

packages/tsconfig/cypress.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "lib": ["es5", "dom"],
     "types": ["cypress", "node"],
     "resolveJsonModule": true