fix(market-banner): handle null market change percentages

Author: mcayuelas-ledger

.changeset/strange-turtles-occur.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": patch
+"@ledgerhq/live-common": patch
+---
+
+Fix Market Banner crash when the markets API returns null price-change percentages. Market change fields are now typed as `number | null` to match the API, and the desktop trending tile renders a neutral placeholder instead of calling `.toFixed` on a missing value.

apps/ledger-live-desktop/src/mvvm/features/MarketBanner/__tests__/PerformanceIndicator.test.tsx

@@ -19,12 +19,12 @@ describe("PerformanceIndicator", () => {
     expect(container.firstChild).toHaveClass("text-error");
   });
 
-  it("should render zero percentage with + sign and success color", () => {
+  it("should render zero percentage with + sign and neutral color", () => {
     const value = { priceChangePercentage24h: 0 };
     const { container } = render(<PerformanceIndicator value={value} />);
 
     expect(screen.getByText("+0.00%")).toBeInTheDocument();
-    expect(container.firstChild).toHaveClass("text-success");
+    expect(container.firstChild).toHaveClass("text-muted");
   });
 
   it("should format percentage to 2 decimal places", () => {
@@ -33,4 +33,17 @@ describe("PerformanceIndicator", () => {
 
     expect(screen.getByText("+12.35%")).toBeInTheDocument();
   });
+
+  it.each([
+    ["null", null],
+    ["undefined", undefined],
+    ["NaN", Number.NaN],
+  ])("should render a neutral placeholder when the value is %s", (_label, change) => {
+    const value = { priceChangePercentage24h: change };
+    const { container } = render(<PerformanceIndicator value={value} />);
+
+    expect(screen.getByText("—")).toBeInTheDocument();
+    expect(container.firstChild).toHaveClass("text-muted");
+    expect(screen.queryByText(/%$/)).not.toBeInTheDocument();
+  });
 });

apps/ledger-live-desktop/src/mvvm/features/MarketBanner/components/PerformanceIndicator.tsx

@@ -1,17 +1,24 @@
 import React from "react";
 import { MarketItemPerformer } from "@ledgerhq/live-common/market/utils/types";
+import { trendPercentageBody3Styles } from "LLD/shared/trendPercentageStyles";
 
 type PerformanceIndicatorProps = {
   value: Pick<MarketItemPerformer, "priceChangePercentage24h">;
 };
 
 export const PerformanceIndicator = ({ value }: PerformanceIndicatorProps) => {
-  const textColorClass = value.priceChangePercentage24h >= 0 ? "text-success" : "text-error";
+  const change = value.priceChangePercentage24h;
+
+  if (change == null || !Number.isFinite(change)) {
+    return <div className={trendPercentageBody3Styles({ variant: "neutral" })}>—</div>;
+  }
+
+  const variant = change > 0 ? "positive" : change < 0 ? "negative" : "neutral";
 
   return (
-    <div className={`${textColorClass} body-3`}>
-      {value.priceChangePercentage24h >= 0 ? "+" : ""}
-      {value.priceChangePercentage24h.toFixed(2)}%
+    <div className={trendPercentageBody3Styles({ variant })}>
+      {change >= 0 ? "+" : ""}
+      {change.toFixed(2)}%
     </div>
   );
 };

apps/ledger-live-desktop/src/mvvm/features/MarketBanner/hooks/useMarketBannerViewModel.ts

@@ -51,11 +51,11 @@ function toPerformer(currency: MarketCurrencyData): MarketItemPerformer {
     ledgerIds: currency.ledgerIds,
     image: currency.image ?? "",
     price: currency.price,
-    priceChangePercentage1h: change[KeysPriceChange.hour] ?? 0,
-    priceChangePercentage24h: change[KeysPriceChange.day] ?? 0,
-    priceChangePercentage7d: change[KeysPriceChange.week] ?? 0,
-    priceChangePercentage30d: change[KeysPriceChange.month] ?? 0,
-    priceChangePercentage1y: change[KeysPriceChange.year] ?? 0,
+    priceChangePercentage1h: change[KeysPriceChange.hour] ?? null,
+    priceChangePercentage24h: change[KeysPriceChange.day] ?? null,
+    priceChangePercentage7d: change[KeysPriceChange.week] ?? null,
+    priceChangePercentage30d: change[KeysPriceChange.month] ?? null,
+    priceChangePercentage1y: change[KeysPriceChange.year] ?? null,
   };
 }
 

libs/ledger-live-common/src/market/utils/__tests__/index.test.ts

@@ -64,7 +64,6 @@ describe("getChangePercentage", () => {
 
   it("should return 0 when percentage is null", () => {
     const dataWithNull = { ...createMockMarketPerformer(), priceChangePercentage24h: null };
-    // @ts-expect-error testing null value handling
     expect(getChangePercentage(dataWithNull, "day")).toBe(0);
   });
 

libs/ledger-live-common/src/market/utils/resolveRangePriceChange.ts

@@ -35,7 +35,7 @@ export function resolveRangePriceChange(options: {
   selectedRange: string;
   chartPrices: readonly number[];
   price?: number;
-  priceChangePercentage?: Record<KeysPriceChange, number>;
+  priceChangePercentage?: Record<KeysPriceChange, number | null>;
   priceChangeKeyExtensions?: Partial<Record<string, KeysPriceChange>>;
 }): RangePriceChange {
   const { selectedRange, chartPrices, price, priceChangePercentage, priceChangeKeyExtensions } =

libs/ledger-live-common/src/market/utils/types.ts

@@ -89,7 +89,7 @@ export type MarketCurrencyData = {
   low24h: number;
   ticker: string;
   price: number;
-  priceChangePercentage: Record<KeysPriceChange, number>;
+  priceChangePercentage: Record<KeysPriceChange, number | null>;
   marketCapChangePercentage24h: number;
   circulatingSupply: number;
   totalSupply?: number;
@@ -137,13 +137,13 @@ export type MarketItemResponse = {
   maxSupply: number;
   name: string;
   price: number;
-  priceChange24h: number;
-  priceChangePercentage1h: number;
-  priceChangePercentage24h: number;
-  priceChangePercentage30d: number;
-  priceChangePercentage7d: number;
-  priceChangePercentage6m?: number;
-  priceChangePercentage1y: number;
+  priceChange24h: number | null;
+  priceChangePercentage1h: number | null;
+  priceChangePercentage24h: number | null;
+  priceChangePercentage30d: number | null;
+  priceChangePercentage7d: number | null;
+  priceChangePercentage6m?: number | null;
+  priceChangePercentage1y: number | null;
   sparkline: number[];
   ticker: string;
   totalSupply: number;
@@ -157,11 +157,11 @@ export type MarketItemPerformer = {
   id: string;
   name: string;
   ticker: string;
-  priceChangePercentage1h: number;
-  priceChangePercentage24h: number;
-  priceChangePercentage7d: number;
-  priceChangePercentage30d: number;
-  priceChangePercentage1y: number;
+  priceChangePercentage1h: number | null;
+  priceChangePercentage24h: number | null;
+  priceChangePercentage7d: number | null;
+  priceChangePercentage30d: number | null;
+  priceChangePercentage1y: number | null;
   image: string;
   price: number;
   ledgerIds: string[];