Merge pull request #165 from palladians/chore/update-analytics

chore(analytics): replace jitsu with mixpanel

packages/features/package.json

@@ -34,7 +34,6 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
-    "@jitsu/jitsu-react": "^1.7.2",
     "@palladxyz/key-management": "^0.0.1",
     "@palladxyz/mina-core": "^0.0.1",
     "@palladxyz/offchain-data": "^1.0.0",
@@ -84,6 +83,7 @@
     "react-day-picker": "^8.9.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.2",
+    "react-mixpanel-browser": "^4.1.0",
     "react-qr-code": "^2.0.12",
     "react-router": "^6.21.0",
     "react-router-dom": "^6.21.0",

packages/features/src/onboarding/views/mnemonic-confirmation.tsx

@@ -8,9 +8,9 @@ import { DEFAULT_NETWORK, KeyAgents, useVault } from '@palladxyz/vault'
 import { Loader2Icon } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
+import { useMixpanel } from 'react-mixpanel-browser'
 import { useNavigate } from 'react-router-dom'
 
-import { useAnalytics } from '@/common/hooks/use-analytics'
 import { useAppStore } from '@/common/store/app'
 import { useOnboardingStore } from '@/common/store/onboarding'
 import { ButtonArrow } from '@/components/button-arrow'
@@ -25,7 +25,7 @@ const getConfirmationIndex = () => {
 }
 
 export const MnemonicConfirmationView = () => {
-  const { track } = useAnalytics()
+  const mixpanel = useMixpanel()
   const [restoring, setRestoring] = useState(false)
   const restoreWallet = useVault((state) => state.restoreWallet)
   const [confirmationIndex] = useState(getConfirmationIndex())
@@ -80,7 +80,7 @@ export const MnemonicConfirmationView = () => {
         KeyAgents.InMemory,
         'Test' // TODO: make this a configurable credential name or random if not provided
       )
-      track({ event: 'wallet_created' })
+      mixpanel.track('WalletCreated')
       setVaultStateInitialized()
       return navigate('/onboarding/finish')
     } finally {

packages/features/src/onboarding/views/mnemonic-input.tsx

@@ -10,10 +10,10 @@ import { DEFAULT_NETWORK, KeyAgents, useVault } from '@palladxyz/vault'
 import { Loader2Icon } from 'lucide-react'
 import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
+import { useMixpanel } from 'react-mixpanel-browser'
 import { useNavigate } from 'react-router-dom'
 import { shallow } from 'zustand/shallow'
 
-import { useAnalytics } from '@/common/hooks/use-analytics'
 import { useAppStore } from '@/common/store/app'
 import { useOnboardingStore } from '@/common/store/onboarding'
 import { Autocomplete } from '@/components/autocomplete'
@@ -35,7 +35,7 @@ const mnemonicIterator = Array.from(
 )
 
 export const MnemonicInputView = () => {
-  const { track } = useAnalytics()
+  const mixpanel = useMixpanel()
   const [restoring, setRestoring] = useState(false)
   const restoreWallet = useVault((state) => state.restoreWallet)
   const navigate = useNavigate()
@@ -83,7 +83,7 @@ export const MnemonicInputView = () => {
         KeyAgents.InMemory,
         'Test' // TODO: make this a configurable credential name or random if not provided
       )
-      track({ event: 'wallet_restored' })
+      mixpanel.track('WalletRestored')
       setVaultStateInitialized()
       return navigate('/onboarding/finish')
     } finally {

packages/features/src/router.tsx

@@ -1,6 +1,6 @@
-import { JitsuProvider } from '@jitsu/jitsu-react'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
+import { MixpanelProvider } from 'react-mixpanel-browser'
 import { MemoryRouter, Route, Routes } from 'react-router-dom'
 
 import { Toaster } from '@/components/ui/toaster'
@@ -33,10 +33,15 @@ import { TransactionsView } from './transactions/views/transactions'
 
 dayjs.extend(relativeTime)
 
+const mixpanelConfig = {
+  track_pageview: true
+}
+
 export const Router = () => {
   return (
-    <JitsuProvider
-      options={{ host: 'https://clqo22gsb00003b6m2sj92p38.d.jitsu.com' }}
+    <MixpanelProvider
+      config={mixpanelConfig}
+      token="ee1f7980362645f72b80bfdd0c7be4a8"
     >
       <TooltipProvider>
         <div className="flex flex-1 pointer">
@@ -101,6 +106,6 @@ export const Router = () => {
           <Toaster />
         </div>
       </TooltipProvider>
-    </JitsuProvider>
+    </MixpanelProvider>
   )
 }

packages/features/src/send/components/confirm-transaction-form.tsx

@@ -10,11 +10,11 @@ import {
 } from 'mina-signer/dist/node/mina-signer/src/TSTypes'
 import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
+import { useMixpanel } from 'react-mixpanel-browser'
 import { useNavigate } from 'react-router-dom'
 import { z } from 'zod'
 
 import { useAccount } from '@/common/hooks/use-account'
-import { useAnalytics } from '@/common/hooks/use-analytics'
 import { usePendingTransactionStore } from '@/common/store/pending-transactions'
 import { useTransactionStore } from '@/common/store/transaction'
 import { ButtonArrow } from '@/components/button-arrow'
@@ -28,7 +28,7 @@ import { ConfirmTransactionSchema } from './confirm-transaction-form.schema'
 
 type ConfirmTransactionData = z.infer<typeof ConfirmTransactionSchema>
 export const ConfirmTransactionForm = () => {
-  const { track } = useAnalytics()
+  const mixpanel = useMixpanel()
   const [submitting, setSubmitting] = useState(false)
   const navigate = useNavigate()
   // can use
@@ -127,14 +127,14 @@ export const ConfirmTransactionForm = () => {
         expireAt: addHours(new Date(), 8).toISOString()
       })
       await syncWallet()
-      track({
-        event: kind === 'staking' ? 'portfolio_delegated' : 'transaction_sent',
-        metadata: {
+      mixpanel.track(
+        kind === 'staking' ? 'PortfolioDelegated' : 'TransactionSent',
+        {
           amount: transaction.amount,
           fee: transaction.fee,
           to: kind === 'staking' && transaction.to
         }
-      })
+      )
       navigate('/transactions/success', {
         state: {
           hash