Fix search and stared api call + Countervalue/range in MarketCoin + f…

…ix e2E tests

apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarket.ts

@@ -39,7 +39,7 @@ export function useMarket() {
     supportedCoinsList: supportedCurrencies,
   });
 
-  const { range, starred = [], liveCompatible, orderBy, order } = marketParams;
+  const { range, starred = [], liveCompatible, orderBy, order, search = "" } = marketParams;
 
   const starFilterOn = starred.length > 0;
 
@@ -56,7 +56,8 @@ export function useMarket() {
   const currenciesLength = marketResult.data.length;
   const loading = marketResult.loading;
   const freshLoading = loading && !currenciesLength;
-  const itemCount = currenciesLength + 1;
+  const itemCount =
+    starred.length > 0 || search.length > 0 ? currenciesLength : currenciesLength + 1;
 
   const setCounterCurrency = useCallback(
     (ticker: string) => {

apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarketCoin.ts

@@ -1,7 +1,7 @@
 import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
-import { localeSelector, getCounterValueCode } from "~/renderer/reducers/settings";
-import { useCallback, useMemo, useState } from "react";
+import { localeSelector } from "~/renderer/reducers/settings";
+import { useCallback, useMemo } from "react";
 import { useTheme } from "styled-components";
 import { getCurrencyColor } from "~/renderer/getCurrencyColor";
 import {
@@ -11,16 +11,17 @@ import {
 } from "@ledgerhq/live-common/market/v2/useMarketDataProvider";
 import { rangeDataTable } from "@ledgerhq/live-common/market/utils/rangeDataTable";
 import { Page, useMarketActions } from "./useMarketActions";
-import { removeStarredMarketCoins, addStarredMarketCoins } from "~/renderer/actions/market";
-import { starredMarketCoinsSelector } from "~/renderer/reducers/market";
+import {
+  removeStarredMarketCoins,
+  addStarredMarketCoins,
+  setMarketOptions,
+} from "~/renderer/actions/market";
+import { marketParamsSelector, starredMarketCoinsSelector } from "~/renderer/reducers/market";
 
 const ranges = Object.keys(rangeDataTable).filter(k => k !== "1h");
 
 export const useMarketCoin = () => {
-  const [range, setRange] = useState<string>("24h");
-  const counterValueCurrencyLocal = useSelector(getCounterValueCode);
-  const [counterCurrency, setCounterCurrency] = useState(counterValueCurrencyLocal);
-
+  const marketParams = useSelector(marketParamsSelector);
   const { colors } = useTheme();
   const dispatch = useDispatch();
   const { currencyId } = useParams<{ currencyId: string }>();
@@ -31,6 +32,8 @@ export const useMarketCoin = () => {
   const isStarred = starredMarketCoins.includes(currencyId);
   const locale = useSelector(localeSelector);
 
+  const { counterCurrency = "usd", range = "24h" } = marketParams;
+
   const resCurrencyChartData = useCurrencyChartData({
     counterCurrency,
     id: currencyId,
@@ -85,14 +88,29 @@ export const useMarketCoin = () => {
     }
   }, [dispatch, isStarred, id]);
 
-  const changeRange = useCallback((range: string) => {
-    setRange(range);
-  }, []);
-
-  const changeCounterCurrency = useCallback((currency: string) => {
-    setCounterCurrency(currency);
-  }, []);
+  const changeRange = useCallback(
+    (range: string) => {
+      dispatch(
+        setMarketOptions({
+          range,
+        }),
+      );
+    },
+    [dispatch],
+  );
 
+  const changeCounterCurrency = useCallback(
+    (ticker: string) => {
+      dispatch(
+        setMarketOptions({
+          counterCurrency: supportedCounterCurrencies?.includes(ticker.toLowerCase())
+            ? ticker
+            : "usd",
+        }),
+      );
+    },
+    [dispatch, supportedCounterCurrencies],
+  );
   return {
     isStarred,
     locale,

apps/ledger-live-desktop/tests/models/MarketPage.ts

@@ -77,6 +77,10 @@ export class MarketPage {
 
   async waitForLoading() {
     await this.loadingPlaceholder.first().waitFor({ state: "detached" });
+  }
+
+  async waitForLoadingWithSwapbtn() {
+    await this.loadingPlaceholder.first().waitFor({ state: "detached" });
     await this.swapButton("btc").waitFor({ state: "attached" }); // swap buttons are displayed few seconds after
   }
 

apps/ledger-live-desktop/tests/specs/market/market.spec.ts

@@ -38,7 +38,7 @@ test("Market", async ({ page }) => {
 
   await test.step("go to market", async () => {
     await layout.goToMarket();
-    await marketPage.waitForLoading();
+    await marketPage.waitForLoadingWithSwapbtn();
     await expect.soft(page).toHaveScreenshot("market-page-no-scrollbar.png");
   });
 
@@ -113,13 +113,13 @@ test("Market", async ({ page }) => {
 
   await test.step("change countervalue", async () => {
     await marketPage.switchCountervalue("THB");
-    await marketPage.waitForLoading();
+    await marketPage.waitForLoadingWithSwapbtn();
     await expect.soft(page).toHaveScreenshot("market-page-thb-countervalue.png");
   });
 
   await test.step("change market range", async () => {
     await marketPage.switchMarketRange("7d");
-    await marketPage.waitForLoading();
+    await marketPage.waitForLoadingWithSwapbtn();
     await expect.soft(page).toHaveScreenshot("market-page-7d-range.png");
   });
 
@@ -136,8 +136,8 @@ test("Market", async ({ page }) => {
 
   await test.step("filter starred", async () => {
     await marketPage.toggleStarFilter();
-    await marketPage.waitForLoading();
-    await marketPage.waitForSearchBarToBeEmpty(); // windows was showing the search bar still containing text. This wait prevents that
+    await marketPage.waitForLoadingWithSwapbtn();
+    // await marketPage.waitForSearchBarToBeEmpty(); // windows was showing the search bar still containing text. This wait prevents that
     await expect.soft(page).toHaveScreenshot("market-page-filter-starred.png");
   });
 

libs/ledger-live-common/src/market/api/api.ts

@@ -180,6 +180,8 @@ export async function fetchList({
     `&sparkline=${sparkline ? "true" : "false"}&price_change_percentage=${range}` +
     `${ids.length > 0 ? `&page=1&&ids=${ids.toString()}` : `&page=${page}`}`;
 
+  if ((starred.length > 0 || search.length > 0) && ids.length === 0) return [];
+
   let { data } = await network({
     method: "GET",
     url,