[Issue-1002]: Recheck bug modal overlapped

src/AppNavigator.tsx

@@ -1,7 +1,7 @@
 import { NavigationState } from '@react-navigation/routers';
 import { ALL_ACCOUNT_KEY } from '@subwallet/extension-base/constants';
 import React, { ComponentType, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { LinkingOptions, NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
+import { LinkingOptions, NavigationContainer, StackActions, useNavigationContainerRef } from '@react-navigation/native';
 import AttachReadOnly from 'screens/Account/AttachReadOnly';
 import ConnectKeystone from 'screens/Account/ConnectQrSigner/ConnectKeystone';
 import ConnectParitySigner from 'screens/Account/ConnectQrSigner/ConnectParitySigner';
@@ -170,7 +170,11 @@ const AppNavigator = ({ isAppReady }: Props) => {
     let amount = true;
     if (hasConfirmations && currentRoute && amount) {
       if (currentRoute.name !== 'Confirmations' && amount) {
-        if (!['CreateAccount', 'CreatePassword', 'Login', 'UnlockModal'].includes(currentRoute.name) && amount) {
+        if (
+          !['CreateAccount', 'CreatePassword', 'Login', 'UnlockModal'].includes(currentRoute.name) &&
+          !isLocked &&
+          amount
+        ) {
           Keyboard.dismiss();
           navigationRef.current?.navigate('Confirmations');
         }
@@ -180,7 +184,7 @@ const AppNavigator = ({ isAppReady }: Props) => {
     return () => {
       amount = false;
     };
-  }, [hasConfirmations, navigationRef, currentRoute]);
+  }, [hasConfirmations, navigationRef, currentRoute, isLocked]);
 
   useEffect(() => {
     let amount = true;
@@ -197,10 +201,14 @@ const AppNavigator = ({ isAppReady }: Props) => {
   useEffect(() => {
     if (isLocked && !!accounts.length && isNavigationReady) {
       appModalContext.hideConfirmModal();
-      setTimeout(() => navigationRef.current?.navigate('Login'), 300);
+      if (currentRoute && currentRoute.name === 'Confirmations') {
+        setTimeout(() => navigationRef.current?.dispatch(StackActions.replace('Login')), 300);
+      } else {
+        setTimeout(() => navigationRef.current?.navigate('Login'), 300);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLocked, isNavigationReady, accounts]);
+  }, [isLocked, isNavigationReady, accounts, currentRoute]);
 
   useEffect(() => {
     if (isEmptyAccounts) {
@@ -223,6 +231,7 @@ const AppNavigator = ({ isAppReady }: Props) => {
       onStateChange={onUpdateRoute}
       onReady={onNavigationReady}>
       <StatusBar barStyle={STATUS_BAR_LIGHT_CONTENT} translucent={true} backgroundColor={'transparent'} />
+      <PortalHost name="ConfirmationModalHost" />
       <ErrorBoundary FallbackComponent={ErrorFallback} onError={onError}>
         <Stack.Navigator
           screenOptions={{

src/screens/Confirmations/index.tsx

@@ -36,6 +36,7 @@ import i18n from 'utils/i18n/i18n';
 import { WalletConnectSessionRequest } from '@subwallet/extension-base/services/wallet-connect-service/types';
 import { ConnectWalletConnectConfirmation } from 'screens/Confirmations/variants/ConnectWalletConnectConfirmation';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { Portal } from '@gorhom/portal';
 
 const getConfirmationPopupWrapperStyle = (isShowSeparator: boolean): StyleProp<any> => {
   return {
@@ -168,7 +169,7 @@ export const Confirmations = () => {
     }
 
     if (confirmation.item.isInternal) {
-      return <TransactionConfirmation confirmation={confirmation} />;
+      return <TransactionConfirmation confirmation={confirmation} navigation={navigation} />;
     }
 
     switch (confirmation.type) {
@@ -183,27 +184,34 @@ export const Confirmations = () => {
           <EvmSignatureConfirmation
             request={confirmation.item as ConfirmationDefinitions['evmSignatureRequest'][0]}
             type={confirmation.type}
+            navigation={navigation}
           />
         );
       case 'evmSendTransactionRequest':
         return (
           <EvmTransactionConfirmation
             request={confirmation.item as ConfirmationDefinitions['evmSendTransactionRequest'][0]}
             type={confirmation.type}
+            navigation={navigation}
           />
         );
       case 'authorizeRequest':
-        return <AuthorizeConfirmation request={confirmation.item as AuthorizeRequest} />;
+        return <AuthorizeConfirmation request={confirmation.item as AuthorizeRequest} navigation={navigation} />;
       case 'metadataRequest':
         return <MetadataConfirmation request={confirmation.item as MetadataRequest} />;
       case 'signingRequest':
-        return <SignConfirmation request={confirmation.item as SigningRequest} />;
+        return <SignConfirmation request={confirmation.item as SigningRequest} navigation={navigation} />;
       case 'connectWCRequest':
-        return <ConnectWalletConnectConfirmation request={confirmation.item as WalletConnectSessionRequest} />;
+        return (
+          <ConnectWalletConnectConfirmation
+            request={confirmation.item as WalletConnectSessionRequest}
+            navigation={navigation}
+          />
+        );
     }
 
     return null;
-  }, [confirmation]);
+  }, [confirmation, navigation]);
 
   useEffect(() => {
     if (numberOfConfirmations) {
@@ -225,23 +233,31 @@ export const Confirmations = () => {
     }
   }, [confirmation, navigation]);
 
+  const renderMainContent = () => (
+    <View
+      style={[
+        { flex: 1, flexDirection: 'column', justifyContent: 'flex-end' },
+        Platform.OS === 'android' && { position: 'absolute', bottom: 0, left: 0, right: 0, top: 0 },
+      ]}>
+      <View style={getConfirmationPopupWrapperStyle(!confirmation || !confirmation.item.isInternal)}>
+        {(!confirmation || !confirmation.item.isInternal) && <View style={subWalletModalSeparator} />}
+        <ConfirmationHeader
+          index={index}
+          numberOfConfirmations={numberOfConfirmations}
+          title={headerTitle}
+          onPressPrev={prevConfirmation}
+          onPressNext={nextConfirmation}
+          isFullHeight={confirmation && confirmation.item.isInternal}
+        />
+        {content}
+        <SafeAreaView edges={['bottom']} />
+      </View>
+    </View>
+  );
+
   return (
     <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={{ flex: 1 }}>
-      <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'flex-end' }}>
-        <View style={getConfirmationPopupWrapperStyle(!confirmation || !confirmation.item.isInternal)}>
-          {(!confirmation || !confirmation.item.isInternal) && <View style={subWalletModalSeparator} />}
-          <ConfirmationHeader
-            index={index}
-            numberOfConfirmations={numberOfConfirmations}
-            title={headerTitle}
-            onPressPrev={prevConfirmation}
-            onPressNext={nextConfirmation}
-            isFullHeight={confirmation && confirmation.item.isInternal}
-          />
-          {content}
-          <SafeAreaView edges={['bottom']} />
-        </View>
-      </View>
+      {Platform.OS === 'android' ? <Portal>{renderMainContent()}</Portal> : renderMainContent()}
     </KeyboardAvoidingView>
   );
 };

src/screens/Confirmations/parts/Sign/Evm.tsx

@@ -14,17 +14,20 @@ import { AccountSignMode } from 'types/signer';
 import { isEvmMessage } from 'utils/confirmation/confirmation';
 import i18n from 'utils/i18n/i18n';
 import { getButtonIcon } from 'utils/button';
-import { useNavigation } from '@react-navigation/native';
-import { RootNavigationProps } from 'routes/index';
+import { RootStackParamList } from 'routes/index';
 import { updateIsDeepLinkConnect } from 'stores/base/Settings';
 import { Minimizer } from '../../../../NativeModules';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from 'stores/index';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { DeviceEventEmitter, Platform } from 'react-native';
+import { OPEN_UNLOCK_FROM_MODAL } from 'components/common/Modal/UnlockModal';
 
 interface Props {
   id: string;
   type: EvmSignatureSupportType;
   payload: ConfirmationDefinitions[EvmSignatureSupportType][0];
+  navigation: NativeStackNavigationProp<RootStackParamList>;
 }
 
 const handleConfirm = async (type: EvmSignatureSupportType, id: string, payload: string) => {
@@ -51,15 +54,14 @@ const handleSignature = async (type: EvmSignatureSupportType, id: string, signat
 };
 
 export const EvmSignArea = (props: Props) => {
-  const { id, payload, type } = props;
+  const { id, payload, type, navigation } = props;
   const {
     payload: { account, canSign, hashPayload },
   } = payload;
   const signMode = useMemo(() => getSignMode(account), [account]);
   const [loading, setLoading] = useState(false);
   const [isScanning, setIsScanning] = useState(false);
   const [isShowQr, setIsShowQr] = useState(false);
-  const navigation = useNavigation<RootNavigationProps>();
   const { isDeepLinkConnect } = useSelector((state: RootState) => state.settings);
   const dispatch = useDispatch();
   const approveIcon = useMemo((): React.ElementType<IconProps> => {
@@ -131,6 +133,7 @@ export const EvmSignArea = (props: Props) => {
         break;
       default:
         setLoading(true);
+        Platform.OS === 'android' && setTimeout(() => DeviceEventEmitter.emit(OPEN_UNLOCK_FROM_MODAL), 250);
         onConfirmPassword(onApprovePassword)()?.catch(() => {
           setLoading(false);
         });

src/screens/Confirmations/parts/Sign/Substrate.tsx

@@ -16,13 +16,16 @@ import { CheckCircle, IconProps, QrCode, Swatches, XCircle } from 'phosphor-reac
 import { Button } from 'components/design-system-ui';
 import i18n from 'utils/i18n/i18n';
 import { getButtonIcon } from 'utils/button';
-import { useNavigation } from '@react-navigation/native';
-import { RootNavigationProps } from 'routes/index';
+import { RootStackParamList } from 'routes/index';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { DeviceEventEmitter, Platform } from 'react-native';
+import { OPEN_UNLOCK_FROM_MODAL } from 'components/common/Modal/UnlockModal';
 
 interface Props {
   account: AccountJson;
   id: string;
   payload: ExtrinsicPayload | string;
+  navigation: NativeStackNavigationProp<RootStackParamList>;
 }
 
 const handleConfirm = async (id: string) => await approveSignPasswordV2({ id });
@@ -34,8 +37,7 @@ const handleSignature = async (id: string, { signature }: SigData) => await appr
 const modeCanSignMessage: AccountSignMode[] = [AccountSignMode.QR, AccountSignMode.PASSWORD];
 
 export const SubstrateSignArea = (props: Props) => {
-  const { account, id, payload } = props;
-  const navigation = useNavigation<RootNavigationProps>();
+  const { account, id, payload, navigation } = props;
   const { chainInfoMap } = useSelector((state: RootState) => state.chainStore);
 
   const [loading, setLoading] = useState(false);
@@ -113,6 +115,7 @@ export const SubstrateSignArea = (props: Props) => {
         break;
       default:
         setLoading(true);
+        Platform.OS === 'android' && setTimeout(() => DeviceEventEmitter.emit(OPEN_UNLOCK_FROM_MODAL), 250);
         onConfirmPassword(onApprovePassword)()?.catch(() => {
           setLoading(false);
         });

src/screens/Confirmations/variants/AuthorizeConfirmation/index.tsx

@@ -1,5 +1,4 @@
 import { KeypairType } from '@polkadot/util-crypto/types';
-import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { AccountAuthType, AccountJson, AuthorizeRequest } from '@subwallet/extension-base/background/types';
 import { ALL_ACCOUNT_KEY } from '@subwallet/extension-base/constants';
@@ -12,7 +11,7 @@ import useUnlockModal from 'hooks/modal/useUnlockModal';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import { PlusCircle, ShieldSlash, XCircle } from 'phosphor-react-native';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Text, View } from 'react-native';
+import { DeviceEventEmitter, Platform, Text, View } from 'react-native';
 import { approveAuthRequestV2, cancelAuthRequestV2, rejectAuthRequestV2 } from 'messaging/index';
 import { useSelector } from 'react-redux';
 import { RootStackParamList } from 'routes/index';
@@ -22,9 +21,11 @@ import { isAccountAll } from 'utils/accountAll';
 import i18n from 'utils/i18n/i18n';
 
 import createStyle from './styles';
+import { OPEN_UNLOCK_FROM_MODAL } from 'components/common/Modal/UnlockModal';
 
 interface Props {
   request: AuthorizeRequest;
+  navigation: NativeStackNavigationProp<RootStackParamList>;
 }
 
 async function handleConfirm({ id }: AuthorizeRequest, selectedAccounts: string[]) {
@@ -61,9 +62,8 @@ export const filterAuthorizeAccounts = (accounts: AccountJson[], accountAuthType
 };
 
 const AuthorizeConfirmation: React.FC<Props> = (props: Props) => {
-  const { request } = props;
+  const { request, navigation } = props;
   const { accountAuthType, allowedAccounts } = request.request;
-  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const theme = useSubWalletTheme().swThemes;
   const { accounts } = useSelector((state: RootState) => state.accountState);
   const styles = useMemo(() => createStyle(theme), [theme]);
@@ -231,7 +231,10 @@ const AuthorizeConfirmation: React.FC<Props> = (props: Props) => {
             </Button>
             <Button
               block={true}
-              onPress={onPressCreateOne(onAddAccount)}
+              onPress={() => {
+                Platform.OS === 'android' && setTimeout(() => DeviceEventEmitter.emit(OPEN_UNLOCK_FROM_MODAL), 250);
+                onPressCreateOne(onAddAccount);
+              }}
               icon={<Icon phosphorIcon={PlusCircle} weight="fill" />}>
               Create one
             </Button>

src/screens/Confirmations/variants/ConnectWalletConnectConfirmation/index.tsx

@@ -9,9 +9,8 @@ import {
 import useSelectWalletConnectAccount from 'hooks/wallet-connect/useSelectWalletConnectAccount';
 import { VoidFunction } from 'types/index';
 import { useToast } from 'react-native-toast-notifications';
-import { useNavigation } from '@react-navigation/native';
 import { convertKeyTypes } from 'utils/index';
-import { RootNavigationProps } from 'routes/index';
+import { RootStackParamList } from 'routes/index';
 import ConfirmationContent from '../../../../components/common/Confirmation/ConfirmationContent';
 import ConfirmationGeneralInfo from '../../../../components/common/Confirmation/ConfirmationGeneralInfo';
 import AlertBox from 'components/design-system-ui/alert-box';
@@ -29,9 +28,11 @@ import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from 'stores/index';
 import { Minimizer } from '../../../../NativeModules';
 import { updateIsDeepLinkConnect } from 'stores/base/Settings';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 interface Props {
   request: WalletConnectSessionRequest;
+  navigation: NativeStackNavigationProp<RootStackParamList>;
 }
 
 const handleConfirm = async ({ id }: WalletConnectSessionRequest, selectedAccounts: string[]) => {
@@ -47,8 +48,7 @@ const handleCancel = async ({ id }: WalletConnectSessionRequest) => {
   });
 };
 
-export const ConnectWalletConnectConfirmation = ({ request }: Props) => {
-  const navigation = useNavigation<RootNavigationProps>();
+export const ConnectWalletConnectConfirmation = ({ request, navigation }: Props) => {
   const { params } = request.request;
   const toast = useToast();
   const { hasMasterPassword } = useSelector((state: RootState) => state.accountState);

src/screens/Confirmations/variants/EvmSignatureConfirmation/index.tsx

@@ -8,14 +8,17 @@ import { BaseDetailModal, EvmMessageDetail, EvmSignArea } from 'screens/Confirma
 import { EvmSignatureSupportType } from 'types/confirmation';
 import i18n from 'utils/i18n/i18n';
 import createStyle from './styles';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RootStackParamList } from 'routes/index';
 
 interface Props {
   type: EvmSignatureSupportType;
   request: ConfirmationsQueueItem<EvmSignatureRequest>;
+  navigation: NativeStackNavigationProp<RootStackParamList>;
 }
 
 const EvmSignatureConfirmation: React.FC<Props> = (props: Props) => {
-  const { request, type } = props;
+  const { request, type, navigation } = props;
   const { id, payload } = request;
   const { account } = payload;
   const theme = useSubWalletTheme().swThemes;
@@ -33,7 +36,7 @@ const EvmSignatureConfirmation: React.FC<Props> = (props: Props) => {
           <EvmMessageDetail payload={payload} />
         </BaseDetailModal>
       </ConfirmationContent>
-      <EvmSignArea id={id} type={type} payload={request} />
+      <EvmSignArea id={id} type={type} payload={request} navigation={navigation} />
     </React.Fragment>
   );
 };

src/screens/Confirmations/variants/EvmTransactionConfirmation/index.tsx

@@ -11,10 +11,13 @@ import { BaseDetailModal, EvmSignArea, EvmTransactionDetail } from 'screens/Conf
 import { EvmSignatureSupportType } from 'types/confirmation';
 import i18n from 'utils/i18n/i18n';
 import createStyle from './styles';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RootStackParamList } from 'routes/index';
 
 interface Props {
   type: EvmSignatureSupportType;
   request: ConfirmationsQueueItem<EvmSendTransactionRequest>;
+  navigation: NativeStackNavigationProp<RootStackParamList>;
 }
 
 const convertToBigN = (num: EvmSendTransactionRequest['value']): string | number | undefined => {
@@ -26,7 +29,7 @@ const convertToBigN = (num: EvmSendTransactionRequest['value']): string | number
 };
 
 const EvmTransactionConfirmation: React.FC<Props> = (props: Props) => {
-  const { request, type } = props;
+  const { request, type, navigation } = props;
   const {
     id,
     payload: { account, chainId, to },
@@ -75,7 +78,7 @@ const EvmTransactionConfirmation: React.FC<Props> = (props: Props) => {
           <EvmTransactionDetail account={account} request={request.payload} />
         </BaseDetailModal>
       </ConfirmationContent>
-      <EvmSignArea id={id} type={type} payload={request} />
+      <EvmSignArea id={id} type={type} payload={request} navigation={navigation} />
     </React.Fragment>
   );
 };