diff --git a/apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarket.ts b/apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarket.ts index 734948d734c0..ed24e1b9184a 100644 --- a/apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarket.ts +++ b/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) => { diff --git a/apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarketCoin.ts b/apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarketCoin.ts index de257921709a..5d72eeb03847 100644 --- a/apps/ledger-live-desktop/src/renderer/screens/market/hooks/useMarketCoin.ts +++ b/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("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, diff --git a/apps/ledger-live-desktop/tests/models/MarketPage.ts b/apps/ledger-live-desktop/tests/models/MarketPage.ts index 42b515c6f30e..fe86f4187640 100644 --- a/apps/ledger-live-desktop/tests/models/MarketPage.ts +++ b/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 } diff --git a/apps/ledger-live-desktop/tests/specs/market/market.spec.ts b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts index ba4febbf9220..e1e01e3981d1 100644 --- a/apps/ledger-live-desktop/tests/specs/market/market.spec.ts +++ b/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"); }); diff --git a/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-btc-buy-page-darwin.png b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-btc-buy-page-darwin.png new file mode 100644 index 000000000000..a5a4341da6db Binary files /dev/null and b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-btc-buy-page-darwin.png differ diff --git a/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-btc-page-darwin.png b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-btc-page-darwin.png new file mode 100644 index 000000000000..aa520ccaf2fc Binary files /dev/null and b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-btc-page-darwin.png differ diff --git a/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-7d-range-darwin.png b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-7d-range-darwin.png new file mode 100644 index 000000000000..ef1132d70d26 Binary files /dev/null and b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-7d-range-darwin.png differ diff --git a/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-btc-star-darwin.png b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-btc-star-darwin.png new file mode 100644 index 000000000000..40d038df782b Binary files /dev/null and b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-btc-star-darwin.png differ diff --git a/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-filter-starred-darwin.png b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-filter-starred-darwin.png new file mode 100644 index 000000000000..b0c88fe9e3c6 Binary files /dev/null and b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-filter-starred-darwin.png differ diff --git a/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-no-scrollbar-darwin.png b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-no-scrollbar-darwin.png new file mode 100644 index 000000000000..44a7c0520c51 Binary files /dev/null and b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-no-scrollbar-darwin.png differ diff --git a/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-search-bi-darwin.png b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-search-bi-darwin.png new file mode 100644 index 000000000000..77afca938509 Binary files /dev/null and b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-search-bi-darwin.png differ diff --git a/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-thb-countervalue-darwin.png b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-thb-countervalue-darwin.png new file mode 100644 index 000000000000..eb8038fb88e3 Binary files /dev/null and b/apps/ledger-live-desktop/tests/specs/market/market.spec.ts-snapshots/market-page-thb-countervalue-darwin.png differ diff --git a/libs/ledger-live-common/src/market/api/api.ts b/libs/ledger-live-common/src/market/api/api.ts index b3be54e6272f..456dbfe22ce9 100644 --- a/libs/ledger-live-common/src/market/api/api.ts +++ b/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,