@bifold/core 2.0.1 → 2.1.0

package/src/screens/PINEnter.tsx

@@ -1,40 +1,34 @@
-import { useNavigation } from '@react-navigation/native'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Keyboard, StyleSheet, View, DeviceEventEmitter, InteractionManager, Pressable } from 'react-native'
+import { DeviceEventEmitter, InteractionManager, Keyboard, Pressable, StyleSheet, View } from 'react-native'
 
 import Button, { ButtonType } from '../components/buttons/Button'
+import { InlineErrorType, InlineMessageProps } from '../components/inputs/InlineErrorText'
 import PINInput from '../components/inputs/PINInput'
 import { InfoBoxType } from '../components/misc/InfoBox'
+import DeveloperModal from '../components/modals/DeveloperModal'
 import PopupModal from '../components/modals/PopupModal'
+import { ThemedText } from '../components/texts/ThemedText'
 import KeyboardView from '../components/views/KeyboardView'
-import { minPINLength, EventTypes, defaultAutoLockTime, attemptLockoutConfig } from '../constants'
+import { EventTypes, attemptLockoutConfig, defaultAutoLockTime, minPINLength } from '../constants'
 import { TOKENS, useServices } from '../container-api'
 import { useAnimatedComponents } from '../contexts/animated-components'
 import { useAuth } from '../contexts/auth'
 import { DispatchAction } from '../contexts/reducers/store'
 import { useStore } from '../contexts/store'
 import { useTheme } from '../contexts/theme'
+import { useDeveloperMode } from '../hooks/developer-mode'
+import { useLockout } from '../hooks/lockout'
+import { useGotoPostAuthScreens } from '../hooks/onboarding'
+import usePreventScreenCapture from '../hooks/screen-capture'
 import { BifoldError } from '../types/error'
-import { Screens } from '../types/navigators'
-import { hashPIN } from '../utils/crypto'
 import { testIdWithKey } from '../utils/testable'
-import { InlineErrorType, InlineMessageProps } from '../components/inputs/InlineErrorText'
-import { ThemedText } from '../components/texts/ThemedText'
 
 interface PINEnterProps {
   setAuthenticated: (status: boolean) => void
-  usage?: PINEntryUsage
-  onCancelAuth?: React.Dispatch<React.SetStateAction<boolean>>
-}
-
-export enum PINEntryUsage {
-  PINCheck,
-  WalletUnlock,
-  ChangeBiometrics,
 }
 
