From f2b4c786b4eeb320cfebf68ce4aee8c8fcbaa404 Mon Sep 17 00:00:00 2001 From: HamzaBhatti125 Date: Sat, 21 Oct 2023 02:35:43 +0500 Subject: [PATCH 1/2] mixpanel integration added --- src/components/Web3Provider/index.tsx | 11 +++++++++++ src/pages/Swap/index.tsx | 8 +++++++- src/pages/mixpanel.ts | 24 +++++++++++++----------- src/state/swap/hooks.tsx | 10 +++++++++- 4 files changed, 40 insertions(+), 13 deletions(-) diff --git a/src/components/Web3Provider/index.tsx b/src/components/Web3Provider/index.tsx index 965c280e240..4fc18844f53 100644 --- a/src/components/Web3Provider/index.tsx +++ b/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]) diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx index 1436c8d50d9..ff1ba49ece9 100644 --- a/src/pages/Swap/index.tsx +++ b/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 diff --git a/src/pages/mixpanel.ts b/src/pages/mixpanel.ts index 48f0edef4b3..d5440f2f8ba 100644 --- a/src/pages/mixpanel.ts +++ b/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, - }); -}; \ No newline at end of file + mixpanel.track(category, { + ...res, + }) +} diff --git a/src/state/swap/hooks.tsx b/src/state/swap/hooks.tsx index 7656881433a..c21838ea169 100644 --- a/src/state/swap/hooks.tsx +++ b/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): { 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): { 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( From 7aaf9fbf875b2d9f43497c8c6586ebd6c8abad3c Mon Sep 17 00:00:00 2001 From: HamzaBhatti125 Date: Sat, 21 Oct 2023 15:05:58 +0500 Subject: [PATCH 2/2] feat:mixpanel integration updated --- src/components/swap/ConfirmSwapModal.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/swap/ConfirmSwapModal.tsx b/src/components/swap/ConfirmSwapModal.tsx index 011f27de3bb..98796538d2d 100644 --- a/src/components/swap/ConfirmSwapModal.tsx +++ b/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,