react-native-unit-components 1.9.1 → 1.11.0

package/src/components/UNProgramDetailsComponent/UNProgramDetailsComponent.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { WebComponent } from '../../webComponent/WebComponent';
+import { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { WebViewMessage } from '../../messages/webMessages';
+import { getProgramDetailsParams } from './UNProgramDetailsComponent.utils';
+import { withReduxStore } from '../../helpers/store/helpers';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+
+export interface UNProgramDetailsComponentProps {
+  // inputs
+  customerToken: string;
+  accountId: string;
+
+  // ui
+  theme?: string;
+  language?: string;
+  hideTitle?: boolean;
+
+  // events
+  onLoad?: (response: UNOnLoadResponse<[UNAccountData]>) => void;
+}
+
+const UNProgramDetailsComponent =  (props: UNProgramDetailsComponentProps) => {
+  const [height, setHeight] = useState(0);
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    console.log('handleUnitOnLoad', response);
+
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.account in response) {
+      props.onLoad(response[RESPONSE_KEYS.account] as UNOnLoadResponseData<[UNAccountData]>);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type.');
+    return;
+  };
+
+  const handleMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case UnitMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+
+      case PageMessage.PAGE_HEIGHT:
+        setHeight((message.details as HeightEvent).height);
+        break;
+    }
+  };
+
+  return (
+    <View style={{ height, width: '100%' }}>
+      <WebComponent
+        type={WebComponentType.programDetails}
+        presentationMode={PresentationMode.Default}
+        params={getProgramDetailsParams(props)}
+        theme={props.theme}
+        language={props.language}
+        onMessage={handleMessage}
+      />
+    </View>
+  );
+};
+
+export default withReduxStore<UNProgramDetailsComponentProps>(UNProgramDetailsComponent);

package/src/components/UNProgramDetailsComponent/UNProgramDetailsComponent.utils.ts

@@ -0,0 +1,9 @@
+import { UNProgramDetailsComponentProps } from './UNProgramDetailsComponent';
+
+export const getProgramDetailsParams = (props: UNProgramDetailsComponentProps) => {
+  return `
+    customer-token="${props.customerToken}"
+    account-id="${props.accountId}"
+    hide-title="${props.hideTitle || false}"
+    `;
+};

package/src/components/UNProgramDetailsComponent/index.ts

@@ -0,0 +1,3 @@
+export {
+  default as UNProgramDetailsComponent, UNProgramDetailsComponentProps,
+} from './UNProgramDetailsComponent';

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './UNCardComponent';
+export * from './UNMultipleCardsComponent';
 export * from './UNBottomSheetComponent';
 export * from './UNBookPaymentComponent';
 export * from './UNActivityComponent';
@@ -6,3 +7,5 @@ export * from './UNAccountComponent';
 export * from './UNCheckDepositComponent';
 export * from './UNACHDebitComponent';
 export * from './UNACHCreditComponent';
+export * from './UNProgramDetailsComponent';
+export * from './UNNextRepaymentComponent';

package/src/flows/UNFlows.ts

@@ -8,6 +8,6 @@ export class UNFlows {
 
   public async startPushProvisioning(cardId: string, customerToken: string) {
     UnitSDK.setCustomerToken(customerToken);
-    UNCardFlows.startPushProvisioning(cardId, customerToken);
+    await UNCardFlows.startPushProvisioning(cardId, customerToken);
   }
 }

package/src/flows/card/UNCardFlows.ts

