Maryia/78473/part 2 prepare for api + improvements (#18)

* chore: improved barriers without contract and open contract label

* chore: prepared data for api connection

packages/components/src/components/contract-card/contract-card-items/contract-card-header.jsx

@@ -30,13 +30,13 @@ const ContractCardHeader = ({
     const {
         growth_rate,
         underlying,
-        current_ticks_count,
         multiplier,
         contract_type,
         shortcode,
         purchase_time,
         date_expiry,
         tick_count,
+        tick_passed,
     } = contract_info;
     const is_sold = !!contract_info.is_sold || is_contract_sold;
     const is_accumulator = contract_type === 'ACCU' || contract_type === 'DECCU';
@@ -100,7 +100,7 @@ const ContractCardHeader = ({
                 </MobileWrapper>
             </div>
             {!is_sold && is_accumulator && (
-                <TickCounterBar current_tick={current_ticks_count} max_ticks_duration={tick_count} />
+                <TickCounterBar current_tick={tick_passed} max_ticks_duration={tick_count} />
             )}
             <MobileWrapper>
                 <div className='dc-progress-slider--completed' />

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

@@ -24,6 +24,10 @@ export default class ContractTradeStore extends BaseStore {
     @observable granularity = +LocalStore.get('contract_trade.granularity') || 0;
     @observable chart_type = LocalStore.get('contract_trade.chart_type') || 'mountain';
 
+    // Accumulators data:
+    @observable accumulators_high_barrier = '';
+    @observable accumulators_low_barrier = '';
+
     constructor(root_store) {
         super({
             root_store,
@@ -96,11 +100,7 @@ export default class ContractTradeStore extends BaseStore {
     @computed
     get markers_array() {
         let markers = [];
-        const {
-            barrier_1,
-            barrier_2,
-            contract_type: trade_type,
-        } = JSON.parse(localStorage.getItem('trade_store')) || {};
+        const { contract_type: trade_type } = JSON.parse(localStorage.getItem('trade_store')) || {};
         markers = this.applicable_contracts()
             .map(c => c.marker)
             .filter(m => m)
@@ -113,7 +113,7 @@ export default class ContractTradeStore extends BaseStore {
                 type: 'TickContract',
                 contract_info: { is_accumulators_trade_without_contract: true },
                 key: 'accumulators_barriers_without_contract',
-                price_array: [barrier_1, barrier_2],
+                price_array: [this.accumulators_high_barrier, this.accumulators_low_barrier],
                 epoch_array: [this.current_spot_time, this.current_spot_time],
             });
         }

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

@@ -37,7 +37,7 @@ export default class PortfolioStore extends BaseStore {
     // barriers
     @observable barriers = [];
     @observable main_barrier = null;
-    @observable contract_type = '';
+    @observable contract_type = 'accumulator'; // TODO: remove - temporary value!
 
     getPositionById = createTransformer(id => this.positions.find(position => +position.id === +id));
 

packages/shared/src/utils/helpers/dummy_accumulators_data.js

@@ -1,11 +1,11 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable prefer-const */
-const dummy_current_time = 1665130804; // should be an epoch of some real tick!
+const dummy_current_time = 1665570506; // should be an epoch of some real tick!
 const dummy_start_time = dummy_current_time - 7;
 const dummy_end_time = dummy_current_time + 6;
 
-const high_barrier = 6569.9;
-const low_barrier = 6567;
+const high_barrier = 6534;
+const low_barrier = 6532;
 const tick_1_price = low_barrier + 0.1;
 const tick_2_price = low_barrier + 0.15;
 const tick_3_price = low_barrier + 0.5;
@@ -36,7 +36,7 @@ const break_out_history_stats = [
     ...new Array(33).fill(5554),
     1114,
 ];
-const current_ticks_count = 4;
+const tick_passed = 4;
 const tick_count = 1000;
 const symbol = 'R_10';
 const symbol_display_name = 'Volatility 10 Index';
@@ -51,6 +51,12 @@ let profit = +0.15;
 let profit_percentage = +1.5;
 let is_sold = 0; // 0 || 1
 
+//losing:
+// contract_status = 'open'; // 'lost', 'won' or 'open'
+// profit = -10;
+// profit_percentage = -100;
+// is_sold = 0; // 0 || 1
+
 // let first_time;
 // const winLoseAndOpenContractInSec = (ms1, ms2, ms3) => {
 //     setInterval(() => {
@@ -63,12 +69,12 @@ let is_sold = 0; // 0 || 1
 // is_sold = 1; // 0 || 1
 //         }, ms1);
 //         setTimeout(() => {
-//             contract_status = 'lost'; // 'lost', 'won' or 'open'
-//             position_status = 'loss'; // 'profit' or 'loss'
-//             result = 'lost'; // 'won' or 'lost'
-//             profit = -10;
-//             profit_percentage = -100;
-//             is_sold = 1; // 0 || 1
+// contract_status = 'lost'; // 'lost', 'won' or 'open'
+// position_status = 'loss'; // 'profit' or 'loss'
+// result = 'lost'; // 'won' or 'lost'
+// profit = -100;
+// profit_percentage = -100;
+// is_sold = 1; // 0 || 1
 //         }, ms2);
 //         setTimeout(() => {
 //             contract_status = 'open'; // 'lost', 'won' or 'open'
@@ -127,7 +133,7 @@ export const getDummyPOCResponseForACCU = time_now => {
             is_valid_to_cancel: 0,
             is_valid_to_sell: 1,
             limit_order,
-            current_ticks_count,
+            tick_passed,
             longcode,
             growth_rate: 0.01,
             profit,
@@ -186,7 +192,7 @@ export const getDummyPortfolioContractsForACCU = time_now => {
             currency: 'USD',
             date_start: dummy_start_time,
             expiry_time: dummy_end_time,
-            current_ticks_count,
+            tick_passed,
             longcode,
             payout: 27.45,
             purchase_time: dummy_start_time,
@@ -289,7 +295,7 @@ export const getDummyAllPositionsForACCU = time_now => {
                 is_valid_to_cancel: 0,
                 is_valid_to_sell: 1,
                 limit_order,
-                current_ticks_count,
+                tick_passed,
                 longcode,
                 growth_rate: 0.01,
                 payout: 27.45,
@@ -411,7 +417,7 @@ export const getDummyProposalInfoForDECCU = (growth_rate, response) => {
 };
 
 export const dummy_accu_in_contracts_for_available = {
-    accumulator_growth_rates: [0.01, 0.02, 0.03, 0.04, 0.05],
+    growth_rate_range: [0.01, 0.02, 0.03, 0.04, 0.05],
     barrier_category: 'american',
     barriers: 2,
     contract_category: 'accumulator',
@@ -430,7 +436,7 @@ export const dummy_accu_in_contracts_for_available = {
 };
 
 export const dummy_deccu_in_contracts_for_available = {
-    accumulator_growth_rates: [0.01, 0.02, 0.03, 0.04, 0.05],
+    growth_rate_range: [0.01, 0.02, 0.03, 0.04, 0.05],
     barrier_category: 'american',
     barriers: 2,
     contract_category: 'accumulator',

packages/trader/src/App/Components/Elements/ContractAudit/contract-details.jsx

@@ -32,15 +32,15 @@ const ContractDetails = ({ contract_end_time, contract_info, duration, duration_
         exit_tick_time,
         profit,
         date_start,
-        current_ticks_count,
         tick_count,
+        tick_passed,
         transaction_ids: { buy, sell } = {},
     } = contract_info;
 
     const is_profit = profit >= 0;
     const cancellation_price = getCancellationPrice(contract_info);
     const ticks_duration_text = isAccumulatorContract(contract_type)
-        ? `${current_ticks_count}/${tick_count} ${localize('ticks')}`
+        ? `${tick_passed}/${tick_count} ${localize('ticks')}`
         : `${tick_count} ${tick_count < 2 ? localize('tick') : localize('ticks')}`;
 
     const getLabel = () => {

packages/trader/src/Modules/SmartChart/Components/all-markers.jsx

@@ -406,6 +406,7 @@ const TickContract = RawMarkerMaker(
             ctx.save();
             if (current_spot_time.visible && !is_sold) {
                 // draw 3 text items with different font size and weight:
+                let profit_text_width = 0;
                 [
                     {
                         text: profit_text,
@@ -422,7 +423,7 @@ const TickContract = RawMarkerMaker(
                     {
                         text: `${sign}${profit_percentage}%`,
                         font: '12px IBM Plex Sans',
-                        left: current_spot_time.left + 58,
+                        left: current_spot_time.left + 32,
                         top: current_spot_time.top + 16,
                     },
                 ].forEach(({ text, font, left, top }) => {
@@ -434,9 +435,11 @@ const TickContract = RawMarkerMaker(
                         font,
                         text_align: 'start',
                         color: getColor({ status: 'open', profit }),
-                        left: text === profit_text ? left : left + ctx.measureText(profit_text).width,
+                        left: text === profit_text ? left : left + profit_text_width,
                         top,
                     });
+                    profit_text_width =
+                        text === profit_text ? ctx.measureText(profit_text).actualBoundingBoxRight : profit_text_width;
                 });
                 ctx.restore();
             }

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Accumulator/__tests__/accumulator.spec.js

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import Accumulator from '../accumulator';
 
 const mock_connect_props = {
-    accumulator_rates_list: [0.01, 0.02, 0.03, 0.04, 0.05],
+    accumulator_range_list: [0.01, 0.02, 0.03, 0.04, 0.05],
     onChange: jest.fn(),
     growth_rate: 0.01,
 };

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Accumulator/accumulator.jsx

@@ -8,11 +8,11 @@ import { connect } from 'Stores/connect';
 import { getGrowthRatePercentage } from '@deriv/shared';
 import classNames from 'classnames';
 
-const Accumulator = ({ accumulator_rates_list, growth_rate, onChange }) => {
-    // splitting accumulator_rates_list into rows containing 5 values each:
-    const arr_arr_numbers = accumulator_rates_list.reduce((acc, _el, index) => {
+const Accumulator = ({ accumulator_range_list, growth_rate, onChange }) => {
+    // splitting accumulator_range_list into rows containing 5 values each:
+    const arr_arr_numbers = accumulator_range_list.reduce((acc, _el, index) => {
         if (index % 5 === 0) {
-            acc.push(accumulator_rates_list.slice(index, index + 5));
+            acc.push(accumulator_range_list.slice(index, index + 5));
         }
         return acc;
     }, []);
@@ -39,13 +39,13 @@ const Accumulator = ({ accumulator_rates_list, growth_rate, onChange }) => {
 };
 
 Accumulator.propTypes = {
-    accumulator_rates_list: MobxPropTypes.arrayOrObservableArray,
+    accumulator_range_list: MobxPropTypes.arrayOrObservableArray,
     growth_rate: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     onChange: PropTypes.func,
 };
 
 export default connect(({ modules }) => ({
-    accumulator_rates_list: modules.trade.accumulator_rates_list,
+    accumulator_range_list: modules.trade.accumulator_range_list,
     growth_rate: modules.trade.growth_rate,
     onChange: modules.trade.onChange,
 }))(Accumulator);

packages/trader/src/Modules/Trading/Containers/radio-group-options-modal.jsx

@@ -7,7 +7,7 @@ import MultiplierOptions from 'Modules/Trading/Containers/Multiplier/multiplier-
 import RadioGroupWithInfoMobile from 'Modules/Trading/Components/Form/RadioGroupWithInfoMobile';
 
 const RadioGroupOptionsModal = ({
-    accumulator_rates_list,
+    accumulator_range_list,
     enableApp,
     disableApp,
     growth_rate,
@@ -45,7 +45,7 @@ const RadioGroupOptionsModal = ({
                                 'Your payout will grow by {{growth_rate}}% at every tick, as long as the price change doesn’t exceed the barriers of the previous tick.',
                                 { growth_rate: getGrowthRatePercentage(growth_rate) }
                             )}
-                            items_list={accumulator_rates_list.map(value => ({
+                            items_list={accumulator_range_list.map(value => ({
                                 text: `${getGrowthRatePercentage(value)}%`,
                                 value,
                             }))}
@@ -60,7 +60,7 @@ const RadioGroupOptionsModal = ({
 };
 
 export default connect(({ modules, ui }) => ({
-    accumulator_rates_list: modules.trade.accumulator_rates_list,
+    accumulator_range_list: modules.trade.accumulator_range_list,
     growth_rate: modules.trade.growth_rate,
     onChange: modules.trade.onChange,
     enableApp: ui.enableApp,

packages/trader/src/Stores/Modules/Trading/Helpers/contract-type.js

@@ -129,7 +129,7 @@ export const ContractType = (() => {
                 config.trade_types = buildTradeTypesConfig(contract, config.trade_types);
                 config.barriers = buildBarriersConfig(contract, config.barriers);
                 config.forward_starting_dates = buildForwardStartingConfig(contract, config.forward_starting_dates);
-                config.accumulator_growth_rates = contract.accumulator_growth_rates;
+                config.growth_rate_range = contract.growth_rate_range;
                 config.multiplier_range = contract.multiplier_range;
                 config.cancellation_range = contract.cancellation_range;
 
@@ -180,7 +180,7 @@ export const ContractType = (() => {
         const obj_duration_units_list = getDurationUnitsList(contract_type, obj_start_type.contract_start_type);
         const obj_duration_units_min_max = getDurationMinMax(contract_type, obj_start_type.contract_start_type);
 
-        const obj_accumulator_rates_list = getAccumulatorRates(contract_type, growth_rate);
+        const obj_accumulator_range_list = getAccumulatorRange(contract_type, growth_rate);
         const obj_multiplier_range_list = getMultiplierRange(contract_type, multiplier);
         const obj_cancellation = getCancellation(contract_type, cancellation_duration, symbol);
         const obj_expiry_type = getExpiryType(obj_duration_units_list, expiry_type);
@@ -197,7 +197,7 @@ export const ContractType = (() => {
             ...obj_duration_units_list,
             ...obj_duration_units_min_max,
             ...obj_expiry_type,
-            ...obj_accumulator_rates_list,
+            ...obj_accumulator_range_list,
             ...obj_multiplier_range_list,
             ...obj_cancellation,
             ...obj_equal,
@@ -545,12 +545,12 @@ export const ContractType = (() => {
         };
     };
 
-    const getAccumulatorRates = (contract_type, growth_rate) => {
+    const getAccumulatorRange = (contract_type, growth_rate) => {
         const arr_growth_rates =
-            getPropertyValue(available_contract_types, [contract_type, 'config', 'accumulator_growth_rates']) || [];
+            getPropertyValue(available_contract_types, [contract_type, 'config', 'growth_rate_range']) || [];
 
         return {
-            accumulator_rates_list: arr_growth_rates,
+            accumulator_range_list: arr_growth_rates,
             growth_rate: getArrayDefaultValue(arr_growth_rates, growth_rate),
         };
     };

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

@@ -119,7 +119,7 @@ export default class TradeStore extends BaseStore {
     @observable should_show_active_symbols_loading = false;
 
     // Accumulator trade params
-    @observable accumulator_rates_list = [];
+    @observable accumulator_range_list = [];
     @observable growth_rate;
     @observable maximum_payout = 0;
     @observable maximum_ticks = 0;
@@ -994,8 +994,8 @@ export default class TradeStore extends BaseStore {
             this.tick_size_barrier = tick_size_barrier;
             this.maximum_ticks = maximum_ticks;
             this.maximum_payout = maximum_payout;
-            this.barrier_1 = high_barrier;
-            this.barrier_2 = low_barrier;
+            this.barrier_1 = this.root_store.contract_trade.accumulators_high_barrier = high_barrier;
+            this.barrier_2 = this.root_store.contract_trade.accumulators_low_barrier = low_barrier;
         }
 
         if (!this.main_barrier || this.main_barrier?.shade) {