@bifold/core 2.2.1 → 2.4.0

package/src/navigators/ContactStack.tsx

@@ -7,10 +7,8 @@ import { useTheme } from '../contexts/theme'
 import Chat from '../screens/Chat'
 import ContactDetails from '../screens/ContactDetails'
 import CredentialDetails from '../screens/CredentialDetails'
-import CredentialOffer from '../screens/CredentialOffer'
 import ListContacts from '../screens/ListContacts'
 import ProofDetails from '../screens/ProofDetails'
-import ProofRequest from '../screens/ProofRequest'
 import RenameContact from '../screens/RenameContact'
 import JSONDetails from '../screens/JSONDetails'
 import WhatAreContacts from '../screens/WhatAreContacts'
@@ -77,11 +75,6 @@ const ContactStack: React.FC = () => {
         component={CredentialDetails}
         options={{ title: t('Screens.CredentialDetails'), ...ScreenOptionsDictionary[Screens.CredentialDetails] }}
       />
-      <Stack.Screen
-        name={Screens.CredentialOffer}
-        component={CredentialOffer}
-        options={{ title: t('Screens.CredentialOffer'), ...ScreenOptionsDictionary[Screens.CredentialOffer] }}
-      />
       <Stack.Screen
         name={Screens.ProofDetails}
         component={ProofDetails}
@@ -91,14 +84,6 @@ const ContactStack: React.FC = () => {
           ...ScreenOptionsDictionary[Screens.ProofDetails],
         })}
       />
-      <Stack.Screen
-        name={Screens.ProofRequest}
-        component={ProofRequest}
-        options={{
-          title: t('Screens.ProofRequest'),
-          ...ScreenOptionsDictionary[Screens.ProofRequest],
-        }}
-      />
     </Stack.Navigator>
   )
 }

package/src/navigators/DeliveryStack.tsx

@@ -6,8 +6,6 @@ import HeaderRightHome from '../components/buttons/HeaderHome'
 import IconButton, { ButtonLocation } from '../components/buttons/IconButton'
 import { useTheme } from '../contexts/theme'
 import Connection from '../screens/Connection'
-import CredentialOffer from '../screens/CredentialOffer'
-import ProofRequest from '../screens/ProofRequest'
 import { DeliveryStackParams, Screens } from '../types/navigators'
 import { testIdWithKey } from '../utils/testable'
 
@@ -38,22 +36,6 @@ const DeliveryStack: React.FC = () => {
       }}
     >
       <Stack.Screen name={Screens.Connection} component={Connection} options={{ ...defaultStackOptions }} />
-      <Stack.Screen
-        name={Screens.ProofRequest}
-        component={ProofRequest}
-        options={{
-          title: t('Screens.ProofRequest'),
-          ...ScreenOptionsDictionary[Screens.ProofRequest],
-        }}
-      />
-      <Stack.Screen
-        name={Screens.CredentialOffer}
-        component={CredentialOffer}
-        options={{
-          title: t('Screens.CredentialOffer'),
-          ...ScreenOptionsDictionary[Screens.CredentialOffer],
-        }}
-      />
       <Stack.Screen
         name={Screens.OpenIDCredentialOffer}
         component={OpenIDCredentialOffer}

package/src/navigators/MainStack.tsx

@@ -11,7 +11,7 @@ import { TOKENS, useServices } from '../container-api'
 import { useTheme } from '../contexts/theme'
 import HistoryStack from '../modules/history/navigation/HistoryStack'
 import Chat from '../screens/Chat'
-import { Screens, Stacks, TabStacks } from '../types/navigators'
+import { RootStackParams, Screens, Stacks, TabStacks } from '../types/navigators'
 import { testIdWithKey } from '../utils/testable'
 import { useStore } from '../contexts/store'
 import { useTour } from '../contexts/tour/tour-context'
@@ -53,7 +53,7 @@ const MainStack: React.FC = () => {
     })
   }, [declinedProofs, agent, store.preferences.useDataRetention])
 
-  const Stack = createStackNavigator()
+  const Stack = createStackNavigator<RootStackParams>()
 
   // This function is to make the fade in behavior of both iOS and
   // Android consistent for the settings menu

