[FEAT] : Improve Market for Backend

.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.toLowerCase());
+  }, [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/newArch/features/Market/screens/MarketList/components/SearchHeader/index.tsx

@@ -29,7 +29,7 @@ function SearchHeader({ search, refresh }: Props) {
   }, [debouncedSearch, refresh]);
 
   useEffect(() => {
-    setInputSearch(search);
+    setInputSearch(search?.toLowerCase());
   }, [search]);
 
   return (

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

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

@@ -93,7 +93,7 @@ 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: props.search }),
           ...(props.starred && props.starred?.length >= 1 && { starred: props.starred }),
           ...(props.liveCoinsList &&
             props.liveCoinsList?.length >= 1 && { liveCoinsList: props.liveCoinsList }),