Merge pull request #5 from a51finance/mixpanel-integration

feat: Mixpanel integration added

src/components/Web3Provider/index.tsx

@@ -1,4 +1,5 @@
 import { CustomUserProperties, InterfaceEventName, WalletConnectionResult } from '@uniswap/analytics-events'
+import { ChainId } from '@uniswap/sdk-core'
 import { useWeb3React, Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'
 import { Connector } from '@web3-react/types'
 import { sendAnalyticsEvent, user, useTrace } from 'analytics'
@@ -8,6 +9,8 @@ import { DEPRECATED_RPC_PROVIDERS, RPC_PROVIDERS } from 'constants/providers'
 import { useFallbackProviderEnabled } from 'featureFlags/flags/fallbackProvider'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import usePrevious from 'hooks/usePrevious'
+import { chainIdToNetworkName } from 'lib/hooks/useCurrencyLogoURIs'
+import { MixPanelTrackEvent } from 'pages/mixpanel'
 import { ReactNode, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useConnectedWallets } from 'state/wallets/hooks'
@@ -106,6 +109,14 @@ function Updater() {
         page: currentPage,
       })
 
+      MixPanelTrackEvent({
+        category: 'Dex51 Wallet Connected',
+        action: 'Wallet connected by user',
+        label: walletType,
+        account,
+        chain: chainIdToNetworkName(chainId ?? ChainId.MAINNET),
+      })
+
       addConnectedWallet({ account, walletType })
     }
   }, [account, addConnectedWallet, currentPage, chainId, connectedWallets, connector, previousAccount, provider])

src/components/swap/ConfirmSwapModal.tsx

@@ -42,7 +42,6 @@ import { PendingConfirmModalState, PendingModalContent } from './PendingModalCon
 import { ErrorModalContent, PendingModalError } from './PendingModalContent/ErrorModalContent'
 import SwapModalFooter from './SwapModalFooter'
 import SwapModalHeader from './SwapModalHeader'
-import { MixPanelTrackEvent } from 'pages/mixpanel'
 
 export enum ConfirmModalState {
   REVIEWING,
@@ -297,13 +296,6 @@ export default function ConfirmSwapModal({
       onSwap: () => {
         clearSwapState()
         onConfirm()
-        MixPanelTrackEvent(
-          {
-            category:"Swap confirmed",
-            action:"User swapped",
-            label:"Swap event"
-          }
-        );
       },
       onCurrencySelection,
       allowance,

src/pages/Swap/index.tsx

@@ -45,6 +45,7 @@ import { useUSDPrice } from 'hooks/useUSDPrice'
 import useWrapCallback, { WrapErrorText, WrapType } from 'hooks/useWrapCallback'
 import JSBI from 'jsbi'
 import { formatSwapQuoteReceivedEventProperties } from 'lib/utils/analytics'
+import { MixPanelTrackEvent } from 'pages/mixpanel'
 import { ReactNode, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
 import { ArrowDown } from 'react-feather'
 import { useLocation, useNavigate } from 'react-router-dom'
@@ -479,6 +480,11 @@ export function Swap({
     }
     swapCallback()
       .then((result) => {
+        MixPanelTrackEvent({
+          category: 'Swap done on Dex51',
+          action: `Swap occur from ${currencies[Field.INPUT]?.symbol} to ${currencies[Field.OUTPUT]?.symbol} `,
+          account,
+        })
         setSwapState((currentState) => ({
           ...currentState,
           swapError: undefined,
@@ -492,7 +498,7 @@ export function Swap({
           swapResult: undefined,
         }))
       })
-  }, [swapCallback, preTaxStablecoinPriceImpact])
+  }, [swapCallback, preTaxStablecoinPriceImpact, currencies, account])
 
   const handleOnWrap = useCallback(async () => {
     if (!onWrap) return

src/pages/mixpanel.ts

@@ -1,25 +1,27 @@
-import mixpanel from 'mixpanel-browser';
+import mixpanel from 'mixpanel-browser'
 const MIXPANEL_KEY = process.env.REACT_APP_MIXPANEL_KEY
 if (MIXPANEL_KEY === undefined) {
   throw new Error(`MIXPANEL_KEY must be a defined environment variable`)
 }
-mixpanel.init(MIXPANEL_KEY);
-
+mixpanel.init(MIXPANEL_KEY)
 
 // Global function to track an event
 export const MixPanelTrackEvent = (msg: {
-  category: string;
-  action: string;
-  label?: string;
+  category: string
+  action: string
+  label?: string
+  account?: string
+  chain?: string
+  tokenAddress?: string
 }) => {
   // Identify the user performing the event (if applicable)
   // mixpanel.identify(userAgent.device);
 
-  const { category, ...res } = msg;
+  const { category, ...res } = msg
 
   // Track the event with the provided message object
 
-    mixpanel.track(category, {
-      ...res,
-    });
-};
+  mixpanel.track(category, {
+    ...res,
+  })
+}

src/state/swap/hooks.tsx

@@ -8,6 +8,7 @@ import { useDebouncedTrade } from 'hooks/useDebouncedTrade'
 import { useSwapTaxes } from 'hooks/useSwapTaxes'
 import { useUSDPrice } from 'hooks/useUSDPrice'
 import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
+import { MixPanelTrackEvent } from 'pages/mixpanel'
 import { ParsedQs } from 'qs'
 import { ReactNode, useCallback, useEffect, useMemo } from 'react'
 import { AnyAction } from 'redux'
@@ -31,6 +32,7 @@ export function useSwapActionHandlers(dispatch: React.Dispatch<AnyAction>): {
   onUserInput: (field: Field, typedValue: string) => void
   onChangeRecipient: (recipient: string | null) => void
 } {
+  const { account } = useWeb3React()
   const onCurrencySelection = useCallback(
     (field: Field, currency: Currency) => {
       dispatch(
@@ -39,8 +41,14 @@ export function useSwapActionHandlers(dispatch: React.Dispatch<AnyAction>): {
           currencyId: currency.isToken ? currency.address : currency.isNative ? 'ETH' : '',
         })
       )
+      MixPanelTrackEvent({
+        category: 'Token selected Dex51',
+        action: `${currency.symbol} selected by user`,
+        label: 'Token selected',
+        account,
+      })
     },
-    [dispatch]
+    [dispatch, account]
   )
 
   const onSwitchTokens = useCallback(