chore: migrated indicative cell to tsx (#44)

* chore: migrated indicative cell to tsx

* fix: added types to usestate

* fix: change type

* fix: change function type to boolean

* fix: imported TContractInfo from shared file into indicative-cell

packages/reports/src/Components/indicative-cell.jsx → packages/reports/src/Components/indicative-cell.tsx

@@ -1,11 +1,29 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon, Money, DesktopWrapper, ContractCard } from '@deriv/components';
 import { getCardLabels } from '_common/contract';
 import { connect } from 'Stores/connect';
+import { TRootStore } from 'Stores/index';
+import { TContractInfo } from '@deriv/shared';
 
-const IndicativeCell = ({ amount, currency, contract_info, is_footer, onClickSell, is_sell_requested }) => {
-    const [movement, setMovement] = React.useState(null);
+type TIndicativeCell = {
+    amount: number;
+    contract_info: TContractInfo;
+    currency: string;
+    status: string;
+    is_footer: boolean;
+    is_sell_requested: boolean;
+    onClickSell: () => void;
+};
+
+const IndicativeCell = ({
+    amount,
+    currency,
+    contract_info,
+    is_footer,
+    onClickSell,
+    is_sell_requested,
+}: TIndicativeCell) => {
+    const [movement, setMovement] = React.useState<string | null>(null);
     const [amount_state, setAmountState] = React.useState(0);
 
     React.useEffect(() => {
@@ -40,16 +58,6 @@ const IndicativeCell = ({ amount, currency, contract_info, is_footer, onClickSel
     );
 };
 
-IndicativeCell.propTypes = {
-    amount: PropTypes.number,
-    contract_info: PropTypes.object,
-    currency: PropTypes.string,
-    status: PropTypes.string,
-    is_footer: PropTypes.bool,
-    is_sell_requested: PropTypes.func,
-    onClickSell: PropTypes.func,
-};
-
-export default connect(({ portfolio }) => ({
+export default connect(({ portfolio }: TRootStore) => ({
     onClickSell: portfolio.onClickSell,
 }))(IndicativeCell);

packages/reports/src/Constants/data-table-constants.tsx

@@ -7,7 +7,7 @@ import ProgressSliderStream from '../Containers/progress-slider-stream';
 
 import { getCardLabels } from '_common/contract';
 import { getProfitOrLoss } from '../Helpers/profit-loss';
-import IndicativeCell from '../Components/indicative-cell.jsx';
+import IndicativeCell from '../Components/indicative-cell';
 import MarketSymbolIconRow from '../Components/market-symbol-icon-row';
 import ProfitLossCell from '../Components/profit_loss_cell.jsx';
 import CurrencyWrapper from '../Components/currency-wrapper';