From c1bb60ed633ec5bd8f3c12d35b8745632b1968dc Mon Sep 17 00:00:00 2001 From: maryia-deriv Date: Fri, 27 Jan 2023 00:58:59 +0300 Subject: [PATCH 1/2] fix: barriers --- .../Modules/SmartChart/Components/all-markers.jsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/trader/src/Modules/SmartChart/Components/all-markers.jsx b/packages/trader/src/Modules/SmartChart/Components/all-markers.jsx index e255f077d56c..1eb1a9714af4 100644 --- a/packages/trader/src/Modules/SmartChart/Components/all-markers.jsx +++ b/packages/trader/src/Modules/SmartChart/Components/all-markers.jsx @@ -211,7 +211,7 @@ const TickContract = RawMarkerMaker( granularity, contract_info: { contract_type, - // exit_tick_time, + current_spot_time, status, profit, is_accumulators_trade_without_contract, @@ -247,8 +247,9 @@ const TickContract = RawMarkerMaker( const exit = ticks[ticks.length - 1]; const previous_tick = ticks[ticks.length - 2] || exit; const opacity = is_sold ? calc_opacity(start.left, exit.left) : ''; + const time_now = Date.now() / 1000; - if (start && is_accumulators_trade_without_contract) { + if (start && is_accumulators_trade_without_contract && (time_now - current_spot_time > 1.3 || !status)) { // draw 2 barriers with a shade in-between only draw_shaded_barriers({ ctx, @@ -264,7 +265,12 @@ const TickContract = RawMarkerMaker( if (is_accumulators_contract) { // draw custom barrier shadows with borders and labels for accumulators: - if (barrier && barrier_2 && previous_tick && (status === 'open' || is_in_contract_details)) { + if ( + barrier && + barrier_2 && + previous_tick && + (status === 'open' || (status && time_now - current_spot_time <= 1.3) || is_in_contract_details) + ) { // draw 2 barriers with a shade between them for an open ACCU contract draw_shaded_barriers({ ctx, From 743313d590ebac1963ff0b165f945529f8c7ee86 Mon Sep 17 00:00:00 2001 From: maryia-deriv Date: Sat, 28 Jan 2023 21:38:31 +0300 Subject: [PATCH 2/2] chore: added contract barrier delay to show loss distinctively --- .../Markers/accumulators-chart-elements.jsx | 4 ++-- .../Markers/accumulators-profit-loss-tooltip.jsx | 11 +++++++---- .../SmartChart/Components/all-markers.jsx | 7 +++---- .../src/Stores/Modules/Trading/trade-store.js | 16 ++++++++++++++-- 4 files changed, 26 insertions(+), 12 deletions(-) diff --git a/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-chart-elements.jsx b/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-chart-elements.jsx index 5fbcd2a6376b..d83445482789 100644 --- a/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-chart-elements.jsx +++ b/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-chart-elements.jsx @@ -17,8 +17,8 @@ const AccumulatorsChartElements = ({ ); const last_contract_info = accumulators_positions.slice().pop()?.contract_info; const should_highlight_tick_without_contract = !!current_symbol_spot_time && is_stats_highlighted; - const should_highlight_contract_tick = - last_contract_info?.status === 'lost' && current_symbol_spot_time === last_contract_info?.exit_tick_time; + const diff = Date.now() / 1000 - last_contract_info?.exit_tick_time; + const should_highlight_contract_tick = last_contract_info?.status === 'lost' && diff <= 1.3; const should_highlight_tick = should_highlight_tick_without_contract || should_highlight_contract_tick; const current_spot = should_highlight_contract_tick ? last_contract_info?.exit_tick : current_symbol_spot; const current_spot_time = should_highlight_contract_tick diff --git a/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-profit-loss-tooltip.jsx b/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-profit-loss-tooltip.jsx index 6410a6468f58..0dbbc52afdbc 100644 --- a/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-profit-loss-tooltip.jsx +++ b/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-profit-loss-tooltip.jsx @@ -9,7 +9,6 @@ import AccumulatorsProfitLossText from './accumulators-profit-loss-text'; const AccumulatorsProfitLossTooltip = ({ alignment = 'right', - current_spot, current_spot_time, className = 'sc-accumulators-profit-loss-tooltip', currency, @@ -17,6 +16,7 @@ const AccumulatorsProfitLossTooltip = ({ exit_tick_time, high_barrier, is_sold, + low_barrier, profit, }) => { const [is_tooltip_open, setIsTooltipOpen] = React.useState(false); @@ -68,15 +68,18 @@ const AccumulatorsProfitLossTooltip = ({ }; if (typeof profit !== 'number') return null; - if (!is_sold && current_spot_time && high_barrier) + const time_now = Date.now() / 1000; + const diff = time_now - exit_tick_time; + if ((!is_sold || diff <= 1.3) && current_spot_time && high_barrier) { return ( ); + } return is_sold && exit_tick_time ? ( 1.3 || !status)) { + if (start && is_accumulators_trade_without_contract) { // draw 2 barriers with a shade in-between only draw_shaded_barriers({ ctx, @@ -269,7 +268,7 @@ const TickContract = RawMarkerMaker( barrier && barrier_2 && previous_tick && - (status === 'open' || (status && time_now - current_spot_time <= 1.3) || is_in_contract_details) + (status === 'open' || Date.now() / 1000 - exit_tick_time <= 1.3 || is_in_contract_details) ) { // draw 2 barriers with a shade between them for an open ACCU contract draw_shaded_barriers({ diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.js b/packages/trader/src/Stores/Modules/Trading/trade-store.js index 7053b55767d9..9eda6f02b951 100644 --- a/packages/trader/src/Stores/Modules/Trading/trade-store.js +++ b/packages/trader/src/Stores/Modules/Trading/trade-store.js @@ -22,6 +22,7 @@ import { getBarrierPipSize, isBarrierSupported, removeBarrier, + isAccumulatorContract, } from '@deriv/shared'; import { localize } from '@deriv/translations'; import { getValidationRules, getMultiplierValidationRules } from 'Stores/Modules/Trading/Constants/validation-rules'; @@ -1098,8 +1099,19 @@ export default class TradeStore extends BaseStore { spot, spot_time, } = this.proposal_info.ACCU; - this.root_store.contract_trade.current_symbol_spot = spot; - this.root_store.contract_trade.current_symbol_spot_time = spot_time; + const accu_contracts = this.root_store.portfolio.all_positions.filter( + ({ contract_info, type }) => isAccumulatorContract(type) && contract_info.underlying === this.symbol + ); + const { status, exit_tick_time } = accu_contracts[accu_contracts.length - 1]?.contract_info || {}; + const diff = Date.now() / 1000 - exit_tick_time; + if (status === 'open' || (status && diff < 1.3)) { + // hide barriers from proposal while last contract barriers are shown + this.root_store.contract_trade.current_symbol_spot = null; + this.root_store.contract_trade.current_symbol_spot_time = null; + } else { + this.root_store.contract_trade.current_symbol_spot = spot; + this.root_store.contract_trade.current_symbol_spot_time = spot_time; + } this.ticks_history_stats = getUpdatedTicksHistoryStats({ previous_ticks_history_stats: this.ticks_history_stats, new_ticks_history_stats: ticks_stayed_in,