Add 2 more events for mixpanel (#1210)

KyberNetwork · Aug 8, 2022 · 9113b4e · 9113b4e
1 parent f58671b
commit 9113b4e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -43,7 +43,12 @@
   "rules": {
     "unused-imports/no-unused-imports": "error",
     "@typescript-eslint/explicit-function-return-type": "off",
-    "prettier/prettier": "error",
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/camelcase": "off",

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -17,6 +17,7 @@ import Settings from 'components/Settings'
 import Web3Network from 'components/Web3Network'
 import { PROMM_ANALYTICS_URL } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
+import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import { useWindowSize } from 'hooks/useWindowSize'
 import { useIsDarkMode } from 'state/user/hooks'
 import { ExternalLink } from 'theme/components'
@@ -342,7 +343,7 @@ export default function Header() {
 
   const under369 = width && width < 369
   const under500 = width && width < 500
-
+  const { mixpanelHandler } = useMixpanel()
   return (
     <HeaderFrame>
       <HeaderRow>
@@ -370,7 +371,14 @@ export default function Header() {
                   <Trans>Swap</Trans>
                 </Flex>
               </StyledNavLink>{' '}
-              <StyledNavLink id={`buy-crypto-nav-link`} to={'/buy-crypto'} isActive={match => Boolean(match)}>
+              <StyledNavLink
+                id={`buy-crypto-nav-link`}
+                to={'/buy-crypto'}
+                isActive={match => Boolean(match)}
+                onClick={() => {
+                  mixpanelHandler(MIXPANEL_TYPE.SWAP_BUY_CRYPTO_CLICKED)
+                }}
+              >
                 <Flex alignItems="center" sx={{ gap: '8px' }}>
                   <Dollar />
                   <Trans>Buy Crypto</Trans>

diff --git a/src/hooks/useMixpanel.ts b/src/hooks/useMixpanel.ts
@@ -112,7 +112,8 @@ export enum MIXPANEL_TYPE {
   CAMPAIGN_WALLET_CONNECTED,
   TRANSAK_BUY_CRYPTO_CLICKED,
   TRANSAK_DOWNLOAD_WALLET_CLICKED,
-
+  TRANSAK_SWAP_NOW_CLICKED,
+  SWAP_BUY_CRYPTO_CLICKED,
   // type and swap
   TAS_TYPING_KEYWORD,
   TAS_SELECT_PAIR,
@@ -598,6 +599,14 @@ export default function useMixpanel(trade?: Aggregator | undefined, currencies?:
           mixpanel.track('Buy Crypto - To purchase crypto on Transak "Buy Now”')
           break
         }
+        case MIXPANEL_TYPE.TRANSAK_SWAP_NOW_CLICKED: {
+          mixpanel.track('Buy Crypto - Swap token on KyberSwap "Swap" button')
+          break
+        }
+        case MIXPANEL_TYPE.SWAP_BUY_CRYPTO_CLICKED: {
+          mixpanel.track('Buy Crypto - Click on Buy Crypto on KyberSwap')
+          break
+        }
 
         // type and swap
         case MIXPANEL_TYPE.TAS_TYPING_KEYWORD: {

diff --git a/src/pages/BuyCrypto/index.tsx b/src/pages/BuyCrypto/index.tsx
@@ -611,6 +611,9 @@ function BuyCrypto() {
                   padding="10px"
                   as={Link}
                   to="/swap"
+                  onClick={() => {
+                    mixpanelHandler(MIXPANEL_TYPE.TRANSAK_SWAP_NOW_CLICKED)
+                  }}
                 >
                   <Repeat size={24} />
                   <Text fontSize="14px" marginLeft="8px">