fix: incorrect price change values for less than 24h old markets

apps/trading/client-pages/market/market-header-stats.tsx

@@ -56,7 +56,6 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
         <Last24hPriceChange
           marketId={market.id}
           decimalPlaces={market.decimalPlaces}
-          fallback={<span>-</span>}
         />
       </HeaderStat>
       <HeaderStat heading={t('Volume (24h)')} testId="market-volume">

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

@@ -1,7 +1,6 @@
 import {
   addDecimalsFormatNumber,
   formatNumberPercentage,
-  isNumeric,
   priceChange,
   priceChangePercentage,
 } from '@vegaprotocol/utils';
@@ -14,29 +13,24 @@ import { useT } from '../../use-t';
 
 interface Props {
   marketId?: string;
-  decimalPlaces?: number;
+  decimalPlaces: number;
-  initialValue?: string[];
   isHeader?: boolean;
   noUpdate?: boolean;
-  // render prop for no price change
-  fallback?: React.ReactNode;
 }
 
-export const Last24hPriceChange = ({
+export const Last24hPriceChange = ({ marketId, decimalPlaces }: Props) => {
-  marketId,
-  decimalPlaces,
-  initialValue,
-  fallback,
-}: Props) => {
   const t = useT();
   const { oneDayCandles, error, fiveDaysCandles } = useCandles({
     marketId,
   });
-  if (
+
-    fiveDaysCandles &&
+  const fallback = <span>{'-'}</span>;
-    fiveDaysCandles.length > 0 &&
+
-    (!oneDayCandles || oneDayCandles?.length === 0)
+  if (error || !oneDayCandles || !fiveDaysCandles) {
-  ) {
+    return fallback;
+  }
+
+  if (oneDayCandles.length < 24) {
     return (
       <Tooltip
         description={
@@ -51,16 +45,12 @@ export const Last24hPriceChange = ({
           </span>
         }
       >
-        <span>{fallback}</span>
+        {fallback}
       </Tooltip>
     );
   }
 
-  if (error || !isNumeric(decimalPlaces)) {
+  const candles = oneDayCandles?.map((c) => c.close) || [];
-    return <span>{fallback}</span>;
-  }
-
-  const candles = oneDayCandles?.map((c) => c.close) || initialValue || [];
   const change = priceChange(candles);
   const changePercentage = priceChangePercentage(candles);
 

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

@@ -18,7 +18,12 @@ export const useCandles = ({ marketId }: { marketId?: string }) => {
     skip: !marketId,
   });
 
-  const fiveDaysCandles = data?.filter(Boolean);
+  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)