@procivis/one-react-native-components 0.3.71 → 0.3.91

package/lib/typescript/ui-components/proof-request/index.d.ts

@@ -0,0 +1,3 @@
+import type { ProofRequestSetProps } from './proof-request-set';
+import { ProofRequestSet } from './proof-request-set';
+export { ProofRequestSet, ProofRequestSetProps };

package/lib/typescript/ui-components/proof-request/proof-request-set.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+export type ProofRequestSetProps = {
+    headerLabel?: string;
+    showHeader?: boolean;
+    showSeparator?: boolean;
+};
+export declare const ProofRequestSet: FunctionComponent<PropsWithChildren<ProofRequestSetProps>>;

package/lib/typescript/ui-components/screens/section-list-screen.d.ts

@@ -6,8 +6,10 @@ export type SectionListScreenProps<ItemT, SectionT> = ViewProps & {
         static?: boolean;
         title: string;
     };
-    list: Omit<SectionListProps<ItemT, SectionT>, 'ListHeaderComponent' | 'onScroll'>;
+    list: Omit<SectionListProps<ItemT, SectionT>, 'ListHeaderComponent' | 'onScroll'> & {
+        header?: React.ComponentType<any> | React.ReactElement;
+    };
     modalPresentation?: boolean;
 };
-declare const SectionListScreen: <ItemT, SectionT>({ header, list: { contentContainerStyle, stickySectionHeadersEnabled, ...listProps }, modalPresentation, style, ...viewProps }: SectionListScreenProps<ItemT, SectionT>) => React.JSX.Element;
+declare const SectionListScreen: <ItemT, SectionT>({ header, list: { contentContainerStyle, header: listHeader, stickySectionHeadersEnabled, ...listProps }, modalPresentation, style, ...viewProps }: SectionListScreenProps<ItemT, SectionT>) => React.JSX.Element;
 export default SectionListScreen;

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

@@ -1 +1,2 @@
 export declare function addElementIf<T>(condition: boolean, obj: T): T[];
+export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;

package/lib/typescript/utils/hooks/app-state.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns current app state
+ */
+export declare function useAppState(): "background" | "active" | "inactive" | "unknown" | "extension";
+export declare function useIsAppActive(): boolean | undefined;

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

@@ -15,4 +15,4 @@ export declare const useRollbackImport: () => import("react-query").UseMutationR
  * @param {IdentifiersInitializationConfig} config Select desired keys/dids to be restored/created
  * @returns [hwIdentifierId, swIdentifierId]
  */
-export declare const useBackupFinalizeImportProcedure: ({ generateHwKey, generateSwKey, }: IdentifiersInitializationConfig) => () => Promise<[string | null, string | undefined]>;
+export declare const useBackupFinalizeImportProcedure: ({ generateHwKey, generateSwKey }: IdentifiersInitializationConfig) => () => Promise<[string | null, string | undefined]>;

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

