wallet-stack 1.0.0-alpha.125 → 1.0.0-alpha.127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallet-stack",
-  "version": "1.0.0-alpha.125",
+  "version": "1.0.0-alpha.127",
   "author": "Valora Inc",
   "license": "Apache-2.0",
   "repository": {
@@ -92,6 +92,7 @@
     "expo-camera": "~16.1.11",
     "expo-splash-screen": "~0.30.10",
     "lottie-react-native": "^5.1.6",
+    "mixpanel-react-native": "^3.2.1",
     "react": "19.0.0",
     "react-native": "0.79.6",
     "react-native-adjust": "^4.38.1",
@@ -160,6 +161,7 @@
     "is-ip": "^3.1.0",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
+    "mixpanel-react-native": "^3.2.1",
     "permissionless": "^0.2.57",
     "react-async-hook": "^4.0.0",
     "react-i18next": "^15.4.1",

package/src/account/SecuritySubmenu.tsx

@@ -126,11 +126,15 @@ const SecuritySubmenu = ({ route, navigation }: Props) => {
     return onPressContinueWithAccountRemoval()
   }
 
-  const handleToggleAnalytics = (value: boolean) => {
-    dispatch(setAnalyticsEnabled(value))
-    AppAnalytics.track(SettingsEvents.settings_analytics, {
-      enabled: value,
-    })
+  const handleToggleAnalytics = (enabled: boolean) => {
+    // Fire analytics event either before or after dispatch -- to ensure it is not skipped
+    if (enabled) {
+      dispatch(setAnalyticsEnabled(enabled))
+      AppAnalytics.track(SettingsEvents.settings_analytics, { enabled })
+    } else {
+      AppAnalytics.track(SettingsEvents.settings_analytics, { enabled })
+      dispatch(setAnalyticsEnabled(enabled))
+    }
   }
 
   const handleRequirePinToggle = (value: boolean) => {

package/src/account/saga.test.ts

@@ -21,7 +21,7 @@ import Logger from 'src/utils/Logger'
 import { ViemKeychainAccount } from 'src/viem/keychainAccountToAccount'
 import { getKeychainAccounts } from 'src/web3/contracts'
 import networkConfig from 'src/web3/networkConfig'
-import { UnlockResult, getOrCreateAccount, unlockAccount } from 'src/web3/saga'
+import { UnlockResult, createAccount, unlockAccount } from 'src/web3/saga'
 import { walletAddressSelector } from 'src/web3/selectors'
 import { initializeAccountSuccess, saveSignedMessage } from './actions'
 
@@ -140,6 +140,33 @@ describe('initializeAccount', () => {
     mockFetch.resetMocks()
   })
 
+  it('should call createAccount when not restoring', async () => {
+    await expectSaga(initializeAccountSaga)
+      .provide([
+        [select(choseToRestoreAccountSelector), false],
+        [call(createAccount), undefined],
+        [call(generateSignedMessage), undefined],
+      ])
+      .call(createAccount)
+      .put(initializeAccountSuccess())
+      .run()
+  })
+
+  it('should skip createAccount when restoring', async () => {
+    mockFetch.mockResponse(JSON.stringify({ data: { phoneNumbers: [] } }))
+
+    await expectSaga(initializeAccountSaga)
+      .provide([
+        [select(choseToRestoreAccountSelector), true],
+        [call(generateSignedMessage), undefined],
+        [call(retrieveSignedMessage), 'some signed message'],
+        [select(walletAddressSelector), '0xabc'],
+      ])
+      .not.call.fn(createAccount)
+      .put(initializeAccountSuccess())
+      .run()
+  })
+
   it('should handle the last previously verified phone number', async () => {
     mockFetch.mockResponse(
       JSON.stringify({ data: { phoneNumbers: ['+1302123456', '+31619123456'] } })
@@ -147,9 +174,8 @@ describe('initializeAccount', () => {
 
     await expectSaga(initializeAccountSaga)
       .provide([
-        [call(getOrCreateAccount), undefined],
-        [call(generateSignedMessage), undefined],
         [select(choseToRestoreAccountSelector), true],
+        [call(generateSignedMessage), undefined],
         [call(retrieveSignedMessage), 'some signed message'],
         [select(walletAddressSelector), '0xabc'],
       ])
@@ -176,9 +202,8 @@ describe('initializeAccount', () => {
 
     await expectSaga(initializeAccountSaga)
       .provide([
-        [call(getOrCreateAccount), undefined],
-        [call(generateSignedMessage), undefined],
         [select(choseToRestoreAccountSelector), true],
+        [call(generateSignedMessage), undefined],
         [call(retrieveSignedMessage), 'some signed message'],
         [select(walletAddressSelector), '0xabc'],
       ])
@@ -194,9 +219,8 @@ describe('initializeAccount', () => {
 
     await expectSaga(initializeAccountSaga)
       .provide([
-        [call(getOrCreateAccount), undefined],
-        [call(generateSignedMessage), undefined],
         [select(choseToRestoreAccountSelector), true],
+        [call(generateSignedMessage), undefined],
         [call(retrieveSignedMessage), 'some signed message'],
         [select(walletAddressSelector), '0xabc'],
       ])

package/src/account/saga.ts

@@ -40,7 +40,7 @@ import { safely } from 'src/utils/safely'
 import { clearStoredAccounts } from 'src/web3/KeychainAccounts'
 import { getKeychainAccounts } from 'src/web3/contracts'
 import networkConfig from 'src/web3/networkConfig'
-import { getOrCreateAccount, getWalletAddress, unlockAccount } from 'src/web3/saga'
+import { createAccount, getWalletAddress, unlockAccount } from 'src/web3/saga'
 import { walletAddressSelector } from 'src/web3/selectors'
 import { call, put, select, spawn, take, takeLeading } from 'typed-redux-saga'
 const TAG = 'account/saga'
@@ -75,10 +75,14 @@ export function* initializeAccountSaga() {
   Logger.debug(TAG + '@initializeAccountSaga', 'Creating account')
   try {
     AppAnalytics.track(OnboardingEvents.initialize_account_start)
-    yield* call(getOrCreateAccount)
-    yield* call(generateSignedMessage)
 
     const choseToRestoreAccount = yield* select(choseToRestoreAccountSelector)
+    if (!choseToRestoreAccount) {
+      yield* call(createAccount)
+    }
+
+    yield* call(generateSignedMessage)
+
     if (choseToRestoreAccount) {
       yield* call(handlePreviouslyVerifiedPhoneNumber)
     }

package/src/analytics/AppAnalytics.test.ts

@@ -1,7 +1,7 @@
 import { createClient } from '@segment/analytics-react-native'
 import { PincodeType } from 'src/account/reducer'
 import AppAnalyticsModule from 'src/analytics/AppAnalytics'
-import { OnboardingEvents } from 'src/analytics/Events'
+import { NavigationEvents, OnboardingEvents } from 'src/analytics/Events'
 import * as config from 'src/config'
 import { store } from 'src/redux/store'
 import StatsigClientSingleton from 'src/statsig/client'
@@ -37,6 +37,29 @@ jest.mock('src/web3/networkConfig', () => {
   }
 })
 
+const mockMixpanelInit = jest.fn().mockResolvedValue(undefined)
+const mockMixpanelTrack = jest.fn()
+const mockMixpanelIdentify = jest.fn().mockResolvedValue(undefined)
+const mockMixpanelReset = jest.fn()
+const mockMixpanelFlush = jest.fn()
+const mockMixpanelPeopleSet = jest.fn()
+const mockMixpanelOptInTracking = jest.fn()
+const mockMixpanelOptOutTracking = jest.fn()
+const mockMixpanelConstructor = jest.fn()
+
+jest.mock('mixpanel-react-native', () => ({
+  Mixpanel: mockMixpanelConstructor.mockImplementation(() => ({
+    init: mockMixpanelInit,
+    track: mockMixpanelTrack,
+    identify: mockMixpanelIdentify,
+    reset: mockMixpanelReset,
+    flush: mockMixpanelFlush,
+    getPeople: jest.fn(() => ({ set: mockMixpanelPeopleSet })),
+    optInTracking: mockMixpanelOptInTracking,
+    optOutTracking: mockMixpanelOptOutTracking,
+  })),
+}))
+
 const mockDeviceId = 'abc-def-123' // mocked in __mocks__/react-native-device-info.ts (but importing from that file causes weird errors)
 const expectedSessionId = '453e535d43b22002185f316d5b41561010d9224580bfb608da132e74b128227a'
 const mockWalletAddress = '0x12AE66CDc592e10B60f9097a7b0D3C59fce29876' // deliberately using checksummed version here
@@ -206,6 +229,8 @@ describe('AppAnalytics', () => {
     mockConfig.STATSIG_API_KEY = 'statsig-key'
     mockConfig.STATSIG_ENABLED = true
     mockConfig.SEGMENT_API_KEY = 'segment-key'
+    mockConfig.MIXPANEL_TOKEN = 'mixpanel-token'
+    mockConfig.MIXPANEL_ENABLED = true
     mockConfig.ENABLED_NETWORK_IDS = ['celo-alfajores']
     mockStore.getState.mockImplementation(() => state)
   })
@@ -238,27 +263,55 @@ describe('AppAnalytics', () => {
       await AppAnalytics.init()
       expect(StatsigClientSingleton.initialize).not.toHaveBeenCalled()
     })
+
+    it('initializes Mixpanel when MIXPANEL_TOKEN is present', async () => {
+      await AppAnalytics.init()
+      expect(mockMixpanelConstructor).toHaveBeenCalledWith('mixpanel-token', false, true)
+      expect(mockMixpanelInit).toHaveBeenCalledWith(false, undefined, undefined)
+    })
+
+    it('does not initialize Mixpanel if MIXPANEL_TOKEN is not present', async () => {
+      mockConfig.MIXPANEL_TOKEN = undefined
+      mockConfig.MIXPANEL_ENABLED = false
+      await AppAnalytics.init()
+      expect(mockMixpanelConstructor).not.toHaveBeenCalled()
+    })
+
+    it('initializes Mixpanel with custom API host when provided', async () => {
+      mockConfig.MIXPANEL_API_HOST = 'https://api-eu.mixpanel.com'
+      await AppAnalytics.init()
+      expect(mockMixpanelInit).toHaveBeenCalledWith(false, undefined, 'https://api-eu.mixpanel.com')
+    })
   })
 
   it('delays identify calls until async init has finished', async () => {
     AppAnalytics.identify('0xUSER', { someUserProp: 'testValue' })
     expect(mockSegmentClient.identify).not.toHaveBeenCalled()
+    expect(mockMixpanelConstructor).not.toHaveBeenCalled()
 
     await AppAnalytics.init()
     // Now that init has finished identify should have been called
     expect(mockSegmentClient.identify).toHaveBeenCalledWith('0xUSER', { someUserProp: 'testValue' })
+    expect(mockMixpanelIdentify).toHaveBeenCalledWith('0xUSER')
+    expect(mockMixpanelPeopleSet).toHaveBeenCalledWith({ someUserProp: 'testValue' })
 
     // And now test that identify calls go trough directly
     mockSegmentClient.identify.mockClear()
+    mockMixpanelIdentify.mockClear()
+    mockMixpanelPeopleSet.mockClear()
     AppAnalytics.identify('0xUSER2', { someUserProp: 'testValue2' })
     expect(mockSegmentClient.identify).toHaveBeenCalledWith('0xUSER2', {
       someUserProp: 'testValue2',
     })
+    expect(mockMixpanelIdentify).toHaveBeenCalledWith('0xUSER2')
+    await mockMixpanelIdentify.mock.results[0].value // await the identify() promise
+    expect(mockMixpanelPeopleSet).toHaveBeenCalledWith({ someUserProp: 'testValue2' })
   })
 
   it('delays track calls until async init has finished', async () => {
     AppAnalytics.track(OnboardingEvents.pin_invalid, { error: 'some error' })
     expect(mockSegmentClient.track).not.toHaveBeenCalled()
+    expect(mockMixpanelConstructor).not.toHaveBeenCalled()
 
     await AppAnalytics.init()
     // Now that init has finished track should have been called
@@ -267,32 +320,52 @@ describe('AppAnalytics', () => {
       ...defaultProperties,
       error: 'some error',
     })
+    expect(mockMixpanelTrack).toHaveBeenCalledTimes(1)
+    expect(mockMixpanelTrack).toHaveBeenCalledWith(OnboardingEvents.pin_invalid, {
+      ...defaultProperties,
+      error: 'some error',
+    })
 
     // And now test that track calls go trough directly
     mockSegmentClient.track.mockClear()
+    mockMixpanelTrack.mockClear()
     AppAnalytics.track(OnboardingEvents.pin_invalid, { error: 'some error' })
     expect(mockSegmentClient.track).toHaveBeenCalledTimes(1)
     expect(mockSegmentClient.track).toHaveBeenCalledWith(OnboardingEvents.pin_invalid, {
       ...defaultProperties,
       error: 'some error',
     })
+    expect(mockMixpanelTrack).toHaveBeenCalledTimes(1)
+    expect(mockMixpanelTrack).toHaveBeenCalledWith(OnboardingEvents.pin_invalid, {
+      ...defaultProperties,
+      error: 'some error',
+    })
   })
 
   it('delays screen calls until async init has finished', async () => {
     AppAnalytics.page('Some Page', { someProp: 'testValue' })
     expect(mockSegmentClient.screen).not.toHaveBeenCalled()
+    expect(mockMixpanelConstructor).not.toHaveBeenCalled()
 
     await AppAnalytics.init()
-    // Now that init has finished identify should have been called
+    // Now that init has finished screen should have been called
     expect(mockSegmentClient.screen).toHaveBeenCalledTimes(1)
     expect(mockSegmentClient.screen).toHaveBeenCalledWith('Some Page', {
       ...defaultProperties,
       sCurrentScreenId: 'Some Page',
       someProp: 'testValue',
     })
+    expect(mockMixpanelTrack).toHaveBeenCalledTimes(1)
+    expect(mockMixpanelTrack).toHaveBeenCalledWith(NavigationEvents.screen_viewed, {
+      screen_name: 'Some Page',
+      ...defaultProperties,
+      sCurrentScreenId: 'Some Page',
+      someProp: 'testValue',
+    })
 
     // And now test that page calls go trough directly
     mockSegmentClient.screen.mockClear()
+    mockMixpanelTrack.mockClear()
     AppAnalytics.page('Some Page2', { someProp: 'testValue2' })
     expect(mockSegmentClient.screen).toHaveBeenCalledTimes(1)
     expect(mockSegmentClient.screen).toHaveBeenCalledWith('Some Page2', {
@@ -301,6 +374,14 @@ describe('AppAnalytics', () => {
       someProp: 'testValue2',
       sPrevScreenId: 'Some Page',
     })
+    expect(mockMixpanelTrack).toHaveBeenCalledTimes(1)
+    expect(mockMixpanelTrack).toHaveBeenCalledWith(NavigationEvents.screen_viewed, {
+      screen_name: 'Some Page2',
+      ...defaultProperties,
+      sCurrentScreenId: 'Some Page2',
+      someProp: 'testValue2',
+      sPrevScreenId: 'Some Page',
+    })
   })
 
   it('adds super properties to all tracked events', async () => {
@@ -311,6 +392,11 @@ describe('AppAnalytics', () => {
       ...defaultProperties,
       error: 'some error',
     })
+    expect(mockMixpanelTrack).toHaveBeenCalledTimes(1)
+    expect(mockMixpanelTrack).toHaveBeenCalledWith(OnboardingEvents.pin_invalid, {
+      ...defaultProperties,
+      error: 'some error',
+    })
   })
 
   it('adds super properties to all screen events', async () => {
@@ -322,6 +408,36 @@ describe('AppAnalytics', () => {
       someProp: 'someValue',
       sCurrentScreenId: 'ScreenA',
     })
+    expect(mockMixpanelTrack).toHaveBeenCalledTimes(1)
+    expect(mockMixpanelTrack).toHaveBeenCalledWith(NavigationEvents.screen_viewed, {
+      screen_name: 'ScreenA',
+      ...defaultProperties,
+      someProp: 'someValue',
+      sCurrentScreenId: 'ScreenA',
+    })
+  })
+
+  it('resets both Segment and Mixpanel', async () => {
+    await AppAnalytics.init()
+    await AppAnalytics.reset()
+    expect(mockSegmentClient.flush).toHaveBeenCalled()
+    expect(mockSegmentClient.reset).toHaveBeenCalled()
+    expect(mockMixpanelFlush).toHaveBeenCalled()
+    expect(mockMixpanelReset).toHaveBeenCalled()
+  })
+
+  it('calls optOutTracking when analytics is disabled', async () => {
+    await AppAnalytics.init()
+    AppAnalytics.setAnalyticsEnabled(false)
+    expect(mockMixpanelOptOutTracking).toHaveBeenCalled()
+    expect(mockMixpanelOptInTracking).not.toHaveBeenCalled()
+  })
+
+  it('calls optInTracking when analytics is enabled', async () => {
+    await AppAnalytics.init()
+    AppAnalytics.setAnalyticsEnabled(true)
+    expect(mockMixpanelOptInTracking).toHaveBeenCalled()
+    expect(mockMixpanelOptOutTracking).not.toHaveBeenCalled()
   })
 
   it('returns a different sessionId if the time is different', async () => {

package/src/analytics/AppAnalytics.ts

@@ -2,12 +2,12 @@ import { createClient, SegmentClient } from '@segment/analytics-react-native'
 import { AdjustPlugin } from '@segment/analytics-react-native-plugin-adjust'
 import { DestinationFiltersPlugin } from '@segment/analytics-react-native-plugin-destination-filters'
 import { FirebasePlugin } from '@segment/analytics-react-native-plugin-firebase'
-import _ from 'lodash'
+import { Mixpanel } from 'mixpanel-react-native'
 import { Platform } from 'react-native'
 import DeviceInfo from 'react-native-device-info'
 import { check, PERMISSIONS, request, RESULTS } from 'react-native-permissions'
 import { AsyncStoragePersistor } from 'src/analytics/AsyncStoragePersistor'
-import { AppEvents } from 'src/analytics/Events'
+import { AppEvents, NavigationEvents } from 'src/analytics/Events'
 import { InjectTraits } from 'src/analytics/InjectTraits'
 import { AnalyticsPropertiesList } from 'src/analytics/Properties'
 import { getCurrentUserTraits } from 'src/analytics/selectors'
@@ -15,6 +15,9 @@ import {
   DEFAULT_TESTNET,
   FIREBASE_ENABLED,
   isE2EEnv,
+  MIXPANEL_API_HOST,
+  MIXPANEL_ENABLED,
+  MIXPANEL_TOKEN,
   SEGMENT_API_KEY,
   STATSIG_ENABLED,
   STATSIG_ENV,
@@ -23,6 +26,7 @@ import { store } from 'src/redux/store'
 import StatsigClientSingleton from 'src/statsig/client'
 import { ensureError } from 'src/utils/ensureError'
 import Logger from 'src/utils/Logger'
+import { sanitizeProperties } from 'src/utils/serialization'
 import { sha256 } from 'viem'
 
 const TAG = 'AppAnalytics'
@@ -94,6 +98,7 @@ class AppAnalytics {
   private currentScreenId: string | undefined
   private prevScreenId: string | undefined
   private segmentClient: SegmentClient | undefined
+  private mixpanelClient: Mixpanel | undefined
 
   async init() {
     let uniqueID
@@ -153,6 +158,26 @@ class AppAnalytics {
     } else {
       Logger.info(TAG, 'Statsig is not enabled, skipping setup')
     }
+
+    if (MIXPANEL_ENABLED && MIXPANEL_TOKEN) {
+      try {
+        const trackLegacyAutomaticEvents = false
+        const useNative = true
+        this.mixpanelClient = new Mixpanel(MIXPANEL_TOKEN, trackLegacyAutomaticEvents, useNative)
+
+        const optOutTrackingDefault = !this.isEnabled()
+        const superProperties = undefined
+        const serverURL = MIXPANEL_API_HOST
+        await this.mixpanelClient.init(optOutTrackingDefault, superProperties, serverURL)
+
+        Logger.info(TAG, 'Mixpanel initialized!')
+      } catch (err) {
+        const error = ensureError(err)
+        Logger.error(TAG, `Mixpanel setup error: ${error.message}\n`, error)
+      }
+    } else {
+      Logger.info(TAG, 'Mixpanel token not present, skipping setup')
+    }
   }
 
   isEnabled() {
@@ -178,6 +203,16 @@ class AppAnalytics {
     return this.sessionId
   }
 
+  setAnalyticsEnabled(enabled: boolean) {
+    if (this.mixpanelClient) {
+      if (enabled) {
+        this.mixpanelClient.optInTracking()
+      } else {
+        this.mixpanelClient.optOutTracking()
+      }
+    }
+  }
+
   track<EventName extends keyof AnalyticsPropertiesList>(
     ...args: undefined extends AnalyticsPropertiesList[EventName]
       ? [EventName] | [EventName, AnalyticsPropertiesList[EventName]]
@@ -190,15 +225,10 @@ class AppAnalytics {
       return
     }
 
-    if (!this.segmentClient) {
-      Logger.debug(TAG, `segmentClient undefined, not tracking event ${eventName}`)
-      return
-    }
-
-    const props: {} = {
+    const props = sanitizeProperties({
       ...this.getSuperProps(),
       ...eventProperties,
-    }
+    })
 
     if (__DEV__) {
       Logger.debug(TAG, `Tracking event ${eventName} with properties:`, props)
@@ -206,9 +236,17 @@ class AppAnalytics {
       Logger.info(TAG, `Tracking event ${eventName}`)
     }
 
-    this.segmentClient.track(eventName, props).catch((err) => {
-      Logger.error(TAG, `Failed to track event ${eventName}`, err)
-    })
+    // Track to Segment
+    if (this.segmentClient) {
+      this.segmentClient.track(eventName, props).catch((err) => {
+        Logger.error(TAG, `Failed to track event ${eventName} to Segment`, err)
+      })
+    }
+
+    // Track to Mixpanel
+    if (this.mixpanelClient) {
+      this.mixpanelClient.track(eventName, props)
+    }
   }
 
   identify(userID: string | null, traits: {}) {
@@ -222,17 +260,27 @@ class AppAnalytics {
       return
     }
 
-    if (!this.segmentClient) {
-      Logger.debug(TAG, `segmentClient is undefined, not tracking user ${userID}`)
-      return
+    const safeTraits = sanitizeProperties(traits)
+
+    // Identify in Segment
+    if (this.segmentClient) {
+      this.segmentClient.identify(userID, safeTraits).catch((err) => {
+        Logger.error(TAG, `Failed to identify user ${userID} in Segment`, err)
+        throw err
+      })
     }
-    // The firebase segment plugin can't handle null or undefined values
-    const safeTraits = _.omitBy(traits, _.isNil)
 
-    this.segmentClient.identify(userID, safeTraits).catch((err) => {
-      Logger.error(TAG, `Failed to identify user ${userID}`, err)
-      throw err
-    })
+    // Identify in Mixpanel
+    if (this.mixpanelClient) {
+      this.mixpanelClient
+        .identify(userID)
+        .then(() => {
+          this.mixpanelClient!.getPeople().set(safeTraits)
+        })
+        .catch((err) => {
+          Logger.error(TAG, `Failed to identify user ${userID} in Mixpanel`, err)
+        })
+    }
   }
 
   page(screenId: string, eventProperties = {}) {
@@ -241,36 +289,47 @@ class AppAnalytics {
       return
     }
 
-    if (!this.segmentClient) {
-      Logger.debug(TAG, `segmentClient is undefined, not tracking screen ${screenId}`)
-      return
-    }
-
     if (screenId !== this.currentScreenId) {
       this.prevScreenId = this.currentScreenId
       this.currentScreenId = screenId
     }
 
-    const props: {} = {
+    const props = sanitizeProperties({
       ...this.getSuperProps(),
       ...eventProperties,
+    })
+
+    // Track screen in Segment
+    if (this.segmentClient) {
+      this.segmentClient.screen(screenId, props).catch((err) => {
+        Logger.error(TAG, 'Error tracking page in Segment', err)
+      })
     }
 
-    this.segmentClient.screen(screenId, props).catch((err) => {
-      Logger.error(TAG, 'Error tracking page', err)
-    })
+    // Track screen in Mixpanel
+    if (this.mixpanelClient) {
+      this.mixpanelClient.track(NavigationEvents.screen_viewed, {
+        screen_name: screenId,
+        ...props,
+      })
+    }
   }
 
   async reset() {
-    if (!this.segmentClient) {
-      Logger.debug(TAG, `segmentClient is undefined, not resetting`)
-      return
+    // Reset Segment
+    if (this.segmentClient) {
+      try {
+        await this.segmentClient.flush()
+        await this.segmentClient.reset()
+      } catch (error) {
+        Logger.error(TAG, 'Error resetting Segment analytics', error)
+      }
     }
-    try {
-      await this.segmentClient.flush()
-      await this.segmentClient.reset()
-    } catch (error) {
-      Logger.error(TAG, 'Error resetting analytics', error)
+
+    // Reset Mixpanel
+    if (this.mixpanelClient) {
+      this.mixpanelClient.flush()
+      this.mixpanelClient.reset()
     }
   }
 

package/src/analytics/Events.tsx

@@ -451,6 +451,7 @@ export enum PerformanceEvents {
 
 export enum NavigationEvents {
   navigator_not_ready = 'navigator_not_ready',
+  screen_viewed = 'screen_viewed',
 }
 
 export enum WalletConnectEvents {

package/src/analytics/Properties.tsx

@@ -930,6 +930,9 @@ interface PerformanceProperties {
 
 interface NavigationProperties {
   [NavigationEvents.navigator_not_ready]: undefined
+  [NavigationEvents.screen_viewed]: {
+    screen_name: string
+  }
 }
 
 export interface WalletConnect1Properties {

package/src/analytics/docs.ts

@@ -430,6 +430,7 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [ContractKitEvents.init_contractkit_finish]: ``,
   [PerformanceEvents.redux_store_size]: ``,
   [NavigationEvents.navigator_not_ready]: ``,
+  [NavigationEvents.screen_viewed]: `When a screen is viewed in the app`,
 
   // Events related to Points program
   [PointsEvents.points_discover_press]: `when points card is pressed in the discover tab`,

package/src/analytics/saga.test.ts

@@ -2,8 +2,9 @@ import { expectSaga } from 'redux-saga-test-plan'
 import { dynamic } from 'redux-saga-test-plan/providers'
 import { select } from 'redux-saga/effects'
 import AppAnalytics from 'src/analytics/AppAnalytics'
-import { updateUserTraits } from 'src/analytics/saga'
+import { handleSetAnalyticsEnabled, updateUserTraits } from 'src/analytics/saga'
 import { getCurrentUserTraits } from 'src/analytics/selectors'
+import { Actions } from 'src/app/actions'
 
 jest.mock('src/config', () => ({
   ...jest.requireActual('src/config'),
@@ -55,3 +56,23 @@ describe(updateUserTraits, () => {
     })
   })
 })
+
+describe(handleSetAnalyticsEnabled, () => {
+  it('calls setAnalyticsEnabled with the enabled value', async () => {
+    await expectSaga(handleSetAnalyticsEnabled, {
+      type: Actions.SET_ANALYTICS_ENABLED,
+      enabled: false,
+    }).silentRun()
+
+    expect(AppAnalytics.setAnalyticsEnabled).toHaveBeenCalledWith(false)
+  })
+
+  it('calls setAnalyticsEnabled when analytics is re-enabled', async () => {
+    await expectSaga(handleSetAnalyticsEnabled, {
+      type: Actions.SET_ANALYTICS_ENABLED,
+      enabled: true,
+    }).silentRun()
+
+    expect(AppAnalytics.setAnalyticsEnabled).toHaveBeenCalledWith(true)
+  })
+})

package/src/analytics/saga.ts

@@ -1,6 +1,8 @@
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { getCurrentUserTraits } from 'src/analytics/selectors'
-import { call, select, spawn, take } from 'typed-redux-saga'
+import { Actions, SetAnalyticsEnabled } from 'src/app/actions'
+import { safely } from 'src/utils/safely'
+import { call, select, spawn, take, takeEvery } from 'typed-redux-saga'
 
 export function* updateUserTraits() {
   let prevTraits
@@ -16,6 +18,15 @@ export function* updateUserTraits() {
   }
 }
 
+export function* handleSetAnalyticsEnabled(action: SetAnalyticsEnabled) {
+  yield* call([AppAnalytics, 'setAnalyticsEnabled'], action.enabled)
+}
+
+function* watchAnalyticsEnabled() {
+  yield* takeEvery(Actions.SET_ANALYTICS_ENABLED, safely(handleSetAnalyticsEnabled))
+}
+
 export function* analyticsSaga() {
   yield* spawn(updateUserTraits)
+  yield* spawn(watchAnalyticsEnabled)
 }

package/src/app/actions.ts

@@ -54,7 +54,7 @@ interface DeepLinkDeferred {
   isSecureOrigin: boolean
 }
 
-interface SetAnalyticsEnabled {
+export interface SetAnalyticsEnabled {
   type: Actions.SET_ANALYTICS_ENABLED
   enabled: boolean
 }

package/src/config.ts

@@ -97,6 +97,9 @@ export const ALCHEMY_API_KEY = experimentalConfig.alchemyApiKey
 export const STATSIG_API_KEY = appConfig.features?.statsig?.apiKey
 export const STATSIG_ENABLED = !isE2EEnv && !!STATSIG_API_KEY
 export const SEGMENT_API_KEY = appConfig.features?.segment?.apiKey
+export const MIXPANEL_TOKEN = appConfig.features?.mixpanel?.token
+export const MIXPANEL_API_HOST = appConfig.features?.mixpanel?.apiHost
+export const MIXPANEL_ENABLED = !isE2EEnv && !!MIXPANEL_TOKEN
 export const AUTH0_CLIENT_ID =
   DEFAULT_TESTNET === 'mainnet'
     ? 'FS2sPfMvDBKy0udOoCbc4ao8HakvAR6b'

package/src/public/types.tsx

@@ -169,6 +169,10 @@ export interface PublicAppConfig<tabScreenConfigs extends TabScreenConfig[] = Ta
     segment?: {
       apiKey: string
     }
+    mixpanel?: {
+      token: string
+      apiHost?: string
+    }
   }
 
   /**

package/src/qrcode/schema.ts

@@ -11,6 +11,7 @@ import { PathReporter } from 'io-ts/lib/PathReporter'
 import { DEEP_LINK_URL_SCHEME } from 'src/config'
 import { LocalCurrencyCode } from 'src/localCurrency/consts'
 import { AddressType, E164PhoneNumberType } from 'src/utils/io'
+import { sanitizeProperties } from 'src/utils/serialization'
 import { parse } from 'url'
 
 export const UriDataType = ioType({
@@ -36,10 +37,7 @@ enum UriMethod {
   pay = 'pay',
 }
 
-// removes undefined parameters for serialization
-export const stripUndefined = (obj: object) => JSON.parse(JSON.stringify(obj))
-
 export const urlFromUriData = (data: Partial<UriData>, method: UriMethod = UriMethod.pay) => {
-  const params = new URLSearchParams(stripUndefined(data))
+  const params = new URLSearchParams(sanitizeProperties(data))
   return encodeURI(`${DEEP_LINK_URL_SCHEME}://wallet/${method.toString()}?${params.toString()}`)
 }

package/src/utils/serialization.ts

@@ -0,0 +1,8 @@
+/**
+ * Recursively strips values that are not useful to send through serialization
+ * boundaries (e.g. React Native native bridge, URL params, analytics payloads).
+ *
+ * Removes: `undefined`, `null`, `NaN`, `Infinity`
+ */
+export const sanitizeProperties = <T extends object>(obj: T): Partial<T> =>
+  JSON.parse(JSON.stringify(obj), (_key, value) => (value === null ? undefined : value))

package/src/web3/saga.test.ts

@@ -4,6 +4,7 @@ import { call, select } from 'redux-saga/effects'
 import { generateSignedMessage } from 'src/account/saga'
 import { ErrorMessages } from 'src/app/ErrorMessages'
 import { storeMnemonic } from 'src/backup/utils'
+import { clearStoredAccounts } from 'src/web3/KeychainAccounts'
 import { currentLanguageSelector } from 'src/i18n/selectors'
 import { getPasswordSaga, retrieveSignedMessage } from 'src/pincode/authentication'
 import { MnemonicLanguages, MnemonicStrength, generateMnemonic } from 'src/utils/account'
@@ -12,7 +13,7 @@ import {
   UnlockResult,
   getConnectedAccount,
   getConnectedUnlockedAccount,
-  getOrCreateAccount,
+  createAccount,
   getWalletAddress,
   unlockAccount,
   assignAccountFromPrivateKey,
@@ -40,15 +41,7 @@ const state = createMockStore({
   web3: { account: mockAccount },
 }).getState()
 
-describe(getOrCreateAccount, () => {
-  it('returns an existing account', async () => {
-    await expectSaga(getOrCreateAccount)
-      .withState(state)
-      .not.call.fn(generateMnemonic)
-      .returns('0x0000000000000000000000000000000000007e57')
-      .run()
-  })
-
+describe(createAccount, () => {
   it.each`
     expectedAddress                                 | expectedPrivateDek                                                      | mnemonic
     ${'0xE025583d25Eff2C254999b5904C97bAe9B3F8D83'} | ${'0xb6812219f7003c27cc1ef17c2033c033a38cfc52d83f176a0667086787d59d39'} | ${'avellana novio zona pinza ducha íntimo amante diluir toldo peón ocio encía gen balcón carro lingote millón amasar mármol bondad toser soledad croqueta agosto'}
@@ -57,10 +50,9 @@ describe(getOrCreateAccount, () => {
   `(
     'creates a new account $expectedAddress',
     async ({ expectedAddress, expectedPrivateDek, mnemonic }) => {
-      await expectSaga(getOrCreateAccount)
+      await expectSaga(createAccount)
         .withState(state)
         .provide([
-          [select(currentAccountSelector), null],
           [matchers.call.fn(generateMnemonic), mnemonic],
           [
             call(storeMnemonic, mnemonic, expectedAddress),
@@ -71,6 +63,7 @@ describe(getOrCreateAccount, () => {
           ],
           [call(getPasswordSaga, expectedAddress, false, true), 'somePassword'],
         ])
+        .call(clearStoredAccounts)
         .put(setAccount(expectedAddress))
         .returns(expectedAddress)
         .run()
@@ -86,10 +79,9 @@ describe(getOrCreateAccount, () => {
   `(
     'creates an account with a mnemonic in $expectedMnemonicLang when app language is $appLang',
     async ({ appLang, expectedMnemonicLang }) => {
-      const { returnValue } = await expectSaga(getOrCreateAccount)
+      const { returnValue } = await expectSaga(createAccount)
         .withState(state)
         .provide([
-          [select(currentAccountSelector), null],
           [select(currentLanguageSelector), appLang],
           [
             matchers.call.fn(storeMnemonic),

package/src/web3/saga.ts

@@ -12,28 +12,23 @@ import Logger from 'src/utils/Logger'
 import { MnemonicLanguages, MnemonicStrength, generateMnemonic } from 'src/utils/account'
 import { privateKeyToAddress } from 'src/utils/address'
 import { ensureError } from 'src/utils/ensureError'
+import { clearStoredAccounts } from 'src/web3/KeychainAccounts'
 import { Actions, SetAccountAction, setAccount } from 'src/web3/actions'
 import { UNLOCK_DURATION } from 'src/web3/consts'
 import { getKeychainAccounts } from 'src/web3/contracts'
-import { currentAccountSelector, walletAddressSelector } from 'src/web3/selectors'
+import { walletAddressSelector } from 'src/web3/selectors'
 import { call, put, select, take } from 'typed-redux-saga'
 import { RootState } from '../redux/reducers'
 
 const TAG = 'web3/saga'
 
-export function* getOrCreateAccount() {
-  const account = yield* select(currentAccountSelector)
-  if (account) {
-    Logger.debug(
-      TAG + '@getOrCreateAccount',
-      'Tried to create account twice, returning the existing one'
-    )
-    return account
-  }
-
+export function* createAccount() {
   let privateKey: string | undefined
   try {
-    Logger.debug(TAG + '@getOrCreateAccount', 'Creating a new account')
+    Logger.debug(TAG + '@createAccount', 'Clearing stored accounts')
+    yield* call(clearStoredAccounts)
+
+    Logger.debug(TAG + '@createAccount', 'Creating a new account')
 
     const mnemonicBitLength = MnemonicStrength.s128_12words
     const mnemonicLanguage = MnemonicLanguages.english
@@ -45,7 +40,7 @@ export function* getOrCreateAccount() {
     }
     let duplicateInMnemonic = checkDuplicate(mnemonic)
     while (duplicateInMnemonic) {
-      Logger.debug(TAG + '@getOrCreateAccount', 'Regenerating mnemonic to avoid duplicates')
+      Logger.debug(TAG + '@createAccount', 'Regenerating mnemonic to avoid duplicates')
       mnemonic = yield* call(generateMnemonic, mnemonicBitLength, mnemonicLanguage)
       duplicateInMnemonic = checkDuplicate(mnemonic)
     }
@@ -71,7 +66,7 @@ export function* getOrCreateAccount() {
   } catch (err) {
     const error = ensureError(err)
     const sanitizedError = Logger.sanitizeError(error, privateKey)
-    Logger.error(TAG + '@getOrCreateAccount', 'Error creating account', sanitizedError)
+    Logger.error(TAG + '@createAccount', 'Error creating account', sanitizedError)
     throw new Error(ErrorMessages.ACCOUNT_SETUP_FAILED)
   }
 }