Feat/accounts tweaks

src/api/account.ts

@@ -2,7 +2,7 @@
 
 import { endpoint } from "@/api"
 import { api } from "@/api/api-client"
-import { type Address } from "viem"
+import { formatGwei, parseEther, type Address } from "viem"
 
 import type {
   AccountStatsResponse,
@@ -21,7 +21,16 @@ export const searchAccounts = async (
 ): Promise<PaginatedAccountsResponse> =>
   await unstable_cache(
     async () => {
-      const searchParams = accountSearchParamsSerializer(params)
+      const augmentedParams = {
+        ...params,
+        effectiveBalance: params.effectiveBalance
+          ? (params.effectiveBalance.map(
+              (value) => +formatGwei(parseEther(value.toString()))
+            ) as [number, number])
+          : params.effectiveBalance,
+      }
+
+      const searchParams = accountSearchParamsSerializer(augmentedParams)
       const url = endpoint(params.network, "accounts", `?${searchParams}`)
       return api.get<PaginatedAccountsResponse>(url)
     },

src/api/validators.ts

@@ -2,12 +2,9 @@
 
 import { endpoint } from "@/api"
 import { api } from "@/api/api-client"
+import { formatGwei, parseEther } from "viem"
 
-import {
-  type Operator,
-  type PaginatedValidatorsResponse,
-  type Validator,
-} from "@/types/api"
+import type { PaginatedValidatorsResponse, Validator } from "@/types/api"
 import { type ChainName } from "@/config/chains"
 import {
   validatorsSearchParamsSerializer,
@@ -22,10 +19,18 @@ export const searchValidators = async (
 ) =>
   await unstable_cache(
     async () => {
-      const searchParams = validatorsSearchParamsSerializer(params)
-      const response = await api.get<PaginatedValidatorsResponse>(
-        endpoint(params.network, "validators", `?${searchParams}`)
-      )
+      const augmentedParams = {
+        ...params,
+        effectiveBalance: params.effectiveBalance
+          ? (params.effectiveBalance.map(
+              (value) => +formatGwei(parseEther(value.toString()))
+            ) as [number, number])
+          : params.effectiveBalance,
+      }
+
+      const searchParams = validatorsSearchParamsSerializer(augmentedParams)
+      const url = endpoint(params.network, "validators", `?${searchParams}`)
+      const response = await api.get<PaginatedValidatorsResponse>(url)
 
       // Map beacon chain status to user-friendly status
       if (response?.validators) {

src/app/[network]/account/[address]/_components/table-navigations.tsx

@@ -16,10 +16,10 @@ export function TableNavigation({ ownerAddress }: TableNavigationProps) {
   return (
     <div className="flex items-center gap-2 overflow-auto">
       <RouteTabLink
-        href={`/${network}/account/${ownerAddress}/`}
-        count={stats.data?.validators}
+        href={`/${network}/account/${ownerAddress}/operators`}
+        count={stats.data?.operators}
       >
-        Validators
+        Operators
       </RouteTabLink>
       <RouteTabLink
         href={`/${network}/account/${ownerAddress}/clusters`}
@@ -28,13 +28,13 @@ export function TableNavigation({ ownerAddress }: TableNavigationProps) {
         Clusters
       </RouteTabLink>
       <RouteTabLink
-        href={`/${network}/account/${ownerAddress}/operators`}
-        count={stats.data?.operators}
+        href={`/${network}/account/${ownerAddress}/`}
+        count={stats.data?.validators}
       >
-        Operators
+        Validators
       </RouteTabLink>
       <RouteTabLink href={`/${network}/account/${ownerAddress}/history`}>
-        History
+        Account History
       </RouteTabLink>
     </div>
   )

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

@@ -10,6 +10,7 @@ import { useAccountsSearchParams } from "@/hooks/search/use-custom-search-params
 import { Button } from "@/components/ui/button"
 import { textVariants } from "@/components/ui/text"
 import { HexFilter } from "@/app/_components/shared/filters/address-filter"
+import { EffectiveBalanceFilter } from "@/app/_components/shared/filters/effective-balance-filter"
 import { RangeFilter } from "@/app/_components/shared/filters/range-filter"
 
 export const AccountTableFilters = () => {
@@ -40,6 +41,15 @@ export const AccountTableFilters = () => {
           invalidMessage="Invalid recipient address"
           parser={accountsSearchFilters.recipientAddress}
         />
+        <RangeFilter<AccountSearchFilterKeys>
+          name="ETH Managed"
+          searchQueryKey="totalOperatorEthManaged"
+          parser={accountsSearchFilters.totalOperatorEthManaged}
+          suffix=""
+          step={1}
+          decimals={0}
+        />
+        <EffectiveBalanceFilter searchParamsHook={useAccountsSearchParams} />
         <RangeFilter<AccountSearchFilterKeys>
           name="Operators"
           searchQueryKey="operators"
@@ -64,14 +74,6 @@ export const AccountTableFilters = () => {
           step={1}
           decimals={0}
         />
-        <RangeFilter<AccountSearchFilterKeys>
-          name="Effective Balance"
-          searchQueryKey="effectiveBalance"
-          parser={accountsSearchFilters.effectiveBalance}
-          suffix=""
-          step={1}
-          decimals={0}
-        />
         {enabledFilters.count > 0 && (
           <Button
             variant="ghost"

src/app/_components/accounts/accounts-table-columns.tsx

@@ -38,9 +38,9 @@ export const accountColumns = {
   },
   recipientAddress: {
     accessorKey: "recipientAddress",
-    title: "Recipient Address",
+    title: "Fee Recipient Address",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Recipient Address" />
+      <DataTableColumnHeader column={column} title="Fee Recipient Address" />
     ),
     cell: ({ row }) =>
       row.original.recipientAddress && (
@@ -61,13 +61,38 @@ export const accountColumns = {
       ),
     enableSorting: false,
   },
+  totalOperatorEthManaged: {
+    accessorKey: "totalOperatorEthManaged",
+    title: "ETH Managed",
+    header: ({ column }) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const nativeCurrency = useNativeCurrency()
+      return (
+        <DataTableColumnHeader
+          column={column}
+          title={`${nativeCurrency.symbol} Managed`}
+          className="flex justify-end text-right"
+        />
+      )
+    },
+    cell: ({ row }) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const nativeCurrency = useNativeCurrency()
+      return (
+        <div className="text-right">
+          {row.original.totalOperatorEthManaged || 0} {nativeCurrency.symbol}
+        </div>
+      )
+    },
+    enableSorting: false,
+  },
   operator: {
     accessorKey: "operator",
-    title: "Operator Count",
+    title: "Operators",
     header: ({ column }) => (
       <DataTableColumnHeader
         column={column}
-        title="Operator Count"
+        title="Operators"
         className="justify-end text-right"
       />
     ),
@@ -77,11 +102,11 @@ export const accountColumns = {
   },
   cluster: {
     accessorKey: "cluster",
-    title: "Cluster Count",
+    title: "Clusters",
     header: ({ column }) => (
       <DataTableColumnHeader
         column={column}
-        title="Cluster Count"
+        title="Clusters"
         className="justify-end text-right"
       />
     ),
@@ -91,11 +116,11 @@ export const accountColumns = {
   },
   validator: {
     accessorKey: "validator",
-    title: "Validator Count",
+    title: "Validators",
     header: ({ column }) => (
       <DataTableColumnHeader
         column={column}
-        title="Validator Count"
+        title="Validators"
         className="flex justify-end text-right"
       />
     ),
@@ -105,14 +130,12 @@ export const accountColumns = {
   },
   effectiveBalance: {
     accessorKey: "effectiveBalance",
-    title: `ETH Staked`,
+    title: `Effective Balance`,
     header: ({ column }) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const nativeCurrency = useNativeCurrency()
       return (
         <DataTableColumnHeader
           column={column}
-          title={`${nativeCurrency.symbol} Staked`}
+          title="Effective Balance"
           className="flex justify-end text-right"
         />
       )
@@ -134,6 +157,7 @@ export const accountColumns = {
 export const accountsTableColumns = [
   accountColumns.ownerAddress,
   accountColumns.recipientAddress,
+  accountColumns.totalOperatorEthManaged,
   accountColumns.effectiveBalance,
   accountColumns.operator,
   accountColumns.cluster,

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

@@ -9,11 +9,11 @@ import { cn } from "@/lib/utils"
 import { useClustersSearchParams } from "@/hooks/search/use-custom-search-params"
 import { Button } from "@/components/ui/button"
 import { textVariants } from "@/components/ui/text"
-import { EffectiveBalanceFilter } from "@/app/_components/clusters/filters/effective-balance-filter"
 import { IsLiquidatedFilter } from "@/app/_components/clusters/filters/is-liquidated-filter"
 import { OperatorsFilter } from "@/app/_components/clusters/filters/operators-filter"
 import { StatusFilter } from "@/app/_components/clusters/filters/status-filter"
 import { HexFilter } from "@/app/_components/shared/filters/address-filter"
+import { EffectiveBalanceFilter } from "@/app/_components/shared/filters/effective-balance-filter"
 
 export type ClusterTableFiltersProps = {
   hideClusterIdFilter?: boolean
@@ -63,7 +63,7 @@ export const ClusterTableFilters = ({
           />
         )}
         <OperatorsFilter />
-        <EffectiveBalanceFilter />
+        <EffectiveBalanceFilter searchParamsHook={useClustersSearchParams} />
         <StatusFilter />
         <IsLiquidatedFilter />
         {enabledFilters.count > 0 && (

src/app/_components/clusters/clusters-table-columns.tsx

@@ -156,7 +156,7 @@ export const clustersTableColumns: ColumnDefWithTitle<Cluster>[] = [
       <DataTableColumnHeader
         className="justify-end text-right"
         column={column}
-        title="Active"
+        title="Status"
       />
     ),
     cell: ({ row }) => (

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

@@ -2,16 +2,24 @@
 
 import { isEqual } from "lodash-es"
 
-import { clustersSearchFilters } from "@/lib/search-parsers/clusters-search-parsers"
-import { useClustersSearchParams } from "@/hooks/search/use-custom-search-params"
+import { effectiveBalanceParser } from "@/lib/search-parsers/shared/parsers"
+import { useCustomSearchParams } from "@/hooks/search/use-custom-search-params"
 import { Text } from "@/components/ui/text"
 import { FilterButton } from "@/components/filter/filter-button"
 import { Range } from "@/components/filter/range-filter"
 
-export function EffectiveBalanceFilter() {
-  const { filters, setFilters } = useClustersSearchParams()
+export function EffectiveBalanceFilter({
+  searchParamsHook,
+}: {
+  searchParamsHook: () => ReturnType<
+    typeof useCustomSearchParams<{
+      effectiveBalance: typeof effectiveBalanceParser
+    }>
+  >
+}) {
+  const { filters, setFilters } = searchParamsHook()
 
-  const defaultRange = clustersSearchFilters.effectiveBalance.defaultValue
+  const defaultRange = effectiveBalanceParser.defaultValue
 
   const isActive =
     !isEqual(filters.effectiveBalance, defaultRange) &&