feat: [LW-11885] add analytics to dapp explorer (#1644)

* feat: add analytics to dapp explorer

* fix: improve properties name

Author: greatertomi

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Drawer, DrawerNavigation, Button } from '@lace/common';
+import { Drawer, DrawerNavigation, Button, PostHogAction } from '@lace/common';
 import { Tabs } from 'antd';
 import { EDrawerAction, useDrawer } from './drawer';
 import { ISectionCardItem } from '../../services/helpers/apis-formatter/types';
@@ -11,6 +11,7 @@ import LinkIcon from '../../assets/icons/link.component.svg';
 
 import './styles.scss';
 import { Flex, Text } from '@input-output-hk/lace-ui-toolkit';
+import { useAnalyticsContext } from '@providers';
 
 const shortenURL = (url?: string) => {
   if (!url) return '';
@@ -23,13 +24,22 @@ const ProjectDetail: React.FC = () => {
     state: { open, data },
     dispatch
   } = useDrawer<ISectionCardItem>();
+  const analytics = useAnalyticsContext();
 
   const { t } = useTranslation();
 
   const handleClose = () => dispatch({ type: EDrawerAction.CLOSE });
 
   const handleOpenUrl = () => {
     window.open(data?.companyWebsite, 'blank');
+    void analytics.sendEventToPostHog(PostHogAction.DappExplorerDetailDrawerRedirectClick, {
+      // eslint-disable-next-line camelcase
+      dapp_explorer_selected_category_name: data?.category,
+      // eslint-disable-next-line camelcase
+      dapp_explorer_selected_dapp_name: data?.title,
+      // eslint-disable-next-line camelcase
+      dapp_explorer_selected_dapp_url: data?.link
+    });
   };
 
   const tabItems = [

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewContent/index.tsx

@@ -10,6 +10,8 @@ import { Skeleton } from 'antd';
 import useInfiniteScroll from 'react-infinite-scroll-hook';
 import type { ISimpleViewContent } from './types';
 import './styles.scss';
+import { useAnalyticsContext } from '@providers';
+import { PostHogAction } from '@lace/common';
 
 // Defines pagination parameters for infinite scroll mechanism.
 const MAX_ITEMS_PER_PAGE = 20;
@@ -26,9 +28,18 @@ const SimpleViewContent: React.FC<ISimpleViewContent> = ({ selectedCategory, sea
     page: { offset: 0, limit: MAX_ITEMS_PER_PAGE },
     search
   });
+  const analytics = useAnalyticsContext();
 
   const handleOpenDrawer = (drawerData: ISectionCardItem) => {
     dispatch({ type: EDrawerAction.OPEN, data: drawerData });
+    void analytics.sendEventToPostHog(PostHogAction.DappExplorerDappTileClick, {
+      // eslint-disable-next-line camelcase
+      dapp_explorer_selected_category_name: drawerData?.category,
+      // eslint-disable-next-line camelcase
+      dapp_explorer_selected_dapp_name: drawerData?.title,
+      // eslint-disable-next-line camelcase
+      dapp_explorer_selected_dapp_url: drawerData?.link
+    });
   };
 
   const showEmptyState = !loading && dapps?.length === 0;

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx

@@ -10,6 +10,8 @@ import CategoryChip from './CategoryChip';
 import './styles.scss';
 import { useCategoriesFetcher } from '../../../services/api/categories';
 import { formatFiltersResponse } from '../../../services/helpers/apis-formatter';
+import { PostHogAction } from '@lace/common';
+import { useAnalyticsContext } from '@providers';
 
 const { useState, useEffect } = React;
 
@@ -18,6 +20,7 @@ const SimpleViewFilters: React.FC<ISimpleViewFilters> = ({ onChangeCategory }) =
   const location = useLocation();
   const [active, setActive] = useState<string>('all');
   const { t } = useTranslation();
+  const analytics = useAnalyticsContext();
 
   const ALL_CATEGORIES_FILTER = [
     {
@@ -57,6 +60,10 @@ const SimpleViewFilters: React.FC<ISimpleViewFilters> = ({ onChangeCategory }) =
   const handleSetActive = (value: string) => {
     setActive(value.toLowerCase());
     if (onChangeCategory) onChangeCategory(value);
+    void analytics.sendEventToPostHog(PostHogAction.DappExplorerCategoryClick, {
+      // eslint-disable-next-line camelcase
+      dapp_explorer_selected_category_name: value
+    });
 
     history.push({
       search: value !== 'all' ? `category=${value}` : ''

packages/common/src/analytics/types.ts

@@ -311,7 +311,11 @@ export enum PostHogAction {
   SharedWalletsSendSomethingWentWrongView = 'shared wallets | send | something went wrong | view',
   SharedWalletsSendSomethingWentWrongBackClick = 'shared wallets | send | something went wrong | back | click',
   SharedWalletsSendSomethingWentWrongCancelClick = 'shared wallets | send | something went wrong | cancel | click',
-  SharedWalletsSendSomethingWentWrongXClick = 'shared wallets | send | something went wrong | x | click'
+  SharedWalletsSendSomethingWentWrongXClick = 'shared wallets | send | something went wrong | x | click',
+  // dapp explorer
+  DappExplorerCategoryClick = 'dapp explorer | category | click',
+  DappExplorerDappTileClick = 'dapp explorer | dapp tile | click',
+  DappExplorerDetailDrawerRedirectClick = 'dapp explorer | detail drawer | redirect | click'
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any