feat: eb filter

.vscode/settings.json

@@ -16,7 +16,6 @@
   "javascript.validate.enable": false,
   "javascript.format.enable": false,
   "typescript.format.enable": false,
-
   "search.exclude": {
     ".eslintcache": true,
     ".git": true,
@@ -26,18 +25,15 @@
     "test/**/__snapshots__": true,
     "yarn.lock": true
   },
-
   // Disable organize imports on save to prevent conflicts with Prettier, keep ESLint fixes
   "editor.codeActionsOnSave": {
     "source.organizeImports": "never",
     "source.fixAll.eslint": "explicit",
     "source.fixAll.ts": "explicit"
   },
-
   // Use Prettier as the default formatter for consistent import ordering
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-
   // Language-specific settings
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

src/api/index.ts

@@ -11,10 +11,14 @@ export const endpoint = (
   if (!ssvNetwork) {
     throw new Error(`SSV network details not found for chainId: ${chainName}`)
   }
-  return urlJoin(
+  const url = urlJoin(
     ssvNetwork.api,
     ssvNetwork.apiVersion,
     ssvNetwork.apiNetwork,
     ...paths.map(String)
   )
+
+  // For debugging purposes
+  if (process.env.NODE_ENV === "development") console.log("endpoint:", url)
+  return url
 }

src/api/validators.ts

@@ -2,7 +2,7 @@
 
 import { endpoint } from "@/api"
 import { api } from "@/api/api-client"
 import { formatGwei, parseEther } from "viem"
 
 import type { PaginatedValidatorsResponse, Validator } from "@/types/api"
 import { type ChainName } from "@/config/chains"
@@ -19,16 +19,7 @@
 ) =>
   await unstable_cache(
     async () => {
-      const augmentedParams = {
-        ...params,
-        effectiveBalance: params.effectiveBalance
-          ? (params.effectiveBalance.map(
-              (value) => +formatGwei(parseEther(value.toString()))
-            ) as [number, number])
-          : params.effectiveBalance,
-      }
-
-      const searchParams = validatorsSearchParamsSerializer(augmentedParams)
+      const searchParams = validatorsSearchParamsSerializer(params)
       const url = endpoint(params.network, "validators", searchParams)
       const response = await api.get<PaginatedValidatorsResponse>(url)
 

src/app/_components/accounts/account-table-filters.tsx

@@ -49,7 +49,11 @@ export const AccountTableFilters = () => {
           step={1}
           decimals={0}
         />
-        <EffectiveBalanceFilter searchParamsHook={useAccountsSearchParams} />
+        <EffectiveBalanceFilter<AccountSearchFilterKeys>
+          name="Effective Balance"
+          searchQueryKey="effectiveBalance"
+          parser={accountsSearchFilters.effectiveBalance}
+        />
         <RangeFilter<AccountSearchFilterKeys>
           name="Operators"
           searchQueryKey="operators"

src/app/_components/clusters/cluster-table-filters.tsx

@@ -63,7 +63,11 @@ export const ClusterTableFilters = ({
           />
         )}
         <OperatorsFilter />
-        <EffectiveBalanceFilter searchParamsHook={useClustersSearchParams} />
+        <EffectiveBalanceFilter<ClusterSearchFilterKeys>
+          name="Effective Balance"
+          searchQueryKey="effectiveBalance"
+          parser={clustersSearchFilters.effectiveBalance}
+        />
         <StatusFilter />
         <IsLiquidatedFilter />
         {enabledFilters.count > 0 && (

src/app/_components/operators/filters/operator-table-filters.tsx

@@ -11,14 +11,14 @@ import { Button } from "@/components/ui/button"
 import { textVariants } from "@/components/ui/text"
 import { MevRelaysFilter } from "@/app/_components/operators/filters/mev-relays-filter"
 import { HexFilter } from "@/app/_components/shared/filters/address-filter"
+import { EffectiveBalanceFilter } from "@/app/_components/shared/filters/effective-balance-filter"
 
 import { EthFeeFilter } from "./eth-fee-filter"
 import { Eth1ClientFilter } from "./eth1-client-filter"
 import { Eth2ClientFilter } from "./eth2-client-filter"
 import { FeeFilter } from "./fee-filter"
 import { IdFilter } from "./id-filter"
 import { LocationFilter } from "./location-filter"
-import { ManagedEthFilter } from "./managed-eth-filter"
 import { NameFilter } from "./name-filter"
 import { Performance24hFilter } from "./performance-24h-filter"
 import { Performance30dFilter } from "./performance-30d-filter"
@@ -74,7 +74,11 @@ export const OperatorTableFilters = ({
         <MevRelaysFilter />
         <EthFeeFilter />
         <FeeFilter />
-        <ManagedEthFilter />
+        <EffectiveBalanceFilter<OperatorSearchFilterKeys>
+          name="ETH Managed"
+          searchQueryKey="effectiveBalance"
+          parser={operatorSearchParsers.effectiveBalance}
+        />
         <ValidatorsFilter />
         <Performance24hFilter />
         <Performance30dFilter />

src/app/_components/shared/filters/address-filter.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react"
 import { xor } from "lodash-es"
 import { X } from "lucide-react"
-import { useQueryState, type ParserBuilder } from "nuqs"
+import { SingleParserBuilder, useQueryState } from "nuqs"
 import { Collapse } from "react-collapse"
 import { MdKeyboardReturn } from "react-icons/md"
 import { type Address, type Hex } from "viem"
@@ -24,7 +24,7 @@ import { FilterButton } from "@/components/filter/filter-button"
 type HexFilterProps<TSearchKey extends string = string> = {
   name: string
   searchQueryKey: TSearchKey
-  parser: ParserBuilder<Address[]>
+  parser: SingleParserBuilder<Address[]>
   placeholder?: string
   invalidMessage?: string
 }

src/app/_components/shared/filters/effective-balance-filter.tsx

@@ -1,71 +1,75 @@
 "use client"
 
 import { isEqual } from "lodash-es"
+import { SingleParserBuilder, useQueryState } from "nuqs"
 
-import { effectiveBalanceParser } from "@/lib/search-parsers/shared/parsers"
-import { useCustomSearchParams } from "@/hooks/search/use-custom-search-params"
+import { useDisclosure } from "@/hooks/use-disclosure"
 import { Text } from "@/components/ui/text"
 import { FilterButton } from "@/components/filter/filter-button"
-import { Range } from "@/components/filter/range-filter"
+import { OpenRange } from "@/components/filter/open-range-filter"
 
-export function EffectiveBalanceFilter({
-  searchParamsHook,
-}: {
-  searchParamsHook: () => ReturnType<
-    typeof useCustomSearchParams<{
-      effectiveBalance: typeof effectiveBalanceParser
-    }>
-  >
-}) {
-  const { filters, setFilters } = searchParamsHook()
+type Props<TSearchKey extends string = string> = {
+  name: string
+  searchQueryKey: TSearchKey
+  parser: SingleParserBuilder<[number, number]> & {
+    defaultValue: [number, number]
+  }
+}
+export function EffectiveBalanceFilter<TSearchKey extends string = string>({
+  name,
+  searchQueryKey,
+  parser,
+}: Props<TSearchKey>) {
+  const popup = useDisclosure()
 
-  const defaultRange = effectiveBalanceParser.defaultValue
+  const [searchRange, setSearchRange] = useQueryState(searchQueryKey, parser)
+  const defaultRange = parser.defaultValue
 
-  const isActive =
-    !isEqual(filters.effectiveBalance, defaultRange) &&
-    Boolean(filters.effectiveBalance)
+  const isActive = !isEqual(searchRange, defaultRange) && Boolean(searchRange)
 
   const apply = (range: [number, number]) => {
     const isCleared = isEqual(range, defaultRange)
-    setFilters((prev) => ({
-      ...prev,
-      effectiveBalance: isCleared ? null : range,
-    }))
+    setSearchRange(isCleared ? null : range)
+    popup.onOpenChange(false)
   }
 
   const remove = () => {
     apply(defaultRange)
+    popup.onOpenChange(false)
   }
 
   return (
     <FilterButton
       isActive={isActive}
-      name="Effective Balance"
+      name={name}
       onClear={remove}
       popover={{
+        root: popup,
         content: {
           className: "w-[400px] max-w-full",
         },
       }}
     >
-      <Range
+      <OpenRange
         className="w-[400px] max-w-full"
-        name="Effective Balance"
-        searchRange={filters.effectiveBalance}
+        name={name}
+        searchRange={searchRange}
         defaultRange={defaultRange}
         apply={apply}
         remove={remove}
         step={1}
         decimals={0}
         inputs={{
           start: {
+            placeholder: "From",
             rightSlot: (
               <Text variant="body-3-medium" className="text-gray-500">
                 ETH
               </Text>
             ),
           },
           end: {
+            placeholder: "To",
             rightSlot: (
               <Text variant="body-3-medium" className="text-gray-500">
                 ETH

src/app/_components/validators/validator-table-filters.tsx

@@ -86,7 +86,11 @@ export const ValidatorTableFilters = ({
           searchQueryKey="dateRange"
           parser={validatorsSearchParsers.dateRange}
         />
-        <EffectiveBalanceFilter searchParamsHook={useValidatorsSearchParams} />
+        <EffectiveBalanceFilter<ValidatorSearchFilterKeys>
+          name="Effective Balance"
+          searchQueryKey="effectiveBalance"
+          parser={validatorsSearchParsers.effectiveBalance}
+        />
         {enabledFilters.count > 0 && (
           <Button
             variant="ghost"