Hamza/93474/replace connect with use trader store

packages/trader/src/Modules/Trading/Components/Form/Purchase/cancel-deal-info.jsx

@@ -3,9 +3,11 @@ import React from 'react';
 import { Money } from '@deriv/components';
 import { isDesktop, isMobile, getDecimalPlaces } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
+import { observer } from '@deriv/stores';
+import { useTraderStore } from 'Stores/useTraderStores';
 
-const CancelDealInfo = ({ currency, has_cancellation, proposal_info }) => {
+const CancelDealInfo = observer(({ proposal_info }) => {
+    const { currency, has_cancellation } = useTraderStore();
     const { id, cancellation, has_error } = proposal_info;
     const error = has_error || !id;
     const [is_row_layout, setIsRowLayout] = React.useState(false);
@@ -50,9 +52,6 @@ const CancelDealInfo = ({ currency, has_cancellation, proposal_info }) => {
             )}
         </div>
     );
-};
+});
 
-export default connect(({ modules }) => ({
-    has_cancellation: modules.trade.has_cancellation,
-    currency: modules.trade.currency,
-}))(CancelDealInfo);
+export default CancelDealInfo;

packages/trader/src/Modules/Trading/Components/Form/TimePicker/trading-time-picker.jsx

@@ -1,19 +1,15 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'Stores/connect';
 import { setTime, toMoment } from '@deriv/shared';
 import TimePicker from 'App/Components/Form/TimePicker';
 import { getSelectedTime, getBoundaries } from 'Stores/Modules/Trading/Helpers/end-time';
+import { observer, useStore } from '@deriv/stores';
+import { useTraderStore } from 'Stores/useTraderStores';
 
