@procivis/one-react-native-components 0.3.115 → 0.3.130

package/lib/typescript/utils/parsers/credential-sharing.d.ts

@@ -2,19 +2,19 @@ import { Claim, CoreConfig, CredentialDetail, PresentationDefinitionField, Prese
 import { CredentialAttribute, CredentialCardProps } from '../../ui-components/credential';
 import { CredentialCardNotice } from '../../ui-components/credential/card/credential-card';
 import { CardLabels, CredentialDetailsCardPropsWithoutWidth } from './credential';
-export declare const validityCheckedCardFromCredential: (credential: CredentialDetail, expanded: boolean, multipleCredentialsAvailable: boolean, config: CoreConfig, notice: CredentialCardNotice | undefined, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'testID' | 'width'>;
+export declare const validityCheckedCardFromCredential: (credential: CredentialDetail, expanded: boolean, selectiveDisclosureSupported: boolean | undefined, multipleCredentialsAvailable: boolean, config: CoreConfig, notice: CredentialCardNotice | undefined, testID: string, labels: ShareCredentialCardLabels, language: string | undefined) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'testID' | 'width'>;
 export declare const missingCredentialCardFromRequest: (request: PresentationDefinitionRequestedCredential, notice: CredentialCardNotice | undefined, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'width'>;
 type FlatClaim = Claim & {
     isArrayElement?: boolean;
 };
-export declare const shareCredentialCardAttributeFromClaim: (id: string, config: CoreConfig, testID: string, labels: ShareCredentialCardLabels, claim?: FlatClaim, field?: PresentationDefinitionField) => CredentialAttribute;
+export declare const shareCredentialCardAttributeFromClaim: (id: string, config: CoreConfig, testID: string, labels: ShareCredentialCardLabels, language: string | undefined, claim?: FlatClaim, field?: PresentationDefinitionField) => CredentialAttribute;
 export type ShareCredentialCardLabels = CardLabels & {
-    selectiveDisclosureNotice: string;
+    selectiveDisclosure: string;
     missingAttribute: string;
     missingCredential: string;
     multipleCredentials: string;
 };
-export declare const shareCredentialCardFromCredential: (credential: CredentialDetail | undefined, expanded: boolean, multipleCredentialsAvailable: boolean, request: PresentationDefinitionRequestedCredential, selectedFields: string[] | undefined, config: CoreConfig, testID: string, labels: ShareCredentialCardLabels) => CredentialDetailsCardPropsWithoutWidth;
-export declare const selectCredentialCardAttributeFromClaim: (id: string, config: CoreConfig, testID: string, labels: ShareCredentialCardLabels, claim?: FlatClaim, field?: PresentationDefinitionField) => CredentialAttribute;
-export declare const selectCredentialCardFromCredential: (credential: CredentialDetail, selected: boolean, request: PresentationDefinitionRequestedCredential, config: CoreConfig, testID: string, labels: ShareCredentialCardLabels) => CredentialDetailsCardPropsWithoutWidth;
+export declare const shareCredentialCardFromCredential: (credential: CredentialDetail | undefined, expanded: boolean, multipleCredentialsAvailable: boolean, request: PresentationDefinitionRequestedCredential, selectedFields: string[] | undefined, config: CoreConfig, testID: string, labels: ShareCredentialCardLabels, language: string | undefined) => CredentialDetailsCardPropsWithoutWidth;
+export declare const selectCredentialCardAttributeFromClaim: (id: string, config: CoreConfig, testID: string, labels: ShareCredentialCardLabels, language: string | undefined, claim?: FlatClaim, field?: PresentationDefinitionField) => CredentialAttribute;
+export declare const selectCredentialCardFromCredential: (credential: CredentialDetail, selected: boolean, request: PresentationDefinitionRequestedCredential, config: CoreConfig, testID: string, labels: ShareCredentialCardLabels, language: string | undefined) => CredentialDetailsCardPropsWithoutWidth;
 export {};

package/lib/typescript/utils/parsers/credential.d.ts

@@ -16,16 +16,16 @@ export type CardHeaderLabels = {
     suspended: string;
     suspendedUntil: (date: string) => string;
 };
-export declare const cardHeaderFromCredential: (credential: CredentialDetail, claims: Claim[] | undefined, config: CoreConfig, testID: string, labels: CardHeaderLabels) => Omit<CredentialHeaderProps, 'style'>;
+export declare const cardHeaderFromCredential: (credential: CredentialDetail, claims: Claim[] | undefined, config: CoreConfig, testID: string, labels: CardHeaderLabels, language: string | undefined) => Omit<CredentialHeaderProps, 'style'>;
 export type CardLabels = CardHeaderLabels & {
     validityIssuesNotice: string;
 };
-export declare const getCredentialCardPropsFromCredential: (credential: CredentialDetail, claims: Claim[] | undefined, config: CoreConfig, notice: CredentialCardNotice | undefined, testID: string, labels: CardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'width'>;
-export declare const detailsCardAttributeFromClaim: (claim: Claim, config: CoreConfig, testID: string) => CredentialAttribute;
+export declare const getCredentialCardPropsFromCredential: (credential: CredentialDetail, claims: Claim[] | undefined, config: CoreConfig, notice: CredentialCardNotice | undefined, testID: string, labels: CardLabels, language: string | undefined) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'width'>;
+export declare const detailsCardAttributeFromClaim: (claim: Claim, config: CoreConfig, testID: string, language: string | undefined) => CredentialAttribute;
 export type CredentialDetailsCardPropsWithoutWidth = Omit<CredentialDetailsCardProps, 'expanded' | 'card'> & {
     card: Omit<CredentialCardProps, 'width'>;
 };
-export declare const detailsCardFromCredential: (credential: CredentialDetail, config: CoreConfig, testID: string, labels: CardLabels) => CredentialDetailsCardPropsWithoutWidth;
-export declare const detailsCardFromCredentialWithClaims: (credential: CredentialDetail, claims: Claim[], config: CoreConfig, testID: string, labels: CardLabels) => CredentialDetailsCardPropsWithoutWidth;
+export declare const detailsCardFromCredential: (credential: CredentialDetail, config: CoreConfig, testID: string, labels: CardLabels, language: string | undefined) => CredentialDetailsCardPropsWithoutWidth;
+export declare const detailsCardFromCredentialWithClaims: (credential: CredentialDetail, claims: Claim[], config: CoreConfig, testID: string, labels: CardLabels, language: string | undefined) => CredentialDetailsCardPropsWithoutWidth;
 export declare const nestAttributes: (attributes: CredentialAttribute[]) => CredentialAttribute[];
 export declare function getCredentialSchemaWithoutImages<T extends CredentialSchemaListItem>(credentialSchema: T): T;

package/lib/typescript/utils/parsers/query.d.ts

@@ -1,7 +1,7 @@
 import { CredentialListQuery, CredentialSchemaListQuery, DidListQuery, HistoryListQuery, IdentifierListQuery, ProofListQuery, ProofSchemaListQuery } from '@procivis/react-native-one-core';
 export declare const getQueryKeyFromCredentialListQueryParams: (queryParams?: Partial<CredentialListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").CredentialListQuerySearchType[] | import("@procivis/react-native-one-core").CredentialListQueryExactColumn[] | import("@procivis/react-native-one-core").CredentialRole[] | import("@procivis/react-native-one-core").CredentialState[] | import("@procivis/react-native-one-core").CredentialListIncludeEntityType[] | undefined)[];
 export declare const getQueryKeyFromHistoryListQueryParams: (queryParams?: Partial<HistoryListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").HistorySearch | import("@procivis/react-native-one-core").HistoryEntityType[] | import("@procivis/react-native-one-core").HistoryAction[] | undefined)[];
-export declare const getQueryKeyFromCredentialSchemaListQueryParams: (queryParams?: Partial<CredentialSchemaListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").CredentialSchemaListQueryExactColumn[] | import("@procivis/react-native-one-core").CredentialSchemaListIncludeEntityType[] | undefined)[];
+export declare const getQueryKeyFromCredentialSchemaListQueryParams: (queryParams?: Partial<CredentialSchemaListQuery>) => (string | number | boolean | string[] | import("@procivis/react-native-one-core").CredentialSchemaListQueryExactColumn[] | import("@procivis/react-native-one-core").CredentialSchemaListIncludeEntityType[] | undefined)[];
 export declare const getQueryKeyFromProofSchemaListQueryParams: (queryParams?: Partial<ProofSchemaListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").ProofSchemaListQueryExactColumn[] | undefined)[];
 export declare const getQueryKeyFromProofListQueryParams: (queryParams?: Partial<ProofListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").ProofListQueryExactColumn[] | import("@procivis/react-native-one-core").ProofState[] | import("@procivis/react-native-one-core").ProofRole[] | undefined)[];
 export declare const getQueryKeyFromDidListQueryParams: (queryParams?: Partial<DidListQuery>) => (string | number | boolean | string[] | import("@procivis/react-native-one-core").DidListQueryExactColumn[] | import("@procivis/react-native-one-core").KeyRole[] | undefined)[];

package/lib/typescript/utils/translations.d.ts

@@ -0,0 +1 @@
+export declare const getTranslatedLabel: (translations: Record<string, string> | undefined, language: string | undefined, defaultLanguage: string) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.3.115",
+  "version": "0.3.130",
   "author": "Procivis AG (https://procivis.ch)",
   "license": "Apache-2.0",
   "description": "Common Procivis ONE UI components for react-native",
@@ -53,7 +53,7 @@
     "@babel/runtime": "^7.25.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@gorhom/bottom-sheet": "^5.1.2",
-    "@procivis/react-native-one-core": "1.98296.0",
+    "@procivis/react-native-one-core": "1.106597.0",
     "@procivis/react-native-picker": "5.0.3",
     "@react-native-async-storage/async-storage": "^1.17.3",
     "@react-native-community/blur": "^4.4.0",
@@ -93,7 +93,7 @@
     "@types/react": "^18.2.6",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
-    "apisauce": "3.2.0",
+    "apisauce": "3.2.2",
     "babel-jest": "^29.6.3",
     "babel-loader": "^8.2.4",
     "babel-plugin-react-native-web": "^0.19.13",
@@ -107,7 +107,7 @@
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "husky": "^6.0.0",
     "jest": "^29.6.3",
-    "lodash": "^4.17.21",
+    "lodash": "^4.18.0",
     "lottie-react-native": "^7.2.2",
     "metro-react-native-babel-preset": "0.73.10",
     "moment": "^2.29.4",
@@ -139,18 +139,18 @@
     "storybook": "^8.6.7",
     "timeago.js": "^4.0.2",
     "typescript": "5.0.4",
-    "vite": "^6.2.2"
+    "vite": "^6.4.2"
   },
   "peerDependencies": {
-    "@procivis/react-native-one-core": "^1.98296.0",
+    "@procivis/react-native-one-core": "^1.106597.0",
     "@procivis/react-native-picker": "*",
     "@react-native-community/blur": "*",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native/normalize-color": "*",
     "@react-navigation/native": "*",
     "@sentry/react-native": "^5.24.1",
-    "apisauce": "3.2.0",
-    "lodash": "^4.17.21",
+    "apisauce": "3.2.2",
+    "lodash": "^4.18.0",
     "lottie-react-native": "^7.2.2",
     "moment": "^2.29.4",
     "parse-url": "^9.2.0",

package/src/components/credential/credential.tsx

@@ -14,6 +14,7 @@ export interface CredentialDetailsProps {
   expanded?: boolean;
   headerAccessory?: CredentialHeaderProps['accessory'];
   labels: CardLabels;
+  language?: string;
   lastItem?: boolean;
   onHeaderPress?: (credentialId?: string) => void;
   onImagePreview: (title: string, image: ImageSourcePropType) => void;
@@ -24,6 +25,7 @@ export const CredentialDetails: FC<CredentialDetailsProps> = ({
   credentialId,
   expanded = false,
   labels,
+  language,
   lastItem,
   onHeaderPress,
   onImagePreview,
@@ -44,6 +46,7 @@ export const CredentialDetails: FC<CredentialDetailsProps> = ({
     config,
     testID,
     labels,
+    language,
   );
   if (headerAccessory) {
     card.header.accessory = headerAccessory;

package/src/components/history/history-list-item-icon.tsx

@@ -60,6 +60,8 @@ const defaultIcons: {
     DELIVERED: HistoryStatusAcceptedIcon,
     WRP_AC_RECEIVED: HistoryStatusAcceptedIcon,
     WRP_RC_RECEIVED: HistoryStatusAcceptedIcon,
+    WRP_NR_RECEIVED: HistoryStatusAcceptedIcon,
+    TRUST_RESOLVED: HistoryStatusAcceptedIcon,
   },
   entityTypes: {
     BACKUP: HistoryRevokeIcon,
@@ -72,8 +74,6 @@ const defaultIcons: {
     ORGANISATION: HistoryOrganisationIcon,
     PROOF: HistoryProofRequestIcon,
     PROOF_SCHEMA: HistorySchemaIcon,
-    TRUST_ANCHOR: HistoryTrustAnchorIcon,
-    TRUST_ENTITY: HistoryTrustedEntityIcon,
     WALLET_UNIT: HistoryTrustedEntityIcon,
     WALLET_RELYING_PARTY: HistoryTrustedEntityIcon,
     USER: HistoryIdentifierIcon,

package/src/components/history/history-list-item.tsx

@@ -2,7 +2,7 @@ import { HistoryAction, HistoryEntityType, HistoryListItem } from '@procivis/rea
 import React, { FC, useCallback, useMemo } from 'react';
 
 import { HistoryItemView } from '../../ui-components';
-import { formatTime, useTrustEntity } from '../../utils';
+import { formatTime } from '../../utils';
 import { HistoryListItemIcon } from './history-list-item-icon';
 
 export type HistoryListItemLabels = {
@@ -13,7 +13,7 @@ export type HistoryListItemLabels = {
 export interface HistoryListItemViewProps {
   dateFormatter?: (date: Date) => string;
   first?: boolean;
-  infoLabelMode?: 'entity' | 'associatedLabel' | 'none';
+  infoLabelMode?: 'associatedLabel' | 'none';
   item: HistoryListItem;
   labels: HistoryListItemLabels;
   last?: boolean;
@@ -24,28 +24,23 @@ export interface HistoryListItemViewProps {
 export const HistoryListItemView: FC<HistoryListItemViewProps> = ({
   dateFormatter = formatTime,
   first,
-  infoLabelMode = 'entity',
+  infoLabelMode = 'associatedLabel',
   item,
   labels,
   last,
   onPress,
   testID,
 }) => {
-  const identifierId = infoLabelMode === 'entity' ? item.target : undefined;
-  const { data: trustEntity } = useTrustEntity(identifierId);
-
   const label = `${labels.entityTypes[item.entityType]} ${labels.actions[item.action]}`;
 
   const info = useMemo(() => {
     switch (infoLabelMode) {
-      case 'entity':
-        return trustEntity?.name;
       case 'associatedLabel':
         return item.name;
       case 'none':
         return undefined;
     }
-  }, [infoLabelMode, item, trustEntity]);
+  }, [infoLabelMode, item]);
 
   const icon = <HistoryListItemIcon item={item} />;
 

package/src/components/history/history-list-screen.tsx

@@ -38,7 +38,7 @@ export type HistoryListScreenProps = {
 export const HistoryListScreen: FC<PropsWithChildren<HistoryListScreenProps>> = ({
   children,
   groupItems = groupEntriesByDay,
-  itemInfoLabelMode = 'entity',
+  itemInfoLabelMode = 'associatedLabel',
   labels,
   onBackPressed,
   onHistoryItemPressed,

package/src/components/index.ts

@@ -1,6 +1,6 @@
 export * from './backup';
 export * from './credential';
-export * from './entity';
 export * from './history';
 export * from './navigation';
 export * from './proof-request';
+export * from './trust-info';

package/src/components/proof-request/v1/select-credential.tsx

@@ -13,13 +13,14 @@ import {
 export const SelectCredential: FC<{
   credentialId: string;
   labels: ShareCredentialCardLabels;
+  language?: string;
   lastItem: boolean;
   onImagePreview: (title: string, image: ImageSourcePropType) => void;
   onPress?: () => void;
   request: PresentationDefinitionRequestedCredential;
   selected: boolean;
   testID: string;
-}> = ({ credentialId, labels, lastItem, onImagePreview, onPress, request, selected, testID }) => {
+}> = ({ credentialId, labels, language, lastItem, onImagePreview, onPress, request, selected, testID }) => {
   const { data: credential } = useCredentialDetail(credentialId);
   const { data: config } = useCoreConfig();
   const cardWidth = useMemo(() => Dimensions.get('window').width - 32, []);
@@ -35,6 +36,7 @@ export const SelectCredential: FC<{
     config,
     testID,
     labels,
+    language,
   );
 
   return (

package/src/components/proof-request/v1/share-credential.tsx

@@ -31,6 +31,7 @@ export const ShareCredential: FunctionComponent<{
   allCredentials: CredentialDetail[];
   expanded?: boolean;
   labels: ShareCredentialLabels;
+  language?: string;
   lastItem?: boolean;
   onHeaderPress?: (_credentialId?: string) => void;
   onImagePreview: (title: string, image: ImageSourcePropType) => void;
@@ -45,6 +46,7 @@ export const ShareCredential: FunctionComponent<{
   allCredentials,
   expanded,
   labels,
+  language,
   lastItem,
   onHeaderPress,
   onImagePreview,
@@ -125,6 +127,7 @@ export const ShareCredential: FunctionComponent<{
     config,
     testID,
     labels,
+    language,
   );
 
   return (

package/src/components/proof-request/v2/select-credential-v2.tsx

@@ -9,13 +9,14 @@ import { selectCredentialCardFromV2Credential } from '../../../utils/parsers/cre
 export const SelectCredentialV2: FC<{
   credential: PresentationDefinitionV2Credential;
   labels: ShareCredentialCardLabels;
+  language?: string;
   lastItem: boolean;
   multiple: boolean;
   onImagePreview: (title: string, image: ImageSourcePropType) => void;
   onSelected?: (credentialId: CredentialListItem['id'], selected: boolean) => void;
   selected: boolean;
   testID: string;
-}> = ({ credential, labels, lastItem, multiple, onImagePreview, onSelected, selected, testID }) => {
+}> = ({ credential, labels, language, lastItem, multiple, onImagePreview, onSelected, selected, testID }) => {
   const { data: config } = useCoreConfig();
   const cardWidth = useMemo(() => Dimensions.get('window').width - 32, []);
 
@@ -34,6 +35,7 @@ export const SelectCredentialV2: FC<{
     config,
     testID,
     labels,
+    language,
   );
 
   return (

package/src/components/proof-request/v2/share-credential-v2-group.tsx

@@ -33,6 +33,7 @@ export type ShareCredentialGroupLabels = ShareCredentialLabels & {
 
 export type ShareCredentialV2GroupProps = {
   labels: ShareCredentialGroupLabels;
+  language: string;
   lastGroup: boolean;
   onGroupSelect?: (selected: boolean) => void;
   onImagePreview: (title: string, image: ImageSourcePropType) => void;
@@ -83,6 +84,7 @@ const heightForNumberOfCards = (numberOfCards: number) => 60 * (numberOfCards +
 
 export const ShareCredentialV2Group: FC<ShareCredentialV2GroupProps> = ({
   labels,
+  language,
   lastGroup,
   onGroupSelect,
   onImagePreview,
@@ -165,6 +167,7 @@ export const ShareCredentialV2Group: FC<ShareCredentialV2GroupProps> = ({
             headerAccessory={headerAccessory}
             key={credentialRequestId}
             labels={labels}
+            language={language}
             lastItem={lastItem}
             onHeaderPress={singleCredentialGroup ? headerPressHandler : onNestedCardHeaderPress(cardId)}
             onImagePreview={onImagePreview}
@@ -181,6 +184,7 @@ export const ShareCredentialV2Group: FC<ShareCredentialV2GroupProps> = ({
   }, [
     expandedCredential,
     labels,
+    language,
     lastGroup,
     headerPressHandler,
     onImagePreview,

package/src/components/proof-request/v2/share-credential-v2.tsx

@@ -20,6 +20,7 @@ export type ShareCredentialV2Props = {
   grouped?: boolean;
   headerAccessory?: React.ComponentType<any> | React.ReactElement;
   labels: ShareCredentialLabels;
+  language: string;
   lastItem?: boolean;
   onHeaderPress?: (_credentialId?: string) => void;
   onImagePreview: (title: string, image: ImageSourcePropType) => void;
@@ -44,6 +45,7 @@ export const ShareCredentialV2: FunctionComponent<ShareCredentialV2Props> = ({
   grouped,
   headerAccessory,
   labels,
+  language,
   lastItem,
   onHeaderPress,
   onImagePreview,
@@ -64,6 +66,7 @@ export const ShareCredentialV2: FunctionComponent<ShareCredentialV2Props> = ({
     () => Dimensions.get('window').width - 32 - (grouped ? GroupedShareCredentialV2Padding * 2 : 0),
     [grouped],
   );
+  const purpose = credentialQuery.type_ === 'APPLICABLE_CREDENTIALS' ? credentialQuery.purpose?.[language] : undefined;
 
   const multipleCredentialsAvailable = Boolean(applicableCredentials?.length && applicableCredentials.length > 1);
 
@@ -152,10 +155,12 @@ export const ShareCredentialV2: FunctionComponent<ShareCredentialV2Props> = ({
     failureHint,
     Boolean(expanded),
     multipleCredentialsAvailable,
+    purpose,
     selectedFields,
     config,
     testID,
     labels,
+    language,
   );
 
   if (headerAccessory) {

package/src/components/trust-info/index.ts

@@ -0,0 +1,4 @@
+import TrustInfo from './trust-info';
+
+export * from './trust-info';
+export { TrustInfo };

package/src/components/trust-info/trust-info.tsx

@@ -0,0 +1,90 @@
+import React, { FC, useMemo } from 'react';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+import { AvatarProps, TouchableOpacity } from '../../ui-components';
+import EntityCluster from '../../ui-components/entity/entity-cluster';
+import { EntityNotTrustedIcon, EntityTrustedIcon, UpIcon } from '../../ui-components/icons';
+import { concatTestID } from '../../utils';
+
+export type TrustInfoLabels = {
+  unknown: string;
+  unknownSubline: string;
+};
+
+export type TrustInfoProps = {
+  labels: TrustInfoLabels;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  sublineColor?: string;
+  testID?: string;
+  textColor?: string;
+  trustInformation?: {
+    name: string;
+  };
+};
+
+const TrustInfo: FC<TrustInfoProps> = ({
+  labels,
+  onPress,
+  style,
+  sublineColor,
+  testID,
+  textColor,
+  trustInformation,
+}) => {
+  const avatarProps: AvatarProps | undefined = useMemo(() => {
+    const placeholderText = trustInformation?.name.substring(0, 1) ?? labels.unknown.substring(0, 1);
+
+    const statusIcon = trustInformation ? (
+      <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} />
+    ) : (
+      <EntityNotTrustedIcon testID={concatTestID(testID, 'statusIcon', 'notTrusted')} />
+    );
+
+    return {
+      placeholderText,
+      statusIcon,
+    };
+  }, [labels, testID, trustInformation]);
+
+  const trustEntityName = useMemo(() => trustInformation?.name ?? labels.unknown, [labels.unknown, trustInformation]);
+
+  return (
+    <TouchableOpacity disabled={!onPress || !trustInformation} onPress={onPress} style={[styles.button, style]}>
+      <EntityCluster
+        avatar={avatarProps}
+        entityName={trustEntityName}
+        style={styles.cluster}
+        subline={trustInformation ? undefined : labels.unknownSubline}
+        sublineColor={sublineColor}
+        testID={testID}
+        textColor={textColor}
+      />
+      {onPress && trustInformation && <UpIcon color={textColor} style={styles.chevron} />}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    width: '100%',
+  },
+  chevron: {
+    marginLeft: 10,
+    marginRight: 18,
+    transform: [
+      {
+        rotate: '90deg',
+      },
+    ],
+  },
+  cluster: {
+    flex: 1,
+    flexShrink: 1,
+  },
+});
+
+export default TrustInfo;

package/src/ui-components/credential/card/credential-details-card.tsx

@@ -48,6 +48,7 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
 
   const cardHeight = Math.ceil(card.width / CredentialCardRatio);
   const currentHeight = useSharedValue<number | undefined>(undefined);
+  const [animatedHeightSet, setAnimatedHeightSet] = useState(false);
 
   const previewAttributes = attributes ? attributes.slice(0, PREVIEW_ATTRIBUTES_COUNT) : [];
   const extraAttributes = useMemo(() => (attributes ? attributes.slice(PREVIEW_ATTRIBUTES_COUNT) : []), [attributes]);
@@ -76,6 +77,7 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
     const additionalHeight = allAttributesRendered ? additionalAttributesHeight : buttonViewHeight;
     const fullHeight = previewAttributesHeight + additionalHeight;
 
+    setAnimatedHeightSet(true);
     if (!animate) {
       currentHeight.value = fullHeight;
       return;
@@ -139,8 +141,7 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
 
   const { header, ...cardProps } = card;
 
-  const renderExtraAttributes =
-    allAttributesRendered || (previewAttributesHeight !== undefined && currentHeight.value !== undefined);
+  const renderExtraAttributes = allAttributesRendered || (previewAttributesHeight !== undefined && animatedHeightSet);
 
   const ContainerComponent = animate ? Animated.View : View;
   return (

package/src/ui-components/header/foldable-header.tsx

@@ -53,13 +53,15 @@ const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
 
   const scrollHeaderAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> | undefined = playHeaderFoldAnimation
     ? {
-        transform: [{
-          translateY: scrollOffset.interpolate({
-            extrapolate: 'clamp',
-            inputRange: [0, headerHeight],
-            outputRange: [0, -headerHeight],
-          }),
-        }],
+        transform: [
+          {
+            translateY: scrollOffset.interpolate({
+              extrapolate: 'clamp',
+              inputRange: [0, headerHeight],
+              outputRange: [0, -headerHeight],
+            }),
+          },
+        ],
       }
     : undefined;
 
@@ -84,8 +86,7 @@ const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
     <Animated.View
       style={[styles.headerContainer, containerPaddingStyle, withNotice ? styles.noticeBorderRadius : undefined]}>
       <Animated.View style={scrollHeaderAnimatedStyle}>
-        <View
-          style={[styles.blurFill, { top: -containerPaddingTop }]}>
+        <View style={[styles.blurFill, { top: -containerPaddingTop }]}>
           <BlurView
             blurStyle={'header'}
             color={colorScheme.background}

package/src/ui-components/header/header.tsx

@@ -2,11 +2,12 @@ import React, { FC, ReactNode } from 'react';
 import { Insets, StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 
 import { concatTestID } from '../../utils';
-import { BackButton } from '../buttons';
+import { BackButton, BackButtonIcon } from '../buttons';
 import { Typography } from '../text';
 import { useAppColorScheme } from '../theme';
 
 export interface HeaderProps extends ViewProps {
+  backIcon?: BackButtonIcon;
   onBack?: () => void;
   rightButtons?: ReactNode[];
   style?: StyleProp<ViewStyle>;
@@ -22,14 +23,28 @@ const backButtonHitSlop: Insets = { top: 12, bottom: 12, left: 20, right: 20 };
  * Following the design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=425-18624
  * states (Default + Dashboard)
  */
-const Header: FC<HeaderProps> = ({ onBack, rightButtons, style, titleRowStyle, testID, title, ...viewProps }) => {
+const Header: FC<HeaderProps> = ({
+  backIcon,
+  onBack,
+  rightButtons,
+  style,
+  titleRowStyle,
+  testID,
+  title,
+  ...viewProps
+}) => {
   const colorScheme = useAppColorScheme();
 
   return (
     <View style={[styles.container, style]} testID={testID} {...viewProps}>
       {onBack && (
         <View style={styles.backButtonRow}>
-          <BackButton hitSlop={backButtonHitSlop} onPress={onBack} testID={concatTestID(testID, 'back')} />
+          <BackButton
+            hitSlop={backButtonHitSlop}
+            icon={backIcon}
+            onPress={onBack}
+            testID={concatTestID(testID, 'back')}
+          />
           <View />
           {rightButtons}
         </View>

package/src/ui-components/history/history-details.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentType, FC, ReactElement, useEffect, useMemo } from 'react';
 import { ColorValue, Dimensions, ImageSourcePropType, StyleSheet, View } from 'react-native';
 
-import { CredentialDetails, CredentialDetailsProps, EntityDetails, EntityDetailsProps } from '../../components';
+import { CredentialDetails, CredentialDetailsProps, TrustInfo, TrustInfoProps } from '../../components';
 import { HeaderInfoButton } from '../../components/navigation/header-buttons';
 import { CardLabels, concatTestID, useCredentialListExpandedCard } from '../../utils';
 import { TouchableOpacity } from '../accessibility';
@@ -59,7 +59,7 @@ export type HistoryDetailsViewProps = {
   data: {
     header?:
       | {
-          entity: EntityDetailsProps;
+          entity: TrustInfoProps;
         }
       | {
           credentialHeader: CredentialHeaderProps;
@@ -141,9 +141,9 @@ export const HistoryDetailsView: FC<HistoryDetailsViewProps> = ({
       testID={testID}>
       <View style={[styles.section, { backgroundColor: colorScheme.white }]}>
         {data.header && 'entity' in data.header && (
-          <EntityDetails
+          <TrustInfo
             {...data.header.entity}
-            style={[styles.entity, { borderColor: colorScheme.background }, data.header.entity.style]}
+            style={[styles.entity, { borderBottomColor: colorScheme.background }, data.header.entity.style]}
           />
         )}
         {data.header && 'credentialHeader' in data.header && (

package/src/ui-components/icons/contact.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+export const MailIcon: FC<SvgProps> = ({ color, ...props }) => {
+  return (
+    <Svg fill="none" height={12} viewBox="0 0 17 12" width={17} {...props}>
+      <Path
+        d="M8.244 6.651c-.223 0-.442-.093-.656-.28L.758.355C1.124.118 1.587 0 2.147 0H14.35c.56 0 1.02.118 1.38.355L8.9 6.371c-.21.187-.428.28-.656.28zM.178 10.678a2.155 2.155 0 01-.13-.438A3.038 3.038 0 010 9.666V2.119c0-.237.016-.44.048-.608.036-.169.075-.287.116-.356l5.072 4.471-5.058 5.052zm1.763 1.107c-.25 0-.474-.027-.67-.082a1.553 1.553 0 01-.478-.219l5.202-5.202.998.889c.2.173.406.305.615.396.21.087.422.13.636.13.214 0 .426-.043.636-.13.214-.09.421-.223.622-.396l.998-.889 5.202 5.202c-.127.091-.29.164-.485.22a2.42 2.42 0 01-.663.081H1.94zm14.376-1.107L11.26 5.626l5.072-4.47c.037.068.073.186.11.355.036.168.054.371.054.608v7.547c0 .219-.018.41-.055.574-.032.164-.073.31-.123.438z"
+        fill={color}
+        opacity={0.9}
+      />
+    </Svg>
+  );
+};
+
+export const PhoneIcon: FC<SvgProps> = ({ color, ...props }) => {
+  return (
+    <Svg fill="none" height={13} viewBox="0 0 13 13" width={13} {...props}>
+      <Path
+        d="M3.5 9.208c-.67-.665-1.27-1.36-1.798-2.085A11.126 11.126 0 01.458 4.956C.153 4.236 0 3.552 0 2.906c0-.43.073-.83.219-1.204.15-.374.367-.697.65-.97.2-.192.425-.36.676-.506C1.8.076 2.044 0 2.276 0a.69.69 0 01.486.198c.141.132.294.312.458.54l1.148 1.6c.128.182.217.346.267.492a1.3 1.3 0 01.075.424c0 .114-.016.22-.048.321-.032.1-.091.226-.178.376l-.642 1.1a20.5 20.5 0 01-.075.137.3.3 0 00-.028.124c0 .054.007.107.02.157.019.05.037.093.055.13.274.547.746 1.155 1.415 1.825.324.323.657.62.999.888.341.265.642.456.902.575.064.027.12.05.17.068a.732.732 0 00.302.007.93.93 0 00.157-.075l1.094-.602c.177-.096.319-.157.423-.184.11-.032.217-.048.322-.048.123 0 .241.023.355.068.119.041.283.135.492.28l1.668 1.197c.224.16.383.307.479.444.1.137.15.278.15.424 0 .187-.05.387-.15.601-.096.215-.27.463-.52.745a2.76 2.76 0 01-.964.69 3.086 3.086 0 01-1.257.254c-.648 0-1.333-.155-2.058-.465a11.295 11.295 0 01-2.188-1.265A17.799 17.799 0 013.5 9.208z"
+        fill={color}
+        opacity={0.9}
+      />
+    </Svg>
+  );
+};

package/src/ui-components/icons/credential.tsx

@@ -44,7 +44,7 @@ export const CredentialWarningIcon: FC<SvgProps> = ({ ...props }) => (
 );
 
 // https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=542-90920&m=dev
-export const CredentialNoticInfoIcon: FC<SvgProps> = ({ ...props }) => {
+export const CredentialNoticeInfoIcon: FC<SvgProps> = ({ ...props }) => {
   const colorScheme = useAppColorScheme();
   return (
     <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>