feat(HW-1012): network logger (#2241)

assets/locales/en/en.json

@@ -3,7 +3,7 @@
   "StakingInfoUnDelegationDay": " ({{day}} day left)",
   "StakingInfoUnDelegationDays": " ({{days}} days left)",
   "Welcome_haqq_pin": "Welcome to HAQQ Wallet",
-  "_hash": "11e244ed30a5ce81abd18764e5daf82433d9f3c694c4823ca7a8258cefe2e936",
+  "_hash": "fada1b8ee4f00219e0ba864865e56984d0f683c6ad3ab5799680063212688eec",
   "accept": "Accept",
   "accountInfoNftTabTitle": "NFTs",
   "accountInfoTokensTabTitle": "Tokens",
@@ -391,6 +391,7 @@
   "moreAboutMaxPriorityFee": "More about Max Priority Fee",
   "name": "Name",
   "networkFee": "Network fee: {{value}}",
+  "networkLoggerTitle": "Network Logger",
   "networks": "Networks",
   "newUpdateAccept": "Update",
   "newUpdateCancel": "Not now",

assets/locales/id/id.json

@@ -3,7 +3,7 @@
   "StakingInfoUnDelegationDay": " ({{day}} hari tersisa)",
   "StakingInfoUnDelegationDays": " ({{days}} hari tersisa)",
   "Welcome_haqq_pin": "Selamat datang di HAQQ Wallet",
-  "_hash": "897ed6dd6351a644bd14f105c5d24b0ebd024c3d36111821eb64cf45eb590849",
+  "_hash": "c85f09fc9c89a38b662904826e10e346a502c9755f8ac8594946847c814b573b",
   "accept": "Terima",
   "accountInfoNftTabTitle": "NFTs",
   "accountInfoTokensTabTitle": "Token",

index.js

@@ -7,6 +7,7 @@ import './src/modifiers/json-rpc-provider.modifier';
 
 import {DEBUG_VARS} from '@app/debug-vars';
 import {enableBatchedStateUpdates} from '@app/hooks/batched-set-state';
+import {Language} from '@app/models/language';
 import {IS_IOS, RTL_LANGUAGES} from '@app/variables/common';
 import messaging from '@react-native-firebase/messaging';
 import * as Sentry from '@sentry/react-native';
@@ -16,7 +17,6 @@ import {name as appName} from './app.json';
 import {App} from './src/app';
 import './src/event-actions';
 import {Jailbreak} from './src/jailbreak';
-import {Language} from '@app/models/language';
 
 LogBox.ignoreAllLogs();
 if (!global.BigInt) {

ios/Podfile.lock

@@ -1222,6 +1222,27 @@ PODS:
     - React-Core
   - react-native-safe-area-context (4.11.1):
     - React-Core
+  - react-native-shake (6.0.0-beta.3):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-splash-screen (3.3.0):
     - React-Core
   - react-native-video (6.6.4):
@@ -1773,6 +1794,7 @@ DEPENDENCIES:
   - react-native-randombytes (from `../node_modules/react-native-randombytes`)
   - react-native-restart (from `../node_modules/react-native-restart`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - react-native-shake (from `../node_modules/react-native-shake`)
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
   - react-native-video (from `../node_modules/react-native-video`)
   - react-native-video-cache (from `../node_modules/react-native-video-cache`)
@@ -1979,6 +2001,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-restart"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-shake:
+    :path: "../node_modules/react-native-shake"
   react-native-splash-screen:
     :path: "../node_modules/react-native-splash-screen"
   react-native-video:
@@ -2166,6 +2190,7 @@ SPEC CHECKSUMS:
   react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846
   react-native-restart: 7595693413fe3ca15893702f2c8306c62a708162
   react-native-safe-area-context: 5141f11858b033636f1788b14f32eaba92cee810
+  react-native-shake: ac71c914bd6a77259c982790e31802eb7f8b90e1
   react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457
   react-native-video: 917795f0e661c6542d1c7e4cb0d30f732b6f6ebf
   react-native-video-cache: 8300762bd3fd1c3dd19b76ba5236ca35de1f4bf7

package.json

@@ -132,6 +132,7 @@
     "react-native-markdown-package": "1.8.2",
     "react-native-mmkv": "2.12.2",
     "react-native-network-info": "5.2.1",
+    "react-native-network-logger": "^1.17.0",
     "react-native-os": "https://github.com/aprock/react-native-os#938676ebd92d58b8928168a7e78cbe216838ed17",
     "react-native-permissions": "5.0.1",
     "react-native-play-install-referrer": "1.1.8",
@@ -145,6 +146,7 @@
     "react-native-restart": "0.0.27",
     "react-native-safe-area-context": "4.11.1",
     "react-native-screens": "3.29.0",
+    "react-native-shake": "^6.0.0-beta.3",
     "react-native-skeleton-placeholder": "5.2.4",
     "react-native-splash-screen": "3.3.0",
     "react-native-svg": "13.10.0",

src/app.tsx

@@ -14,8 +14,10 @@ import {observer} from 'mobx-react';
 import PostHog, {PostHogProvider} from 'posthog-react-native';
 import {AppState, 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';
 import {Metrics, SafeAreaProvider} from 'react-native-safe-area-context';
+import RNShake from 'react-native-shake';
 import SplashScreen from 'react-native-splash-screen';
 
 import {Color} from '@app/colors';
@@ -32,6 +34,7 @@ import {Stories} from '@app/models/stories';
 import {VariablesBool} from '@app/models/variables-bool';
 import {navigator} from '@app/navigator';
 import {
+  HomeStackRoutes,
   KeystoneStackRoutes,
   LedgerStackRoutes,
   OnboardingStackRoutes,
@@ -47,6 +50,7 @@ import {AppStore} from './models/app';
 import {migrationWallets} from './models/migration-wallets';
 import {Wallet} from './models/wallet';
 import {EventTracker} from './services/event-tracker';
+import {HapticEffects, vibrate} from './services/haptic';
 
 const appTheme = createTheme({
   colors: {
@@ -97,10 +101,30 @@ export const App = observer(() => {
     [theme],
   );
 
+  useEffect(() => {
+    if (AppStore.networkLoggerEnabled && !__DEV__) {
+      const subscription = RNShake.addListener(() => {
+        vibrate(HapticEffects.success);
+        navigator.navigate(HomeStackRoutes.NetworkLogger);
+      });
+
+      return () => {
+        subscription.remove();
+      };
+    }
+  }, [AppStore.networkLoggerEnabled]);
+
   useEffect(() => {
     const splashTimer = setTimeout(() => {
       hideModal(ModalType.splash);
     }, SPLASH_TIMEOUT_MS);
+    if (AppStore.networkLoggerEnabled) {
+      startNetworkLogging({
+        forceEnable: true,
+        ignoredPatterns: [/posthog\.com/, /google\.com/],
+        maxRequests: AppStore.networkLogsCacheSize,
+      });
+    }
     sleep(150)
       .then(async () => await app.awaitForInitialization())
       .then(() => SplashScreen.hide())

src/components/home-settings/home-settings.tsx

@@ -16,7 +16,7 @@ import {AppStore} from '@app/models/app';
 import {Currencies} from '@app/models/currencies';
 import {Language} from '@app/models/language';
 import {VariablesString} from '@app/models/variables-string';
-import {SettingsStackRoutes} from '@app/route-types';
+import {HomeStackRoutes, SettingsStackRoutes} from '@app/route-types';
 import {AppTheme} from '@app/types';
 import {openStorePage} from '@app/utils';
 
@@ -170,6 +170,14 @@ export const HomeSettings = observer(() => {
         />
       )}
 
+      {AppStore.networkLoggerEnabled && (
+        <SettingsButton
+          icon={IconsName.browser}
+          title={I18N.networkLoggerTitle}
+          next={HomeStackRoutes.NetworkLogger}
+        />
+      )}
+
       {AppStore.isDeveloperModeEnabled && (
         <SettingsButton
           icon={IconsName.settings}

src/components/home-settings/settings-button.tsx

@@ -6,7 +6,11 @@ import {Color} from '@app/colors';
 import {createTheme} from '@app/helpers';
 import {useTypedNavigation} from '@app/hooks';
 import {I18N} from '@app/i18n';
-import {SettingsStackParamList, SettingsStackRoutes} from '@app/route-types';
+import {
+  HomeStackRoutes,
+  SettingsStackParamList,
+  SettingsStackRoutes,
+} from '@app/route-types';
 
 import {
   DataContent,
@@ -19,7 +23,7 @@ import {
 } from '../ui';
 
 export type SettingsButtonProps = {
-  next: SettingsStackRoutes;
+  next: SettingsStackRoutes | HomeStackRoutes;
   icon: IconsName | keyof typeof IconsName;
   title: I18N;
   rightTitle?: string;

src/contexts/app.ts

@@ -28,7 +28,6 @@ import {Provider, RemoteProviderConfig} from '@app/models/provider';
 import {VariablesBool} from '@app/models/variables-bool';
 import {VariablesString} from '@app/models/variables-string';
 import {Wallet} from '@app/models/wallet';
-import {SHOW_NON_WHITELIST_TOKEN} from '@app/screens/settings-developer-tools';
 import {EthNetwork} from '@app/services';
 import {Backend} from '@app/services/backend';
 import {Cosmos} from '@app/services/cosmos';
@@ -45,7 +44,10 @@ import {
   MarketingEvents,
   ModalType,
 } from '../types';
-import {LIGHT_GRAPHIC_GREEN_1} from '../variables/common';
+import {
+  LIGHT_GRAPHIC_GREEN_1,
+  SHOW_NON_WHITELIST_TOKEN,
+} from '../variables/common';
 
 const optionalConfigObject = {
   title: 'Fingerprint Login', // Android

src/i18n.ts

@@ -1030,6 +1030,7 @@ export enum I18N {
   settingsSecurityRewriteCloudBackup = 'settingsSecurityRewriteCloudBackup',
   settingsSecurityRewriteCloudBackupDescription = 'settingsSecurityRewriteCloudBackupDescription',
   settingsSecurityRewriteCloudBackupNoWallet = 'settingsSecurityRewriteCloudBackupNoWallet',
+  networkLoggerTitle = 'networkLoggerTitle',
 }
 
 const defaultTranslation = {en};

src/models/app/app.store.ts

@@ -10,6 +10,8 @@ class AppStore {
 
   // Hydrated properties
   private _isOnboarded = false;
+  private _networkLoggerEnabled = false;
+  private _networkLogsCacheSize = 500; // count of stored http request
   isDeveloperModeEnabled = Config.IS_DEVELOPMENT === 'true';
   isTesterModeEnabled = Config.IS_TESTMODE === 'true';
 
@@ -22,6 +24,10 @@ class AppStore {
         '_isOnboarded',
         'isDeveloperModeEnabled',
         'isTesterModeEnabled',
+        // @ts-ignore
+        '_networkLoggerEnabled',
+        // @ts-ignore
+        '_networkLogsCacheSize',
       ],
       storage,
     });
@@ -50,6 +56,30 @@ class AppStore {
   get isLogsEnabled() {
     return __DEV__ || this.isAdditionalFeaturesEnabled;
   }
+
+  get networkLoggerEnabled() {
+    // only for developer mode
+    if (!this.isAdditionalFeaturesEnabled) {
+      return false;
+    }
+    return this._networkLoggerEnabled ?? false;
+  }
+
+  set networkLoggerEnabled(value: boolean) {
+    runInAction(() => {
+      this._networkLoggerEnabled = value;
+    });
+  }
+
+  get networkLogsCacheSize() {
+    return this._networkLogsCacheSize;
+  }
+
+  set networkLogsCacheSize(value: number) {
+    runInAction(() => {
+      this._networkLogsCacheSize = value;
+    });
+  }
 }
 
 const instance = new AppStore();

src/route-types.ts

@@ -348,6 +348,7 @@ export enum HomeStackRoutes {
   SelectNetwork = 'selectNetwork',
   Receive = 'receive',
   Backup = 'backup',
+  NetworkLogger = 'networkLogger',
   WalletProtectionPopup = 'walletProtectionPopup',
   WalletConnectApplicationDetailsPopup = 'walletConnectApplicationDetailsPopup',
   WalletConnectApplicationListPopup = 'walletConnectApplicationListPopup',
@@ -380,6 +381,7 @@ export type HomeStackParamList = {
   [HomeStackRoutes.Device]: undefined;
   [HomeStackRoutes.SignIn]: undefined;
   [HomeStackRoutes.SignUp]: undefined;
+  [HomeStackRoutes.NetworkLogger]: undefined;
   [HomeStackRoutes.AccountInfo]: {accountId: string};
   [HomeStackRoutes.Transaction]: {
     from?: string;

src/screens/HomeStack/SettingsStack/settings-about.tsx

@@ -1,12 +1,13 @@
 import React, {useCallback} from 'react';
 
 import {Alert} from 'react-native';
+import RNRestart from 'react-native-restart';
 
 import {SettingsAbout} from '@app/components/settings-about';
 import {I18N, getText} from '@app/i18n';
 import {AppStore} from '@app/models/app';
-import {navigator} from '@app/navigator';
 import {HapticEffects, vibrate} from '@app/services/haptic';
+import {sleep} from '@app/utils';
 
 export const SettingsAboutScreen = () => {
   const onEnableDevMode = useCallback(() => {
@@ -18,10 +19,11 @@ export const SettingsAboutScreen = () => {
         {
           text: getText(I18N.developerModeAttentionEnable),
           style: 'destructive',
-          onPress: () => {
+          onPress: async () => {
             AppStore.isTesterModeEnabled = true;
             vibrate(HapticEffects.success);
-            navigator.goBack();
+            await sleep(200);
+            RNRestart.restart();
           },
         },
         {

src/screens/HomeStack/index.tsx

@@ -6,6 +6,7 @@ import {
 } from '@react-navigation/native-stack';
 import {StatusBar} from 'react-native';
 import Config from 'react-native-config';
+import NetworkLogger from 'react-native-network-logger';
 
 import {Color} from '@app/colors';
 import {DismissPopupButton} from '@app/components/popup/dismiss-popup-button';
@@ -127,6 +128,12 @@ const HomeStack = memo(() => {
         options={modalOptions}
       />
 
+      <Stack.Screen
+        name={HomeStackRoutes.NetworkLogger}
+        component={NetworkLogger}
+        options={modalOptions}
+      />
+
       <Stack.Screen
         name={HomeStackRoutes.WalletProtectionPopup}
         component={themeUpdaterHOC(WalletProtectionPopupScreen)}