Feb 28th Release - Inji Changes

components/VcDetails.tsx

@@ -268,58 +268,62 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
         />
       ))}
 
-      {props.isBindingPending ? (
-        <Column style={Theme.Styles.openCardBgContainer}>
-          <Row margin={'0 0 5 0'}>
-            <Icon
-              name="shield-alert"
-              color={Theme.Colors.Icon}
-              size={30}
-              type="material-community"
-            />
-          </Row>
+      {props.activeTab !== 1 ? (
+        props.isBindingPending ? (
+          <Column style={Theme.Styles.openCardBgContainer}>
+            <Row margin={'0 0 5 0'}>
+              <Icon
+                name="shield-alert"
+                color={Theme.Colors.Icon}
+                size={30}
+                type="material-community"
+              />
+            </Row>
 
-          <Text
-            style={{ flex: 1 }}
-            weight="semibold"
-            size="small"
-            margin={'0 0 5 0'}
-            color={Theme.Colors.Details}>
-            {t('offlineAuthDisabledHeader')}
-          </Text>
-          <Text
-            style={{ flex: 1 }}
-            weight="regular"
-            size="small"
-            margin={'0 0 5 0'}
-            color={Theme.Colors.Details}>
-            {t('offlineAuthDisabledMessage')}
-          </Text>
+            <Text
+              style={{ flex: 1 }}
+              weight="semibold"
+              size="small"
+              margin={'0 0 5 0'}
+              color={Theme.Colors.Details}>
+              {t('offlineAuthDisabledHeader')}
+            </Text>
+            <Text
+              style={{ flex: 1 }}
+              weight="regular"
+              size="small"
+              margin={'0 0 5 0'}
+              color={Theme.Colors.Details}>
+              {t('offlineAuthDisabledMessage')}
+            </Text>
 
-          <Button
-            title={t('enableVerification')}
-            onPress={props.onBinding}
-            type="radius"
-          />
-        </Column>
-      ) : (
-        <Column style={Theme.Styles.openCardBgContainer}>
-          <Row crossAlign="center">
-            <Icon
-              name="verified-user"
-              color={Theme.Colors.VerifiedIcon}
-              size={28}
-              containerStyle={{ marginStart: 4, bottom: 1 }}
+            <Button
+              title={t('enableVerification')}
+              onPress={props.onBinding}
+              type="radius"
             />
-            <Text
-              numLines={1}
-              color={Theme.Colors.Details}
-              weight="bold"
-              size="smaller"
-              margin="10 10 10 10"
-              children={t('profileAuthenticated')}></Text>
-          </Row>
-        </Column>
+          </Column>
+        ) : (
+          <Column style={Theme.Styles.openCardBgContainer}>
+            <Row crossAlign="center">
+              <Icon
+                name="verified-user"
+                color={Theme.Colors.VerifiedIcon}
+                size={28}
+                containerStyle={{ marginStart: 4, bottom: 1 }}
+              />
+              <Text
+                numLines={1}
+                color={Theme.Colors.Details}
+                weight="bold"
+                size="smaller"
+                margin="10 10 10 10"
+                children={t('profileAuthenticated')}></Text>
+            </Row>
+          </Column>
+        )
+      ) : (
+        <></>
       )}
     </Column>
   );
@@ -329,6 +333,7 @@ interface VcDetailsProps {
   vc: VC;
   isBindingPending: boolean;
   onBinding?: () => void;
+  activeTab?: Number;
 }
 
 function getFullAddress(credential: CredentialSubject) {

components/VcItem.tsx

@@ -237,67 +237,69 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
         </Row>
         <VcItemTags tag={tag} />
       </ImageBackground>
-      <Row>
-        {emptyWalletBindingId ? (
-          <Row
-            width={Dimensions.get('screen').width * 0.8}
-            align="space-between"
-            crossAlign="center">
-            <Row crossAlign="center" style={{ flex: 1 }}>
-              {verifiableCredential && <WalletUnverified />}
-              <Text
-                color={Theme.Colors.Details}
-                weight="semibold"
-                size="small"
-                margin="10 33 10 10"
-                style={
-                  !verifiableCredential
-                    ? Theme.Styles.loadingTitle
-                    : Theme.Styles.subtitle
-                }
-                children={t('offlineAuthDisabledHeader')}></Text>
-            </Row>
-
-            <Pressable>
-              <Icon
-                name="dots-three-horizontal"
-                type="entypo"
-                color={Theme.Colors.GrayIcon}
-              />
-            </Pressable>
-          </Row>
-        ) : (
-          <Row
-            width={Dimensions.get('screen').width * 0.8}
-            align="space-between"
-            crossAlign="center">
-            <Row crossAlign="center" style={{ flex: 1 }}>
-              <WalletVerified />
-              <Text
-                color={Theme.Colors.Details}
-                weight="semibold"
-                size="smaller"
-                margin="10 10 10 10"
-                style={
-                  !verifiableCredential
-                    ? Theme.Styles.loadingTitle
-                    : Theme.Styles.subtitle
-                }
-                children={t('profileAuthenticated')}></Text>
-            </Row>
+      {props.activeTab !== 'receivedVcsTab' && (
+        <Row>
+          {emptyWalletBindingId ? (
+            <Row
+              width={Dimensions.get('screen').width * 0.8}
+              align="space-between"
+              crossAlign="center">
+              <Row crossAlign="center" style={{ flex: 1 }}>
+                {verifiableCredential && <WalletUnverified />}
+                <Text
+                  color={Theme.Colors.Details}
+                  weight="semibold"
+                  size="small"
+                  margin="10 33 10 10"
+                  style={
+                    !verifiableCredential
+                      ? Theme.Styles.loadingTitle
+                      : Theme.Styles.subtitle
+                  }
+                  children={t('offlineAuthDisabledHeader')}></Text>
+              </Row>
 
-            {props.showOnlyBindedVc ? null : (
               <Pressable>
                 <Icon
                   name="dots-three-horizontal"
                   type="entypo"
                   color={Theme.Colors.GrayIcon}
                 />
               </Pressable>
-            )}
-          </Row>
-        )}
-      </Row>
+            </Row>
+          ) : (
+            <Row
+              width={Dimensions.get('screen').width * 0.8}
+              align="space-between"
+              crossAlign="center">
+              <Row crossAlign="center" style={{ flex: 1 }}>
+                <WalletVerified />
+                <Text
+                  color={Theme.Colors.Details}
+                  weight="semibold"
+                  size="smaller"
+                  margin="10 10 10 10"
+                  style={
+                    !verifiableCredential
+                      ? Theme.Styles.loadingTitle
+                      : Theme.Styles.subtitle
+                  }
+                  children={t('profileAuthenticated')}></Text>
+              </Row>
+
+              {props.showOnlyBindedVc ? null : (
+                <Pressable>
+                  <Icon
+                    name="dots-three-horizontal"
+                    type="entypo"
+                    color={Theme.Colors.GrayIcon}
+                  />
+                </Pressable>
+              )}
+            </Row>
+          )}
+        </Row>
+      )}
     </Pressable>
   );
 };
