Kate / DTRA-398 / TS migration: Widget components in Trader package (d…

…eriv-com#33)

* refactor: ts of contract replay widget

* refactor: ts of mobile widgets

* refactor: ts of chart widgets

* refactor: ts of top widgets

* refactor: ts of top widgets

* refactor: types for widgets

* refactor: apply suggestions

* refactor: add position prop

packages/stores/src/mockStore.ts

@@ -302,6 +302,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             has_real_account_signup_ended: false,
             notification_messages_ui: jest.fn(),
             openRealAccountSignup: jest.fn(),
+            onChangeUiStore: jest.fn(),
             setHasOnlyForwardingContracts: jest.fn(),
             setIsClosingCreateRealAccountModal: jest.fn(),
             setRealAccountSignupEnd: jest.fn(),
@@ -492,6 +493,8 @@ const mock = (): TStores & { is_mock: boolean } => {
                 is_digit_contract: false,
                 is_ended: false,
             },
+            removeErrorMessage: jest.fn(),
+            error_message: '',
         },
         chart_barrier_store: {},
         active_symbols: {},

packages/stores/types.ts

@@ -451,6 +451,7 @@ type TUiStore = {
     openRealAccountSignup: (
         value: 'maltainvest' | 'svg' | 'add_crypto' | 'choose' | 'add_fiat' | 'set_currency' | 'manage'
     ) => void;
+    onChangeUiStore: ({ name, value }: { name: string; value: number | null }) => void;
     notification_messages_ui: React.ElementType;
     setCurrentFocus: (value: string | null) => void;
     setDarkMode: (is_dark_mode_on: boolean) => boolean;
@@ -603,17 +604,7 @@ type TContractTradeStore = {
     last_contract: TContractStore | Record<string, never>;
     markers_array: Array<{
         type: string;
-        contract_info: {
-            accu_barriers_difference:
-                | boolean
-                | {
-                      top: string;
-                      bottom: string;
-                      font: string;
-                  };
-            has_crossed_accu_barriers: boolean;
-            is_accumulator_trade_without_contract: boolean;
-        };
+        contract_info: TPortfolioPosition['contract_info'];
         key: string;
         price_array: [string, string];
         epoch_array: [number];
@@ -743,6 +734,8 @@ type TContractReplay = {
         is_digit_contract: boolean;
         is_ended: boolean;
     };
+    removeErrorMessage: () => void;
+    error_message: string;
 };
 
 /**

packages/trader/src/Modules/Contract/Components/Digits/digits.tsx

@@ -39,7 +39,7 @@ type TDigits = Pick<TContractStore, 'contract_info' | 'digits_info'> & {
     selected_digit?: TTraderStore['last_digit'];
     trade_type?: TTraderStore['contract_type'];
     tick?: TTickSpotData;
-    underlying: TTraderStore['symbol'];
+    underlying?: TTraderStore['symbol'];
 };
 type TTickStream = NonNullable<TContractStore['contract_info']['tick_stream']>[number];
 type TTickData =

packages/trader/src/Modules/Contract/Containers/contract-replay-widget.jsx → packages/trader/src/Modules/Contract/Containers/contract-replay-widget.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import Digits from 'Modules/Contract/Components/Digits';
 import InfoBox from 'Modules/Contract/Components/InfoBox';
-import BottomWidgets from '../../SmartChart/Components/bottom-widgets.jsx';
-import TopWidgets from '../../SmartChart/Components/top-widgets.jsx';
+import BottomWidgets from '../../SmartChart/Components/bottom-widgets';
+import TopWidgets from '../../SmartChart/Components/top-widgets';
 import { observer, useStore } from '@deriv/stores';
-import { useTraderStore } from 'Stores/useTraderStores';
 
 export const DigitsWidget = observer(() => {
     const { contract_replay } = useStore();
@@ -24,18 +23,10 @@ export const DigitsWidget = observer(() => {
 
 export const InfoBoxWidget = observer(() => {
     const { contract_replay } = useStore();
-    const { is_vanilla } = useTraderStore();
     const { contract_store, removeErrorMessage: removeError, error_message } = contract_replay;
     const { contract_info } = contract_store;
 
-    return (
-        <InfoBox
-            contract_info={contract_info}
-            error_message={error_message}
-            removeError={removeError}
-            is_vanilla={is_vanilla}
-        />
-    );
+    return <InfoBox contract_info={contract_info} error_message={error_message} removeError={removeError} />;
 });
 
 // Chart widgets passed into SmartCharts

packages/trader/src/Modules/Contract/Containers/contract-replay.jsx

@@ -30,7 +30,7 @@ import ChartLoader from 'App/Components/Elements/chart-loader';
 import ContractDrawer from 'App/Components/Elements/ContractDrawer';
 import UnsupportedContractModal from 'App/Components/Elements/Modals/UnsupportedContractModal';
 import { SmartChart } from 'Modules/SmartChart';
-import { ChartBottomWidgets, ChartTopWidgets, DigitsWidget, InfoBoxWidget } from './contract-replay-widget.jsx';
+import { ChartBottomWidgets, ChartTopWidgets, DigitsWidget, InfoBoxWidget } from './contract-replay-widget';
 import ChartMarker from 'Modules/SmartChart/Components/Markers/marker.jsx';
 import DelayedAccuBarriersMarker from 'Modules/SmartChart/Components/Markers/delayed-accu-barriers-marker';
 import allMarkers from 'Modules/SmartChart/Components/all-markers.jsx';

packages/trader/src/Modules/SmartChart/Components/bottom-widgets.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const BottomWidgets = ({ Widget }: { Widget: React.ReactNode }) => <div className='bottom-widgets'>{Widget}</div>;
+
+export default BottomWidgets;

packages/trader/src/Modules/SmartChart/Components/control-widgets.jsx → packages/trader/src/Modules/SmartChart/Components/control-widgets.tsx

@@ -13,8 +13,8 @@ const ControlWidgets = observer(() => {
             <DesktopWrapper>
                 <ChartMode
                     portalNodeId='modal_root'
-                    onChartType={type => updateChartType(type)}
-                    onGranularity={granularity => updateGranularity(granularity)}
+                    onChartType={(type: string) => updateChartType(type)}
+                    onGranularity={(granularity: number) => updateGranularity(granularity)}
                 />
                 <StudyLegend portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
                 <DrawTools portalNodeId='modal_root' />

packages/trader/src/Modules/SmartChart/Components/toolbar-widgets.jsx → packages/trader/src/Modules/SmartChart/Components/toolbar-widgets.tsx

@@ -1,11 +1,16 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { isDesktop, isMobile } from '@deriv/shared';
 import { ChartMode, DrawTools, Share, StudyLegend, Views, ToolbarWidget } from 'Modules/SmartChart';
 
-const ToolbarWidgets = ({ position, updateChartType, updateGranularity }) => {
+type TToolbarWidgets = {
+    position?: string;
+    updateChartType: (type: string) => void;
+    updateGranularity: (granularity: number) => void;
+};
+
+const ToolbarWidgets = ({ position, updateChartType, updateGranularity }: TToolbarWidgets) => {
     return (
-        <ToolbarWidget position={position || isMobile() ? 'bottom' : null}>
+        <ToolbarWidget position={position || (isMobile() ? 'bottom' : null)}>
             <ChartMode portalNodeId='modal_root' onChartType={updateChartType} onGranularity={updateGranularity} />
             {isDesktop() && <StudyLegend portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />}
             {isDesktop() && <Views portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />}
@@ -15,10 +20,4 @@ const ToolbarWidgets = ({ position, updateChartType, updateGranularity }) => {
     );
 };
 
-ToolbarWidgets.propTypes = {
-    position: PropTypes.string,
-    updateChartType: PropTypes.func,
-    updateGranularity: PropTypes.func,
-};
-
 export default React.memo(ToolbarWidgets);

packages/trader/src/Modules/SmartChart/Components/top-widgets.jsx → packages/trader/src/Modules/SmartChart/Components/top-widgets.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { DesktopWrapper, MobileWrapper, Text } from '@deriv/components';
@@ -7,6 +6,22 @@ import { isEnded, isAccumulatorContract, isDigitContract } from '@deriv/shared';
 import { ChartTitle } from 'Modules/SmartChart';
 import BuyToastNotification from './buy-toast-notification';
 import { observer, useStore } from '@deriv/stores';
+import { useTraderStore } from 'Stores/useTraderStores';
+
+type TTopWidgets = {
+    InfoBox?: React.ReactNode;
+    is_digits_widget_active?: boolean;
+    is_mobile?: boolean;
+    is_title_enabled?: boolean;
+    onSymbolChange?: ReturnType<typeof useTraderStore>['onChange'];
+    open?: boolean;
+    open_market?: {
+        category: string | null;
+        subcategory?: string | null;
+    };
+    theme?: string;
+    y_axis_width?: number;
+};
 
 const RecentTradeInfo = observer(() => {
     const { contract_trade } = useStore();
@@ -42,7 +57,7 @@ const TopWidgets = ({
     open_market,
     open,
     is_digits_widget_active,
-}) => {
+}: TTopWidgets) => {
     const ChartTitleLocal = (
         <ChartTitle
             open_market={open_market}
@@ -68,7 +83,7 @@ const TopWidgets = ({
                 {!is_digits_widget_active && <RecentTradeInfo />}
             </div>
         </div>,
-        document.getElementById('app_contents')
+        document.getElementById('app_contents') as Element | DocumentFragment
     );
 
     return (
@@ -80,16 +95,4 @@ const TopWidgets = ({
     );
 };
 
-TopWidgets.propTypes = {
-    InfoBox: PropTypes.node,
-    is_digits_widget_active: PropTypes.bool,
-    is_mobile: PropTypes.bool,
-    is_title_enabled: PropTypes.bool,
-    onSymbolChange: PropTypes.func,
-    open: PropTypes.bool,
-    open_market: PropTypes.object,
-    theme: PropTypes.string,
-    y_axis_width: PropTypes.number,
-};
-
 export default TopWidgets;