fix: lazy render when focus and update some deps

packages/app/ios/Podfile.lock

@@ -666,7 +666,7 @@ PODS:
     - RNFBApp
   - RNGestureHandler (2.9.0):
     - React-Core
-  - RNReanimated (2.14.1):
+  - RNReanimated (2.14.4):
     - DoubleConversion
     - FBLazyVector
     - FBReactNativeSpec
@@ -693,7 +693,7 @@ PODS:
     - React-RCTText
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.17.0):
+  - RNScreens (3.19.0):
     - React-Core
     - React-RCTImage
   - RNShare (7.6.6):
@@ -1202,8 +1202,8 @@ SPEC CHECKSUMS:
   RNFBCrashlytics: 94e1f78e2a9aa9e02edbfb0d3f1f0921ce00094b
   RNFBPerf: b85b621a4d15905847e8627a6aa67ad894e8e166
   RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
-  RNReanimated: 2e3aaece9a18c6fb0874db0902497d1cd8cd4511
-  RNScreens: 0df01424e9e0ed7827200d6ed1087ddd06c493f9
+  RNReanimated: 96c7ed2bf57734510de5bde1efb9b58ebd351203
+  RNScreens: ea4cd3a853063cda19a4e3c28d2e52180c80f4eb
   RNShare: d56424e3926cbc239db1cc1c168adcb051aad50b
   RNSVG: d787d64ca06b9158e763ad2638a8c4edce00782a
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d

packages/app/package.json

@@ -80,10 +80,10 @@
     "react-native-nested-scroll-view": "https://github.com/OneKeyHQ/react-native-nested-scroll-view.git",
     "react-native-pager-view": "6.1.2",
     "react-native-randombytes": "^3.6.1",
-    "react-native-reanimated": "^2.14.1",
+    "react-native-reanimated": "^2.14.4",
     "react-native-restart": "0.0.24",
     "react-native-safe-area-context": "4.4.1",
-    "react-native-screens": "3.17.0",
+    "react-native-screens": "^3.19.0",
     "react-native-share": "^7.6.6",
     "react-native-svg": "^13.7.0",
     "react-native-tcp-socket": "^6.0.3",

packages/app/react-native.config.js

@@ -1,5 +1,9 @@
 module.exports = {
   dependencies: {
+    'react-native-flipper': {
+      // disable flipper in CI environment
+      platforms: process.env.CI ? { ios: null, android: null } : {},
+    },
     // disable frameprocessor and vision-camera-code-scanner
     // until reanimated v3 offcially supports v8
     'vision-camera-code-scanner': {

packages/components/src/Button/ButtonCapture.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback } from 'react';
+import { forwardRef, memo, useCallback } from 'react';
 
 import { Button } from 'native-base';
 
@@ -26,4 +26,4 @@ const ButtonCapture = forwardRef<any, IButtonProps>(
 );
 ButtonCapture.displayName = 'ButtonCapture';
 
-export default ButtonCapture;
+export default memo(ButtonCapture);

packages/components/src/Button/index.tsx

@@ -3,7 +3,7 @@ import type {
   ForwardRefExoticComponent,
   RefAttributes,
 } from 'react';
-import { forwardRef, useCallback, useEffect, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useState } from 'react';
 
 import { StyleSheet } from 'react-native';
 
@@ -552,4 +552,4 @@ const OkButton = forwardRef<
 });
 OkButton.displayName = 'OkButton';
 
-export default OkButton;
+export default memo(OkButton);

packages/components/src/OverlayContainer/index.tsx

