chore: use IIFE

src/components/SelectPair.tsx

@@ -3,12 +3,11 @@ 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, MixPanelEvent } from 'lib/mixpanel'
+import { mixpanel, MixPanelEvent } from 'lib/mixpanel'
 
 import { AssetSelection } from './AssetSelection'
 
 export const SelectPair = () => {
-  const mixpanel = getMixPanel()
   const navigate = useNavigate()
   const switchIcon = useMemo(() => <FaArrowRightArrowLeft />, [])
   const handleSubmit = useCallback(() => {
@@ -17,7 +16,7 @@ export const SelectPair = () => {
     })
 
     navigate('/input')
-  }, [mixpanel, navigate])
+  }, [navigate])
 
   const handleFromAssetClick = useCallback(() => {
     console.info('asset click')

src/components/TradeInput.tsx

@@ -19,12 +19,11 @@ 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, MixPanelEvent } from 'lib/mixpanel'
+import { mixpanel, MixPanelEvent } from 'lib/mixpanel'
 
 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} />, [])
@@ -35,7 +34,7 @@ export const TradeInput = () => {
       'some key': 'some val',
     })
     navigate('/status')
-  }, [mixpanel, navigate])
+  }, [navigate])
 
   const handleFromAssetClick = useCallback(() => {
     console.info('asset click')

src/lib/mixpanel/mixpanelSingleton.ts

@@ -2,18 +2,18 @@ import Mixpanel from 'mixpanel-browser'
 
 import type { MixPanelType } from './types'
 
-// don't export me, access me through the getter
-let _mixPanel: MixPanelType | undefined = undefined
-
 // we need to be able to access this outside react
-export const getMixPanel = (): MixPanelType | undefined => {
+export const mixpanel = (() => {
+  let _mixPanel: MixPanelType | undefined = undefined
+
   const mixPanelEnabled = import.meta.env.VITE_FEATURE_MIXPANEL
-  if (!mixPanelEnabled) return
+  if (!mixPanelEnabled) return undefined
   if (_mixPanel) return _mixPanel
   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
-}
+})()