From 419bc1bbcf42ac9c0ccc8f1e35183201e0ec2792 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <120543468+hamza-deriv@users.noreply.github.com>
Date: Thu, 3 Aug 2023 12:59:09 +0800
Subject: [PATCH] Hamza/hotfix: overflowing instruction in non-english language
 (#9556)

* fix: overflowing instruction in non-english language

* refactor: remove the height prop as it is already auto
---
 packages/core/src/App/Containers/Modals/app-modals.jsx   | 6 +++---
 .../Modals/mt5-notification/mt5-notification.tsx         | 9 ++++-----
 packages/core/src/Stores/traders-hub-store.js            | 6 +++---
 packages/stores/src/mockStore.ts                         | 2 +-
 packages/stores/types.ts                                 | 2 +-
 5 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/App/Containers/Modals/app-modals.jsx b/packages/core/src/App/Containers/Modals/app-modals.jsx
index 4d243e3e8bea..8234b2f58ec4 100644
--- a/packages/core/src/App/Containers/Modals/app-modals.jsx
+++ b/packages/core/src/App/Containers/Modals/app-modals.jsx
@@ -75,7 +75,7 @@ const AppModals = ({
     fetchFinancialAssessment,
     setCFDScore,
     content_flag,
-    is_mt5_notificaiton_modal_visible,
+    is_mt5_notification_modal_visible,
     active_account_landing_company,
     is_deriv_account_needed_modal_visible,
     is_warning_scam_message_modal_visible,
@@ -151,7 +151,7 @@ const AppModals = ({
         ComponentToLoad = <RealityCheckModal />;
     } else if (should_show_cooldown_modal) {
         ComponentToLoad = <CooldownWarningModal />;
-    } else if (is_mt5_notificaiton_modal_visible) {
+    } else if (is_mt5_notification_modal_visible) {
         ComponentToLoad = <MT5Notification />;
     } else if (should_show_assessment_complete_modal) {
         ComponentToLoad = <CompletedAssessmentModal />;
@@ -189,7 +189,7 @@ export default connect(({ client, ui, traders_hub }) => ({
     is_reality_check_visible: client.is_reality_check_visible,
     has_maltainvest_account: client.has_maltainvest_account,
     fetchFinancialAssessment: client.fetchFinancialAssessment,
-    is_mt5_notificaiton_modal_visible: traders_hub.is_mt5_notificaiton_modal_visible,
+    is_mt5_notification_modal_visible: traders_hub.is_mt5_notification_modal_visible,
     setCFDScore: client.setCFDScore,
     setShouldShowVerifiedAccount: ui.setShouldShowVerifiedAccount,
     should_show_cooldown_modal: ui.should_show_cooldown_modal,
diff --git a/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification.tsx b/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification.tsx
index eb9313bfdb36..adec8a48f760 100644
--- a/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification.tsx
+++ b/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification.tsx
@@ -6,9 +6,9 @@ import MT5NotificationDescription from './mt5-notification-description';
 
 const MT5Notification = observer(() => {
     const { traders_hub } = useStore();
-    const { setMT5NotificationModal, is_mt5_notificaiton_modal_visible } = traders_hub;
+    const { setMT5NotificationModal, is_mt5_notification_modal_visible } = traders_hub;
     const clickHandler = () => {
-        setMT5NotificationModal(!is_mt5_notificaiton_modal_visible);
+        setMT5NotificationModal(!is_mt5_notification_modal_visible);
     };
 
     return (
@@ -16,11 +16,10 @@ const MT5Notification = observer(() => {
             <DesktopWrapper>
                 <Modal
                     has_close_icon={false}
-                    is_open={is_mt5_notificaiton_modal_visible}
+                    is_open={is_mt5_notification_modal_visible}
                     title={localize('Trouble accessing Deriv MT5 on your mobile?')}
                     toggleModal={clickHandler}
                     className='mt5-notification-modal'
-                    height='455px'
                     width='510px'
                 >
                     <Modal.Body className='mt5-notification-modal-body'>
@@ -43,7 +42,7 @@ const MT5Notification = observer(() => {
                     portal_element_id='modal_root'
                     wrapper_classname='mt5-notification-modal-description'
                     title={localize('Trouble accessing Deriv MT5 on your mobile?')}
-                    visible={is_mt5_notificaiton_modal_visible}
+                    visible={is_mt5_notification_modal_visible}
                     onClose={() => {
                         setMT5NotificationModal(false);
                     }}
diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
index d116bca15f54..df7c15a03599 100644
--- a/packages/core/src/Stores/traders-hub-store.js
+++ b/packages/core/src/Stores/traders-hub-store.js
@@ -17,7 +17,7 @@ export default class TradersHubStore extends BaseStore {
     is_onboarding_visited = false;
     is_failed_verification_modal_visible = false;
     is_regulators_compare_modal_visible = false;
-    is_mt5_notificaiton_modal_visible = false;
+    is_mt5_notification_modal_visible = false;
     is_tour_open = false;
     is_account_type_modal_visible = false;
     account_type_card = '';
@@ -44,7 +44,7 @@ export default class TradersHubStore extends BaseStore {
             is_account_transfer_modal_open: observable,
             is_account_type_modal_visible: observable,
             is_regulators_compare_modal_visible: observable,
-            is_mt5_notificaiton_modal_visible: observable,
+            is_mt5_notification_modal_visible: observable,
             is_failed_verification_modal_visible: observable,
             is_tour_open: observable,
             modal_data: observable,
@@ -335,7 +335,7 @@ export default class TradersHubStore extends BaseStore {
     }
 
     setMT5NotificationModal(is_visible) {
-        this.is_mt5_notificaiton_modal_visible = is_visible;
+        this.is_mt5_notification_modal_visible = is_visible;
     }
 
     get has_any_real_account() {
diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
index d9685c7e4e18..46322066b9ba 100644
--- a/packages/stores/src/mockStore.ts
+++ b/packages/stores/src/mockStore.ts
@@ -383,7 +383,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             setTogglePlatformType: jest.fn(),
             toggleAccountTransferModal: jest.fn(),
             selectAccountType: jest.fn(),
-            is_mt5_notificaiton_modal_visible: false,
+            is_mt5_notification_modal_visible: false,
             setMT5NotificationModal: jest.fn(),
         },
         menu: {
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index d90f5872a943..4704688b8046 100644
--- a/packages/stores/types.ts
+++ b/packages/stores/types.ts
@@ -563,7 +563,7 @@ type TTradersHubStore = {
     platform_demo_balance: TBalance;
     cfd_real_balance: TBalance;
     selectAccountType: (account_type: string) => void;
-    is_mt5_notificaiton_modal_visible: boolean;
+    is_mt5_notification_modal_visible: boolean;
     setMT5NotificationModal: (value: boolean) => void;
 };