Merge pull request #261 from idpass/feature/mosip-55-face-matching

Finish face-matching implementation and fix issues

Author: pmigueld

components/FaceScanner.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { Camera } from 'expo-camera';
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { Button, Centered, Column, Row, Text } from './ui';
 import { useInterpret, useSelector } from '@xstate/react';
 import { useTranslation } from 'react-i18next';
@@ -110,6 +110,12 @@ export const FaceScanner: React.FC<FaceScannerProps> = (props) => {
             />
           </Row>
         )}
+        {/* TODO: remove warning when iOS SDK is ready */}
+        {Platform.OS === 'ios' && (
+          <Text size="smaller" color={Theme.Colors.textLabel} align="center">
+            (face-matching in iOS is mocked)
+          </Text>
+        )}
       </Centered>
     </Column>
   );

components/Passcode.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dimensions, Modal as RNModal } from 'react-native';
+import { Modal as RNModal } from 'react-native';
 import { Icon } from 'react-native-elements';
 import { PasscodeVerify } from '../components/PasscodeVerify';
 import { Column, Text } from '../components/ui';

components/SingleVcItem.tsx

@@ -7,7 +7,6 @@ import {
   createVcItemMachine,
   selectVerifiableCredential,
   selectGeneratedOn,
-  selectTag,
   selectId,
   vcItemMachine,
   selectContext,
@@ -73,27 +72,26 @@ const getDetails = (arg1, arg2, verifiableCredential) => {
         </Row>
       </Column>
     );
-  } else {
-    return (
-      <Column>
-        <Text color={Theme.Colors.DetailsLabel} size="smaller">
-          {arg1}
-        </Text>
-        <Text
-          numLines={1}
-          color={Theme.Colors.Details}
-          weight="bold"
-          size="smaller"
-          style={
-            !verifiableCredential
-              ? Theme.Styles.loadingTitle
-              : Theme.Styles.subtitle
-          }>
-          {!verifiableCredential ? '' : arg2}
-        </Text>
-      </Column>
-    );
   }
+  return (
+    <Column>
+      <Text color={Theme.Colors.DetailsLabel} size="smaller">
+        {arg1}
+      </Text>
+      <Text
+        numLines={1}
+        color={Theme.Colors.Details}
+        weight="bold"
+        size="smaller"
+        style={
+          !verifiableCredential
+            ? Theme.Styles.loadingTitle
+            : Theme.Styles.subtitle
+        }>
+        {!verifiableCredential ? '' : arg2}
+      </Text>
+    </Column>
+  );
 };
 
 export const SingleVcItem: React.FC<VcItemProps> = (props) => {
@@ -111,7 +109,6 @@ export const SingleVcItem: React.FC<VcItemProps> = (props) => {
   const context = useSelector(service, selectContext);
   const verifiableCredential = useSelector(service, selectVerifiableCredential);
   const uin = useSelector(service, selectId);
-  const tag = useSelector(service, selectTag);
   const generatedOn = useSelector(service, selectGeneratedOn);
   const fullName = !verifiableCredential
     ? ''
@@ -127,7 +124,7 @@ export const SingleVcItem: React.FC<VcItemProps> = (props) => {
   ) : null;
 
   return (
-    <Column onShow={props.onShow(service)}>
+    <Column>
       <ImageBackground
         source={!verifiableCredential ? null : Theme.CloseCard}
         resizeMode="stretch"
@@ -164,7 +161,7 @@ export const SingleVcItem: React.FC<VcItemProps> = (props) => {
 
             <Column margin="0 0 0 10">
               {getDetails(t('fullName'), fullName, verifiableCredential)}
-              {getDetails(t('uin'), tag || uin, verifiableCredential)}
+              {getDetails(t('uin'), uin, verifiableCredential)}
               {getDetails(t('generatedOn'), generatedOn, verifiableCredential)}
               {getDetails(t('status'), t('valid'), verifiableCredential)}
             </Column>

components/VcItem.tsx

@@ -7,7 +7,6 @@ import {
   createVcItemMachine,
   selectVerifiableCredential,
   selectGeneratedOn,
-  selectTag,
   vcItemMachine,
   selectContext,
 } from '../machines/vcItem';
@@ -102,7 +101,6 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
   const uin = verifiableCredential?.credentialSubject.UIN;
   const vid = verifiableCredential?.credentialSubject.VID;
 
-  const tag = useSelector(service, selectTag);
   const generatedOn = useSelector(service, selectGeneratedOn);
   const fullName = !verifiableCredential
     ? ''
@@ -180,15 +178,9 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
             <Column margin="0 0 0 25" style={{ alignItems: 'flex-start' }}>
               {getDetails(t('fullName'), fullName, verifiableCredential)}
               {!verifiableCredential
-                ? getDetails(
-                    t('idtype'),
-                    tag || uin || vid,
-                    verifiableCredential
-                  )
-                : null}
-              {uin
-                ? getDetails(t('uin'), tag || uin, verifiableCredential)
+                ? getDetails(t('idtype'), uin || vid, verifiableCredential)
                 : null}
+              {uin ? getDetails(t('uin'), uin, verifiableCredential) : null}
               {vid ? getDetails(t('vid'), vid, verifiableCredential) : null}
               {getDetails(t('generatedOn'), generatedOn, verifiableCredential)}
               {getDetails(t('status'), t('valid'), verifiableCredential)}

components/VidItem.tsx

@@ -8,14 +8,14 @@ import {
   createVcItemMachine,
   selectVerifiableCredential,
   selectGeneratedOn,
-  selectTag,
   selectId,
   vcItemMachine,
 } from '../machines/vcItem';
 import { Column, Row, Text } from './ui';
 import { Theme } from './ui/styleUtils';
 import { RotatingIcon } from './RotatingIcon';
 import { GlobalContext } from '../shared/GlobalContext';
+import { LocalizedField } from '../types/vc';
 
 export const VidItem: React.FC<VcItemProps> = (props) => {
   const { appService } = useContext(GlobalContext);
@@ -27,7 +27,6 @@ export const VidItem: React.FC<VcItemProps> = (props) => {
   );
   const service = useInterpret(machine.current);
   const uin = useSelector(service, selectId);
-  const tag = useSelector(service, selectTag);
   const verifiableCredential = useSelector(service, selectVerifiableCredential);
   const generatedOn = useSelector(service, selectGeneratedOn);
 
@@ -70,7 +69,7 @@ export const VidItem: React.FC<VcItemProps> = (props) => {
                 : Theme.VidItemStyles.title
             }
             margin="0 0 6 0">
-            {!verifiableCredential ? '' : tag || uin}
+            {!verifiableCredential ? '' : uin}
           </Text>
           <Text
             size="smaller"

components/ui/.Modal.tsx.swp

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dimensions, Modal as RNModal, View } from 'react-native';
+import { Modal as RNModal, View } from 'react-native';
 import { Icon } from 'react-native-elements';
 import { Column, Row, Text } from '.';
 import { ElevationLevel, Theme } from './styleUtils';