[FEAT] : Improve Market for Backend (#7363)

* [FEAT] : Improve Market for Backend

* Sort ids

* Lowercase in hook

.changeset/cyan-melons-fetch.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/live-common": patch
+---
+
+Improve Search for Market when >=2 chars

.changeset/polite-bananas-relax.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Lowercase search on market

.changeset/rare-windows-rhyme.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Lower case search + add debounce on Market Search

apps/ledger-live-desktop/src/renderer/reducers/market.ts

@@ -16,7 +16,7 @@ const initialState: MarketState = {
     search: "",
     liveCompatible: false,
     page: 1,
-    counterCurrency: "usd",
+    counterCurrency: "USD",
   },
   currentPage: 1,
 };

apps/ledger-live-desktop/src/renderer/screens/market/components/SearchInputComponent.tsx

@@ -1,8 +1,10 @@
+import { useDebounce } from "@ledgerhq/live-common/hooks/useDebounce";
 import { Flex, SearchInput } from "@ledgerhq/react-ui";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { track } from "~/renderer/analytics/segment";
 import { withV3StyleProvider } from "~/renderer/styles/StyleProviderV3";
 
 const SearchContainer = styled(Flex).attrs({ flexShrink: "1" })`
@@ -18,12 +20,27 @@ type Props = {
 
 function SearchInputComponent({ search, updateSearch }: Props) {
   const { t } = useTranslation();
+
+  const [inputSearch, setInputSearch] = useState(search);
+  const debouncedSearch = useDebounce(inputSearch, 300);
+
+  useEffect(() => {
+    track("Page Market Query", {
+      currencyName: debouncedSearch,
+    });
+    updateSearch(debouncedSearch ? debouncedSearch.trim() : "");
+  }, [debouncedSearch, updateSearch]);
+
+  useEffect(() => {
+    setInputSearch(search);
+  }, [search]);
+
   return (
     <SearchContainer>
       <SearchInput
         data-test-id="market-search-input"
-        value={search}
-        onChange={updateSearch}
+        value={inputSearch}
+        onChange={setInputSearch}
         placeholder={t("common.search")}
         clearable
       />

apps/ledger-live-mobile/src/reducers/market.ts

@@ -21,7 +21,7 @@ export const INITIAL_STATE: MarketState = {
     search: "",
     liveCompatible: false,
     page: 1,
-    counterCurrency: "usd",
+    counterCurrency: "USD",
   },
   marketFilterByStarredCurrencies: false,
   marketCurrentPage: 1,

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

@@ -41,9 +41,9 @@ export async function fetchList({
       pageSize: limit,
       to: counterCurrency,
       sort: getSortParam(order, range),
-      ...(search.length >= 1 && { filter: search }),
-      ...(starred.length > 0 && { ids: starred.join(",") }),
-      ...(liveCoinsList.length > 1 && { ids: liveCoinsList.join(",") }),
+      ...(search.length >= 2 && { filter: search }),
+      ...(starred.length > 0 && { ids: starred.sort().join(",") }),
+      ...(liveCoinsList.length > 1 && { ids: liveCoinsList.sort().join(",") }),
       ...([Order.topLosers, Order.topGainers].includes(order) && { top: 100 }),
     },
   });

libs/ledger-live-common/src/market/hooks/useMarketDataProvider.ts

@@ -85,6 +85,7 @@ export const useSupportedCurrencies = () =>
   });
 
 export function useMarketData(props: MarketListRequestParams): MarketListRequestResult {
+  const search = props.search?.toLowerCase() ?? "";
   return useQueries({
     queries: Array.from({ length: props.page ?? 1 }, (_, i) => i).map(page => ({
       queryKey: [
@@ -93,15 +94,15 @@ export function useMarketData(props: MarketListRequestParams): MarketListRequest
         props.order,
         {
           counterCurrency: props.counterCurrency,
-          ...(props.search && props.search?.length >= 1 && { search: props.search }),
+          ...(props.search && props.search?.length >= 2 && { search: search }),
           ...(props.starred && props.starred?.length >= 1 && { starred: props.starred }),
           ...(props.liveCoinsList &&
             props.liveCoinsList?.length >= 1 && { liveCoinsList: props.liveCoinsList }),
           ...(props.order &&
             [Order.topLosers, Order.topGainers].includes(props.order) && { range: props.range }),
         },
       ],
-      queryFn: () => fetchList({ ...props, page }),
+      queryFn: () => fetchList({ ...props, page, search }),
       select: (data: MarketItemResponse[]) => ({
         formattedData: currencyFormatter(data, cryptoCurrenciesList),
         page,