From 2c1a3d106c7592df194c80bb45776aa4a4b2aabd Mon Sep 17 00:00:00 2001
From: Madalina Raicu <madalina@raygroup.uk>
Date: Wed, 7 Feb 2024 14:39:25 +0000
Subject: [PATCH] chore(trading): refactor last price change render prop

---
 .../market/market-header-stats.tsx            |  4 +++-
 .../market-header/mobile-market-header.tsx    |  1 -
 .../last-24h-price-change.tsx                 | 19 +++++--------------
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/apps/trading/client-pages/market/market-header-stats.tsx b/apps/trading/client-pages/market/market-header-stats.tsx
index b916ad5fe..1b72f5a9c 100644
--- a/apps/trading/client-pages/market/market-header-stats.tsx
+++ b/apps/trading/client-pages/market/market-header-stats.tsx
@@ -54,7 +54,9 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
         <Last24hPriceChange
           marketId={market.id}
           decimalPlaces={market.decimalPlaces}
-        />
+        >
+          <span>-</span>
+        </Last24hPriceChange>
       </HeaderStat>
       <HeaderStat heading={t('Volume (24h)')} testId="market-volume">
         <Last24hVolume
diff --git a/apps/trading/components/market-header/mobile-market-header.tsx b/apps/trading/components/market-header/mobile-market-header.tsx
index 280505a38..df1687415 100644
--- a/apps/trading/components/market-header/mobile-market-header.tsx
+++ b/apps/trading/components/market-header/mobile-market-header.tsx
@@ -71,7 +71,6 @@ 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 0c8ff3c88..26eb78bec 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
@@ -18,15 +18,15 @@ interface Props {
   initialValue?: string[];
   isHeader?: boolean;
   noUpdate?: boolean;
-  // to render nothing instead of '-' when there is no price change
-  hideZero?: boolean;
+  // render prop for no price change
+  children?: React.ReactNode;
 }
 
 export const Last24hPriceChange = ({
   marketId,
   decimalPlaces,
   initialValue,
-  hideZero,
+  children,
 }: Props) => {
   const t = useT();
   const { oneDayCandles, error, fiveDaysCandles } = useCandles({
@@ -37,10 +37,6 @@ export const Last24hPriceChange = ({
     fiveDaysCandles.length > 0 &&
     (!oneDayCandles || oneDayCandles?.length === 0)
   ) {
-    // render nothing instead of '-' when there is no price change
-    if (hideZero) {
-      return null;
-    }
     return (
       <Tooltip
         description={
@@ -55,24 +51,19 @@ export const Last24hPriceChange = ({
           </span>
         }
       >
-        <span>-</span>
+        <span>{children}</span>
       </Tooltip>
     );
   }
 
   if (error || !isNumeric(decimalPlaces)) {
-    return <span>-</span>;
+    return <span>{children}</span>;
   }
 
   const candles = oneDayCandles?.map((c) => c.close) || initialValue || [];
   const change = priceChange(candles);
   const changePercentage = priceChangePercentage(candles);
 
-  // render nothing instead of '-' when there is no price change
-  if (!change && !changePercentage && hideZero) {
-    return null;
-  }
-
   return (
     <span
       className={classNames(