Mixpanel profiles (#2044)

* initial implementation

* remove unnecessary properties

lib/mixpanel/index.ts

@@ -3,6 +3,7 @@ import getUuid from './getUuid';
 import logEvent from './logEvent';
 import useInit from './useInit';
 import useLogPageView from './useLogPageView';
+import * as userProfile from './userProfile';
 export * from './utils';
 
 export {
@@ -11,4 +12,5 @@ export {
   logEvent,
   getPageType,
   getUuid,
+  userProfile,
 };

lib/mixpanel/useInit.tsx

@@ -7,9 +7,11 @@ import { deviceType } from 'react-device-detect';
 
 import config from 'configs/app';
 import * as cookies from 'lib/cookies';
+import dayjs from 'lib/date/dayjs';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
 import getUuid from './getUuid';
+import * as userProfile from './userProfile';
 
 export default function useMixpanelInit() {
   const [ isInited, setIsInited ] = React.useState(false);
@@ -28,6 +30,7 @@ export default function useMixpanelInit() {
       debug: Boolean(debugFlagQuery.current || debugFlagCookie),
     };
     const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
+    const userId = getUuid();
 
     mixpanel.init(feature.projectToken, mixpanelConfig);
     mixpanel.register({
@@ -38,7 +41,15 @@ export default function useMixpanelInit() {
       'Viewport height': window.innerHeight,
       Language: window.navigator.language,
       'Device type': _capitalize(deviceType),
-      'User id': getUuid(),
+      'User id': userId,
+    });
+    mixpanel.identify(userId);
+    userProfile.set({
+      'Device Type': _capitalize(deviceType),
+      ...(isAuth ? { 'With Account': true } : {}),
+    });
+    userProfile.setOnce({
+      'First Time Join': dayjs().toISOString(),
     });
 
     setIsInited(true);

lib/mixpanel/userProfile.ts

+import mixpanel from 'mixpanel-browser';
+
+import type { PickByType } from 'types/utils';
+
+interface UserProfileProperties {
+  'With Account': boolean;
+  'With Connected Wallet': boolean;
+  'Device Type': string;
+  'First Time Join': string;
+}
+
+type UserProfilePropertiesNumerable = PickByType<UserProfileProperties, number>;
+
+export function set(props: Partial<UserProfileProperties>) {
+  mixpanel.people.set(props);
+}
+
+export function setOnce(props: Partial<UserProfileProperties>) {
+  mixpanel.people.set_once(props);
+}
+
+export function increment(props: UserProfilePropertiesNumerable) {
+  mixpanel.people.increment(props);
+}

types/utils.ts

@@ -11,3 +11,9 @@ export type KeysOfObjectOrNull<T> = keyof ExcludeNull<T>;
 /** Combines members of an intersection into a readable type. */
 // https://twitter.com/mattpocockuk/status/1622730173446557697?s=20&t=NdpAcmEFXY01xkqU3KO0Mg
 export type Evaluate<Type> = { [key in keyof Type]: Type[key] } & unknown
+
+// Keeps in the object type only those properties that have the provided type (e.g only numbers)
+export type PickByType<T, X> = Record<
+{[K in keyof T]: T[K] extends X ? K : never}[keyof T],
+X
+>;

ui/snippets/walletMenu/useWallet.tsx

@@ -29,8 +29,12 @@ export default function useWallet({ source }: Params) {
   }, [ open, source ]);
 
   const handleAccountConnected = React.useCallback(({ isReconnected }: { isReconnected: boolean }) => {
-    !isReconnected && isConnectionStarted.current &&
+    if (!isReconnected && isConnectionStarted.current) {
       mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Source: source, Status: 'Connected' });
+      mixpanel.userProfile.setOnce({
+        'With Connected Wallet': true,
+      });
+    }
     isConnectionStarted.current = false;
   }, [ source ]);