Merge pull request #1495 from blockscout/add-new-mixpanel-events

Add new mixpanel events

lib/mixpanel/utils.ts

@@ -3,17 +3,20 @@ import type { WalletType } from 'types/client/wallets';
 export enum EventTypes {
   PAGE_VIEW = 'Page view',
   SEARCH_QUERY = 'Search query',
+  LOCAL_SEARCH = 'Local search',
   ADD_TO_WALLET = 'Add to wallet',
   ACCOUNT_ACCESS = 'Account access',
   PRIVATE_TAG = 'Private tag',
   VERIFY_ADDRESS = 'Verify address',
   VERIFY_TOKEN = 'Verify token',
   WALLET_CONNECT = 'Wallet connect',
+  WALLET_ACTION = 'Wallet action',
   CONTRACT_INTERACTION = 'Contract interaction',
   CONTRACT_VERIFICATION = 'Contract verification',
   QR_CODE = 'QR code',
   PAGE_WIDGET = 'Page widget',
-  TX_INTERPRETATION_INTERACTION = 'Transaction interpratetion interaction'
+  TX_INTERPRETATION_INTERACTION = 'Transaction interpratetion interaction',
+  FILTERS = 'Filters'
 }
 
 /* eslint-disable @typescript-eslint/indent */
@@ -30,6 +33,10 @@ Type extends EventTypes.SEARCH_QUERY ? {
   'Source page type': string;
   'Result URL': string;
 } :
