fix: type fixes for prod build

app/dashboard/Main.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { node } from 'prop-types'
 import React, { FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSetRecoilState } from 'recoil'
@@ -22,14 +21,13 @@ import { exchangeRates } from '../../src/recoil/atoms'
 import { StatusColor } from '../../src/types'
 import { BeaconNodeSpecResults, SyncData } from '../../src/types/beacon'
 import { Diagnostics, PeerDataResults } from '../../src/types/diagnostic'
-import { UsernameStorage } from '../../src/types/storage'
 import { ValidatorCache, ValidatorInclusionData, ValidatorInfo } from '../../src/types/validator'
 
 export interface MainProps {
   initNodeHealth: Diagnostics
   initSyncData: SyncData
   bnVersion: string
-  lighthouseVersion?: string
+  lighthouseVersion: string
   beaconSpec: BeaconNodeSpecResults
   initValStates: ValidatorInfo[]
   genesisTime: number
@@ -57,7 +55,7 @@ const Main: FC<MainProps> = (props) => {
   const { SECONDS_PER_SLOT } = beaconSpec
   const { version } = pckJson
   const { updateAlert, storeAlert, removeAlert } = useDiagnosticAlerts()
-  const [username] = useLocalStorage<UsernameStorage>('username', 'Keeper')
+  const [username] = useLocalStorage<string>('username', 'Keeper')
   const setExchangeRate = useSetRecoilState(exchangeRates)
 
   const { isValidatorError, isBeaconError } = useNetworkMonitor()
@@ -213,7 +211,7 @@ const Main: FC<MainProps> = (props) => {
               nodeHealth={nodeHealth}
               valInclusionData={valInclusion}
             />
-            <ValidatorTable validators={validatorStates} className='mt-8 lg:mt-2' />
+            <ValidatorTable validators={validatorStates} validatorCacheData={validatorCache} className='mt-8 lg:mt-2' />
             <DiagnosticTable
               bnSpec={beaconSpec}
               genesisTime={genesisTime}

app/dashboard/settings/Main.tsx

@@ -2,7 +2,6 @@
 
 import React, { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useRecoilState, useRecoilValue } from 'recoil'
 import LighthouseSvg from '../../../src/assets/images/lighthouse-black.svg'
 import AppDescription from '../../../src/components/AppDescription/AppDescription'
 import AppVersion from '../../../src/components/AppVersion/AppVersion'
@@ -35,7 +34,7 @@ export interface MainProps {
   initSyncData: SyncData
   beaconSpec: BeaconNodeSpecResults
   bnVersion: string
-  lighthouseVersion?: string
+  lighthouseVersion: string
 }
 
 const Main: FC<MainProps> = (props) => {

app/dashboard/validators/Main.tsx

@@ -49,7 +49,7 @@ const Main: FC<MainProps> = (props) => {
 
   const { SECONDS_PER_SLOT } = beaconSpec
   const setExchangeRate = useSetRecoilState(exchangeRates)
-  const [timedMetrics, storeMetric] = useState<BeaconValidatorMetricResults[]>()
+  const [timedMetrics, storeMetric] = useState<BeaconValidatorMetricResults[]>([])
   const [search, setSearch] = useState('')
 
   const { isValidatorError, isBeaconError } = useNetworkMonitor()
@@ -119,7 +119,7 @@ const Main: FC<MainProps> = (props) => {
     const MAX_LENGTH = 10
 
     if (validatorMetrics) {
-      storeMetric((prevState) => {
+      storeMetric((prevState: any) => {
         const newTimestamp = moment().unix().toString()
         const updatedState = { ...prevState, [newTimestamp]: validatorMetrics }
         const entries = Object.entries(updatedState)
@@ -198,14 +198,15 @@ const Main: FC<MainProps> = (props) => {
           <ValidatorTable
             validatorCacheData={validatorCache}
             validators={filteredValidators}
-            isFilter
             view='full'
           />
-          <ValidatorModal
-            validator={activeValidator}
-            validatorCacheData={validatorCache}
-            validatorMetrics={timedMetrics}
-          />
+          {activeValidator && (
+            <ValidatorModal
+              validator={activeValidator}
+              validatorCacheData={validatorCache}
+              validatorMetrics={timedMetrics}
+            />
+          )}
         </div>
       </>
     </DashboardWrapper>

auth.js

@@ -0,0 +1,33 @@
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+
+const envFilePath = path.join(__dirname, '.env');
+
+function generatePassword(length) {
+  return crypto.randomBytes(length)
+    .toString('base64')
+    .slice(0, length)
+    .replace(/\+/g, '0')
+    .replace(/\//g, '1');
+}
+
+fs.readFile(envFilePath, 'utf8', (err, data) => {
+  if (err) {
+    return console.error('Error reading .env file:', err);
+  }
+
+  const key = 'PASSWORD';
+  const password = generatePassword(12);
+
+  if (!data.includes(key)) {
+    fs.appendFile(envFilePath, `${key}=${password}\n`, (err) => {
+      if (err) {
+        return console.error('Error writing to .env file:', err);
+      }
+      console.log(`${key} added to .env file successfully with generated password.`);
+    });
+  } else {
+    console.log(`${key} already exists in the .env file.`);
+  }
+});

backend/package.json

@@ -11,7 +11,7 @@
     "start": "nest start",
     "start:dev": "nest start --watch",
     "start:debug": "nest start --debug --watch",
-    "start:prod": "node dist/main",
+    "start:prod": "node dist/backend/src/main",
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "test": "jest",
     "test:watch": "jest --watch",

custom.d.ts

@@ -1,8 +1,7 @@
-declare module '*.svg' {
-  import React = require('react')
-  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
-  const src: string
-  export default src
+declare module "*.svg" {
+  import React = require("react");
+  const src: React.FC<React.SVGProps<SVGSVGElement>>;
+  export default src;
 }
 
 declare module '*.png'

src/components/BasicValidatorMetrics/BasicValidatorMetrics.tsx

@@ -1,15 +1,14 @@
-import { FC, useMemo } from 'react'
+import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRecoilValue } from 'recoil'
 import { formatLocalCurrency } from '../../../utilities/formatLocalCurrency'
-import useFilteredValidatorCacheData from '../../hooks/useFilteredValidatorCacheData'
 import { exchangeRates } from '../../recoil/atoms'
-import { ValidatorBalanceInfo, ValidatorCache, ValidatorInfo } from '../../types/validator'
+import { ValidatorBalanceInfo, ValidatorInfo } from '../../types/validator'
 import Typography from '../Typography/Typography'
 import ValidatorIncomeSummary from '../ValidatorIncomeSummary/ValidatorIncomeSummary'
 
 export interface BasicValidatorMetricsProps {
-  validatorEpochData: ValidatorBalanceInfo | undefined
+  validatorEpochData: ValidatorBalanceInfo
   validator: ValidatorInfo
 }
 

src/components/BeaconSyncCard/BeaconSyncCard.tsx

@@ -1,9 +1,8 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import formatBnSyncInfo from '../../../utilities/formatBnSyncInfo'
 import { formatLocalCurrency } from '../../../utilities/formatLocalCurrency'
 import secondsToShortHand from '../../../utilities/secondsToShortHand'
-import { BeaconSyncInfo, BeaconSyncResult } from '../../types/diagnostic'
+import { BeaconSyncInfo } from '../../types/diagnostic'
 import SyncCard from '../SyncCard/SyncCard'
 
 export interface BeaconSyncCardProps {

src/components/CurrencySelect/CurrencySelect.tsx

@@ -1,15 +1,12 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { CURRENCIES } from '../../constants/constants'
-import { Storage } from '../../constants/enums'
-import useLocalStorage from '../../hooks/useLocalStorage'
-import { activeCurrency, exchangeRates } from '../../recoil/atoms'
-import { ActiveCurrencyStorage } from '../../types/storage'
-import SelectDropDown, { OptionType } from '../SelectDropDown/SelectDropDown'
+import { exchangeRates } from '../../recoil/atoms'
+import SelectDropDown, { OptionType } from '../SelectDropDown/SelectDropDown';
 
 export interface CurrencySelectProps {
-  onSelect: (selection: string) => void
+  onSelect: (selection: OptionType) => void
   selection: string
 }
 

src/components/DropDown/DropDownItem.tsx

@@ -1,8 +1,10 @@
 import Link, { LinkProps } from 'next/link'
 import React, { FC, ReactNode } from 'react'
 
-export interface DropDownItemProps extends LinkProps {
+export interface DropDownItemProps {
   children: ReactNode | ReactNode[]
+  href: string
+  target?:  "_self" | "_blank" | "_parent" | "_top" | string | undefined
 }
 
 const DropDownItem: FC<DropDownItemProps> = ({ children, href, target }) => {

src/components/EditValidator/EditValidator.tsx

@@ -5,7 +5,7 @@ import formatDefaultValName from '../../../utilities/formatDefaultValName'
 import EditValidatorForm from '../../forms/EditValidatorForm'
 import useMediaQuery from '../../hooks/useMediaQuery'
 import useUiMode from '../../hooks/useUiMode'
-import { ValidatorBalanceInfo, ValidatorCache, ValidatorInfo } from '../../types/validator'
+import { ValidatorBalanceInfo, ValidatorInfo } from '../../types/validator'
 import BasicValidatorMetrics from '../BasicValidatorMetrics/BasicValidatorMetrics'
 import Button, { ButtonFace } from '../Button/Button'
 import Input from '../Input/Input'
@@ -16,7 +16,7 @@ import ValidatorInfoHeader from '../ValidatorInfoHeader/ValidatorInfoHeader'
 
 export interface EditValidatorProps {
   validator: ValidatorInfo
-  validatorEpochData?: ValidatorBalanceInfo | undefined
+  validatorEpochData: ValidatorBalanceInfo
 }
 
 const EditValidator: FC<EditValidatorProps> = ({ validatorEpochData, validator }) => {

src/components/FootBar/FootBar.stories.tsx

@@ -1,12 +1,13 @@
 import { Story } from '@storybook/react'
+import { mockDiagnostics } from '../../mocks/beaconSpec';
 import FootBar from './FootBar'
 
 const FootBarStory = {
   key: 'FootBar',
   component: FootBar,
 }
 
-const Template: Story = () => <FootBar />
+const Template: Story = () => <FootBar isSyncing nodeHealth={mockDiagnostics} />
 
 export const Base = Template.bind({})
 Base.args = {}

src/components/OveralEffectiveness/OverallEffectiveness.tsx

@@ -9,7 +9,7 @@ import Status from '../Status/Status'
 import Typography from '../Typography/Typography'
 
 export interface OverallEffectivenessProps {
-  validatorMetrics?: BeaconValidatorMetricResults[] | undefined
+  validatorMetrics: BeaconValidatorMetricResults[]
 }
 
 const OverallEffectiveness: FC<OverallEffectivenessProps> = ({ validatorMetrics }) => {

src/components/ValidatorIncomeSummary/ValidatorIncomeSummary.tsx

@@ -7,7 +7,7 @@ import Typography from '../Typography/Typography'
 
 export interface ValidatorIncomeSummaryProps {
   className?: string
-  validatorData: ValidatorBalanceInfo | undefined
+  validatorData: ValidatorBalanceInfo
 }
 
 const ValidatorIncomeSummary: FC<ValidatorIncomeSummaryProps> = ({ className, validatorData }) => {

src/components/ValidatorModal/ValidatorModal.tsx

@@ -34,8 +34,7 @@ const ValidatorModal: FC<ValidatorModalProps> = ({
   const isTablet = useMediaQuery('(max-width: 768px)')
   const isLargeScreen = useMediaQuery('(min-width: 1540px)')
 
-  const validatorEpochData = useMemo<ValidatorBalanceInfo | undefined>(() => {
-    if (!validatorCacheData || !validator) return
+  const validatorEpochData = useMemo<ValidatorBalanceInfo>(() => {
     return formatValidatorEpochData([validator], validatorCacheData)
   }, [validator, validatorCacheData])
 

src/components/ValidatorModal/views/ValidatorDetails.tsx

@@ -25,8 +25,8 @@ import ValidatorStatusProgress from '../../ValidatorStatusProgress/ValidatorStat
 import ValidatorActions from '../ValidatorActions'
 
 export interface ValidatorDetailsProps {
-  validator: ValidatorInfo | undefined
-  validatorMetrics: BeaconValidatorMetricResults[] | undefined
+  validator: ValidatorInfo
+  validatorMetrics: BeaconValidatorMetricResults[]
   validatorCacheData: ValidatorCache
 }
 
@@ -43,8 +43,7 @@ const ValidatorDetails: FC<ValidatorDetailsProps> = ({
     validatorMetrics,
     [index],
   )
-  const validatorEpochData = useMemo<ValidatorBalanceInfo | undefined>(() => {
-    if (!validatorCacheData || !validator) return
+  const validatorEpochData = useMemo<ValidatorBalanceInfo>(() => {
     return formatValidatorEpochData([validator], validatorCacheData)
   }, [validator, validatorCacheData])
 

src/components/ValidatorSummary/ValidatorSummary.tsx

@@ -14,10 +14,10 @@ import Typography from '../Typography/Typography'
 import ValidatorIncomeSummary from '../ValidatorIncomeSummary/ValidatorIncomeSummary'
 
 export interface ValidatorSummaryProps {
-  validators?: ValidatorInfo[] | undefined
+  validators: ValidatorInfo[]
   validatorNetworkData: ValidatorCountResult
-  validatorCacheData?: ValidatorCache
-  validatorMetrics?: BeaconValidatorMetricResults[] | undefined
+  validatorCacheData: ValidatorCache
+  validatorMetrics: BeaconValidatorMetricResults[]
 }
 
 const ValidatorSummary: FC<ValidatorSummaryProps> = ({
@@ -48,9 +48,7 @@ const ValidatorSummary: FC<ValidatorSummaryProps> = ({
   const totalBalance = useMemo(() => {
     return validators?.map((validator) => validator.balance).reduce((a, b) => a + b, 0)
   }, [validators])
-
-  const validatorEpochData = useMemo<ValidatorBalanceInfo | undefined>(() => {
-    if (!validatorCacheData || !validators || validators.length === 0) return
+  const validatorEpochData = useMemo<ValidatorBalanceInfo>(() => {
     return formatValidatorEpochData(validators, validatorCacheData)
   }, [validators, validatorCacheData])
 

src/components/ValidatorTable/ValidatorRow.tsx

@@ -24,7 +24,7 @@ import { TableView } from './ValidatorTable'
 export interface ValidatorRowProps {
   validator: ValidatorInfo
   view?: TableView | undefined
-  validatorCacheData?: ValidatorCache | undefined
+  validatorCacheData: ValidatorCache
 }
 
 const ValidatorRow: FC<ValidatorRowProps> = ({ validator, view, validatorCacheData }) => {
@@ -48,8 +48,7 @@ const ValidatorRow: FC<ValidatorRowProps> = ({ validator, view, validatorCacheDa
   const isValidatorProcessing =
     processingValidators && processingValidators.includes(validator.index.toString())
 
-  const validatorEpochData = useMemo<ValidatorBalanceInfo | undefined>(() => {
-    if (!validatorCacheData) return
+  const validatorEpochData = useMemo<ValidatorBalanceInfo>(() => {
     return formatValidatorEpochData([validator], validatorCacheData)
   }, [validator, validatorCacheData])
 

src/components/ValidatorTable/ValidatorTable.tsx

@@ -15,8 +15,8 @@ export type TableView = 'partial' | 'full'
 export interface ValidatorTableProps {
   view?: TableView
   className?: string
-  validatorCacheData?: ValidatorCache | undefined
-  validators?: ValidatorInfo[] | undefined
+  validatorCacheData: ValidatorCache
+  validators: ValidatorInfo[]
 }
 
 export const TableFallback = () => (

src/hooks/useSWRPolling.ts

@@ -11,7 +11,7 @@ const useSWRPolling = <T = any>(
     networkError?: boolean
   },
   callBack?: (url: string | null) => void,
-): SWRResponse<T, any> => {
+): {data: T} => {
   const { refreshInterval = 12000, fallbackData, errorRetryCount = 2, networkError } = config || {}
   const [errorCount, setErrors] = useState(0)
 
@@ -24,12 +24,14 @@ const useSWRPolling = <T = any>(
     callBack?.(api)
   }
 
-  return useSWR<T>(errorCount <= errorRetryCount && !networkError ? api : null, swrGetFetcher, {
+  const { data } = useSWR<T>(errorCount <= errorRetryCount && !networkError ? api : null, swrGetFetcher, {
     refreshInterval,
     fallbackData,
     errorRetryCount,
     onError: incrementCount,
   })
+
+  return {data: data as T}
 }
 
 export default useSWRPolling