Inji 364 UI update for success messages (#863)

* feat(INJI-364): add new ui for successful activation of VC

* feat(INJI-364): update VC receive UI

* feat(INJI-364): extract banner notification component

* feat(INJI-364): re suse banner notification component

* feat(INJI-364): add successfully share popup and translations

* feat(INJI-364): use proper state for showing  the success modal

* fix(INJI-364): show activate popup in respective screens only

* refactor(INJI-364): rename props

* refactor(INJI-364): remove logs

* fix(INJI-372): fix hindi translation

* chore(INJI-364): update package-lock.json

* refactor(INJI-364): add proper testID implementation for BannerNotification

* refactor(INJI-364): remove unused imports

* refactor(INJI-364): remove multiple state set

* refactor(INJI-364): add missing testID

* refactor(INJI-364): add missing testID

* feat(INJI-364): add activated notification to esignet VC also

* chore(INJI-364): update package-lock.json

components/BannerNotification.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {View} from 'react-native';
+import {Row, Text} from './ui';
+import {Theme} from './ui/styleUtils';
+import {Icon} from 'react-native-elements';
+import testIDProps from '../shared/commonUtil';
+
+export const BannerNotification: React.FC<BannerNotificationProps> = props => {
+  return (
+    <View {...testIDProps(props.testId)}>
+      <Row style={Theme.Styles.downloadingVcPopUp}>
+        <Text color={Theme.Colors.whiteText} weight="semibold" size="smaller">
+          {props.message}
+        </Text>
+        <Icon
+          testID="close"
+          name="close"
+          onPress={props.onClosePress}
+          color={Theme.Colors.whiteText}
+          size={19}
+        />
+      </Row>
+    </View>
+  );
+};
+
+export interface BannerNotificationProps {
+  message: string;
+  onClosePress: () => void;
+  testId: string;
+}

components/ui/Modal.tsx

@@ -68,15 +68,17 @@ export const Modal: React.FC<ModalProps> = props => {
                 )}
               </Column>
             </Row>
-            {props.headerRight || props.arrowLeft || (
+            {props.headerRight ||
-              <Icon
+              props.arrowLeft ||
-                {...testIDProps('close')}
+              (props.showClose && (
-                name="close"
+                <Icon
-                onPress={props.onDismiss}
+                  {...testIDProps('close')}
-                color={Theme.Colors.Details}
+                  name="close"
-                size={27}
+                  onPress={props.onDismiss}
-              />
+                  color={Theme.Colors.Details}
-            )}
+                  size={27}
+                />
+              ))}
           </View>
         </Row>
         {props.children}
