diff --git a/src/components/swapv2/LimitOrder/Tutorial.tsx b/src/components/swapv2/LimitOrder/Tutorial.tsx index a877ca842c..10072dcb2c 100644 --- a/src/components/swapv2/LimitOrder/Tutorial.tsx +++ b/src/components/swapv2/LimitOrder/Tutorial.tsx @@ -10,6 +10,7 @@ import { ButtonPrimary } from 'components/Button' import Column from 'components/Column' import Row from 'components/Row' import { DOCS_LINKS } from 'components/swapv2/LimitOrder/const' +import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' import { ExternalLink } from 'theme' @@ -50,6 +51,12 @@ const ContentItem = ({ text }: { text: ReactNode }) => { } export default function Tutorial({ onClose }: { onClose: () => void }) { const theme = useTheme() + const { mixpanelHandler } = useMixpanel() + + const onGetStart = () => { + mixpanelHandler(MIXPANEL_TYPE.LO_CLICK_GET_STARTED) + onClose() + } return ( @@ -97,7 +104,7 @@ export default function Tutorial({ onClose }: { onClose: () => void }) { Learn more about our limit orders here. - + Get Started diff --git a/src/hooks/useMixpanel.ts b/src/hooks/useMixpanel.ts index 4b28ac00a0..9a01ed4a96 100644 --- a/src/hooks/useMixpanel.ts +++ b/src/hooks/useMixpanel.ts @@ -205,6 +205,7 @@ export enum MIXPANEL_TYPE { LO_CLICK_SUBSCRIBE_BTN, LO_CLICK_CANCEL_TYPE, LO_CLICK_UPDATE_TYPE, + LO_CLICK_GET_STARTED, // Wallet UI WUI_WALLET_CLICK, @@ -1133,6 +1134,10 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency } mixpanel.track('Limit Order - Update Order Double Signature Click', payload) break } + case MIXPANEL_TYPE.LO_CLICK_GET_STARTED: { + mixpanel.track('Limit Order - Get Started Click', payload) + break + } case MIXPANEL_TYPE.WUI_WALLET_CLICK: { mixpanel.track('Wallet UI - Wallet Click')