react-native-inapp-inspector 2.0.2 → 2.0.4

package/dist/esm/components/Inspector/SettingsPanel.js

@@ -17,11 +17,26 @@ import { clearPerformanceEvents } from '../../customHooks/performanceTracker';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 import { useTranslation } from '../../i18n';
+import { getTelemetryConsentStatus, setTelemetryConsent, sendSessionTelemetryPing, } from '../../helpers/telemetry';
 import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, } from '../NetworkIcons';
 const SettingsPanel = () => {
     const { t } = useTranslation();
-    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = useInspector();
+    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = useInspector();
     const [stagedHeight, setStagedHeight] = useState(modalHeightPercent);
+    const [telemetryConsent, setTelemetryConsentState] = useState(true);
+    useEffect(() => {
+        getTelemetryConsentStatus().then(status => {
+            setTelemetryConsentState(status === 'granted');
+        });
+    }, []);
+    const handleToggleTelemetry = async () => {
+        const nextVal = !telemetryConsent;
+        setTelemetryConsentState(nextVal);
+        await setTelemetryConsent(nextVal);
+        if (nextVal) {
+            sendSessionTelemetryPing({ force: true });
+        }
+    };
     useEffect(() => {
         setStagedHeight(modalHeightPercent);
     }, [modalHeightPercent]);
@@ -1315,6 +1330,182 @@ const SettingsPanel = () => {
                     </View>)}
                 </View>
               </View>
+
+              {/* Section 4: Privacy & Diagnostics */}
+              <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
+                <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                  PRIVACY & ANONYMOUS DIAGNOSTICS
+                </Text>
+
+                <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                  <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+                marginRight: 10,
+            }}>
+                    <View style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                      <ShieldAlertIcon color={AppColors.purple} size={15}/>
+                    </View>
+                    <View style={{ flex: 1 }}>
+                      <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors.primaryBlack,
+            }}>
+                        Help Improve In-App Inspector
+                      </Text>
+                      <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors.grayText,
+                marginTop: 1,
+            }}>
+                        Share non-identifiable technical metrics (RN version, JS engine, device model). No user data or network payloads are captured.
+                      </Text>
+                    </View>
+                  </View>
+
+                  <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Anonymous Telemetry" accessibilityState={{ checked: telemetryConsent }} onPress={handleToggleTelemetry} style={{
+                width: 42,
+                height: 24,
+                borderRadius: 12,
+                backgroundColor: telemetryConsent
+                    ? AppColors.purple
+                    : AppColors.grayBorderSecondary,
+                padding: 2,
+                justifyContent: 'center',
+                alignItems: telemetryConsent ? 'flex-end' : 'flex-start',
+            }}>
+                    <View style={{
+                width: 20,
+                height: 20,
+                borderRadius: 10,
+                backgroundColor: AppColors.white,
+                shadowColor: AppColors.black,
+                shadowOpacity: 0.18,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+            }}/>
+                  </TouchableScale>
+                </View>
+              </View>
+
+              {/* Section 5: Notifications & Toasts */}
+              <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
+                <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                  NOTIFICATIONS & TOASTS
+                </Text>
+
+                <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                  <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+                marginRight: 10,
+            }}>
+                    <View style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                      <PackageIcon color={AppColors.purple} size={15}/>
+                    </View>
+                    <View style={{ flex: 1 }}>
+                      <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors.primaryBlack,
+            }}>
+                        NPM Update Toast
+                      </Text>
+                      <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors.grayText,
+                marginTop: 1,
+            }}>
+                        Show a floating toast banner with countdown progress when a newer release is published on npm.
+                      </Text>
+                    </View>
+                  </View>
+
+                  <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle NPM Update Toast" accessibilityState={{ checked: showUpdateToast }} onPress={() => setShowUpdateToast(prev => !prev)} style={{
+                width: 42,
+                height: 24,
+                borderRadius: 12,
+                backgroundColor: showUpdateToast
+                    ? AppColors.purple
+                    : AppColors.grayBorderSecondary,
+                padding: 2,
+                justifyContent: 'center',
+                alignItems: showUpdateToast ? 'flex-end' : 'flex-start',
+            }}>
+                    <View style={{
+                width: 20,
+                height: 20,
+                borderRadius: 10,
+                backgroundColor: AppColors.white,
+                shadowColor: AppColors.black,
+                shadowOpacity: 0.18,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+            }}/>
+                  </TouchableScale>
+                </View>
+              </View>
             </View>)}
           <View style={{ height: 48 }}/>
         </ScrollView>

package/dist/esm/components/Inspector/TelemetryConsentModal.js

