diff --git a/packages/shared/src/utils/constants/contract.tsx b/packages/shared/src/utils/constants/contract.tsx index bfd3b3820096..3dd28fb4951b 100644 --- a/packages/shared/src/utils/constants/contract.tsx +++ b/packages/shared/src/utils/constants/contract.tsx @@ -137,18 +137,18 @@ export const getContractTypesConfig: TGetContractTypesConfig = symbol => ({ config: { hide_duration: true }, }, // hide Duration for Multiplier contracts for now turboslong: { - title: localize('Long'), + title: localize('Turbos'), trade_types: ['TURBOSLONG'], basis: ['stake'], barrier_count: 1, - components: ['barrier_selector', 'take_profit'], + components: ['trade_type_tabs', 'barrier_selector', 'take_profit'], }, turbosshort: { - title: localize('Short'), + title: localize('Turbos'), trade_types: ['TURBOSSHORT'], basis: ['stake'], barrier_count: 1, - components: ['barrier_selector', 'take_profit'], + components: ['trade_type_tabs', 'barrier_selector', 'take_profit'], }, }); diff --git a/packages/trader/src/Assets/Trading/Categories/icon-trade-categories.jsx b/packages/trader/src/Assets/Trading/Categories/icon-trade-categories.jsx index 572277d2ec98..02c1727d6425 100644 --- a/packages/trader/src/Assets/Trading/Categories/icon-trade-categories.jsx +++ b/packages/trader/src/Assets/Trading/Categories/icon-trade-categories.jsx @@ -208,20 +208,15 @@ const IconTradeCategory = ({ category, className }) => { ); break; + case 'turboslong': case 'turbosshort': IconCategory = (
- +
-
- ); - break; - case 'turboslong': - IconCategory = ( -
- +
); diff --git a/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-list.jsx b/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-list.jsx index 9a9ceb07d12a..c36ddc25f636 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-list.jsx +++ b/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-list.jsx @@ -6,7 +6,11 @@ const List = ({ handleInfoClick, handleSelect, list, name, value }) => list.map((contract_category, key) => { const contract_types = contract_category.contract_types?.filter(contract_type => { const base_contract_type = /^(.*)_equal$/.exec(contract_type.value)?.[1]; + const is_hidden = contract_type.value === 'turbosshort'; + if (is_hidden) { + return contract_category.contract_types.some(c => c.value === is_hidden); + } if (base_contract_type) { return !contract_category.contract_types.some(c => c.value === base_contract_type); } diff --git a/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-widget.jsx b/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-widget.jsx index 1b2397ddff4a..e620b2547d01 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-widget.jsx +++ b/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-widget.jsx @@ -53,7 +53,7 @@ const ContractTypeWidget = ({ is_equal, name, value, list, onChange, languageCha if (selected_item && selected_item.value !== value) { onChange({ target: { name, value: selected_item.value } }); } - }, [selected_item, onChange, name, value]); + }, [selected_item, onChange, name]); const handleInfoClick = clicked_item => { setInfoDialogVisibility(!is_info_dialog_open); diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Turbos/trade-type-tabs.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Turbos/trade-type-tabs.jsx new file mode 100644 index 000000000000..2b6a4feb255d --- /dev/null +++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Turbos/trade-type-tabs.jsx @@ -0,0 +1,39 @@ +import classNames from 'classnames'; +import React from 'react'; +import PropTypes from 'prop-types'; +import { ButtonToggle } from '@deriv/components'; +import { localize } from '@deriv/translations'; +import { connect } from 'Stores/connect'; + +const TradeTypeTabs = ({ className, onChange, contract_type }) => { + const tab_list = [ + { text: localize('Long'), value: 'turboslong' }, + { text: localize('Short'), value: 'turbosshort' }, + ]; + + if (contract_type !== 'turbosshort' && contract_type !== 'turboslong') return null; + + return ( +
+ tab.value === contract_type)?.value} + /> +
+ ); +}; + +TradeTypeTabs.propTypes = { + className: PropTypes.string, + onChange: PropTypes.func, + contract_type: PropTypes.string, +}; + +export default connect(({ modules }) => ({ + onChange: modules.trade.onChange, + contract_type: modules.trade.contract_type, +}))(TradeTypeTabs); diff --git a/packages/trader/src/Modules/Trading/Containers/trade-params.jsx b/packages/trader/src/Modules/Trading/Containers/trade-params.jsx index 85d857f4d622..839c88b9bb69 100644 --- a/packages/trader/src/Modules/Trading/Containers/trade-params.jsx +++ b/packages/trader/src/Modules/Trading/Containers/trade-params.jsx @@ -6,6 +6,7 @@ import Barrier from 'Modules/Trading/Components/Form/TradeParams/barrier.jsx'; import BarrierSelector from 'Modules/Trading/Components/Form/TradeParams/Turbos/barrier-selector.jsx'; import Duration from 'Modules/Trading/Components/Form/TradeParams/Duration'; import LastDigit from 'Modules/Trading/Components/Form/TradeParams/last-digit.jsx'; +import TradeTypeTabs from 'Modules/Trading/Components/Form/TradeParams/Turbos/trade-type-tabs.jsx'; import CancelDeal from 'Modules/Trading/Components/Form/TradeParams/Multiplier/cancel-deal.jsx'; import StopLoss from 'Modules/Trading/Components/Form/TradeParams/Multiplier/stop-loss.jsx'; import TakeProfit from 'Modules/Trading/Components/Form/TradeParams/Multiplier/take-profit.jsx'; @@ -20,6 +21,7 @@ const TradeParams = ({ form_components, is_minimized }) => { return ( {isVisible('duration') && } + {isVisible('trade_type_tabs') && } {isVisible('barrier') && } {isVisible('barrier_selector') && } {isVisible('last_digit') && } diff --git a/packages/trader/src/sass/app/modules/trading.scss b/packages/trader/src/sass/app/modules/trading.scss index 6a4a148e15c0..95efbc29cab9 100644 --- a/packages/trader/src/sass/app/modules/trading.scss +++ b/packages/trader/src/sass/app/modules/trading.scss @@ -528,6 +528,14 @@ align-self: flex-end; } } + &__trade-type-tabs { + border-radius: $BORDER_RADIUS; + padding: 0.8rem; + margin-bottom: 0.4rem; + background-color: var(--general-section-1); + border-color: var(--general-section-1); + color: var(--text-general); + } &__deal-cancellation-popover { width: 28rem; }