diff --git a/.changeset/dry-rockets-hide.md b/.changeset/dry-rockets-hide.md new file mode 100644 index 000000000000..e5803ae71bb9 --- /dev/null +++ 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 index c13bea8aea83..dc0bd429c6f3 100644 --- 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/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx b/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx index 559dccb76c4f..bcff3ee00286 100644 --- a/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx +++ b/apps/ledger-live-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/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/useMarketPerformanceWidget.ts b/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/useMarketPerformanceWidget.ts index 50349e9b9504..d703eda6077f 100644 --- a/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/useMarketPerformanceWidget.ts +++ b/apps/ledger-live-desktop/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.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 index 4ad7411cfbbe..03737a691cd8 100644 --- 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 index cda9e88b5673..a7ab2e06f09c 100644 --- 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<{