fix: TS migration Positions Drawer Card

packages/components/src/components/positions-drawer-card/positions-drawer-card.jsx → packages/components/src/components/positions-drawer-card/positions-drawer-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 ContractCard from '../contract-card';
@@ -11,15 +10,63 @@ import {
     getContractTypeDisplay,
     getEndTime,
 } from '@deriv/shared';
+import { TContractInfo } from '@deriv/shared/src/utils/contract/contract-types';
+import type { ContractUpdate } from '@deriv/api-types';
+import moment from 'moment';
+
+type TToastConfig = {
+    key?: number;
+    content: string;
+    timeout?: number;
+    is_bottom?: boolean;
+    type?: string;
+};
+
+type TGetEndTime = Pick<
+    TContractInfo,
+    'is_expired' | 'sell_time' | 'status' | 'tick_count' | 'contract_type' | 'underlying' | 'contract_id'
+> &
+    Required<Pick<TContractInfo, 'date_expiry' | 'exit_tick_time' | 'is_path_dependent'>>;
+
+type TPositionsDrawerCardProps = {
+    addToast: (toast_config: TToastConfig) => void;
+    className?: string;
+    contract_info: TGetEndTime;
+    contract_update: ContractUpdate;
+    currency: string;
+    current_focus: string;
+    display_name: string;
+    getContractById: (contract_id: string) => Record<string, any>;
+    is_mobile: boolean;
+    is_sell_requested: boolean;
+    is_unsupported: boolean;
+    is_link_disabled: boolean;
+    profit_loss: number;
+    onClickCancel: (contract_id: string) => void;
+    onClickSell: (contract_id: string) => void;
+    onClickRemove: () => void;
+    onFooterEntered: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    removeToast: (key: number) => void;
+    result: string;
+    setCurrentFocus: (value: string) => void;
+    server_time: moment.Moment;
+    should_show_transition: boolean;
+    should_show_cancellation_warning: boolean;
+    status: string;
+    toggleCancellationWarning: (value: boolean) => void;
+    toggleUnsupportedContractModal: (value: boolean) => void;
+};
 
 const PositionsDrawerCard = ({
     addToast,
     className,
-    display_name,
     contract_info,
     contract_update,
     currency,
     current_focus,
+    display_name,
     getContractById,
     is_mobile,
     is_sell_requested,
@@ -41,9 +88,9 @@ const PositionsDrawerCard = ({
     status,
     toggleCancellationWarning,
     toggleUnsupportedContractModal,
-}) => {
-    const is_multiplier = isMultiplierContract(contract_info.contract_type);
-    const is_crypto = isCryptoContract(contract_info.underlying);
+}: TPositionsDrawerCardProps) => {
+    const is_multiplier = isMultiplierContract(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);
 
@@ -61,7 +108,6 @@ const PositionsDrawerCard = ({
             getContractTypeDisplay={getContractTypeDisplay}
             has_progress_slider={!is_mobile && has_progress_slider}
             is_mobile={is_mobile}
-            is_positions={true}
             is_sell_requested={is_sell_requested}
             onClickSell={onClickSell}
             server_time={server_time}
@@ -184,45 +230,4 @@ const PositionsDrawerCard = ({
     );
 };
 
-PositionsDrawerCard.propTypes = {
-    addToast: PropTypes.func,
-    className: PropTypes.string,
-    contract_info: PropTypes.object,
-    contract_update: PropTypes.object,
-    currency: PropTypes.string,
-    current_focus: PropTypes.string,
-    current_tick: PropTypes.number,
-    display_name: PropTypes.string,
-    duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    duration_unit: PropTypes.string,
-    exit_spot: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    getContractById: PropTypes.func,
-    id: PropTypes.number,
-    indicative: PropTypes.number,
-    is_link_disabled: PropTypes.bool,
-    is_loading: PropTypes.bool,
-    is_mobile: PropTypes.bool,
-    is_sell_requested: PropTypes.bool,
-    is_unsupported: PropTypes.bool,
-    is_valid_to_sell: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-    onClickRemove: PropTypes.func,
-    onClickSell: PropTypes.func,
-    onClickCancel: PropTypes.func,
-    onFooterEntered: PropTypes.func,
-    onMouseEnter: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    profit_loss: PropTypes.number,
-    removeToast: PropTypes.func,
-    result: PropTypes.string,
-    sell_time: PropTypes.number,
-    server_time: PropTypes.object,
-    setCurrentFocus: PropTypes.func,
-    should_show_cancellation_warning: PropTypes.bool,
-    should_show_transition: PropTypes.bool,
-    status: PropTypes.string,
-    toggleCancellationWarning: PropTypes.func,
-    toggleUnsupportedContractModal: PropTypes.func,
-    type: PropTypes.string,
-};
-
 export default PositionsDrawerCard;

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

@@ -32,6 +32,8 @@ export type TContractInfo = {
     current_spot?: number;
     barrier?: string;
     contract_type?: string;
+    underlying?: string;
+    contract_id?: string;
     exit_tick_time?: number;
     date_expiry?: number;
     is_path_dependent?: 0 | 1;