refactor: replace connect in Trader package v1.0 (#76)

packages/trader/src/App/app.tsx

@@ -9,6 +9,7 @@ import initStore from './init-store';
 import 'Sass/app.scss';
 import { TCoreStores } from '@deriv/stores/types';
 import TraderProviders from '../trader-providers';
+import { MobxContentProvider } from 'Stores/connect';
 
 type Apptypes = {
     passthrough: {
@@ -29,14 +30,16 @@ const App = ({ passthrough }: Apptypes) => {
     }, [root_store]);
 
     return (
-        <TraderProviders store={root_store}>
-            <Routes />
-            <TradeModals />
-            <NetworkStatusToastErrorPopup />
-            <TradeHeaderExtensions store={root_store} />
-            <TradeFooterExtensions />
-            <TradeSettingsExtensions store={root_store} />
-        </TraderProviders>
+        <MobxContentProvider store={root_store}>
+            <TraderProviders store={root_store}>
+                <Routes />
+                <TradeModals />
+                <NetworkStatusToastErrorPopup />
+                <TradeHeaderExtensions store={root_store} />
+                <TradeFooterExtensions />
+                <TradeSettingsExtensions store={root_store} />
+            </TraderProviders>
+        </MobxContentProvider>
     );
 };
 

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

@@ -1,27 +1,27 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import { observer, useStore } from '@deriv/stores';
 import { DesktopWrapper } from '@deriv/components';
 import { ChartMode, DrawTools, Share, StudyLegend, Views } from 'Modules/SmartChart';
 
-const ControlWidgets = ({ updateChartType, updateGranularity }) => (
-    <React.Fragment>
-        <DesktopWrapper>
-            <ChartMode
-                portalNodeId='modal_root'
-                onChartType={type => updateChartType(type)}
-                onGranularity={granularity => updateGranularity(granularity)}
-            />
-            <StudyLegend portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
-            <DrawTools portalNodeId='modal_root' />
-            <Views portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
-            <Share portalNodeId='modal_root' />
-        </DesktopWrapper>
-    </React.Fragment>
-);
-
-ControlWidgets.propTypes = {
-    updateChartType: PropTypes.func,
-    updateGranularity: PropTypes.func,
-};
+const ControlWidgets = observer(() => {
+    const {
+        contract_trade: { updateChartType, updateGranularity },
+    } = useStore();
+    return (
+        <React.Fragment>
+            <DesktopWrapper>
+                <ChartMode
+                    portalNodeId='modal_root'
+                    onChartType={type => updateChartType(type)}
+                    onGranularity={granularity => updateGranularity(granularity)}
+                />
+                <StudyLegend portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
+                <DrawTools portalNodeId='modal_root' />
+                <Views portalNodeId='modal_root' searchInputClassName='data-hj-whitelist' />
+                <Share portalNodeId='modal_root' />
+            </DesktopWrapper>
+        </React.Fragment>
+    );
+});
 
 export default ControlWidgets;

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Money, Text } from '@deriv/components';
-import { connect } from 'Stores/connect';
+import { useTraderStore } from 'Stores/useTraderStores';
+import { observer } from '@deriv/stores';
 import MultiplierAmountModal from 'Modules/Trading/Containers/Multiplier/multiplier-amount-modal.jsx';
 import RadioGroupOptionsModal from 'Modules/Trading/Containers/radio-group-options-modal.jsx';
 import MultipliersExpiration from 'Modules/Trading/Components/Form/TradeParams/Multiplier/expiration.jsx';
@@ -54,13 +55,16 @@ const AmountWidget = ({ amount, currency, expiration, is_crypto_multiplier }) =>
     );
 };
 
-export const MultiplierAmountWidget = connect(({ modules }) => ({
-    amount: modules.trade.amount,
-    expiration: modules.trade.expiration,
-    currency: modules.trade.currency,
-    is_crypto_multiplier: modules.trade.is_crypto_multiplier,
-    multiplier: modules.trade.multiplier,
-}))(AmountWidget);
+export const MultiplierAmountWidget = observer(() => {
+    const { amount, expiration, currency, is_crypto_multiplier, multiplier } = useTraderStore();
+    return {
+        amount,
+        expiration,
+        currency,
+        is_crypto_multiplier,
+        multiplier,
+    };
+})(AmountWidget);
 
 const RadioGroupOptionsWidget = ({ displayed_trade_param, modal_title }) => {
     const [is_open, setIsOpen] = React.useState(false);
@@ -81,12 +85,18 @@ const RadioGroupOptionsWidget = ({ displayed_trade_param, modal_title }) => {
     );
 };
 
-export const MultiplierOptionsWidget = connect(({ modules }) => ({
-    displayed_trade_param: `x${modules.trade.multiplier}`,
-    modal_title: localize('Multiplier'),
-}))(RadioGroupOptionsWidget);
+export const MultiplierOptionsWidget = observer(() => {
+    const { multiplier } = useTraderStore();
+    return {
+        displayed_trade_param: `x${multiplier}`,
+        modal_title: localize('Multiplier'),
+    };
+})(RadioGroupOptionsWidget);
 
