From a0c5268d2dfc29a920123403e2954be91b817120 Mon Sep 17 00:00:00 2001
From: maryia-deriv <maryia@binary.com>
Date: Thu, 6 Jul 2023 11:58:05 +0300
Subject: [PATCH] Revert "Akmal / feat: remove unnecessary API calls while
 loading chart (#7814)"

This reverts commit 2e54d5e5ddae2862fb5f3696dcaa8e05f7d799f2.
---
 .../core/src/Stores/contract-replay-store.js  |  1 +
 .../ContractDrawer/contract-drawer-card.jsx   |  4 +--
 .../market-closed-contract-overlay.jsx        | 33 +++++++++++++++----
 .../Contract/Containers/contract-replay.jsx   |  2 +-
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/Stores/contract-replay-store.js b/packages/core/src/Stores/contract-replay-store.js
index b553a04231c9..8badf7a621e1 100644
--- a/packages/core/src/Stores/contract-replay-store.js
+++ b/packages/core/src/Stores/contract-replay-store.js
@@ -102,6 +102,7 @@ export default class ContractReplayStore extends BaseStore {
             this.contract_id = contract_id;
             this.contract_store = new ContractStore(this.root_store, { contract_id });
             this.subscribeProposalOpenContract();
+            WS.storage.activeSymbols('brief');
             WS.setOnReconnect(() => {
                 if (!this.root_store.client.is_switching) {
                     this.subscribeProposalOpenContract();
diff --git a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx
index 5e703ddead56..6f7c2ecd4fe9 100644
--- a/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx
+++ b/packages/trader/src/App/Components/Elements/ContractDrawer/contract-drawer-card.jsx
@@ -44,7 +44,7 @@ const ContractDrawerCard = observer(
         const { getContractById } = contract_trade;
         const [hover_ref, should_hide_closed_overlay] = useHover();
 
-        const { profit, validation_error } = contract_info;
+        const { profit, underlying: symbol } = contract_info;
         const is_sold = !!getEndTime(contract_info);
         const display_name = getSymbolDisplayName(
             active_symbols,
@@ -135,7 +135,7 @@ const ContractDrawerCard = observer(
                                 'contract-card__market-closed--hidden': isDesktop() && should_hide_closed_overlay,
                             })}
                         >
-                            <MarketClosedContractOverlay validation_error={validation_error} />
+                            <MarketClosedContractOverlay symbol={symbol} />
                         </div>
                     )}
                     {contract_el}
diff --git a/packages/trader/src/App/Components/Elements/ContractDrawer/market-closed-contract-overlay.jsx b/packages/trader/src/App/Components/Elements/ContractDrawer/market-closed-contract-overlay.jsx
index 8d3d47aeb479..19a778aa189a 100644
--- a/packages/trader/src/App/Components/Elements/ContractDrawer/market-closed-contract-overlay.jsx
+++ b/packages/trader/src/App/Components/Elements/ContractDrawer/market-closed-contract-overlay.jsx
@@ -1,14 +1,33 @@
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+// eslint-disable-next-line import/no-useless-path-segments
+import MarketCountdownTimer from '../market-countdown-timer.jsx';
 
-const MarketClosedContractOverlay = ({ validation_error }) => (
-    <div className='contract-card__market-closed'>
-        <Text align='center' as='p' className='contract-card__market-closed__title' weight='bold'>
-            {validation_error}
-        </Text>
-    </div>
-);
+const MarketClosedContractOverlay = ({ symbol }) => {
+    const [is_timer_loading, setIsTimerLoading] = React.useState(true);
+
+    return (
+        <div
+            className={classNames('contract-card__market-closed', {
+                'contract-card__market-closed--loading': is_timer_loading,
+            })}
+        >
+            <Text
+                align='center'
+                as='p'
+                className='contract-card__market-closed__title'
+                styles={{ color: 'var(--brand-orange)' }}
+                weight='bold'
+            >
+                <Localize i18n_default_text='Market is closed' />
+            </Text>
+            <MarketCountdownTimer setIsTimerLoading={setIsTimerLoading} symbol={symbol} />
+        </div>
+    );
+};
 
 MarketClosedContractOverlay.propTypes = {
     symbol: PropTypes.string,
diff --git a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
index e16951054df5..9e60ac98aca6 100644
--- a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
+++ b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
@@ -274,7 +274,7 @@ const ReplayChart = observer(({ is_accumulator_contract }) => {
                 // forcing chart reload when start_epoch changes to an earlier epoch for ACCU closed contract:
                 is_accumulator_contract && end_epoch && start_epoch < prev_start_epoch
             }
-            shouldFetchTradingTimes={false}
+            shouldFetchTradingTimes={!end_epoch}
             yAxisMargin={getChartYAxisMargin()}
             anchorChartToLeft={isMobile()}
             shouldFetchTickHistory={