address events

blockscout · Sep 8, 2023 · 18893d0 · 18893d0
1 parent 256f575
commit 18893d0
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 2 deletions.
diff --git a/lib/mixpanel/utils.ts b/lib/mixpanel/utils.ts
@@ -11,6 +11,8 @@ export enum EventTypes {
   WALLET_CONNECT = 'Wallet connect',
   CONTRACT_INTERACTION = 'Contract interaction',
   CONTRACT_VERIFICATION = 'Contract verification',
+  QR_CODE = 'QR code',
+  PAGE_WIDGET = 'Page widget',
 }
 
 /* eslint-disable @typescript-eslint/indent */
@@ -69,5 +71,11 @@ Type extends EventTypes.CONTRACT_VERIFICATION ? {
   'Method': string;
   'Status': 'Method selected' | 'Finished';
 } :
+Type extends EventTypes.QR_CODE ? {
+  'Page type': string;
+} :
+Type extends EventTypes.PAGE_WIDGET ? {
+  'Type': 'Tokens dropdown' | 'Tokens show all (icon)' | 'Add to watchlist';
+} :
 undefined;
 /* eslint-enable @typescript-eslint/indent */
diff --git a/ui/address/details/AddressFavoriteButton.tsx b/ui/address/details/AddressFavoriteButton.tsx
@@ -8,6 +8,7 @@ import starOutlineIcon from 'icons/star_outline.svg';
 import { getResourceKey } from 'lib/api/useApiQuery';
 import useIsAccountActionAllowed from 'lib/hooks/useIsAccountActionAllowed';
 import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
+import * as mixpanel from 'lib/mixpanel/index';
 import WatchlistAddModal from 'ui/watchlist/AddressModal/AddressModal';
 import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
 
@@ -29,6 +30,7 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
       return;
     }
     watchListId ? deleteModalProps.onOpen() : addModalProps.onOpen();
+    !watchListId && mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Add to watchlist' });
   }, [ isAccountActionAllowed, watchListId, deleteModalProps, addModalProps ]);
 
   const handleAddOrDeleteSuccess = React.useCallback(async() => {

diff --git a/ui/address/details/AddressQrCode.tsx b/ui/address/details/AddressQrCode.tsx
@@ -14,11 +14,14 @@ import {
   Skeleton,
 } from '@chakra-ui/react';
 import * as Sentry from '@sentry/react';
+import { useRouter } from 'next/router';
 import QRCode from 'qrcode';
 import React from 'react';
 
 import qrCodeIcon from 'icons/qr_code.svg';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import getPageType from 'lib/mixpanel/getPageType';
+import * as mixpanel from 'lib/mixpanel/index';
 
 const SVG_OPTIONS = {
   margin: 0,
@@ -33,9 +36,13 @@ interface Props {
 const AddressQrCode = ({ hash, className, isLoading }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const isMobile = useIsMobile();
+  const router = useRouter();
+
   const [ qr, setQr ] = React.useState('');
   const [ error, setError ] = React.useState('');
 
+  const pageType = getPageType(router.pathname);
+
   React.useEffect(() => {
     if (isOpen) {
       QRCode.toString(hash, SVG_OPTIONS, (error: Error | null | undefined, svg: string) => {
@@ -47,9 +54,10 @@ const AddressQrCode = ({ hash, className, isLoading }: Props) => {
 
         setError('');
         setQr(svg);
+        mixpanel.logEvent(mixpanel.EventTypes.QR_CODE, { 'Page type': pageType });
       });
     }
-  }, [ hash, isOpen, onClose ]);
+  }, [ hash, isOpen, onClose, pageType ]);
 
   if (isLoading) {
     return <Skeleton className={ className } w="36px" h="32px" borderRadius="base"/>;

diff --git a/ui/address/tokenSelect/TokenSelect.tsx b/ui/address/tokenSelect/TokenSelect.tsx
@@ -11,6 +11,7 @@ import type { Address } from 'types/api/address';
 import walletIcon from 'icons/wallet.svg';
 import { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import * as mixpanel from 'lib/mixpanel/index';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
@@ -38,6 +39,11 @@ const TokenSelect = ({ onClick }: Props) => {
   const tokensResourceKey = getResourceKey('address_tokens', { pathParams: { hash: addressQueryData?.hash }, queryParams: { type: 'ERC-20' } });
   const tokensIsFetching = useIsFetching({ queryKey: tokensResourceKey });
 
+  const handleIconButtonClick = React.useCallback(() => {
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Tokens show all (icon)' });
+    onClick?.();
+  }, [ onClick ]);
+
   const handleTokenBalanceMessage: SocketMessage.AddressTokenBalance['handler'] = React.useCallback((payload) => {
     if (payload.block_number !== blockNumber) {
       refetch();
@@ -97,7 +103,7 @@ const TokenSelect = ({ onClick }: Props) => {
               pr="6px"
               icon={ <Icon as={ walletIcon } boxSize={ 5 }/> }
               as="a"
-              onClick={ onClick }
+              onClick={ handleIconButtonClick }
             />
           </NextLink>
         </Box>

diff --git a/ui/address/tokenSelect/TokenSelectButton.tsx b/ui/address/tokenSelect/TokenSelectButton.tsx
@@ -5,6 +5,7 @@ import type { FormattedData } from './types';
 
 import arrowIcon from 'icons/arrows/east-mini.svg';
 import tokensIcon from 'icons/tokens.svg';
+import * as mixpanel from 'lib/mixpanel/index';
 
 import { getTokensTotalInfo } from '../utils/tokenUtils';
 
@@ -25,6 +26,8 @@ const TokenSelectButton = ({ isOpen, isLoading, onClick, data }: Props, ref: Rea
     if (isLoading && !isOpen) {
       return;
     }
+
+    mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Tokens dropdown' });
     onClick();
   }, [ isLoading, isOpen, onClick ]);