@bifold/core 1.0.0 → 2.0.1

package/src/App.tsx

@@ -1,33 +1,33 @@
-import AgentProvider from '@credo-ts/react-hooks'
-import * as React from 'react'
-import { useEffect, useMemo } from 'react'
+import React, { useEffect } from 'react'
 import { StatusBar } from 'react-native'
 import SplashScreen from 'react-native-splash-screen'
 import Toast from 'react-native-toast-message'
 
+import { useNavigationContainerRef } from '@react-navigation/native'
+import { isTablet } from 'react-native-device-info'
+import Orientation from 'react-native-orientation-locker'
 import { animatedComponents } from './animated-components'
 import ErrorModal from './components/modals/ErrorModal'
 import NetInfo from './components/network/NetInfo'
 import toastConfig from './components/toast/ToastConfig'
+import { tours } from './constants'
 import { Container, ContainerProvider } from './container-api'
-import { ActivityProvider } from './contexts/activity'
 import { AnimatedComponentsProvider } from './contexts/animated-components'
 import { AuthProvider } from './contexts/auth'
+import NavContainer from './contexts/navigation'
 import { NetworkProvider } from './contexts/network'
 import { StoreProvider } from './contexts/store'
 import { ThemeProvider } from './contexts/theme'
 import { TourProvider } from './contexts/tour/tour-provider'
-import { initLanguages, initStoredLanguage, translationResources } from './localization'
+import { initStoredLanguage } from './localization'
 import RootStack from './navigators/RootStack'
-import { theme } from './theme'
-import { OpenIDCredentialRecordProvider } from './modules/openid/context/OpenIDCredentialRecordProvider'
-import { tours } from './constants'
+import { bifoldTheme, themes } from './theme'
 
