Merge pull request #22 from shapeshift/add-mixpanel

feat: mixpanel wiring

.env.example

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

package.json

@@ -17,13 +17,15 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "framer-motion": "^10.17.9",
+    "mixpanel-browser": "^2.48.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
     "react-router-dom": "^6.21.1"
   },
   "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,13 +3,18 @@ import { useCallback, useMemo } from 'react'
 import { FaArrowRightArrowLeft } from 'react-icons/fa6'
 import { useNavigate } from 'react-router-dom'
 import { BTCImage, ETHImage } from 'lib/const'
+import { mixpanel, MixPanelEvent } from 'lib/mixpanel'
 
 import { AssetSelection } from './AssetSelection'
 
 export const SelectPair = () => {
   const navigate = useNavigate()
   const switchIcon = useMemo(() => <FaArrowRightArrowLeft />, [])
   const handleSubmit = useCallback(() => {
+    mixpanel?.track(MixPanelEvent.PairSelected, {
+      'some key': 'some val',
+    })
+
     navigate('/input')
   }, [navigate])
 

src/components/TradeInput.tsx

@@ -19,6 +19,7 @@ import { useCallback, useMemo } from 'react'
 import { FaArrowRightArrowLeft } from 'react-icons/fa6'
 import { useNavigate } from 'react-router-dom'
 import { BTCImage, ETHImage } from 'lib/const'
+import { mixpanel, MixPanelEvent } from 'lib/mixpanel'
 
 import { Amount } from './Amount/Amount'
 
@@ -29,6 +30,9 @@ export const TradeInput = () => {
   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])
 

src/env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_FOO: string
+  readonly VITE_FEATURE_MIXPANEL: boolean
+  readonly VITE_MIXPANEL_TOKEN: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

src/lib/mixpanel/index.ts

@@ -0,0 +1,2 @@
+export * from './mixpanelSingleton'
+export * from './types'

src/lib/mixpanel/mixpanelSingleton.ts

@@ -0,0 +1,19 @@
+import Mixpanel from 'mixpanel-browser'
+
+import type { MixPanelType } from './types'
+
+// we need to be able to access this outside react
+export const mixpanel = (() => {
+  let _mixPanel: MixPanelType | undefined = undefined
+
+  const mixPanelEnabled = import.meta.env.VITE_FEATURE_MIXPANEL
+  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
+})()

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

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"
@@ -4719,6 +4724,11 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
+mixpanel-browser@^2.48.1:
+  version "2.48.1"
+  resolved "https://registry.npmjs.org/mixpanel-browser/-/mixpanel-browser-2.48.1.tgz#0fec03d87f57fe2e72c6a4b1df5924436840ece7"
+  integrity sha512-vXTuUzZMg+ht7sRqyjtc3dUDy/81Z/H6FLFgFkUZJqKFaAqcx1JSXmOdY/2kmsxCkUdy5JN5zW9m9TMCk+rxGQ==
+
 mlly@^1.2.0, mlly@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.4.2.tgz#7cf406aa319ff6563d25da6b36610a93f2a8007e"