Mixpanel - add Theme parameter to Page view event

Fixes #2126

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),

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;