@oxyhq/services 5.18.2 → 5.18.4

package/src/ui/hooks/useAuth.ts

@@ -0,0 +1,159 @@
+/**
+ * Unified Auth Hook
+ *
+ * Provides a clean, standard interface for authentication across all platforms.
+ * This is the recommended way to access auth state in Oxy apps.
+ *
+ * Usage:
+ * ```tsx
+ * import { useAuth } from '@oxyhq/services';
+ *
+ * function MyComponent() {
+ *   const { user, isAuthenticated, isLoading, signIn, signOut } = useAuth();
+ *
+ *   if (isLoading) return <Loading />;
+ *   if (!isAuthenticated) return <SignInButton onClick={() => signIn()} />;
+ *   return <Welcome user={user} />;
+ * }
+ * ```
+ */
+
+import { useCallback } from 'react';
+import { useOxy } from '../context/OxyContext';
+import type { User } from '../../models/interfaces';
+
+export interface AuthState {
+  /** Current authenticated user, null if not authenticated */
+  user: User | null;
+
+  /** Whether user is authenticated */
+  isAuthenticated: boolean;
+
+  /** Whether auth state is being determined (initial load) */
+  isLoading: boolean;
+
+  /** Whether the auth token is ready for API calls */
+  isReady: boolean;
+
+  /** Current error message, if any */
+  error: string | null;
+}
+
+export interface AuthActions {
+  /**
+   * Sign in with cryptographic identity
+   * On native: Uses device keychain
+   * On web: Opens auth popup/redirect
+   */
+  signIn: (publicKey?: string) => Promise<User>;
+
+  /**
+   * Sign out current session
+   */
+  signOut: () => Promise<void>;
+
+  /**
+   * Sign out all sessions across all devices
+   */
+  signOutAll: () => Promise<void>;
+
+  /**
+   * Refresh auth state (re-check session validity)
+   */
+  refresh: () => Promise<void>;
+}
+
+export interface UseAuthReturn extends AuthState, AuthActions {
+  /** Access to full OxyServices instance for advanced usage */
+  oxyServices: ReturnType<typeof useOxy>['oxyServices'];
+}
+
+/**
+ * Unified auth hook for all Oxy apps
+ *
+ * Features:
+ * - Zero config: Just wrap with OxyProvider and use
+ * - Cross-platform: Same API on native and web
+ * - Auto SSO: Web apps automatically check for cross-domain sessions
+ * - Type-safe: Full TypeScript support
+ */
+export function useAuth(): UseAuthReturn {
+  const {
+    user,
+    isAuthenticated,
+    isLoading,
+    isTokenReady,
+    error,
+    signIn: oxySignIn,
+    logout,
+    logoutAll,
+    refreshSessions,
+    oxyServices,
+    hasIdentity,
+    getPublicKey,
+    showBottomSheet,
+  } = useOxy();
+
+  const signIn = useCallback(async (publicKey?: string): Promise<User> => {
+    // If public key provided, use it directly
+    if (publicKey) {
+      return oxySignIn(publicKey);
+    }
+
+    // Try to get existing identity
+    const hasExisting = await hasIdentity();
+
+    if (hasExisting) {
+      const existingKey = await getPublicKey();
+      if (existingKey) {
+        return oxySignIn(existingKey);
+      }
+    }
+
+    // No identity - show auth UI
+    // On native: shows bottom sheet for identity creation
+    // On web: could trigger popup auth
+    showBottomSheet?.('OxyAuth');
+
+    // Return a promise that resolves when auth completes
+    // This is a simplified version - real implementation would
+    // wait for the auth flow to complete
+    return new Promise((resolve, reject) => {
+      // For now, just reject - the bottom sheet handles the flow
+      reject(new Error('Please complete sign-in in the auth sheet'));
+    });
+  }, [oxySignIn, hasIdentity, getPublicKey, showBottomSheet]);
+
+  const signOut = useCallback(async (): Promise<void> => {
+    await logout();
+  }, [logout]);
+
+  const signOutAll = useCallback(async (): Promise<void> => {
+    await logoutAll();
+  }, [logoutAll]);
+
+  const refresh = useCallback(async (): Promise<void> => {
+    await refreshSessions();
+  }, [refreshSessions]);
+
+  return {
+    // State
+    user,
+    isAuthenticated,
+    isLoading,
+    isReady: isTokenReady,
+    error,
+
+    // Actions
+    signIn,
+    signOut,
+    signOutAll,
+    refresh,
+
+    // Advanced
+    oxyServices,
+  };
+}
+
+// Re-export useOxy for backward compatibility and advanced usage
+export { useOxy } from '../context/OxyContext';

