@bifold/core 2.2.1 → 2.4.0

package/src/screens/Developer.tsx

@@ -12,7 +12,7 @@ import { ThemedText } from '../components/texts/ThemedText'
 const Developer: React.FC = () => {
   const [store, dispatch] = useStore()
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const [useVerifierCapability, setUseVerifierCapability] = useState(!!store.preferences.useVerifierCapability)
   const [useConnectionInviterCapability, setConnectionInviterCapability] = useState(
     !!store.preferences.useConnectionInviterCapability
@@ -136,9 +136,9 @@ const Developer: React.FC = () => {
             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}
+              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}
@@ -158,9 +158,9 @@ const Developer: React.FC = () => {
             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}
+              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}
@@ -180,9 +180,11 @@ const Developer: React.FC = () => {
             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}
+              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}
@@ -202,9 +204,9 @@ const Developer: React.FC = () => {
             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}
+              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}
@@ -225,9 +227,9 @@ const Developer: React.FC = () => {
               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}
+                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}
@@ -248,9 +250,9 @@ const Developer: React.FC = () => {
             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}
+              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}
@@ -270,9 +272,9 @@ const Developer: React.FC = () => {
             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}
+              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}

package/src/screens/Home.tsx

@@ -34,7 +34,7 @@ const Home: React.FC<HomeProps> = () => {
   ])
   const notifications = useNotifications({})
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const [store, dispatch] = useStore()
   const { start, stop } = useTour()
   const [showTourPopup, setShowTourPopup] = useState(false)
@@ -148,7 +148,7 @@ const Home: React.FC<HomeProps> = () => {
               paddingHorizontal: 20,
               paddingTop: index === 0 ? 20 : 0,
               paddingBottom: index === notifications.length - 1 ? 20 : 10,
-              backgroundColor: ColorPallet.brand.secondaryBackground,
+              backgroundColor: ColorPalette.brand.secondaryBackground,
             }}
           >
             {DisplayListItemType(item)}

package/src/screens/JSONDetails.tsx

