WIP : config events with zustand (aave#22)

* feat: config events with zustand * feat: types * chore: remove prev impl * chore: remove var from re render * chore: remove * feat: update types
aave · Mar 23, 2023 · d4b9323 · d4b9323
1 parent 396e247
commit d4b9323
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 93 deletions.
diff --git 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 (
     <CacheProvider value={emotionCache}>
@@ -67,40 +75,38 @@ export default function MyApp(props: MyAppProps) {
         }
         imageUrl="https://app.aave.com/aaveMetaLogo-min.jpg"
       />
-      <MixpanelProvider mixpanelToken={MIXPANEL_TOKEN}>
-        <LanguageProvider>
-          <Web3ReactProvider getLibrary={getWeb3Library}>
-            <Web3ContextProvider>
-              <AppGlobalStyles>
-                <AddressBlocked>
-                  <PermissionProvider>
-                    <ModalContextProvider>
-                      <BackgroundDataProvider>
-                        <AppDataProvider>
-                          <GasStationProvider>
-                            {getLayout(<Component {...pageProps} />)}
-                            <SupplyModal />
-                            <WithdrawModal />
-                            <BorrowModal />
-                            <RepayModal />
-                            <CollateralChangeModal />
-                            <RateSwitchModal />
-                            <ClaimRewardsModal />
-                            <EmodeModal />
-                            <SwapModal />
-                            <FaucetModal />
-                            <MigrateV3Modal />
-                          </GasStationProvider>
-                        </AppDataProvider>
-                      </BackgroundDataProvider>
-                    </ModalContextProvider>
-                  </PermissionProvider>
-                </AddressBlocked>
-              </AppGlobalStyles>
-            </Web3ContextProvider>
-          </Web3ReactProvider>
-        </LanguageProvider>
-      </MixpanelProvider>
+      <LanguageProvider>
+        <Web3ReactProvider getLibrary={getWeb3Library}>
+          <Web3ContextProvider>
+            <AppGlobalStyles>
+              <AddressBlocked>
+                <PermissionProvider>
+                  <ModalContextProvider>
+                    <BackgroundDataProvider>
+                      <AppDataProvider>
+                        <GasStationProvider>
+                          {getLayout(<Component {...pageProps} />)}
+                          <SupplyModal />
+                          <WithdrawModal />
+                          <BorrowModal />
+                          <RepayModal />
+                          <CollateralChangeModal />
+                          <RateSwitchModal />
+                          <ClaimRewardsModal />
+                          <EmodeModal />
+                          <SwapModal />
+                          <FaucetModal />
+                          <MigrateV3Modal />
+                        </GasStationProvider>
+                      </AppDataProvider>
+                    </BackgroundDataProvider>
+                  </ModalContextProvider>
+                </PermissionProvider>
+              </AddressBlocked>
+            </AppGlobalStyles>
+          </Web3ContextProvider>
+        </Web3ReactProvider>
+      </LanguageProvider>
     </CacheProvider>
   );
 }
diff --git 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
diff --git a/src/libs/Mixpanel/MixpanelProvider.tsx b/src/libs/Mixpanel/MixpanelProvider.tsx
diff --git a/src/store/analyticsSlice.ts 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
@@ -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<RootStore>()(
   subscribeWithSelector(
@@ -39,6 +41,7 @@ export const useRootStore = create<RootStore>()(
         ...createGovernanceSlice(...args),
         ...createV3MigrationSlice(...args),
         ...createWalletDomainsSlice(...args),
+        ...createAnalyticsSlice(...args),
       };
     })
   )

diff --git a/src/utils/mixPanel.ts b/src/utils/mixPanel.ts