);
-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 ? (
);
-};
+});
-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;
diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/stop-bot-modal.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/stop-bot-modal.tsx
index e0a6fbafbf1b..2aefb83c5a34 100644
--- a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/stop-bot-modal.tsx
+++ b/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 StopBotModalContent, { TStopBotModalContent } from '../stop-bot-modal-content';
+import { observer } from '@deriv/stores';
+import { useDBotStore } from '../../../../stores/useDBotStore';
+import StopBotModalContent 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) => (
-
-);
+ const { is_contract_dialog_open, is_stop_bot_dialog_open, toggleStopBotDialog } = quick_strategy;
+ const { is_running, closeMultiplierContract, stopMyBot, is_dialog_open } = 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 (
+
+ );
+});
+
+export default StopBotModal;
diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/workspace-control.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/workspace-control.tsx
index f657c674529a..df38f5715cda 100644
--- a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/workspace-control.tsx
+++ b/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 (
+
+ onZoomInOutClick(true)}
+ />
+ onZoomInOutClick(false)}
+ />
+
+ );
+});
-const WorkspaceControl = ({ onZoomInOutClick }: TWorkspaceControl) => (
-
- onZoomInOutClick(true)}
- />
- onZoomInOutClick(false)}
- />
-
-);
-
-export default connect(({ dashboard }: RootStore) => ({
- onZoomInOutClick: dashboard.onZoomInOutClick,
-}))(WorkspaceControl);
+export default WorkspaceControl;
diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx
index 4173b0a8efc3..c88dbf6dd0f1 100644
--- a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx
@@ -3,12 +3,11 @@ import classNames from 'classnames';
import { initTrashCan } from '@deriv/bot-skeleton/src/scratch/hooks/trashcan';
import { DesktopWrapper, Dialog, MobileWrapper, Tabs } from '@deriv/components';
import { isMobile } from '@deriv/shared';
-import { useStore } from '@deriv/stores';
+import { observer, useStore } from '@deriv/stores';
import { localize } from '@deriv/translations';
import Chart from 'Components/chart';
import { DBOT_TABS, TAB_IDS } from 'Constants/bot-contents';
-import { connect } from 'Stores/connect';
-import RootStore from 'Stores/index';
+import { useDBotStore } from 'Stores/useDBotStore';
import RunPanel from '../run-panel';
import RunStrategy from './dashboard-component/run-strategy';
import BotNotification from './bot-notification';
@@ -26,62 +25,29 @@ import TourSlider from './tour-slider';
import TourTriggrerDialog from './tour-trigger-dialog';
import Tutorial from './tutorial-tab';
-type TDialogOptions = {
- title: string;
- message: string;
- cancel_button_text?: string;
- ok_button_text?: string;
-};
+const Dashboard = observer(() => {
+ const { dashboard, load_modal, run_panel, quick_strategy } = useDBotStore();
+ const {
+ active_tab,
+ has_file_loaded,
+ has_tour_started,
+ setTourActive,
+ has_started_onboarding_tour,
+ setOnBoardTourRunState,
+ setBotBuilderTourState,
+ setTourDialogVisibility,
+ setHasTourEnded,
+ has_started_bot_builder_tour,
+ is_tour_dialog_visible,
+ setActiveTab,
+ setBotBuilderTokenCheck,
+ setOnBoardingTokenCheck,
+ } = dashboard;
+ const { onEntered } = load_modal;
+ const { is_dialog_open, is_drawer_open, dialog_options, onCancelButtonClick, onCloseDialog, onOkButtonClick } =
+ run_panel;
+ const { is_strategy_modal_open } = quick_strategy;
-type TDashboard = {
- active_tab: number;
- dialog_options: TDialogOptions;
- has_started_bot_builder_tour: boolean;
- has_file_loaded: boolean;
- has_started_onboarding_tour: boolean;
- has_tour_started: boolean;
- is_dialog_open: boolean;
- is_drawer_open: boolean;
- is_tour_dialog_visible: boolean;
- is_strategy_modal_open: boolean;
- onCancelButtonClick: () => void;
- onCloseDialog: () => void;
- onEntered: () => void;
- onOkButtonClick: () => void;
- setActiveTab: (active_tab: number) => void;
- setBotBuilderTourState: (param: boolean) => void;
- setOnBoardTourRunState: (param: boolean) => void;
- setBotBuilderTokenCheck: (param: string | number) => void;
- setOnBoardingTokenCheck: (param: string | number) => void;
- setTourActive: (param: boolean) => void;
- setTourDialogVisibility: (param: boolean) => void;
- setHasTourEnded: (param: boolean) => void;
-};
-
-const Dashboard = ({
- active_tab,
- is_drawer_open,
- dialog_options,
- has_file_loaded,
- has_tour_started,
- has_started_onboarding_tour,
- has_started_bot_builder_tour,
- is_dialog_open,
- is_tour_dialog_visible,
- is_strategy_modal_open,
- onCancelButtonClick,
- onCloseDialog,
- onEntered,
- onOkButtonClick,
- setActiveTab,
- setBotBuilderTokenCheck,
- setBotBuilderTourState,
- setOnBoardingTokenCheck,
- setOnBoardTourRunState,
- setTourActive,
- setTourDialogVisibility,
- setHasTourEnded,
-}: TDashboard) => {
const { DASHBOARD, BOT_BUILDER, CHART, TUTORIAL } = DBOT_TABS;
const is_tour_complete = React.useRef(true);
let bot_tour_token: string | number = '';
@@ -203,11 +169,13 @@ const Dashboard = ({
setOnBoardTourRunState(true);
} else {
setHasTourEnded(false);
- if (show_tour_dialog_mobile || show_tour_dialog_desktop) {
- setTourDialogVisibility(true);
- } else {
- setTourActive(true);
- setOnBoardTourRunState(true);
+ if (!is_strategy_modal_open) {
+ if (show_tour_dialog_mobile || show_tour_dialog_desktop) {
+ setTourDialogVisibility(true);
+ } else {
+ setTourActive(true);
+ setOnBoardTourRunState(true);
+ }
}
}
}
@@ -299,30 +267,6 @@ const Dashboard = ({
);
-};
+});
-export default connect(({ dashboard, run_panel, load_modal, quick_strategy }: RootStore) => ({
- active_tab: dashboard.active_tab,
- has_file_loaded: dashboard.has_file_loaded,
- has_tour_started: dashboard.has_tour_started,
- setTourActive: dashboard.setTourActive,
- has_started_onboarding_tour: dashboard.has_started_onboarding_tour,
- setOnBoardTourRunState: dashboard.setOnBoardTourRunState,
- setBotBuilderTourState: dashboard.setBotBuilderTourState,
- onEntered: load_modal.onEntered,
- setTourDialogVisibility: dashboard.setTourDialogVisibility,
- setHasTourEnded: dashboard.setHasTourEnded,
- is_dialog_open: run_panel.is_dialog_open,
- is_drawer_open: run_panel.is_drawer_open,
- has_started_bot_builder_tour: dashboard.has_started_bot_builder_tour,
- is_tour_dialog_visible: dashboard.is_tour_dialog_visible,
- dialog_options: run_panel.dialog_options,
- onCancelButtonClick: run_panel.onCancelButtonClick,
- onCloseDialog: run_panel.onCloseDialog,
- onOkButtonClick: run_panel.onOkButtonClick,
- setActiveTab: dashboard.setActiveTab,
- setBotBuilderTokenCheck: dashboard.setBotBuilderTokenCheck,
- setOnBoardingTokenCheck: dashboard.setOnBoardingTokenCheck,
- has_tour_ended: dashboard.has_tour_ended,
- is_strategy_modal_open: quick_strategy.is_strategy_modal_open,
-}))(Dashboard);
+export default Dashboard;
diff --git a/packages/bot-web-ui/src/components/dashboard/quick-strategy/quick-strategy.tsx b/packages/bot-web-ui/src/components/dashboard/quick-strategy/quick-strategy.tsx
index 9401f3905e71..b40dc76bef99 100755
--- a/packages/bot-web-ui/src/components/dashboard/quick-strategy/quick-strategy.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/quick-strategy/quick-strategy.tsx
@@ -1,15 +1,68 @@
import React from 'react';
import { MobileFullPageModal, Modal } from '@deriv/components';
import { isMobile } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
import { localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
-import RootStore from 'Stores/index';
-import { TQuickStrategyProps } from './quick-strategy.types';
+import { useDBotStore } from 'Stores/useDBotStore';
import { QuickStrategyContainer } from './quick-strategy-components';
-const QuickStrategy = (props: TQuickStrategyProps) => {
+const QuickStrategy = observer(() => {
const is_mobile = isMobile();
- const { is_strategy_modal_open, loadDataStrategy } = props;
+ const { quick_strategy, run_panel } = useDBotStore();
+ const { ui } = useStore();
+ const {
+ is_strategy_modal_open,
+ loadDataStrategy,
+ active_index,
+ description,
+ createStrategy,
+ duration_unit_dropdown,
+ types_strategies_dropdown,
+ getSizeDesc,
+ initial_values,
+ onChangeDropdownItem,
+ onChangeInputValue,
+ onHideDropdownList,
+ onScrollStopDropdownList,
+ selected_symbol,
+ selected_trade_type,
+ selected_duration_unit,
+ selected_type_strategy,
+ symbol_dropdown,
+ trade_type_dropdown,
+ toggleStopBotDialog,
+ is_contract_dialog_open,
+ is_stop_bot_dialog_open,
+ } = quick_strategy;
+ const { is_stop_button_visible, is_running } = run_panel;
+ const { is_onscreen_keyboard_active, setCurrentFocus } = ui;
+
+ const quick_strategy_props = {
+ symbol_dropdown,
+ trade_type_dropdown,
+ active_index,
+ description,
+ duration_unit_dropdown,
+ types_strategies_dropdown,
+ initial_values,
+ is_onscreen_keyboard_active,
+ is_stop_button_visible,
+ selected_symbol,
+ selected_trade_type,
+ selected_duration_unit,
+ selected_type_strategy,
+ is_running,
+ is_contract_dialog_open,
+ is_stop_bot_dialog_open,
+ createStrategy,
+ getSizeDesc,
+ onChangeDropdownItem,
+ onChangeInputValue,
+ onHideDropdownList,
+ onScrollStopDropdownList,
+ setCurrentFocus,
+ toggleStopBotDialog,
+ };
return (
<>
@@ -21,7 +74,7 @@ const QuickStrategy = (props: TQuickStrategyProps) => {
onClickClose={loadDataStrategy}
height_offset='8rem'
>
-
+
) : (
{
width={'78rem'}
>
-
+
)}
);
-};
+});
-export default connect(({ run_panel, quick_strategy, ui }: RootStore) => ({
- active_index: quick_strategy.active_index,
- description: quick_strategy.description,
- createStrategy: quick_strategy.createStrategy,
- duration_unit_dropdown: quick_strategy.duration_unit_dropdown,
- types_strategies_dropdown: quick_strategy.types_strategies_dropdown,
- getSizeDesc: quick_strategy.getSizeDesc,
- initial_values: quick_strategy.initial_values,
- is_onscreen_keyboard_active: ui.is_onscreen_keyboard_active,
- is_stop_button_visible: run_panel.is_stop_button_visible,
- onChangeDropdownItem: quick_strategy.onChangeDropdownItem,
- onChangeInputValue: quick_strategy.onChangeInputValue,
- onHideDropdownList: quick_strategy.onHideDropdownList,
- onScrollStopDropdownList: quick_strategy.onScrollStopDropdownList,
- selected_symbol: quick_strategy.selected_symbol,
- selected_trade_type: quick_strategy.selected_trade_type,
- selected_duration_unit: quick_strategy.selected_duration_unit,
- selected_type_strategy: quick_strategy.selected_type_strategy,
- symbol_dropdown: quick_strategy.symbol_dropdown,
- loadDataStrategy: quick_strategy.loadDataStrategy,
- trade_type_dropdown: quick_strategy.trade_type_dropdown,
- is_strategy_modal_open: quick_strategy.is_strategy_modal_open,
- setCurrentFocus: ui.setCurrentFocus,
- toggleStopBotDialog: quick_strategy.toggleStopBotDialog,
- is_running: run_panel.is_running,
- is_contract_dialog_open: quick_strategy.is_contract_dialog_open,
- is_stop_bot_dialog_open: quick_strategy.is_stop_bot_dialog_open,
-}))(QuickStrategy);
+export default QuickStrategy;
diff --git a/packages/bot-web-ui/src/components/dashboard/tour-guide.tsx b/packages/bot-web-ui/src/components/dashboard/tour-guide.tsx
index 57519e50dd96..1dadba2b5d58 100644
--- a/packages/bot-web-ui/src/components/dashboard/tour-guide.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/tour-guide.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import { Loading, Text } from '@deriv/components';
+import { observer } from '@deriv/stores';
import { localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
-import RootStore from 'Stores/index';
+import { useDBotStore } from 'Stores/useDBotStore';
type TTourGuide = {
content: string[];
@@ -12,7 +12,10 @@ type TTourGuide = {
step_index: number;
};
-const TourGuide = ({ content, img, label, onCloseTour, step_index }: TTourGuide) => {
+const TourGuide = observer(({ content, img, label, step_index }: TTourGuide) => {
+ const { dashboard } = useDBotStore();
+ const { onCloseTour } = dashboard;
+
const [has_image_loaded, setImageLoaded] = React.useState(false);
React.useEffect(() => {
@@ -62,9 +65,6 @@ const TourGuide = ({ content, img, label, onCloseTour, step_index }: TTourGuide)