@procivis/one-react-native-components 0.3.27 → 0.3.50

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

@@ -1,7 +1,8 @@
-import { CredentialListQuery, CredentialSchemaListQuery, DidListQuery, HistoryListQuery, ProofListQuery, ProofSchemaListQuery } from '@procivis/react-native-one-core';
-export declare const getQueryKeyFromCredentialListQueryParams: (queryParams?: Partial<CredentialListQuery>) => (string | string[] | undefined)[];
-export declare const getQueryKeyFromHistoryListQueryParams: (queryParams?: Partial<HistoryListQuery>) => (string | import("@procivis/react-native-one-core").HistoryEntityTypeEnum[] | undefined)[];
-export declare const getQueryKeyFromCredentialSchemaListQueryParams: (queryParams?: Partial<CredentialSchemaListQuery>) => (string | string[] | undefined)[];
-export declare const getQueryKeyFromProofSchemaListQueryParams: (queryParams?: Partial<ProofSchemaListQuery>) => (string | string[] | undefined)[];
-export declare const getQueryKeyFromProofListQueryParams: (queryParams?: Partial<ProofListQuery>) => (string | string[] | undefined)[];
-export declare const getQueryKeyFromDidListQueryParams: (queryParams?: Partial<DidListQuery>) => (string | boolean | string[] | undefined)[];
+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").CredentialListQueryExactColumnEnum[] | import("@procivis/react-native-one-core").CredentialStateEnum[] | import("@procivis/react-native-one-core").CredentialListIncludeEntityType[] | import("@procivis/react-native-one-core").CredentialListSearchType[] | undefined)[];
+export declare const getQueryKeyFromHistoryListQueryParams: (queryParams?: Partial<HistoryListQuery>) => (string | number | import("@procivis/react-native-one-core").HistoryActionEnum[] | import("@procivis/react-native-one-core").HistoryEntityTypeEnum[] | undefined)[];
+export declare const getQueryKeyFromCredentialSchemaListQueryParams: (queryParams?: Partial<CredentialSchemaListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").ExactCredentialSchemaFilterColumnEnum[] | import("@procivis/react-native-one-core").CredentialSchemaListIncludeEntityType[] | undefined)[];
+export declare const getQueryKeyFromProofSchemaListQueryParams: (queryParams?: Partial<ProofSchemaListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").ExactProofSchemaFilterColumnEnum[] | undefined)[];
+export declare const getQueryKeyFromProofListQueryParams: (queryParams?: Partial<ProofListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").ExactProofFilterColumnEnum[] | import("@procivis/react-native-one-core").ProofStateEnum[] | import("@procivis/react-native-one-core").ProofRoleEnum[] | undefined)[];
+export declare const getQueryKeyFromDidListQueryParams: (queryParams?: Partial<DidListQuery>) => (string | number | boolean | string[] | import("@procivis/react-native-one-core").ExactDidFilterColumnEnum[] | import("@procivis/react-native-one-core").KeyRoleEnum[] | undefined)[];
+export declare const getQueryKeyFromIdentifierListQueryParams: (queryParams?: Partial<IdentifierListQuery>) => (string | number | boolean | string[] | import("@procivis/react-native-one-core").KeyRoleEnum[] | import("@procivis/react-native-one-core").ExactIdentifierFilterColumnEnum[] | import("@procivis/react-native-one-core").IdentifierTypeEnum[] | undefined)[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.3.27",
+  "version": "0.3.50",
   "author": "Procivis AG (https://procivis.ch)",
   "license": "Apache-2.0",
   "description": "Common Procivis ONE UI components for react-native",
@@ -51,7 +51,7 @@
     "@babel/runtime": "^7.25.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@gorhom/bottom-sheet": "^5.1.2",
-    "@procivis/react-native-one-core": "1.42873.0",
+    "@procivis/react-native-one-core": "1.55028.0",
     "@procivis/react-native-picker": "5.0.3",
     "@react-native-async-storage/async-storage": "^1.17.3",
     "@react-native-community/blur": "^4.4.0",
@@ -138,7 +138,7 @@
     "vite": "^6.2.2"
   },
   "peerDependencies": {
-    "@procivis/react-native-one-core": "^1.42873.0",
+    "@procivis/react-native-one-core": "^1.55028.0",
     "@procivis/react-native-picker": "*",
     "@react-native-community/blur": "*",
     "@react-native-community/netinfo": "^11.4.1",
@@ -277,5 +277,10 @@
       ]
     ]
   },
-  "packageManager": "pnpm@10.5.2"
-}
+  "packageManager": "pnpm@10.5.2",
+  "pnpm": {
+    "patchedDependencies": {
+      "react-native-web": "patches/react-native-web.patch"
+    }
+  }
+}

