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.

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 {
@@ -275,21 +271,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
 }
 
 /**