@@ -15,7 +15,7 @@ const OverlayContainer: FC<{ useFullWindowForIOS?: boolean }> = ({
       ? FullWindowOverlay
       : RootSiblingPortal;
   return (
-    <Container style={StyleSheet.absoluteFill}>
+    <Container>
       <View
         testID="OverlayContainer-View"
         pointerEvents="box-none"

packages/components/src/Pressable/Pressable.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef, memo, useCallback } from 'react';
 
 import { Pressable as NBPressable } from 'native-base';
 
@@ -37,4 +37,4 @@ const PressableCapture = forwardRef<typeof NBPressable, PressableItemProps>(
 
 PressableCapture.displayName = 'Pressable';
 
-export default PressableCapture;
+export default memo(PressableCapture);

packages/components/src/Pressable/PressableItem.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 
 import { Pressable as NBPressable } from 'native-base';
 
@@ -53,4 +53,4 @@ const PressableItem: FC<PressableItemProps> = ({
   );
 };
 
-export { PressableItem as default };
+export default memo(PressableItem);

packages/kit-bg/package.json

@@ -8,7 +8,6 @@
     "@onekeyhq/components": "*",
     "@openzeppelin/contracts": "^4.5.0",
     "@reduxjs/toolkit": "^1.6.2",
-    "@types/redux-logger": "^3.0.9",
     "@types/url-parse": "^1.4.8",
     "@unstoppabledomains/resolution": "^8.3.3",
     "date-fns": "^2.27.0",

packages/kit/package.json

@@ -6,7 +6,6 @@
   "dependencies": {
     "@onekeyhq/components": "*",
     "@reduxjs/toolkit": "^1.6.2",
-    "@types/redux-logger": "^3.0.9",
     "@types/url-parse": "^1.4.8",
     "date-fns": "^2.27.0",
     "expo": "^45.0.5",
@@ -40,7 +39,6 @@
     "react-native-uuid": "^2.0.1",
     "react-native-vision-camera": "^2.15.2",
     "react-redux": "^7.2.6",
-    "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "rimraf": "^3.0.2",
     "semver": "^7.3.7",

packages/kit/src/components/DelayedFreeze.tsx

@@ -0,0 +1,28 @@
+// This component allows one more render before freezing the screen.
+
+import type { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+
+import { Freeze } from 'react-freeze';
+
+interface FreezeWrapperProps {
+  freeze: boolean;
+  children: ReactNode;
+}
+
+// https://github.com/software-mansion/react-native-screens/issues/1198#issuecomment-1306478805
+
+// Allows activityState to reach the native side and useIsFocused to work correctly.
+function DelayedFreeze({ freeze, children }: FreezeWrapperProps) {
+  // flag used for determining whether freeze should be enabled
+  const [freezeState, setFreezeState] = useState(false);
+
+  useEffect(() => {
+    setImmediate(() => {
+      setFreezeState(freeze);
+    });
+  }, [freeze]);
+
+  return <Freeze freeze={freeze ? freezeState : false}>{children}</Freeze>;
+}
+export default DelayedFreeze;

packages/kit/src/components/LazyRenderWhenFocus.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef } from 'react';
 
 import { useIsFocused } from '@react-navigation/native';
-import { Freeze } from 'react-freeze';
 
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
@@ -10,6 +9,8 @@ import {
   isModalRouteExisting,
 } from '../utils/routeUtils';
 
+import DelayedFreeze from './DelayedFreeze';
+
 export interface ILazyRenderWhenFocusProps {
   unmountWhenBlur?: boolean;
   freezeWhenBlur?: boolean;
@@ -66,9 +67,9 @@ export function LazyRenderWhenFocus({
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   return (
-    <Freeze freeze={shouldFreeze}>
+    <DelayedFreeze freeze={shouldFreeze}>
       {isFocusedRef.current || isFocused ? children : null}
-    </Freeze>
+    </DelayedFreeze>
   );
 }
 export function toFocusedLazy(

packages/kit/src/hooks/useManageTokens.ts

@@ -51,38 +51,33 @@ export const useManageTokensOfAccount = ({
     return map;
   }, [accountTokens]);
 
+  const fetchAccountTokens = useCallback(() => {
+    // TODO may cause circular refresh in UI
+    backgroundApiProxy.serviceToken.fetchAccountTokensDebounced({
+      activeAccountId: accountId,
+      activeNetworkId: networkId,
+      withBalance: true,
+    });
+  }, [accountId, networkId]);
+
   useEffect(() => {
     let timer: ReturnType<typeof setInterval> | undefined;
-    if (pollingInterval && isFocused && accountId && networkId) {
-      // TODO may cause circular refresh in UI
-      backgroundApiProxy.serviceToken.fetchAccountTokensDebounced({
-        activeAccountId: accountId,
-        activeNetworkId: networkId,
-        withBalance: true,
-      });
+    if (pollingInterval && accountId && networkId) {
+      fetchAccountTokens();
       timer = setInterval(() => {
-        backgroundApiProxy.serviceToken.fetchAccountTokensDebounced({
-          activeAccountId: accountId,
-          activeNetworkId: networkId,
-          withBalance: true,
-        });
+        if (isFocused) {
+          fetchAccountTokens();
+        }
       }, pollingInterval);
     }
     return () => {
-      if (timer) {
-        clearInterval(timer);
-      }
+      clearInterval(timer);
     };
-  }, [isFocused, pollingInterval, accountId, networkId]);
+  }, [pollingInterval, accountId, networkId, fetchAccountTokens, isFocused]);
 
   useEffect(() => {
     if (fetchTokensOnMount && accountId && networkId) {
-      // TODO may cause circular refresh in UI
-      backgroundApiProxy.serviceToken.fetchAccountTokensDebounced({
-        activeAccountId: accountId,
-        activeNetworkId: networkId,
-        withBalance: true,
-      });
+      fetchAccountTokens();
     }
     // eslint-disable-next-line
   }, []);
@@ -93,9 +88,7 @@ export const useManageTokensOfAccount = ({
         accountId,
         networkId,
       })
-      .then((value) => {
-        setFrozenBalance(value);
-      });
+      .then(setFrozenBalance);
   }, [accountId, networkId]);
 
   const getTokenBalance = useCallback(

packages/kit/src/provider/index.tsx

@@ -68,7 +68,7 @@ const KitProvider: FC<LaunchProps> = (propsRaw) => {
                       // but can not work with modal
                       // https://github.com/software-mansion/react-native-screens/issues/1149
                       // so now only used for toast
-                      <FullWindowOverlay style={StyleSheet.absoluteFill}>
+                      <FullWindowOverlay>
                         <View
                           pointerEvents="box-none"
                           style={StyleSheet.absoluteFill}

packages/kit/src/store/middlewares.ts

@@ -10,36 +10,36 @@ import type { Middleware } from 'redux';
 //     return result as unknown;
 //   };
 
-const backgroundCheck: Middleware<unknown, unknown> =
-  () => (next) => (action) => {
-    if (
-      action &&
-      !action.$isDispatchFromBackground &&
-      action.type &&
-      // ignore redux-persist action
-      !(action.type as string).startsWith('persist/')
-    ) {
-      const msg =
-        'dispatch(action) ERROR: action should be dispatched from background.';
-      console.error(msg, action);
-      throw new Error(msg);
-    }
-    const result = next(action);
-    return result as unknown;
-  };
-
-const middlewares = [
+const middlewares: Middleware<unknown, unknown>[] = [
   // simpleLogger,
   // logger,
-  backgroundCheck,
+  // backgroundCheck,
 ];
 
-// eslint-disable-next-line no-undef
 if (__DEV__) {
   // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
   const createDebugger = require('redux-flipper').default;
   // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   middlewares.push(createDebugger());
+
+  const backgroundCheck: Middleware<unknown, unknown> =
+    () => (next) => (action) => {
+      if (
+        action &&
+        !action.$isDispatchFromBackground &&
+        action.type &&
+        // ignore redux-persist action
+        !(action.type as string).startsWith('persist/')
+      ) {
+        const msg =
+          'dispatch(action) ERROR: action should be dispatched from background.';
+        console.error(msg, action);
+        throw new Error(msg);
+      }
+      const result = next(action);
+      return result as unknown;
+    };
+  middlewares.push(backgroundCheck);
 }
 
 export default middlewares;

packages/kit/src/views/Discover/Explorer/Controller/gotoSite.tsx

@@ -14,7 +14,7 @@ import {
 import { openUrl } from '../../../../utils/openUrl';
 import { crossWebviewLoadUrl, validateUrl, webHandler } from '../explorerUtils';
 
-import type { WebSiteHistory } from '../../type';
+import type { DAppItemType, WebSiteHistory } from '../../type';
 import type { MatchDAppItemType } from '../explorerUtils';
 
 export const gotoSite = ({
@@ -173,3 +173,7 @@ export const openMatchDApp = ({
     });
   }
 };
+
+export const onItemSelect = (dapp: DAppItemType) => {
+  openMatchDApp({ id: dapp._id, dapp });
+};