Merge pull request #49630 from bernhardoj/fix/48712-use-recovery-text-blinking

Fix Use two-factor authentication code and Use recovery codes text blinks

Author: NikkiWines

Diff for: src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx

@@ -2,8 +2,7 @@ import {useIsFocused} from '@react-navigation/native';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import SafariFormWrapper from '@components/Form/SafariFormWrapper';
 import FormHelpMessage from '@components/FormHelpMessage';
@@ -30,24 +29,11 @@ import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Account, Credentials, Session} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type ValidateCodeFormProps from './types';
 
-type BaseValidateCodeFormOnyxProps = {
-    /** The details about the account that the user is signing in with */
-    account: OnyxEntry<Account>;
-
-    /** The credentials of the person logging in */
-    credentials: OnyxEntry<Credentials>;
-
-    /** Session info for the currently logged in user. */
-    session: OnyxEntry<Session>;
-};
-
 type BaseValidateCodeFormProps = WithToggleVisibilityViewProps &
-    ValidateCodeFormProps &
-    BaseValidateCodeFormOnyxProps & {
+    ValidateCodeFormProps & {
         /** Specifies autocomplete hints for the system, so it can provide autofill */
         autoComplete: 'sms-otp' | 'one-time-code';
     };
@@ -60,10 +46,10 @@ type ValidateCodeFormVariant = 'validateCode' | 'twoFactorAuthCode' | 'recoveryC
 
 type FormError = Partial<Record<ValidateCodeFormVariant, TranslationPaths>>;
 
-function BaseValidateCodeForm(
-    {account, credentials, session, autoComplete, isUsingRecoveryCode, setIsUsingRecoveryCode, isVisible}: BaseValidateCodeFormProps,
-    forwardedRef: ForwardedRef<BaseValidateCodeFormRef>,
-) {
+function BaseValidateCodeForm({autoComplete, isUsingRecoveryCode, setIsUsingRecoveryCode, isVisible}: BaseValidateCodeFormProps, forwardedRef: ForwardedRef<BaseValidateCodeFormRef>) {
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const [credentials] = useOnyx(ONYXKEYS.CREDENTIALS);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
@@ -345,10 +331,10 @@ function BaseValidateCodeForm(
                     )}
                     {hasError && <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(account)} />}
                     <PressableWithFeedback
+                        key={isUsingRecoveryCode.toString()}
                         style={[styles.mt2]}
                         onPress={switchBetween2faAndRecoveryCode}
                         hoverDimmingValue={1}
-                        pressDimmingValue={0.2}
                         disabled={isValidateCodeFormSubmitting}
                         role={CONST.ROLE.BUTTON}
                         accessibilityLabel={isUsingRecoveryCode ? translate('recoveryCodeForm.use2fa') : translate('recoveryCodeForm.useRecoveryCode')}
@@ -422,12 +408,6 @@ function BaseValidateCodeForm(
 
 BaseValidateCodeForm.displayName = 'BaseValidateCodeForm';
 
-export default withToggleVisibilityView(
-    withOnyx<BaseValidateCodeFormProps, BaseValidateCodeFormOnyxProps>({
-        account: {key: ONYXKEYS.ACCOUNT},
-        credentials: {key: ONYXKEYS.CREDENTIALS},
-        session: {key: ONYXKEYS.SESSION},
-    })(forwardRef(BaseValidateCodeForm)),
-);
+export default withToggleVisibilityView(forwardRef(BaseValidateCodeForm));
 
 export type {BaseValidateCodeFormRef};