From 8ce62c57f434dc53e5bce1291e3f81d7d345625e Mon Sep 17 00:00:00 2001
From: srikanth716 <srikanthsri7447@gmail.com>
Date: Tue, 20 Dec 2022 09:31:07 +0530
Subject: [PATCH] clean up UI

---
 components/Message.tsx                        |  2 +-
 components/VcDetails.tsx                      | 79 +++++++++++++------
 components/VcItem.tsx                         | 62 +++++++++------
 components/ui/Button.tsx                      |  2 +-
 components/ui/themes/DefaultTheme.ts          | 22 ++++++
 components/ui/themes/PurpleTheme.ts           | 22 ++++++
 locales/en.json                               |  7 +-
 machines/vcItem.ts                            | 17 +++-
 machines/vcItem.typegen.ts                    |  3 +-
 screens/Home/MyVcs/BindVcStatus.tsx           | 58 ++++++--------
 .../Home/MyVcs/BindingVcWarningOverlay.tsx    | 58 ++++++++++++++
 screens/Home/ViewVcModal.tsx                  |  9 ++-
 screens/Home/ViewVcModalController.ts         |  3 +
 13 files changed, 252 insertions(+), 92 deletions(-)
 create mode 100644 screens/Home/MyVcs/BindingVcWarningOverlay.tsx

