feat(extension): add sort by posthog events (preferences card and lis…

…t view header) (#980) * feat(extension): add sort by posthog events * feat(extension): add change view posthog events
input-output-hk · Mar 25, 2024 · 5637f14 · 5637f14
1 parent d9c953c
commit 5637f14
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 14 deletions.
diff --git a/packages/common/src/analytics/types.ts b/packages/common/src/analytics/types.ts
@@ -92,14 +92,8 @@ export enum PostHogAction {
   // StakingBrowsePoolsSearchClick is actually supposed to track start of typing
   // into the search field but we don't have any more appropriate action name than "click" for that
   StakingBrowsePoolsSearchClick = 'staking | browse pools | search | click',
-  StakingBrowsePoolsTickerClick = 'staking | browse pools | ticker | click',
   StakingBrowsePoolsRosClick = 'staking | browse pools | ros | click',
-  StakingBrowsePoolsSaturationClick = 'staking | browse pools | saturation | click',
-  StakingBrowsePoolsCostClick = 'staking | browse pools | cost | click',
-  StakingBrowsePoolsMarginClick = 'staking | browse pools | margin | click',
   StakingBrowsePoolsBlocksClick = 'staking | browse pools | blocks | click',
-  StakingBrowsePoolsPledgeClick = 'staking | browse pools | pledge | click',
-  StakingBrowsePoolsLiveStakeClick = 'staking | browse pools | live stake | click',
   StakingBrowsePoolsStakePoolDetailClick = 'staking | browse pools | stake pool detail | click',
   StakingBrowsePoolsStakePoolDetailStakeAllOnThisPoolClick = 'staking | browse pools | stake pool detail | stake all on this pool | click',
   StakingBrowsePoolsStakePoolDetailAddStakingPoolClick = 'staking | browse pools | stake pool detail | add staking pool | click',
@@ -112,6 +106,24 @@ export enum PostHogAction {
   StakingBrowsePoolsManageDelegationAddStakePoolClick = 'staking | browse pools | manage delegation | add stake pool | click',
   StakingBrowsePoolsManageDelegationRemovePoolFromPortfolioClick = 'staking | browse pools | manage delegation | remove pool from portfolio | click',
   StakingBrowsePoolsManageDelegationConfirmClick = 'staking | browse pools | manage delegation | confirm | click',
+  StakingBrowsePoolsMoreOptionsSortingTickerClick = 'staking | browse pools | more options sorting | ticker | click',
+  StakingBrowsePoolsMoreOptionsSortingSaturationClick = 'staking | browse pools | more options sorting | saturation | click',
+  StakingBrowsePoolsMoreOptionsSortingROSClick = 'staking | browse pools | more options sorting | ros | click',
+  StakingBrowsePoolsMoreOptionsSortingCostClick = 'staking | browse pools | more options sorting | cost | click',
+  StakingBrowsePoolsMoreOptionsSortingMarginClick = 'staking | browse pools | more options sorting | margin | click',
+  StakingBrowsePoolsMoreOptionsSortingProducedBlocksClick = 'staking | browse pools | more options sorting | produced blocks | click',
+  StakingBrowsePoolsMoreOptionsSortingPledgeClick = 'staking | browse pools | more options sorting | pledge | click',
+  StakingBrowsePoolsMoreOptionsSortingLiveStakeClick = 'staking | browse pools | more options sorting | live-stake | click',
+  StakingBrowsePoolsTickerClick = 'staking | browse pools | ticker | click',
+  StakingBrowsePoolsSaturationClick = 'staking | browse pools | saturation | click',
+  StakingBrowsePoolsROSClick = 'staking | browse pools | ros | click',
+  StakingBrowsePoolsCostClick = 'staking | browse pools | cost | click',
+  StakingBrowsePoolsMarginClick = 'staking | browse pools | margin | click',
+  StakingBrowsePoolsProducedBlocksClick = 'staking | browse pools | produced blocks | click',
+  StakingBrowsePoolsPledgeClick = 'staking | browse pools | pledge | click',
+  StakingBrowsePoolsLiveStakeClick = 'staking | browse pools | live-stake | click',
+  StakingBrowsePoolsToggleGridViewClick = 'staking | browse pools | toggle | grid view | click',
+  StakingBrowsePoolsToggleListViewClick = 'staking | browse pools | toggle | list view | click',
   StakingChangingStakingPreferencesFineByMeClick = 'staking | changing staking preferences? | fine by me | click',
   StakingChangingStakingPreferencesCancelClick = 'staking | changing staking preferences? | cancel | click',
   StakingManageDelegationDelegationRatioSliderMinusClick = 'staking | manage delegation | delegation ratio slider | - | click',

diff --git a/...taking/src/features/BrowsePools/BrowsePoolsPreferencesCard/BrowsePoolsPreferencesCard.tsx b/...taking/src/features/BrowsePools/BrowsePoolsPreferencesCard/BrowsePoolsPreferencesCard.tsx
@@ -1,3 +1,4 @@
+import { PostHogAction } from '@lace/common';
 import { ReactComponent as SortAlphabeticalAscIcon } from '@lace/icons/dist/SortAlphabeticalAscComponent';
 import { ReactComponent as SortAlphabeticalDescIcon } from '@lace/icons/dist/SortAlphabeticalDescComponent';
 import { ReactComponent as SortNumericalAscIcon } from '@lace/icons/dist/SortNumericalAscComponent';
@@ -14,6 +15,7 @@ import {
 } from '@lace/ui';
 import cn from 'classnames';
 import { SortField, StakePoolSortOptions } from 'features/BrowsePools';
+import { useOutsideHandles } from 'features/outside-handles-provider';
 import debounce from 'lodash/debounce';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -35,6 +37,17 @@ export interface SortAndFilterProps {
 // TODO consider moving this kind of responsibility to the parent component
 const ON_CHANGE_DEBOUNCE = 400;
 
+const PostHogActionsMap: Record<SortField, PostHogAction> = {
+  blocks: PostHogAction.StakingBrowsePoolsMoreOptionsSortingProducedBlocksClick,
+  cost: PostHogAction.StakingBrowsePoolsMoreOptionsSortingCostClick,
+  liveStake: PostHogAction.StakingBrowsePoolsMoreOptionsSortingLiveStakeClick,
+  margin: PostHogAction.StakingBrowsePoolsMoreOptionsSortingMarginClick,
+  pledge: PostHogAction.StakingBrowsePoolsMoreOptionsSortingPledgeClick,
+  ros: PostHogAction.StakingBrowsePoolsMoreOptionsSortingROSClick,
+  saturation: PostHogAction.StakingBrowsePoolsMoreOptionsSortingSaturationClick,
+  ticker: PostHogAction.StakingBrowsePoolsMoreOptionsSortingTickerClick,
+};
+
 export const BrowsePoolsPreferencesCard = ({
   activeTab,
   filter,
@@ -44,6 +57,7 @@ export const BrowsePoolsPreferencesCard = ({
   onSortChange,
 }: SortAndFilterProps) => {
   const { t } = useTranslation();
+  const { analytics } = useOutsideHandles();
   const [localFilters, setLocalFilters] = useState<QueryStakePoolsFilters>(filter);
   const { field: sortBy, order: direction } = sort;
 
@@ -69,12 +83,16 @@ export const BrowsePoolsPreferencesCard = ({
   }, [direction, onSortChange, sortBy]);
 
   const handleSortChange = useCallback(
-    (field: string) =>
+    (field: string) => {
+      const sortField = field as unknown as SortField;
+      analytics.sendEventToPostHog(PostHogActionsMap[sortField]);
+
       onSortChange({
-        field: field as unknown as SortField,
+        field: sortField,
         order: 'asc',
-      }),
-    [onSortChange]
+      });
+    },
+    [analytics, onSortChange]
   );
 
   const getFilters = (filterOption: FilterOption) => {

diff --git a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListHeader.tsx b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListHeader.tsx
@@ -66,11 +66,10 @@ export const StakePoolsListHeader = ({ setActiveSort, activeSort }: StakePoolsLi
   }));
 
   const onSortChange = (field: SortField) => {
-    const sortField = field as unknown as SortField;
-    const order = sortField === activeSort?.field && activeSort?.order === 'asc' ? 'desc' : 'asc';
+    const order = field === activeSort?.field && activeSort?.order === 'asc' ? 'desc' : 'asc';
 
     analytics.sendEventToPostHog(analyticsActionsMap[field]);
-    setActiveSort({ field: sortField, order });
+    setActiveSort({ field, order });
   };
 
   const isActiveSortItem = (value: string) => value === activeSort?.field;

diff --git a/packages/staking/src/features/BrowsePools/hooks/useBrowsePoolsView.tsx b/packages/staking/src/features/BrowsePools/hooks/useBrowsePoolsView.tsx
@@ -1,21 +1,31 @@
+import { PostHogAction } from '@lace/common';
+import { useOutsideHandles } from 'features/outside-handles-provider';
 import { useDelegationPortfolioStore } from 'features/store';
 import { useCallback, useMemo } from 'react';
 import { DEFAULT_BROWSE_POOLS_VIEW } from '../constants';
 import { BrowsePoolsView } from '../types';
 
+const PostHogActionsMap: Record<BrowsePoolsView, PostHogAction> = {
+  [BrowsePoolsView.grid]: PostHogAction.StakingBrowsePoolsToggleGridViewClick,
+  [BrowsePoolsView.table]: PostHogAction.StakingBrowsePoolsToggleListViewClick,
+};
+
 export const useBrowsePoolsView = () => {
+  const { analytics } = useOutsideHandles();
   const { poolsView, portfolioMutators } = useDelegationPortfolioStore((store) => ({
     poolsView: store.browsePoolsView || DEFAULT_BROWSE_POOLS_VIEW,
     portfolioMutators: store.mutators,
   }));
 
   const switchPoolsView = useCallback(() => {
     const newView = poolsView === BrowsePoolsView.table ? BrowsePoolsView.grid : BrowsePoolsView.table;
+    analytics.sendEventToPostHog(PostHogActionsMap[newView]);
+
     portfolioMutators.executeCommand({
       data: newView,
       type: 'SetBrowsePoolsView',
     });
-  }, [poolsView, portfolioMutators]);
+  }, [analytics, poolsView, portfolioMutators]);
 
   return useMemo(
     () => ({