Kate / DTRA-353 /TS migration of trader package 4 (deriv-com#9657)

* fix: ts-migrate trade-params * fix: sonarcloud * fix: pull in changes from tech debt 2 package * fix: resolve comments * fix: move type to common prop types * fix: move type to common prop types * fix: move type to common prop types file * fix: resolve comments * Kate / DTRA-321 / TS migration of trade-params and trade-params-mobile (#6) * refactor: migrate trade params and started mobile version * refactor: ts migration of trade params mobile * chore: add nessasary prop * refactor: apply suggestions * chore: change todo text * refactor: add import * fix: circleCI error * fix: ts migrate trade-footer-extensions.jsx * fix: fix import * fix: remove progress-slider-stream since its not used * fix: resolve comments * fix: reset with master * fix: reset with master * fix: reset with master * fix: reset with master * fix: circleCI * fix: togglePositions folder * fix: dtra-346 marketisclosed and marketcountdowntimer migration * fix: bug * Maryia/dtra-270/TS migration: trade-store (#5) * chore: prepare for migration * chore: add more types to trade-store * chore: add more types to trade-store * chore: add more types to trade-store * chore: add more types to trade-store * chore: migrated trade-store to ts * chore: improve types in trade-store * fix: type * revert: hooks package installation * refactor: address review * fix: resolve comments * feat: add ts migartion of store * refactor: add prev changes * chore: empty commit * fix: add lost mocked * fix: resolve comments * Kate / DTRA-354 / Components/Form/Purchase files in Trader package (#21) * refactor: ts migartion of purchase files * refactor: remove duplicated types * refactor: apply suggestions * maryia/fix: sonarcloud warnings (#7) * fix: sonarcloud warnings * fix: Unexpected end of JSON input * fix: bug * fix: sonarcloud * fix: reorder props * fix: test cases * fix: coveralls * fix: coveralls * fix: this component doesnt exist anymore, hence test was also removed * henry/dtra-356/fix: ts-migration-digitsJSX (#24) * fix: initial commit * fix: ts migrate digits JSX * fix: small type change * fix: comment * chore: removed unused state * Maryia/dtra-355/Migrate ContractDrawer files to TS (#22) * feat: migrated swipeable-components to TS * feat: migrated market-closed-contract-overlay & index to TS * chore: migrated contract-drawer-card.tsx to ts * build: fix type * chore: migrated contract-drawer to ts * chore: fixed existing types in digits and logic * chore: sort types properties in alphabetical order * Kate/dtra 357/ts contract audit files (#23) * refactor: apply suggestion from prev pr * refactor: start ts migration of contract audit * chore: change comment * refactor: ts of contract audit item * refactor: ts migration of contract details * refactor: ts migration of contract history * refactor: add preprepared types * refactor: tests * chore: apply nit * refactor: apply suggestions * refactor: apply suggestions * chore: fix of sonar cloud * Maryia/dtra-373/remove localize from ContractCardHeader component (#25) * refactor: remove localize from contract-card-header * refactor: use Localize component instead of localize helper * build: install RTL deps in shared package * fix: sonar cloud codesmells * fix: build TS errors (#32) * refactor: tests * fix: more conflicts * chore: empty commit * maryia/fix: type issues on package 4 (#41) * fix: type issues * chore: file change from package 3 * chore: keep small changes from package 3 * chore: removed unnecessary todo comment * refactor: apply suggestions * fix: types in tests * fix: test extention * fix: wallet file * fix: add turbos to types --------- Co-authored-by: Henry Hein <henry@regentmarkets.com> Co-authored-by: Maryia <103177211+maryia-deriv@users.noreply.github.com> Co-authored-by: henry-deriv <118344354+henry-deriv@users.noreply.github.com>
mahdiyeh-deriv · Oct 4, 2023 · 4e03c04 · 4e03c04
1 parent 184a834
commit 4e03c04
Show file tree

Hide file tree

Showing 112 changed files with 1,910 additions and 1,628 deletions.
diff --git a/packages/analytics/src/index.ts b/packages/analytics/src/index.ts
@@ -1 +1,2 @@
 export { default as RudderStack } from './rudderstack';
+export type { TEvents } from './rudderstack';
diff --git a/packages/analytics/src/rudderstack.ts b/packages/analytics/src/rudderstack.ts
@@ -133,7 +133,7 @@ type IdentifyAction = {
     language: string;
 };
 
-type TEvents = {
+export type TEvents = {
     ce_chart_types_form: ChartTypesFormAction;
     ce_indicators_types_form: IndicatorsTypesFormAction;
     ce_market_types_form: MarketTypesFormAction;

diff --git a/packages/cashier/src/containers/routes/error-component/__tests__/error-component.spec.tsx b/packages/cashier/src/containers/routes/error-component/__tests__/error-component.spec.tsx
@@ -27,7 +27,6 @@ describe('<ErrorComponent/>', () => {
         redirect_label: 'test_label',
         should_clear_error_on_click: true,
         should_show_refresh: true,
-        app_routing_history: [{ pathname: '/cashier' }],
         redirectOnClick: jest.fn(),
         setError: jest.fn(),
     };

diff --git a/packages/cashier/src/containers/routes/error-component/error-component.tsx b/packages/cashier/src/containers/routes/error-component/error-component.tsx
@@ -2,8 +2,12 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { PageErrorContainer } from '@deriv/components';
 import { routes } from '@deriv/shared';
-import { TRootStore } from '../../../types';
 import { localize, Localize } from '@deriv/translations';
+import { TCoreStores } from '@deriv/stores/types';
+
+type TErrorComponentProps = TCoreStores['common']['error'] & {
+    setError?: (has_error: boolean, error: React.ReactNode | null) => void;
+};
 
 const ErrorComponent = ({
     header,
@@ -14,7 +18,7 @@ const ErrorComponent = ({
     setError,
     should_clear_error_on_click,
     should_show_refresh = true,
-}: TRootStore['common']['error']) => {
+}: TErrorComponentProps) => {
     const history = useHistory();
 
     React.useEffect(() => {

diff --git a/packages/components/src/components/collapsible/arrow-button.tsx b/packages/components/src/components/collapsible/arrow-button.tsx
@@ -13,7 +13,7 @@ type TArrowButton = {
     is_open?: boolean;
     onClick: () => void;
     title?: string;
-    position: 'top' | 'bottom';
+    position?: 'top' | 'bottom';
 };
 
 const IconArrow = ({ className }: { className?: string }) => (

diff --git a/...ges/components/src/components/contract-card/contract-card-items/accumulator-card-body.tsx b/...ges/components/src/components/contract-card/contract-card-items/accumulator-card-body.tsx
@@ -24,7 +24,7 @@ type TAccumulatorCardBody = {
     getContractById: React.ComponentProps<typeof ToggleCardDialog>['getContractById'];
     indicative?: number;
     is_sold: boolean;
-    onMouseLeave: () => void;
+    onMouseLeave?: () => void;
     removeToast: (toast_id: string) => void;
     setCurrentFocus: (value: string) => void;
     status?: string;

diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx
@@ -31,11 +31,11 @@ export type TGeneralContractCardBodyProps = {
     has_progress_slider: boolean;
     is_mobile: boolean;
     is_sold: boolean;
-    onMouseLeave: () => void;
+    onMouseLeave?: () => void;
     removeToast: (toast_id: string) => void;
     setCurrentFocus: (name: string) => void;
     status?: string;
-    toggleCancellationWarning: () => void;
+    toggleCancellationWarning: (state_change?: boolean) => void;
     progress_slider?: React.ReactNode;
     is_positions?: boolean;
 };

diff --git a/...ages/components/src/components/contract-card/contract-card-items/contract-card-footer.tsx b/...ages/components/src/components/contract-card/contract-card-items/contract-card-footer.tsx
@@ -11,13 +11,13 @@ export type TCardFooterPropTypes = {
     contract_info: TContractInfo;
     getCardLabels: TGetCardLables;
     is_multiplier?: boolean;
-    is_positions: 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;
+    should_show_transition?: boolean;
 };
 
 const CardFooter = ({
@@ -32,7 +32,7 @@ const CardFooter = ({
     server_time,
     should_show_transition,
 }: TCardFooterPropTypes) => {
-    const { in_prop } = useNewRowTransition(should_show_transition);
+    const { in_prop } = useNewRowTransition(!!should_show_transition);
 
     const is_valid_to_cancel = isValidToCancel(contract_info);
 

diff --git a/...ages/components/src/components/contract-card/contract-card-items/contract-card-header.tsx b/...ages/components/src/components/contract-card/contract-card-items/contract-card-header.tsx
@@ -1,17 +1,16 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
-import { localize } from '@deriv/translations';
 import {
     isHighLow,
     getCurrentTick,
     getGrowthRatePercentage,
-    getContractSubtype,
     isAccumulatorContract,
     isSmartTraderContract,
     isBot,
     isMobile,
     isTurbosContract,
+    getLocalizedTurbosSubtype,
 } from '@deriv/shared';
 import ContractTypeCell from './contract-type-cell';
 import Button from '../../button';
@@ -83,8 +82,7 @@ const ContractCardHeader = ({
             },
             {
                 is_param_displayed: is_turbos,
-                displayed_param:
-                    getContractSubtype(contract_type || '') === 'Long' ? localize('Long') : localize('Short'),
+                displayed_param: getLocalizedTurbosSubtype(contract_type),
             },
         ],
         [multiplier, growth_rate, is_accumulator, is_turbos, contract_type]

diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-type-cell.tsx b/packages/components/src/components/contract-card/contract-card-items/contract-type-cell.tsx
@@ -9,7 +9,7 @@ export type TContractTypeCellProps = {
     is_high_low: boolean;
     multiplier?: number;
     type?: string;
-    displayed_trade_param?: string;
+    displayed_trade_param?: React.ReactNode;
 };
 
 const ContractTypeCell = ({

diff --git a/...ages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx b/...ages/components/src/components/contract-card/contract-card-items/contract-update-form.tsx
@@ -33,7 +33,7 @@ export type TContractUpdateFormProps = Pick<
     contract: TContractStore;
     error_message_alignment?: string;
     getCardLabels: TGetCardLables;
-    onMouseLeave: () => void;
+    onMouseLeave?: () => void;
     removeToast: (toast_id: string) => void;
     setCurrentFocus: (name: string | null) => void;
     status: string;

diff --git a/packages/components/src/components/contract-card/contract-card.tsx b/packages/components/src/components/contract-card/contract-card.tsx
@@ -14,15 +14,15 @@ import { TGetCardLables, TGetContractPath } from '../types';
 type TContractCardProps = {
     contract_info: TContractInfo;
     getCardLabels: TGetCardLables;
-    getContractPath: TGetContractPath;
+    getContractPath?: TGetContractPath;
     is_multiplier: boolean;
-    is_positions: boolean;
-    is_unsupported: boolean;
-    onClickRemove: (contract_id: number) => void;
+    is_positions?: boolean;
+    is_unsupported?: boolean;
+    onClickRemove?: (contract_id?: number) => void;
     profit_loss: number;
-    result: string;
+    result?: string;
     should_show_result_overlay: boolean;
-    toggleUnsupportedContractModal: (is_unsupported_contract_modal_visible: boolean) => void;
+    toggleUnsupportedContractModal?: (is_unsupported_contract_modal_visible: boolean) => void;
 };
 
 const ContractCard = ({
@@ -53,7 +53,7 @@ const ContractCard = ({
                         is_multiplier={is_multiplier}
                         is_visible={!!contract_info.is_sold}
                         onClickRemove={onClickRemove}
-                        onClick={() => toggleUnsupportedContractModal(true)}
+                        onClick={() => toggleUnsupportedContractModal?.(true)}
                         result={result || fallback_result}
                         is_positions={is_positions}
                     />

diff --git a/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx b/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx
@@ -8,13 +8,13 @@ import { TGetCardLables, TGetContractPath } from '../../types';
 type TResultOverlayProps = {
     contract_id?: number;
     getCardLabels: TGetCardLables;
-    getContractPath: TGetContractPath;
+    getContractPath?: TGetContractPath;
     is_multiplier?: boolean;
-    is_positions: boolean;
-    is_unsupported: boolean;
+    is_positions?: boolean;
+    is_unsupported?: boolean;
     is_visible: boolean;
     onClick: () => void;
-    onClickRemove: (contract_id: number) => void;
+    onClickRemove?: (contract_id?: number) => void;
     result: string;
 };
 
@@ -88,7 +88,7 @@ const ResultOverlay = ({
                         <span
                             id={`dc_contract_card_${contract_id}_result_close_icon`}
                             className='dc-result__close-btn'
-                            onClick={() => onClickRemove(Number(contract_id))}
+                            onClick={() => onClickRemove?.(contract_id)}
                         />
                     )}
                     {getContractPath && (

diff --git a/packages/components/src/components/div100vh-container/div100vh-container.tsx b/packages/components/src/components/div100vh-container/div100vh-container.tsx
@@ -20,7 +20,7 @@ type TDiv100vhContainer = {
     is_bypassed?: boolean;
     is_disabled?: boolean;
     max_height_offset?: string;
-    className: string;
+    className?: string;
     max_autoheight_offset?: string;
 };
 

diff --git a/packages/components/src/components/input-field/input-field.tsx b/packages/components/src/components/input-field/input-field.tsx
@@ -14,43 +14,43 @@ export type TButtonType = 'button' | 'submit' | 'reset';
 // supports more than two different types of 'value' as a prop.
 // Quick Solution - Pass two different props to input field.
 type TInputField = {
-    ariaLabel: string;
+    ariaLabel?: string;
     checked?: boolean;
     className?: string;
     classNameDynamicSuffix?: string;
     classNameInlinePrefix?: string;
     classNameInput?: string;
     classNamePrefix?: string;
     classNameWrapper?: string; // CSS class for the component wrapper
-    currency: string;
-    current_focus?: string | null;
+    currency?: string;
+    current_focus: string | null;
     data_testid?: string;
     data_tip?: string;
     data_value?: string;
     decimal_point_change?: number; // Specify which decimal point must be updated when the increment/decrement button is pressed
     error_message_alignment?: string;
     error_messages?: string[];
     format?: (new_value?: string) => string;
-    fractional_digits: number;
+    fractional_digits?: number;
     helper?: string;
     icon?: React.ElementType;
     id?: string;
     increment_button_type?: TButtonType;
     inline_prefix?: string;
     inputmode?: TInputMode;
-    is_autocomplete_disabled: boolean;
+    is_autocomplete_disabled?: boolean;
     is_disabled?: boolean;
-    is_error_tooltip_hidden: boolean;
+    is_error_tooltip_hidden?: boolean;
     is_float: boolean;
-    is_hj_whitelisted: boolean;
+    is_hj_whitelisted?: boolean;
     is_incrementable_on_long_press?: boolean;
-    is_incrementable: boolean;
-    is_negative_disabled: boolean;
+    is_incrementable?: boolean;
+    is_negative_disabled?: boolean;
     is_read_only?: boolean;
     is_signed?: boolean;
     is_unit_at_right?: boolean;
     label?: string;
-    max_length: number;
+    max_length?: number;
     max_value?: number;
     min_value?: number;
     name: string;

diff --git a/packages/components/src/components/input-field/input.tsx b/packages/components/src/components/input-field/input.tsx
@@ -4,7 +4,7 @@ import { getCurrencyDisplayCode } from '@deriv/shared';
 import { TInputMode } from './input-field';
 
 type TInputProps = {
-    ariaLabel: string;
+    ariaLabel?: string;
     changeValue: (
         e: React.ChangeEvent<HTMLInputElement>,
         callback?: (evt: React.ChangeEvent<HTMLInputElement>) => void
@@ -13,22 +13,22 @@ type TInputProps = {
     className?: string;
     classNameDynamicSuffix?: string;
     classNameInlinePrefix?: string;
-    current_focus?: string | null;
+    current_focus: string | null;
     data_testid?: string;
     data_tip?: string;
     data_value?: number | string;
     display_value: number | string;
-    fractional_digits: number;
+    fractional_digits?: number;
     has_error?: boolean;
     id?: string;
     inline_prefix?: string;
     inputmode?: TInputMode;
-    is_autocomplete_disabled: boolean;
+    is_autocomplete_disabled?: boolean;
     is_disabled?: boolean;
     is_hj_whitelisted: boolean;
-    is_incrementable: boolean;
+    is_incrementable?: boolean;
     is_read_only: boolean;
-    max_length: number;
+    max_length?: number;
     name: string;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onClick?: React.MouseEventHandler<HTMLInputElement>;
@@ -128,7 +128,7 @@ const Input = ({
                 data-value={data_value}
                 disabled={!!is_disabled}
                 id={id}
-                maxLength={fractional_digits ? max_length + fractional_digits + 1 : max_length}
+                maxLength={fractional_digits && max_length ? max_length + fractional_digits + 1 : max_length}
                 name={name}
                 onBlur={onBlurHandler}
                 onChange={onChange}

diff --git a/packages/components/src/components/money/money.tsx b/packages/components/src/components/money/money.tsx
@@ -19,8 +19,8 @@ const Money = ({
     show_currency = false,
 }: Partial<TMoneyProps>) => {
     let sign = '';
-    if (+amount && (amount < 0 || has_sign)) {
-        sign = amount > 0 ? '+' : '-';
+    if (Number(amount) && (Number(amount) < 0 || has_sign)) {
+        sign = Number(amount) > 0 ? '+' : '-';
     }
 
     // if it's formatted already then don't make any changes unless we should remove extra -/+ signs

diff --git a/packages/components/src/components/numpad/numpad.tsx b/packages/components/src/components/numpad/numpad.tsx
@@ -12,20 +12,20 @@ type TNumpad = {
     is_regular?: boolean;
     is_currency?: boolean;
     is_submit_disabled?: boolean;
-    label: string;
+    label?: string;
     reset_press_interval: number;
     reset_value: string;
-    max: number;
-    min: number;
+    max?: number;
+    min?: number;
     pip_size: number;
     onSubmit: (param: number | string) => void;
-    v: string;
+    v?: string;
     render?: (props: { value: string; className: string }) => React.ReactNode;
     submit_label: string;
-    value: string;
-    format: (v: string) => number;
+    value: string | number;
+    format?: (v: string) => number | string;
     onValueChange: (val: number | string) => void;
-    onValidate: (default_value: number | string) => string | undefined;
+    onValidate: (default_value: number | string) => boolean | 'error';
 };
 
 const concatenate = (number: string | number, default_value: string | number) =>
@@ -71,7 +71,7 @@ const Numpad = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [default_value, value]);
 
-    const updateValue = (val: string) => {
+    const updateValue = (val: string | number) => {
         setValue(val);
         if (onValueChange) onValueChange(val);
     };

diff --git a/packages/components/src/components/positions-drawer-card/positions-drawer-card.tsx b/packages/components/src/components/positions-drawer-card/positions-drawer-card.tsx
@@ -33,7 +33,7 @@ type TPositionsDrawerCardProps = {
     profit_loss?: number;
     onClickCancel: (contract_id?: number) => void;
     onClickSell: (contract_id?: number) => void;
-    onClickRemove: (contract_id: number) => void;
+    onClickRemove: (contract_id?: number) => void;
     onFooterEntered?: () => void;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;