feat: Display Filtered List of Top/Worst Performers Based on Swappabl…

…e or Buyable Assets (#8550)
LedgerHQ · Dec 2, 2024 · 40f1cd4 · 40f1cd4
1 parent 0e2a13c
commit 40f1cd4
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 10 deletions.
diff --git a/.changeset/dry-rockets-hide.md b/.changeset/dry-rockets-hide.md
@@ -0,0 +1,7 @@
+---
+"@ledgerhq/types-live": minor
+"ledger-live-desktop": minor
+"@ledgerhq/live-common": minor
+---
+
+Filter Currencies which are buyable/swappable in MarketWidget
diff --git a/apps/ledger-live-desktop/src/renderer/actions/marketperformance.ts b/apps/ledger-live-desktop/src/renderer/actions/marketperformance.ts
@@ -19,8 +19,10 @@ export function useMarketPerformanceFeatureFlag() {
     enabled: (marketperformanceWidgetDesktop?.enabled && marketPerformanceValue) || false,
     variant: marketperformanceWidgetDesktop?.params?.variant || ABTestingVariants.variantA,
     refreshRate: marketperformanceWidgetDesktop?.params?.refreshRate || BASIC_REFETCH,
-    top: marketperformanceWidgetDesktop?.params?.top || 50,
+    top: marketperformanceWidgetDesktop?.params?.top || 100,
+    limit: marketperformanceWidgetDesktop?.params?.limit || 100,
     supported: marketperformanceWidgetDesktop?.params?.supported || false,
+    enableNewFeature: marketperformanceWidgetDesktop?.params?.enableNewFeature || false,
   };
 }
 

diff --git a/...-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx b/...-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx
@@ -117,13 +117,15 @@ function WidgetRow({ data, index, range }: PropsBodyElem) {
 }
 
 const MainContainer = styled(Flex)`
+  transition:
+    background-color 0.35s ease,
+    padding 0.35s ease;
+
   &:hover {
+    transition-delay: 0.15s;
     background-color: ${p => p.theme.colors.opacityDefault.c05};
     padding: 6px 12px;
     border-radius: 12px;
-    transition:
-      background-color 0.35s ease,
-      padding 0.35s ease;
     cursor: pointer;
   }
 `;

diff --git a/...ktop/src/renderer/screens/dashboard/MarketPerformanceWidget/useMarketPerformanceWidget.ts b/...ktop/src/renderer/screens/dashboard/MarketPerformanceWidget/useMarketPerformanceWidget.ts
@@ -3,17 +3,33 @@ import {
   counterValueCurrencySelector,
   selectedTimeRangeSelector,
 } from "~/renderer/reducers/settings";
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Order } from "./types";
 
 import { useMarketPerformers } from "@ledgerhq/live-common/market/hooks/useMarketPerformers";
 import { getSlicedList } from "./utils";
 import { useMarketPerformanceFeatureFlag } from "~/renderer/actions/marketperformance";
+import { useRampCatalog } from "@ledgerhq/live-common/platform/providers/RampCatalogProvider/useRampCatalog";
+import { useFetchCurrencyAll } from "@ledgerhq/live-common/exchange/swap/hooks/index";
+import { MarketItemPerformer } from "@ledgerhq/live-common/market/utils/types";
 
-const LIMIT = 5;
+const LIMIT_TO_DISPLAY = 5;
 
 export function useMarketPerformanceWidget() {
-  const { refreshRate, top, supported } = useMarketPerformanceFeatureFlag();
+  const { isCurrencyAvailable } = useRampCatalog();
+  const { data: currenciesAll } = useFetchCurrencyAll();
+
+  const filterAvailableBuyOrSwapCurrency = useCallback(
+    (elem: MarketItemPerformer) => {
+      const availableOnBuy = isCurrencyAvailable(elem.id, "onRamp");
+      const availableOnSwap = currenciesAll?.includes(elem.id);
+      return availableOnBuy || availableOnSwap;
+    },
+    [currenciesAll, isCurrencyAvailable],
+  );
+
+  const { refreshRate, top, supported, limit, enableNewFeature } =
+    useMarketPerformanceFeatureFlag();
 
   const [order, setOrder] = useState<Order>(Order.asc);
 
@@ -24,13 +40,20 @@ export function useMarketPerformanceWidget() {
     sort: order,
     counterCurrency: countervalue.ticker,
     range: timeRange,
-    limit: LIMIT,
+    limit: enableNewFeature ? limit : LIMIT_TO_DISPLAY,
     top,
     supported,
     refreshRate,
   });
 
-  const sliced = getSlicedList(data ?? [], order, timeRange);
+  const sliced = useMemo(() => {
+    const initialList = getSlicedList(data ?? [], order, timeRange);
+    const filteredList = initialList.filter(filterAvailableBuyOrSwapCurrency);
+
+    const finalList = enableNewFeature && filteredList.length > 0 ? filteredList : initialList;
+
+    return finalList.slice(0, LIMIT_TO_DISPLAY);
+  }, [data, enableNewFeature, filterAvailableBuyOrSwapCurrency, order, timeRange]);
 
   return {
     list: sliced,

diff --git a/libs/ledger-live-common/src/featureFlags/defaultFeatures.ts b/libs/ledger-live-common/src/featureFlags/defaultFeatures.ts
@@ -466,8 +466,10 @@ export const DEFAULT_FEATURES: Features = {
     params: {
       variant: ABTestingVariants.variantA,
       refreshRate: 2,
-      top: 50,
+      top: 100,
+      limit: 100,
       supported: true,
+      enableNewFeature: false,
     },
   },
 

diff --git a/libs/ledgerjs/packages/types-live/src/feature.ts b/libs/ledgerjs/packages/types-live/src/feature.ts
@@ -509,7 +509,9 @@ export type Feature_MarketperformanceWidgetDesktop = Feature<{
   variant: ABTestingVariants;
   refreshRate: number;
   top: number;
+  limit: number;
   supported: boolean;
+  enableNewFeature: boolean;
 }>;
 
 export type Feature_NftsFromSimpleHash = Feature<{