@@ -19,12 +19,12 @@ const JSONDetails = ({ route }: JSONDetailsProps) => {
     throw new Error('JSONDetails route params were not set properly')
   }
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { jsonBlob } = route.params
   const styles = StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       padding: 20,
     },
     title: {
@@ -36,7 +36,7 @@ const JSONDetails = ({ route }: JSONDetailsProps) => {
     },
     jsonContainer: {
       padding: 16,
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
       height: '75%',
       borderWidth: 1,
       borderStyle: 'solid',

package/src/screens/Language.tsx

@@ -17,7 +17,7 @@ interface Language {
 
 const Language = () => {
   const { t, i18n } = useTranslation()
-  const { ColorPallet, SettingsTheme } = useTheme()
+  const { ColorPalette, SettingsTheme } = useTheme()
   const [{ supportedLanguages }] = useServices([TOKENS.CONFIG])
 
   const languages: Language[] = supportedLanguages.map((lang) => ({
@@ -27,7 +27,7 @@ const Language = () => {
 
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       width: '100%',
     },
     section: {
@@ -42,7 +42,7 @@ const Language = () => {
     },
     itemSeparator: {
       borderBottomWidth: 1,
-      borderBottomColor: ColorPallet.brand.primaryBackground,
+      borderBottomColor: ColorPalette.brand.primaryBackground,
       marginHorizontal: 25,
     },
   })
@@ -71,11 +71,11 @@ const Language = () => {
                 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}
+                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={async () => await handleLanguageChange(language)}
                 isChecked={id === i18n.language}
                 disableBuiltInState

package/src/screens/ListContacts.tsx

@@ -22,7 +22,7 @@ interface ListContactsProps {
 }
 
 const ListContacts: React.FC<ListContactsProps> = ({ navigation }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { t } = useTranslation()
   const { agent } = useAgent()
   const [connections, setConnections] = useState<ConnectionRecord[]>([])
@@ -35,10 +35,10 @@ const ListContacts: React.FC<ListContactsProps> = ({ navigation }) => {
   ])
   const style = StyleSheet.create({
     list: {
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
     },
     itemSeparator: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       height: 1,
       marginHorizontal: 16,
     },

package/src/screens/ListCredentials.tsx

@@ -37,7 +37,7 @@ const ListCredentials: React.FC = () => {
     TOKENS.CONFIG,
   ])
   const navigation = useNavigation<StackNavigationProp<RootStackParams>>()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { start, stop } = useTour()
   const screenIsFocused = useIsFocused()
   const {
@@ -108,7 +108,7 @@ const ListCredentials: React.FC = () => {
   return (
     <View>
       <FlatList
-        style={{ backgroundColor: ColorPallet.brand.primaryBackground }}
+        style={{ backgroundColor: ColorPalette.brand.primaryBackground }}
         data={credentials.sort((a, b) => new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf())}
         keyExtractor={(credential) => credential.id}
         renderItem={({ item: credential, index }) => {

package/src/screens/ListProofRequests.tsx

@@ -112,7 +112,7 @@ type ListProofRequestsProps = StackScreenProps<ProofRequestsStackParams, Screens
 
 const ListProofRequests: React.FC<ListProofRequestsProps> = ({ navigation, route }) => {
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const [store] = useStore()
 
   const style = StyleSheet.create({
@@ -133,7 +133,7 @@ const ListProofRequests: React.FC<ListProofRequestsProps> = ({ navigation, route
   return (
     <SafeAreaView style={style.container} edges={['left', 'right']}>
       <FlatList
-        style={{ backgroundColor: ColorPallet.brand.primaryBackground }}
+        style={{ backgroundColor: ColorPalette.brand.primaryBackground }}
         data={proofRequestTemplates}
         keyExtractor={(records) => records.id}
         renderItem={({ item }) => {

package/src/screens/MobileVerifierLoading.tsx

@@ -21,7 +21,7 @@ const MobileVerifierLoading: React.FC<MobileVerifierLoadingProps> = ({ navigatio
   const goalCode = useOutOfBandByConnectionId(connectionId)?.outOfBandInvitation.goalCode
   const proofRecord = useProofById(proofId)
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const { agent } = useAgent()
 
   if (!agent) {
@@ -31,7 +31,7 @@ const MobileVerifierLoading: React.FC<MobileVerifierLoadingProps> = ({ navigatio
   const styles = StyleSheet.create({
     container: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
+      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
       padding: 20,
     },
     image: {
@@ -73,7 +73,7 @@ const MobileVerifierLoading: React.FC<MobileVerifierLoadingProps> = ({ navigatio
 
   return (
     <SafeAreaModal transparent animationType={'slide'}>
-      <SafeAreaView style={{ backgroundColor: ColorPallet.brand.modalPrimaryBackground }}>
+      <SafeAreaView style={{ backgroundColor: ColorPalette.brand.modalPrimaryBackground }}>
         <ScrollView style={styles.container}>
           <View style={styles.messageContainer}>
             <ThemedText

package/src/screens/PINChange.tsx

@@ -1,4 +1,4 @@
-import { ParamListBase, useNavigation } from '@react-navigation/native'
+import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp, StackScreenProps } from '@react-navigation/stack'
 import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,7 +13,6 @@ import {
   View,
 } from 'react-native'
 
-// eslint-disable-next-line import/no-named-as-default
 import { ButtonType } from '../components/buttons/Button-api'
 import PINInput from '../components/inputs/PINInput'
 import PINValidationHelper from '../components/misc/PINValidationHelper'
@@ -29,11 +28,11 @@ import usePreventScreenCapture from '../hooks/screen-capture'
 import { usePINValidation } from '../hooks/usePINValidation'
 import { HistoryCardType, HistoryRecord } from '../modules/history/types'
 import { BifoldError } from '../types/error'
-import { OnboardingStackParams, Screens } from '../types/navigators'
+import { OnboardingStackParams, Screens, SettingStackParams } from '../types/navigators'
 import { useAppAgent } from '../utils/agent'
 import { testIdWithKey } from '../utils/testable'
 
-const PINChange: React.FC<StackScreenProps<ParamListBase, Screens.ChangePIN>> = () => {
+const PINChange: React.FC<StackScreenProps<SettingStackParams, Screens.ChangePIN>> = () => {
   const { agent } = useAppAgent()
   const { checkWalletPIN, rekeyWallet } = useAuth()
   const [PIN, setPIN] = useState('')
@@ -43,7 +42,7 @@ const PINChange: React.FC<StackScreenProps<ParamListBase, Screens.ChangePIN>> =
   const navigation = useNavigation<StackNavigationProp<OnboardingStackParams>>()
   const [store] = useStore()
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { ButtonLoading } = useAnimatedComponents()
   const PINTwoInputRef = useRef<TextInput>(null)
   const createPINButtonRef = useRef<TouchableOpacity>(null)
@@ -83,7 +82,7 @@ const PINChange: React.FC<StackScreenProps<ParamListBase, Screens.ChangePIN>> =
   const style = StyleSheet.create({
     screenContainer: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       padding: 20,
       justifyContent: 'space-between',
     },

package/src/screens/PINCreate.tsx

@@ -45,7 +45,7 @@ const PINCreate: React.FC<PINCreateProps> = ({ setAuthenticated, explainedStatus
   const [, dispatch] = useStore()
   const { t } = useTranslation()
 
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { ButtonLoading } = useAnimatedComponents()
   const PINTwoInputRef = useRef<TextInput>(null)
   const createPINButtonRef = useRef<TouchableOpacity>(null)
@@ -65,7 +65,7 @@ const PINCreate: React.FC<PINCreateProps> = ({ setAuthenticated, explainedStatus
   const style = StyleSheet.create({
     screenContainer: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       padding: 20,
       justifyContent: 'space-between',
     },

package/src/screens/PINEnter.tsx

@@ -19,7 +19,6 @@ import { useStore } from '../contexts/store'
 import { useTheme } from '../contexts/theme'
 import { useDeveloperMode } from '../hooks/developer-mode'
 import { useLockout } from '../hooks/lockout'
-import { useGotoPostAuthScreens } from '../hooks/onboarding'
 import usePreventScreenCapture from '../hooks/screen-capture'
 import { BifoldError } from '../types/error'
 import { testIdWithKey } from '../utils/testable'
@@ -41,7 +40,7 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated }) => {
   const [forgotPINModalVisible, setForgotPINModalVisible] = useState(false)
   const [devModalVisible, setDevModalVisible] = useState(false)
   const [biometricsEnrollmentChange, setBiometricsEnrollmentChange] = useState(false)
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const { ButtonLoading } = useAnimatedComponents()
   const [
     logger,
@@ -61,7 +60,6 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated }) => {
     setDevModalVisible(true)
   }
   const { incrementDeveloperMenuCounter } = useDeveloperMode(onDevModeTriggered)
-  const gotoPostAuthScreens = useGotoPostAuthScreens()
   const isContinueDisabled = inlineMessages.enabled ? !continueEnabled : !continueEnabled || PIN.length < minPINLength
   usePreventScreenCapture(preventScreenCapture)
 
@@ -89,9 +87,8 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated }) => {
         payload: [{ loginAttempts: 0 }],
       })
       setAuthenticated(true)
-      gotoPostAuthScreens()
     }
-  }, [getWalletSecret, dispatch, setAuthenticated, gotoPostAuthScreens])
+  }, [getWalletSecret, dispatch, setAuthenticated])
 
   useEffect(() => {
     const handle = InteractionManager.runAfterInteractions(async () => {
@@ -189,7 +186,6 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated }) => {
           payload: [{ displayNotification: false }],
         })
         setAuthenticated(true)
-        gotoPostAuthScreens()
       } catch (err: unknown) {
         const error = new BifoldError(
           t('Error.Title1041'),
@@ -207,7 +203,6 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated }) => {
       getLockoutPenalty,
       dispatch,
       setAuthenticated,
-      gotoPostAuthScreens,
       t,
       attemptLockout,
       inlineMessages,
@@ -241,7 +236,7 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated }) => {
       height: '100%',
       padding: 20,
       justifyContent: 'space-between',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     buttonContainer: {
       width: '100%',
@@ -269,7 +264,7 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated }) => {
       marginBottom: 20,
     },
     forgotPINText: {
-      color: ColorPallet.brand.link,
+      color: ColorPalette.brand.link,
       fontSize: 20,
     },
     buildNumberText: {

package/src/screens/PINExplainer.tsx

@@ -15,12 +15,12 @@ export interface PINExplainerProps {
 
 const PINExplainer: React.FC<PINExplainerProps> = ({ continueCreatePIN }) => {
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme, Assets } = useTheme()
+  const { ColorPalette, TextTheme, Assets } = useTheme()
 
   const style = StyleSheet.create({
     safeAreaView: {
       flex: 1,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     scrollViewContentContainer: {
       padding: 20,
@@ -37,7 +37,7 @@ const PINExplainer: React.FC<PINExplainerProps> = ({ continueCreatePIN }) => {
   })
 
   const imageDisplayOptions = {
-    fill: ColorPallet.notification.infoText,
+    fill: ColorPalette.notification.infoText,
     height: 150,
     width: 150,
   }

package/src/screens/PINVerify.tsx

@@ -34,7 +34,7 @@ const PINVerify: React.FC<Props> = ({ setAuthenticated, usage = PINEntryUsage.PI
   const [continueDisabled, setContinueDisabled] = useState(false)
   const [loading, setLoading] = useState(false)
   const [alertModalVisible, setAlertModalVisible] = useState<boolean>(false)
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { ButtonLoading } = useAnimatedComponents()
   const [inlineMessageField, setInlineMessageField] = useState<InlineMessageProps>()
   const [{ preventScreenCapture }] = useServices([TOKENS.CONFIG])
@@ -94,7 +94,7 @@ const PINVerify: React.FC<Props> = ({ setAuthenticated, usage = PINEntryUsage.PI
     screenContainer: {
       flex: 1,
       padding: 20,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       justifyContent: 'space-between',
     },
     buttonContainer: {

package/src/screens/PasteUrl.tsx

@@ -18,7 +18,7 @@ import { ThemedText } from '../components/texts/ThemedText'
 export type PasteProps = StackScreenProps<ConnectStackParams>
 
 const PasteUrl: React.FC<PasteProps> = ({ navigation }) => {
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const [pastedContent, setPastedContent] = useState<string>('')
   const [errorMessage, setErrorMessage] = useState<{ title: string; message: string } | undefined>()
   const { t } = useTranslation()
@@ -30,7 +30,7 @@ const PasteUrl: React.FC<PasteProps> = ({ navigation }) => {
   const styles = StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     content: {
       margin: 20,
@@ -41,10 +41,10 @@ const PasteUrl: React.FC<PasteProps> = ({ navigation }) => {
     textBox: {
       ...TextTheme.normal,
       textAlignVertical: 'top',
-      borderColor: ColorPallet.grayscale.darkGrey,
+      borderColor: ColorPalette.grayscale.darkGrey,
       borderWidth: 1,
       borderRadius: 5,
-      backgroundColor: ColorPallet.grayscale.lightGrey,
+      backgroundColor: ColorPalette.grayscale.lightGrey,
     },
     buttonContainer: {
       margin: 20,

package/src/screens/ProofChangeCredential.tsx

@@ -32,7 +32,7 @@ const ProofChangeCredential: React.FC<ProofChangeProps> = ({ route, navigation }
   const selectedCred = route.params.selectedCred
   const altCredentials = route.params.altCredentials
   const onCredChange = route.params.onCredChange
-  const { ColorPallet, SelectedCredTheme } = useTheme()
+  const { ColorPalette, SelectedCredTheme } = useTheme()
   const { t } = useTranslation()
   const [loading, setLoading] = useState(false)
   const [proofItems, setProofItems] = useState<ProofCredentialItems[]>([])
@@ -46,7 +46,7 @@ const ProofChangeCredential: React.FC<ProofChangeProps> = ({ route, navigation }
       marginHorizontal: 20,
     },
     cardLoading: {
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
       flex: 1,
       flexGrow: 1,
       marginVertical: 35,

package/src/screens/ProofDetails.tsx

@@ -47,21 +47,21 @@ const VerifiedProof: React.FC<VerifiedProofProps> = ({
   onGenerateNewPressed,
 }: VerifiedProofProps) => {
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme, Assets } = useTheme()
+  const { ColorPalette, TextTheme, Assets } = useTheme()
   const [sharedProofDataItems, setSharedProofDataItems] = useState<GroupedSharedProofDataItem[]>([])
   const styles = StyleSheet.create({
     container: {
       flexGrow: 1,
     },
     iconContainer: {
-      backgroundColor: ColorPallet.notification.info,
+      backgroundColor: ColorPalette.notification.info,
       width: 100,
       height: 100,
       alignItems: 'center',
       justifyContent: 'center',
       marginBottom: 15,
       borderRadius: 50,
-      borderColor: ColorPallet.notification.infoBorder,
+      borderColor: ColorPalette.notification.infoBorder,
       borderWidth: 3,
       alignSelf: 'center',
       overflow: 'hidden',

package/src/screens/ProofRequest.tsx

@@ -103,7 +103,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
   const [loading, setLoading] = useState<boolean>(true)
   const [declineModalVisible, setDeclineModalVisible] = useState(false)
   const [cancelModalVisible, setCancelModalVisible] = useState(false)
-  const { ColorPallet, ListItems, TextTheme } = useTheme()
+  const { ColorPalette, ListItems, TextTheme } = useTheme()
   const goalCode = useOutOfBandByConnectionId(proof?.connectionId ?? '')?.outOfBandInvitation.goalCode
   const outOfBandInvitation = useOutOfBandByReceivedInvitationId(proof?.parentThreadId ?? '')?.outOfBandInvitation
   const [containsPI, setContainsPI] = useState(false)
@@ -174,7 +174,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
     },
     detailsButton: {
       ...ListItems.recordAttributeText,
-      color: ColorPallet.brand.link,
+      color: ColorPalette.brand.link,
       textDecorationLine: 'underline',
     },
   })
@@ -703,14 +703,14 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
                         alignSelf: 'center',
                         flex: 1,
                         flexWrap: 'wrap',
-                        color: ColorPallet.notification.errorText,
+                        color: ColorPalette.notification.errorText,
                       }}
                     >
                       {t('ProofRequest.YouCantRespond')}{' '}
                       <ThemedText
                         style={{
                           fontWeight: TextTheme.normal.fontWeight,
-                          color: ColorPallet.brand.link,
+                          color: ColorPalette.brand.link,
                         }}
                         onPress={() => setShowDetailsModal(true)}
                       >
@@ -907,7 +907,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: ColorPallet.brand.primaryBackground,
+            backgroundColor: ColorPalette.brand.primaryBackground,
           }}
         >
           <InfoBox
@@ -931,7 +931,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: ColorPallet.brand.primaryBackground,
+            backgroundColor: ColorPalette.brand.primaryBackground,
           }}
         >
           <InfoBox
@@ -965,7 +965,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
                   style={{
                     width: 'auto',
                     borderWidth: 1,
-                    borderColor: ColorPallet.grayscale.lightGrey,
+                    borderColor: ColorPalette.grayscale.lightGrey,
                     marginTop: 20,
                   }}
                 />

package/src/screens/ProofRequestAccept.tsx

@@ -25,13 +25,13 @@ const ProofRequestAccept: React.FC<ProofRequestAcceptProps> = ({ visible, proofI
   const [proofDeliveryStatus, setProofDeliveryStatus] = useState<ProofState>(ProofState.RequestReceived)
   const proof = useProofById(proofId)
   const navigation = useNavigation()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const { SendingProof, SentProof } = useAnimatedComponents()
 
   const styles = StyleSheet.create({
     container: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
+      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
       padding: 20,
     },
     image: {
@@ -82,7 +82,7 @@ const ProofRequestAccept: React.FC<ProofRequestAcceptProps> = ({ visible, proofI
 
   return (
     <SafeAreaModal visible={visible} transparent={true} animationType={'none'}>
-      <SafeAreaView style={{ backgroundColor: ColorPallet.brand.modalPrimaryBackground }}>
+      <SafeAreaView style={{ backgroundColor: ColorPalette.brand.modalPrimaryBackground }}>
         <ScrollView style={styles.container}>
           <View style={styles.messageContainer}>
             {proofDeliveryStatus === ProofState.RequestReceived && (

package/src/screens/ProofRequestDetails.tsx

@@ -36,7 +36,7 @@ interface ProofRequestAttributesCardProps {
 }
 
 const ProofRequestAttributesCard: React.FC<ProofRequestAttributesCardProps> = ({ data, onChangeValue }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { i18n } = useTranslation()
   const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
   const [attributes, setAttributes] = useState<Field[] | undefined>(undefined)
@@ -67,7 +67,7 @@ const ProofRequestAttributesCard: React.FC<ProofRequestAttributesCardProps> = ({
       <VerifierCredentialCard
         onChangeValue={onChangeValue}
         displayItems={attributes}
-        style={{ backgroundColor: ColorPallet.brand.secondaryBackground }}
+        style={{ backgroundColor: ColorPalette.brand.secondaryBackground }}
         credDefId={credDefId}
         schemaId={data.schema}
         preview
@@ -93,7 +93,7 @@ const ProofRequestCardsComponent: React.FC<ProofRequestCardsProps> = ({ attribut
 const ProofRequestCards = memo(ProofRequestCardsComponent)
 
 const ProofRequestDetails: React.FC<ProofRequestDetailsProps> = ({ route, navigation }) => {
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const [store] = useStore()
   const { t } = useTranslation()
   const { i18n } = useTranslation()
@@ -113,7 +113,7 @@ const ProofRequestDetails: React.FC<ProofRequestDetailsProps> = ({ route, naviga
   const style = StyleSheet.create({
     container: {
       flexGrow: 1,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       padding: 16,
     },
     header: {