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 ]);