package/src/components/entity/entity-attributes.tsx

@@ -1,12 +1,13 @@
 import { TrustEntity } from '@procivis/react-native-one-core';
 import React, { FC, memo } from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { NerdModeItem } from '../../ui-components/nerd-view';
 import { AttributesLabels, EntityType } from '../../ui-components/screens/nerd-mode-screen';
 import { addElementIf } from '../../utils/array';
 
 interface EntityAttributesProps {
+  certificate?: string;
   did?: string;
   trustEntity?: TrustEntity;
   trusted: boolean;
@@ -16,6 +17,7 @@ interface EntityAttributesProps {
 }
 
 const EntityAttributes: FC<EntityAttributesProps> = ({
+  certificate,
   did,
   trustEntity,
   trusted,
@@ -40,6 +42,12 @@ const EntityAttributes: FC<EntityAttributesProps> = ({
       highlightedText: didMethod,
       testID: 'issuerDID',
     }),
+    ...addElementIf(Boolean(certificate), {
+      attributeKey: entityType === EntityType.CredentialEntity ? labels.issuerIdentifier : labels.entityIdentifier,
+      attributeText: certificate,
+      canBeCopied: true,
+      testID: 'issuerCertificate',
+    }),
     ...addElementIf(trusted && Boolean(trustEntity?.role), {
       attributeKey: labels.role,
       highlightedText: trustEntity?.role,
@@ -47,7 +55,7 @@ const EntityAttributes: FC<EntityAttributesProps> = ({
     }),
   ];
   return (
-    <View>
+    <View style={styles.wrapper}>
       {attributes.map((attribute) => (
         <NerdModeItem
           key={attribute.attributeKey}
@@ -60,4 +68,10 @@ const EntityAttributes: FC<EntityAttributesProps> = ({
   );
 };
 
+const styles = StyleSheet.create({
+  wrapper: {
+    marginBottom: 20,
+  }
+})
+
 export default memo(EntityAttributes);

package/src/components/entity/entity-details-with-buttons.tsx

@@ -1,15 +1,13 @@
-import { TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
-import { IdentifierListItem } from '@procivis/react-native-one-core/dist/src/identifier';
-import React, { FC, memo, useMemo } from 'react';
+import { IdentifierListItem, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
+import React, { FC, memo } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
-import EntityCluster from '../../ui-components/entity/entity-cluster';
-import { EntityNotTrustedIcon, EntityTrustedIcon } from '../../ui-components/icons';
 import { AttributesLabels, EntityLabels, EntityType } from '../../ui-components/screens/nerd-mode-screen';
 import { useAppColorScheme } from '../../ui-components/theme/color-scheme-context';
-import { concatTestID, replaceBreakingHyphens, useIdentifierDetails } from '../../utils';
+import { concatTestID, useIdentifierDetails } from '../../utils';
 import { useTrustEntity } from '../../utils/hooks/core/trust-entity';
 import EntityAttributes from './entity-attributes';
+import EntityDetails from './entity-details';
 import EntityButtons from './EntityButtons';
 
 export type ContextRole = Exclude<TrustEntityRoleEnum, TrustEntityRoleEnum.BOTH>;
@@ -48,50 +46,21 @@ const EntityDetailsWithButtons: FC<EntityDetailsWithButtonsProps> = ({
     (trustEntity.role === TrustEntityRoleEnum.BOTH || trustEntity.role === role),
   );
 
-  const trustEntityName = useMemo(() => {
-    if (!trustEntity || !trusted) {
-      if (identifierDetail?.did) {
-        return replaceBreakingHyphens(identifierDetail.did.did);
-      }
-
-      return role === TrustEntityRoleEnum.ISSUER ? entityLabels.unknownIssuer : entityLabels.unknownVerifier;
-    }
-    return trustEntity.name;
-  }, [entityLabels, role, trustEntity, trusted, identifierDetail]);
-
-  const trustEntitySubline = useMemo(() => {
-    if (!trusted) {
-      return undefined;
-    }
-
-    return `${entityLabels.trusted} • ${trustEntity?.trustAnchor.name}`;
-  }, [trustEntity, trusted, entityLabels.trusted]);
-
-  const trustEntityStatusIcon = useMemo(() => {
-    if (!trusted) {
-      return <EntityNotTrustedIcon testID={concatTestID(testID, 'statusIcon', 'notTrusted')} />;
-    }
-    return <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} />;
-  }, [testID, trusted]);
-
   return (
     <View style={{ backgroundColor: colorScheme.nerdView.background }}>
-      <EntityCluster
-        avatar={{
-          avatar: trusted && trustEntity?.logo ? { imageSource: { uri: trustEntity.logo } } : undefined,
-          placeholderText: trusted ? trustEntity?.name.substring(0, 1) : "U",
-          statusIcon: trustEntityStatusIcon,
-          testID: concatTestID(testID, 'avatar'),
+      <EntityDetails
+        identifier={identifier}
+        labels={{
+          unknown: role === TrustEntityRoleEnum.ISSUER ? entityLabels.unknownIssuer : entityLabels.unknownVerifier,
         }}
-        entityName={trustEntityName}
-        subline={trustEntitySubline}
-        sublineColor={trusted ? colorScheme.success : colorScheme.white}
+        role={role}
         testID={testID}
         {...props}
       />
       {trusted && <EntityButtons entity={trustEntity} labels={entityLabels} testID={concatTestID(testID, 'links')} />}
       <EntityAttributes
-        did={trustEntity?.did?.did}
+        certificate={identifierDetail?.certificates?.[0]?.chain}
+        did={identifierDetail?.did?.did}
         trustEntity={trustEntity}
         trusted={trusted}
         labels={attributesLabels}

package/src/components/entity/entity-details.tsx

@@ -1,8 +1,15 @@
-import { TrustEntity, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
-import { IdentifierListItem } from '@procivis/react-native-one-core/dist/src/identifier';
+import {
+  IdentifierCertificateDetail,
+  IdentifierListItem,
+  IdentifierTypeEnum,
+  TrustEntity,
+  TrustEntityRoleEnum,
+  TrustEntityStateEnum,
+} from '@procivis/react-native-one-core';
 import React, { FC, ReactNode, useMemo } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 
+import { AvatarProps } from '../../ui-components';
 import EntityCluster from '../../ui-components/entity/entity-cluster';
 import { EntityNotTrustedIcon, EntityTrustedIcon } from '../../ui-components/icons';
 import { concatTestID, replaceBreakingHyphens, useIdentifierDetails } from '../../utils';
@@ -17,62 +24,118 @@ export type EntityDetailsProps = {
   renderMore?: (trustEntity: TrustEntity) => ReactNode;
   role: Exclude<TrustEntityRoleEnum, TrustEntityRoleEnum.BOTH>;
   style?: StyleProp<ViewStyle>;
+  sublineColor?: string;
+  textColor?: string;
   testID?: string;
 } & (
-    | {
+  | {
       identifier?: IdentifierListItem;
     }
-    | {
+  | {
       entity: TrustEntity;
     }
-  );
+);
+
+const getCertificateCommonName = (certificate: IdentifierCertificateDetail): string | undefined => {
+  return certificate.x509Attributes.subject
+    .split(', ')
+    .find((s) => s.startsWith('CN'))
+    ?.split('=')
+    ?.pop();
+};
 
-const EntityDetails: FC<EntityDetailsProps> = ({ labels, renderMore, role, style, testID, ...props }) => {
-  const { data } = useTrustEntity('identifier' in props ? props.identifier?.id : undefined);
+const EntityDetails: FC<EntityDetailsProps> = ({
+  labels,
+  renderMore,
+  role,
+  style,
+  testID,
+  sublineColor,
+  textColor,
+  ...props
+}) => {
+  const { data, isLoading: isLoadingTrustEntity } = useTrustEntity(
+    'identifier' in props ? props.identifier?.id : undefined,
+  );
   const trustEntity: TrustEntity | undefined = 'entity' in props ? props.entity : data ?? undefined;
-  const { data: identifierDetail } = useIdentifierDetails('identifier' in props ? props.identifier?.id : undefined);
+  const { data: identifierDetail, isLoading: isLoadingIdentifier } = useIdentifierDetails(
+    'identifier' in props ? props.identifier?.id : undefined,
+  );
 
   const trusted =
     trustEntity &&
     trustEntity.state === TrustEntityStateEnum.ACTIVE &&
     (trustEntity.role === TrustEntityRoleEnum.BOTH || trustEntity.role === role);
 
+  const isLoading = isLoadingIdentifier || isLoadingTrustEntity;
+
+  const avatarProps: AvatarProps | undefined = useMemo(() => {
+    if (isLoading) {
+      return undefined;
+    }
+
+    const avatar =
+      trusted && identifierDetail?.type === 'DID' && trustEntity.logo
+        ? { imageSource: { uri: trustEntity.logo } }
+        : undefined;
+
+    const placeholderText =
+      identifierDetail?.type === IdentifierTypeEnum.CERTIFICATE && identifierDetail.certificates?.[0]
+        ? getCertificateCommonName(identifierDetail.certificates[0])?.substring(0, 1)
+        : 'D';
+
+    const statusIcon = trusted ? (
+      <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} />
+    ) : (
+      <EntityNotTrustedIcon testID={concatTestID(testID, 'statusIcon', 'notTrusted')} />
+    );
+
+    if (trustEntity) {
+      return {
+        avatar,
+        placeholderText:
+          trusted && identifierDetail?.type === 'DID' ? trustEntity.name.substring(0, 1) : placeholderText,
+        statusIcon,
+        testID: concatTestID(testID, 'avatar'),
+      };
+    }
+
+    return {
+      placeholderText,
+      statusIcon,
+    };
+  }, [trustEntity, trusted, identifierDetail, isLoading, testID]);
+
   const trustEntityName = useMemo(() => {
-    if (!trusted) {
-      if (identifierDetail?.did?.did) {
-        return replaceBreakingHyphens(identifierDetail.did.did);
+    if (isLoading) {
+      return '';
+    }
+    if (identifierDetail?.type === IdentifierTypeEnum.CERTIFICATE && identifierDetail.certificates?.[0]) {
+      const commonName = getCertificateCommonName(identifierDetail.certificates[0]);
+      if (commonName) {
+        return commonName;
       }
-      return labels.unknown;
     }
-    return trustEntity.name;
-  }, [labels.unknown, trustEntity, trusted, identifierDetail]);
-
-  const trustEntityStatusIcon = useMemo(() => {
-    if (!trusted) {
-      return <EntityNotTrustedIcon testID={concatTestID(testID, 'statusIcon', 'notTrusted')} />;
+    if (trustEntity) {
+      return trustEntity.name;
     }
-    return <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} />;
-  }, [testID, trusted]);
+    if (identifierDetail?.did?.did) {
+      return replaceBreakingHyphens(identifierDetail.did.did);
+    }
+
+    return labels.unknown;
+  }, [labels.unknown, trustEntity, identifierDetail, isLoading]);
 
   return (
     <>
       <EntityCluster
-        avatar={
-          trustEntity
-            ? {
-              avatar: trusted && trustEntity.logo ? { imageSource: { uri: trustEntity.logo } } : undefined,
-              placeholderText: trusted ? trustEntity.name.substring(0, 1) : "U",
-              statusIcon: trustEntityStatusIcon,
-              testID: concatTestID(testID, 'avatar'),
-            }
-            : {
-              statusIcon: trustEntityStatusIcon,
-              placeholderText: "U",
-            }
-        }
+        avatar={avatarProps}
         entityName={trustEntityName}
         style={style}
         testID={testID}
+        textColor={textColor}
+        sublineColor={sublineColor}
+        isLoading={isLoading}
       />
       {trustEntity && renderMore && renderMore(trustEntity)}
     </>

package/src/components/entity/index.ts

@@ -1,3 +1,4 @@
-import EntityDetails, { EntityDetailsLabels, EntityDetailsProps } from './entity-details';
+import type { EntityDetailsLabels, EntityDetailsProps } from './entity-details';
+import EntityDetails from './entity-details';
 
 export { EntityDetails, EntityDetailsLabels, EntityDetailsProps };

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

@@ -1,5 +1,5 @@
 import { HistoryActionEnum, HistoryEntityTypeEnum, HistoryListItem } from '@procivis/react-native-one-core';
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 
 import { HistoryItemView } from '../../ui-components';
 import { formatTime, useTrustEntity } from '../../utils';
@@ -29,20 +29,24 @@ export const HistoryListItemView: FC<HistoryListItemViewProps> = ({
   labels,
   last,
   onPress,
-  testID
+  testID,
 }) => {
-  const { data: entity } = useTrustEntity(infoLabelMode === 'entity' ? item.target : undefined);
+  const identifierId = infoLabelMode === 'entity' ? item.target : undefined;
+  const { data: trustEntity } = useTrustEntity(identifierId);
 
   const label = `${labels.entityTypes[item.entityType]} ${labels.actions[item.action]}`;
-  let infoLabel;
-  switch (infoLabelMode) {
-    case 'entity':
-      infoLabel = entity?.name;
-      break;
-    case 'associatedLabel':
-      infoLabel = item.name;
-      break;
-  }
+
+  const info = useMemo(() => {
+    switch (infoLabelMode) {
+      case 'entity':
+        return trustEntity?.name;
+      case 'associatedLabel':
+        return item.name;
+      case 'none':
+        return undefined;
+    }
+  }, [infoLabelMode, item, trustEntity]);
+
   const icon = <HistoryListItemIcon item={item} />;
 
   const pressHandler = useCallback(() => {
@@ -53,7 +57,7 @@ export const HistoryListItemView: FC<HistoryListItemViewProps> = ({
     <HistoryItemView
       first={first}
       icon={icon}
-      info={infoLabel}
+      info={info}
       label={label}
       last={last}
       onPress={pressHandler}

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

@@ -70,7 +70,6 @@ export const ShareCredential: FunctionComponent<{
     credential
       ? {
           ...credential,
-          issuerDid: credential?.issuerDid?.id,
           issuer: credential?.issuer?.id,
         }
       : undefined,

package/src/ui-components/blur/index.ts

@@ -1,3 +1,4 @@
-import BlurView, { BlurViewProps } from './blur-view';
+import type { BlurViewProps } from './blur-view';
+import BlurView from './blur-view';
 
 export { BlurView, BlurViewProps };

package/src/ui-components/buttons/hold-button.tsx

@@ -11,7 +11,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { TouchableWithoutFeedback, TouchableWithoutFeedbackRef } from '../accessibility/accessibilityHistoryWrappers';
+import { TouchableOpacity, TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';
 import { Typography } from '../text';
 import { useAppColorScheme } from '../theme';
 
@@ -96,7 +96,7 @@ const Content = ({
 };
 
 interface HoldButtonLayoutedProps extends Omit<HoldButtonProps, 'style'> {
-  ref: React.ForwardedRef<TouchableWithoutFeedbackRef>;
+  ref: React.ForwardedRef<TouchableOpacityRef>;
   width: number;
   height: number;
 }
@@ -182,16 +182,17 @@ const HoldButtonLayouted = ({
         </Animated.View>
       )}
       <View style={styles.pressableLayer}>
-        <TouchableWithoutFeedback
+        <TouchableOpacity
           accessibilityRole="button"
           ref={ref}
           disabled={isFinished || disabled}
           onLongPress={onLongPress}
           onPressIn={isFinished ? undefined : onPressIn}
           onPressOut={isFinished ? undefined : onPressOut}
+          activeOpacity={1}
           {...props}>
           <View style={{ width, height }} />
-        </TouchableWithoutFeedback>
+        </TouchableOpacity>
       </View>
     </>
   );
@@ -202,7 +203,7 @@ const HoldButtonLayouted = ({
  *
  * follows design: https://www.figma.com/design/cCmAyBQrQWCQZuDi85pJfe/Procivis-One-Wallet-Developments-2025?node-id=1-871
  */
-const HoldButton = React.forwardRef<TouchableWithoutFeedbackRef, HoldButtonProps>(
+const HoldButton = React.forwardRef<TouchableOpacityRef, HoldButtonProps>(
   ({ style, disabled, ...props }, ref) => {
     const colorScheme = useAppColorScheme();
 

package/src/ui-components/camera/index.tsx

@@ -1,3 +1,4 @@
-import QRCodeScanner, { QRCodeScannerProps } from './qr-code-scanner';
+import type { QRCodeScannerProps } from './qr-code-scanner';
+import QRCodeScanner from './qr-code-scanner';
 
 export { QRCodeScanner, QRCodeScannerProps };

package/src/ui-components/control/index.ts

@@ -1,4 +1,6 @@
-import { Checkbox, CheckboxProps } from './checkbox';
-import { Switch, SwitchProps } from './switch';
+import type { CheckboxProps } from './checkbox';
+import { Checkbox } from './checkbox';
+import type { SwitchProps } from './switch';
+import { Switch } from './switch';
 
 export { Checkbox, CheckboxProps, Switch, SwitchProps };

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

@@ -154,7 +154,7 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
       testID={concatTestID(card.testID, expanded ? 'expanded' : 'collapsed')}>
       <CredentialCard
         {...cardProps}
-        header={{ ...header, accessory: header.accessory ?? CaretIcon }}
+        header={{ ...header, accessory: header.accessory ?? (cardProps.onHeaderPress ? CaretIcon : undefined) }}
         style={[styles.card, cardProps.style]}
       />
       {previewAttributes.length > 0 && (

package/src/ui-components/credential/credential-carousel-images.tsx

@@ -64,17 +64,24 @@ type QrCodeProps = {
   content: string;
   padding?: number;
   testID?: string;
+  onError?: (err: string) => void;
 };
 
-export const QrCode: FC<QrCodeProps> = ({ content, padding, testID }) => {
+export const QrCode: FC<QrCodeProps> = ({ content, padding, testID, onError }) => {
   const qrCodeXml = useMemo(() => {
-    return new QRCode({
-      container: 'svg-viewbox',
-      content,
-      join: true,
-      padding: padding ?? 1,
-    }).svg();
-  }, [content, padding]);
+    try {
+      return new QRCode({
+        container: 'svg-viewbox',
+        content,
+        ecl: 'L',
+        join: true,
+        padding: padding ?? 1,
+      }).svg();
+    } catch (err) {
+      onError && onError(err instanceof Error ? err.message : 'Unknown error occurred.');
+      return null;
+    }
+  }, [content, onError, padding]);
   return <SvgXml height={'100%'} testID={testID} width={'100%'} xml={qrCodeXml} />;
 };
 

package/src/ui-components/entity/entity-cluster.tsx

@@ -1,6 +1,13 @@
-import React, { FunctionComponent, useMemo } from 'react';
+import React, { FunctionComponent, useEffect, useMemo } from 'react';
 import { Platform, StyleSheet, View, ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
 
+import { LoaderView, LoaderViewState } from '../../ui-components/loader';
 import { concatTestID } from '../../utils';
 import Typography from '../text/typography';
 import { useAppColorScheme } from '../theme/color-scheme-context';
@@ -13,6 +20,7 @@ export type EntityClusterProps = ViewProps & {
   textColor?: string;
   sublineColor?: string;
   testID?: string;
+  isLoading?: boolean;
 };
 
 // https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=426-25595&mode=design&t=YI1oD2BfBie5HcvJ-0
@@ -24,31 +32,67 @@ const EntityCluster: FunctionComponent<EntityClusterProps> = ({
   style,
   sublineColor,
   testID,
+  isLoading,
   ...viewProps
 }) => {
   const colorScheme = useAppColorScheme();
+  
+  const opacity = useSharedValue<number>(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  useEffect(() => {
+    if (!isLoading) {
+      return;
+    }
+    opacity.value = withRepeat(
+      withTiming(0.3, { duration: 1000 }),
+      0,
+      true
+    );
+  }, [opacity, isLoading]);
 
   const avatarProps = useMemo<AvatarProps>(() => {
+    if (isLoading) {
+      return {
+        avatar: {
+          component: 
+            <View style={[styles.loaderWrapper, { backgroundColor: colorScheme.grayDark }]}>
+              <View style={styles.loader}>
+                <LoaderView animate={true} state={LoaderViewState.InProgress} />
+              </View>
+            </View>
+        }
+      }
+    }
     const initials = entityName.split(' ', 3).map((word: string) => word[0]);
     const placeholderText = initials.length > 0 ? initials.join('') : '';
     return {
       ...avatar,
       placeholderText: avatar?.placeholderText ?? placeholderText,
     };
-  }, [avatar, entityName]);
+  }, [avatar, entityName, colorScheme.grayDark, isLoading]);
 
   return (
     <View style={[styles.entity, style]} testID={testID} {...viewProps}>
       <Avatar testID={concatTestID(testID, 'avatar')} {...avatarProps} />
       <View style={styles.labels}>
-        <Typography
-          testID={concatTestID(testID, 'entityName')}
-          color={textColor ?? colorScheme.text}
-          numberOfLines={1}
-          preset="m"
-          style={styles.entityName}>
-          {entityName}
-        </Typography>
+        {isLoading ? (
+          <Animated.View style={[{ backgroundColor: colorScheme.grayDark }, animatedStyle]}>
+            <Typography color={colorScheme.grayDark} />
+          </Animated.View>
+        ) : (
+          <Typography
+            testID={concatTestID(testID, 'entityName')}
+            color={textColor ?? colorScheme.text}
+            numberOfLines={1}
+            preset="m"
+            style={styles.entityName}>
+            {!isLoading ? entityName : undefined}
+          </Typography>
+        )}
         {subline && (
           <View>
             <Typography
@@ -77,6 +121,15 @@ const styles = StyleSheet.create({
     flex: 1,
     marginLeft: 12,
   },
+  loader: {
+    transform: [{scale: 0.5}],
+  },
+  loaderWrapper: {
+    height: 72,
+    paddingLeft: 3,
+    paddingTop: 4,
+    width: 72,
+  }
 });
 
 export default EntityCluster;