fix: lazy render app lock when the portal is not found (#3340)

kwoktung · web-flow · commit a42a9f378229 · 2023-08-02T09:08:59.000+08:00
* Revert "fix: portal container init (#3335)" This reverts commit 358fb2a. * fix: lazy render app lock when the portal is not found
diff --git a/packages/components/src/Layout/NavigationBar/MobileBottomTabBar.tsx b/packages/components/src/Layout/NavigationBar/MobileBottomTabBar.tsx
@@ -19,7 +19,7 @@ import {
   swapAndMarketRoutes,
 } from '@onekeyhq/kit/src/routes/Root/Main/Tab/routes/tabRoutes.base';
 import { TabRoutes } from '@onekeyhq/kit/src/routes/routesEnum';
-import { PortalContainer } from '@onekeyhq/kit/src/views/Overlay/RootPortal';
+import { PortalExit } from '@onekeyhq/kit/src/views/Overlay/RootPortal';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
 import Box from '../../Box';
@@ -206,8 +206,8 @@ export default function MobileBottomTabBar({
       >
         {tabs}
       </Box>
-      <PortalContainer
-        // testID="Mobile-AppTabBar-PortalContainer"
+      <PortalExit
+        // testID="Mobile-AppTabBar-PortalExit"
         name={`BottomTab-Overlay-${state.key}`}
       />
     </Box>
diff --git a/packages/components/src/OverlayContainer/index.tsx b/packages/components/src/OverlayContainer/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { FULLWINDOW_OVERLAY_PORTAL } from '@onekeyhq/kit/src/utils/overlayUtils';
-import { PortalRender } from '@onekeyhq/kit/src/views/Overlay/RootPortal';
+import { PortalEntry } from '@onekeyhq/kit/src/views/Overlay/RootPortal';
 
 import type { StyleProp, ViewStyle } from 'react-native';
 
@@ -20,7 +20,7 @@ const OverlayContainer: FC<{
     />
   );
   return (
-    <PortalRender container={FULLWINDOW_OVERLAY_PORTAL}>{content}</PortalRender>
+    <PortalEntry target={FULLWINDOW_OVERLAY_PORTAL}>{content}</PortalEntry>
   );
 };
 export default OverlayContainer;
diff --git a/packages/components/src/Select/Container/Mobile.tsx b/packages/components/src/Select/Container/Mobile.tsx
@@ -4,7 +4,7 @@ import { Modalize } from 'react-native-modalize';
 
 import { useSafeAreaInsets, useThemeValue } from '@onekeyhq/components';
 import { FULLWINDOW_OVERLAY_PORTAL } from '@onekeyhq/kit/src/utils/overlayUtils';
-import { PortalRender } from '@onekeyhq/kit/src/views/Overlay/RootPortal';
+import { PortalEntry } from '@onekeyhq/kit/src/views/Overlay/RootPortal';
 
 import Box from '../../Box';
 import Button from '../../Button';
@@ -148,7 +148,7 @@ function Mobile<T>({
   );
 
   return (
-    <PortalRender container={FULLWINDOW_OVERLAY_PORTAL}>{content}</PortalRender>
+    <PortalEntry target={FULLWINDOW_OVERLAY_PORTAL}>{content}</PortalEntry>
   );
 }
 
diff --git a/packages/ext/src/ui/uiJsBridge.ts b/packages/ext/src/ui/uiJsBridge.ts
@@ -14,7 +14,7 @@ import type {
 
 function init() {
   const jsBridgeReceiveHandler = (payload: IJsBridgeMessagePayload) => {
-    // console.log('jsBridgeReceiveHandler Ext-UI', payload);
+    console.log('jsBridgeReceiveHandler Ext-UI', payload);
     const { method, params } = payload.data as IJsonRpcRequest;
     if (method === DISPATCH_ACTION_BROADCAST_METHOD_NAME) {
       const { actions } = params as IDispatchActionBroadcastParams;
diff --git a/packages/kit/src/components/AppLock/AppLock.tsx b/packages/kit/src/components/AppLock/AppLock.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { useEffect, useMemo } from 'react';
+import { Fragment, useEffect, useMemo } from 'react';
 
 import { Box, OverlayContainer } from '@onekeyhq/components';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
@@ -8,6 +8,9 @@ import backgroundApiProxy from '../../background/instance/backgroundApiProxy';
 import { useAppSelector, useDebounce } from '../../hooks';
 import { unlockWhiteListUrls } from '../../routes/linking.path';
 import { setAppRenderReady } from '../../store/reducers/data';
+import { FULLWINDOW_OVERLAY_PORTAL } from '../../utils/overlayUtils';
+import { isPortalExisted } from '../../views/Overlay/RootPortal';
+import { LazyDisplayView } from '../LazyDisplayView';
 
 import { AppStateHeartbeat } from './AppStateHeartbeat';
 import { AppStateUnlock } from './AppStateUnlock';
@@ -53,12 +56,21 @@ export const AppLockView: FC<AppLockProps> = ({
     return <AppStateUnlock />;
   }
 
+  const Parent =
+    !isPortalExisted(FULLWINDOW_OVERLAY_PORTAL) &&
+    showUnlockView &&
+    renderAsOverlay
+      ? LazyDisplayView
+      : Fragment;
+
   return (
     <Box w="full" h="full" testID="AppLockView">
       {showUnlockView && renderAsOverlay ? (
-        <OverlayContainer>
-          <AppStateUnlock />
-        </OverlayContainer>
+        <Parent>
+          <OverlayContainer>
+            <AppStateUnlock />
+          </OverlayContainer>
+        </Parent>
       ) : null}
       {prerequisites && isUnlock ? <AppStateUpdater /> : null}
       {isUnlock ? <AppStateHeartbeat /> : null}
diff --git a/packages/kit/src/provider/AppLoading.tsx b/packages/kit/src/provider/AppLoading.tsx
@@ -91,7 +91,7 @@ const AppLoading: FC = ({ children }) => {
   }
 
   useEffect(() => {
-    function main() {
+    async function main() {
       // TODO initApp too slow, maybe do not need waiting for initApp in UI
       // await Promise.all([
       //   serviceApp.waitForAppInited({
@@ -100,9 +100,9 @@ const AppLoading: FC = ({ children }) => {
       // ]);
 
       // redux ready check move to ThemeApp
-      // serviceApp.initApp();
 
-      serviceApp.checkLockStatus();
+      // serviceApp.initApp();
+      await serviceApp.checkLockStatus();
       setInitDataReady(true);
 
       // end splash screen to show AnimatedSplash after 50ms to avoid twinkling
diff --git a/packages/kit/src/provider/NavigationProvider.tsx b/packages/kit/src/provider/NavigationProvider.tsx
@@ -25,7 +25,7 @@ import '../routes/deepLink';
 import buildLinking from '../routes/linking';
 import { createLazyComponent } from '../utils/createLazyComponent';
 import { FULLWINDOW_OVERLAY_PORTAL } from '../utils/overlayUtils';
-import { PortalContainer } from '../views/Overlay/RootPortal';
+import { PortalExit } from '../views/Overlay/RootPortal';
 
 import RedirectProvider from './RedirectProvider';
 
@@ -133,7 +133,7 @@ const NavigationApp = () => {
       <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
         <ChainWebEmbed />
         <CustomToast bottomOffset={60} />
-        <PortalContainer name={FULLWINDOW_OVERLAY_PORTAL} />
+        <PortalExit name={FULLWINDOW_OVERLAY_PORTAL} />
       </View>
     ),
     [],
diff --git a/packages/kit/src/utils/overlayUtils.tsx b/packages/kit/src/utils/overlayUtils.tsx
@@ -4,27 +4,26 @@ import { cloneElement } from 'react';
 import { throttle } from 'lodash';
 import { StyleSheet, View } from 'react-native';
 
-import { renderToPortal } from '../views/Overlay/RootPortal';
+import { enterPortal } from '../views/Overlay/RootPortal';
 
 import type { PortalManager } from '../views/Overlay/RootPortal';
 
 export const FULLWINDOW_OVERLAY_PORTAL = 'Root-FullWindowOverlay';
 
-type IOverlayContentRender = (closeOverlay: () => void) => ReactElement;
 export const showOverlay = throttle(
-  (renderOverlay: IOverlayContentRender) => {
+  (renderOverlay: (closeOverlay: () => void) => ReactElement) => {
     let portal: PortalManager | null;
     const closeOverlay = () => {
       portal?.destroy();
       portal = null;
     };
+    const content = (
+      <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+        {renderOverlay(closeOverlay)}
+      </View>
+    );
     setTimeout(() => {
-      const content = (
-        <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
-          {renderOverlay(closeOverlay)}
-        </View>
-      );
-      portal = renderToPortal(FULLWINDOW_OVERLAY_PORTAL, content);
+      portal = enterPortal(FULLWINDOW_OVERLAY_PORTAL, content);
     });
     return closeOverlay;
   },
@@ -36,14 +35,12 @@ export const showOverlay = throttle(
 );
 
 export const showDialog = (render: ReactElement) =>
-  showOverlay(
-    //
-    (closeOverlay) =>
-      cloneElement(render, {
-        onClose: () => {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-          render.props.onClose?.();
-          closeOverlay();
-        },
-      }),
+  showOverlay((onClose) =>
+    cloneElement(render, {
+      onClose: () => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+        render.props.onClose?.();
+        onClose();
+      },
+    }),
   );
diff --git a/packages/kit/src/views/Developer/index.tsx b/packages/kit/src/views/Developer/index.tsx
@@ -825,7 +825,7 @@ export const Debug = () => {
                 });
               }}
             >
-              <Typography.Body1>Open Gas Panel000</Typography.Body1>
+              <Typography.Body1>Open Gas Panel</Typography.Body1>
             </Pressable>
             <Pressable
               {...pressableProps}
diff --git a/packages/kit/src/views/Discover/Explorer/Mobile/ControllerBarMobile.tsx b/packages/kit/src/views/Discover/Explorer/Mobile/ControllerBarMobile.tsx
@@ -29,7 +29,7 @@ import {
 } from '../../../../store/observable/webTabs';
 import { showOverlay } from '../../../../utils/overlayUtils';
 import { OverlayPanel } from '../../../Overlay/OverlayPanel';
-import { PortalRender } from '../../../Overlay/RootPortal';
+import { PortalEntry } from '../../../Overlay/RootPortal';
 import { useWebController } from '../Controller/useWebController';
 import {
   MAX_OR_SHOW,
@@ -198,7 +198,7 @@ export const ControllerBarMobile: FC = () => {
     </Animated.View>
   );
   return (
-    <PortalRender container={`BottomTab-Overlay-${TabRoutes.Discover}`}>
+    <PortalEntry target={`BottomTab-Overlay-${TabRoutes.Discover}`}>
       <Animated.View
         style={[
           StyleSheet.absoluteFill,
@@ -223,6 +223,6 @@ export const ControllerBarMobile: FC = () => {
           {tabController}
         </Box>
       </Animated.View>
-    </PortalRender>
+    </PortalEntry>
   );
 };
diff --git a/packages/kit/src/views/Market/ScreenMarketOrSwap.tsx b/packages/kit/src/views/Market/ScreenMarketOrSwap.tsx
@@ -10,7 +10,7 @@ import {
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
 import { TabRoutes } from '../../routes/routesEnum';
-import { PortalContainer, PortalRender } from '../Overlay/RootPortal';
+import { PortalEntry, PortalExit } from '../Overlay/RootPortal';
 import Swap from '../Swap';
 
 import MarketHeader from './Components/MarketList/MarketTopHeader';
@@ -32,9 +32,9 @@ export function ScreenMarketOrSwap({
     useCallback(() => {
       if (isNativeSmall) {
         sharedMobileTabRef.update(
-          <PortalRender container={`${routeName}-portal`}>
+          <PortalEntry target={`${routeName}-portal`}>
             <SharedMobileTab routeName={routeName} />
-          </PortalRender>,
+          </PortalEntry>,
         );
       }
     }, [routeName, isNativeSmall]),
@@ -43,10 +43,7 @@ export function ScreenMarketOrSwap({
   return (
     <Box flex={1} mt={`${top}px`}>
       {isNativeSmall ? (
-        <PortalContainer
-          key={`${routeName}-portal`}
-          name={`${routeName}-portal`}
-        />
+        <PortalExit key={`${routeName}-portal`} name={`${routeName}-portal`} />
       ) : (
         <>
           <MarketHeader marketTopTabName={routeName} />
diff --git a/packages/kit/src/views/Overlay/RootPortal.tsx b/packages/kit/src/views/Overlay/RootPortal.tsx

Original file line number	Diff line number	Diff line change
`@@ -825,7 +825,7 @@ export const Debug = () => {`
`825`	`825`	`});`
`826`	`826`	`}}`
`827`	`827`	`>`
`828`		`- <Typography.Body1>Open Gas Panel000</Typography.Body1>`
	`828`	`+ <Typography.Body1>Open Gas Panel</Typography.Body1>`
`829`	`829`	`</Pressable>`
`830`	`830`	`<Pressable`
`831`	`831`	`{...pressableProps}`