@@ -1,33 +1,60 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, View, Text, TouchableOpacity, StyleSheet, Animated, } from 'react-native';
-import { AppColors } from '../../styles/AppColors';
-import { BrandCircleIcon } from '../BrandCircleIcon';
+import { Modal, View, Text, TouchableOpacity, StyleSheet, Animated, Platform, } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { BrandSquareIcon } from '../BrandSquareIcon';
 import { getTelemetryConsentStatus, setTelemetryConsent, sendSessionTelemetryPing, } from '../../helpers/telemetry';
+// ─── Inline Crisp SVG Icons ───────────────────────────────────────────────────
+const ShieldCheckSvg = ({ size = 15, color = '#7C3AED' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M9 12l2 2 4-4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const CheckSvg = ({ size = 14, color = '#FFFFFF' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M20 6L9 17l-5-5" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const CloseSvg = ({ size = 13, color = '#64748B' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
 export const TelemetryConsentModal = () => {
     const [visible, setVisible] = useState(false);
     const fadeAnim = useState(new Animated.Value(0))[0];
+    const scaleAnim = useState(new Animated.Value(0.92))[0];
     useEffect(() => {
         let isMounted = true;
         getTelemetryConsentStatus().then(status => {
             if (isMounted && status === 'undetermined') {
                 setVisible(true);
-                Animated.timing(fadeAnim, {
-                    toValue: 1,
-                    duration: 300,
-                    useNativeDriver: true,
-                }).start();
+                Animated.parallel([
+                    Animated.timing(fadeAnim, {
+                        toValue: 1,
+                        duration: 250,
+                        useNativeDriver: true,
+                    }),
+                    Animated.spring(scaleAnim, {
+                        toValue: 1,
+                        friction: 8,
+                        tension: 45,
+                        useNativeDriver: true,
+                    }),
+                ]).start();
             }
         });
         return () => {
             isMounted = false;
         };
-    }, [fadeAnim]);
+    }, [fadeAnim, scaleAnim]);
     const handleDecision = async (granted) => {
-        Animated.timing(fadeAnim, {
-            toValue: 0,
-            duration: 200,
-            useNativeDriver: true,
-        }).start(async () => {
+        Animated.parallel([
+            Animated.timing(fadeAnim, {
+                toValue: 0,
+                duration: 180,
+                useNativeDriver: true,
+            }),
+            Animated.timing(scaleAnim, {
+                toValue: 0.92,
+                duration: 180,
+                useNativeDriver: true,
+            }),
+        ]).start(async () => {
             setVisible(false);
             await setTelemetryConsent(granted);
             if (granted) {
@@ -40,37 +67,63 @@ export const TelemetryConsentModal = () => {
         return null;
     return (<Modal transparent visible={visible} animationType="none" statusBarTranslucent>
       <View style={styles.overlay}>
-        <Animated.View style={[styles.card, { opacity: fadeAnim }]}>
-          <View style={styles.headerRow}>
-            <View style={styles.iconWrapper}>
-              <BrandCircleIcon size={40}/>
+        <Animated.View style={[
+            styles.card,
+            {
+                opacity: fadeAnim,
+                transform: [{ scale: scaleAnim }],
+            },
+        ]}>
+          {/* Top-Right Dismiss Icon Button */}
+          <TouchableOpacity style={styles.topCloseButton} onPress={() => handleDecision(false)} hitSlop={10} activeOpacity={0.7}>
+            <CloseSvg size={13} color="#64748B"/>
+          </TouchableOpacity>
+
+          {/* Centered Enlarged Square Brand Icon Header */}
+          <View style={styles.headerSection}>
+            <View style={styles.iconHaloRing}>
+              <BrandSquareIcon size={54}/>
             </View>
-            <View style={styles.titleContainer}>
-              <Text style={styles.title}>Help Improve In-App Inspector</Text>
-              <Text style={styles.subtitle}>Anonymous Diagnostic Insights</Text>
+
+            <Text style={styles.title}>Help Improve In-App Inspector</Text>
+            <Text style={styles.subtitle}>Anonymous Diagnostic Insights</Text>
+
+            {/* Subheading instruction hint badge */}
+            <View style={styles.hintBadge}>
+              <Text style={styles.hintBadgeText}>
+                ⚙️ You can enable or disable this anytime in Settings
+              </Text>
             </View>
           </View>
 
+          {/* Description */}
           <Text style={styles.description}>
             To help us continually enhance tooling performance and compatibility,
             would you mind sharing anonymous diagnostics (such as React Native
-            version, JavaScript engine, and platform architecture)?
+            version, JavaScript engine, and device architecture)?
           </Text>
 
+          {/* Privacy Callout Box */}
           <View style={styles.privacyBadge}>
+            <View style={styles.privacyShieldWrapper}>
+              <ShieldCheckSvg size={15} color="#7C3AED"/>
+            </View>
             <Text style={styles.privacyText}>
-              🔒 <Text style={{ fontWeight: '700' }}>Privacy Guaranteed:</Text> We
-              only collect non-identifiable environment metrics. No personal
-              data, tokens, or network request payloads are ever collected.
+              <Text style={styles.privacyHighlight}>Privacy Guaranteed:</Text> We
+              strictly collect non-identifiable technical metrics. No user data,
+              passwords, tokens, or network payload bodies are ever captured.
             </Text>
           </View>
 
+          {/* Enhanced Action Buttons with Icons */}
           <View style={styles.buttonRow}>
             <TouchableOpacity style={styles.declineButton} onPress={() => handleDecision(false)} activeOpacity={0.7}>
+              <CloseSvg size={12} color="#64748B"/>
               <Text style={styles.declineText}>Not Now</Text>
             </TouchableOpacity>
 
-            <TouchableOpacity style={styles.allowButton} onPress={() => handleDecision(true)} activeOpacity={0.8}>
+            <TouchableOpacity style={styles.allowButton} onPress={() => handleDecision(true)} activeOpacity={0.85}>
+              <CheckSvg size={13} color="#FFFFFF"/>
               <Text style={styles.allowText}>Allow & Share</Text>
             </TouchableOpacity>
           </View>
@@ -78,98 +131,192 @@ export const TelemetryConsentModal = () => {
       </View>
     </Modal>);
 };
+const fontStack = Platform.select({
+    ios: {
+        fontFamily: 'System',
+    },
+    android: {
+        fontFamily: 'sans-serif',
+    },
+    default: {},
+});
 const styles = StyleSheet.create({
     overlay: {
         flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.65)',
+        backgroundColor: 'rgba(15, 23, 42, 0.56)',
         justifyContent: 'center',
         alignItems: 'center',
-        padding: 24,
+        paddingHorizontal: 20,
         zIndex: 999999,
     },
     card: {
         width: '100%',
-        maxWidth: 420,
-        backgroundColor: '#1E1F29',
-        borderRadius: 20,
-        padding: 22,
+        maxWidth: 356,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 24,
         borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.12)',
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 10 },
-        shadowOpacity: 0.5,
-        shadowRadius: 20,
+        borderColor: '#E2E8F0',
+        paddingHorizontal: 20,
+        paddingTop: 22,
+        paddingBottom: 20,
+        alignItems: 'center',
+        shadowColor: '#0F172A',
+        shadowOffset: { width: 0, height: 16 },
+        shadowOpacity: 0.22,
+        shadowRadius: 32,
         elevation: 24,
     },
-    headerRow: {
-        flexDirection: 'row',
+    topCloseButton: {
+        position: 'absolute',
+        top: 14,
+        right: 14,
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        backgroundColor: '#F8FAFC',
+        justifyContent: 'center',
         alignItems: 'center',
-        marginBottom: 14,
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
+        zIndex: 10,
     },
-    iconWrapper: {
-        marginRight: 14,
+    headerSection: {
+        alignItems: 'center',
+        width: '100%',
+        marginBottom: 4,
     },
-    titleContainer: {
-        flex: 1,
+    iconHaloRing: {
+        width: 66,
+        height: 66,
+        borderRadius: 20,
+        backgroundColor: '#FAF5FF',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1.5,
+        borderColor: '#F3E8FF',
+        marginBottom: 8,
+        shadowColor: '#7C3AED',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.16,
+        shadowRadius: 10,
+        elevation: 4,
     },
     title: {
         fontSize: 17,
-        fontWeight: '700',
-        color: '#FFFFFF',
-        letterSpacing: -0.2,
+        fontWeight: '800',
+        color: '#0F172A',
+        letterSpacing: -0.4,
+        textAlign: 'center',
+        lineHeight: 22,
+        marginBottom: 2,
+        ...fontStack,
     },
     subtitle: {
-        fontSize: 12,
-        color: AppColors.purple || '#9055FF',
+        fontSize: 11.5,
         fontWeight: '600',
-        marginTop: 2,
+        color: '#7C3AED',
+        textAlign: 'center',
+        letterSpacing: 0.2,
+        marginBottom: 6,
+        ...fontStack,
+    },
+    hintBadge: {
+        backgroundColor: '#EDE9FE80',
+        borderWidth: 1,
+        borderColor: '#DDD6FE',
+        borderRadius: 7,
+        paddingHorizontal: 8,
+        paddingVertical: 2.5,
+        marginBottom: 8,
+    },
+    hintBadgeText: {
+        fontSize: 10,
+        fontWeight: '600',
+        color: '#6D28D9',
+        textAlign: 'center',
+        ...fontStack,
     },
     description: {
-        fontSize: 13,
-        lineHeight: 19,
-        color: 'rgba(255, 255, 255, 0.75)',
-        marginBottom: 14,
+        fontSize: 12,
+        lineHeight: 17.5,
+        color: '#475569',
+        textAlign: 'center',
+        marginBottom: 12,
+        paddingHorizontal: 2,
+        ...fontStack,
     },
     privacyBadge: {
-        backgroundColor: 'rgba(144, 85, 255, 0.12)',
-        borderRadius: 10,
-        padding: 10,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        backgroundColor: '#F8FAFC',
+        borderRadius: 12,
+        paddingVertical: 8,
+        paddingHorizontal: 10,
         borderWidth: 1,
-        borderColor: 'rgba(144, 85, 255, 0.25)',
-        marginBottom: 20,
+        borderColor: '#E2E8F0',
+        marginBottom: 14,
+        width: '100%',
+    },
+    privacyShieldWrapper: {
+        marginRight: 7,
+        marginTop: 1,
     },
     privacyText: {
-        fontSize: 11,
-        lineHeight: 16,
-        color: '#D8C6FF',
+        flex: 1,
+        fontSize: 10.8,
+        lineHeight: 15,
+        color: '#475569',
+        ...fontStack,
+    },
+    privacyHighlight: {
+        fontWeight: '700',
+        color: '#1E293B',
     },
     buttonRow: {
         flexDirection: 'row',
-        justifyContent: 'flex-end',
+        justifyContent: 'space-between',
         alignItems: 'center',
-        gap: 12,
+        gap: 10,
+        width: '100%',
     },
     declineButton: {
-        paddingVertical: 10,
-        paddingHorizontal: 16,
-        borderRadius: 10,
-        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 5,
+        paddingVertical: 11,
+        borderRadius: 12,
+        backgroundColor: '#F1F5F9',
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
     },
     declineText: {
         fontSize: 13,
         fontWeight: '600',
-        color: 'rgba(255, 255, 255, 0.7)',
+        color: '#475569',
+        ...fontStack,
     },
     allowButton: {
-        paddingVertical: 10,
-        paddingHorizontal: 20,
-        borderRadius: 10,
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 5,
+        paddingVertical: 11,
+        borderRadius: 12,
         backgroundColor: '#7C3AED',
+        shadowColor: '#7C3AED',
+        shadowOffset: { width: 0, height: 3 },
+        shadowOpacity: 0.28,
+        shadowRadius: 6,
+        elevation: 4,
     },
     allowText: {
         fontSize: 13,
         fontWeight: '700',
         color: '#FFFFFF',
+        ...fontStack,
     },
 });
 export default TelemetryConsentModal;

package/dist/esm/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.0.2";
+export declare const LIB_VERSION = "2.0.4";

package/dist/esm/constants/version.js

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '2.0.2';
+export const LIB_VERSION = '2.0.4';

package/dist/esm/helpers/telemetry.js

@@ -13,8 +13,8 @@ import { LIB_VERSION } from '../constants';
 import { getNativeStorageItem, setNativeStorageItem, isNativeModuleAvailable, getNativeDeviceMetrics, } from '../native/NativeInspector';
 // ─── GA4 Measurement Protocol Configuration ──────────────────────────────────
 // Automatically replaced at build-time from .env by scripts/inject-telemetry.js
-export const GA4_MEASUREMENT_ID = 'G-3QGMQVZX5V';
-export const GA4_API_SECRET = 'C46RQZ3PTfmHDnLnvU3KIg';
+export const GA4_MEASUREMENT_ID = 'G-XXXXXXXXXX';
+export const GA4_API_SECRET = 'YOUR_GA4_API_SECRET';
 const GA4_ENDPOINT = 'https://www.google-analytics.com/mp/collect';
 const CLIENT_ID_KEY = 'telemetry_client_id';
 // Stable session ID created once per JavaScript runtime instance
@@ -236,9 +236,9 @@ export async function trackTelemetryEvent(eventName, params = {}, options) {
         return;
     // Don't send if credentials haven't been configured yet
     if (!GA4_MEASUREMENT_ID ||
-        GA4_MEASUREMENT_ID === 'G-3QGMQVZX5V' ||
+        GA4_MEASUREMENT_ID === 'G-XXXXXXXXXX' ||
         !GA4_API_SECRET ||
-        GA4_API_SECRET === 'C46RQZ3PTfmHDnLnvU3KIg') {
+        GA4_API_SECRET === 'YOUR_GA4_API_SECRET') {
         return;
     }
     try {