diff --git a/.env.example b/.env.example index 61dfca2..bf1ffff 100644 --- a/.env.example +++ b/.env.example @@ -1 +1,3 @@ VITE_FOO=bar +VITE_FEATURE_MIXPANEL=true +VITE_MIXPANEL_TOKEN=faf859177254ec1a02752132c2f73954 diff --git a/package.json b/package.json index edf3ace..a2f033e 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ }, "devDependencies": { "@types/inquirer": "^9.0.7", + "@types/mixpanel-browser": "^2.48.1", "@types/node": "^20.10.7", "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", diff --git a/src/components/SelectPair.tsx b/src/components/SelectPair.tsx index d8c10f3..9751f16 100644 --- a/src/components/SelectPair.tsx +++ b/src/components/SelectPair.tsx @@ -3,15 +3,17 @@ 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 { AssetSelection } from './AssetSelection' export const SelectPair = () => { + const mixpanel = getMixPanel() const navigate = useNavigate() const switchIcon = useMemo(() => , []) const handleSubmit = useCallback(() => { navigate('/input') - }, [navigate]) + }, [mixpanel, navigate]) const handleFromAssetClick = useCallback(() => { console.info('asset click') diff --git a/src/lib/mixpanelSingleton.ts b/src/lib/mixpanelSingleton.ts new file mode 100644 index 0000000..4e2f8e5 --- /dev/null +++ b/src/lib/mixpanelSingleton.ts @@ -0,0 +1,18 @@ +import Mixpanel from 'mixpanel-browser' + +export type MixPanelType = typeof Mixpanel + +// don't export me, access me through the getter +let _mixPanel: typeof Mixpanel | undefined = undefined + +// we need to be able to access this outside react +export const getMixPanel = (): MixPanelType | undefined => { + const mixPanelEnabled = import.meta.env.VITE_MIXPANEL_ENABLED + if (!mixPanelEnabled) return + if (_mixPanel) return _mixPanel + const mixpanelToken = import.meta.env.VITE_MIXPANEL_TOKEN + Mixpanel.init(mixpanelToken) + _mixPanel = Mixpanel // identify once per session + _mixPanel.identify() + return _mixPanel +} diff --git a/yarn.lock b/yarn.lock index aa89490..2252863 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2502,6 +2502,11 @@ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8" integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ== +"@types/mixpanel-browser@^2.48.1": + version "2.48.1" + resolved "https://registry.npmjs.org/@types/mixpanel-browser/-/mixpanel-browser-2.48.1.tgz#ccab3d1fe3d10b18191171e884dcf061cfbf11d5" + integrity sha512-qcckCw9znV98KUkvImglkiVd303Fnn1NTpbKkboQS0bB1SbkNc0Qzz6M9AsS6MaKSzINN4e5z28qUBsK9Wzm5g== + "@types/node@*", "@types/node@^20.10.7": version "20.10.7" resolved "https://registry.yarnpkg.com/@types/node/-/node-20.10.7.tgz#40fe8faf25418a75de9fe68a8775546732a3a901"