Change useFooterAccordionEvents hook to a service component

This service component is a leaf component (it has no children), and
therefore it is cheap to re-render.

Author: samholmes

src/components/Main.tsx

@@ -25,7 +25,6 @@ import { RewardsCardDashboardScene as RewardsCardListSceneComponent } from '../p
 import { RewardsCardWelcomeScene as RewardsCardWelcomeSceneComponent } from '../plugins/gui/scenes/RewardsCardWelcomeScene'
 import { SepaFormScene } from '../plugins/gui/scenes/SepaFormScene'
 import { defaultAccount } from '../reducers/CoreReducer'
-import { useFooterAccordionEvents } from '../state/SceneFooterState'
 import { useDispatch, useSelector } from '../types/reactRedux'
 import { AppParamList, NavigationBase } from '../types/routerTypes'
 import { logEvent } from '../util/tracking'
@@ -235,9 +234,6 @@ export const Main = () => {
   const [legacyLanding, setLegacyLanding] = React.useState<boolean | undefined>(isMaestro() ? false : undefined)
   const [hasInitialScenesLoaded, setHasInitialScenesLoaded] = React.useState(false)
 
-  // Register footer accordion events
-  useFooterAccordionEvents()
-
   // Match react navigation theme background with the patina theme
   const reactNavigationTheme = React.useMemo(() => {
     return {
@@ -270,21 +266,25 @@ export const Main = () => {
     'setLegacyLanding'
   )
 
-  return legacyLanding == null ? (
-    <LoadingSplashScreen />
-  ) : (
-    <NavigationContainer theme={reactNavigationTheme}>
-      <Stack.Navigator
-        initialRouteName={ENV.USE_WELCOME_SCREENS && !legacyLanding ? 'gettingStarted' : 'login'}
-        screenOptions={{
-          headerShown: false
-        }}
-      >
-        <Stack.Screen name="edgeApp" component={EdgeApp} />
-        <Stack.Screen name="gettingStarted" component={GettingStartedScene} />
-        <Stack.Screen name="login" component={LoginScene} options={{ animationEnabled: hasInitialScenesLoaded }} />
-      </Stack.Navigator>
-    </NavigationContainer>
+  return (
+    <>
+      {legacyLanding == null ? (
+        <LoadingSplashScreen />
+      ) : (
+        <NavigationContainer theme={reactNavigationTheme}>
+          <Stack.Navigator
+            initialRouteName={ENV.USE_WELCOME_SCREENS && !legacyLanding ? 'gettingStarted' : 'login'}
+            screenOptions={{
+              headerShown: false
+            }}
+          >
+            <Stack.Screen name="edgeApp" component={EdgeApp} />
+            <Stack.Screen name="gettingStarted" component={GettingStartedScene} />
+            <Stack.Screen name="login" component={LoginScene} options={{ animationEnabled: hasInitialScenesLoaded }} />
+          </Stack.Navigator>
+        </NavigationContainer>
+      )}
+    </>
   )
 }
 

src/components/services/Services.tsx

@@ -12,6 +12,7 @@ import { useHandler } from '../../hooks/useHandler'
 import { useRefresher } from '../../hooks/useRefresher'
 import { makeStakePlugins } from '../../plugins/stake-plugins/stakePlugins'
 import { defaultAccount } from '../../reducers/CoreReducer'
+import { FooterAccordionEventService } from '../../state/SceneFooterState'
 import { useDispatch, useSelector } from '../../types/reactRedux'
 import { NavigationBase } from '../../types/routerTypes'
 import { height, ratioHorizontal, ratioVertical, width } from '../../util/scaling'
@@ -148,6 +149,7 @@ export function Services(props: Props) {
       {account == null ? null : <WalletConnectService account={account} />}
       <WalletLifecycle />
       <WipeLogsService />
+      <FooterAccordionEventService />
     </>
   )
 }

src/state/SceneFooterState.tsx

@@ -122,11 +122,11 @@ export const useSceneFooterRender = (renderFn: FooterRender = defaultFooterRende
 }
 
 /**
- * This hook registers event handlers for the footer's expanded/collapsed states.
- * This hook is only required to be used once within the app (Main). Using this
- * hook multiple times will cause thrashing for the footer state shared values.
+ * This is a component service which registers event handlers for the footer's
+ * expanded/collapsed states. Using this component multiple times will cause
+ * thrashing for the footer state shared values.
  */
-export const useFooterAccordionEvents = () => {
+export const FooterAccordionEventService = () => {
   const { scrollState } = useSceneScrollContext()
   const { scrollBeginEvent, scrollEndEvent, scrollMomentumBeginEvent, scrollMomentumEndEvent, scrollY } = scrollState
 
@@ -224,6 +224,8 @@ export const useFooterAccordionEvents = () => {
     },
     [keepOpen]
   )
+
+  return null
 }
 
 /**