feat: ✨ Redirect Users to Corresponding Market Page When Clicking on …

…Asset in Market Widget (#8504)
LedgerHQ · Nov 28, 2024 · 03c26f4 · 03c26f4
1 parent e341fa2
commit 03c26f4
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 39 deletions.
diff --git a/.changeset/giant-geese-film.md b/.changeset/giant-geese-film.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Redirect Users to Corresponding Market Page When Clicking on Asset in Market Widget
diff --git a/apps/ledger-live-desktop/src/renderer/actions/constants.ts b/apps/ledger-live-desktop/src/renderer/actions/constants.ts
@@ -1,2 +1,4 @@
 // Action types
 export const TOGGLE_MEMOTAG_INFO = "settings/toggleShouldDisplayMemoTagInfo";
+export const TOGGLE_MEV = "settings/toggleMEV";
+export const TOGGLE_MARKET_WIDGET = "settings/toggleMarketWidget";
diff --git a/apps/ledger-live-desktop/src/renderer/actions/marketperformance.ts b/apps/ledger-live-desktop/src/renderer/actions/marketperformance.ts
@@ -2,17 +2,21 @@ import { useMemo } from "react";
 import { useSelector } from "react-redux";
 import { useMarketcapIds, useTrackingPairsForTopCoins } from "@ledgerhq/live-countervalues-react";
 import { TrackingPair } from "@ledgerhq/live-countervalues/types";
-import { selectedTimeRangeSelector } from "~/renderer/reducers/settings";
+import {
+  marketPerformanceWidgetSelector,
+  selectedTimeRangeSelector,
+} from "~/renderer/reducers/settings";
 import { getPortfolioRangeConfig } from "@ledgerhq/live-countervalues/portfolio";
 import { Currency } from "@ledgerhq/types-cryptoassets";
 import useFeature from "@ledgerhq/live-common/featureFlags/useFeature";
 import { ABTestingVariants } from "@ledgerhq/types-live";
 import { BASIC_REFETCH } from "../screens/market/utils";
 
 export function useMarketPerformanceFeatureFlag() {
+  const marketPerformanceValue = useSelector(marketPerformanceWidgetSelector);
   const marketperformanceWidgetDesktop = useFeature("marketperformanceWidgetDesktop");
   return {
-    enabled: marketperformanceWidgetDesktop?.enabled || false,
+    enabled: (marketperformanceWidgetDesktop?.enabled && marketPerformanceValue) || false,
     variant: marketperformanceWidgetDesktop?.params?.variant || ABTestingVariants.variantA,
     refreshRate: marketperformanceWidgetDesktop?.params?.refreshRate || BASIC_REFETCH,
     top: marketperformanceWidgetDesktop?.params?.top || 50,
@@ -31,6 +35,7 @@ export function useMarketPerformanceReferenceDate() {
 export function useMarketPerformanceTrackingPairs(countervalue: Currency): TrackingPair[] {
   const size = 50;
   const refDate = useMarketPerformanceReferenceDate();
+
   const marketPerformanceEnabled = useMarketPerformanceFeatureFlag().enabled;
   const marketcapIds = useMarketcapIds();
   return useTrackingPairsForTopCoins(

diff --git a/apps/ledger-live-desktop/src/renderer/actions/settings.ts b/apps/ledger-live-desktop/src/renderer/actions/settings.ts
@@ -25,7 +25,7 @@ import {
 import { useRefreshAccountsOrdering } from "~/renderer/actions/general";
 import { Language, Locale } from "~/config/languages";
 import { Layout } from "LLD/features/Collectibles/types/Layouts";
-import { TOGGLE_MEMOTAG_INFO } from "./constants";
+import { TOGGLE_MARKET_WIDGET, TOGGLE_MEMOTAG_INFO, TOGGLE_MEV } from "./constants";
 export type SaveSettings = (a: Partial<Settings>) => {
   type: string;
   payload: Partial<Settings>;
@@ -439,7 +439,12 @@ export const setLastOnboardedDevice = (payload: Device | null) => ({
   payload,
 });
 export const setMevProtection = (payload: boolean) => ({
-  type: "SET_MEV_PROTECTION",
+  type: TOGGLE_MEV,
+  payload,
+});
+
+export const setMarketWidget = (payload: boolean) => ({
+  type: TOGGLE_MARKET_WIDGET,
   payload,
 });
 

diff --git a/apps/ledger-live-desktop/src/renderer/analytics/segment.ts b/apps/ledger-live-desktop/src/renderer/analytics/segment.ts
@@ -22,6 +22,7 @@ import {
   languageSelector,
   lastSeenDeviceSelector,
   localeSelector,
+  marketPerformanceWidgetSelector,
   mevProtectionSelector,
   shareAnalyticsSelector,
   sharePersonalizedRecommendationsSelector,
@@ -61,11 +62,15 @@ export function setAnalyticsFeatureFlagMethod(method: typeof analyticsFeatureFla
   analyticsFeatureFlagMethod = method;
 }
 
-const getMarketWidgetAnalytics = () => {
+const getMarketWidgetAnalytics = (state: State) => {
   if (!analyticsFeatureFlagMethod) return false;
   const marketWidget = analyticsFeatureFlagMethod("marketperformanceWidgetDesktop");
 
-  return !!marketWidget?.enabled;
+  const hasMarketWidgetActivated = marketPerformanceWidgetSelector(state);
+
+  return {
+    hasMarketWidget: !marketWidget?.enabled ? "Null" : hasMarketWidgetActivated ? "Yes" : "No",
+  };
 };
 
 const getLedgerSyncAttributes = (state: State) => {
@@ -159,8 +164,9 @@ const extraProperties = (store: ReduxStore) => {
   const accounts = accountsSelector(state);
   const ptxAttributes = getPtxAttributes();
 
-  const ledgerSyncAtributes = getLedgerSyncAttributes(state);
-  const mevProtectionAtributes = getMEVAttributes(state);
+  const ledgerSyncAttributes = getLedgerSyncAttributes(state);
+  const mevProtectionAttributes = getMEVAttributes(state);
+  const marketWidgetAttributes = getMarketWidgetAnalytics(state);
 
   const deviceInfo = device
     ? {
@@ -211,12 +217,12 @@ const extraProperties = (store: ReduxStore) => {
     blockchainsWithNftsOwned,
     hasGenesisPass,
     hasInfinityPass,
-    hasSeenMarketWidget: getMarketWidgetAnalytics(),
     modelIdList: devices,
     ...ptxAttributes,
     ...deviceInfo,
-    ...ledgerSyncAtributes,
-    ...mevProtectionAtributes,
+    ...ledgerSyncAttributes,
+    ...mevProtectionAttributes,
+    ...marketWidgetAttributes,
   };
 };
 

diff --git a/apps/ledger-live-desktop/src/renderer/reducers/settings.ts b/apps/ledger-live-desktop/src/renderer/reducers/settings.ts
@@ -31,7 +31,7 @@ import { getAppLocale } from "~/helpers/systemLocale";
 import { Handlers } from "./types";
 import { Layout, LayoutKey } from "LLD/features/Collectibles/types/Layouts";
 import { OnboardingUseCase } from "../components/Onboarding/OnboardingUseCase";
-import { TOGGLE_MEMOTAG_INFO } from "../actions/constants";
+import { TOGGLE_MEMOTAG_INFO, TOGGLE_MARKET_WIDGET, TOGGLE_MEV } from "../actions/constants";
 
 /* Initial state */
 
@@ -78,6 +78,7 @@ export type SettingsState = {
   collectiblesViewMode: LayoutKey;
   showAccountsHelperBanner: boolean;
   mevProtection: boolean;
+  marketPerformanceWidget: boolean;
   hideEmptyTokenAccounts: boolean;
   filterTokenOperationsZeroAmount: boolean;
   sidebarCollapsed: boolean;
@@ -182,6 +183,7 @@ export const INITIAL_STATE: SettingsState = {
   hasInstalledApps: true,
   lastSeenDevice: null,
   mevProtection: true,
+  marketPerformanceWidget: true,
   hasSeenOrdinalsDiscoveryDrawer: false,
   hasProtectedOrdinalsAssets: false,
   devicesModelList: [],
@@ -296,8 +298,9 @@ type HandlersPayloads = {
   SET_HAS_REDIRECTED_TO_POST_ONBOARDING: boolean;
   SET_LAST_ONBOARDED_DEVICE: Device | null;
 
-  SET_MEV_PROTECTION: boolean;
+  [TOGGLE_MEV]: boolean;
   [TOGGLE_MEMOTAG_INFO]: boolean;
+  [TOGGLE_MARKET_WIDGET]: boolean;
 };
 type SettingsHandlers<PreciseKey = true> = Handlers<SettingsState, HandlersPayloads, PreciseKey>;
 
@@ -548,11 +551,14 @@ const handlers: SettingsHandlers = {
     ...state,
     lastOnboardedDevice: payload,
   }),
-  SET_MEV_PROTECTION: (state: SettingsState, { payload }) => ({
+  [TOGGLE_MEV]: (state: SettingsState, { payload }) => ({
     ...state,
     mevProtection: payload,
   }),
-
+  [TOGGLE_MARKET_WIDGET]: (state: SettingsState, { payload }) => ({
+    ...state,
+    marketPerformanceWidget: payload,
+  }),
   [TOGGLE_MEMOTAG_INFO]: (state: SettingsState, { payload }) => ({
     ...state,
     alwaysShowMemoTagInfo: payload,
@@ -911,5 +917,6 @@ export const hasBeenRedirectedToPostOnboardingSelector = (state: State) =>
 export const lastOnboardedDeviceSelector = (state: State) => state.settings.lastOnboardedDevice;
 
 export const mevProtectionSelector = (state: State) => state.settings.mevProtection;
-
+export const marketPerformanceWidgetSelector = (state: State) =>
+  state.settings.marketPerformanceWidget;
 export const alwaysShowMemoTagInfoSelector = (state: State) => state.settings.alwaysShowMemoTagInfo;
diff --git a/...er/screens/dashboard/MarketPerformanceWidget/__tests__/useMarketPerformanceWidget.test.ts b/...er/screens/dashboard/MarketPerformanceWidget/__tests__/useMarketPerformanceWidget.test.ts
@@ -17,6 +17,7 @@ const createElem = (change: number): MarketItemPerformer => ({
   ticker: "BTC",
   price: 70000,
   ledgerIds: [],
+  id: "bitcoin",
 });
 
 const createElemWithMultipleChange = (range: {
@@ -36,6 +37,7 @@ const createElemWithMultipleChange = (range: {
   ticker: "BTC",
   price: 70000,
   ledgerIds: [],
+  id: "bitcoin",
 });
 
 describe("useMarketPerformanceWidget", () => {

diff --git a/...live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/Header.tsx b/...live-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/Header.tsx
@@ -30,7 +30,7 @@ export function MarketPerformanceWidgetHeader({ onChangeOrder, order }: HeaderPr
   const { width } = useResize(ref);
 
   return (
-    <Flex justifyContent="space-between" alignItems="center" ref={ref} mb={5}>
+    <Flex justifyContent="space-between" alignItems="center" ref={ref} mb={3}>
       <Text variant="h3Inter" fontWeight="semiBold">
         {t("dashboard.marketPerformanceWidget.title", {
           time: t(`time.range.${timeRange}`),

diff --git a/...-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx b/...-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/WidgetList.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { PropsBody, PropsBodyElem } from "../types";
 import { Flex, Text } from "@ledgerhq/react-ui";
 import styled from "@ledgerhq/react-ui/components/styled";
@@ -9,6 +9,8 @@ import { counterValueCurrencySelector, localeSelector } from "~/renderer/reducer
 import { useSelector } from "react-redux";
 import counterValueFormatter from "@ledgerhq/live-common/market/utils/countervalueFormatter";
 import { getChangePercentage } from "~/renderer/screens/dashboard/MarketPerformanceWidget/utils";
+import { useHistory } from "react-router-dom";
+import { track } from "~/renderer/analytics/segment";
 
 export function WidgetList({ data, order, range, top }: PropsBody) {
   const noData = data.length === 0;
@@ -26,12 +28,24 @@ export function WidgetList({ data, order, range, top }: PropsBody) {
   );
 }
 
-function WidgetRow({ data, index, isFirst, range }: PropsBodyElem) {
+function WidgetRow({ data, index, range }: PropsBodyElem) {
   const counterValueCurrency = useSelector(counterValueCurrencySelector);
   const locale = useSelector(localeSelector);
+  const history = useHistory();
+
+  const onCurrencyClick = useCallback(() => {
+    track("widget_asset_clicked", {
+      asset: data.name,
+      page: "Portfolio",
+    });
+
+    history.push({
+      pathname: `/market/${data.id}`,
+    });
+  }, [data, history]);
 
   return (
-    <Flex alignItems="center" mt={isFirst ? 0 : 2} justifyContent="space-between">
+    <MainContainer justifyContent="space-between" py="6px" onClick={onCurrencyClick}>
       <Flex alignItems="center" flex={1}>
         <Text color="neutral.c80" variant="h5Inter" mr={2}>
           {index}
@@ -98,10 +112,22 @@ function WidgetRow({ data, index, isFirst, range }: PropsBodyElem) {
               })}
         </EllipsisText>
       </Flex>
-    </Flex>
+    </MainContainer>
   );
 }
 
+const MainContainer = styled(Flex)`
+  &:hover {
+    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;
+  }
+`;
+
 const CryptoCurrencyIconWrapper = styled(Flex)<{
   hasImage?: boolean;
 }>`

diff --git a/...r-live-desktop/src/renderer/screens/settings/sections/General/MarketPerformanceWidget.tsx b/...r-live-desktop/src/renderer/screens/settings/sections/General/MarketPerformanceWidget.tsx
@@ -1,27 +1,44 @@
-import React from "react";
+import React, { useCallback } from "react";
 import Switch from "~/renderer/components/Switch";
-import { useFeatureFlags } from "@ledgerhq/live-common/featureFlags/index";
 import Track from "~/renderer/analytics/Track";
+import { useSelector, useDispatch } from "react-redux";
+import { setMarketWidget } from "~/renderer/actions/settings";
+import { track } from "~/renderer/analytics/segment";
+import { marketPerformanceWidgetSelector } from "~/renderer/reducers/settings";
+
 const MarketPerformanceWidgetRow = () => {
-  const featureFlagsProvider = useFeatureFlags();
+  const marketWidgetValue = useSelector(marketPerformanceWidgetSelector);
 
-  const currentValue = Boolean(
-    featureFlagsProvider.getFeature("marketperformanceWidgetDesktop")?.enabled,
-  );
+  const dispatch = useDispatch();
 
-  const update = (value: boolean) => {
-    featureFlagsProvider.overrideFeature("marketperformanceWidgetDesktop", { enabled: value });
-  };
+  const toggle = useCallback(
+    (value: boolean) => {
+      dispatch(setMarketWidget(value));
+
+      track(
+        "toggle_clicked",
+        {
+          toggleAction: value ? "ON" : "OFF",
+          toggle: "MarketPerformanceWidget",
+          page: "Page Settings General",
+        },
+        true,
+      );
+    },
+    [dispatch],
+  );
 
   return (
     <>
       <Track
         onUpdate
         event={
-          currentValue ? "MarketPerformanceWidgetEnabled" : "MarketPerformanceWidgetRowDisabled"
+          marketWidgetValue
+            ? "MarketPerformanceWidgetEnabled"
+            : "MarketPerformanceWidgetRowDisabled"
         }
       />
-      <Switch isChecked={currentValue} onChange={() => update(!currentValue)} />
+      <Switch isChecked={marketWidgetValue} onChange={() => toggle(!marketWidgetValue)} />
     </>
   );
 };

diff --git a/apps/ledger-live-desktop/src/renderer/screens/settings/sections/General/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/settings/sections/General/index.tsx
@@ -69,13 +69,15 @@ const SectionGeneral = () => {
           </Row>
         </FeatureToggle>
 
-        <Row
-          title={t("settings.display.marketPerformanceWidget")}
-          desc={t("settings.display.marketPerformanceWidgetDesc")}
-          dataTestId="setting-marketPerformanceWidget"
-        >
-          <MarketPerformanceWidgetRow />
-        </Row>
+        <FeatureToggle featureId="marketperformanceWidgetDesktop">
+          <Row
+            title={t("settings.display.marketPerformanceWidget")}
+            desc={t("settings.display.marketPerformanceWidgetDesc")}
+            dataTestId="setting-marketPerformanceWidget"
+          >
+            <MarketPerformanceWidgetRow />
+          </Row>
+        </FeatureToggle>
 
         <Row title={t("settings.profile.password")} desc={t("settings.profile.passwordDesc")}>
           <PasswordButton />

diff --git a/libs/ledger-live-common/src/market/utils/currencyFormatter.ts b/libs/ledger-live-common/src/market/utils/currencyFormatter.ts
@@ -91,6 +91,7 @@ export const format = (
 });
 
 export const formatPerformer = (currency: MarketItemResponse): MarketItemPerformer => ({
+  id: currency.id,
   ledgerIds: currency.ledgerIds,
   name: currency.name,
   image: currency.image,

diff --git a/libs/ledger-live-common/src/market/utils/types.ts b/libs/ledger-live-common/src/market/utils/types.ts
@@ -167,6 +167,7 @@ export type MarketItemResponse = {
   updatedAt: string;
 };
 export type MarketItemPerformer = {
+  id: string;
   name: string;
   ticker: string;
   priceChangePercentage1h: number;