From 0ab97c998df14e65d575d2b6a29f737ce199fe8b Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Thu, 12 Oct 2023 11:19:12 +0700
Subject: [PATCH] add tracking

---
 .../swapv2/LimitOrder/EditOrderModal.tsx      |  1 +
 .../LimitOrder/Modals/CancelButtons.tsx       | 25 ++++++++++++++++---
 .../LimitOrder/Modals/CancelOrderModal.tsx    |  1 +
 src/components/swapv2/LimitOrder/helpers.ts   |  3 ++-
 src/hooks/useMixpanel.ts                      | 10 ++++++++
 5 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/swapv2/LimitOrder/EditOrderModal.tsx b/src/components/swapv2/LimitOrder/EditOrderModal.tsx
index e52c72cfe9..33a01ff325 100644
--- 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
index 5ffe100657..76463ef465 100644
--- 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
index 564158a3bd..b15c955bbf 100644
--- 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
index a746b94e01..e51f59e4b2 100644
--- 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
index cda967d80e..16b69267be 100644
--- 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')