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;
}