-const App = (system: Container): React.FC => {
-  initLanguages(translationResources)
+const createApp = (container: Container): React.FC => {
+  const AppComponent: React.FC = () => {
+    const navigationRef = useNavigationContainerRef()
 
-  const AppComponent = () => {
-    useMemo(() => {
+    useEffect(() => {
       initStoredLanguage().then()
     }, [])
 
@@ -37,35 +37,35 @@ const App = (system: Container): React.FC => {
       SplashScreen.hide()
     }, [])
 
+    if (!isTablet()) {
+      Orientation.lockToPortrait()
+    }
+
     return (
-      <ContainerProvider value={system}>
+      <ContainerProvider value={container}>
         <StoreProvider>
-          <AgentProvider agent={undefined}>
-            <OpenIDCredentialRecordProvider>
-              <ThemeProvider value={theme}>
-                <AnimatedComponentsProvider value={animatedComponents}>
-                  <AuthProvider>
-                    <NetworkProvider>
-                      <ActivityProvider>
-                        <StatusBar
-                          hidden={false}
-                          barStyle="light-content"
-                          backgroundColor={theme.ColorPallet.brand.primary}
-                          translucent={false}
-                        />
-                        <NetInfo />
-                        <ErrorModal />
-                        <TourProvider tours={tours} overlayColor={'gray'} overlayOpacity={0.7}>
-                          <RootStack />
-                        </TourProvider>
-                        <Toast topOffset={15} config={toastConfig} />
-                      </ActivityProvider>
-                    </NetworkProvider>
-                  </AuthProvider>
-                </AnimatedComponentsProvider>
-              </ThemeProvider>
-            </OpenIDCredentialRecordProvider>
-          </AgentProvider>
+          <ThemeProvider themes={themes} defaultThemeName={bifoldTheme.themeName}>
+            <NavContainer navigationRef={navigationRef}>
+              <AnimatedComponentsProvider value={animatedComponents}>
+                <AuthProvider>
+                  <NetworkProvider>
+                    <StatusBar
+                      hidden={false}
+                      barStyle="light-content"
+                      backgroundColor={bifoldTheme.ColorPallet.brand.primary}
+                      translucent={false}
+                    />
+                    <NetInfo />
+                    <ErrorModal />
+                    <TourProvider tours={tours} overlayColor={'gray'} overlayOpacity={0.7}>
+                      <RootStack />
+                    </TourProvider>
+                    <Toast topOffset={15} config={toastConfig} />
+                  </NetworkProvider>
+                </AuthProvider>
+              </AnimatedComponentsProvider>
+            </NavContainer>
+          </ThemeProvider>
         </StoreProvider>
       </ContainerProvider>
     )
@@ -73,4 +73,5 @@ const App = (system: Container): React.FC => {
 
   return AppComponent
 }
-export default App
+
+export default createApp

package/src/components/inputs/BiometryControl.tsx

@@ -0,0 +1,176 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Linking, Platform, ScrollView, StyleSheet, View } from 'react-native'
+import { check, PERMISSIONS, PermissionStatus, request, RESULTS } from 'react-native-permissions'
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+import ToggleButton from '../buttons/ToggleButton'
+import DismissiblePopupModal from '../modals/DismissiblePopupModal'
+import { ThemedText } from '../texts/ThemedText'
+import { useAuth } from '../../contexts/auth'
+import { useTheme } from '../../contexts/theme'
+import { testIdWithKey } from '../../utils/testable'
+
+const BIOMETRY_PERMISSION = PERMISSIONS.IOS.FACE_ID
+
+export interface BiometryControlProps {
+  biometryEnabled: boolean
+  onBiometryToggle: (newValue: boolean) => void
+  children?: React.ReactNode
+}
+
+const BiometryControl: React.FC<BiometryControlProps> = ({ biometryEnabled, onBiometryToggle, children }) => {
+  const { t } = useTranslation()
+  const { isBiometricsActive } = useAuth()
+  const [biometryAvailable, setBiometryAvailable] = useState(false)
+  const [settingsPopupConfig, setSettingsPopupConfig] = useState<null | { title: string; description: string }>(null)
+  const { ColorPallet, Assets } = useTheme()
+
+  const styles = StyleSheet.create({
+    container: {
+      height: '100%',
+      padding: 20,
+      backgroundColor: ColorPallet.brand.primaryBackground,
+    },
+    image: {
+      minWidth: 200,
+      minHeight: 200,
+      marginBottom: 66,
+    },
+    biometryAvailableRowGap: {
+      rowGap: 20,
+    },
+  })
+
+  useEffect(() => {
+    isBiometricsActive().then((result) => {
+      setBiometryAvailable(result)
+    })
+  }, [isBiometricsActive])
+
+  const onOpenSettingsTouched = async () => {
+    await Linking.openSettings()
+    onOpenSettingsDismissed()
+  }
+
+  const onOpenSettingsDismissed = () => {
+    setSettingsPopupConfig(null)
+  }
+
+  const onRequestSystemBiometrics = useCallback(async (newToggleValue: boolean) => {
+    const permissionResult: PermissionStatus = await request(BIOMETRY_PERMISSION)
+    switch (permissionResult) {
+      case RESULTS.GRANTED:
+      case RESULTS.LIMITED:
+        // Granted
+        onBiometryToggle(newToggleValue)
+        break
+      default:
+        break
+    }
+  }, [onBiometryToggle])
+
+  const onCheckSystemBiometrics = useCallback(async (): Promise<PermissionStatus> => {
+    if (Platform.OS === 'android') {
+      // Android doesn't need to prompt biometric permission
+      // for an app to use it.
+      return biometryAvailable ? RESULTS.GRANTED : RESULTS.UNAVAILABLE
+    } else if (Platform.OS === 'ios') {
+      return await check(BIOMETRY_PERMISSION)
+    }
+
+    return RESULTS.UNAVAILABLE
+  }, [biometryAvailable])
+
+  const toggleSwitch = useCallback(async () => {
+    const newValue = !biometryEnabled
+
+    if (!newValue) {
+      // Turning off doesn't require OS biometrics enabled
+      onBiometryToggle(newValue)
+      return
+    }
+
+    // If the user is turning it on, they need
+    // to first authenticate the OS biometrics before this action is accepted
+    const permissionResult: PermissionStatus = await onCheckSystemBiometrics()
+    switch (permissionResult) {
+      case RESULTS.GRANTED:
+      case RESULTS.LIMITED:
+        // Already granted
+        onBiometryToggle(newValue)
+        break
+      case RESULTS.UNAVAILABLE:
+        setSettingsPopupConfig({
+          title: t('Biometry.SetupBiometricsTitle'),
+          description: t('Biometry.SetupBiometricsDesc'),
+        })
+        break
+      case RESULTS.BLOCKED:
+        // Previously denied
+        setSettingsPopupConfig({
+          title: t('Biometry.AllowBiometricsTitle'),
+          description: t('Biometry.AllowBiometricsDesc'),
+        })
+        break
+      case RESULTS.DENIED:
+        // Has not been requested
+        await onRequestSystemBiometrics(newValue)
+        break
+      default:
+        break
+    }
+  }, [onRequestSystemBiometrics, onCheckSystemBiometrics, biometryEnabled, t, onBiometryToggle])
+
+  return (
+    <SafeAreaView edges={['left', 'right', 'bottom']}>
+      {settingsPopupConfig && (
+        <DismissiblePopupModal
+          title={settingsPopupConfig.title}
+          description={settingsPopupConfig.description}
+          onCallToActionLabel={t('Biometry.OpenSettings')}
+          onCallToActionPressed={onOpenSettingsTouched}
+          onDismissPressed={onOpenSettingsDismissed}
+        />
+      )}
+      <ScrollView style={styles.container}>
+        <View style={{ alignItems: 'center' }}>
+          <Assets.svg.biometrics style={styles.image} />
+        </View>
+        {biometryAvailable ? (
+          <View style={styles.biometryAvailableRowGap}>
+            <ThemedText>{t('Biometry.EnabledText1')}</ThemedText>
+            <ThemedText>
+              {t('Biometry.EnabledText2')}
+              <ThemedText variant="bold"> {t('Biometry.Warning')}</ThemedText>
+            </ThemedText>
+          </View>
+        ) : (
+          <View style={styles.biometryAvailableRowGap}>
+            <ThemedText>{t('Biometry.NotEnabledText1')}</ThemedText>
+            <ThemedText>{t('Biometry.NotEnabledText2')}</ThemedText>
+          </View>
+        )}
+        <View style={{ flexDirection: 'row', marginVertical: 20 }}>
+          <View style={{ flexShrink: 1, marginRight: 10, justifyContent: 'center' }}>
+            <ThemedText variant="bold">{t('Biometry.UseToUnlock')}</ThemedText>
+          </View>
+          <View style={{ justifyContent: 'center' }}>
+            <ToggleButton
+              testID={testIdWithKey('ToggleBiometrics')}
+              isEnabled={biometryEnabled}
+              isAvailable={true}
+              toggleAction={toggleSwitch}
+              disabled={false}
+              enabledIcon="check"
+              disabledIcon="close"
+            />
+          </View>
+        </View>
+      </ScrollView>
+      {children}
+    </SafeAreaView>
+  )
+}
+
+export default BiometryControl

package/src/components/misc/ConnectionAlert.tsx

@@ -16,10 +16,10 @@ import UnorderedList from './UnorderedList'
 import { ThemedText } from '../texts/ThemedText'
 
 interface ConnectionAlertProps {
-  connectionID?: string
+  connectionLabel?: string
 }
 
-const ConnectionAlert: React.FC<ConnectionAlertProps> = ({ connectionID }) => {
+const ConnectionAlert: React.FC<ConnectionAlertProps> = ({ connectionLabel }) => {
   const { t } = useTranslation()
   const { ColorPallet } = useTheme()
   const [infoCardVisible, setInfoCardVisible] = useState(false)
@@ -113,7 +113,7 @@ const ConnectionAlert: React.FC<ConnectionAlertProps> = ({ connectionID }) => {
       )}
       <ThemedText style={styles.notifyText}>
         {t('ConnectionAlert.NotificationBodyUpper') +
-          (connectionID || t('ContactDetails.AContact').toLowerCase()) +
+          (connectionLabel ?? t('ContactDetails.AContact').toLowerCase()) +
           t('ConnectionAlert.NotificationBodyLower')}
       </ThemedText>
     </View>

package/src/components/misc/InfoBox.tsx

@@ -38,6 +38,7 @@ interface InfoBoxProps {
   onCallToActionLabel?: string
   onClosePressed?: GenericFn
   showVersionFooter?: boolean
+  renderShowDetails?: boolean
 }
 
 const InfoBox: React.FC<InfoBoxProps> = ({
@@ -56,11 +57,12 @@ const InfoBox: React.FC<InfoBoxProps> = ({
   onCallToActionLabel,
   onClosePressed,
   showVersionFooter,
+  renderShowDetails = false,
 }) => {
   const { width } = useWindowDimensions()
   const { t } = useTranslation()
   const { TextTheme, ColorPallet } = useTheme()
-  const [showDetails, setShowDetails] = useState<boolean>(false)
+  const [showDetails, setShowDetails] = useState<boolean>(renderShowDetails)
   const [{ showDetailsInfo }] = useServices([TOKENS.CONFIG])
   const styles = StyleSheet.create({
     container: {

package/src/components/misc/{PINCreateHeader.tsx → PINHeader.tsx}

@@ -3,18 +3,18 @@ import { useTheme } from '../../contexts/theme'
 import { View } from 'react-native'
 import { ThemedText } from '../texts/ThemedText'
 
-export interface PINCreateHeaderProps {
+export interface PINHeaderProps {
   updatePin?: boolean
 }
 
-const PINCreateHeader = ({ updatePin }: PINCreateHeaderProps) => {
+const PINHeader = ({ updatePin }: PINHeaderProps) => {
   const { TextTheme } = useTheme()
   const { t } = useTranslation()
   return (
     <View>
       <ThemedText style={{ marginBottom: 16 }}>
         <ThemedText style={{ fontWeight: TextTheme.bold.fontWeight }}>
-          {updatePin ? t('PINCreate.RememberChangePIN') : t('PINCreate.RememberPIN')}
+          {updatePin ? t('PINChange.RememberChangePIN') : t('PINCreate.RememberPIN')}
         </ThemedText>{' '}
         {t('PINCreate.PINDisclaimer')}
       </ThemedText>
@@ -22,4 +22,4 @@ const PINCreateHeader = ({ updatePin }: PINCreateHeaderProps) => {
   )
 }
 
-export default PINCreateHeader
+export default PINHeader

package/src/components/misc/PINValidationHelper.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { View } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+
+import { useTheme } from '../../contexts/theme'
+import { PINValidationsType } from '../../utils/PINValidation'
+import { ThemedText } from '../texts/ThemedText'
+
+interface PINValidationHelperProps {
+  validations: PINValidationsType[]
+}
+
+const iconSize = 24
+
+const PINValidationHelper: React.FC<PINValidationHelperProps> = ({ validations }) => {
+  const { t } = useTranslation()
+  const { ColorPallet } = useTheme()
+
+  return (
+    <View style={{ marginBottom: 16 }}>
+      {validations.map((validation, index) => (
+        <View style={{ flexDirection: 'row' }} key={index}>
+          {validation.isInvalid ? (
+            <Icon
+              accessibilityLabel={t('PINCreate.Helper.ClearIcon')}
+              name="clear"
+              size={iconSize}
+              color={ColorPallet.notification.errorIcon}
+            />
+          ) : (
+            <Icon
+              accessibilityLabel={t('PINCreate.Helper.CheckIcon')}
+              name="check"
+              size={iconSize}
+              color={ColorPallet.notification.successIcon}
+            />
+          )}
+          <ThemedText style={{ paddingLeft: 4 }}>
+            {t(`PINCreate.Helper.${validation.errorName}`, validation?.errorTextAddition)}
+          </ThemedText>
+        </View>
+      ))}
+    </View>
+  )
+}
+
+export default PINValidationHelper

package/src/components/views/PushNotificationsContent.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, View } from 'react-native'
+import { useTheme } from '../../contexts/theme'
+import { ThemedText } from '../texts/ThemedText'
+
+const PushNotificationsContent: React.FC = () => {
+  const { t } = useTranslation()
+  const { TextTheme, Assets } = useTheme()
+  const list = [
+    t('PushNotifications.BulletOne'),
+    t('PushNotifications.BulletTwo'),
+    t('PushNotifications.BulletThree'),
+    t('PushNotifications.BulletFour'),
+  ]
+
+  const style = StyleSheet.create({
+      image: {
+        height: 200,
+        marginBottom: 20,
+      },
+      heading: {
+        marginBottom: 20,
+      },
+      listItem: {
+        ...TextTheme.normal,
+        flex: 1,
+        paddingLeft: 5,
+      },
+    })
+
+  return (
+    <>
+      <View style={style.image}>
+          <Assets.svg.pushNotificationImg />
+      </View>
+      <ThemedText variant="headingThree" style={style.heading}>
+        {t('PushNotifications.EnableNotifications')}
+      </ThemedText>
+      <ThemedText>{t('PushNotifications.BeNotified')}</ThemedText>
+      {list.map((item, index) => (
+        <View style={{ flexDirection: 'row', marginTop: 20 }} key={index}>
+          <ThemedText>{'\u2022'}</ThemedText>
+          <ThemedText style={style.listItem}>{item}</ThemedText>
+        </View>
+      ))}
+    </>
+  )
+}
+
+export default PushNotificationsContent

package/src/components/views/PushNotificationsDisabledContent.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, View } from 'react-native'
+import { useTheme } from '../../contexts/theme'
+import { ThemedText } from '../texts/ThemedText'
+
+const PushNotificationsDisabledContent: React.FC = () => {
+  const { t } = useTranslation()
+  const { TextTheme } = useTheme()
+  const settingsInstructions = [
+    t('PushNotifications.InstructionsOne'),
+    t('PushNotifications.InstructionsTwo'),
+    t('PushNotifications.InstructionsThree'),
+  ]
+
+  const style = StyleSheet.create({
+      heading: {
+        marginBottom: 20,
+      },
+      listItem: {
+        ...TextTheme.normal,
+        flex: 1,
+        paddingLeft: 5,
+      },
+    })
+
+  return (
+    <>
+      <ThemedText variant="headingThree" style={style.heading}>
+        {t('PushNotifications.EnableNotifications')}
+      </ThemedText>
+      <ThemedText>{t('PushNotifications.NotificationsOffMessage')}</ThemedText>
+      <View>
+        <ThemedText variant="bold">{t('PushNotifications.NotificationsOffTitle')}</ThemedText>
+        <ThemedText>{t('PushNotifications.NotificationsInstructionTitle')}</ThemedText>
+        {settingsInstructions.map((item, index) => (
+          <View style={{ flexDirection: 'row', marginTop: 20 }} key={index}>
+            <ThemedText>{`${index + 1}. `}</ThemedText>
+            <ThemedText style={style.listItem}>{item}</ThemedText>
+          </View>
+        ))}
+      </View>
+    </>
+  )
+}
+
+export default PushNotificationsDisabledContent

package/src/container-api.ts

@@ -10,32 +10,40 @@ import { Button } from './components/buttons/Button-api'
 import { ReducerAction } from './contexts/reducers/store'
 import { IHistoryManager } from './modules/history'
 import Onboarding from './screens/Onboarding'
+import { SplashProps } from './screens/Splash'
 import UpdateAvailable from './screens/UpdateAvailable'
 import { AttestationMonitor } from './types/attestation'
 import { IVersionCheckService } from './types/version-check'
 import { GenericFn } from './types/fn'
-import { AuthenticateStackParams, ScreenLayoutConfig, ScreenOptionsType, OnboardingTask } from './types/navigators'
+import { OnboardingStackParams, ScreenLayoutConfig, ScreenOptionsType, OnboardingTask } from './types/navigators'
 import { CustomNotification } from './types/notification'
 import { Config, HistoryEventsLoggerConfig } from './types/config'
 import { State } from './types/state'
 import { NotificationReturnType, NotificationsInputProps } from './hooks/notifications'
 import { NotificationListItemProps } from './components/listItems/NotificationListItem'
-import { PINCreateHeaderProps } from './components/misc/PINCreateHeader'
+import { PINHeaderProps } from './components/misc/PINHeader'
 import { PINExplainerProps } from './screens/PINExplainer'
 import { CredentialListFooterProps } from './types/credential-list-footer'
 import { ContactListItemProps } from './components/listItems/ContactListItem'
 import { ContactCredentialListItemProps } from './components/listItems/ContactCredentialListItem'
 import { InlineErrorConfig } from './types/error'
 import { BifoldLogger } from './services/logger'
+import { AgentSetupReturnType } from './hooks/useBifoldAgentSetup'
+import { OnboardingStackProps } from './navigators/OnboardingStack'
 
 export type FN_ONBOARDING_DONE = (
   dispatch: React.Dispatch<ReducerAction<unknown>>,
-  navigation: StackNavigationProp<AuthenticateStackParams>
+  navigation: StackNavigationProp<OnboardingStackParams>
 ) => GenericFn
 
 type LoadStateFn = (dispatch: React.Dispatch<ReducerAction<unknown>>) => Promise<void>
 
-type GenerateOnboardingWorkflowStepsFn = (state: State, config: Config, termsVersion: number) => Array<OnboardingTask>
+type GenerateOnboardingWorkflowStepsFn = (
+  state: State,
+  config: Config,
+  termsVersion: number,
+  agent: Agent | null
+) => Array<OnboardingTask>
 
 type ProofRequestTemplateFn = (useDevTemplates: boolean) => Array<ProofRequestTemplate>
 
@@ -54,7 +62,8 @@ export const SCREEN_TOKENS = {
   SCREEN_ONBOARDING_PAGES: 'screen.onboarding.pages',
   SCREEN_SPLASH: 'screen.splash',
   SCREEN_SCAN: 'screen.scan',
-  SCREEN_USE_BIOMETRY: 'screen.use-biometry',
+  SCREEN_BIOMETRY: 'screen.biometry',
+  SCREEN_TOGGLE_BIOMETRY: 'screen.toggle-biometry',
   SCREEN_PIN_EXPLAINER: 'screen.pin-explainer',
 } as const
 
@@ -62,13 +71,17 @@ export const NAV_TOKENS = {
   CUSTOM_NAV_STACK_1: 'nav.slot1',
 } as const
 
+export const HOOK_TOKENS = {
+  HOOK_USE_AGENT_SETUP: 'hook.useAgentSetup',
+} as const
+
 export const COMPONENT_TOKENS = {
   COMPONENT_HOME_HEADER: 'component.home.header',
   COMPONENT_HOME_NOTIFICATIONS_EMPTY_LIST: 'component.home.notifications-empty-list',
   COMPONENT_HOME_FOOTER: 'component.home.footer',
   COMPONENT_CRED_EMPTY_LIST: 'component.cred.empty-list',
   COMPONENT_RECORD: 'component.record',
-  COMPONENT_PIN_CREATE_HEADER: 'component.pin-create-header',
+  COMPONENT_PIN_HEADER: 'component.pin-create-header',
   COMPONENT_CONTACT_LIST_ITEM: 'component.contact-list-item',
   COMPONENT_CONTACT_DETAILS_CRED_LIST_ITEM: 'component.contact-details-cred-list-item',
   COMPONENT_CONNECTION_ALERT: 'component.connection-alert',
@@ -137,6 +150,7 @@ export const TOKENS = {
   ...PROOF_TOKENS,
   ...COMPONENT_TOKENS,
   ...SCREEN_TOKENS,
+  ...HOOK_TOKENS,
   ...NAV_TOKENS,
   ...SERVICE_TOKENS,
   ...STACK_TOKENS,
@@ -162,15 +176,17 @@ export type TokenMapping = {
   [TOKENS.GROUP_BY_REFERENT]: boolean
   [TOKENS.SCREEN_PREFACE]: React.FC
   [TOKENS.SCREEN_UPDATE_AVAILABLE]: typeof UpdateAvailable
-  [TOKENS.STACK_ONBOARDING]: React.FC
+  [TOKENS.STACK_ONBOARDING]: React.FC<OnboardingStackProps>
   [TOKENS.SCREEN_TERMS]: { screen: React.FC; version: boolean | string }
   [TOKENS.SCREEN_DEVELOPER]: React.FC
   [TOKENS.SCREEN_ONBOARDING_PAGES]: (onTutorialCompleted: GenericFn, OnboardingTheme: any) => Array<Element>
-  [TOKENS.SCREEN_SPLASH]: React.FC
+  [TOKENS.SCREEN_SPLASH]: React.FC<SplashProps>
   [TOKENS.SCREEN_SCAN]: React.FC
-  [TOKENS.SCREEN_USE_BIOMETRY]: React.FC
+  [TOKENS.SCREEN_BIOMETRY]: React.FC
+  [TOKENS.SCREEN_TOGGLE_BIOMETRY]: React.FC
   [TOKENS.SCREEN_ONBOARDING]: typeof Onboarding
   [TOKENS.SCREEN_PIN_EXPLAINER]: React.FC<PINExplainerProps>
+  [TOKENS.HOOK_USE_AGENT_SETUP]: () => AgentSetupReturnType
   [TOKENS.FN_ONBOARDING_DONE]: FN_ONBOARDING_DONE
   [TOKENS.LOAD_STATE]: LoadStateFn
   [TOKENS.COMP_BUTTON]: Button
@@ -181,7 +197,7 @@ export type TokenMapping = {
   [TOKENS.NOTIFICATIONS_LIST_ITEM]: React.FC<NotificationListItemProps>
   [TOKENS.OBJECT_SCREEN_CONFIG]: ScreenOptionsType
   [TOKENS.OBJECT_LAYOUT_CONFIG]: ScreenLayoutConfig
-  [TOKENS.COMPONENT_PIN_CREATE_HEADER]: React.FC<PINCreateHeaderProps>
+  [TOKENS.COMPONENT_PIN_HEADER]: React.FC<PINHeaderProps>
   [TOKENS.CACHE_CRED_DEFS]: { did: string; id: string }[]
   [TOKENS.CACHE_SCHEMAS]: { did: string; id: string }[]
   [TOKENS.UTIL_LOGGER]: BifoldLogger
@@ -207,7 +223,7 @@ export type TokenMapping = {
   [TOKENS.COMPONENT_CONTACT_DETAILS_CRED_LIST_ITEM]: React.FC<ContactCredentialListItemProps>
   [TOKENS.INLINE_ERRORS]: InlineErrorConfig
   [TOKENS.CUSTOM_NAV_STACK_1]: React.FC
-  [TOKENS.COMPONENT_CONNECTION_ALERT]: React.FC<{ connectionID?: string }>
+  [TOKENS.COMPONENT_CONNECTION_ALERT]: React.FC<{ connectionLabel?: string }>
 }
 
 export interface Container {