bugfix: Click on MarketWidget under FF (#8754)

LedgerHQ · Dec 23, 2024 · 4fad912 · 4fad912 · github-actions · Dec 24, 2024
1 parent 80f5a8f
commit 4fad912
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 12 deletions.
diff --git a/.changeset/afraid-actors-fry.md 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
@@ -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/...e-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/Container.tsx b/...e-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}
           />
         ) : (
-          <Body data={list} order={order} range={range} top={top} />
+          <Body
+            data={list}
+            order={order}
+            range={range}
+            top={top}
+            enableNewFeature={enableNewFeature}
+          />
         )}
       </Flex>
 

diff --git a/...-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx b/...-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) {
         <MissingData order={order} range={range} top={top} />
       ) : (
         data.map((elem, i) => (
-          <WidgetRow key={i} index={i + 1} data={elem} isFirst={i === 0} range={range} />
+          <WidgetRow
+            key={i}
+            index={i + 1}
+            data={elem}
+            isFirst={i === 0}
+            range={range}
+            enableNewFeature={enableNewFeature}
+          />
         ))
       )}
     </Flex>
   );
 }
 
-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 (
-    <MainContainer justifyContent="space-between" py="6px" onClick={onCurrencyClick}>
+    <MainContainer
+      justifyContent="space-between"
+      py="6px"
+      onClick={enableNewFeature ? onCurrencyClick : undefined}
+      featureFlagEnabled={enableNewFeature}
+    >
       <Flex alignItems="center" flex={1}>
         <Text color="neutral.c80" variant="h5Inter" mr={2}>
           {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
@@ -15,6 +15,7 @@ export type Props = {
   isLoading: boolean;
   hasError: boolean;
   top: number;
+  enableNewFeature?: boolean;
 };
 
 /**
@@ -33,13 +34,15 @@ export type PropsBody = {
   order: Order;
   range: PortfolioRange;
   top: number;
+  enableNewFeature?: boolean;
 };
 
 export type PropsBodyElem = {
   data: MarketItemPerformer;
   index: number;
   isFirst: boolean;
   range: PortfolioRange;
+  enableNewFeature?: boolean;
 };
 
 /**

diff --git a/...ktop/src/renderer/screens/dashboard/MarketPerformanceWidget/useMarketPerformanceWidget.ts b/...ktop/src/renderer/screens/dashboard/MarketPerformanceWidget/useMarketPerformanceWidget.ts
@@ -88,5 +88,6 @@ export function useMarketPerformanceWidget() {
     hasError: isError,
     range: timeRange,
     top,
+    enableNewFeature,
   };
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -70,6 +70,7 @@ const getMarketWidgetAnalytics = (state: State) => { @@
       return {
         hasMarketWidget: !marketWidget?.enabled ? "Null" : hasMarketWidgetActivated ? "Yes" : "No",
+        hasSeenWidgetImprovements: marketWidget?.params?.enableNewFeature ? "Yes" : "No",
       };
     };
@@ Expand Down @@