feat: open network logger from DevSettings (#2256)

src/app.tsx

@@ -12,7 +12,13 @@ import * as Sentry from '@sentry/react-native';
 import {when} from 'mobx';
 import {observer} from 'mobx-react';
 import PostHog, {PostHogProvider} from 'posthog-react-native';
-import {AppState, Dimensions, Linking, StyleSheet} from 'react-native';
+import {
+  AppState,
+  DevSettings,
+  Dimensions,
+  Linking,
+  StyleSheet,
+} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {startNetworkLogging} from 'react-native-network-logger';
 import {MenuProvider} from 'react-native-popup-menu';
@@ -102,11 +108,13 @@ export const App = observer(() => {
   );
 
   useEffect(() => {
+    const openNetworkLogger = () => {
+      vibrate(HapticEffects.success);
+      navigator.navigate(HomeStackRoutes.NetworkLogger);
+    };
+    DevSettings.addMenuItem('Open network logger', openNetworkLogger);
     if (AppStore.networkLoggerEnabled && !__DEV__) {
-      const subscription = RNShake.addListener(() => {
-        vibrate(HapticEffects.success);
-        navigator.navigate(HomeStackRoutes.NetworkLogger);
-      });
+      const subscription = RNShake.addListener(openNetworkLogger);
 
       return () => {
         subscription.remove();

src/models/app/app.store.ts

@@ -1,6 +1,10 @@
 import {makeAutoObservable, runInAction} from 'mobx';
 import {isHydrated, makePersistable} from 'mobx-persist-store';
 import Config from 'react-native-config';
+import {
+  startNetworkLogging,
+  stopNetworkLogging,
+} from 'react-native-network-logger';
 
 import {storage} from '@app/services/mmkv';
 
@@ -72,6 +76,16 @@ class AppStore {
     runInAction(() => {
       this._networkLoggerEnabled = value;
     });
+
+    if (value) {
+      startNetworkLogging({
+        forceEnable: true,
+        ignoredPatterns: [/posthog\.com/, /google\.com/],
+        maxRequests: this.networkLogsCacheSize,
+      });
+    } else {
+      stopNetworkLogging();
+    }
   }
 
   get networkLogsCacheSize() {

src/screens/network-logger.tsx

@@ -1,11 +1,15 @@
-import React, {useMemo} from 'react';
+import React, {useCallback, useMemo} from 'react';
 
+import {useFocusEffect} from '@react-navigation/native';
 import {observer} from 'mobx-react';
-import {StyleSheet} from 'react-native';
+import {Alert, StyleSheet} from 'react-native';
 import NetworkLogger from 'react-native-network-logger';
 import {Edges, SafeAreaView} from 'react-native-safe-area-context';
 
+import {First, Loading} from '@app/components/ui';
 import {useTheme} from '@app/hooks';
+import {AppStore} from '@app/models/app';
+import {navigator} from '@app/navigator';
 import {AppTheme} from '@app/types';
 import {IS_ANDROID} from '@app/variables/common';
 
@@ -22,9 +26,37 @@ export const NetworkLoggerScreen = observer(() => {
 
   const theme = useTheme();
 
+  useFocusEffect(
+    useCallback(() => {
+      if (__DEV__ && !AppStore.networkLoggerEnabled) {
+        Alert.alert('Enable Network Logger?', '', [
+          {
+            text: 'Go back',
+            onPress: () => {
+              navigator.goBack();
+              AppStore.networkLoggerEnabled = false;
+            },
+          },
+          {
+            text: 'Enable',
+            style: 'destructive',
+            onPress: () => {
+              AppStore.networkLoggerEnabled = true;
+            },
+          },
+        ]);
+      }
+    }, [navigator]),
+  );
+
   return (
     <SafeAreaView edges={edges} style={styles.container}>
-      <NetworkLogger theme={theme === AppTheme.dark ? 'dark' : 'light'} />
+      <First>
+        {AppStore.networkLoggerEnabled && (
+          <NetworkLogger theme={theme === AppTheme.dark ? 'dark' : 'light'} />
+        )}
+        <Loading />
+      </First>
     </SafeAreaView>
   );
 });

src/screens/settings-developer-tools.tsx

@@ -12,10 +12,7 @@ import {
   SwitchChangeEvent,
   View,
 } from 'react-native';
-import {
-  startNetworkLogging,
-  stopNetworkLogging,
-} from 'react-native-network-logger';
+import {stopNetworkLogging} from 'react-native-network-logger';
 import RNRestart from 'react-native-restart';
 
 import {Color} from '@app/colors';
@@ -305,15 +302,6 @@ TRON:\n${AddressUtils.toTron(watchOnlyAddress)}`,
               value={AppStore.networkLoggerEnabled}
               onChange={({nativeEvent: {value}}) => {
                 AppStore.networkLoggerEnabled = value;
-                if (value) {
-                  startNetworkLogging({
-                    forceEnable: true,
-                    ignoredPatterns: [/posthog\.com/, /google\.com/],
-                    maxRequests: AppStore.networkLogsCacheSize,
-                  });
-                } else {
-                  stopNetworkLogging();
-                }
               }}
             />
           </MenuNavigationButton>