diff --git a/pages/_app.page.tsx b/pages/_app.page.tsx
index fde2bea591..528238f6f2 100644
--- a/pages/_app.page.tsx
+++ b/pages/_app.page.tsx
@@ -3,6 +3,7 @@ import '/public/fonts/inter/inter.css';
import { CacheProvider, EmotionCache } from '@emotion/react';
import { Web3ReactProvider } from '@web3-react/core';
import { providers } from 'ethers';
+import mixpanel from 'mixpanel-browser';
import { NextPage } from 'next';
import { AppProps } from 'next/app';
import Head from 'next/head';
@@ -25,7 +26,6 @@ import { BackgroundDataProvider } from 'src/hooks/app-data-provider/BackgroundDa
import { AppDataProvider } from 'src/hooks/app-data-provider/useAppDataProvider';
import { ModalContextProvider } from 'src/hooks/useModal';
import { PermissionProvider } from 'src/hooks/usePermissions';
-import MixpanelProvider from 'src/libs/Mixpanel/MixpanelProvider';
import { Web3ContextProvider } from 'src/libs/web3-data-provider/Web3Provider';
import createEmotionCache from '../src/createEmotionCache';
@@ -53,7 +53,15 @@ interface MyAppProps extends AppProps {
export default function MyApp(props: MyAppProps) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
const getLayout = Component.getLayout ?? ((page: React.ReactNode) => page);
- const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL;
+ const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL || '';
+
+ React.useEffect(() => {
+ if (MIXPANEL_TOKEN) {
+ mixpanel.init(MIXPANEL_TOKEN);
+ } else {
+ console.warn('Mixpanel token not provided. Mixpanel will not be initialized.');
+ }
+ }, []);
return (
@@ -67,40 +75,38 @@ export default function MyApp(props: MyAppProps) {
}
imageUrl="https://app.aave.com/aaveMetaLogo-min.jpg"
/>
-
-
-
-
-
-
-
-
-
-
-
- {getLayout()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ {getLayout()}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/components/MarketSwitcher.tsx b/src/components/MarketSwitcher.tsx
index e176391171..0472cf88fb 100644
--- a/src/components/MarketSwitcher.tsx
+++ b/src/components/MarketSwitcher.tsx
@@ -12,8 +12,8 @@ import {
useTheme,
} from '@mui/material';
import React, { useState } from 'react';
+import { useRootStore } from 'src/store/root';
import { BaseNetworkConfig } from 'src/ui-config/networksConfig';
-import useMixpanelTrack from 'src/utils/mixPanel';
import { DASHBOARD } from 'src/utils/mixPanelEvents';
import { useProtocolDataContext } from '../hooks/useProtocolDataContext';
@@ -114,7 +114,7 @@ export const MarketSwitcher = () => {
const theme = useTheme();
const upToLG = useMediaQuery(theme.breakpoints.up('lg'));
const downToXSM = useMediaQuery(theme.breakpoints.down('xsm'));
- const trackEvent = useMixpanelTrack();
+ const trackEvent = useRootStore((store) => store.trackEvent);
const isV3MarketsAvailable = availableMarkets
.map((marketId: CustomMarket) => {
diff --git a/src/libs/Mixpanel/MixpanelContext.ts b/src/libs/Mixpanel/MixpanelContext.ts
deleted file mode 100644
index 7cec7e8267..0000000000
--- a/src/libs/Mixpanel/MixpanelContext.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Mixpanel } from 'mixpanel-browser';
-import { createContext } from 'react';
-
-const MixpanelContext = createContext(null);
-
-export default MixpanelContext;
diff --git a/src/libs/Mixpanel/MixpanelProvider.tsx b/src/libs/Mixpanel/MixpanelProvider.tsx
deleted file mode 100644
index 0b9d5b9600..0000000000
--- a/src/libs/Mixpanel/MixpanelProvider.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import mixpanel, { Mixpanel } from 'mixpanel-browser';
-import React, { FC, useEffect, useState } from 'react';
-
-import MixpanelContext from './MixpanelContext';
-
-interface MixpanelProviderProps {
- children: React.ReactNode;
- mixpanelToken?: string;
-}
-
-const MixpanelProvider: FC = ({ children, mixpanelToken }) => {
- const [mixpanelInstance, setMixpanelInstance] = useState(null);
-
- useEffect(() => {
- if (mixpanelToken) {
- mixpanel.init(mixpanelToken);
- setMixpanelInstance(mixpanel);
- } else {
- console.warn('Mixpanel token not provided. Mixpanel will not be initialized.');
- }
- }, [mixpanelToken]);
-
- return {children};
-};
-
-export default MixpanelProvider;
diff --git a/src/store/analyticsSlice.ts b/src/store/analyticsSlice.ts
new file mode 100644
index 0000000000..cefac3311c
--- /dev/null
+++ b/src/store/analyticsSlice.ts
@@ -0,0 +1,25 @@
+import mixpanel from 'mixpanel-browser';
+import { StateCreator } from 'zustand';
+
+import { RootStore } from './root';
+
+export type AnalyticsSlice = {
+ trackEvent: (eventName: string, properties?: { [key: string]: string }) => void;
+};
+
+export const createAnalyticsSlice: StateCreator<
+ RootStore,
+ [['zustand/subscribeWithSelector', never], ['zustand/devtools', never]],
+ [],
+ AnalyticsSlice
+> = (set, get) => {
+ return {
+ trackEvent: (eventName: string, properties?: { [key: string]: string }) => {
+ const eventProperties = {
+ ...properties,
+ walletAddress: get().account,
+ };
+ mixpanel.track(eventName, eventProperties);
+ },
+ };
+};
diff --git a/src/store/root.ts b/src/store/root.ts
index 053ce481bc..bcce4e5f34 100644
--- a/src/store/root.ts
+++ b/src/store/root.ts
@@ -5,6 +5,7 @@ import { ENABLE_TESTNET, STAGING_ENV } from 'src/utils/marketsAndNetworksConfig'
import create from 'zustand';
import { devtools, subscribeWithSelector } from 'zustand/middleware';
+import { AnalyticsSlice, createAnalyticsSlice } from './analyticsSlice';
import { createGovernanceSlice, GovernanceSlice } from './governanceSlice';
import { createIncentiveSlice, IncentiveSlice } from './incentiveSlice';
import { createPoolSlice, PoolSlice } from './poolSlice';
@@ -25,7 +26,8 @@ export type RootStore = StakeSlice &
IncentiveSlice &
GovernanceSlice &
V3MigrationSlice &
- WalletDomainsSlice;
+ WalletDomainsSlice &
+ AnalyticsSlice;
export const useRootStore = create()(
subscribeWithSelector(
@@ -39,6 +41,7 @@ export const useRootStore = create()(
...createGovernanceSlice(...args),
...createV3MigrationSlice(...args),
...createWalletDomainsSlice(...args),
+ ...createAnalyticsSlice(...args),
};
})
)
diff --git a/src/utils/mixPanel.ts b/src/utils/mixPanel.ts
deleted file mode 100644
index da31e98e03..0000000000
--- a/src/utils/mixPanel.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useContext } from 'react';
-import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
-import MixpanelContext from 'src/libs/Mixpanel/MixpanelContext';
-
-const useMixpanelTrack = () => {
- const { currentAccount: walletAddress } = useWeb3Context();
- const mixpanel = useContext(MixpanelContext);
-
- const trackEvent = (eventName: string, eventProperties: Record = {}): void => {
- if (mixpanel) {
- const properties = {
- ...eventProperties,
- walletAddress: walletAddress,
- };
- mixpanel.track(eventName, properties);
- }
- };
-
- return trackEvent;
-};
-
-export default useMixpanelTrack;