diff --git a/src/components/SelectPair.tsx b/src/components/SelectPair.tsx index 56c10b3..dd49994 100644 --- a/src/components/SelectPair.tsx +++ b/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(() => , []) const handleSubmit = useCallback(() => { @@ -17,7 +16,7 @@ export const SelectPair = () => { }) navigate('/input') - }, [mixpanel, navigate]) + }, [navigate]) const handleFromAssetClick = useCallback(() => { console.info('asset click') diff --git a/src/components/TradeInput.tsx b/src/components/TradeInput.tsx index fd26874..e4fba80 100644 --- a/src/components/TradeInput.tsx +++ b/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(() => , []) const FromAssetIcon = useMemo(() => , []) @@ -35,7 +34,7 @@ export const TradeInput = () => { 'some key': 'some val', }) navigate('/status') - }, [mixpanel, navigate]) + }, [navigate]) const handleFromAssetClick = useCallback(() => { console.info('asset click') diff --git a/src/lib/mixpanel/mixpanelSingleton.ts b/src/lib/mixpanel/mixpanelSingleton.ts index 5439eb2..4d6fc98 100644 --- a/src/lib/mixpanel/mixpanelSingleton.ts +++ b/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 -} +})()