[DTRA] / Kate / DTRA-420 / [Package 7] Tech debt: TS migration + Refa…

…ctoring (binary-com#10848)

* chore: empty commit

* Kate / DTRA-325 / TS migration: Form/TradeParams/Duration files in Trader package (#43)

* refactor: ts of expity text

* refactor: ts of duration toggle

* refactor: ts of simple duration

* fix: types

* feat: ts of duration wrapper

* refactor: ts of daration

* refactor: add ts for advanced duration

* refactor: ts of duration mobile

* refactor: unit test

* refactor: apply suggestions

* chore: add fallback for simple duration unit

* refactor: apply suggestions

* chore: refactor type

* refactor: remove code smells

* Kate / DTRA-421 / TS migration: Contract + ContractReplay in Trader package (#44)

* refactor: ts of contract file

* refactor: ts of contract replay

* refactor: add more types for contract store

* chore: expand type

* refactor: apply suggestions

* refactor: separate replay chart from contract replay

* refactor: add ternary rendering

* fix: revert latest changes

* refactor: remove code smells

* 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

* chore: remove code smells

* chore: change type

* refactor: apply suggestions

* fix: add missing string

* refactor: apply suggestions

* chore: add math trunc method

* chore: remove extra ui mocked prop

---------

Co-authored-by: Maryia <103177211+maryia-deriv@users.noreply.github.com>

packages/components/src/components/numpad/numpad.tsx

@@ -8,7 +8,7 @@ import { useLongPress } from '../../hooks';
 
 type TNumpad = {
     className?: string;
-    currency: string;
+    currency?: string;
     is_regular?: boolean;
     is_currency?: boolean;
     is_submit_disabled?: boolean;

packages/components/src/components/numpad/step-input.tsx

@@ -12,7 +12,7 @@ type TStepInput = {
     onChange: (increment_value: string | number, pip_size: number) => void;
     render?: (props: { value: string; className: string }) => React.ReactNode;
     pip_size: number;
-    currency: string;
+    currency?: string;
     label?: string;
 };
 

packages/components/src/components/tick-picker/tick-picker.tsx

@@ -14,7 +14,7 @@ type TTickPicker = {
     min_value: number;
     max_value: number;
     onSubmit: (props: { target: { value: number; name: string } }) => void;
-    submit_label: React.ReactElement;
+    submit_label: React.ReactElement | string;
     singular_label: string;
     plural_label: string;
     onValueChange: (tick_value: number) => void;

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/details.ts

@@ -3,6 +3,12 @@ import { localize } from '@deriv/translations';
 import moment from 'moment';
 import { TContractInfo } from '../contract';
 
+type TUnitMap = {
+    name_plural?: string;
+    name_singular?: string;
+    name?: string;
+};
+
 export const getDurationUnitValue = (obj_duration: moment.Duration) => {
     const duration_ms = obj_duration.asMilliseconds() / 1000;
     // Check with isEndTime to find out if value of duration has decimals
@@ -40,7 +46,7 @@ export const getUnitMap = () => {
         m: { name_plural: localize('minutes'), name_singular: localize('minute') },
         s: { name: localize('seconds') },
         t: { name_plural: localize('ticks'), name_singular: localize('tick') },
-    };
+    } as { [key: string]: TUnitMap };
 };
 
 const TIME = {

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

@@ -225,6 +225,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: [],
@@ -326,6 +327,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_cashier_visible: false,
             is_wallet_modal_visible: false,
             is_chart_layout_default: false,
+            is_chart_countdown_visible: false,
             is_closing_create_real_account_modal: false,
             is_dark_mode_on: false,
             is_language_settings_modal_on: false,
@@ -361,9 +363,9 @@ const mock = (): TStores & { is_mock: boolean } => {
             },
             resetRealAccountSignupParams: jest.fn(),
             notification_messages_ui: jest.fn(),
+            onChangeUiStore: jest.fn(),
             openPositionsDrawer: jest.fn(),
             openRealAccountSignup: jest.fn(),
-            onChangeUiStore: jest.fn(),
             setChartCountdown: jest.fn(),
             setIsWalletModalVisible: jest.fn(),
             setHasOnlyForwardingContracts: jest.fn(),
@@ -374,6 +376,8 @@ const mock = (): TStores & { is_mock: boolean } => {
             setPurchaseState: jest.fn(),
             setAppContentsScrollRef: jest.fn(),
             shouldNavigateAfterChooseCrypto: jest.fn(),
+            simple_duration_unit: 't',
+            toggleHistoryTab: jest.fn(),
             toggleLanguageSettingsModal: jest.fn(),
             togglePositionsDrawer: jest.fn(),
             toggleLinkExpiredModal: jest.fn(),
@@ -420,9 +424,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             setMT5MigrationModalEnabled: jest.fn(),
             toggleMT5MigrationModal: jest.fn(),
             vanilla_trade_type: 'VANILLALONGCALL',
-            is_chart_countdown_visible: false,
             is_additional_kyc_info_modal_open: false,
-            simple_duration_unit: 't',
             toggleAdditionalKycInfoModal: jest.fn(),
             is_kyc_information_submitted_modal_open: false,
             toggleKycInformationSubmittedModal: jest.fn(),
@@ -694,16 +696,42 @@ const mock = (): TStores & { is_mock: boolean } => {
         pushwoosh: {},
         contract_replay: {
             contract_store: {
+                accumulator_previous_spot_time: null,
+                barriers_array: [],
+                contract_config: {},
                 contract_info: {},
+                contract_update: {},
+                contract_update_history: [],
                 digits_info: {},
                 display_status: '',
+                getContractsArray: jest.fn(),
                 is_digit_contract: false,
                 is_ended: false,
+                marker: {
+                    contract_info: {},
+                    epoch_array: [],
+                    key: '',
+                    price_array: [],
+                    type: '',
+                },
+                markers_array: [],
             },
+            chart_state: '',
+            chartStateChange: jest.fn(),
+            has_error: false,
+            is_chart_loading: true,
+            is_forward_starting: false,
+            is_market_closed: false,
+            is_sell_requested: false,
+            onClickCancel: jest.fn(),
+            onClickSell: jest.fn(),
+            onMount: jest.fn(),
+            onUnmount: jest.fn(),
             removeErrorMessage: jest.fn(),
-            error_message: '',
+            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

@@ -263,6 +263,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;
@@ -467,6 +481,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;
@@ -603,11 +618,11 @@ type TUiStore = {
     is_positions_drawer_on: boolean;
     is_services_error_visible: boolean;
     is_unsupported_contract_modal_visible: boolean;
+    onChangeUiStore: ({ name, value }: { name: string; value: unknown }) => void;
     openPositionsDrawer: () => void;
     openRealAccountSignup: (
         value: 'maltainvest' | 'svg' | 'add_crypto' | 'choose' | 'add_fiat' | 'set_currency' | 'manage'
     ) => void;
-    onChangeUiStore: ({ name, value }: { name: string; value: number | null }) => void;
     notification_messages_ui: React.ElementType;
     setChartCountdown: (value: boolean) => void;
     populateFooterExtensions: (
@@ -643,6 +658,7 @@ type TUiStore = {
     toggleAccountsDialog: () => void;
     toggleAccountSettings: (props?: boolean) => void;
     toggleCashier: () => void;
+    toggleHistoryTab: (state_change?: boolean) => void;
     toggleLanguageSettingsModal: () => void;
     toggleLinkExpiredModal: (state_change: boolean) => void;
     togglePositionsDrawer: () => void;
@@ -815,7 +831,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;
 };
 
@@ -968,14 +984,72 @@ type TTradersHubStore = {
 
 type TContractReplay = {
     contract_store: {
+        accumulator_previous_spot_time: number | null;
+        barriers_array: Array<TCoreStores['chart_barrier_store']> | [];
+        contract_config:
+            | Record<string, never>
+            | {
+                  chart_type: string;
+                  granularity?: number;
+                  end_epoch?: number;
+                  start_epoch: number;
+                  scroll_to_epoch: number;
+              }
+            | null;
         contract_info: TPortfolioPosition['contract_info'];
+        contract_update: ProposalOpenContract['limit_order'];
+        contract_update_history: TContractStore['contract_update_history'];
         digits_info: { [key: number]: { digit: number; spot: string } };
         display_status: string;
+        getContractsArray: () => {
+            type: string;
+            markers: Array<{
+                color: string;
+                epoch: number;
+                quote?: number;
+                text?: string;
+                type: string;
+            }>;
+            props: {
+                hasPersistentBorders: boolean;
+            };
+        }[];
         is_digit_contract: boolean;
         is_ended: boolean;
+        marker: {
+            contract_info: TPortfolioPosition['contract_info'];
+            epoch_array: Array<number> | [];
+            key: string;
+            price_array: Array<number> | [];
+            type: string;
+        };
+        markers_array:
+            | []
+            | Array<{
+                  content_config: { className: string };
+                  marker_config: { ContentComponent: 'div'; x: string | number; y: string | number };
+                  react_key: string;
+                  type: string;
+              }>;
     };
+    chart_state: string;
+    chartStateChange: (state: string, option?: TChartStateChangeOption) => void;
+    error_code?: string;
+    error_message?: string;
+    has_error: boolean;
+    indicative_status?: string;
+    is_chart_loading: boolean;
+    is_forward_starting: boolean;
+    is_market_closed: boolean;
+    is_sell_requested: boolean;
+    margin?: number;
+    onClickCancel: (contract_id?: number) => void;
+    onClickSell: (contract_id?: number) => void;
+    onMount: (contract_id?: number) => void;
+    onUnmount: () => void;
     removeErrorMessage: () => void;
-    error_message: string;
+    removeAccountSwitcherListener: () => void;
+    setAccountSwitcherListener: (contract_id: string | number, history: Array<string>) => void;
 };
 type TGtmStore = {
     is_gtm_applicable: boolean;
@@ -1014,7 +1088,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/ContractDrawer/contract-drawer.tsx

@@ -74,7 +74,7 @@ const ContractDrawer = observer(
                 contract_end_time={getEndTime(contract_info)}
                 contract_info={contract_info}
                 contract_update_history={contract_update_history}
-                duration_unit={getDurationUnitText(getDurationPeriod(contract_info))}
+                duration_unit={getDurationUnitText(getDurationPeriod(contract_info)) ?? ''}
                 duration={getDurationTime(contract_info)}
                 exit_spot={exit_spot}
                 has_result={

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;
 };