-const TradingTimePicker = ({
-    expiry_date,
-    expiry_time,
-    market_close_times,
-    market_open_times,
-    onChange,
-    server_time,
-    is_market_closed,
-}) => {
+const TradingTimePicker = observer(() => {
+    const { common } = useStore();
+    const { server_time } = common;
+    const { expiry_date, expiry_time, market_open_times, market_close_times, onChange, is_market_closed } =
+        useTraderStore();
     const moment_expiry_date = toMoment(expiry_date);
     const market_open_datetimes = market_open_times.map(open_time => setTime(moment_expiry_date.clone(), open_time));
     const market_close_datetimes = market_close_times.map(close_time =>
@@ -48,26 +44,6 @@ const TradingTimePicker = ({
             selected_time={selected_time}
         />
     );
-};
+});
 
-TradingTimePicker.propTypes = {
-    expiry_date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    expiry_time: PropTypes.string,
-    is_market_closed: PropTypes.bool,
-    market_close_times: PropTypes.array,
-    market_open_times: PropTypes.array,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    server_time: PropTypes.object,
-};
-
-export default connect(({ modules, common }) => ({
-    duration_units_list: modules.trade.duration_units_list,
-    expiry_time: modules.trade.expiry_time,
-    expiry_date: modules.trade.expiry_date,
-    market_close_times: modules.trade.market_close_times,
-    market_open_times: modules.trade.market_open_times,
-    onChange: modules.trade.onChange,
-    server_time: common.server_time,
-    is_market_closed: modules.trade.is_market_closed,
-}))(TradingTimePicker);
+export default TradingTimePicker;

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Accumulator/__tests__/accumulator.spec.js

@@ -1,22 +1,26 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Accumulator from '../accumulator';
+import { mockStore } from '@deriv/stores';
+import TraderProviders from '../../../../../../../trader-providers';
 
 const mock_connect_props = {
-    accumulator_range_list: [0.01, 0.02, 0.03, 0.04, 0.05],
-    onChange: jest.fn(),
-    growth_rate: 0.01,
+    modules: {
+        trade: {
+            accumulator_range_list: [0.01, 0.02, 0.03, 0.04, 0.05],
+            onChange: jest.fn(),
+            growth_rate: 0.01,
+        },
+    },
 };
 
-jest.mock('Stores/connect.js', () => ({
-    __esModule: true,
-    default: 'mockedDefaultExport',
-    connect: () => Component => props => Component({ ...props, ...mock_connect_props }),
-}));
-
 describe('Accumulator', () => {
     it('should render with the initially selected 1% growth_rate', () => {
-        render(<Accumulator />);
+        render(<Accumulator />, {
+            wrapper: ({ children }) => (
+                <TraderProviders store={mockStore(mock_connect_props)}>{children}</TraderProviders>
+            ),
+        });
         expect(screen.getByText('Accumulate')).toBeInTheDocument();
         expect(screen.getByText('1%')).toBeInTheDocument();
         expect(screen.getByText('2%')).toBeInTheDocument();
@@ -27,8 +31,12 @@ describe('Accumulator', () => {
     });
 
     it('3% growth_rate should be selected when 0.03 is a currently selected and stored growth_rate value', () => {
-        mock_connect_props.growth_rate = 0.03;
-        render(<Accumulator />);
+        mock_connect_props.modules.trade.growth_rate = 0.03;
+        render(<Accumulator />, {
+            wrapper: ({ children }) => (
+                <TraderProviders store={mockStore(mock_connect_props)}>{children}</TraderProviders>
+            ),
+        });
         expect(screen.getByText('3%').getAttribute('class')).toContain('--selected');
         expect(screen.getByText('1%').getAttribute('class')).not.toContain('--selected');
     });

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Accumulator/__tests__/accumulators-info-display.spec.js

@@ -1,22 +1,26 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import AccumulatorsInfoDisplay from '../accumulators-info-display';
+import { mockStore } from '@deriv/stores';
+import TraderProviders from '../../../../../../../trader-providers';
 
 const mock_connect_props = {
-    currency: 'USD',
-    maximum_payout: 10000,
-    maximum_ticks: 250,
+    modules: {
+        trade: {
+            currency: 'USD',
+            maximum_payout: 10000,
+            maximum_ticks: 250,
+        },
+    },
 };
 
-jest.mock('Stores/connect.js', () => ({
-    __esModule: true,
-    default: 'mockedDefaultExport',
-    connect: () => Component => props => Component({ ...props, ...mock_connect_props }),
-}));
-
 describe('AccumulatorsInfoDisplay', () => {
     it('should render correct Maximum payout and Maximum ticks', () => {
-        render(<AccumulatorsInfoDisplay />);
+        render(<AccumulatorsInfoDisplay />, {
+            wrapper: ({ children }) => (
+                <TraderProviders store={mockStore(mock_connect_props)}>{children}</TraderProviders>
+            ),
+        });
         expect(screen.getByRole('group')).toHaveClass('trade-container__fieldset accu-info-display');
         expect(screen.getByText(/maximum payout/i)).toBeInTheDocument();
         expect(screen.getByText('10,000.00 USD')).toBeInTheDocument();

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Accumulator/accumulator.jsx

@@ -1,14 +1,14 @@
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { localize } from '@deriv/translations';
 import NumberSelector from 'App/Components/Form/number-selector.jsx';
 import Fieldset from 'App/Components/Form/fieldset.jsx';
-import { connect } from 'Stores/connect';
 import { getGrowthRatePercentage, getTickSizeBarrierPercentage } from '@deriv/shared';
 import classNames from 'classnames';
+import { observer } from '@deriv/stores';
+import { useTraderStore } from 'Stores/useTraderStores';
 
-const Accumulator = ({ accumulator_range_list, growth_rate, onChange, tick_size_barrier }) => {
+const Accumulator = observer(() => {
+    const { accumulator_range_list, growth_rate, onChange, tick_size_barrier } = useTraderStore();
     // splitting accumulator_range_list into rows containing 5 values each:
     const arr_arr_numbers = accumulator_range_list.reduce((acc, _el, index) => {
         if (index % 5 === 0) {
@@ -40,18 +40,6 @@ const Accumulator = ({ accumulator_range_list, growth_rate, onChange, tick_size_
             />
         </Fieldset>
     );
-};
+});
 
-Accumulator.propTypes = {
-    accumulator_range_list: MobxPropTypes.arrayOrObservableArray,
-    growth_rate: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    onChange: PropTypes.func,
-    tick_size_barrier: PropTypes.number,
-};
-
-export default connect(({ modules }) => ({
-    accumulator_range_list: modules.trade.accumulator_range_list,
-    growth_rate: modules.trade.growth_rate,
-    onChange: modules.trade.onChange,
-    tick_size_barrier: modules.trade.tick_size_barrier,
-}))(Accumulator);
+export default Accumulator;

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Accumulator/accumulators-amount-mobile.jsx

@@ -3,19 +3,16 @@ import React from 'react';
 import classNames from 'classnames';
 import { AMOUNT_MAX_LENGTH, getDecimalPlaces } from '@deriv/shared';
 import { MobileWrapper } from '@deriv/components';
-import { connect } from 'Stores/connect';
 import { localize } from '@deriv/translations';
 import LabeledQuantityInputMobile from '../../LabeledQuantityInputMobile';
+import { observer, useStore } from '@deriv/stores';
+import { useTraderStore } from 'Stores/useTraderStores';
 
-const AccumulatorsAmountMobile = ({
-    amount,
-    currency,
-    current_focus,
-    is_nativepicker,
-    is_single_currency,
-    onChange,
-    setCurrentFocus,
-}) => {
+const AccumulatorsAmountMobile = observer(({ is_nativepicker }) => {
+    const { ui, client } = useStore();
+    const { current_focus, setCurrentFocus } = ui;
+    const { is_single_currency } = client;
+    const { amount, currency, onChange } = useTraderStore();
     return (
         <>
             <MobileWrapper>
@@ -46,23 +43,10 @@ const AccumulatorsAmountMobile = ({
             </MobileWrapper>
         </>
     );
-};
+});
 
 AccumulatorsAmountMobile.propTypes = {
-    amount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    currency: PropTypes.string,
-    current_focus: PropTypes.string,
     is_nativepicker: PropTypes.bool,
-    is_single_currency: PropTypes.bool,
-    onChange: PropTypes.func,
-    setCurrentFocus: PropTypes.func,
 };
 
-export default connect(({ modules, client, ui }) => ({
-    amount: modules.trade.amount,
-    currency: modules.trade.currency,
-    current_focus: ui.current_focus,
-    is_single_currency: client.is_single_currency,
-    onChange: modules.trade.onChange,
-    setCurrentFocus: ui.setCurrentFocus,
-}))(AccumulatorsAmountMobile);
+export default AccumulatorsAmountMobile;

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Accumulator/accumulators-info-display.jsx

@@ -1,12 +1,14 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { localize } from '@deriv/translations';
 import Fieldset from 'App/Components/Form/fieldset.jsx';
-import { connect } from 'Stores/connect';
 import { Money, Text } from '@deriv/components';
 import classNames from 'classnames';
+import { observer } from '@deriv/stores';
+import { useTraderStore } from 'Stores/useTraderStores';
+
+const AccumulatorsInfoDisplay = observer(() => {
+    const { currency, maximum_payout, maximum_ticks } = useTraderStore();
 
-const AccumulatorsInfoDisplay = ({ currency, maximum_payout, maximum_ticks }) => {
     const labels = [localize('Maximum payout'), localize('Maximum ticks')].map((label, index) => (
         <Text key={index} size='xxs' weight='bold'>
             {label}
@@ -34,16 +36,6 @@ const AccumulatorsInfoDisplay = ({ currency, maximum_payout, maximum_ticks }) =>
             ))}
         </Fieldset>
     );
-};
-
-AccumulatorsInfoDisplay.propTypes = {
-    currency: PropTypes.string,
-    maximum_payout: PropTypes.number,
-    maximum_ticks: PropTypes.number,
-};
+});
 
-export default connect(({ modules }) => ({
-    currency: modules.trade.currency,
-    maximum_payout: modules.trade.maximum_payout,
-    maximum_ticks: modules.trade.maximum_ticks,
-}))(AccumulatorsInfoDisplay);
+export default AccumulatorsInfoDisplay;