fix(trading): 24hr price and volume in header (#5908)

libs/i18n/src/locales/en/markets.json

@@ -1,8 +1,6 @@
 {
   "{{liquidityPriceRange}} of mid price": "{{liquidityPriceRange}} of mid price",
   "{{probability}} probability price bounds": "{{probability}} probability price bounds",
-  "24 hour change is unavailable at this time. The price change in the last 120 hours is:": "24 hour change is unavailable at this time. The price change in the last 120 hours is:",
-  "24 hour change is unavailable at this time. The volume change in the last 120 hours is {{candleVolumeValue}} for a total of {{candleVolumePrice}} {{quoteUnit}}": "24 hour change is unavailable at this time. The volume change in the last 120 hours is {{candleVolumeValue}} for a total of {{candleVolumePrice}} {{quoteUnit}}",
   "A concept derived from traditional markets. It is a calculated value for the ‘current market price’ on a market.": "A concept derived from traditional markets. It is a calculated value for the ‘current market price’ on a market.",
   "A number that will be calculated by an appropriate stochastic risk model, dependent on the type of risk model used and its parameters.": "A number that will be calculated by an appropriate stochastic risk model, dependent on the type of risk model used and its parameters.",
   "A sliding penalty for how much an LP bond is slashed if an LP fails to reach the minimum SLA. This is a network parameter.": "A sliding penalty for how much an LP bond is slashed if an LP fails to reach the minimum SLA. This is a network parameter.",
@@ -51,9 +49,6 @@
   "Market": "Market",
   "Market data": "Market data",
   "Market governance": "Market governance",
-  "Market has not been active for 24 hours. The price change between {{start}} and {{end}} is:": "Market has not been active for 24 hours. The price change between {{start}} and {{end}} is:",
-  "Market has not been active for 24 hours. The volume traded between {{start}} and {{end}} is:": "Market has not been active for 24 hours. The volume traded between {{start}} and {{end}} is:",
-  "Market has not been active for 24 hours. The volume traded between {{start}} and {{end}} is {{candleVolumeValue}} for a total of {{candleVolumePrice}} {{quoteUnit}}": "Market has not been active for 24 hours. The volume traded between {{start}} and {{end}} is {{candleVolumeValue}} for a total of {{candleVolumePrice}} {{quoteUnit}}",
   "Market ID": "Market ID",
   "Market price": "Market price",
   "Market specification": "Market specification",

libs/markets/src/lib/components/last-24h-price-change/last-24h-price-change.tsx

@@ -2,16 +2,14 @@ import { type ReactNode } from 'react';
 import {
   addDecimalsFormatNumber,
   formatNumberPercentage,
-  getDateTimeFormat,
   priceChange,
   priceChangePercentage,
 } from '@vegaprotocol/utils';
-import { PriceChangeCell, signedNumberCssClass } from '@vegaprotocol/datagrid';
+import { signedNumberCssClass } from '@vegaprotocol/datagrid';
-import { Tooltip, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { useCandles } from '../../hooks/use-candles';
 import BigNumber from 'bignumber.js';
 import classNames from 'classnames';
-import { useT } from '../../use-t';
 
 interface Props {
   marketId?: string;
@@ -24,7 +22,6 @@ export const Last24hPriceChange = ({
   decimalPlaces,
   fallback,
 }: Props) => {
-  const t = useT();
   const { oneDayCandles, fiveDaysCandles, error } = useCandles({
     marketId,
   });
@@ -35,56 +32,6 @@ export const Last24hPriceChange = ({
     return nonIdeal;
   }
 
-  if (fiveDaysCandles.length < 24) {
-    return (
-      <Tooltip
-        description={
-          <span className="justify-start">
-            {t(
-              'Market has not been active for 24 hours. The price change between {{start}} and {{end}} is:',
-              {
-                start: getDateTimeFormat().format(
-                  new Date(fiveDaysCandles[0].periodStart)
-                ),
-                end: getDateTimeFormat().format(
-                  new Date(
-                    fiveDaysCandles[fiveDaysCandles.length - 1].periodStart
-                  )
-                ),
-              }
-            )}
-            <PriceChangeCell
-              candles={fiveDaysCandles.map((c) => c.close) || []}
-              decimalPlaces={decimalPlaces}
-            />
-          </span>
-        }
-      >
-        <span>{nonIdeal}</span>
-      </Tooltip>
-    );
-  }
-
-  if (oneDayCandles.length < 24) {
-    return (
-      <Tooltip
-        description={
-          <span className="justify-start">
-            {t(
-              '24 hour change is unavailable at this time. The price change in the last 120 hours is:'
-            )}{' '}
-            <PriceChangeCell
-              candles={fiveDaysCandles.map((c) => c.close) || []}
-              decimalPlaces={decimalPlaces}
-            />
-          </span>
-        }
-      >
-        <span>{nonIdeal}</span>
-      </Tooltip>
-    );
-  }
-
   const candles = oneDayCandles?.map((c) => c.close) || [];
   const change = priceChange(candles);
   const changePercentage = priceChangePercentage(candles);

libs/markets/src/lib/components/last-24h-volume/last-24h-volume.tsx

@@ -2,7 +2,6 @@ import { calcCandleVolume, calcCandleVolumePrice } from '../../market-utils';
 import {
   addDecimalsFormatNumber,
   formatNumber,
-  getDateTimeFormat,
   isNumeric,
 } from '@vegaprotocol/utils';
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
@@ -37,83 +36,6 @@ export const Last24hVolume = ({
     return nonIdeal;
   }
 
-  if (fiveDaysCandles.length < 24) {
-    const candleVolume = calcCandleVolume(fiveDaysCandles);
-    const candleVolumePrice = calcCandleVolumePrice(
-      fiveDaysCandles,
-      marketDecimals,
-      positionDecimalPlaces
-    );
-    const candleVolumeValue =
-      candleVolume && isNumeric(positionDecimalPlaces)
-        ? addDecimalsFormatNumber(
-            candleVolume,
-            positionDecimalPlaces,
-            formatDecimals
-          )
-        : '-';
-    return (
-      <Tooltip
-        description={
-          <div>
-            <span className="flex flex-col">
-              {t(
-                'Market has not been active for 24 hours. The volume traded between {{start}} and {{end}} is {{candleVolumeValue}} for a total of {{candleVolumePrice}} {{quoteUnit}}',
-                {
-                  start: getDateTimeFormat().format(
-                    new Date(fiveDaysCandles[0].periodStart)
-                  ),
-                  end: getDateTimeFormat().format(
-                    new Date(
-                      fiveDaysCandles[fiveDaysCandles.length - 1].periodStart
-                    )
-                  ),
-                  candleVolumeValue,
-                  candleVolumePrice,
-                  quoteUnit,
-                }
-              )}
-            </span>
-          </div>
-        }
-      >
-        <span>{nonIdeal}</span>
-      </Tooltip>
-    );
-  }
-
-  if (oneDayCandles.length < 24) {
-    const candleVolume = calcCandleVolume(fiveDaysCandles);
-    const candleVolumePrice = calcCandleVolumePrice(
-      fiveDaysCandles,
-      marketDecimals,
-      positionDecimalPlaces
-    );
-    const candleVolumeValue =
-      candleVolume && isNumeric(positionDecimalPlaces)
-        ? addDecimalsFormatNumber(
-            candleVolume,
-            positionDecimalPlaces,
-            formatDecimals
-          )
-        : '-';
-    return (
-      <Tooltip
-        description={
-          <div>
-            <span className="flex flex-col">
-              {t(
-                '24 hour change is unavailable at this time. The volume change in the last 120 hours is {{candleVolumeValue}} for a total of ({{candleVolumePrice}} {{quoteUnit}})',
-                { candleVolumeValue, candleVolumePrice, quoteUnit }
-              )}
-            </span>
-          </div>
-        }
-      >
-        <span>{nonIdeal}</span>
-      </Tooltip>
-    );
-  }
   const candleVolume = oneDayCandles
     ? calcCandleVolume(oneDayCandles)
     : initialValue;

libs/markets/src/lib/hooks/use-candles.ts

@@ -8,7 +8,7 @@ export const useCandles = ({ marketId }: { marketId?: string }) => {
   const fiveDaysAgo = useFiveDaysAgo();
   const yesterday = useYesterday();
   const since = new Date(fiveDaysAgo).toISOString();
-  const { data, error } = useThrottledDataProvider({
+  const { data: fiveDaysCandles, error } = useThrottledDataProvider({
     dataProvider: marketCandlesProvider,
     variables: {
       marketId: marketId || '',
@@ -18,13 +18,6 @@ export const useCandles = ({ marketId }: { marketId?: string }) => {
     skip: !marketId,
   });
 
-  const fiveDaysCandles = data?.filter((c) => {
-    if (c.open === '' || c.close === '' || c.high === '' || c.close === '') {
-      return false;
-    }
-    return true;
-  });
-
   const oneDayCandles = fiveDaysCandles?.filter((candle) =>
     isCandleLessThan24hOld(candle, yesterday)
   );