Merge pull request #1011 from Koniverse/issue-1009

[issue-1009, issue-1010] Errors when authenticating using biometrics. Show error message when cancel transaction

src/components/common/Modal/DeriveAccountModal/index.tsx

@@ -26,7 +26,6 @@ import { OPEN_UNLOCK_FROM_MODAL } from '../UnlockModal';
 
 type Props = {
   deriveAccModalRef: React.MutableRefObject<ModalRef | undefined>;
-  goHome: () => void;
   navigation: NativeStackNavigationProp<RootStackParamList>;
 };
 
@@ -40,7 +39,7 @@ const renderLoaderIcon = (x: React.ReactNode): React.ReactNode => {
 };
 
 const DeriveAccountModal: React.FC<Props> = (props: Props) => {
-  const { deriveAccModalRef, goHome, navigation } = props;
+  const { deriveAccModalRef, navigation } = props;
   const theme = useSubWalletTheme().swThemes;
 
   const { accounts } = useSelector((state: RootState) => state.accountState);
@@ -77,7 +76,10 @@ const DeriveAccountModal: React.FC<Props> = (props: Props) => {
             address: account.address,
           })
             .then(() => {
-              goHome();
+              navigation.reset({
+                index: 0,
+                routes: [{ name: 'Home' }],
+              });
             })
             .catch((e: Error) => {
               toastError(e.message);
@@ -88,7 +90,7 @@ const DeriveAccountModal: React.FC<Props> = (props: Props) => {
         }, 500);
       };
     },
-    [goHome, toastError],
+    [navigation, toastError],
   );
 
   const { onPress: onPressSubmit } = useUnlockModal(navigation);

src/hooks/screen/useGoHome.ts

@@ -9,6 +9,9 @@ export default function useGoHome(
   const navigation = useNavigation<RootNavigationProps>();
 
   return useCallback(() => {
-    navigation.replace('Home', params);
+    navigation.reset({
+      index: 0,
+      routes: [{ name: 'Home', params }],
+    });
   }, [navigation, params]);
 }

src/hooks/transaction/useHandleSubmitTransaction.ts