-const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryUsage.WalletUnlock, onCancelAuth }) => {
+const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated }) => {
   const { t } = useTranslation()
   const { checkWalletPIN, getWalletSecret, isBiometricsActive, disableBiometrics } = useAuth()
   const [store, dispatch] = useStore()
@@ -42,186 +36,35 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
   const [continueEnabled, setContinueEnabled] = useState(true)
   const [displayLockoutWarning, setDisplayLockoutWarning] = useState(false)
   const [biometricsErr, setBiometricsErr] = useState(false)
-  const navigation = useNavigation()
-  const [alertModalVisible, setAlertModalVisible] = useState<boolean>(false)
-  const [biometricsEnrollmentChange, setBiometricsEnrollmentChange] = useState<boolean>(false)
-  const { ColorPallet, TextTheme, Assets, PINEnterTheme } = useTheme()
+  const [alertModalVisible, setAlertModalVisible] = useState(false)
+  const [devModalVisible, setDevModalVisible] = useState(false)
+  const [biometricsEnrollmentChange, setBiometricsEnrollmentChange] = useState(false)
+  const { ColorPallet } = useTheme()
   const { ButtonLoading } = useAnimatedComponents()
-  const [
-    logger,
-    { enableHiddenDevModeTrigger, attemptLockoutConfig: { baseRules, thresholdRules } = attemptLockoutConfig },
-  ] = useServices([TOKENS.UTIL_LOGGER, TOKENS.CONFIG])
-  const developerOptionCount = useRef(0)
-  const touchCountToEnableBiometrics = 9
+  const [logger, { preventScreenCapture, enableHiddenDevModeTrigger, attemptLockoutConfig: { thresholdRules } = attemptLockoutConfig }] =
+    useServices([TOKENS.UTIL_LOGGER, TOKENS.CONFIG])
   const [inlineMessageField, setInlineMessageField] = useState<InlineMessageProps>()
   const [inlineMessages] = useServices([TOKENS.INLINE_ERRORS])
   const [alertModalMessage, setAlertModalMessage] = useState('')
-  // Temporary until all use cases are built with the new design
-  const isNewDesign = usage === PINEntryUsage.ChangeBiometrics
-
-  const style = StyleSheet.create({
-    screenContainer: {
-      height: '100%',
-      backgroundColor: ColorPallet.brand.primaryBackground,
-      padding: 20,
-      justifyContent: 'space-between',
-    },
-    // below used as helpful labels for views, no properties needed atp
-    contentContainer: {},
-    controlsContainer: {},
-    buttonContainer: {
-      width: '100%',
-    },
-    notifyText: {
-      ...TextTheme.normal,
-      marginVertical: 5,
-    },
-    helpText: {
-      alignSelf: 'auto',
-      textAlign: 'left',
-      marginBottom: isNewDesign ? 40 : 16,
-    },
-    parenthesisText: {
-      ...TextTheme.caption,
-    },
-    modalText: {
-      marginVertical: 5,
-    },
-    image: {
-      ...PINEnterTheme.image,
-      height: Assets.img.logoSecondary.height,
-      width: Assets.img.logoSecondary.width,
-      resizeMode: Assets.img.logoSecondary.resizeMode,
-    },
-    title: {
-      marginTop: isNewDesign ? 20 : 0,
-      marginBottom: isNewDesign ? 40 : 20,
-    },
-    subTitle: {
-      marginBottom: 20,
-    },
-    subText: {
-      marginBottom: isNewDesign ? 20 : 4,
-    },
-  })
-
-  const inputLabelText = {
-    [PINEntryUsage.ChangeBiometrics]: t('PINEnter.ChangeBiometricsInputLabel'),
-    [PINEntryUsage.PINCheck]: t('PINEnter.AppSettingChangedEnterPIN'),
-    [PINEntryUsage.WalletUnlock]: t('PINEnter.EnterPIN'),
-  }
-
-  const inputTestId = {
-    [PINEntryUsage.ChangeBiometrics]: 'BiometricChangedEnterPIN',
-    [PINEntryUsage.PINCheck]: 'AppSettingChangedEnterPIN',
-    [PINEntryUsage.WalletUnlock]: 'EnterPIN',
-  }
-
-  const primaryButtonText = {
-    [PINEntryUsage.ChangeBiometrics]: t('Global.Continue'),
-    [PINEntryUsage.PINCheck]: t('PINEnter.AppSettingSave'),
-    [PINEntryUsage.WalletUnlock]: t('PINEnter.Unlock'),
-  }
-
-  const primaryButtonTestId = {
-    [PINEntryUsage.ChangeBiometrics]: 'Continue',
-    [PINEntryUsage.PINCheck]: 'AppSettingSave',
-    [PINEntryUsage.WalletUnlock]: 'Enter',
-  }
-
-  const incrementDeveloperMenuCounter = useCallback(() => {
-    if (developerOptionCount.current >= touchCountToEnableBiometrics) {
-      developerOptionCount.current = 0
-      dispatch({
-        type: DispatchAction.ENABLE_DEVELOPER_MODE,
-        payload: [true],
-      })
-
-      navigation.navigate(Screens.Developer as never)
-
-      return
-    }
-
-    developerOptionCount.current = developerOptionCount.current + 1
-  }, [dispatch, navigation])
-
-  const gotoPostAuthScreens = useCallback(() => {
-    if (store.onboarding.postAuthScreens.length) {
-      const screen = store.onboarding.postAuthScreens[0]
-      if (screen) {
-        navigation.navigate(screen as never)
-      }
-    }
-  }, [store.onboarding.postAuthScreens, navigation])
-
-  const isContinueDisabled = (): boolean => {
-    if (inlineMessages.enabled) {
-      return !continueEnabled
-    }
-
-    return !continueEnabled || PIN.length < minPINLength
-  }
+  const { getLockoutPenalty, attemptLockout, unMarkServedPenalty } = useLockout()
+  const onBackPressed = () => setDevModalVisible(false)
+  const onDevModeTriggered = () => setDevModalVisible(true)
+  const { incrementDeveloperMenuCounter } = useDeveloperMode(onDevModeTriggered)
+  const gotoPostAuthScreens = useGotoPostAuthScreens()
+  const isContinueDisabled = inlineMessages.enabled ? !continueEnabled : !continueEnabled || PIN.length < minPINLength
+  usePreventScreenCapture(preventScreenCapture)
 
   // listen for biometrics error event
   useEffect(() => {
     const handle = DeviceEventEmitter.addListener(EventTypes.BIOMETRY_ERROR, (value?: boolean) => {
       setBiometricsErr((prev) => value ?? !prev)
     })
-
     return () => {
       handle.remove()
     }
   }, [])
 
-  // This method is used to notify the app that the user is able to receive
-  // another lockout penalty
-  const unMarkServedPenalty = useCallback(() => {
-    dispatch({
-      type: DispatchAction.ATTEMPT_UPDATED,
-      payload: [
-        {
-          loginAttempts: store.loginAttempt.loginAttempts,
-          lockoutDate: undefined,
-          servedPenalty: undefined,
-        },
-      ],
-    })
-  }, [dispatch, store.loginAttempt.loginAttempts])
-
-  const attemptLockout = useCallback(
-    async (penalty: number) => {
-      // set the attempt lockout time
-      dispatch({
-        type: DispatchAction.ATTEMPT_UPDATED,
-        payload: [
-          {
-            loginAttempts: store.loginAttempt.loginAttempts + 1,
-            lockoutDate: Date.now() + penalty,
-            servedPenalty: false,
-          },
-        ],
-      })
-    },
-    [dispatch, store.loginAttempt.loginAttempts]
-  )
-
-  const getLockoutPenalty = useCallback(
-    (attempts: number): number | undefined => {
-      let penalty = baseRules[attempts]
-      if (!penalty && attempts >= thresholdRules.threshold && !(attempts % thresholdRules.increment)) {
-        penalty = thresholdRules.thresholdPenaltyDuration
-      }
-
-      return penalty
-    },
-    [baseRules, thresholdRules]
-  )
-
   const loadWalletCredentials = useCallback(async () => {
-    if (usage === PINEntryUsage.PINCheck || usage === PINEntryUsage.ChangeBiometrics) {
-      return
-    }
-
     const walletSecret = await getWalletSecret()
     if (walletSecret) {
       // remove lockout notification
@@ -229,24 +72,21 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
         type: DispatchAction.LOCKOUT_UPDATED,
         payload: [{ displayNotification: false }],
       })
-
       // reset login attempts if login is successful
       dispatch({
         type: DispatchAction.ATTEMPT_UPDATED,
         payload: [{ loginAttempts: 0 }],
       })
-
       setAuthenticated(true)
       gotoPostAuthScreens()
     }
-  }, [usage, getWalletSecret, dispatch, setAuthenticated, gotoPostAuthScreens])
+  }, [getWalletSecret, dispatch, setAuthenticated, gotoPostAuthScreens])
 
   useEffect(() => {
     const handle = InteractionManager.runAfterInteractions(async () => {
       if (!store.preferences.useBiometry) {
         return
       }
-
       try {
         const active = await isBiometricsActive()
         if (!active) {
@@ -284,74 +124,59 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
       try {
         setContinueEnabled(false)
         const result = await checkWalletPIN(PIN)
-
         if (store.loginAttempt.servedPenalty) {
           // once the user starts entering their PIN, unMark them as having served their
           // lockout penalty
           unMarkServedPenalty()
         }
-
         if (!result) {
           const newAttempt = store.loginAttempt.loginAttempts + 1
-
+          let message = ''
           const attemptsLeft =
             (thresholdRules.increment - (newAttempt % thresholdRules.increment)) % thresholdRules.increment
-
           if (!inlineMessages.enabled && !getLockoutPenalty(newAttempt)) {
             // skip displaying modals if we are going to lockout
             setAlertModalVisible(true)
           }
           if (attemptsLeft > 1) {
-            if (inlineMessages.enabled) {
-              setInlineMessageField({
-                message: t('PINEnter.IncorrectPINTries', { tries: attemptsLeft }), // Example: 'Incorrect PIN: 4 tries before timeout'
-                inlineType: InlineErrorType.error,
-                config: inlineMessages,
-              })
-            } else {
-              setAlertModalMessage(t('PINEnter.IncorrectPINTries', { tries: attemptsLeft }))
-            }
+            message = t('PINEnter.IncorrectPINTries', { tries: attemptsLeft })
           } else if (attemptsLeft === 1) {
-            if (inlineMessages.enabled) {
-              setInlineMessageField({
-                message: t('PINEnter.LastTryBeforeTimeout'), // Show last try warning
-                inlineType: InlineErrorType.error,
-                config: inlineMessages,
-              })
-            } else {
-              setAlertModalMessage(t('PINEnter.LastTryBeforeTimeout'))
-            }
+            message = t('PINEnter.LastTryBeforeTimeout')
           } else {
             const penalty = getLockoutPenalty(newAttempt)
             if (penalty !== undefined) {
               attemptLockout(penalty) // Only call attemptLockout if penalty is defined
             }
+            setContinueEnabled(true)
             return
           }
-
+          if (inlineMessages.enabled) {
+            setInlineMessageField({
+              message,
+              inlineType: InlineErrorType.error,
+              config: inlineMessages,
+            })
+          } else {
+            setAlertModalMessage(message)
+          }
           setContinueEnabled(true)
-
           // log incorrect login attempts
           dispatch({
             type: DispatchAction.ATTEMPT_UPDATED,
             payload: [{ loginAttempts: newAttempt }],
           })
-
           return
         }
-
         // reset login attempts if login is successful
         dispatch({
           type: DispatchAction.ATTEMPT_UPDATED,
           payload: [{ loginAttempts: 0 }],
         })
-
         // remove lockout notification if login is successful
         dispatch({
           type: DispatchAction.LOCKOUT_UPDATED,
           payload: [{ displayNotification: false }],
         })
-
         setAuthenticated(true)
         gotoPostAuthScreens()
       } catch (err: unknown) {
@@ -380,54 +205,8 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
   )
 
   const clearAlertModal = useCallback(() => {
-    switch (usage) {
-      case PINEntryUsage.PINCheck:
-        setAlertModalVisible(false)
-        setAuthenticated(false)
-        break
-      case PINEntryUsage.ChangeBiometrics:
-        setAlertModalVisible(false)
-        setAuthenticated(false)
-        break
-
-      default:
-        setAlertModalVisible(false)
-
-        break
-    }
-
     setAlertModalVisible(false)
-  }, [usage, setAuthenticated])
-
-  const verifyPIN = useCallback(
-    async (PIN: string) => {
-      try {
-        const walletSecret = await getWalletSecret()
-        if (!walletSecret) {
-          throw new Error('Wallet secret not found')
-        }
-
-        const key = await hashPIN(PIN, walletSecret.salt)
-
-        if (walletSecret.key !== key) {
-          setAlertModalVisible(true)
-
-          return
-        }
-
-        setAuthenticated(true)
-      } catch (err: unknown) {
-        const error = new BifoldError(
-          t('Error.Title1042'),
-          t('Error.Message1042'),
-          (err as Error)?.message ?? err,
-          1042
-        )
-        DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
-      }
-    },
-    [getWalletSecret, setAuthenticated, t]
-  )
+  }, [setAlertModalVisible])
 
   // both of the async functions called in this function are completely wrapped in try catch
   const onPINInputCompleted = useCallback(
@@ -438,109 +217,95 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
           inlineType: InlineErrorType.error,
           config: inlineMessages,
         })
-
         return
       }
-
       setContinueEnabled(false)
-
-      if (usage === PINEntryUsage.PINCheck || usage === PINEntryUsage.ChangeBiometrics) {
-        await verifyPIN(PIN)
-      }
-
-      if (usage === PINEntryUsage.WalletUnlock) {
-        await unlockWalletWithPIN(PIN)
-      }
+      await unlockWalletWithPIN(PIN)
     },
-    [usage, verifyPIN, unlockWalletWithPIN, t, inlineMessages]
+    [unlockWalletWithPIN, t, inlineMessages]
   )
 
