diff --git a/lib/mixpanel/useLogPageView.tsx b/lib/mixpanel/useLogPageView.tsx index 9c3f6a929a..da5a6952f0 100644 --- a/lib/mixpanel/useLogPageView.tsx +++ b/lib/mixpanel/useLogPageView.tsx @@ -1,16 +1,26 @@ +import type { ColorMode } from '@chakra-ui/react'; import { useColorMode } from '@chakra-ui/react'; import { usePathname } from 'next/navigation'; import { useRouter } from 'next/router'; import React from 'react'; import config from 'configs/app'; +import * as cookies from 'lib/cookies'; import getQueryParamString from 'lib/router/getQueryParamString'; +import { COLOR_THEMES } from 'lib/settings/colorTheme'; import getPageType from './getPageType'; import getTabName from './getTabName'; import logEvent from './logEvent'; import { EventTypes } from './utils'; +function getColorTheme(hex: string | undefined, colorMode: ColorMode) { + const colorTheme = COLOR_THEMES.find((theme) => theme.hex === hex) || + COLOR_THEMES.filter((theme) => theme.colorMode === colorMode).slice(-1)[0]; + + return colorTheme.id; +} + export default function useLogPageView(isInited: boolean) { const router = useRouter(); const pathname = usePathname(); @@ -24,11 +34,14 @@ export default function useLogPageView(isInited: boolean) { return; } + const cookieColorModeHex = cookies.get(cookies.NAMES.COLOR_MODE_HEX); + logEvent(EventTypes.PAGE_VIEW, { 'Page type': getPageType(router.pathname), Tab: getTabName(tab), Page: page || undefined, 'Color mode': colorMode, + 'Color theme': getColorTheme(cookieColorModeHex, colorMode), }); // these are only deps that should trigger the effect // in some scenarios page type is not changing (e.g navigation from one address page to another), diff --git a/lib/mixpanel/utils.ts b/lib/mixpanel/utils.ts index f769c3e29a..4d59ec007e 100644 --- a/lib/mixpanel/utils.ts +++ b/lib/mixpanel/utils.ts @@ -1,4 +1,5 @@ import type { WalletType } from 'types/client/wallets'; +import type { ColorThemeId } from 'types/settings'; export enum EventTypes { PAGE_VIEW = 'Page view', @@ -31,6 +32,7 @@ Type extends EventTypes.PAGE_VIEW ? 'Tab': string; 'Page'?: string; 'Color mode': 'light' | 'dark'; + 'Color theme': ColorThemeId | undefined; } : Type extends EventTypes.SEARCH_QUERY ? { 'Search query': string;