diff --git a/components/Message.tsx b/components/Message.tsx
index 0cb56b6b..9bb6ce86 100644
--- a/components/Message.tsx
+++ b/components/Message.tsx
@@ -49,7 +49,7 @@ export const Message: React.FC<MessageProps> = (props) => {
 const Progress: React.FC<Pick<MessageProps, 'progress'>> = (props) => {
   return typeof props.progress === 'boolean' ? (
     props.progress && (
-      <LinearProgress variant="indeterminate" color={Colors.Orange} />
+      <LinearProgress variant="indeterminate" color={Theme.Colors.Icon} />
     )
   ) : (
     <LinearProgress variant="determinate" value={props.progress} />
diff --git a/components/VcDetails.tsx b/components/VcDetails.tsx
index 92fb9f7a..8dab0a4d 100644
--- a/components/VcDetails.tsx
+++ b/components/VcDetails.tsx
@@ -255,11 +255,13 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
         </Row>
         <VcItemTags tag={props.vc?.tag} />
       </ImageBackground>
+
       {props.vc?.reason?.length > 0 && (
         <Text margin="24 24 16 24" weight="semibold">
           {t('reasonForSharing')}
         </Text>
       )}
+
       {props.vc?.reason?.map((reason, index) => (
         <TextItem
           key={index}
@@ -272,33 +274,58 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
         />
       ))}
 
-      {props.isBindingPending && (
-        <ImageBackground
-          borderRadius={10}
-          style={Theme.Styles.openCardBgContainer}
-          source={Theme.OpenCard}>
-          <Column>
-            <Icon name="lightbulb" color={'#e8a94f'} size={40} />
-            <Text
-              style={{ flex: 1 }}
-              weight="semibold"
-              size="small"
-              color={Theme.Colors.Details}
-              align="left">
-              {t('offlineAuthDisabledHeader')}
-            </Text>
-            <Text
-              style={{ flex: 1 }}
-              weight="regular"
-              size="small"
-              color={Theme.Colors.Details}
-              align="left">
-              {t('offlineAuthDisabledMessage')}
-            </Text>
+      {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>
 
-            <Button title={t('enableVerification')} onPress={props.onBinding} />
-          </Column>
-        </ImageBackground>
+          <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 }}
+            />
+            <Text
+              numLines={1}
+              color={Theme.Colors.Details}
+              weight="bold"
+              size="smaller"
+              margin="10 10 10 10"
+              children={t('profileAuthenticated')}></Text>
+          </Row>
+        </Column>
       )}
     </Column>
   );
diff --git a/components/VcItem.tsx b/components/VcItem.tsx
index 823dd42a..857e65f1 100644
--- a/components/VcItem.tsx
+++ b/components/VcItem.tsx
@@ -1,12 +1,6 @@
 import React, { useContext, useRef } from 'react';
 import { useInterpret, useSelector } from '@xstate/react';
-import {
-  Pressable,
-  Image,
-  ImageBackground,
-  TouchableHighlight,
-  View,
-} from 'react-native';
+import { Pressable, Image, ImageBackground, Dimensions } from 'react-native';
 import { CheckBox, Icon } from 'react-native-elements';
 import { ActorRefFrom } from 'xstate';
 import {
@@ -16,7 +10,6 @@ import {
   vcItemMachine,
   selectContext,
   selectTag,
-  selectWalletBindingId,
   selectEmptyWalletBindingId,
 } from '../machines/vcItem';
 import { Column, Row, Text } from './ui';
@@ -97,7 +90,7 @@ const WalletVerified: React.FC = () => {
   return (
     <Icon
       name="verified-user"
-      color={'green'}
+      color={Theme.Colors.VerifiedIcon}
       size={28}
       containerStyle={{ marginStart: 4, bottom: 1 }}
     />
@@ -107,9 +100,10 @@ const WalletVerified: React.FC = () => {
 const WalletUnverified: React.FC = () => {
   return (
     <Icon
-      name="lightbulb"
-      color={'#e8a94f'}
+      name="shield-alert"
+      color={Theme.Colors.Icon}
       size={28}
+      type="material-community"
       containerStyle={{ marginStart: 4, bottom: 1 }}
     />
   );
@@ -228,15 +222,21 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
             <RotatingIcon name="sync" color={Theme.Colors.rotatingIcon} />
           )}
         </Row>
-        <Row>
-          {emptyWalletBindingId ? (
-            <Row>
-              <WalletUnverified />
+        <VcItemTags tag={tag} />
+      </ImageBackground>
+      <Row padding={'10 0 0 0'}>
+        {emptyWalletBindingId ? (
+          <Row
+            width={Dimensions.get('screen').width * 0.8}
+            align="space-between"
+            crossAlign="center">
+            <Row crossAlign="center">
+              {verifiableCredential && <WalletUnverified />}
               <Text
                 numLines={1}
                 color={Theme.Colors.Details}
                 weight="bold"
-                size="smaller"
+                size="small"
                 margin="10 10 10 10"
                 style={
                   !verifiableCredential
@@ -245,8 +245,20 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
                 }
                 children={t('offlineAuthDisabledHeader')}></Text>
             </Row>
-          ) : (
-            <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">
               <WalletVerified />
               <Text
                 numLines={1}
@@ -261,10 +273,16 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
                 }
                 children={t('profileAuthenticated')}></Text>
             </Row>
-          )}
-        </Row>
-        <VcItemTags tag={tag} />
-      </ImageBackground>
+            <Pressable>
+              <Icon
+                name="dots-three-horizontal"
+                type="entypo"
+                color={Theme.Colors.GrayIcon}
+              />
+            </Pressable>
+          </Row>
+        )}
+      </Row>
     </Pressable>
   );
 };
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index ee4693c4..c59ed224 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -41,7 +41,7 @@ export const Button: React.FC<ButtonProps> = (props) => {
           weight="semibold"
           align="center"
           color={
-            type === 'solid' || type === 'addId'
+            type === 'solid' || type === 'addId' || type === 'radius'
               ? Theme.Colors.whiteText
               : Theme.Colors.AddIdBtnTxt
           }>
diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
index 99558ba3..f0e71578 100644
--- a/components/ui/themes/DefaultTheme.ts
+++ b/components/ui/themes/DefaultTheme.ts
@@ -13,6 +13,7 @@ const Colors = {
   Red: '#EB5757',
   Green: '#219653',
   Transparent: 'transparent',
+  Warning: '#f0ad4e',
 };
 
 export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5;
@@ -29,6 +30,7 @@ export const DefaultTheme = {
     noUinText: Colors.Orange,
     IconBg: Colors.Orange,
     Icon: Colors.Orange,
+    GrayIcon: Colors.Grey,
     borderBottomColor: Colors.Grey6,
     whiteBackgroundColor: Colors.White,
     lightGreyBackgroundColor: Colors.LightGrey,
@@ -54,6 +56,7 @@ export const DefaultTheme = {
     checkCircleIcon: Colors.White,
     OnboardingCircleIcon: Colors.White,
     OnboardingCloseIcon: Colors.White,
+    WarningIcon: Colors.Warning,
   },
   Styles: StyleSheet.create({
     title: {
@@ -131,6 +134,8 @@ export const DefaultTheme = {
     backgroundImageContainer: {
       flex: 1,
       padding: 10,
+      borderBottomColor: Colors.Grey,
+      borderBottomWidth: 1,
     },
     successTag: {
       backgroundColor: Colors.Green,
@@ -324,6 +329,11 @@ export const DefaultTheme = {
     clearAddIdBtnBg: {
       backgroundColor: Colors.Transparent,
     },
+    radius: {
+      flex: 1,
+      borderRadius: 10,
+      backgroundColor: Colors.Orange,
+    },
   }),
   OIDCAuthStyles: StyleSheet.create({
     viewContainer: {
@@ -407,6 +417,18 @@ export const DefaultTheme = {
       borderTopRightRadius: 0,
     },
   }),
+  BindingVcWarningOverlay: StyleSheet.create({
+    overlay: {
+      elevation: 5,
+      backgroundColor: Colors.White,
+      padding: 0,
+      borderRadius: 15,
+    },
+    button: {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+    },
+  }),
   RevokeStyles: StyleSheet.create({
     buttonContainer: {
       position: 'absolute',
diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts
index 47e76021..dd9649a5 100644
--- a/components/ui/themes/PurpleTheme.ts
+++ b/components/ui/themes/PurpleTheme.ts
@@ -14,6 +14,7 @@ const Colors = {
   Green: '#219653',
   Purple: '#70308C',
   Transparent: 'transparent',
+  Warning: '#f0ad4e',
 };
 
 export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5;
@@ -29,6 +30,7 @@ export const PurpleTheme = {
     noUinText: Colors.Purple,
     IconBg: Colors.Purple,
     Icon: Colors.Purple,
+    GrayIcon: Colors.Grey,
     Loading: Colors.Purple,
     borderBottomColor: Colors.Grey6,
     whiteBackgroundColor: Colors.White,
@@ -55,6 +57,7 @@ export const PurpleTheme = {
     checkCircleIcon: Colors.White,
     OnboardingCircleIcon: Colors.White,
     OnboardingCloseIcon: Colors.White,
+    WarningIcon: Colors.Warning,
   },
   Styles: StyleSheet.create({
     title: {
@@ -128,6 +131,8 @@ export const PurpleTheme = {
     backgroundImageContainer: {
       flex: 1,
       padding: 10,
+      borderBottomColor: Colors.Grey,
+      borderBottomWidth: 1,
     },
     successTag: {
       backgroundColor: '#219653',
@@ -362,6 +367,11 @@ export const PurpleTheme = {
     clearAddIdBtnBg: {
       backgroundColor: Colors.Transparent,
     },
+    radius: {
+      flex: 1,
+      borderRadius: 10,
+      backgroundColor: Colors.Orange,
+    },
   }),
   OnboardingOverlayStyles: StyleSheet.create({
     overlay: {
@@ -406,6 +416,18 @@ export const PurpleTheme = {
       zIndex: 1,
     },
   }),
+  BindingVcWarningOverlay: StyleSheet.create({
+    overlay: {
+      elevation: 5,
+      backgroundColor: Colors.White,
+      padding: 0,
+      borderRadius: 15,
+    },
+    button: {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+    },
+  }),
   OpenCard: require('../../../purpleAassets/bg_cart_one.png'),
   CloseCard: require('../../../purpleAassets/cart_unsel.png'),
   ProfileIcon: require('../../../purpleAassets/profile_icon_unsel.png'),
diff --git a/locales/en.json b/locales/en.json
index 8e32ef1b..d2c85c1c 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -48,11 +48,14 @@
     "uin": "UIN",
     "enableVerification": "Enable Verification",
     "profileAuthenticated": "Verification enabled",
-    "offlineAuthDisabledHeader": "Verification not enabled!",
+    "offlineAuthDisabledHeader": "Verification not enabled",
     "offlineAuthDisabledMessage": "Click here to enable this credentials to be used for verification.",
     "vid": "VID",
     "verificationEnabledSuccess": "Verification has been enabled for this credential.",
-    "goback": "GO BACK"
+    "goback": "GO BACK",
+    "BindingWarning":"If you have enabled verification for this credential on another wallet, it will get overridden. Do you want to proceed?",
+    "yes_confirm":"Yes, I Confirm",
+    "no":"No"
   },
   "AuthScreen": {
     "header": "Would you like to use biometrics to unlock the application?",
diff --git a/machines/vcItem.ts b/machines/vcItem.ts
index 51cd8759..8e456646 100644
--- a/machines/vcItem.ts
+++ b/machines/vcItem.ts
@@ -62,6 +62,7 @@ const model = createModel(
       ADD_WALLET_BINDING_ID: () => ({}),
       BINDING_DONE: () => ({}),
       CANCEL: () => ({}),
+      CONFIRM: () => ({}),
     },
   }
 );
@@ -176,7 +177,7 @@ export const vcItemMachine =
               target: 'acceptingRevokeInput',
             },
             ADD_WALLET_BINDING_ID: {
-              target: 'requestingBindingOtp',
+              target: 'showBindingWarning',
             },
           },
         },
@@ -361,6 +362,16 @@ export const vcItemMachine =
             },
           },
         },
+        showBindingWarning: {
+          on: {
+            CONFIRM: {
+              target: 'requestingBindingOtp',
+            },
+            CANCEL: {
+              target: 'idle',
+            },
+          },
+        },
         requestingBindingOtp: {
           invoke: {
             src: 'requestBindingOtp',
@@ -916,3 +927,7 @@ export function isWalletBindingInProgress(state: State) {
     ? true
     : false;
 }
+
+export function isShowingBindingWarning(state: State) {
+  return state.matches('showBindingWarning');
+}
diff --git a/machines/vcItem.typegen.ts b/machines/vcItem.typegen.ts
index 4b7c51cc..1ee6ef8e 100644
--- a/machines/vcItem.typegen.ts
+++ b/machines/vcItem.typegen.ts
@@ -187,7 +187,7 @@ export interface Typegen0 {
     checkStatus: 'STORE_RESPONSE';
     downloadCredential: 'DOWNLOAD_READY';
     generateKeyPair: 'INPUT_OTP';
-    requestBindingOtp: 'ADD_WALLET_BINDING_ID';
+    requestBindingOtp: 'CONFIRM';
     requestLock: 'INPUT_OTP';
     requestOtp: 'LOCK_VC';
     requestRevoke: 'INPUT_OTP';
@@ -219,6 +219,7 @@ export interface Typegen0 {
     | 'requestingRevoke'
     | 'revokingVc'
     | 'showBindingStatus'
+    | 'showBindingWarning'
     | 'showingWalletBindingError'
     | 'storingTag'
     | 'updatingPrivateKey'
diff --git a/screens/Home/MyVcs/BindVcStatus.tsx b/screens/Home/MyVcs/BindVcStatus.tsx
index a89ffcb0..a7e37933 100644
--- a/screens/Home/MyVcs/BindVcStatus.tsx
+++ b/screens/Home/MyVcs/BindVcStatus.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { View } from 'react-native';
-import { Button, Icon } from 'react-native-elements';
-import { Column, Text } from '../../../components/ui';
+import { Icon } from 'react-native-elements';
+import { Column, Text, Button } from '../../../components/ui';
 import { Theme } from '../../../components/ui/styleUtils';
 import { useBindVcStatus, BindVcProps } from './BindVcController';
 
@@ -12,45 +11,32 @@ export const BindStatus: React.FC<BindVcProps> = (props) => {
   var message: string = controller.walletBindingError;
 
   return (
-    <View style={Theme.OtpVerificationStyles.viewContainer}>
-      <Column
-        fill
-        padding="32"
-        backgroundColor={Theme.Colors.whiteBackgroundColor}>
-        <View style={Theme.OtpVerificationStyles.close}>
-          <Icon name="close" onPress={() => props.onDismiss()} />
-        </View>
-        <Column fill align="space-between">
-          {!controller.walletBindingError && <WalletVerified />}
+    <Column
+      style={Theme.OtpVerificationStyles.viewContainer}
+      align="space-around">
+      <Column>
+        {!controller.walletBindingError && <WalletVerified />}
 
-          {controller.walletBindingError ? (
-            <Text
-              align="center"
-              color={Theme.Colors.errorMessage}
-              margin="16 0 0 0">
-              {{ message }}
-            </Text>
-          ) : (
-            <Text align="center" margin="16 0 0 0">
-              {t('verificationEnabledSuccess')}
-            </Text>
-          )}
-
-          <Button title={t('goback')} onPress={props.onDone} />
-        </Column>
-        <Column fill></Column>
+        {controller.walletBindingError ? (
+          <Text
+            align="center"
+            color={Theme.Colors.errorMessage}
+            margin="16 0 0 0">
+            {{ message }}
+          </Text>
+        ) : (
+          <Text align="center" margin="16 0 0 0">
+            {t('verificationEnabledSuccess')}
+          </Text>
+        )}
       </Column>
-    </View>
+      <Button title={t('Okay')} onPress={props.onDone} type="radius" />
+    </Column>
   );
 };
 
 const WalletVerified: React.FC = () => {
   return (
-    <Icon
-      name="verified-user"
-      color={'green'}
-      size={40}
-      containerStyle={{ marginStart: 4, bottom: 1 }}
-    />
+    <Icon name="verified-user" color={Theme.Colors.VerifiedIcon} size={50} />
   );
 };
diff --git a/screens/Home/MyVcs/BindingVcWarningOverlay.tsx b/screens/Home/MyVcs/BindingVcWarningOverlay.tsx
new file mode 100644
index 00000000..edbbe730
--- /dev/null
+++ b/screens/Home/MyVcs/BindingVcWarningOverlay.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dimensions } from 'react-native';
+import { Icon, Overlay } from 'react-native-elements';
+import { Button, Column, Row, Text } from '../../../components/ui';
+import { Theme } from '../../../components/ui/styleUtils';
+
+export const BindingVcWarningOverlay: React.FC<QrLoginWarningProps> = (
+  props
+) => {
+  const { t } = useTranslation('VcDetails');
+
+  return (
+    <Overlay
+      isVisible={props.isVisible}
+      overlayStyle={Theme.BindingVcWarningOverlay.overlay}>
+      <Column
+        align="space-between"
+        padding={'10'}
+        width={Dimensions.get('screen').width * 0.8}
+        height={Dimensions.get('screen').height * 0.5}>
+        <Row align="center">
+          <Icon
+            name={'warning'}
+            size={50}
+            color={Theme.Colors.WarningIcon}
+            type="ionicon"
+          />
+        </Row>
+        <Column>
+          <Text align="center" size="regular">
+            {t('BindingWarning')}
+          </Text>
+        </Column>
+        <Column padding={'20'}>
+          <Button
+            margin={'10 0 0 0'}
+            type="radius"
+            title={t('yes_confirm')}
+            onPress={props.onConfirm}
+          />
+          <Button
+            margin={'10 0 0 0'}
+            type="clear"
+            title={t('no')}
+            onPress={props.onCancel}
+          />
+        </Column>
+      </Column>
+    </Overlay>
+  );
+};
+
+interface QrLoginWarningProps {
+  isVisible: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
diff --git a/screens/Home/ViewVcModal.tsx b/screens/Home/ViewVcModal.tsx
index 3c189346..eb151960 100644
--- a/screens/Home/ViewVcModal.tsx
+++ b/screens/Home/ViewVcModal.tsx
@@ -10,10 +10,9 @@ import { OIDcAuthenticationModal } from '../../components/OIDcAuth';
 import { useViewVcModal, ViewVcModalProps } from './ViewVcModalController';
 import { useTranslation } from 'react-i18next';
 import { VcDetails } from '../../components/VcDetails';
-
 import { OtpVerification } from './MyVcs/OtpVerification';
 import { BindStatus } from './MyVcs/BindVcStatus';
-import { Overlay } from 'react-native-elements';
+import { BindingVcWarningOverlay } from './MyVcs/BindingVcWarningOverlay';
 
 export const ViewVcModal: React.FC<ViewVcModalProps> = (props) => {
   const { t } = useTranslation('ViewVcModal');
@@ -115,6 +114,12 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = (props) => {
         />
       )}
 
+      <BindingVcWarningOverlay
+        isVisible={controller.isBindingWarning}
+        onConfirm={controller.CONFIRM}
+        onCancel={controller.CANCEL}
+      />
+
       <MessageOverlay
         isVisible={controller.isBindingError}
         title={controller.walletBindingError}
diff --git a/screens/Home/ViewVcModalController.ts b/screens/Home/ViewVcModalController.ts
index d37e0d9b..139b3e16 100644
--- a/screens/Home/ViewVcModalController.ts
+++ b/screens/Home/ViewVcModalController.ts
@@ -24,6 +24,7 @@ import {
   selectEmptyWalletBindingId,
   isWalletBindingInProgress,
   selectShowWalletBindingError,
+  isShowingBindingWarning,
 } from '../../machines/vcItem';
 import { selectPasscode } from '../../machines/auth';
 import { biometricsMachine, selectIsSuccess } from '../../machines/biometrics';
@@ -144,6 +145,7 @@ export function useViewVcModal({
       isWalletBindingInProgress
     ),
     isBindingError: useSelector(vcItemActor, selectShowWalletBindingError),
+    isBindingWarning: useSelector(vcItemActor, isShowingBindingWarning),
 
     CONFIRM_REVOKE_VC: () => {
       setRevoking(true);
@@ -176,6 +178,7 @@ export function useViewVcModal({
     LOCK_VC: () => vcItemActor.send(VcItemEvents.LOCK_VC()),
     INPUT_OTP: (otp: string) => vcItemActor.send(VcItemEvents.INPUT_OTP(otp)),
     CANCEL: () => vcItemActor.send(VcItemEvents.CANCEL()),
+    CONFIRM: () => vcItemActor.send(VcItemEvents.CONFIRM()),
   };
 }