[WALL] george / WALL-5235 / Notification Missing on Trader’s Hub Page…

… for Wallet Accounts (#17802) * feat: enhance RootComponent and App to include notification messages UI * fix: update notifications display logic in App component
deriv-com · Dec 16, 2024 · 480b55c · 480b55c
1 parent 04c01f0
commit 480b55c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/core/src/App/Containers/RootComponent/root-component.jsx b/packages/core/src/App/Containers/RootComponent/root-component.jsx
@@ -20,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 });
@@ -35,6 +39,7 @@ const RootComponent = observer(props => {
             logout={async () => {
                 await oAuthLogout();
             }}
+            notificationMessagesUi={notification_messages_ui}
             onWalletsOnboardingTourGuideCloseHandler={onWalletsOnboardingTourGuideCloseHandler}
         />
     ) : (

diff --git a/packages/wallets/src/App.tsx b/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>
+                            {!isWalletsOnboardingTourGuideVisible && Notifications && <Notifications />}
                             <AppContent
                                 isWalletsOnboardingTourGuideVisible={isWalletsOnboardingTourGuideVisible}
                                 setPreferredLanguage={setPreferredLanguage}