Fix: release docker build (#308)

app/Main.tsx

@@ -102,7 +102,6 @@ const Main = () => {
         <VersionModal currentVersion={vcVersion} isVisible={isReady && isVersionError} />
       )}
       <AuthPrompt
-        isNamePrompt
         mode={UiMode.LIGHT}
         isLoading={isLoading}
         isVisible={isReady && !isAuthenticated}

app/Providers.tsx

@@ -15,10 +15,12 @@ export interface ProviderProps {
   children: ReactElement | ReactElement[]
 }
 
+export const wagmiConfig = createWagmiConfig()
+
 const Providers: FC<ProviderProps> = ({ children }) => {
   return (
     <RecoilRoot>
-      <WagmiProvider reconnectOnMount config={createWagmiConfig()}>
+      <WagmiProvider reconnectOnMount config={wagmiConfig}>
         <QueryClientProvider client={queryClient}>
           {children}
           <ToastContainer />

app/Wrapper.tsx

@@ -1,15 +1,17 @@
 'use client'
 
-import React from 'react'
+import React, { Suspense } from 'react'
 import Main from './Main'
 import Providers from './Providers'
 import '../src/i18n'
 
 const Wrapper = () => {
   return (
-    <Providers>
-      <Main />
-    </Providers>
+    <Suspense>
+      <Providers>
+        <Main />
+      </Providers>
+    </Suspense>
   )
 }
 

app/api/beacon.ts

@@ -29,3 +29,6 @@ export const submitSignedExit = async (data: any, token: string) =>
 
 export const fetchValidatorStatus = async (token: string, pubKey: string) =>
   await fetchFromApi(`${backendUrl}/beacon/validator-status/${pubKey}`, token)
+
+export const fetchForkVersion = async (token: string) =>
+  await fetchFromApi(`${backendUrl}/beacon/fork-version`, token)

app/api/fork-version/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server'
+import getReqAuthToken from '../../../utilities/getReqAuthToken'
+import { fetchForkVersion } from '../beacon'
+
+export async function GET(req: Request) {
+  try {
+    const token = getReqAuthToken(req)
+    const data = await fetchForkVersion(token)
+    return NextResponse.json(data)
+  } catch (e) {
+    console.error(e)
+    return NextResponse.json({ error: 'Failed to fetch fork version data' }, { status: 500 })
+  }
+}

app/api/log-metrics/route.ts

@@ -1,11 +1,15 @@
 import { NextResponse } from 'next/server'
+import { LogType } from '../../../src/types'
 import getReqAuthToken from '../../../utilities/getReqAuthToken'
 import { fetchMetrics } from '../logs'
 
 export async function GET(req: Request) {
   try {
+    const { searchParams } = new URL(req.url)
+    const type = searchParams.get('type') || undefined
+
     const token = getReqAuthToken(req)
-    const data = await fetchMetrics(token)
+    const data = await fetchMetrics(token, type as LogType)
     return NextResponse.json(data)
   } catch (error) {
     return NextResponse.json({ error: 'Failed to fetch logs metrics' }, { status: 500 })

app/api/logs.ts

@@ -1,12 +1,19 @@
+import { LogType } from '../../src/types'
 import fetchFromApi from '../../utilities/fetchFromApi'
 
 const backendUrl = process.env.BACKEND_URL
 export const fetchLogMetrics = async (token: string) =>
   fetchFromApi(`${backendUrl}/logs/metrics`, token)
 export const dismissLogAlert = async (token: string, index: string) =>
   fetchFromApi(`${backendUrl}/logs/dismiss/${index}`, token)
-export const fetchMetrics = async (token: string) =>
-  fetchFromApi(`${backendUrl}/logs/log-metrics`, token)
+export const fetchMetrics = async (token: string, type?: LogType) => {
+  const params = new URLSearchParams()
+
+  if (type) {
+    params.append('type', type)
+  }
+  return await fetchFromApi(`${backendUrl}/logs/log-metrics?${params.toString()}`, token)
+}
 
 export interface fetchPriorityProps {
   token: string

app/dashboard/logs/Main.tsx

@@ -1,11 +1,11 @@
-import { FC, useEffect, useMemo, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import DashboardWrapper from '../../../src/components/DashboardWrapper/DashboardWrapper'
 import LogControls from '../../../src/components/LogControls/LogControls'
 import LogDisplay from '../../../src/components/LogDisplay/LogDisplay'
 import { OptionType } from '../../../src/components/SelectDropDown/SelectDropDown'
 import useNetworkMonitor from '../../../src/hooks/useNetworkMonitor'
 import useSWRPolling from '../../../src/hooks/useSWRPolling'
-import { ActivityResponse, LogMetric, LogType } from '../../../src/types'
+import { ActivityResponse, LogMetric, LogType, Metric } from '../../../src/types'
 import { BeaconNodeSpecResults, SyncData } from '../../../src/types/beacon'
 import { Diagnostics } from '../../../src/types/diagnostic'
 
@@ -14,22 +14,25 @@ export interface MainProps {
   beaconSpec: BeaconNodeSpecResults
   initSyncData: SyncData
   initLogMetrics: LogMetric
+  initMetrics: Metric
   initActivityData: ActivityResponse
+  defaultLogType: LogType
 }
 
 const Main: FC<MainProps> = ({
   initSyncData,
   beaconSpec,
   initNodeHealth,
-  initLogMetrics,
   initActivityData,
+  initMetrics,
+  defaultLogType,
 }) => {
   const { SECONDS_PER_SLOT } = beaconSpec
   const { isValidatorError, isBeaconError } = useNetworkMonitor()
   const networkError = isValidatorError || isBeaconError
   const slotInterval = SECONDS_PER_SLOT * 1000
 
-  const [logType, selectType] = useState(LogType.VALIDATOR)
+  const [logType, selectType] = useState(defaultLogType)
   const [isLoading, setLoading] = useState(true)
 
   useEffect(() => {
@@ -49,20 +52,12 @@ const Main: FC<MainProps> = ({
     networkError,
   })
 
-  const { data: logMetrics } = useSWRPolling<LogMetric>('/api/priority-logs', {
+  const { data: logMetrics } = useSWRPolling<Metric>(`/api/log-metrics?type=${logType}`, {
     refreshInterval: slotInterval / 2,
-    fallbackData: initLogMetrics,
+    fallbackData: initMetrics,
     networkError,
   })
 
-  const filteredLogs = useMemo(() => {
-    return {
-      warningLogs: logMetrics.warningLogs.filter(({ type }) => type === logType),
-      errorLogs: logMetrics.errorLogs.filter(({ type }) => type === logType),
-      criticalLogs: logMetrics.criticalLogs.filter(({ type }) => type === logType),
-    }
-  }, [logMetrics, logType])
-
   const toggleLogType = (selection: OptionType) => {
     if (selection === logType) return
 
@@ -87,7 +82,7 @@ const Main: FC<MainProps> = ({
     >
       <div className='w-full h-full pt-8 p-2 md:p-6 flex flex-col'>
         <LogControls logType={logType} onSetLoading={setLoading} onTypeSelect={toggleLogType} />
-        <LogDisplay priorityLogs={filteredLogs} isLoading={isLoading} type={logType} />
+        <LogDisplay metrics={logMetrics} isLoading={isLoading} type={logType} />
       </div>
     </DashboardWrapper>
   )

app/dashboard/logs/page.tsx

@@ -1,23 +1,28 @@
 import '../../../src/global.css'
 import { redirect } from 'next/navigation'
+import { LogType } from '../../../src/types'
 import getSessionCookie from '../../../utilities/getSessionCookie'
 import { fetchActivities } from '../../api/activities'
 import { fetchBeaconSpec, fetchNodeHealth, fetchSyncData } from '../../api/beacon'
-import { fetchLogMetrics } from '../../api/logs'
+import { fetchLogMetrics, fetchMetrics } from '../../api/logs'
 import Wrapper from './Wrapper'
 
 export default async function Page() {
   try {
     const token = getSessionCookie()
+    const defaultLogType = LogType.VALIDATOR
 
     const logMetrics = await fetchLogMetrics(token)
     const beaconSpec = await fetchBeaconSpec(token)
     const syncData = await fetchSyncData(token)
     const nodeHealth = await fetchNodeHealth(token)
     const activities = await fetchActivities({ token })
+    const metrics = await fetchMetrics(token, defaultLogType)
 
     return (
       <Wrapper
+        initMetrics={metrics}
+        defaultLogType={defaultLogType}
         initActivityData={activities}
         initLogMetrics={logMetrics}
         initSyncData={syncData}

app/dashboard/validators/Main.tsx

@@ -21,11 +21,17 @@ import useSWRPolling from '../../../src/hooks/useSWRPolling'
 import {
   activeValidatorId,
   exchangeRates,
+  forkVersion,
   isEditValidator,
   isValidatorDetail,
 } from '../../../src/recoil/atoms'
 import { ActivityResponse, ValidatorManagementView } from '../../../src/types'
-import { BeaconNodeSpecResults, SyncData, ValidatorMetricResult } from '../../../src/types/beacon'
+import {
+  BeaconNodeSpecResults,
+  ForkVersionData,
+  SyncData,
+  ValidatorMetricResult,
+} from '../../../src/types/beacon'
 import { Diagnostics } from '../../../src/types/diagnostic'
 import { ValidatorCache, ValidatorCountResult, ValidatorInfo } from '../../../src/types/validator'
 
@@ -38,6 +44,7 @@ export interface MainProps {
   initValMetrics: ValidatorMetricResult
   beaconSpec: BeaconNodeSpecResults
   initActivityData: ActivityResponse
+  initForkVersionData: ForkVersionData
 }
 
 const Main: FC<MainProps> = (props) => {
@@ -51,6 +58,7 @@ const Main: FC<MainProps> = (props) => {
     initValCaches,
     initValMetrics,
     initActivityData,
+    initForkVersionData,
   } = props
 
   const [scrollPercentage, setPercentage] = useState(0)
@@ -74,6 +82,7 @@ const Main: FC<MainProps> = (props) => {
   const [activeValId, setValidatorId] = useRecoilState(activeValidatorId)
   const [isEditVal, setIsEditValidator] = useRecoilState(isEditValidator)
   const setValDetail = useSetRecoilState(isValidatorDetail)
+  const setForkVersion = useSetRecoilState(forkVersion)
   const [isValDetail] = useRecoilState(isValidatorDetail)
   const [isRendered, setRender] = useState(false)
 
@@ -123,6 +132,16 @@ const Main: FC<MainProps> = (props) => {
     { refreshInterval: epochInterval / 2, fallbackData: initValMetrics, networkError },
   )
 
+  const { data: forkVersionData } = useSWRPolling<ForkVersionData>('/api/fork-version', {
+    refreshInterval: epochInterval / 2,
+    fallbackData: initForkVersionData,
+    networkError,
+  })
+
+  useEffect(() => {
+    setForkVersion(forkVersionData)
+  }, [forkVersionData])
+
   const filteredValidators = useMemo(() => {
     return validatorStates.filter((validator) => {
       const query = search.toLowerCase()
@@ -213,7 +232,6 @@ const Main: FC<MainProps> = (props) => {
           <MainView
             validators={filteredValidators}
             search={search}
-            chainId={Number(DEPOSIT_CHAIN_ID)}
             onSetSearch={setSearch}
             onChangeView={changeView}
             scrollPercentage={scrollPercentage}
@@ -232,7 +250,7 @@ const Main: FC<MainProps> = (props) => {
         isBeaconError={isBeaconError}
         isValidatorError={isValidatorError}
         nodeHealth={nodeHealth}
-        className='w-full flex flex-1 flex-col p-4 max-w-[96vw]'
+        className='w-full flex flex-1 flex-col p-4 max-w-[100vw] md:max-w-[93vw] lg:max-w-[95vw]'
       >
         <>
           <div className='w-full mb-6 flex flex-col lg:items-center lg:flex-row space-y-8 lg:space-y-0 justify-between'>

app/dashboard/validators/Wrapper.tsx

@@ -1,15 +1,17 @@
 'use client'
 
-import React, { FC } from 'react'
+import React, { FC, Suspense } from 'react'
 import Providers from '../../Providers'
 import Main, { MainProps } from './Main'
 import '../../../src/i18n'
 
 const Wrapper: FC<MainProps> = (props) => {
   return (
-    <Providers>
-      <Main {...props} />
-    </Providers>
+    <Suspense>
+      <Providers>
+        <Main {...props} />
+      </Providers>
+    </Suspense>
   )
 }
 

app/dashboard/validators/page.tsx

@@ -4,6 +4,7 @@ import getSessionCookie from '../../../utilities/getSessionCookie'
 import { fetchActivities } from '../../api/activities'
 import {
   fetchBeaconSpec,
+  fetchForkVersion,
   fetchNodeHealth,
   fetchSyncData,
   fetchValidatorCountData,
@@ -23,9 +24,11 @@ export default async function Page() {
     const caches = await fetchValCaches(token)
     const metrics = await fetchValMetrics(token)
     const activities = await fetchActivities({ token })
+    const forkVersion = await fetchForkVersion(token)
 
     return (
       <Wrapper
+        initForkVersionData={forkVersion}
         initActivityData={activities}
         initValMetrics={metrics}
         initNodeHealth={bnHealth}

backend/src/beacon/beacon.controller.ts

@@ -64,4 +64,9 @@ export class BeaconController {
   async fetchValidatorStatus(@Param('pubKey') pubKey: string) {
     return this.beaconService.fetchValidatorStatus(pubKey);
   }
+
+  @Get('fork-version')
+  async fetchForkVersion() {
+    return this.beaconService.fetchForkVersion();
+  }
 }

backend/src/beacon/beacon.service.ts

@@ -316,4 +316,24 @@ export class BeaconService {
 
     return { data: null };
   }
+
+  async fetchForkVersion() {
+    try {
+      const slotInterval = await this.utilsService.getSlotInterval();
+      return this.utilsService.fetchFromCache(
+        'fork-version',
+        slotInterval * 16,
+        async () => {
+          const { data } = await this.utilsService.sendHttpRequest({
+            url: `${this.beaconUrl}/eth/v1/beacon/states/head/fork`,
+          });
+
+          return data;
+        },
+      );
+    } catch (e) {
+      console.log(e);
+      throwServerError('Unable to fetch fork version data');
+    }
+  }
 }

backend/src/logs/logs.controller.ts

@@ -46,8 +46,8 @@ export class LogsController {
   }
 
   @Get('log-metrics')
-  getMetrics() {
-    return this.logsService.readMetrics();
+  getMetrics(@Query('type') type?: LogType) {
+    return this.logsService.readMetrics(type);
   }
 
   @Get('priority-log-stream')

backend/src/logs/logs.service.ts

@@ -110,9 +110,9 @@ export class LogsService {
       throw new Error('Invalid log type');
     }
 
-    let warnOptions = { where: { level: LogLevels.WARN } } as any;
-    let errorOptions = { where: { level: LogLevels.ERRO } } as any;
-    let critOptions = { where: { level: LogLevels.CRIT } } as any;
+    const warnOptions = { where: { level: LogLevels.WARN } } as any;
+    const errorOptions = { where: { level: LogLevels.ERRO } } as any;
+    const critOptions = { where: { level: LogLevels.CRIT } } as any;
 
     if (type) {
       warnOptions.where.type = { [Op.eq]: type };

backend/src/tasks/tasks.service.ts

@@ -60,10 +60,6 @@ export class TasksService implements OnApplicationBootstrap {
         throw new CustomError('No api token found...', 'NO_API_TOKEN');
       }
 
-      await this.logRepository.destroy({
-        truncate: true,
-      });
-
       await this.syncBeaconSpecs();
       await this.initValidatorDataScheduler();
       await this.initMetricDataScheduler();