@bifold/core 2.4.5 → 2.5.0

package/src/navigators/TabStack.tsx

@@ -1,304 +0,0 @@
-import { useAgent } from '@credo-ts/react-hooks'
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
-import { useNavigation } from '@react-navigation/native'
-import { StackNavigationProp } from '@react-navigation/stack'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Text, useWindowDimensions, View, StyleSheet, DeviceEventEmitter } from 'react-native'
-import { isTablet } from 'react-native-device-info'
-import { OrientationType, useOrientationChange } from 'react-native-orientation-locker'
-import { SafeAreaView } from 'react-native-safe-area-context'
-
-import { AttachTourStep } from '../components/tour/AttachTourStep'
-import { EventTypes } from '../constants'
-import { TOKENS, useServices } from '../container-api'
-import { useNetwork } from '../contexts/network'
-import { DispatchAction } from '../contexts/reducers/store'
-import { useStore } from '../contexts/store'
-import { useTheme } from '../contexts/theme'
-import { BifoldError } from '../types/error'
-import { Screens, Stacks, TabStackParams, TabStacks } from '../types/navigators'
-import { connectFromScanOrDeepLink } from '../utils/helpers'
-import { testIdWithKey } from '../utils/testable'
-
-import CredentialStack from './CredentialStack'
-import HomeStack from './HomeStack'
-import { BaseTourID } from '../types/tour'
-import { ThemedText } from '../components/texts/ThemedText'
-
-const TabStack: React.FC = () => {
-  const { fontScale } = useWindowDimensions()
-  const badgeFontSize = useMemo(() => {
-    if (fontScale >= 1.2 && fontScale < 1.5) {
-      return {
-        fontSize: 15,
-        lineHeight: 15,
-      }
-    } else if (fontScale >= 1.5 && fontScale < 1.7) {
-      return {
-        fontSize: 10,
-        lineHeight: 10,
-      }
-    } else if (fontScale >= 1.7 && fontScale < 3) {
-      return {
-        fontSize: 8,
-        lineHeight: 8,
-      }
-    } else if (fontScale >= 3 && fontScale < 4) {
-      return {
-        fontSize: 6,
-        lineHeight: 6,
-      }
-    }
-    return null
-  }, [fontScale])
-  const [{ useNotifications }, { enableImplicitInvitations, enableReuseConnections }, logger] = useServices([
-    TOKENS.NOTIFICATIONS,
-    TOKENS.CONFIG,
-    TOKENS.UTIL_LOGGER,
-  ])
-  const notifications = useNotifications({})
-  const { t } = useTranslation()
-  const Tab = createBottomTabNavigator<TabStackParams>()
-  const { assertNetworkConnected } = useNetwork()
-  const { ColorPalette, TabTheme, TextTheme, Assets, NavigationTheme } = useTheme()
-  const [orientation, setOrientation] = useState(OrientationType.PORTRAIT)
-  const [store, dispatch] = useStore()
-  const { agent } = useAgent()
-  const navigation = useNavigation<StackNavigationProp<TabStackParams>>()
-  const showLabels = fontScale * TabTheme.tabBarTextStyle.fontSize < 18
-  const styles = StyleSheet.create({
-    tabBarIcon: {
-      flex: 1,
-    },
-  })
-
-  useOrientationChange((orientationType) => {
-    setOrientation(orientationType)
-  })
-
-  const leftMarginForDevice = () => {
-    if (isTablet()) {
-      return orientation in [OrientationType.PORTRAIT, OrientationType['PORTRAIT-UPSIDEDOWN']] ? 130 : 170
-    }
-
-    return 0
-  }
-
-  const handleDeepLink = useCallback(
-    async (deepLink: string) => {
-      logger.info(`Handling deeplink: ${deepLink}`)
-
-      // If it's just the general link with no params, set link inactive and do nothing
-      if (deepLink.search(/oob=|c_i=|d_m=|url=/) < 0) {
-        dispatch({
-          type: DispatchAction.ACTIVE_DEEP_LINK,
-          payload: [undefined],
-        })
-        return
-      }
-
-      try {
-        await connectFromScanOrDeepLink(
-          deepLink,
-          agent,
-          logger,
-          navigation,
-          true, // isDeepLink
-          enableImplicitInvitations,
-          enableReuseConnections
-        )
-      } catch (err: unknown) {
-        const error = new BifoldError(
-          t('Error.Title1039'),
-          t('Error.Message1039'),
-          (err as Error)?.message ?? err,
-          1039
-        )
-        DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
-      } finally {
-        dispatch({
-          type: DispatchAction.ACTIVE_DEEP_LINK,
-          payload: [undefined],
-        })
-      }
-    },
-    [agent, enableImplicitInvitations, enableReuseConnections, logger, navigation, t, dispatch]
-  )
-
-  useEffect(() => {
-    if (store.deepLink && agent && store.authentication.didAuthenticate) {
-      handleDeepLink(store.deepLink)
-    }
-  }, [store.deepLink, agent, store.authentication.didAuthenticate, handleDeepLink])
-
-  return (
-    <SafeAreaView style={{ flex: 1, backgroundColor: NavigationTheme.colors.primary }} edges={['left', 'right', 'top']}>
-      <Tab.Navigator
-        initialRouteName={TabStacks.HomeStack}
-        screenOptions={{
-          unmountOnBlur: true,
-          tabBarStyle: {
-            ...TabTheme.tabBarStyle,
-          },
-          tabBarActiveTintColor: TabTheme.tabBarActiveTintColor,
-          tabBarInactiveTintColor: TabTheme.tabBarInactiveTintColor,
-          header: () => null,
-        }}
-      >
-        <Tab.Screen
-          name={TabStacks.HomeStack}
-          component={HomeStack}
-          options={{
-            tabBarIconStyle: styles.tabBarIcon,
-            tabBarIcon: ({ color, focused }) => (
-              <AttachTourStep tourID={BaseTourID.HomeTour} index={1}>
-                <View style={{ ...TabTheme.tabBarContainerStyle, justifyContent: showLabels ? 'flex-end' : 'center' }}>
-                  {focused ? (
-                    <Assets.svg.tabOneFocusedIcon height={30} width={30} fill={color} />
-                  ) : (
-                    <Assets.svg.tabOneIcon height={30} width={30} fill={color} />
-                  )}
-                  {showLabels && (
-                    <Text
-                      style={{
-                        ...TabTheme.tabBarTextStyle,
-                        color: focused ? TabTheme.tabBarActiveTintColor : TabTheme.tabBarInactiveTintColor,
-                        fontWeight: focused ? TextTheme.bold.fontWeight : TextTheme.normal.fontWeight,
-                      }}
-                    >
-                      {t('TabStack.Home')}
-                    </Text>
-                  )}
-                </View>
-              </AttachTourStep>
-            ),
-            tabBarShowLabel: false,
-            tabBarAccessibilityLabel: `${t('TabStack.Home')} (${notifications.length ?? 0})`,
-            tabBarTestID: testIdWithKey(t('TabStack.Home')),
-            tabBarBadge: notifications.length || undefined,
-            tabBarBadgeStyle: {
-              marginLeft: leftMarginForDevice(),
-              backgroundColor: ColorPalette.semantic.error,
-              ...badgeFontSize,
-            },
-          }}
-        />
-        <Tab.Screen
-          name={TabStacks.ConnectStack}
-          options={{
-            tabBarIconStyle: styles.tabBarIcon,
-            tabBarIcon: ({ focused }) => (
-              <View
-                style={{
-                  position: 'relative',
-                  flex: 1,
-                  width: 90,
-                }}
-              >
-                <AttachTourStep tourID={BaseTourID.HomeTour} index={0} fill>
-                  <View
-                    style={{
-                      position: 'absolute',
-                      flexGrow: 1,
-                      width: 90,
-                      bottom: 0,
-                      minHeight: 90,
-                      margin: 'auto',
-                    }}
-                  >
-                    <AttachTourStep tourID={BaseTourID.CredentialsTour} index={0} fill>
-                      <View
-                        style={{
-                          flexGrow: 1,
-                          justifyContent: 'flex-end',
-                          alignItems: 'center',
-                        }}
-                      >
-                        <View
-                          accessible={true}
-                          accessibilityRole={'button'}
-                          accessibilityLabel={t('TabStack.Scan')}
-                          style={{ ...TabTheme.focusTabIconStyle }}
-                        >
-                          <Assets.svg.tabTwoIcon
-                            height={30}
-                            width={30}
-                            fill={TabTheme.tabBarButtonIconStyle.color}
-                            style={{ paddingLeft: 0.5, paddingRight: 0.5 }}
-                          />
-                        </View>
-
-                        {showLabels && (
-                          <ThemedText
-                            maxFontSizeMultiplier={1.2}
-                            style={{
-                              ...TabTheme.tabBarTextStyle,
-                              color: focused ? TabTheme.tabBarActiveTintColor : TabTheme.tabBarInactiveTintColor,
-                              marginTop: 5,
-                            }}
-                          >
-                            {t('TabStack.Scan')}
-                          </ThemedText>
-                        )}
-                      </View>
-                    </AttachTourStep>
-                  </View>
-                </AttachTourStep>
-              </View>
-            ),
-            tabBarShowLabel: false,
-            tabBarAccessibilityLabel: t('TabStack.Scan'),
-            tabBarTestID: testIdWithKey(t('TabStack.Scan')),
-          }}
-          listeners={({ navigation }) => ({
-            tabPress: (e) => {
-              e.preventDefault()
-              if (!assertNetworkConnected()) {
-                return
-              }
-              navigation.navigate(Stacks.ConnectStack, { screen: Screens.Scan })
-            },
-          })}
-        >
-          {() => <View />}
-        </Tab.Screen>
-        <Tab.Screen
-          name={TabStacks.CredentialStack}
-          component={CredentialStack}
-          options={{
-            tabBarIconStyle: styles.tabBarIcon,
-            tabBarIcon: ({ color, focused }) => (
-              <AttachTourStep tourID={BaseTourID.HomeTour} index={2}>
-                <View style={{ ...TabTheme.tabBarContainerStyle, justifyContent: showLabels ? 'flex-end' : 'center' }}>
-                  {focused ? (
-                    <Assets.svg.tabThreeFocusedIcon height={30} width={30} fill={color} />
-                  ) : (
-                    <Assets.svg.tabThreeIcon height={30} width={30} fill={color} />
-                  )}
-                  {showLabels && (
-                    <Text
-                      style={{
-                        ...TabTheme.tabBarTextStyle,
-                        color: focused ? TabTheme.tabBarActiveTintColor : TabTheme.tabBarInactiveTintColor,
-                        fontWeight: focused ? TextTheme.bold.fontWeight : TextTheme.normal.fontWeight,
-                      }}
-                    >
-                      {t('TabStack.Credentials')}
-                    </Text>
-                  )}
-                </View>
-              </AttachTourStep>
-            ),
-            tabBarShowLabel: false,
-            tabBarAccessibilityLabel: t('TabStack.Credentials'),
-            tabBarTestID: testIdWithKey(t('TabStack.Credentials')),
-          }}
-        />
-      </Tab.Navigator>
-      <SafeAreaView style={{ backgroundColor: TabTheme.tabBarSecondaryBackgroundColor }} edges={['bottom']} />
-    </SafeAreaView>
-  )
-}
-
-export default TabStack

