add tracking

KyberNetwork · Oct 12, 2023 · 0ab97c9 · 0ab97c9
1 parent c2a09be
commit 0ab97c9
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 5 deletions.
diff --git a/src/components/swapv2/LimitOrder/EditOrderModal.tsx b/src/components/swapv2/LimitOrder/EditOrderModal.tsx
@@ -139,6 +139,7 @@ export default function EditOrderModal({
           onDismiss={onDismiss}
           onClickGaslessCancel={onClickGaslessCancel}
           onClickHardCancel={onClickHardCancel}
+          order={order}
           buttonInfo={{
             orderSupportGasless: supportGasLessCancel,
             chainSupportGasless,

diff --git a/src/components/swapv2/LimitOrder/Modals/CancelButtons.tsx b/src/components/swapv2/LimitOrder/Modals/CancelButtons.tsx
@@ -11,7 +11,10 @@ import { GasStation } from 'components/Icons'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { CancelStatus } from 'components/swapv2/LimitOrder/Modals/CancelOrderModal'
 import { DOCS_LINKS } from 'components/swapv2/LimitOrder/const'
-import { CancelOrderType } from 'components/swapv2/LimitOrder/type'
+import { getPayloadTracking } from 'components/swapv2/LimitOrder/helpers'
+import { CancelOrderType, LimitOrder } from 'components/swapv2/LimitOrder/type'
+import { useActiveWeb3React } from 'hooks'
+import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { ExternalLink } from 'theme'
 import { formatDisplayNumber } from 'utils/numbers'
@@ -94,6 +97,7 @@ const CancelButtons = ({
   confirmOnly = false,
   cancelType,
   setCancelType,
+  order,
   buttonInfo: {
     orderSupportGasless,
     chainSupportGasless,
@@ -116,13 +120,26 @@ const CancelButtons = ({
   cancelType: CancelOrderType
   setCancelType: (v: CancelOrderType) => void
   buttonInfo: ButtonInfo
+  order: LimitOrder | undefined
 }) => {
   const theme = useTheme()
   const isWaiting = cancelStatus === CancelStatus.WAITING
   const isCountDown = cancelStatus === CancelStatus.COUNTDOWN
   const isTimeout = cancelStatus === CancelStatus.TIMEOUT
   const isCancelDone = cancelStatus === CancelStatus.CANCEL_DONE
-  console.log(123, orderSupportGasless, chainSupportGasless)
+  const { mixpanelHandler } = useMixpanel()
+  const { networkInfo } = useActiveWeb3React()
+
+  const onSetType = (type: CancelOrderType) => {
+    setCancelType(type)
+    if (!order) return
+    mixpanelHandler(
+      isEdit ? MIXPANEL_TYPE.LO_CLICK_UPDATE_TYPE : MIXPANEL_TYPE.LO_CLICK_CANCEL_TYPE,
+      getPayloadTracking(order, networkInfo.name, {
+        [isEdit ? 'edit_type' : 'cancel_type']: type === CancelOrderType.GAS_LESS_CANCEL ? 'Gasless' : 'Hard',
+      }),
+    )
+  }
 
   const gasAmountDisplay = estimateGas
     ? `~${formatDisplayNumber(estimateGas + '', {
@@ -200,7 +217,7 @@ const CancelButtons = ({
             >
               <ButtonOutlined
                 {...propsGasless}
-                onClick={() => setCancelType(CancelOrderType.GAS_LESS_CANCEL)}
+                onClick={() => onSetType(CancelOrderType.GAS_LESS_CANCEL)}
                 $disabled={disabledGasLessCancel}
                 disabled={disabledGasLessCancel}
               >
@@ -213,7 +230,7 @@ const CancelButtons = ({
           buttonHardEdit={
             <ButtonOutlined
               {...propsHardCancel}
-              onClick={() => setCancelType(CancelOrderType.HARD_CANCEL)}
+              onClick={() => onSetType(CancelOrderType.HARD_CANCEL)}
               color={cancelType === CancelOrderType.HARD_CANCEL ? theme.primary : undefined}
             >
               <GasStation size={20} />

diff --git a/src/components/swapv2/LimitOrder/Modals/CancelOrderModal.tsx b/src/components/swapv2/LimitOrder/Modals/CancelOrderModal.tsx
@@ -184,6 +184,7 @@ function CancelOrderModal({
           flowState={flowState}
         />
         <CancelButtons
+          order={order}
           cancelType={cancelType}
           setCancelType={setCancelType}
           estimateGas={estimateGas}

diff --git a/src/components/swapv2/LimitOrder/helpers.ts b/src/components/swapv2/LimitOrder/helpers.ts
@@ -159,9 +159,10 @@ export const getPayloadCreateOrder = (params: CreateOrderParam) => {
   }
 }
 
-export const getPayloadTracking = (order: LimitOrder, networkName: string) => {
+export const getPayloadTracking = (order: LimitOrder, networkName: string, payload = {}) => {
   const { makerAssetSymbol, takerAssetSymbol, makingAmount, makerAssetDecimals, id } = order
   return {
+    ...payload,
     from_token: makerAssetSymbol,
     to_token: takerAssetSymbol,
     from_network: networkName,

diff --git a/src/hooks/useMixpanel.ts b/src/hooks/useMixpanel.ts
@@ -201,6 +201,8 @@ export enum MIXPANEL_TYPE {
   LO_CLICK_EDIT_ORDER,
   LO_DISPLAY_SETTING_CLICK,
   LO_CLICK_SUBSCRIBE_BTN,
+  LO_CLICK_CANCEL_TYPE,
+  LO_CLICK_UPDATE_TYPE,
 
   // Wallet UI
   WUI_WALLET_CLICK,
@@ -1115,6 +1117,14 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency }
           mixpanel.track('Limit Order - User click to Subscribe button')
           break
         }
+        case MIXPANEL_TYPE.LO_CLICK_CANCEL_TYPE: {
+          mixpanel.track('Limit Order - Cancel Order Double Signature Click', payload)
+          break
+        }
+        case MIXPANEL_TYPE.LO_CLICK_UPDATE_TYPE: {
+          mixpanel.track('Limit Order - Update Order Double Signature Click', payload)
+          break
+        }
 
         case MIXPANEL_TYPE.WUI_WALLET_CLICK: {
           mixpanel.track('Wallet UI - Wallet Click')