Merge pull request #272 from ssvlabs/feat/operator-performance-graph-2

Feat/operator performance graph with verified commits

Author: Chris-ssvlabs

.github/workflows/lint_build.yml

@@ -56,7 +56,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Run lint
-        run: pnpm lint
+        run: pnpm typegen && pnpm lint
         env:
           SKIP_ENV_VALIDATION: true
 

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -15,6 +15,7 @@
     "start:stage": "dotenv -e .env.production -- next start",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
+    "typegen": "next typegen",
     "typecheck": "tsc --noEmit",
     "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
     "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",

src/api/operator.ts

@@ -3,8 +3,17 @@
 import { endpoint } from "@/api"
 import { api } from "@/api/api-client"
 
-import type { Country, Operator, OperatorsSearchResponse } from "@/types/api"
+import type {
+  Country,
+  Operator,
+  OperatorPerformanceChart,
+  OperatorsSearchResponse,
+} from "@/types/api"
 import { type ChainName } from "@/config/chains"
+import {
+  operatorPerformanceChartParamsSerializer,
+  type OperatorPerformanceChartParams,
+} from "@/lib/search-parsers/operator-performance-chart-parsers"
 import {
   operatorSearchParamsSerializer,
   type OperatorsSearchSchema,
@@ -171,3 +180,30 @@ export const getOperatorPerformanceV2 = async (params: {
     }
   )()
 }
+
+export const getOperatorPerformanceChart = async (
+  params: {
+    network: ChainName
+    operatorId: number
+  } & Partial<OperatorPerformanceChartParams>
+) =>
+  await unstable_cache(
+    async () => {
+      const searchParams = operatorPerformanceChartParamsSerializer({
+        points: params.points,
+        type: params.type,
+      })
+
+      const url = endpoint(
+        params.network,
+        `duties/operator/${params.operatorId}/performance-chart`,
+        searchParams ? `?${searchParams}` : ""
+      )
+      return await api.get<OperatorPerformanceChart>(url)
+    },
+    [JSON.stringify(params)],
+    {
+      revalidate: 30,
+      tags: ["operator-performance-chart"],
+    }
+  )()

src/api/ssv.ts

@@ -1,3 +1,5 @@
+"use server"
+
 import { unstable_cache } from "next/cache"
 import { api } from "@/api/api-client"
 import urlJoin from "url-join"

src/app/[network]/account/[address]/layout.tsx

@@ -1,4 +1,4 @@
-import { isAddress, type Address } from "viem"
+import { isAddress } from "viem"
 
 import { shortenAddress } from "@/lib/utils/strings"
 import { Card } from "@/components/ui/card"
@@ -12,15 +12,10 @@ import { Shell } from "@/components/shell"
 import { TableNavigation } from "./_components/table-navigations"
 import { AccountStats } from "./account-stats"
 
-interface IndexPageProps {
-  children: React.ReactNode
-  params: Promise<{ address: Address }>
-}
-
 export default async function AccountLayout({
   params,
   children,
-}: IndexPageProps) {
+}: LayoutProps<"/[network]/account/[address]">) {
   const { address } = await params
 
   if (!isAddress(address)) {

src/app/[network]/operator/[id]/page.tsx

@@ -15,6 +15,7 @@ import { ErrorCard } from "@/components/ui/error-card"
 import { Outline } from "@/components/ui/outline"
 import { Stat } from "@/components/ui/stat"
 import { Text } from "@/components/ui/text"
+import { PerformanceChart } from "@/components/operators/charts/performance-chart"
 import { OperatorAvatar } from "@/components/operators/operator-avatar"
 import { OperatorMetaData } from "@/components/operators/operator-meta-data"
 import { PerformanceText } from "@/components/operators/performance-text"
@@ -88,7 +89,7 @@ export default async function Page(props: IndexPageProps) {
 
   return (
     <Shell className="gap-2">
-      {(async () => {
+      {await (async () => {
         try {
           const operator = await getOperator({
             network,
@@ -200,6 +201,13 @@ export default async function Page(props: IndexPageProps) {
                   />
                 </div>
               </Card>
+              <div className="flex flex-row gap-4">
+                <PerformanceChart
+                  className="w-full md:w-1/2"
+                  operatorId={+id}
+                  network={network}
+                />
+              </div>
               <Card>
                 <ValidatorsTable dataPromise={validators} hideOperatorsFilter />
               </Card>

src/app/layout.tsx

@@ -63,7 +63,7 @@ export const viewport: Viewport = {
   ],
 }
 
-export default async function RootLayout(props: RootLayoutProps) {
+export default async function RootLayout(props: LayoutProps<"/">) {
   return (
     <html lang="en" suppressHydrationWarning>
       <head />