From 2e54d5e5ddae2862fb5f3696dcaa8e05f7d799f2 Mon Sep 17 00:00:00 2001
From: Akmal Djumakhodjaev <akmal@binary.com>
Date: Wed, 5 Jul 2023 19:21:37 +0800
Subject: [PATCH] Akmal / feat: remove unnecessary API calls while loading
 chart (#7814)

* feat: remove unnecessary API calls while loading chart

* chore: remove classnames

---------

Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>
---
 .../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, 10 insertions(+), 30 deletions(-)

diff --git a/packages/core/src/Stores/contract-replay-store.js b/packages/core/src/Stores/contract-replay-store.js
index 8badf7a621e1..b553a04231c9 100644
--- a/packages/core/src/Stores/contract-replay-store.js
+++ b/packages/core/src/Stores/contract-replay-store.js
@@ -102,7 +102,6 @@ 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 6f7c2ecd4fe9..5e703ddead56 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, underlying: symbol } = contract_info;
+        const { profit, validation_error } = 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 symbol={symbol} />
+                            <MarketClosedContractOverlay validation_error={validation_error} />
                         </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 19a778aa189a..8d3d47aeb479 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,33 +1,14 @@
-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 = ({ 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>
-    );
-};
+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>
+);
 
 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 daac8ae993e1..b9a31503e9d6 100644
--- a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
+++ b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
@@ -272,7 +272,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={!end_epoch}
+            shouldFetchTradingTimes={false}
             yAxisMargin={getChartYAxisMargin()}
             anchorChartToLeft={isMobile()}
             shouldFetchTickHistory={