Merge remote-tracking branch 'origin/feat/put_dapp_webview_on_screen'…

… into tmp/20241216
RabbyHub · Dec 17, 2024 · 147dc46 · 147dc46
2 parents 0422376 + 851dbdd
commit 147dc46
Show file tree

Hide file tree

Showing 13 changed files with 896 additions and 114 deletions.
diff --git a/apps/mobile/src/AppNavigation.tsx b/apps/mobile/src/AppNavigation.tsx
@@ -28,7 +28,7 @@ import { SettingNavigator } from './screens/Navigators/SettingsNavigator';
 import { GetStartedNavigator } from './screens/Navigators/GetStartedNavigator';
 import { NFTDetailScreen } from './screens/NftDetail';
 
-import RootScreenNavigator from './screens/Navigators/rootNavigator';
+import { HomeScreenNavigator } from './screens/Navigators/rootNavigator';
 
 import usePrevious from 'ahooks/lib/usePrevious';
 import {
@@ -185,15 +185,15 @@ export default function AppNavigation({
             name={RootNames.StackGetStarted}
             component={GetStartedNavigator}
           />
-          <RootStack.Screen
-            name={RootNames.SingleAddressStack}
-            component={SingleAddressNavigator}
-          />
           <RootStack.Screen
             name={RootNames.StackRoot}
-            component={RootScreenNavigator}
+            component={HomeScreenNavigator}
             options={RootOptions}
           />
+          <RootStack.Screen
+            name={RootNames.SingleAddressStack}
+            component={SingleAddressNavigator}
+          />
           <RootStack.Screen
             name={RootNames.Unlock}
             component={UnlockScreen}

diff --git a/apps/mobile/src/components/WebView/DappWebViewControl2/DappWebViewControl2.tsx b/apps/mobile/src/components/WebView/DappWebViewControl2/DappWebViewControl2.tsx
@@ -9,7 +9,6 @@ import {
 } from 'react-native';
 import WebView from 'react-native-webview';
 
-import { BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
 import { stringUtils, urlUtils } from '@rabby-wallet/base-utils';
 
 import { Text } from '../../Text';
@@ -18,7 +17,6 @@ import { ScreenLayouts2 } from '@/constant/layout';
 import { useTheme2024 } from '@/hooks/theme';
 
 import { RcIconCloseDapp } from './icons';
-import { useSheetModal } from '@/hooks/useSheetModal';
 import TouchableView from '@/components/Touchable/TouchableView';
 import { WebViewActions, WebViewState, useWebViewControl } from '../hooks';
 import { useJavaScriptBeforeContentLoaded } from '@/hooks/useBootstrap';
@@ -31,7 +29,6 @@ import { BottomNavControl2, BottomNavControlCbCtx } from './Widgets';
 import { APP_UA_PARIALS } from '@/constant';
 import { createGetStyles2024 } from '@/utils/styles';
 import AutoLockView from '@/components/AutoLockView';
-import { RefreshAutoLockBottomSheetBackdrop } from '@/components/patches/refreshAutoLockUI';
 import { PATCH_ANCHOR_TARGET } from '@/core/bridges/builtInScripts/patchAnchor';
 import { IS_ANDROID } from '@/core/native/utils';
 import { checkShouldStartLoadingWithRequestForDappWebView } from '../utils';
@@ -56,24 +53,6 @@ function convertToWebviewUrl(dappOrigin: string) {
   return stringUtils.ensurePrefix(dappOrigin, 'https://');
 }
 
-const renderBackdrop = (props: BottomSheetBackdropProps) => {
-  return (
-    <RefreshAutoLockBottomSheetBackdrop
-      {...props}
-      // leave here for debug
-      style={[
-        props.style,
-        {
-          borderWidth: 1,
-          borderColor: 'red',
-        },
-      ]}
-      disappearsOnIndex={-1}
-      appearsOnIndex={0}
-    />
-  );
-};
-
 type DappWebViewControlProps = {
   dappOrigin: string;
   dappTabId?: string;
@@ -219,9 +198,6 @@ const DappWebViewControl2 = React.forwardRef<
       };
     }, [dappOrigin, latestUrl]);
 
-    const { sheetModalRef: webviewNavRef, toggleShowSheetModal } =
-      useSheetModal();
-
     React.useImperativeHandle(
       ref,
       () => ({
@@ -234,8 +210,8 @@ const DappWebViewControl2 = React.forwardRef<
     );
 
     const handlePressCloseDefault = useCallback(() => {
-      toggleShowSheetModal(true);
-    }, [toggleShowSheetModal]);
+      console.debug('handlePressCloseDefault: implement close dapp');
+    }, []);
 
     const handlePressHeaderLeftClose = useCallback(() => {
       if (typeof onPressHeaderLeftClose === 'function') {

diff --git a/apps/mobile/src/components/WebView/WebViewControlPreload.tsx b/apps/mobile/src/components/WebView/WebViewControlPreload.tsx
@@ -54,6 +54,7 @@ function getTouchHtml(inPageScript: string = '') {
 
 const firstTouchedAtom = atom(!isAndroid);
 /**
+ * @deprecated
  * @description set this component on the top level of App's navigation context
  * to trigger inPageWeb3 script passed to `injectedJavaScriptBeforeContentLoaded` property
  * of react-native-webview

diff --git a/apps/mobile/src/constant/layout.ts b/apps/mobile/src/constant/layout.ts
@@ -60,7 +60,6 @@ export const RootNames = {
 
   StackBottom: 'StackBottom',
   Home: 'Home',
-  // MultiAddressHome: 'MultiAddressHome',
   Points: 'Points',
 
   Dapps: 'Dapps',
@@ -153,6 +152,7 @@ export const RootNames = {
 
   TokenDetail: 'TokenDetail',
   ReceiveAddressList: 'ReceiveAddressList',
+  DappWebViewStubOnHome: 'DappWebViewStubOnHome',
 } as const;
 
 export type AppRootName = keyof typeof RootNames;
@@ -200,7 +200,7 @@ function makeScreenSpecConfig() {
     const bg1Default2024Conf = <ScreenStatusBarConf>{
       barStyle: adaptiveStatusBarStyle,
       iosStatusBarStyle: adaptiveIosStatusBarStyle,
-      androidStatusBarBg: colors2024['neutral-bg-1'],
+      androidStatusBarBg: colors2024['neutral-bg1'],
     };
 
     const transparentDefault2024Conf = <ScreenStatusBarConf>{
@@ -239,14 +239,20 @@ function makeScreenSpecConfig() {
       '@openeddapp': {
         barStyle: adaptiveStatusBarStyle,
         iosStatusBarStyle: adaptiveIosStatusBarStyle,
-        androidStatusBarBg: colors['neutral-bg-1'],
+        androidStatusBarBg: colors['neutral-bg1'],
       },
       GetStarted: blueLightConf,
       GetStartedScreen2024: bg1DefaultConf,
       NewUserGetStarted2024: bg1DefaultConf,
 
       Home: transparentDefault2024Conf,
       // MultiAddressHome: bg1Default2024Conf,
+      DappWebViewStubOnHome: {
+        barStyle: adaptiveStatusBarStyle,
+        iosStatusBarStyle: adaptiveIosStatusBarStyle,
+        androidStatusBarBg: colors['neutral-bg1'],
+      },
+      MultiAddressHome: bg1Default2024Conf,
       Unlock: bg1DefaultConf,
       MultiAddressHistory: bg1Default2024Conf,
 
@@ -366,7 +372,7 @@ export function makeHeadersPresets({
     },
     withBgCard1_2024: {
       headerStyle: {
-        backgroundColor: colors2024?.['neutral-bg-1'],
+        backgroundColor: colors2024?.['neutral-bg1'],
       },
       headerTitleStyle: {
         color: colors?.['neutral-title-1'],

diff --git a/apps/mobile/src/constant/newStyle.ts b/apps/mobile/src/constant/newStyle.ts
@@ -7,6 +7,8 @@ export enum MultiHomeFeatTitle {
   Approvals = 'Approvals',
   GasAccount = 'GasAccount',
   Dapps = 'Dapps',
+  /** @deprecated */
+  TEST_DAPP = 'TEST_DAPP',
   Ecosystem = 'Ecosystem',
   Points = 'Rabby Points',
 }

diff --git a/apps/mobile/src/navigation-type.ts b/apps/mobile/src/navigation-type.ts
@@ -14,7 +14,7 @@ import { AbstractPortfolioToken } from './screens/Home/types';
  */
 
 export type RootStackParamsList = {
-  [RootNames.StackRoot]?: NavigatorScreenParams<RootNavigatorParamsList>;
+  [RootNames.StackRoot]?: NavigatorScreenParams<HomeNavigatorParamsList>;
   [RootNames.StackGetStarted]?: NavigatorScreenParams<GetStartedNavigatorParamsList>;
   [RootNames.NotFound]?: {};
   [RootNames.Unlock]?: {};
@@ -34,14 +34,19 @@ export type RootStackParamsList = {
   };
 };
 
-export type RootNavigatorParamsList = {
+/**
+ * @description we mock modal-like views as a stub navigator, which was implemented
+ * based on the react-navigation's bottom tab navigator.
+ */
+export type HomeNavigatorParamsList = {
   [RootNames.Home]?: {};
   /** @deprecated */
   [RootNames.Points]?: {};
   [RootNames.Dapps]?: {};
   [RootNames.Settings]?: {
     // enterActionType?: 'setBiometrics' | 'setAutoLockTime';
   };
+  [RootNames.DappWebViewStubOnHome]?: {};
 };
 
 type GetStartedNavigatorParamsList = {

diff --git a/apps/mobile/src/screens/Address/components/AddressListScreenContainer.tsx b/apps/mobile/src/screens/Address/components/AddressListScreenContainer.tsx
@@ -30,7 +30,7 @@ type CurrentAddressProps = NativeStackScreenProps<
 export const AddressListScreenContainer: React.FC<any> = ({ children }) => {
   const { accounts } = useAccounts();
   const { styles, colors2024 } = useTheme2024({ getStyle });
-  const { openUrlAsDapp } = useOpenDappView();
+  // const { openUrlAsDapp } = useOpenDappView();
   const { shouldRedirectToSetPasswordBefore2024 } = useSetPasswordFirst();
 
   const navState = useNavigationState(
@@ -41,15 +41,15 @@ export const AddressListScreenContainer: React.FC<any> = ({ children }) => {
       }
     | undefined;
 
-  React.useEffect(() => {
-    return () => {
-      if (navState?.backToDappOnClose) {
-        openUrlAsDapp(navState?.backToDappOnClose, {
-          showSheetModalFirst: false,
-        });
-      }
-    };
-  }, [navState, openUrlAsDapp]);
+  // React.useEffect(() => {
+  //   return () => {
+  //     if (navState?.backToDappOnClose) {
+  //       openUrlAsDapp(navState?.backToDappOnClose, {
+  //         showSheetModalFirst: false,
+  //       });
+  //     }
+  //   };
+  // }, [navState, openUrlAsDapp]);
 
   const navigation = useNavigation<CurrentAddressProps['navigation']>();