diff --git a/apps/trading/client-pages/market/market-header-stats.tsx b/apps/trading/client-pages/market/market-header-stats.tsx index c9ee0dee6..ffb327a16 100644 --- a/apps/trading/client-pages/market/market-header-stats.tsx +++ b/apps/trading/client-pages/market/market-header-stats.tsx @@ -56,7 +56,6 @@ export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => { -} /> 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 828841bf4..ab45f7975 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 @@ -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; - initialValue?: string[]; + decimalPlaces: number; isHeader?: boolean; noUpdate?: boolean; - // render prop for no price change - fallback?: React.ReactNode; } -export const Last24hPriceChange = ({ - marketId, - decimalPlaces, - initialValue, - fallback, -}: Props) => { +export const Last24hPriceChange = ({ marketId, decimalPlaces }: Props) => { const t = useT(); const { oneDayCandles, error, fiveDaysCandles } = useCandles({ marketId, }); - if ( - fiveDaysCandles && - fiveDaysCandles.length > 0 && - (!oneDayCandles || oneDayCandles?.length === 0) - ) { + + const fallback = {'-'}; + + if (error || !oneDayCandles || !fiveDaysCandles) { + return fallback; + } + + if (oneDayCandles.length < 24) { return ( } > - {fallback} + {fallback} ); } - if (error || !isNumeric(decimalPlaces)) { - return {fallback}; - } - - const candles = oneDayCandles?.map((c) => c.close) || initialValue || []; + const candles = oneDayCandles?.map((c) => c.close) || []; const change = priceChange(candles); const changePercentage = priceChangePercentage(candles); diff --git a/libs/markets/src/lib/hooks/use-candles.ts b/libs/markets/src/lib/hooks/use-candles.ts index 572036cfc..d22adc991 100644 --- a/libs/markets/src/lib/hooks/use-candles.ts +++ b/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)