refactor: split kyberAI tracking(#2174)

KyberNetwork · Aug 15, 2023 · 2f0fdfd · 2f0fdfd
1 parent 7340eb6
commit 2f0fdfd
Show file tree

Hide file tree

Showing 13 changed files with 126 additions and 126 deletions.
diff --git a/src/hooks/useMixpanel.ts b/src/hooks/useMixpanel.ts
@@ -295,7 +295,6 @@ type FeeInfo = {
 
 export default function useMixpanel(currencies?: { [field in Field]?: Currency }) {
   const { chainId, account, isEVM, networkInfo } = useActiveWeb3React()
-  const { isWhiteList } = useIsWhiteListKyberAI()
   const { saveGas } = useSwapState()
   const network = networkInfo.name
 
@@ -1336,105 +1335,9 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency }
           break
         }
       }
-
-      // Whitelist protected events
-      if (isWhiteList) {
-        switch (type) {
-          case MIXPANEL_TYPE.KYBERAI_SHARE_TOKEN_CLICK: {
-            mixpanel.track('KyberAI - Share token click', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_GET_STARTED_CLICK: {
-            mixpanel.track('KyberAI - Click Get Started', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_RANKING_SWITCH_CHAIN_CLICK: {
-            mixpanel.track('KyberAI - Ranking - Switch chain click', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_SEARCH_TOKEN_SUCCESS: {
-            mixpanel.track('KyberAI - Search token success', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_SUBSCRIBE_CLICK: {
-            mixpanel.track('KyberAI - Subscribe', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_RANKING_ACTION_CLICK: {
-            mixpanel.track('KyberAI - Ranking - Action click', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST: {
-            mixpanel.track('KyberAI - Add token to watchlist', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_RANKING_CATEGORY_CLICK: {
-            mixpanel.track('KyberAI - Ranking - Category click', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_EXPLORING_SWAP_TOKEN_CLICK: {
-            mixpanel.track('KyberAI - Exploring - Swap token click', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_EXPLORING_VIEW_ALL_CLICK: {
-            mixpanel.track('KyberAI - Exploring - View all click', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_EXPLORING_ANALYSIS_TYPE_CLICK: {
-            mixpanel.track('KyberAI - Exploring - Analysis type click', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_EXPLORING_DISPLAY_SETTING_CLICK: {
-            mixpanel.track('KyberAI - Exploring - Display setting click', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_EXPLORING_CHANGE_DISPLAY_SETTING: {
-            mixpanel.track('KyberAI - Exploring - Change display setting', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_EXPLORING_FULL_SCREEN_CLICK: {
-            mixpanel.track('KyberAI - Exploring - Full screen click', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_EXPLORING_SHARE_CHART_CLICK: {
-            mixpanel.track('KyberAI - Exploring - Share chart click', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_EXPLORING_SWITCH_TRADE_TYPE_CLICK: {
-            mixpanel.track('KyberAI - Exploring - Switch trade type click', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_EXPLORING_SWITCH_TIMEFRAME_CLICK: {
-            mixpanel.track('KyberAI - Exploring - Switch timeframe click', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_POOL_INSIGHT_CLICK: {
-            mixpanel.track('KyberAI - Pool insight click', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_POOL_EXPLORE_TOKEN_IN_POPUP_INSIGHT: {
-            mixpanel.track('KyberAI - Pool - Explore token on popup insight', payload)
-            break
-          }
-          case MIXPANEL_TYPE.KYBERAI_EXPAND_WIDGET_CLICK: {
-            mixpanel.track('KyberAI - Expand widget click', payload)
-            break
-          }
-          default:
-            break
-        }
-      }
     },
     /* eslint-disable */
-    [
-      currencies,
-      network,
-      saveGas,
-      account,
-      mixpanel.hasOwnProperty('get_distinct_id'),
-      ethPrice?.currentPrice,
-      isWhiteList,
-    ],
+    [currencies, network, saveGas, account, mixpanel.hasOwnProperty('get_distinct_id'), ethPrice?.currentPrice],
     /* eslint-enable */
   )
   const subgraphMixpanelHandler = useCallback(
@@ -1643,6 +1546,103 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency }
   return { mixpanelHandler, subgraphMixpanelHandler }
 }
 
+export const useMixpanelKyberAI = () => {
+  const { isWhiteList } = useIsWhiteListKyberAI()
+  const mixpanelHandler = useCallback(
+    (type: MIXPANEL_TYPE, payload?: any) => {
+      // Whitelist protected events
+      if (isWhiteList) {
+        switch (type) {
+          case MIXPANEL_TYPE.KYBERAI_SHARE_TOKEN_CLICK: {
+            mixpanel.track('KyberAI - Share token click', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_GET_STARTED_CLICK: {
+            mixpanel.track('KyberAI - Click Get Started', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_RANKING_SWITCH_CHAIN_CLICK: {
+            mixpanel.track('KyberAI - Ranking - Switch chain click', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_SEARCH_TOKEN_SUCCESS: {
+            mixpanel.track('KyberAI - Search token success', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_SUBSCRIBE_CLICK: {
+            mixpanel.track('KyberAI - Subscribe', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_RANKING_ACTION_CLICK: {
+            mixpanel.track('KyberAI - Ranking - Action click', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST: {
+            mixpanel.track('KyberAI - Add token to watchlist', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_RANKING_CATEGORY_CLICK: {
+            mixpanel.track('KyberAI - Ranking - Category click', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_EXPLORING_SWAP_TOKEN_CLICK: {
+            mixpanel.track('KyberAI - Exploring - Swap token click', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_EXPLORING_VIEW_ALL_CLICK: {
+            mixpanel.track('KyberAI - Exploring - View all click', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_EXPLORING_ANALYSIS_TYPE_CLICK: {
+            mixpanel.track('KyberAI - Exploring - Analysis type click', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_EXPLORING_DISPLAY_SETTING_CLICK: {
+            mixpanel.track('KyberAI - Exploring - Display setting click', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_EXPLORING_CHANGE_DISPLAY_SETTING: {
+            mixpanel.track('KyberAI - Exploring - Change display setting', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_EXPLORING_FULL_SCREEN_CLICK: {
+            mixpanel.track('KyberAI - Exploring - Full screen click', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_EXPLORING_SHARE_CHART_CLICK: {
+            mixpanel.track('KyberAI - Exploring - Share chart click', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_EXPLORING_SWITCH_TRADE_TYPE_CLICK: {
+            mixpanel.track('KyberAI - Exploring - Switch trade type click', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_EXPLORING_SWITCH_TIMEFRAME_CLICK: {
+            mixpanel.track('KyberAI - Exploring - Switch timeframe click', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_POOL_INSIGHT_CLICK: {
+            mixpanel.track('KyberAI - Pool insight click', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_POOL_EXPLORE_TOKEN_IN_POPUP_INSIGHT: {
+            mixpanel.track('KyberAI - Pool - Explore token on popup insight', payload)
+            break
+          }
+          case MIXPANEL_TYPE.KYBERAI_EXPAND_WIDGET_CLICK: {
+            mixpanel.track('KyberAI - Expand widget click', payload)
+            break
+          }
+          default:
+            break
+        }
+      }
+    },
+    [isWhiteList],
+  )
+  return mixpanelHandler
+}
+
 export const useGlobalMixpanelEvents = () => {
   const { account, chainId, isEVM } = useActiveWeb3React()
   const { mixpanelHandler } = useMixpanel()

diff --git a/src/pages/ProAmmPools/KyberAIModalInPool.tsx b/src/pages/ProAmmPools/KyberAIModalInPool.tsx
@@ -14,7 +14,7 @@ import Row, { RowBetween, RowFit } from 'components/Row'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { APP_PATHS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
-import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
+import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import KyberScoreMeter from 'pages/TrueSightV2/components/KyberScoreMeter'
 import SimpleTooltip from 'pages/TrueSightV2/components/SimpleTooltip'
@@ -94,7 +94,7 @@ const enum TokenTabType {
 const KyberAIModalInPool = ({ currency0, currency1 }: { currency0?: Currency; currency1?: Currency }) => {
   const theme = useTheme()
   const { chainId } = useActiveWeb3React()
-  const { mixpanelHandler } = useMixpanel()
+  const mixpanelHandler = useMixpanelKyberAI()
   const { isWhiteList } = useIsWhiteListKyberAI()
   const [tab, setTab] = useState<TokenTabType>(TokenTabType.First)
   const [openTruesightModal, setOpenTruesightModal] = useState(false)

diff --git a/src/pages/TrueSightV2/components/DisplaySettings.tsx b/src/pages/TrueSightV2/components/DisplaySettings.tsx
@@ -12,7 +12,7 @@ import Icon from 'components/Icons/Icon'
 import Popover from 'components/Popover'
 import { RowBetween, RowFit } from 'components/Row'
 import Toggle from 'components/Toggle'
-import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
+import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
 import { ApplicationModal } from 'state/application/actions'
@@ -105,7 +105,7 @@ const technicalAnalysisSettings = [
 
 export default function DisplaySettings({ currentTab }: { currentTab: DiscoverTokenTab }) {
   const theme = useTheme()
-  const { mixpanelHandler } = useMixpanel()
+  const mixpanelHandler = useMixpanelKyberAI()
   const [showSettings, setShowSettings] = useState(false)
   const [showOnchainSetting, setShowOnchainSetting] = useState(currentTab === DiscoverTokenTab.OnChainAnalysis)
   const [showTechnicalSetting, setShowTechnicalSetting] = useState(currentTab === DiscoverTokenTab.TechnicalAnalysis)

diff --git a/src/pages/TrueSightV2/components/KyberAIWidget.tsx b/src/pages/TrueSightV2/components/KyberAIWidget.tsx
@@ -16,7 +16,7 @@ import Row, { RowBetween } from 'components/Row'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { APP_PATHS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
-import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
+import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
 import { useIsWhiteListKyberAI, useKyberAIWidget } from 'state/user/hooks'
@@ -179,7 +179,7 @@ const widgetTabTooltip = {
 
 export default function Widget() {
   const { account } = useActiveWeb3React()
-  const { mixpanelHandler } = useMixpanel()
+  const mixpanelHandler = useMixpanelKyberAI()
   const theme = useTheme()
   const [showExpanded, setShowExpanded] = useState(false)
   const [showWidget, toggleWidget] = useKyberAIWidget()

diff --git a/src/pages/TrueSightV2/components/SearchWithDropDown.tsx b/src/pages/TrueSightV2/components/SearchWithDropDown.tsx
@@ -13,7 +13,7 @@ import Icon from 'components/Icons/Icon'
 import Row, { RowFit } from 'components/Row'
 import { APP_PATHS } from 'constants/index'
 import useDebounce from 'hooks/useDebounce'
-import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
+import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
 import { MEDIA_WIDTHS } from 'theme'
@@ -304,7 +304,7 @@ const SearchResultTableWrapper = ({ header, children }: { header?: ReactNode; ch
 let checkedNewData = false
 const SearchWithDropdown = () => {
   const theme = useTheme()
-  const { mixpanelHandler } = useMixpanel()
+  const mixpanelHandler = useMixpanelKyberAI()
   const [searchParams] = useSearchParams()
   const { pathname } = useLocation()
 

diff --git a/src/pages/TrueSightV2/components/TimeFrameLegend.tsx b/src/pages/TrueSightV2/components/TimeFrameLegend.tsx
@@ -1,7 +1,7 @@
 import React, { useLayoutEffect, useRef, useState } from 'react'
 import styled, { css } from 'styled-components'
 
-import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
+import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 
 import useKyberAITokenOverview from '../hooks/useKyberAITokenOverview'
 import { KyberAITimeframe } from '../types'
@@ -66,7 +66,7 @@ const TimeFrameLegend = ({
   timeframes: KyberAITimeframe[]
   onSelect: (timeframe: KyberAITimeframe) => void
 }) => {
-  const { mixpanelHandler } = useMixpanel()
+  const mixpanelHandler = useMixpanelKyberAI()
   const refs = useRef<any>({})
   const ref = useRef<HTMLDivElement>(null)
   const [left, setLeft] = useState(0)

diff --git a/src/pages/TrueSightV2/components/TokenOverview.tsx b/src/pages/TrueSightV2/components/TokenOverview.tsx
@@ -14,7 +14,7 @@ import Icon from 'components/Icons/Icon'
 import { DotsLoader } from 'components/Loader/DotsLoader'
 import Row, { RowBetween, RowFit } from 'components/Row'
 import { MouseoverTooltip } from 'components/Tooltip'
-import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
+import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { MEDIA_WIDTHS } from 'theme'
 import { getEtherscanLink, shortenAddress } from 'utils'
@@ -146,7 +146,7 @@ const ExternalLink = ({ href, className, children }: { href: string; className?:
 export const TokenOverview = ({ data, isLoading }: { data?: ITokenOverview; isLoading?: boolean }) => {
   const theme = useTheme()
   const { chain } = useParams()
-  const { mixpanelHandler } = useMixpanel()
+  const mixpanelHandler = useMixpanelKyberAI()
   const above768 = useMedia(`(min-width:${MEDIA_WIDTHS.upToSmall}px)`)
   const [expanded, setExpanded] = useState(false)
   const [showShare, setShowShare] = useState(false)

diff --git a/src/pages/TrueSightV2/components/index.tsx b/src/pages/TrueSightV2/components/index.tsx
@@ -11,7 +11,7 @@ import Icon from 'components/Icons/Icon'
 import Modal from 'components/Modal'
 import Row, { RowBetween, RowFit } from 'components/Row'
 import { MouseoverTooltip } from 'components/Tooltip'
-import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
+import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { CloseIcon, MEDIA_WIDTHS } from 'theme'
 import { openFullscreen } from 'utils/index'
@@ -141,7 +141,7 @@ export const SectionWrapper = ({
   style?: React.CSSProperties
 }) => {
   const theme = useTheme()
-  const { mixpanelHandler } = useMixpanel()
+  const mixpanelHandler = useMixpanelKyberAI()
   const { chain } = useParams()
   const { data: token } = useKyberAITokenOverview()
   const ref = useRef<HTMLDivElement>(null)

diff --git a/src/pages/TrueSightV2/components/table/index.tsx b/src/pages/TrueSightV2/components/table/index.tsx
@@ -19,7 +19,7 @@ import Pagination from 'components/Pagination'
 import Row, { RowFit } from 'components/Row'
 import { APP_PATHS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
-import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
+import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
 import { NETWORK_IMAGE_URL, NETWORK_TO_CHAINID } from 'pages/TrueSightV2/constants'
@@ -587,7 +587,7 @@ const WidgetTokenRow = ({
   const theme = useTheme()
   const navigate = useNavigate()
   const { account } = useActiveWeb3React()
-  const { mixpanelHandler } = useMixpanel()
+  const mixpanelHandler = useMixpanelKyberAI()
   const reachedMaxLimit = useIsReachMaxLimitWatchedToken(token?.tokens.length)
 
   const latestKyberScore: IKyberScoreChart | undefined = token?.ks_3d?.[token.ks_3d.length - 1]

diff --git a/src/pages/TrueSightV2/index.tsx b/src/pages/TrueSightV2/index.tsx
@@ -12,7 +12,7 @@ import SubscribeNotificationButton from 'components/SubscribeButton'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { KYBER_AI_TOPIC_ID } from 'constants/env'
 import { APP_PATHS } from 'constants/index'
-import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
+import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { MEDIA_WIDTHS } from 'theme'
 
@@ -77,7 +77,7 @@ const HeaderNavItem = styled.div<{ active?: boolean }>`
 
 export default function TrueSightV2() {
   const theme = useTheme()
-  const { mixpanelHandler } = useMixpanel()
+  const mixpanelHandler = useMixpanelKyberAI()
   const location = useLocation()
   const isExplore = location?.pathname.includes('Explore')
   const above768 = useMedia(`(min-width:${MEDIA_WIDTHS.upToSmall}px)`)

diff --git a/src/pages/TrueSightV2/pages/RegisterWhitelist/index.tsx b/src/pages/TrueSightV2/pages/RegisterWhitelist/index.tsx
@@ -9,7 +9,7 @@ import { ButtonPrimary } from 'components/Button'
 import { APP_PATHS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import useLogin from 'hooks/useLogin'
-import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
+import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import SubscribeForm from 'pages/TrueSightV2/pages/RegisterWhitelist/SubscribeForm'
 import WaitListForm from 'pages/TrueSightV2/pages/RegisterWhitelist/WaitListForm'
@@ -26,7 +26,7 @@ const ConnectWalletButton = styled(ButtonPrimary)`
 export default function RegisterWhitelist({ showForm = true }: { showForm?: boolean }) {
   const navigate = useNavigate()
   const theme = useTheme()
-  const { mixpanelHandler } = useMixpanel()
+  const mixpanelHandler = useMixpanelKyberAI()
   const { account } = useActiveWeb3React()
   const toggleWalletModal = useWalletModalToggle()
   const { isLogin } = useSessionInfo()