manually generate uuid

lib/cookies.ts

@@ -13,7 +13,8 @@ export enum NAMES {
   INDEXING_ALERT='indexing_alert',
   ADBLOCK_DETECTED='adblock_detected',
   MIXPANEL_DEBUG='_mixpanel_debug',
-  ADDRESS_NFT_DISPLAY_TYPE='address_nft_display_type'
+  ADDRESS_NFT_DISPLAY_TYPE='address_nft_display_type',
+  UUID='uuid',
 }
 
 export function get(name?: NAMES | undefined | null, serverCookie?: string) {

lib/growthbook/init.ts

 import { GrowthBook } from '@growthbook/growthbook-react';
-import mixpanel from 'mixpanel-browser';
 
 import config from 'configs/app';
+import * as mixpanel from 'lib/mixpanel';
 
 export const growthBook = (() => {
   const feature = config.features.growthBook;
@@ -14,11 +14,15 @@ export const growthBook = (() => {
     apiHost: 'https://cdn.growthbook.io',
     clientKey: feature.clientKey,
     enableDevMode: config.app.isDev,
+    attributes: {
+      id: mixpanel.getUuid(),
+      chain_id: config.chain.id,
+    },
     trackingCallback: (experiment, result) => {
-      mixpanel.track('$experiment_started', {
+      mixpanel.logEvent(mixpanel.EventTypes.EXPERIMENT_STARTED, {
         'Experiment name': experiment.key,
-        'Variant name': result.variationId,
-        $source: 'growthbook',
+        'Variant name': result.value,
+        Source: 'growthbook',
       });
     },
   });

lib/mixpanel/getUuid.ts

+import * as cookies from 'lib/cookies';
+
+export default function getUuid() {
+  const cookie = cookies.get(cookies.NAMES.UUID);
+
+  if (cookie) {
+    return cookie;
+  }
+
+  const uuid = crypto.randomUUID();
+  cookies.set(cookies.NAMES.UUID, uuid);
+
+  return uuid;
+}

lib/mixpanel/index.ts

 import getPageType from './getPageType';
+import getUuid from './getUuid';
 import logEvent from './logEvent';
 import useInit from './useInit';
 import useLogPageView from './useLogPageView';
@@ -9,4 +10,5 @@ export {
   useLogPageView,
   logEvent,
   getPageType,
+  getUuid,
 };

lib/mixpanel/useInit.tsx

@@ -10,6 +10,8 @@ import * as cookies from 'lib/cookies';
 import { growthBook } from 'lib/growthbook/init';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
+import getUuid from './getUuid';
+
 export default function useMixpanelInit() {
   const [ isInited, setIsInited ] = React.useState(false);
   const router = useRouter();
@@ -25,13 +27,11 @@ export default function useMixpanelInit() {
 
     const mixpanelConfig: Partial<Config> = {
       debug: Boolean(debugFlagQuery.current || debugFlagCookie),
-      loaded: function(mixpanel) {
+      loaded: function() {
         growthBook?.setAttributes({
           ...growthBook.getAttributes(),
-          id: mixpanel.get_distinct_id(),
           time_zone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-          language: mixpanel.get_property('Language'),
-          chain_id: mixpanel.get_property('Chain id'),
+          language: window.navigator.language,
         });
       },
     };
@@ -46,6 +46,7 @@ export default function useMixpanelInit() {
       'Viewport height': window.innerHeight,
       Language: window.navigator.language,
       'Device type': _capitalize(deviceType),
+      'User id': getUuid(),
     });
 
     setIsInited(true);

lib/mixpanel/utils.ts

@@ -13,7 +13,8 @@ export enum EventTypes {
   CONTRACT_VERIFICATION = 'Contract verification',
   QR_CODE = 'QR code',
   PAGE_WIDGET = 'Page widget',
-  TX_INTERPRETATION_INTERACTION = 'Transaction interpratetion interaction'
+  TX_INTERPRETATION_INTERACTION = 'Transaction interpratetion interaction',
+  EXPERIMENT_STARTED = 'Experiment started',
 }
 
 /* eslint-disable @typescript-eslint/indent */
@@ -82,5 +83,10 @@ Type extends EventTypes.PAGE_WIDGET ? {
 Type extends EventTypes.TX_INTERPRETATION_INTERACTION ? {
   'Type': 'Address click' | 'Token click';
 } :
+Type extends EventTypes.EXPERIMENT_STARTED ? {
+  'Experiment name': string;
+  'Variant name': string;
+  'Source': 'growthbook';
+} :
 undefined;
 /* eslint-enable @typescript-eslint/indent */