diff --git a/src/components/StrategyEditor/StrategyEditor.helpers.js b/src/components/StrategyEditor/StrategyEditor.helpers.js index bf1691e96..d86541804 100644 --- a/src/components/StrategyEditor/StrategyEditor.helpers.js +++ b/src/components/StrategyEditor/StrategyEditor.helpers.js @@ -2,7 +2,9 @@ import _find from 'lodash/find' import _map from 'lodash/map' import _reduce from 'lodash/reduce' import _isEmpty from 'lodash/isEmpty' +import _includes from 'lodash/includes' import _size from 'lodash/size' +import { isDerivativeCcy } from '@ufx-ui/utils' import { MAX_STRATEGY_LABEL_LENGTH as MAX_LABEL_LENGTH } from '../../constants/variables' import { @@ -264,3 +266,22 @@ export const validateStrategyName = (label, t) => { return '' } + +export const processMarketChangeInStrategy = (nextMarket, markets) => { + const market = _find(markets, (m) => m.wsID === nextMarket.wsID) + const options = { + [STRATEGY_OPTIONS_KEYS.SYMBOL]: market, + [STRATEGY_OPTIONS_KEYS.CAPITAL_ALLOCATION]: 0, + } + + const isMarginPair = _includes(market?.contexts, 'm') + const isDerivativePair = isDerivativeCcy(market.wsID) + if (!isMarginPair) { + options[STRATEGY_OPTIONS_KEYS.MARGIN] = isDerivativePair + } + if (isMarginPair && !isDerivativePair) { + options[STRATEGY_OPTIONS_KEYS.USE_MAX_LEVERAGE] = true + } + + return options +} diff --git a/src/components/StrategyOptionsPanel/StrategyMarketSelect.js b/src/components/StrategyOptionsPanel/StrategyMarketSelect.js index 2e0b244a9..4bb9c0cf3 100644 --- a/src/components/StrategyOptionsPanel/StrategyMarketSelect.js +++ b/src/components/StrategyOptionsPanel/StrategyMarketSelect.js @@ -1,13 +1,14 @@ -import React from 'react' +import React, { useCallback } from 'react' import _isEmpty from 'lodash/isEmpty' -import _includes from 'lodash/includes' -import _find from 'lodash/find' import PropTypes from 'prop-types' import clsx from 'clsx' import { Tooltip } from '@ufx-ui/core' import { useTranslation } from 'react-i18next' import MarketSelect from '../MarketSelect' -import { STRATEGY_OPTIONS_KEYS } from '../StrategyEditor/StrategyEditor.helpers' +import { + STRATEGY_OPTIONS_KEYS, + processMarketChangeInStrategy, +} from '../StrategyEditor/StrategyEditor.helpers' import { MARKET_SHAPE, STRATEGY_SHAPE, @@ -19,21 +20,16 @@ const StrategyMarketSelect = ({ markets, isDisabled, }) => { - const onMarketSelectChange = (selection) => { - if (isDisabled) { - return - } - const sel = _find(markets, (m) => m.wsID === selection.wsID) - const options = { - [STRATEGY_OPTIONS_KEYS.SYMBOL]: sel, - [STRATEGY_OPTIONS_KEYS.CAPITAL_ALLOCATION]: 0, - } - - if (!_includes(sel?.contexts, 'm')) { - options[STRATEGY_OPTIONS_KEYS.MARGIN] = false - } - saveStrategyOptions(options) - } + const onMarketSelectChange = useCallback( + (selection) => { + if (isDisabled) { + return + } + const updatedStrategy = processMarketChangeInStrategy(selection, markets) + saveStrategyOptions(updatedStrategy) + }, + [isDisabled, markets, saveStrategyOptions], + ) const { t } = useTranslation() diff --git a/src/modals/Strategy/StrategySettingsModal/StrategySettingsModal.js b/src/modals/Strategy/StrategySettingsModal/StrategySettingsModal.js index bd99a4654..5d6658334 100644 --- a/src/modals/Strategy/StrategySettingsModal/StrategySettingsModal.js +++ b/src/modals/Strategy/StrategySettingsModal/StrategySettingsModal.js @@ -4,7 +4,11 @@ import React, { import { useSelector } from 'react-redux' import PropTypes from 'prop-types' import { useTranslation } from 'react-i18next' -import _map from 'lodash/map' +import { reduxSelectors } from '@ufx-ui/bfx-containers' + +import _forEach from 'lodash/forEach' +import _includes from 'lodash/includes' +import _get from 'lodash/get' import _isEmpty from 'lodash/isEmpty' import Modal from '../../../ui/Modal' import AmountInput from '../../../components/OrderForm/FieldComponents/input.amount' @@ -26,6 +30,8 @@ import { STRATEGY_SHAPE } from '../../../constants/prop-types-shapes' import './style.scss' +const { getIsDerivativePair: _getIsDerivativePair } = reduxSelectors + const convertNumberToString = (value) => (value ? String(AmountInput.processValue(value)) : '') const StrategySettingsModal = (props) => { @@ -73,6 +79,7 @@ const StrategySettingsModal = (props) => { const [pendingForSaveOptions, setPendingForSaveOptions] = useState(false) const isPaperTrading = useSelector(getIsPaperTrading) + const getIsDerivativePair = useSelector(_getIsDerivativePair) const isFullFilled = isExecutionInputsFullFilled( capitalAllocationValue, @@ -81,6 +88,10 @@ const StrategySettingsModal = (props) => { ) const isPairSelected = !_isEmpty(symbol) + const isDerivativePair = useMemo( + () => getIsDerivativePair(symbol.wsID), + [symbol, getIsDerivativePair], + ) const { t } = useTranslation() @@ -155,6 +166,8 @@ const StrategySettingsModal = (props) => { setIncreaseLeverage={setIncreaseLeverage} increaseLeverage={increaseLeverage} isPairSelected={isPairSelected} + disabledInputs={!isPaperTrading || !isPairSelected} + isDerivativePair={isDerivativePair} /> ) @@ -167,6 +180,8 @@ const StrategySettingsModal = (props) => { setStopOrderValue={setStopOrderValue} isPairSelected={isPairSelected} setHasErrors={setHasErrors} + isPaperTrading={isPaperTrading} + disabledInputs={!isPaperTrading || !isPairSelected} /> ) @@ -188,27 +203,52 @@ const StrategySettingsModal = (props) => { isPairSelected, additionStopOrder, stopOrderValue, + isDerivativePair, ], ) - const tabs = useMemo(() => { - return _map(STRATEGY_SETTINGS_TABS, (tab) => ({ - key: tab, - label: t(`strategySettingsModal.${tab}`), - component: getTabContentComponent(tab), - })) - }, [t, getTabContentComponent]) + const isMarginPair = useMemo( + () => _includes(_get(symbol, 'contexts', []), 'm'), + [symbol], + ) + + const tabsConfig = useMemo(() => { + const tabs = [] + console.log(isDerivativePair, isMarginPair) + + _forEach(STRATEGY_SETTINGS_TABS, (tab) => { + if ( + tab === STRATEGY_SETTINGS_TABS.Leverage + && !(isMarginPair || isDerivativePair) + ) { + return + } + tabs.push({ + key: tab, + label: t(`strategySettingsModal.${tab}`), + component: getTabContentComponent(tab), + }) + }) + + return tabs + }, [t, getTabContentComponent, isMarginPair, isDerivativePair]) useEffect(() => { setCapitalAllocationValue(convertNumberToString(capitalAllocation)) setMaxDrawdownPercValue(convertNumberToString(maxDrawdownPerc)) setStopLossPercValue(convertNumberToString(stopLossPerc)) + setActiveTab(STRATEGY_SETTINGS_TABS.Execution) - setTradeOnMargin(margin) + if (!margin && isDerivativePair) { + setTradeOnMargin(true) + } else { + setTradeOnMargin(margin) + } if (!useMaxLeverage) { setMarginTradeMode(MARGIN_TRADE_MODES.FIXED) } + if (leverage) { setLeverageValue(convertNumberToString(leverage)) } @@ -301,7 +341,7 @@ const StrategySettingsModal = (props) => { {!isPaperTrading ? ( diff --git a/src/modals/Strategy/StrategySettingsModal/tabs/StrategySettings.Leverage.js b/src/modals/Strategy/StrategySettingsModal/tabs/StrategySettings.Leverage.js index 5218aba34..eab1cbfec 100644 --- a/src/modals/Strategy/StrategySettingsModal/tabs/StrategySettings.Leverage.js +++ b/src/modals/Strategy/StrategySettingsModal/tabs/StrategySettings.Leverage.js @@ -3,7 +3,7 @@ import React, { useMemo } from 'react' import PropTypes from 'prop-types' import { Checkbox } from '@ufx-ui/core' -import _map from 'lodash/map' +import _forEach from 'lodash/forEach' import { Trans, useTranslation } from 'react-i18next' import AttentionBar from '../../../../ui/AttentionBar/AttentionBar' import Dropdown from '../../../../ui/Dropdown' @@ -21,15 +21,28 @@ const LeverageTab = ({ increaseLeverage, setIncreaseLeverage, isPairSelected, + disabledInputs, + isDerivativePair, }) => { const { t } = useTranslation() const marginTradeModesOptions = useMemo( - () => _map(MARGIN_TRADE_MODES, (mode) => ({ - label: t(`strategySettingsModal.${mode}`), - value: mode, - })), - [t], + () => { + const options = [] + + _forEach(MARGIN_TRADE_MODES, (mode) => { + if (mode === MARGIN_TRADE_MODES.FIXED && !isDerivativePair) { + return + } + options.push({ + label: t(`strategySettingsModal.${mode}`), + value: mode, + }) + }) + + return options + }, + [t, isDerivativePair], ) return ( @@ -44,7 +57,7 @@ const LeverageTab = ({ onChange={setTradeOnMargin} label={t('strategySettingsModal.tradeOnMarginCheckbox')} checked={tradeOnMargin} - disabled={!isPairSelected} + disabled={disabledInputs || isDerivativePair} className='appsettings-modal__checkbox' />
@@ -59,7 +72,7 @@ const LeverageTab = ({ options={marginTradeModesOptions} onChange={setMarginTradeMode} value={marginTradeMode} - disabled={!isPairSelected} + disabled={disabledInputs} />
{marginTradeMode === MARGIN_TRADE_MODES.MAX && ( @@ -81,14 +94,14 @@ const LeverageTab = ({ value={leverageValue} onChange={setLeverageValue} className='hfui-execution-options-modal__option' - disabled={!isPairSelected} + disabled={disabledInputs} />
@@ -132,6 +145,8 @@ LeverageTab.propTypes = { increaseLeverage: PropTypes.bool.isRequired, setIncreaseLeverage: PropTypes.func.isRequired, isPairSelected: PropTypes.bool.isRequired, + disabledInputs: PropTypes.bool.isRequired, + isDerivativePair: PropTypes.bool.isRequired, } export default LeverageTab diff --git a/src/modals/Strategy/StrategySettingsModal/tabs/StrategySettings.Orders.js b/src/modals/Strategy/StrategySettingsModal/tabs/StrategySettings.Orders.js index e5d5edc90..0f58a7d22 100644 --- a/src/modals/Strategy/StrategySettingsModal/tabs/StrategySettings.Orders.js +++ b/src/modals/Strategy/StrategySettingsModal/tabs/StrategySettings.Orders.js @@ -14,6 +14,7 @@ const OrdersTab = ({ stopOrderValue, isPairSelected, setHasErrors, + disabledInputs, }) => { const [stopOrderValueError, setStopOrderValueError] = useState('') const { t } = useTranslation() @@ -51,7 +52,7 @@ const OrdersTab = ({

)} checked={additionStopOrder} - disabled={!isPairSelected} + disabled={disabledInputs} className='appsettings-modal__checkbox' />
@@ -78,7 +79,7 @@ const OrdersTab = ({ value={stopOrderValue} min={0} max={99} - disabled={!additionStopOrder || !isPairSelected} + disabled={!additionStopOrder || disabledInputs} />

{t('strategySettingsModal.stopOrderValuePlaceholder')} @@ -95,6 +96,7 @@ OrdersTab.propTypes = { stopOrderValue: PropTypes.string.isRequired, isPairSelected: PropTypes.bool.isRequired, setHasErrors: PropTypes.func.isRequired, + disabledInputs: PropTypes.bool.isRequired, } export default OrdersTab