package/src/ui/hooks/useSettingToggle.ts

@@ -91,7 +91,7 @@ export function useSettingToggle(options: UseSettingToggleOptions): UseSettingTo
  * Hook for managing multiple toggle settings at once.
  * Useful when you have several related boolean settings.
  */
-export function useSettingToggles<T extends Record<string, boolean>>(options: {
+export function useSettingToggles<T extends { [K in keyof T]: boolean }>(options: {
     initialValues: T;
     onSave: (key: keyof T, value: boolean) => Promise<void>;
     errorMessage?: string | ((key: keyof T) => string);
@@ -100,7 +100,7 @@ export function useSettingToggles<T extends Record<string, boolean>>(options: {
     values: T;
     savingKeys: Set<keyof T>;
     toggle: (key: keyof T) => Promise<void>;
-    setValues: (values: T) => void;
+    setValues: (values: Partial<T>) => void;
 } {
     const { initialValues, onSave, errorMessage = 'Failed to save setting', revertOnError = true } = options;
 
@@ -141,7 +141,11 @@ export function useSettingToggles<T extends Record<string, boolean>>(options: {
         }
     }, [values, onSave, errorMessage, revertOnError]);
 
-    return { values, savingKeys, toggle, setValues };
+    const setValuesExternal = useCallback((newValues: Partial<T>) => {
+        setValues(prev => ({ ...prev, ...newValues }));
+    }, []);
+
+    return { values, savingKeys, toggle, setValues: setValuesExternal };
 }
 
 export default useSettingToggle;

package/src/ui/hooks/useWebSSO.ts

@@ -0,0 +1,93 @@
+/**
+ * Web SSO Hook
+ *
+ * Automatically handles cross-domain SSO for web apps.
+ * Uses the OxyServices.silentSignIn() method which loads a hidden iframe
+ * to check for existing session at auth.oxy.so.
+ *
+ * This is called automatically by OxyContext on web platforms.
+ */
+
+import { useEffect, useRef, useCallback } from 'react';
+import type { OxyServices } from '../../core/OxyServices';
+import type { SessionLoginResponse } from '../../models/session';
+
+interface UseWebSSOOptions {
+  oxyServices: OxyServices;
+  onSessionFound: (session: SessionLoginResponse) => Promise<void>;
+  onError?: (error: Error) => void;
+  enabled?: boolean;
+}
+
+interface UseWebSSOResult {
+  checkSSO: () => Promise<SessionLoginResponse | null>;
+  isChecking: boolean;
+}
+
+/**
+ * Check if we're running in a web browser environment (not React Native)
+ */
+function isWebBrowser(): boolean {
+  // Check for browser globals and that we have a real DOM (React Native has window but not documentElement)
+  return typeof window !== 'undefined' &&
+         typeof document !== 'undefined' &&
+         typeof document.documentElement !== 'undefined';
+}
+
+/**
+ * Hook for automatic web SSO
+ *
+ * Automatically checks for existing cross-domain session on mount.
+ * Only runs on web platforms. Uses OxyServices.silentSignIn() internally.
+ */
+export function useWebSSO({
+  oxyServices,
+  onSessionFound,
+  onError,
+  enabled = true,
+}: UseWebSSOOptions): UseWebSSOResult {
+  const isCheckingRef = useRef(false);
+  const hasCheckedRef = useRef(false);
+
+  const checkSSO = useCallback(async (): Promise<SessionLoginResponse | null> => {
+    if (!isWebBrowser() || isCheckingRef.current) {
+      return null;
+    }
+
+    isCheckingRef.current = true;
+
+    try {
+      // Use the existing silentSignIn method from OxyServices
+      // which handles iframe creation, postMessage, and token storage
+      const session = await (oxyServices as any).silentSignIn?.();
+
+      if (session) {
+        await onSessionFound(session);
+      }
+
+      return session;
+    } catch (error) {
+      onError?.(error instanceof Error ? error : new Error(String(error)));
+      return null;
+    } finally {
+      isCheckingRef.current = false;
+    }
+  }, [oxyServices, onSessionFound, onError]);
+
+  // Auto-check SSO on mount (web only)
+  useEffect(() => {
+    if (!enabled || !isWebBrowser() || hasCheckedRef.current) {
+      return;
+    }
+
+    hasCheckedRef.current = true;
+    checkSSO();
+  }, [enabled, checkSSO]);
+
+  return {
+    checkSSO,
+    isChecking: isCheckingRef.current,
+  };
+}
+
+export { isWebBrowser };

package/src/ui/index.ts

@@ -1,13 +1,25 @@
 /**
  * UI Component exports - Frontend Only (with backend-safe fallbacks)
- * 
+ *
  * This module exports all React/React Native UI components and hooks.
  * In backend, all exports are no-ops or empty objects.
+ *
+ * NOTE: This entry point uses runtime detection which prevents tree-shaking.
+ * For better bundle optimization, use:
+ * - '@oxyhq/services/ui/client' for client bundles (tree-shakeable)
+ * - '@oxyhq/services/ui/server' for SSR environments (all noops)
+ *
+ * @example
+ * // Client bundle (tree-shakeable)
+ * import { OxyProvider, useOxy } from '@oxyhq/services/ui/client';
+ *
+ * // SSR (noops)
+ * import { OxyProvider, useOxy } from '@oxyhq/services/ui/server';
  */
 import isFrontend from './isFrontend';
 
 // UI exports
-let OxyProvider, OxySignInButton, OxyLogo, Avatar, FollowButton, OxyPayButton, FontLoader, setupFonts, OxyIcon, useOxy, useFollow, ProfileScreen, useAuthStore, useAccountStore, fontFamilies, fontStyles, toast, useStorage;
+let OxyProvider, OxySignInButton, OxyLogo, Avatar, FollowButton, OxyPayButton, FontLoader, setupFonts, OxyIcon, useOxy, useAuth, useFollow, ProfileScreen, useAuthStore, useAccountStore, fontFamilies, fontStyles, toast, useStorage;
 
 if (isFrontend) {
   OxyProvider = require('./components/OxyProvider').default;
@@ -20,6 +32,7 @@ if (isFrontend) {
   setupFonts = require('./components/FontLoader').setupFonts;
   OxyIcon = require('./components/icon').OxyIcon;
   useOxy = require('./context/OxyContext').useOxy;
+  useAuth = require('./hooks/useAuth').useAuth;
   useFollow = require('./hooks').useFollow;
   ProfileScreen = require('./screens/ProfileScreen').default;
   useAuthStore = require('./stores/authStore').useAuthStore;
@@ -44,6 +57,7 @@ if (isFrontend) {
   setupFonts = () => {};
   OxyIcon = noopComponent;
   useOxy = noopHook;
+  useAuth = noopHook;
   useFollow = noopHook;
   ProfileScreen = noopComponent;
   useAuthStore = noopHook;
@@ -65,6 +79,7 @@ export {
   setupFonts,
   OxyIcon,
   useOxy,
+  useAuth,
   useFollow,
   ProfileScreen,
   useAuthStore,

package/src/ui/screens/PrivacySettingsScreen.tsx

@@ -4,7 +4,6 @@ import {
     Text,
     StyleSheet,
     ScrollView,
-    ActivityIndicator,
     TouchableOpacity,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
@@ -12,6 +11,7 @@ import { toast } from '../../lib/sonner';
 import { Header, Section, Avatar, SettingRow, LoadingState, EmptyState, GroupedSection } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useSettingToggles } from '../hooks/useSettingToggle';
 import { normalizeTheme } from '../utils/themeUtils';
 import type { BlockedUser, RestrictedUser } from '../../models/interfaces';
 import { useOxy } from '../context/OxyContext';
@@ -38,42 +38,53 @@ interface PrivacySettings {
     muteKeywords: boolean;
 }
 
+const DEFAULT_PRIVACY_SETTINGS: PrivacySettings = {
+    isPrivateAccount: false,
+    hideOnlineStatus: false,
+    hideLastSeen: false,
+    profileVisibility: true,
+    loginAlerts: true,
+    blockScreenshots: false,
+    login: true,
+    biometricLogin: false,
+    showActivity: true,
+    allowTagging: true,
+    allowMentions: true,
+    hideReadReceipts: false,
+    allowDirectMessages: true,
+    dataSharing: true,
+    locationSharing: false,
+    analyticsSharing: true,
+    sensitiveContent: false,
+    autoFilter: true,
+    muteKeywords: false,
+};
+
 const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
     goBack,
 }) => {
-    // Use useOxy() hook for OxyContext values
     const { oxyServices, user } = useOxy();
     const { t } = useI18n();
-    const [settings, setSettings] = useState<PrivacySettings>({
-        isPrivateAccount: false,
-        hideOnlineStatus: false,
-        hideLastSeen: false,
-        profileVisibility: true,
-        loginAlerts: true,
-        blockScreenshots: false,
-        login: true,
-        biometricLogin: false,
-        showActivity: true,
-        allowTagging: true,
-        allowMentions: true,
-        hideReadReceipts: false,
-        allowDirectMessages: true,
-        dataSharing: true,
-        locationSharing: false,
-        analyticsSharing: true,
-        sensitiveContent: false,
-        autoFilter: true,
-        muteKeywords: false,
-    });
     const [isLoading, setIsLoading] = useState(true);
-    const [isSaving, setIsSaving] = useState(false);
     const [blockedUsers, setBlockedUsers] = useState<BlockedUser[]>([]);
     const [restrictedUsers, setRestrictedUsers] = useState<RestrictedUser[]>([]);
     const [isLoadingUsers, setIsLoadingUsers] = useState(false);
 
-    // Load settings and users
+    // Use the existing useSettingToggles hook for toggle management
+    const { values: settings, toggle, savingKeys, setValues } = useSettingToggles<PrivacySettings>({
+        initialValues: DEFAULT_PRIVACY_SETTINGS,
+        onSave: async (key, value) => {
+            if (!user?.id || !oxyServices) return;
+            await oxyServices.updatePrivacySettings({ [key]: value }, user.id);
+        },
+        errorMessage: t('privacySettings.updateError') || 'Failed to update privacy setting',
+    });
+
+    const isSaving = savingKeys.size > 0;
+
+    // Load settings
     useEffect(() => {
         const loadSettings = async () => {
             try {
@@ -81,7 +92,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                 if (user?.id && oxyServices) {
                     const privacySettings = await oxyServices.getPrivacySettings(user.id);
                     if (privacySettings) {
-                        setSettings(privacySettings);
+                        setValues(privacySettings);
                     }
                 }
             } catch (error) {
@@ -93,7 +104,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
         };
 
         loadSettings();
-    }, [user?.id, oxyServices, t]);
+    }, [user?.id, oxyServices, t, setValues]);
 
     // Load blocked and restricted users
     useEffect(() => {
@@ -117,26 +128,6 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
         loadUsers();
     }, [oxyServices]);
 
-    const updateSetting = useCallback(async (key: keyof PrivacySettings, value: boolean) => {
-        try {
-            setIsSaving(true);
-            const newSettings = { ...settings, [key]: value };
-            setSettings(newSettings);
-            
-            if (user?.id && oxyServices) {
-                await oxyServices.updatePrivacySettings({ [key]: value }, user.id);
-                toast.success(t('privacySettings.updated') || 'Privacy settings updated');
-            }
-        } catch (error) {
-            console.error(`Failed to update ${key}:`, error);
-            toast.error(t('privacySettings.updateError') || 'Failed to update privacy setting');
-            // Revert on error
-            setSettings(settings);
-        } finally {
-            setIsSaving(false);
-        }
-    }, [settings, user?.id, oxyServices, t]);
-
     const handleUnblock = useCallback(async (userId: string) => {
         if (!oxyServices) return;
         try {
@@ -295,7 +286,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.isPrivateAccount') || 'Private Account'}
                         description={t('privacySettings.isPrivateAccountDesc') || 'Only approved followers can see your posts'}
                         value={settings.isPrivateAccount}
-                        onValueChange={(value) => updateSetting('isPrivateAccount', value)}
+                        onValueChange={() => toggle('isPrivateAccount')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -305,7 +296,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.profileVisibility') || 'Profile Visibility'}
                         description={t('privacySettings.profileVisibilityDesc') || 'Control who can view your profile'}
                         value={settings.profileVisibility}
-                        onValueChange={(value) => updateSetting('profileVisibility', value)}
+                        onValueChange={() => toggle('profileVisibility')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -315,7 +306,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.hideOnlineStatus') || 'Hide Online Status'}
                         description={t('privacySettings.hideOnlineStatusDesc') || 'Don\'t show when you\'re online'}
                         value={settings.hideOnlineStatus}
-                        onValueChange={(value) => updateSetting('hideOnlineStatus', value)}
+                        onValueChange={() => toggle('hideOnlineStatus')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -325,7 +316,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.hideLastSeen') || 'Hide Last Seen'}
                         description={t('privacySettings.hideLastSeenDesc') || 'Don\'t show when you were last active'}
                         value={settings.hideLastSeen}
-                        onValueChange={(value) => updateSetting('hideLastSeen', value)}
+                        onValueChange={() => toggle('hideLastSeen')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -339,7 +330,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.allowTagging') || 'Allow Tagging'}
                         description={t('privacySettings.allowTaggingDesc') || 'Let others tag you in posts'}
                         value={settings.allowTagging}
-                        onValueChange={(value) => updateSetting('allowTagging', value)}
+                        onValueChange={() => toggle('allowTagging')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -349,7 +340,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.allowMentions') || 'Allow Mentions'}
                         description={t('privacySettings.allowMentionsDesc') || 'Let others mention you'}
                         value={settings.allowMentions}
-                        onValueChange={(value) => updateSetting('allowMentions', value)}
+                        onValueChange={() => toggle('allowMentions')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -359,7 +350,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.allowDirectMessages') || 'Allow Direct Messages'}
                         description={t('privacySettings.allowDirectMessagesDesc') || 'Let others send you direct messages'}
                         value={settings.allowDirectMessages}
-                        onValueChange={(value) => updateSetting('allowDirectMessages', value)}
+                        onValueChange={() => toggle('allowDirectMessages')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -369,7 +360,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.hideReadReceipts') || 'Hide Read Receipts'}
                         description={t('privacySettings.hideReadReceiptsDesc') || 'Don\'t show read receipts in messages'}
                         value={settings.hideReadReceipts}
-                        onValueChange={(value) => updateSetting('hideReadReceipts', value)}
+                        onValueChange={() => toggle('hideReadReceipts')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -383,7 +374,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.showActivity') || 'Show Activity Status'}
                         description={t('privacySettings.showActivityDesc') || 'Display your activity on your profile'}
                         value={settings.showActivity}
-                        onValueChange={(value) => updateSetting('showActivity', value)}
+                        onValueChange={() => toggle('showActivity')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -393,7 +384,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.dataSharing') || 'Data Sharing'}
                         description={t('privacySettings.dataSharingDesc') || 'Allow sharing data for personalization'}
                         value={settings.dataSharing}
-                        onValueChange={(value) => updateSetting('dataSharing', value)}
+                        onValueChange={() => toggle('dataSharing')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -403,7 +394,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.locationSharing') || 'Location Sharing'}
                         description={t('privacySettings.locationSharingDesc') || 'Share your location'}
                         value={settings.locationSharing}
-                        onValueChange={(value) => updateSetting('locationSharing', value)}
+                        onValueChange={() => toggle('locationSharing')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -413,7 +404,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.analyticsSharing') || 'Analytics Sharing'}
                         description={t('privacySettings.analyticsSharingDesc') || 'Allow analytics data collection'}
                         value={settings.analyticsSharing}
-                        onValueChange={(value) => updateSetting('analyticsSharing', value)}
+                        onValueChange={() => toggle('analyticsSharing')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -427,7 +418,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.sensitiveContent') || 'Show Sensitive Content'}
                         description={t('privacySettings.sensitiveContentDesc') || 'Allow sensitive or explicit content'}
                         value={settings.sensitiveContent}
-                        onValueChange={(value) => updateSetting('sensitiveContent', value)}
+                        onValueChange={() => toggle('sensitiveContent')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -437,7 +428,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.autoFilter') || 'Auto Filter'}
                         description={t('privacySettings.autoFilterDesc') || 'Automatically filter inappropriate content'}
                         value={settings.autoFilter}
-                        onValueChange={(value) => updateSetting('autoFilter', value)}
+                        onValueChange={() => toggle('autoFilter')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -447,7 +438,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.muteKeywords') || 'Mute Keywords'}
                         description={t('privacySettings.muteKeywordsDesc') || 'Hide posts containing muted keywords'}
                         value={settings.muteKeywords}
-                        onValueChange={(value) => updateSetting('muteKeywords', value)}
+                        onValueChange={() => toggle('muteKeywords')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}
@@ -457,7 +448,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         title={t('privacySettings.blockScreenshots') || 'Block Screenshots'}
                         description={t('privacySettings.blockScreenshotsDesc') || 'Prevent screenshots of your content'}
                         value={settings.blockScreenshots}
-                        onValueChange={(value) => updateSetting('blockScreenshots', value)}
+                        onValueChange={() => toggle('blockScreenshots')}
                         disabled={isSaving}
                         textColor={themeStyles.textColor}
                         mutedTextColor={themeStyles.mutedTextColor}