chore: add Mixpanel enum

src/components/SelectPair.tsx

@@ -3,7 +3,8 @@ import { useCallback, useMemo } from 'react'
 import { FaArrowRightArrowLeft } from 'react-icons/fa6'
 import { useNavigate } from 'react-router-dom'
 import { BTCImage, ETHImage } from 'lib/const'
-import { getMixPanel } from 'lib/mixpanelSingleton'
+import { getMixPanel } from 'lib/mixpanel/mixpanelSingleton'
+import { MixPanelEvent } from 'lib/mixpanel/types'
 
 import { AssetSelection } from './AssetSelection'
 
@@ -12,7 +13,7 @@ export const SelectPair = () => {
   const navigate = useNavigate()
   const switchIcon = useMemo(() => <FaArrowRightArrowLeft />, [])
   const handleSubmit = useCallback(() => {
-    mixpanel?.track('Pair selected', {
+    mixpanel?.track(MixPanelEvent.PairSelected, {
       'some key': 'some val',
     })
 

src/components/TradeInput.tsx

@@ -19,18 +19,24 @@ import { useCallback, useMemo } from 'react'
 import { FaArrowRightArrowLeft } from 'react-icons/fa6'
 import { useNavigate } from 'react-router-dom'
 import { BTCImage, ETHImage } from 'lib/const'
+import { getMixPanel } from 'lib/mixpanel/mixpanelSingleton'
+import { MixPanelEvent } from 'lib/mixpanel/types'
 
 import { Amount } from './Amount/Amount'
 
 export const TradeInput = () => {
+  const mixpanel = getMixPanel()
   const navigate = useNavigate()
   const Divider = useMemo(() => <StackDivider borderColor='border.base' />, [])
   const FromAssetIcon = useMemo(() => <Avatar size='sm' src={BTCImage} />, [])
   const ToAssetIcon = useMemo(() => <Avatar size='sm' src={ETHImage} />, [])
   const SwitchIcon = useMemo(() => <FaArrowRightArrowLeft />, [])
   const handleSubmit = useCallback(() => {
+    mixpanel?.track(MixPanelEvent.StartTransaction, {
+      'some key': 'some val',
+    })
     navigate('/status')
-  }, [navigate])
+  }, [mixpanel, navigate])
 
   const handleFromAssetClick = useCallback(() => {
     console.info('asset click')

src/lib/mixpanelSingleton.ts → src/lib/mixpanel/mixpanelSingleton.ts

@@ -1,9 +1,9 @@
 import Mixpanel from 'mixpanel-browser'
 
-export type MixPanelType = typeof Mixpanel
+import type { MixPanelType } from './types'
 
 // don't export me, access me through the getter
-let _mixPanel: typeof Mixpanel | undefined = undefined
+let _mixPanel: MixPanelType | undefined = undefined
 
 // we need to be able to access this outside react
 export const getMixPanel = (): MixPanelType | undefined => {
@@ -13,6 +13,7 @@ export const getMixPanel = (): MixPanelType | undefined => {
   const mixpanelToken = import.meta.env.VITE_MIXPANEL_TOKEN
   Mixpanel.init(mixpanelToken)
   _mixPanel = Mixpanel // identify once per session
+  _mixPanel.set_config({ persistence: 'localStorage' })
   _mixPanel.identify()
   return _mixPanel
 }

src/lib/mixpanel/types.ts

@@ -0,0 +1,8 @@
+import type Mixpanel from 'mixpanel-browser'
+
+export type MixPanelType = typeof Mixpanel
+
+export enum MixPanelEvent {
+  PairSelected = 'Pair Selected',
+  StartTransaction = 'Start Transaction',
+}