@@ -1,23 +1,28 @@
-import EventBus from '../../helpers/EventBus';
-import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
-import { BottomSheetRenderingType, type WebComponentData, type WebComponentRendering } from '../../types/internal/bottomSheet.types';
+import {
+  BottomSheetNativeComponentType, BottomSheetNativePlaceType,
+  BottomSheetRenderingType, NativeComponentRendering,
+} from '../../types/internal/bottomSheet.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
+import { setEvent } from '../../slices/SharedEventsSlice';
+import { store } from '../../store/store';
+import {
+  UNAddToWalletComponentProps,
+} from '../../nativeComponents/UNAddToWallet/UNAddToWalletComponent/UNAddToWalletComponent';
 
 export class UNCardFlows {
   public static startPushProvisioning = async (cardId: string, customerToken: string) => {
     try {
-      const addToWalletComponentData: WebComponentData = {
-        type: WebComponentType.cardAction,
-        presentationMode: PresentationMode.CoverInjectedHeight,
-        params: `card-id=${cardId} customer-token=${customerToken} action=AddToWallet`,
+      const data: NativeComponentRendering = {
+        type: BottomSheetRenderingType.NativeComponent,
+        data: {
+          nativePlace: BottomSheetNativePlaceType.overFullScreen,
+          component: {
+            type: BottomSheetNativeComponentType.AddToWalletComponent,
+            props: { cardId: cardId, customerToken: customerToken } as UNAddToWalletComponentProps,
+          },
+        },
       };
-
-      const event: WebComponentRendering = {
-        type: BottomSheetRenderingType.WebComponent,
-        data: addToWalletComponentData,
-      };
-
-      EventBus.Instance.event(BottomSheetNativeMessage.START_FLOW, event);
+      store.dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
     } catch (error) {
       console.error(error);
     }

package/src/helpers/BottomSheet/BottomSheet.styles.ts

@@ -1,5 +1,5 @@
-import { Dimensions, StyleSheet } from 'react-native';
-import { BOTTOM_SHEET_MAX_PERCENTAGE_SIZE } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import { StyleSheet } from 'react-native';
+
 import { VARIABLES } from '../../styles/variables';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -10,7 +10,7 @@ export const getStylesObject = (fadeAnim: any) => {
       top: 0,
       bottom: 0,
       right: 0,
-      left: 0
+      left: 0,
     },
     animation: {
       backgroundColor: 'black',
@@ -20,7 +20,6 @@ export const getStylesObject = (fadeAnim: any) => {
     container: {
       position: 'relative',
       flex: 1,
-      marginTop: Dimensions.get('window').height * (1 - BOTTOM_SHEET_MAX_PERCENTAGE_SIZE),
       shadowColor: VARIABLES.COLORS.BLACK,
       shadowOffset: {
         width: 0,
@@ -32,12 +31,12 @@ export const getStylesObject = (fadeAnim: any) => {
       borderTopLeftRadius: 15,
       borderTopRightRadius: 15,
       backgroundColor: VARIABLES.COLORS.WHITE,
-      overflow: 'hidden'
+      overflow: 'hidden',
     },
     lineContainer: {
       borderTopLeftRadius: 30,
       borderTopRightRadius: 30,
-      alignItems: 'center'
+      alignItems: 'center',
     },
     line: {
       width: 35,
@@ -64,7 +63,7 @@ export const getStylesObject = (fadeAnim: any) => {
       padding: 7,
       top: 12,
       right: 12,
-      zIndex: 100
-    }
+      zIndex: 100,
+    },
   });
 };

package/src/helpers/BottomSheet/BottomSheet.tsx

@@ -2,35 +2,42 @@ import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import {
   Animated,
   BackHandler,
-  Dimensions,
   Easing,
   Image,
-  KeyboardAvoidingView,
   LayoutChangeEvent,
   PanResponder,
+  Platform,
   TouchableOpacity,
   View,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { CloseIcon } from '../../assets/images';
-import { BOTTOM_SHEET_MAX_PERCENTAGE_SIZE } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import {
+  androidStatusBarHeight,
+  fullScreenHeight, isAndroid10AndAbove,
+  statusBarHeight,
+} from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
 import { getStylesObject } from './BottomSheet.styles';
 import { useAppStateListener } from '../../hooks/useAppStateListener';
+import { BottomSheetNativePlaceType } from '../../types/internal/bottomSheet.types';
 
 export interface BottomSheetProps {
-  isOpen: boolean
-  children: ReactNode
-  sliderMaxHeight: number
-  onOpen: () => void
-  onClose: () => void
+  isOpen: boolean,
+  children: ReactNode,
+  onOpen: () => void,
+  onClose: () => void,
   height: number,
   animationDuration: number,
-  expandToMaxHeightEnabled: boolean
-  handleWebViewScroll: () => void
-  shouldEnableBottomSheetScroll: boolean
+  expandToMaxHeightEnabled: boolean,
+  handleWebViewScroll: () => void,
+  shouldEnableBottomSheetScroll: boolean,
+  nativePlace?: BottomSheetNativePlaceType,
+  isComponentLoading?: boolean,
+  sliderMaxHeight: number
 }
 
 const BottomSheet = (props: BottomSheetProps) => {
+  const isStatic = props.nativePlace === BottomSheetNativePlaceType.modal;
   const panelHeightValue = useRef(new Animated.Value(props.sliderMaxHeight)).current;
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const styles = getStylesObject(fadeAnim);
@@ -45,6 +52,7 @@ const BottomSheet = (props: BottomSheetProps) => {
 
   const _parentPanResponder = PanResponder.create({
     onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+      if (isStatic) return false;
       return props.shouldEnableBottomSheetScroll && Math.abs(gestureState.dy) > 10;
     },
     onPanResponderMove(_, gestureState) {
@@ -52,7 +60,7 @@ const BottomSheet = (props: BottomSheetProps) => {
         props.handleWebViewScroll();
       }
       if (currentHeight + gestureState.dy < 0) return;
-      if (!props.expandToMaxHeightEnabled && contentHeight && currentHeight + gestureState.dy < sliderMaxHeight - contentHeight) return;
+      if (!props.expandToMaxHeightEnabled && contentHeight && currentHeight + gestureState.dy < props.sliderMaxHeight - contentHeight) return;
       panelHeightValue.setValue(currentHeight + gestureState.dy);
       setDy(gestureState.dy);
     },
@@ -64,13 +72,13 @@ const BottomSheet = (props: BottomSheetProps) => {
       } else {
         expand();
       }
-    }
+    },
   });
 
   useEffect(() => {
     // on App Active State change reset the bottom-sheet
     setContentHeight(0);
-    _dismiss(false);
+    _dismiss();
   }, [isAppActive]);
 
   useEffect(() => {
@@ -97,31 +105,28 @@ const BottomSheet = (props: BottomSheetProps) => {
     Animated.timing(fadeAnim, {
       toValue: 0.3,
       duration: 500,
-      useNativeDriver: false
+      useNativeDriver: false,
     }).start();
   };
 
-  const fadeOut = (withTimeout = true) => {
+  const fadeOut = () => {
     /*
       withTimeout - most of the time we declare 'Close' after the animation is end.
       In a case that the app is not active we do it without timeout. (Otherwise a race condition may occur.)
     */
     setIsPanelOpened(false);
-    !withTimeout && props.onClose();
     Animated.timing(fadeAnim, {
       toValue: 0,
       duration: 500,
-      useNativeDriver: false
-    }).start(() => {
-      withTimeout && props.onClose();
-    });
+      useNativeDriver: false,
+    }).start();
   };
 
   const setToContentHeight = (contentHeight: number) => {
     Animated.timing(panelHeightValue, {
       duration: props.animationDuration,
       easing: Easing.quad,
-      toValue: sliderMaxHeight - contentHeight,
+      toValue: props.sliderMaxHeight - contentHeight,
       useNativeDriver: false,
     }).start();
   };
@@ -129,7 +134,7 @@ const BottomSheet = (props: BottomSheetProps) => {
   const expand = () => {
     const { animationDuration } = props;
     props.onOpen();
-    if (contentHeight && currentHeight > (sliderMaxHeight - contentHeight)) {
+    if (contentHeight && currentHeight > (props.sliderMaxHeight - contentHeight)) {
       setToContentHeight(contentHeight);
       return;
     }
@@ -143,7 +148,7 @@ const BottomSheet = (props: BottomSheetProps) => {
   };
 
   const collapse = () => {
-    if (contentHeight && currentHeight > (sliderMaxHeight - contentHeight)) {
+    if (contentHeight && currentHeight > (props.sliderMaxHeight - contentHeight)) {
       _dismiss();
       return;
     }
@@ -157,29 +162,28 @@ const BottomSheet = (props: BottomSheetProps) => {
 
   const _setSize = (e: LayoutChangeEvent) => {
     const newContentHeight = e.nativeEvent.layout.height;
-
     setContentHeight(newContentHeight);
     setToContentHeight(newContentHeight);
   };
 
-  const _dismiss = (withTimeout = true) => {
+  const _dismiss = () => {
     const { animationDuration } = props;
     Animated.timing(panelHeightValue, {
       duration: animationDuration,
       easing: Easing.quad,
-      toValue: sliderMaxHeight,
+      toValue: props.sliderMaxHeight,
       useNativeDriver: false,
     }).start(() => {
-      null;
+      props.onClose();
     });
-    fadeOut(withTimeout);
+    fadeOut();
   };
 
   const {
-    sliderMaxHeight,
     children,
   } = props;
 
+  const isModal = props.nativePlace === BottomSheetNativePlaceType.modal;
   return (
     <>
       <TouchableOpacity
@@ -195,10 +199,14 @@ const BottomSheet = (props: BottomSheetProps) => {
         {..._parentPanResponder.panHandlers}
         style={{
           ...styles.container,
-          height: sliderMaxHeight,
+          borderTopLeftRadius: isModal ? 0 : styles.container.borderTopLeftRadius,
+          borderTopRightRadius: isModal ? 0 : styles.container.borderTopRightRadius,
+          height: props.sliderMaxHeight,
+          marginTop: fullScreenHeight - props.sliderMaxHeight - ((!isModal && isAndroid10AndAbove) ? androidStatusBarHeight : 0),
           transform: [
             { translateY: panelHeightValue },
           ],
+          paddingTop: Platform.OS === 'ios' && isModal ? statusBarHeight : 0,
         }}
       >
         <View
@@ -215,13 +223,12 @@ const BottomSheet = (props: BottomSheetProps) => {
           <View
             onLayout={_setSize}
           >
-            <KeyboardAvoidingView
-              behavior="padding"
+            <View
               style={{ height: props.height }}
-              keyboardVerticalOffset={props.height * (1 - BOTTOM_SHEET_MAX_PERCENTAGE_SIZE)}
             >
               {children}
-            </KeyboardAvoidingView>
+            </View>
+
           </View>
         </View>
       </Animated.View>
@@ -232,22 +239,20 @@ const BottomSheet = (props: BottomSheetProps) => {
 BottomSheet.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node]),
   isOpen: PropTypes.bool,
-  sliderMaxHeight: PropTypes.number,
   animation: PropTypes.func,
   animationDuration: PropTypes.number,
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
-  expandToMaxHeightEnabled: PropTypes.bool
+  expandToMaxHeightEnabled: PropTypes.bool,
 };
 
 BottomSheet.defaultProps = {
   children: <View />,
   isOpen: true,
-  sliderMaxHeight: Dimensions.get('window').height * BOTTOM_SHEET_MAX_PERCENTAGE_SIZE,
   animationDuration: 200,
   onOpen: () => null,
   onClose: () => null,
-  expandToMaxHeightEnabled: false
+  expandToMaxHeightEnabled: false,
 };
 
 export default BottomSheet;

package/src/helpers/pushProvisioningService/helpers.ts

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { UNNativePromiseReject, UNVPError, UNVPErrorType } from './types';
+
+export const isUNVPError = (error: any): error is UNVPError => {
+  return 'code' in error &&
+    'description' in error &&
+    'type' in error &&
+    isUNVPErrorType(error.type) &&
+    'correlationId' in error;
+};
+
+const isUNVPErrorType = (type: any): type is UNVPErrorType => {
+  return Object.values(UNVPErrorType).includes(type);
+};
+
+export const isUNNativePromiseReject = (error: any): error is UNNativePromiseReject => {
+  return 'code' in error && 'message' in error;
+};
+
+export const promiseRejectToUNVPErrorType = (error: any): UNVPErrorType | null => {
+  // validate the shape of a promise reject we get from iOS/Android native
+  if (!isUNNativePromiseReject(error)) {
+    return null;
+  }
+  const parsedError = JSON.parse(error.message);
+  // validate the shape of an error we get from VDE SDK
+  if (!isUNVPError(parsedError)) {
+    return null;
+  }
+  return parsedError.type;
+};

package/src/helpers/pushProvisioningService/hooks/useCardWallet.ts

@@ -1,10 +1,15 @@
-import { useEffect, useState } from 'react';
-import { UNWalletCode, type UNWallet, UNWalletName } from '../../../types/shared/wallet.types';
+import { useEffect, useState, useRef } from 'react';
+import { UNWalletCode, UNWalletName } from '../../../types/shared/wallet.types';
+import type { UNWallet } from '../../../types/shared/wallet.types';
 import { UnitSDK } from '../../../unitSdkManager/UnitSdkManager';
 import { getMobileWalletPayload } from '../../../networking/requests/UNWalletPayloadRequest';
-import { useSelector } from 'react-redux';
-import { selectWallet } from '../../../slices/pushProvisioningSlice';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectWallet, setSignedNonce } from '../../../slices/pushProvisioningSlice';
 import { useLaunchInitialize } from './useLaunchInitialize';
+import { UNVPErrorType } from '../types';
+import { promiseRejectToUNVPErrorType } from '../helpers';
+import { UNErrorCodes, UNErrorData } from '../../../types/shared/error.types';
+import { isUNError } from '../../../types/internal/errorHelpers';
 
 export type CardToEncryptedPayload = {
   [cardId: string]: string;
@@ -14,13 +19,19 @@ export const useCardWallet = (cardId: string) => {
   const [currentUNWallet, setCurrentUNWallet] = useState<UNWallet>();
   const { signedNonce } = useSelector(selectWallet);
   const { initializePushProvisioning } = useLaunchInitialize();
+  const dispatch = useDispatch();
+  const isRecoveringSignedNonceRef = useRef<boolean>(false);
+
+  const shouldRecoverVPSDKForError = (errorType: UNVPErrorType) => {
+    const recoveringTypes = [UNVPErrorType.PayloadDecryptionFailed, UNVPErrorType.SessionExpired, UNVPErrorType.InvalidNonce];
+    return recoveringTypes.includes(errorType);
+  };
 
   useEffect(() => {
     const getEncryptedPayload = async () => {
       const env = UnitSDK.getEnv();
       const customerToken = UnitSDK.getCustomerToken();
       if (!env || !customerToken) return;
-
       // In case we use flow
       if (!signedNonce) {
         await initializePushProvisioning();
@@ -37,13 +48,32 @@ export const useCardWallet = (cardId: string) => {
         const encryptedPayload = await getEncryptedPayload();
         if (!encryptedPayload) return;
         const walletsResponse = await currentProvisioningModule.launchGetWallets(JSON.stringify({ encPayload: encryptedPayload }));
-
         const unWallet: UNWallet | null = parseWalletsResponse(walletsResponse);
         if (!unWallet) return;
         setCurrentUNWallet(unWallet);
         return;
       } catch (error) {
-        return Promise.reject(error);
+        console.error('Coudln\'t get card wallet data:', error);
+        if (isRecoveringSignedNonceRef.current) return;
+        isRecoveringSignedNonceRef.current = true;
+
+        // handle unit network api errors
+        if (isUNError(error)) {
+          const errors: UNErrorData[] = error.errors;
+          // errors will return in an array but hold only a single error element
+          if (errors[0]?.code === UNErrorCodes.INVALID_NONCE) {
+            dispatch(setSignedNonce(null));
+          }
+          return;
+        }
+
+        // handle VDE SDK errors
+        const errorType = promiseRejectToUNVPErrorType(error);
+        if (!errorType) return;
+        if (shouldRecoverVPSDKForError(errorType)) {
+          dispatch(setSignedNonce(null));
+          return;
+        }
       }
     };
 
@@ -51,7 +81,7 @@ export const useCardWallet = (cardId: string) => {
   }, [signedNonce, cardId]);
 
   return {
-    currentUNWallet
+    currentUNWallet,
   };
 
 };

package/src/helpers/pushProvisioningService/startProvisioning.ts

@@ -9,12 +9,10 @@ export const launchStartCardProvisioning = async (wallet: UNWallet | null) => {
     const response = await pushProvisioningModule.launchStartCardProvisioning(
       JSON.stringify({
         walletCode: wallet?.code,
-        walletName: wallet?.name
+        walletName: wallet?.name,
       }));
     return response;
-  }
-
-  catch (error) {
-    return Promise.reject(error);
+  } catch (error) {
+    console.log('ERROR -pushProvisioningModule.launchStartCardProvisioning: ', error);
   }
 };

package/src/helpers/pushProvisioningService/types.ts

@@ -0,0 +1,52 @@
+export enum UNVPErrorType {
+  EmptyAppId = 'EmptyAppId',
+  DeviceAuthenticationFailed = 'DeviceAuthenticationFailed',
+  DeviceRootDetection = 'DeviceRootDetection',
+  HookDetection = 'HookDetection',
+  PlayIntegrityCheckFailed = 'PlayIntegrityCheckFailed',
+  EmptyEncryptedPayload = 'EmptyEncryptedPayload',
+  NoWallets = 'NoWallets',
+  InvalidCardId = 'InvalidCardId',
+  ProvisioningNotAllowed = 'ProvisioningNotAllowed',
+  CancelledByUser = 'CancelledByUser',
+  GoogleWalletCreationFailed = 'GoogleWalletCreationFailed',
+  UnknownErrorOccurred = 'UnknownErrorOccurred',
+  WalletProvisioningInconclusive = 'WalletProvisioningInconclusive',
+  WalletProvisioningError = 'WalletProvisioningError',
+  NetworkFailure = 'NetworkFailure',
+  SessionExpired = 'SessionExpired',
+  InvalidInfo = 'InvalidInfo',
+  PayloadDecryptionFailed = 'PayloadDecryptionFailed',
+  ApiError = 'ApiError',
+  InvalidNonce = 'InvalidNonce',
+  SDKLockout = 'SDKLockout',
+  NoBrowserFound = 'NoBrowserFound',
+  TLCMFeatureNotSupported = 'TLCMFeatureNotSupported',
+  TLCMUnsupportedWallet = 'TLCMUnsupportedWallet',
+  TLCMDetailsNotFoundInPaySdk = 'TLCMDetailsNotFoundInPaySdk',
+  TLCMTokenStatusExists = 'TLCMTokenStatusExists',
+  TLCMInvalidOperationInput = 'TLCMInvalidOperationInput',
+  TLCMInvalidRequest = 'TLCMInvalidRequest',
+  TLCMUpdateStatusNotAllowed = 'TLCMUpdateStatusNotAllowed',
+  TLCMTokenNotFound = 'TLCMTokenNotFound',
+}
+
+export interface UNVPError {
+  code: string;
+  description: string;
+  type: UNVPErrorType;
+  correlationId: string;
+}
+
+export type UNNativePromiseReject = {
+  code: string;
+  message: string;
+}
+
+export interface UNMobileWalletPayload {
+  data: {
+    attributes: {
+      payload: string;
+    };
+  };
+}

package/src/helpers/store/helpers.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { store } from '../../store';
 
-export const withReduxStore = <Props, >(Component: React.ComponentType<any>) => {
+export const withReduxStore = <Props,>(Component: React.ComponentType<any>) => {
   const Wrapper = (props: Props) => {
     return (
       <Provider store={store} >

package/src/hooks/useListenerToEvent.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../store';
+import type { NativeMessageType } from '../messages/nativeMessages';
+import type { WebViewMessageType } from '../messages/webMessages';
+
+export type BusEventKey = NativeMessageType | WebViewMessageType
+
+type EventListener = {
+  busEventKey: BusEventKey,
+  action: (data: any) => void
+}
+
+export const useListenerToEvent = (listener: EventListener) => {
+  const isFirstRun = useRef(true);
+  const event = useSelector((state: RootState) => state.sharedEvents.event);
+  useEffect(() => {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      return;
+    }
+
+    if (event == null || event == undefined || event?.key != listener.busEventKey) {
+      return;
+    }
+
+    listener.action(event.data);
+
+  }, [event]);
+};