From 5b1341e2a6fa5c35b004430998a0a6a21e1ea11e Mon Sep 17 00:00:00 2001
From: Ricki Moore <mrricki.m.usmc@gmail.com>
Date: Wed, 16 Aug 2023 14:28:44 +0200
Subject: [PATCH] Fix: change screen (#203)

---
 src/App.tsx                                  |  3 +++
 src/components/DeviceSelect/DeviceSelect.tsx |  2 +-
 src/components/StepChart/StepChart.tsx       |  6 +++++
 src/constants/enums.ts                       |  1 +
 src/hooks/useAtomCleanup.ts                  |  5 +++-
 src/hooks/usePollApi.ts                      |  5 ++++
 src/hooks/useValidatorEpochBalance.ts        |  4 +--
 src/recoil/atoms.ts                          |  4 +--
 src/views/ChangeScreen.tsx                   | 28 ++++++++++++++++++++
 9 files changed, 52 insertions(+), 6 deletions(-)
 create mode 100644 src/views/ChangeScreen.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 91440857..7c631bb8 100644
--- a/src/App.tsx
+++ b/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 />
     }
diff --git a/src/components/DeviceSelect/DeviceSelect.tsx b/src/components/DeviceSelect/DeviceSelect.tsx
index f0cd17a2..f4c8ea3b 100644
--- a/src/components/DeviceSelect/DeviceSelect.tsx
+++ b/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)
diff --git a/src/components/StepChart/StepChart.tsx b/src/components/StepChart/StepChart.tsx
index f73bfad5..2977e732 100644
--- a/src/components/StepChart/StepChart.tsx
+++ b/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} />
diff --git a/src/constants/enums.ts b/src/constants/enums.ts
index 7d6861cb..b55b10e5 100644
--- a/src/constants/enums.ts
+++ b/src/constants/enums.ts
@@ -14,6 +14,7 @@ export enum ContentView {
 export enum AppView {
   ONBOARD = 'ONBOARD',
   DASHBOARD = 'DASHBOARD',
+  CHANGE_SCREEN = 'CHANGE_SCREEN',
   INIT = 'INIT',
 }
 
diff --git a/src/hooks/useAtomCleanup.ts b/src/hooks/useAtomCleanup.ts
index cc248fc1..0e0d5604 100644
--- a/src/hooks/useAtomCleanup.ts
+++ b/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 {
diff --git a/src/hooks/usePollApi.ts b/src/hooks/usePollApi.ts
index 75189666..608e5c54 100644
--- a/src/hooks/usePollApi.ts
+++ b/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) {
diff --git a/src/hooks/useValidatorEpochBalance.ts b/src/hooks/useValidatorEpochBalance.ts
index 2b4db6f3..3378fc29 100644
--- a/src/hooks/useValidatorEpochBalance.ts
+++ b/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
 
diff --git a/src/recoil/atoms.ts b/src/recoil/atoms.ts
index a1f622fd..38104dfa 100644
--- a/src/recoil/atoms.ts
+++ b/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,
 })
diff --git a/src/views/ChangeScreen.tsx b/src/views/ChangeScreen.tsx
new file mode 100644
index 00000000..198b02b1
--- /dev/null
+++ b/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