wip

local-testnet/start_local_testnet.sh

@@ -103,7 +103,7 @@ echo "executing: ./setup.sh >> $LOG_DIR/setup.log"
 ./setup.sh >> $LOG_DIR/setup.log 2>&1
 
 # Update future hardforks time in the EL genesis file based on the CL genesis time
-GENESIS_TIME=$(lcli pretty-ssz state_merge $TESTNET_DIR/genesis.ssz  | jq | grep -Po 'genesis_time": "\K.*\d')
+GENESIS_TIME=$(lcli pretty-ssz state_merge $TESTNET_DIR/genesis.ssz  | jq | ggrep -Po 'genesis_time": "\K.*\d')
 echo $GENESIS_TIME
 CAPELLA_TIME=$((GENESIS_TIME + (CAPELLA_FORK_EPOCH * 32 * SECONDS_PER_SLOT)))
 echo $CAPELLA_TIME

src/components/AlertCard/AlertCard.tsx

@@ -1,22 +1,27 @@
 import StatusBar, { StatusBarProps } from '../StatusBar/StatusBar'
 import Typography from '../Typography/Typography'
 import { FC } from 'react'
+
 export interface AlertCardProps extends StatusBarProps {
   text: string
   subText: string
+  onClick?: () => void
 }
 
-const AlertCard: FC<AlertCardProps> = ({ text, subText, ...props }) => {
+const AlertCard: FC<AlertCardProps> = ({ text, subText, onClick, ...props }) => {
   return (
-    <div className='w-full h-14 border-t-0 md:border-l-0 border-style500 flex justify-between items-center space-x-2 p-2'>
+    <div className='w-full h-14 group border-t-0 md:border-l-0 border-style500 flex justify-between items-center space-x-2 p-2'>
       <StatusBar {...props} />
       <div className='w-full max-w-tiny'>
         <Typography type='text-caption2'>{text}</Typography>
         <Typography type='text-caption2' isUpperCase>
           {subText}
         </Typography>
       </div>
-      <i className='bi-info-circle-fill text-dark200 dark:text-dark300' />
+      <i
+        onClick={onClick}
+        className='bi-trash-fill cursor-pointer opacity-0 group-hover:opacity-100 text-dark200 dark:text-dark300'
+      />
     </div>
   )
 }

src/components/DiagnosticTable/AlertInfo.tsx

@@ -5,7 +5,7 @@ import useDiagnosticAlerts from '../../hooks/useDiagnosticAlerts'
 
 const AlertInfo = () => {
   const { t } = useTranslation()
-  const { natAlert, peerCountAlert } = useDiagnosticAlerts()
+  const { alerts, dismissAlert } = useDiagnosticAlerts()
   return (
     <div className='h-full w-full flex flex-col'>
       <div className='w-full h-12 flex items-center justify-between px-4 md:border-l-0 border-style500'>
@@ -16,22 +16,19 @@ const AlertInfo = () => {
           {t('viewAll')}
         </Typography>
       </div>
-      {natAlert && (
-        <AlertCard
-          status={natAlert.severity}
-          count={3}
-          subText={natAlert.subText}
-          text={natAlert.message}
-        />
-      )}
-      {peerCountAlert && (
-        <AlertCard
-          status={peerCountAlert.severity}
-          count={2}
-          subText={peerCountAlert.subText}
-          text={peerCountAlert.message}
-        />
-      )}
+      {alerts.map((alert) => {
+        const { severity, subText, message, id } = alert
+        return (
+          <AlertCard
+            key={id}
+            status={severity}
+            count={3}
+            onClick={() => dismissAlert(alert)}
+            subText={subText}
+            text={message}
+          />
+        )
+      })}
       <div className='flex-1 md:border-l-0 border-t-0 border-style500 flex items-center justify-center'>
         <i className='bi bi-lightning-fill text-primary text-h3 opacity-20' />
       </div>

src/components/NetworkPeerSpeedometer/NetworkPeerSpeedometer.tsx

@@ -5,11 +5,38 @@ import { uiMode, validatorPeerCount } from '../../recoil/atoms'
 import Typography from '../Typography/Typography'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '../ToolTip/Tooltip'
+import { StatusColor } from '../../types'
+import useDiagnosticAlerts from '../../hooks/useDiagnosticAlerts'
+import { useEffect } from 'react'
+import { ALERT_ID } from '../../constants/constants'
 
 const NetworkPeerSpeedometer = () => {
   const { t } = useTranslation()
   const mode = useRecoilValue(uiMode)
   const peers = useRecoilValue(validatorPeerCount)
+  const { updateAlert } = useDiagnosticAlerts()
+
+  useEffect(() => {
+    if (!peers) return
+
+    if (peers <= 50) {
+      if (peers <= 20) {
+        updateAlert({
+          message: t('alert.peerCountLow', { type: t('alert.type.nodeValidator') }),
+          subText: t('poor'),
+          severity: StatusColor.ERROR,
+          id: ALERT_ID.PEER_COUNT,
+        })
+        return
+      }
+      updateAlert({
+        message: t('alert.peerCountMedium', { type: t('alert.type.nodeValidator') }),
+        subText: t('fair'),
+        severity: StatusColor.WARNING,
+        id: ALERT_ID.PEER_COUNT,
+      })
+    }
+  }, [peers])
 
   return (
     <Tooltip

src/components/TopBar/BeaconMetric.tsx

@@ -2,11 +2,31 @@ import SyncMetric from '../SyncMetric/SyncMetric'
 import { useTranslation } from 'react-i18next'
 import { useRecoilValue } from 'recoil'
 import { selectBeaconSyncInfo } from '../../recoil/selectors/selectBeaconSyncInfo'
+import { useEffect } from 'react'
+import useDiagnosticAlerts from '../../hooks/useDiagnosticAlerts'
+import { StatusColor } from '../../types'
+import { ALERT_ID } from '../../constants/constants'
 
 const BeaconMetric = () => {
   const { t } = useTranslation()
-  const { headSlot, slotDistance, isSyncing, beaconPercentage } =
+  const { headSlot, slotDistance, isSyncing, beaconPercentage, beaconSyncTime } =
     useRecoilValue(selectBeaconSyncInfo)
+  const { storeAlert, removeAlert } = useDiagnosticAlerts()
+
+  useEffect(() => {
+    if (beaconSyncTime <= 0) {
+      removeAlert(ALERT_ID.BEACON_SYNC)
+    }
+
+    if (beaconSyncTime > 0) {
+      storeAlert({
+        id: ALERT_ID.BEACON_SYNC,
+        severity: StatusColor.WARNING,
+        subText: 'FAIR',
+        message: 'Beacon Node is not in sync',
+      })
+    }
+  }, [beaconSyncTime])
 
   return (
     <SyncMetric

src/components/TopBar/ValidatorMetric.tsx

@@ -2,12 +2,30 @@ import SyncMetric from '../SyncMetric/SyncMetric'
 import { useRecoilValue } from 'recoil'
 import { useTranslation } from 'react-i18next'
 import { selectValidatorSyncInfo } from '../../recoil/selectors/selectValidatorSyncInfo'
+import { useEffect } from 'react'
+import { StatusColor } from '../../types'
+import useDiagnosticAlerts from '../../hooks/useDiagnosticAlerts'
+import { ALERT_ID } from '../../constants/constants'
 
 const ValidatorMetric = () => {
   const { t } = useTranslation()
   const syncInfo = useRecoilValue(selectValidatorSyncInfo)
+  const { storeAlert, removeAlert } = useDiagnosticAlerts()
   const { headSlot, cachedHeadSlot, syncPercentage, isReady } = syncInfo
 
+  useEffect(() => {
+    if (isReady) {
+      removeAlert(ALERT_ID.VALIDATOR_SYNC)
+    }
+
+    storeAlert({
+      id: ALERT_ID.VALIDATOR_SYNC,
+      severity: StatusColor.WARNING,
+      subText: 'FAIR',
+      message: 'Ethereum Client is not in sync',
+    })
+  }, [isReady])
+
   return (
     <SyncMetric
       id='ethMain'

src/constants/constants.ts

@@ -190,3 +190,11 @@ export const LogTypeOptions = [
   { title: 'Validator', value: LogType.VALIDATOR },
   { title: 'Beacon', value: LogType.BEACON },
 ]
+
+export const ALERT_ID = {
+  VALIDATOR_SYNC: 'VALIDATOR_SYNC',
+  BEACON_SYNC: 'BEACON_SYNC',
+  NAT: 'NAT',
+  WARNING_LOG: 'WARNING_LOG',
+  PEER_COUNT: 'PEER_COUNT',
+}

src/hooks/__tests__/useDeviceDiagnostics.spec.ts

@@ -6,9 +6,19 @@ import { mockedRecoilValue } from '../../../test.helpers'
 import { mockBeaconSyncResult } from '../../mocks/beaconSyncResults'
 import clearAllMocks = jest.clearAllMocks
 import { StatusColor } from '../../types'
-
 jest.mock('../../utilities/formatGigBytes', () => jest.fn())
 
+jest.mock('../useDiagnosticAlerts', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    alerts: [], // Your desired formatted list of alerts
+    storeAlert: jest.fn(),
+    updateAlert: jest.fn(),
+    dismissAlert: jest.fn(),
+    removeAlert: jest.fn(),
+  })),
+}))
+
 const mockedFormatGigBytes = formatGigBytes as jest.MockedFn<typeof formatGigBytes>
 
 describe('useDeviceDiagnostics', () => {

src/hooks/__tests__/useValidatorCount.spec.ts

@@ -31,12 +31,12 @@ const mockFetchValidatorCount = fetchValidatorCount as jest.MockedFn<typeof fetc
 
 describe('useValidatorCount', () => {
   it('should return default count info', () => {
-    mockedRecoilValue.mockReturnValueOnce('mocked-url')
+    mockedRecoilValue.mockReturnValueOnce({})
     const { result } = renderHook(() => useValidatorCount())
     expect(result.current).toStrictEqual(DEFAULT_VALIDATOR_COUNT)
   })
   it('should call fetchCount when beacon node available', async () => {
-    mockedRecoilValue.mockReturnValueOnce('mocked-url')
+    mockedRecoilValue.mockReturnValueOnce({ beaconUrl: 'mocked-url' })
     mockedRecoilValue.mockReturnValue({
       protocol: Protocol.HTTP,
       address: 'mockAddress',

src/hooks/useDeviceDiagnostics.ts

@@ -1,5 +1,5 @@
 import { useRecoilValue } from 'recoil'
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import getPercentage from '../utilities/getPercentage'
 import formatGigBytes from '../utilities/formatGigBytes'
 import { StatusColor } from '../types'
@@ -8,10 +8,15 @@ import { DiagnosticRate } from '../constants/enums'
 import secondsToShortHand from '../utilities/secondsToShortHand'
 import { beaconHealthResult } from '../recoil/atoms'
 import { selectBeaconSyncInfo } from '../recoil/selectors/selectBeaconSyncInfo'
+import useDiagnosticAlerts from './useDiagnosticAlerts'
+import { useTranslation } from 'react-i18next'
+import { ALERT_ID } from '../constants/constants'
 
 const useDeviceDiagnostics = (): Diagnostics => {
+  const { t } = useTranslation()
   const result = useRecoilValue(beaconHealthResult)
   const { isSyncing } = useRecoilValue(selectBeaconSyncInfo)
+  const { storeAlert, removeAlert } = useDiagnosticAlerts()
 
   const {
     disk_bytes_free = 0,
@@ -25,6 +30,20 @@ const useDeviceDiagnostics = (): Diagnostics => {
     global_cpu_frequency,
   } = result || {}
 
+  useEffect(() => {
+    if (result?.nat_open) {
+      removeAlert(ALERT_ID.NAT)
+      return
+    }
+
+    storeAlert({
+      id: ALERT_ID.NAT,
+      message: t('alert.natClosedStatus', { type: t('alert.type.network') }),
+      subText: t('poor'),
+      severity: StatusColor.ERROR,
+    })
+  }, [result?.nat_open])
+
   const diskUtilization = useMemo(() => {
     if (!disk_bytes_total || !disk_bytes_free) {
       return 0