package/src/navigators/NotificationStack.tsx

@@ -5,8 +5,6 @@ import { useTranslation } from 'react-i18next'
 import { TOKENS, useServices } from '../container-api'
 import { useTheme } from '../contexts/theme'
 import CredentialDetails from '../screens/CredentialDetails'
-import CredentialOffer from '../screens/CredentialOffer'
-import ProofRequest from '../screens/ProofRequest'
 import { NotificationStackParams, Screens } from '../types/navigators'
 
 import { useDefaultStackOptions } from './defaultStackOptions'
@@ -31,22 +29,6 @@ const NotificationStack: React.FC = () => {
           ...ScreenOptionsDictionary[Screens.CredentialDetails],
         }}
       />
-      <Stack.Screen
-        name={Screens.CredentialOffer}
-        component={CredentialOffer}
-        options={{
-          title: t('Screens.CredentialOffer'),
-          ...ScreenOptionsDictionary[Screens.CredentialOffer],
-        }}
-      />
-      <Stack.Screen
-        name={Screens.ProofRequest}
-        component={ProofRequest}
-        options={{
-          title: t('Screens.ProofRequest'),
-          ...ScreenOptionsDictionary[Screens.ProofRequest],
-        }}
-      />
       {customNotification && (
         <Stack.Screen
           name={Screens.CustomNotification}

package/src/navigators/OnboardingScreens.ts

@@ -1,8 +1,8 @@
-import { TFunction } from 'i18next'
-import { TransitionPresets, StackNavigationOptions, StackScreenProps } from '@react-navigation/stack'
 import { ParamListBase, RouteConfig, StackNavigationState } from '@react-navigation/native'
-import { Screens, ScreenOptionsType } from '../types/navigators'
+import { StackNavigationOptions, TransitionPresets } from '@react-navigation/stack'
 import type { StackNavigationEventMap } from '@react-navigation/stack/lib/typescript/src/types'
+import { TFunction } from 'i18next'
+import { ScreenOptionsType, Screens } from '../types/navigators'
 
 type ScreenOptions = RouteConfig<
   ParamListBase,
@@ -13,14 +13,14 @@ type ScreenOptions = RouteConfig<
 >
 
 interface ScreenComponents {
-  SplashScreen: React.FC<StackScreenProps<ParamListBase>>
-  Preface: React.FC<StackScreenProps<ParamListBase>>
+  SplashScreen: React.FC
+  Preface: React.FC
   UpdateAvailableScreen: React.FC
-  Terms: React.FC<StackScreenProps<ParamListBase>>
-  NameWallet: React.FC<StackScreenProps<ParamListBase>>
-  Biometry: React.FC<StackScreenProps<ParamListBase>>
-  PushNotifications: React.FC<StackScreenProps<ParamListBase>>
-  AttemptLockout: React.FC<StackScreenProps<ParamListBase>>
+  Terms: React.FC
+  NameWallet: React.FC
+  Biometry: React.FC
+  PushNotifications: React.FC
+  AttemptLockout: React.FC
   OnboardingScreen: React.FC
   CreatePINScreen: React.FC
   EnterPINScreen: React.FC

package/src/navigators/TabStack.tsx

@@ -61,7 +61,7 @@ const TabStack: React.FC = () => {
   const { t } = useTranslation()
   const Tab = createBottomTabNavigator<TabStackParams>()
   const { assertNetworkConnected } = useNetwork()
-  const { ColorPallet, TabTheme, TextTheme, Assets, NavigationTheme } = useTheme()
+  const { ColorPalette, TabTheme, TextTheme, Assets, NavigationTheme } = useTheme()
   const [orientation, setOrientation] = useState(OrientationType.PORTRAIT)
   const [store, dispatch] = useStore()
   const { agent } = useAgent()
@@ -179,7 +179,7 @@ const TabStack: React.FC = () => {
             tabBarBadge: notifications.length || undefined,
             tabBarBadgeStyle: {
               marginLeft: leftMarginForDevice(),
-              backgroundColor: ColorPallet.semantic.error,
+              backgroundColor: ColorPalette.semantic.error,
               ...badgeFontSize,
             },
           }}

package/src/navigators/defaultStackOptions.tsx

@@ -71,13 +71,13 @@ export const DefaultScreenOptionsDictionary: ScreenOptionsType = {
   },
 }
 
-export function useDefaultStackOptions({ ColorPallet }: ITheme): StackNavigationOptions {
+export function useDefaultStackOptions({ ColorPalette }: ITheme): StackNavigationOptions {
   const { t } = useTranslation()
   const [{ globalScreenOptions }] = useServices([TOKENS.CONFIG])
 
   return (
     globalScreenOptions ?? {
-      headerTintColor: ColorPallet.brand.headerIcon,
+      headerTintColor: ColorPalette.brand.headerIcon,
       headerShown: true,
       headerBackTitleVisible: false,
       headerTitleContainerStyle: {
@@ -89,7 +89,7 @@ export function useDefaultStackOptions({ ColorPallet }: ITheme): StackNavigation
         elevation: 0,
         shadowOffset: { width: 0, height: 6 },
         shadowRadius: 6,
-        shadowColor: ColorPallet.grayscale.black,
+        shadowColor: ColorPalette.grayscale.black,
         shadowOpacity: 0.15,
         borderBottomWidth: 0,
       },

package/src/screens/AttemptLockout.tsx

@@ -19,7 +19,7 @@ interface Timer {
 }
 
 const AttemptLockout: React.FC = () => {
-  const { ColorPallet, Assets, Spacing } = useTheme()
+  const { ColorPalette, Assets, Spacing } = useTheme()
   const { t } = useTranslation()
   const [state, dispatch] = useStore()
   const [time, setTime] = useState<Timer>()
@@ -27,7 +27,7 @@ const AttemptLockout: React.FC = () => {
   const styles = StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       paddingHorizontal: Spacing.lg,
     },
     title: {

package/src/screens/AutoLock.tsx

@@ -26,11 +26,11 @@ type LockoutRowProps = AutoLockListItem & {
 const AutoLock: React.FC = () => {
   const { t } = useTranslation()
   const [store, dispatch] = useStore()
-  const { ColorPallet, SettingsTheme } = useTheme()
+  const { ColorPalette, SettingsTheme } = useTheme()
   const currentLockoutTime = store.preferences.autoLockTime ?? AutoLockTime.FiveMinutes
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       width: '100%',
     },
     section: {
@@ -45,7 +45,7 @@ const AutoLock: React.FC = () => {
     },
     itemSeparator: {
       borderBottomWidth: 1,
-      borderBottomColor: ColorPallet.brand.primaryBackground,
+      borderBottomColor: ColorPalette.brand.primaryBackground,
       marginHorizontal: 25,
     },
     checkboxContainer: {
@@ -72,11 +72,11 @@ const AutoLock: React.FC = () => {
         <BouncyCheckbox
           accessibilityLabel={String(AutoLockTime.FiveMinutes)}
           disableText
-          fillColor={ColorPallet.brand.secondaryBackground}
-          unfillColor={ColorPallet.brand.secondaryBackground}
+          fillColor={ColorPalette.brand.secondaryBackground}
+          unfillColor={ColorPalette.brand.secondaryBackground}
           size={36}
-          innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
-          ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary} />}
+          innerIconStyle={{ borderColor: ColorPalette.brand.primary, borderWidth: 2 }}
+          ImageComponent={() => <Icon name="circle" size={18} color={ColorPalette.brand.primary} />}
           onPress={() => onPress(value)}
           isChecked={selected}
           disableBuiltInState

package/src/screens/Chat.tsx

@@ -21,7 +21,7 @@ import { Role } from '../types/chat'
 import { BasicMessageMetadata, basicMessageCustomMetadata } from '../types/metadata'
 import { RootStackParams, ContactStackParams, Screens, Stacks } from '../types/navigators'
 import { getConnectionName } from '../utils/helpers'
-import { KeyboardAvoidingView } from 'react-native'
+import { KeyboardAvoidingView, Platform } from 'react-native'
 
 type ChatProps = StackScreenProps<ContactStackParams, Screens.Chat> | StackScreenProps<RootStackParams, Screens.Chat>
 
@@ -108,7 +108,11 @@ const Chat: React.FC<ChatProps> = ({ route }) => {
 
   return (
     <SafeAreaView edges={['bottom', 'left', 'right']} style={{ flex: 1, paddingTop: 20 }}>
-      <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" keyboardVerticalOffset={headerHeight}>
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === 'ios' ? undefined : 'padding'}
+        keyboardVerticalOffset={headerHeight}
+      >
         <GiftedChat
           keyboardShouldPersistTaps={'handled'}
           messages={chatMessages}

package/src/screens/ConfigureMediator.tsx

@@ -27,7 +27,7 @@ type ConfigureMediatorProps = StackScreenProps<SettingStackParams, Screens.Confi
 const ConfigureMediator = ({ route }: ConfigureMediatorProps) => {
   const [store, dispatch] = useStore()
   const { agent } = useAgent()
-  const { ColorPallet, SettingsTheme } = useTheme()
+  const { ColorPalette, SettingsTheme } = useTheme()
   const { t } = useTranslation()
   const { lockOutUser } = useAuth()
   const supportedMediators = store.preferences.availableMediators
@@ -50,7 +50,7 @@ const ConfigureMediator = ({ route }: ConfigureMediatorProps) => {
   }))
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       width: '100%',
     },
     section: {
@@ -65,7 +65,7 @@ const ConfigureMediator = ({ route }: ConfigureMediatorProps) => {
     },
     itemSeparator: {
       borderBottomWidth: 1,
-      borderBottomColor: ColorPallet.brand.primaryBackground,
+      borderBottomColor: ColorPalette.brand.primaryBackground,
       marginHorizontal: 25,
     },
     checkboxContainer: {
@@ -116,11 +116,11 @@ const ConfigureMediator = ({ route }: ConfigureMediatorProps) => {
       >
         <BouncyCheckbox
           disableText
-          fillColor={ColorPallet.brand.secondaryBackground}
-          unfillColor={ColorPallet.brand.secondaryBackground}
+          fillColor={ColorPalette.brand.secondaryBackground}
+          unfillColor={ColorPalette.brand.secondaryBackground}
           size={36}
-          innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
-          ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary} />}
+          innerIconStyle={{ borderColor: ColorPalette.brand.primary, borderWidth: 2 }}
+          ImageComponent={() => <Icon name="circle" size={18} color={ColorPalette.brand.primary} />}
           onPress={() => onPress(id)}
           isChecked={selected}
           disableBuiltInState

package/src/screens/ContactDetails.tsx

@@ -52,7 +52,7 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
     ...useCredentialByState(CredentialState.CredentialReceived),
     ...useCredentialByState(CredentialState.Done),
   ].filter((credential) => credential.connectionId === connection?.id)
-  const { ColorPallet, Assets } = useTheme()
+  const { ColorPalette, Assets } = useTheme()
   const [store] = useStore()
   const { width } = useWindowDimensions()
   const contactImageHeight = width * CONTACT_IMG_PERCENTAGE
@@ -76,7 +76,7 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
   const styles = StyleSheet.create({
     contentContainer: {
       padding: 20,
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
     },
     contactContainer: {
       flexDirection: 'row',
@@ -242,7 +242,7 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
                 fontSize: contactImageHeight,
                 lineHeight: contactImageHeight,
                 alignSelf: 'center',
-                color: ColorPallet.brand.primary,
+                color: ColorPalette.brand.primary,
               }}
             >
               {contactLabel.charAt(0).toUpperCase()}
@@ -271,14 +271,14 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
         )}
         {contactDetailsOptions?.enableCredentialList && (
           <>
-            <View style={{ borderTopColor: ColorPallet.grayscale.lightGrey, borderWidth: 1, marginTop: 20 }}></View>
+            <View style={{ borderTopColor: ColorPalette.grayscale.lightGrey, borderWidth: 1, marginTop: 20 }}></View>
             <ThemedText variant="headingFour" style={{ marginVertical: 16 }}>
               {t('ContactDetails.Credentials')}
             </ThemedText>
             <FlatList
               ItemSeparatorComponent={() => <View style={{ height: 20 }}></View>}
               ListEmptyComponent={() => (
-                <ThemedText style={{ color: ColorPallet.grayscale.lightGrey }}>
+                <ThemedText style={{ color: ColorPalette.grayscale.lightGrey }}>
                   {t('ContactDetails.NoCredentials')}
                 </ThemedText>
               )}
@@ -303,7 +303,7 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
             testID={testIdWithKey('RenameContact')}
             style={[styles.contentContainer, styles.actionContainer, { marginTop: 10 }]}
           >
-            <Assets.svg.iconEdit width={20} height={20} color={ColorPallet.brand.text} />
+            <Assets.svg.iconEdit width={20} height={20} color={ColorPalette.brand.text} />
             <ThemedText>{t('Screens.RenameContact')}</ThemedText>
           </TouchableOpacity>
         )}
@@ -316,7 +316,7 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
             testID={testIdWithKey('JSONDetails')}
             style={[styles.contentContainer, styles.actionContainer, { marginTop: 10 }]}
           >
-            <Assets.svg.iconCode width={20} height={20} color={ColorPallet.brand.text} />
+            <Assets.svg.iconCode width={20} height={20} color={ColorPalette.brand.text} />
             <ThemedText>{t('Global.ViewJSON')}</ThemedText>
           </TouchableOpacity>
         )}
@@ -327,8 +327,8 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
           testID={testIdWithKey('RemoveFromWallet')}
           style={[styles.contentContainer, styles.actionContainer, { marginTop: 10 }]}
         >
-          <Assets.svg.iconDelete width={20} height={20} color={ColorPallet.semantic.error} />
-          <ThemedText style={{ color: ColorPallet.semantic.error }}>{t('ContactDetails.RemoveContact')}</ThemedText>
+          <Assets.svg.iconDelete width={20} height={20} color={ColorPalette.semantic.error} />
+          <ThemedText style={{ color: ColorPalette.semantic.error }}>{t('ContactDetails.RemoveContact')}</ThemedText>
         </TouchableOpacity>
       </View>
       <CommonRemoveModal

package/src/screens/CredentialDetails.tsx

@@ -22,7 +22,7 @@ import { TOKENS, useServices } from '../container-api'
 import { useTheme } from '../contexts/theme'
 import { BifoldError } from '../types/error'
 import { CredentialMetadata, credentialCustomMetadata } from '../types/metadata'
-import { RootStackParams, Screens, Stacks } from '../types/navigators'
+import { ContactStackParams, NotificationStackParams, RootStackParams, Screens, Stacks } from '../types/navigators'
 import { ModalUsage } from '../types/remove'
 import { credentialTextColor, getCredentialIdentifiers, isValidAnonCredsCredential } from '../utils/credential'
 import { formatTime, useCredentialConnectionLabel } from '../utils/helpers'
@@ -36,7 +36,10 @@ import CredentialDetailSecondaryHeader from '../components/views/CredentialDetai
 import { ThemedText } from '../components/texts/ThemedText'
 import CardWatermark from '../components/misc/CardWatermark'
 
-type CredentialDetailsProps = StackScreenProps<RootStackParams, Screens.CredentialDetails>
+type CredentialDetailsProps = StackScreenProps<
+  RootStackParams & ContactStackParams & NotificationStackParams,
+  Screens.CredentialDetails
+>
 
 const paddingHorizontal = 24
 const paddingVertical = 16
@@ -51,7 +54,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
   const [credential, setCredential] = useState<CredentialExchangeRecord | undefined>(undefined)
   const { agent } = useAgent()
   const { t, i18n } = useTranslation()
-  const { ColorPallet, Assets } = useTheme()
+  const { ColorPalette, Assets } = useTheme()
   const [bundleResolver, logger, historyManagerCurried, historyEnabled, historyEventsLogger] = useServices([
     TOKENS.UTIL_OCA_RESOLVER,
     TOKENS.UTIL_LOGGER,
@@ -116,7 +119,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
   })
 
   const icon = {
-    color: credentialTextColor(ColorPallet, containerBackgroundColor),
+    color: credentialTextColor(ColorPalette, containerBackgroundColor),
     width: 48,
     height: 48,
   }
@@ -320,7 +323,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
               <CredentialCardLogo overlay={overlay} brandingOverlayType={bundleResolver.getBrandingOverlayType()} />
               <ThemedText
                 style={{
-                  color: credentialTextColor(ColorPallet, containerBackgroundColor),
+                  color: credentialTextColor(ColorPalette, containerBackgroundColor),
                   flexWrap: 'wrap',
                   maxWidth: '90%',
                 }}
@@ -331,7 +334,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
             <Assets.svg.iconChevronRight {...icon} />
           </View>
         </TouchableOpacity>
-        <View style={{ backgroundColor: ColorPallet.brand.secondaryBackground }}>
+        <View style={{ backgroundColor: ColorPalette.brand.secondaryBackground }}>
           <CredentialDetailPrimaryHeader
             overlay={overlay}
             brandingOverlayType={bundleResolver.getBrandingOverlayType()}
@@ -359,7 +362,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
           <View
             style={{
               padding: paddingVertical,
-              backgroundColor: ColorPallet.brand.secondaryBackground,
+              backgroundColor: ColorPalette.brand.secondaryBackground,
               ...(isBranding11 && { paddingTop: 0 }),
             }}
           >
@@ -376,27 +379,27 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
         {credentialConnectionLabel && isBranding10 ? (
           <View
             style={{
-              backgroundColor: ColorPallet.brand.secondaryBackground,
+              backgroundColor: ColorPalette.brand.secondaryBackground,
               marginTop: paddingVertical,
               paddingHorizontal,
               paddingVertical,
             }}
           >
             <ThemedText testID={testIdWithKey('IssuerName')}>
-              <ThemedText variant="title" style={isRevoked && { color: ColorPallet.grayscale.mediumGrey }}>
+              <ThemedText variant="title" style={isRevoked && { color: ColorPalette.grayscale.mediumGrey }}>
                 {t('CredentialDetails.IssuedBy') + ' '}
               </ThemedText>
-              <ThemedText style={isRevoked && { color: ColorPallet.grayscale.mediumGrey }}>
+              <ThemedText style={isRevoked && { color: ColorPalette.grayscale.mediumGrey }}>
                 {credentialConnectionLabel}
               </ThemedText>
             </ThemedText>
             {/* issued date if dev mode */}
             {store?.preferences.developerModeEnabled && credential?.createdAt ? (
               <ThemedText testID={testIdWithKey('IssuedDate')}>
-                <ThemedText variant="title" style={isRevoked && { color: ColorPallet.grayscale.mediumGrey }}>
+                <ThemedText variant="title" style={isRevoked && { color: ColorPalette.grayscale.mediumGrey }}>
                   {t('CredentialDetails.Issued') + ': '}
                 </ThemedText>
-                <ThemedText style={isRevoked && { color: ColorPallet.grayscale.mediumGrey }}>
+                <ThemedText style={isRevoked && { color: ColorPalette.grayscale.mediumGrey }}>
                   {formatTime(credential.createdAt, { format: 'YYYY-MM-DD HH:mm:ss [UTC]' })}
                 </ThemedText>
               </ThemedText>
@@ -406,7 +409,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
         {store?.preferences.developerModeEnabled && (
           <View
             style={{
-              backgroundColor: ColorPallet.brand.secondaryBackground,
+              backgroundColor: ColorPalette.brand.secondaryBackground,
               marginTop: paddingVertical,
               paddingHorizontal,
               paddingVertical,
@@ -419,7 +422,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
               testID={testIdWithKey('JSONDetails')}
               style={{ flexDirection: 'row', gap: 8 }}
             >
-              <Assets.svg.iconCode width={20} height={20} color={ColorPallet.brand.secondary} />
+              <Assets.svg.iconCode width={20} height={20} color={ColorPalette.brand.secondary} />
               <ThemedText>{t('Global.ViewJSON')}</ThemedText>
             </TouchableOpacity>
           </View>
@@ -427,20 +430,20 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
         {isRevoked ? (
           <View
             style={{
-              backgroundColor: ColorPallet.notification.error,
+              backgroundColor: ColorPalette.notification.error,
               marginTop: paddingVertical,
               paddingHorizontal,
               paddingVertical,
             }}
           >
             <ThemedText testID={testIdWithKey('RevokedDate')}>
-              <ThemedText variant="title" style={{ color: ColorPallet.notification.errorText }}>
+              <ThemedText variant="title" style={{ color: ColorPalette.notification.errorText }}>
                 {t('CredentialDetails.Revoked') + ': '}
               </ThemedText>
-              <ThemedText style={{ color: ColorPallet.notification.errorText }}>{preciseRevocationDate}</ThemedText>
+              <ThemedText style={{ color: ColorPalette.notification.errorText }}>{preciseRevocationDate}</ThemedText>
             </ThemedText>
             <ThemedText
-              style={{ color: ColorPallet.notification.errorText, marginTop: paddingVertical }}
+              style={{ color: ColorPalette.notification.errorText, marginTop: paddingVertical }}
               testID={testIdWithKey('RevocationMessage')}
             >
               {credential?.revocationNotification?.comment

package/src/screens/CredentialOffer.tsx

@@ -46,7 +46,7 @@ type CredentialOfferProps = {
 const CredentialOffer: React.FC<CredentialOfferProps> = ({ navigation, credentialId }) => {
   const { agent } = useAppAgent()
   const { t, i18n } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { RecordLoading } = useAnimatedComponents()
   const { assertNetworkConnected } = useNetwork()
   const [
@@ -286,7 +286,7 @@ const CredentialOffer: React.FC<CredentialOfferProps> = ({ navigation, credentia
           paddingHorizontal: 25,
           paddingVertical: 16,
           paddingBottom: 26,
-          backgroundColor: ColorPallet.brand.secondaryBackground,
+          backgroundColor: ColorPalette.brand.secondaryBackground,
         }}
       >
         {loading ? <RecordLoading /> : null}

package/src/screens/DataRetention.tsx

@@ -14,12 +14,12 @@ import { ThemedText } from '../components/texts/ThemedText'
 const DataRetention: React.FC = () => {
   const { t } = useTranslation()
   const [store, dispatch] = useStore()
-  const { ColorPallet, SettingsTheme } = useTheme()
+  const { ColorPalette, SettingsTheme } = useTheme()
   const [useDataRetention, setUseDataRetention] = useState<boolean>(!!store.preferences.useDataRetention)
 
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       width: '100%',
     },
     section: {
@@ -34,7 +34,7 @@ const DataRetention: React.FC = () => {
     },
     itemSeparator: {
       borderBottomWidth: 1,
-      borderBottomColor: ColorPallet.brand.primaryBackground,
+      borderBottomColor: ColorPalette.brand.primaryBackground,
       marginHorizontal: 25,
     },
   })
@@ -54,11 +54,11 @@ const DataRetention: React.FC = () => {
         <BouncyCheckbox
           accessibilityLabel={t('Global.On')}
           disableText
-          fillColor={ColorPallet.brand.secondaryBackground}
-          unfillColor={ColorPallet.brand.secondaryBackground}
+          fillColor={ColorPalette.brand.secondaryBackground}
+          unfillColor={ColorPalette.brand.secondaryBackground}
           size={36}
-          innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
-          ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary}></Icon>}
+          innerIconStyle={{ borderColor: ColorPalette.brand.primary, borderWidth: 2 }}
+          ImageComponent={() => <Icon name="circle" size={18} color={ColorPalette.brand.primary}></Icon>}
           onPress={() => updateDataRetention(true)}
           isChecked={useDataRetention}
           disableBuiltInState
@@ -73,11 +73,11 @@ const DataRetention: React.FC = () => {
         <BouncyCheckbox
           accessibilityLabel={t('Global.Off')}
           disableText
-          fillColor={ColorPallet.brand.secondaryBackground}
-          unfillColor={ColorPallet.brand.secondaryBackground}
+          fillColor={ColorPalette.brand.secondaryBackground}
+          unfillColor={ColorPalette.brand.secondaryBackground}
           size={36}
-          innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
-          ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary}></Icon>}
+          innerIconStyle={{ borderColor: ColorPalette.brand.primary, borderWidth: 2 }}
+          ImageComponent={() => <Icon name="circle" size={18} color={ColorPalette.brand.primary}></Icon>}
           onPress={() => updateDataRetention(false)}
           isChecked={!useDataRetention}
           disableBuiltInState