fix: only fire fail/success events once (#5002)

src/components/MultiHopTrade/components/TradeConfirm/TradeConfirm.tsx

@@ -15,7 +15,7 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react'
 import { TxStatus } from '@shapeshiftoss/unchained-client'
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router-dom'
@@ -72,6 +72,7 @@ export const TradeConfirm = () => {
   const borderColor = useColorModeValue('gray.100', 'gray.750')
   const alertColor = useColorModeValue('yellow.500', 'yellow.200')
   const warningColor = useColorModeValue('red.600', 'red.400')
+  const [hasMixpanelFired, setHasMixpanelFired] = useState(false)
   const {
     handleSubmit,
     formState: { isSubmitting },
@@ -155,14 +156,16 @@ export const TradeConfirm = () => {
   )
 
   useEffect(() => {
-    if (!mixpanel || !eventData) return
+    if (!mixpanel || !eventData || hasMixpanelFired) return
     if (status === TxStatus.Confirmed) {
       mixpanel.track(MixPanelEvents.TradeSuccess, eventData)
+      setHasMixpanelFired(true)
     }
     if (status === TxStatus.Failed) {
       mixpanel.track(MixPanelEvents.TradeFailed, eventData)
+      setHasMixpanelFired(true)
     }
-  }, [eventData, mixpanel, status])
+  }, [eventData, hasMixpanelFired, mixpanel, status])
 
   const handleBack = useCallback(() => {
     if (sellTxHash) {