@@ -9,7 +9,7 @@ const useHandleSubmitTransaction = (onDone: (id: string) => void, setIgnoreWarni
     (rs: SWTransactionResponse) => {
       const { errors, id, warnings } = rs;
       if (errors.length || warnings.length) {
-        if (errors[0]?.message !== 'User reject request') {
+        if (errors[0]?.message !== 'Rejected by user') {
           hideAll();
           show(errors[0]?.message || warnings[0]?.message, { type: 'danger' });
         }

src/hooks/useAppLock.ts

@@ -34,8 +34,8 @@ export default function useAppLock(): UseAppLockOptions {
 
   const resetPinCode = useCallback(() => {
     dispatch(updateLockState(false));
-    dispatch(updateUseBiometric(false));
     dispatch(resetBrowserSetting());
+    dispatch(updateUseBiometric(false));
     dispatch(updateAutoLockTime(LockTimeout._15MINUTE));
   }, [dispatch]);
 

src/screens/Account/AccountDetail/index.tsx

@@ -233,6 +233,7 @@ export const AccountDetail = ({
               />
             }
             disabled={!canDerive}
+            style={styles.noPaddingHorizontal}
             contentAlign="left"
             type="secondary"
             loading={deriving}
@@ -241,6 +242,7 @@ export const AccountDetail = ({
           </Button>
           <Button
             disabled={!canExport}
+            style={styles.noPaddingHorizontal}
             icon={
               <BackgroundIcon
                 phosphorIcon={Export}
@@ -267,6 +269,7 @@ export const AccountDetail = ({
               />
             }
             contentAlign="left"
+            style={styles.noPaddingHorizontal}
             type="secondary"
             loading={deleting}
             externalTextStyle={{ color: theme.colorError }}

src/screens/Account/AccountDetail/styles/index.ts

@@ -2,6 +2,7 @@ import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
 import { ThemeTypes } from 'styles/themes';
 
 export interface ComponentStyle {
+  noPaddingHorizontal: ViewStyle;
   inputContainer: ViewStyle;
   addressContainer: ViewStyle;
   nameContainer: ViewStyle;
@@ -51,5 +52,6 @@ export default (theme: ThemeTypes) => {
       color: theme.colorLink,
       textDecorationLine: 'underline',
     },
+    noPaddingHorizontal: { paddingHorizontal: 0 },
   });
 };

src/screens/Account/AttachReadOnly/index.tsx

@@ -12,7 +12,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Keyboard, ScrollView, View } from 'react-native';
 import { RootNavigationProps } from 'routes/index';
 import { QrAccount } from 'types/qr/attach';
-import { backToHome } from 'utils/navigation';
 import { readOnlyScan } from 'utils/scanner/attach';
 import { createAccountExternalV2 } from 'messaging/index';
 import i18n from 'utils/i18n/i18n';
@@ -67,8 +66,11 @@ const AttachReadOnly = () => {
   }, [navigation]);
 
   const onComplete = useCallback(() => {
-    backToHome(goHome);
-  }, [goHome]);
+    navigation.reset({
+      index: 0,
+      routes: [{ name: 'Home' }],
+    });
+  }, [navigation]);
 
   const onCloseScanner = useCallback(() => {
     setScanError(undefined);

src/screens/Account/ConnectQrSigner/index.tsx

@@ -23,7 +23,6 @@ import { Source } from 'react-native-fast-image';
 import { useToast } from 'react-native-toast-notifications';
 import { RootStackParamList } from 'routes/index';
 import { QrAccount } from 'types/qr/attach';
-import { backToHome } from 'utils/navigation';
 import createStyle from './styles';
 import i18n from 'utils/i18n/i18n';
 
@@ -54,8 +53,11 @@ const ConnectQrSigner: React.FC<Props> = (props: Props) => {
   const goHome = useGoHome();
 
   const onComplete = useCallback(() => {
-    backToHome(goHome);
-  }, [goHome]);
+    navigation.reset({
+      index: 0,
+      routes: [{ name: 'Home' }],
+    });
+  }, [navigation]);
   const onBack = navigation.goBack;
 
   const accountName = useGetDefaultAccountName();

src/screens/Account/CreateAccount/index.tsx

@@ -6,8 +6,6 @@ import { createAccountSuriV2, createSeedV2 } from 'messaging/index';
 import { useNavigation } from '@react-navigation/native';
 import { CreateAccountProps, RootNavigationProps } from 'routes/index';
 import i18n from 'utils/i18n/i18n';
-import { backToHome } from 'utils/navigation';
-import useGoHome from 'hooks/screen/useGoHome';
 import useHandlerHardwareBackPress from 'hooks/screen/useHandlerHardwareBackPress';
 import { EVM_ACCOUNT_TYPE, SUBSTRATE_ACCOUNT_TYPE } from 'constants/index';
 import useGetDefaultAccountName from 'hooks/useGetDefaultAccountName';
@@ -32,7 +30,6 @@ export const CreateAccount = ({ route: { params } }: CreateAccountProps) => {
   const [seed, setSeed] = useState<null | string>(null);
   const [isBusy, setIsBusy] = useState(false);
   const navigation = useNavigation<RootNavigationProps>();
-  const goHome = useGoHome();
   const accountName = useGetDefaultAccountName();
 
   useHandlerHardwareBackPress(isBusy);
@@ -68,7 +65,10 @@ export const CreateAccount = ({ route: { params } }: CreateAccountProps) => {
       })
         .then(() => {
           if (!params.isBack) {
-            backToHome(goHome);
+            navigation.reset({
+              index: 0,
+              routes: [{ name: 'Home' }],
+            });
           } else {
             navigation.goBack();
           }

src/screens/Account/ImportPrivateKey/index.tsx

@@ -8,7 +8,6 @@ import { Keyboard, ScrollView, View } from 'react-native';
 import { createAccountSuriV2, validateMetamaskPrivateKeyV2 } from 'messaging/index';
 import { Textarea } from 'components/Textarea';
 import { EVM_ACCOUNT_TYPE } from 'constants/index';
-import { backToHome } from 'utils/navigation';
 import useFormControl, { FormControlConfig } from 'hooks/screen/useFormControl';
 import useGoHome from 'hooks/screen/useGoHome';
 import useHandlerHardwareBackPress from 'hooks/screen/useHandlerHardwareBackPress';
@@ -68,7 +67,10 @@ export const ImportPrivateKey = () => {
       types: [EVM_ACCOUNT_TYPE],
     })
       .then(() => {
-        backToHome(goHome);
+        navigation.reset({
+          index: 0,
+          routes: [{ name: 'Home' }],
+        });
       })
       .catch((e: Error) => {
         setIsBusy(false);

src/screens/Account/ImportQrCode/index.tsx

@@ -12,7 +12,6 @@ import QrAddressScanner from 'components/Scanner/QrAddressScanner';
 import { SCAN_TYPE } from 'constants/qr';
 import useUnlockModal from 'hooks/modal/useUnlockModal';
 import useModalScanner from 'hooks/qr/useModalScanner';
-import useGoHome from 'hooks/screen/useGoHome';
 import useGetDefaultAccountName from 'hooks/useGetDefaultAccountName';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import { checkPublicAndPrivateKey, createAccountWithSecret } from 'messaging/index';
@@ -22,7 +21,6 @@ import { Text, View } from 'react-native';
 import { useToast } from 'react-native-toast-notifications';
 import { RootStackParamList } from 'routes/index';
 import { QrAccount } from 'types/qr/attach';
-import { backToHome } from 'utils/navigation';
 import createStyle from './styles';
 import i18n from 'utils/i18n/i18n';
 
@@ -52,7 +50,6 @@ const imageProps: Omit<SWImageProps, 'src'> = {
 
 const ImportQrCode: React.FC<Props> = (props: Props) => {
   const {} = props;
-  const goHome = useGoHome();
   const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const theme = useSubWalletTheme().swThemes;
   const toast = useToast();
@@ -62,8 +59,11 @@ const ImportQrCode: React.FC<Props> = (props: Props) => {
   const styles = useMemo(() => createStyle(theme), [theme]);
 
   const onComplete = useCallback(() => {
-    backToHome(goHome);
-  }, [goHome]);
+    navigation.reset({
+      index: 0,
+      routes: [{ name: 'Home' }],
+    });
+  }, [navigation]);
 
   const onBack = navigation.goBack;
 

src/screens/Account/ImportSecretPhrase/index.tsx

@@ -17,7 +17,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ScrollView, View } from 'react-native';
 import { RootNavigationProps } from 'routes/index';
 import i18n from 'utils/i18n/i18n';
-import { backToHome } from 'utils/navigation';
 import createStyle from './styles';
 
 const ViewStep = {
@@ -60,7 +59,10 @@ export const ImportSecretPhrase = () => {
       types: keyTypes,
     })
       .then(() => {
-        backToHome(goHome);
+        navigation.reset({
+          index: 0,
+          routes: [{ name: 'Home' }],
+        });
       })
       .catch(() => {
         setBusy(false);

src/screens/Account/RestoreJson/index.tsx

@@ -17,7 +17,6 @@ import { RootNavigationProps } from 'routes/index';
 import { Warning } from 'components/Warning';
 import { PasswordField } from 'components/Field/Password';
 import i18n from 'utils/i18n/i18n';
-import { backToHome } from 'utils/navigation';
 import { validatePassword } from 'screens/Shared/AccountNamePasswordCreation';
 import useFormControl, { FormControlConfig, FormState } from 'hooks/screen/useFormControl';
 import { ContainerWithSubHeader } from 'components/ContainerWithSubHeader';
@@ -126,7 +125,10 @@ export const RestoreJson = () => {
         onUpdateErrors('password')([]);
         setAccountsInfo(() => []);
         if (!isMultiple) {
-          backToHome(goHome);
+          navigation.reset({
+            index: 0,
+            routes: [{ name: 'Home' }],
+          });
         }
       })
       .catch(e => {

src/screens/Home/Browser/BrowserTab.tsx

@@ -269,7 +269,10 @@ const Component = ({ tabId, onOpenBrowserTabs, connectionTrigger }: Props, ref:
     if (navigation.canGoBack()) {
       navigation.navigate('Home', { screen: 'Browser' });
     } else {
-      navigation.replace('Home', { screen: 'Browser' });
+      navigation.reset({
+        index: 0,
+        routes: [{ name: 'Home', params: { screen: 'Browser' } }],
+      });
     }
   };
 

src/screens/Home/Browser/BrowserTabs.tsx

@@ -43,7 +43,10 @@ export const BrowserTabs = ({ activeTab, tabs, navigation, onClose, onPressTabIt
     if (navigation.canGoBack()) {
       navigation.navigate('Home', { screen: 'Browser' });
     } else {
-      navigation.replace('Home', { screen: 'Browser' });
+      navigation.reset({
+        index: 0,
+        routes: [{ name: 'Home', params: { screen: 'Browser' } }],
+      });
     }
   }, [navigation]);
 

src/screens/Home/Browser/BrowserTabsManager.tsx

@@ -227,7 +227,10 @@ export const BrowserTabsManager = ({ route: { params } }: BrowserTabsManagerProp
       if (navigation.canGoBack()) {
         navigation.navigate('Home');
       } else {
-        navigation.replace('Home');
+        navigation.reset({
+          index: 0,
+          routes: [{ name: 'Home' }],
+        });
       }
     }
   }, [navigation, isEmptyAccounts]);

src/screens/MasterPassword/Login/index.tsx

@@ -26,7 +26,12 @@ import { useToast } from 'react-native-toast-notifications';
 import useHandlerHardwareBackPress from 'hooks/screen/useHandlerHardwareBackPress';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from 'routes/index';
-import { createKeychainPassword, getKeychainPassword, getSupportedBiometryType } from 'utils/account';
+import {
+  createKeychainPassword,
+  getKeychainPassword,
+  getSupportedBiometryType,
+  resetKeychainPassword,
+} from 'utils/account';
 import { updateFaceIdEnable, updateUseBiometric } from 'stores/MobileSettings';
 import { FORCE_HIDDEN_EVENT } from 'components/design-system-ui/modal/ModalBaseV2';
 import MigrateToKeychainPasswordModal from '../MigrateToKeychainPasswordModal';
@@ -132,8 +137,6 @@ const Login: React.FC<LoginProps> = ({ navigation }) => {
     // Deprecated: Migrate master password for biometric user
     if (!isKeychainEnabled && buildNumber <= BEFORE_KEYCHAIN_BUILD_NUMBER && buildNumber > 1) {
       setModalMigrateVisible(true);
-      dispatch(setBuildNumber(1));
-      mmkvStore.set('isKeychainEnabled', true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -224,17 +227,27 @@ const Login: React.FC<LoginProps> = ({ navigation }) => {
             .finally(() => {
               _setLoading(false);
               setModalVisible(false);
-              resetAll && resetPinCode();
+              if (resetAll) {
+                resetPinCode();
+              } else {
+                dispatch(updateUseBiometric(false));
+                resetKeychainPassword();
+              }
             });
         }, 300);
       };
     },
-    [toast, resetPinCode],
+    [toast, resetPinCode, dispatch],
   );
   const onToggleModal = () => setModalVisible(state => !state);
 
   const dismissKeyboard = () => Keyboard.dismiss();
 
+  const neverShowMigrateBiometricModalAgain = () => {
+    dispatch(setBuildNumber(1));
+    mmkvStore.set('isKeychainEnabled', true);
+  };
+
   return (
     <ImageBackground source={Images.backgroundImg} resizeMode={'cover'} style={imageBackgroundStyle}>
       <TouchableWithoutFeedback onPress={dismissKeyboard}>
@@ -299,6 +312,7 @@ const Login: React.FC<LoginProps> = ({ navigation }) => {
           modalVisible={modalMigrateVisible}
           setModalVisible={setModalMigrateVisible}
           isBiometricV1Enabled={faceIdEnabled && !isUseBiometric}
+          onPress={neverShowMigrateBiometricModalAgain}
         />
       )}
     </ImageBackground>

src/screens/MasterPassword/MigrateToKeychainPasswordModal/index.tsx

@@ -11,14 +11,16 @@ interface Props {
   modalVisible: boolean;
   setModalVisible: (arg: boolean) => void;
   isBiometricV1Enabled: boolean;
+  onPress: () => void;
 }
 
-const MigrateToKeychainPasswordModal = ({ modalVisible, setModalVisible, isBiometricV1Enabled }: Props) => {
+const MigrateToKeychainPasswordModal = ({ modalVisible, setModalVisible, isBiometricV1Enabled, onPress }: Props) => {
   const theme = useSubWalletTheme().swThemes;
   const _style = ModalStyle(theme);
 
   const onPressButton = () => {
     setModalVisible(false);
+    !!onPress && onPress();
   };
 
   return (