Fix: change screen (#203)

src/App.tsx

@@ -10,6 +10,7 @@ import 'react-toastify/dist/ReactToastify.min.css'
 import 'rodal/lib/rodal.css'
 import SSELogProvider from './components/SSELogProvider/SSELogProvider'
 import SyncPollingWrapper from './wrappers/SyncPollingWrapper'
+import ChangeScreen from './views/ChangeScreen'
 
 function App() {
   const view = useRecoilValue(appView)
@@ -26,6 +27,8 @@ function App() {
         )
       case AppView.ONBOARD:
         return <Onboard />
+      case AppView.CHANGE_SCREEN:
+        return <ChangeScreen />
       default:
         return <InitScreen />
     }

src/components/DeviceSelect/DeviceSelect.tsx

@@ -43,7 +43,7 @@ const DeviceSelect: FC<DeviceSelectProps> = ({ devices, value, uiMode, type }) =
   const select = (selection: string) => {
     if (devices?.[selection]) {
       setDeviceKey(selection)
-      setAppView(AppView.INIT)
+      setAppView(AppView.CHANGE_SCREEN)
     }
   }
   const toggleDropdown = () => toggle((prevState) => !prevState)

src/components/StepChart/StepChart.tsx

@@ -139,6 +139,12 @@ const StepChart: FC<StepChartProps> = ({ data, stepSize, onClick, className }) =
     }
   }, [chartEl, data, hasAnimated, mode])
 
+  useEffect(() => {
+    return () => {
+      Chart.getChart('stepChart')?.destroy()
+    }
+  }, [])
+
   return (
     <div onClick={onClick} className={addClassString('w-full h-full relative', [className])}>
       <canvas id='stepChart' ref={chartEl} />

src/constants/enums.ts

@@ -14,6 +14,7 @@ export enum ContentView {
 export enum AppView {
   ONBOARD = 'ONBOARD',
   DASHBOARD = 'DASHBOARD',
+  CHANGE_SCREEN = 'CHANGE_SCREEN',
   INIT = 'INIT',
 }
 

src/hooks/useAtomCleanup.ts

@@ -17,6 +17,7 @@ import {
   validatorStateInfo,
   validatorSyncInfo,
   validatorVersionData,
+  validatorAliases,
 } from '../recoil/atoms'
 import { ContentView } from '../constants/enums'
 
@@ -38,6 +39,7 @@ const useAtomCleanup = () => {
   const isValidatorNetworkError = useSetRecoilState(validatorNetworkError)
   const setSessionAuthErrorCount = useSetRecoilState(sessionAuthErrorCount)
   const setAlert = useSetRecoilState(alertLogs)
+  const setAliases = useSetRecoilState(validatorAliases)
 
   const resetDashboardAtoms = () => {
     setDashView(ContentView.MAIN)
@@ -55,8 +57,9 @@ const useAtomCleanup = () => {
     setDeviceSettings(undefined as any)
     setValSyncInfo(undefined as any)
     setBeaconSyncInfo(undefined as any)
-    setValStateInfo(undefined as any)
+    setValStateInfo(undefined)
     setAlert([])
+    setAliases(undefined)
   }
 
   return {

src/hooks/usePollApi.ts

@@ -45,6 +45,11 @@ const usePollApi = ({
     enabled: isReady && retries.current < maxErrors,
     refetchInterval: time,
     retry: 3,
+    cacheTime: 0,
+    initialData: undefined,
+    keepPreviousData: false,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
     onError: () => {
       retries.current += 1
       if (retries.current >= maxErrors) {

src/hooks/useValidatorEpochBalance.ts

@@ -17,7 +17,7 @@ const useValidatorEpochBalance = () => {
     return validatorCacheData && activeValidators.length && Object.values(validatorCacheData).length
       ? activeValidators
           .map(({ index, name }) => {
-            const data = validatorCacheData[index as any]
+            const data = validatorCacheData[index as any] || []
             return {
               index,
               name,
@@ -34,7 +34,7 @@ const useValidatorEpochBalance = () => {
 
   const formattedTimestamps = useMemo(() => {
     const data = validatorCacheData && Object.values(validatorCacheData)[0]
-    return data
+    return data && genesisBlock
       ? data.map(({ epoch }) => {
           const slot = epoch * slotsInEpoc
 

src/recoil/atoms.ts

@@ -40,7 +40,7 @@ export const beaconSyncInfo = atom<BeaconSyncResult>({
   default: undefined,
 })
 
-export const validatorStateInfo = atom<BeaconValidatorResult[]>({
+export const validatorStateInfo = atom<BeaconValidatorResult[] | undefined>({
   key: 'validatorStateInfo',
   default: undefined,
 })
@@ -130,7 +130,7 @@ export const processingBlsValidators = atom<(string | number)[]>({
   default: undefined,
 })
 
-export const validatorAliases = atom<ValAliases>({
+export const validatorAliases = atom<ValAliases | undefined>({
   key: 'validatorAliases',
   default: undefined,
 })

src/views/ChangeScreen.tsx

@@ -0,0 +1,28 @@
+import Spinner from '../components/Spinner/Spinner'
+import { useSetRecoilState, useRecoilValue } from 'recoil'
+import { appView, uiMode } from '../recoil/atoms'
+import { AppView, UiMode } from '../constants/enums'
+import { useLayoutEffect } from 'react'
+import addClassString from '../utilities/addClassString'
+
+const ChangeScreen = () => {
+  const mode = useRecoilValue(uiMode)
+  const className = addClassString('w-screen h-screen flex items-center justify-center', [
+    mode === UiMode.DARK && 'dark',
+  ])
+  const setAppView = useSetRecoilState(appView)
+
+  useLayoutEffect(() => {
+    setAppView(AppView.INIT)
+  }, [])
+
+  return (
+    <div className={className}>
+      <div className='bg-white dark:bg-darkPrimary w-screen h-screen flex items-center justify-center'>
+        <Spinner />
+      </div>
+    </div>
+  )
+}
+
+export default ChangeScreen