add tracking

KyberNetwork · Oct 28, 2023 · 4bdb097 · 4bdb097
1 parent bea3425
commit 4bdb097
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18.15.0
+v20.9.0
diff --git a/src/components/SwapForm/GasPriceNote.tsx b/src/components/SwapForm/GasPriceNote.tsx
@@ -6,6 +6,7 @@ import { Text } from 'rebass'
 import PriceImpactNote from 'components/SwapForm/PriceImpactNote'
 import WarningNote from 'components/WarningNote'
 import { useActiveWeb3React } from 'hooks'
+import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { useSwitchPairToLimitOrder } from 'state/swap/hooks'
 import { checkPriceImpact } from 'utils/prices'
@@ -22,14 +23,23 @@ const GasFeeAndPriceImpactNote: FC<Props> = ({ gasUsd = 0, priceImpact, isDegenM
   const { chainId } = useActiveWeb3React()
   const switchToLimitOrder = useSwitchPairToLimitOrder()
   const { isHigh, isVeryHigh } = checkPriceImpact(priceImpact)
+  const { mixpanelHandler } = useMixpanel()
 
   if (+gasUsd < GAS_USD_THRESHOLD || chainId !== ChainId.MAINNET)
     return <PriceImpactNote priceImpact={priceImpact} isDegenMode={isDegenMode} showLimitOrderLink />
 
   const limitOrderLink = (
     <Trans>
       Do you want to make a{' '}
-      <Text as="span" sx={{ cursor: 'pointer', fontWeight: 'bold' }} color={theme.primary} onClick={switchToLimitOrder}>
+      <Text
+        as="span"
+        sx={{ cursor: 'pointer', fontWeight: 'bold' }}
+        color={theme.primary}
+        onClick={() => {
+          mixpanelHandler(MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP)
+          switchToLimitOrder()
+        }}
+      >
         Limit Order
       </Text>{' '}
       instead?

diff --git a/src/components/SwapForm/PriceImpactNote.tsx b/src/components/SwapForm/PriceImpactNote.tsx
@@ -6,6 +6,7 @@ import styled from 'styled-components'
 import Column from 'components/Column'
 import Row from 'components/Row'
 import WarningNote from 'components/WarningNote'
+import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { useSwitchPairToLimitOrder } from 'state/swap/hooks'
 import { checkPriceImpact } from 'utils/prices'
@@ -38,6 +39,7 @@ const PriceImpactNote: FC<Props> = ({ isDegenMode, priceImpact, showLimitOrderLi
   const priceImpactResult = checkPriceImpact(priceImpact)
   const theme = useTheme()
   const switchToLimitOrder = useSwitchPairToLimitOrder()
+  const { mixpanelHandler } = useMixpanel()
 
   if (typeof priceImpact !== 'number') {
     return null
@@ -81,7 +83,15 @@ const PriceImpactNote: FC<Props> = ({ isDegenMode, priceImpact, showLimitOrderLi
     <Text>
       <Trans>
         Do you want to make a{' '}
-        <Text as="b" sx={{ cursor: 'pointer' }} color={theme.primary} onClick={switchToLimitOrder}>
+        <Text
+          as="b"
+          sx={{ cursor: 'pointer' }}
+          color={theme.primary}
+          onClick={() => {
+            mixpanelHandler(MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP)
+            switchToLimitOrder()
+          }}
+        >
           Limit Order
         </Text>{' '}
         instead?
@@ -108,6 +118,7 @@ const PriceImpactNote: FC<Props> = ({ isDegenMode, priceImpact, showLimitOrderLi
         }
         longText={
           <Column gap="4px">
+            {limitOrderNote}
             <Text>
               {isDegenMode ? (
                 <Trans>
@@ -120,7 +131,6 @@ const PriceImpactNote: FC<Props> = ({ isDegenMode, priceImpact, showLimitOrderLi
                 </Trans>
               )}
             </Text>
-            {limitOrderNote}
           </Column>
         }
       />

diff --git a/src/hooks/useMixpanel.ts b/src/hooks/useMixpanel.ts
@@ -206,6 +206,7 @@ export enum MIXPANEL_TYPE {
   LO_CLICK_CANCEL_TYPE,
   LO_CLICK_UPDATE_TYPE,
   LO_CLICK_GET_STARTED,
+  LO_CLICK_WARNING_IN_SWAP,
 
   // Wallet UI
   WUI_WALLET_CLICK,
@@ -1138,6 +1139,10 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency }
           mixpanel.track('Limit Order - Get Started Click', payload)
           break
         }
+        case MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP: {
+          mixpanel.track('Limit Order - Warning in Swap Click', payload)
+          break
+        }
 
         case MIXPANEL_TYPE.WUI_WALLET_CLICK: {
           mixpanel.track('Wallet UI - Wallet Click')