[SUPPORT] : Rework Market with ReactQuery in LLD (#6340)

* WIP * WIP 2 * Add tool in settings * Remove MarketDataProvider from LLD * WIP 3 * Clean code 🧹 * fix some lint checks * Fix Search and LiveCompatible filter * 🧹 * fix some bugs * isLiveSupported wasn't used in codebase in both LLM/LLD * Reorg files * Reorg files * Fix BreadCrump * fix loader * Enrich market store * fix type in store * Reorg hook's content * Fix search and stared api call + Countervalue/range in MarketCoin + fix e2E tests * Add FF refreshTime rate for LLD * test(lld): update screenshots (ubuntu-latest) lld, test, screenshot * test(lld): update screenshots (ubuntu-latest) lld, test, screenshot * Fix some reviews comments * Mask graphs * remove darwin * test(lld): update screenshots (ubuntu-latest) lld, test, screenshot * Add Mask EthStacking * fix marketCoin screenshot * test(lld): update screenshots (ubuntu-latest) lld, test, screenshot * Add peerDependency * Add changeset * Only 1 call for range * Mask items + fix screenshots * test(lld): update screenshots (ubuntu-latest) lld, test, screenshot * Mask itemson ethStacking test * test(lld): update screenshots (ubuntu-latest) lld, test, screenshot * Mask items on Coin detail page * Refresh on Scroll or on position page every x time * Add some test on utils * test(lld): update screenshots (ubuntu-latest) lld, test, screenshot * Fix coming back to page and don't refetch everything * test(lld): update screenshots (ubuntu-latest) lld, test, screenshot * test(lld): update screenshots (ubuntu-latest) lld, test, screenshot * Fix refetch * Fix double fetch * Fix color in chart * test(lld): update screenshots (ubuntu-latest) lld, test, screenshot --------- Co-authored-by: live-github-bot[bot] <105061298+live-github-bot[bot]@users.noreply.github.com>
LedgerHQ · Apr 5, 2024 · 433bfec · 433bfec
1 parent 4ae85cb
commit 433bfec
Show file tree

Hide file tree

Showing 61 changed files with 1,962 additions and 1,226 deletions.
diff --git a/.changeset/dirty-beds-eat.md b/.changeset/dirty-beds-eat.md
@@ -0,0 +1,5 @@
+---
+"@ledgerhq/live-common": patch
+---
+
+New hooks to fecth Data from CVS and update Market without using MarketDataProvider
diff --git a/.changeset/kind-glasses-argue.md b/.changeset/kind-glasses-argue.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Use new Hook for Market and Remove MarketDataProvider
diff --git a/apps/ledger-live-desktop/package.json b/apps/ledger-live-desktop/package.json
@@ -77,7 +77,8 @@
     "@sentry/electron": "^4.15.1",
     "@sentry/node": "7.84.0",
     "@sentry/tracing": "7.84.0",
-    "@tanstack/react-query": "^5.17.19",
+    "@tanstack/react-query": "^5.28.9",
+    "@tanstack/react-query-devtools": "^5.28.9",
     "@tippyjs/react": "^4.2.6",
     "@trust/keyto": "^1.0.1",
     "@types/qrcode": "^1.5.0",

diff --git a/apps/ledger-live-desktop/src/renderer/App.tsx b/apps/ledger-live-desktop/src/renderer/App.tsx
@@ -25,13 +25,14 @@ import { AnnouncementProviderWrapper } from "~/renderer/components/AnnouncementP
 import { PlatformAppProviderWrapper } from "~/renderer/components/PlatformAppProviderWrapper";
 import { ToastProvider } from "@ledgerhq/live-common/notifications/ToastProvider/index";
 import { themeSelector } from "./actions/general";
-import MarketDataProvider from "~/renderer/screens/market/MarketDataProviderWrapper";
 import { ConnectEnvsToSentry } from "~/renderer/components/ConnectEnvsToSentry";
 import PostOnboardingProviderWrapped from "~/renderer/components/PostOnboardingHub/logic/PostOnboardingProviderWrapped";
 import { useBraze } from "./hooks/useBraze";
 import { StorylyProvider } from "~/storyly/StorylyProvider";
 import { CounterValuesStateRaw } from "@ledgerhq/live-countervalues/types";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { allowDebugReactQuerySelector } from "./reducers/settings";
 
 const reloadApp = (event: KeyboardEvent) => {
   if ((event.ctrlKey || event.metaKey) && event.key === "r") {
@@ -85,13 +86,12 @@ const InnerApp = ({ initialCountervalues }: { initialCountervalues: CounterValue
                           <PlatformAppProviderWrapper>
                             <DrawerProvider>
                               <NftMetadataProvider getCurrencyBridge={getCurrencyBridge}>
-                                <MarketDataProvider>
-                                  <StorylyProvider>
-                                    <QueryClientProvider client={queryClient}>
-                                      <Default />
-                                    </QueryClientProvider>
-                                  </StorylyProvider>
-                                </MarketDataProvider>
+                                <StorylyProvider>
+                                  <QueryClientProvider client={queryClient}>
+                                    <Default />
+                                    <ReactQueryDevtoolsProvider />
+                                  </QueryClientProvider>
+                                </StorylyProvider>
                               </NftMetadataProvider>
                             </DrawerProvider>
                           </PlatformAppProviderWrapper>
@@ -118,4 +118,11 @@ const App = ({ store, initialCountervalues }: Props) => {
     </LiveStyleSheetManager>
   );
 };
+
+const ReactQueryDevtoolsProvider = () => {
+  const allowDebugReactQuery = useSelector(allowDebugReactQuerySelector);
+  if (!allowDebugReactQuery) return null;
+  return <ReactQueryDevtools initialIsOpen={false} />;
+};
+
 export default App;
diff --git a/apps/ledger-live-desktop/src/renderer/Default.tsx b/apps/ledger-live-desktop/src/renderer/Default.tsx
@@ -61,7 +61,7 @@ const SwapWeb = lazy(() => import("~/renderer/screens/swapWeb"));
 const Swap2 = lazy(() => import("~/renderer/screens/exchange/Swap2"));
 
 const Market = lazy(() => import("~/renderer/screens/market"));
-const MarketCoinScreen = lazy(() => import("~/renderer/screens/market/MarketCoinScreen"));
+const MarketCoin = lazy(() => import("~/renderer/screens/market/MarketCoin"));
 const WelcomeScreenSettings = lazy(
   () => import("~/renderer/screens/settings/WelcomeScreenSettings"),
 );
@@ -310,10 +310,7 @@ export default function Default() {
                             <Route path="/account/:id" render={withSuspense(Account)} />
                             <Route path="/asset/:assetId+" render={withSuspense(Asset)} />
                             <Route path="/swap" render={withSuspense(Swap2)} />
-                            <Route
-                              path="/market/:currencyId"
-                              render={withSuspense(MarketCoinScreen)}
-                            />
+                            <Route path="/market/:currencyId" render={withSuspense(MarketCoin)} />
                             <Route path="/market" render={withSuspense(Market)} />
                           </Switch>
                         </Page>

diff --git a/apps/ledger-live-desktop/src/renderer/actions/market.ts b/apps/ledger-live-desktop/src/renderer/actions/market.ts
@@ -0,0 +1,20 @@
+import { MarketListRequestParams } from "@ledgerhq/live-common/market/types";
+
+export const setMarketOptions = (payload: MarketListRequestParams) => ({
+  type: "MARKET_SET_VALUES",
+  payload,
+});
+
+export const addStarredMarketCoins = (payload: string) => ({
+  type: "ADD_STARRED_MARKET_COINS",
+  payload,
+});
+export const removeStarredMarketCoins = (payload: string) => ({
+  type: "REMOVE_STARRED_MARKET_COINS",
+  payload,
+});
+
+export const setMarketCurrentPage = (payload: number) => ({
+  type: "MARKET_SET_CURRENT_PAGE",
+  payload,
+});
diff --git a/apps/ledger-live-desktop/src/renderer/actions/settings.ts b/apps/ledger-live-desktop/src/renderer/actions/settings.ts
@@ -85,6 +85,11 @@ export const setAllowDebugApps = (allowDebugApps: boolean) =>
   saveSettings({
     allowDebugApps,
   });
+
+export const setAllowDebugReactQuery = (allowReactQueryDebug: boolean) =>
+  saveSettings({
+    allowReactQueryDebug,
+  });
 export const setAllowExperimentalApps = (allowExperimentalApps: boolean) =>
   saveSettings({
     allowExperimentalApps,
@@ -305,14 +310,6 @@ export const setSwapHasAcceptedIPSharing = (hasAcceptedIPSharing: boolean) => ({
   type: "SET_SWAP_ACCEPTED_IP_SHARING",
   payload: hasAcceptedIPSharing,
 });
-export const addStarredMarketCoins = (payload: string) => ({
-  type: "ADD_STARRED_MARKET_COINS",
-  payload,
-});
-export const removeStarredMarketCoins = (payload: string) => ({
-  type: "REMOVE_STARRED_MARKET_COINS",
-  payload,
-});
 export const toggleStarredMarketCoins = (payload: string) => ({
   type: "TOGGLE_STARRED_MARKET_COINS",
   payload,

diff --git a/apps/ledger-live-desktop/src/renderer/analytics/segment.ts b/apps/ledger-live-desktop/src/renderer/analytics/segment.ts
@@ -272,11 +272,6 @@ export const track = (
     page: currentRouteNameRef.current,
   };
 
-  console.log(
-    "getMandatoryProperties(storeInstance)",
-    mandatory,
-    getMandatoryProperties(storeInstance),
-  );
   const allProperties = {
     ...eventPropertiesWithoutExtra,
     ...(mandatory ? getMandatoryProperties(storeInstance) : extraProperties(storeInstance)),

diff --git a/apps/ledger-live-desktop/src/renderer/components/Breadcrumb/MarketCrumb.tsx b/apps/ledger-live-desktop/src/renderer/components/Breadcrumb/MarketCrumb.tsx
@@ -5,26 +5,26 @@ import Text from "~/renderer/components/Text";
 import { Separator, TextLink } from "./common";
 import { setTrackingSource } from "~/renderer/analytics/TrackPage";
 import { useTranslation } from "react-i18next";
-import { useSingleCoinMarketData } from "@ledgerhq/live-common/market/MarketDataProvider";
+import { useMarketCoin } from "~/renderer/screens/market/hooks/useMarketCoin";
 
 export default function MarketCrumb() {
   const { t } = useTranslation();
   const history = useHistory();
-  const { selectedCoinData } = useSingleCoinMarketData();
+  const { currency, isLoadingCurrency } = useMarketCoin();
   const goBackToMarket = useCallback(() => {
     setTrackingSource("Page Market Coin - Breadcrumb");
     history.push({
       pathname: `/market`,
     });
   }, [history]);
 
-  return selectedCoinData ? (
+  return currency ? (
     <>
       <TextLink>
         <Button onClick={goBackToMarket}>{t("market.title")}</Button>
       </TextLink>
       <Separator />
-      <Text>{selectedCoinData.name}</Text>
+      <Text>{isLoadingCurrency ? "-" : currency.name}</Text>
     </>
   ) : null;
 }
diff --git a/apps/ledger-live-desktop/src/renderer/components/Chart/index.tsx b/apps/ledger-live-desktop/src/renderer/components/Chart/index.tsx
@@ -214,7 +214,7 @@ export default function Chart({
     }
   }, [generateOptions, generatedData, valueKey]);
   return (
-    <ChartContainer height={height}>
+    <ChartContainer height={height} data-test-id="chart-container">
       <canvas ref={canvasRef} />
       {tooltip && renderTooltip ? (
         <Tooltip tooltip={tooltip} renderTooltip={renderTooltip} color={color} data={data} />

diff --git a/apps/ledger-live-desktop/src/renderer/reducers/index.ts b/apps/ledger-live-desktop/src/renderer/reducers/index.ts
@@ -9,6 +9,7 @@ import settings, { SettingsState } from "./settings";
 import swap, { SwapStateType } from "./swap";
 import { PostOnboardingState } from "@ledgerhq/types-live";
 import postOnboarding from "@ledgerhq/live-common/postOnboarding/reducer";
+import market, { MarketState } from "./market";
 
 export type State = {
   accounts: AccountsState;
@@ -20,6 +21,7 @@ export type State = {
   UI: UIState;
   swap: SwapStateType;
   postOnboarding: PostOnboardingState;
+  market: MarketState;
 };
 
 export default combineReducers({
@@ -32,4 +34,5 @@ export default combineReducers({
   UI,
   postOnboarding,
   swap,
+  market,
 });
diff --git a/apps/ledger-live-desktop/src/renderer/reducers/market.ts b/apps/ledger-live-desktop/src/renderer/reducers/market.ts
@@ -0,0 +1,71 @@
+import { handleActions } from "redux-actions";
+import { Handlers } from "./types";
+import { MarketListRequestParams } from "@ledgerhq/live-common/market/types";
+
+export type MarketState = {
+  marketParams: MarketListRequestParams;
+  starredMarketCoins: string[];
+  currentPage: number;
+};
+
+const initialState: MarketState = {
+  marketParams: {
+    range: "24h",
+    limit: 50,
+    ids: [],
+    starred: [],
+    orderBy: "market_cap",
+    order: "desc",
+    search: "",
+    liveCompatible: false,
+    page: 1,
+    counterCurrency: "usd",
+  },
+  currentPage: 1,
+  starredMarketCoins: [],
+};
+
+type HandlersPayloads = {
+  MARKET_SET_VALUES: MarketListRequestParams;
+  ADD_STARRED_MARKET_COINS: string;
+  REMOVE_STARRED_MARKET_COINS: string;
+  MARKET_SET_CURRENT_PAGE: number;
+};
+
+type MarketHandlers<PreciseKey = true> = Handlers<MarketState, HandlersPayloads, PreciseKey>;
+
+const handlers: MarketHandlers = {
+  MARKET_SET_VALUES: (state: MarketState, { payload }: { payload: MarketListRequestParams }) => ({
+    ...state,
+    marketParams: {
+      ...state.marketParams,
+      ...payload,
+    },
+  }),
+  ADD_STARRED_MARKET_COINS: (state: MarketState, { payload }: { payload: string }) => ({
+    ...state,
+    starredMarketCoins: [...state.starredMarketCoins, payload],
+  }),
+  REMOVE_STARRED_MARKET_COINS: (state: MarketState, { payload }: { payload: string }) => ({
+    ...state,
+    starredMarketCoins: state.starredMarketCoins.filter(id => id !== payload),
+  }),
+  MARKET_SET_CURRENT_PAGE: (state: MarketState, { payload }: { payload: number }) => ({
+    ...state,
+    currentPage: payload,
+  }),
+};
+
+// Selectors
+
+export const marketParamsSelector = (state: { market: MarketState }) => state.market.marketParams;
+export const starredMarketCoinsSelector = (state: { market: MarketState }) =>
+  state.market.starredMarketCoins;
+export const marketCurrentPageSelector = (state: { market: MarketState }) =>
+  state.market.currentPage;
+// Exporting reducer
+
+export default handleActions<MarketState, HandlersPayloads[keyof HandlersPayloads]>(
+  handlers as unknown as MarketHandlers<false>,
+  initialState,
+);
diff --git a/apps/ledger-live-desktop/src/renderer/reducers/settings.ts b/apps/ledger-live-desktop/src/renderer/reducers/settings.ts
@@ -89,6 +89,7 @@ export type SettingsState = {
   fullNodeEnabled: boolean;
   // developer settings
   allowDebugApps: boolean;
+  allowReactQueryDebug: boolean;
   allowExperimentalApps: boolean;
   enablePlatformDevTools: boolean;
   catalogProvider: string;
@@ -99,7 +100,6 @@ export type SettingsState = {
     selectableCurrencies: string[];
     acceptedProviders: string[];
   };
-  starredMarketCoins: string[];
   overriddenFeatureFlags: {
     [key in FeatureId]: Feature;
   };
@@ -176,6 +176,7 @@ const INITIAL_STATE: SettingsState = {
   fullNodeEnabled: false,
   // developer settings
   allowDebugApps: false,
+  allowReactQueryDebug: false,
   allowExperimentalApps: false,
   enablePlatformDevTools: false,
   catalogProvider: "production",
@@ -186,7 +187,6 @@ const INITIAL_STATE: SettingsState = {
     acceptedProviders: [],
     selectableCurrencies: [],
   },
-  starredMarketCoins: [],
   overriddenFeatureFlags: {} as Record<FeatureId, Feature>,
   featureFlagsButtonVisible: false,
 
@@ -222,8 +222,6 @@ type HandlersPayloads = {
   SET_SWAP_ACCEPTED_IP_SHARING: boolean;
   ACCEPT_SWAP_PROVIDER: string;
   DEBUG_TICK: never;
-  ADD_STARRED_MARKET_COINS: string;
-  REMOVE_STARRED_MARKET_COINS: string;
   SET_LAST_SEEN_CUSTOM_IMAGE: {
     imageSize: number;
     imageHash: string;
@@ -362,14 +360,6 @@ const handlers: SettingsHandlers = {
   DEBUG_TICK: state => ({
     ...state,
   }),
-  ADD_STARRED_MARKET_COINS: (state: SettingsState, { payload }) => ({
-    ...state,
-    starredMarketCoins: [...state.starredMarketCoins, payload],
-  }),
-  REMOVE_STARRED_MARKET_COINS: (state: SettingsState, { payload }) => ({
-    ...state,
-    starredMarketCoins: state.starredMarketCoins.filter(id => id !== payload),
-  }),
   SET_LAST_SEEN_CUSTOM_IMAGE: (state: SettingsState, { payload }) => ({
     ...state,
     lastSeenCustomImage: {
@@ -642,6 +632,7 @@ export const hasInstalledAppsSelector = (state: State) => state.settings.hasInst
 export const USBTroubleshootingIndexSelector = (state: State) =>
   state.settings.USBTroubleshootingIndex;
 export const allowDebugAppsSelector = (state: State) => state.settings.allowDebugApps;
+export const allowDebugReactQuerySelector = (state: State) => state.settings.allowReactQueryDebug;
 export const allowExperimentalAppsSelector = (state: State) => state.settings.allowExperimentalApps;
 export const enablePlatformDevToolsSelector = (state: State) =>
   state.settings.enablePlatformDevTools;
@@ -709,7 +700,6 @@ export const exportSettingsSelector = createSelector(
     blacklistedTokenIds,
   }),
 );
-export const starredMarketCoinsSelector = (state: State) => state.settings.starredMarketCoins;
 export const overriddenFeatureFlagsSelector = (state: State) =>
   state.settings.overriddenFeatureFlags;
 export const featureFlagsButtonVisibleSelector = (state: State) =>