@@ -6,12 +6,13 @@ export declare const useCredentials: (queryParams?: Partial<CredentialListQuery>
 export declare const usePagedCredentials: (queryParams?: Partial<CredentialListQuery>) => import("react-query").UseInfiniteQueryResult<import("@procivis/react-native-one-core").ItemList<import("@procivis/react-native-one-core").CredentialListItem>, unknown>;
 export declare const useCredentialDetail: (credentialId: string | undefined, active?: boolean) => import("react-query").UseQueryResult<import("@procivis/react-native-one-core").CredentialDetail | undefined, unknown>;
 export declare const useInvitationHandler: () => import("react-query").UseMutationResult<InvitationResult, unknown, Omit<HandleInvitationRequest, "organisationId">, unknown>;
-export declare const useCredentialAccept: () => import("react-query").UseMutationResult<void, unknown, {
+export declare const useCredentialAccept: () => import("react-query").UseMutationResult<string, unknown, {
     didId?: string | undefined;
     identifierId?: string | undefined;
     interactionId: string;
     keyId?: string | undefined;
     txCode?: string | undefined;
+    holderWalletUnitId?: string | undefined;
 }, unknown>;
 export declare const useCredentialReject: () => import("react-query").UseMutationResult<void, unknown, string, unknown>;
 export declare const useCredentialRevocationCheck: (forceRefresh: boolean) => import("react-query").UseMutationResult<import("@procivis/react-native-one-core").CredentialRevocationCheckResponse[], unknown, string[], unknown>;

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

@@ -1,4 +1,4 @@
-import { IdentifierListQuery } from "@procivis/react-native-one-core";
+import { IdentifierListQuery } from '@procivis/react-native-one-core';
 export declare const IDENTIFIER_DETAIL_QUERY_KEY = "identifier-detail";
 export declare const IDENTIFIER_LIST_QUERY_KEY = "identifier-list";
 export declare const useIdentifierDetails: (identifierId: string | undefined) => import("react-query").UseQueryResult<import("@procivis/react-native-one-core").IdentifierDetail | undefined, unknown>;

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

@@ -12,3 +12,4 @@ export * from './proof-schemas';
 export * from './proofs';
 export * from './query';
 export * from './trust-entity';
+export * from './wallet-unit';

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

@@ -1,10 +1,13 @@
-import { CreateProofRequest, PresentationSubmitCredentialRequest, ProofListQuery, ProofStateEnum, ShareProofRequest } from '@procivis/react-native-one-core';
+import { CreateProofRequest, HistoryErrorMetadata, PresentationSubmitCredentialRequest, ProofListQuery, ProofStateEnum, 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";
 export declare const PROOF_LIST_QUERY_KEY = "proof-list";
 export declare const useProofDetail: (proofId: string | undefined) => import("react-query").UseQueryResult<import("@procivis/react-native-one-core").ProofDetail | undefined, unknown>;
-export declare const useProofState: (proofId: string | undefined, isPolling: boolean) => import("react-query").UseQueryResult<ProofStateEnum | undefined, unknown>;
+export declare const useProofState: (proofId: string | undefined, isPolling: boolean) => import("react-query").UseQueryResult<{
+    state: ProofStateEnum;
+    metadata: HistoryErrorMetadata | undefined;
+} | undefined, unknown>;
 type ProofUrlHookParams = {
     proofId: string;
     request?: ShareProofRequest;
@@ -12,10 +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>;
-    didId?: string | undefined;
-    identifierId?: string | undefined;
     interactionId: string;
-    keyId?: string | undefined;
 }, unknown>;
 export declare const useProofReject: () => import("react-query").UseMutationResult<void, unknown, string, unknown>;
 export declare enum IssuanceProtocol {
@@ -32,11 +32,7 @@ export declare enum VerificationEngagement {
     QR_CODE = "QR_CODE",
     NFC = "NFC"
 }
-export interface ProposeProofRequest {
-    exchange: VerificationProtocol;
-    engagement: VerificationEngagement[];
-}
-export declare const useProposeProof: () => import("react-query").UseMutationResult<import("@procivis/react-native-one-core").ProposeProofResponse, unknown, ProposeProofRequest, unknown>;
+export declare const useProposeProof: () => import("react-query").UseMutationResult<import("@procivis/react-native-one-core").ProposeProofResponse, unknown, Omit<ProposeProofRequest, "organisationId">, unknown>;
 export declare const useProofDelete: () => import("react-query").UseMutationResult<void, unknown, string, unknown>;
 export declare const useProofs: (queryParams?: Partial<ProofListQuery>) => import("react-query").UseQueryResult<import("@procivis/react-native-one-core").ItemList<import("@procivis/react-native-one-core").ProofListItem>, unknown>;
 export declare const useProofCreate: () => import("react-query").UseMutationResult<string, unknown, CreateProofRequest, unknown>;

package/lib/typescript/utils/hooks/core/wallet-unit.d.ts

@@ -0,0 +1,9 @@
+import { HolderWalletUnitDetail, WalletProvider } from '@procivis/react-native-one-core';
+export declare const WALLET_UNIT_QUERY_KEY = "wallet-unit";
+export declare const useWalletUnitDetail: (walletUnitId: HolderWalletUnitDetail['id'] | undefined, active?: boolean) => import("react-query").UseQueryResult<HolderWalletUnitDetail | undefined, unknown>;
+export declare const useRegisterWalletUnit: () => import("react-query").UseMutationResult<string, unknown, WalletProvider, unknown>;
+export declare const useWalletUnitStatus: () => import("react-query").UseMutationResult<void, unknown, string, unknown>;
+export declare const useWalletUnitCheck: (walletUnitId: HolderWalletUnitDetail['id'] | undefined) => {
+    isLoading: boolean;
+    walletUnitDetail: HolderWalletUnitDetail | undefined;
+};

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

@@ -1,3 +1,4 @@
+export * from './app-state';
 export * from './connectivity/connectivity';
 export * from './core';
 export * from './credential-card/credential-card-expanding';

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

@@ -13,6 +13,6 @@ export * from './parsers';
 export * from './ref';
 export * from './reporting';
 export * from './string';
+export * from './url';
 export * from './useMemoAsync';
 export * from './uuid';
-export * from './url';

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

@@ -0,0 +1,10 @@
+import { Config, FailureHint, PresentationDefinitionV2CredentialClaim, PresentationDefinitionV2CredentialDetail } from '@procivis/react-native-one-core';
+import { CredentialAttribute, CredentialCardNotice, CredentialCardProps } from '../../ui-components';
+import { CredentialDetailsCardPropsWithoutWidth } from '.';
+import { ShareCredentialCardLabels } from './credential-sharing';
+export declare const shareCredentialCardAttributeFromV2Claim: (claim: PresentationDefinitionV2CredentialClaim, selection: string[] | undefined, parentShared: boolean, parentUserSelected: boolean, config: Config, testID: string, nested?: boolean, listValue?: boolean) => CredentialAttribute;
+export declare const missingCredentialCardFromFailureHint: (failureHint: FailureHint['failureHint'] | undefined, notice: CredentialCardNotice | undefined, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'width'>;
+export declare const shareCredentialCardFromV2PresentationCredential: (credential: PresentationDefinitionV2CredentialDetail | undefined, failureHint: FailureHint['failureHint'] | undefined, expanded: boolean, multipleCredentialsAvailable: boolean, selectedFields: string[] | undefined, config: Config, testID: string, labels: ShareCredentialCardLabels) => CredentialDetailsCardPropsWithoutWidth;
+export declare const selectCredentialCardFromV2Credential: (credential: PresentationDefinitionV2CredentialDetail, selected: boolean, multiple: boolean, config: Config, testID: string, labels: ShareCredentialCardLabels) => CredentialDetailsCardPropsWithoutWidth;
+export declare const getV2CredentialClaimAllSubpaths: (claim: PresentationDefinitionV2CredentialClaim) => string[];
+export declare const getV2CredentialAvailablePaths: (credential: PresentationDefinitionV2CredentialDetail) => string[];

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

@@ -4,7 +4,11 @@ import { CredentialCardNotice } from '../../ui-components/credential/card/creden
 import { CardLabels, CredentialDetailsCardPropsWithoutWidth } from './credential';
 export declare const validityCheckedCardFromCredential: (credential: CredentialDetail, invalidLVVC: boolean, expanded: boolean, multipleCredentialsAvailable: boolean, config: Config, notice: CredentialCardNotice | undefined, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'testID' | 'width'>;
 export declare const missingCredentialCardFromRequest: (request: PresentationDefinitionRequestedCredential, notice: CredentialCardNotice | undefined, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'width'>;
-export declare const shareCredentialCardAttributeFromClaim: (id: string, config: Config, testID: string, labels: ShareCredentialCardLabels, claim?: Claim, field?: PresentationDefinitionField) => CredentialAttribute;
+type FlatClaim = Claim & {
+    path: string;
+    isArrayElement?: boolean;
+};
+export declare const shareCredentialCardAttributeFromClaim: (id: string, config: Config, testID: string, labels: ShareCredentialCardLabels, claim?: FlatClaim, field?: PresentationDefinitionField) => CredentialAttribute;
 export type ShareCredentialCardLabels = CardLabels & {
     selectiveDisclosureNotice: string;
     missingAttribute: string;
@@ -12,5 +16,6 @@ export type ShareCredentialCardLabels = CardLabels & {
     multipleCredentials: string;
 };
 export declare const shareCredentialCardFromCredential: (credential: CredentialDetail | undefined, invalidLVVC: boolean, expanded: boolean, multipleCredentialsAvailable: boolean, request: PresentationDefinitionRequestedCredential, selectedFields: string[] | undefined, config: Config, testID: string, labels: ShareCredentialCardLabels) => CredentialDetailsCardPropsWithoutWidth;
-export declare const selectCredentialCardAttributeFromClaim: (id: string, config: Config, testID: string, labels: ShareCredentialCardLabels, claim?: Claim, field?: PresentationDefinitionField) => CredentialAttribute;
+export declare const selectCredentialCardAttributeFromClaim: (id: string, config: Config, testID: string, labels: ShareCredentialCardLabels, claim?: FlatClaim, field?: PresentationDefinitionField) => CredentialAttribute;
 export declare const selectCredentialCardFromCredential: (credential: CredentialDetail, selected: boolean, request: PresentationDefinitionRequestedCredential, config: Config, testID: string, labels: ShareCredentialCardLabels) => CredentialDetailsCardPropsWithoutWidth;
+export {};

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

@@ -71,9 +71,8 @@ export declare function getCredentialSchemaWithoutImages(credentialSchema: Crede
     name: string;
     format: string;
     revocationMethod: string;
-    walletStorageType?: import("@procivis/react-native-one-core").WalletStorageType | undefined;
+    keyStorageSecurity?: import("@procivis/react-native-one-core").KeyStorageSecurity | undefined;
     schemaId: string;
     importedSourceUrl: string;
-    schemaType: string;
     layoutType?: import("@procivis/react-native-one-core").LayoutType | undefined;
 };

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

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

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

@@ -1,8 +1,8 @@
 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 getQueryKeyFromCredentialListQueryParams: (queryParams?: Partial<CredentialListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").CredentialListQueryExactColumnEnum[] | import("@procivis/react-native-one-core").CredentialRoleEnum[] | 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").HistoryListSearch | 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)[];
+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").IdentifierStateEnum[] | import("@procivis/react-native-one-core").IdentifierTypeEnum[] | undefined)[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.3.71",
+  "version": "0.3.91",
   "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.60537.0",
+    "@procivis/react-native-one-core": "1.72811.0",
     "@procivis/react-native-picker": "5.0.3",
     "@react-native-async-storage/async-storage": "^1.17.3",
     "@react-native-community/blur": "^4.4.0",
@@ -91,7 +91,7 @@
     "@types/react": "^18.2.6",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
-    "apisauce": "2.0.0",
+    "apisauce": "3.2.0",
     "babel-jest": "^29.6.3",
     "babel-loader": "^8.2.4",
     "babel-plugin-react-native-web": "^0.19.13",
@@ -140,14 +140,14 @@
     "vite": "^6.2.2"
   },
   "peerDependencies": {
-    "@procivis/react-native-one-core": "^1.60537.0",
+    "@procivis/react-native-one-core": "^1.72811.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": "2.0.0",
+    "apisauce": "3.2.0",
     "lodash": "^4.17.21",
     "lottie-react-native": "^7.2.2",
     "moment": "^2.29.4",
@@ -259,7 +259,13 @@
       "import/newline-after-import": "warn",
       "import/no-duplicates": "warn",
       "import/no-absolute-path": "warn",
-      "no-console": "error"
+      "no-console": "error",
+      "no-void": [
+        "error",
+        {
+          "allowAsStatement": true
+        }
+      ]
     }
   },
   "eslintIgnore": [
@@ -287,4 +293,4 @@
       "react-native-web": "patches/react-native-web.patch"
     }
   }
-}
+}

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

@@ -14,6 +14,7 @@ interface EntityAttributesProps {
   labels: AttributesLabels;
   onCopyToClipboard: (value: string) => void;
   entityType: EntityType;
+  testID?: string;
 }
 
 const EntityAttributes: FC<EntityAttributesProps> = ({
@@ -23,6 +24,7 @@ const EntityAttributes: FC<EntityAttributesProps> = ({
   trusted,
   labels,
   entityType,
+  testID,
   onCopyToClipboard,
 }) => {
   const didSections = did?.split(':') ?? [];
@@ -62,6 +64,7 @@ const EntityAttributes: FC<EntityAttributesProps> = ({
           {...attribute}
           labels={labels}
           onCopyToClipboard={onCopyToClipboard}
+          testID={testID}
         />
       ))}
     </View>

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

@@ -66,6 +66,7 @@ const EntityDetailsWithButtons: FC<EntityDetailsWithButtonsProps> = ({
         labels={attributesLabels}
         onCopyToClipboard={onCopyToClipboard}
         entityType={entityType}
+        testID={testID}
       />
     </View>
   );

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

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

package/src/components/proof-request/select-share-credential-card-notice.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+import { StyleSheet } from 'react-native';
+
+import { Button, ButtonType } from '../../ui-components';
+import { concatTestID } from '../../utils';
+import { ShareCredentialCardNotice, ShareCredentialCardNoticeProps } from './share-credential-card-notice';
+
+export type SelectShareCredentialCardNoticeProps = ShareCredentialCardNoticeProps & {
+  buttonTitle: string;
+  onPress?: () => void;
+};
+
+export const SelectShareCredentialCardNotice: FC<SelectShareCredentialCardNoticeProps> = ({
+  buttonTitle,
+  onPress,
+  testID,
+  text,
+}) => {
+  return (
+    <ShareCredentialCardNotice testID={testID} text={text}>
+      <Button
+        onPress={onPress}
+        style={styles.noticeButton}
+        testID={concatTestID(testID, 'button')}
+        title={buttonTitle}
+        type={ButtonType.Secondary}
+      />
+    </ShareCredentialCardNotice>
+  );
+};
+
+const styles = StyleSheet.create({
+  noticeButton: {
+    marginTop: 24,
+    paddingVertical: 11,
+  },
+});

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

@@ -0,0 +1,33 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Typography,useAppColorScheme } from '../../ui-components';
+
+export type ShareCredentialCardNoticeProps = {
+  testID: string;
+  text: string;
+};
+
+export const ShareCredentialCardNotice: FC<PropsWithChildren<ShareCredentialCardNoticeProps>> = ({
+  children,
+  testID,
+  text,
+}) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <View style={[styles.notice, { backgroundColor: colorScheme.background }]} testID={testID}>
+      <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
+        {text}
+      </Typography>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  notice: {
+    marginBottom: 22,
+    marginHorizontal: 12,
+    padding: 12,
+  },
+});

package/src/components/proof-request/{group.tsx → v1/group.tsx}

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, PropsWithChildren } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { useAppColorScheme } from '../../ui-components/theme';
+import { useAppColorScheme } from '../../../ui-components/theme';
 
 export const ProofRequestGroup: FunctionComponent<PropsWithChildren> = ({ children }) => {
   const colorScheme = useAppColorScheme();

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

@@ -0,0 +1,3 @@
+export * from './group';
+export * from './select-credential';
+export * from './share-credential';

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

@@ -2,10 +2,13 @@ import { PresentationDefinitionRequestedCredential } from '@procivis/react-nativ
 import React, { FC, useMemo } from 'react';
 import { Dimensions, ImageSourcePropType } from 'react-native';
 
-import { CredentialDetailsCardListItem } from '../../ui-components';
-import { useCoreConfig } from '../../utils/hooks/core/core-config';
-import { useCredentialDetail } from '../../utils/hooks/core/credentials';
-import { selectCredentialCardFromCredential, ShareCredentialCardLabels } from '../../utils/parsers/credential-sharing';
+import { CredentialDetailsCardListItem } from '../../../ui-components';
+import { useCoreConfig } from '../../../utils/hooks/core/core-config';
+import { useCredentialDetail } from '../../../utils/hooks/core/credentials';
+import {
+  selectCredentialCardFromCredential,
+  ShareCredentialCardLabels,
+} from '../../../utils/parsers/credential-sharing';
 
 export const SelectCredential: FC<{
   credentialId: string;

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

@@ -6,13 +6,18 @@ import {
   PresentationDefinitionRequestedCredential,
 } from '@procivis/react-native-one-core';
 import React, { FunctionComponent, useMemo } from 'react';
-import { Dimensions, ImageSourcePropType, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { Dimensions, ImageSourcePropType, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
-import { Button, ButtonType, CredentialDetailsCardListItem, Typography, useAppColorScheme } from '../../ui-components';
-import { concatTestID } from '../../utils';
-import { useCoreConfig } from '../../utils/hooks/core/core-config';
-import { getValidityState, ValidityState } from '../../utils/parsers/credential';
-import { shareCredentialCardFromCredential, ShareCredentialCardLabels } from '../../utils/parsers/credential-sharing';
+import { CredentialDetailsCardListItem, useAppColorScheme } from '../../../ui-components';
+import { concatTestID } from '../../../utils';
+import { useCoreConfig } from '../../../utils/hooks/core/core-config';
+import { getValidityState, ValidityState } from '../../../utils/parsers/credential';
+import {
+  shareCredentialCardFromCredential,
+  ShareCredentialCardLabels,
+} from '../../../utils/parsers/credential-sharing';
+import { SelectShareCredentialCardNotice } from '../select-share-credential-card-notice';
+import { ShareCredentialCardNotice } from '../share-credential-card-notice';
 
 export type ShareCredentialLabels = ShareCredentialCardLabels & {
   invalidCredentialNotice: string;
@@ -87,58 +92,41 @@ export const ShareCredential: FunctionComponent<{
     }
     if (validityState === ValidityState.Revoked) {
       return (
-        <View
-          style={[styles.notice, { backgroundColor: colorScheme.background }]}
-          testID={concatTestID(testID, 'notice.revoked')}>
-          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
-            {labels.revokedCredentialNotice}
-          </Typography>
-        </View>
+        <ShareCredentialCardNotice
+          testID={concatTestID(testID, 'notice.revoked')}
+          text={labels.revokedCredentialNotice}
+        />
       );
     }
     if (validityState === ValidityState.Suspended) {
       return (
-        <View
-          style={[styles.notice, { backgroundColor: colorScheme.background }]}
-          testID={concatTestID(testID, 'notice.suspended')}>
-          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
-            {labels.suspendedCredentialNotice}
-          </Typography>
-        </View>
+        <ShareCredentialCardNotice
+          testID={concatTestID(testID, 'notice.suspended')}
+          text={labels.suspendedCredentialNotice}
+        />
       );
     }
 
     if (invalid) {
       return (
-        <View
-          style={[styles.notice, { backgroundColor: colorScheme.background }]}
-          testID={concatTestID(testID, 'notice.invalid')}>
-          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
-            {labels.invalidCredentialNotice}
-          </Typography>
-        </View>
+        <ShareCredentialCardNotice
+          testID={concatTestID(testID, 'notice.invalid')}
+          text={labels.invalidCredentialNotice}
+        />
       );
     }
 
     if (multipleCredentialsAvailable) {
       return (
-        <View
-          style={[styles.notice, { backgroundColor: colorScheme.background }]}
-          testID={concatTestID(testID, 'notice.multiple')}>
-          <Typography align="center" color={colorScheme.text} preset="s/line-height-capped">
-            {labels.multipleCredentialsNotice}
-          </Typography>
-          <Button
-            onPress={onSelectCredential}
-            style={styles.noticeButton}
-            testID={concatTestID(testID, 'notice.multiple.button')}
-            title={labels.multipleCredentialsSelect}
-            type={ButtonType.Secondary}
-          />
-        </View>
+        <SelectShareCredentialCardNotice
+          buttonTitle={labels.multipleCredentialsSelect}
+          onPress={onSelectCredential}
+          testID={concatTestID(testID, 'notice.multiple')}
+          text={labels.multipleCredentialsNotice}
+        />
       );
     }
-  }, [colorScheme, expanded, invalid, labels, multipleCredentialsAvailable, onSelectCredential, testID, validityState]);
+  }, [expanded, invalid, labels, multipleCredentialsAvailable, onSelectCredential, testID, validityState]);
 
   if (!config) {
     return null;
@@ -182,13 +170,4 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     marginBottom: 8,
   },
-  notice: {
-    marginBottom: 22,
-    marginHorizontal: 12,
-    padding: 12,
-  },
-  noticeButton: {
-    marginTop: 24,
-    paddingVertical: 11,
-  },
 });

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

