From 87579c0c5f95f67caec46d39a001d1a4ab09ff5d Mon Sep 17 00:00:00 2001
From: Madalina Raicu <madalina@raygroup.uk>
Date: Fri, 2 Feb 2024 15:55:44 +0000
Subject: [PATCH] fix(trading): update price change

---
 .../market-header/mobile-market-header.tsx          |  1 +
 .../last-24h-price-change/last-24h-price-change.tsx | 13 +++++++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/trading/components/market-header/mobile-market-header.tsx b/apps/trading/components/market-header/mobile-market-header.tsx
index df1687415..280505a38 100644
--- a/apps/trading/components/market-header/mobile-market-header.tsx
+++ b/apps/trading/components/market-header/mobile-market-header.tsx
@@ -71,6 +71,7 @@ export const MobileMarketHeader = () => {
                   <Last24hPriceChange
                     marketId={data.id}
                     decimalPlaces={data.decimalPlaces}
+                    hideZero={true}
                   />
                 </span>
                 <MarketMarkPrice
diff --git a/libs/markets/src/lib/components/last-24h-price-change/last-24h-price-change.tsx b/libs/markets/src/lib/components/last-24h-price-change/last-24h-price-change.tsx
index bfbb5438a..0c8ff3c88 100644
--- a/libs/markets/src/lib/components/last-24h-price-change/last-24h-price-change.tsx
+++ b/libs/markets/src/lib/components/last-24h-price-change/last-24h-price-change.tsx
@@ -11,7 +11,6 @@ import { useCandles } from '../../hooks/use-candles';
 import BigNumber from 'bignumber.js';
 import classNames from 'classnames';
 import { useT } from '../../use-t';
-import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 
 interface Props {
   marketId?: string;
@@ -19,15 +18,17 @@ interface Props {
   initialValue?: string[];
   isHeader?: boolean;
   noUpdate?: boolean;
+  // to render nothing instead of '-' when there is no price change
+  hideZero?: boolean;
 }
 
 export const Last24hPriceChange = ({
   marketId,
   decimalPlaces,
   initialValue,
+  hideZero,
 }: Props) => {
   const t = useT();
-  const { isMobile } = useScreenDimensions();
   const { oneDayCandles, error, fiveDaysCandles } = useCandles({
     marketId,
   });
@@ -36,8 +37,8 @@ export const Last24hPriceChange = ({
     fiveDaysCandles.length > 0 &&
     (!oneDayCandles || oneDayCandles?.length === 0)
   ) {
-    // if there is no change and no percentage, we don't show anything on mobile
-    if (isMobile) {
+    // render nothing instead of '-' when there is no price change
+    if (hideZero) {
       return null;
     }
     return (
@@ -67,8 +68,8 @@ export const Last24hPriceChange = ({
   const change = priceChange(candles);
   const changePercentage = priceChangePercentage(candles);
 
-  // if there is no change and no percentage, we don't show anything on mobile
-  if (!change && !changePercentage && isMobile) {
+  // render nothing instead of '-' when there is no price change
+  if (!change && !changePercentage && hideZero) {
     return null;
   }