@procivis/one-react-native-components 0.3.22 → 0.3.47

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';
+import { CredentialListQuery, CredentialSchemaListQuery, DidListQuery, HistoryListQuery, IdentifierListQuery, 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 getQueryKeyFromHistoryListQueryParams: (queryParams?: Partial<HistoryListQuery>) => (string | import("@procivis/react-native-one-core").HistoryActionEnum[] | 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)[];
+export declare const getQueryKeyFromIdentifierListQueryParams: (queryParams?: Partial<IdentifierListQuery>) => (string | boolean | string[] | undefined)[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.3.22",
+  "version": "0.3.47",
   "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.40461.0",
+    "@procivis/react-native-one-core": "1.52216.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.40461.0",
+    "@procivis/react-native-one-core": "^1.52216.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,
@@ -34,12 +36,18 @@ const EntityAttributes: FC<EntityAttributesProps> = ({
       testID: 'trustRegistry',
     }),
     ...addElementIf(Boolean(did), {
-      attributeKey: entityType === EntityType.CredentialEntity ? labels.issuerDid : labels.entityDid,
+      attributeKey: entityType === EntityType.CredentialEntity ? labels.issuerIdentifier : labels.entityIdentifier,
       attributeText: identifier,
       canBeCopied: true,
       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,20 +1,19 @@
-import { DidListItem, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
-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 { 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 } 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>;
 
 interface EntityDetailsWithButtonsProps {
-  did?: DidListItem;
+  identifier?: IdentifierListItem;
   entityLabels: EntityLabels;
   attributesLabels: AttributesLabels;
   style?: StyleProp<ViewStyle>;
@@ -26,7 +25,7 @@ interface EntityDetailsWithButtonsProps {
 }
 
 const EntityDetailsWithButtons: FC<EntityDetailsWithButtonsProps> = ({
-  did,
+  identifier,
   entityLabels,
   attributesLabels,
   onCopyToClipboard,
@@ -35,57 +34,33 @@ const EntityDetailsWithButtons: FC<EntityDetailsWithButtonsProps> = ({
   testID,
   ...props
 }) => {
-  let { data } = useTrustEntity(did?.id);
+  let { data } = useTrustEntity(identifier?.id);
+  let { data: identifierDetail } = useIdentifierDetails(identifier?.id);
   const trustEntity = data ?? undefined;
 
   const colorScheme = useAppColorScheme();
 
   const trusted = Boolean(
     trustEntity &&
-      trustEntity.state === TrustEntityStateEnum.ACTIVE &&
-      (trustEntity.role === TrustEntityRoleEnum.BOTH || trustEntity.role === role),
+    trustEntity.state === TrustEntityStateEnum.ACTIVE &&
+    (trustEntity.role === TrustEntityRoleEnum.BOTH || trustEntity.role === role),
   );
 
-  const trustEntityName = useMemo(() => {
-    if (!trustEntity || !trusted) {
-      return role === TrustEntityRoleEnum.ISSUER ? entityLabels.unknownIssuer : entityLabels.unknownVerifier;
-    }
-    return trustEntity.name;
-  }, [entityLabels, role, trustEntity, trusted]);
-
-  const trustEntitySubline = useMemo(() => {
-    if (!trusted) {
-      return undefined;
-    }
-
-    return `${entityLabels.trusted} • ${trustEntity?.trustAnchor.name}`;
-  }, [trustEntity, trusted, entityLabels.trusted]);
-
-  const trustEntityStatusIcon = useMemo(() => {
-    if (!trusted) {
-      return undefined;
-    }
-    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: trustEntity?.name.substring(0, 1),
-          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={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,10 +1,11 @@
-import { DidListItem, TrustEntity, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
+import { IdentifierCertificateDetail, IdentifierListItem,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 { EntityTrustedIcon } from '../../ui-components/icons';
-import { concatTestID, replaceBreakingHyphens } from '../../utils';
+import { EntityNotTrustedIcon, EntityTrustedIcon } from '../../ui-components/icons';
+import { concatTestID, replaceBreakingHyphens, useIdentifierDetails } from '../../utils';
 import { useTrustEntity } from '../../utils/hooks/core/trust-entity';
 
 export type EntityDetailsLabels = {
@@ -16,66 +17,92 @@ export type EntityDetailsProps = {
   renderMore?: (trustEntity: TrustEntity) => ReactNode;
   role: Exclude<TrustEntityRoleEnum, TrustEntityRoleEnum.BOTH>;
   style?: StyleProp<ViewStyle>;
+  sublineColor?: string;
+  textColor?: string;
   testID?: string;
 } & (
-  | {
-      did?: DidListItem;
+    | {
+      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('did' in props ? props.did?.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, 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 trustEntityName = useMemo(() => {
-    if (!trusted) {
-      return labels.unknown;
+  const isLoading = isLoadingIdentifier || isLoadingTrustEntity;
+
+  const avatarProps: AvatarProps | undefined = useMemo(() => {
+    if (isLoading) {
+      return undefined;
     }
-    return trustEntity.name;
-  }, [labels.unknown, trustEntity, trusted]);
 
-  const trustEntitySubline = useMemo(() => {
-    if (!trustEntity) {
-      return 'did' in props ? (props.did?.did ? replaceBreakingHyphens(props.did.did) : undefined) : undefined;
+    const avatar = trusted && identifierDetail?.type === 'DID' && trustEntity.logo ? { imageSource: { uri: trustEntity.logo } } : undefined;
+
+    const placeholderText = identifierDetail?.type === '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'),
+      };
     }
-    if (!trusted) {
-      return replaceBreakingHyphens(trustEntity.did.did);
+
+    return {
+      placeholderText,
+      statusIcon,
     }
-    return undefined;
-  }, [props, trustEntity, trusted]);
+  }, [trustEntity, trusted, identifierDetail, isLoading, testID]);
 
-  const trustEntityStatusIcon = useMemo(() => {
-    if (!trusted) {
-      return undefined;
+  const trustEntityName = useMemo(() => {
+    if (isLoading) {
+      return '';
+    }
+    if (identifierDetail?.type === 'CERTIFICATE' && identifierDetail.certificates?.[0]) {
+      const commonName = getCertificateCommonName(identifierDetail.certificates[0]);
+      if (commonName) {
+        return commonName;
+      }
     }
-    return <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} />;
-  }, [testID, trusted]);
+    if (trustEntity) {
+      return trustEntity.name;
+    }
+    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: trustEntity.name.substring(0, 1),
-                statusIcon: trustEntityStatusIcon,
-                testID: concatTestID(testID, 'avatar'),
-              }
-            : undefined
-        }
+        avatar={avatarProps}
         entityName={trustEntityName}
         style={style}
-        subline={trustEntitySubline}
         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-icon.tsx

@@ -5,8 +5,10 @@ import { SvgProps } from 'react-native-svg';
 import {
   HistoryBackupCreatedIcon,
   HistoryBackupRestoredIcon,
+  HistoryCertificateIcon,
   HistoryCredentialIcon,
   HistoryDidIcon,
+  HistoryIdentifierIcon,
   HistoryIssueIcon,
   HistoryItemIcon,
   HistoryKeyIcon,
@@ -51,12 +53,15 @@ const defaultIcons: {
     WITHDRAWN: HistoryStatusErrorIcon,
     REACTIVATED: HistoryStatusAcceptedIcon,
     CSR_GENERATED: HistoryStatusAcceptedIcon,
+    EXPIRED: HistoryStatusErrorIcon,
   },
   entityTypes: {
     BACKUP: HistoryRevokeIcon,
+    CERTIFICATE: HistoryCertificateIcon,
     CREDENTIAL: HistoryCredentialIcon,
     CREDENTIAL_SCHEMA: HistorySchemaIcon,
     DID: HistoryDidIcon,
+    IDENTIFIER: HistoryIdentifierIcon,
     KEY: HistoryKeyIcon,
     ORGANISATION: HistoryOrganisationIcon,
     PROOF: HistoryProofRequestIcon,

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';
@@ -13,6 +13,7 @@ export type HistoryListItemLabels = {
 export interface HistoryListItemViewProps {
   dateFormatter?: (date: Date) => string;
   first?: boolean;
+  infoLabelMode?: 'entity' | 'associatedLabel' | 'none';
   item: HistoryListItem;
   labels: HistoryListItemLabels;
   last?: boolean;
@@ -23,15 +24,29 @@ export interface HistoryListItemViewProps {
 export const HistoryListItemView: FC<HistoryListItemViewProps> = ({
   dateFormatter = formatTime,
   first,
+  infoLabelMode = 'entity',
   item,
   labels,
   last,
   onPress,
-  testID
+  testID,
 }) => {
-  const { data: entity } = useTrustEntity(item.target);
+  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]);
+
   const icon = <HistoryListItemIcon item={item} />;
 
   const pressHandler = useCallback(() => {
@@ -42,7 +57,7 @@ export const HistoryListItemView: FC<HistoryListItemViewProps> = ({
     <HistoryItemView
       first={first}
       icon={icon}
-      info={entity?.name}
+      info={info}
       label={label}
       last={last}
       onPress={pressHandler}

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

@@ -13,6 +13,7 @@ import {
 } from '../../ui-components';
 import { concatTestID, groupEntriesByDay, HistoryGroupByDaySection, useListContentInset } from '../../utils';
 import { HistoryListLabels, HistoryListView } from './history-list';
+import { HistoryListItemViewProps } from './history-list-item';
 
 export type HistoryListScreenLabels = {
   emptyTitle: string;
@@ -24,6 +25,7 @@ export type HistoryListScreenLabels = {
 
 export type HistoryListScreenProps = {
   groupItems?: (entries: HistoryListItem[]) => HistoryGroupByDaySection[];
+  itemInfoLabelMode?: HistoryListItemViewProps['infoLabelMode'];
   labels: HistoryListScreenLabels;
   onBackPressed: () => void;
   onHistoryItemPressed: (historyItem: HistoryListItem) => void;
@@ -36,6 +38,7 @@ export type HistoryListScreenProps = {
 export const HistoryListScreen: FC<PropsWithChildren<HistoryListScreenProps>> = ({
   children,
   groupItems = groupEntriesByDay,
+  itemInfoLabelMode = 'entity',
   labels,
   onBackPressed,
   onHistoryItemPressed,
@@ -92,7 +95,7 @@ export const HistoryListScreen: FC<PropsWithChildren<HistoryListScreenProps>> =
       <HistoryListView
         contentContainerStyle={insets}
         groupItems={groupItems}
-        itemProps={{ onPress: onHistoryItemPressed }}
+        itemProps={{ infoLabelMode: itemInfoLabelMode, onPress: onHistoryItemPressed }}
         onEmpty={setEmpty}
         onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollOffset } } }], {
           useNativeDriver: true,

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

@@ -70,7 +70,7 @@ export const ShareCredential: FunctionComponent<{
     credential
       ? {
           ...credential,
-          issuerDid: credential?.issuerDid?.did,
+          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} />;
 };