⚡️ [SUPPORT] : Rework Market with ReactQuery in LLM + CVS v3 on LL (#…

…6428) * 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 * WIP * Rework Store for Market * WIP * Add FF refresh in LLM * Fix Market + improve fetch * WIP ON detail Coin * Add useMArket hook * WIP * WIP * Update hooks * Remove unused dependency * Add refresh on scroll and evry X time * revert changes on this file * Reorg files * Fix typecheck * Remove unused stuff * Fix typecheck * Fix Starred coins * Fix double loading component + Starred Empty State * WIP FIX e2e * fix props * Fix E2e * fix e2e * Fix types * Fix some UI details in MarketDetail page when loading * fix Merge * Fix CounterValu in Stats * (chore): [LL] CVS v3 migration on Market (#6850) * WIP for LLD * WIP LLM * WIP LLM 2 * Fix color in graph llm * fix lint + remove unesed stuff + handle starred/liveCoin * add ids fields * Add order in LLD * Order in LLM + fix some UI bugs * Order in LLD * Add icons * remove log * Improve stuffs * Chnagesets * Fix unimported * Fix Tests LLD * test(lld): update screenshots (ubuntu-latest) lld, test, screenshot * fix Market integration test * Fix page fetched * Fix reviews * Fix lint --------- Co-authored-by: live-github-bot[bot] <105061298+live-github-bot[bot]@users.noreply.github.com> * Fix price null issue + clean some code * FIX LIVE-11870 * Fix lint * 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 · May 31, 2024 · fa06306 · fa06306
1 parent 80c9ba1
commit fa06306
Show file tree

Hide file tree

Showing 84 changed files with 1,926 additions and 2,431 deletions.
diff --git a/.changeset/empty-bags-worry.md b/.changeset/empty-bags-worry.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Replace old MarketDataProvider with new implem and TanStackQuery
diff --git a/.changeset/few-radios-eat.md b/.changeset/few-radios-eat.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+New MArket Api usage
diff --git a/.changeset/moody-cherries-float.md b/.changeset/moody-cherries-float.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Replace old import with new paths
diff --git a/.changeset/odd-bees-matter.md b/.changeset/odd-bees-matter.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+New MArket API usage
diff --git a/.changeset/red-clouds-care.md b/.changeset/red-clouds-care.md
@@ -0,0 +1,5 @@
+---
+"@ledgerhq/live-common": patch
+---
+
+Reorg files
diff --git a/.changeset/shiny-fireants-chew.md b/.changeset/shiny-fireants-chew.md
@@ -0,0 +1,5 @@
+---
+"@ledgerhq/live-common": minor
+---
+
+Usage of CVS v3 instead of V2 on Market part
diff --git a/apps/ledger-live-desktop/src/renderer/actions/market.ts b/apps/ledger-live-desktop/src/renderer/actions/market.ts
@@ -1,4 +1,4 @@
-import { MarketListRequestParams } from "@ledgerhq/live-common/market/types";
+import { MarketListRequestParams } from "@ledgerhq/live-common/market/utils/types";
 
 export const setMarketOptions = (payload: MarketListRequestParams) => ({
   type: "MARKET_SET_VALUES",

diff --git a/apps/ledger-live-desktop/src/renderer/reducers/market.ts b/apps/ledger-live-desktop/src/renderer/reducers/market.ts
@@ -1,6 +1,6 @@
 import { handleActions } from "redux-actions";
 import { Handlers } from "./types";
-import { MarketListRequestParams } from "@ledgerhq/live-common/market/types";
+import { MarketListRequestParams, Order } from "@ledgerhq/live-common/market/utils/types";
 
 export type MarketState = {
   marketParams: MarketListRequestParams;
@@ -11,10 +11,8 @@ const initialState: MarketState = {
   marketParams: {
     range: "24h",
     limit: 50,
-    ids: [],
     starred: [],
-    orderBy: "market_cap",
-    order: "desc",
+    order: Order.MarketCapDesc,
     search: "",
     liveCompatible: false,
     page: 1,

diff --git a/...er/screens/dashboard/MarketPerformanceWidget/__tests__/useMarketPerformanceWidget.test.ts b/...er/screens/dashboard/MarketPerformanceWidget/__tests__/useMarketPerformanceWidget.test.ts
@@ -4,7 +4,7 @@
 
 import { describe, expect, it } from "@jest/globals";
 import { Order } from "../types";
-import { MarketItemPerformer } from "@ledgerhq/live-common/market/types";
+import { MarketItemPerformer } from "@ledgerhq/live-common/market/utils/types";
 import { getChangePercentage, getSlicedList } from "../utils";
 
 const createElem = (change: number): MarketItemPerformer => ({

diff --git a/...-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx b/...-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx
@@ -86,7 +86,7 @@ function WidgetRow({ data, index, isFirst, range }: PropsBodyElem) {
           {!data.price
             ? "-"
             : counterValueFormatter({
-                value: Number(parseFloat(String(data.price)).toFixed(data.price > 1 ? 2 : 8)),
+                value: Number(parseFloat(String(data.price)).toFixed(data.price > 1 ? 2 : 6)),
                 currency: counterValueCurrency.ticker,
                 locale,
               })}

diff --git a/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/types.ts b/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/types.ts
@@ -1,4 +1,4 @@
-import { MarketItemPerformer } from "@ledgerhq/live-common/market/types";
+import { MarketItemPerformer } from "@ledgerhq/live-common/market/utils/types";
 import { ABTestingVariants, PortfolioRange } from "@ledgerhq/types-live";
 import { Dispatch, SetStateAction } from "react";
 

diff --git a/...ktop/src/renderer/screens/dashboard/MarketPerformanceWidget/useMarketPerformanceWidget.ts b/...ktop/src/renderer/screens/dashboard/MarketPerformanceWidget/useMarketPerformanceWidget.ts
@@ -6,7 +6,7 @@ import {
 import { useState } from "react";
 import { Order } from "./types";
 
-import { useMarketPerformers } from "@ledgerhq/live-common/market/v2/useMarketPerformers";
+import { useMarketPerformers } from "@ledgerhq/live-common/market/hooks/useMarketPerformers";
 import { getSlicedList } from "./utils";
 import { useMarketPerformanceFeatureFlag } from "~/renderer/actions/marketperformance";
 

diff --git a/...ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/utils/index.ts b/...ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/utils/index.ts
@@ -1,4 +1,4 @@
-import { MarketItemPerformer } from "@ledgerhq/live-common/market/types";
+import { MarketItemPerformer } from "@ledgerhq/live-common/market/utils/types";
 import { PortfolioRange } from "@ledgerhq/types-live";
 
 import { Order } from "~/renderer/screens/dashboard/MarketPerformanceWidget/types";

diff --git a/...ledger-live-desktop/src/renderer/screens/market/MarketCoin/components/MarketCoinChart.tsx b/...ledger-live-desktop/src/renderer/screens/market/MarketCoin/components/MarketCoinChart.tsx
@@ -10,6 +10,8 @@ import { dayFormat, hourFormat, useDateFormatter } from "~/renderer/hooks/useDat
 import ChartPlaceholder from "../../assets/ChartPlaceholder";
 import CountervalueSelect from "../../components/CountervalueSelect";
 import { useTranslation } from "react-i18next";
+import { MarketCoinDataChart } from "@ledgerhq/live-common/market/utils/types";
+import { formatPercentage, formatPrice } from "../../utils";
 
 const Title = styled(Text).attrs({ variant: "h3", color: "neutral.c100", mt: 1, mb: 5 })`
   font-size: 28px;
@@ -72,7 +74,7 @@ function Tooltip({ data, counterCurrency, locale, formatDay, formatHour }: Toolt
 type Props = {
   price?: number;
   priceChangePercentage?: number;
-  chartData?: Record<string, [number, number][]>;
+  chartData?: MarketCoinDataChart;
   range: string;
   counterCurrency: string;
   refreshChart: (range: string) => void;
@@ -149,7 +151,7 @@ function MarkeCoinChartComponent({
           <Title data-test-id={"market-price"}>
             {counterValueFormatter({
               currency: counterCurrency,
-              value: price,
+              value: formatPrice(price ?? 0),
               locale,
             })}
           </Title>
@@ -158,7 +160,7 @@ function MarkeCoinChartComponent({
               <FormattedVal
                 isPercent
                 isNegative
-                val={parseFloat(priceChangePercentage.toFixed(2))}
+                val={formatPercentage(priceChangePercentage)}
                 inline
                 withIcon
               />

diff --git a/apps/ledger-live-desktop/src/renderer/screens/market/MarketCoin/components/MarketInfo.tsx b/apps/ledger-live-desktop/src/renderer/screens/market/MarketCoin/components/MarketInfo.tsx
@@ -6,6 +6,7 @@ import FormattedVal from "~/renderer/components/FormattedVal";
 import LoadingPlaceholder from "~/renderer/components/LoadingPlaceholder";
 import counterValueFormatter from "@ledgerhq/live-common/market/utils/countervalueFormatter";
 import { dayAndHourFormat, useDateFormatted } from "~/renderer/hooks/useDateFormatter";
+import { KeysPriceChange } from "@ledgerhq/live-common/market/utils/types";
 
 const Title = styled(Text).attrs({ variant: "h5", color: "neutral.c100", mb: 2 })`
   font-size: 20px;
@@ -82,7 +83,7 @@ type Props = {
   high24h?: number;
   low24h?: number;
   price?: number;
-  priceChangePercentage?: number;
+  priceChangePercentage?: Record<KeysPriceChange, number>;
   marketCapChangePercentage24h?: number;
   circulatingSupply?: number;
   totalSupply?: number;
@@ -94,6 +95,7 @@ type Props = {
   counterCurrency: string;
   loading: boolean;
   locale: string;
+  range: string;
 };
 
 function MarketInfo({
@@ -115,6 +117,7 @@ function MarketInfo({
   counterCurrency,
   loading,
   locale,
+  range,
 }: Props) {
   const { t } = useTranslation();
 
@@ -123,6 +126,8 @@ function MarketInfo({
   const athText = useDateFormatted(athDateD, dayAndHourFormat);
   const atlText = useDateFormatted(atlDateD, dayAndHourFormat);
 
+  const currentPriceChangePercentage = priceChangePercentage?.[range as KeysPriceChange];
+
   return (
     <Flex flexDirection="row" my={2} alignItems="flex-start" justifyContent="space-between">
       <Block flex="1">
@@ -134,11 +139,11 @@ function MarketInfo({
               {counterValueFormatter({ value: price, currency: counterCurrency, locale })}
             </LoadingLabel>
             <LoadingLabel loading={loading}>
-              {priceChangePercentage ? (
+              {currentPriceChangePercentage ? (
                 <FormattedVal
                   isPercent
                   isNegative
-                  val={parseFloat(priceChangePercentage.toFixed(2))}
+                  val={parseFloat(currentPriceChangePercentage.toFixed(2))}
                   inline
                   withIcon
                 />

diff --git a/apps/ledger-live-desktop/src/renderer/screens/market/MarketCoin/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/market/MarketCoin/index.tsx
@@ -10,6 +10,7 @@ import { Button } from "..";
 import MarketCoinChart from "./components/MarketCoinChart";
 import MarketInfo from "./components/MarketInfo";
 import { useMarketCoin } from "~/renderer/screens/market/hooks/useMarketCoin";
+import { KeysPriceChange } from "@ledgerhq/live-common/market/utils/types";
 
 const CryptoCurrencyIconWrapper = styled.div`
   height: 56px;
@@ -52,8 +53,6 @@ export default function MarketCoinScreen() {
     availableOnSwap,
     color,
     dataChart,
-    dataCurrency,
-    isLoadingData,
     isLoadingDataChart,
     isLoadingCurrency,
     range,
@@ -68,9 +67,10 @@ export default function MarketCoinScreen() {
     changeCounterCurrency,
   } = useMarketCoin();
 
-  const { price, priceChangePercentage } = dataCurrency || {};
+  const { name, ticker, image, internalCurrency, price } = currency || {};
+
+  const currentPriceChangePercentage = currency?.priceChangePercentage[range as KeysPriceChange];
 
-  const { name, ticker, image, internalCurrency } = currency || {};
   return (
     <Container data-test-id="market-coin-page-container">
       <TrackPage
@@ -144,7 +144,7 @@ export default function MarketCoinScreen() {
       </Flex>
       <MarketCoinChart
         price={price}
-        priceChangePercentage={priceChangePercentage}
+        priceChangePercentage={currentPriceChangePercentage}
         chartData={dataChart}
         range={range}
         counterCurrency={counterCurrency}
@@ -158,8 +158,9 @@ export default function MarketCoinScreen() {
       <MarketInfo
         locale={locale}
         counterCurrency={counterCurrency}
-        loading={isLoadingCurrency || isLoadingData}
-        {...dataCurrency}
+        loading={isLoadingCurrency}
+        range={range}
+        {...currency}
       />
     </Container>
   );

diff --git a/...ledger-live-desktop/src/renderer/screens/market/MarketList/components/MarketItemChart.tsx b/...ledger-live-desktop/src/renderer/screens/market/MarketList/components/MarketItemChart.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from "react";
 import { useTheme } from "styled-components";
-import { SparklineSvgData } from "@ledgerhq/live-common/market/types";
+import { SparklineSvgData } from "@ledgerhq/live-common/market/utils/types";
 
 type Props = {
   sparklineIn7d: SparklineSvgData;

diff --git a/apps/ledger-live-desktop/src/renderer/screens/market/MarketList/components/MarketRowItem.tsx b/apps/ledger-live-desktop/src/renderer/screens/market/MarketList/components/MarketRowItem.tsx
@@ -7,11 +7,12 @@ import { setTrackingSource } from "~/renderer/analytics/TrackPage";
 import counterValueFormatter from "@ledgerhq/live-common/market/utils/countervalueFormatter";
 import CryptoCurrencyIcon from "~/renderer/components/CryptoCurrencyIcon";
 import { SmallMarketItemChart } from "./MarketItemChart";
-import { CurrencyData } from "@ledgerhq/live-common/market/types";
+import { CurrencyData, KeysPriceChange } from "@ledgerhq/live-common/market/utils/types";
 import { Button } from "../..";
 import { useTranslation } from "react-i18next";
 import { TableRow, TableCell } from "../../components/Table";
 import { Page, useMarketActions } from "../../hooks/useMarketActions";
+import { formatPercentage, formatPrice } from "../../utils";
 
 const CryptoCurrencyIconWrapper = styled.div`
   height: 32px;
@@ -39,6 +40,7 @@ type Props = {
   locale: string;
   isStarred: boolean;
   toggleStar: () => void;
+  range?: string;
 };
 
 export const MarketRow = memo<Props>(function MarketRowItem({
@@ -49,13 +51,14 @@ export const MarketRow = memo<Props>(function MarketRowItem({
   loading,
   isStarred,
   toggleStar,
+  range,
 }: Props) {
+  const history = useHistory();
+
   const { t } = useTranslation();
   const { onBuy, onStake, onSwap, availableOnBuy, availableOnSwap, availableOnStake } =
     useMarketActions({ currency, page: Page.Market });
 
-  const history = useHistory();
-
   const onCurrencyClick = useCallback(() => {
     if (currency) {
       setTrackingSource("Page Market");
@@ -78,6 +81,8 @@ export const MarketRow = memo<Props>(function MarketRowItem({
   const hasActions =
     currency?.internalCurrency && (availableOnBuy || availableOnSwap || availableOnStake);
 
+  const currentPriceChangePercentage = currency?.priceChangePercentage[range as KeysPriceChange];
+
   return (
     <div style={{ ...style }}>
       {loading || !currency ? (
@@ -161,15 +166,19 @@ export const MarketRow = memo<Props>(function MarketRowItem({
           </TableCell>
           <TableCell data-test-id={"market-coin-price"}>
             <Text variant="body">
-              {counterValueFormatter({ value: currency.price, currency: counterCurrency, locale })}
+              {counterValueFormatter({
+                value: formatPrice(currency.price ?? 0),
+                currency: counterCurrency,
+                locale,
+              })}
             </Text>
           </TableCell>
           <TableCell data-test-id={"market-price-change"}>
-            {currency.priceChangePercentage ? (
+            {currentPriceChangePercentage ? (
               <FormattedVal
                 isPercent
                 isNegative
-                val={parseFloat(currency.priceChangePercentage.toFixed(2))}
+                val={formatPercentage(currentPriceChangePercentage)}
                 inline
                 withIcon
               />
@@ -225,6 +234,7 @@ export const CurrencyRow = memo(function CurrencyRowItem({
   starredMarketCoins,
   locale,
   style,
+  range,
 }: CurrencyRowProps) {
   const currency = data ? data[index] : null;
   const isStarred = currency && starredMarketCoins.includes(currency.id);
@@ -239,6 +249,7 @@ export const CurrencyRow = memo(function CurrencyRowItem({
       key={index}
       locale={locale}
       style={{ ...style }}
+      range={range}
     />
   );
 });
diff --git a/...er-live-desktop/src/renderer/screens/market/MarketList/components/NoCryptoPlaceholder.tsx b/...er-live-desktop/src/renderer/screens/market/MarketList/components/NoCryptoPlaceholder.tsx
@@ -1,4 +1,4 @@
-import { MarketListRequestParams } from "@ledgerhq/live-common/market/types";
+import { MarketListRequestParams } from "@ledgerhq/live-common/market/utils/types";
 import { Flex, Text } from "@ledgerhq/react-ui";
 import { TFunction } from "i18next";
 import React from "react";