feat: enhance RootComponent and App to include notification messages UI

Author: heorhi-deriv

packages/core/src/App/Containers/RootComponent/root-component.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { moduleLoader } from '@deriv/shared';
+
 import { useOauth2 } from '@deriv/hooks';
+import { moduleLoader } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 
 const AppStore = React.lazy(() =>
@@ -19,7 +20,11 @@ const Wallets = React.lazy(() =>
 
 const RootComponent = observer(props => {
     const { client, ui } = useStore();
-    const { is_wallets_onboarding_tour_guide_visible, setIsWalletsOnboardingTourGuideVisible } = ui;
+    const {
+        is_wallets_onboarding_tour_guide_visible,
+        setIsWalletsOnboardingTourGuideVisible,
+        notification_messages_ui,
+    } = ui;
     const { has_wallet, logout } = client;
 
     const { oAuthLogout } = useOauth2({ handleLogout: logout });
@@ -34,6 +39,7 @@ const RootComponent = observer(props => {
             logout={async () => {
                 await oAuthLogout();
             }}
+            notificationMessagesUi={notification_messages_ui}
             onWalletsOnboardingTourGuideCloseHandler={onWalletsOnboardingTourGuideCloseHandler}
         />
     ) : (

packages/wallets/src/App.tsx

@@ -13,6 +13,12 @@ import './index.scss';
 type TProps = {
     isWalletsOnboardingTourGuideVisible: boolean;
     logout: () => Promise<void>;
+    notificationMessagesUi: (props?: {
+        is_mt5?: boolean;
+        is_notification_loaded?: boolean;
+        show_trade_notifications?: boolean;
+        stopNotificationLoading?: VoidFunction;
+    }) => JSX.Element;
     onWalletsOnboardingTourGuideCloseHandler: VoidFunction;
 };
 
@@ -21,6 +27,7 @@ const LazyWalletTourGuide = lazy(() => import('./components/WalletTourGuide/Wall
 const App: React.FC<TProps> = ({
     isWalletsOnboardingTourGuideVisible,
     logout,
+    notificationMessagesUi: Notifications,
     onWalletsOnboardingTourGuideCloseHandler,
 }) => {
     const [preferredLanguage, setPreferredLanguage] = useState<TLanguageType | null>(null);
@@ -42,6 +49,7 @@ const App: React.FC<TProps> = ({
                 <TranslationProvider defaultLang={defaultLanguage} i18nInstance={i18nInstance}>
                     <React.Suspense fallback={<Loader />}>
                         <ModalProvider>
+                            {Notifications && <Notifications />}
                             <AppContent
                                 isWalletsOnboardingTourGuideVisible={isWalletsOnboardingTourGuideVisible}
                                 setPreferredLanguage={setPreferredLanguage}