-  const displayHelpText = useCallback(() => {
+  const style = StyleSheet.create({
+    screenContainer: {
+      height: '100%',
+      padding: 20,
+      justifyContent: 'space-between',
+      backgroundColor: ColorPallet.brand.primaryBackground,
+    },
+    buttonContainer: {
+      width: '100%',
+    },
+    biometricsButtonContainer: {
+      width: '100%',
+      marginTop: 10,
+    },
+    biometricsText: {
+      alignSelf: 'center',
+      marginTop: 10,
+    },
+    helpText: {
+      alignSelf: 'auto',
+      textAlign: 'left',
+      marginBottom: 16,
+    },
+    inputLabel: {
+      marginBottom: 16,
+    },
+    modalText: {
+      marginVertical: 5,
+    },
+    subTitle: {
+      marginBottom: 20,
+    },
+  })
+
+  const HelpText = useMemo(() => {
+    const showHelpText = store.lockout.displayNotification || biometricsEnrollmentChange || biometricsErr
+    let header = t('PINEnter.Title')
+    let subheader = t('PINEnter.SubText')
     if (store.lockout.displayNotification) {
-      return (
-        <>
-          <ThemedText style={style.helpText}>
-            {t('PINEnter.LockedOut', { time: String(store.preferences.autoLockTime ?? defaultAutoLockTime) })}
-          </ThemedText>
-          <ThemedText style={style.helpText}>{t('PINEnter.ReEnterPIN')}</ThemedText>
-        </>
-      )
+      header = t('PINEnter.LockedOut', { time: String(store.preferences.autoLockTime ?? defaultAutoLockTime) })
+      subheader = t('PINEnter.ReEnterPIN')
     }
-
     if (biometricsEnrollmentChange) {
-      return (
-        <>
-          <ThemedText style={style.helpText}>{t('PINEnter.BiometricsChanged')}</ThemedText>
-          <ThemedText style={style.helpText}>{t('PINEnter.BiometricsChangedEnterPIN')}</ThemedText>
-        </>
-      )
+      header = t('PINEnter.BiometricsChanged')
+      subheader = t('PINEnter.BiometricsChangedEnterPIN')
     }
-
     if (biometricsErr) {
-      return (
-        <>
-          <ThemedText style={style.helpText}>{t('PINEnter.BiometricsError')}</ThemedText>
-          <ThemedText style={style.helpText}>{t('PINEnter.BiometricsErrorEnterPIN')}</ThemedText>
-        </>
-      )
-    }
-
-    if (usage === PINEntryUsage.PINCheck) {
-      return <ThemedText style={style.helpText}>{t('PINEnter.AppSettingChanged')}</ThemedText>
+      header = t('PINEnter.BiometricsError')
+      subheader = t('PINEnter.BiometricsErrorEnterPIN')
     }
-
-    if (usage === PINEntryUsage.ChangeBiometrics) {
-      return (
-        <>
-          <ThemedText variant="headingTwo" style={style.title}>
-            {t('PINEnter.ChangeBiometricsHeader')}
-          </ThemedText>
-          <ThemedText style={style.helpText}>{t('PINEnter.ChangeBiometricsSubtext')}</ThemedText>
-        </>
-      )
-    }
-
     return (
       <>
-        <ThemedText variant="headingTwo" style={style.title}>
-          {t('PINEnter.Title')}
+        <ThemedText variant={showHelpText ? 'normal' : 'headingThree'} style={style.helpText}>
+          {header}
         </ThemedText>
-        <ThemedText variant="labelSubtitle" style={style.subTitle}>
-          {t('PINEnter.SubText')}
+        <ThemedText variant={showHelpText ? 'normal' : 'labelSubtitle'} style={style.helpText}>
+          {subheader}
         </ThemedText>
       </>
     )
   }, [
-    store.lockout.displayNotification,
     style.helpText,
+    store.lockout.displayNotification,
     t,
     biometricsEnrollmentChange,
     biometricsErr,
-    style.title,
-    style.subTitle,
     store.preferences.autoLockTime,
-    usage,
   ])
 
   return (
     <KeyboardView>
       <View style={style.screenContainer}>
-        <View style={style.contentContainer}>
-          {usage === PINEntryUsage.WalletUnlock && enableHiddenDevModeTrigger ? (
-            <Pressable onPress={incrementDeveloperMenuCounter} testID={testIdWithKey('DeveloperCounter')}>
-              {displayHelpText()}
-            </Pressable>
-          ) : (
-            displayHelpText()
-          )}
-          <ThemedText variant="bold" style={style.subText}>
-            {inputLabelText[usage]}
-            {usage === PINEntryUsage.ChangeBiometrics && (
-              <ThemedText style={style.parenthesisText}>
-                {' '}
-                {t('PINEnter.ChangeBiometricsInputLabelParenthesis')}
-              </ThemedText>
-            )}
+        <View>
+          <Pressable
+            onPress={enableHiddenDevModeTrigger ? incrementDeveloperMenuCounter : () => {}}
+            testID={testIdWithKey('DeveloperCounter')}
+          >
+            {HelpText}
+          </Pressable>
+          <ThemedText variant="bold" style={style.inputLabel}>
+            {t('PINEnter.EnterPIN')}
           </ThemedText>
           <PINInput
             onPINChanged={(p: string) => {
@@ -549,20 +314,20 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
                 Keyboard.dismiss()
               }
             }}
-            testID={testIdWithKey(inputTestId[usage])}
-            accessibilityLabel={inputLabelText[usage]}
+            testID={testIdWithKey('EnterPIN')}
+            accessibilityLabel={t('PINEnter.EnterPIN')}
             autoFocus={true}
             inlineMessage={inlineMessageField}
           />
         </View>
-        <View style={style.controlsContainer}>
+        <View>
           <View style={style.buttonContainer}>
             <Button
-              title={primaryButtonText[usage]}
+              title={t('PINEnter.Unlock')}
               buttonType={ButtonType.Primary}
-              testID={testIdWithKey(primaryButtonTestId[usage])}
-              disabled={isContinueDisabled()}
-              accessibilityLabel={primaryButtonText[usage]}
+              testID={testIdWithKey('Enter')}
+              disabled={isContinueDisabled}
+              accessibilityLabel={t('PINEnter.Unlock')}
               onPress={() => {
                 Keyboard.dismiss()
                 onPINInputCompleted(PIN)
@@ -571,11 +336,10 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
               {!continueEnabled && <ButtonLoading />}
             </Button>
           </View>
-
-          {store.preferences.useBiometry && usage === PINEntryUsage.WalletUnlock && (
+          {store.preferences.useBiometry && (
             <>
-              <ThemedText style={{ alignSelf: 'center', marginTop: 10 }}>{t('PINEnter.Or')}</ThemedText>
-              <View style={[style.buttonContainer, { marginTop: 10 }]}>
+              <ThemedText style={style.biometricsText}>{t('PINEnter.Or')}</ThemedText>
+              <View style={style.biometricsButtonContainer}>
                 <Button
                   title={t('PINEnter.BiometricsUnlock')}
                   buttonType={ButtonType.Secondary}
@@ -587,26 +351,14 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
               </View>
             </>
           )}
-
-          {usage === PINEntryUsage.PINCheck && (
-            <View style={[style.buttonContainer, { marginTop: 10 }]}>
-              <Button
-                title={t('PINEnter.AppSettingCancel')}
-                buttonType={ButtonType.Secondary}
-                testID={testIdWithKey('AppSettingCancel')}
-                accessibilityLabel={t('PINEnter.AppSettingCancel')}
-                onPress={() => onCancelAuth?.(false)}
-              />
-            </View>
-          )}
         </View>
       </View>
-      {alertModalVisible && (
+      {alertModalVisible ? (
         <PopupModal
           notificationType={InfoBoxType.Info}
           title={t('PINEnter.IncorrectPIN')}
           bodyContent={
-            <View>
+            <>
               <ThemedText variant="popupModalText" style={style.modalText}>
                 {alertModalMessage}
               </ThemedText>
@@ -615,12 +367,13 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
                   {t('PINEnter.AttemptLockoutWarning')}
                 </ThemedText>
               ) : null}
-            </View>
+            </>
           }
           onCallToActionLabel={t('Global.Okay')}
           onCallToActionPressed={clearAlertModal}
         />
-      )}
+      ) : null}
+      {devModalVisible ? <DeveloperModal onBackPressed={onBackPressed} /> : null}
     </KeyboardView>
   )
 }