migrated from amplitude to segment

app/App.tsx

@@ -1,27 +1,40 @@
-import React, { useEffect } from 'react';
-
-import * as amplitude from '@amplitude/analytics-react-native';
-import { AMPLITUDE_KEY } from '@env';
+import 'react-native-get-random-values';
 import '@ethersproject/shims';
 import { Buffer } from 'buffer';
-import 'react-native-get-random-values';
+import { NativeModules } from 'react-native';
+
+global.Buffer = Buffer;
 
+import React, { useEffect } from 'react';
+import * as amplitude from '@amplitude/analytics-react-native';
+import { AMPLITUDE_KEY, SEGMENT_KEY } from '@env';
 import { useToastController } from '@tamagui/toast';
 import { YStack } from 'tamagui';
+import { createClient } from '@segment/analytics-react-native';
 
 import MainScreen from './src/screens/MainScreen';
 import useNavigationStore from './src/stores/navigationStore';
 import useUserStore from './src/stores/userStore';
 import { bgWhite } from './src/utils/colors';
 import { setupUniversalLinkListener } from './src/utils/qrCode'; // Adjust the import path as needed
 
-global.Buffer = Buffer;
+// Create the client at the module level
+const segmentClient = SEGMENT_KEY
+  ? createClient({
+    writeKey: SEGMENT_KEY,
+    trackAppLifecycleEvents: true,
+    trackDeepLinks: true,
+    debug: true,
+  })
+  : null;
+
+// Export it for use in other components
+export { segmentClient };
 
 function App(): React.JSX.Element {
   const toast = useToastController();
-  const setToast = useNavigationStore(state => state.setToast);
+  const { setToast, setSelectedTab, trackEvent } = useNavigationStore();
   const initUserStore = useUserStore(state => state.initUserStore);
-  const setSelectedTab = useNavigationStore(state => state.setSelectedTab);
 
   useEffect(() => {
     initUserStore();
@@ -35,12 +48,6 @@ function App(): React.JSX.Element {
     setSelectedTab('splash');
   }, [setSelectedTab]);
 
-  useEffect(() => {
-    if (AMPLITUDE_KEY) {
-      amplitude.init(AMPLITUDE_KEY);
-    }
-  }, []);
-
   useEffect(() => {
     const cleanup = setupUniversalLinkListener();
     return cleanup;

app/android/app/build.gradle

@@ -85,8 +85,8 @@ android {
         applicationId "com.proofofpassportapp"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 17
-        versionName "1.6"
+        versionCode 18
+        versionName "1.7"
         externalNativeBuild {
             cmake {
                 cppFlags += "-fexceptions -frtti -std=c++11"

app/ios/OpenPassport.xcodeproj/project.pbxproj

@@ -500,7 +500,7 @@
 				CODE_SIGN_ENTITLEMENTS = OpenPassport/OpenPassportDebug.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 68;
+				CURRENT_PROJECT_VERSION = 69;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 5B29R5LYHQ;
 				ENABLE_BITCODE = NO;
@@ -615,7 +615,7 @@
 					"$(PROJECT_DIR)",
 					"$(PROJECT_DIR)/MoproKit/Libs",
 				);
-				MARKETING_VERSION = 2.0.1;
+				MARKETING_VERSION = 2.0.3;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -639,7 +639,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = OpenPassport/OpenPassport.entitlements;
-				CURRENT_PROJECT_VERSION = 68;
+				CURRENT_PROJECT_VERSION = 69;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 5B29R5LYHQ;
 				FRAMEWORK_SEARCH_PATHS = (
@@ -753,7 +753,7 @@
 					"$(PROJECT_DIR)",
 					"$(PROJECT_DIR)/MoproKit/Libs",
 				);
-				MARKETING_VERSION = 2.0.1;
+				MARKETING_VERSION = 2.0.3;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

app/ios/Podfile.lock

@@ -1470,7 +1470,7 @@ PODS:
     - React-logger (= 0.75.4)
     - React-perflogger (= 0.75.4)
     - React-utils (= 0.75.4)
-  - RNCAsyncStorage (1.24.0):
+  - RNCAsyncStorage (2.1.0):
     - React-Core
   - RNFS (2.20.0):
     - React-Core
@@ -1485,7 +1485,12 @@ PODS:
   - RNZipArchive/Core (6.1.2):
     - React-Core
     - SSZipArchive (~> 2.2)
+  - segment-analytics-react-native (2.20.3):
+    - React-Core
+    - sovran-react-native
   - SocketRocket (0.7.0)
+  - sovran-react-native (1.1.3):
+    - React-Core
   - SSZipArchive (2.4.3)
   - SwiftQRScanner (1.1.6)
   - SwiftyTesseract (3.1.3)
@@ -1566,6 +1571,8 @@ DEPENDENCIES:
   - RNKeychain (from `../node_modules/react-native-keychain`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - RNZipArchive (from `../node_modules/react-native-zip-archive`)
+  - "segment-analytics-react-native (from `../node_modules/@segment/analytics-react-native`)"
+  - "sovran-react-native (from `../node_modules/@segment/sovran-react-native`)"
   - SwiftQRScanner (from `https://github.com/vinodiOS/SwiftQRScanner`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -1721,6 +1728,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-svg"
   RNZipArchive:
     :path: "../node_modules/react-native-zip-archive"
+  segment-analytics-react-native:
+    :path: "../node_modules/@segment/analytics-react-native"
+  sovran-react-native:
+    :path: "../node_modules/@segment/sovran-react-native"
   SwiftQRScanner:
     :git: https://github.com/vinodiOS/SwiftQRScanner
   Yoga:
@@ -1804,12 +1815,14 @@ SPEC CHECKSUMS:
   React-utils: 768a7eb396b7df37aa19389201652eac613490cd
   ReactCodegen: c53f8a0fa088739ee9929820feec1508043c7e6c
   ReactCommon: 03d2d48fcd1329fe3bc4e428a78a0181b68068c2
-  RNCAsyncStorage: ec53e44dc3e75b44aa2a9f37618a49c3bc080a7a
+  RNCAsyncStorage: cc6479c4acd84cc7004946946c8afe30b018184d
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNKeychain: bfe3d12bf4620fe488771c414530bf16e88f3678
   RNSVG: 07dbd870b0dcdecc99b3a202fa37c8ca163caec2
   RNZipArchive: 6d736ee4e286dbbd9d81206b7a4da355596ca04a
+  segment-analytics-react-native: d57ed4971cbb995706babf29215ebdbf242ecdab
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
+  sovran-react-native: eec37f82e4429f0e3661f46aaf4fcd85d1b54f60
   SSZipArchive: fe6a26b2a54d5a0890f2567b5cc6de5caa600aef
   SwiftQRScanner: e85a25f9b843e9231dab89a96e441472fe54a724
   SwiftyTesseract: 1f3d96668ae92dc2208d9842c8a59bea9fad2cbb

app/package.json

@@ -21,9 +21,11 @@
     "@openpassport/zk-kit-imt": "^0.0.5",
     "@openpassport/zk-kit-lean-imt": "^0.0.6",
     "@openpassport/zk-kit-smt": "^0.0.1",
-    "@react-native-async-storage/async-storage": "^1.23.1",
+    "@react-native-async-storage/async-storage": "^2.1.0",
     "@react-native-community/cli": "^14.1.1",
     "@react-native-community/netinfo": "^11.3.1",
+    "@segment/analytics-react-native": "^2.20.3",
+    "@segment/sovran-react-native": "^1.1.3",
     "@tamagui/colors": "1.110.0",
     "@tamagui/config": "1.110.0",
     "@tamagui/core": "1.110.0",

app/src/screens/SplashScreen.tsx

@@ -11,7 +11,6 @@ const SplashScreen = () => {
   const { setSelectedTab } = useNavigationStore();
   useEffect(() => {
     if (userLoaded) {
-      console.log('passportMetadata', passportMetadata);
       if (passportData && passportMetadata && passportData.dg2Hash && !passportData.mockUser) {
         setSelectedTab('app');
       } else {

app/src/stores/navigationStore.ts

@@ -5,6 +5,7 @@ import {
   IsZkeyDownloading,
   ShowWarningModalProps,
 } from '../utils/zkeyDownload';
+import { segmentClient } from '../../App';
 
 interface NavigationState {
   isZkeyDownloading: IsZkeyDownloading;
@@ -23,6 +24,8 @@ interface NavigationState {
   setNfcSheetIsOpen: (isOpen: boolean) => void;
   zkeyDownloadedPercentage: number;
   setZkeyDownloadedPercentage: (percentage: number) => void;
+  trackEvent: (eventName: string, properties?: Record<string, any>) => void;
+  trackNavigation: (tab: string) => void;
 }
 
 const useNavigationStore = create<NavigationState>((set, get) => ({
@@ -53,7 +56,10 @@ const useNavigationStore = create<NavigationState>((set, get) => ({
   setToast: toast => set({ toast }),
   setSelectedApp: app => set({ selectedApp: app }),
 
-  setSelectedTab: tab => set({ selectedTab: tab }),
+  setSelectedTab: (tab: string) => {
+    const { trackNavigation } = get();
+    trackNavigation(tab);
+  },
 
   update: patch => {
     set({
@@ -63,6 +69,21 @@ const useNavigationStore = create<NavigationState>((set, get) => ({
   },
   nfcSheetIsOpen: false,
   setNfcSheetIsOpen: isOpen => set({ nfcSheetIsOpen: isOpen }),
+
+  trackEvent: (eventName: string, properties?: Record<string, any>) => {
+    if (segmentClient) {
+      segmentClient.track(eventName, properties);
+    }
+  },
+
+  trackNavigation: (tab: string) => {
+    if (segmentClient) {
+      segmentClient.track('Navigation Change', {
+        tab
+      });
+    }
+    set({ selectedTab: tab });
+  },
 }));
 
 export default useNavigationStore;

app/src/utils/cameraScanner.ts

@@ -1,66 +1,65 @@
-import * as amplitude from '@amplitude/analytics-react-native';
 import { NativeModules, Platform } from 'react-native';
 
 import useNavigationStore from '../stores/navigationStore';
 import useUserStore from '../stores/userStore';
 import { extractMRZInfo, formatDateToYYMMDD } from './utils';
 
 export const startCameraScan = async () => {
-  const { toast, setSelectedTab } = useNavigationStore.getState();
+  const { toast, setSelectedTab, trackEvent } = useNavigationStore.getState();
+  const startTime = Date.now();
+
+  trackEvent('Camera Launched');
 
   if (Platform.OS === 'ios') {
     try {
       const result = await NativeModules.MRZScannerModule.startScanning();
-      console.log('Scan result:', result);
-      console.log(
-        `Document Number: ${result.documentNumber}, Expiry Date: ${result.expiryDate}, Birth Date: ${result.birthDate}`,
-      );
-
+      setSelectedTab('nfc');
+      trackEvent('Camera Success', {
+        duration_ms: Date.now() - startTime,
+      });
       useUserStore.setState({
         passportNumber: result.documentNumber,
         dateOfBirth: formatDateToYYMMDD(result.birthDate),
         dateOfExpiry: formatDateToYYMMDD(result.expiryDate),
       });
-
-      setSelectedTab('nfc');
-      toast.show('✔︎', {
-        message: 'Scan successful',
-        customData: {
-          type: 'success',
-        },
-      });
+      trackEvent('MRZ Success');
+      toast.show('✔︎', { message: 'Scan successful', customData: { type: 'success' } });
     } catch (e) {
       console.error(e);
-      amplitude.track('camera_scan_error', { error: e });
+      trackEvent('Camera Failed', {
+        duration_ms: Date.now() - startTime,
+        error: e?.toString(),
+      });
     }
   } else {
     NativeModules.CameraActivityModule.startCameraActivity()
       .then((mrzInfo: string) => {
         try {
-          const { documentNumber, birthDate, expiryDate } =
-            extractMRZInfo(mrzInfo);
-
+          trackEvent('Camera Success', {
+            duration_ms: Date.now() - startTime,
+          });
+          const { documentNumber, birthDate, expiryDate } = extractMRZInfo(mrzInfo);
           useUserStore.setState({
             passportNumber: documentNumber,
             dateOfBirth: birthDate,
             dateOfExpiry: expiryDate,
           });
-
           setSelectedTab('nfc');
-          toast.show('✔︎', {
-            message: 'Scan successful',
-            customData: {
-              type: 'success',
-            },
-          });
+          trackEvent('MRZ Success');
+          toast.show('✔︎', { message: 'Scan successful', customData: { type: 'success' } });
         } catch (error: any) {
           console.error('Invalid MRZ format:', error.message);
-          amplitude.track('invalid_mrz_format', { error: error.message });
+          trackEvent('MRZ Error', {
+            error: error.message,
+          });
         }
       })
       .catch((error: any) => {
         console.error('Camera Activity Error:', error);
-        amplitude.track('camera_scan_error', { error: error.message });
+        trackEvent('Camera Failed', {
+          duration_ms: Date.now() - startTime,
+          error: error.message,
+        });
       });
   }
 };