+Type extends EventTypes.LOCAL_SEARCH ? {
+  'Search query': string;
+  'Source': 'Marketplace';
+} :
 Type extends EventTypes.ADD_TO_WALLET ? (
   {
     'Wallet': WalletType;
@@ -65,6 +72,9 @@ Type extends EventTypes.WALLET_CONNECT ? {
   'Source': 'Header' | 'Smart contracts';
   'Status': 'Started' | 'Connected';
 } :
+Type extends EventTypes.WALLET_ACTION ? {
+  'Action': 'Open' | 'Address click';
+} :
 Type extends EventTypes.CONTRACT_INTERACTION ? {
   'Method type': 'Read' | 'Write';
   'Method name': string;
@@ -76,11 +86,20 @@ Type extends EventTypes.CONTRACT_VERIFICATION ? {
 Type extends EventTypes.QR_CODE ? {
   'Page type': string;
 } :
-Type extends EventTypes.PAGE_WIDGET ? {
-  'Type': 'Tokens dropdown' | 'Tokens show all (icon)' | 'Add to watchlist' | 'Address actions (more button)';
-} :
+Type extends EventTypes.PAGE_WIDGET ? (
+  {
+    'Type': 'Tokens dropdown' | 'Tokens show all (icon)' | 'Add to watchlist' | 'Address actions (more button)';
+  } | {
+    'Type': 'Favorite app' | 'More button';
+    'Info': string;
+  }
+) :
 Type extends EventTypes.TX_INTERPRETATION_INTERACTION ? {
   'Type': 'Address click' | 'Token click';
 } :
+Type extends EventTypes.FILTERS ? {
+  'Source': 'Marketplace';
+  'Filter name': string;
+} :
 undefined;
 /* eslint-enable @typescript-eslint/indent */

ui/marketplace/MarketplaceAppCard.tsx

@@ -4,6 +4,7 @@ import React, { useCallback } from 'react';
 
 import type { MarketplaceAppPreview } from 'types/client/marketplace';
 
+import * as mixpanel from 'lib/mixpanel/index';
 import IconSvg from 'ui/shared/IconSvg';
 
 import MarketplaceAppCardLink from './MarketplaceAppCardLink';
@@ -43,6 +44,7 @@ const MarketplaceAppCard = ({
 
   const handleInfoClick = useCallback((event: MouseEvent) => {
     event.preventDefault();
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'More button', Info: id });
     onInfoClick(id);
   }, [ onInfoClick, id ]);
 

ui/marketplace/useMarketplace.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { MarketplaceCategory } from 'types/client/marketplace';
 
 import useDebounce from 'lib/hooks/useDebounce';
+import * as mixpanel from 'lib/mixpanel/index';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
 import useMarketplaceApps from './useMarketplaceApps';
@@ -33,6 +34,8 @@ export default function useMarketplace() {
   const [ isDisclaimerModalOpen, setIsDisclaimerModalOpen ] = React.useState<boolean>(false);
 
   const handleFavoriteClick = React.useCallback((id: string, isFavorite: boolean) => {
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Favorite app', Info: id });
+
     const favoriteApps = getFavoriteApps();
 
     if (isFavorite) {
@@ -64,6 +67,7 @@ export default function useMarketplace() {
   }, []);
 
   const handleCategoryChange = React.useCallback((newCategory: string) => {
+    mixpanel.logEvent(mixpanel.EventTypes.FILTERS, { Source: 'Marketplace', 'Filter name': newCategory });
     setSelectedCategoryId(newCategory);
   }, []);
 
@@ -91,6 +95,11 @@ export default function useMarketplace() {
       category: selectedCategoryId === MarketplaceCategory.ALL ? undefined : selectedCategoryId,
       filter: debouncedFilterQuery,
     }, Boolean);
+
+    if (debouncedFilterQuery.length > 0) {
+      mixpanel.logEvent(mixpanel.EventTypes.LOCAL_SEARCH, { Source: 'Marketplace', 'Search query': debouncedFilterQuery });
+    }
+
     router.replace(
       { pathname: '/apps', query },
       undefined,

ui/snippets/walletMenu/WalletMenuContent.tsx

 import { Box, Button, Text } from '@chakra-ui/react';
 import React from 'react';
 
+import * as mixpanel from 'lib/mixpanel/index';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
@@ -9,38 +10,45 @@ type Props = {
   disconnect?: () => void;
 };
 
-const WalletMenuContent = ({ address, disconnect }: Props) => (
-  <Box>
-    <Text
-      fontSize="sm"
-      fontWeight={ 600 }
-      mb={ 1 }
-      { ...getDefaultTransitionProps() }
-    >
-      My wallet
-    </Text>
-    <Text
-      fontSize="sm"
-      mb={ 5 }
-      fontWeight={ 400 }
-      color="text_secondary"
-      { ...getDefaultTransitionProps() }
-    >
-      Your wallet is used to interact with apps and contracts in the explorer.
-    </Text>
-    <AddressEntity
-      address={{ hash: address }}
-      noTooltip
-      truncation="dynamic"
-      fontSize="sm"
-      fontWeight={ 700 }
-      color="text"
-      mb={ 6 }
-    />
-    <Button size="sm" width="full" variant="outline" onClick={ disconnect }>
-      Disconnect
-    </Button>
-  </Box>
-);
+const WalletMenuContent = ({ address, disconnect }: Props) => {
+  const onAddressClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Address click' });
+  }, []);
+
+  return (
+    <Box>
+      <Text
+        fontSize="sm"
+        fontWeight={ 600 }
+        mb={ 1 }
+        { ...getDefaultTransitionProps() }
+      >
+        My wallet
+      </Text>
+      <Text
+        fontSize="sm"
+        mb={ 5 }
+        fontWeight={ 400 }
+        color="text_secondary"
+        { ...getDefaultTransitionProps() }
+      >
+        Your wallet is used to interact with apps and contracts in the explorer.
+      </Text>
+      <AddressEntity
+        address={{ hash: address }}
+        noTooltip
+        truncation="dynamic"
+        fontSize="sm"
+        fontWeight={ 700 }
+        color="text"
+        mb={ 6 }
+        onClick={ onAddressClick }
+      />
+      <Button size="sm" width="full" variant="outline" onClick={ disconnect }>
+        Disconnect
+      </Button>
+    </Box>
+  );
+};
 
 export default WalletMenuContent;

ui/snippets/walletMenu/WalletMenuDesktop.tsx

@@ -3,6 +3,7 @@ import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useB
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import * as mixpanel from 'lib/mixpanel/index';
 import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import useWallet from 'ui/snippets/walletMenu/useWallet';
@@ -48,6 +49,11 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
     };
   }
 
+  const openPopover = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Open' });
+    setIsPopoverOpen.on();
+  }, [ setIsPopoverOpen ]);
+
   return (
     <Popover
       openDelay={ 300 }
@@ -66,7 +72,7 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
               flexShrink={ 0 }
               isLoading={ isModalOpening || isModalOpen }
               loadingText="Connect wallet"
-              onClick={ isWalletConnected ? setIsPopoverOpen.on : connect }
+              onClick={ isWalletConnected ? openPopover : connect }
               fontSize="sm"
               { ...buttonStyles }
             >

ui/snippets/walletMenu/WalletMenuMobile.tsx

@@ -2,6 +2,7 @@ import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconBu
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import * as mixpanel from 'lib/mixpanel/index';
 import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
 import IconSvg from 'ui/shared/IconSvg';
 import useWallet from 'ui/snippets/walletMenu/useWallet';
@@ -16,6 +17,11 @@ const WalletMenuMobile = () => {
   const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
   const isMobile = useIsMobile();
 
+  const openPopover = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Open' });
+    onOpen();
+  }, [ onOpen ]);
+
   return (
     <>
       <WalletTooltip isDisabled={ isWalletConnected || isMobile === undefined || !isMobile } isMobile>
@@ -32,7 +38,7 @@ const WalletMenuMobile = () => {
           bg={ isWalletConnected ? themedBackground : undefined }
           color={ themedColor }
           borderColor={ !isWalletConnected ? themedBorderColor : undefined }
-          onClick={ isWalletConnected ? onOpen : connect }
+          onClick={ isWalletConnected ? openPopover : connect }
           isLoading={ isModalOpening || isModalOpen }
         />
       </WalletTooltip>