Merge branch 'traffic-monitor'

lib/growthbook/init.ts

@@ -9,7 +9,7 @@ export interface GrowthBookFeatures {
   test_value: string;
 }
 
-export const growthBook = (() => {
+export const initGrowthBook = (uuid: string) => {
   const feature = config.features.growthBook;
 
   if (!feature.isEnabled) {
@@ -21,7 +21,7 @@ export const growthBook = (() => {
     clientKey: feature.clientKey,
     enableDevMode: config.app.isDev,
     attributes: {
-      id: mixpanel.getUuid(),
+      id: uuid,
       chain_id: config.chain.id,
     },
     trackingCallback: (experiment, result) => {
@@ -37,7 +37,7 @@ export const growthBook = (() => {
       });
     },
   });
-})();
+};
 
 function getStorageValue(): Array<unknown> | undefined {
   const item = window.localStorage.getItem(STORAGE_KEY);

lib/growthbook/useLoadFeatures.ts

@@ -2,9 +2,10 @@ import React from 'react';
 
 import { SECOND } from 'lib/consts';
 
-import { growthBook } from './init';
+import { initGrowthBook } from './init';
 
-export default function useLoadFeatures() {
+export default function useLoadFeatures(uuid: string) {
+  const growthBook = initGrowthBook(uuid);
   React.useEffect(() => {
     growthBook?.setAttributes({
       ...growthBook.getAttributes(),
@@ -13,5 +14,5 @@ export default function useLoadFeatures() {
     });
 
     growthBook?.loadFeatures({ timeout: SECOND });
-  }, []);
+  }, [ growthBook ]);
 }

lib/mixpanel/getUuid.ts

-import * as cookies from 'lib/cookies';
-import * as growthBook from 'lib/growthbook/consts';
-import isBrowser from 'lib/isBrowser';
-
-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);
-
-  if (isBrowser()) {
-    window.localStorage.removeItem(growthBook.STORAGE_KEY);
-  }
-
-  return uuid;
-}

lib/mixpanel/index.ts

 import getPageType from './getPageType';
-import getUuid from './getUuid';
 import logEvent from './logEvent';
 import reset from './reset';
 import useInit from './useInit';
@@ -12,7 +11,6 @@ export {
   useLogPageView,
   logEvent,
   getPageType,
-  getUuid,
   userProfile,
   reset,
 };

lib/mixpanel/useInit.tsx

@@ -10,7 +10,6 @@ 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() {
@@ -30,7 +29,8 @@ export default function useMixpanelInit() {
       debug: Boolean(debugFlagQuery.current || debugFlagCookie),
     };
     const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
-    const userId = getUuid();
+
+    const uuid = cookies.get(cookies.NAMES.UUID);
 
     mixpanel.init(feature.projectToken, mixpanelConfig);
     mixpanel.register({
@@ -41,9 +41,9 @@ export default function useMixpanelInit() {
       'Viewport height': window.innerHeight,
       Language: window.navigator.language,
       'Device type': capitalize(deviceType),
-      'User id': userId,
+      'User id': uuid,
     });
-    mixpanel.identify(userId);
+    mixpanel.identify(uuid);
     userProfile.set({
       'Device Type': capitalize(deviceType),
       ...(isAuth ? { 'With Account': true } : {}),
@@ -56,7 +56,7 @@ export default function useMixpanelInit() {
     if (debugFlagQuery.current && !debugFlagCookie) {
       cookies.set(cookies.NAMES.MIXPANEL_DEBUG, 'true');
     }
-  }, []);
+  }, [ ]);
 
   return isInited;
 }

nextjs/PageNextJs.tsx

@@ -11,6 +11,7 @@ import * as metadata from 'lib/metadata';
 import * as mixpanel from 'lib/mixpanel';
 
 interface Props<Pathname extends Route['pathname']> {
+  uuid: string;
   pathname: Pathname;
   children: React.ReactNode;
   query?: PageProps<Pathname>['query'];

nextjs/getServerSideProps.ts

@@ -9,6 +9,7 @@ import config from 'configs/app';
 const rollupFeature = config.features.rollup;
 const adBannerFeature = config.features.adsBanner;
 import isNeedProxy from 'lib/api/isNeedProxy';
+import * as cookies from 'lib/cookies';
 import type * as metadata from 'lib/metadata';
 
 export interface Props<Pathname extends Route['pathname'] = never> {
@@ -19,9 +20,10 @@ export interface Props<Pathname extends Route['pathname'] = never> {
   // if apiData is undefined, Next.js will complain that it is not serializable
   // so we force it to be always present in the props but it can be null
   apiData: metadata.ApiData<Pathname> | null;
+  uuid: string;
 }
 
-export const base = async <Pathname extends Route['pathname'] = never>({ req, query }: GetServerSidePropsContext):
+export const base = async <Pathname extends Route['pathname'] = never>({ req, res, query }: GetServerSidePropsContext):
 Promise<GetServerSidePropsResult<Props<Pathname>>> => {
   const adBannerProvider = (() => {
     if (adBannerFeature.isEnabled) {
@@ -36,6 +38,36 @@ Promise<GetServerSidePropsResult<Props<Pathname>>> => {
     return null;
   })();
 
+  let uuid = cookies.getFromCookieString(req.headers.cookie || '', cookies.NAMES.UUID);
+  if (!uuid) {
+    uuid = crypto.randomUUID();
+    res.setHeader('Set-Cookie', `${ cookies.NAMES.UUID }=${ uuid }`);
+  }
+
+  const isTrackingDisabled = process.env.DISABLE_TRACKING === 'true';
+
+  if (!isTrackingDisabled) {
+    // log pageview
+    const hostname = req.headers.host;
+    const timestamp = new Date().toISOString();
+    const chainId = process.env.NEXT_PUBLIC_NETWORK_ID;
+    const chainName = process.env.NEXT_PUBLIC_NETWORK_NAME;
+    const publicRPC = process.env.NEXT_PUBLIC_NETWORK_RPC_URL;
+
+    fetch('https://monitor.blockscout.com/count', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        hostname,
+        timestamp,
+        chainId,
+        chainName,
+        publicRPC,
+        uuid,
+      }),
+    });
+  }
+
   return {
     props: {
       query,
@@ -43,6 +75,7 @@ Promise<GetServerSidePropsResult<Props<Pathname>>> => {
       referrer: req.headers.referer || '',
       adBannerProvider: adBannerProvider,
       apiData: null,
+      uuid,
     },
   };
 };

pages/_app.tsx

@@ -15,7 +15,7 @@ import { MarketplaceContextProvider } from 'lib/contexts/marketplace';
 import { RewardsContextProvider } from 'lib/contexts/rewards';
 import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
 import { SettingsContextProvider } from 'lib/contexts/settings';
-import { growthBook } from 'lib/growthbook/init';
+import { initGrowthBook } from 'lib/growthbook/init';
 import useLoadFeatures from 'lib/growthbook/useLoadFeatures';
 import useNotifyOnNavigation from 'lib/hooks/useNotifyOnNavigation';
 import { clientConfig as rollbarConfig, Provider as RollbarProvider } from 'lib/rollbar';
@@ -47,10 +47,10 @@ const ERROR_SCREEN_STYLES: ChakraProps = {
 };
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
-
-  useLoadFeatures();
+  useLoadFeatures(pageProps.uuid);
   useNotifyOnNavigation();
 
+  const growthBook = initGrowthBook(pageProps.uuid);
   const queryClient = useQueryClientConfig();
 
   const getLayout = Component.getLayout ?? ((page) => <Layout>{ page }</Layout>);