From 58ff887baf0a9c6fd73ba2e6d4ee2284c4378a6e Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 25 Apr 2023 09:49:47 +0800 Subject: [PATCH 1/5] refactor: replace connect in top-widgets_cancel-deal-mobile_risk-management-info_mobile-widget --- .../SmartChart/Components/top-widgets.jsx | 14 +- .../Multiplier/cancel-deal-mobile.jsx | 210 ++++++++---------- .../Multiplier/risk-management-info.jsx | 37 ++- .../Components/Elements/mobile-widget.jsx | 53 ++--- 4 files changed, 139 insertions(+), 175 deletions(-) diff --git a/packages/trader/src/Modules/SmartChart/Components/top-widgets.jsx b/packages/trader/src/Modules/SmartChart/Components/top-widgets.jsx index 9a7840505bab..1f6425d37b61 100644 --- a/packages/trader/src/Modules/SmartChart/Components/top-widgets.jsx +++ b/packages/trader/src/Modules/SmartChart/Components/top-widgets.jsx @@ -4,11 +4,14 @@ import ReactDOM from 'react-dom'; import { DesktopWrapper, MobileWrapper, Text } from '@deriv/components'; import { localize } from '@deriv/translations'; import { isEnded, isAccumulatorContract, isDigitContract } from '@deriv/shared'; -import { connect } from 'Stores/connect'; import { ChartTitle } from 'Modules/SmartChart'; import BuyToastNotification from './buy-toast-notification'; +import { observer, useStore } from '@deriv/stores'; + +const RecentTradeInfo = observer(() => { + const { contract_trade } = useStore(); + const { granularity, markers_array } = contract_trade; -const TradeInfo = ({ markers_array, granularity }) => { const latest_tick_contract = markers_array[markers_array.length - 1]; if ( !latest_tick_contract || @@ -27,12 +30,7 @@ const TradeInfo = ({ markers_array, granularity }) => { {localize('Tick')} {current_tick}/{tick_count} ); -}; - -const RecentTradeInfo = connect(({ contract_trade }) => ({ - granularity: contract_trade.granularity, - markers_array: contract_trade.markers_array, -}))(TradeInfo); +}); const TopWidgets = ({ InfoBox, diff --git a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx index aec1e6044a68..2ac597cf40b7 100644 --- a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx +++ b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/cancel-deal-mobile.jsx @@ -1,124 +1,108 @@ import React from 'react'; import { Checkbox, RadioGroup, Dialog, Popover, Text } from '@deriv/components'; import { localize, Localize } from '@deriv/translations'; -import { connect } from 'Stores/connect'; import { onToggleCancellation, onChangeCancellationDuration } from 'Stores/Modules/Trading/Helpers/multiplier'; import Fieldset from 'App/Components/Form/fieldset.jsx'; +import { useTraderStore } from 'Stores/useTraderStores'; +import { observer, useStore } from '@deriv/stores'; -const DealCancellationWarning = ({ - disableApp, - enableApp, - is_visible, - onConfirm, - onCancel, - should_show_cancellation_warning, - toggleCancellationWarning, -}) => ( - - - - - toggleCancellationWarning()} - name={'should_show_cancellation_warning'} - label={localize("Don't show this again")} - /> - -); +const DealCancellationWarningDialog = observer(({ is_visible, onConfirm, onCancel }) => { + const { ui } = useStore(); + const { disableApp, enableApp, should_show_cancellation_warning, toggleCancellationWarning } = ui; + return ( + + + + + toggleCancellationWarning()} + name={'should_show_cancellation_warning'} + label={localize("Don't show this again")} + /> + + ); +}); -const DealCancellationWarningDialog = connect(({ ui }) => ({ - disableApp: ui.disableApp, - enableApp: ui.enableApp, - is_loading: ui.is_loading, - should_show_cancellation_warning: ui.should_show_cancellation_warning, - toggleCancellationWarning: ui.toggleCancellationWarning, -}))(DealCancellationWarning); +const CancelDeal = observer( + ({ has_cancellation, has_take_profit, has_stop_loss, onChangeMultiple, cancellation_duration }) => { + const { ui } = useStore(); + const { cancellation_range_list } = useTraderStore(); + const { should_show_cancellation_warning } = ui; -const CancelDeal = ({ - has_cancellation, - has_take_profit, - has_stop_loss, - onChangeMultiple, - cancellation_duration, - cancellation_range_list, - should_show_cancellation_warning, -}) => { - const [is_deal_cancel_warning_visible, setDealCancelWarningVisibility] = React.useState(false); + const [is_deal_cancel_warning_visible, setDealCancelWarningVisibility] = React.useState(false); - const canToggleDealCancel = () => { - const should_show_popover = (has_take_profit || has_stop_loss) && should_show_cancellation_warning; - if (should_show_popover) setDealCancelWarningVisibility(should_show_popover); - return !should_show_popover; - }; + const canToggleDealCancel = () => { + const should_show_popover = (has_take_profit || has_stop_loss) && should_show_cancellation_warning; + if (should_show_popover) setDealCancelWarningVisibility(should_show_popover); + return !should_show_popover; + }; - return ( - - setDealCancelWarningVisibility(false)} - onConfirm={() => { - setDealCancelWarningVisibility(false); - onToggleCancellation({ has_cancellation, onChangeMultiple }); - }} - /> -
-
- { - if (canToggleDealCancel()) { - onToggleCancellation({ has_cancellation, onChangeMultiple }); - } - }} - name='has_cancellation' - label={localize('Deal cancellation')} - defaultChecked={has_cancellation} - /> - -
- {has_cancellation && ( - - onChangeCancellationDuration({ event, onChangeMultiple })} - > - {cancellation_range_list.map(({ text, value }) => ( - - ))} - - - )} -
- - ); -}; + return ( + + setDealCancelWarningVisibility(false)} + onConfirm={() => { + setDealCancelWarningVisibility(false); + onToggleCancellation({ has_cancellation, onChangeMultiple }); + }} + /> +
+
+ { + if (canToggleDealCancel()) { + onToggleCancellation({ has_cancellation, onChangeMultiple }); + } + }} + name='has_cancellation' + label={localize('Deal cancellation')} + defaultChecked={has_cancellation} + /> + +
+ {has_cancellation && ( + + onChangeCancellationDuration({ event, onChangeMultiple })} + > + {cancellation_range_list.map(({ text, value }) => ( + + ))} + + + )} +
+ + ); + } +); -export default connect(({ ui, modules }) => ({ - cancellation_range_list: modules.trade.cancellation_range_list, - should_show_cancellation_warning: ui.should_show_cancellation_warning, -}))(CancelDeal); +export default CancelDeal; diff --git a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.jsx b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.jsx index bc7b6b77cccd..6ba2bccedcb7 100644 --- a/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.jsx +++ b/packages/trader/src/Modules/Trading/Components/Elements/Multiplier/risk-management-info.jsx @@ -1,19 +1,21 @@ import React from 'react'; import { Money } from '@deriv/components'; import { localize } from '@deriv/translations'; -import { connect } from 'Stores/connect'; import RiskManagementDialog from 'Modules/Trading/Containers/Multiplier/risk-management-dialog.jsx'; +import { useTraderStore } from 'Stores/useTraderStores'; +import { observer } from '@deriv/stores'; -const RiskManagementInfo = ({ - currency, - stop_loss, - take_profit, - has_take_profit, - has_stop_loss, - cancellation_duration, - cancellation_range_list, - has_cancellation, -}) => { +const RiskManagementInfo = observer(() => { + const { + currency, + stop_loss, + has_stop_loss, + take_profit, + has_take_profit, + cancellation_duration, + cancellation_range_list, + has_cancellation, + } = useTraderStore(); const [is_dialog_open, setDialogOpen] = React.useState(false); const has_risk_management = has_take_profit || has_stop_loss || has_cancellation; const toggleDialog = () => { @@ -63,15 +65,6 @@ const RiskManagementInfo = ({ ); -}; +}); -export default connect(({ modules }) => ({ - currency: modules.trade.currency, - stop_loss: modules.trade.stop_loss, - has_stop_loss: modules.trade.has_stop_loss, - take_profit: modules.trade.take_profit, - has_take_profit: modules.trade.has_take_profit, - cancellation_duration: modules.trade.cancellation_duration, - cancellation_range_list: modules.trade.cancellation_range_list, - has_cancellation: modules.trade.has_cancellation, -}))(RiskManagementInfo); +export default RiskManagementInfo; diff --git a/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.jsx b/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.jsx index e681154c7e5c..62db631a3d19 100644 --- a/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.jsx +++ b/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.jsx @@ -1,27 +1,29 @@ import React from 'react'; import { Money } from '@deriv/components'; import { localize, Localize } from '@deriv/translations'; -import { connect } from 'Stores/connect'; import { getExpiryType, getDurationMinMaxValues, getLocalizedBasis } from '@deriv/shared'; import { MultiplierAmountWidget } from 'Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx'; import TradeParamsModal from '../../Containers/trade-params-mobile.jsx'; +import { observer, useStore } from '@deriv/stores'; +import { useTraderStore } from 'Stores/useTraderStores'; + +const MobileWidget = observer(({ is_collapsed, toggleDigitsWidget }) => { + const trade_store = useTraderStore(); + const { ui } = useStore(); + const { + amount, + basis, + currency, + duration, + duration_min_max, + duration_unit, + form_components, + is_multiplier, + last_digit, + onChange, + } = trade_store; + const { onChangeUiStore } = ui; -const MobileWidget = ({ - amount, - basis, - currency, - duration, - duration_min_max, - duration_unit, - form_components, - is_collapsed, - is_multiplier, - last_digit, - onChange, - onChangeUiStore, - toggleDigitsWidget, - trade_store, -}) => { const [is_open, setIsOpen] = React.useState(false); React.useEffect(() => { @@ -104,19 +106,6 @@ const MobileWidget = ({ )} ); -}; +}); -export default connect(({ modules, ui }) => ({ - amount: modules.trade.amount, - basis: modules.trade.basis, - currency: modules.trade.currency, - duration: modules.trade.duration, - duration_min_max: modules.trade.duration_min_max, - duration_unit: modules.trade.duration_unit, - form_components: modules.trade.form_components, - is_multiplier: modules.trade.is_multiplier, - last_digit: modules.trade.last_digit, - onChange: modules.trade.onChange, - onChangeUiStore: ui.onChangeUiStore, - trade_store: modules.trade, -}))(MobileWidget); +export default MobileWidget; From 714600d56b4d955f2b33a562ccc4ac83cc68f738 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 25 Apr 2023 15:41:01 +0800 Subject: [PATCH 2/5] refactor: restore component structure to its original form --- .../ContractDrawer/contract-drawer-card.jsx | 36 ++- .../ContractDrawer/contract-drawer.jsx | 241 ++++++++++-------- .../Contract/Containers/contract-replay.jsx | 35 ++- 3 files changed, 174 insertions(+), 138 deletions(-) diff --git a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx index 03cd32c94716..fad68b728722 100644 --- a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx +++ b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx @@ -13,38 +13,36 @@ import { observer, useStore } from '@deriv/stores'; const ContractDrawerCard = observer( ({ + contract_info, + contract_update, currency, is_accumulator, + is_market_closed, + is_mobile, is_multiplier, is_vanilla, + is_sell_requested, is_collapsed, + onClickCancel, + onClickSell, onSwipedUp, onSwipedDown, result, + server_time, status, toggleContractAuditDrawer, }) => { + const { ui, contract_trade } = useStore(); const { active_symbols } = useTraderStore(); const { - ui: { - addToast, - current_focus, - removeToast, - should_show_cancellation_warning, - setCurrentFocus, - toggleCancellationWarning, - is_mobile, - }, - contract_trade: { getContractById }, - common: { server_time }, - contract_replay: { - is_market_closed, - is_sell_requested, - onClickCancel, - onClickSell, - contract_store: { contract_info, contract_update }, - }, - } = useStore(); + addToast, + current_focus, + removeToast, + should_show_cancellation_warning, + setCurrentFocus, + toggleCancellationWarning, + } = ui; + const { getContractById } = contract_trade; const [hover_ref, should_hide_closed_overlay] = useHover(); const { profit, underlying: symbol } = contract_info; diff --git a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer.jsx b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer.jsx index 87b531bcb975..b9b1c9140ec2 100644 --- a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer.jsx +++ b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer.jsx @@ -18,20 +18,84 @@ import ContractDrawerCard from './contract-drawer-card.jsx'; import { SwipeableContractAudit } from './swipeable-components.jsx'; import { observer, useStore } from '@deriv/stores'; -const ContractDrawer = observer(({ is_accumulator, is_multiplier, is_vanilla, toggleHistoryTab }) => { - const { - contract_replay: { - indicative_status: status, - contract_store: { contract_info, contract_update_history }, - }, - ui: { is_dark_mode_on: is_dark_theme }, - } = useStore(); - const { currency, exit_tick_display_value, is_sold } = contract_info; - const contract_drawer_ref = React.useRef(); - const contract_drawer_card_ref = React.useRef(); - const [should_show_contract_audit, setShouldShowContractAudit] = React.useState(false); +const ContractDrawer = observer( + ({ + contract_info, + contract_update, + contract_update_history, + is_accumulator, + is_sell_requested, + is_dark_theme, + is_market_closed, + is_multiplier, + is_vanilla, + onClickCancel, + onClickSell, + status, + toggleHistoryTab, + }) => { + const { common, ui } = useStore(); + const { server_time } = common; + const { is_mobile } = ui; + + const { currency, exit_tick_display_value, is_sold } = contract_info; + const contract_drawer_ref = React.useRef(); + const contract_drawer_card_ref = React.useRef(); + const [should_show_contract_audit, setShouldShowContractAudit] = React.useState(false); + + const getBodyContent = () => { + const exit_spot = + isUserSold(contract_info) && !is_multiplier && !is_accumulator ? '-' : exit_tick_display_value; + + const contract_audit = ( + + ); + + return ( + + setShouldShowContractAudit(true)} + onSwipedDown={() => setShouldShowContractAudit(false)} + server_time={server_time} + status={status} + toggleContractAuditDrawer={() => setShouldShowContractAudit(!should_show_contract_audit)} + /> + {contract_audit} + + ); + }; + + if (!contract_info) return null; + + // For non-binary contract, the status is always null, so we check for is_expired in contract_info + const fallback_result = contract_info.status || contract_info.is_expired; - const getBodyContent = () => { const exit_spot = isUserSold(contract_info) && !is_multiplier && !is_accumulator ? '-' : exit_tick_display_value; @@ -53,109 +117,68 @@ const ContractDrawer = observer(({ is_accumulator, is_multiplier, is_vanilla, to /> ); - return ( - - setShouldShowContractAudit(true)} - onSwipedDown={() => setShouldShowContractAudit(false)} - status={status} - toggleContractAuditDrawer={() => setShouldShowContractAudit(!should_show_contract_audit)} - /> - {contract_audit} - - ); - }; - - if (!contract_info) return null; - - // For non-binary contract, the status is always null, so we check for is_expired in contract_info - const fallback_result = contract_info.status || contract_info.is_expired; - - const exit_spot = isUserSold(contract_info) && !is_multiplier && !is_accumulator ? '-' : exit_tick_display_value; - - const contract_audit = ( - - ); - - const body_content = fallback_result ? ( - getBodyContent() - ) : ( -
- -
- ); - - const contract_drawer = ( - -
-
- {body_content} -
- {should_show_contract_audit && ( - -
- - {contract_audit} - -
- - )} + const body_content = fallback_result ? ( + getBodyContent() + ) : ( +
+
- - ); + ); - return ( - - {contract_drawer} - + const contract_drawer = ( +
- - {contract_drawer} - +
+ {body_content} +
+ {should_show_contract_audit && ( + +
+ + {contract_audit} + +
+ + )}
- - - ); -}); + + ); + + return ( + + {contract_drawer} + +
+ + {contract_drawer} + +
+ + + ); + } +); ContractDrawer.propTypes = { is_accumulator: PropTypes.bool, diff --git a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx index 387705172d91..daac8ae993e1 100644 --- a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx +++ b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx @@ -35,17 +35,24 @@ import { observer, useStore } from '@deriv/stores'; import { useTraderStore } from 'Stores/useTraderStores'; const ContractReplay = observer(({ contract_id }) => { + const { common, contract_replay, ui } = useStore(); + const { contract_store } = contract_replay; const { - contract_replay: { - onMount, - onUnmount, - is_chart_loading, - is_forward_starting, - contract_store: { contract_info, contract_update, contract_update_history, is_digit_contract }, - }, - common: { routeBackInApp }, - ui: { is_dark_mode_on: is_dark_theme, notification_messages_ui: NotificationMessages, toggleHistoryTab }, - } = useStore(); + is_market_closed, + is_sell_requested, + is_valid_to_cancel, + onClickCancel, + onClickSell, + onMount, + onUnmount, + indicative_status, + is_chart_loading, + is_forward_starting, + } = contract_replay; + const { contract_info, contract_update, contract_update_history, is_digit_contract } = contract_store; + const { routeBackInApp } = common; + const { is_dark_mode_on: is_dark_theme, notification_messages_ui: NotificationMessages, toggleHistoryTab } = ui; + const [is_visible, setIsVisible] = React.useState(false); const history = useHistory(); @@ -79,8 +86,16 @@ const ContractReplay = observer(({ contract_id }) => { contract_update={contract_update} contract_update_history={contract_update_history} is_accumulator={is_accumulator} + is_chart_loading={is_chart_loading} + is_dark_theme={is_dark_theme} + is_market_closed={is_market_closed} is_multiplier={is_multiplier} + is_sell_requested={is_sell_requested} + is_valid_to_cancel={is_valid_to_cancel} is_vanilla={is_vanilla} + onClickCancel={onClickCancel} + onClickSell={onClickSell} + status={indicative_status} toggleHistoryTab={toggleHistoryTab} /> ); From 70eda38ca5a03e5faf91e9e867cc65d9dfb3ea76 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 25 Apr 2023 15:42:37 +0800 Subject: [PATCH 3/5] refactor: remove MobxContentProvider --- packages/trader/src/App/app.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/trader/src/App/app.tsx b/packages/trader/src/App/app.tsx index 5fd47961ec4b..d0a60e02db19 100644 --- a/packages/trader/src/App/app.tsx +++ b/packages/trader/src/App/app.tsx @@ -9,7 +9,6 @@ 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: { @@ -30,16 +29,14 @@ const App = ({ passthrough }: Apptypes) => { }, [root_store]); return ( - - - - - - - - - - + + + + + + + + ); }; From 06a6e113e888c86de37be02c3545abbbb36a54ed Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 25 Apr 2023 15:49:30 +0800 Subject: [PATCH 4/5] refactor: replace connect in strike, vanilla-trade-type, screen-small, chart-widgets, and test --- .../Form/TradeParams/Multiplier/widgets.jsx | 23 +++--- .../Components/Form/TradeParams/strike.jsx | 44 ++++------- .../Form/TradeParams/vanilla-trade-types.jsx | 17 +++-- .../Trading/Components/Form/screen-small.jsx | 75 ++++++++++--------- .../Trading/Containers/allow-equals.jsx | 5 +- .../Trading/Containers/chart-widgets.jsx | 51 +++++-------- .../src/Modules/Trading/Containers/test.jsx | 27 ++++--- .../src/Modules/Trading/Containers/trade.jsx | 6 +- 8 files changed, 115 insertions(+), 133 deletions(-) diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx index 83e356cd53e5..3d73bfdb0205 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx +++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx @@ -57,14 +57,15 @@ const AmountWidget = ({ amount, currency, expiration, is_crypto_multiplier }) => export const MultiplierAmountWidget = observer(() => { const { amount, expiration, currency, is_crypto_multiplier, multiplier } = useTraderStore(); - return { + const amount_widget_props = { amount, expiration, currency, is_crypto_multiplier, multiplier, }; -})(AmountWidget); + return ; +}); const RadioGroupOptionsWidget = ({ displayed_trade_param, modal_title }) => { const [is_open, setIsOpen] = React.useState(false); @@ -87,16 +88,14 @@ const RadioGroupOptionsWidget = ({ displayed_trade_param, modal_title }) => { export const MultiplierOptionsWidget = observer(() => { const { multiplier } = useTraderStore(); - return { - displayed_trade_param: `x${multiplier}`, - modal_title: localize('Multiplier'), - }; -})(RadioGroupOptionsWidget); + const displayed_trade_param = `x${multiplier}`; + const modal_title = localize('Multiplier'); + return ; +}); export const AccumulatorOptionsWidget = observer(() => { const { growth_rate } = useTraderStore(); - return { - displayed_trade_param: `${getGrowthRatePercentage(growth_rate)}%`, - modal_title: localize('Accumulate'), - }; -})(RadioGroupOptionsWidget); + const displayed_trade_param = `${getGrowthRatePercentage(growth_rate)}%`; + const modal_title = localize('Accumulate'); + return ; +}); diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/strike.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/strike.jsx index f68a29c62bf4..e7a894956939 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/strike.jsx +++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/strike.jsx @@ -4,23 +4,17 @@ import { DesktopWrapper, InputField, MobileWrapper, Dropdown, Text, Icon } from import { localize, Localize } from '@deriv/translations'; import { toMoment } from '@deriv/shared'; import Fieldset from 'App/Components/Form/fieldset.jsx'; -import { connect } from 'Stores/connect'; import StrikeParamModal from 'Modules/Trading/Containers/strike-param-modal'; import './strike-field.scss'; +import { observer, useStore } from '@deriv/stores'; +import { useTraderStore } from 'Stores/useTraderStores'; + +const Strike = observer(() => { + const { ui, common } = useStore(); + const { barrier_1, onChange, validation_errors, strike_price_choices, expiry_type, expiry_date } = useTraderStore(); + const { current_focus, setCurrentFocus, advanced_duration_unit, vanilla_trade_type } = ui; + const { server_time } = common; -const Strike = ({ - barrier_1, - current_focus, - onChange, - validation_errors, - setCurrentFocus, - advanced_duration_unit, - strike_price_choices, - expiry_type, - expiry_date, - server_time, - vanilla_trade_type, -}) => { const [is_open, setIsOpen] = React.useState(false); const [should_open_dropdown, setShouldOpenDropdown] = React.useState(false); const [selected_value, setSelectedValue] = React.useState(barrier_1); @@ -36,7 +30,10 @@ const Strike = ({ const is_relative_strike_applicable = expiry_type === 'endtime' ? is_24_hours_contract : advanced_duration_unit !== 'd'; - const strike_price_list = strike_price_choices.map(strike_price => ({ text: strike_price, value: strike_price })); + const strike_price_list = strike_price_choices.map(strike_price => ({ + text: strike_price, + value: strike_price, + })); if (should_open_dropdown) { return ( @@ -151,19 +148,6 @@ const Strike = ({ ); -}; +}); -export default connect(({ modules, ui, common }) => ({ - barrier_1: modules.trade.barrier_1, - current_focus: ui.current_focus, - setCurrentFocus: ui.setCurrentFocus, - onChange: modules.trade.onChange, - validation_errors: modules.trade.validation_errors, - advanced_duration_unit: ui.advanced_duration_unit, - strike_price_choices: modules.trade.strike_price_choices, - expiry_type: modules.trade.expiry_type, - start_date: modules.trade.start_date, - expiry_date: modules.trade.expiry_date, - server_time: common.server_time, - vanilla_trade_type: ui.vanilla_trade_type, -}))(Strike); +export default Strike; diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/vanilla-trade-types.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/vanilla-trade-types.jsx index 07ed81c8cbd3..d7fad2343977 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/vanilla-trade-types.jsx +++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/vanilla-trade-types.jsx @@ -1,9 +1,14 @@ import React from 'react'; import { ButtonToggle } from '@deriv/components'; -import { connect } from 'Stores/connect'; import Fieldset from 'App/Components/Form/fieldset.jsx'; +import { observer, useStore } from '@deriv/stores'; +import { useTraderStore } from 'Stores/useTraderStores'; + +const VanillaTradeTypes = observer(() => { + const { ui } = useStore(); + const { onChange } = useTraderStore(); + const { onChangeUiStore, vanilla_trade_type } = ui; -const VanillaTradeTypes = ({ onChange, onChangeUiStore, vanilla_trade_type }) => { const changeTradeType = ({ target }) => { const { name, value } = target; @@ -26,10 +31,6 @@ const VanillaTradeTypes = ({ onChange, onChangeUiStore, vanilla_trade_type }) => /> ); -}; +}); -export default connect(({ modules, ui }) => ({ - onChange: modules.trade.onChange, - onChangeUiStore: ui.onChangeUiStore, - vanilla_trade_type: ui.vanilla_trade_type, -}))(VanillaTradeTypes); +export default VanillaTradeTypes; diff --git a/packages/trader/src/Modules/Trading/Components/Form/screen-small.jsx b/packages/trader/src/Modules/Trading/Components/Form/screen-small.jsx index fbbd2f593f37..54b1b87b6a4b 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/screen-small.jsx +++ b/packages/trader/src/Modules/Trading/Components/Form/screen-small.jsx @@ -3,7 +3,6 @@ import React from 'react'; import { Collapsible } from '@deriv/components'; import { TradeParamsLoader } from 'App/Components/Elements/ContentLoader'; import AllowEqualsMobile from 'Modules/Trading/Containers/allow-equals.jsx'; -import { connect } from 'Stores/connect'; import { hasCallPutEqual, hasDurationForCallPutEqual, @@ -26,6 +25,8 @@ import classNames from 'classnames'; import AccumulatorsStats from 'Modules/Contract/Components/AccumulatorsStats'; import Strike from 'Modules/Trading/Components/Form/TradeParams/strike.jsx'; import VanillaTradeTypes from 'Modules/Trading/Components/Form/TradeParams/vanilla-trade-types.jsx'; +import { observer } from '@deriv/stores'; +import { useTraderStore } from 'Stores/useTraderStores'; const CollapsibleTradeParams = ({ form_components, @@ -119,15 +120,41 @@ const CollapsibleTradeParams = ({ ); }; -const ScreenSmall = ({ - is_trade_enabled, - duration_unit, - contract_types_list, - contract_type, - expiry_type, - contract_start_type, - ...props -}) => { +const ScreenSmall = observer(({ is_trade_enabled }) => { + const trade_store = useTraderStore(); + const { + is_accumulator, + is_multiplier, + is_vanilla, + duration_unit, + contract_types_list, + contract_type, + expiry_type, + contract_start_type, + form_components, + has_take_profit, + onChange, + previous_symbol, + is_trade_params_expanded, + setIsTradeParamsExpanded, + take_profit, + } = trade_store; + const is_allow_equal = !!trade_store.is_equal; + + const collapsible_trade_params_props = { + is_accumulator, + is_multiplier, + is_vanilla, + form_components, + has_take_profit, + onChange, + previous_symbol, + is_trade_params_expanded, + setIsTradeParamsExpanded, + take_profit, + is_allow_equal, + }; + const has_callputequal_duration = hasDurationForCallPutEqual( contract_types_list, duration_unit, @@ -143,34 +170,12 @@ const ScreenSmall = ({
) : ( - + ); -}; +}); ScreenSmall.propTypes = { - contract_start_type: PropTypes.string, - contract_type: PropTypes.string, - contract_types_list: PropTypes.object, - duration_unit: PropTypes.string, - expiry_type: PropTypes.string, is_trade_enabled: PropTypes.bool, }; -export default connect(({ modules }) => ({ - is_accumulator: modules.trade.is_accumulator, - is_allow_equal: !!modules.trade.is_equal, - is_multiplier: modules.trade.is_multiplier, - is_vanilla: modules.trade.is_vanilla, - duration_unit: modules.trade.duration_unit, - contract_types_list: modules.trade.contract_types_list, - contract_type: modules.trade.contract_type, - expiry_type: modules.trade.expiry_type, - contract_start_type: modules.trade.contract_start_type, - form_components: modules.trade.form_components, - has_take_profit: modules.trade.has_take_profit, - onChange: modules.trade.onChange, - previous_symbol: modules.trade.previous_symbol, - is_trade_params_expanded: modules.trade.is_trade_params_expanded, - setIsTradeParamsExpanded: modules.trade.setIsTradeParamsExpanded, - take_profit: modules.trade.take_profit, -}))(ScreenSmall); +export default ScreenSmall; diff --git a/packages/trader/src/Modules/Trading/Containers/allow-equals.jsx b/packages/trader/src/Modules/Trading/Containers/allow-equals.jsx index b871154ad256..e38a4f91eb98 100644 --- a/packages/trader/src/Modules/Trading/Containers/allow-equals.jsx +++ b/packages/trader/src/Modules/Trading/Containers/allow-equals.jsx @@ -38,9 +38,10 @@ AllowEquals.propTypes = { export default observer(() => { const { is_equal, has_equals_only, onChange } = useTraderStore(); - return { + const allow_equals_props = { is_allow_equal: !!is_equal, has_equals_only, onChange, }; -})(AllowEquals); + return ; +}); diff --git a/packages/trader/src/Modules/Trading/Containers/chart-widgets.jsx b/packages/trader/src/Modules/Trading/Containers/chart-widgets.jsx index 14102e97b5c0..187f02209352 100644 --- a/packages/trader/src/Modules/Trading/Containers/chart-widgets.jsx +++ b/packages/trader/src/Modules/Trading/Containers/chart-widgets.jsx @@ -2,35 +2,23 @@ import React from 'react'; import { isMobile } from '@deriv/shared'; 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 TopWidgets from '../../SmartChart/Components/top-widgets.jsx'; import { symbolChange } from '../../SmartChart/Helpers/symbol'; +import { useTraderStore } from 'Stores/useTraderStores'; +import { observer, useStore } from '@deriv/stores'; -export const DigitsWidget = connect(({ modules, contract_trade }) => ({ - contract_info: contract_trade.last_contract.contract_info || {}, - digits_info: contract_trade.last_contract.digits_info || {}, - display_status: contract_trade.last_contract.display_status, - is_digit_contract: contract_trade.last_contract.is_digit_contract, - is_ended: contract_trade.last_contract.is_ended, - selected_digit: modules.trade.last_digit, - onDigitChange: modules.trade.onChange, - underlying: modules.trade.symbol, - trade_type: modules.trade.contract_type, -}))( - ({ - contract_info, - digits, - digits_info, - display_status, - is_digit_contract, - is_ended, - onDigitChange, - selected_digit, - tick, - trade_type, - underlying, - }) => ( +export const DigitsWidget = observer(({ digits, tick }) => { + const { contract_trade } = useStore(); + const { + onChange: onDigitChange, + symbol: underlying, + contract_type: trade_type, + last_digit: selected_digit, + } = useTraderStore(); + const { last_contract } = contract_trade; + const { contract_info = {}, digits_info = {}, display_status, is_digit_contract, is_ended } = last_contract; + return ( ({ selected_digit={selected_digit} underlying={underlying} /> - ) -); + ); +}); // Chart widgets passed into SmartCharts -export const ChartTopWidgets = connect(({ modules, ui }) => ({ - onSymbolChange: modules.trade.onChange, - theme: ui.is_dark_mode_on ? 'dark' : 'light', -}))(({ onSymbolChange, charts_ref, theme, is_digits_widget_active, open_market, open }) => { +export const ChartTopWidgets = observer(({ charts_ref, is_digits_widget_active, open_market, open }) => { + const { ui } = useStore(); + const { onChange: onSymbolChange } = useTraderStore(); + const { is_dark_mode_on } = ui; + const theme = is_dark_mode_on ? 'dark' : 'light'; let yAxiswidth; if (charts_ref && charts_ref.chart) { yAxiswidth = charts_ref.chart.yAxiswidth; diff --git a/packages/trader/src/Modules/Trading/Containers/test.jsx b/packages/trader/src/Modules/Trading/Containers/test.jsx index 5e6fb7368a55..18354bc3ae0e 100644 --- a/packages/trader/src/Modules/Trading/Containers/test.jsx +++ b/packages/trader/src/Modules/Trading/Containers/test.jsx @@ -1,7 +1,8 @@ import { toJS } from 'mobx'; import PropTypes from 'prop-types'; import React from 'react'; -import { connect } from 'Stores/connect'; +import { useTraderStore } from 'Stores/useTraderStores'; +import { observer, useStore } from '@deriv/stores'; const styles = { container: { @@ -30,7 +31,16 @@ const styles = { }, }; -const Test = props => { +const Test = observer(() => { + const stores = useStore(); + const trade_store = useTraderStore(); + const test_stores = { + trade: Object.entries(trade_store), + client: Object.entries(stores.client), + ui: Object.entries(stores.ui), + portfolio: Object.entries(stores.portfolio), + }; + const [is_visible, setIsVisible] = React.useState(false); const [store, setStore] = React.useState('trade'); @@ -63,7 +73,7 @@ const Test = props => { return (
- {Object.keys(props).map(storage => ( + {Object.keys(test_stores).map(storage => (

setStore(storage)} @@ -73,18 +83,13 @@ const Test = props => {

))}
- {props[store].sort().map(renderStoreContent)} + {test_stores[store].sort().map(renderStoreContent)} ); -}; +}); Test.propTypes = { entries: PropTypes.array, }; -export default connect(({ modules, client, ui, portfolio }) => ({ - trade: Object.entries(modules.trade), - client: Object.entries(client), - ui: Object.entries(ui), - portfolio: Object.entries(portfolio), -}))(Test); +export default Test; diff --git a/packages/trader/src/Modules/Trading/Containers/trade.jsx b/packages/trader/src/Modules/Trading/Containers/trade.jsx index eb39261d1b6c..3bb540010962 100644 --- a/packages/trader/src/Modules/Trading/Containers/trade.jsx +++ b/packages/trader/src/Modules/Trading/Containers/trade.jsx @@ -256,7 +256,7 @@ const SmartChartWithRef = React.forwardRef((props, ref) => { const { ui, client, contract_trade } = useStore(); - const { markers_array, is_digit_contract, granularity } = contract_trade; + const { markers_array, granularity } = contract_trade; const { is_dark_mode_on: is_dark_theme } = ui; const { currency } = client; return markers_array.map(marker => { @@ -283,12 +283,11 @@ const ChartTrade = observer(props => { chart_type, updateGranularity, updateChartType, - last_contract, should_highlight_current_spot, } = contract_trade; const { all_positions } = portfolio; const { is_chart_layout_default, is_chart_countdown_visible, is_dark_mode_on } = ui; - const { is_socket_opened, current_language, is_virtual } = common; + const { is_socket_opened, current_language } = common; const { should_show_eu_content } = client; const { chartStateChange, @@ -296,7 +295,6 @@ const ChartTrade = observer(props => { main_barrier_flattened: main_barrier, barriers_flattened: extra_barriers, show_digits_stats, - contract_type, symbol, exportLayout, setChartStatus, From f32bbb0b52c5bcf9fb1f3bffbf63e1ce5f465203 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Wed, 26 Apr 2023 14:16:27 +0800 Subject: [PATCH 5/5] refactor: remove connect function definition and connectwithcontractupdates --- .../ContractDrawer/contract-drawer-card.jsx | 2 -- .../PositionsDrawer/positions-modal-card.jsx | 2 -- .../Modules/Trading/Helpers/multiplier.js | 13 -------- packages/trader/src/Stores/connect.js | 31 ------------------- 4 files changed, 48 deletions(-) delete mode 100644 packages/trader/src/Stores/connect.js diff --git a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx index fad68b728722..6f7c2ecd4fe9 100644 --- a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx +++ b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx @@ -7,7 +7,6 @@ import { getCardLabels, getContractTypeDisplay } from 'Constants/contract'; import { getMarketInformation } from 'Utils/Helpers/market-underlying'; import { SwipeableContractDrawer } from './swipeable-components.jsx'; import MarketClosedContractOverlay from './market-closed-contract-overlay.jsx'; -import { connectWithContractUpdate } from 'Stores/Modules/Trading/Helpers/multiplier'; import { useTraderStore } from 'Stores/useTraderStores'; import { observer, useStore } from '@deriv/stores'; @@ -73,7 +72,6 @@ const ContractDrawerCard = observer( const card_body = ( { // e.target.checked is not reliable, we have to toggle its previous value const new_val = !has_cancellation; @@ -27,14 +25,3 @@ export const onChangeCancellationDuration = ({ event, onChangeMultiple }) => { cancellation_duration: value, }); }; - -// eslint-disable-next-line no-empty-pattern -export const connectWithContractUpdate = connect(({}, { contract = {} }) => { - return { - validation_errors: contract.validation_errors, - contract_update_take_profit: contract.contract_update_take_profit, - contract_update_stop_loss: contract.contract_update_stop_loss, - has_contract_update_take_profit: contract.has_contract_update_take_profit, - has_contract_update_stop_loss: contract.has_contract_update_stop_loss, - }; -}); diff --git a/packages/trader/src/Stores/connect.js b/packages/trader/src/Stores/connect.js deleted file mode 100644 index 4ef42c8d18b6..000000000000 --- a/packages/trader/src/Stores/connect.js +++ /dev/null @@ -1,31 +0,0 @@ -import { useObserver } from 'mobx-react'; -import React from 'react'; - -const isClassComponent = Component => - !!(typeof Component === 'function' && Component.prototype && Component.prototype.isReactComponent); - -export const MobxContent = React.createContext(null); - -function injectStorePropsToComponent(propsToSelectFn, BaseComponent) { - const Component = own_props => { - const store = React.useContext(MobxContent); - - let ObservedComponent = BaseComponent; - - if (isClassComponent(BaseComponent)) { - const FunctionalWrapperComponent = props => ; - ObservedComponent = FunctionalWrapperComponent; - } - - return useObserver(() => ObservedComponent({ ...own_props, ...propsToSelectFn(store, own_props) })); - }; - - Component.displayName = BaseComponent.name; - return Component; -} - -export const MobxContentProvider = ({ store, children }) => { - return {children}; -}; - -export const connect = propsToSelectFn => Component => injectStorePropsToComponent(propsToSelectFn, Component);