feat: performance improvement.

apps/mobile/ReactotronConfig.js

@@ -3,10 +3,11 @@ import Reactotron from 'reactotron-react-native';
 import { AsyncStorage } from '@react-native-async-storage/async-storage';
 
 let scriptHostname;
+
 if (__DEV__) {
-  // const scriptURL = NativeModules.SourceCode.scriptURL;
-  // scriptHostname = scriptURL.split('://')[1].split(':')[0];
-  // console.debug('[ReactotronConfig] scriptHostname %s', scriptHostname)
+  const scriptURL = NativeModules.SourceCode.scriptURL;
+  scriptHostname = scriptURL.split('://')[1].split(':')[0];
+  console.debug('[ReactotronConfig] scriptHostname %s', scriptHostname);
 }
 
 Reactotron.setAsyncStorageHandler(AsyncStorage)

apps/mobile/android/app/build.gradle

@@ -192,7 +192,7 @@ dependencies {
         implementation jscFlavor
     }
 
-    implementation project(':react-native-splash-screen')
+    // implementation project(':react-native-splash-screen')
     // implementation project(':isudaji_react-native-install-apk')
 }
 

apps/mobile/android/settings.gradle

@@ -3,8 +3,8 @@ apply from: file("../node_modules/@react-native-community/cli-platform-android/n
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
 
-include ':react-native-splash-screen'
-project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
+// include ':react-native-splash-screen'
+// project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
 
 // include ':isudaji_react-native-install-apk'
 // project(':isudaji_react-native-install-apk').projectDir = new File(rootProject.projectDir, 	'../node_modules/@isudaji/react-native-install-apk/android')

apps/mobile/babel.config.js

@@ -17,6 +17,15 @@ module.exports = {
     ],
   ],
   plugins: [
+    ['lodash'],
+    [
+      'import',
+      {
+        libraryName: 'ahooks',
+        camel2DashComponentName: false,
+        camel2UnderlineComponentName: false,
+      },
+    ],
     [
       'transform-define',
       {

apps/mobile/package.json

@@ -19,6 +19,9 @@
     "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
     "lint:commit:fix": "eslint ./src --quiet --fix --ext .js,.jsx,.ts,.tsx --max-warnings=-1",
     "lint:fix": "eslint ./src --fix --ext .js,.jsx,.ts,.tsx",
+    "perf:view:android": "react-native-bundle-visualizer --platform=android",
+    "perf:view:ios": "react-native-bundle-visualizer --platform=ios",
+    "prepare-archive": "yarn build:deps && yarn build-inpage",
     "restart": "yarn start --reset-cache",
     "start": "yarn ensure-git-hooks && yarn build:deps && yarn build-inpage && react-native start",
     "sync:data": "node ./scripts/sync.js",
@@ -202,6 +205,8 @@
     "@types/react-test-renderer": "^18.0.0",
     "@types/uuid": "^9.0.7",
     "babel-jest": "^27.5.1",
+    "babel-plugin-import": "^1.13.8",
+    "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-transform-define": "^2.1.4",
     "babel-plugin-transform-remove-console": "^6.9.4",
@@ -214,6 +219,7 @@
     "qrcode": "^1.5.3",
     "react-devtools": "^4.28.5",
     "react-native-asset": "^2.1.1",
+    "react-native-bundle-visualizer": "^3.1.3",
     "react-native-svg-transformer": "^1.1.0",
     "react-native-version": "^4.0.0",
     "react-test-renderer": "18.2.0",

apps/mobile/src/App.tsx

@@ -47,7 +47,7 @@ type AppProps = { rabbitCode: string };
 
 function MainScreen({ rabbitCode }: AppProps) {
   const { isAppUnlocked } = useInitializeAppOnTop();
-  const { couldRender, securityChainOnTop } = useBootstrapApp({ rabbitCode });
+  const { securityChainOnTop } = useBootstrapApp({ rabbitCode });
   const { binaryTheme } = useAppTheme({ isAppTop: true });
 
   useSetupServiceStub();
@@ -77,7 +77,7 @@ function MainScreen({ rabbitCode }: AppProps) {
   return (
     <AppProvider value={{ securityChain: securityChainOnTop }}>
       <BottomSheetModalProvider>
-        {couldRender && <AppNavigation colorScheme={binaryTheme} />}
+        <AppNavigation colorScheme={binaryTheme} />
       </BottomSheetModalProvider>
     </AppProvider>
   );

apps/mobile/src/core/bridges/EntryScriptWeb3.ts

@@ -1,29 +1,24 @@
 import { Platform } from 'react-native';
 import RNFS from 'react-native-fs';
 
-const EntryScriptWeb3 = {
-  entryScriptWeb3: null as string | null,
+class EntryScriptWeb3Cls {
+  #entryScriptWeb3Promise = null as Promise<string> | null;
+
   // Cache InpageBridgeWeb3 so that it is immediately available
   async init() {
-    this.entryScriptWeb3 =
+    this.#entryScriptWeb3Promise =
       Platform.OS === 'ios'
-        ? await RNFS.readFile(
-            `${RNFS.MainBundlePath}/InpageBridgeWeb3.js`,
-            'utf8',
-          )
-        : await RNFS.readFileAssets('custom/InpageBridgeWeb3.js');
-
-    return this.entryScriptWeb3;
-  },
-  async get() {
-    // Return from cache
-    if (this.entryScriptWeb3) {
-      return this.entryScriptWeb3;
-    }
+        ? RNFS.readFile(`${RNFS.MainBundlePath}/InpageBridgeWeb3.js`, 'utf8')
+        : RNFS.readFileAssets('custom/InpageBridgeWeb3.js');
 
+    return this.#entryScriptWeb3Promise;
+  }
+  getPromise() {
     // If for some reason it is not available, get it again
-    return await this.init();
-  },
-};
+    return this.#entryScriptWeb3Promise;
+  }
+}
+
+const EntryScriptWeb3 = new EntryScriptWeb3Cls();
 
 export default EntryScriptWeb3;

apps/mobile/src/core/bridges/builtInScripts/loadVConsole.ts

@@ -33,15 +33,6 @@ export const EntryScriptVConsole = {
     ].join('\n');
     return this.entryScriptVConsole;
   },
-  async get() {
-    // Return from cache
-    if (this.entryScriptVConsole) {
-      return this.entryScriptVConsole;
-    }
-
-    // If for some reason it is not available, get it again
-    return await this.init();
-  },
 };
 
 /**

apps/mobile/src/hooks/useBootstrap.ts

@@ -112,7 +112,7 @@ export function useJavaScriptBeforeContentLoaded(options?: {
   const { isTop } = options || {};
 
   React.useEffect(() => {
-    if (!isTop || entryScripts.inPageWeb3) return;
+    if (!isTop || EntryScriptWeb3.getPromise()) return;
 
     Promise.allSettled([
       EntryScriptWeb3.init(),
@@ -142,6 +142,7 @@ export function useJavaScriptBeforeContentLoaded(options?: {
   }, [entryScripts.inPageWeb3, entryScripts.vConsole]);
 
   return {
+    couldRender,
     entryScriptWeb3Loaded: [
       couldRender,
       !!entryScripts.inPageWeb3,
@@ -160,12 +161,6 @@ const hideSplashScreen = () => {
   splashScreenVisibleRef.current = false;
 };
 
-// export function useHideSplash() {
-//   React.useEffect(() => {
-//     hideSplashScreen();
-//   }, []);
-// }
-
 /**
  * @description only call this hook on the top level component
  */
@@ -186,25 +181,26 @@ export function useBootstrapApp({ rabbitCode }: { rabbitCode: string }) {
   const { getTriedUnlock } = useTryUnlockAppWithBuiltinOnTop();
 
   React.useEffect(() => {
-    Promise.allSettled([
-      getTriedUnlock(),
-      loadSecurityChain({ rabbitCode }),
-      fetchBiometrics(),
-    ])
-      .then(async ([_unlockResult, _securityChain]) => {
+    Promise.allSettled([getTriedUnlock()])
+      .then(async ([_unlockResult]) => {
+        console.debug('useBootstrapApp::finish', _unlockResult);
         setBootstrap({ couldRender: true });
       })
       .catch(err => {
-        console.error('useBootstrapApp::', err);
+        console.error('useBootstrapApp::error', err);
         setBootstrap({ couldRender: true });
       })
       .finally(() => {
         setTimeout(hideSplashScreen, 1000);
       });
-  }, [getTriedUnlock, setBootstrap, fetchBiometrics, rabbitCode]);
+  }, [getTriedUnlock, setBootstrap]);
+
+  React.useEffect(() => {
+    fetchBiometrics();
+  }, [fetchBiometrics]);
 
   return {
     couldRender,
-    securityChainOnTop: couldRender ? loadSecurityChain({ rabbitCode }) : null,
+    securityChainOnTop: loadSecurityChain({ rabbitCode }),
   };
 }

apps/mobile/src/hooks/useLock.ts

@@ -60,7 +60,10 @@ export function usePasswordStatus() {
 }
 
 const tryAutoUnlockPromiseRef = {
-  current: apisLock.tryAutoUnlockRabbyMobileWithUpdateUnlockTime(),
+  // current: apisLock.tryAutoUnlockRabbyMobileWithUpdateUnlockTime(),
+  current: null as ReturnType<
+    typeof apisLock.tryAutoUnlockRabbyMobileWithUpdateUnlockTime
+  > | null,
 };
 
 /**
@@ -70,6 +73,10 @@ export function useTryUnlockAppWithBuiltinOnTop() {
   const { setAppLock } = useAppUnlocked();
 
   const getTriedUnlock = React.useCallback(async () => {
+    if (!tryAutoUnlockPromiseRef.current) {
+      tryAutoUnlockPromiseRef.current =
+        apisLock.tryAutoUnlockRabbyMobileWithUpdateUnlockTime();
+    }
     return tryAutoUnlockPromiseRef.current.then(async result => {
       setAppLock({
         appUnlocked: keyringService.isUnlocked(),