From 839d82a6a2fd8a59bf6a8779148c4901904a3e0f Mon Sep 17 00:00:00 2001
From: Samuel Holmes <sam@edge.app>
Date: Fri, 26 Jan 2024 00:34:21 -0800
Subject: [PATCH] Move useFooterAccordionEvents hook to a Discreet component

This Discreet component is a leaf component (it has no children), and
therefore it is cheap to re-render.
---
 src/components/Discreet.tsx |  9 +++++++++
 src/components/Main.tsx     | 40 +++++++++++++++++++------------------
 2 files changed, 30 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Discreet.tsx

diff --git a/src/components/Discreet.tsx b/src/components/Discreet.tsx
new file mode 100644
index 00000000000..7a5c0ae7858
--- /dev/null
+++ b/src/components/Discreet.tsx
@@ -0,0 +1,9 @@
+import { useFooterAccordionEvents } from '../state/SceneFooterState'
+
+export function Discreet() {
+  // Register footer accordion events
+  useFooterAccordionEvents()
+
+  // No child component
+  return null
+}
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index f02805c721b..ae1047d7a3c 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -25,10 +25,10 @@ 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'
+import { Discreet } from './Discreet'
 import { ifLoggedIn } from './hoc/IfLoggedIn'
 import { useBackEvent } from './hoc/useBackEvent'
 import { BackButton } from './navigation/BackButton'
@@ -235,9 +235,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 +267,26 @@ 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>
+      )}
+      <Discreet />
+    </>
   )
 }