setup and test event

.env.example

@@ -2,4 +2,5 @@ NEXT_PUBLIC_SENTRY_DSN=xxx
 SENTRY_CSP_REPORT_URI=xxx
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
-NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=UA-XXXXXX-X
+NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=UA-XXXXXX-X
\ No newline at end of file
+NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN=xxx
\ No newline at end of file

.env.template

@@ -63,6 +63,7 @@ NEXT_PUBLIC_AUTH0_CLIENT_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_AUTH0_CLIENT_ID__
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID__
 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=__PLACEHOLDER_FOR_NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY__
 NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID__
+NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN=__PLACEHOLDER_FOR_NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN__
 
 # l2 config
 NEXT_PUBLIC_IS_L2_NETWORK=__PLACEHOLDER_FOR_NEXT_PUBLIC_IS_L2_NETWORKL__

configs/app/config.ts

@@ -163,6 +163,9 @@ const config = Object.freeze({
   googleAnalytics: {
     propertyId: getEnvValue(process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID),
   },
+  mixpanel: {
+    projectToken: getEnvValue(process.env.NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN),
+  },
   graphQL: {
     defaultTxnHash: getEnvValue(process.env.NEXT_PUBLIC_GRAPHIQL_TRANSACTION) || '',
   },

docs/ENVS.md

@@ -140,6 +140,7 @@ For each application, you need to specify the `MarketplaceCategoryId` to which i
 | NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID | `string` | Project id for [WalletConnect](https://docs.walletconnect.com/2.0/web3modal/react/installation#obtain-project-id) integration | - | - | `<secret>` |
 | NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `string` | Site key for [reCAPTCHA](https://developers.google.com/recaptcha) service | - | - | `<secret>` |
 | NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID | `string` | Property ID for [Google Analytics](https://analytics.google.com/) service | - | - | `UA-XXXXXX-X` |
+| NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN | `string` | Project token for [Mixpanel](https://mixpanel.com/) analytics service | - | - | `<secret>` |
 
 ## L2 configuration
 *Note* All variables are required only for roll-up instances

lib/csp/generateCspPolicy.ts

@@ -9,6 +9,7 @@ function generateCspPolicy() {
     descriptors.googleAnalytics(),
     descriptors.googleFonts(),
     descriptors.googleReCaptcha(),
+    descriptors.mixpanel(),
     descriptors.monaco(),
     descriptors.sentry(),
     descriptors.walletConnect(),

lib/csp/policies/index.ts

@@ -4,6 +4,7 @@ export { cloudFlare } from './cloudFlare';
 export { googleAnalytics } from './googleAnalytics';
 export { googleFonts } from './googleFonts';
 export { googleReCaptcha } from './googleReCaptcha';
+export { mixpanel } from './mixpanel';
 export { monaco } from './monaco';
 export { sentry } from './sentry';
 export { walletConnect } from './walletConnect';

lib/csp/policies/mixpanel.ts

+import type CspDev from 'csp-dev';
+
+import appConfig from 'configs/app/config';
+
+export function mixpanel(): CspDev.DirectiveDescriptor {
+  if (!appConfig.mixpanel.projectToken) {
+    return {};
+  }
+
+  return {
+    'connect-src': [
+      '*.mixpanel.com',
+    ],
+  };
+}

lib/hooks/useMixpanelInit.tsx

+import mixpanel from 'mixpanel-browser';
+import React from 'react';
+
+import appConfig from 'configs/app/config';
+
+export default function useMixpanelInit() {
+  React.useEffect(() => {
+    if (appConfig.mixpanel.projectToken) {
+      const config = {
+        debug: appConfig.isDev,
+      };
+      mixpanel.init(appConfig.mixpanel.projectToken, config);
+    }
+  }, []);
+}

package.json

@@ -57,6 +57,7 @@
     "graphql-ws": "^5.11.3",
     "js-cookie": "^3.0.1",
     "lodash": "^4.0.0",
+    "mixpanel-browser": "^2.47.0",
     "monaco-editor": "^0.34.1",
     "next": "13.3.0",
     "nextjs-routes": "^1.0.8",
@@ -88,6 +89,7 @@
     "@types/dom-to-image": "^2.6.4",
     "@types/jest": "^29.2.0",
     "@types/js-cookie": "^3.0.2",
+    "@types/mixpanel-browser": "^2.38.1",
     "@types/node": "18.11.18",
     "@types/phoenix": "^1.5.4",
     "@types/qrcode": "^1.5.0",

pages/_app.tsx

@@ -11,6 +11,7 @@ import { Chakra } from 'lib/Chakra';
 import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
 import getErrorStatusCode from 'lib/errors/getErrorStatusCode';
 import useConfigSentry from 'lib/hooks/useConfigSentry';
+import useMixpanelInit from 'lib/hooks/useMixpanelInit';
 import { SocketProvider } from 'lib/socket/context';
 import theme from 'theme';
 import AppError from 'ui/shared/AppError/AppError';
@@ -20,7 +21,11 @@ import GoogleAnalytics from 'ui/shared/GoogleAnalytics';
 import 'lib/setLocale';
 
 function MyApp({ Component, pageProps }: AppProps) {
+
   useConfigSentry();
+
+  useMixpanelInit();
+
   const [ queryClient ] = useState(() => new QueryClient({
     defaultOptions: {
       queries: {

ui/pages/Login.tsx

 import { VStack, Textarea, Button, Alert, AlertTitle, AlertDescription, Code, Flex, Box } from '@chakra-ui/react';
 import * as Sentry from '@sentry/react';
+import mixpanel from 'mixpanel-browser';
 import type { ChangeEvent } from 'react';
 import React from 'react';
 
@@ -27,6 +28,10 @@ const Login = () => {
     Sentry.captureException(new Error('Test error'), { extra: { foo: 'bar' }, tags: { source: 'test' } });
   }, []);
 
+  const checkMixpanel = React.useCallback(() => {
+    mixpanel.track('Test event', { my_prop: 'foo bar' });
+  }, []);
+
   const handleTokenChange = React.useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
     setToken(event.target.value);
   }, []);
@@ -74,6 +79,7 @@ const Login = () => {
           </>
         ) }
         <Button colorScheme="red" onClick={ checkSentry }>Check Sentry</Button>
+        <Button colorScheme="teal" onClick={ checkMixpanel }>Check Mixpanel</Button>
         <Flex columnGap={ 2 } alignItems="center">
           <Box w="50px" textAlign="center">{ num }</Box>
           <Button onClick={ handleNumIncrement } size="sm">add</Button>

yarn.lock

@@ -4776,6 +4776,11 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.186.tgz#862e5514dd7bd66ada6c70ee5fce844b06c8ee97"
   integrity sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==
 
+"@types/mixpanel-browser@^2.38.1":
+  version "2.38.1"
+  resolved "https://registry.yarnpkg.com/@types/mixpanel-browser/-/mixpanel-browser-2.38.1.tgz#914cc726194cc0358129b6d84657f078e47f7697"
+  integrity sha512-XzQbwgiOPsFXUQnjz3vSwcwrvJDbQ35bCiwa/1VXGrHvU1ti9+eqO1GY91DShzkEzKkkEEkxfNshS5dbBZqd7w==
+
 "@types/node@*":
   version "18.8.4"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.8.4.tgz#54be907698f40de8a45770b48486aa3cbd3adff7"
@@ -10406,6 +10411,11 @@ minimist@^1.2.3, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
+mixpanel-browser@^2.47.0:
+  version "2.47.0"
+  resolved "https://registry.yarnpkg.com/mixpanel-browser/-/mixpanel-browser-2.47.0.tgz#4e7fd3bb660c6f63443efbd169d1cd327db71ed4"
+  integrity sha512-Ldrva0fRBEIFWmEibBQO1PulfpJVF3pf28Guk09lDirDaSQqqU/xs9zQLwN2rL5VwVtsP1aD3JaCgaa98EjojQ==
+
 mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"