From 718b50b577287b955f8947d8d386539c5d2d9413 Mon Sep 17 00:00:00 2001
From: Jim Daniels Wasswa <jim@deriv.com>
Date: Tue, 31 Jan 2023 15:06:48 +0800
Subject: [PATCH 1/3] refactor: migrate contract-card to ts

---
 packages/components/package.json              |  1 +
 ...t-card-body.jsx => contract-card-body.tsx} | 85 ++++++++++---------
 .../contract-card-dialog.jsx                  | 54 ------------
 .../contract-card-dialog.tsx                  | 59 +++++++++++++
 ...rd-footer.jsx => contract-card-footer.tsx} | 35 ++++----
 ...rd-header.jsx => contract-card-header.tsx} | 35 ++++----
 ...t-card-item.jsx => contract-card-item.tsx} | 27 +++---
 .../contract-card-sell.jsx                    | 45 ----------
 .../contract-card-sell.tsx                    | 44 ++++++++++
 ...t-type-cell.jsx => contract-type-cell.tsx} | 18 ++--
 ...date-form.jsx => contract-update-form.tsx} | 59 +++++++------
 ...tions.jsx => multiplier-close-actions.tsx} | 29 ++++---
 ...card-dialog.jsx => toggle-card-dialog.tsx} | 59 ++++++-------
 ...rd-loader.jsx => contract-card-loader.tsx} |  7 +-
 .../contract-card-loader/index.js             |  3 -
 .../contract-card-loader/index.ts             |  3 +
 .../{contract-card.jsx => contract-card.tsx}  | 46 +++++-----
 .../contract-card/{index.js => index.ts}      |  2 +-
 .../result-overlay/{index.js => index.ts}     |  2 +-
 ...{result-overlay.jsx => result-overlay.tsx} | 38 +++++----
 .../progress-slider-mobile.tsx                | 10 +--
 .../progress-ticks-mobile.tsx                 |  2 +-
 .../progress-slider/progress-slider.tsx       | 13 +--
 .../progress-slider/progress-ticks.tsx        |  7 +-
 .../tick-progress/tick-progress.tsx           |  4 +-
 .../src/components/types/common.types.ts      |  4 +-
 .../src/components/types/contract.types.ts    | 14 +++
 .../components/src/components/types/index.ts  |  7 +-
 .../src/hooks/use-onclickoutside.ts           |  7 +-
 packages/shared/package.json                  |  1 +
 .../src/utils/contract/contract-types.ts      | 63 ++------------
 .../shared/src/utils/contract/contract.ts     | 58 +++++--------
 packages/shared/src/utils/helpers/logic.ts    | 10 +--
 .../src/utils/helpers/validation-rules.ts     | 10 +--
 packages/stores/types.ts                      | 21 ++++-
 35 files changed, 432 insertions(+), 450 deletions(-)
 rename packages/components/src/components/contract-card/contract-card-items/{contract-card-body.jsx => contract-card-body.tsx} (84%)
 delete mode 100644 packages/components/src/components/contract-card/contract-card-items/contract-card-dialog.jsx
 create mode 100644 packages/components/src/components/contract-card/contract-card-items/contract-card-dialog.tsx
 rename packages/components/src/components/contract-card/contract-card-items/{contract-card-footer.jsx => contract-card-footer.tsx} (81%)
 rename packages/components/src/components/contract-card/contract-card-items/{contract-card-header.jsx => contract-card-header.tsx} (87%)
 rename packages/components/src/components/contract-card/contract-card-items/{contract-card-item.jsx => contract-card-item.tsx} (61%)
 delete mode 100644 packages/components/src/components/contract-card/contract-card-items/contract-card-sell.jsx
 create mode 100644 packages/components/src/components/contract-card/contract-card-items/contract-card-sell.tsx
 rename packages/components/src/components/contract-card/contract-card-items/{contract-type-cell.jsx => contract-type-cell.tsx} (73%)
 rename packages/components/src/components/contract-card/contract-card-items/{contract-update-form.jsx => contract-update-form.tsx} (82%)
 rename packages/components/src/components/contract-card/contract-card-items/{multiplier-close-actions.jsx => multiplier-close-actions.tsx} (76%)
 rename packages/components/src/components/contract-card/contract-card-items/{toggle-card-dialog.jsx => toggle-card-dialog.tsx} (84%)
 rename packages/components/src/components/contract-card/contract-card-loader/{contract-card-loader.jsx => contract-card-loader.tsx} (89%)
 delete mode 100644 packages/components/src/components/contract-card/contract-card-loader/index.js
 create mode 100644 packages/components/src/components/contract-card/contract-card-loader/index.ts
 rename packages/components/src/components/contract-card/{contract-card.jsx => contract-card.tsx} (75%)
 rename packages/components/src/components/contract-card/{index.js => index.ts} (55%)
 rename packages/components/src/components/contract-card/result-overlay/{index.js => index.ts} (55%)
 rename packages/components/src/components/contract-card/result-overlay/{result-overlay.jsx => result-overlay.tsx} (82%)
 create mode 100644 packages/components/src/components/types/contract.types.ts

diff --git a/packages/components/package.json b/packages/components/package.json
index 459a9895a14b..ed739aab2e4e 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -74,6 +74,7 @@
     "gh-pages": "^2.1.1",
     "glob": "^7.1.5",
     "lodash.throttle": "^4.1.1",