package/src/navigators/defaultLayoutOptions.tsx

@@ -1,17 +0,0 @@
-import { ScreenLayoutConfig, Screens } from '../types/navigators'
-
-export const DefaultScreenLayoutOptions: ScreenLayoutConfig = {
-  [Screens.Terms]: {
-    customEdges: ['top', 'left', 'right'],
-  },
-  [Screens.OpenIDCredentialDetails]: {
-    customEdges: ['left', 'right'],
-  },
-  [Screens.OpenIDCredentialOffer]: {
-    customEdges: ['left', 'right', 'bottom'],
-  },
-  [Screens.OpenIDProofPresentation]: {
-    customEdges: ['left', 'right', 'bottom'],
-  },
-  //TODO: Add more screens here
-}

package/src/navigators/defaultStackOptions.tsx

@@ -1,102 +0,0 @@
-import { StackNavigationOptions } from '@react-navigation/stack'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import HeaderTitle from '../components/texts/HeaderTitle'
-import { ITheme, OnboardingTheme } from '../theme'
-import { ScreenOptionsType, Screens } from '../types/navigators'
-import { testIdWithKey } from '../utils/testable'
-import { TOKENS, useServices } from '../container-api'
-import HeaderWithBanner from '../components/views/HeaderWithBanner'
-
-export const DefaultScreenOptionsDictionary: ScreenOptionsType = {
-  [Screens.Preface]: {
-    headerTintColor: OnboardingTheme.headerTintColor,
-    headerLeft: () => false,
-  },
-  [Screens.Splash]: {
-    headerShown: false,
-  },
-  [Screens.Onboarding]: {
-    headerTintColor: OnboardingTheme.headerTintColor,
-    gestureEnabled: false,
-  },
-  [Screens.Terms]: {
-    headerTintColor: OnboardingTheme.headerTintColor,
-    headerBackTestID: testIdWithKey('Back'),
-  },
-  [Screens.CreatePIN]: {
-    headerBackTestID: testIdWithKey('Back'),
-  },
-  [Screens.ChangePIN]: {
-    headerBackTestID: testIdWithKey('Back'),
-  },
-  [Screens.NameWallet]: {
-    headerTintColor: OnboardingTheme.headerTintColor,
-    headerBackTestID: testIdWithKey('Back'),
-  },
-  [Screens.RenameWallet]: {
-    headerTintColor: OnboardingTheme.headerTintColor,
-    headerBackTestID: testIdWithKey('Back'),
-  },
-  [Screens.Biometry]: {
-    headerTintColor: OnboardingTheme.headerTintColor,
-    headerBackTestID: testIdWithKey('Back'),
-  },
-  [Screens.ToggleBiometry]: {
-    headerTintColor: OnboardingTheme.headerTintColor,
-    headerBackTestID: testIdWithKey('Back'),
-  },
-  [Screens.Developer]: {
-    headerTintColor: OnboardingTheme.headerTintColor,
-    headerBackTestID: testIdWithKey('Back'),
-  },
-  [Screens.PushNotifications]: {
-    headerTintColor: OnboardingTheme.headerTintColor,
-    headerBackTestID: testIdWithKey('Back'),
-  },
-  [Screens.TogglePushNotifications]: {
-    headerTintColor: OnboardingTheme.headerTintColor,
-    headerBackTestID: testIdWithKey('Back'),
-  },
-  [Screens.OpenIDCredentialDetails]: {
-    headerShown: true,
-  },
-  [Screens.OpenIDCredentialOffer]: {
-    headerShown: true,
-  },
-  [Screens.OpenIDProofPresentation]: {
-    headerShown: true,
-    headerRight: () => false,
-  },
-}
-
-export function useDefaultStackOptions({ ColorPalette }: ITheme): StackNavigationOptions {
-  const { t } = useTranslation()
-  const [{ globalScreenOptions }] = useServices([TOKENS.CONFIG])
-
-  return (
-    globalScreenOptions ?? {
-      headerTintColor: ColorPalette.brand.headerIcon,
-      headerShown: true,
-      headerBackTitleVisible: false,
-      headerTitleContainerStyle: {
-        flexShrink: 1,
-        maxWidth: '68%',
-        width: '100%',
-      },
-      headerStyle: {
-        elevation: 0,
-        shadowOffset: { width: 0, height: 6 },
-        shadowRadius: 6,
-        shadowColor: ColorPalette.grayscale.black,
-        shadowOpacity: 0.15,
-        borderBottomWidth: 0,
-      },
-      headerTitleAlign: 'center' as 'center' | 'left',
-      headerTitle: (props: { children: React.ReactNode }) => <HeaderTitle {...props} />,
-      header: (props) => <HeaderWithBanner {...props} />,
-      headerBackAccessibilityLabel: t('Global.Back'),
-    }
-  )
-}

