chore: add mixpanel tracking for quickbuy

Author: premiumjibles

src/components/AssetHeader/QuickBuy.tsx

@@ -19,12 +19,14 @@ import { TbPencil } from 'react-icons/tb'
 import { useTranslate } from 'react-polyglot'
 
 import { AnimatedCheck } from '../AnimatedCheck'
+import { useMixpanel } from '../MultiHopTrade/components/TradeConfirm/hooks/useMixpanel'
 import { TooltipWithTouch } from '../TooltipWithTouch'
 import { useQuickBuy } from './hooks/useQuickBuy'
 import { QuickBuyTradeButton } from './QuickBuyTradeButton'
 
 import { Amount } from '@/components/Amount/Amount'
 import { useLocaleFormatter } from '@/hooks/useLocaleFormatter/useLocaleFormatter'
+import { MixPanelEvent } from '@/lib/mixpanel/types'
 import { TradeExecutionState } from '@/state/slices/tradeQuoteSlice/types'
 
 const editIcon = <Icon as={TbPencil} boxSize={6} color='text.subtle' />
@@ -67,9 +69,12 @@ export const QuickBuy: React.FC<QuickBuyProps> = ({ assetId, onEditAmounts }) =>
     cancelPurchase()
   }, [cancelPurchase])
 
+  const trackMixpanelEvent = useMixpanel(true)
+
   const handleConfirmPurchase = useCallback((): void => {
+    trackMixpanelEvent(MixPanelEvent.QuickBuyConfirm)
     confirmPurchase()
-  }, [confirmPurchase])
+  }, [confirmPurchase, trackMixpanelEvent])
 
   if (isNativeAsset) {
     // We use native asset as the sell asset right now so can't quick buy it
@@ -110,7 +115,10 @@ export const QuickBuy: React.FC<QuickBuyProps> = ({ assetId, onEditAmounts }) =>
                     rounded='full'
                     background={isSuccess ? 'green.500' : undefined}
                     // eslint-disable-next-line react-memo/require-usememo
-                    onClick={() => startPurchase(amount)}
+                    onClick={() => {
+                      trackMixpanelEvent(MixPanelEvent.QuickBuyPreview)
+                      startPurchase(amount)
+                    }}
                     flex={1}
                     isDisabled={isNotEnoughFunds}
                     fontSize='lg'

src/components/AssetHeader/hooks/useQuickBuy.ts

@@ -5,8 +5,10 @@ import { bn } from '@shapeshiftoss/utils'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useCurrentHopIndex } from '../../MultiHopTrade/components/TradeConfirm/hooks/useCurrentHopIndex'
+import { useMixpanel } from '../../MultiHopTrade/components/TradeConfirm/hooks/useMixpanel'
 import { useGetTradeRates } from '../../MultiHopTrade/hooks/useGetTradeQuotes/useGetTradeRates'
 
+import { MixPanelEvent } from '@/lib/mixpanel/types'
 import { swapperApi } from '@/state/apis/swapper/swapperApi'
 import { TradeQuoteValidationError } from '@/state/apis/swapper/types'
 import { selectMarketDataByAssetIdUserCurrency } from '@/state/slices/marketDataSlice/selectors'
@@ -144,16 +146,20 @@ export const useQuickBuy = ({ assetId }: UseQuickBuyParams): UseQuickBuyReturn =
     }
   }, [])
 
+  const trackMixpanelEvent = useMixpanel(true)
+
   const setErrorState = useCallback(
     (messageKey: string, amount: number) => {
+      trackMixpanelEvent(MixPanelEvent.QuickBuyFailed)
       setQuickBuyState({ status: 'error', amount, messageKey })
       resetTrade()
     },
-    [resetTrade],
+    [resetTrade, trackMixpanelEvent],
   )
 
   const setSuccessState = useCallback(
     (amount: number) => {
+      trackMixpanelEvent(MixPanelEvent.QuickBuySuccess)
       setQuickBuyState({ status: 'success', amount })
       resetTrade()
 
@@ -164,7 +170,7 @@ export const useQuickBuy = ({ assetId }: UseQuickBuyParams): UseQuickBuyReturn =
         )
       }, SUCCESS_TIMEOUT_MS)
     },
-    [resetTrade, clearSuccessTimer],
+    [resetTrade, clearSuccessTimer, trackMixpanelEvent],
   )
 
   const startPurchase = useCallback(

src/components/MultiHopTrade/components/TradeConfirm/hooks/useMixpanel.tsx

@@ -4,15 +4,20 @@ import { getMixpanelEventData } from '@/components/MultiHopTrade/helpers'
 import { getMixPanel } from '@/lib/mixpanel/mixPanelSingleton'
 import type { MixPanelEvent } from '@/lib/mixpanel/types'
 
-export const useMixpanel = () => {
+export const useMixpanel = (allowUndefinedEventData = false) => {
   const mixpanel = useMemo(() => getMixPanel(), [])
-  const eventData = useMemo(() => getMixpanelEventData(), [])
   const trackMixpanelEvent = useCallback(
     (event: MixPanelEvent) => {
       // mixpanel is undefined when the feature is disabled
-      if (eventData && mixpanel) mixpanel.track(event, eventData)
+      if (!mixpanel) return
+
+      const eventData = getMixpanelEventData()
+      // Allow tracking without eventData if flag is set
+      if (allowUndefinedEventData || eventData) {
+        mixpanel.track(event, eventData)
+      }
     },
-    [eventData, mixpanel],
+    [mixpanel, allowUndefinedEventData],
   )
 
   return trackMixpanelEvent

src/lib/mixpanel/types.ts

@@ -74,6 +74,10 @@ export enum MixPanelEvent {
   SendClick = 'Send Click',
   SendBroadcast = 'Send Broadcast',
   HighlightedTokenClicked = 'Highlighted Token Clicked',
+  QuickBuyPreview = 'Quick Buy Preview',
+  QuickBuyConfirm = 'Quick Buy Confirm',
+  QuickBuySuccess = 'Quick Buy Success',
+  QuickBuyFailed = 'Quick Buy Failed',
 }
 
 export type TrackOpportunityProps = {