maryia/80687/ticks_contract_details

packages/components/src/components/contract-card/contract-card-items/contract-update-form.jsx

@@ -64,8 +64,9 @@ const ContractUpdateForm = props => {
 
     const is_take_profit_valid = has_contract_update_take_profit ? contract_update_take_profit > 0 : isValid(stop_loss);
     const is_stop_loss_valid = has_contract_update_stop_loss ? contract_update_stop_loss > 0 : isValid(take_profit);
+    const is_valid_accu_contract_update = is_accumulator && !!is_take_profit_valid;
     const is_valid_contract_update =
-        !is_accumulator && is_valid_to_cancel ? false : !!(is_take_profit_valid || is_stop_loss_valid);
+        is_valid_accu_contract_update || (is_valid_to_cancel ? false : !!(is_take_profit_valid || is_stop_loss_valid));
 
     const getStateToCompare = _state => {
         const props_to_pick = [

packages/components/src/components/input-wth-checkbox/input-with-checkbox.jsx

@@ -11,7 +11,6 @@ const InputWithCheckbox = ({
     classNameInlinePrefix,
     classNameInput,
     className,
-    info_component,
     currency,
     current_focus,
     defaultChecked,
@@ -94,37 +93,34 @@ const InputWithCheckbox = ({
     };
 
     const input = (
-        <>
-            <InputField
-                className={className}
-                classNameInlinePrefix={classNameInlinePrefix}
-                classNameInput={classNameInput}
-                currency={currency}
-                current_focus={current_focus}
-                error_messages={error_messages}
-                error_message_alignment={error_message_alignment}
-                is_error_tooltip_hidden={isMobile()}
-                is_disabled={is_disabled ? 'disabled' : undefined}
-                fractional_digits={getDecimalPlaces(currency)}
-                id={`dc_${name}_input`}
-                inline_prefix={is_single_currency ? currency : null}
-                is_autocomplete_disabled
-                is_float={getDecimalPlaces(currency) > 0}
-                is_hj_whitelisted
-                is_incrementable
-                is_negative_disabled={is_negative_disabled}
-                max_length={10}
-                max_value={max_value}
-                name={name}
-                onChange={onChange}
-                onClickInputWrapper={is_disabled ? undefined : enableInputOnClick}
-                type='number'
-                inputmode='decimal'
-                value={value}
-                setCurrentFocus={setCurrentFocus}
-            />
-            {info_component}
-        </>
+        <InputField
+            className={className}
+            classNameInlinePrefix={classNameInlinePrefix}
+            classNameInput={classNameInput}
+            currency={currency}
+            current_focus={current_focus}
+            error_messages={error_messages}
+            error_message_alignment={error_message_alignment}
+            is_error_tooltip_hidden={isMobile()}
+            is_disabled={is_disabled ? 'disabled' : undefined}
+            fractional_digits={getDecimalPlaces(currency)}
+            id={`dc_${name}_input`}
+            inline_prefix={is_single_currency ? currency : null}
+            is_autocomplete_disabled
+            is_float={getDecimalPlaces(currency) > 0}
+            is_hj_whitelisted
+            is_incrementable
+            is_negative_disabled={is_negative_disabled}
+            max_length={10}
+            max_value={max_value}
+            name={name}
+            onChange={onChange}
+            onClickInputWrapper={is_disabled ? undefined : enableInputOnClick}
+            type='number'
+            inputmode='decimal'
+            value={value}
+            setCurrentFocus={setCurrentFocus}
+        />
     );
 
     const checkbox = (
@@ -189,7 +185,6 @@ InputWithCheckbox.propTypes = {
     current_focus: PropTypes.string,
     defaultChecked: PropTypes.bool,
     error_messages: PropTypes.array,
-    info_component: PropTypes.node,
     is_checkbox_hidden: PropTypes.bool,
     is_negative_disabled: PropTypes.bool,
     is_single_currency: PropTypes.bool,

packages/core/src/Stores/Helpers/chart-markers.js

@@ -7,11 +7,14 @@ import {
     createMarkerSpotMiddle,
     getSpotCount,
 } from './chart-marker-helpers';
-import { getEndTime, unique } from '@deriv/shared';
+import { getEndTime, isAccumulatorContract, unique } from '@deriv/shared';
 import { MARKER_TYPES_CONFIG } from '../Constants/markers';
 import { getChartType } from './logic';
 
 export const createChartMarkers = contract_info => {
+    const { contract_type, status, tick_stream } = contract_info;
+    const should_show_10_last_ticks = contract_type === 'ACCU' && status === 'open' && tick_stream.length === 10;
+
     let markers = [];
     if (contract_info) {
         const end_time = getEndTime(contract_info);
@@ -24,9 +27,11 @@ export const createChartMarkers = contract_info => {
             const spot_markers = Object.keys(marker_spots).map(type => marker_spots[type](contract_info));
             markers.push(...spot_markers);
         }
-        const line_markers = Object.keys(marker_lines).map(type => marker_lines[type](contract_info));
-        markers.push(...line_markers);
-
+        if (!should_show_10_last_ticks) {
+            // don't draw start/end lines if only 10 last ticks are displayed
+            const line_markers = Object.keys(marker_lines).map(type => marker_lines[type](contract_info));
+            markers.push(...line_markers);
+        }
         markers = markers.filter(m => !!m);
     }
     markers.forEach(marker => {
@@ -61,12 +66,33 @@ const addLabelAlignment = (tick, idx, arr) => {
 };
 
 const createTickMarkers = contract_info => {
-    const tick_stream = unique(contract_info.tick_stream, 'epoch').map(addLabelAlignment);
+    const is_accumulator = isAccumulatorContract(contract_info.contract_type);
+    // TODO: maryia-binary: refactor this if BE adds entry_spot to tick_stream for ACCU:
+    // accumulators open contract tick_stream contains 10 last ticks only & for now does not contain entry spot
+    const accu_entry_tick = {
+        epoch: contract_info.entry_tick_time,
+        flag: 'highlight_tick',
+        name: 'Entry Spot',
+        tick: contract_info.entry_spot,
+        tick_display_value: contract_info.entry_spot_display_value,
+    };
+    const accu_tick_stream =
+        contract_info.tick_stream.length && contract_info.tick_stream.length < 10
+            ? [accu_entry_tick, ...contract_info.tick_stream]
+            : contract_info.tick_stream;
+    const available_ticks = is_accumulator
+        ? contract_info.audit_details?.all_ticks || accu_tick_stream
+        : contract_info.tick_stream;
+    const tick_stream = unique(available_ticks, 'epoch').map(addLabelAlignment);
     const result = [];
 
     tick_stream.forEach((tick, idx) => {
-        const is_entry_spot = idx === 0 && +tick.epoch !== contract_info.exit_tick_time;
-        const is_middle_spot = idx > 0 && +tick.epoch !== +contract_info.exit_tick_time;
+        const isEntrySpot = _tick => +_tick.epoch === contract_info.entry_tick_time;
+        const is_entry_spot =
+            +tick.epoch !== contract_info.exit_tick_time && (is_accumulator ? isEntrySpot(tick) : idx === 0);
+        // accumulators entry spot will be missing from tick_stream when contract is lasting for longer than 10 ticks
+        const entry_spot_index = is_accumulator ? tick_stream.findIndex(isEntrySpot) : 0;
+        const is_middle_spot = idx > entry_spot_index && +tick.epoch !== +contract_info.exit_tick_time;
         const is_exit_spot =
             +tick.epoch === +contract_info.exit_tick_time ||
             getSpotCount(contract_info, idx) === contract_info.tick_count;

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

@@ -124,8 +124,9 @@ export default class ContractStore extends BaseStore {
         }
 
         const is_multiplier = isMultiplierContract(this.contract_info.contract_type);
+        const is_accumulator = isAccumulatorContract(this.contract_info.contract_type);
 
-        if (is_multiplier && contract_info.contract_id && contract_info.limit_order) {
+        if ((is_accumulator || is_multiplier) && contract_info.contract_id && contract_info.limit_order) {
             this.populateContractUpdateConfig(this.contract_info);
         }
     }
@@ -216,7 +217,9 @@ export default class ContractStore extends BaseStore {
     }
 
     updateLimitOrder() {
-        const limit_order = getLimitOrder(this);
+        const limit_order = isAccumulatorContract(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/trader/src/Modules/Contract/Containers/contract-replay.jsx

@@ -223,7 +223,7 @@ export default connect(({ common, contract_replay, ui }) => {
 // CHART -----------------------------------------
 
 const Chart = props => {
-    const AccumulatorsMarkerWithBarriers = allMarkers[props.accumulators_barriers_marker.type];
+    const AccumulatorsMarkerWithBarriers = allMarkers[props.accumulators_barriers_marker?.type];
 
     const isBottomWidgetVisible = () => {
         return isDesktop() && props.is_digit_contract;
@@ -353,14 +353,17 @@ const ReplayChart = connect(({ modules, ui, common, contract_replay }) => {
         assetInformation: false, // ui.is_chart_asset_info_visible,
         isHighestLowestMarkerEnabled: false, // TODO: Pending UI
     };
+    const { contract_type, status, tick_stream } = contract_store.contract_info;
+    const should_show_10_last_ticks = contract_type === 'ACCU' && status === 'open' && tick_stream.length === 10;
+    const allowed_scroll_to_epoch = should_show_10_last_ticks ? tick_stream[0].epoch : contract_config.scroll_to_epoch;
 
     return {
         accumulators_barriers_marker: contract_store.marker,
         end_epoch: contract_config.end_epoch,
         chart_type: contract_config.chart_type,
-        start_epoch: contract_config.start_epoch,
+        start_epoch: should_show_10_last_ticks ? tick_stream[0].epoch : contract_config.start_epoch,
         granularity: contract_config.granularity,
-        scroll_to_epoch: allow_scroll_to_epoch ? contract_config.scroll_to_epoch : undefined,
+        scroll_to_epoch: allow_scroll_to_epoch ? allowed_scroll_to_epoch : undefined,
         settings,
         is_mobile: ui.is_mobile,
         is_socket_opened: common.is_socket_opened,

packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-widget.jsx

@@ -95,12 +95,7 @@ const ContractTypeWidget = ({ is_equal, name, value, list, onChange, languageCha
 
         const categories = [];
 
-        const is_all_categories_button_needed =
-            (multipliers_category.length > 0 && options_category.length > 0) ||
-            (multipliers_category.length > 0 && accumulators_category.length) ||
-            (options_category.length > 0 && accumulators_category.length);
-
-        if (is_all_categories_button_needed) {
+        if (list.length > 0) {
             categories.push({
                 label: localize('All'),
                 contract_categories: [...list],

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

@@ -356,7 +356,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.contract_type === 'accumulator') {
                     // when switching back to Multiplier contract, re-apply Stop loss / Take profit validation rules
                     Object.assign(this.validation_rules, getMultiplierValidationRules());
                 } else {
@@ -494,7 +494,7 @@ export default class TradeStore extends BaseStore {
             await Symbol.onChangeSymbolAsync(this.symbol);
             runInAction(() => {
                 const contract_categories = ContractType.getContractCategories();
-                // delete 'if' statement when accumulators are supported for real account
+                // TODO: maryia-binary: delete 'if' statement when accumulators are supported for real account
                 if (!this.root_store.client.is_virtual) {
                     delete contract_categories.contract_types_list.Accumulators;
                 }