@bifold/core 1.0.0

package/src/screens/Developer.tsx

@@ -0,0 +1,287 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { View, Pressable, Switch, StyleSheet, ScrollView } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+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'
+
+const Developer: React.FC = () => {
+  const [store, dispatch] = useStore()
+  const { t } = useTranslation()
+  const { ColorPallet } = useTheme()
+  const [useVerifierCapability, setUseVerifierCapability] = useState(!!store.preferences.useVerifierCapability)
+  const [useConnectionInviterCapability, setConnectionInviterCapability] = useState(
+    !!store.preferences.useConnectionInviterCapability
+  )
+  const [acceptDevCredentials, setAcceptDevCredentials] = useState(!!store.preferences.acceptDevCredentials)
+  const [useDevVerifierTemplates, setDevVerifierTemplates] = useState(!!store.preferences.useDevVerifierTemplates)
+  const [enableWalletNaming, setEnableWalletNaming] = useState(!!store.preferences.enableWalletNaming)
+  const [enableShareableLink, setEnableShareableLink] = useState(!!store.preferences.enableShareableLink)
+  const [preventAutoLock, setPreventAutoLock] = useState(!!store.preferences.preventAutoLock)
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingTop: 10,
+      paddingHorizontal: 10,
+    },
+    settingContainer: {
+      flexDirection: 'row',
+      marginVertical: 10,
+      marginHorizontal: 10,
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    settingLabelText: {
+      marginRight: 10,
+      textAlign: 'left',
+    },
+    settingSwitchContainer: {
+      justifyContent: 'center',
+    },
+  })
+
+  const toggleVerifierCapabilitySwitch = () => {
+    // if verifier feature is switched off then also turn off the dev templates
+    if (useVerifierCapability) {
+      dispatch({
+        type: DispatchAction.USE_DEV_VERIFIER_TEMPLATES,
+        payload: [false],
+      })
+      setDevVerifierTemplates(false)
+    }
+    dispatch({
+      type: DispatchAction.USE_VERIFIER_CAPABILITY,
+      payload: [!useVerifierCapability],
+    })
+    setUseVerifierCapability((previousState) => !previousState)
+  }
+
+  const toggleAcceptDevCredentialsSwitch = () => {
+    dispatch({
+      type: DispatchAction.ACCEPT_DEV_CREDENTIALS,
+      payload: [!acceptDevCredentials],
+    })
+    setAcceptDevCredentials((previousState) => !previousState)
+  }
+
+  const toggleConnectionInviterCapabilitySwitch = () => {
+    dispatch({
+      type: DispatchAction.USE_CONNECTION_INVITER_CAPABILITY,
+      payload: [!useConnectionInviterCapability],
+    })
+    setConnectionInviterCapability((previousState) => !previousState)
+  }
+
+  const toggleDevVerifierTemplatesSwitch = () => {
+    // if we switch on dev templates we can assume the user also wants to enable the verifier capability
+    if (!useDevVerifierTemplates) {
+      dispatch({
+        type: DispatchAction.USE_VERIFIER_CAPABILITY,
+        payload: [true],
+      })
+      setUseVerifierCapability(true)
+    }
+    dispatch({
+      type: DispatchAction.USE_DEV_VERIFIER_TEMPLATES,
+      payload: [!useDevVerifierTemplates],
+    })
+    setDevVerifierTemplates((previousState) => !previousState)
+  }
+
+  const toggleWalletNamingSwitch = () => {
+    dispatch({
+      type: DispatchAction.ENABLE_WALLET_NAMING,
+      payload: [!enableWalletNaming],
+    })
+    setEnableWalletNaming((previousState) => !previousState)
+  }
+
+  const togglePreventAutoLockSwitch = () => {
+    dispatch({
+      type: DispatchAction.PREVENT_AUTO_LOCK,
+      payload: [!preventAutoLock],
+    })
+    setPreventAutoLock((previousState) => !previousState)
+  }
+
+  const toggleShareableLinkSwitch = () => {
+    dispatch({
+      type: DispatchAction.USE_SHAREABLE_LINK,
+      payload: [!enableShareableLink],
+    })
+    setEnableShareableLink((previousState) => !previousState)
+  }
+
+  return (
+    <SafeAreaView style={{ flex: 1 }} edges={['bottom', 'left', 'right']}>
+      <ScrollView style={styles.container}>
+        <ThemedText style={{ margin: 10 }}>
+          Place content here you would like to make available to developers when developer mode is enabled.
+        </ThemedText>
+        <View style={styles.settingContainer}>
+          <View style={{ flex: 1 }}>
+            <ThemedText variant="bold" accessible={false} style={styles.settingLabelText}>
+              {t('Verifier.UseVerifierCapability')}
+            </ThemedText>
+          </View>
+          <Pressable
+            style={styles.settingSwitchContainer}
+            accessibilityLabel={t('Verifier.Toggle')}
+            accessibilityRole={'switch'}
+            testID={testIdWithKey('ToggleVerifierCapability')}
+          >
+            <Switch
+              trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
+              thumbColor={useVerifierCapability ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
+              ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+              onValueChange={toggleVerifierCapabilitySwitch}
+              testID={testIdWithKey('VerifierCapabilitySwitchElement')}
+              value={useVerifierCapability}
+            />
+          </Pressable>
+        </View>
+        <View style={styles.settingContainer}>
+          <View style={{ flex: 1 }}>
+            <ThemedText variant="bold" accessible={false} style={styles.settingLabelText}>
+              {t('Verifier.AcceptDevCredentials')}
+            </ThemedText>
+          </View>
+          <Pressable
+            style={styles.settingSwitchContainer}
+            accessibilityLabel={t('Verifier.Toggle')}
+            accessibilityRole={'switch'}
+            testID={testIdWithKey('ToggleAcceptDevCredentials')}
+          >
+            <Switch
+              trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
+              thumbColor={acceptDevCredentials ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
+              ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+              onValueChange={toggleAcceptDevCredentialsSwitch}
+              testID={testIdWithKey('AcceptDevCredentialsSwitchElement')}
+              value={acceptDevCredentials}
+            />
+          </Pressable>
+        </View>
+        <View style={styles.settingContainer}>
+          <View style={{ flex: 1 }}>
+            <ThemedText variant="bold" style={styles.settingLabelText}>
+              {t('Connection.UseConnectionInviterCapability')}
+            </ThemedText>
+          </View>
+          <Pressable
+            style={styles.settingSwitchContainer}
+            accessibilityLabel={t('Connection.Toggle')}
+            accessibilityRole={'switch'}
+            testID={testIdWithKey('ToggleConnectionInviterCapabilitySwitch')}
+          >
+            <Switch
+              trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
+              thumbColor={useConnectionInviterCapability ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
+              ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+              onValueChange={toggleConnectionInviterCapabilitySwitch}
+              testID={testIdWithKey('ConnectionInviterCapabilitySwitchElement')}
+              value={useConnectionInviterCapability}
+            />
+          </Pressable>
+        </View>
+        <View style={styles.settingContainer}>
+          <View style={{ flex: 1 }}>
+            <ThemedText variant="bold" style={styles.settingLabelText}>
+              {t('Verifier.UseDevVerifierTemplates')}
+            </ThemedText>
+          </View>
+          <Pressable
+            style={styles.settingSwitchContainer}
+            accessibilityLabel={t('Verifier.ToggleDevTemplates')}
+            accessibilityRole={'switch'}
+            testID={testIdWithKey('ToggleDevVerifierTemplatesSwitch')}
+          >
+            <Switch
+              trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
+              thumbColor={useDevVerifierTemplates ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
+              ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+              onValueChange={toggleDevVerifierTemplatesSwitch}
+              testID={testIdWithKey('DevVerifierTemplatesSwitchElement')}
+              value={useDevVerifierTemplates}
+            />
+          </Pressable>
+        </View>
+        {!store.onboarding.didCreatePIN && (
+          <View style={styles.settingContainer}>
+            <View style={{ flex: 1 }}>
+              <ThemedText variant="bold" style={styles.settingLabelText}>
+                {t('NameWallet.EnableWalletNaming')}
+              </ThemedText>
+            </View>
+            <Pressable
+              style={styles.settingSwitchContainer}
+              accessibilityLabel={t('NameWallet.ToggleWalletNaming')}
+              accessibilityRole={'switch'}
+              testID={testIdWithKey('ToggleEnableWalletNamingSwitch')}
+            >
+              <Switch
+                trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
+                thumbColor={enableWalletNaming ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
+                ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+                onValueChange={toggleWalletNamingSwitch}
+                testID={testIdWithKey('EnableWalletNamingSwitchElement')}
+                value={enableWalletNaming}
+              />
+            </Pressable>
+          </View>
+        )}
+        <View style={styles.settingContainer}>
+          <View style={{ flex: 1 }}>
+            <ThemedText variant="bold" style={styles.settingLabelText}>
+              {t('Settings.PreventAutoLock')}
+            </ThemedText>
+          </View>
+          <Pressable
+            style={styles.settingSwitchContainer}
+            accessibilityLabel={t('Settings.TogglePreventAutoLock')}
+            accessibilityRole={'switch'}
+            testID={testIdWithKey('TogglePreventAutoLockSwitch')}
+          >
+            <Switch
+              trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
+              thumbColor={preventAutoLock ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
+              ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+              onValueChange={togglePreventAutoLockSwitch}
+              testID={testIdWithKey('PreventAutoLockSwitchElement')}
+              value={preventAutoLock}
+            />
+          </Pressable>
+        </View>
+        <View style={styles.settingContainer}>
+          <View style={{ flex: 1 }}>
+            <ThemedText variant="bold" style={styles.settingLabelText}>
+              {t('PasteUrl.UseShareableLink')}
+            </ThemedText>
+          </View>
+          <Pressable
+            style={styles.settingSwitchContainer}
+            accessibilityLabel={t('PasteUrl.UseShareableLink')}
+            accessibilityRole={'switch'}
+            testID={testIdWithKey('ToggleUseShareableLink')}
+          >
+            <Switch
+              trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
+              thumbColor={enableShareableLink ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
+              ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+              onValueChange={toggleShareableLinkSwitch}
+              testID={testIdWithKey('ShareableLinkSwitchElement')}
+              value={enableShareableLink}
+            />
+          </Pressable>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+export default Developer

package/src/screens/Home.tsx

@@ -0,0 +1,173 @@
+import { useIsFocused } from '@react-navigation/native'
+import { StackScreenProps } from '@react-navigation/stack'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { FlatList, View, StyleSheet } from 'react-native'
+
+import { NotificationType } from '../components/listItems/NotificationListItem'
+import AppGuideModal from '../components/modals/AppGuideModal'
+import { TOKENS, useServices } from '../container-api'
+import { DispatchAction } from '../contexts/reducers/store'
+import { useStore } from '../contexts/store'
+import { useTheme } from '../contexts/theme'
+import { useTour } from '../contexts/tour/tour-context'
+import { HomeStackParams, Screens } from '../types/navigators'
+import { BaseTourID } from '../types/tour'
+
+type HomeProps = StackScreenProps<HomeStackParams, Screens.Home>
+
+const Home: React.FC<HomeProps> = () => {
+  const [
+    HomeHeaderView,
+    NoNewUpdates,
+    HomeFooterView,
+    { enableTours: enableToursConfig },
+    { customNotificationConfig: customNotification, useNotifications },
+    NotificationListItem,
+  ] = useServices([
+    TOKENS.COMPONENT_HOME_HEADER,
+    TOKENS.COMPONENT_HOME_NOTIFICATIONS_EMPTY_LIST,
+    TOKENS.COMPONENT_HOME_FOOTER,
+    TOKENS.CONFIG,
+    TOKENS.NOTIFICATIONS,
+    TOKENS.NOTIFICATIONS_LIST_ITEM,
+  ])
+  const notifications = useNotifications({})
+  const { t } = useTranslation()
+  const { ColorPallet } = useTheme()
+  const [store, dispatch] = useStore()
+  const { start, stop } = useTour()
+  const [showTourPopup, setShowTourPopup] = useState(false)
+  const screenIsFocused = useIsFocused()
+
+  const styles = StyleSheet.create({
+    flatlist: {
+      marginBottom: 35,
+    },
+  })
+
+  const DisplayListItemType = useCallback(
+    (item: any): React.ReactNode => {
+      let component: React.ReactNode
+      if (item.type === 'BasicMessageRecord') {
+        component = <NotificationListItem notificationType={NotificationType.BasicMessage} notification={item} />
+      } else if (item.type === 'CredentialRecord') {
+        let notificationType = NotificationType.CredentialOffer
+        if (item.revocationNotification) {
+          notificationType = NotificationType.Revocation
+        }
+        component = <NotificationListItem notificationType={notificationType} notification={item} />
+      } else if (item.type === 'CustomNotification' && customNotification) {
+        component = (
+          <NotificationListItem
+            notificationType={NotificationType.Custom}
+            notification={item}
+            customNotification={customNotification}
+          />
+        )
+      } else {
+        component = <NotificationListItem notificationType={NotificationType.ProofRequest} notification={item} />
+      }
+      return component
+    },
+    [customNotification, NotificationListItem]
+  )
+
+  useEffect(() => {
+    const shouldShowTour = enableToursConfig && store.tours.enableTours && !store.tours.seenHomeTour
+    if (shouldShowTour && screenIsFocused) {
+      if (store.tours.seenToursPrompt) {
+        dispatch({
+          type: DispatchAction.UPDATE_SEEN_HOME_TOUR,
+          payload: [true],
+        })
+        start(BaseTourID.HomeTour)
+      } else {
+        setShowTourPopup(true)
+      }
+    }
+  }, [
+    enableToursConfig,
+    store.tours.enableTours,
+    store.tours.seenHomeTour,
+    screenIsFocused,
+    store.tours.seenToursPrompt,
+    dispatch,
+    start,
+  ])
+
+  const onCTAPressed = useCallback(() => {
+    setShowTourPopup(false)
+    dispatch({
+      type: DispatchAction.UPDATE_SEEN_HOME_TOUR,
+      payload: [true],
+    })
+    dispatch({
+      type: DispatchAction.ENABLE_TOURS,
+      payload: [true],
+    })
+    dispatch({
+      type: DispatchAction.UPDATE_SEEN_TOUR_PROMPT,
+      payload: [true],
+    })
+    start(BaseTourID.HomeTour)
+  }, [dispatch, start])
+
+  const onDismissPressed = useCallback(() => {
+    setShowTourPopup(false)
+    dispatch({
+      type: DispatchAction.ENABLE_TOURS,
+      payload: [false],
+    })
+    dispatch({
+      type: DispatchAction.UPDATE_SEEN_TOUR_PROMPT,
+      payload: [true],
+    })
+  }, [dispatch])
+
+  // stop the tour when the screen unmounts
+  useEffect(() => {
+    return stop
+  }, [stop])
+
+  return (
+    <>
+      <FlatList
+        style={styles.flatlist}
+        showsVerticalScrollIndicator={false}
+        scrollEnabled={notifications?.length > 0 ? true : false}
+        decelerationRate="fast"
+        ListEmptyComponent={NoNewUpdates}
+        ListHeaderComponent={() => <HomeHeaderView />}
+        ListFooterComponent={() => <HomeFooterView />}
+        data={notifications}
+        keyExtractor={(_, i) => i.toString()}
+        renderItem={({ item, index }) => (
+          <View
+            style={{
+              paddingHorizontal: 20,
+              paddingTop: index === 0 ? 20 : 0,
+              paddingBottom: index === notifications.length - 1 ? 20 : 10,
+              backgroundColor: ColorPallet.brand.secondaryBackground,
+            }}
+          >
+            {DisplayListItemType(item)}
+          </View>
+        )}
+      />
+      {showTourPopup && (
+        <AppGuideModal
+          title={t('Tour.GuideTitle')}
+          description={t('Tour.WouldYouLike')}
+          onCallToActionPressed={onCTAPressed}
+          onCallToActionLabel={t('Tour.UseAppGuides')}
+          onSecondCallToActionPressed={onDismissPressed}
+          onSecondCallToActionLabel={t('Tour.DoNotUseAppGuides')}
+          onDismissPressed={onDismissPressed}
+        />
+      )}
+    </>
+  )
+}
+
+export default Home

package/src/screens/Language.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { FlatList, StyleSheet, View } from 'react-native'
+import BouncyCheckbox from 'react-native-bouncy-checkbox'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+
+import { useTheme } from '../contexts/theme'
+import { Locales, storeLanguage } from '../localization'
+import { testIdWithKey } from '../utils/testable'
+import { TOKENS, useServices } from '../container-api'
+import { ThemedText } from '../components/texts/ThemedText'
+interface Language {
+  id: Locales
+  value: string
+}
+
+const Language = () => {
+  const { t, i18n } = useTranslation()
+  const { ColorPallet, SettingsTheme } = useTheme()
+  const [{ supportedLanguages }] = useServices([TOKENS.CONFIG])
+
+  const languages: Language[] = supportedLanguages.map((lang) => ({
+    id: lang,
+    value: i18n.t(`Language.code`, { context: lang }),
+  }))
+
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: ColorPallet.brand.primaryBackground,
+      width: '100%',
+    },
+    section: {
+      backgroundColor: SettingsTheme.groupBackground,
+      paddingHorizontal: 25,
+      paddingVertical: 16,
+    },
+    sectionRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    itemSeparator: {
+      borderBottomWidth: 1,
+      borderBottomColor: ColorPallet.brand.primaryBackground,
+      marginHorizontal: 25,
+    },
+  })
+
+  /**
+   * Once user select the particular language from the list,
+   * store user preference into the AsyncStorage
+   *
+   * @param {BlockSelection} language
+   */
+  const handleLanguageChange = async (language: Language) => {
+    await i18n.changeLanguage(language.id as Locales)
+    await storeLanguage(language.id)
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        data={languages}
+        renderItem={({ item: language }) => {
+          const { id, value }: Language = language
+          return (
+            <View style={[styles.section, styles.sectionRow]}>
+              <ThemedText variant="title">{value}</ThemedText>
+              <BouncyCheckbox
+                accessibilityLabel={`${id === i18n.language ? t('Language.Checked') : t('Language.NotChecked')}`} // add on voice over the text checked / not checked after the text from value above
+                accessibilityRole="radio"
+                disableText
+                fillColor={ColorPallet.brand.secondaryBackground}
+                unfillColor={ColorPallet.brand.secondaryBackground}
+                size={36}
+                innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
+                ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary}></Icon>}
+                onPress={async () => await handleLanguageChange(language)}
+                isChecked={id === i18n.language}
+                disableBuiltInState
+                testID={testIdWithKey(id.toLocaleLowerCase())}
+              />
+            </View>
+          )
+        }}
+        ItemSeparatorComponent={() => (
+          <View style={{ backgroundColor: SettingsTheme.groupBackground }}>
+            <View style={styles.itemSeparator}></View>
+          </View>
+        )}
+      />
+    </SafeAreaView>
+  )
+}
+
+export default Language

package/src/screens/ListContacts.tsx

@@ -0,0 +1,112 @@
+import { ConnectionRecord, ConnectionType, DidExchangeState } from '@credo-ts/core'
+import { useAgent, useConnections } from '@credo-ts/react-hooks'
+import { StackNavigationProp } from '@react-navigation/stack'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { DeviceEventEmitter, FlatList, StyleSheet, View } from 'react-native'
+
+import IconButton, { ButtonLocation } from '../components/buttons/IconButton'
+import EmptyListContacts from '../components/misc/EmptyListContacts'
+import { EventTypes } from '../constants'
+import { useStore } from '../contexts/store'
+import { useTheme } from '../contexts/theme'
+import { BifoldError } from '../types/error'
+import { ContactStackParams, Screens, Stacks } from '../types/navigators'
+import { BifoldAgent } from '../utils/agent'
+import { fetchContactsByLatestMessage } from '../utils/contacts'
+import { testIdWithKey } from '../utils/testable'
+import { TOKENS, useServices } from '../container-api'
+
+interface ListContactsProps {
+  navigation: StackNavigationProp<ContactStackParams, Screens.Contacts>
+}
+
+const ListContacts: React.FC<ListContactsProps> = ({ navigation }) => {
+  const { ColorPallet } = useTheme()
+  const { t } = useTranslation()
+  const { agent } = useAgent()
+  const [connections, setConnections] = useState<ConnectionRecord[]>([])
+  const { records: connectionRecords } = useConnections()
+  const [store] = useStore()
+  const [{ contactHideList }, ContactListItem, defaultScreenOptionsDict] = useServices([
+    TOKENS.CONFIG,
+    TOKENS.COMPONENT_CONTACT_LIST_ITEM,
+    TOKENS.OBJECT_SCREEN_CONFIG,
+  ])
+  const style = StyleSheet.create({
+    list: {
+      backgroundColor: ColorPallet.brand.secondaryBackground,
+    },
+    itemSeparator: {
+      backgroundColor: ColorPallet.brand.primaryBackground,
+      height: 1,
+      marginHorizontal: 16,
+    },
+  })
+
+  useEffect(() => {
+    const fetchAndSetConnections = async () => {
+      if (!agent) return
+      let orderedContacts = await fetchContactsByLatestMessage(agent as BifoldAgent, connectionRecords)
+
+      // if developer mode is disabled, filter out mediator connections and connections in the hide list
+      if (!store.preferences.developerModeEnabled) {
+        orderedContacts = orderedContacts.filter((r) => {
+          return (
+            !r.connectionTypes.includes(ConnectionType.Mediator) &&
+            !contactHideList?.includes((r.theirLabel || r.alias) ?? '') &&
+            r.state === DidExchangeState.Completed
+          )
+        })
+      }
+
+      setConnections(orderedContacts)
+    }
+
+    fetchAndSetConnections().catch((err) => {
+      agent?.config.logger.error('Error fetching contacts:', err)
+      const error = new BifoldError(t('Error.Title1046'), t('Error.Message1046'), (err as Error)?.message ?? err, 1046)
+      DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
+    })
+  }, [agent, connectionRecords, store.preferences.developerModeEnabled, contactHideList, t])
+
+  const onPressAddContact = useCallback(() => {
+    navigation.getParent()?.navigate(Stacks.ConnectStack, { screen: Screens.Scan, params: { defaultToConnect: true } })
+  }, [navigation])
+
+  useEffect(() => {
+    if (store.preferences.useConnectionInviterCapability) {
+      navigation.setOptions({
+        headerRight: () => (
+          <IconButton
+            buttonLocation={ButtonLocation.Right}
+            accessibilityLabel={t('Contacts.AddContact')}
+            testID={testIdWithKey('AddContact')}
+            onPress={onPressAddContact}
+            icon="plus-circle-outline"
+          />
+        ),
+      })
+    } else {
+      navigation.setOptions({
+        headerRight: defaultScreenOptionsDict[Screens.Contacts]?.headerRight,
+      })
+    }
+  }, [store.preferences.useConnectionInviterCapability, navigation, t, onPressAddContact, defaultScreenOptionsDict])
+
+  return (
+    <View>
+      <FlatList
+        style={style.list}
+        data={connections}
+        ItemSeparatorComponent={() => <View style={style.itemSeparator} />}
+        keyExtractor={(connection) => connection.id}
+        renderItem={({ item: connection }) => <ContactListItem contact={connection} navigation={navigation} />}
+        ListEmptyComponent={() => <EmptyListContacts navigation={navigation} />}
+        showsVerticalScrollIndicator={false}
+      />
+    </View>
+  )
+}
+
+export default ListContacts