chore: add mixpanel singleton

.env.example

@@ -1 +1,3 @@
 VITE_FOO=bar
+VITE_FEATURE_MIXPANEL=true
+VITE_MIXPANEL_TOKEN=faf859177254ec1a02752132c2f73954

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",

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(() => <FaArrowRightArrowLeft />, [])
   const handleSubmit = useCallback(() => {
     navigate('/input')
-  }, [navigate])
+  }, [mixpanel, navigate])
 
   const handleFromAssetClick = useCallback(() => {
     console.info('asset click')

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
+}

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"