@@ -0,0 +1,3 @@
+export * from './select-credential-v2';
+export * from './share-credential-v2';
+export * from './share-credential-v2-group';

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

@@ -0,0 +1,52 @@
+import { CredentialListItem, PresentationDefinitionV2CredentialDetail } from '@procivis/react-native-one-core';
+import React, { FC, useCallback, useMemo } from 'react';
+import { Dimensions, ImageSourcePropType } from 'react-native';
+
+import { CredentialDetailsCardListItem } from '../../../ui-components';
+import { ShareCredentialCardLabels, useCoreConfig } from '../../../utils';
+import { selectCredentialCardFromV2Credential } from '../../../utils/parsers/credential-sharing-v2';
+
+export const SelectCredentialV2: FC<{
+  credential: PresentationDefinitionV2CredentialDetail;
+  labels: ShareCredentialCardLabels;
+  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 }) => {
+  const { data: config } = useCoreConfig();
+  const cardWidth = useMemo(() => Dimensions.get('window').width - 32, []);
+
+  const onHeaderPress = useCallback(() => {
+    onSelected?.(credential.id, !selected);
+  }, [credential.id, onSelected, selected]);
+
+  if (!credential || !config) {
+    return null;
+  }
+
+  const { card, attributes } = selectCredentialCardFromV2Credential(
+    credential,
+    selected,
+    multiple,
+    config,
+    testID,
+    labels,
+  );
+
+  return (
+    <CredentialDetailsCardListItem
+      attributes={attributes}
+      card={{
+        ...card,
+        onHeaderPress,
+        width: cardWidth,
+      }}
+      expanded={selected}
+      lastItem={lastItem}
+      onImagePreview={onImagePreview}
+    />
+  );
+};