add more "button click" events

lib/mixpanel/index.ts

-import getPageType from './getPageType';
+import getPageType, { PAGE_TYPE_DICT } from './getPageType';
 import logEvent from './logEvent';
 import reset from './reset';
 import useInit from './useInit';
@@ -13,4 +13,5 @@ export {
   getPageType,
   userProfile,
   reset,
+  PAGE_TYPE_DICT,
 };

ui/marketplace/MarketplaceAppTopBar.tsx

@@ -8,6 +8,7 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import * as mixpanel from 'lib/mixpanel/index';
 import { Link } from 'toolkit/chakra/link';
 import { BackToButton } from 'toolkit/components/buttons/BackToButton';
 import { makePrettyLink } from 'toolkit/utils/url';
@@ -46,6 +47,10 @@ const MarketplaceAppTopBar = ({ appId, data, isLoading, securityReport }: Props)
   const showContractList = React.useCallback((id: string, type: ContractListTypes) => setContractListType(type), []);
   const hideContractList = React.useCallback(() => setContractListType(undefined), []);
 
+  const handleBackToClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Back to', Source: mixpanel.PAGE_TYPE_DICT['/apps/[id]'] });
+  }, []);
+
   return (
     <>
       <Flex alignItems="center" mb={{ base: 3, md: 2 }} rowGap={ 3 } columnGap={ 2 }>
@@ -54,6 +59,7 @@ const MarketplaceAppTopBar = ({ appId, data, isLoading, securityReport }: Props)
           href={ goBackUrl }
           hint="Back to dApps list"
           loading={ isLoading }
+          onClick={ handleBackToClick }
         />
         <Link
           external

ui/shared/Page/PageTitle.tsx

 import { Flex, chakra } from '@chakra-ui/react';
 import { debounce } from 'es-toolkit';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import * as mixpanel from 'lib/mixpanel/index';
 import { Heading } from 'toolkit/chakra/heading';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
@@ -29,10 +31,12 @@ const TEXT_MAX_LINES = 1;
 const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoading = false, afterTitle, beforeTitle, secondRow }: Props) => {
   const tooltip = useDisclosure();
   const isMobile = useIsMobile();
+  const router = useRouter();
   const [ isTextTruncated, setIsTextTruncated ] = React.useState(false);
 
   const headingRef = React.useRef<HTMLHeadingElement>(null);
   const textRef = React.useRef<HTMLSpanElement>(null);
+  const pageType = mixpanel.getPageType(router.pathname);
 
   const updatedTruncateState = React.useCallback(() => {
     if (!headingRef.current || !textRef.current) {
@@ -71,6 +75,11 @@ const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoa
     }
   }, [ tooltip ]);
 
+  const handleBackToClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Back to', Source: pageType });
+    backLink && 'onClick' in backLink && backLink.onClick();
+  }, [ backLink, pageType ]);
+
   return (
     <Flex className={ className } flexDir="column" rowGap={ 3 } mb={ 6 }>
       <Flex
@@ -85,7 +94,7 @@ const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoa
             <BackToButton
               hint={ backLink.label }
               href={ 'url' in backLink ? backLink.url : undefined }
-              onClick={ 'onClick' in backLink ? backLink.onClick : undefined }
+              onClick={ handleBackToClick }
               loadingSkeleton={ isLoading }
               mr={ 3 }
             />

ui/shared/time/TimeFormatToggle.tsx

 import React from 'react';
 
 import { useSettingsContext } from 'lib/contexts/settings';
+import * as mixpanel from 'lib/mixpanel/index';
 import { IconButton } from 'toolkit/chakra/icon-button';
 import type { IconButtonProps } from 'toolkit/chakra/icon-button';
 import { Tooltip } from 'toolkit/chakra/tooltip';
@@ -12,12 +13,17 @@ const TimeFormatToggle = (props: Props) => {
   const settings = useSettingsContext();
   const timeFormat = settings?.timeFormat || 'relative';
 
+  const handleClick = React.useCallback(() => {
+    settings?.toggleTimeFormat();
+    mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Switch time format', Source: 'Table header' });
+  }, [ settings ]);
+
   return (
     <Tooltip content="Toggle time format">
       <IconButton
         aria-label="Toggle time format"
         variant="icon_secondary"
-        onClick={ settings?.toggleTimeFormat }
+        onClick={ handleClick }
         boxSize={ 5 }
         selected={ timeFormat === 'absolute' }
         borderRadius="sm"

ui/snippets/networkMenu/useNetworkMenu.tsx

@@ -7,6 +7,7 @@ import { NETWORK_GROUPS } from 'types/networks';
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import useFetch from 'lib/hooks/useFetch';
+import * as mixpanel from 'lib/mixpanel/index';
 import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 
 export default function useNetworkMenu() {
@@ -20,14 +21,21 @@ export default function useNetworkMenu() {
     staleTime: Infinity,
   });
 
+  const handleOpenChange = React.useCallback((details: { open: boolean }) => {
+    if (details.open) {
+      mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Network menu', Source: 'Header' });
+    }
+    onOpenChange(details);
+  }, [ onOpenChange ]);
+
   return React.useMemo(() => ({
     open,
     onClose,
     onOpen,
     onToggle,
-    onOpenChange,
+    onOpenChange: handleOpenChange,
     isPending,
     data,
     availableTabs: NETWORK_GROUPS.filter((tab) => data?.some(({ group }) => group === tab)),
-  }), [ open, onClose, onOpen, onToggle, onOpenChange, data, isPending ]);
+  }), [ open, onClose, onOpen, onToggle, handleOpenChange, data, isPending ]);
 }