From ec0f96e95a50a52fe14d037234c7309475542bcb Mon Sep 17 00:00:00 2001
From: kate-deriv <121025168+kate-deriv@users.noreply.github.com>
Date: Wed, 11 Oct 2023 16:19:54 +0300
Subject: [PATCH] Kate / DTRA-375 / [Package 5] Tech debt (#9809)

* fix: ts-migrate trade-params

* fix: sonarcloud

* fix: pull in changes from tech debt 2 package

* fix: resolve comments

* fix: move type to common prop types

* fix: move type to common prop types

* fix: move type to common prop types file

* fix: resolve comments

* Kate / DTRA-321 / TS migration of trade-params and trade-params-mobile (#6)

* refactor: migrate trade params and started mobile version

* refactor: ts migration of trade params mobile

* chore: add nessasary prop

* refactor: apply suggestions

* chore: change todo text

* refactor: add import

* fix: circleCI error

* fix: ts migrate trade-footer-extensions.jsx

* fix: fix import

* fix: remove progress-slider-stream since its not used

* fix: resolve comments

* fix: reset with master

* fix: reset with master

* fix: reset with master

* fix: reset with master

* fix: circleCI

* fix: togglePositions folder

* fix: dtra-346 marketisclosed and marketcountdowntimer migration

* fix: bug

* Maryia/dtra-270/TS migration: trade-store (#5)

* chore: prepare for migration

* chore: add more types to trade-store

* chore: add more types to trade-store

* chore: add more types to trade-store

* chore: add more types to trade-store

* chore: migrated trade-store to ts

* chore: improve types in trade-store

* fix: type

* revert: hooks package installation

* refactor: address review

* fix: resolve comments

* feat: add ts migartion of store

* refactor: add prev changes

* chore: empty commit

* fix: add lost mocked

* fix: resolve comments

* Kate / DTRA-354 / Components/Form/Purchase files in Trader package (#21)

* refactor: ts migartion of purchase files

* refactor: remove duplicated types

* refactor: apply suggestions

* maryia/fix: sonarcloud warnings (#7)

* fix: sonarcloud warnings

* fix: Unexpected end of JSON input

* fix: bug

* fix: sonarcloud

* fix: reorder props

* fix: test cases

* fix: coveralls

* fix: coveralls

* fix: this component doesnt exist anymore, hence test was also removed

* henry/dtra-356/fix: ts-migration-digitsJSX (#24)

* fix: initial commit

* fix: ts migrate digits JSX

* fix: small type change

* fix: comment

* chore: removed unused state

* Maryia/dtra-355/Migrate ContractDrawer files to TS (#22)

* feat: migrated swipeable-components to TS

* feat: migrated market-closed-contract-overlay & index to TS

* chore: migrated contract-drawer-card.tsx to ts

* build: fix type

* chore: migrated contract-drawer to ts

* chore: fixed existing types in digits and logic

* chore: sort types properties in alphabetical order

* Kate/dtra 357/ts contract audit files (#23)

* refactor: apply suggestion from prev pr

* refactor: start ts migration of contract audit

* chore: change comment

* refactor: ts of contract audit item

* refactor: ts migration of contract details

* refactor: ts migration of contract history

* refactor: add preprepared types

* refactor: tests

* chore: apply nit

* refactor: apply suggestions

* refactor: apply suggestions

* chore: fix of sonar cloud

* Maryia/dtra-373/remove localize from ContractCardHeader component (#25)

* refactor: remove localize from contract-card-header

* refactor: use Localize component instead of localize helper

* build: install RTL deps in shared package

* feat: merge previous tech debt branch

* fix: sonar cloud codesmells

* Merge branch kate/ts_migration_trader_package_4 into kate/ts_migration_trader_package_5

* Kate / DTRA-378 / TS migration: Multiplier components and containers in Trader package (#26)

* refactor: ts of cancel deal and risk managment info

* fix: types in dialog tsx

* refactor: start ts of multiplier options

* refactor: ts of mult amount modal

* refactor: remove default val from basis component

* fix: type of amount mobile

* refactor: applied suggestions

* refactor: ts of multiplier info (#28)

* Henry/dtra 376/fix: ts migration positionsdrawer folder (#27)

* fix: positions drawer folder

* fix: coveralls

* fix: where is my commit

* fix: found commits

* fix: file rename

* fix: comments

* fix: comments

* fix: correct logic

* fix: remove unused props

* fix: types

* refactor: remove code mells

* fix: ts-migrate-populate header (#30)

* Maryia/DTRA-377/TS migration: TradingDatePicker + TradingTimePicker + TimePicker + Dialog (#29)

* chore: timepicker to ts

* chore: trading timepicker to ts

* chore: add types for TradingDatePicker & DatePicker

* refactor: added default values

* refactor: remove code small

* chore: empty commit

* fix: not using index as key (#31)

* fix: ternary bug

* fix: build TS errors (#32)

* refactor: apply suggestions

* refactor: change type of time

* chore: empty commit

* refactor: tests

* fix: conflicts

* fix: conflicts

* fix: tests

* fix: types in tests

* fix: test extention

* fix: add turbos to types back

* fix: add backup for target name

* fix: revert empty strings

---------

Co-authored-by: Henry Hein <henry@regentmarkets.com>
Co-authored-by: Maryia <103177211+maryia-deriv@users.noreply.github.com>
Co-authored-by: henry-deriv <118344354+henry-deriv@users.noreply.github.com>
---
 .../src/components/calendar/calendar-body.tsx |  6 +-
 .../components/calendar/calendar-footer.tsx   |  2 +-
 .../src/components/calendar/calendar.tsx      | 30 +++---
 .../calendar/views/calendar-days.tsx          |  2 +-
 .../result-overlay/result-overlay.tsx         |  4 +-
 .../date-picker/date-picker-calendar.tsx      | 24 ++---
 .../date-picker/date-picker-native.tsx        | 22 ++---
 .../components/date-picker/date-picker.tsx    | 22 +++--
 .../src/components/dialog/dialog.tsx          |  2 +-
 .../components/input-field/input-field.tsx    | 16 ++--
 .../positions-drawer-card.tsx                 | 44 ++++-----
 .../progress-slider-mobile.tsx                |  4 +-
 .../progress-ticks-mobile.tsx                 |  2 +-
 .../composite-calendar-mobile.tsx             | 24 ++---
 .../shared/src/utils/constants/contract.ts    |  2 +-
 packages/shared/src/utils/date/date-time.ts   |  2 +-
 packages/stores/src/mockStore.ts              |  1 +
 packages/stores/types.ts                      |  4 +-
 .../ContractAudit/contract-details.tsx        |  4 +-
 .../positions-result-mobile.spec.tsx          | 20 ++++
 .../__tests__/result-mobile.spec.js           | 20 ----
 ...ositions-helper.js => positions-helper.ts} |  0
 .../helpers/{index.js => index.ts}            |  0
 ...ositions-helper.js => positions-helper.ts} | 29 +++---
 .../Elements/PositionsDrawer/index.js         |  3 -
 .../Elements/PositionsDrawer/index.ts         |  3 +
 ...itions-drawer.jsx => positions-drawer.tsx} | 55 +++++++----
 ...odal-card.jsx => positions-modal-card.tsx} | 84 ++++++++---------
 ...mobile.jsx => positions-result-mobile.tsx} | 15 ++-
 .../toggle-positions-mobile.spec.tsx          |  2 +-
 .../toggle-positions-mobile.tsx               |  4 +-
 .../TimePicker/{dialog.jsx => dialog.tsx}     | 56 +++++++-----
 .../App/Components/Form/TimePicker/index.js   |  3 -
 .../App/Components/Form/TimePicker/index.ts   |  3 +
 .../{time-picker.jsx => time-picker.tsx}      | 47 +++++-----
 .../src/App/Components/Routes/binary-link.jsx |  2 +-
 ...opulate-header.jsx => populate-header.tsx} |  0
 .../Contract/Components/Digits/digits.tsx     |  1 -
 .../accumulators-chart-elements.spec.tsx      |  2 +-
 .../Markers/accumulators-chart-elements.tsx   |  2 +-
 ...deal-mobile.jsx => cancel-deal-mobile.tsx} | 91 ++++++++++++-------
 ...ment-info.jsx => risk-management-info.tsx} |  2 +-
 .../Components/Form/DatePicker/index.js       |  3 -
 .../Components/Form/DatePicker/index.ts       |  3 +
 ...ate-picker.jsx => trading-date-picker.tsx} | 60 ++++++------
 .../Components/Form/TimePicker/index.js       |  3 -
 .../Components/Form/TimePicker/index.ts       |  3 +
 ...ime-picker.jsx => trading-time-picker.tsx} |  0
 .../Duration/advanced-duration.jsx            |  1 -
 .../Multiplier/{info.jsx => info.tsx}         | 58 ++++++++----
 .../Form/TradeParams/Multiplier/widgets.jsx   |  4 +-
 .../Form/TradeParams/amount-mobile.tsx        | 31 ++++---
 .../Components/Form/TradeParams/amount.tsx    |  5 +-
 .../Trading/Components/Form/screen-small.tsx  |  2 +-
 ...-modal.jsx => multiplier-amount-modal.tsx} | 45 +++++----
 ...ier-options.jsx => multiplier-options.tsx} | 17 ++--
 ...-dialog.jsx => risk-management-dialog.tsx} | 38 +++++---
 .../radio-group-options-modal.spec.jsx        | 81 -----------------
 .../radio-group-options-modal.spec.tsx        |  2 +-
 .../Containers/radio-group-options-modal.tsx  |  3 +-
 .../Containers/trade-params-mobile.tsx        |  2 -
 .../Trading/Containers/trade-params.tsx       |  2 +-
 .../Modules/Trading/Helpers/end-time.ts       |  8 +-
 .../Modules/Trading/Helpers/multiplier.ts     |  2 +-
 .../Trading/Helpers/preview-proposal.ts       | 14 ++-
 65 files changed, 543 insertions(+), 505 deletions(-)
 create mode 100644 packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-result-mobile.spec.tsx
 delete mode 100644 packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js
 rename packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/__tests__/{positions-helper.js => positions-helper.ts} (100%)
 rename packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/{index.js => index.ts} (100%)
 rename packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/{positions-helper.js => positions-helper.ts} (61%)
 delete mode 100644 packages/trader/src/App/Components/Elements/PositionsDrawer/index.js
 create mode 100644 packages/trader/src/App/Components/Elements/PositionsDrawer/index.ts
 rename packages/trader/src/App/Components/Elements/PositionsDrawer/{positions-drawer.jsx => positions-drawer.tsx} (80%)
 rename packages/trader/src/App/Components/Elements/PositionsDrawer/{positions-modal-card.jsx => positions-modal-card.tsx} (90%)
 rename packages/trader/src/App/Components/Elements/PositionsDrawer/{result-mobile.jsx => positions-result-mobile.tsx} (89%)
 rename packages/trader/src/App/Components/Form/TimePicker/{dialog.jsx => dialog.tsx} (78%)
 delete mode 100644 packages/trader/src/App/Components/Form/TimePicker/index.js
 create mode 100644 packages/trader/src/App/Components/Form/TimePicker/index.ts
 rename packages/trader/src/App/Components/Form/TimePicker/{time-picker.jsx => time-picker.tsx} (77%)
 rename packages/trader/src/App/Containers/{populate-header.jsx => populate-header.tsx} (100%)
 rename packages/trader/src/Modules/Trading/Components/Elements/Multiplier/{cancel-deal-mobile.jsx => cancel-deal-mobile.tsx} (63%)
 rename packages/trader/src/Modules/Trading/Components/Elements/Multiplier/{risk-management-info.jsx => risk-management-info.tsx} (98%)
 delete mode 100644 packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.js
 create mode 100644 packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.ts
 rename packages/trader/src/Modules/Trading/Components/Form/DatePicker/{trading-date-picker.jsx => trading-date-picker.tsx} (77%)
 delete mode 100644 packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.js
 create mode 100644 packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.ts
 rename packages/trader/src/Modules/Trading/Components/Form/TimePicker/{trading-time-picker.jsx => trading-time-picker.tsx} (100%)
 rename packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/{info.jsx => info.tsx} (71%)
 rename packages/trader/src/Modules/Trading/Containers/Multiplier/{multiplier-amount-modal.jsx => multiplier-amount-modal.tsx} (75%)
 rename packages/trader/src/Modules/Trading/Containers/Multiplier/{multiplier-options.jsx => multiplier-options.tsx} (79%)
 rename packages/trader/src/Modules/Trading/Containers/Multiplier/{risk-management-dialog.jsx => risk-management-dialog.tsx} (80%)
 delete mode 100644 packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.jsx

diff --git a/packages/components/src/components/calendar/calendar-body.tsx b/packages/components/src/components/calendar/calendar-body.tsx
index eb16d0a4ef1e..4b097cbdcbd9 100644
--- a/packages/components/src/components/calendar/calendar-body.tsx
+++ b/packages/components/src/components/calendar/calendar-body.tsx
@@ -5,13 +5,13 @@ import { CommonPropTypes } from './views/types';
 type TBodyProps = CommonPropTypes & {
     calendar_view: string;
     date_format: string;
-    disabled_days: number[];
+    disabled_days?: number[];
     start_date: string;
-    events: Array<{
+    events?: Array<{
         dates: string[];
         descrip: string;
     }>;
-    has_range_selection: boolean;
+    has_range_selection?: boolean;
     hovered_date: string | null;
     onMouseLeave?: React.MouseEventHandler<HTMLSpanElement>;
     onMouseOver?: React.MouseEventHandler<HTMLSpanElement>;
diff --git a/packages/components/src/components/calendar/calendar-footer.tsx b/packages/components/src/components/calendar/calendar-footer.tsx
index 9f1853dafa5b..e00a785bbbc9 100644
--- a/packages/components/src/components/calendar/calendar-footer.tsx
+++ b/packages/components/src/components/calendar/calendar-footer.tsx
@@ -6,7 +6,7 @@ type TFooterProps = {
     clear_text?: string;
     footer: string;
     has_clear_btn?: boolean;
-    has_today_btn: boolean;
+    has_today_btn?: boolean;
     onClick?: React.MouseEventHandler<HTMLSpanElement>;
     onClear?: React.MouseEventHandler<HTMLSpanElement>;
     use_icon?: string;
diff --git a/packages/components/src/components/calendar/calendar.tsx b/packages/components/src/components/calendar/calendar.tsx
index 288f9a16f031..bd898d3e5d59 100644
--- a/packages/components/src/components/calendar/calendar.tsx
+++ b/packages/components/src/components/calendar/calendar.tsx
@@ -7,30 +7,30 @@ import { getDate } from './helpers/constants';
 
 type TCalendarProps = {
     date_format?: string;
-    footer: string;
-    has_today_btn: boolean;
-    holidays: Array<{
+    footer?: string;
+    has_today_btn?: boolean;
+    holidays?: Array<{
         dates: string[];
         descrip: string;
     }>;
     max_date?: string;
     min_date?: string;
-    onChangeCalendarMonth: (start_of_month: string) => void;
+    onChangeCalendarMonth?: (start_of_month: string) => void;
     onSelect: (formatted_date: string, keep_open: boolean) => void;
-    start_date: string;
+    start_date?: string;
     value: string;
-    disable_days: number[];
+    disable_days?: number[];
     calendar_view?: string;
     calendar_el_ref: React.RefObject<HTMLDivElement>;
-    disabled_days: number[];
-    events: Array<{
+    disabled_days?: number[];
+    events?: Array<{
         dates: string[];
         descrip: string;
     }>;
-    has_range_selection: boolean;
-    keep_open: boolean;
+    has_range_selection?: boolean;
+    keep_open?: boolean;
     onHover?: (selected_date: moment.MomentInput | null) => void;
-    should_show_today: boolean;
+    should_show_today?: boolean;
 };
 
 type TCalendarRef = {
@@ -52,7 +52,7 @@ const Calendar: React.MemoExoticComponent<
                 date_format = 'YYYY-MM-DD',
                 disabled_days,
                 events,
-                footer,
+                footer = '',
                 has_today_btn,
                 has_range_selection,
                 keep_open,
@@ -61,7 +61,7 @@ const Calendar: React.MemoExoticComponent<
                 onChangeCalendarMonth,
                 onHover,
                 onSelect,
-                start_date,
+                start_date = '',
                 value,
                 should_show_today,
             },
@@ -137,7 +137,7 @@ const Calendar: React.MemoExoticComponent<
                 setSelectedDate(formatted_date);
 
                 if (onSelect) {
-                    onSelect(formatted_date, keep_open);
+                    onSelect(formatted_date, !!keep_open);
                 }
             };
 
@@ -211,7 +211,7 @@ const Calendar: React.MemoExoticComponent<
                         hovered_date={hovered_date}
                         onMouseOver={onMouseOver}
                         onMouseLeave={onMouseLeave}
-                        should_show_today={should_show_today}
+                        should_show_today={!!should_show_today}
                     />
                     <Footer footer={footer} has_today_btn={has_today_btn} onClick={setToday} />
                 </div>
diff --git a/packages/components/src/components/calendar/views/calendar-days.tsx b/packages/components/src/components/calendar/views/calendar-days.tsx
index 257f5c764f35..19c3d7727595 100644
--- a/packages/components/src/components/calendar/views/calendar-days.tsx
+++ b/packages/components/src/components/calendar/views/calendar-days.tsx
@@ -17,7 +17,7 @@ import Text from '../../text';
 
 type TDaysProps = CommonPropTypes & {
     date_format: string;
-    has_range_selection: boolean;
+    has_range_selection?: boolean;
     events?: Array<{
         dates: string[];
         descrip: string;
diff --git a/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx b/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx
index 5186ce2b47e9..6a3b63c094f6 100644
--- a/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx
+++ b/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx
@@ -88,7 +88,9 @@ const ResultOverlay = ({
                         <span
                             id={`dc_contract_card_${contract_id}_result_close_icon`}
                             className='dc-result__close-btn'
-                            onClick={() => onClickRemove?.(contract_id)}
+                            onClick={() => {
+                                if (contract_id) onClickRemove?.(contract_id);
+                            }}
                         />
                     )}
                     {getContractPath && (
diff --git a/packages/components/src/components/date-picker/date-picker-calendar.tsx b/packages/components/src/components/date-picker/date-picker-calendar.tsx
index 0b1c63c1cb72..fa72b7fcb1d6 100644
--- a/packages/components/src/components/date-picker/date-picker-calendar.tsx
+++ b/packages/components/src/components/date-picker/date-picker-calendar.tsx
@@ -11,29 +11,29 @@ type TDatePickerCalendarProps = {
     is_datepicker_visible: boolean;
     calendar_el_ref: React.RefObject<HTMLDivElement>;
     parent_ref: React.RefObject<HTMLElement>;
-    portal_id: string;
+    portal_id?: string;
     style: React.CSSProperties;
     placement: string;
     onSelect: (formatted_date: string, keep_open: boolean) => void;
     calendar_view?: 'date' | 'month' | 'year' | 'decade';
-    keep_open: boolean;
-    footer: string;
-    has_today_btn: boolean;
-    holidays: Array<{
+    keep_open?: boolean;
+    footer?: string;
+    has_today_btn?: boolean;
+    holidays?: Array<{
         dates: string[];
         descrip: string;
     }>;
-    onChangeCalendarMonth: (start_of_month: string) => void;
-    start_date: string;
-    disable_days: number[];
-    disabled_days: number[];
-    events: Array<{
+    onChangeCalendarMonth?: (start_of_month: string) => void;
+    start_date?: string;
+    disable_days?: number[];
+    disabled_days?: number[];
+    events?: Array<{
         dates: string[];
         descrip: string;
     }>;
-    has_range_selection: boolean;
+    has_range_selection?: boolean;
     onHover?: (selected_date: moment.MomentInput | null) => void;
-    should_show_today: boolean;
+    should_show_today?: boolean;
 };
 
 type TCalendarRef = {
diff --git a/packages/components/src/components/date-picker/date-picker-native.tsx b/packages/components/src/components/date-picker/date-picker-native.tsx
index 089c17a15ba0..3025a9fd4483 100644
--- a/packages/components/src/components/date-picker/date-picker-native.tsx
+++ b/packages/components/src/components/date-picker/date-picker-native.tsx
@@ -4,21 +4,21 @@ import { toMoment } from '@deriv/shared';
 import Icon from '../icon';
 import Text from '../text';
 
-type TDatePickerNativeProps = Omit<React.HTMLAttributes<HTMLInputElement>, 'onSelect'> & {
+type TDatePickerNativeProps = Omit<React.HTMLAttributes<HTMLInputElement>, 'onSelect' | 'onChange'> & {
     value: string | null;
-    label: string;
-    placeholder: string;
-    max_date: moment.Moment;
-    min_date: moment.Moment;
-    display_format: string;
-    data_testid: string;
-    name: string;
+    label?: string;
+    placeholder?: string;
+    max_date?: moment.Moment | string;
+    min_date?: moment.Moment | string;
+    display_format?: string;
+    data_testid?: string;
+    name?: string;
     error?: string;
-    disabled: boolean;
+    disabled?: boolean;
     hint?: string;
     onSelect: (selected_date: string) => void;
-    onBlur: React.FocusEventHandler<HTMLInputElement>;
-    onFocus: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
 };
 
 const Native = ({
diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx
index 48f18e94678e..4b11b61e7961 100644
--- a/packages/components/src/components/date-picker/date-picker.tsx
+++ b/packages/components/src/components/date-picker/date-picker.tsx
@@ -6,20 +6,26 @@ import Native from './date-picker-native';
 import MobileWrapper from '../mobile-wrapper';
 import DesktopWrapper from '../desktop-wrapper';
 import { useOnClickOutside } from '../../hooks/use-onclickoutside';
-import { MomentInput } from 'moment';
+import moment, { MomentInput } from 'moment';
 import { TDatePickerOnChangeEvent } from '../types';
 
 type TDatePicker = Omit<
     React.ComponentProps<typeof Native> & React.ComponentProps<typeof Input> & React.ComponentProps<typeof Calendar>,
-    'value' | 'onSelect' | 'is_datepicker_visible' | 'placement' | 'style' | 'calendar_el_ref' | 'parent_ref'
+    | 'date_format'
+    | 'onSelect'
+    | 'is_datepicker_visible'
+    | 'is_placeholder_visible'
+    | 'placement'
+    | 'style'
+    | 'calendar_el_ref'
+    | 'parent_ref'
+    | 'onChange'
+    | 'onChangeInput'
 > & {
-    mode: string;
-    start_date: moment.Moment;
+    mode?: string;
     value: moment.Moment | string;
     onChange: (e: TDatePickerOnChangeEvent) => void;
-    footer: React.ReactElement;
-    date_format: string;
-    has_range_selection: boolean;
+    date_format?: string;
 };
 
 type TCalendarRef = {
@@ -42,7 +48,7 @@ const DatePicker = React.memo((props: TDatePicker) => {
         max_date,
         min_date,
         start_date,
-        name,
+        name = '',
         onBlur,
         onChange,
         onFocus,
diff --git a/packages/components/src/components/dialog/dialog.tsx b/packages/components/src/components/dialog/dialog.tsx
index e45ceba656d4..7bd402d56707 100644
--- a/packages/components/src/components/dialog/dialog.tsx
+++ b/packages/components/src/components/dialog/dialog.tsx
@@ -98,7 +98,7 @@ const Dialog = ({
         }
     };
 
-    const validateClickOutside = () => !!(dismissable || (has_close_icon && is_visible && is_closed_on_cancel));
+    const validateClickOutside = () => !!dismissable || !!(has_close_icon && is_visible && is_closed_on_cancel);
 
     useOnClickOutside(wrapper_ref, handleClose, validateClickOutside);
 
diff --git a/packages/components/src/components/input-field/input-field.tsx b/packages/components/src/components/input-field/input-field.tsx
index 4a9e5f2f91ea..0f70c30ca4bc 100644
--- a/packages/components/src/components/input-field/input-field.tsx
+++ b/packages/components/src/components/input-field/input-field.tsx
@@ -41,7 +41,7 @@ type TInputField = {
     is_autocomplete_disabled?: boolean;
     is_disabled?: boolean;
     is_error_tooltip_hidden?: boolean;
-    is_float: boolean;
+    is_float?: boolean;
     is_hj_whitelisted?: boolean;
     is_incrementable_on_long_press?: boolean;
     is_incrementable?: boolean;
@@ -53,16 +53,16 @@ type TInputField = {
     max_length?: number;
     max_value?: number;
     min_value?: number;
-    name: string;
+    name?: string;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    onChange: (e: TChangeEvent) => void;
+    onChange?: (e: TChangeEvent) => void;
     onClick?: React.MouseEventHandler<HTMLInputElement>;
     onClickInputWrapper?: React.MouseEventHandler<HTMLDivElement>;
     placeholder?: string;
     prefix?: string;
     required?: boolean;
     setCurrentFocus: (name: string | null) => void;
-    type: string;
+    type?: string;
     unit?: string;
     value: number | string;
 };
@@ -105,7 +105,7 @@ const InputField = ({
     max_length,
     max_value,
     min_value,
-    name,
+    name = '',
     format,
     onBlur,
     onChange,
@@ -115,7 +115,7 @@ const InputField = ({
     prefix,
     required,
     setCurrentFocus,
-    type,
+    type = '',
     unit,
     value,
     data_testid,
@@ -170,7 +170,7 @@ const InputField = ({
             }
         }
 
-        onChange(e);
+        onChange?.(e);
         if (callback) {
             callback(e);
         }
@@ -269,7 +269,7 @@ const InputField = ({
             if (is_signed && /^\d+/.test(formatted_value) && +formatted_value > 0) {
                 formatted_value = `+${formatted_value}`;
             }
-            onChange({ target: { value: formatted_value, name } });
+            onChange?.({ target: { value: formatted_value, name } });
         }
     };
 
diff --git a/packages/components/src/components/positions-drawer-card/positions-drawer-card.tsx b/packages/components/src/components/positions-drawer-card/positions-drawer-card.tsx
index 089a3e6123cc..7a1396fb1107 100644
--- a/packages/components/src/components/positions-drawer-card/positions-drawer-card.tsx
+++ b/packages/components/src/components/positions-drawer-card/positions-drawer-card.tsx
@@ -20,7 +20,7 @@ import { TToastConfig } from '../types/contract.types';
 type TPositionsDrawerCardProps = {
     addToast: (toast_config: TToastConfig) => void;
     className?: string;
-    contract_info: TContractInfo;
+    contract_info?: TContractInfo;
     contract_update?: TContractInfo['contract_update'];
     currency: string;
     current_focus: string | null;
@@ -29,7 +29,7 @@ type TPositionsDrawerCardProps = {
     is_mobile?: boolean;
     is_sell_requested?: boolean;
     is_unsupported?: boolean;
-    is_link_disabled: boolean;
+    is_link_disabled?: boolean;
     profit_loss?: number;
     onClickCancel: (contract_id?: number) => void;
     onClickSell: (contract_id?: number) => void;
@@ -40,10 +40,10 @@ type TPositionsDrawerCardProps = {
     removeToast: (key: string) => void;
     result?: string;
     setCurrentFocus: (value: string) => void;
-    server_time: moment.Moment;
+    server_time?: moment.Moment;
     should_show_transition?: boolean;
     should_show_cancellation_warning: boolean;
-    status: string;
+    status?: string;
     toggleCancellationWarning: () => void;
     toggleUnsupportedContractModal: (value: boolean) => void;
 };
@@ -77,13 +77,13 @@ const PositionsDrawerCard = ({
     toggleCancellationWarning,
     toggleUnsupportedContractModal,
 }: TPositionsDrawerCardProps) => {
-    const is_accumulator = isAccumulatorContract(contract_info.contract_type);
-    const is_multiplier = isMultiplierContract(contract_info.contract_type || '');
-    const is_turbos = isTurbosContract(contract_info.contract_type);
-    const is_vanilla = isVanillaContract(contract_info.contract_type);
-    const is_crypto = isCryptoContract(contract_info.underlying || '');
+    const is_accumulator = isAccumulatorContract(contract_info?.contract_type);
+    const is_multiplier = isMultiplierContract(contract_info?.contract_type || '');
+    const is_turbos = isTurbosContract(contract_info?.contract_type);
+    const is_vanilla = isVanillaContract(contract_info?.contract_type);
+    const is_crypto = isCryptoContract(contract_info?.underlying || '');
     const has_progress_slider = !is_multiplier || (is_crypto && is_multiplier);
-    const has_ended = !!getEndTime(contract_info);
+    const has_ended = !!getEndTime(contract_info as TContractInfo);
     const is_mobile = isMobile();
     const contract_card_classname = classNames('dc-contract-card', {
         'dc-contract-card--green': Number(profit_loss) > 0 && !result,
@@ -97,7 +97,7 @@ const PositionsDrawerCard = ({
     );
     const card_header = (
         <ContractCard.Header
-            contract_info={contract_info}
+            contract_info={contract_info as TContractInfo}
             display_name={display_name ?? ''}
             getCardLabels={getCardLabels}
             getContractTypeDisplay={getContractTypeDisplay}
@@ -105,14 +105,14 @@ const PositionsDrawerCard = ({
             is_mobile={is_mobile}
             is_sell_requested={!!is_sell_requested}
             onClickSell={onClickSell}
-            server_time={server_time}
+            server_time={server_time as moment.Moment}
         />
     );
 
     const card_body = (
         <ContractCard.Body
             addToast={addToast}
-            contract_info={contract_info}
+            contract_info={contract_info as TContractInfo}
             contract_update={contract_update ?? {}}
             currency={currency}
             current_focus={current_focus}
@@ -130,7 +130,7 @@ const PositionsDrawerCard = ({
             is_vanilla={is_vanilla}
             has_progress_slider={is_mobile && has_progress_slider}
             removeToast={removeToast}
-            server_time={server_time}
+            server_time={server_time as moment.Moment}
             setCurrentFocus={setCurrentFocus}
             should_show_cancellation_warning={should_show_cancellation_warning}
             status={status}
@@ -140,7 +140,7 @@ const PositionsDrawerCard = ({
 
     const card_footer = (
         <ContractCard.Footer
-            contract_info={contract_info}
+            contract_info={contract_info as TContractInfo}
             getCardLabels={getCardLabels}
             is_multiplier={is_multiplier}
             is_positions
@@ -148,7 +148,7 @@ const PositionsDrawerCard = ({
             onClickCancel={onClickCancel}
             onClickSell={onClickSell}
             onFooterEntered={onFooterEntered}
-            server_time={server_time}
+            server_time={server_time as moment.Moment}
             should_show_transition={!!should_show_transition}
         />
     );
@@ -162,26 +162,26 @@ const PositionsDrawerCard = ({
 
     const supported_contract_card = (
         <div className={contract_card_classname} onClick={() => toggleUnsupportedContractModal(true)}>
-            {contract_info.underlying ? contract_el : loader_el}
+            {contract_info?.underlying ? contract_el : loader_el}
         </div>
     );
 
     const unsupported_contract_card = is_link_disabled ? (
-        <div className={contract_card_classname}>{contract_info.underlying ? contract_el : loader_el}</div>
+        <div className={contract_card_classname}>{contract_info?.underlying ? contract_el : loader_el}</div>
     ) : (
         <NavLink
             className={contract_card_classname}
             to={{
-                pathname: `/contract/${contract_info.contract_id}`,
+                pathname: `/contract/${contract_info?.contract_id}`,
             }}
         >
-            {contract_info.underlying ? contract_el : loader_el}
+            {contract_info?.underlying ? contract_el : loader_el}
         </NavLink>
     );
 
     return (
         <ContractCard
-            contract_info={contract_info}
+            contract_info={contract_info as TContractInfo}
             getCardLabels={getCardLabels}
             getContractPath={getContractPath}
             is_multiplier={is_multiplier}
@@ -194,7 +194,7 @@ const PositionsDrawerCard = ({
             toggleUnsupportedContractModal={toggleUnsupportedContractModal}
         >
             <div
-                id={`dc_contract_card_${contract_info.contract_id}`}
+                id={`dc_contract_card_${contract_info?.contract_id}`}
                 className={className}
                 onMouseEnter={() => {
                     if (typeof onMouseEnter === 'function') onMouseEnter();
diff --git a/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx b/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx
index 02fce1d5f43a..44b74c15cd8b 100644
--- a/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx
+++ b/packages/components/src/components/progress-slider-mobile/progress-slider-mobile.tsx
@@ -9,9 +9,9 @@ import { TGetCardLables } from '../types';
 
 type TProgressSliderMobileProps = {
     className?: string;
-    current_tick: number | null;
+    current_tick?: number | null;
     expiry_time?: number;
-    is_loading: boolean;
+    is_loading?: boolean;
     server_time: moment.Moment;
     start_time?: number;
     ticks_count?: number;
diff --git a/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx b/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx
index 901810fc0316..6e09f313fb61 100644
--- a/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx
+++ b/packages/components/src/components/progress-slider-mobile/progress-ticks-mobile.tsx
@@ -4,7 +4,7 @@ import Text from '../text';
 import { TGetCardLables } from '../types';
 
 type TProgressTicksMobileProps = {
-    current_tick: number | null;
+    current_tick?: number | null;
     ticks_count: number;
     getCardLabels: TGetCardLables;
 };
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.tsx b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.tsx
index d059be4877e1..c4c6baf10125 100644
--- a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.tsx
+++ b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.tsx
@@ -5,6 +5,8 @@ import { localize } from '@deriv/translations';
 import { toMoment } from '@deriv/shared';
 import { TInputDateRange } from 'Types';
 
+type TDatePickerOnChangeParams = Parameters<React.ComponentProps<typeof DatePicker>['onChange']>[0];
+
 type TRadioButton = {
     id: string;
     className?: string;
@@ -51,7 +53,7 @@ type TCompositeCalendarMobile = {
         value: { from?: moment.Moment; to?: moment.Moment; is_batch?: boolean },
         extra_data?: { date_range: TInputDateRange }
     ) => void;
-    setCurrentFocus?: (focus: string) => void;
+    setCurrentFocus: (focus: string | null) => void;
     from: number;
     to: number;
 };
@@ -134,11 +136,11 @@ const CompositeCalendarMobile = React.memo(
             setIsOpen(false);
         };
 
-        const selectDate = (e: React.ChangeEvent<HTMLInputElement>, key: string) => {
+        const selectDate = (e: TDatePickerOnChangeParams, key: string) => {
             setSelectedDateRange({ value: CUSTOM_KEY });
 
-            if (key === 'from') setFrom(e.target?.value);
-            if (key === 'to') setTo(e.target?.value);
+            if (key === 'from') setFrom(e.target?.value as string);
+            if (key === 'to') setTo(e.target?.value as string);
         };
 
         const getMobileFooter = () => {
@@ -180,12 +182,12 @@ const CompositeCalendarMobile = React.memo(
                 <div className='composite-calendar__input-fields composite-calendar__input-fields--fill'>
                     <InputField
                         id='dt_calendar_input'
-                        current_focus={current_focus}
+                        current_focus={current_focus ?? ''}
                         is_read_only={true}
                         icon={() => <Icon icon='IcCalendarDatefrom' className='inline-icon' />}
                         onClick={openDialog}
                         setCurrentFocus={setCurrentFocus}
-                        value={applied_date_range?.label}
+                        value={applied_date_range?.label ?? ''}
                     />
                 </div>
                 <MobileDialog
@@ -223,20 +225,18 @@ const CompositeCalendarMobile = React.memo(
                             <div className='composite-calendar-modal__custom-date-range'>
                                 <DatePicker
                                     className='composite-calendar-modal__custom-date-range-start-date'
-                                    is_nativepicker={true}
                                     placeholder={localize('Start date')}
-                                    value={from_date}
+                                    value={from_date ?? ''}
                                     max_date={to_date || today}
-                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => selectDate(e, 'from')}
+                                    onChange={(e: TDatePickerOnChangeParams) => selectDate(e, 'from')}
                                 />
                                 <DatePicker
                                     className='composite-calendar-modal__custom-date-range-end-date'
-                                    is_nativepicker={true}
                                     placeholder={localize('End date')}
-                                    value={to_date}
+                                    value={to_date ?? ''}
                                     max_date={today}
                                     min_date={from_date}
-                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => selectDate(e, 'to')}
+                                    onChange={(e: TDatePickerOnChangeParams) => selectDate(e, 'to')}
                                 />
                             </div>
                         </div>
diff --git a/packages/shared/src/utils/constants/contract.ts b/packages/shared/src/utils/constants/contract.ts
index 4984193a4a8a..66ecb1feea26 100644
--- a/packages/shared/src/utils/constants/contract.ts
+++ b/packages/shared/src/utils/constants/contract.ts
@@ -27,7 +27,7 @@ type TContractTypesConfig = {
     config?: { hide_duration?: boolean };
 };
 
-type TGetContractTypesConfig = (symbol: string) => Record<string, TContractTypesConfig>;
+type TGetContractTypesConfig = (symbol?: string) => Record<string, TContractTypesConfig>;
 
 type TContractConfig = {
     button_name?: React.ReactNode;
diff --git a/packages/shared/src/utils/date/date-time.ts b/packages/shared/src/utils/date/date-time.ts
index ab1934c78ee3..f2660696ae34 100644
--- a/packages/shared/src/utils/date/date-time.ts
+++ b/packages/shared/src/utils/date/date-time.ts
@@ -51,7 +51,7 @@ export const toLocalFormat = (time: moment.MomentInput) => moment.utc(time).loca
  * @param  {String} time        24 hours format, may or may not include seconds
  * @return {moment} a new moment object of result
  */
-export const setTime = (moment_obj: moment.Moment, time: string) => {
+export const setTime = (moment_obj: moment.Moment, time: string | null) => {
     const [hour, minute, second] = time ? time.split(':') : [0, 0, 0];
     moment_obj
         .hour(+hour)
diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
index a318017b91da..791978d00cd4 100644
--- a/packages/stores/src/mockStore.ts
+++ b/packages/stores/src/mockStore.ts
@@ -513,6 +513,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_accumulator: false,
             is_multiplier: false,
             is_turbos: false,
+            onHoverPosition: jest.fn(),
             onBuyResponse: jest.fn(),
             onClickCancel: jest.fn(),
             onClickSell: jest.fn(),
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index 15a4e871d4e9..8ccfdcd59dfb 100644
--- a/packages/stores/types.ts
+++ b/packages/stores/types.ts
@@ -519,6 +519,7 @@ type TCommonStoreError = {
     should_show_refresh?: boolean;
     type?: string;
 };
+
 type TCommonStoreServicesError = {
     code?: string;
     message?: string;
@@ -674,12 +675,13 @@ type TPortfolioStore = {
     is_accumulator: boolean;
     is_turbos: boolean;
     onBuyResponse: (contract_info: { contract_id: number; longcode: string; contract_type: string }) => void;
+    onHoverPosition: (is_over: boolean, position: TPortfolioPosition, underlying: string) => void;
     onClickCancel: (contract_id?: number) => void;
     onClickSell: (contract_id?: number) => void;
     onMount: () => void;
     open_accu_contract: TPortfolioPosition | null;
     positions: TPortfolioPosition[];
-    removePositionById: (id: number) => void;
+    removePositionById: (contract_id?: number) => void;
     setContractType: (contract_type: string) => void;
 };
 
diff --git a/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.tsx b/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.tsx
index 236fd691cc62..d209c6a1a68f 100644
--- a/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.tsx
+++ b/packages/trader/src/App/Components/Elements/ContractAudit/contract-details.tsx
@@ -180,7 +180,7 @@ const ContractDetails = ({
                         id='dt_entry_spot_label'
                         icon={<Icon icon='IcContractEntrySpot' size={24} />}
                         label={localize('Entry spot')}
-                        value={addCommaToNumber(entry_spot_display_value) || ' - '}
+                        value={addCommaToNumber(Number(entry_spot_display_value)) || ' - '}
                         value2={toGMTFormat(epochToMoment(Number(entry_tick_time))) || ' - '}
                     />
                 )}
@@ -189,7 +189,7 @@ const ContractDetails = ({
                         id='dt_exit_spot_label'
                         icon={<Icon icon='IcContractExitSpot' size={24} />}
                         label={localize('Exit spot')}
-                        value={addCommaToNumber(exit_spot) || ' - '}
+                        value={addCommaToNumber(Number(exit_spot)) || ' - '}
                         value2={toGMTFormat(epochToMoment(Number(exit_tick_time))) || ' - '}
                     />
                 )}
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-result-mobile.spec.tsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-result-mobile.spec.tsx
new file mode 100644
index 000000000000..357f5768a21a
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-result-mobile.spec.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import PositionsResultMobile from '../positions-result-mobile';
+
+describe('PositionsResultMobile', () => {
+    it('should PositionsResultMobile be in the DOM', () => {
+        render(<PositionsResultMobile is_visible={true} result='won' />);
+        expect(screen.getByTestId('result_mobile')).toBeInTheDocument();
+    });
+
+    it('should PositionsResultMobile render LOST if result is won ', () => {
+        render(<PositionsResultMobile is_visible={true} result='won' />);
+        expect(screen.getByText('Won')).toBeInTheDocument();
+    });
+
+    it('should PositionsResultMobile render LOST if result is not won ', () => {
+        render(<PositionsResultMobile is_visible={true} result='lost' />);
+        expect(screen.getByText('Lost')).toBeInTheDocument();
+    });
+});
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js
deleted file mode 100644
index a37c521b4405..000000000000
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/result-mobile.spec.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ResultMobile from '../result-mobile';
-
-describe('ResultMobile', () => {
-    it('should ResultMobile be in the DOM', () => {
-        const wrapper = render(<ResultMobile is_visible={true} />);
-        expect(wrapper.getByTestId('result_mobile')).toBeInTheDocument();
-    });
-
-    it('should ResultMobile render LOST if result is won ', () => {
-        const wrapper = render(<ResultMobile is_visible={true} result='won' />);
-        expect(wrapper.getByText('Won')).toBeInTheDocument(true);
-    });
-
-    it('should ResultMobile render LOST if result is not won ', () => {
-        const wrapper = render(<ResultMobile is_visible={true} result='lost' />);
-        expect(wrapper.getByText('Lost')).toBeInTheDocument(true);
-    });
-});
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js b/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.ts
similarity index 100%
rename from packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.js
rename to packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/__tests__/positions-helper.ts
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/index.js b/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/index.ts
similarity index 100%
rename from packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/index.js
rename to packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/index.ts
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js b/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.ts
similarity index 61%
rename from packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js
rename to packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.ts
index ddebcdaadec8..0ce849841ed0 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.js
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/helpers/positions-helper.ts
@@ -1,7 +1,10 @@
 import { localize } from '@deriv/translations';
-import { isHighLow, getContractTypesConfig, isCallPut, isVanillaContract } from '@deriv/shared';
+import { isHighLow, getContractTypesConfig, isCallPut, isVanillaContract, TContractInfo } from '@deriv/shared';
 
-export const addCommaToNumber = (num, decimal_places) => {
+export const addCommaToNumber = (
+    num: number | null | undefined,
+    decimal_places?: number | undefined
+): string | number | null | undefined => {
     if (!num || isNaN(num)) {
         return num;
     }
@@ -10,7 +13,7 @@ export const addCommaToNumber = (num, decimal_places) => {
     return n.replace(/\d(?=(?:\d{3})+(?:\.|$))/g, (m, i) => (p <= 0 || i < p ? `${m},` : m));
 };
 
-export const getBarrierLabel = contract_info => {
+export const getBarrierLabel = (contract_info: TContractInfo) => {
     if (isDigitType(contract_info.contract_type)) {
         return localize('Target');
     }
@@ -20,16 +23,17 @@ export const getBarrierLabel = contract_info => {
     return localize('Barrier');
 };
 
-export const getBarrierValue = contract_info => {
+export const getBarrierValue = (contract_info: TContractInfo) => {
     if (isDigitType(contract_info.contract_type)) {
-        return digitTypeMap(contract_info)[contract_info.contract_type];
+        return digitTypeMap(contract_info)[contract_info.contract_type as keyof ReturnType<typeof digitTypeMap>];
     }
-    return addCommaToNumber(contract_info.barrier);
+    return addCommaToNumber(Number(contract_info.barrier));
 };
 
-export const isDigitType = contract_type => /digit/.test(contract_type.toLowerCase());
+export const isDigitType = (contract_type: TContractInfo['contract_type']) =>
+    contract_type && /digit/.test(contract_type.toLowerCase());
 
-const digitTypeMap = contract_info => ({
+const digitTypeMap = (contract_info: TContractInfo) => ({
     DIGITDIFF: localize('Not {{barrier}}', { barrier: contract_info.barrier }),
     DIGITEVEN: localize('Even'),
     DIGITMATCH: localize('Equals {{barrier}}', { barrier: contract_info.barrier }),
@@ -38,14 +42,17 @@ const digitTypeMap = contract_info => ({
     DIGITUNDER: localize('Under {{barrier}}', { barrier: contract_info.barrier }),
 });
 
-export const filterByContractType = ({ contract_type, shortcode }, trade_contract_type) => {
-    const is_call_put = isCallPut(trade_contract_type);
+export const filterByContractType = (
+    { contract_type, shortcode }: { contract_type?: string; shortcode?: string },
+    trade_contract_type: string
+) => {
+    const is_call_put = isCallPut(trade_contract_type as Parameters<typeof isCallPut>[0]);
     const is_high_low = isHighLow({ shortcode });
     const is_vanilla = isVanillaContract(contract_type);
     const trade_types = is_call_put
         ? ['CALL', 'CALLE', 'PUT', 'PUTE']
         : getContractTypesConfig()[trade_contract_type]?.trade_types;
-    const match = trade_types?.includes(contract_type);
+    const match = trade_types?.includes(contract_type ?? '');
     if (trade_contract_type === 'high_low') return is_high_low;
     return match && (is_vanilla || !is_high_low);
 };
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/index.js b/packages/trader/src/App/Components/Elements/PositionsDrawer/index.js
deleted file mode 100644
index 602abedc6286..000000000000
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import PositionsDrawer from './positions-drawer.jsx';
-
-export default PositionsDrawer;
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/index.ts b/packages/trader/src/App/Components/Elements/PositionsDrawer/index.ts
new file mode 100644
index 000000000000..da86f493fa91
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/index.ts
@@ -0,0 +1,3 @@
+import PositionsDrawer from './positions-drawer';
+
+export default PositionsDrawer;
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.tsx
similarity index 80%
rename from packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
rename to packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.tsx
index 8c6a696feb6b..ac4100564306 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.tsx
@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { CSSTransition } from 'react-transition-group';
@@ -11,6 +10,34 @@ import { filterByContractType } from './helpers';
 import { useTraderStore } from 'Stores/useTraderStores';
 import { observer, useStore } from '@deriv/stores';
 
+type TUiStore = Pick<
+    ReturnType<typeof useStore>['ui'],
+    | 'addToast'
+    | 'current_focus'
+    | 'is_mobile'
+    | 'removeToast'
+    | 'setCurrentFocus'
+    | 'should_show_cancellation_warning'
+    | 'toggleCancellationWarning'
+    | 'toggleUnsupportedContractModal'
+>;
+type TPortfolioStore = Pick<
+    ReturnType<typeof useStore>['portfolio'],
+    'onHoverPosition' | 'onClickCancel' | 'onClickSell'
+>;
+type TPositionDrawerCardItem = TPortfolioStore &
+    TUiStore & {
+        currency: ReturnType<typeof useStore>['client']['currency'];
+        getContractById: ReturnType<typeof useStore>['contract_trade']['getContractById'];
+        is_new_row?: boolean;
+        measure?: () => void;
+        onClickRemove: ReturnType<typeof useStore>['portfolio']['removePositionById'];
+        row?: TPortfolioPosition | { [key: string]: any };
+        server_time: ReturnType<typeof useStore>['common']['server_time'];
+        symbol: ReturnType<typeof useTraderStore>['symbol'];
+    };
+type TPortfolioPosition = ReturnType<typeof useStore>['portfolio']['active_positions'][0];
+
 const PositionsDrawerCardItem = ({
     row: portfolio_position,
     measure,
@@ -18,12 +45,12 @@ const PositionsDrawerCardItem = ({
     symbol,
     is_new_row,
     ...props
-}) => {
-    const { in_prop } = useNewRowTransition(is_new_row);
+}: TPositionDrawerCardItem) => {
+    const { in_prop } = useNewRowTransition(is_new_row as boolean);
 
     React.useEffect(() => {
-        measure();
-    }, [portfolio_position.contract_info.is_sold, measure]);
+        measure?.();
+    }, [portfolio_position?.contract_info.is_sold, measure]);
 
     return (
         <CSSTransition
@@ -43,10 +70,10 @@ const PositionsDrawerCardItem = ({
                     {...portfolio_position}
                     {...props}
                     onMouseEnter={() => {
-                        onHoverPosition(true, portfolio_position, symbol);
+                        onHoverPosition(true, portfolio_position as TPortfolioPosition, symbol);
                     }}
                     onMouseLeave={() => {
-                        onHoverPosition(false, portfolio_position, symbol);
+                        onHoverPosition(false, portfolio_position as TPortfolioPosition, symbol);
                     }}
                     onFooterEntered={measure}
                     should_show_transition={is_new_row}
@@ -84,16 +111,16 @@ const PositionsDrawer = observer(({ ...props }) => {
         toggleUnsupportedContractModal,
     } = ui;
     const drawer_ref = React.useRef(null);
-    const list_ref = React.useRef(null);
-    const scrollbar_ref = React.useRef(null);
+    const list_ref = React.useRef<HTMLDivElement>(null);
+    const scrollbar_ref = React.useRef<HTMLElement>(null);
 
     React.useEffect(() => {
         onMount();
     }, [onMount]);
 
     React.useEffect(() => {
-        list_ref?.current?.scrollTo(0);
-        scrollbar_ref?.current?.scrollToTop();
+        list_ref?.current?.scrollTo({ top: 0 });
+        if (scrollbar_ref.current) scrollbar_ref.current.scrollTop = 0;
     }, [symbol, trade_contract_type]);
 
     const positions = all_positions.filter(
@@ -185,10 +212,4 @@ const PositionsDrawer = observer(({ ...props }) => {
     );
 });
 
-PositionsDrawer.propTypes = {
-    children: PropTypes.node,
-    onChangeContractUpdate: PropTypes.func,
-    onClickContractUpdate: PropTypes.func,
-};
-
 export default PositionsDrawer;
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.tsx
similarity index 90%
rename from packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
rename to packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.tsx
index 69a44e1b602d..6156593e8baf 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-modal-card.tsx
@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { CSSTransition } from 'react-transition-group';
@@ -25,10 +24,34 @@ import { localize } from '@deriv/translations';
 import { BinaryLink } from 'App/Components/Routes';
 import { PositionsCardLoader } from 'App/Components/Elements/ContentLoader';
 import { getMarketInformation } from 'Utils/Helpers/market-underlying';
-import ResultMobile from './result-mobile.jsx';
+import PositionsResultMobile from './positions-result-mobile';
 import { observer, useStore } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 
+type TPortfolioStore = ReturnType<typeof useStore>['portfolio'];
+type TPortfolioPosition = Pick<
+    TPortfolioStore['active_positions'][0],
+    'contract_info' | 'id' | 'indicative' | 'is_sell_requested' | 'is_unsupported' | 'profit_loss'
+>;
+type TPickPortfolioStore = Pick<TPortfolioStore, 'onClickSell' | 'onClickCancel'>;
+type TUiStore = ReturnType<typeof useStore>['ui'];
+
+type TPositionsModalCard = TPickPortfolioStore &
+    TPortfolioPosition & {
+        className?: string;
+        contract_info: TPortfolioPosition['contract_info'];
+        contract_update: TPortfolioPosition['contract_info']['contract_update'];
+        currency: ReturnType<typeof useStore>['client']['currency'];
+        current_tick?: React.ComponentProps<typeof ProgressSliderMobile>['current_tick'];
+        is_loading?: boolean;
+        result?: React.ComponentProps<typeof PositionsResultMobile>['result'];
+        sell_price?: number;
+        status?: string;
+        togglePositions: TUiStore['togglePositionsDrawer'];
+        toggleUnsupportedContractModal: TUiStore['toggleUnsupportedContractModal'];
+        type?: string;
+    };
+
 const PositionsModalCard = observer(
     ({
         className,
@@ -50,7 +73,7 @@ const PositionsModalCard = observer(
         togglePositions,
         toggleUnsupportedContractModal,
         type,
-    }) => {
+    }: TPositionsModalCard) => {
         const { ui, common, contract_trade } = useStore();
         const { active_symbols } = useTraderStore();
         const { server_time } = common;
@@ -82,7 +105,7 @@ const PositionsModalCard = observer(
         const should_show_sell = hasContractEntered(contract_info) && isOpen(contract_info);
         const display_name = getSymbolDisplayName(
             active_symbols,
-            getMarketInformation(contract_info.shortcode).underlying
+            getMarketInformation(contract_info.shortcode || '').underlying
         );
 
         const contract_options_el = (
@@ -197,8 +220,7 @@ const PositionsModalCard = observer(
                     </div>
 
                     {result || !!contract_info.is_sold ? (
-                        <ResultMobile
-                            contract_id={id}
+                        <PositionsResultMobile
                             is_visible={!!contract_info.is_sold}
                             result={result || fallback_result}
                         />
@@ -210,7 +232,7 @@ const PositionsModalCard = observer(
                             is_loading={is_loading}
                             start_time={contract_info.date_start}
                             expiry_time={contract_info.date_expiry}
-                            server_time={server_time}
+                            server_time={server_time as moment.Moment}
                             ticks_count={contract_info.tick_count}
                         />
                     )}
@@ -238,7 +260,7 @@ const PositionsModalCard = observer(
                         is_mobile={is_mobile}
                         is_sell_requested={is_sell_requested}
                         onClickSell={onClickSell}
-                        server_time={server_time}
+                        server_time={server_time as moment.Moment}
                     />
                 </NavLink>
                 <CurrencyBadge currency={contract_info?.currency ?? ''} />
@@ -268,7 +290,7 @@ const PositionsModalCard = observer(
                                 {localize('Entry spot:')}
                             </Text>
                             <Text weight='bold' size='xxs' className='positions-modal-card__purchase-value'>
-                                <Money amount={contract_info.entry_spot} currency={currency} />
+                                <Money amount={Number(contract_info.entry_spot)} currency={currency} />
                             </Text>
                         </div>
                         <div className='positions-modal-card__payout-price'>
@@ -276,14 +298,13 @@ const PositionsModalCard = observer(
                                 {localize('Strike:')}
                             </Text>
                             <Text weight='bold' size='xxs' className='positions-modal-card__payout-value'>
-                                <Money amount={contract_info.barrier} currency={currency} />
+                                <Money amount={Number(contract_info.barrier)} currency={currency} />
                             </Text>
                         </div>
                     </div>
 
                     {result || !!contract_info.is_sold ? (
-                        <ResultMobile
-                            contract_id={id}
+                        <PositionsResultMobile
                             is_visible={!!contract_info.is_sold}
                             result={result || fallback_result}
                         />
@@ -295,7 +316,7 @@ const PositionsModalCard = observer(
                             is_loading={is_loading}
                             start_time={contract_info.date_start}
                             expiry_time={contract_info.date_expiry}
-                            server_time={server_time}
+                            server_time={server_time as moment.Moment}
                             ticks_count={contract_info.tick_count}
                         />
                     )}
@@ -327,8 +348,7 @@ const PositionsModalCard = observer(
                     is_sell_requested={is_sell_requested}
                     onClickCancel={onClickCancel}
                     onClickSell={onClickSell}
-                    server_time={server_time}
-                    status={status}
+                    server_time={server_time as moment.Moment}
                 />
             </React.Fragment>
         );
@@ -343,7 +363,7 @@ const PositionsModalCard = observer(
                 is_mobile={is_mobile}
                 is_sell_requested={is_sell_requested}
                 onClickSell={onClickSell}
-                server_time={server_time}
+                server_time={server_time as moment.Moment}
             />
         );
 
@@ -364,7 +384,7 @@ const PositionsModalCard = observer(
                 is_turbos={is_turbos}
                 has_progress_slider={is_mobile && has_progress_slider && !has_ended}
                 removeToast={removeToast}
-                server_time={server_time}
+                server_time={server_time as moment.Moment}
                 setCurrentFocus={setCurrentFocus}
                 should_show_cancellation_warning={should_show_cancellation_warning}
                 status={status}
@@ -380,8 +400,7 @@ const PositionsModalCard = observer(
                 is_sell_requested={is_sell_requested}
                 onClickCancel={onClickCancel}
                 onClickSell={onClickSell}
-                server_time={server_time}
-                status={status}
+                server_time={server_time as moment.Moment}
             />
         );
 
@@ -431,31 +450,4 @@ const PositionsModalCard = observer(
     }
 );
 
-PositionsModalCard.propTypes = {
-    className: PropTypes.string,
-    contract_info: PropTypes.object,
-    contract_update: PropTypes.object,
-    currency: PropTypes.string,
-    current_tick: PropTypes.number,
-    duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    duration_unit: PropTypes.string,
-    exit_spot: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    id: PropTypes.number,
-    indicative: PropTypes.number,
-    is_loading: PropTypes.bool,
-    is_sell_requested: PropTypes.bool,
-    is_unsupported: PropTypes.bool,
-    is_valid_to_sell: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-    onClickSell: PropTypes.func,
-    onClickCancel: PropTypes.func,
-    profit_loss: PropTypes.number,
-    result: PropTypes.string,
-    sell_price: PropTypes.number,
-    sell_time: PropTypes.number,
-    status: PropTypes.string,
-    togglePositions: PropTypes.func,
-    toggleUnsupportedContractModal: PropTypes.func,
-    type: PropTypes.string,
-};
-
 export default PositionsModalCard;
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/result-mobile.jsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-result-mobile.tsx
similarity index 89%
rename from packages/trader/src/App/Components/Elements/PositionsDrawer/result-mobile.jsx
rename to packages/trader/src/App/Components/Elements/PositionsDrawer/positions-result-mobile.tsx
index a1578df1b511..f6ecf2403bba 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/result-mobile.jsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-result-mobile.tsx
@@ -1,11 +1,15 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { Icon } from '@deriv/components';
 import { localize } from '@deriv/translations';
 
-const ResultMobile = ({ is_visible, result }) => {
+type TPositionsResultMobile = {
+    is_visible: boolean;
+    result: 'won' | 'lost';
+};
+
+const PositionsResultMobile = ({ is_visible, result }: TPositionsResultMobile) => {
     const is_contract_won = result === 'won';
     return (
         <React.Fragment>
@@ -44,9 +48,4 @@ const ResultMobile = ({ is_visible, result }) => {
     );
 };
 
-ResultMobile.propTypes = {
-    is_visible: PropTypes.bool,
-    result: PropTypes.string,
-};
-
-export default ResultMobile;
+export default PositionsResultMobile;
diff --git a/packages/trader/src/App/Components/Elements/TogglePositions/__tests__/toggle-positions-mobile.spec.tsx b/packages/trader/src/App/Components/Elements/TogglePositions/__tests__/toggle-positions-mobile.spec.tsx
index 025a84d9b56a..8286a25344b1 100644
--- a/packages/trader/src/App/Components/Elements/TogglePositions/__tests__/toggle-positions-mobile.spec.tsx
+++ b/packages/trader/src/App/Components/Elements/TogglePositions/__tests__/toggle-positions-mobile.spec.tsx
@@ -58,7 +58,7 @@ const default_mock_store = {
     },
 };
 
-jest.mock('App/Components/Elements/PositionsDrawer/positions-modal-card.jsx', () =>
+jest.mock('App/Components/Elements/PositionsDrawer/positions-modal-card', () =>
     jest.fn(props => <div key={props.key}>PositionsModalCard</div>)
 );
 
diff --git a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.tsx b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.tsx
index eef96fdde3b9..210c358e5952 100644
--- a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.tsx
+++ b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.tsx
@@ -5,7 +5,7 @@ import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { NavLink } from 'react-router-dom';
 import EmptyPortfolioMessage from '../EmptyPortfolioMessage';
-import PositionsModalCard from 'App/Components/Elements/PositionsDrawer/positions-modal-card.jsx';
+import PositionsModalCard from 'App/Components/Elements/PositionsDrawer/positions-modal-card';
 import TogglePositions from './toggle-positions';
 import { observer, useStore } from '@deriv/stores';
 
@@ -45,7 +45,6 @@ const TogglePositionsMobile = observer(
             setHiddenPositionsIds([...new Set([...hidden_positions_ids, ...closed_positions_ids])]);
             togglePositionsDrawer();
         };
-
         // Show only 5 most recent open contracts
         const body_content = (
             <React.Fragment>
@@ -65,7 +64,6 @@ const TogglePositionsMobile = observer(
                             unmountOnExit
                         >
                             <PositionsModalCard
-                                //@ts-expect-error observer wrapped component needs to be ts migrated first
                                 onClickSell={onClickSell}
                                 onClickCancel={onClickCancel}
                                 key={portfolio_position.id}
diff --git a/packages/trader/src/App/Components/Form/TimePicker/dialog.jsx b/packages/trader/src/App/Components/Form/TimePicker/dialog.tsx
similarity index 78%
rename from packages/trader/src/App/Components/Form/TimePicker/dialog.jsx
rename to packages/trader/src/App/Components/Form/TimePicker/dialog.tsx
index ff1a62816947..8824e8bd245c 100644
--- a/packages/trader/src/App/Components/Form/TimePicker/dialog.jsx
+++ b/packages/trader/src/App/Components/Form/TimePicker/dialog.tsx
@@ -1,33 +1,54 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React from 'react';
 import { localize } from '@deriv/translations';
 import { toMoment } from '@deriv/shared';
 
-function isBetween(to_compare_moment, start_times_moment, end_times_moment, duration) {
+type TDialogProps = {
+    className: string;
+    end_times: moment.Moment[];
+    onChange: (arg: string | React.ChangeEvent<HTMLInputElement>) => void;
+    preClass: string;
+    selected_time: string;
+    start_times: moment.Moment[];
+};
+
+function isBetween(
+    to_compare_moment: moment.Moment,
+    start_times_moment: moment.Moment[],
+    end_times_moment: moment.Moment[],
+    duration?: string
+) {
     for (let i = 0; i < start_times_moment.length; i++) {
-        if (to_compare_moment.isBetween(start_times_moment[i], end_times_moment[i], duration)) {
+        if (
+            to_compare_moment.isBetween(
+                start_times_moment[i],
+                end_times_moment[i],
+                duration as moment.unitOfTime.StartOf
+            )
+        ) {
             return true;
         }
     }
     return false;
 }
 
-const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, className }) => {
+const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, className }: TDialogProps) => {
     const start_times_moment = start_times ? start_times.map(start_time => toMoment(start_time)) : [toMoment()];
     const end_times_moment = end_times
         ? end_times.map(end_time => toMoment(end_time))
-        : [toMoment().hour('23').minute('59').seconds('59').milliseconds('999')];
+        : [toMoment().hour(23).minute(59).seconds(59).milliseconds(999)];
     const to_compare_moment = toMoment();
     const [hour, minute] = selected_time.split(':');
     const hours = [...Array(24).keys()].map(a => `0${a}`.slice(-2));
     const minutes = [...Array(12).keys()].map(a => `0${a * 5}`.slice(-2));
 
-    const selectOption = (type, current_value, prev_value, is_enabled = true) => {
+    const selectOption = (type: string, current_value: string, prev_value: string, is_enabled = true) => {
         if (is_enabled && prev_value) {
             const [prev_hour, prev_minute] = prev_value.split(':');
             if ((type === 'h' && current_value !== prev_hour) || (type === 'm' && current_value !== prev_minute)) {
-                onChange(`${type === 'h' ? current_value : prev_hour}:${type === 'm' ? current_value : prev_minute}`);
+                const selected_hour = type === 'h' ? current_value : prev_hour;
+                const selected_minute = type === 'm' ? current_value : prev_minute;
+                onChange(`${selected_hour}:${selected_minute}`);
             }
         }
     };
@@ -40,8 +61,8 @@ const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, cla
                         <strong>{localize('Hour')}</strong>
                     </div>
                     <div>
-                        {hours.map((h, key) => {
-                            to_compare_moment.hour(h);
+                        {hours.map(h => {
+                            to_compare_moment.hour(Number(h));
                             const start_times_reset_minute = start_times_moment.map(start_time =>
                                 start_time.clone().minute(0)
                             );
@@ -69,7 +90,7 @@ const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, cla
                                         { [`${preClass}__selector-list-item--selected`]: hour === h },
                                         { [`${preClass}__selector-list-item--disabled`]: !is_enabled }
                                     )}
-                                    key={key}
+                                    key={h}
                                     onClick={() => {
                                         selectOption('h', h, selected_time, is_enabled);
                                     }}
@@ -85,8 +106,8 @@ const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, cla
                         <strong>{localize('Minute')}</strong>
                     </div>
                     <div>
-                        {minutes.map((mm, key) => {
-                            to_compare_moment.hour(hour).minute(mm);
+                        {minutes.map(mm => {
+                            to_compare_moment.hour(Number(hour)).minute(Number(mm));
                             const is_enabled = isBetween(
                                 to_compare_moment,
                                 start_times_moment,
@@ -100,7 +121,7 @@ const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, cla
                                         { [`${preClass}__selector-list-item--selected`]: minute === mm },
                                         { [`${preClass}__selector-list-item--disabled`]: !is_enabled }
                                     )}
-                                    key={key}
+                                    key={mm}
                                     onClick={() => {
                                         selectOption('m', mm, selected_time, is_enabled);
                                     }}
@@ -116,13 +137,4 @@ const Dialog = ({ preClass, selected_time, end_times, start_times, onChange, cla
     );
 };
 
-Dialog.propTypes = {
-    className: PropTypes.string,
-    end_times: PropTypes.array,
-    onChange: PropTypes.func,
-    preClass: PropTypes.string,
-    selected_time: PropTypes.array,
-    start_times: PropTypes.array,
-};
-
 export default Dialog;
diff --git a/packages/trader/src/App/Components/Form/TimePicker/index.js b/packages/trader/src/App/Components/Form/TimePicker/index.js
deleted file mode 100644
index 211fc0bce630..000000000000
--- a/packages/trader/src/App/Components/Form/TimePicker/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import TimePicker from './time-picker.jsx';
-
-export default TimePicker;
diff --git a/packages/trader/src/App/Components/Form/TimePicker/index.ts b/packages/trader/src/App/Components/Form/TimePicker/index.ts
new file mode 100644
index 000000000000..2185a96bb404
--- /dev/null
+++ b/packages/trader/src/App/Components/Form/TimePicker/index.ts
@@ -0,0 +1,3 @@
+import TimePicker from './time-picker';
+
+export default TimePicker;
diff --git a/packages/trader/src/App/Components/Form/TimePicker/time-picker.jsx b/packages/trader/src/App/Components/Form/TimePicker/time-picker.tsx
similarity index 77%
rename from packages/trader/src/App/Components/Form/TimePicker/time-picker.jsx
rename to packages/trader/src/App/Components/Form/TimePicker/time-picker.tsx
index 5e38be3e7836..fd5df901cc44 100644
--- a/packages/trader/src/App/Components/Form/TimePicker/time-picker.jsx
+++ b/packages/trader/src/App/Components/Form/TimePicker/time-picker.tsx
@@ -1,10 +1,22 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { Icon, InputField } from '@deriv/components';
-import Dialog from './dialog.jsx';
+import Dialog from './dialog';
 import { observer, useStore } from '@deriv/stores';
+import moment from 'moment';
+
+type TTimePickerProps = {
+    end_times: moment.Moment[];
+    is_nativepicker?: boolean;
+    name: string;
+    onChange: (e: { target: { name: string; value: string } }) => Promise<void>;
+    padding?: string;
+    placeholder: string;
+    selected_time: string;
+    start_times: moment.Moment[];
+    validation_errors?: string[];
+};
 
 const class_prefix = 'time-picker';
 
@@ -19,11 +31,11 @@ const TimePicker = observer(
         selected_time,
         start_times,
         validation_errors,
-    }) => {
+    }: TTimePickerProps) => {
         const { ui } = useStore();
         const { current_focus, setCurrentFocus } = ui;
         const [is_open, setIsOpen] = React.useState(false);
-        const [wrapper_ref, setWrapperRef] = React.useState(null);
+        const [wrapper_ref, setWrapperRef] = React.useState<HTMLDivElement | null>(null);
 
         React.useEffect(() => {
             document.addEventListener('mousedown', handleClickOutside);
@@ -34,22 +46,22 @@ const TimePicker = observer(
             setIsOpen(!is_open);
         };
 
-        const handleChange = arg => {
+        const handleChange = (arg: string | React.ChangeEvent<HTMLInputElement>) => {
             // To handle nativepicker;
-            const value = typeof arg === 'object' ? arg.target.selected_time : arg;
+            const value = typeof arg === 'object' ? arg.target.value : arg;
 
             if (value !== selected_time) {
                 onChange({ target: { name, value } });
             }
         };
 
-        const saveRef = node => {
+        const saveRef: React.RefCallback<HTMLDivElement> = node => {
             if (!node) return;
             setWrapperRef(node);
         };
 
-        const handleClickOutside = event => {
-            if (!wrapper_ref?.contains(event.target) && is_open) {
+        const handleClickOutside = (event: Event) => {
+            if (!wrapper_ref?.contains(event.target as Node) && is_open) {
                 setIsOpen(false);
             }
         };
@@ -63,8 +75,8 @@ const TimePicker = observer(
                         value={selected_time}
                         onChange={handleChange}
                         name={name}
-                        min={start_times[0]}
-                        max={end_times[end_times.length - 1]}
+                        min={start_times[0]?.format('HH:mm')}
+                        max={end_times[end_times.length - 1]?.format('HH:mm')}
                     />
                 ) : (
                     <React.Fragment>
@@ -109,17 +121,4 @@ const TimePicker = observer(
     }
 );
 
-TimePicker.propTypes = {
-    end_times: PropTypes.array,
-    is_clearable: PropTypes.bool,
-    is_nativepicker: PropTypes.bool,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    padding: PropTypes.string,
-    placeholder: PropTypes.string,
-    selected_time: PropTypes.string,
-    start_times: PropTypes.array,
-    validation_errors: PropTypes.array,
-};
-
 export default TimePicker;
diff --git a/packages/trader/src/App/Components/Routes/binary-link.jsx b/packages/trader/src/App/Components/Routes/binary-link.jsx
index 43d66e6c5d4e..2a4434fd6300 100644
--- a/packages/trader/src/App/Components/Routes/binary-link.jsx
+++ b/packages/trader/src/App/Components/Routes/binary-link.jsx
@@ -7,7 +7,7 @@ import getRoutesConfig from '../../Constants/routes-config';
 // TODO: solve circular dependency problem
 // when binary link is imported into components present in routes config
 // or into their descendants
-const BinaryLink = ({ active_class, to, children, ...props }) => {
+const BinaryLink = ({ active_class = '', to, children, ...props }) => {
     const path = normalizePath(to);
     const route = findRouteByPath(path, getRoutesConfig());
 
diff --git a/packages/trader/src/App/Containers/populate-header.jsx b/packages/trader/src/App/Containers/populate-header.tsx
similarity index 100%
rename from packages/trader/src/App/Containers/populate-header.jsx
rename to packages/trader/src/App/Containers/populate-header.tsx
diff --git a/packages/trader/src/Modules/Contract/Components/Digits/digits.tsx b/packages/trader/src/Modules/Contract/Components/Digits/digits.tsx
index e963a30c2ee7..acf0cad7a96f 100644
--- a/packages/trader/src/Modules/Contract/Components/Digits/digits.tsx
+++ b/packages/trader/src/Modules/Contract/Components/Digits/digits.tsx
@@ -25,7 +25,6 @@ type TOnLastDigitSpot = {
     is_latest: boolean;
     is_won?: boolean;
 };
-
 type TDigitsWrapper = TDigits & {
     onChangeStatus?: (params: TOnChangeStatus) => void;
     onLastDigitSpot?: (params: TOnLastDigitSpot) => void;
diff --git a/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/accumulators-chart-elements.spec.tsx b/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/accumulators-chart-elements.spec.tsx
index 450d0b3d3652..517c9cf0dd4b 100644
--- a/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/accumulators-chart-elements.spec.tsx
+++ b/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/accumulators-chart-elements.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import AccumulatorsChartElements from '../accumulators-chart-elements';
 
-jest.mock('App/Components/Elements/PositionsDrawer/helpers/positions-helper.js', () => ({
+jest.mock('App/Components/Elements/PositionsDrawer/helpers/positions-helper', () => ({
     filterByContractType: jest.fn(() => true),
 }));
 jest.mock('../accumulators-profit-loss-tooltip', () => jest.fn(() => <div>AccumulatorsProfitLossTooltip</div>));
diff --git a/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-chart-elements.tsx b/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-chart-elements.tsx
index 8ec25b78dd94..7b5ae0171dcd 100644
--- a/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-chart-elements.tsx
+++ b/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-chart-elements.tsx
@@ -1,4 +1,4 @@
-import { filterByContractType } from 'App/Components/Elements/PositionsDrawer/helpers/positions-helper.js';
+import { filterByContractType } from 'App/Components/Elements/PositionsDrawer/helpers/positions-helper';
 import React from 'react';
 import AccumulatorsProfitLossTooltip from './accumulators-profit-loss-tooltip';
 import { ProposalOpenContract } from '@deriv/api-types';
diff --git a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.tsx
similarity index 63%
rename from packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx
rename to packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.tsx
index 40968d4136c5..e3e191c0e053 100644
--- a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.tsx
@@ -2,42 +2,71 @@ import React from 'react';
 import { Checkbox, RadioGroup, Dialog, Popover, Text } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { onToggleCancellation, onChangeCancellationDuration } from 'Stores/Modules/Trading/Helpers/multiplier';
-import Fieldset from 'App/Components/Form/fieldset.tsx';
+import Fieldset from 'App/Components/Form/fieldset';
 import { observer, useStore } from '@deriv/stores';
+import { TTradeStore } from 'Types';
 import { useTraderStore } from 'Stores/useTraderStores';
 
-const DealCancellationWarningDialog = observer(({ is_visible, onConfirm, onCancel }) => {
-    const { ui } = useStore();
-    const { disableApp, enableApp, should_show_cancellation_warning, toggleCancellationWarning } = ui;
-    return (
-        <Dialog
-            className='trade-params__multiplier-deal-cancellation-dialog'
-            title={localize('About deal cancellation')}
-            confirm_button_text={localize('Got it')}
-            cancel_button_text={localize('Cancel')}
-            onConfirm={onConfirm}
-            onCancel={onCancel}
-            is_mobile_full_width={false}
-            is_visible={is_visible}
-            disableApp={disableApp}
-            enableApp={enableApp}
-            portal_element_id='modal_root'
+type TDealCancellationWarningDialog = {
+    is_visible: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+
+type TCancelDeal = {
+    has_cancellation: boolean;
+    has_take_profit: boolean;
+    has_stop_loss: boolean;
+    onChangeMultiple: (
+        props: Partial<
+            Pick<
+                TTradeStore,
+                | 'cancellation_duration'
+                | 'has_cancellation'
+                | 'has_stop_loss'
+                | 'has_take_profit'
+                | 'stop_loss'
+                | 'take_profit'
+            >
         >
-            <Text size='xxxs' color='general'>
-                <Localize i18n_default_text='Take profit and/or stop loss are not available while deal cancellation is active.' />
-            </Text>
-            <Checkbox
-                defaultChecked={!should_show_cancellation_warning}
-                onChange={() => toggleCancellationWarning()}
-                name={'should_show_cancellation_warning'}
-                label={localize("Don't show this again")}
-            />
-        </Dialog>
-    );
-});
+    ) => void;
+    cancellation_duration: string;
+};
+
+const DealCancellationWarningDialog = observer(
+    ({ is_visible, onConfirm, onCancel }: TDealCancellationWarningDialog) => {
+        const { ui } = useStore();
+        const { disableApp, enableApp, should_show_cancellation_warning, toggleCancellationWarning } = ui;
+        return (
+            <Dialog
+                className='trade-params__multiplier-deal-cancellation-dialog'
+                title={localize('About deal cancellation')}
+                confirm_button_text={localize('Got it')}
+                cancel_button_text={localize('Cancel')}
+                onConfirm={onConfirm}
+                onCancel={onCancel}
+                is_mobile_full_width={false}
+                is_visible={is_visible}
+                disableApp={disableApp}
+                enableApp={enableApp}
+                portal_element_id='modal_root'
+            >
+                <Text size='xxxs' color='general'>
+                    <Localize i18n_default_text='Take profit and/or stop loss are not available while deal cancellation is active.' />
+                </Text>
+                <Checkbox
+                    defaultChecked={!should_show_cancellation_warning}
+                    onChange={() => toggleCancellationWarning()}
+                    name='should_show_cancellation_warning'
+                    label={localize("Don't show this again")}
+                />
+            </Dialog>
+        );
+    }
+);
 
 const CancelDeal = observer(
-    ({ has_cancellation, has_take_profit, has_stop_loss, onChangeMultiple, cancellation_duration }) => {
+    ({ has_cancellation, has_take_profit, has_stop_loss, onChangeMultiple, cancellation_duration }: TCancelDeal) => {
         const { ui } = useStore();
         const { should_show_cancellation_warning } = ui;
         const { cancellation_range_list } = useTraderStore();
@@ -78,7 +107,7 @@ const CancelDeal = observer(
                             id='dt_multiplier-stake__tooltip'
                             is_bubble_hover_enabled
                             classNameBubble='trade-container__deal-cancellation-popover'
-                            zIndex={9999}
+                            zIndex='9999'
                             message={localize(
                                 'Cancel your trade anytime within a chosen time-frame. Triggered automatically if your trade reaches the stop out level within the chosen time-frame.'
                             )}
diff --git a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.jsx b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.tsx
similarity index 98%
rename from packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.jsx
rename to packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.tsx
index 08befd4c6659..d9e522fb057e 100644
--- a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Money } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import RiskManagementDialog from 'Modules/Trading/Containers/Multiplier/risk-management-dialog.jsx';
+import RiskManagementDialog from 'Modules/Trading/Containers/Multiplier/risk-management-dialog';
 import { observer } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 
diff --git a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.js b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.js
deleted file mode 100644
index 9568f8361b3f..000000000000
--- a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import TradingDatePicker from './trading-date-picker.jsx';
-
-export default TradingDatePicker;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.ts b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.ts
new file mode 100644
index 000000000000..96d6e375f1b7
--- /dev/null
+++ b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/index.ts
@@ -0,0 +1,3 @@
+import TradingDatePicker from './trading-date-picker';
+
+export default TradingDatePicker;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.tsx
similarity index 77%
rename from packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx
rename to packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.tsx
index 2d55815ca80b..45d50054710f 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/DatePicker/trading-date-picker.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
+import moment from 'moment';
 import React from 'react';
 import { DatePicker, Tooltip } from '@deriv/components';
 import { isTimeValid, setTime, toMoment, useIsMounted, hasIntradayDurationUnit } from '@deriv/shared';
@@ -8,7 +8,19 @@ import { ContractType } from 'Stores/Modules/Trading/Helpers/contract-type';
 import { observer, useStore } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 
-const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) => {
+type TDatePickerOnChange = React.ComponentProps<typeof DatePicker>['onChange'];
+type TMarketEvent = {
+    dates: string[];
+    descrip: string;
+};
+type TTradingDatePickerProps = {
+    id: string;
+    is_24_hours_contract?: boolean;
+    mode?: string;
+    name: string;
+};
+
+const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }: TTradingDatePickerProps) => {
     const { common } = useStore();
     const { server_time } = common;
     const {
@@ -25,14 +37,15 @@ const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) =>
 
     const isMounted = useIsMounted();
 
-    const [disabled_days, setDisabledDays] = React.useState([]);
-    const [market_events, setMarketEvents] = React.useState([]);
+    const [disabled_days, setDisabledDays] = React.useState<number[]>([]);
+    const [market_events, setMarketEvents] = React.useState<TMarketEvent[]>([]);
     const [duration, setDuration] = React.useState(current_duration);
-    const [selected_date, setSelectedDate] = React.useState();
+    const [selected_date, setSelectedDate] = React.useState<moment.Moment>();
 
     React.useEffect(() => {
         onChangeCalendarMonth();
-    }, [onChangeCalendarMonth]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     React.useEffect(() => {
         if (duration !== current_duration) {
@@ -50,7 +63,7 @@ const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) =>
     const getMomentContractStartDateTime = () => {
         return setTime(
             toMoment(getMinDuration()),
-            isTimeValid(start_time) ? start_time : server_time.format('HH:mm:ss')
+            isTimeValid(start_time ?? '') ? start_time : server_time?.format('HH:mm:ss') ?? ''
         );
     };
 
@@ -66,17 +79,16 @@ const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) =>
     };
 
     const getMaxDateDuration = () => {
+        const max_daily_duration = start_date ? 24 * 3600 : getMaxDailyDuration();
         return is_24_hours_contract
-            ? getMomentContractStartDateTime()
-                  .clone()
-                  .add(start_date ? 24 * 3600 : getMaxDailyDuration(), 'second')
+            ? getMomentContractStartDateTime().clone().add(max_daily_duration, 'second')
             : getMomentContractStartDateTime().clone().add(getMaxDailyDuration(), 'second');
     };
 
     const hasRangeSelection = () => mode === 'duration';
 
     const getFooter = () => {
-        if (!hasRangeSelection()) return null;
+        if (!hasRangeSelection()) return '';
 
         if (!duration) return localize('Minimum duration is 1 day');
         if (+duration === 1) return localize('Duration: {{duration}} day', { duration });
@@ -89,19 +101,19 @@ const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) =>
             : selected_date || getMinDateExpiry();
     };
 
-    const onChangeDate = e => {
+    const onChangeDate: TDatePickerOnChange = e => {
         if (isMounted()) {
             if (hasRangeSelection()) {
-                setDuration(e.duration);
-            } else if (e.target.value) {
-                setSelectedDate(toMoment(e.target.value));
+                setDuration(Number(e.duration));
+            } else if (e.target?.value) {
+                setSelectedDate(toMoment(e.target?.value));
             }
         }
 
         if (typeof onChange === 'function' && e.target) {
             onChange({
                 target: {
-                    name: e.target.name,
+                    name: e.target.name || '',
                     value: hasRangeSelection() ? e.target.value : toMoment(e.target.value).format('YYYY-MM-DD'),
                 },
             });
@@ -109,11 +121,12 @@ const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) =>
     };
 
     const onChangeCalendarMonth = React.useCallback(
+        // Do not move this callback up. It will cause infinite loop.
         async (e = toMoment().format('YYYY-MM-DD')) => {
-            const new_market_events = [];
-            let new_disabled_days = [];
-
+            const new_market_events: TMarketEvent[] = [];
+            let new_disabled_days: number[] = [];
             const events = await ContractType.getTradingEvents(e, symbol);
+            // @ts-expect-error TODO: check if TS error is gone after contract-type is converted to TS
             events.forEach(evt => {
                 const dates = evt.dates.split(', '); // convert dates str into array
                 const idx = dates.indexOf('Fridays');
@@ -167,18 +180,11 @@ const TradingDatePicker = observer(({ id, is_24_hours_contract, mode, name }) =>
                     disabled_days={disabled_days}
                     keep_open
                     readOnly={!hasRangeSelection()}
-                    value={getDatepickerValue()}
+                    value={getDatepickerValue() as string}
                 />
             </Tooltip>
         </div>
     );
 });
 
-TradingDatePicker.propTypes = {
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    is_24_hours_contract: PropTypes.bool,
-    mode: PropTypes.string,
-    name: PropTypes.string,
-};
-
 export default TradingDatePicker;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.js b/packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.js
deleted file mode 100644
index 47ae05b98d23..000000000000
--- a/packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import TradingTimePicker from './trading-time-picker.jsx';
-
-export default TradingTimePicker;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.ts b/packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.ts
new file mode 100644
index 000000000000..78ac285aad36
--- /dev/null
+++ b/packages/trader/src/Modules/Trading/Components/Form/TimePicker/index.ts
@@ -0,0 +1,3 @@
+import TradingTimePicker from './trading-time-picker';
+
+export default TradingTimePicker;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TimePicker/trading-time-picker.jsx b/packages/trader/src/Modules/Trading/Components/Form/TimePicker/trading-time-picker.tsx
similarity index 100%
rename from packages/trader/src/Modules/Trading/Components/Form/TimePicker/trading-time-picker.jsx
rename to packages/trader/src/Modules/Trading/Components/Form/TimePicker/trading-time-picker.tsx
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx
index 8565a612b6c3..5dec629d54c9 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/advanced-duration.jsx
@@ -130,7 +130,6 @@ const AdvancedDuration = observer(
                                 id='dt_advanced_duration_datepicker'
                                 name='expiry_date'
                                 is_24_hours_contract={is_24_hours_contract}
-                                value={expiry_date}
                             />
                             {
                                 is_24_hours_contract && <TradingTimePicker />
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/info.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/info.tsx
similarity index 71%
rename from packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/info.jsx
rename to packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/info.tsx
index 3042c960b29c..29a4a14dd5c6 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/info.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/info.tsx
@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Popover, Money, Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
 import { observer } from '@deriv/stores';
@@ -9,8 +8,31 @@ import { useTraderStore } from 'Stores/useTraderStores';
 const commission_tooltip_margin = 30;
 const stop_out_tooltip_margin = 160;
 
+type TMultipliersInfo = {
+    amount?: number | string;
+    className: string;
+    commission_text_size?: string;
+    commission?: number | null;
+    is_tooltip_relative?: boolean;
+    should_show_tooltip?: boolean;
+    stop_out_text_size?: string;
+    stop_out?: number | null;
+    multiplier?: number;
+};
+
+type TPopoverPosition = React.ComponentProps<typeof Popover>['alignment'];
+
+type TTooltip_params = { alignment: TPopoverPosition; relative_render?: boolean; margin?: number; zIndex?: string };
+
 const MultipliersInfo = observer(
-    ({ className, commission_text_size, stop_out_text_size, is_tooltip_relative, should_show_tooltip, ...props }) => {
+    ({
+        className,
+        commission_text_size,
+        stop_out_text_size,
+        is_tooltip_relative,
+        should_show_tooltip,
+        ...props
+    }: TMultipliersInfo) => {
         const trade = useTraderStore();
         const { currency, has_stop_loss } = trade;
         const multiplier = props.multiplier ?? (trade.multiplier || 0);
@@ -54,7 +76,7 @@ const MultipliersInfo = observer(
             <Localize
                 i18n_default_text='<0>{{commission_percentage}}%</0> of (<1/> * {{multiplier}})'
                 values={{
-                    commission_percentage: Number((commission * 100) / (multiplier * amount)).toFixed(4),
+                    commission_percentage: ((Number(commission) * 100) / (multiplier * Number(amount))).toFixed(4),
                     multiplier,
                 }}
                 components={[
@@ -68,19 +90,25 @@ const MultipliersInfo = observer(
             <Localize
                 i18n_default_text='When your current loss equals or exceeds {{stop_out_percentage}}% of your stake, your contract will be closed at the nearest available asset price.'
                 values={{
-                    stop_out_percentage: Math.floor(Math.abs(Number((stop_out * 100) / amount))),
+                    stop_out_percentage: Math.floor(Math.abs((stop_out * 100) / Number(amount))),
                 }}
             />
         );
 
-        const getInfo = ({ text, message, margin }) => {
+        const getInfo = ({
+            text,
+            message,
+            margin,
+        }: {
+            text: React.ReactNode;
+            message: React.ReactNode;
+            margin: number;
+        }) => {
+            const tooltip_params: TTooltip_params = is_tooltip_relative
+                ? { alignment: 'left', relative_render: true, margin }
+                : { alignment: 'top', zIndex: '9999' };
             return should_show_tooltip ? (
-                <Popover
-                    message={message}
-                    {...(is_tooltip_relative
-                        ? { alignment: 'left', relative_render: true, margin }
-                        : { alignment: 'top', zIndex: 9999 })}
-                >
+                <Popover message={message} {...tooltip_params}>
                     {text}
                 </Popover>
             ) : (
@@ -110,12 +138,4 @@ const MultipliersInfo = observer(
     }
 );
 
-MultipliersInfo.propTypes = {
-    className: PropTypes.string,
-    commission_text_size: PropTypes.string,
-    is_tooltip_relative: PropTypes.bool,
-    should_show_tooltip: PropTypes.bool,
-    stop_out_text_size: PropTypes.string,
-};
-
 export default MultipliersInfo;
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx
index 9aec863c016d..d9d03da39f20 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx
@@ -3,11 +3,11 @@ import classNames from 'classnames';
 import { Money, Text, Popover } from '@deriv/components';
 import { useTraderStore } from 'Stores/useTraderStores';
 import { observer } from '@deriv/stores';
-import MultiplierAmountModal from 'Modules/Trading/Containers/Multiplier/multiplier-amount-modal.jsx';
+import MultiplierAmountModal from 'Modules/Trading/Containers/Multiplier/multiplier-amount-modal';
 import RadioGroupOptionsModal from 'Modules/Trading/Containers/radio-group-options-modal';
 import MultipliersExpiration from 'Modules/Trading/Components/Form/TradeParams/Multiplier/expiration.jsx';
 import MultipliersExpirationModal from 'Modules/Trading/Components/Form/TradeParams/Multiplier/expiration-modal.jsx';
-import MultipliersInfo from 'Modules/Trading/Components/Form/TradeParams/Multiplier/info.jsx';
+import MultipliersInfo from 'Modules/Trading/Components/Form/TradeParams/Multiplier/info';
 import { localize, Localize } from '@deriv/translations';
 import { getGrowthRatePercentage, getTickSizeBarrierPercentage } from '@deriv/shared';
 
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount-mobile.tsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount-mobile.tsx
index b968f272ee63..6a5e8b2cc6df 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount-mobile.tsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount-mobile.tsx
@@ -7,22 +7,25 @@ import { Money, Numpad, Tabs } from '@deriv/components';
 import { getDecimalPlaces, isEmptyObject } from '@deriv/shared';
 import MinMaxStakeInfo from './min-max-stake-info';
 
-type TAmountMobile = React.ComponentProps<typeof Basis> & {
+type TAmountMobile = Pick<
+    React.ComponentProps<typeof Basis>,
+    'toggleModal' | 'duration_value' | 'duration_unit' | 'has_duration_error' | 'setAmountError' | 'setSelectedAmount'
+> & {
     amount_tab_idx?: number;
-    setAmountTabIdx: React.ComponentProps<typeof Tabs>['onTabItemClick'];
+    setAmountTabIdx?: React.ComponentProps<typeof Tabs>['onTabItemClick'];
     stake_value: string | number;
-    payout_value: string | number;
+    payout_value?: string | number;
 };
 
 type TBasis = {
     basis: string;
-    duration_unit: string;
-    duration_value: number;
+    duration_unit?: string;
+    duration_value?: number;
     toggleModal: () => void;
-    has_duration_error: boolean;
-    selected_basis: string | number;
+    has_duration_error?: boolean;
+    selected_basis?: string | number;
     setSelectedAmount: (basis: string, num: string | number) => void;
-    setAmountError: (has_error: boolean) => void;
+    setAmountError?: (has_error: boolean) => void;
 };
 
 const Basis = observer(
@@ -44,11 +47,11 @@ const Basis = observer(
             is_turbos,
             is_vanilla,
             onChangeMultiple,
-            stake_boundary,
             amount: trade_amount,
             basis: trade_basis,
             duration_unit: trade_duration_unit,
             duration: trade_duration,
+            stake_boundary,
         } = useTraderStore();
         const { min_stake, max_stake } = stake_boundary[contract_type.toUpperCase()] || {};
         const user_currency_decimal_places = getDecimalPlaces(currency);
@@ -89,18 +92,18 @@ const Basis = observer(
 
             if (value.toString() === '0.' || selected_value === 0) {
                 addToast({ key: 'amount_error', content: localized_message, type: 'error', timeout: 2000 });
-                setAmountError(true);
+                setAmountError?.(true);
                 return 'error';
             } else if (isNaN(selected_value) || selected_value < min_amount || value.toString().length < 1) {
                 addToast({ key: 'amount_error', content: localized_message, type: 'error', timeout: 2000 });
-                setAmountError(true);
+                setAmountError?.(true);
                 return false;
             } else if (selected_value < Number(min_stake)) {
                 addToast({ key: 'amount_error', content: min_max_stake_message, type: 'error', timeout: 2000 });
-                setAmountError(true);
+                setAmountError?.(true);
                 return 'error';
             }
-            setAmountError(false);
+            setAmountError?.(false);
             return true;
         };
 
@@ -116,7 +119,7 @@ const Basis = observer(
                         })}
                     >
                         <Numpad
-                            value={selected_basis}
+                            value={selected_basis || ''}
                             format={formatAmount}
                             onSubmit={setBasisAndAmount}
                             currency={currency}
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount.tsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount.tsx
index c33cf5e80ab1..ff841b941417 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount.tsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount.tsx
@@ -4,7 +4,7 @@ import { Localize, localize } from '@deriv/translations';
 import AllowEquals from './allow-equals';
 import Fieldset from 'App/Components/Form/fieldset';
 import Multiplier from './Multiplier/multiplier.jsx';
-import MultipliersInfo from './Multiplier/info.jsx';
+import MultipliersInfo from './Multiplier/info';
 import MinMaxStakeInfo from './min-max-stake-info';
 import React from 'react';
 import classNames from 'classnames';
@@ -17,7 +17,7 @@ type TInput = {
     current_focus: string | null;
     error_messages?: string[];
     is_disabled?: boolean;
-    is_single_currency: boolean;
+    is_single_currency?: boolean;
     onChange: (e: { target: { name: string; value: number | string } }) => void;
     setCurrentFocus: (name: string | null) => void;
 };
@@ -186,7 +186,6 @@ const Amount = observer(({ is_minimized = false }: { is_minimized?: boolean }) =
                 <React.Fragment>
                     <Multiplier />
                     <MultipliersInfo
-                        /*// @ts-expect-error observer wrapped component props cant be detected until its ts-migrated */
                         className='trade-container__multipliers-trade-info'
                         should_show_tooltip
                         is_tooltip_relative
diff --git a/packages/trader/src/Modules/Trading/Components/Form/screen-small.tsx b/packages/trader/src/Modules/Trading/Components/Form/screen-small.tsx
index aef43f88b21b..7b74cdf82420 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/screen-small.tsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/screen-small.tsx
@@ -17,7 +17,7 @@ import { BarrierMobile, LastDigitMobile } from 'Modules/Trading/Containers/trade
 import ContractType from 'Modules/Trading/Containers/contract-type';
 import MobileWidget from 'Modules/Trading/Components/Elements/mobile-widget.jsx';
 import Purchase from 'Modules/Trading/Containers/purchase';
-import RiskManagementInfo from 'Modules/Trading/Components/Elements/Multiplier/risk-management-info.jsx';
+import RiskManagementInfo from 'Modules/Trading/Components/Elements/Multiplier/risk-management-info';
 import TakeProfit from 'Modules/Trading/Components/Form/TradeParams/Multiplier/take-profit.jsx';
 import 'Sass/app/_common/mobile-widget.scss';
 import classNames from 'classnames';
diff --git a/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-amount-modal.jsx b/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-amount-modal.tsx
similarity index 75%
rename from packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-amount-modal.jsx
rename to packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-amount-modal.tsx
index ff8a61763e63..4fa8a039600c 100644
--- a/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-amount-modal.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-amount-modal.tsx
@@ -4,27 +4,29 @@ import { useIsMounted, WS } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { requestPreviewProposal } from 'Stores/Modules/Trading/Helpers/preview-proposal';
 import AmountMobile from 'Modules/Trading/Components/Form/TradeParams/amount-mobile';
-import MultipliersInfo from 'Modules/Trading/Components/Form/TradeParams/Multiplier/info.jsx';
-import { observer, useStore } from '@deriv/stores';
+import MultipliersInfo from 'Modules/Trading/Components/Form/TradeParams/Multiplier/info';
+import { observer } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
+import { TTradeStore } from 'Types';
 
-const MultiplierAmountModal = observer(({ is_open, toggleModal }) => {
+type TToggleModal = () => void;
+type TMultiplierAmountModal = {
+    is_open: boolean;
+    toggleModal: TToggleModal;
+};
+
+const MultiplierAmountModal = ({ is_open, toggleModal }: TMultiplierAmountModal) => {
     // Fix to prevent iOS from zooming in erratically on quick taps
     usePreventIOSZoom();
-    const {
-        ui: { enableApp, disableApp },
-    } = useStore();
 
     return (
         <React.Fragment>
             <Modal
                 id='dt_trade_parameters_mobile'
                 className='trade-params'
-                enableApp={enableApp}
                 is_open={is_open}
                 is_title_centered
                 should_header_stick_body={false}
-                disableApp={disableApp}
                 toggleModal={toggleModal}
                 height='auto'
                 width='calc(100vw - 32px)'
@@ -36,24 +38,24 @@ const MultiplierAmountModal = observer(({ is_open, toggleModal }) => {
             </Modal>
         </React.Fragment>
     );
-});
+};
 
 export default MultiplierAmountModal;
 
-const TradeParamsMobile = observer(({ toggleModal }) => {
+const TradeParamsMobile = observer(({ toggleModal }: { toggleModal: TToggleModal }) => {
     const trade_store = useTraderStore();
-    const { amount, currency, trade_stop_out } = trade_store;
+    const { amount, currency } = trade_store;
 
-    const [stake_value, setStakeValue] = React.useState(amount);
-    const [commission, setCommission] = React.useState(null);
-    const [stop_out, setStopOut] = React.useState(null);
-    const stake_ref = React.useRef(amount);
+    const [stake_value, setStakeValue] = React.useState<string | number>(amount);
+    const [commission, setCommission] = React.useState<number | null>();
+    const [stop_out, setStopOut] = React.useState<number | null>();
+    const stake_ref = React.useRef<string | number>(amount);
     const isMounted = useIsMounted();
 
     React.useEffect(() => {
         if (stake_value === amount) return undefined;
 
-        const onProposalResponse = response => {
+        const onProposalResponse: TTradeStore['onProposalResponse'] = response => {
             const { proposal, echo_req, subscription } = response;
             if (
                 isMounted() &&
@@ -62,7 +64,7 @@ const TradeParamsMobile = observer(({ toggleModal }) => {
                 Number(echo_req.amount) === Number(stake_ref.current)
             ) {
                 setCommission(proposal.commission);
-                setStopOut(proposal.limit_order?.stop_out?.order_amount);
+                proposal.limit_order?.stop_out && setStopOut(proposal.limit_order.stop_out?.order_amount);
             } else if (subscription?.id) {
                 WS.forget(subscription.id);
             }
@@ -76,7 +78,7 @@ const TradeParamsMobile = observer(({ toggleModal }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [stake_value]);
 
-    const setSelectedAmount = (basis, stake) => {
+    const setSelectedAmount = (basis: string | undefined, stake: number | string) => {
         setStakeValue(stake);
         stake_ref.current = stake;
     };
@@ -89,14 +91,12 @@ const TradeParamsMobile = observer(({ toggleModal }) => {
                     classNameBubble='dc-popover__trade-params'
                     icon='info'
                     id='dt_multiplier-stake__tooltip'
-                    zIndex={9999}
+                    zIndex='9999'
                     is_bubble_hover_enabled
                     message={
                         <Localize
                             i18n_default_text='To ensure your loss does not exceed your stake, your contract will be closed automatically when your loss equals to <0/>.'
-                            components={[
-                                <Money key={0} amount={stop_out || trade_stop_out} currency={currency} show_currency />,
-                            ]}
+                            components={[<Money key={0} amount={stop_out || ''} currency={currency} show_currency />]}
                         />
                     }
                 />
@@ -105,7 +105,6 @@ const TradeParamsMobile = observer(({ toggleModal }) => {
                 toggleModal={toggleModal}
                 amount_tab_idx={0}
                 setSelectedAmount={setSelectedAmount}
-                setAmountError={() => {}}
                 stake_value={stake_value}
             />
             <MultipliersInfo
diff --git a/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-options.jsx b/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-options.tsx
similarity index 79%
rename from packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-options.jsx
rename to packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-options.tsx
index dc9b93addaa7..89cdf0d627eb 100644
--- a/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-options.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/Multiplier/multiplier-options.tsx
@@ -1,26 +1,31 @@
 import React from 'react';
-import MultipliersInfo from 'Modules/Trading/Components/Form/TradeParams/Multiplier/info.jsx';
+import MultipliersInfo from 'Modules/Trading/Components/Form/TradeParams/Multiplier/info';
 import RadioGroupWithInfoMobile from 'Modules/Trading/Components/Form/RadioGroupWithInfoMobile';
 import { requestPreviewProposal } from 'Stores/Modules/Trading/Helpers/preview-proposal';
 import { localize } from '@deriv/translations';
 import { observer } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 import { useIsMounted, WS } from '@deriv/shared';
+import { TTradeStore } from 'Types';
 
-const MultiplierOptions = observer(({ toggleModal }) => {
+type TMultiplierOptions = {
+    toggleModal: () => void;
+};
+
+const MultiplierOptions = observer(({ toggleModal }: TMultiplierOptions) => {
     const trade_store = useTraderStore();
     const { amount, multiplier, multiplier_range_list, onChange } = trade_store;
-    const [commission, setCommission] = React.useState(null);
-    const [stop_out, setStopOut] = React.useState(null);
+    const [commission, setCommission] = React.useState<number | null>();
+    const [stop_out, setStopOut] = React.useState<number>();
     const isMounted = useIsMounted();
 
     React.useEffect(() => {
         if (!amount) return undefined;
 
-        const onProposalResponse = ({ echo_req, proposal, subscription }) => {
+        const onProposalResponse: TTradeStore['onProposalResponse'] = ({ echo_req, proposal, subscription }) => {
             if (isMounted() && proposal && echo_req.contract_type === 'MULTUP' && Number(echo_req.amount) === amount) {
                 setCommission(proposal.commission);
-                setStopOut(proposal.limit_order?.stop_out?.order_amount);
+                proposal.limit_order?.stop_out && setStopOut(proposal.limit_order.stop_out?.order_amount);
             } else if (subscription?.id) {
                 WS.forget(subscription.id);
             }
diff --git a/packages/trader/src/Modules/Trading/Containers/Multiplier/risk-management-dialog.jsx b/packages/trader/src/Modules/Trading/Containers/Multiplier/risk-management-dialog.tsx
similarity index 80%
rename from packages/trader/src/Modules/Trading/Containers/Multiplier/risk-management-dialog.jsx
rename to packages/trader/src/Modules/Trading/Containers/Multiplier/risk-management-dialog.tsx
index fb08c577353f..8f2e607fa300 100644
--- a/packages/trader/src/Modules/Trading/Containers/Multiplier/risk-management-dialog.jsx
+++ b/packages/trader/src/Modules/Trading/Containers/Multiplier/risk-management-dialog.tsx
@@ -7,9 +7,19 @@ import { observer } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 import StopLoss from 'Modules/Trading/Components/Form/TradeParams/Multiplier/stop-loss.jsx';
 import TakeProfit from 'Modules/Trading/Components/Form/TradeParams/Multiplier/take-profit.jsx';
-import CancelDeal from 'Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx';
+import CancelDeal from 'Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile';
 
-const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
+type TRiskManagementDialog = {
+    is_open: boolean;
+    onClose: () => void;
+    toggleDialog: () => void;
+};
+type TValidation_errors = {
+    take_profit: string[] | [];
+    stop_loss: string[] | [];
+};
+
+const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }: TRiskManagementDialog) => {
     const {
         is_turbos,
         take_profit,
@@ -31,11 +41,11 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
     };
     const [state, setState] = React.useState(applied_risk_management_state);
 
-    const [validation_errors, setValidationErrors] = React.useState({});
+    const [validation_errors, setValidationErrors] = React.useState<TValidation_errors | Record<string, never>>({});
 
     const should_show_deal_cancellation = cancellation_range_list?.length > 0;
 
-    const getStateToCompare = _state => {
+    const getStateToCompare = (_state: typeof applied_risk_management_state) => {
         const props_to_pick = [
             'has_take_profit',
             'has_stop_loss',
@@ -52,7 +62,7 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
         return isDeepEqual(getStateToCompare(state), getStateToCompare(applied_risk_management_state));
     };
 
-    const validate = new_state => {
+    const validate = (new_state: typeof applied_risk_management_state) => {
         setValidationErrors({
             take_profit:
                 new_state.has_take_profit && !new_state.take_profit
@@ -63,15 +73,15 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
         });
     };
 
-    const onChange = e => {
+    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
         const new_state = { ...state };
-        new_state[name] = value;
+        new_state[name as 'take_profit' | 'stop_loss' | 'cancellation_duration'] = value;
         setState(new_state);
         validate(new_state);
     };
 
-    const onChangeMultipleLocal = props => {
+    const onChangeMultipleLocal = (props: keyof typeof applied_risk_management_state) => {
         const new_state = { ...state };
         Object.assign(new_state, props);
         setState(new_state);
@@ -83,9 +93,9 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
         toggleDialog();
     };
 
-    const resetAndClose = (...args) => {
+    const resetAndClose = () => {
         setState(applied_risk_management_state);
-        onClose(...args);
+        onClose();
     };
 
     return (
@@ -98,6 +108,7 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
                     height_offset='54px'
                 >
                     <TakeProfit
+                        // @ts-expect-error TODO: ts migration of <TakeProfit />
                         take_profit={state.take_profit}
                         has_take_profit={state.has_take_profit}
                         onChange={onChange}
@@ -106,6 +117,7 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
                     />
                     {!is_turbos && (
                         <StopLoss
+                            // @ts-expect-error TODO: ts migration of <StopLoss />
                             stop_loss={state.stop_loss}
                             has_stop_loss={state.has_stop_loss}
                             onChange={onChange}
@@ -119,7 +131,11 @@ const RiskManagementDialog = observer(({ is_open, onClose, toggleDialog }) => {
                             has_stop_loss={state.has_stop_loss}
                             has_cancellation={state.has_cancellation}
                             cancellation_duration={state.cancellation_duration}
-                            onChangeMultiple={onChangeMultipleLocal}
+                            onChangeMultiple={
+                                onChangeMultipleLocal as unknown as React.ComponentProps<
+                                    typeof CancelDeal
+                                >['onChangeMultiple']
+                            }
                         />
                     )}
                     <div className='trade-params__multiplier-risk-management-dialog-bottom-separator' />
diff --git a/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.jsx b/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.jsx
deleted file mode 100644
index a1f963ea7d70..000000000000
--- a/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { render, screen } from '@testing-library/react';
-import { mockStore } from '@deriv/stores';
-import TraderProviders from '../../../../trader-providers';
-import RadioGroupOptionsModal from '../radio-group-options-modal';
-
-const default_mocked_props = {
-    is_open: true,
-    modal_title: 'tests title',
-    toggleModal: jest.fn(),
-};
-const default_mock_store = {
-    modules: {
-        trade: {
-            accumulator_range_list: [1, 2, 3],
-            growth_rate: 0.03,
-            onChange: jest.fn(),
-            tick_size_barrier: 0,
-            proposal_info: {},
-        },
-    },
-};
-
-jest.mock('Modules/Trading/Containers/Multiplier/multiplier-options', () =>
-    jest.fn(() => <div>MultiplierOptions component</div>)
-);
-jest.mock('Modules/Trading/Components/Form/RadioGroupWithInfoMobile', () =>
-    jest.fn(props => <div data-test={props.has_error_or_not_loaded}>RadioGroupWithInfoMobile component</div>)
-);
-
-describe('<RadioGroupOptionsModal />', () => {
-    const mockRadioGroupOptionsModal = (mocked_store, mocked_props) => {
-        return (
-            <TraderProviders store={mocked_store}>
-                <RadioGroupOptionsModal {...mocked_props} />
-            </TraderProviders>
-        );
-    };
-    beforeAll(() => {
-        ReactDOM.createPortal = jest.fn(component => {
-            return component;
-        });
-    });
-
-    afterAll(() => {
-        ReactDOM.createPortal.mockClear();
-    });
-
-    it('should render component with <RadioGroupWithInfoMobile /> inside if modal_title !== Multiplier ', () => {
-        const mock_root_store = mockStore(default_mock_store);
-        render(mockRadioGroupOptionsModal(mock_root_store, default_mocked_props));
-
-        expect(screen.queryByText(/MultiplierOptions/i)).not.toBeInTheDocument();
-        expect(screen.getByText(/RadioGroupWithInfoMobile/i)).toBeInTheDocument();
-    });
-    it('should render component with <MultiplierOptions /> inside if modal_title === Multiplier ', () => {
-        const new_mock_props = { ...default_mocked_props, modal_title: 'Multiplier' };
-        const mock_root_store = mockStore(default_mock_store);
-        render(mockRadioGroupOptionsModal(mock_root_store, new_mock_props));
-
-        expect(screen.getByText(/MultiplierOptions/i)).toBeInTheDocument();
-        expect(screen.queryByText(/RadioGroupWithInfoMobile/i)).not.toBeInTheDocument();
-    });
-    it('has_error_or_not_loaded should be falsy if proposal_info includes proper information', () => {
-        const new_mock_store = { ...default_mocked_props };
-        new_mock_store.modules = {
-            trade: {
-                accumulator_range_list: [1, 2, 3],
-                growth_rate: 0.03,
-                onChange: jest.fn(),
-                tick_size_barrier: 0,
-                proposal_info: { ACCU: { has_error: false, id: 'testid' } },
-            },
-        };
-        const mock_root_store = mockStore(new_mock_store);
-        render(mockRadioGroupOptionsModal(mock_root_store, default_mocked_props));
-
-        expect(screen.getByText(/RadioGroupWithInfoMobile/i)).not.toHaveAttribute('data-test');
-    });
-});
diff --git a/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.tsx b/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.tsx
index cc8a706eed73..498f3a2549e8 100644
--- a/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.tsx
+++ b/packages/trader/src/Modules/Trading/Containers/__tests__/radio-group-options-modal.spec.tsx
@@ -4,7 +4,7 @@ import RadioGroupOptionsModal from '../radio-group-options-modal';
 import { mockStore } from '@deriv/stores';
 import TraderProviders from '../../../../trader-providers';
 
-jest.mock('../Multiplier/multiplier-options.jsx', () => jest.fn(() => 'mockedMultiplierOptions'));
+jest.mock('../Multiplier/multiplier-options', () => jest.fn(() => 'mockedMultiplierOptions'));
 jest.mock('Modules/Trading/Components/Form/RadioGroupWithInfoMobile', () =>
     jest.fn(() => 'MockedRadioGroupWithInfoMobile')
 );
diff --git a/packages/trader/src/Modules/Trading/Containers/radio-group-options-modal.tsx b/packages/trader/src/Modules/Trading/Containers/radio-group-options-modal.tsx
index 5fc7a59d04fe..98399f1669a0 100644
--- a/packages/trader/src/Modules/Trading/Containers/radio-group-options-modal.tsx
+++ b/packages/trader/src/Modules/Trading/Containers/radio-group-options-modal.tsx
@@ -3,7 +3,7 @@ import { Div100vhContainer, Modal, usePreventIOSZoom } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { useTraderStore } from 'Stores/useTraderStores';
 import { getGrowthRatePercentage, getTickSizeBarrierPercentage, isEmptyObject } from '@deriv/shared';
-import MultiplierOptions from 'Modules/Trading/Containers/Multiplier/multiplier-options.jsx';
+import MultiplierOptions from 'Modules/Trading/Containers/Multiplier/multiplier-options';
 import RadioGroupWithInfoMobile from 'Modules/Trading/Components/Form/RadioGroupWithInfoMobile';
 import { observer } from '@deriv/stores';
 
@@ -36,7 +36,6 @@ const RadioGroupOptionsModal = observer(({ is_open, modal_title, toggleModal }:
             >
                 <Div100vhContainer className='mobile-widget-dialog__wrapper' max_autoheight_offset='48px'>
                     {modal_title === localize('Multiplier') ? (
-                        // @ts-expect-error should be gone after MultiplierOptions is converted to typescript
                         <MultiplierOptions toggleModal={toggleModal} />
                     ) : (
                         <RadioGroupWithInfoMobile
diff --git a/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.tsx b/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.tsx
index a81b059135df..98e19d4b2286 100644
--- a/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.tsx
+++ b/packages/trader/src/Modules/Trading/Containers/trade-params-mobile.tsx
@@ -315,8 +315,6 @@ const TradeParamsMobile = observer(
                             setAmountError={setAmountError}
                             stake_value={stake_value}
                             payout_value={payout_value}
-                            basis={''}
-                            selected_basis={''}
                         />
                     </div>
                 ) : null}
diff --git a/packages/trader/src/Modules/Trading/Containers/trade-params.tsx b/packages/trader/src/Modules/Trading/Containers/trade-params.tsx
index a00d1e44f459..812ab12ab77a 100644
--- a/packages/trader/src/Modules/Trading/Containers/trade-params.tsx
+++ b/packages/trader/src/Modules/Trading/Containers/trade-params.tsx
@@ -5,7 +5,7 @@ import Barrier from 'Modules/Trading/Components/Form/TradeParams/barrier';
 import BarrierSelector from 'Modules/Trading/Components/Form/TradeParams/Turbos/barrier-selector';
 import Duration from 'Modules/Trading/Components/Form/TradeParams/Duration';
 import LastDigit from 'Modules/Trading/Components/Form/TradeParams/last-digit';
-import CancelDeal from 'Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal.jsx';
+import CancelDeal from 'Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal';
 import Accumulator from 'Modules/Trading/Components/Form/TradeParams/Accumulator/accumulator';
 import StopLoss from 'Modules/Trading/Components/Form/TradeParams/Multiplier/stop-loss.jsx';
 import TakeProfit from 'Modules/Trading/Components/Form/TradeParams/Multiplier/take-profit.jsx';
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/end-time.ts b/packages/trader/src/Stores/Modules/Trading/Helpers/end-time.ts
index c51b6b94325b..b25c05ed1c83 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/end-time.ts
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/end-time.ts
@@ -17,8 +17,8 @@ const getClosestTime = (time: moment.Moment | string, interval: number): moment.
 export const getSelectedTime = (
     server_time: TTime['server_time'],
     selected_time: TTime['selected_time'],
-    market_open_times: TTime['market_open_times'],
-    market_close_times: TTime['market_close_times']
+    market_open_times: moment.Moment[],
+    market_close_times: moment.Moment[]
 ) => {
     for (let i = 0; i < market_open_times.length; i++) {
         if (selected_time.isAfter(market_open_times[i]) && selected_time.isBefore(market_close_times[i])) {
@@ -38,8 +38,8 @@ export const getSelectedTime = (
 
 export const getBoundaries = (
     server_time: TTime['server_time'],
-    market_open_times: TTime['market_open_times'],
-    market_close_times: TTime['market_close_times']
+    market_open_times: moment.Moment[],
+    market_close_times: moment.Moment[]
 ) => {
     const boundaries = {
         start: market_open_times.map(open_time =>
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/multiplier.ts b/packages/trader/src/Stores/Modules/Trading/Helpers/multiplier.ts
index 1e7fb6ad79d6..fdaa03c6c75b 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/multiplier.ts
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/multiplier.ts
@@ -3,7 +3,7 @@ import { TTradeStore } from 'Types';
 type TData = Partial<
     Pick<
         TTradeStore,
-        'cancellation_duration' | 'cancellation_price' | 'has_cancellation' | 'has_stop_loss' | 'has_take_profit'
+        'cancellation_duration' | 'has_cancellation' | 'has_stop_loss' | 'has_take_profit' | 'stop_loss' | 'take_profit'
     >
 >;
 
diff --git a/packages/trader/src/Stores/Modules/Trading/Helpers/preview-proposal.ts b/packages/trader/src/Stores/Modules/Trading/Helpers/preview-proposal.ts
index 38618549d597..526bb8ae11d5 100644
--- a/packages/trader/src/Stores/Modules/Trading/Helpers/preview-proposal.ts
+++ b/packages/trader/src/Stores/Modules/Trading/Helpers/preview-proposal.ts
@@ -1,16 +1,24 @@
 import debounce from 'lodash.debounce';
 import { isEmptyObject, WS } from '@deriv/shared';
 import { createProposalRequests } from './proposal';
-import { PriceProposalResponse } from '@deriv/api-types';
+import { PriceProposalRequest, PriceProposalResponse } from '@deriv/api-types';
 import { TTradeStore } from 'Types';
 
+type TResponse<Req, Res extends { [key: string]: unknown }, K extends string> = Res & {
+    echo_req: Req;
+    error?: {
+        code: string;
+        message: string;
+        details?: Res[K] & { field: string };
+    };
+};
 export const requestPreviewProposal = debounce(
-    (store: TTradeStore, override = {}, onProposalResponse: (response: PriceProposalResponse) => void) => {
+    (store: TTradeStore, override = {}, onProposalResponse: TTradeStore['onProposalResponse']) => {
         const new_store = { ...store, ...override };
         const requests = createProposalRequests(new_store);
         const subscription_map: { [key: string]: boolean } = {};
 
-        const onResponse = (response: PriceProposalResponse) => {
+        const onResponse = (response: TResponse<PriceProposalRequest, PriceProposalResponse, 'proposal'>) => {
             if (response.error || !response.subscription) return;
 
             subscription_map[response.subscription.id] = true;