From 4fad912c0c939816b7da0e9027835bb40b9e6732 Mon Sep 17 00:00:00 2001 From: Martin CAYUELAS <112866305+mcayuelas-ledger@users.noreply.github.com> Date: Mon, 23 Dec 2024 16:33:28 +0100 Subject: [PATCH] bugfix: Click on MarketWidget under FF (#8754) --- .changeset/afraid-actors-fry.md | 5 +++ .../src/renderer/analytics/segment.ts | 1 + .../components/Container.tsx | 9 ++++- .../components/WidgetList.tsx | 38 +++++++++++++------ .../MarketPerformanceWidget/types.ts | 3 ++ .../useMarketPerformanceWidget.ts | 1 + 6 files changed, 45 insertions(+), 12 deletions(-) create mode 100644 .changeset/afraid-actors-fry.md diff --git a/.changeset/afraid-actors-fry.md b/.changeset/afraid-actors-fry.md new file mode 100644 index 000000000000..0dc373263003 --- /dev/null +++ b/.changeset/afraid-actors-fry.md @@ -0,0 +1,5 @@ +--- +"ledger-live-desktop": minor +--- + +Update analytics + click under FF diff --git a/apps/ledger-live-desktop/src/renderer/analytics/segment.ts b/apps/ledger-live-desktop/src/renderer/analytics/segment.ts index a6acf0eb6ed2..2301554faff6 100644 --- a/apps/ledger-live-desktop/src/renderer/analytics/segment.ts +++ b/apps/ledger-live-desktop/src/renderer/analytics/segment.ts @@ -70,6 +70,7 @@ const getMarketWidgetAnalytics = (state: State) => { return { hasMarketWidget: !marketWidget?.enabled ? "Null" : hasMarketWidgetActivated ? "Yes" : "No", + hasSeenWidgetImprovements: marketWidget?.params?.enableNewFeature ? "Yes" : "No", }; }; diff --git a/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/Container.tsx b/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/Container.tsx index a9cfe466fdc4..de92846fae93 100644 --- a/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/Container.tsx +++ b/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/Container.tsx @@ -22,6 +22,7 @@ export function MarketPerformanceWidgetContainer({ isLoading, hasError, top, + enableNewFeature, }: Props) { const Body = BodyByMode[variant]; @@ -50,7 +51,13 @@ export function MarketPerformanceWidgetContainer({ range={range} /> ) : ( - + )} 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 4f84470b2098..c43c53ce77ea 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 @@ -12,7 +12,7 @@ import { getChangePercentage } from "~/renderer/screens/dashboard/MarketPerforma import { useHistory } from "react-router-dom"; import { track } from "~/renderer/analytics/segment"; -export function WidgetList({ data, order, range, top }: PropsBody) { +export function WidgetList({ data, order, range, top, enableNewFeature }: PropsBody) { const noData = data.length === 0; return ( @@ -21,14 +21,21 @@ export function WidgetList({ data, order, range, top }: PropsBody) { ) : ( data.map((elem, i) => ( - + )) )} ); } -function WidgetRow({ data, index, range }: PropsBodyElem) { +function WidgetRow({ data, index, range, enableNewFeature }: PropsBodyElem) { const counterValueCurrency = useSelector(counterValueCurrencySelector); const locale = useSelector(localeSelector); const history = useHistory(); @@ -45,7 +52,12 @@ function WidgetRow({ data, index, range }: PropsBodyElem) { }, [data, history]); return ( - + {index} @@ -116,18 +128,22 @@ function WidgetRow({ data, index, range }: PropsBodyElem) { ); } -const MainContainer = styled(Flex)` +const MainContainer = styled(Flex)<{ featureFlagEnabled?: boolean }>` transition: background-color 0.35s ease, padding 0.35s ease; border-radius: 12px; - &:hover { - transition-delay: 0.15s; - background-color: ${p => p.theme.colors.opacityDefault.c05}; - padding: 6px 12px; - cursor: pointer; - } + ${({ featureFlagEnabled, theme }) => + featureFlagEnabled && + ` + &:hover { + transition-delay: 0.15s; + background-color: ${theme.colors.opacityDefault.c05}; + padding: 6px 12px; + cursor: pointer; + } + `} `; const CryptoCurrencyIconWrapper = styled(Flex)<{ 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 index bcf2fdaf9250..b62e01a9ee0c 100644 --- a/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/types.ts +++ b/apps/ledger-live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/types.ts @@ -15,6 +15,7 @@ export type Props = { isLoading: boolean; hasError: boolean; top: number; + enableNewFeature?: boolean; }; /** @@ -33,6 +34,7 @@ export type PropsBody = { order: Order; range: PortfolioRange; top: number; + enableNewFeature?: boolean; }; export type PropsBodyElem = { @@ -40,6 +42,7 @@ export type PropsBodyElem = { index: number; isFirst: boolean; range: PortfolioRange; + enableNewFeature?: boolean; }; /** 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 328c1dc2ba6e..9cab54e92101 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 @@ -88,5 +88,6 @@ export function useMarketPerformanceWidget() { hasError: isError, range: timeRange, top, + enableNewFeature, }; }