chore(trading): refactor last price change render prop

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

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

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(