-export const AccumulatorOptionsWidget = connect(({ modules }) => ({
-    displayed_trade_param: `${getGrowthRatePercentage(modules.trade.growth_rate)}%`,
-    modal_title: localize('Accumulate'),
-}))(RadioGroupOptionsWidget);
+export const AccumulatorOptionsWidget = observer(() => {
+    const { growth_rate } = useTraderStore();
+    return {
+        displayed_trade_param: `${getGrowthRatePercentage(growth_rate)}%`,
+        modal_title: localize('Accumulate'),
+    };
+})(RadioGroupOptionsWidget);

packages/trader/src/Modules/Trading/Containers/allow-equals.jsx

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import { useTraderStore } from 'Stores/useTraderStores';
+import { observer } from '@deriv/stores';
 import React from 'react';
 import { Checkbox, Text } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
-import { connect } from 'Stores/connect';
 
 const AllowEquals = ({ onChange, is_allow_equal, has_equals_only, className }) => {
     const handleOnChange = e => {
@@ -35,8 +36,11 @@ AllowEquals.propTypes = {
     onChange: PropTypes.func,
 };
 
-export default connect(({ modules }) => ({
-    is_allow_equal: !!modules.trade.is_equal,
-    has_equals_only: modules.trade.has_equals_only,
-    onChange: modules.trade.onChange,
-}))(AllowEquals);
+export default observer(() => {
+    const { is_equal, has_equals_only, onChange } = useTraderStore();
+    return {
+        is_allow_equal: !!is_equal,
+        has_equals_only,
+        onChange,
+    };
+})(AllowEquals);

packages/trader/src/Modules/Trading/Containers/chart-widgets.jsx

@@ -4,7 +4,6 @@ import Digits from 'Modules/Contract/Components/Digits';
 import AccumulatorsStats from 'Modules/Contract/Components/AccumulatorsStats';
 import { connect } from 'Stores/connect';
 import BottomWidgets from '../../SmartChart/Components/bottom-widgets.jsx';
-import ControlWidgets from '../../SmartChart/Components/control-widgets.jsx';
 import TopWidgets from '../../SmartChart/Components/top-widgets.jsx';
 import { symbolChange } from '../../SmartChart/Helpers/symbol';
 
@@ -76,10 +75,3 @@ export const ChartBottomWidgets = ({ digits, tick, show_accumulators_stats }) =>
         Widget={show_accumulators_stats ? <AccumulatorsStats /> : <DigitsWidget digits={digits} tick={tick} />}
     />
 );
-
-export const ChartControlWidgets = connect(({ contract_trade }) => ({
-    updateChartType: contract_trade.updateChartType,
-    updateGranularity: contract_trade.updateGranularity,
-}))(({ updateChartType, updateGranularity }) => (
-    <ControlWidgets updateChartType={updateChartType} updateGranularity={updateGranularity} />
-));

packages/trader/src/Modules/Trading/Containers/contract-type.jsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { MobileWrapper, usePrevious } from '@deriv/components';
 import { unsupported_contract_types_list } from '@deriv/shared';
@@ -8,18 +7,23 @@ import { ToastPopup } from 'Modules/Trading/Containers/toast-popup.jsx';
 import { getMarketNamesMap } from '../../../Constants';
 import ContractTypeWidget from '../Components/Form/ContractType';
 import { getAvailableContractTypes } from '../Helpers/contract-type';
-import { connect } from 'Stores/connect';
+import { useTraderStore } from 'Stores/useTraderStores';
+import { observer, useStore } from '@deriv/stores';
+
+const Contract = observer(() => {
+    const {
+        contract_type,
+        contract_types_list,
+        is_mobile_digit_view_selected: is_digit_view,
+        is_equal,
+        onChange,
+        symbol,
+    } = useTraderStore();
+    const {
+        common: { current_language },
+        client: { is_virtual },
+    } = useStore();
 
-const Contract = ({
-    contract_type,
-    contract_types_list,
-    is_digit_view,
-    is_equal,
-    is_virtual,
-    onChange,
-    symbol,
-    current_language,
-}) => {
     const list = getAvailableContractTypes(contract_types_list, unsupported_contract_types_list);
 
     const digits_message = localize('Last digit stats for latest 1000 ticks for {{ underlying_name }}', {
@@ -46,26 +50,6 @@ const Contract = ({
             />
         </React.Fragment>
     );
-};
-
-Contract.propTypes = {
-    contract_type: PropTypes.string,
-    contract_types_list: PropTypes.object,
-    is_digit_view: PropTypes.bool,
-    is_equal: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    is_virtual: PropTypes.bool,
-    onChange: PropTypes.func,
-    symbol: PropTypes.string,
-    current_language: PropTypes.string,
-};
+});
 
-export default connect(({ modules, client, common }) => ({
-    contract_type: modules.trade.contract_type,
-    contract_types_list: modules.trade.contract_types_list,
-    is_digit_view: modules.trade.is_mobile_digit_view_selected,
-    is_equal: modules.trade.is_equal,
-    is_virtual: client.is_virtual,
-    onChange: modules.trade.onChange,
-    symbol: modules.trade.symbol,
-    current_language: common.current_language,
-}))(Contract);
+export default Contract;

packages/trader/src/Modules/Trading/Containers/purchase.jsx

@@ -1,37 +1,37 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { isAccumulatorContract, isEmptyObject, isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import PurchaseButtonsOverlay from 'Modules/Trading/Components/Elements/purchase-buttons-overlay.jsx';
 import PurchaseFieldset from 'Modules/Trading/Components/Elements/purchase-fieldset.jsx';
 import { getContractTypePosition } from 'Constants/contract';
-import { connect } from 'Stores/connect';
+import { useTraderStore } from 'Stores/useTraderStores';
+import { observer, useStore } from '@deriv/stores';
 import ContractInfo from 'Modules/Trading/Components/Form/Purchase/contract-info.jsx';
 
-const Purchase = ({
-    active_positions,
-    basis,
-    contract_type,
-    currency,
-    has_cancellation,
-    is_accumulator,
-    is_market_closed,
-    is_mobile,
-    is_multiplier,
-    is_purchase_enabled,
-    is_trade_enabled,
-    is_vanilla,
-    onClickPurchase,
-    onHoverPurchase,
-    proposal_info,
-    purchase_info,
-    purchased_states_arr,
-    setPurchaseState,
-    symbol,
-    trade_types,
-    validation_errors,
-    vanilla_trade_type,
-}) => {
+const Purchase = observer(({ is_market_closed }) => {
+    const {
+        portfolio: { active_positions },
+        ui: { purchase_states: purchased_states_arr, is_mobile, setPurchaseState },
+    } = useStore();
+    const {
+        basis,
+        contract_type,
+        currency,
+        is_accumulator,
+        is_multiplier,
+        has_cancellation,
+        is_purchase_enabled,
+        is_vanilla,
+        onPurchase: onClickPurchase,
+        onHoverPurchase,
+        proposal_info,
+        purchase_info,
+        symbol,
+        validation_errors,
+        vanilla_trade_type,
+        trade_types,
+        is_trade_enabled,
+    } = useTraderStore();
     const is_high_low = /^high_low$/.test(contract_type.toLowerCase());
     const isLoading = info => {
         const has_validation_error = Object.values(validation_errors).some(e => e.length);
@@ -123,49 +123,6 @@ const Purchase = ({
         );
     }
     return components;
-};
+});
 
-Purchase.propTypes = {
-    active_positions: PropTypes.array,
-    basis: PropTypes.string,
-    currency: PropTypes.string,
-    has_cancellation: PropTypes.bool,
-    is_accumulator: PropTypes.bool,
-    is_multiplier: PropTypes.bool,
-    is_mobile: PropTypes.bool,
-    is_purchase_locked: PropTypes.bool,
-    is_trade_enabled: PropTypes.bool,
-    onClickPurchase: PropTypes.func,
-    onHoverPurchase: PropTypes.func,
-    proposal_info: PropTypes.object,
-    purchase_info: PropTypes.object,
-    purchased_states_arr: PropTypes.array,
-    setPurchaseState: PropTypes.func,
-    symbol: PropTypes.string,
-    trade_types: PropTypes.object,
-    validation_errors: PropTypes.object,
-};
-
-export default connect(({ modules, portfolio, ui }) => ({
-    active_positions: portfolio.active_positions,
-    basis: modules.trade.basis,
-    contract_type: modules.trade.contract_type,
-    currency: modules.trade.currency,
-    has_cancellation: modules.trade.has_cancellation,
-    is_accumulator: modules.trade.is_accumulator,
-    is_multiplier: modules.trade.is_multiplier,
-    is_purchase_enabled: modules.trade.is_purchase_enabled,
-    is_trade_enabled: modules.trade.is_trade_enabled,
-    is_vanilla: modules.trade.is_vanilla,
-    onClickPurchase: modules.trade.onPurchase,
-    onHoverPurchase: modules.trade.onHoverPurchase,
-    proposal_info: modules.trade.proposal_info,
-    purchase_info: modules.trade.purchase_info,
-    symbol: modules.trade.symbol,
-    trade_types: modules.trade.trade_types,
-    validation_errors: modules.trade.validation_errors,
-    vanilla_trade_type: modules.trade.vanilla_trade_type,
-    is_mobile: ui.is_mobile,
-    purchased_states_arr: ui.purchase_states,
-    setPurchaseState: ui.setPurchaseState,
-}))(Purchase);
+export default Purchase;