diff --git a/ui/pages/perps/market-list/components/market-row/market-row.test.tsx b/ui/pages/perps/market-list/components/market-row/market-row.test.tsx index 9146e28462df..befd45cd34c0 100644 --- a/ui/pages/perps/market-list/components/market-row/market-row.test.tsx +++ b/ui/pages/perps/market-list/components/market-row/market-row.test.tsx @@ -65,6 +65,13 @@ describe('MarketRow', () => { expect(screen.getByText('+2.5%')).toBeInTheDocument(); }); + it('appends % to change24hPercent when stream omits it', () => { + const market = createMockMarket({ change24hPercent: '+2.5' }); + renderWithProvider(, mockStore); + + expect(screen.getByText('+2.5%')).toBeInTheDocument(); + }); + it('displays the max leverage', () => { renderWithProvider(, mockStore); diff --git a/ui/pages/perps/market-list/components/market-row/market-row.tsx b/ui/pages/perps/market-list/components/market-row/market-row.tsx index dea5786a99b5..0a816390bdf8 100644 --- a/ui/pages/perps/market-list/components/market-row/market-row.tsx +++ b/ui/pages/perps/market-list/components/market-row/market-row.tsx @@ -13,6 +13,7 @@ import { PerpsTokenLogo } from '../../../../../components/app/perps/perps-token- import { getDisplaySymbol, getChangeColor, + formatSignedChangePercent, } from '../../../../../components/app/perps/utils'; import { useFormatters } from '../../../../../hooks/useFormatters'; import type { PerpsMarketData } from '../../../../../components/app/perps/types'; @@ -44,7 +45,7 @@ const getMetricValue = ( case 'volume': return `${market.volume} Vol`; case 'priceChange': - return market.change24hPercent; + return formatSignedChangePercent(market.change24hPercent); case 'fundingRate': if (market.fundingRate === undefined) { return 'N/A'; @@ -153,7 +154,7 @@ export const MarketRow: React.FC = ({ {market.price} - {market.change24hPercent} + {formatSignedChangePercent(market.change24hPercent)}