chore: connected proposal API + added Stake header + updated purchase…

… button (#75)

packages/core/src/Stores/contract-store.js

@@ -13,6 +13,7 @@ import {
     BARRIER_LINE_STYLES,
     isBarrierSupported,
     getEndTime,
+    isTurbosContract,
 } from '@deriv/shared';
 import { getChartConfig } from './Helpers/logic';
 import { setLimitOrderBarriers, getLimitOrder } from './Helpers/limit-orders';
@@ -122,8 +123,9 @@ export default class ContractStore extends BaseStore {
         }
 
         const is_multiplier = isMultiplierContract(this.contract_info.contract_type);
+        const is_turbos = isTurbosContract(this.contract_info.contract_type);
 
-        if (is_multiplier && contract_info.contract_id && contract_info.limit_order) {
+        if ((is_multiplier || is_turbos) && contract_info.contract_id && contract_info.limit_order) {
             this.populateContractUpdateConfig(this.contract_info);
         }
     }
@@ -212,7 +214,9 @@ export default class ContractStore extends BaseStore {
     }
 
     updateLimitOrder() {
-        const limit_order = getLimitOrder(this);
+        const limit_order = isTurbosContract(this.contract_info.contract_type)
+            ? { take_profit: getLimitOrder(this).take_profit }
+            : getLimitOrder(this);
 
         WS.contractUpdate(this.contract_id, limit_order).then(response => {
             if (response.error) {

packages/shared/src/utils/constants/barriers.ts

@@ -13,6 +13,8 @@ export const CONTRACT_SHADES = {
     ASIAND: 'BELOW',
     MULTUP: 'ABOVE',
     MULTDOWN: 'BELOW',
+    TURBOSLONG: 'ABOVE',
+    TURBOSSHORT: 'BELOW',
 };
 
 // Default non-shade according to number of barriers

packages/shared/src/utils/constants/contract.tsx

@@ -128,17 +128,24 @@ export const getContractTypesConfig: TGetContractTypesConfig = symbol => ({
         ],
         config: { hide_duration: true },
     }, // hide Duration for Multiplier contracts for now
-    turbos: {
-        title: localize('Turbos'),
-        trade_types: ['TURBOSLONG', 'TURBOSSHORT'],
+    turboslong: {
+        title: localize('Long'),
+        trade_types: ['TURBOSLONG'],
         basis: ['stake'],
         barrier_count: 1,
-        components: ['take_profit'],
+        components: ['barrier', 'take_profit'],
+    },
+    turbosshort: {
+        title: localize('Short'),
+        trade_types: ['TURBOSSHORT'],
+        basis: ['stake'],
+        barrier_count: 1,
+        components: ['barrier', 'take_profit'],
     },
 });
 
 export const getContractCategoriesConfig = () => ({
-    Turbos: { name: localize('Turbos'), categories: ['turbos'] },
+    Turbos: { name: localize('Turbos'), categories: ['turboslong', 'turbosshort'] },
     Multipliers: { name: localize('Multipliers'), categories: ['multiplier'] },
     'Ups & Downs': {
         name: localize('Ups & Downs'),

packages/shared/src/utils/contract/contract.ts

@@ -50,6 +50,8 @@ export const hasContractEntered = (contract_info: TContractInfo) => !!contract_i
 
 export const isMultiplierContract = (contract_type: string) => /MULT/i.test(contract_type);
 
+export const isTurbosContract = (contract_type: string) => /TURBOS/i.test(contract_type);
+
 export const isCryptoContract = (underlying: string) => /^cry/.test(underlying);
 
 type TGetCurrentTick = TContractInfo & {

packages/trader/src/Modules/Trading/Components/Elements/purchase-fieldset.jsx

@@ -21,6 +21,7 @@ const PurchaseFieldset = ({
     is_multiplier,
     is_proposal_empty,
     is_proposal_error,
+    is_turbos,
     purchased_states_arr,
     onClickPurchase,
     onHoverPurchase,
@@ -38,7 +39,7 @@ const PurchaseFieldset = ({
             <PurchaseButton
                 buy_info={buy_info}
                 currency={currency}
-                info={info}
+                info={!is_turbos && info}
                 index={index}
                 has_deal_cancellation={is_multiplier && has_cancellation}
                 is_disabled={is_disabled}
@@ -154,6 +155,7 @@ PurchaseFieldset.propTypes = {
     is_multiplier: PropTypes.bool,
     is_proposal_empty: PropTypes.bool,
     is_proposal_error: PropTypes.bool,
+    is_turbos: PropTypes.bool,
     onClickPurchase: PropTypes.func,
     onHoverPurchase: PropTypes.func,
     purchased_states_arr: PropTypes.array,

packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount.jsx

@@ -64,6 +64,7 @@ const Amount = ({
     is_multiplier,
     is_nativepicker,
     is_single_currency,
+    is_turbos,
     has_equals_only,
     onChange,
     setCurrentFocus,
@@ -95,7 +96,7 @@ const Amount = ({
     return (
         <Fieldset
             className='trade-container__fieldset center-text'
-            header={is_multiplier ? localize('Stake') : undefined}
+            header={is_multiplier || is_turbos ? localize('Stake') : undefined}
             header_tooltip={
                 is_multiplier ? (
                     <Localize i18n_default_text='Your gross profit is the percentage change in market price times your stake and the multiplier chosen here.' />
@@ -191,6 +192,7 @@ Amount.propTypes = {
     is_multiplier: PropTypes.bool,
     is_nativepicker: PropTypes.bool,
     is_single_currency: PropTypes.bool,
+    is_turbos: PropTypes.bool,
     has_equals_only: PropTypes.bool,
     setCurrentFocus: PropTypes.func,
     onChange: PropTypes.func,
@@ -212,6 +214,7 @@ export default connect(({ modules, client, ui }) => ({
     is_equal: modules.trade.is_equal,
     is_single_currency: client.is_single_currency,
     is_multiplier: modules.trade.is_multiplier,
+    is_turbos: modules.trade.is_turbos,
     has_equals_only: modules.trade.has_equals_only,
     stop_out: modules.trade.stop_out,
     onChange: modules.trade.onChange,

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

@@ -18,6 +18,7 @@ const Purchase = ({
     purchased_states_arr,
     // is_purchase_locked,
     is_trade_enabled,
+    is_turbos,
     onClickPurchase,
     onHoverPurchase,
     // togglePurchaseLock,
@@ -62,6 +63,7 @@ const Purchase = ({
                 // is_purchase_confirm_on={is_purchase_confirm_on}
                 is_proposal_empty={is_proposal_empty}
                 is_proposal_error={is_proposal_error}
+                is_turbos={is_turbos}
                 purchased_states_arr={purchased_states_arr}
                 // is_purchase_locked={is_purchase_locked}
                 // togglePurchaseLock={togglePurchaseLock}
@@ -96,6 +98,7 @@ Purchase.propTypes = {
     // is_purchase_confirm_on    : PropTypes.bool,
     is_purchase_locked: PropTypes.bool,
     is_trade_enabled: PropTypes.bool,
+    is_turbos: PropTypes.bool,
     onClickPurchase: PropTypes.func,
     onHoverPurchase: PropTypes.func,
     proposal_info: PropTypes.object,
@@ -115,6 +118,7 @@ export default connect(({ modules, ui }) => ({
     is_purchase_enabled: modules.trade.is_purchase_enabled,
     is_trade_enabled: modules.trade.is_trade_enabled,
     is_multiplier: modules.trade.is_multiplier,
+    is_turbos: modules.trade.is_turbos,
     onClickPurchase: modules.trade.onPurchase,
     onHoverPurchase: modules.trade.onHoverPurchase,
     proposal_info: modules.trade.proposal_info,

packages/trader/src/Stores/Modules/SmartChart/Constants/barriers.js

@@ -13,6 +13,8 @@ export const CONTRACT_SHADES = {
     ASIAND: 'BELOW',
     MULTUP: 'ABOVE',
     MULTDOWN: 'BELOW',
+    TURBOSLONG: 'ABOVE',
+    TURBOSSHORT: 'BELOW',
 };
 
 // Default non-shade according to number of barriers

packages/trader/src/Stores/Modules/Trading/Helpers/proposal.js

@@ -1,4 +1,4 @@
-import { getDecimalPlaces, getPropertyValue, convertToUnix, toMoment } from '@deriv/shared';
+import { getDecimalPlaces, getPropertyValue, convertToUnix, isTurbosContract, toMoment } from '@deriv/shared';
 
 const isVisible = elem => !(!elem || (elem.offsetWidth === 0 && elem.offsetHeight === 0));
 
@@ -41,6 +41,10 @@ export const getProposalInfo = (store, response, obj_prev_contract_basis) => {
 
     const commission = proposal.commission;
     const cancellation = proposal.cancellation;
+    const turbos_details = {
+        barrier_choices: proposal.barrier_choices || response?.error?.details?.barrier_choices,
+        number_of_contracts: proposal.number_of_contracts,
+    };
 
     return {
         commission,
@@ -58,6 +62,7 @@ export const getProposalInfo = (store, response, obj_prev_contract_basis) => {
         profit: profit.toFixed(getDecimalPlaces(store.currency)),
         returns: `${returns.toFixed(2)}%`,
         stake,
+        ...turbos_details,
     };
 };
 
@@ -90,6 +95,7 @@ const setProposalMultiplier = (store, obj_multiplier) => {
 const createProposalRequestForContract = (store, type_of_contract) => {
     const obj_expiry = {};
     const obj_multiplier = {};
+    let limit_order;
 
     if (store.expiry_type === 'endtime') {
         const expiry_date = toMoment(store.expiry_date);
@@ -100,6 +106,10 @@ const createProposalRequestForContract = (store, type_of_contract) => {
         setProposalMultiplier(store, obj_multiplier);
     }
 
+    if (isTurbosContract(store.contract_type) && store.has_take_profit && store.take_profit) {
+        limit_order = { take_profit: +store.take_profit || 0 };
+    }
+
     return {
         proposal: 1,
         subscribe: 1,
@@ -120,5 +130,6 @@ const createProposalRequestForContract = (store, type_of_contract) => {
         }),
         ...(store.barrier_count === 2 && { barrier2: store.barrier_2 }),
         ...obj_multiplier,
+        limit_order,
     };
 };

packages/trader/src/Stores/Modules/Trading/trade-store.js

@@ -22,6 +22,7 @@ import {
     getBarrierPipSize,
     isBarrierSupported,
     removeBarrier,
+    isTurbosContract,
 } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { getValidationRules, getMultiplierValidationRules } from 'Stores/Modules/Trading/Constants/validation-rules';
@@ -131,6 +132,7 @@ export default class TradeStore extends BaseStore {
     cancellation_range_list = [];
 
     // Turbos trade params
+    number_of_contracts = 0;
     turbos_barrier_choices = [];
 
     // Mobile
@@ -275,6 +277,7 @@ export default class TradeStore extends BaseStore {
             requestProposal: action.bound,
             forgetAllProposal: action.bound,
             setMarketStatus: action.bound,
+            number_of_contracts: observable,
             onProposalResponse: action.bound,
             onChartBarrierChange: action.bound,
             onAllowEqualsChange: action.bound,
@@ -297,6 +300,7 @@ export default class TradeStore extends BaseStore {
             chartStateChange: action.bound,
             has_alternative_source: computed,
             is_multiplier: computed,
+            is_turbos: computed,
             getFirstOpenMarket: action.bound,
         });
 
@@ -343,7 +347,7 @@ export default class TradeStore extends BaseStore {
             () => [this.contract_type],
             () => {
                 this.root_store.portfolio.setContractType(this.contract_type);
-                if (this.contract_type === 'multiplier') {
+                if (this.contract_type === 'multiplier' || this.is_turbos) {
                     // when switching back to Multiplier contract, re-apply Stop loss / Take profit validation rules
                     Object.assign(this.validation_rules, getMultiplierValidationRules());
                 } else {
@@ -680,6 +684,7 @@ export default class TradeStore extends BaseStore {
             // create barrier only when it's available in response
             this.main_barrier = new ChartBarrierStore(barrier || high_barrier, low_barrier, this.onChartBarrierChange, {
                 color,
+                not_draggable: isTurbosContract(contract_type),
             });
             // this.main_barrier.updateBarrierShade(true, contract_type);
         } else {
@@ -1039,6 +1044,23 @@ export default class TradeStore extends BaseStore {
             this.stop_out = limit_order?.stop_out?.order_amount;
         }
 
+        if (this.is_turbos && this.proposal_info) {
+            const contract_key = this.contract_type.toUpperCase();
+            if (this.proposal_info[contract_key]) {
+                const { barrier_choices, number_of_contracts } = this.proposal_info[contract_key];
+                this.turbos_barrier_choices = barrier_choices || [];
+                this.number_of_contracts = number_of_contracts ?? 0;
+                if (barrier_choices && !barrier_choices.includes(this.barrier_1)) {
+                    this.onChange({
+                        target: {
+                            name: 'barrier_1',
+                            value: barrier_choices[0],
+                        },
+                    });
+                }
+            }
+        }
+
         if (!this.main_barrier || !(this.main_barrier.shade !== 'NONE_SINGLE')) {
             this.setMainBarrier(response.echo_req);
         }
@@ -1361,6 +1383,10 @@ export default class TradeStore extends BaseStore {
         return this.contract_type === 'multiplier';
     }
 
+    get is_turbos() {
+        return isTurbosContract(this.contract_type);
+    }
+
     async getFirstOpenMarket(markets_to_search) {
         if (this.active_symbols?.length) {
             return findFirstOpenMarket(this.active_symbols, markets_to_search);