diff --git a/pages/_app.page.tsx b/pages/_app.page.tsx index 7882d326b2..e65abe1eeb 100644 --- a/pages/_app.page.tsx +++ b/pages/_app.page.tsx @@ -18,6 +18,7 @@ import { GasStationProvider } from 'src/components/transactions/GasStation/GasSt import { AppDataProvider } from 'src/hooks/app-data-provider/useAppDataProvider'; import { ModalContextProvider } from 'src/hooks/useModal'; import { Web3ContextProvider } from 'src/libs/web3-data-provider/Web3Provider'; +import { useRootStore } from 'src/store/root'; import { SharedDependenciesProvider } from 'src/ui-config/SharedDependenciesProvider'; import createEmotionCache from '../src/createEmotionCache'; @@ -102,7 +103,7 @@ interface MyAppProps extends AppProps { export default function MyApp(props: MyAppProps) { const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; const getLayout = Component.getLayout ?? ((page: ReactNode) => page); - // const initializeMixpanel = useRootStore((store) => store.initializeMixpanel); + const initializeMixpanel = useRootStore((store) => store.initializeMixpanel); const [queryClient] = useState( () => new QueryClient({ @@ -114,13 +115,13 @@ export default function MyApp(props: MyAppProps) { }) ); - // const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL; + const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL; useEffect(() => { - // if (MIXPANEL_TOKEN) { - // initializeMixpanel(); - // } else { - console.log('no analytics tracking'); - // } + if (MIXPANEL_TOKEN) { + initializeMixpanel(); + } else { + console.log('no analytics tracking'); + } }, []); return ( diff --git a/src/modules/dashboard/DashboardContentWrapper.tsx b/src/modules/dashboard/DashboardContentWrapper.tsx index 7fdbfedd6f..e5026861e5 100644 --- a/src/modules/dashboard/DashboardContentWrapper.tsx +++ b/src/modules/dashboard/DashboardContentWrapper.tsx @@ -10,7 +10,7 @@ import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup import { useWeb3Context } from 'src/libs/hooks/useWeb3Context'; import { useRootStore } from 'src/store/root'; import { CustomMarket } from 'src/utils/marketsAndNetworksConfig'; -import { AUTH } from 'src/utils/mixPanelEvents'; +import { AUTH, DASHBOARD } from 'src/utils/mixPanelEvents'; import { BorrowAssetsList } from './lists/BorrowAssetsList/BorrowAssetsList'; import { BorrowedPositionsList } from './lists/BorrowedPositionsList/BorrowedPositionsList'; @@ -63,10 +63,9 @@ export const DashboardContentWrapper = ({ isBorrow }: DashboardContentWrapperPro currentMarket === ('fork_proto_mainnet_v3' as string)) || (!currentNetworkConfig.isFork && currentMarket === 'proto_mainnet_v3') } - // Todo tracking? - // onClick={() => - // trackEvent(WITHDRAW_MODAL.SWITCH_WITHDRAW_TYPE, { withdrawType: 'Withdraw' }) - // } + onClick={() => + trackEvent(DASHBOARD.SELECT_V3_ETH_MARKET, { market: 'Ethereum Main' }) + } > @@ -86,7 +85,7 @@ export const DashboardContentWrapper = ({ isBorrow }: DashboardContentWrapperPro value={currentNetworkConfig.isFork ? 'fork_proto_lido_v3' : 'proto_lido_v3'} // disabled={currentMarket === 'proto_lido_v3' || 'fork_proto_lido_v3' ? true : false} - // Todo tracking? + onClick={() => trackEvent(DASHBOARD.SELECT_V3_ETH_MARKET, { market: 'Lido' })} > diff --git a/src/modules/markets/MarketsTopPanel.tsx b/src/modules/markets/MarketsTopPanel.tsx index d5b592e08d..040d14bfe6 100644 --- a/src/modules/markets/MarketsTopPanel.tsx +++ b/src/modules/markets/MarketsTopPanel.tsx @@ -9,6 +9,7 @@ import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton'; import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup'; import { useRootStore } from 'src/store/root'; import { CustomMarket } from 'src/utils/marketsAndNetworksConfig'; +import { MARKETS } from 'src/utils/mixPanelEvents'; import { FormattedNumber } from '../../components/primitives/FormattedNumber'; import { TopInfoPanel } from '../../components/TopInfoPanel/TopInfoPanel'; @@ -21,6 +22,7 @@ export const MarketsTopPanel = () => { store.currentMarket, store.setCurrentMarket, ]); + const trackEvent = useRootStore((store) => store.trackEvent); const [currentNetworkConfig] = useRootStore((state) => [ state.currentNetworkConfig, @@ -110,6 +112,9 @@ export const MarketsTopPanel = () => { currentMarket === ('fork_proto_mainnet_v3' as string)) || (!currentNetworkConfig.isFork && currentMarket === 'proto_mainnet_v3') } + onClick={() => + trackEvent(MARKETS.SELECT_V3_ETH_MARKET, { market: 'Ethereum Main' }) + } > @@ -142,7 +147,7 @@ export const MarketsTopPanel = () => { (!currentNetworkConfig.isFork && currentMarket === 'proto_lido_v3') } value={currentNetworkConfig.isFork ? 'fork_proto_lido_v3' : 'proto_lido_v3'} - // Todo tracking? + onClick={() => trackEvent(MARKETS.SELECT_V3_ETH_MARKET, { market: 'Lido' })} > diff --git a/src/utils/mixPanelEvents.ts b/src/utils/mixPanelEvents.ts index 58400bb975..1056aa6ff3 100644 --- a/src/utils/mixPanelEvents.ts +++ b/src/utils/mixPanelEvents.ts @@ -33,12 +33,14 @@ export const DASHBOARD = { NOTIFY_DASHBOARD: 'Notify dashboard', // done TILE_VISBILITY: 'Tile visibility', SHOW_ASSETS_0_BALANCE: 'Show assets with zero balance dashboard', // done + SELECT_V3_ETH_MARKET: 'Clicks a V3 ETH market from dashboard', // done }; export const MARKETS = { DETAILS_NAVIGATION: 'View reserve details markets', SEARCH_ASSET: 'Search asset markets', // how to handle SORT: 'Sort', + SELECT_V3_ETH_MARKET: 'Clicks a V3 ETH market from markets', // done }; export const RESERVE_DETAILS = {