@@ -87,12 +89,14 @@ export const Modal: React.FC<ModalProps> = props => {
 
 Modal.defaultProps = {
   modalStyle: Theme.ModalStyles.defaultModal,
+  showClose: true,
 };
 
 export interface ModalProps {
   testID?: string;
   isVisible: boolean;
   requester?: boolean;
+  showClose?: boolean;
   modalStyle?: Object;
   onDismiss?: () => void;
   headerTitle?: string;

components/ui/SquircleIconPopUpModal.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {Dimensions, Image, View} from 'react-native';
+import {Centered, Column} from './Layout';
+import {Theme} from './styleUtils';
+import {Text} from './Text';
+import testIDProps from '../../shared/commonUtil';
+
+export const SquircleIconPopUpModal: React.FC<
+  SquircleIconPopUpModalProps
+> = props => {
+  return (
+    <View
+      {...testIDProps(props.testId)}
+      style={Theme.MessageStyles.viewContainer}
+      onTouchStart={props.onBackdropPress}>
+      <Centered fill>
+        <Column
+          width={Dimensions.get('screen').width * 0.8}
+          height={Dimensions.get('screen').width * 0.8}
+          style={Theme.MessageStyles.squircleContainer}>
+          <Column>
+            {props.iconName && (
+              <Image source={props.iconName} style={{alignSelf: 'center'}} />
+            )}
+            {props.message && (
+              <Text
+                margin="25 0 0 0"
+                weight={'semibold'}
+                style={{fontSize: 17, textAlign: 'center'}}>
+                {props.message}
+              </Text>
+            )}
+          </Column>
+        </Column>
+      </Centered>
+    </View>
+  );
+};
+
+export interface SquircleIconPopUpModalProps {
+  message: string;
+  iconName: any;
+  testId: string;
+  onBackdropPress?: () => void;
+}

components/ui/themes/DefaultTheme.ts

@@ -1033,6 +1033,12 @@ export const DefaultTheme = {
       elevation: 6,
       borderRadius: 4,
     },
+    squircleContainer: {
+      backgroundColor: Colors.White,
+      padding: 24,
+      elevation: 6,
+      borderRadius: 16,
+    },
   }),
   VidItemStyles: StyleSheet.create({
     title: {

components/ui/themes/PurpleTheme.ts

@@ -1036,6 +1036,12 @@ export const PurpleTheme = {
       elevation: 6,
       borderRadius: 4,
     },
+    squircleContainer: {
+      backgroundColor: Colors.White,
+      padding: 24,
+      elevation: 6,
+      borderRadius: 16,
+    },
   }),
   VidItemStyles: StyleSheet.create({
     title: {

locales/ara.json

@@ -272,6 +272,7 @@
     "generateVcDescription": "اضغط على \"إضافة بطاقة \" أدناه لتنزيل بطاقتك",
     "downloadCard": "تحميل البطاقة",
     "downloadingYourCard": "تنزيل بطاقتك ، قد يستغرق هذا ما يصل إلى 5 دقائق",
+    "activated": "يتم تمكين بيانات الاعتماد للمصادقة عبر الإنترنت.",
     "errors": {
       "savingFailed": {
         "title": "فشل حفظ بطاقة",
@@ -325,6 +326,7 @@
     "revoking": "تحتوي محفظتك على بيانات اعتماد مع VID {{vid}}. سيؤدي إبطال هذا إلى حذفه تلقائيًا من المحفظة. هل انت متأكد انك تريد المتابعة؟",
     "requestingOtp": "جارٍ طلب OTP ...",
     "editTag": "إعادة تسمية",
+    "activated": "يتم تمكين بيانات الاعتماد للمصادقة عبر الإنترنت.",
     "redirecting": "إعادة توجيه...",
     "success": {
       "unlocked": "تم إلغاء قفل بطاقة بنجاح",
@@ -494,8 +496,8 @@
         "hint": "يرجى الانتظار حتى نشارك البطاقة المختارة."
       },
       "accepted": {
-        "title": "تم مشاركة المعرف بنجاح",
+        "title": "تمت مشاركة المعرف بنجاح",
-        "message": "تمت مشاركة بطاقة بنجاح مع المدقق",
+        "message": "تمت مشاركة هويتك بنجاح مع",
         "gotohome": "اذهب الى المنزل"
       },
       "rejected": {

locales/en.json

@@ -279,6 +279,7 @@
     "generateVcDescription": "Tap on \"Download card\" below to download your card",
     "downloadCard": "Download Card",
     "downloadingYourCard": "Downloading your card, this can take upto 5 minutes",
+    "activated": "Credentials are enabled for online authentication.",
     "errors": {
       "savingFailed": {
         "title": "Failed to save the Card",
@@ -332,6 +333,7 @@
     "revoking": "Your wallet contains a credential with VID {{vid}}. Revoking this will automatically remove the same from the wallet. Are you sure you want to proceed?",
     "requestingOtp": "Requesting OTP...",
     "editTag": "Rename",
+    "activated": "Credentials are enabled for online authentication.",
     "redirecting": "Redirecting...",
     "success": {
       "unlocked": "Card successfully unlocked",
@@ -501,8 +503,8 @@
         "timeoutHint": "Sharing is delayed, possibly due to a connection issue."
       },
       "accepted": {
-        "title": "Success!",
+        "title": "ID shared successfully",
-        "message": "Your Card has been successfully shared with Verifier",
+        "message": "Your ID has been successfully shared with",
         "gotohome": "Go to Home"
       },
       "rejected": {

locales/fil.json

@@ -272,6 +272,7 @@
     "generateVcDescription": "Upang i-download ang iyong card i-tap ang I-download card sa ibaba",
     "downloadCard": "I-download ang Card",
     "downloadingYourCard": "Ang pagda-download ng iyong card, maaari itong tumagal nang hanggang 5 minuto",
+    "activated": "Ang mga kredensyal ay pinagana para sa online na pagpapatotoo.",
     "errors": {
       "savingFailed": {
         "title": "Nabigong i-save ang Card",
@@ -325,6 +326,7 @@
     "revoking": "Ang iyong wallet ay naglalaman ng kredensyal na may VID {{vid}}. Ang pagbawi nito ay awtomatikong mag-aalis ng pareho sa wallet. Sigurado ka bang gusto mong magpatuloy?",
     "requestingOtp": "Humihiling ng OTP...",
     "editTag": "Palitan ang pangalan",
+    "activated": "Ang mga kredensyal ay pinagana para sa online na pagpapatotoo.",
     "redirecting": "Nire-redirect...",
     "success": {
       "unlocked": "Matagumpay na na-unlock ang card.",
@@ -499,7 +501,7 @@
       },
       "accepted": {
         "title": "Matagumpay na naibahagi ang ID",
-        "message": "Ang iyong card ay matagumpay na naibahagi sa verifier",
+        "message": "Ang iyong ID ay matagumpay na naibahagi sa",
         "gotohome": "Pumunta sa bahay"
       },
       "rejected": {

locales/hin.json

@@ -270,6 +270,7 @@
     "bringYourDigitalID": "अपनी डिजिटल आईडी लाओ",
     "generateVcDescription": "अपना कार्ड डाउनलोड करने के लिए नीचे डाउनलोड कार्ड टैप करें",
     "downloadingYourCard": "आपका कार्ड डाउनलोड करने में 5 मिनट तक का समय लग सकता है",
+    "activated": "ऑनलाइन प्रमाणीकरण के लिए क्रेडेंशियल सक्षम हैं।",
     "errors": {
       "savingFailed": {
         "title": "कार्ड सहेजने में विफल",
@@ -324,6 +325,7 @@
     "revoking": "आपके वॉलेट में VID {{vid}} के साथ एक क्रेडेंशियल है। इसे रद्द करने से यह अपने आप वॉलेट से हट जाएगा। क्या आप सुनिश्चित रूप से आगे बढ़ना चाहते हैं?",
     "requestingOtp": "ओटीपी का अनुरोध...",
     "editTag": "नाम बदलें",
+    "activated": "ऑनलाइन प्रमाणीकरण के लिए क्रेडेंशियल सक्षम हैं।",
     "redirecting": "पुन: निर्देशित...",
     "success": {
       "unlocked": "कार्ड सफलतापूर्वक अनलॉक किया गया",
@@ -480,7 +482,7 @@
       "inProgress": "चालू",
       "establishingConnection": "संपर्क स्थापित करना",
       "connectionInProgress": "कनेक्शन प्रगति पर है",
-      "connectingTimeout": "ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸಲು ಸ್ವಲ್ಪ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಇತರ ಸಾಧನವು ಸಂಪರ್ಕಗಳಿಗಾಗಿ ತೆರೆದಿದೆಯೇ?",
+      "connectingTimeout": "कनेक्शन स्थापित करने में कुछ समय लग रहा है. क्या अन्य डिवाइस कनेक्शन के लिए खुला है हैलो वर्ल्ड?",
       "stayOnTheScreen": "स्क्रीन पर बने रहें",
       "retry": "पुन: प्रयास करें",
       "exchangingDeviceInfo": "डिवाइस की जानकारी का आदान-प्रदान करना...",
@@ -495,8 +497,8 @@
         "hint": "कृपया तब तक प्रतीक्षा करें जब तक हम चयनित कार्ड साझा नहीं करते।"
       },
       "accepted": {
-        "title": "आईडी सफलतापूर्वक साझा किया गया",
+        "title": "आईडी सफलतापूर्वक साझा की गई",
-        "message": "आपका कार्ड सफलतापूर्वक {{रिसीवर}} के साथ साझा किया गया",
+        "message": "आपकी आईडी सफलतापूर्वक साझा कर दी गई है",
         "gotohome": "घर जाओ"
       },
       "rejected": {

locales/kan.json

@@ -268,6 +268,7 @@
     "bringYourDigitalID": "ನಿಮ್ಮ ಡಿಜಿಟಲ್ ಐಡಿ ತನ್ನಿ",
     "generateVcDescription": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಕೆಳಗಿನ ಡೌನ್‌ಲೋಡ್ ಕಾರ್ಡ್ ಅನ್ನು ಟ್ಯಾಪ್ ಮಾಡಿ",
     "downloadingYourCard": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ, ಇದು 5 ನಿಮಿಷಗಳವರೆಗೆ ತೆಗೆದುಕೊಳ್ಳಬಹುದು",
+    "activated": "ಆನ್‌ಲೈನ್ ದೃಢೀಕರಣಕ್ಕಾಗಿ ರುಜುವಾತುಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ.",
     "errors": {
       "savingFailed": {
         "title": "ಕಾರ್ಡ್ ಉಳಿಸಲು ವಿಫಲವಾಗಿದೆ",
@@ -321,6 +322,7 @@
     "revoking": "ನಿಮ್ಮ ವ್ಯಾಲೆಟ್ VID {{vid}} ಜೊತೆಗೆ ರುಜುವಾತುಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ಇದನ್ನು ಹಿಂತೆಗೆದುಕೊಳ್ಳುವುದರಿಂದ ಅದನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವ್ಯಾಲೆಟ್‌ನಿಂದ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ. ನೀವು ಮುಂದುವರೆಯಲು ಖಚಿತವಾಗಿ ಬಯಸುವಿರಾ?",
     "requestingOtp": "ಒಟಿಪಿಯನ್ನು ವಿನಂತಿಸಲಾಗುತ್ತಿದೆ...",
     "editTag": "ಟ್ಯಾಗ್ ಸಂಪಾದಿಸು",
+    "activated": "ಆನ್‌ಲೈನ್ ದೃಢೀಕರಣಕ್ಕಾಗಿ ರುಜುವಾತುಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ.",
     "redirecting": "ಮರುನಿರ್ದೇಶಿಸಲಾಗುತ್ತಿದೆ...",
     "success": {
       "unlocked": "ಕಾರ್ಡ್ ಅನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಅನ್‌ಲಾಕ್ ಮಾಡಲಾಗಿದೆ",
@@ -493,7 +495,7 @@
       },
       "accepted": {
         "title": "ಐಡಿಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಹಂಚಿಕೊಳ್ಳಲಾಗಿದೆ",
-        "message": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು {{ರಿಸೀವರ್}} ಜೊತೆಗೆ ಯಶಸ್ವಿಯಾಗಿ ಹಂಚಿಕೊಳ್ಳಲಾಗಿದೆ",
+        "message": "ನಿಮ್ಮ ಐಡಿಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಹಂಚಿಕೊಳ್ಳಲಾಗಿದೆ",
         "gotohome": "ಮನೆಗೆ ಹೋಗು"
       },
       "rejected": {

locales/spa.json

@@ -178,6 +178,7 @@
 		"addVcButton": "Agregar Tarjeta",
 		"generateVc": "Genera tus Tarjetas",
 		"generateVcDescription": "Toca en \"Agregar Tarjeta\" a continuación para descargar tu Tarjeta",
+		"activated": "Las credenciales están habilitadas para la autenticación en línea.",
 		"errors": {
 			"savingFailed": {
 				"title": "Error al guardar la Tarjeta",
@@ -225,6 +226,7 @@
 		"revoking": "Tu billetera contiene una credencial con VID {{vid}}. Revocar esto eliminará automáticamente la misma de la billetera. ¿Estás seguro de que deseas continuar?",
 		"requestingOtp": "Solicitando OTP...",
 		"editTag": "Renombrar",
+		"activated": "Las credenciales están habilitadas para la autenticación en línea.",
 		"redirecting": "Redirigiendo...",
 		"inProgress": "Cargando...",
 		"success": {
@@ -405,8 +407,9 @@
         "timeoutHint": "El intercambio se retrasa, posiblemente debido a un problema de conexión."
       },
 			"accepted": {
-				"title": "¡Éxito!",
+				"title": "ID compartido correctamente",
-				"message": "Tu tarjeta ha sido compartida exitosamente con el Verificador"
+				"message": "Su identificación se ha compartido correctamente con",
+				"gotohome": "Ir a casa"
 			},
 			"rejected": {
 				"title": "Aviso",

locales/tam.json

@@ -268,6 +268,7 @@
     "generateVcDescription": "உங்கள் அட்டை ஐப் பதிவிறக்க, கீழே உள்ள பதிவிறக்கு அட்டை என்பதைத் தட்டவும்",
     "downloadCard": "கார்டைப் பதிவிறக்கவும்",
     "downloadingYourCard": "உங்கள் கார்டைப் பதிவிறக்க, இதற்கு 5 நிமிடங்கள் வரை ஆகலாம்",
+    "activated": "ஆன்லைன் அங்கீகாரத்திற்காக நற்சான்றிதழ்கள் இயக்கப்பட்டுள்ளன.",
     "errors": {
       "savingFailed": {
         "title": "அட்டைஐ சேமிப்பதில் தோல்வி",
@@ -321,6 +322,7 @@
     "revoking": "உங்கள் பணப்பையில் VID {{vid}} உடன் நற்சான்றிதழ் உள்ளது. இதைத் திரும்பப் பெறுவது வாலட்டில் இருந்து தானாகவே அகற்றப்படும்.நீங்கள் நிச்சயமாக தொடர விரும்புகிறீர்களா?",
     "requestingOtp": "ஓடிபியைக் கோருகிறது...",
     "editTag": "திருத்து குறி",
+    "activated": "ஆன்லைன் அங்கீகாரத்திற்காக நற்சான்றிதழ்கள் இயக்கப்பட்டுள்ளன.",
     "redirecting": "வழிமாற்று...",
     "success": {
       "unlocked": "அட்டை வெற்றிகரமாக திறக்கப்பட்டது",
@@ -493,7 +495,7 @@
       },
       "accepted": {
         "title": "ஐடி வெற்றிகரமாகப் பகிரப்பட்டது",
-        "message": "உங்கள் அட்டை வெற்றிகரமாக சரிபார்ப்பவர் உடன் பகிரப்பட்டது",
+        "message": "உங்கள் ஐடி வெற்றிகரமாகப் பகிரப்பட்டது",
         "gotohome": "வீட்டிற்கு போ"
       },
       "rejected": {

machines/VCItemMachine/EsignetMosipVCItem/EsignetMosipVCItemMachine.ts

@@ -43,6 +43,7 @@ const model = createModel(
     bindingTransactionId: '',
     walletBindingResponse: null as WalletBindingResponse,
     walletBindingError: '',
+    walletBindingSuccess: false,
   },
   {
     events: {
@@ -228,6 +229,7 @@ export const EsignetMosipVCItemMachine = model.createMachine(
               'updatePrivateKey',
               'updateVc',
               'setWalletBindingErrorEmpty',
+              'setWalletBindingSuccess',
               'logWalletBindingSuccess',
             ],
             target: 'idle',
@@ -242,6 +244,7 @@ export const EsignetMosipVCItemMachine = model.createMachine(
         on: {
           DISMISS: {
             target: 'checkingVc',
+            actions: 'resetWalletBindingSuccess',
           },
           KEBAB_POPUP: {
             target: 'kebabPopUp',
@@ -403,6 +406,7 @@ export const EsignetMosipVCItemMachine = model.createMachine(
                   'updatePrivateKey',
                   'updateVc',
                   'setWalletBindingErrorEmpty',
+                  'sendWalletBindingSuccess',
                   'logWalletBindingSuccess',
                 ],
                 target: '#vc-item-openid4vci.kebabPopUp',
@@ -537,9 +541,29 @@ export const EsignetMosipVCItemMachine = model.createMachine(
             ns: 'common',
           }),
       }),
+
       setWalletBindingErrorEmpty: assign({
         walletBindingError: () => '',
       }),
+
+      setWalletBindingSuccess: assign({
+        walletBindingSuccess: true,
+      }),
+
+      resetWalletBindingSuccess: assign({
+        walletBindingSuccess: false,
+      }),
+
+      sendWalletBindingSuccess: send(
+        context => {
+          return {
+            type: 'WALLET_BINDING_SUCCESS',
+          };
+        },
+        {
+          to: context => context.serviceRefs.vc,
+        },
+      ),
       setPublicKey: assign({
         publicKey: (context, event) => {
           if (!isCustomSecureKeystore()) {
@@ -784,3 +808,7 @@ export function selectContext(state: State) {
 export function selectGeneratedOn(state: State) {
   return new Date(state.context.generatedOn).toLocaleDateString();
 }
+
+export function selectWalletBindingSuccess(state: State) {
+  return state.context.walletBindingSuccess;
+}

machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine.ts

@@ -69,6 +69,7 @@ const model = createModel(
     downloadInterval: 5000,
     walletBindingResponse: null as WalletBindingResponse,
     walletBindingError: '',
+    walletBindingSuccess: false,
     publicKey: '',
     privateKey: '',
   },
@@ -267,6 +268,7 @@ export const ExistingMosipVCItemMachine =
             },
             DISMISS: {
               target: 'checkingVc',
+              actions: 'resetWalletBindingSuccess',
             },
           },
         },
@@ -414,6 +416,7 @@ export const ExistingMosipVCItemMachine =
                     'updatePrivateKey',
                     'updateVc',
                     'setWalletBindingErrorEmpty',
+                    'sendWalletBindingSuccess',
                     'logWalletBindingSuccess',
                     () => sendEndEvent(getEndData('VC activation')),
                   ],
@@ -760,6 +763,7 @@ export const ExistingMosipVCItemMachine =
                 'updatePrivateKey',
                 'updateVc',
                 'setWalletBindingErrorEmpty',
+                'setWalletBindingSuccess',
                 'logWalletBindingSuccess',
                 () => sendEndEvent(getEndData('VC activation')),
               ],
@@ -831,6 +835,24 @@ export const ExistingMosipVCItemMachine =
           walletBindingError: () => '',
         }),
 
+        setWalletBindingSuccess: assign({
+          walletBindingSuccess: true,
+        }),
+
+        resetWalletBindingSuccess: assign({
+          walletBindingSuccess: false,
+        }),
+
+        sendWalletBindingSuccess: send(
+          context => {
+            return {
+              type: 'WALLET_BINDING_SUCCESS',
+            };
+          },
+          {
+            to: context => context.serviceRefs.vc,
+          },
+        ),
         setPublicKey: assign({
           publicKey: (context, event) => {
             if (!isCustomSecureKeystore()) {
@@ -1497,6 +1519,10 @@ export function selectShowWalletBindingError(state: State) {
   );
 }
 
+export function selectWalletBindingSuccess(state: State) {
+  return state.context.walletBindingSuccess;
+}
+
 export function selectWalletBindingInProgress(state: State) {
   return state.matches('requestingBindingOtp') ||
     state.matches('addingWalletBindingId') ||

machines/vc.ts

@@ -18,6 +18,7 @@ const model = createModel(
     vcs: {} as Record<string, VC>,
     inProgressVcDownloads: new Set<string>(),
     areAllVcsDownloaded: false as boolean,
+    walletBindingSuccess: false,
   },
   {
     events: {
@@ -39,6 +40,8 @@ const model = createModel(
       REFRESH_MY_VCS_TWO: (vc: VC) => ({vc}),
       REFRESH_RECEIVED_VCS: () => ({}),
       GET_RECEIVED_VCS: () => ({}),
+      WALLET_BINDING_SUCCESS: () => ({}),
+      RESET_WALLET_BINDING_SUCCESS: () => ({}),
       ADD_VC_TO_IN_PROGRESS_DOWNLOADS: (requestId: string) => ({requestId}),
       REMOVE_VC_FROM_IN_PROGRESS_DOWNLOADS: (requestId: string) => ({
         requestId,
@@ -105,6 +108,9 @@ export const vcMachine =
                       actions: [log('REFRESH_MY_VCS:myVcs---')],
                       target: 'refreshing',
                     },
+                    WALLET_BINDING_SUCCESS: {
+                      actions: 'setWalletBindingSuccess',
+                    },
                   },
                 },
                 refreshing: {
@@ -174,6 +180,9 @@ export const vcMachine =
             VC_UPDATE: {
               actions: 'setVcUpdate',
             },
+            RESET_WALLET_BINDING_SUCCESS: {
+              actions: 'resetWalletBindingSuccess',
+            },
             VC_RECEIVED: [
               {
                 actions: 'moveExistingVcToTop',
@@ -297,6 +306,13 @@ export const vcMachine =
           ],
         }),
 
+        setWalletBindingSuccess: model.assign({
+          walletBindingSuccess: true,
+        }),
+        resetWalletBindingSuccess: model.assign({
+          walletBindingSuccess: false,
+        }),
+
         prependToReceivedVcs: model.assign({
           receivedVcs: (context, event) => [
             event.vcMetadata,
@@ -398,3 +414,7 @@ function getUpdatedVCMetadatas(
 function isEmpty(object) {
   return object == null || object == '' || object == undefined;
 }
+
+export function selectWalletBindingSuccess(state: State) {
+  return state.context.walletBindingSuccess;
+}

machines/vcItem.typegen.ts

@@ -0,0 +1,386 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  internalEvents: {
+    '': {type: ''};
+    'done.invoke.checkStatus': {
+      type: 'done.invoke.checkStatus';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.downloadCredential': {
+      type: 'done.invoke.downloadCredential';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.vc-item.addKeyPair:invocation[0]': {
+      type: 'done.invoke.vc-item.addKeyPair:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.vc-item.addingWalletBindingId:invocation[0]': {
+      type: 'done.invoke.vc-item.addingWalletBindingId:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.vc-item.checkingServerData.verifyingDownloadLimitExpiry:invocation[0]': {
+      type: 'done.invoke.vc-item.checkingServerData.verifyingDownloadLimitExpiry:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.vc-item.kebabPopUp.addKeyPair:invocation[0]': {
+      type: 'done.invoke.vc-item.kebabPopUp.addKeyPair:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]': {
+      type: 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.vc-item.kebabPopUp.requestingBindingOtp:invocation[0]': {
+      type: 'done.invoke.vc-item.kebabPopUp.requestingBindingOtp:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]': {
+      type: 'done.invoke.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.vc-item.requestingBindingOtp:invocation[0]': {
+      type: 'done.invoke.vc-item.requestingBindingOtp:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.vc-item.requestingLock:invocation[0]': {
+      type: 'done.invoke.vc-item.requestingLock:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.vc-item.requestingOtp:invocation[0]': {
+      type: 'done.invoke.vc-item.requestingOtp:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.vc-item.requestingRevoke:invocation[0]': {
+      type: 'done.invoke.vc-item.requestingRevoke:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.vc-item.updatingPrivateKey:invocation[0]': {
+      type: 'done.invoke.vc-item.updatingPrivateKey:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'done.invoke.vc-item.verifyingCredential:invocation[0]': {
+      type: 'done.invoke.vc-item.verifyingCredential:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'error.platform.checkStatus': {
+      type: 'error.platform.checkStatus';
+      data: unknown;
+    };
+    'error.platform.downloadCredential': {
+      type: 'error.platform.downloadCredential';
+      data: unknown;
+    };
+    'error.platform.vc-item.addKeyPair:invocation[0]': {
+      type: 'error.platform.vc-item.addKeyPair:invocation[0]';
+      data: unknown;
+    };
+    'error.platform.vc-item.addingWalletBindingId:invocation[0]': {
+      type: 'error.platform.vc-item.addingWalletBindingId:invocation[0]';
+      data: unknown;
+    };
+    'error.platform.vc-item.checkingServerData.verifyingDownloadLimitExpiry:invocation[0]': {
+      type: 'error.platform.vc-item.checkingServerData.verifyingDownloadLimitExpiry:invocation[0]';
+      data: unknown;
+    };
+    'error.platform.vc-item.kebabPopUp.addKeyPair:invocation[0]': {
+      type: 'error.platform.vc-item.kebabPopUp.addKeyPair:invocation[0]';
+      data: unknown;
+    };
+    'error.platform.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]': {
+      type: 'error.platform.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]';
+      data: unknown;
+    };
+    'error.platform.vc-item.kebabPopUp.requestingBindingOtp:invocation[0]': {
+      type: 'error.platform.vc-item.kebabPopUp.requestingBindingOtp:invocation[0]';
+      data: unknown;
+    };
+    'error.platform.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]': {
+      type: 'error.platform.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]';
+      data: unknown;
+    };
+    'error.platform.vc-item.requestingBindingOtp:invocation[0]': {
+      type: 'error.platform.vc-item.requestingBindingOtp:invocation[0]';
+      data: unknown;
+    };
+    'error.platform.vc-item.requestingLock:invocation[0]': {
+      type: 'error.platform.vc-item.requestingLock:invocation[0]';
+      data: unknown;
+    };
+    'error.platform.vc-item.requestingRevoke:invocation[0]': {
+      type: 'error.platform.vc-item.requestingRevoke:invocation[0]';
+      data: unknown;
+    };
+    'error.platform.vc-item.updatingPrivateKey:invocation[0]': {
+      type: 'error.platform.vc-item.updatingPrivateKey:invocation[0]';
+      data: unknown;
+    };
+    'error.platform.vc-item.verifyingCredential:invocation[0]': {
+      type: 'error.platform.vc-item.verifyingCredential:invocation[0]';
+      data: unknown;
+    };
+    'xstate.init': {type: 'xstate.init'};
+  };
+  invokeSrcNameMap: {
+    addWalletBindnigId:
+      | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]';
+    checkDownloadExpiryLimit: 'done.invoke.vc-item.checkingServerData.verifyingDownloadLimitExpiry:invocation[0]';
+    checkStatus: 'done.invoke.checkStatus';
+    downloadCredential: 'done.invoke.downloadCredential';
+    generateKeyPair:
+      | 'done.invoke.vc-item.addKeyPair:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addKeyPair:invocation[0]';
+    requestBindingOtp:
+      | 'done.invoke.vc-item.kebabPopUp.requestingBindingOtp:invocation[0]'
+      | 'done.invoke.vc-item.requestingBindingOtp:invocation[0]';
+    requestLock: 'done.invoke.vc-item.requestingLock:invocation[0]';
+    requestOtp: 'done.invoke.vc-item.requestingOtp:invocation[0]';
+    requestRevoke: 'done.invoke.vc-item.requestingRevoke:invocation[0]';
+    updatePrivateKey:
+      | 'done.invoke.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]'
+      | 'done.invoke.vc-item.updatingPrivateKey:invocation[0]';
+    verifyCredential: 'done.invoke.vc-item.verifyingCredential:invocation[0]';
+  };
+  missingImplementations: {
+    actions: never;
+    delays: never;
+    guards: never;
+    services: never;
+  };
+  eventsCausingActions: {
+    clearOtp:
+      | ''
+      | 'CANCEL'
+      | 'DISMISS'
+      | 'REVOKE_VC'
+      | 'STORE_RESPONSE'
+      | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.requestingBindingOtp:invocation[0]'
+      | 'done.invoke.vc-item.requestingBindingOtp:invocation[0]'
+      | 'done.invoke.vc-item.requestingOtp:invocation[0]'
+      | 'done.invoke.vc-item.updatingPrivateKey:invocation[0]'
+      | 'done.invoke.vc-item.verifyingCredential:invocation[0]'
+      | 'error.platform.vc-item.requestingLock:invocation[0]'
+      | 'error.platform.vc-item.requestingRevoke:invocation[0]'
+      | 'error.platform.vc-item.verifyingCredential:invocation[0]';
+    clearTransactionId:
+      | ''
+      | 'CANCEL'
+      | 'DISMISS'
+      | 'STORE_RESPONSE'
+      | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.updatingPrivateKey:invocation[0]'
+      | 'done.invoke.vc-item.verifyingCredential:invocation[0]'
+      | 'error.platform.vc-item.verifyingCredential:invocation[0]';
+    incrementDownloadCounter: 'POLL';
+    logDownloaded: 'STORE_RESPONSE';
+    logRevoked: 'STORE_RESPONSE';
+    logVCremoved: 'STORE_RESPONSE';
+    logWalletBindingFailure:
+      | 'error.platform.vc-item.addKeyPair:invocation[0]'
+      | 'error.platform.vc-item.addingWalletBindingId:invocation[0]'
+      | 'error.platform.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]'
+      | 'error.platform.vc-item.requestingBindingOtp:invocation[0]'
+      | 'error.platform.vc-item.updatingPrivateKey:invocation[0]';
+    logWalletBindingSuccess:
+      | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]'
+      | 'done.invoke.vc-item.updatingPrivateKey:invocation[0]';
+    markVcValid: 'done.invoke.vc-item.verifyingCredential:invocation[0]';
+    removeVcItem: 'CONFIRM';
+    removeVcMetaDataFromStorage: 'STORE_ERROR';
+    removeVcMetaDataFromVcMachine: 'DISMISS';
+    removedVc: 'STORE_RESPONSE';
+    requestStoredContext: 'GET_VC_RESPONSE' | 'REFRESH';
+    requestVcContext: 'DISMISS' | 'xstate.init';
+    revokeVID: 'done.invoke.vc-item.requestingRevoke:invocation[0]';
+    sendVcUpdated: 'PIN_CARD';
+    setCredential: 'GET_VC_RESPONSE' | 'STORE_RESPONSE';
+    setDownloadInterval: 'done.invoke.vc-item.checkingServerData.verifyingDownloadLimitExpiry:invocation[0]';
+    setLock: 'done.invoke.vc-item.requestingLock:invocation[0]';
+    setMaxDownloadCount: 'done.invoke.vc-item.checkingServerData.verifyingDownloadLimitExpiry:invocation[0]';
+    setOtp: 'INPUT_OTP';
+    setOtpError:
+      | 'error.platform.vc-item.requestingLock:invocation[0]'
+      | 'error.platform.vc-item.requestingRevoke:invocation[0]';
+    setPinCard: 'PIN_CARD';
+    setPrivateKey:
+      | 'done.invoke.vc-item.addKeyPair:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addKeyPair:invocation[0]';
+    setPublicKey:
+      | 'done.invoke.vc-item.addKeyPair:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addKeyPair:invocation[0]';
+    setRevoke: 'done.invoke.vc-item.requestingRevoke:invocation[0]';
+    setStoreVerifiableCredential: 'CREDENTIAL_DOWNLOADED';
+    setTag: 'SAVE_TAG';
+    setThumbprintForWalletBindingId:
+      | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]';
+    setTransactionId:
+      | 'INPUT_OTP'
+      | 'REVOKE_VC'
+      | 'done.invoke.vc-item.requestingOtp:invocation[0]'
+      | 'error.platform.vc-item.requestingLock:invocation[0]'
+      | 'error.platform.vc-item.requestingRevoke:invocation[0]';
+    setVcKey: 'REMOVE';
+    setVerifiableCredential: 'STORE_RESPONSE';
+    setWalletBindingError:
+      | 'error.platform.vc-item.addKeyPair:invocation[0]'
+      | 'error.platform.vc-item.addingWalletBindingId:invocation[0]'
+      | 'error.platform.vc-item.kebabPopUp.addKeyPair:invocation[0]'
+      | 'error.platform.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]'
+      | 'error.platform.vc-item.kebabPopUp.requestingBindingOtp:invocation[0]'
+      | 'error.platform.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]'
+      | 'error.platform.vc-item.requestingBindingOtp:invocation[0]'
+      | 'error.platform.vc-item.updatingPrivateKey:invocation[0]';
+    setWalletBindingErrorEmpty:
+      | 'CANCEL'
+      | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]'
+      | 'done.invoke.vc-item.updatingPrivateKey:invocation[0]';
+    setWalletBindingId:
+      | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]';
+    setWalletBindingSuccess:
+      | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]'
+      | 'done.invoke.vc-item.updatingPrivateKey:invocation[0]';
+    storeContext:
+      | 'CREDENTIAL_DOWNLOADED'
+      | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]'
+      | 'done.invoke.vc-item.updatingPrivateKey:invocation[0]'
+      | 'done.invoke.vc-item.verifyingCredential:invocation[0]';
+    storeLock: 'done.invoke.vc-item.requestingLock:invocation[0]';
+    storeTag: 'SAVE_TAG';
+    updatePrivateKey:
+      | 'done.invoke.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]'
+      | 'done.invoke.vc-item.updatingPrivateKey:invocation[0]';
+    updateVc:
+      | 'STORE_RESPONSE'
+      | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.updatingPrivateKey:invocation[0]'
+      | 'done.invoke.vc-item.updatingPrivateKey:invocation[0]'
+      | 'done.invoke.vc-item.verifyingCredential:invocation[0]';
+  };
+  eventsCausingDelays: {};
+  eventsCausingGuards: {
+    hasCredential: 'GET_VC_RESPONSE' | 'STORE_RESPONSE';
+    isCustomSecureKeystore:
+      | 'done.invoke.vc-item.addKeyPair:invocation[0]'
+      | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addKeyPair:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]';
+    isDownloadAllowed: 'POLL';
+    isVcValid: '';
+  };
+  eventsCausingServices: {
+    addWalletBindnigId:
+      | 'done.invoke.vc-item.addKeyPair:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addKeyPair:invocation[0]';
+    checkDownloadExpiryLimit: 'STORE_RESPONSE';
+    checkStatus:
+      | 'done.invoke.vc-item.checkingServerData.verifyingDownloadLimitExpiry:invocation[0]'
+      | 'error.platform.vc-item.checkingServerData.verifyingDownloadLimitExpiry:invocation[0]';
+    downloadCredential: 'DOWNLOAD_READY';
+    generateKeyPair: 'INPUT_OTP';
+    requestBindingOtp: 'CONFIRM';
+    requestLock: 'INPUT_OTP';
+    requestOtp: 'LOCK_VC';
+    requestRevoke: 'INPUT_OTP';
+    updatePrivateKey:
+      | 'done.invoke.vc-item.addingWalletBindingId:invocation[0]'
+      | 'done.invoke.vc-item.kebabPopUp.addingWalletBindingId:invocation[0]';
+    verifyCredential: '' | 'VERIFY';
+  };
+  matchesStates:
+    | 'acceptingBindingOtp'
+    | 'acceptingOtpInput'
+    | 'acceptingRevokeInput'
+    | 'addKeyPair'
+    | 'addingWalletBindingId'
+    | 'checkingServerData'
+    | 'checkingServerData.checkingStatus'
+    | 'checkingServerData.downloadingCredential'
+    | 'checkingServerData.savingFailed'
+    | 'checkingServerData.savingFailed.idle'
+    | 'checkingServerData.savingFailed.viewingVc'
+    | 'checkingServerData.verifyingDownloadLimitExpiry'
+    | 'checkingStore'
+    | 'checkingVc'
+    | 'checkingVerificationStatus'
+    | 'editingTag'
+    | 'idle'
+    | 'invalid'
+    | 'invalid.backend'
+    | 'invalid.otp'
+    | 'kebabPopUp'
+    | 'kebabPopUp.acceptingBindingOtp'
+    | 'kebabPopUp.addKeyPair'
+    | 'kebabPopUp.addingWalletBindingId'
+    | 'kebabPopUp.idle'
+    | 'kebabPopUp.removeWallet'
+    | 'kebabPopUp.removingVc'
+    | 'kebabPopUp.requestingBindingOtp'
+    | 'kebabPopUp.showActivities'
+    | 'kebabPopUp.showBindingWarning'
+    | 'kebabPopUp.showingWalletBindingError'
+    | 'kebabPopUp.updatingPrivateKey'
+    | 'lockingVc'
+    | 'loggingRevoke'
+    | 'pinCard'
+    | 'requestingBindingOtp'
+    | 'requestingLock'
+    | 'requestingOtp'
+    | 'requestingRevoke'
+    | 'revokingVc'
+    | 'showBindingWarning'
+    | 'showingWalletBindingError'
+    | 'storingTag'
+    | 'updatingPrivateKey'
+    | 'verifyingCredential'
+    | {
+        checkingServerData?:
+          | 'checkingStatus'
+          | 'downloadingCredential'
+          | 'savingFailed'
+          | 'verifyingDownloadLimitExpiry'
+          | {savingFailed?: 'idle' | 'viewingVc'};
+        invalid?: 'backend' | 'otp';
+        kebabPopUp?:
+          | 'acceptingBindingOtp'
+          | 'addKeyPair'
+          | 'addingWalletBindingId'
+          | 'idle'
+          | 'removeWallet'
+          | 'removingVc'
+          | 'requestingBindingOtp'
+          | 'showActivities'
+          | 'showBindingWarning'
+          | 'showingWalletBindingError'
+          | 'updatingPrivateKey';
+      };
+  tags: never;
+}

package-lock.json

@@ -21665,11 +21665,6 @@
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
     },
-    "node_modules/js-cookie": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
-      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -27161,6 +27156,31 @@
         "node": ">=8"
       }
     },
+    "node_modules/read-pkg-up/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/read-pkg-up/node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -47268,11 +47288,6 @@
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
     },
-    "js-cookie": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
-      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -51448,6 +51463,22 @@
             "p-locate": "^4.1.0"
           }
         },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
         "path-exists": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",

screens/Home/MyVcsTab.tsx

@@ -1,22 +1,21 @@
 import React, {useEffect} from 'react';
 import {Button, Column, Row, Text} from '../../components/ui';
 import {Theme} from '../../components/ui/styleUtils';
-import {Image, RefreshControl, View} from 'react-native';
+import {Image, RefreshControl} from 'react-native';
 import {useMyVcsTab} from './MyVcsTabController';
 import {HomeScreenTabProps} from './HomeScreen';
 import {AddVcModal} from './MyVcs/AddVcModal';
 import {GetVcModal} from './MyVcs/GetVcModal';
 import {useTranslation} from 'react-i18next';
-import {ExistingMosipVCItem} from '../../components/VC/ExistingMosipVCItem/ExistingMosipVCItem';
 import {GET_INDIVIDUAL_ID} from '../../shared/constants';
 import {
   ErrorMessageOverlay,
   MessageOverlay,
 } from '../../components/MessageOverlay';
-import {Icon} from 'react-native-elements';
 import {groupBy} from '../../shared/javascript';
 import {isOpenId4VCIEnabled} from '../../shared/openId4VCI/Utils';
 import {VcItemContainer} from '../../components/VC/VcItemContainer';
+import {BannerNotification} from '../../components/BannerNotification';
 
 const pinIconProps = {iconName: 'pushpin', iconType: 'antdesign'};
 
@@ -48,33 +47,26 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = props => {
       controller.SET_STORE_VC_ITEM_STATUS();
     }
   }, [controller.areAllVcsLoaded, controller.inProgressVcDownloadsCount]);
-
-  const DownloadingVcPopUp: React.FC = () => {
-    return (
-      <View testID="downloadingVcPopup">
-        <Row style={Theme.Styles.downloadingVcPopUp}>
-          <Text color={Theme.Colors.whiteText} weight="semibold" size="smaller">
-            {t('downloadingYourCard')}
-          </Text>
-          <Icon
-            testID="close"
-            name="close"
-            onPress={() => {
-              controller.RESET_STORE_VC_ITEM_STATUS();
-              clearIndividualId();
-            }}
-            color={Theme.Colors.whiteText}
-            size={19}
-          />
-        </Row>
-      </View>
-    );
-  };
-
   return (
     <React.Fragment>
       <Column fill style={{display: props.isVisible ? 'flex' : 'none'}}>
-        {controller.isRequestSuccessful && <DownloadingVcPopUp />}
+        {controller.isRequestSuccessful && (
+          <BannerNotification
+            message={t('downloadingYourCard')}
+            onClosePress={() => {
+              controller.RESET_STORE_VC_ITEM_STATUS();
+              clearIndividualId();
+            }}
+            testId={'downloadingVcPopup'}
+          />
+        )}
+        {controller.isBindingSuccess && (
+          <BannerNotification
+            message={t('activated')}
+            onClosePress={controller.DISMISS_WALLET_BINDING_NOTIFICATION_BANNER}
+            testId={'activatedVcPopup'}
+          />
+        )}
         <Column fill pY={11} pX={8}>
           {vcMetadataOrderedByPinStatus.length > 0 && (
             <React.Fragment>

screens/Home/MyVcsTabController.ts

@@ -5,6 +5,7 @@ import {selectIsTampered} from '../../machines/store';
 import {
   selectIsRefreshingMyVcs,
   selectMyVcsMetadata,
+  selectWalletBindingSuccess,
   VcEvents,
   selectAreAllVcsDownloaded,
   selectInProgressVcDownloadsCount,
@@ -51,6 +52,7 @@ export function useMyVcsTab(props: HomeScreenTabProps) {
     isSavingFailedInIdle: useSelector(service, selectIsSavingFailedInIdle),
     walletBindingError: useSelector(service, selectWalletBindingError),
     isBindingError: useSelector(service, selectShowWalletBindingError),
+    isBindingSuccess: useSelector(vcService, selectWalletBindingSuccess),
     isMinimumStorageLimitReached: useSelector(
       service,
       selectIsMinimumStorageLimitReached,
@@ -92,6 +94,9 @@ export function useMyVcsTab(props: HomeScreenTabProps) {
 
     IS_TAMPERED: () => service.send(MyVcsTabEvents.IS_TAMPERED()),
 
+    DISMISS_WALLET_BINDING_NOTIFICATION_BANNER: () =>
+      vcService?.send(VcEvents.RESET_WALLET_BINDING_SUCCESS()),
+
     ACCEPT_HARDWARE_SUPPORT_NOT_EXISTS: () =>
       settingsService.send(SettingsEvents.ACCEPT_HARDWARE_SUPPORT_NOT_EXISTS()),
   };

screens/Home/ViewVcModal.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import {DropdownIcon} from '../../components/DropdownIcon';
+import {Column} from '../../components/ui';
-import {TextEditOverlay} from '../../components/TextEditOverlay';
-import {Column, Text} from '../../components/ui';
 import {Modal} from '../../components/ui/Modal';
 import {MessageOverlay} from '../../components/MessageOverlay';
 import {ToastItem} from '../../components/ui/ToastItem';
@@ -9,6 +7,8 @@ import {RevokeConfirmModal} from '../../components/RevokeConfirm';
 import {OIDcAuthenticationModal} from '../../components/OIDcAuth';
 import {useViewVcModal, ViewVcModalProps} from './ViewVcModalController';
 import {useTranslation} from 'react-i18next';
+import {BannerNotification} from '../../components/BannerNotification';
+import {TextEditOverlay} from '../../components/TextEditOverlay';
 import {OtpVerificationModal} from './MyVcs/OtpVerificationModal';
 import {BindingVcWarningOverlay} from './MyVcs/BindingVcWarningOverlay';
 import {VcDetailsContainer} from '../../components/VC/VcDetailsContainer';
@@ -37,6 +37,13 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = props => {
       onDismiss={props.onDismiss}
       headerTitle={t('title')}
       headerElevation={2}>
+      {controller.isBindingSuccess && (
+        <BannerNotification
+          message={t('activated')}
+          onClosePress={controller.DISMISS}
+          testId={'activatedVcPopup'}
+        />
+      )}
       <Column scroll>
         <Column fill>
           <VcDetailsContainer

screens/Home/ViewVcModalController.ts

@@ -22,6 +22,7 @@ import {
   selectEmptyWalletBindingId,
   selectWalletBindingInProgress,
   selectShowWalletBindingError,
+  selectWalletBindingSuccess,
   selectBindingWarning,
 } from '../../machines/VCItemMachine/ExistingMosipVCItem/ExistingMosipVCItemMachine';
 import {selectPasscode} from '../../machines/auth';
@@ -135,6 +136,7 @@ export function useViewVcModal({
       selectWalletBindingInProgress,
     ),
     isBindingError: useSelector(vcItemActor, selectShowWalletBindingError),
+    isBindingSuccess: useSelector(vcItemActor, selectWalletBindingSuccess),
     isBindingWarning: useSelector(vcItemActor, selectBindingWarning),
 
     CONFIRM_REVOKE_VC: () => {

screens/Request/RequestLayout.tsx

@@ -10,6 +10,8 @@ import {MessageOverlay} from '../../components/MessageOverlay';
 import {ReceivedCardsModal} from '../Settings/ReceivedCardsModal';
 import {useReceivedVcsTab} from '../Home/ReceivedVcsTabController';
 import {REQUEST_ROUTES} from '../../routes/routesConstants';
+import {SquircleIconPopUpModal} from '../../components/ui/SquircleIconPopUpModal';
+import {Theme} from '../../components/ui/styleUtils';
 import {ProgressingModal} from '../../components/ProgressingModal';
 const RequestStack = createNativeStackNavigator();
 
@@ -64,10 +66,11 @@ export const RequestLayout: React.FC = () => {
         onDismiss={controller.DISMISS}
       />
       {controller.isAccepted && (
-        <Message
+        <SquircleIconPopUpModal
-          title={t('status.accepted.title')}
           message={t('status.accepted.message')}
           onBackdropPress={controller.DISMISS}
+          iconName={Theme.SuccessLogo}
+          testId={'vcAcceptedPopUp'}
         />
       )}
 

screens/Scan/ScanLayout.tsx

@@ -7,6 +7,7 @@ import {ScanScreen} from './ScanScreen';
 import {ProgressingModal} from '../../components/ProgressingModal';
 import {MessageOverlay} from '../../components/MessageOverlay';
 import {SCAN_ROUTES} from '../../routes/routesConstants';
+import {SharingSuccessModal} from './SuccessfullySharedModal';
 
 const ScanStack = createNativeStackNavigator();
 
@@ -50,6 +51,11 @@ export const ScanLayout: React.FC = () => {
         requester={controller.statusOverlay?.requester}
       />
 
+      <SharingSuccessModal
+        isVisible={controller.isAccepted}
+        testId={'sharingSuccessModal'}
+      />
+
       <ProgressingModal
         isVisible={controller.isDisconnected}
         title={t('RequestScreen:status.disconnected.title')}

screens/Scan/ScanLayoutController.ts

@@ -226,6 +226,7 @@ export function useScanLayout() {
     isStayInProgress: useSelector(scanService, selectStayInProgress),
     isBleError,
     DISMISS,
+    isAccepted,
     onRetry,
   };
 }

screens/Scan/SuccessfullySharedModal.tsx

@@ -1,47 +1,50 @@
-import React, { useState } from 'react';
+import React from 'react';
-import { useTranslation } from 'react-i18next';
+import {useTranslation} from 'react-i18next';
-import { Theme } from '../../components/ui/styleUtils';
+import {Theme} from '../../components/ui/styleUtils';
-import { Modal } from '../../components/ui/Modal';
+import {Modal} from '../../components/ui/Modal';
-import { Image } from 'react-native';
+import {Image} from 'react-native';
-import { Column, Text } from '../../components/ui';
+import {Column, Text} from '../../components/ui';
-import { DeviceInfoList } from '../../components/DeviceInfoList';
+import {Button} from '../../components/ui';
-import { Button } from '../../components/ui';
+import {useScanLayout} from './ScanLayoutController';
-import { useScanLayout } from './ScanLayoutController';
+import {useSendVcScreen} from './SendVcScreenController';
-import { useSendVcScreen } from './SendVcScreenController';
+import testIDProps from '../../shared/commonUtil';
 
-export const SharingSuccessModal: React.FC<SharingSuccessModalProps> = (
+export const SharingSuccessModal: React.FC<
-  props
+  SharingSuccessModalProps
-) => {
+> = props => {
-  const { t } = useTranslation('ScanScreen');
+  const {t} = useTranslation('ScanScreen');
-  const controller = useScanLayout();
+  const scanLayoutController = useScanLayout();
-  const controller1 = useSendVcScreen();
+  const sendVcScreenController = useSendVcScreen();
 
   return (
     <React.Fragment>
-      <Modal isVisible={controller.isDone}>
+      <Modal
+        isVisible={props.isVisible}
+        showClose={false}
+        {...testIDProps(props.testId)}>
         <Column
           margin="64 0"
           crossAlign="center"
           style={Theme.SelectVcOverlayStyles.sharedSuccessfully}>
           <Image source={Theme.SuccessLogo} height={22} width={22} />
-          <Text style={Theme.TextStyles.bold}>
+          <Text margin="20 0" style={Theme.TextStyles.bold} size={'large'}>
             {t('ScanScreen:status.accepted.title')}
           </Text>
           <Text
             align="center"
-            style={Theme.TextStyles.bold}
+            style={Theme.TextStyles.regular}
-            color={Theme.Colors.profileValue}>
+            color={Theme.Colors.statusMessage}>
             {t('ScanScreen:status.accepted.message')}
           </Text>
           <Text style={Theme.TextStyles.bold}>
-            <DeviceInfoList deviceInfo={controller1.receiverInfo} />
+            {sendVcScreenController.receiverInfo.name}
           </Text>
         </Column>
         <Column margin="0 0  0">
           <Button
             type="gradient"
             title={t('ScanScreen:status.accepted.gotohome')}
-            onPress={controller.DISMISS}
+            onPress={scanLayoutController.DISMISS}
           />
         </Column>
       </Modal>
@@ -51,4 +54,5 @@ export const SharingSuccessModal: React.FC<SharingSuccessModalProps> = (
 
 interface SharingSuccessModalProps {
   isVisible: boolean;
+  testId: string;
 }