package/src/navigators/index.ts

@@ -1,27 +0,0 @@
-import ConnectStack from './ConnectStack'
-import ContactStack from './ContactStack'
-import CredentialStack from './CredentialStack'
-import DeliveryStack from './DeliveryStack'
-import HomeStack from './HomeStack'
-import NotificationStack from './NotificationStack'
-import OnboardingStack from './OnboardingStack'
-import ProofRequestStack from './ProofRequestStack'
-import RootStack from './RootStack'
-import SettingStack from './SettingStack'
-import TabStack from './TabStack'
-import { useDefaultStackOptions } from './defaultStackOptions'
-
-export {
-  ConnectStack,
-  ContactStack,
-  CredentialStack,
-  DeliveryStack,
-  HomeStack,
-  NotificationStack,
-  OnboardingStack,
-  ProofRequestStack,
-  RootStack,
-  SettingStack,
-  TabStack,
-  useDefaultStackOptions,
-}

package/src/onboarding.ts

@@ -1,90 +0,0 @@
-import { Agent } from '@credo-ts/core'
-import { OnboardingTask, Screens } from './types/navigators'
-
-import { Config } from './types/config'
-import { State } from './types/state'
-
-export const isPrefaceComplete = (didSeePreface: boolean, showPreface: boolean): OnboardingTask => {
-  return { name: Screens.Preface, completed: (didSeePreface && showPreface) || !showPreface }
-}
-
-export const isUpdateCheckComplete = (): OnboardingTask => {
-  return { name: Screens.UpdateAvailable, completed: true }
-}
-
-export const isOnboardingTutorialComplete = (didCompleteTutorial: boolean): OnboardingTask => {
-  return { name: Screens.Onboarding, completed: didCompleteTutorial }
-}
-
-export const isTermsComplete = (didAgreeToTerms: number, termsVersion: number): OnboardingTask => {
-  return { name: Screens.Terms, completed: didAgreeToTerms === termsVersion }
-}
-
-export const isPINCreationComplete = (didCreatePIN: boolean): OnboardingTask => {
-  return { name: Screens.CreatePIN, completed: didCreatePIN }
-}
-
-export const isBiometryComplete = (didConsiderBiometry: boolean): OnboardingTask => {
-  return { name: Screens.Biometry, completed: didConsiderBiometry }
-}
-
-export const isPushNotificationComplete = (
-  didConsiderPushNotifications: boolean,
-  enablePushNotifications: any
-): OnboardingTask => {
-  return {
-    name: Screens.PushNotifications,
-    completed: !enablePushNotifications || (didConsiderPushNotifications && enablePushNotifications),
-  }
-}
-
-export const isNameWalletComplete = (didNameWallet: boolean, enableWalletNaming: boolean): OnboardingTask => {
-  return { name: Screens.NameWallet, completed: didNameWallet || !enableWalletNaming }
-}
-
-export const isAuthenticationComplete = (didCreatePIN: boolean, didAuthenticate: boolean): OnboardingTask => {
-  return { name: Screens.EnterPIN, completed: didAuthenticate || !didCreatePIN }
-}
-
-export const isAttemptLockoutComplete = (servedPenalty: boolean | undefined): OnboardingTask => {
-  return { name: Screens.AttemptLockout, completed: servedPenalty !== false }
-}
-
-export const isAgentInitializationComplete = (agent: Agent | null): OnboardingTask => {
-  return { name: Screens.Splash, completed: !!agent }
-}
-
-export const generateOnboardingWorkflowSteps = (
-  state: State,
-  config: Config,
-  termsVersion: number,
-  agent: Agent | null
-): Array<OnboardingTask> => {
-  const {
-    didSeePreface,
-    didCompleteTutorial,
-    didAgreeToTerms,
-    didCreatePIN,
-    didConsiderBiometry,
-    didConsiderPushNotifications,
-    didNameWallet,
-  } = state.onboarding
-  const { servedPenalty } = state.loginAttempt
-  const { didAuthenticate } = state.authentication
-  const { enableWalletNaming } = state.preferences
-  const { showPreface, enablePushNotifications } = config
-
-  return [
-    isPrefaceComplete(didSeePreface, showPreface ?? false),
-    isUpdateCheckComplete(),
-    isOnboardingTutorialComplete(didCompleteTutorial),
-    isTermsComplete(Number(didAgreeToTerms), termsVersion),
-    isPINCreationComplete(didCreatePIN),
-    isBiometryComplete(didConsiderBiometry),
-    isPushNotificationComplete(didConsiderPushNotifications, enablePushNotifications),
-    isNameWalletComplete(didNameWallet, enableWalletNaming),
-    isAttemptLockoutComplete(servedPenalty),
-    isAuthenticationComplete(didCreatePIN, didAuthenticate),
-    isAgentInitializationComplete(agent),
-  ]
-}

