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

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 (