@bifold/core 2.4.6 → 2.6.0

package/src/screens/Developer.tsx

@@ -1,289 +0,0 @@
-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 { ColorPalette } = 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: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
-              thumbColor={useVerifierCapability ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
-              ios_backgroundColor={ColorPalette.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: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
-              thumbColor={acceptDevCredentials ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
-              ios_backgroundColor={ColorPalette.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: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
-              thumbColor={
-                useConnectionInviterCapability ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey
-              }
-              ios_backgroundColor={ColorPalette.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: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
-              thumbColor={useDevVerifierTemplates ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
-              ios_backgroundColor={ColorPalette.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: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
-                thumbColor={enableWalletNaming ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
-                ios_backgroundColor={ColorPalette.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: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
-              thumbColor={preventAutoLock ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
-              ios_backgroundColor={ColorPalette.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: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
-              thumbColor={enableShareableLink ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
-              ios_backgroundColor={ColorPalette.grayscale.lightGrey}
-              onValueChange={toggleShareableLinkSwitch}
-              testID={testIdWithKey('ShareableLinkSwitchElement')}
-              value={enableShareableLink}
-            />
-          </Pressable>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}
-
-export default Developer

package/src/screens/Home.tsx

@@ -1,173 +0,0 @@
-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 { ColorPalette } = 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: ColorPalette.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/JSONDetails.tsx

@@ -1,104 +0,0 @@
-import { SafeAreaView } from 'react-native-safe-area-context'
-import { View, StyleSheet, Share } from 'react-native'
-import { useTranslation } from 'react-i18next'
-import { useTheme } from '../contexts/theme'
-import { ThemedText } from '../components/texts/ThemedText'
-import { StackScreenProps } from '@react-navigation/stack'
-import { ContactStackParams, Screens } from '../types/navigators'
-import Button, { ButtonType } from '../components/buttons/Button'
-import { testIdWithKey } from '../utils/testable'
-import { ScrollView } from 'react-native-gesture-handler'
-import Clipboard from '@react-native-clipboard/clipboard'
-import Toast from 'react-native-toast-message'
-import { ToastType } from '../components/toast/BaseToast'
-import { useNetInfo } from '@react-native-community/netinfo'
-
-type JSONDetailsProps = StackScreenProps<ContactStackParams, Screens.JSONDetails>
-
-const JSONDetails = ({ route }: JSONDetailsProps) => {
-  if (!route?.params) {
-    throw new Error('JSONDetails route params were not set properly')
-  }
-  const { t } = useTranslation()
-  const { ColorPalette } = useTheme()
-  const netInfo = useNetInfo()
-  const jsonBlob = JSON.stringify({ caller_info: route.params.jsonBlob, network_info: netInfo }, null, 2)
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: ColorPalette.brand.primaryBackground,
-      padding: 20,
-    },
-    title: {
-      marginBottom: 16,
-    },
-    buttonContainer: {
-      width: '100%',
-      paddingVertical: 8,
-    },
-    jsonContainer: {
-      padding: 16,
-      backgroundColor: ColorPalette.brand.secondaryBackground,
-      height: '75%',
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderRadius: 5,
-    },
-  })
-
-  const copyToClipboard = async () => {
-    try {
-      await Clipboard.setString(jsonBlob)
-      Toast.show({
-        type: ToastType.Success,
-        text1: t('JSONDetails.CopiedSuccess'),
-      })
-    } catch (e) {
-      Toast.show({
-        type: ToastType.Error,
-        text1: `${t('JSONDetails.CopiedError')}: ${e}`,
-      })
-    }
-  }
-
-  const shareJSON = async () => {
-    await Share.share({
-      message: jsonBlob,
-    })
-  }
-
-  return (
-    <SafeAreaView style={styles.container} edges={['bottom', 'left', 'right']}>
-      <View>
-        <ScrollView style={styles.jsonContainer} testID={testIdWithKey('JSONDetails.ScrollView')}>
-          <ThemedText>{jsonBlob}</ThemedText>
-        </ScrollView>
-
-        <View style={styles.buttonContainer}>
-          <Button
-            title={t('JSONDetails.Share')}
-            buttonType={ButtonType.Primary}
-            testID={testIdWithKey('Share')}
-            accessibilityLabel={t('JSONDetails.Share')}
-            onPress={() => {
-              shareJSON()
-            }}
-          ></Button>
-        </View>
-        <View style={styles.buttonContainer}>
-          <Button
-            title={t('JSONDetails.Copy')}
-            buttonType={ButtonType.Secondary}
-            testID={testIdWithKey('CopyToClipboard')}
-            accessibilityLabel={t('JSONDetails.Copy')}
-            onPress={() => {
-              copyToClipboard()
-            }}
-          ></Button>
-        </View>
-      </View>
-    </SafeAreaView>
-  )
-}
-
-export default JSONDetails

package/src/screens/Language.tsx

@@ -1,97 +0,0 @@
-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 { ColorPalette, 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: ColorPalette.brand.primaryBackground,
-      width: '100%',
-    },
-    section: {
-      backgroundColor: SettingsTheme.groupBackground,
-      paddingHorizontal: 25,
-      paddingVertical: 16,
-    },
-    sectionRow: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    },
-    itemSeparator: {
-      borderBottomWidth: 1,
-      borderBottomColor: ColorPalette.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={ColorPalette.brand.secondaryBackground}
-                unfillColor={ColorPalette.brand.secondaryBackground}
-                size={36}
-                innerIconStyle={{ borderColor: ColorPalette.brand.primary, borderWidth: 2 }}
-                ImageComponent={() => <Icon name="circle" size={18} color={ColorPalette.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