diff --git a/lib/mixpanel/utils.ts b/lib/mixpanel/utils.ts
index f3f2146a73..f644e57037 100644
--- 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
index d36feff27d..b9d0453389 100644
--- 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
index 8583d11e2d..0257303bf1 100644
--- 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 ;
diff --git a/ui/address/tokenSelect/TokenSelect.tsx b/ui/address/tokenSelect/TokenSelect.tsx
index 314bb74918..9c54d9096e 100644
--- 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={ }
as="a"
- onClick={ onClick }
+ onClick={ handleIconButtonClick }
/>
diff --git a/ui/address/tokenSelect/TokenSelectButton.tsx b/ui/address/tokenSelect/TokenSelectButton.tsx
index c175326270..03976be637 100644
--- 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 ]);