Merge pull request #12 from reserve-protocol/chore/tracking

Chore: improve tracking

Author: JuampiRombola

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.3.7] - 2025-10-01
+
+### Changed
+
+- Tracking was improved (sessionId, quoteId, sourceId, retryId)
+
 ## [1.3.6] - 2025-09-26
 
 ### Fixed

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@reserve-protocol/react-zapper",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "type": "module",
   "description": "React component for DTF minting with zap functionality",
   "main": "dist/index.cjs.js",
@@ -62,10 +62,11 @@
     "lucide-react": "^0.461.0",
     "mixpanel-browser": "^2.56.0",
     "next-themes": "^0.2.1",
-    "react": "18.3.1",
+    "react": "^18.0.0",
     "react-dom": "18.3.1",
     "sonner": "^1.4.0",
-    "tailwind-merge": "^2.5.5"
+    "tailwind-merge": "^2.5.5",
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
     "@radix-ui/react-select": "^2.2.5",

package.json

@@ -22,6 +22,7 @@ import {
 } from '../state/atoms'
 import { Token } from '../types'
 import TokenBalancesUpdater from './updaters/token-balances-updater'
+import SessionTracker from './updaters/session-tracker'
 import { zapperDebugAtom } from './zap-mint/atom'
 
 type IndexDTFBrand = {
@@ -37,6 +38,7 @@ interface UpdatersProps {
   connectWallet?: () => void
   defaultSource?: QuoteSource
   debug?: boolean
+  mode?: 'modal' | 'inline'
 }
 
 const IndexDTFMetadataUpdater: React.FC<{
@@ -214,6 +216,7 @@ const Updaters: React.FC<UpdatersProps> = ({
   connectWallet,
   defaultSource,
   debug,
+  mode = 'modal',
 }) => {
   return (
     <>
@@ -227,6 +230,7 @@ const Updaters: React.FC<UpdatersProps> = ({
       <TokenBalancesUpdater dtfAddress={dtfAddress} />
       <QuoteSourceUpdater defaultSource={defaultSource} />
       <DebugUpdater debug={debug} />
+      <SessionTracker mode={mode} />
     </>
   )
 }

src/components/updaters.tsx

@@ -0,0 +1,52 @@
+import { openZapMintModalAtom } from '@/components/zap-mint/atom'
+import { walletAtom } from '@/state/atoms'
+import { sessionIdAtom } from '@/state/tracking-atoms'
+import { generateSessionId } from '@/utils/ids'
+import { mixpanelRegister } from '@/utils/tracking'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { useCallback, useEffect, useRef } from 'react'
+
+interface SessionTrackerProps {
+  mode: 'modal' | 'inline'
+}
+
+const SessionTracker: React.FC<SessionTrackerProps> = ({ mode }) => {
+  const setSessionId = useSetAtom(sessionIdAtom)
+  const wallet = useAtomValue(walletAtom)
+  const isModalOpen = useAtomValue(openZapMintModalAtom)
+  const prevWalletRef = useRef<string | undefined>()
+  const hasInitializedRef = useRef(false)
+
+  // Generate and register new session ID
+  const createNewSession = useCallback(() => {
+    const newSessionId = generateSessionId()
+    setSessionId(newSessionId)
+    mixpanelRegister('sessionId', newSessionId)
+  }, [setSessionId])
+
+  useEffect(() => {
+    if (mode === 'inline' && !hasInitializedRef.current) {
+      // Inline mode: generate session on mount
+      createNewSession()
+      hasInitializedRef.current = true
+    } else if (mode === 'modal' && isModalOpen) {
+      // Modal mode: generate session when modal opens
+      createNewSession()
+    }
+  }, [mode, isModalOpen, createNewSession])
+
+  // Handle wallet address changes
+  useEffect(() => {
+    if (
+      prevWalletRef.current !== undefined &&
+      prevWalletRef.current !== wallet
+    ) {
+      createNewSession()
+    }
+    prevWalletRef.current = wallet
+  }, [createNewSession, wallet])
+
+  return null
+}
+
+export default SessionTracker

src/components/updaters/session-tracker.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from '@/components/ui/skeleton'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { useCallback, useEffect } from 'react'
 import { formatEther, parseUnits } from 'viem'
@@ -6,7 +7,11 @@ import { usePrice } from '../../../hooks/usePrice'
 import useZapSwapQuery from '../../../hooks/useZapSwapQuery'
 import { chainIdAtom, indexDTFAtom, walletAtom } from '../../../state/atoms'
 import { Token } from '../../../types'
-import { formatCurrency, useTrackQuoteErrorUX } from '../../../utils'
+import {
+  formatCurrency,
+  resetTempRegistrations,
+  useTrackQuoteErrorUX,
+} from '../../../utils'
 import Swap from '../../ui/swap'
 import {
   forceMintAtom,
@@ -23,10 +28,9 @@ import {
   zapperDebugAtom,
   zapRefetchAtom,
 } from '../atom'
+import { Debug } from '../debug/debug'
 import SubmitZap from '../submit-zap'
 import ZapDetails, { ZapPriceImpact } from '../zap-details'
-import { Skeleton } from '@/components/ui/skeleton'
-import { Debug } from '../debug/debug'
 
 const Buy = () => {
   const account = useAtomValue(walletAtom)
@@ -99,6 +103,7 @@ const Buy = () => {
     setCurrentTab(newTab)
     setInputToken(tokens[0])
     setInputAmount('')
+    resetTempRegistrations()
   }
 
   useEffect(() => {

src/components/zap-mint/buy/index.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from '@/components/ui/skeleton'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { useCallback, useEffect } from 'react'
 import { formatEther, formatUnits, parseEther } from 'viem'
@@ -9,7 +10,11 @@ import {
   walletAtom,
 } from '../../../state/atoms'
 import { Token } from '../../../types'
-import { formatCurrency, useTrackQuoteErrorUX } from '../../../utils'
+import {
+  formatCurrency,
+  resetTempRegistrations,
+  useTrackQuoteErrorUX,
+} from '../../../utils'
 import Swap from '../../ui/swap'
 import {
   forceMintAtom,
@@ -26,10 +31,9 @@ import {
   zapperDebugAtom,
   zapRefetchAtom,
 } from '../atom'
+import { Debug } from '../debug/debug'
 import SubmitZap from '../submit-zap'
 import ZapDetails, { ZapPriceImpact } from '../zap-details'
-import { Skeleton } from '@/components/ui/skeleton'
-import { Debug } from '../debug/debug'
 
 const Sell = () => {
   const account = useAtomValue(walletAtom)
@@ -100,6 +104,7 @@ const Sell = () => {
     setCurrentTab(newTab)
     setOutputToken(tokens[0])
     setInputAmount('')
+    resetTempRegistrations()
   }
 
   useEffect(() => {

src/components/zap-mint/sell/index.tsx

@@ -238,6 +238,7 @@ export const Zapper: React.FC<ZapperProps> = ({
           connectWallet={connectWallet}
           defaultSource={defaultSource}
           debug={debug}
+          mode={mode}
         />
         <ZapperContent mode={mode} />
       </QueryClientProvider>

src/components/zapper.tsx

@@ -1,11 +1,11 @@
 import { useAtomValue } from 'jotai'
-import mixpanel from 'mixpanel-browser/src/loaders/loader-module-core'
 import { ReactNode, useEffect, useRef } from 'react'
 import { chainIdAtom } from '../state/atoms'
 import { CHAIN_TAGS } from '../utils/chains'
 import { Hex, TransactionReceipt } from 'viem'
 import { useWaitForTransactionReceipt } from 'wagmi'
 import useNotification from './use-notification'
+import { mixpanelTrack } from '@/utils'
 
 interface WatchOptions {
   hash: Hex | undefined
@@ -59,7 +59,7 @@ const useWatchTransaction = ({
         successMessage?.type ?? 'success',
         successMessage?.icon
       )
-      mixpanel.track('transaction', {
+      mixpanelTrack('transaction', {
         product: label,
         action: 'transaction_succeeded',
         payload: {
@@ -72,7 +72,7 @@ const useWatchTransaction = ({
     } else if (status === 'error') {
       notifiedRef.current[notificationKey] = true
       notify(`Transaction reverted`, error?.message ?? 'Unknown error', 'error')
-      mixpanel.track('transaction', {
+      mixpanelTrack('transaction', {
         product: label,
         action: 'transaction_reverted',
         payload: {