@bifold/core 1.0.0

package/src/navigators/TabStack.tsx

@@ -0,0 +1,303 @@
+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 { ColorPallet, TabTheme, TextTheme, Assets } = 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: ColorPallet.brand.primary }}>
+      <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: ColorPallet.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>
+  )
+}
+
+export default TabStack

package/src/navigators/defaultLayoutOptions.tsx

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,84 @@
+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'
+
+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.NameWallet]: {
+    headerTintColor: OnboardingTheme.headerTintColor,
+    headerBackTestID: testIdWithKey('Back'),
+  },
+  [Screens.UseBiometry]: {
+    headerTintColor: OnboardingTheme.headerTintColor,
+    headerBackTestID: testIdWithKey('Back'),
+  },
+  [Screens.Developer]: {
+    headerTintColor: OnboardingTheme.headerTintColor,
+    headerBackTestID: testIdWithKey('Back'),
+  },
+  [Screens.UsePushNotifications]: {
+    headerTintColor: OnboardingTheme.headerTintColor,
+    headerBackTestID: testIdWithKey('Back'),
+  },
+  [Screens.OpenIDCredentialDetails]: {
+    headerShown: true,
+  },
+  [Screens.OpenIDCredentialOffer]: {
+    headerShown: true,
+  },
+  [Screens.OpenIDProofPresentation]: {
+    headerShown: true,
+  },
+}
+
+export function useDefaultStackOptions({ ColorPallet }: ITheme): StackNavigationOptions {
+  const { t } = useTranslation()
+  const [{ globalScreenOptions }] = useServices([TOKENS.CONFIG])
+
+  return (
+    globalScreenOptions ?? {
+      headerTintColor: ColorPallet.brand.headerIcon,
+      headerShown: true,
+      headerBackTitleVisible: false,
+      headerTitleContainerStyle: {
+        flexShrink: 1,
+        maxWidth: '68%',
+        width: '100%',
+      },
+      headerStyle: {
+        elevation: 0,
+        shadowOffset: { width: 0, height: 6 },
+        shadowRadius: 6,
+        shadowColor: ColorPallet.grayscale.black,
+        shadowOpacity: 0.15,
+        borderBottomWidth: 0,
+      },
+      headerTitleAlign: 'center' as 'center' | 'left',
+      headerTitle: (props: { children: React.ReactNode }) => <HeaderTitle {...props} />,
+      headerBackAccessibilityLabel: t('Global.Back'),
+    }
+  )
+}

package/src/navigators/index.ts

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,83 @@
+import { Screens, OnboardingTask } from './types/navigators'
+
+import { State } from './types/state'
+import { Config } from './types/config'
+
+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.UseBiometry, completed: didConsiderBiometry }
+}
+
+export const isPushNotificationComplete = (
+  didConsiderPushNotifications: boolean,
+  enablePushNotifications: any
+): OnboardingTask => {
+  return {
+    name: Screens.UsePushNotifications,
+    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 generateOnboardingWorkflowSteps = (
+  state: State,
+  config: Config,
+  termsVersion: number
+): 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),
+  ]
+}

package/src/screens/AttemptLockout.tsx

@@ -0,0 +1,153 @@
+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 { ColorPallet, 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: ColorPallet.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