@procivis/one-react-native-components 0.3.142 → 0.3.147

package/lib/typescript/ui-components/text/typography.d.ts

@@ -7,87 +7,87 @@ declare const presets: {
         readonly lineHeight: 36;
         readonly letterSpacing: 0.2;
         readonly fontFamily?: string | undefined;
-        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "light" | "regular" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "condensed" | 300 | "light" | "regular" | 100 | 200 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "heavy" | undefined;
     };
     readonly l: {
         readonly fontSize: 24;
         readonly lineHeight: 33;
         readonly fontFamily?: string | undefined;
-        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "light" | "regular" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "condensed" | 300 | "light" | "regular" | 100 | 200 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "heavy" | undefined;
     };
     readonly 'l/line-height-large': {
         readonly fontSize: 24;
         readonly lineHeight: 28;
         readonly fontFamily?: string | undefined;
-        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "light" | "regular" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "condensed" | 300 | "light" | "regular" | 100 | 200 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "heavy" | undefined;
     };
     readonly regular: {
         readonly fontSize: 17;
         readonly lineHeight: 24;
         readonly fontFamily?: string | undefined;
-        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "light" | "regular" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "condensed" | 300 | "light" | "regular" | 100 | 200 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "heavy" | undefined;
     };
     readonly m: {
         readonly fontSize: 17;
         readonly lineHeight: 22;
         readonly letterSpacing: -0.2;
         readonly fontFamily?: string | undefined;
-        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "light" | "regular" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "condensed" | 300 | "light" | "regular" | 100 | 200 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "heavy" | undefined;
     };
     readonly 'm/heading': {
         readonly fontSize: 17;
         readonly lineHeight: 22;
         readonly letterSpacing: -0.2;
         readonly fontFamily?: string | undefined;
-        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "light" | "regular" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "condensed" | 300 | "light" | "regular" | 100 | 200 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "heavy" | undefined;
     };
     readonly s: {
         readonly fontSize: 14;
         readonly lineHeight: 22;
         readonly fontFamily?: string | undefined;
-        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "light" | "regular" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "condensed" | 300 | "light" | "regular" | 100 | 200 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "heavy" | undefined;
     };
     readonly 's/line-height-capped': {
         readonly fontSize: 14;
         readonly lineHeight: 22;
         readonly letterSpacing: -0.2;
         readonly fontFamily?: string | undefined;
-        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "light" | "regular" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "condensed" | 300 | "light" | "regular" | 100 | 200 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "heavy" | undefined;
     };
     readonly 's/line-height-small': {
         readonly fontSize: 14;
         readonly lineHeight: 18;
         readonly letterSpacing: 0.3;
         readonly fontFamily?: string | undefined;
-        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "light" | "regular" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "condensed" | 300 | "light" | "regular" | 100 | 200 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "heavy" | undefined;
     };
     readonly 's/code': {
         readonly fontSize: 14;
         readonly lineHeight: 22;
         readonly letterSpacing: 0.2;
         readonly fontFamily?: string | undefined;
-        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "light" | "regular" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "condensed" | 300 | "light" | "regular" | 100 | 200 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "heavy" | undefined;
     };
     readonly xs: {
         readonly fontSize: 12;
         readonly lineHeight: 22;
         readonly letterSpacing: -0.1;
         readonly fontFamily?: string | undefined;
-        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "light" | "regular" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "condensed" | 300 | "light" | "regular" | 100 | 200 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "heavy" | undefined;
     };
     readonly 'xs/line-height-small': {
         readonly fontSize: 12;
         readonly lineHeight: 18;
         readonly letterSpacing: 0.3;
         readonly fontFamily?: string | undefined;
-        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "light" | "regular" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "condensed" | 300 | "light" | "regular" | 100 | 200 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "heavy" | undefined;
     };
     readonly 'xs/code': {
         readonly fontSize: 12;
         readonly lineHeight: 18;
         readonly letterSpacing: 0.3;
         readonly fontFamily?: string | undefined;
-        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "light" | "regular" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        readonly fontWeight?: 500 | "bold" | "normal" | "100" | "black" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "condensed" | 300 | "light" | "regular" | 100 | 200 | 400 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "medium" | "semibold" | "condensedBold" | "heavy" | undefined;
     };
 };
 export type TypographyProps = BaseTextProps & {

package/lib/typescript/utils/hooks/core/proofs.d.ts

@@ -1,4 +1,4 @@
-import { CreateProofRequest, HistoryErrorMetadata, PresentationSubmitCredentialRequest, ProofListQuery, ProofState, ProposeProofRequest, ShareProofRequest } from '@procivis/react-native-one-core';
+import { CreateProofRequest, HistoryErrorMetadata, PresentationSubmitV2CredentialRequest, ProofListQuery, ProofState, ProposeProofRequest, ShareProofRequest } from '@procivis/react-native-one-core';
 import { Transport } from '../connectivity/connectivity';
 export declare const PROOF_DETAIL_QUERY_KEY = "proof-detail";
 export declare const PROOF_STATE_QUERY_KEY = "proof-state";
@@ -15,7 +15,7 @@ type ProofUrlHookParams = {
 };
 export declare const useProofUrl: () => import("react-query").UseMutationResult<string, unknown, ProofUrlHookParams, unknown>;
 export declare const useProofAccept: () => import("react-query").UseMutationResult<void, unknown, {
-    credentials: Record<string, PresentationSubmitCredentialRequest[]>;
+    credentials: Record<string, PresentationSubmitV2CredentialRequest[]>;
     interactionId: string;
 }, unknown>;
 export declare const useProofReject: () => import("react-query").UseMutationResult<void, unknown, string, unknown>;

package/lib/typescript/utils/hooks/core/transaction.d.ts

@@ -0,0 +1,2 @@
+export declare const TRANSACTION_DATA_QUERY_KEY = "proof-detail";
+export declare const useTransactionData: (proofId: string | undefined, transactionDataId: string | undefined) => import("react-query").UseQueryResult<import("@procivis/react-native-one-core").ProofTransactionData | undefined, unknown>;

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

@@ -1,7 +1,15 @@
-import { CoreConfig, CredentialQueryFailureHint, PresentationDefinitionV2Claim, PresentationDefinitionV2Credential } from '@procivis/react-native-one-core';
+import { CoreConfig, CredentialDetail, CredentialQueryFailureHint, PresentationDefinitionV2Claim, PresentationDefinitionV2Credential } from '@procivis/react-native-one-core';
 import { CredentialAttribute, CredentialCardNotice, CredentialCardProps } from '../../ui-components';
 import { CredentialDetailsCardPropsWithoutWidth } from '.';
-import { ShareCredentialCardLabels } from './credential-sharing';
+import { CardLabels } from './credential';
+export type ShareCredentialCardLabels = CardLabels & {
+    selectiveDisclosure: string;
+    missingAttribute: string;
+    missingCredential: string;
+    multipleCredentials: string;
+    disclosurePolicyViolation: string;
+};
+export declare const validityCheckedCardFromCredential: (credential: CredentialDetail | PresentationDefinitionV2Credential, 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 shareCredentialCardAttributeFromV2Claim: (claim: PresentationDefinitionV2Claim, selection: string[] | undefined, parentShared: boolean, parentUserSelected: boolean, config: CoreConfig, testID: string, language: string | undefined, nested?: boolean, listValue?: boolean) => CredentialAttribute;
 export declare const missingCredentialCardFromFailureHint: (failureHint: CredentialQueryFailureHint | undefined, notice: CredentialCardNotice | undefined, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'width'>;
 export declare const shareCredentialCardFromV2PresentationCredential: (credential: PresentationDefinitionV2Credential | undefined, failureHint: CredentialQueryFailureHint | undefined, expanded: boolean, multipleCredentialsAvailable: boolean, purpose: string | undefined, selectedFields: string[] | undefined, config: CoreConfig, testID: string, labels: ShareCredentialCardLabels, language: string | undefined) => CredentialDetailsCardPropsWithoutWidth;

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

@@ -1,5 +1,5 @@
 import { Claim, CoreConfig, CredentialDetail, CredentialListItem, CredentialSchemaListItem, PresentationDefinitionV2Credential } from '@procivis/react-native-one-core';
-import { CredentialAttribute, CredentialCardProps, CredentialDetailsCardProps, CredentialHeaderProps } from '../../ui-components/credential';
+import { CredentialAttribute, CredentialCardProps, CredentialDetailsCardProps, CredentialHeaderProps, CredentialLogoProps } from '../../ui-components/credential';
 import { CredentialCardNotice } from '../../ui-components/credential/card/credential-card';
 export declare enum ValidityState {
     Revoked = "revoked",
@@ -9,6 +9,7 @@ export declare enum ValidityState {
 export declare const getValidityState: (credential: CredentialListItem | undefined) => ValidityState;
 export declare const supportsSelectiveDisclosure: (credential: CredentialListItem | undefined, config: CoreConfig | undefined) => boolean | undefined;
 export declare const findClaimByPath: (path: string | undefined, claims: Claim[]) => Claim | undefined;
+export declare const credentialLogoFromCredential: (credential: CredentialDetail, config: CoreConfig, testID: string, language: string | undefined) => Omit<CredentialLogoProps, 'size'>;
 export declare const hasMsoValidityIssues: (credential: CredentialDetail) => boolean;
 export type CardHeaderLabels = {
     validityIssues: string;

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

@@ -1,6 +1,5 @@
 export * from './credential';
 export * from './credential-images';
-export * from './credential-sharing';
 export * from './credential-sharing-v2';
 export * from './query';
 export * from './universal-links';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.3.142",
+  "version": "0.3.147",
   "author": "Procivis AG (https://procivis.ch)",
   "license": "Apache-2.0",
   "description": "Common Procivis ONE UI components for react-native",
@@ -53,8 +53,9 @@
     "@babel/runtime": "^7.25.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@gorhom/bottom-sheet": "^5.1.2",
-    "@procivis/react-native-one-core": "1.112373.0",
+    "@procivis/react-native-one-core": "1.115564.0",
     "@procivis/react-native-picker": "5.0.3",
+    "@quidone/react-native-wheel-picker": "^1.7.0",
     "@react-native-async-storage/async-storage": "^1.17.3",
     "@react-native-community/blur": "^4.4.0",
     "@react-native-community/cli": "15.0.1",
@@ -72,7 +73,7 @@
     "@react-native/typescript-config": "0.77.1",
     "@react-navigation/native": "^6.0.6",
     "@release-it/conventional-changelog": "^2.0.0",
-    "@sentry/react-native": "^5.24.1",
+    "@sentry/react-native": "^7.8.0",
     "@storybook/addon-actions": "^8.6.7",
     "@storybook/addon-controls": "^8.6.7",
     "@storybook/addon-designs": "^8.2.1",
@@ -142,8 +143,9 @@
     "vite": "^6.4.2"
   },
   "peerDependencies": {
-    "@procivis/react-native-one-core": "^1.112373.0",
+    "@procivis/react-native-one-core": "^1.115439.0",
     "@procivis/react-native-picker": "*",
+    "@quidone/react-native-wheel-picker": "^1.7.0",
     "@react-native-community/blur": "*",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native/normalize-color": "*",
@@ -292,6 +294,7 @@
   "packageManager": "pnpm@10.5.2",
   "pnpm": {
     "patchedDependencies": {
+      "react-native": "patches/react-native.patch",
       "react-native-web": "patches/react-native-web.patch"
     }
   }

package/src/components/proof-request/index.ts

@@ -1,4 +1,3 @@
 export * from './select-share-credential-card-notice';
 export * from './share-credential-card-notice';
-export * from './v1';
 export * from './v2';

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

@@ -18,8 +18,7 @@ import {
   UpIcon,
 } from '../../../ui-components';
 import CredentialGroupHeader from '../../../ui-components/credential/group/credential-group-header';
-import { concatTestID, useCredentialListExpandedCard } from '../../../utils';
-import { ShareCredentialLabels } from '../v1/share-credential';
+import { concatTestID, ShareCredentialCardLabels, useCredentialListExpandedCard } from '../../../utils';
 import { GroupedShareCredentialV2Padding, ShareCredentialV2 } from './share-credential-v2';
 
 export type CredentialQuerySelection = Record<
@@ -27,6 +26,14 @@ export type CredentialQuerySelection = Record<
   PresentationSubmitV2CredentialRequest | PresentationSubmitV2CredentialRequest[]
 >;
 
+export type ShareCredentialLabels = ShareCredentialCardLabels & {
+  invalidCredentialNotice: string;
+  multipleCredentialsNotice: string;
+  multipleCredentialsSelect: string;
+  revokedCredentialNotice: string;
+  suspendedCredentialNotice: string;
+};
+
 export type ShareCredentialGroupLabels = ShareCredentialLabels & {
   groupHeader: string;
 };
@@ -131,15 +138,18 @@ export const ShareCredentialV2Group: FC<ShareCredentialV2GroupProps> = ({
           ? {
               credentialId: credentialQuery.applicableCredentials[0].id,
               userSelections: [],
+              transactionDataIds: [],
             }
           : {
               credentialId: '',
               userSelections: [],
+              transactionDataIds: [],
             };
       } else {
         defaultSelection = {
           credentialId: '',
           userSelections: [],
+          transactionDataIds: [],
         };
       }
       const request = selectedCredentials[credentialRequestId];

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

@@ -12,7 +12,7 @@ import { concatTestID, getValidityState, useCoreConfig, ValidityState } from '..
 import { shareCredentialCardFromV2PresentationCredential } from '../../../utils/parsers/credential-sharing-v2';
 import { SelectShareCredentialCardNotice } from '../select-share-credential-card-notice';
 import { ShareCredentialCardNotice } from '../share-credential-card-notice';
-import { ShareCredentialLabels } from '../v1';
+import { ShareCredentialLabels } from './share-credential-v2-group';
 
 export type ShareCredentialV2Props = {
   credentialQuery: ApplicableCredentialOrFailureHint;

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

@@ -3,9 +3,10 @@ import { AccessibilityProps, ColorValue, StyleProp, StyleSheet, View, ViewStyle
 
 import { concatTestID } from '../../../utils/testID';
 import BlurView from '../../blur/blur-view';
-import ImageOrComponent, { ImageOrComponentSource } from '../../image/image-or-component';
+import { ImageOrComponentSource } from '../../image/image-or-component';
 import Typography, { TypographyProps } from '../../text/typography';
 import { useAppColorScheme } from '../../theme/color-scheme-context';
+import CredentialLogo from './credential-logo';
 
 export interface CredentialHeaderProps extends AccessibilityProps {
   accessory?: React.ComponentType<any> | React.ReactElement;
@@ -104,23 +105,13 @@ const CredentialHeader: FC<CredentialHeaderProps> = ({
   return (
     <View style={[styles.container, { backgroundColor: blur ? undefined : colorScheme.white }, style]} testID={testID}>
       {blur && <BlurView blurStyle="strong" style={StyleSheet.absoluteFill} />}
-      <View style={[styles.imageContainer, { backgroundColor: color }]}>
-        {icon ? (
-          <ImageOrComponent testID={concatTestID(testID, 'logoIcon')} source={icon} style={styles.image} />
-        ) : (
-          <View testID={concatTestID(testID, 'logoBackgroundColor', String(color))}>
-            <View testID={concatTestID(testID, 'logoTextColor', String(iconLabelColor))}>
-              <Typography
-                testID={concatTestID(testID, 'logoName')}
-                color={iconLabelColor}
-                preset="m"
-                style={styles.imagePlaceholder}>
-                {credentialName.substring(0, 1)}
-              </Typography>
-            </View>
-          </View>
-        )}
-      </View>
+      <CredentialLogo
+        color={color}
+        icon={icon}
+        iconLabelColor={iconLabelColor}
+        credentialName={credentialName}
+        testID={concatTestID(testID, 'logo')}
+      />
       {statusIconView && <View style={styles.statusIconWrapper}>{statusIconView}</View>}
       <View style={styles.text}>
         <Typography
@@ -160,25 +151,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     marginTop: -1,
   },
-  image: {
-    height: 44,
-    width: 44,
-  },
-  imageContainer: {
-    alignItems: 'center',
-    borderRadius: 5,
-    borderWidth: 0,
-    height: 44,
-    justifyContent: 'center',
-    marginRight: 8,
-    overflow: 'hidden',
-    width: 44,
-  },
-  imagePlaceholder: {
-    paddingLeft: 1,
-    paddingTop: 3,
-    textTransform: 'uppercase',
-  },
   interpunct: {
     marginHorizontal: 12,
     opacity: 0.5,

package/src/ui-components/credential/card/credential-logo.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ColorSchemes from '../../../../storybook/colorScheme';
+import CredentialLogo from './credential-logo';
+
+const Basic: StoryObj<typeof CredentialLogo> = {
+  args: {
+    color: undefined,
+    credentialName: 'Credential Name',
+    icon: undefined,
+    iconLabelColor: undefined,
+    size: undefined,
+  },
+};
+
+export { Basic as CredentialLogo };
+
+export default {
+  title: 'credential/card/CredentialLogo',
+  component: CredentialLogo,
+  argTypes: {
+    color: {
+      options: Object.entries(ColorSchemes.procivis)
+        .filter(([_, value]) => typeof value === 'string')
+        .map(([key]) => key),
+      control: { type: 'select' },
+    },
+    iconLabelColor: {
+      options: Object.entries(ColorSchemes.procivis)
+        .filter(([_, value]) => typeof value === 'string')
+        .map(([key]) => key),
+      control: { type: 'select' },
+    },
+    size: {
+      options: [44, 20],
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=401-1807&t=aYYyzt4OQQZxwjRu-0',
+    },
+  },
+} as Meta<typeof CredentialLogo>;

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

@@ -0,0 +1,79 @@
+import React, { FC } from 'react';
+import { ColorValue, StyleSheet, View } from 'react-native';
+
+import { concatTestID } from '../../../utils/testID';
+import ImageOrComponent, { ImageOrComponentSource } from '../../image/image-or-component';
+import Typography from '../../text/typography';
+
+export enum CredentialLogoSize {
+  Regular = 44,
+  Small = 20,
+}
+
+export type CredentialLogoProps = {
+  color?: ColorValue;
+  credentialName: string;
+  icon?: ImageOrComponentSource;
+  iconLabelColor?: ColorValue;
+  size?: CredentialLogoSize;
+  testID?: string;
+};
+
+const CredentialLogo: FC<CredentialLogoProps> = ({
+  color = '#5A69F3',
+  credentialName,
+  icon,
+  iconLabelColor = '#FFFFFF',
+  size = CredentialLogoSize.Regular,
+  testID,
+}) => {
+  const sizeStyle = {
+    height: size,
+    width: size,
+  };
+  return (
+    <View style={[styles.imageContainer, sizeStyle, { backgroundColor: color }]} testID={testID}>
+      {icon ? (
+        <ImageOrComponent testID={concatTestID(testID, 'icon')} source={icon} style={sizeStyle} />
+      ) : (
+        <View testID={concatTestID(testID, 'backgroundColor', String(color))}>
+          <View testID={concatTestID(testID, 'textColor', String(iconLabelColor))}>
+            <Typography
+              testID={concatTestID(testID, 'name')}
+              color={iconLabelColor}
+              preset={size === CredentialLogoSize.Regular ? 'm' : 'xs'}
+              style={[
+                styles.imagePlaceholder,
+                size === CredentialLogoSize.Regular ? styles.imagePlaceholderRegular : styles.imagePlaceholderSmall,
+              ]}>
+              {credentialName.substring(0, 1)}
+            </Typography>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  imageContainer: {
+    alignItems: 'center',
+    borderRadius: 5,
+    borderWidth: 0,
+    justifyContent: 'center',
+    marginRight: 8,
+    overflow: 'hidden',
+  },
+  imagePlaceholder: {
+    textTransform: 'uppercase',
+  },
+  imagePlaceholderRegular: {
+    paddingLeft: 1,
+    paddingTop: 3,
+  },
+  imagePlaceholderSmall: {
+    paddingTop: 1,
+  },
+});
+
+export default CredentialLogo;

package/src/ui-components/credential/card/index.ts

@@ -1,11 +1,5 @@
-import type {
-  CredentialCardNotice,
-  CredentialCardProps,
-} from './credential-card';
-import CredentialCard, {
-  CredentialCardRatio,
-  CredentialCardShadow,
-} from './credential-card';
+import type { CredentialCardNotice, CredentialCardProps } from './credential-card';
+import CredentialCard, { CredentialCardRatio, CredentialCardShadow } from './credential-card';
 import type { CredentialDetailsCardProps } from './credential-details-card';
 import CredentialDetailsCard from './credential-details-card';
 import type { CredentialDetailsCardListItemProps } from './credential-details-list-item';
@@ -14,9 +8,12 @@ import type { CredentialHeaderProps } from './credential-header';
 import CredentialHeader from './credential-header';
 import type { CarouselImage } from './credential-image-carousel';
 import { CarouselImageType } from './credential-image-carousel';
+import type { CredentialLogoProps, CredentialLogoSize } from './credential-logo';
+import CredentialLogo from './credential-logo';
 
 export { CarouselImage, CarouselImageType };
 export { CredentialCard, CredentialCardNotice, CredentialCardProps, CredentialCardRatio, CredentialCardShadow };
 export { CredentialDetailsCard, CredentialDetailsCardProps };
 export { CredentialDetailsCardListItem, CredentialDetailsCardListItemProps };
 export { CredentialHeader, CredentialHeaderProps };
+export { CredentialLogo, CredentialLogoProps, CredentialLogoSize };