Vinu/fix: fixed minor code smells in bot-web-ui

packages/bot-web-ui/src/app/app.tsx

@@ -1,13 +1,14 @@
-import '../public-path'; // Leave this here (at the top)! OK boss!
+import '../public-path';
 import React from 'react';
-import type { TRootStore, TWebSocket } from 'Types';
+import { TStores } from '@deriv/stores/types';
+import type { TWebSocket } from 'Types';
 import AppContent from './app-content';
 import DBotProviders from './dbot-providers';
 
 type TAppProps = {
     passthrough: {
         WS: TWebSocket;
-        root_store: TRootStore;
+        root_store: TStores;
     };
 };
 

packages/bot-web-ui/src/app/dbot-providers.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { StoreProvider } from '@deriv/stores';
-import type { TRootStore, TWebSocket } from 'Types';
+import { TStores } from '@deriv/stores/types';
+import type { TWebSocket } from 'Types';
 import { DBotStoreProvider } from 'Stores/useDBotStore';
 
-const DBotProviders = ({ children, store, WS }: React.PropsWithChildren<{ store: TRootStore; WS: TWebSocket }>) => {
+const DBotProviders = ({ children, store, WS }: React.PropsWithChildren<{ store: TStores; WS: TWebSocket }>) => {
     return (
         <StoreProvider store={store}>
             <DBotStoreProvider ws={WS}>{children}</DBotStoreProvider>

packages/bot-web-ui/src/components/dashboard/bot-builder/toolbox/toolbox.tsx

@@ -80,7 +80,7 @@ const Toolbox = observer(() => {
                         />
                         <div className='db-toolbox__category-menu'>
                             {toolbox_dom &&
-                                (Array.from(toolbox_dom.childNodes) as HTMLElement[]).map((category, index) => {
+                                Array.from(toolbox_dom.childNodes as HTMLElement[]).map((category, index) => {
                                     if (category.tagName.toUpperCase() === 'CATEGORY') {
                                         const has_sub_category = hasSubCategory(category.children);
                                         const is_sub_category_open = sub_category_index.includes(index);

packages/bot-web-ui/src/components/dashboard/quick-strategy/quick-strategy.types.ts

@@ -82,18 +82,18 @@ export type TInputUniqFields = 'input_martingale_size' | 'input_alembert_unit' |
 export type TInputBaseFields = 'input_duration_value' | 'input_stake' | 'input_loss' | 'input_profit';
 export type TInputCommonFields = TInputBaseFields | TInputUniqFields;
 
-export type TSetFieldValue = (
-    element: 'button' | 'quick-strategy__duration-unit' | 'quick-strategy__duration-value' | string,
-    action: 'run' | 'edit' | string | number
-) => void;
-
 export type TSelectsFieldNames =
     | 'quick-strategy__type-strategy'
     | 'quick-strategy__symbol'
     | 'quick-strategy__trade-type'
     | 'quick-strategy__duration-unit'
     | '';
 
+export type TSetFieldValue = (
+    element: 'button' | 'quick-strategy__duration-unit' | 'quick-strategy__duration-value' | TSelectsFieldNames,
+    action: string | number
+) => void;
+
 export type TInputsFieldNames =
     | 'quick-strategy__duration-value'
     | 'quick-strategy__stake'

packages/bot-web-ui/src/components/network-toast-popup/network-toast-popup.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { MobileWrapper, Toast } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';

packages/bot-web-ui/src/stores/load-modal-store.ts

@@ -146,7 +146,7 @@ export default class LoadModalStore implements ILoadModalStore {
 
     get selected_strategy(): TStrategy {
         return (
-            this.dashboard_strategies.find((ws: { id: string }) => ws.id === this.selected_strategy_id) ||
+            this.dashboard_strategies.find((ws: { id: string }) => ws.id === this.selected_strategy_id) ??
             this.dashboard_strategies[0]
         );
     }
@@ -290,16 +290,13 @@ export default class LoadModalStore implements ILoadModalStore {
     onActiveIndexChange = (): void => {
         if (this.tab_name === tabs_title.TAB_RECENT) {
             this.previewRecentStrategy(this.selected_strategy_id);
-        } else {
-            // eslint-disable-next-line no-lonely-if
-            if (this.recent_workspace) {
-                setTimeout(() => {
-                    // Dispose of recent workspace when switching away from Recent tab.
-                    // Process in next cycle so user doesn't have to wait.
-                    this.recent_workspace?.dispose();
-                    this.recent_workspace = null;
-                });
-            }
+        } else if (this.recent_workspace) {
+            setTimeout(() => {
+                // Dispose of recent workspace when switching away from Recent tab.
+                // Process in next cycle so user doesn't have to wait.
+                this.recent_workspace?.dispose();
+                this.recent_workspace = null;
+            });
         }
 
         if (this.tab_name === tabs_title.TAB_LOCAL) {
@@ -310,16 +307,15 @@ export default class LoadModalStore implements ILoadModalStore {
                     this.drop_zone.addEventListener('drop', event => this.handleFileChange(event, false));
                 }
             }
-        } else {
-            // Dispose of local workspace when switching away from Local tab.
-            // eslint-disable-next-line no-lonely-if
-            if (this.local_workspace) {
-                setTimeout(() => {
-                    this.local_workspace?.dispose();
-                    this.local_workspace = null;
-                    this.setLoadedLocalFile(null);
-                }, 0);
-            }
+        }
+
+        // Dispose of local workspace when switching away from Local tab.
+        else if (this.local_workspace) {
+            setTimeout(() => {
+                this.local_workspace?.dispose();
+                this.local_workspace = null;
+                this.setLoadedLocalFile(null);
+            }, 0);
         }
 
         // Forget about drop zone when not on Local tab.

packages/bot-web-ui/src/stores/quick-strategy-store.ts

@@ -93,15 +93,15 @@ export default class QuickStrategyStore {
     selected_trade_type: TTradeType = (this.qs_cache.selected_trade_type as TTradeType) || {};
     selected_type_strategy: TTypeStrategy = (this.qs_cache.selected_type_strategy as TTypeStrategy) || {};
     selected_duration_unit: TDurationOptions = (this.qs_cache.selected_duration_unit as TDurationOptions) || {};
-    input_duration_value: string | number = this.qs_cache.input_duration_value || '';
-    input_stake: string = this.qs_cache.input_stake || '';
-    input_martingale_size: string = this.qs_cache.input_martingale_size || '';
-    input_alembert_unit: string = this.qs_cache.input_alembert_unit || '';
-    input_oscar_unit: string = this.qs_cache.input_oscar_unit || '';
-    input_loss: string = this.qs_cache.input_loss || '';
-    input_profit: string = this.qs_cache.input_profit || '';
-    active_index: number = this.selected_type_strategy.index || 0;
-    description: string = this.qs_cache.selected_type_strategy?.description || '';
+    input_duration_value: string | number = this.qs_cache.input_duration_value ?? '';
+    input_stake: string = this.qs_cache.input_stake ?? '';
+    input_martingale_size: string = this.qs_cache.input_martingale_size ?? '';
+    input_alembert_unit: string = this.qs_cache.input_alembert_unit ?? '';
+    input_oscar_unit: string = this.qs_cache.input_oscar_unit ?? '';
+    input_loss: string = this.qs_cache.input_loss ?? '';
+    input_profit: string = this.qs_cache.input_profit ?? '';
+    active_index: number = this.selected_type_strategy.index ?? 0;
+    description: string = this.qs_cache.selected_type_strategy?.description ?? '';
     types_strategies_dropdown: TTypeStrategiesDropdown = [];
     symbol_dropdown: TSymbolDropdown = [];
     trade_type_dropdown: TTradeTypeDropdown = [];
@@ -139,7 +139,7 @@ export default class QuickStrategyStore {
 
     setDescription(type_strategy: TTypeStrategy): void {
         this.description =
-            this.types_strategies_dropdown?.find(strategy => strategy.value === type_strategy.value)?.description || '';
+            this.types_strategies_dropdown?.find(strategy => strategy.value === type_strategy.value)?.description ?? '';
     }
 
     setDurationUnitDropdown(duration_unit_options: TDurationUnitDropdown): void {
@@ -485,7 +485,7 @@ export default class QuickStrategyStore {
         let first_duration_unit: TDurationOptions = duration_options[0];
         if (this.selected_duration_unit && duration_options?.some(e => e.value === this.selected_duration_unit.value)) {
             first_duration_unit =
-                duration_options?.find(e => e.value === this.selected_duration_unit.value) ||
+                duration_options?.find(e => e.value === this.selected_duration_unit.value) ??
                 this.selected_duration_unit;
             runInAction(() => {
                 first_duration_unit.text = this.getFieldValue(duration_options, this.selected_duration_unit.value);
@@ -496,7 +496,7 @@ export default class QuickStrategyStore {
         if (first_duration_unit) {
             this.setSelectedDurationUnit(first_duration_unit);
             this.updateDurationValue(
-                this.qs_cache?.selected_duration_unit?.value || this.selected_duration_unit.value,
+                this.qs_cache?.selected_duration_unit?.value ?? this.selected_duration_unit.value,
                 setFieldValue
             );
 

packages/bot-web-ui/src/stores/root-store.ts

@@ -1,4 +1,5 @@
-import type { TDbot, TRootStore, TWebSocket } from 'Types';
+import { TStores } from '@deriv/stores/types';
+import type { TDbot, TWebSocket } from 'Types';
 import AppStore from './app-store';
 import BlocklyStore from './blockly-store';
 import ChartStore from './chart-store';
@@ -48,7 +49,7 @@ export default class RootStore {
     public blockly_store: BlocklyStore;
     public data_collection_store: DataCollectionStore;
 
-    constructor(core: TRootStore, ws: TWebSocket, dbot: TDbot) {
+    constructor(core: TStores, ws: TWebSocket, dbot: TDbot) {
         this.ws = ws;
         this.dbot = dbot;
         this.app = new AppStore(this, core);

packages/bot-web-ui/src/stores/save-modal-store.ts

@@ -163,7 +163,7 @@ export default class SaveModalStore implements ISaveModalStore {
         this.updateBotName(bot_name);
 
         if (active_tab === 0) {
-            const workspace_id = selected_strategy.id || Blockly?.utils?.genUid();
+            const workspace_id = selected_strategy.id ?? Blockly?.utils?.genUid();
             await this.addStrategyToWorkspace(workspace_id, is_local, save_as_collection, bot_name, xml);
             if (main_strategy) await loadStrategyToBuilder(main_strategy);
         } else {

packages/hooks/src/__tests__/useCFDAllAccounts.spec.tsx

@@ -12,7 +12,7 @@ describe('useCFDAllAccounts', () => {
         );
         const { result } = renderHook(() => useCFDAllAccounts(), { wrapper });
 
-        expect(result.current.length).toBe(0);
+        expect(result.current).toHaveLength(0);
     });
 
     test('should return proper data when client has MT5 accounts', async () => {
@@ -33,7 +33,7 @@ describe('useCFDAllAccounts', () => {
         );
         const { result } = renderHook(() => useCFDAllAccounts(), { wrapper });
 
-        expect(result.current.length).toBe(1);
+        expect(result.current).toHaveLength(1);
     });
 
     test('should return proper data when client has dxtrade accounts', async () => {
@@ -54,7 +54,7 @@ describe('useCFDAllAccounts', () => {
         );
         const { result } = renderHook(() => useCFDAllAccounts(), { wrapper });
 
-        expect(result.current.length).toBe(1);
+        expect(result.current).toHaveLength(1);
     });
 
     test('should return proper data when client has ctrader accounts', async () => {
@@ -75,7 +75,7 @@ describe('useCFDAllAccounts', () => {
         );
         const { result } = renderHook(() => useCFDAllAccounts(), { wrapper });
 
-        expect(result.current.length).toBe(1);
+        expect(result.current).toHaveLength(1);
     });
 
     test('should return proper data when client has MT5, ctrader and dxtrade accounts', async () => {
@@ -110,6 +110,6 @@ describe('useCFDAllAccounts', () => {
         );
         const { result } = renderHook(() => useCFDAllAccounts(), { wrapper });
 
-        expect(result.current.length).toBe(3);
+        expect(result.current).toHaveLength(3);
     });
 });

packages/stores/src/mockStore.ts

@@ -470,6 +470,21 @@ const mock = (): TStores & { is_mock: boolean } => {
             update: jest.fn(),
             unmount: jest.fn(),
         },
+        gtm: {
+            is_gtm_applicable: false,
+            visitorId: 'visitorId',
+            common_variables: {
+                language: 'en',
+                theme: 'dark',
+                platform: 'DBot',
+                loggedIn: false,
+            },
+            accountSwitcherListener: jest.fn(),
+            pushDataLayer: jest.fn(),
+            pushTransactionData: jest.fn(),
+            eventHandler: jest.fn(),
+            setLoginFlag: jest.fn(),
+        },
     };
 };
 

packages/stores/types.ts

@@ -14,6 +14,7 @@ import type {
     SetFinancialAssessmentRequest,
     SetFinancialAssessmentResponse,
     StatesList,
+    Transaction,
 } from '@deriv/api-types';
 import type { Moment } from 'moment';
 import type { RouteComponentProps } from 'react-router';
@@ -645,6 +646,26 @@ type TTradersHubStore = {
     showTopUpModal: () => void;
 };
 
+type TGtmStore = {
+    is_gtm_applicable: boolean;
+    visitorId: Readonly<string>;
+    common_variables: Readonly<{
+        language: string;
+        visitorId?: string;
+        currency?: string;
+        userId?: string;
+        email?: string;
+        loggedIn: boolean;
+        theme: 'dark' | 'light';
+        platform: 'DBot' | 'MT5' | 'DTrader' | 'undefined';
+    }>;
+    accountSwitcherListener: () => Promise<Record<string, unknown>>;
+    pushDataLayer: (data: Record<string, unknown>) => void;
+    pushTransactionData: (response: Transaction, extra_data: Record<string, unknown>) => void;
+    eventHandler: (get_settings: GetSettings) => void;
+    setLoginFlag: (event_name: string) => void;
+};
+
 /**
  * This is the type that contains all the `core` package stores
  */
@@ -660,6 +681,7 @@ export type TCoreStores = {
     modules: Record<string, any>;
     notifications: TNotificationStore;
     traders_hub: TTradersHubStore;
+    gtm: TGtmStore;
 };
 
 export type TStores = TCoreStores & {