+    "moment": "^2.29.2",
     "prop-types": "^15.7.2",
     "react-content-loader": "^6.2.0",
     "react-div-100vh": "^0.3.8",
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx
similarity index 84%
rename from packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx
rename to packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx
index c94eee65b526..4f8cbbd7538f 100644
--- a/packages/components/src/components/contract-card/contract-card-items/contract-card-body.jsx
+++ b/packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx
@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import {
     isCryptocurrency,
@@ -13,15 +12,45 @@ import {
     isValidToSell,
     shouldShowCancellation,
 } from '@deriv/shared';
-import ContractCardItem from './contract-card-item.jsx';
-import ToggleCardDialog from './toggle-card-dialog.jsx';
+import ContractCardItem from './contract-card-item';
+import ToggleCardDialog from './toggle-card-dialog';
 import CurrencyBadge from '../../currency-badge';
 import DesktopWrapper from '../../desktop-wrapper';
 import Icon from '../../icon';
 import MobileWrapper from '../../mobile-wrapper';
 import Money from '../../money';
-import { ResultStatusIcon } from '../result-overlay/result-overlay.jsx';
+import { ResultStatusIcon } from '../result-overlay/result-overlay';
 import ProgressSliderMobile from '../../progress-slider-mobile';
+import { TContractInfo, TContractStore } from '@deriv/shared/src/utils/contract/contract-types';
+import { TGetCardLables, TToastConfig } from '../../types';
+import { ContractUpdate } from '@deriv/api-types';
+
+export type TGeneralContractCardBodyProps = {
+    addToast: (toast_config: TToastConfig) => void;
+    contract_info: TContractInfo;
+    contract_update: ContractUpdate;
+    connectWithContractUpdate: (contract_update_form: React.ElementType) => React.ElementType;
+    currency: string;
+    current_focus?: string;
+    error_message_alignment: string;
+    getCardLabels: TGetCardLables;
+    getContractById: (contract_id?: number) => TContractStore;
+    should_show_cancellation_warning: boolean;
+    has_progress_slider: boolean;
+    is_mobile: boolean;
+    is_sold: boolean;
+    onMouseLeave: () => void;
+    removeToast: (toast_id: string) => void;
+    setCurrentFocus: (name: string) => void;
+    status: string;
+    toggleCancellationWarning: () => void;
+    progress_slider: React.ReactNode;
+};
+
+export type TContractCardBodyProps = {
+    is_multiplier: boolean;
+    server_time: moment.Moment;
+} & TGeneralContractCardBodyProps;
 
 const MultiplierCardBody = ({
     addToast,
@@ -43,7 +72,7 @@ const MultiplierCardBody = ({
     should_show_cancellation_warning,
     status,
     toggleCancellationWarning,
-}) => {
+}: TGeneralContractCardBodyProps) => {
     const { buy_price, bid_price, profit, limit_order, underlying } = contract_info;
 
     const total_profit = getTotalProfit(contract_info);
@@ -62,13 +91,13 @@ const MultiplierCardBody = ({
                 })}
             >
                 <ContractCardItem header={getCardLabels().STAKE} className='dc-contract-card__stake'>
-                    <Money amount={buy_price - cancellation_price} currency={currency} />
+                    <Money amount={Number(buy_price) - cancellation_price} currency={currency} />
                 </ContractCardItem>
                 <ContractCardItem header={getCardLabels().CURRENT_STAKE} className='dc-contract-card__current-stake'>
                     <div
                         className={classNames({
-                            'dc-contract-card--profit': +profit > 0,
-                            'dc-contract-card--loss': +profit < 0,
+                            'dc-contract-card--profit': Number(profit) > 0,
+                            'dc-contract-card--loss': Number(profit) < 0,
                         })}
                     >
                         <Money amount={bid_price} currency={currency} />
@@ -168,7 +197,7 @@ const ContractCardBody = ({
     should_show_cancellation_warning,
     status,
     toggleCancellationWarning,
-}) => {
+}: TContractCardBodyProps) => {
     const indicative = getIndicativePrice(contract_info);
     const { buy_price, sell_price, payout, profit, tick_count, date_expiry, purchase_time } = contract_info;
     const current_tick = tick_count ? getCurrentTick(contract_info) : null;
@@ -213,8 +242,8 @@ const ContractCardBody = ({
                 <ContractCardItem
                     header={is_sold ? getCardLabels().PROFIT_LOSS : getCardLabels().POTENTIAL_PROFIT_LOSS}
                     is_crypto={isCryptocurrency(currency)}
-                    is_loss={+profit < 0}
-                    is_won={+profit > 0}
+                    is_loss={Number(profit) < 0}
+                    is_won={Number(profit) > 0}
                 >
                     <Money amount={profit} currency={currency} />
                     <div
@@ -227,7 +256,7 @@ const ContractCardBody = ({
                     </div>
                 </ContractCardItem>
                 <ContractCardItem header={is_sold ? getCardLabels().PAYOUT : getCardLabels().INDICATIVE_PRICE}>
-                    <Money currency={currency} amount={sell_price || indicative} />
+                    <Money currency={currency} amount={Number(sell_price || indicative)} />
                     <div
                         className={classNames('dc-contract-card__indicative--movement', {
                             'dc-contract-card__indicative--movement-complete': is_sold,
@@ -265,12 +294,9 @@ const ContractCardBody = ({
             <DesktopWrapper>{card_body}</DesktopWrapper>
             <MobileWrapper>
                 <div
-                    className={
-                        ('dc-contract-card__separatorclass',
-                        classNames({
-                            'dc-contract-card__body-wrapper': !is_multiplier,
-                        }))
-                    }
+                    className={classNames('dc-contract-card__separatorclass', {
+                        'dc-contract-card__body-wrapper': !is_multiplier,
+                    })}
                 >
                     {card_body}
                 </div>
@@ -279,27 +305,4 @@ const ContractCardBody = ({
     );
 };
 
-ContractCardBody.propTypes = {
-    addToast: PropTypes.func,
-    connectWithContractUpdate: PropTypes.func,
-    contract_info: PropTypes.object,
-    contract_update: PropTypes.object,
-    currency: PropTypes.string,
-    current_focus: PropTypes.string,
-    error_message_alignment: PropTypes.string,
-    getCardLabels: PropTypes.func,
-    getContractById: PropTypes.func,
-    is_mobile: PropTypes.bool,
-    is_multiplier: PropTypes.bool,
-    is_sold: PropTypes.bool,
-    onMouseLeave: PropTypes.func,
-    removeToast: PropTypes.func,
-    server_time: PropTypes.object,
-    setCurrentFocus: PropTypes.func,
-    should_show_cancellation_warning: PropTypes.bool,
-    status: PropTypes.string,
-    toggleCancellationWarning: PropTypes.func,
-    has_progress_slider: PropTypes.bool,
-};
-
 export default ContractCardBody;
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-dialog.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-dialog.jsx
deleted file mode 100644
index 817aee4bb145..000000000000
--- a/packages/components/src/components/contract-card/contract-card-items/contract-card-dialog.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CSSTransition } from 'react-transition-group';
-import './sass/contract-card-dialog.scss';
-import { useOnClickOutside } from '../../../hooks/use-onclickoutside';
-
-const ContractCardDialog = React.forwardRef(({ children, is_visible, left, toggleDialog, toggle_ref, top }, ref) => {
-    const validateClickOutside = event => is_visible && !toggle_ref.current.contains(event.target);
-
-    useOnClickOutside(ref, toggleDialog, validateClickOutside);
-
-    const dialog = (
-        <CSSTransition
-            in={is_visible}
-            classNames={{
-                enter: 'dc-contract-card-dialog--enter',
-                enterDone: 'dc-contract-card-dialog--enter-done',
-                exit: 'dc-contract-card-dialog--exit',
-            }}
-            timeout={150}
-            unmountOnExit
-        >
-            <div
-                ref={ref}
-                className='dc-contract-card-dialog'
-                style={{
-                    top,
-                    left: `calc(${left}px + 32px)`,
-                }}
-            >
-                {children}
-            </div>
-        </CSSTransition>
-    );
-
-    return ReactDOM.createPortal(
-        dialog, // use portal to render dialog above ThemedScrollbars container
-        document.getElementById('deriv_app')
-    );
-});
-
-ContractCardDialog.displayName = 'ContractCardDialog';
-
-ContractCardDialog.propTypes = {
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-    is_visible: PropTypes.bool,
-    left: PropTypes.number,
-    toggleDialog: PropTypes.func,
-    toggle_ref: PropTypes.object,
-    top: PropTypes.number,
-};
-
-export default ContractCardDialog;
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-dialog.tsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-dialog.tsx
new file mode 100644
index 000000000000..f2961c61bdd9
--- /dev/null
+++ b/packages/components/src/components/contract-card/contract-card-items/contract-card-dialog.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+import './sass/contract-card-dialog.scss';
+import { IClickEvent, useOnClickOutside } from '../../../hooks/use-onclickoutside';
+
+export type TContractCardDialogProps = {
+    children: React.ReactNode;
+    is_visible: boolean;
+    left: number;
+    toggleDialog: (e: any) => void; // This function accomodates events for various HTML elements, which have no overlap, so typing it to any
+    toggle_ref?: React.RefObject<HTMLDivElement>;
+    top: number;
+};
+
+const ContractCardDialog = React.forwardRef(
+    (
+        { children, is_visible, left, toggleDialog, toggle_ref, top }: TContractCardDialogProps,
+        ref: React.ForwardedRef<HTMLDivElement>
+    ) => {
+        const validateClickOutside = (event: IClickEvent) =>
+            is_visible && !toggle_ref?.current?.contains(event.target as Node);
+
+        useOnClickOutside(ref, toggleDialog, validateClickOutside);
+
+        const dialog = (
+            <CSSTransition
+                in={is_visible}
+                classNames={{
+                    enter: 'dc-contract-card-dialog--enter',
+                    enterDone: 'dc-contract-card-dialog--enter-done',
+                    exit: 'dc-contract-card-dialog--exit',
+                }}
+                timeout={150}
+                unmountOnExit
+            >
+                <div
+                    ref={ref}
+                    className='dc-contract-card-dialog'
+                    style={{
+                        top,
+                        left: `calc(${left}px + 32px)`,
+                    }}
+                >
+                    {children}
+                </div>
+            </CSSTransition>
+        );
+        const deriv_app_element = document.getElementById('deriv_app');
+        return ReactDOM.createPortal(
+            dialog, // use portal to render dialog above ThemedScrollbars container
+            deriv_app_element || document.body
+        );
+    }
+);
+
+ContractCardDialog.displayName = 'ContractCardDialog';
+
+export default ContractCardDialog;
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-footer.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-footer.tsx
similarity index 81%
rename from packages/components/src/components/contract-card/contract-card-items/contract-card-footer.jsx
rename to packages/components/src/components/contract-card/contract-card-items/contract-card-footer.tsx
index b9a9084a7765..0e036df03929 100644
--- a/packages/components/src/components/contract-card/contract-card-items/contract-card-footer.jsx
+++ b/packages/components/src/components/contract-card/contract-card-items/contract-card-footer.tsx
@@ -1,10 +1,24 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { isValidToCancel, hasContractEntered, isOpen, useNewRowTransition } from '@deriv/shared';
-import ContractCardSell from './contract-card-sell.jsx';
-import MultiplierCloseActions from './multiplier-close-actions.jsx';
+import ContractCardSell from './contract-card-sell';
+import MultiplierCloseActions from './multiplier-close-actions';
+import { TContractInfo } from '@deriv/shared/src/utils/contract/contract-types';
+import { TGetCardLables } from '../../types';
+
+export type TCardFooterPropTypes = {
+    contract_info: TContractInfo;
+    getCardLabels: TGetCardLables;
+    is_multiplier?: boolean;
+    is_positions: boolean;
+    is_sell_requested: boolean;
+    onClickCancel: (contract_id?: number) => void;
+    onClickSell: (contract_id?: number) => void;
+    onFooterEntered: () => void;
+    server_time: moment.Moment;
+    should_show_transition: boolean;
+};
 
 const CardFooter = ({
     contract_info,
@@ -17,7 +31,7 @@ const CardFooter = ({
     onFooterEntered,
     server_time,
     should_show_transition,
-}) => {
+}: TCardFooterPropTypes) => {
     const { in_prop } = useNewRowTransition(should_show_transition);
 
     const is_valid_to_cancel = isValidToCancel(contract_info);
@@ -79,17 +93,4 @@ const CardFooter = ({
     );
 };
 
-CardFooter.propTypes = {
-    contract_info: PropTypes.object,
-    getCardLabels: PropTypes.func,
-    is_multiplier: PropTypes.bool,
-    is_positions: PropTypes.bool,
-    is_sell_requested: PropTypes.bool,
-    onClickCancel: PropTypes.func,
-    onClickSell: PropTypes.func,
-    onFooterEntered: PropTypes.func,
-    server_time: PropTypes.object,
-    should_show_transition: PropTypes.bool,
-};
-
 export default CardFooter;
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-header.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-header.tsx
similarity index 87%
rename from packages/components/src/components/contract-card/contract-card-items/contract-card-header.jsx
rename to packages/components/src/components/contract-card/contract-card-items/contract-card-header.tsx
index 89e4f80e6d65..f255655b774f 100644
--- a/packages/components/src/components/contract-card/contract-card-items/contract-card-header.jsx
+++ b/packages/components/src/components/contract-card/contract-card-items/contract-card-header.tsx
@@ -1,15 +1,30 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { isHighLow, getCurrentTick, isBot } from '@deriv/shared';
-import ContractTypeCell from './contract-type-cell.jsx';
+import ContractTypeCell from './contract-type-cell';
 import Button from '../../button';
 import Icon from '../../icon';
 import Text from '../../text';
 import ProgressSlider from '../../progress-slider';
 import DesktopWrapper from '../../desktop-wrapper';
 import MobileWrapper from '../../mobile-wrapper';
+import { TContractInfo } from '@deriv/shared/src/utils/contract/contract-types';
+import { TGetCardLables, TGetContractTypeDisplay } from '../../types';
+
+export type TContractCardHeaderProps = {
+    contract_info: TContractInfo;
+    display_name: string;
+    getCardLabels: TGetCardLables;
+    getContractTypeDisplay: TGetContractTypeDisplay;
+    has_progress_slider: boolean;
+    is_mobile: boolean;
+    is_sell_requested: boolean;
+    is_valid_to_sell: boolean;
+    onClickSell: (contract_id?: number) => void;
+    server_time: moment.Moment;
+    id: number;
+};
 
 const ContractCardHeader = ({
     contract_info,
@@ -23,7 +38,7 @@ const ContractCardHeader = ({
     is_valid_to_sell,
     onClickSell,
     server_time,
-}) => {
+}: TContractCardHeaderProps) => {
     const current_tick = contract_info.tick_count ? getCurrentTick(contract_info) : null;
     const { underlying, multiplier, contract_type, shortcode, purchase_time, date_expiry, tick_count, is_sold } =
         contract_info;
@@ -99,18 +114,4 @@ const ContractCardHeader = ({
     );
 };
 
-ContractCardHeader.propTypes = {
-    contract_info: PropTypes.object,
-    display_name: PropTypes.string,
-    getCardLabels: PropTypes.func,
-    getContractTypeDisplay: PropTypes.func,
-    has_progress_slider: PropTypes.bool,
-    is_mobile: PropTypes.bool,
-    is_sell_requested: PropTypes.bool,
-    is_valid_to_sell: PropTypes.bool,
-    onClickSell: PropTypes.func,
-    server_time: PropTypes.object,
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
 export default ContractCardHeader;
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-item.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-item.tsx
similarity index 61%
rename from packages/components/src/components/contract-card/contract-card-items/contract-card-item.jsx
rename to packages/components/src/components/contract-card/contract-card-items/contract-card-item.tsx
index d993abbf328d..9f804d9cac71 100644
--- a/packages/components/src/components/contract-card/contract-card-items/contract-card-item.jsx
+++ b/packages/components/src/components/contract-card/contract-card-items/contract-card-item.tsx
@@ -1,8 +1,22 @@
 import classNames from 'classnames';
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const ContractCardItem = ({ className, children, header, is_crypto, is_loss, is_won }) => {
+export type TContractCardItemProps = {
+    className: string;
+    header: string;
+    is_crypto: boolean;
+    is_loss: boolean;
+    is_won: boolean;
+};
+
+const ContractCardItem = ({
+    className,
+    children,
+    header,
+    is_crypto,
+    is_loss,
+    is_won,
+}: React.PropsWithChildren<Partial<TContractCardItemProps>>) => {
     return (
         <div className={classNames('dc-contract-card-item', className)}>
             <div className='dc-contract-card-item__header'>{header}</div>
@@ -19,13 +33,4 @@ const ContractCardItem = ({ className, children, header, is_crypto, is_loss, is_
     );
 };
 
-ContractCardItem.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-    header: PropTypes.string,
-    is_crypto: PropTypes.bool,
-    is_loss: PropTypes.bool,
-    is_won: PropTypes.bool,
-};
-
 export default ContractCardItem;
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-sell.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-sell.jsx
deleted file mode 100644
index e18c107d2fd4..000000000000
--- a/packages/components/src/components/contract-card/contract-card-items/contract-card-sell.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { isOpen, isValidToSell, hasContractEntered } from '@deriv/shared';
-import Button from '../../button';
-
-const ContractCardSell = ({ contract_info, getCardLabels, is_sell_requested, onClickSell }) => {
-    const is_valid_to_sell = isValidToSell(contract_info);
-    const should_show_sell = hasContractEntered(contract_info) && isOpen(contract_info);
-
-    const onClick = ev => {
-        onClickSell(contract_info.contract_id);
-        ev.stopPropagation();
-        ev.preventDefault();
-    };
-
-    return (
-        should_show_sell && (
-            <React.Fragment>
-                {is_valid_to_sell ? (
-                    <Button
-                        className={classNames('dc-btn--sell', {
-                            'dc-btn--loading': is_sell_requested,
-                        })}
-                        is_disabled={is_sell_requested}
-                        text={getCardLabels().SELL}
-                        onClick={onClick}
-                        secondary
-                    />
-                ) : (
-                    <div className='dc-contract-card__no-resale-msg'>{getCardLabels().RESALE_NOT_OFFERED}</div>
-                )}
-            </React.Fragment>
-        )
-    );
-};
-
-ContractCardSell.propTypes = {
-    contract_info: PropTypes.object,
-    getCardLabels: PropTypes.func,
-    is_sell_requested: PropTypes.any,
-    onClickSell: PropTypes.func,
-};
-
-export default ContractCardSell;
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-sell.tsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-sell.tsx
new file mode 100644
index 000000000000..1ac287669b84
--- /dev/null
+++ b/packages/components/src/components/contract-card/contract-card-items/contract-card-sell.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import classNames from 'classnames';
+import { isOpen, isValidToSell, hasContractEntered } from '@deriv/shared';
+import Button from '../../button';
+import { TContractInfo } from '@deriv/shared/src/utils/contract/contract-types';
+import { TGetCardLables } from '../../types';
+
+export type TContractCardSellProps = {
+    contract_info: TContractInfo;
+    getCardLabels: TGetCardLables;
+    is_sell_requested: boolean;
+    onClickSell: (contract_id?: number) => void;
+};
+
+const ContractCardSell = ({ contract_info, getCardLabels, is_sell_requested, onClickSell }: TContractCardSellProps) => {
+    const is_valid_to_sell = isValidToSell(contract_info);
+    const should_show_sell = hasContractEntered(contract_info) && isOpen(contract_info);
+
+    const onClick = (ev: React.MouseEvent<HTMLButtonElement>) => {
+        onClickSell(contract_info.contract_id);
+        ev.stopPropagation();
+        ev.preventDefault();
+    };
+
+    return should_show_sell ? (
+        <React.Fragment>
+            {is_valid_to_sell ? (
+                <Button
+                    className={classNames('dc-btn--sell', {
+                        'dc-btn--loading': is_sell_requested,
+                    })}
+                    is_disabled={is_sell_requested}
+                    text={getCardLabels().SELL}
+                    onClick={onClick}
+                    secondary
+                />
+            ) : (
+                <div className='dc-contract-card__no-resale-msg'>{getCardLabels().RESALE_NOT_OFFERED}</div>
+            )}
+        </React.Fragment>
+    ) : null;
+};
+
+export default ContractCardSell;
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-type-cell.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-type-cell.tsx
similarity index 73%
rename from packages/components/src/components/contract-card/contract-card-items/contract-type-cell.jsx
rename to packages/components/src/components/contract-card/contract-card-items/contract-type-cell.tsx
index fc000ccf22fe..31cc58d0f660 100644
--- a/packages/components/src/components/contract-card/contract-card-items/contract-type-cell.jsx
+++ b/packages/components/src/components/contract-card/contract-card-items/contract-type-cell.tsx
@@ -1,8 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { TGetContractTypeDisplay } from '../../types';
 import IconTradeTypes from '../../icon-trade-types';
 
-const ContractTypeCell = ({ getContractTypeDisplay, is_high_low, multiplier, type }) => (
+export type TContractTypeCellProps = {
+    getContractTypeDisplay: TGetContractTypeDisplay;
+    is_high_low: boolean;
+    multiplier?: number;
+    type?: string;
+};
+
+const ContractTypeCell = ({ getContractTypeDisplay, is_high_low, multiplier, type = '' }: TContractTypeCellProps) => (
     <div className='dc-contract-type'>
         <div className='dc-contract-type__type-wrapper'>
             <IconTradeTypes
@@ -18,11 +25,4 @@ const ContractTypeCell = ({ getContractTypeDisplay, is_high_low, multiplier, typ
     </div>
 );
 
-ContractTypeCell.propTypes = {
-    getContractTypeDisplay: PropTypes.func,
-    is_high_low: PropTypes.bool,
-    multiplier: PropTypes.number,
-    type: PropTypes.string,
-};
-
 export default ContractTypeCell;
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx
similarity index 82%
rename from packages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx
rename to packages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx
index 6bd9097f114a..637dcfc4affe 100644
--- a/packages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx
+++ b/packages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx
@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
     getCancellationPrice,
     getContractUpdateConfig,
@@ -15,8 +14,24 @@ import Icon from '../../icon';
 import MobileWrapper from '../../mobile-wrapper';
 import Money from '../../money';
 import InputWithCheckbox from '../../input-wth-checkbox';
+import { TGetCardLables, TToastConfig } from '../../types';
+import { TContractStore } from '@deriv/shared/src/utils/contract/contract-types';
+
+export type TContractUpdateFormProps = {
+    addToast: (toast_config: TToastConfig) => void;
+    contract: TContractStore;
+    current_focus?: string;
+    error_message_alignment: string;
+    getCardLabels: TGetCardLables;
+    onMouseLeave: () => void;
+    removeToast: (toast_id: string) => void;
+    setCurrentFocus: (name: string) => void;
+    status: string;
+    toggleDialog: (e: any) => void; // This function accomodates events for various HTML elements, which have no overlap, so typing it to any
+    getContractById: (contract_id: number) => TContractStore;
+};
 
-const ContractUpdateForm = props => {
+const ContractUpdateForm = (props: TContractUpdateFormProps) => {
     const {
         addToast,
         contract,
@@ -49,23 +64,25 @@ const ContractUpdateForm = props => {
         contract_update_stop_loss,
     });
 
-    const { buy_price, currency, is_valid_to_cancel, is_sold } = contract_info;
+    const { buy_price, currency = '', is_valid_to_cancel, is_sold } = contract_info;
     const { stop_loss, take_profit } = getLimitOrderAmount(contract_info.limit_order);
     const { contract_update_stop_loss: stop_loss_error, contract_update_take_profit: take_profit_error } =
         validation_errors;
-    const error_messages = {
+    const error_messages: Record<string, string[] | undefined> = {
         take_profit: has_contract_update_take_profit ? take_profit_error : undefined,
         stop_loss: has_contract_update_stop_loss ? stop_loss_error : undefined,
     };
     const has_validation_errors = Object.keys(error_messages).some(field => error_messages[field]?.length);
 
-    const isValid = val => !(val === undefined || val === null);
+    const isValid = (val?: number | null) => !(val === undefined || val === null);
 
     const is_take_profit_valid = has_contract_update_take_profit ? contract_update_take_profit > 0 : isValid(stop_loss);
     const is_stop_loss_valid = has_contract_update_stop_loss ? contract_update_stop_loss > 0 : isValid(take_profit);
     const is_valid_contract_update = is_valid_to_cancel ? false : !!(is_take_profit_valid || is_stop_loss_valid);
 
-    const getStateToCompare = _state => {
+    const getStateToCompare = (
+        _state: Partial<ReturnType<typeof getContractUpdateConfig> & TContractUpdateFormProps>
+    ) => {
         const props_to_pick = [
             'has_contract_update_take_profit',
             'has_contract_update_stop_loss',
@@ -80,21 +97,20 @@ const ContractUpdateForm = props => {
         return isDeepEqual(getStateToCompare(getContractUpdateConfig(contract_info)), getStateToCompare(props));
     };
 
-    const onChange = e => {
+    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
         setContractProfitOrLoss({
             ...contract_profit_or_loss,
             [name]: value,
         });
-        if (typeof contract.onChange === 'function') {
-            contract.onChange({
-                name,
-                value,
-            });
-        }
+
+        contract.onChange?.({
+            name,
+            value,
+        });
     };
 
-    const onClick = e => {
+    const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
         updateLimitOrder();
         toggleDialog(e);
         onMouseLeave?.();
@@ -134,7 +150,7 @@ const ContractUpdateForm = props => {
             is_single_currency={true}
             is_negative_disabled={true}
             label={getCardLabels().STOP_LOSS}
-            max_value={buy_price - cancellation_price}
+            max_value={Number(buy_price) - cancellation_price}
             name='contract_update_stop_loss'
             onChange={onChange}
             error_message_alignment={error_message_alignment || 'right'}
@@ -189,17 +205,4 @@ const ContractUpdateForm = props => {
     );
 };
 
-ContractUpdateForm.propTypes = {
-    addToast: PropTypes.func,
-    contract: PropTypes.object,
-    current_focus: PropTypes.string,
-    error_message_alignment: PropTypes.string,
-    getCardLabels: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    removeToast: PropTypes.func,
-    setCurrentFocus: PropTypes.func,
-    status: PropTypes.string,
-    toggleDialog: PropTypes.func,
-};
-
 export default ContractUpdateForm;
diff --git a/packages/components/src/components/contract-card/contract-card-items/multiplier-close-actions.jsx b/packages/components/src/components/contract-card/contract-card-items/multiplier-close-actions.tsx
similarity index 76%
rename from packages/components/src/components/contract-card/contract-card-items/multiplier-close-actions.jsx
rename to packages/components/src/components/contract-card/contract-card-items/multiplier-close-actions.tsx
index 1dc3a861eccc..5a66176599c8 100644
--- a/packages/components/src/components/contract-card/contract-card-items/multiplier-close-actions.jsx
+++ b/packages/components/src/components/contract-card/contract-card-items/multiplier-close-actions.tsx
@@ -1,9 +1,20 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { isValidToCancel } from '@deriv/shared';
 import Button from '../../button';
 import RemainingTime from '../../remaining-time';
+import { TContractInfo } from '@deriv/shared/src/utils/contract/contract-types';
+import { TGetCardLables } from '../../types';
+
+export type TMultiplierCloseActionsProps = {
+    className?: string;
+    contract_info: TContractInfo;
+    getCardLabels: TGetCardLables;
+    is_sell_requested: boolean;
+    onClickCancel: (contract_id?: number) => void;
+    onClickSell: (contract_id?: number) => void;
+    server_time: moment.Moment;
+};
 
 const MultiplierCloseActions = ({
     className,
@@ -13,7 +24,7 @@ const MultiplierCloseActions = ({
     onClickCancel,
     onClickSell,
     server_time,
-}) => {
+}: TMultiplierCloseActionsProps) => {
     const { contract_id, cancellation: { date_expiry: cancellation_date_expiry } = {}, profit } = contract_info;
 
     const is_valid_to_cancel = isValidToCancel(contract_info);
@@ -25,7 +36,7 @@ const MultiplierCloseActions = ({
                 className={classNames(className, {
                     'dc-btn--loading': is_sell_requested,
                 })}
-                is_disabled={is_sell_requested || (+profit < 0 && is_valid_to_cancel)}
+                is_disabled={is_sell_requested || (Number(profit) < 0 && is_valid_to_cancel)}
                 text={getCardLabels().CLOSE}
                 onClick={ev => {
                     onClickSell(contract_id);
@@ -38,7 +49,7 @@ const MultiplierCloseActions = ({
                 <Button
                     id={`dc_contract_card_${contract_id}_cancel_button`}
                     className='dc-btn--cancel'
-                    is_disabled={+profit >= 0}
+                    is_disabled={Number(profit) >= 0}
                     onClick={ev => {
                         onClickCancel(contract_id);
                         ev.stopPropagation();
@@ -61,14 +72,4 @@ const MultiplierCloseActions = ({
     );
 };
 
-MultiplierCloseActions.propTypes = {
-    className: PropTypes.string,
-    contract_info: PropTypes.object,
-    getCardLabels: PropTypes.func,
-    is_sell_requested: PropTypes.bool,
-    onClickCancel: PropTypes.func,
-    onClickSell: PropTypes.func,
-    server_time: PropTypes.object,
-};
-
 export default MultiplierCloseActions;
diff --git a/packages/components/src/components/contract-card/contract-card-items/toggle-card-dialog.jsx b/packages/components/src/components/contract-card/contract-card-items/toggle-card-dialog.tsx
similarity index 84%
rename from packages/components/src/components/contract-card/contract-card-items/toggle-card-dialog.jsx
rename to packages/components/src/components/contract-card/contract-card-items/toggle-card-dialog.tsx
index 7837722b189e..975447304235 100644
--- a/packages/components/src/components/contract-card/contract-card-items/toggle-card-dialog.jsx
+++ b/packages/components/src/components/contract-card/contract-card-items/toggle-card-dialog.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { isDesktop, isMobile } from '@deriv/shared';
-import ContractCardDialog from './contract-card-dialog.jsx';
-import ContractUpdateForm from './contract-update-form.jsx';
+import ContractCardDialog from './contract-card-dialog';
+import ContractUpdateForm from './contract-update-form';
 import PopoverMessageCheckbox from '../../popover-message-checkbox';
 import Icon from '../../icon';
 import DesktopWrapper from '../../desktop-wrapper';
@@ -11,8 +10,27 @@ import MobileWrapper from '../../mobile-wrapper';
 import Popover from '../../popover';
 import Div100vhContainer from '../../div100vh-container';
 import './sass/contract-card-dialog.scss';
-
-let ContractUpdateFormWrapper;
+import { TGetCardLables, TToastConfig } from '../../types';
+import { TContractStore } from '@deriv/shared/src/utils/contract/contract-types';
+
+let ContractUpdateFormWrapper: React.ElementType;
+
+export type TToggleCardDialogProps = {
+    addToast: (toast_config: TToastConfig) => void;
+    connectWithContractUpdate: (contract_update_form: React.ElementType) => React.ElementType;
+    contract_id?: number;
+    current_focus?: string;
+    error_message_alignment: string;
+    getCardLabels: TGetCardLables;
+    getContractById: (contract_id?: number) => TContractStore;
+    is_valid_to_cancel: boolean;
+    onMouseLeave: () => void;
+    removeToast: (toast_id: string) => void;
+    setCurrentFocus: (name: string) => void;
+    should_show_cancellation_warning: boolean;
+    status: string;
+    toggleCancellationWarning: () => void;
+};
 
 const ToggleCardDialog = ({
     addToast,
@@ -29,14 +47,14 @@ const ToggleCardDialog = ({
     should_show_cancellation_warning,
     status,
     toggleCancellationWarning,
-}) => {
+}: TToggleCardDialogProps) => {
     const [is_visible, setIsVisible] = React.useState(false);
     const [top, setTop] = React.useState(0);
     const [left, setLeft] = React.useState(0);
     const [is_do_not_show_selected, setIsDoNotShowSelected] = React.useState(!should_show_cancellation_warning);
 
-    const toggle_ref = React.useRef();
-    const dialog_ref = React.useRef();
+    const toggle_ref = React.useRef<HTMLDivElement>(null);
+    const dialog_ref = React.useRef<HTMLDivElement>(null);
     const contract = getContractById(contract_id);
 
     React.useEffect(() => {
@@ -65,7 +83,7 @@ const ToggleCardDialog = ({
         }
     }, [is_visible]);
 
-    const handleClick = e => {
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
         e.stopPropagation();
     };
 
@@ -79,7 +97,7 @@ const ToggleCardDialog = ({
         setIsDoNotShowSelected(!is_do_not_show_selected);
     };
 
-    const toggleDialog = e => {
+    const toggleDialog = (e: React.MouseEvent<HTMLDivElement>) => {
         e.preventDefault();
         e.stopPropagation();
         if (isMobile() && should_show_cancellation_warning && is_valid_to_cancel) {
@@ -101,7 +119,7 @@ const ToggleCardDialog = ({
         <Icon
             className='dc-contract-card-dialog-toggle__icon'
             icon='IcEdit'
-            color={is_valid_to_cancel && 'disabled'}
+            color={is_valid_to_cancel ? 'disabled' : ''}
             size={12}
         />
     );
@@ -113,7 +131,7 @@ const ToggleCardDialog = ({
                 classNameBubble='dc-contract-card-dialog__popover'
                 is_bubble_hover_enabled
                 margin={2}
-                zIndex={2}
+                zIndex='2'
                 message={
                     <PopoverMessageCheckbox
                         defaultChecked={is_do_not_show_selected}
@@ -194,21 +212,4 @@ const ToggleCardDialog = ({
 
 ToggleCardDialog.displayName = 'ToggleCardDialog';
 
-ToggleCardDialog.propTypes = {
-    addToast: PropTypes.func,
-    connectWithContractUpdate: PropTypes.func,
-    contract_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    current_focus: PropTypes.string,
-    error_message_alignment: PropTypes.string,
-    getCardLabels: PropTypes.func,
-    getContractById: PropTypes.func,
-    is_valid_to_cancel: PropTypes.bool,
-    onMouseLeave: PropTypes.func,
-    removeToast: PropTypes.func,
-    setCurrentFocus: PropTypes.func,
-    should_show_cancellation_warning: PropTypes.bool,
-    status: PropTypes.string,
-    toggleCancellationWarning: PropTypes.func,
-};
-
 export default React.memo(ToggleCardDialog);
diff --git a/packages/components/src/components/contract-card/contract-card-loader/contract-card-loader.jsx b/packages/components/src/components/contract-card/contract-card-loader/contract-card-loader.tsx
similarity index 89%
rename from packages/components/src/components/contract-card/contract-card-loader/contract-card-loader.jsx
rename to packages/components/src/components/contract-card/contract-card-loader/contract-card-loader.tsx
index 336f1fdeead4..2ec5597034ab 100644
--- a/packages/components/src/components/contract-card/contract-card-loader/contract-card-loader.jsx
+++ b/packages/components/src/components/contract-card/contract-card-loader/contract-card-loader.tsx
@@ -1,8 +1,7 @@
 import ContentLoader from 'react-content-loader';
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const ContractCardLoader = ({ speed }) => (
+const ContractCardLoader = ({ speed }: { speed: number }) => (
     <ContentLoader height={173} width={218} speed={speed}>
         <rect x='43' y='19' rx='0' ry='0' width='56' height='8' />
         <rect x='147' y='19' rx='0' ry='0' width='56' height='8' />
@@ -22,8 +21,4 @@ const ContractCardLoader = ({ speed }) => (
     </ContentLoader>
 );
 
-ContractCardLoader.propTypes = {
-    speed: PropTypes.number,
-};
-
 export default ContractCardLoader;
diff --git a/packages/components/src/components/contract-card/contract-card-loader/index.js b/packages/components/src/components/contract-card/contract-card-loader/index.js
deleted file mode 100644
index 416db34512f0..000000000000
--- a/packages/components/src/components/contract-card/contract-card-loader/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import ContractCardLoader from './contract-card-loader.jsx';
-
-export default ContractCardLoader;
diff --git a/packages/components/src/components/contract-card/contract-card-loader/index.ts b/packages/components/src/components/contract-card/contract-card-loader/index.ts
new file mode 100644
index 000000000000..7c9a15d79cb3
--- /dev/null
+++ b/packages/components/src/components/contract-card/contract-card-loader/index.ts
@@ -0,0 +1,3 @@
+import ContractCardLoader from './contract-card-loader';
+
+export default ContractCardLoader;
diff --git a/packages/components/src/components/contract-card/contract-card.jsx b/packages/components/src/components/contract-card/contract-card.tsx
similarity index 75%
rename from packages/components/src/components/contract-card/contract-card.jsx
rename to packages/components/src/components/contract-card/contract-card.tsx
index 840d429d5dbf..6fc9238b7c2e 100644
--- a/packages/components/src/components/contract-card/contract-card.jsx
+++ b/packages/components/src/components/contract-card/contract-card.tsx
@@ -1,14 +1,29 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import ContractCardLoader from './contract-card-loader';
-import ContractCardHeader from './contract-card-items/contract-card-header.jsx';
-import ContractCardBody from './contract-card-items/contract-card-body.jsx';
-import ContractCardFooter from './contract-card-items/contract-card-footer.jsx';
-import ContractTypeCell from './contract-card-items/contract-type-cell.jsx';
-import ContractCardSell from './contract-card-items/contract-card-sell.jsx';
-import MultiplierCloseActions from './contract-card-items/multiplier-close-actions.jsx';
+import ContractCardHeader from './contract-card-items/contract-card-header';
+import ContractCardBody from './contract-card-items/contract-card-body';
+import ContractCardFooter from './contract-card-items/contract-card-footer';
+import ContractTypeCell from './contract-card-items/contract-type-cell';
+import ContractCardSell from './contract-card-items/contract-card-sell';
+import MultiplierCloseActions from './contract-card-items/multiplier-close-actions';
 import ResultOverlay from './result-overlay';
 import DesktopWrapper from '../desktop-wrapper';
+import { TContractInfo } from '@deriv/shared/src/utils/contract/contract-types';
+import { TGetCardLables, TGetContractPath } from '../types';
+
+type TContractCardProps = {
+    contract_info: TContractInfo;
+    getCardLabels: TGetCardLables;
+    getContractPath: TGetContractPath;
+    is_multiplier: boolean;
+    is_positions: boolean;
+    is_unsupported: boolean;
+    onClickRemove: () => void;
+    profit_loss: number;
+    result: string;
+    should_show_result_overlay: boolean;
+    toggleUnsupportedContractModal: (is_unsupported_contract_modal_visible: boolean) => void;
+};
 
 const ContractCard = ({
     children,
@@ -23,7 +38,7 @@ const ContractCard = ({
     result,
     should_show_result_overlay,
     toggleUnsupportedContractModal,
-}) => {
+}: React.PropsWithChildren<TContractCardProps>) => {
     const fallback_result = profit_loss >= 0 ? 'won' : 'lost';
 
     return (
@@ -57,19 +72,4 @@ ContractCard.ContractTypeCell = ContractTypeCell;
 ContractCard.MultiplierCloseActions = MultiplierCloseActions;
 ContractCard.Sell = ContractCardSell;
 
-ContractCard.propTypes = {
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-    contract_info: PropTypes.object,
-    getCardLabels: PropTypes.func,
-    getContractPath: PropTypes.func,
-    is_multiplier: PropTypes.bool,
-    is_positions: PropTypes.bool,
-    is_unsupported: PropTypes.bool,
-    onClickRemove: PropTypes.func,
-    profit_loss: PropTypes.number,
-    result: PropTypes.string,
-    should_show_result_overlay: PropTypes.bool,
-    toggleUnsupportedContractModal: PropTypes.func,
-};
-
 export default ContractCard;
diff --git a/packages/components/src/components/contract-card/index.js b/packages/components/src/components/contract-card/index.ts
similarity index 55%
rename from packages/components/src/components/contract-card/index.js
rename to packages/components/src/components/contract-card/index.ts
index 8d065368aa04..abdccf79f219 100644
--- a/packages/components/src/components/contract-card/index.js
+++ b/packages/components/src/components/contract-card/index.ts
@@ -1,4 +1,4 @@
-import ContractCard from './contract-card.jsx';
+import ContractCard from './contract-card';
 import './contract-card.scss';
 
 export default ContractCard;
diff --git a/packages/components/src/components/contract-card/result-overlay/index.js b/packages/components/src/components/contract-card/result-overlay/index.ts
similarity index 55%
rename from packages/components/src/components/contract-card/result-overlay/index.js
rename to packages/components/src/components/contract-card/result-overlay/index.ts
index 295c9b091369..c89584dbf9e9 100644
--- a/packages/components/src/components/contract-card/result-overlay/index.js
+++ b/packages/components/src/components/contract-card/result-overlay/index.ts
@@ -1,4 +1,4 @@
-import ResultOverlay from './result-overlay.jsx';
+import ResultOverlay from './result-overlay';
 import './result-overlay.scss';
 
 export default ResultOverlay;
diff --git a/packages/components/src/components/contract-card/result-overlay/result-overlay.jsx b/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx
similarity index 82%
rename from packages/components/src/components/contract-card/result-overlay/result-overlay.jsx
rename to packages/components/src/components/contract-card/result-overlay/result-overlay.tsx
index daa3cf344ed8..17f3f4dee848 100644
--- a/packages/components/src/components/contract-card/result-overlay/result-overlay.jsx
+++ b/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx
@@ -1,11 +1,29 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { NavLink } from 'react-router-dom';
 import Icon from '../../icon';
+import { TGetCardLables, TGetContractPath } from '../../types';
 
-export const ResultStatusIcon = ({ getCardLabels, is_contract_won }) => (
+type TResultOverlayProps = {
+    contract_id?: number;
+    getCardLabels: TGetCardLables;
+    getContractPath: TGetContractPath;
+    is_multiplier?: boolean;
+    is_positions: boolean;
+    is_unsupported: boolean;
+    is_visible: boolean;
+    onClick: () => void;
+    onClickRemove: (contract_id?: number) => void;
+    result: string;
+};
+
+type TResultStatusIcon = {
+    getCardLabels: TGetCardLables;
+    is_contract_won: boolean;
+};
+
+export const ResultStatusIcon = ({ getCardLabels, is_contract_won }: TResultStatusIcon) => (
     <span
         className={classNames('dc-result__caption', {
             'dc-result__caption--won': is_contract_won,
@@ -36,8 +54,8 @@ const ResultOverlay = ({
     onClick,
     onClickRemove,
     result,
-}) => {
-    const handleClick = e => {
+}: TResultOverlayProps) => {
+    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
         if (is_unsupported) {
             e.preventDefault();
             onClick();
@@ -87,16 +105,4 @@ const ResultOverlay = ({
     );
 };
 
-ResultOverlay.propTypes = {
-    contract_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    getCardLabels: PropTypes.func,
-    getContractPath: PropTypes.func,
-    is_positions: PropTypes.bool,
-    is_unsupported: PropTypes.bool,
-    is_visible: PropTypes.bool,
-    onClick: PropTypes.func,
-    onClickRemove: PropTypes.func,
-    result: PropTypes.string,
-};
-
 export default ResultOverlay;
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 7f03f35436d5..02fce1d5f43a 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,12 +9,12 @@ import { TGetCardLables } from '../types';
 
 type TProgressSliderMobileProps = {
     className?: string;
-    current_tick: number;
-    expiry_time: number;
+    current_tick: number | null;
+    expiry_time?: number;
     is_loading: boolean;
     server_time: moment.Moment;
-    start_time: number;
-    ticks_count: number;
+    start_time?: number;
+    ticks_count?: number;
     getCardLabels: TGetCardLables;
 };
 
@@ -28,7 +28,7 @@ const ProgressSliderMobile = ({
     server_time,
     ticks_count,
 }: TProgressSliderMobileProps) => {
-    const percentage = getTimePercentage(server_time, start_time, expiry_time);
+    const percentage = getTimePercentage(server_time, Number(start_time), Number(expiry_time));
     return (
         <div className={classNames('dc-progress-slider-mobile', className)}>
             {ticks_count ? (
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 d4371af716dd..0e4ed7f6da0d 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;
+    current_tick: number | null;
     ticks_count: number;
     getCardLabels: TGetCardLables;
 };
diff --git a/packages/components/src/components/progress-slider/progress-slider.tsx b/packages/components/src/components/progress-slider/progress-slider.tsx
index 716364ee4951..1b7858f642d1 100644
--- a/packages/components/src/components/progress-slider/progress-slider.tsx
+++ b/packages/components/src/components/progress-slider/progress-slider.tsx
@@ -5,16 +5,17 @@ import ProgressTicks from './progress-ticks';
 import RemainingTime from '../remaining-time';
 import Text from '../text';
 import moment from 'moment';
+import { TGetCardLables } from '../types';
 
 type TProgressSliderProps = {
     className?: string;
-    current_tick: number;
-    expiry_time: number & string;
-    getCardLabels: () => { [key: string]: string }; // TODO Use the one from shared workspace after migration
+    current_tick: number | null;
+    expiry_time?: number;
+    getCardLabels: TGetCardLables;
     is_loading: boolean;
     server_time: moment.Moment;
-    start_time: number & string;
-    ticks_count: number;
+    start_time?: number;
+    ticks_count?: number;
 };
 
 const ProgressSlider = ({
@@ -27,7 +28,7 @@ const ProgressSlider = ({
     start_time,
     ticks_count,
 }: TProgressSliderProps) => {
-    const percentage = getTimePercentage(server_time, start_time, expiry_time);
+    const percentage = getTimePercentage(server_time, Number(start_time), Number(expiry_time));
     return (
         <div className={classNames('dc-progress-slider', className)}>
             {ticks_count ? (
diff --git a/packages/components/src/components/progress-slider/progress-ticks.tsx b/packages/components/src/components/progress-slider/progress-ticks.tsx
index f91ce4d013cd..5cc47398e131 100644
--- a/packages/components/src/components/progress-slider/progress-ticks.tsx
+++ b/packages/components/src/components/progress-slider/progress-ticks.tsx
@@ -1,10 +1,11 @@
 import classNames from 'classnames';
 import React from 'react';
 import Text from '../text';
+import { TGetCardLables } from '../types';
 
 type TProgressTicksProps = {
-    current_tick: number;
-    getCardLabels: () => { [key: string]: string }; // TODO Use the one from shared workspace after migration
+    current_tick: number | null;
+    getCardLabels: TGetCardLables;
     ticks_count: number;
 };
 
@@ -20,7 +21,7 @@ const ProgressTicks = ({ current_tick, getCardLabels, ticks_count }: TProgressTi
                     <div
                         key={idx}
                         className={classNames('dc-progress-slider__ticks-step', {
-                            'dc-progress-slider__ticks-step--marked': idx + 1 <= current_tick,
+                            'dc-progress-slider__ticks-step--marked': idx + 1 <= Number(current_tick),
                         })}
                     />
                 ))}
diff --git a/packages/components/src/components/tick-progress/tick-progress.tsx b/packages/components/src/components/tick-progress/tick-progress.tsx
index f8d92908b391..4e9f7fbe6b59 100644
--- a/packages/components/src/components/tick-progress/tick-progress.tsx
+++ b/packages/components/src/components/tick-progress/tick-progress.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 type TTickProgress = {
     className?: string;
     columns?: number;
-    value?: number;
+    value?: number | null;
     rows?: number;
     size?: number;
 };
@@ -29,7 +29,7 @@ const TickProgress = ({ className, rows = 2, columns = 5, size = 10, value = 0 }
             }}
         >
             {new Array(size).fill(null).map((_, index) => {
-                return <Tick is_on={index < value} key={index} />;
+                return <Tick is_on={index < Number(value)} key={index} />;
             })}
         </div>
     );
diff --git a/packages/components/src/components/types/common.types.ts b/packages/components/src/components/types/common.types.ts
index 169248792204..4c464f11f4ed 100644
--- a/packages/components/src/components/types/common.types.ts
+++ b/packages/components/src/components/types/common.types.ts
@@ -1,7 +1,9 @@
 import React from 'react';
-import { getCardLabels } from '@deriv/shared';
+import { getCardLabels, getContractTypeDisplay } from '@deriv/shared';
 
 export type TGenericObjectType = {
     [key: string]: React.ReactNode;
 };
 export type TGetCardLables = () => ReturnType<typeof getCardLabels>;
+
+export type TGetContractTypeDisplay = (type: string, is_high_low: boolean) => ReturnType<typeof getContractTypeDisplay>;
diff --git a/packages/components/src/components/types/contract.types.ts b/packages/components/src/components/types/contract.types.ts
new file mode 100644
index 000000000000..212a926b300b
--- /dev/null
+++ b/packages/components/src/components/types/contract.types.ts
@@ -0,0 +1,14 @@
+export type TGetContractPath = (contract_id?: number) => string;
+
+export type TToastConfig = {
+    key?: string;
+    content: string;
+    timeout?: number;
+    is_bottom?: boolean;
+    type?: string;
+};
+
+export type TErrorMessages = Readonly<{
+    take_profit: string;
+    stop_loss: string;
+}>;
diff --git a/packages/components/src/components/types/index.ts b/packages/components/src/components/types/index.ts
index d334be4fdda7..7911e1a631d9 100644
--- a/packages/components/src/components/types/index.ts
+++ b/packages/components/src/components/types/index.ts
@@ -2,7 +2,8 @@ import { TIconsManifest, TIconProps } from './icons.types';
 import { TAccordionProps, TAccordionItem } from './accordion.types';
 import { TMultiStepProps, TMultiStepRefProps } from './multi-step.types';
 import { TPopoverProps } from './popover.types';
-import { TGetCardLables } from './common.types';
+import { TGetCardLables, TGetContractTypeDisplay } from './common.types';
+import { TErrorMessages, TGetContractPath, TToastConfig } from './contract.types';
 
 export type {
     TAccordionItem,
@@ -13,4 +14,8 @@ export type {
     TMultiStepRefProps,
     TPopoverProps,
     TGetCardLables,
+    TErrorMessages,
+    TGetContractPath,
+    TToastConfig,
+    TGetContractTypeDisplay,
 };
diff --git a/packages/components/src/hooks/use-onclickoutside.ts b/packages/components/src/hooks/use-onclickoutside.ts
index 8cf8d6726c6c..5cd2c688e2da 100644
--- a/packages/components/src/hooks/use-onclickoutside.ts
+++ b/packages/components/src/hooks/use-onclickoutside.ts
@@ -1,11 +1,11 @@
-import React, { RefObject } from 'react';
+import React from 'react';
 
 export interface IClickEvent extends MouseEvent {
     path?: HTMLElement[];
 }
 
-export const useOnClickOutside = (
-    ref: RefObject<HTMLElement>,
+export const useOnClickOutside = <T extends HTMLElement>(
+    ref: React.RefObject<T> | React.ForwardedRef<T>,
     handler: (event?: IClickEvent) => void,
     validationFn: (event: IClickEvent) => boolean
 ) => {
@@ -15,6 +15,7 @@ export const useOnClickOutside = (
             // When component is isolated (e.g, iframe, shadow DOM) event.target refers to whole container not the component. path[0] is the node that the event originated from, it does not need to walk the array
             if (
                 ref &&
+                typeof ref !== 'function' &&
                 ref.current &&
                 !ref.current.contains(event.target as HTMLElement) &&
                 !ref.current.contains(path)
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 3e4231dce720..dc8ae6cd757f 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -41,6 +41,7 @@
     },
     "dependencies": {
         "@deriv/api-types": "^1.0.54",
+        "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "@types/js-cookie": "^3.0.1",
         "@types/react-loadable": "^5.5.6",
diff --git a/packages/shared/src/utils/contract/contract-types.ts b/packages/shared/src/utils/contract/contract-types.ts
index 5af91ba65d80..ecbbad340fa8 100644
--- a/packages/shared/src/utils/contract/contract-types.ts
+++ b/packages/shared/src/utils/contract/contract-types.ts
@@ -1,48 +1,11 @@
-import { ContractUpdate } from '@deriv/api-types';
+import { ContractUpdate, ProposalOpenContract } from '@deriv/api-types';
+import { useStore } from '@deriv/stores';
 
-export type TStatus = 'open' | 'sold' | 'won' | 'lost' | 'cancelled';
+export type TRootStore = ReturnType<typeof useStore>;
+export type TContractStore = TRootStore['contract_store'];
 
-export type TGetFinalPrice = {
-    sell_price: number;
-    bid_price: number;
-};
-
-export type TIsEnded = Partial<TGetFinalPrice> & {
-    is_valid_to_sell?: 0 | 1;
-    status?: TStatus;
-    is_expired?: 0 | 1;
-    is_settleable?: 0 | 1;
-};
-
-export type TContractInfo = {
-    tick_stream?: TTickItem[];
-    cancellation?: {
-        ask_price?: number;
-        date_expiry?: number;
-    };
-    status?: TStatus;
-    is_expired?: 0 | 1;
-    is_settleable?: 0 | 1;
-    is_valid_to_cancel?: 0 | 1;
-    entry_spot?: number;
-    profit?: number;
-    entry_tick_time?: number;
-    entry_tick?: number;
-    current_spot_time?: number;
-    current_spot?: number;
-    barrier?: string;
-    contract_type?: string;
-    exit_tick_time?: number;
-    date_expiry?: number;
-    is_path_dependent?: 0 | 1;
-    sell_time?: number | null;
-    tick_count?: number;
-    date_start?: number;
-    is_forward_starting?: 0 | 1;
-};
-
-export type TIsValidToSell = TIsEnded & {
-    is_valid_to_sell: 0 | 1;
+export type TContractInfo = ProposalOpenContract & {
+    contract_update?: ContractUpdate;
 };
 
 export type TTickItem = {
@@ -53,11 +16,6 @@ export type TTickItem = {
 
 export type TDigitsInfo = { [key: number]: { digit: number; spot: string } };
 
-export type TGetTotalProfit = {
-    bid_price: number;
-    buy_price: number;
-};
-
 type TLimitProperty = {
     display_name?: string;
     order_amount?: null | number;
@@ -66,12 +24,3 @@ type TLimitProperty = {
 };
 
 export type TLimitOrder = Partial<Record<'stop_loss' | 'stop_out' | 'take_profit', TLimitProperty>>;
-
-export type TGetDisplayStatus = TGetTotalProfit & {
-    status: TStatus;
-};
-
-export type TGetContractUpdateConfig = {
-    contract_update: ContractUpdate;
-    limit_order: TLimitOrder;
-};
diff --git a/packages/shared/src/utils/contract/contract.ts b/packages/shared/src/utils/contract/contract.ts
index cfd178f1ab05..097977287f4a 100644
--- a/packages/shared/src/utils/contract/contract.ts
+++ b/packages/shared/src/utils/contract/contract.ts
@@ -1,32 +1,20 @@
 import moment from 'moment';
 import { unique } from '../object';
-import {
-    TContractInfo,
-    TLimitOrder,
-    TGetFinalPrice,
-    TGetContractUpdateConfig,
-    TDigitsInfo,
-    TTickItem,
-    TIsEnded,
-    TIsValidToSell,
-    TGetTotalProfit,
-    TGetDisplayStatus,
-    TStatus,
-} from './contract-types';
-
-export const getFinalPrice = (contract_info: TGetFinalPrice) => +(contract_info.sell_price || contract_info.bid_price);
-
-export const getIndicativePrice = (contract_info: TGetFinalPrice & TIsEnded) =>
+import { TContractInfo, TLimitOrder, TDigitsInfo, TTickItem } from './contract-types';
+
+export const getFinalPrice = (contract_info: TContractInfo) => contract_info.sell_price || contract_info.bid_price;
+
+export const getIndicativePrice = (contract_info: TContractInfo) =>
     getFinalPrice(contract_info) && isEnded(contract_info)
         ? getFinalPrice(contract_info)
-        : +contract_info.bid_price || null;
+        : Number(contract_info.bid_price) || null;
 
 export const getCancellationPrice = (contract_info: TContractInfo) => {
     const { cancellation: { ask_price: cancellation_price = 0 } = {} } = contract_info;
     return cancellation_price;
 };
 
-export const isEnded = (contract_info: TIsEnded) =>
+export const isEnded = (contract_info: TContractInfo) =>
     !!(
         (contract_info.status && contract_info.status !== 'open') ||
         contract_info.is_expired ||
@@ -35,16 +23,12 @@ export const isEnded = (contract_info: TIsEnded) =>
 
 export const isOpen = (contract_info: TContractInfo) => contract_info.status === 'open';
 
-type TIsUserSold = {
-    status?: TStatus;
-};
-
-export const isUserSold = (contract_info: TIsUserSold) => contract_info.status === 'sold';
+export const isUserSold = (contract_info: TContractInfo) => contract_info.status === 'sold';
 
 export const isValidToCancel = (contract_info: TContractInfo) => !!contract_info.is_valid_to_cancel;
 
-export const isValidToSell = (contract_info: TIsValidToSell) =>
-    !isEnded(contract_info) && !isUserSold(contract_info) && +contract_info.is_valid_to_sell === 1;
+export const isValidToSell = (contract_info: TContractInfo) =>
+    !isEnded(contract_info) && !isUserSold(contract_info) && Number(contract_info.is_valid_to_sell) === 1;
 
 export const hasContractEntered = (contract_info: TContractInfo) => !!contract_info.entry_spot;
 
@@ -52,20 +36,15 @@ export const isMultiplierContract = (contract_type: string) => /MULT/i.test(cont
 
 export const isCryptoContract = (underlying: string) => /^cry/.test(underlying);
 
-type TGetCurrentTick = TContractInfo & {
-    contract_type: string;
-    tick_stream: TTickItem[];
-};
-
-export const getCurrentTick = (contract_info: TGetCurrentTick) => {
-    const tick_stream = unique(contract_info.tick_stream, 'epoch');
+export const getCurrentTick = (contract_info: TContractInfo) => {
+    const tick_stream = unique(contract_info.tick_stream || [], 'epoch');
     const current_tick = isDigitContract(contract_info.contract_type) ? tick_stream.length : tick_stream.length - 1;
     return !current_tick || current_tick < 0 ? 0 : current_tick;
 };
 
 export const getLastTickFromTickStream = (tick_stream: TTickItem[] = []) => tick_stream[tick_stream.length - 1] || {};
 
-export const isDigitContract = (contract_type: string) => /digit/i.test(contract_type);
+export const isDigitContract = (contract_type = '') => /digit/i.test(contract_type);
 
 export const getDigitInfo = (digits_info: TDigitsInfo, contract_info: TContractInfo) => {
     const { tick_stream } = contract_info;
@@ -83,7 +62,8 @@ export const getDigitInfo = (digits_info: TDigitsInfo, contract_info: TContractI
     };
 };
 
-export const getTotalProfit = (contract_info: TGetTotalProfit) => contract_info.bid_price - contract_info.buy_price;
+export const getTotalProfit = (contract_info: TContractInfo) =>
+    Number(contract_info.bid_price) - Number(contract_info.buy_price);
 
 const createDigitInfo = (spot: string, spot_time: number) => {
     const digit = +`${spot}`.slice(-1);
@@ -96,7 +76,7 @@ const createDigitInfo = (spot: string, spot_time: number) => {
     };
 };
 
-export const getLimitOrderAmount = (limit_order: TLimitOrder) => {
+export const getLimitOrderAmount = (limit_order?: TLimitOrder) => {
     if (!limit_order) return { stop_loss: 0, take_profit: 0 };
     const {
         stop_loss: { order_amount: stop_loss_order_amount } = {},
@@ -123,7 +103,7 @@ export const getTimePercentage = (server_time: moment.Moment, start_time: number
     return Math.round(percentage);
 };
 
-export const getDisplayStatus = (contract_info: TGetDisplayStatus) => {
+export const getDisplayStatus = (contract_info: TContractInfo) => {
     let status = 'purchased';
     if (isEnded(contract_info)) {
         status = getTotalProfit(contract_info) >= 0 ? 'won' : 'lost';
@@ -137,7 +117,7 @@ export const getDisplayStatus = (contract_info: TGetDisplayStatus) => {
  * @param {object} limit_order - proposal_open_contract.limit_order response
  */
 
-export const getContractUpdateConfig = ({ contract_update, limit_order }: TGetContractUpdateConfig) => {
+export const getContractUpdateConfig = ({ contract_update, limit_order }: TContractInfo) => {
     const { stop_loss, take_profit } = getLimitOrderAmount(limit_order || contract_update);
 
     return {
@@ -151,4 +131,4 @@ export const getContractUpdateConfig = ({ contract_update, limit_order }: TGetCo
 
 export const shouldShowExpiration = (symbol: string) => /^cry/.test(symbol);
 
-export const shouldShowCancellation = (symbol: string) => !/^(cry|CRASH|BOOM|stpRNG|WLD|JD)/.test(symbol);
+export const shouldShowCancellation = (symbol = '') => !/^(cry|CRASH|BOOM|stpRNG|WLD|JD)/.test(symbol);
diff --git a/packages/shared/src/utils/helpers/logic.ts b/packages/shared/src/utils/helpers/logic.ts
index 78c7fdb3e1bb..0e3af195d1ad 100644
--- a/packages/shared/src/utils/helpers/logic.ts
+++ b/packages/shared/src/utils/helpers/logic.ts
@@ -1,7 +1,7 @@
 import moment from 'moment';
 import { isEmptyObject } from '../object';
 import { isUserSold } from '../contract';
-import { TContractInfo } from '../contract/contract-types';
+import { TContractInfo, TContractStore } from '../contract/contract-types';
 
 type TTick = {
     ask?: number;
@@ -27,12 +27,6 @@ type TIsStarted = Required<Pick<TContractInfo, 'is_forward_starting' | 'current_
 type TGetEndTime = Pick<TContractInfo, 'is_expired' | 'sell_time' | 'status' | 'tick_count'> &
     Required<Pick<TContractInfo, 'date_expiry' | 'exit_tick_time' | 'is_path_dependent'>>;
 
-type TGetBuyPrice = {
-    contract_info: {
-        buy_price: number;
-    };
-};
-
 export const isContractElapsed = (contract_info: TGetEndTime, tick: TTick) => {
     if (isEmptyObject(tick) || isEmptyObject(contract_info)) return false;
     const end_time = getEndTime(contract_info) || 0;
@@ -80,7 +74,7 @@ export const getEndTime = (contract_info: TGetEndTime) => {
     return date_expiry > exit_tick_time && !+is_path_dependent ? date_expiry : exit_tick_time;
 };
 
-export const getBuyPrice = (contract_store: TGetBuyPrice) => {
+export const getBuyPrice = (contract_store: TContractStore) => {
     return contract_store.contract_info.buy_price;
 };
 
diff --git a/packages/shared/src/utils/helpers/validation-rules.ts b/packages/shared/src/utils/helpers/validation-rules.ts
index 7b484514d75b..4c69b9c8979b 100644
--- a/packages/shared/src/utils/helpers/validation-rules.ts
+++ b/packages/shared/src/utils/helpers/validation-rules.ts
@@ -1,14 +1,8 @@
 import { localize } from '@deriv/translations';
 import { getTotalProfit } from '../contract';
-import { TGetTotalProfit } from '../contract/contract-types';
+import { TContractStore } from '../contract/contract-types';
 import { getBuyPrice } from './logic';
 
-type TContractStore = {
-    contract_update_stop_loss?: number;
-    contract_info: TGetTotalProfit;
-    contract_update_take_profit?: string;
-};
-
 type TOptions = {
     message?: string;
     min?: number;
@@ -43,7 +37,7 @@ export const getContractValidationRules = () => ({
                 {
                     func: (value: number, options: TOptions, contract_store: TContractStore) => {
                         const stake = getBuyPrice(contract_store);
-                        return value < stake + 1;
+                        return value < Number(stake) + 1;
                     },
                     message: localize('Invalid stop loss. Stop loss cannot be more than stake.'),
                 },
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index 189164dc74e1..a3b7092a2890 100644
--- a/packages/stores/types.ts
+++ b/packages/stores/types.ts
@@ -1,4 +1,10 @@
-import type { GetAccountStatus, Authorize, DetailsOfEachMT5Loginid, LogOutResponse } from '@deriv/api-types';
+import type {
+    GetAccountStatus,
+    Authorize,
+    DetailsOfEachMT5Loginid,
+    LogOutResponse,
+    ProposalOpenContract,
+} from '@deriv/api-types';
 import type { RouteComponentProps } from 'react-router';
 
 type TAccount = NonNullable<Authorize['account_list']>[0];
@@ -106,9 +112,22 @@ type TUiStore = {
     setDarkMode: (is_dark_mode_on: boolean) => boolean;
 };
 
+export type TContractStore = {
+    contract_info: ProposalOpenContract;
+    contract_update_take_profit: number & string;
+    contract_update_stop_loss: number & string;
+    clearContractUpdateConfigValues: () => void;
+    has_contract_update_take_profit: false;
+    has_contract_update_stop_loss: false;
+    updateLimitOrder: () => void;
+    validation_errors: { contract_update_stop_loss: string[]; contract_update_take_profit: string[] };
+    onChange: (param: { name: string; value: string | number | boolean }) => void;
+};
+
 export type TRootStore = {
     client: TClientStore;
     common: TCommonStore;
     ui: TUiStore;
     modules: Record<string, any>;
+    contract_store: TContractStore;
 };

From a19c74547d7ddeba6483207feb8098a248985484 Mon Sep 17 00:00:00 2001
From: Jim Daniels Wasswa <jim@deriv.com>
Date: Wed, 1 Feb 2023 10:19:34 +0800
Subject: [PATCH 2/3] chore: update type declaration to use union instead of
 intersection

---
 packages/stores/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index a3b7092a2890..25c94ba7841f 100644
--- a/packages/stores/types.ts
+++ b/packages/stores/types.ts
@@ -114,8 +114,8 @@ type TUiStore = {
 
 export type TContractStore = {
     contract_info: ProposalOpenContract;
-    contract_update_take_profit: number & string;
-    contract_update_stop_loss: number & string;
+    contract_update_take_profit: number | string;
+    contract_update_stop_loss: number | string;
     clearContractUpdateConfigValues: () => void;
     has_contract_update_take_profit: false;
     has_contract_update_stop_loss: false;

From e3faf66906a5c53ac597208232afa0f9e95fe588 Mon Sep 17 00:00:00 2001
From: Jim Daniels Wasswa <jim@deriv.com>
Date: Wed, 1 Feb 2023 10:20:44 +0800
Subject: [PATCH 3/3] chore: remove unnecessary export

---
 packages/stores/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index 25c94ba7841f..6084eb55fc6c 100644
--- a/packages/stores/types.ts
+++ b/packages/stores/types.ts
@@ -112,7 +112,7 @@ type TUiStore = {
     setDarkMode: (is_dark_mode_on: boolean) => boolean;
 };
 
-export type TContractStore = {
+type TContractStore = {
     contract_info: ProposalOpenContract;
     contract_update_take_profit: number | string;
     contract_update_stop_loss: number | string;