Maryia/DTRA-324/refactor: TS migration of trade.jsx and refactoring (#45

)

* chore: migrate trade to ts

* chore: remove unnecessary line

* chore: migrate to ts - test and init-store

* chore: remove unused test component

* chore: more files to ts

* chore: add types to trade

* chore: trade-chart to ts

* refactor: is_mobile

* chore: add types to SmartChartSwitcher

* chore: ToolbarWidgetsBeta to ts

* fix: a type

* fix: ws type

* chore: remove unused setting

* refactor: alphabetical order

* chore: index.js to index.ts

* refactor: address comments

packages/shared/src/utils/contract/contract-types.ts

@@ -1,10 +1,4 @@
-import {
-    ContractUpdate,
-    ContractUpdateHistory,
-    Portfolio1,
-    ProposalOpenContract,
-    TickSpotData,
-} from '@deriv/api-types';
+import { ContractUpdate, ContractUpdateHistory, Portfolio1, ProposalOpenContract } from '@deriv/api-types';
 
 export type TContractStore = {
     clearContractUpdateConfigValues: () => void;
@@ -44,5 +38,3 @@ type TLimitProperty = {
 };
 
 export type TLimitOrder = Partial<Record<'stop_loss' | 'stop_out' | 'take_profit', TLimitProperty>>;
-
-export type TTickSpotData = TickSpotData;

packages/shared/src/utils/helpers/logic.ts

@@ -8,7 +8,7 @@ type TIsSoldBeforeStart = Required<Pick<TContractInfo, 'sell_time' | 'date_start
 
 type TIsStarted = Required<Pick<TContractInfo, 'is_forward_starting' | 'current_spot_time' | 'date_start'>>;
 
-export const isContractElapsed = (contract_info: TContractInfo, tick?: TickSpotData) => {
+export const isContractElapsed = (contract_info: TContractInfo, tick?: null | TickSpotData) => {
     if (isEmptyObject(tick) || isEmptyObject(contract_info)) return false;
     const end_time = getEndTime(contract_info) || 0;
     if (end_time && tick && tick.epoch) {

packages/stores/src/mockStore.ts

@@ -223,6 +223,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             residence_list: [],
             should_restrict_bvi_account_creation: false,
             should_restrict_vanuatu_account_creation: false,
+            should_show_eu_content: false,
             fetchAccountSettings: jest.fn(),
             setAccountSettings: jest.fn(),
             upgradeable_landing_companies: [],
@@ -371,6 +372,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             setAppContentsScrollRef: jest.fn(),
             shouldNavigateAfterChooseCrypto: jest.fn(),
             simple_duration_unit: 't',
+            should_show_multipliers_onboarding: false,
             toggleHistoryTab: jest.fn(),
             toggleLanguageSettingsModal: jest.fn(),
             togglePositionsDrawer: jest.fn(),
@@ -629,7 +631,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             removeAccountSwitcherListener: jest.fn(),
             setAccountSwitcherListener: jest.fn(),
         },
-        chart_barrier_store: {},
+        chart_barrier_store: {} as TCoreStores['chart_barrier_store'],
         active_symbols: {
             active_symbols: [],
             setActiveSymbols: jest.fn(),

packages/stores/types.ts

@@ -258,6 +258,20 @@ type TActionProps = TButtonProps & {
     route?: string;
 };
 
+type TChartStateChangeOption = {
+    indicator_type_name?: string;
+    indicators_category_name?: string;
+    isClosed?: boolean;
+    is_favorite?: boolean;
+    is_info_open?: boolean;
+    is_open?: boolean;
+    chart_type_name?: string;
+    search_string?: string;
+    symbol?: string;
+    symbol_category?: string;
+    time_interval_name?: string;
+};
+
 type TNotificationMessage = {
     action?: TActionProps;
     className?: string;
@@ -461,6 +475,7 @@ type TClientStore = {
     residence_list: ResidenceList;
     should_restrict_bvi_account_creation: boolean;
     should_restrict_vanuatu_account_creation: boolean;
+    should_show_eu_content: boolean;
     updateMT5Status: () => Promise<void>;
     fetchAccountSettings: () => Promise<void>;
     setAccountSettings: (get_settings_response: GetSettings) => void;
@@ -646,6 +661,7 @@ type TUiStore = {
     is_ready_to_deposit_modal_visible: boolean;
     reports_route_tab_index: number;
     should_show_cancellation_warning: boolean;
+    should_show_multipliers_onboarding: boolean;
     toggleCancellationWarning: (state_change?: boolean) => void;
     toggleUnsupportedContractModal: (state_change: boolean) => void;
     toggleReports: (is_visible: boolean) => void;
@@ -803,7 +819,7 @@ type TContractTradeStore = {
         underlying,
     }: Partial<TAccumulatorContractBarriersData & { underlying: string }>) => void;
     updateChartType: (type: string) => void;
-    updateGranularity: (granularity: number) => void;
+    updateGranularity: (granularity: number | null) => void;
     updateProposal: (response: ProposalOpenContract) => void;
 };
 
@@ -986,7 +1002,7 @@ type TContractReplay = {
               }>;
     };
     chart_state: string;
-    chartStateChange: (state: string, option: Record<string, unknown>) => void;
+    chartStateChange: (state: string, option?: TChartStateChangeOption) => void;
     error_code?: string;
     error_message?: string;
     has_error: boolean;
@@ -1041,7 +1057,7 @@ export type TCoreStores = {
     gtm: TGtmStore;
     pushwoosh: Record<string, unknown>;
     contract_replay: TContractReplay;
-    chart_barrier_store: Record<string, unknown>;
+    chart_barrier_store: TBarriers[number];
     active_symbols: TActiveSymbolsStore;
 };
 

packages/trader/src/App/Components/Elements/chart-loader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Loading from '_common/components/loading';
 
 type TChartLoader = {
-    is_dark: boolean;
+    is_dark?: boolean;
     is_visible: boolean;
 };
 

packages/trader/src/App/app.tsx

@@ -5,6 +5,7 @@ import TradeHeaderExtensions from 'App/Containers/trade-header-extensions';
 import TradeFooterExtensions from 'App/Containers/trade-footer-extensions';
 import TradeSettingsExtensions from 'App/Containers/trade-settings-extensions';
 import { NetworkStatusToastErrorPopup } from 'Modules/Trading/Containers/toast-popup';
+import type { TWebSocket } from 'Types';
 import initStore from './init-store';
 import 'Sass/app.scss';
 import type { TCoreStores } from '@deriv/stores/types';
@@ -13,7 +14,7 @@ import TraderProviders from '../trader-providers';
 type Apptypes = {
     passthrough: {
         root_store: TCoreStores;
-        WS: unknown;
+        WS: TWebSocket;
     };
 };
 

packages/trader/src/App/init-store.js → packages/trader/src/App/init-store.ts

@@ -1,18 +1,20 @@
 import { configure } from 'mobx';
-import RootStore from 'Stores';
 import { setWebsocket } from '@deriv/shared';
 import ServerTime from '_common/base/server_time';
+import { TCoreStores } from '@deriv/stores/types';
+import type { TWebSocket } from 'Types';
+import RootStore from '../Stores';
 
 configure({ enforceActions: 'observed' });
 
-let root_store;
+let root_store: TCoreStores;
 
-const initStore = (core_store, websocket) => {
+const initStore = (core_store: TCoreStores, websocket: TWebSocket) => {
     if (root_store) return root_store;
 
     ServerTime.init(core_store.common);
     setWebsocket(websocket);
-    root_store = new RootStore(core_store);
+    root_store = new RootStore(core_store) as unknown as TCoreStores;
 
     return root_store;
 };