package/src/screens/AttemptLockout.tsx

@@ -1,153 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ScrollView, StyleSheet, View } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-
-import Button, { ButtonType } from '../components/buttons/Button'
-import { second, minute, hour } from '../constants'
-import { DispatchAction } from '../contexts/reducers/store'
-import { useStore } from '../contexts/store'
-import { useTheme } from '../contexts/theme'
-import { testIdWithKey } from '../utils/testable'
-import { ThemedText } from '../components/texts/ThemedText'
-import InfoTextBox from '../components/texts/InfoTextBox'
-
-interface Timer {
-  hours: number
-  minutes: number
-  seconds: number
-}
-
-const AttemptLockout: React.FC = () => {
-  const { ColorPalette, Assets, Spacing } = useTheme()
-  const { t } = useTranslation()
-  const [state, dispatch] = useStore()
-  const [time, setTime] = useState<Timer>()
-  const [timeoutDone, setTimeoutDone] = useState<boolean>(false)
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: ColorPalette.brand.primaryBackground,
-      paddingHorizontal: Spacing.lg,
-    },
-    title: {
-      textAlign: 'center',
-      marginBottom: Spacing.lg,
-    },
-    description: {
-      textAlign: 'center',
-      marginBottom: Spacing.lg,
-    },
-    actionContainer: {
-      marginBottom: Spacing.lg,
-    },
-    tryAgain: {
-      textAlign: 'center',
-    },
-    countDown: {
-      textAlign: 'center',
-    },
-    image: {
-      width: 150,
-      height: 150,
-      marginVertical: Spacing.lg,
-      alignSelf: 'center',
-    },
-  })
-
-  // update the countdown timer. Return true if the lockout penalty time is over
-  const updateTimeRemaining = useCallback((): boolean => {
-    let penaltyServed = true
-    const penalty = state.loginAttempt.lockoutDate
-    const currDate = Date.now()
-    if (penalty) {
-      let diff = penalty - currDate
-      if (diff > 0) {
-        penaltyServed = false
-        const hoursLeft = Math.floor(diff / hour)
-        diff = diff - hoursLeft * hour
-
-        const minutesLeft = Math.floor(diff / minute)
-        diff = diff - minutesLeft * minute
-
-        const secondsLeft = Math.floor(diff / second)
-        const timer: Timer = {
-          hours: hoursLeft,
-          minutes: minutesLeft,
-          seconds: secondsLeft,
-        }
-
-        setTime(timer)
-      }
-    }
-
-    return penaltyServed
-  }, [state.loginAttempt.lockoutDate])
-
-  // run once immediately at screen initialization
-  useEffect(() => {
-    setTimeoutDone(updateTimeRemaining())
-  }, [updateTimeRemaining])
-
-  // make sure set timeout only runs once
-  useEffect(() => {
-    const updateTimer = setTimeout(() => {
-      // calculate time remaining
-      const timerDone = updateTimeRemaining()
-      setTimeoutDone(timerDone)
-      if (timerDone) {
-        clearInterval(updateTimer)
-      }
-    }, 1000)
-  })
-
-  const unlock = useCallback(async () => {
-    dispatch({
-      type: DispatchAction.ATTEMPT_UPDATED,
-      payload: [{ loginAttempts: state.loginAttempt.loginAttempts, lockoutDate: undefined, servedPenalty: true }],
-    })
-  }, [dispatch, state.loginAttempt.loginAttempts])
-
-  return (
-    <SafeAreaView style={styles.container} edges={['bottom', 'left', 'right']}>
-      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ flexGrow: 1 }}>
-        <Assets.svg.appLockout style={styles.image} />
-        <ThemedText variant="headingThree" style={styles.title}>
-          {t('AttemptLockout.Title')}
-        </ThemedText>
-        <ThemedText style={styles.description}>{t('AttemptLockout.Description')}</ThemedText>
-        <View style={styles.actionContainer}>
-          {timeoutDone ? (
-            <Button
-              title={t('Global.TryAgain')}
-              buttonType={ButtonType.Primary}
-              testID={testIdWithKey('Enter')}
-              accessibilityLabel={t('Global.TryAgain')}
-              onPress={unlock}
-            />
-          ) : (
-            <View>
-              <ThemedText style={styles.tryAgain}>{t('AttemptLockout.TryAgain')}</ThemedText>
-              {time && (
-                <ThemedText variant="bold" style={styles.countDown}>
-                  {time?.hours} {t('AttemptLockout.Hours')} {time?.minutes} {t('AttemptLockout.Minutes')}{' '}
-                  {time?.seconds} {t('AttemptLockout.Seconds')}
-                </ThemedText>
-              )}
-            </View>
-          )}
-        </View>
-        <InfoTextBox style={{ flexShrink: 1, padding: Spacing.md }}>
-          <View style={{ flex: 1 }}>
-            <ThemedText variant="bold" style={{ marginBottom: Spacing.md }}>
-              {t('AttemptLockout.ForgotPIN')}
-            </ThemedText>
-            <ThemedText>{t('AttemptLockout.ForgotPINDescription')}</ThemedText>
-          </View>
-        </InfoTextBox>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}
-
-export default AttemptLockout