fix: cannot close dapps bottom-sheet-modal by once operation.

RabbyHub · Dec 3, 2024 · 6f63f3a · 6f63f3a
1 parent 5eca68f
commit 6f63f3a
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 23 deletions.
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -49,7 +49,7 @@
     "@ethereumjs/common": "4.2.0",
     "@ethereumjs/tx": "5.1.0",
     "@ethereumjs/util": "^9.0.1",
-    "@gorhom/bottom-sheet": "alpha",
+    "@gorhom/bottom-sheet": "5.0.0-alpha.9",
     "@ledgerhq/react-native-hw-transport-ble": "6.33.4",
     "@metamask/abi-utils": "2.0.2",
     "@metamask/eth-sig-util": "5.1.0",

diff --git a/apps/mobile/src/screens/Dapps/DappsScreen/components/WebViewsStub.tsx b/apps/mobile/src/screens/Dapps/DappsScreen/components/WebViewsStub.tsx
@@ -5,7 +5,15 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Dimensions, Platform, Text, View } from 'react-native';
+import {
+  Dimensions,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle,
+} from 'react-native';
 import {
   useOpenUrlView,
   useOpenDappView,
@@ -53,12 +61,29 @@ import { useSafeAndroidBottomSizes } from '@/hooks/useAppLayout';
 import { WebViewHeaderRight } from '@/components/WebView/DappWebViewControl2/WebViewHeaderRight';
 import { AccountSwitcherModalInDappWebView } from '@/components/AccountSwitcher/Modal';
 
-const renderBackdrop = (props: Omit<BottomSheetBackdropProps, 'style'>) => {
+const revealedTopBackdropStyle = StyleSheet.flatten([
+  {
+    height: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 99,
+  },
+]) as StyleProp<ViewStyle>;
+const renderBackdrop = (
+  props: Omit<BottomSheetBackdropProps, 'style'>,
+  { shouldRevealTop }: { shouldRevealTop: boolean },
+) => {
   return (
-    <BottomSheetBackdrop
+    <RefreshAutoLockBottomSheetBackdrop
       {...props}
+      opacity={__DEV__ ? 0.8 : 0.5}
       pressBehavior={'collapse'}
-      // style={undefined}
+      {...(shouldRevealTop && {
+        style: revealedTopBackdropStyle,
+      })}
       disappearsOnIndex={OPEN_DAPP_VIEW_INDEXES.collapsed}
       appearsOnIndex={OPEN_DAPP_VIEW_INDEXES.expanded}
     />
@@ -239,7 +264,9 @@ export function OpenedDappWebViewStub() {
     [collapseDappWebViewModal, clearActiveDappOrigin],
   );
 
-  const [_, setSheetModalIndex] = useState(OPEN_DAPP_VIEW_INDEXES.collapsed);
+  const [sheetModalIndex, setSheetModalIndex] = useState(
+    OPEN_DAPP_VIEW_INDEXES.collapsed,
+  );
   const handleBottomSheetChanges = useCallback<
     BottomSheetModalProps['onChange'] & object
   >((index, pos, type) => {
@@ -250,7 +277,7 @@ export function OpenedDappWebViewStub() {
       type,
     );
     setSheetModalIndex(index);
-    if (index <= OPEN_DAPP_VIEW_INDEXES.collapsed) {
+    if (index > OPEN_DAPP_VIEW_INDEXES.collapsed) {
       /**
        * If `enablePanDownToClose` set as true, Dont call this method which would lead 'close' modal,
        * it will umount children component of BottomSheetModal
@@ -316,7 +343,7 @@ export function OpenedDappWebViewStub() {
     containerPaddingBottom,
   } = useSafeSizes();
 
-  const hasOpenedDapps = !!openedDappItems.length; /*  && !!activeDapp */
+  const hasOpenedDapps = !!openedDappItems.length && !!activeDapp;
 
   // const webviewKeys = useMemo(() => {
   //   return openedDappItems.map((dappInfo, idx) => {
@@ -329,7 +356,13 @@ export function OpenedDappWebViewStub() {
     <OpenedDappBottomSheetModal
       index={OPEN_DAPP_VIEW_INDEXES.collapsed}
       {...(isIOS && { detached: false })}
-      backdropComponent={renderBackdrop}
+      // notice: this property is not reactive, once changed it, you need to reload app to make it work
+      backdropComponent={props =>
+        renderBackdrop(props, {
+          shouldRevealTop:
+            !activeDapp && sheetModalIndex > OPEN_DAPP_VIEW_INDEXES.collapsed,
+        })
+      }
       enablePanDownToClose={false}
       // containerComponent={React.Fragment}
       containerStyle={[
@@ -352,6 +385,8 @@ export function OpenedDappWebViewStub() {
       ref={openedDappWebviewSheetModalRef}
       snapPoints={snapPoints}
       enableDynamicSizing={false}
+      // animateOnMount={false}
+      // animationConfigs={{ duration: 500 }}
       onChange={handleChange}>
       <AutoLockView
         as="BottomSheetView"
@@ -362,6 +397,10 @@ export function OpenedDappWebViewStub() {
           {
             paddingTop: containerPaddingTop,
             paddingBottom: containerPaddingBottom,
+            // ...makeDevOnlyStyle({
+            ///  // backgroundColor: 'blue',
+            //   // height: '100%'
+            // })
           },
         ]}>
         {!openedDappItems.length && (

diff --git a/apps/mobile/src/screens/Dapps/DappsScreen/index.tsx b/apps/mobile/src/screens/Dapps/DappsScreen/index.tsx
@@ -9,7 +9,7 @@ import { createGetStyles2024 } from '@/utils/styles';
 import { safeGetOrigin } from '@rabby-wallet/base-utils/dist/isomorphic/url';
 import { useNavigation } from '@react-navigation/native';
 import { useMemoizedFn } from 'ahooks';
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { Keyboard, View } from 'react-native';
 import {
   TouchableOpacity,
@@ -23,6 +23,7 @@ import { useSearchDapps } from '../hooks/useSearchDapps';
 import LinearGradient from 'react-native-linear-gradient';
 import NormalScreenContainer from '@/components/ScreenContainer/NormalScreenContainer';
 import { IS_IOS } from '@/core/native/utils';
+import { debounce } from 'lodash';
 
 export function DappsScreen(): JSX.Element {
   const {
@@ -84,6 +85,12 @@ export function DappsScreen(): JSX.Element {
     inputRef.current?.focus();
   });
 
+  const handleOpenURLDebounced = useMemo(() => {
+    return debounce((dapp: DappInfo) => {
+      handleOpenURL(dapp.origin);
+    }, 200);
+  }, [handleOpenURL]);
+
   return (
     <TouchableWithoutFeedback
       onPress={() => {
@@ -160,17 +167,13 @@ export function DappsScreen(): JSX.Element {
               <DappHistorySection
                 style={{ height: '100%' }}
                 data={browserHistoryList}
-                onPress={dapp => {
-                  handleOpenURL(dapp.origin);
-                }}
+                onPress={handleOpenURLDebounced}
                 onFavoritePress={handleFavoriteDapp}
                 onDeletePress={handleDeleteHistory}
                 HeaderComponent={
                   <DappFavoriteSection
                     data={favoriteApps}
-                    onPress={dapp => {
-                      handleOpenURL(dapp.origin);
-                    }}
+                    onPress={handleOpenURLDebounced}
                   />
                 }
               />

diff --git a/apps/mobile/src/screens/Dapps/FavoriteDappsScreen/index.tsx b/apps/mobile/src/screens/Dapps/FavoriteDappsScreen/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useSafeSetNavigationOptions } from '@/components/AppStatusBar';
 import NormalScreenContainer2024 from '@/components2024/ScreenContainer/NormalScreenContainer';
 import { DappInfo } from '@/core/services/dappService';
@@ -12,6 +12,7 @@ import { useOpenDappView } from '../hooks/useDappView';
 import { Text } from 'react-native';
 import NormalScreenContainer from '@/components/ScreenContainer/NormalScreenContainer';
 import LinearGradient from 'react-native-linear-gradient';
+import { debounce } from 'lodash';
 
 export function FavoriteDappsScreen(): JSX.Element {
   const { setNavigationOptions } = useSafeSetNavigationOptions();
@@ -56,6 +57,12 @@ export function FavoriteDappsScreen(): JSX.Element {
     updateFavorite(dapp.origin, !dapp.isFavorite);
   });
 
+  const handleOpenURLDebounced = useMemo(() => {
+    return debounce((dapp: DappInfo) => {
+      handleOpenURL(dapp.origin);
+    }, 200);
+  }, [handleOpenURL]);
+
   return (
     <LinearGradient
       colors={[colors2024['neutral-bg-1'], colors2024['neutral-bg-3']]}
@@ -65,9 +72,7 @@ export function FavoriteDappsScreen(): JSX.Element {
         <DappCardList
           data={favoriteApps}
           onFavoritePress={handleFavoriteDapp}
-          onPress={dapp => {
-            handleOpenURL(dapp.origin);
-          }}
+          onPress={handleOpenURLDebounced}
         />
       </NormalScreenContainer>
     </LinearGradient>

diff --git a/apps/mobile/src/screens/Dapps/hooks/useDappView.ts b/apps/mobile/src/screens/Dapps/hooks/useDappView.ts
@@ -326,6 +326,7 @@ export function useOpenDappView() {
             }
           : dappUrl;
 
+      const newUrl = item.origin;
       const { httpOrigin: targetOrigin, urlInfo } = canoicalizeDappUrl(
         item.origin,
       );
@@ -355,7 +356,7 @@ export function useOpenDappView() {
 
       const $openParams = {
         ...item.$openParams,
-        initialUrl: item.$openParams?.initialUrl || targetOrigin,
+        initialUrl: item.$openParams?.initialUrl || newUrl,
       };
 
       setOpenedOriginsDapps(prev => {

diff --git a/yarn.lock b/yarn.lock
@@ -3921,7 +3921,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@gorhom/bottom-sheet@npm:alpha":
+"@gorhom/bottom-sheet@npm:5.0.0-alpha.9":
   version: 5.0.0-alpha.9
   resolution: "@gorhom/bottom-sheet@npm:5.0.0-alpha.9"
   dependencies:
@@ -28737,7 +28737,7 @@ __metadata:
     "@ethereumjs/common": 4.2.0
     "@ethereumjs/tx": 5.1.0
     "@ethereumjs/util": ^9.0.1
-    "@gorhom/bottom-sheet": alpha
+    "@gorhom/bottom-sheet": 5.0.0-alpha.9
     "@ledgerhq/react-native-hw-transport-ble": 6.33.4
     "@metamask/abi-utils": 2.0.2
     "@metamask/eth-sig-util": 5.1.0