diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx
index 88491d3d57ac..4173b0a8efc3 100644
--- a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx
@@ -3,6 +3,7 @@ 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 { localize } from '@deriv/translations';
import Chart from 'Components/chart';
import { DBOT_TABS, TAB_IDS } from 'Constants/bot-contents';
@@ -81,13 +82,44 @@ const Dashboard = ({
setTourDialogVisibility,
setHasTourEnded,
}: TDashboard) => {
- const { DASHBOARD, BOT_BUILDER, CHART } = DBOT_TABS;
+ const { DASHBOARD, BOT_BUILDER, CHART, TUTORIAL } = DBOT_TABS;
const is_tour_complete = React.useRef(true);
let bot_tour_token: string | number = '';
let onboard_tour_token: string | number = '';
let storage = '';
let tour_status: { [key: string]: string };
const is_mobile = isMobile();
+ const init_render = React.useRef(true);
+ const { ui } = useStore();
+ const { url_hashed_values } = ui;
+
+ let tab_value = active_tab;
+ const GetHashedValue = (tab: number) => {
+ tab_value = url_hashed_values?.split('#')[1];
+ if (tab_value === 'dashboard') return DASHBOARD;
+ if (tab_value === 'bot_builder') return BOT_BUILDER;
+ if (tab_value === 'chart') return CHART;
+ if (tab_value === 'tutorial') return TUTORIAL;
+ if (isNaN(tab_value) || isNaN(tab)) return active_tab;
+ if (tab_value > 4 || tab > 4) return active_tab;
+ return tab_value;
+ };
+ const active_hash_tab = GetHashedValue(active_tab);
+
+ React.useEffect(() => {
+ if (init_render.current) {
+ setActiveTab(Number(active_hash_tab));
+ if (is_mobile) handleTabChange(Number(active_hash_tab));
+ init_render.current = false;
+ } else {
+ let active_tab_name = 'dashboard';
+ if (active_tab === 0) active_tab_name = 'dashboard';
+ if (active_tab === 1) active_tab_name = 'bot_builder';
+ if (active_tab === 2) active_tab_name = 'chart';
+ if (active_tab === 3) active_tab_name = 'tutorial';
+ window.location.hash = active_tab_name;
+ }
+ }, [active_tab]);
const setTourStatus = (status: { [key: string]: string }) => {
if (status) {
@@ -210,7 +242,8 @@ const Dashboard = ({
'dashboard__container--active': has_tour_started && active_tab === DASHBOARD && is_mobile,
})}
>
-
+ {(active_tab === DASHBOARD || active_tab === BOT_BUILDER) && }
+
{has_tour_started &&
active_tab === DASHBOARD &&
(is_mobile ? (
diff --git a/packages/core/src/Stores/ui-store.js b/packages/core/src/Stores/ui-store.js
index fbb0e5385e22..34ab6547fb2f 100644
--- a/packages/core/src/Stores/ui-store.js
+++ b/packages/core/src/Stores/ui-store.js
@@ -6,6 +6,7 @@ import BaseStore from './base-store';
const store_name = 'ui_store';
export default class UIStore extends BaseStore {
+ url_hashed_values = '';
is_account_settings_visible = false;
is_positions_drawer_on = false;
is_reports_visible = false;
@@ -317,6 +318,7 @@ export default class UIStore extends BaseStore {
is_mobile: computed,
is_tablet: computed,
is_warning_scam_message_modal_visible: computed,
+ url_hashed_values: observable,
notifyAppInstall: action.bound,
onChangeUiStore: action.bound,
openAccountNeededModal: action.bound,
@@ -341,6 +343,7 @@ export default class UIStore extends BaseStore {
setCurrentFocus: action.bound,
setDarkMode: action.bound,
setHasOnlyForwardingContracts: action.bound,
+ setHashedValue: action.bound,
setIsAcuityModalOpen: action.bound,
setIsClosingCreateRealAccountModal: action.bound,
setIsNativepickerVisible: action.bound,
@@ -439,7 +442,12 @@ export default class UIStore extends BaseStore {
this.is_new_account = localStorage.getItem('isNewAccount') || false;
}
+ setHashedValue(url_hashed_values) {
+ this.url_hashed_values = url_hashed_values;
+ }
+
init(notification_messages) {
+ this.setHashedValue(window.location.hash);
this.notification_messages_ui = notification_messages;
}