@procivis/one-react-native-components 0.3.112 → 0.3.121

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

@@ -5,4 +5,4 @@ export declare const getQueryKeyFromCredentialSchemaListQueryParams: (queryParam
 export declare const getQueryKeyFromProofSchemaListQueryParams: (queryParams?: Partial<ProofSchemaListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").ProofSchemaListQueryExactColumn[] | undefined)[];
 export declare const getQueryKeyFromProofListQueryParams: (queryParams?: Partial<ProofListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").ProofListQueryExactColumn[] | import("@procivis/react-native-one-core").ProofState[] | import("@procivis/react-native-one-core").ProofRole[] | undefined)[];
 export declare const getQueryKeyFromDidListQueryParams: (queryParams?: Partial<DidListQuery>) => (string | number | boolean | string[] | import("@procivis/react-native-one-core").DidListQueryExactColumn[] | import("@procivis/react-native-one-core").KeyRole[] | undefined)[];
-export declare const getQueryKeyFromIdentifierListQueryParams: (queryParams?: Partial<IdentifierListQuery>) => (string | number | boolean | string[] | import("@procivis/react-native-one-core").KeyRole[] | import("@procivis/react-native-one-core").IdentifierListQueryExactColumn[] | import("@procivis/react-native-one-core").IdentifierState[] | import("@procivis/react-native-one-core").IdentifierType[] | undefined)[];
+export declare const getQueryKeyFromIdentifierListQueryParams: (queryParams?: Partial<IdentifierListQuery>) => (string | number | boolean | string[] | import("@procivis/react-native-one-core").KeyRole[] | import("@procivis/react-native-one-core").IdentifierListQueryExactColumn[] | import("@procivis/react-native-one-core").IdentifierState[] | import("@procivis/react-native-one-core").IdentifierType[] | import("@procivis/react-native-one-core").CertificateRole[] | undefined)[];

package/package.json

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

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

@@ -58,6 +58,9 @@ const defaultIcons: {
     INTERACTION_ERRORED: HistoryStatusErrorIcon,
     INTERACTION_EXPIRED: HistoryStatusErrorIcon,
     DELIVERED: HistoryStatusAcceptedIcon,
+    WRP_AC_RECEIVED: HistoryStatusAcceptedIcon,
+    WRP_RC_RECEIVED: HistoryStatusAcceptedIcon,
+    WRP_NR_RECEIVED: HistoryStatusAcceptedIcon,
   },
   entityTypes: {
     BACKUP: HistoryRevokeIcon,
@@ -87,6 +90,7 @@ const defaultIcons: {
     TRUST_LIST_PUBLICATION: HistoryTrustAnchorIcon,
     TRUST_COLLECTION: HistoryTrustAnchorIcon,
     TRUST_LIST_SUBSCRIPTION: HistoryTrustAnchorIcon,
+    VERIFIER_INSTANCE: HistoryTrustedEntityIcon,
   },
 };
 

package/src/components/index.ts

@@ -4,3 +4,4 @@ export * from './entity';
 export * from './history';
 export * from './navigation';
 export * from './proof-request';
+export * from './trust-info';

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

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

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

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

package/src/ui-components/control/checkbox.tsx

@@ -24,7 +24,7 @@ export const Checkbox: FC<CheckboxProps> = ({ style, text, value, disabled, onVa
     <TouchableOpacity
       activeOpacity={0.8}
       accessibilityRole="checkbox"
-      accessibilityState={{ disabled }}
+      accessibilityState={{ checked: value, disabled }}
       accessibilityValue={
         disabled ? undefined : { text: t(value ? 'accessibility.control.checked' : 'accessibility.control.unchecked') }
       }

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

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

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

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

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

@@ -1,4 +1,5 @@
 export * from './connectivity';
+export * from './contact';
 export * from './credential';
 export * from './entity';
 export * from './history';

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

@@ -10,6 +10,8 @@ import type { ScrollViewScreenProps } from './scroll-view-screen';
 import ScrollViewScreen from './scroll-view-screen';
 import type { SectionListScreenProps } from './section-list-screen';
 import SectionListScreen from './section-list-screen';
+import type { TrustInfoDetailsScreenLabels, TrustInfoDetailsScreenProps } from './trust-info-details-screen';
+import TrustInfoDetailsScreen from './trust-info-details-screen';
 
 export { BackupScreen, BackupScreenMode, BackupScreenProps };
 export { ImagePreviewScreen, ImagePreviewScreenProps };
@@ -17,3 +19,4 @@ export { NerdModeScreen, NerdModeScreenProps, NerdModeSection };
 export { QRCodeScannerScreen, QRCodeScannerScreenProps };
 export { ScrollViewScreen, ScrollViewScreenProps };
 export { SectionListScreen, SectionListScreenProps };
+export { TrustInfoDetailsScreen, TrustInfoDetailsScreenLabels, TrustInfoDetailsScreenProps };

package/src/ui-components/screens/nerd-mode-screen.tsx

@@ -1,9 +1,10 @@
-import { IdentifierListItem } from '@procivis/react-native-one-core';
-import React, { FunctionComponent, useState } from 'react';
+import { IdentifierListItem, TrustInformationDetail } from '@procivis/react-native-one-core';
+import React, { FunctionComponent, useMemo, useState } from 'react';
 import { SectionList, StyleSheet, View } from 'react-native';
 import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { TrustInfo, TrustInfoLabels } from '../../components';
 import EntityDetailsWithButtons, { ContextRole } from '../../components/entity/entity-details-with-buttons';
 import ContrastingStatusBar from '../../utils/contrasting-status-bar';
 import { concatTestID } from '../../utils/testID';
@@ -37,8 +38,11 @@ interface SectionEntityCluster {
   identifier?: IdentifierListItem;
   subline?: string;
   entityLabels: EntityLabels;
+  legacyTrustManagementEnabled: boolean;
   role: ContextRole;
   testID?: string;
+  trustInfoLabels: TrustInfoLabels;
+  trustInformation?: TrustInformationDetail;
 }
 
 type SectionAttribute = Omit<NerdModeItemProps, 'labels' | 'onCopyToClipboard'>;
@@ -55,6 +59,7 @@ export type NerdModeScreenProps = {
   labels: AttributesLabels;
   onClose: () => void;
   onCopyToClipboard: (value: string) => void;
+  onOpenTrustInfoDetails?: (trustInformation: TrustInformationDetail) => void;
   sections: NerdModeSection[];
   testID: string;
   title: string;
@@ -76,6 +81,7 @@ const NerdModeScreen: FunctionComponent<NerdModeScreenProps> = ({
   labels,
   onClose,
   onCopyToClipboard,
+  onOpenTrustInfoDetails,
   entityCluster,
   testID,
   title,
@@ -105,6 +111,58 @@ const NerdModeScreen: FunctionComponent<NerdModeScreenProps> = ({
     };
   }, {} as Record<string, string>);
 
+  const listHeader = useMemo(() => {
+    if (!entityCluster) {
+      return null;
+    }
+    if (entityCluster.legacyTrustManagementEnabled) {
+      return (
+        <EntityDetailsWithButtons
+          {...entityCluster}
+          entityType={EntityType.ProofEntity}
+          entityLabels={entityCluster.entityLabels}
+          attributesLabels={labels}
+          style={[
+            styles.entityCluster,
+            {
+              backgroundColor: colorScheme.nerdView.background,
+            },
+          ]}
+          onCopyToClipboard={onCopyToClipboard}
+          testID={entityCluster.testID ?? concatTestID(testID, 'entityCluster')}
+          textColor={colorScheme.white}
+        />
+      );
+    }
+    return (
+      <TrustInfo
+        labels={entityCluster.trustInfoLabels}
+        onPress={
+          onOpenTrustInfoDetails && entityCluster.trustInformation
+            ? () => onOpenTrustInfoDetails(entityCluster.trustInformation!)
+            : undefined
+        }
+        style={[
+          styles.entityCluster,
+          {
+            backgroundColor: colorScheme.nerdView.background,
+          },
+        ]}
+        testID={entityCluster.testID ?? concatTestID(testID, 'trustInfo')}
+        textColor={colorScheme.white}
+        trustInformation={entityCluster.trustInformation?.eudiEcosystem}
+      />
+    );
+  }, [
+    entityCluster,
+    colorScheme.nerdView.background,
+    colorScheme.white,
+    labels,
+    onCopyToClipboard,
+    onOpenTrustInfoDetails,
+    testID,
+  ]);
+
   return (
     <>
       <ContrastingStatusBar backgroundColor={colorScheme.nerdView.background} />
@@ -122,29 +180,11 @@ const NerdModeScreen: FunctionComponent<NerdModeScreenProps> = ({
         titleColor={colorScheme.white}
       />
       <AnimatedSectionList
-        ListHeaderComponent={
-          entityCluster ? (
-            <EntityDetailsWithButtons
-              {...entityCluster}
-              entityType={EntityType.ProofEntity}
-              entityLabels={entityCluster.entityLabels}
-              attributesLabels={labels}
-              style={[
-                styles.entityCluster,
-                {
-                  backgroundColor: colorScheme.nerdView.background,
-                },
-              ]}
-              onCopyToClipboard={onCopyToClipboard}
-              testID={entityCluster.testID ?? concatTestID(testID, 'entityCluster')}
-              textColor={colorScheme.white}
-            />
-          ) : null
-        }
+        ListHeaderComponent={listHeader}
         onScroll={onScroll}
         renderItem={({ item, section, index }) => {
           if (isSectionEntityCluster(item)) {
-            return (
+            return item.legacyTrustManagementEnabled ? (
               <EntityDetailsWithButtons
                 {...item}
                 entityType={EntityType.CredentialEntity}
@@ -160,6 +200,24 @@ const NerdModeScreen: FunctionComponent<NerdModeScreenProps> = ({
                 testID={item.testID ?? concatTestID(testID, 'sectionEntityCluster', index.toString())}
                 textColor={colorScheme.white}
               />
+            ) : (
+              <TrustInfo
+                labels={item.trustInfoLabels}
+                onPress={
+                  onOpenTrustInfoDetails && item.trustInformation
+                    ? () => onOpenTrustInfoDetails(item.trustInformation!)
+                    : undefined
+                }
+                style={[
+                  styles.entityCluster,
+                  {
+                    backgroundColor: colorScheme.nerdView.background,
+                  },
+                ]}
+                testID={item.testID ?? concatTestID(testID, 'trustInfo')}
+                textColor={colorScheme.white}
+                trustInformation={item.trustInformation?.eudiEcosystem}
+              />
             );
           } else {
             return (