Revert "Akmal / feat: remove unnecessary API calls while loading chart (

binary-com#7814)" This reverts commit 2e54d5e.
maryia-deriv · Jul 6, 2023 · a0c5268 · a0c5268
1 parent 3a8dab9
commit a0c5268
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 10 deletions.
diff --git 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
@@ -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/...ages/trader/src/App/Components/Elements/ContractDrawer/market-closed-contract-overlay.jsx b/...ages/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
@@ -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={