@@ -310,6 +312,7 @@ interface VcItemProps {
   showOnlyBindedVc?: boolean;
   onPress?: (vcRef?: ActorRefFrom<typeof vcItemMachine>) => void;
   onShow?: (vcRef?: ActorRefFrom<typeof vcItemMachine>) => void;
+  activeTab?: string;
 }
 
 function getLocalizedField(rawField: string | LocalizedField) {

locales/en.json

@@ -335,8 +335,8 @@
   },
   "SendVcScreen": {
     "reasonForSharing": "Reason for sharing (optional)",
-    "acceptRequest": "Accept request and choose {{vcLabel}}",
-    "acceptRequestAndVerify": "Accept request and verify",
+    "acceptRequest": "Share",
+    "acceptRequestAndVerify": "Share with Selfie",
     "reject": "Reject",
     "consentToPhotoVerification": "I give consent to have my photo taken for authentication"
   },

screens/Home/HomeScreen.tsx

@@ -56,6 +56,7 @@ export const HomeScreen: React.FC<HomeRouteProps> = (props) => {
           onRevokeDelete={() => {
             controller.REVOKE();
           }}
+          activeTab={controller.activeTab}
         />
       )}
     </React.Fragment>

screens/Home/ReceivedVcsTab.tsx

@@ -29,6 +29,7 @@ export const ReceivedVcsTab: React.FC<HomeScreenTabProps> = (props) => {
             vcKey={vcKey}
             margin="0 2 8 2"
             onPress={controller.VIEW_VC}
+            activeTab={props.service.id}
           />
         ))}
         {controller.vcKeys.length === 0 && (

screens/Home/ViewVcModal.tsx

@@ -54,6 +54,7 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = (props) => {
             vc={controller.vc}
             onBinding={controller.addtoWallet}
             isBindingPending={controller.isWalletBindingPending}
+            activeTab={props.activeTab}
           />
 
           {controller.walletBindingError !== '' && (

screens/Home/ViewVcModalController.ts

@@ -182,4 +182,5 @@ export interface ViewVcModalProps extends ModalProps {
   vcItemActor: ActorRefFrom<typeof vcItemMachine>;
   onDismiss: () => void;
   onRevokeDelete: () => void;
+  activeTab: Number;
 }

screens/Request/ReceiveVcScreen.tsx

@@ -24,7 +24,11 @@ export const ReceiveVcScreen: React.FC = () => {
           <Text weight="semibold" margin="24 24 0 24">
             {t('header', { vcLabel: controller.vcLabel.singular })}
           </Text>
-          <VcDetails vc={controller.incomingVc} isBindingPending={false} />
+          <VcDetails
+            vc={controller.incomingVc}
+            isBindingPending={false}
+            activeTab={1}
+          />
         </Column>
         <Column padding="0 24" margin="32 0 0 0">
           {controller.incomingVc.shouldVerifyPresence ? (

screens/Scan/SendVcScreen.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { CheckBox, Input } from 'react-native-elements';
 import { useTranslation } from 'react-i18next';
 
@@ -11,10 +11,32 @@ import { VerifyIdentityOverlay } from '../VerifyIdentityOverlay';
 import { VcItem } from '../../components/VcItem';
 import { SingleVcItem } from '../../components/SingleVcItem';
 import { I18nManager } from 'react-native';
+import { useInterpret } from '@xstate/react';
+import { createVcItemMachine } from '../../machines/vcItem';
+import { GlobalContext } from '../../shared/GlobalContext';
 
 export const SendVcScreen: React.FC = () => {
   const { t } = useTranslation('SendVcScreen');
+  const { appService } = useContext(GlobalContext);
   const controller = useSendVcScreen();
+  let service;
+
+  if (controller.vcKeys?.length > 0) {
+    const firstVCMachine = useRef(
+      createVcItemMachine(
+        appService.getSnapshot().context.serviceRefs,
+        controller.vcKeys[0]
+      )
+    );
+
+    service = useInterpret(firstVCMachine.current);
+  }
+
+  useEffect(() => {
+    if (service) {
+      controller.SELECT_VC_ITEM(0)(service);
+    }
+  }, [controller.vcKeys]);
 
   const reasonLabel = t('reasonForSharing');
 
@@ -70,7 +92,7 @@ export const SendVcScreen: React.FC = () => {
           margin="2 0 0 0"
           elevation={2}>
           <Button
-            title={t('acceptRequest', { vcLabel: controller.vcLabel.singular })}
+            title={t('acceptRequest')}
             margin="12 0 12 0"
             disabled={controller.selectedIndex == null}
             onPress={controller.ACCEPT_REQUEST}