refactor: replaced connect method in save-modal, stop-bot-modal and w…

packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/save-modal.tsx

@@ -14,7 +14,8 @@ import {
 import { Formik, Form, Field } from 'formik';
 import { Localize, localize } from '@deriv/translations';
 import { config, save_types } from '@deriv/bot-skeleton';
-import { connect } from 'Stores/connect';
+import { observer, useStore } from '@deriv/stores';
+import { useDBotStore } from 'Stores/useDBotStore';
 import IconRadio from './icon-radio';
 import { isMobile } from '@deriv/shared';
 
@@ -166,18 +167,22 @@ const SaveModalForm = ({
         }}
     </Formik>
 );
-const SaveModal = ({
-    bot_name,
-    button_status,
-    is_authorised,
-    is_save_modal_open,
-    onConfirmSave,
-    onDriveConnect,
-    toggleSaveModal,
-    validateBotName,
-    setCurrentFocus,
-    is_onscreen_keyboard_active,
-}: TSaveModalForm) => {
+const SaveModal = observer(() => {
+    const { save_modal, google_drive } = useDBotStore();
+    const { ui } = useStore();
+
+    const {
+        button_status,
+        is_save_modal_open,
+        onConfirmSave,
+        onDriveConnect,
+        toggleSaveModal,
+        validateBotName,
+        bot_name,
+    } = save_modal;
+    const { is_authorised } = google_drive;
+    const { is_onscreen_keyboard_active, setCurrentFocus } = ui;
+
     const is_mobile = isMobile();
     return is_mobile ? (
         <MobileFullPageModal
@@ -222,17 +227,6 @@ const SaveModal = ({
             />
         </Modal>
     );
-};
+});
 
-export default connect(({ save_modal, google_drive, ui }) => ({
-    button_status: save_modal.button_status,
-    is_authorised: google_drive.is_authorised,
-    is_save_modal_open: save_modal.is_save_modal_open,
-    is_onscreen_keyboard_active: ui.is_onscreen_keyboard_active,
-    onConfirmSave: save_modal.onConfirmSave,
-    onDriveConnect: save_modal.onDriveConnect,
-    toggleSaveModal: save_modal.toggleSaveModal,
-    validateBotName: save_modal.validateBotName,
-    bot_name: save_modal.bot_name,
-    setCurrentFocus: ui.setCurrentFocus,
-}))(SaveModal);
+export default SaveModal;

packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/stop-bot-modal.tsx

@@ -1,43 +1,27 @@
 import React from 'react';
-import { connect } from 'Stores/connect';
-import RootStore from 'Stores/root-store';
+import { observer } from '@deriv/stores';
+import { useDBotStore } from 'Stores/useDBotStore';
 import StopBotModalContent, { TStopBotModalContent } from '../stop-bot-modal-content';
 
-type TStopBotModal = TStopBotModalContent & {
-    stopMyBot: () => void;
-};
+const StopBotModal = observer(() => {
+    const { run_panel, quick_strategy, summary_card } = useDBotStore();
 
-const StopBotModal = ({
-    is_running,
-    is_contract_dialog_open,
-    is_stop_bot_dialog_open,
-    is_multiplier,
-    is_dialog_open,
-    closeMultiplierContract,
-    stopMyBot,
-    toggleStopBotDialog,
-}: TStopBotModal) => (
-    <StopBotModalContent
-        is_running={is_running}
-        onOkButtonClick={stopMyBot}
-        is_contract_dialog_open={is_contract_dialog_open}
-        is_stop_bot_dialog_open={is_stop_bot_dialog_open}
-        is_multiplier={is_multiplier}
-        closeMultiplierContract={closeMultiplierContract}
-        is_dialog_open={is_dialog_open}
-        toggleStopBotDialog={toggleStopBotDialog}
-    />
-);
+    const { is_dialog_open, is_contract_dialog_open, is_stop_bot_dialog_open, toggleStopBotDialog } = quick_strategy;
+    const { is_running, closeMultiplierContract, onOkButtonClick, stopMyBot } = run_panel;
+    const { is_multiplier } = summary_card;
 
-export default connect(({ run_panel, quick_strategy, summary_card }: RootStore) => ({
-    is_dialog_open: quick_strategy.is_dialog_open,
-    is_running: run_panel.is_running,
-    is_multiplier: summary_card.is_multiplier,
-    is_contract_dialog_open: quick_strategy.is_contract_dialog_open,
-    is_stop_bot_dialog_open: quick_strategy.is_stop_bot_dialog_open,
-    closeMultiplierContract: run_panel.closeMultiplierContract,
-    onOkButtonClick: run_panel.onOkButtonClick,
-    stopMyBot: run_panel.stopMyBot,
-    toggleStopBotDialog: quick_strategy.toggleStopBotDialog,
-    is_strategy_modal_open: quick_strategy.is_strategy_modal_open,
-}))(StopBotModal);
+    return (
+        <StopBotModalContent
+            is_running={is_running}
+            onOkButtonClick={stopMyBot}
+            is_contract_dialog_open={is_contract_dialog_open}
+            is_stop_bot_dialog_open={is_stop_bot_dialog_open}
+            is_multiplier={is_multiplier}
+            closeMultiplierContract={closeMultiplierContract}
+            is_dialog_open={is_dialog_open}
+            toggleStopBotDialog={toggleStopBotDialog}
+        />
+    );
+});
+
+export default StopBotModal;

packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/workspace-control.tsx

@@ -1,29 +1,27 @@
 import React from 'react';
 import { Icon } from '@deriv/components';
-import { connect } from 'Stores/connect';
-import RootStore from 'Stores/index';
+import { observer } from '@deriv/stores';
+import { useDBotStore } from 'Stores/useDBotStore';
 
-type TWorkspaceControl = {
-    onZoomInOutClick: (param: boolean) => void;
-};
+const WorkspaceControl = observer(() => {
+    const { dashboard } = useDBotStore();
+    const { onZoomInOutClick } = dashboard;
+    return (
+        <div className='load-strategy__preview-workspace-controls'>
+            <Icon
+                icon={'IcAddRounded'}
+                className='load-strategy__preview-workspace-icon'
+                custom_color='$color-black-1'
+                onClick={() => onZoomInOutClick(true)}
+            />
+            <Icon
+                icon={'IcMinusRounded'}
+                className='load-strategy__preview-workspace-icon'
+                custom_color='$color-black-1'
+                onClick={() => onZoomInOutClick(false)}
+            />
+        </div>
+    );
+});
 
-const WorkspaceControl = ({ onZoomInOutClick }: TWorkspaceControl) => (
-    <div className='load-strategy__preview-workspace-controls'>
-        <Icon
-            icon={'IcAddRounded'}
-            className='load-strategy__preview-workspace-icon'
-            custom_color='$color-black-1'
-            onClick={() => onZoomInOutClick(true)}
-        />
-        <Icon
-            icon={'IcMinusRounded'}
-            className='load-strategy__preview-workspace-icon'
-            custom_color='$color-black-1'
-            onClick={() => onZoomInOutClick(false)}
-        />
-    </div>
-);
-
-export default connect(({ dashboard }: RootStore) => ({
-    onZoomInOutClick: dashboard.onZoomInOutClick,
-}))(WorkspaceControl);
+export default WorkspaceControl;