V2

src/api/account.ts

@@ -2,31 +2,25 @@
 
 import { endpoint } from "@/api"
 import { api } from "@/api/api-client"
-import { omitBy } from "lodash-es"
 import { type Address } from "viem"
 
+import {
+  accountSearchParamsSerializer,
+  type AccountsSearchSchema,
+} from "@/lib/search-parsers/accounts-search-parsers"
+import { stringifyBigints } from "@/lib/utils/bigint"
+import { unstable_cache } from "@/lib/utils/unstable-cache"
 import type {
   AccountStatsResponse,
   PaginatedAccountsResponse,
 } from "@/types/api/account"
-import type { AccountsSearchSchema } from "@/lib/search-parsers/accounts-search-parsers"
-import { stringifyBigints } from "@/lib/utils/bigint"
-import { unstable_cache } from "@/lib/utils/unstable-cache"
 
 export const getAccounts = async (
   params: Partial<AccountsSearchSchema> & Pick<AccountsSearchSchema, "network">
 ): Promise<PaginatedAccountsResponse> =>
   await unstable_cache(
     async () => {
-      const filtered = omitBy(
-        params,
-        (value) => value === undefined || value === null
-      )
-
-      const searchParams = new URLSearchParams(
-        filtered as unknown as Record<string, string>
-      )
-
+      const searchParams = accountSearchParamsSerializer(params)
       return api.get<PaginatedAccountsResponse>(
         endpoint(params.network, "accounts", `?${searchParams}`)
       )

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

@@ -61,6 +61,39 @@ export const accountsTableColumns: ColumnDef<Account>[] = [
       ),
     enableSorting: false,
   },
+  {
+    accessorKey: "operator",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title="Operators"
+        className="w-[119px]"
+      />
+    ),
+    cell: ({ row }) => row.original.operators,
+  },
+  {
+    accessorKey: "cluster",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title="Clusters"
+        className="w-[119px]"
+      />
+    ),
+    cell: ({ row }) => row.original.clusters,
+  },
+  {
+    accessorKey: "validator",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title="Validators"
+        className="w-[119px]"
+      />
+    ),
+    cell: ({ row }) => row.original.validators,
+  },
   {
     accessorKey: "effectiveBalance",
     header: ({ column }) => {

src/app/_components/duties/cells/operator-consensus-breakdown.tsx

@@ -0,0 +1,57 @@
+import { useMemo, type ComponentPropsWithRef, type FC } from "react"
+import { Badge } from "lucide-react"
+
+import { Status, type DutyOperator } from "@/types/api/duties"
+import { cn } from "@/lib/utils"
+import { sortOperators } from "@/lib/utils/operator"
+import { Text } from "@/components/ui/text"
+
+export type OperatorConsensusBreakdownProps = {
+  operators: DutyOperator[]
+  missingOperators: DutyOperator[]
+}
+
+type OperatorConsensusBreakdownFC = FC<
+  Omit<ComponentPropsWithRef<"div">, keyof OperatorConsensusBreakdownProps> &
+    OperatorConsensusBreakdownProps
+>
+
+export const OperatorConsensusBreakdown: OperatorConsensusBreakdownFC = ({
+  className,
+  operators,
+  missingOperators,
+  ...props
+}) => {
+  const displayOperators = useMemo(() => {
+    return sortOperators([
+      ...operators.map((operator) => ({ ...operator, status: Status.Success })),
+      ...missingOperators.map((operator) => ({
+        ...operator,
+        status: Status.Failed,
+      })),
+    ])
+  }, [operators, missingOperators])
+
+  return (
+    <div className={cn("flex items-center gap-[2px]", className)} {...props}>
+      {displayOperators.map((operator) => (
+        <div
+          key={operator.id}
+          className={cn(
+            "flex h-6 w-fit min-w-7 items-center justify-center rounded border px-1 font-mono text-[10px]",
+            {
+              "border-primary-200 bg-primary-50 text-primary-600":
+                operator.status === Status.Success,
+              "border-error-200 bg-error-50 text-error-500":
+                operator.status === Status.Failed,
+            }
+          )}
+        >
+          {operator.id}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+OperatorConsensusBreakdown.displayName = "OperatorConsensusBreakdown"

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

@@ -3,25 +3,12 @@
 import { type ColumnDef } from "@tanstack/react-table"
 
 import { Status, type DutyElement } from "@/types/api/duties"
+import { Badge } from "@/components/ui/badge"
 import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
 
-export const dutiesTableColumns: ColumnDef<DutyElement>[] = [
-  //   {
-  //     accessorKey: "publicKey",
-  //     header: ({ column }) => (
-  //       <DataTableColumnHeader column={column} title="Validator Public Key" />
-  //     ),
-  //     cell: ({ row }) => (
-  //       <div className="flex items-center gap-1">
-  //         <Text className="font-mono text-primary-500">
-  //           <div>{shortenAddress(remove0x(row.original.publicKey))}</div>
-  //         </Text>
-  //         <CopyBtn className="text-gray-500" text={row.original.publicKey} />
-  //       </div>
-  //     ),
-  //     enableSorting: false,
-  //   },
+import { OperatorConsensusBreakdown } from "./cells/operator-consensus-breakdown"
 
+export const dutiesTableColumns: ColumnDef<DutyElement>[] = [
   {
     accessorKey: "epoch",
     header: ({ column }) => (
@@ -46,20 +33,43 @@ export const dutiesTableColumns: ColumnDef<DutyElement>[] = [
     cell: ({ row }) => <div>{row.original.duty}</div>,
     enableSorting: false,
   },
+  {
+    accessorKey: "operators",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        className="justify-end text-end"
+        title="Operator Consensus Breakdown"
+      />
+    ),
+    cell: ({ row }) => (
+      <div className="flex justify-end">
+        <OperatorConsensusBreakdown
+          operators={row.original.operators}
+          missingOperators={row.original.missing_operators}
+        />
+      </div>
+    ),
+    enableSorting: false,
+  },
   {
     accessorKey: "status",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Status" />
+      <DataTableColumnHeader
+        column={column}
+        title="Status"
+        className="justify-end text-end"
+      />
     ),
     cell: ({ row }) => (
-      <div
-        className={
-          row.original.status === Status.Success
-            ? "text-green-500"
-            : "text-red-500"
-        }
-      >
-        {row.original.status}
+      <div className="flex justify-end">
+        <Badge
+          className="capitalize"
+          size="sm"
+          variant={row.original.status === Status.Success ? "success" : "error"}
+        >
+          {row.original.status}
+        </Badge>
       </div>
     ),
     enableSorting: false,

src/app/_components/operators/filters/fee-filter.tsx

@@ -2,16 +2,17 @@
 
 import { isEqual } from "lodash-es"
 
+import { operatorSearchFilters } from "@/lib/search-parsers/operator-search-parsers"
 import { useOperatorsSearchParams } from "@/hooks/search/use-operators-search-params"
 import { Text } from "@/components/ui/text"
 import { FilterButton } from "@/components/filter/filter-button"
 import { RangeFilter } from "@/components/filter/range-filter"
 
-const defaultRange = [0, 100] as [number, number]
-
 export function FeeFilter() {
   const { filters, setFilters } = useOperatorsSearchParams()
 
+  const defaultRange = operatorSearchFilters.fee.defaultValue
+
   const isActive = !isEqual(filters.fee, defaultRange) && Boolean(filters.fee)
 
   const apply = (range: [number, number]) => {
@@ -44,6 +45,8 @@ export function FeeFilter() {
         defaultRange={defaultRange}
         apply={apply}
         remove={remove}
+        step={0.1}
+        decimals={1}
         inputs={{
           start: {
             rightSlot: (

src/app/_components/operators/filters/performance-24h-filter.tsx

@@ -43,6 +43,8 @@ export function Performance24hFilter() {
         defaultRange={defaultRange}
         apply={apply}
         remove={remove}
+        step={0.1}
+        decimals={2}
         inputs={{
           start: {
             rightSlot: (

src/app/_components/operators/filters/performance-30d-filter.tsx

@@ -43,6 +43,8 @@ export function Performance30dFilter() {
         defaultRange={defaultRange}
         apply={apply}
         remove={remove}
+        step={0.1}
+        decimals={2}
         inputs={{
           start: {
             rightSlot: (

src/app/_components/operators/filters/validators-filter.tsx

@@ -39,9 +39,10 @@ export function ValidatorsFilter() {
       <RangeFilter
         name="Validators"
         searchRange={filters.validatorsCount}
+        decimals={0}
+        step={1}
         apply={apply}
         remove={remove}
-        step={1}
         defaultRange={defaultRange}
       />
     </FilterButton>