@oxyhq/services 5.4.4 → 5.4.6

package/src/ui/hooks/useFollow.ts

@@ -0,0 +1,193 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useCallback, useMemo } from 'react';
+import { toggleFollowUser, setFollowingStatus, clearFollowError, fetchFollowStatus } from '../store';
+import type { RootState } from '../store';
+import { useOxy } from '../context/OxyContext';
+
+// Memoized selector to prevent unnecessary re-renders
+const createFollowSelector = (userId: string) => (state: RootState) => ({
+  isFollowing: state.follow?.followingUsers?.[userId] ?? false,
+  isLoading: state.follow?.loadingUsers?.[userId] ?? false,
+  error: state.follow?.errors?.[userId] ?? null,
+});
+
+// Memoized selector for multiple users
+const createMultipleFollowSelector = (userIds: string[]) => (state: RootState) => {
+  const followData: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }> = {};
+  const followState = state.follow;
+  
+  // Defensive check for follow state
+  if (!followState) {
+    // Return default values if follow state is not initialized
+    for (const userId of userIds) {
+      followData[userId] = {
+        isFollowing: false,
+        isLoading: false,
+        error: null,
+      };
+    }
+    
+    return {
+      followData,
+      isAnyLoading: false,
+      hasAnyError: false,
+      allFollowing: false,
+      allNotFollowing: true,
+    };
+  }
+  
+  for (const userId of userIds) {
+    followData[userId] = {
+      isFollowing: followState.followingUsers?.[userId] ?? false,
+      isLoading: followState.loadingUsers?.[userId] ?? false,
+      error: followState.errors?.[userId] ?? null,
+    };
+  }
+  
+  return {
+    followData,
+    isAnyLoading: userIds.some(uid => followState.loadingUsers?.[uid]),
+    hasAnyError: userIds.some(uid => followState.errors?.[uid]),
+    allFollowing: userIds.every(uid => followState.followingUsers?.[uid]),
+    allNotFollowing: userIds.every(uid => !followState.followingUsers?.[uid]),
+  };
+};
+
+/**
+ * Custom hook for managing follow/unfollow functionality
+ * Optimized to prevent unnecessary re-renders
+ * Can handle both single user and multiple users
+ */
+export const useFollow = (userId?: string | string[]) => {
+  const dispatch = useDispatch();
+  const { oxyServices } = useOxy();
+  
+  // Memoize user IDs to prevent recreation on every render
+  const userIds = useMemo(() => {
+    return Array.isArray(userId) ? userId : userId ? [userId] : [];
+  }, [userId]);
+  
+  const isSingleUser = typeof userId === 'string';
+  
+  // Memoize selectors to prevent recreation
+  const singleUserSelector = useMemo(() => {
+    return isSingleUser && userId ? createFollowSelector(userId) : null;
+  }, [isSingleUser, userId]);
+  
+  const multipleUserSelector = useMemo(() => {
+    return !isSingleUser ? createMultipleFollowSelector(userIds) : null;
+  }, [isSingleUser, userIds]);
+  
+  // Use appropriate selector based on mode
+  const singleUserData = useSelector(singleUserSelector || (() => ({ isFollowing: false, isLoading: false, error: null })));
+  const multipleUserData = useSelector(multipleUserSelector || (() => ({ 
+    followData: {}, 
+    isAnyLoading: false, 
+    hasAnyError: false, 
+    allFollowing: false, 
+    allNotFollowing: true 
+  })));
+
+  // Memoized callbacks to prevent recreation on every render
+  const toggleFollow = useCallback(async () => {
+    if (!isSingleUser || !userId) throw new Error('toggleFollow is only available for single user mode');
+    
+    try {
+      const result = await dispatch(toggleFollowUser({
+        userId,
+        oxyServices,
+        isCurrentlyFollowing: singleUserData.isFollowing
+      })).unwrap();
+      return result;
+    } catch (error) {
+      throw error;
+    }
+  }, [dispatch, userId, oxyServices, singleUserData.isFollowing, isSingleUser]);
+
+  const setFollowStatus = useCallback((following: boolean) => {
+    if (!isSingleUser || !userId) throw new Error('setFollowStatus is only available for single user mode');
+    dispatch(setFollowingStatus({ userId, isFollowing: following }));
+  }, [dispatch, userId, isSingleUser]);
+
+  const fetchStatus = useCallback(async () => {
+    if (!isSingleUser || !userId) throw new Error('fetchStatus is only available for single user mode');
+    
+    try {
+      await dispatch(fetchFollowStatus({ userId, oxyServices })).unwrap();
+    } catch (error) {
+      console.warn(`Failed to fetch follow status for user ${userId}:`, error);
+    }
+  }, [dispatch, userId, oxyServices, isSingleUser]);
+
+  const clearError = useCallback(() => {
+    if (!isSingleUser || !userId) throw new Error('clearError is only available for single user mode');
+    dispatch(clearFollowError(userId));
+  }, [dispatch, userId, isSingleUser]);
+
+  // Multiple user callbacks
+  const toggleFollowForUser = useCallback(async (targetUserId: string) => {
+    const currentState = multipleUserData.followData[targetUserId]?.isFollowing ?? false;
+    try {
+      const result = await dispatch(toggleFollowUser({
+        userId: targetUserId,
+        oxyServices,
+        isCurrentlyFollowing: currentState
+      })).unwrap();
+      return result;
+    } catch (error) {
+      throw error;
+    }
+  }, [dispatch, oxyServices, multipleUserData.followData]);
+
+  const setFollowStatusForUser = useCallback((targetUserId: string, following: boolean) => {
+    dispatch(setFollowingStatus({ userId: targetUserId, isFollowing: following }));
+  }, [dispatch]);
+
+  const fetchStatusForUser = useCallback(async (targetUserId: string) => {
+    try {
+      await dispatch(fetchFollowStatus({ userId: targetUserId, oxyServices })).unwrap();
+    } catch (error) {
+      console.warn(`Failed to fetch follow status for user ${targetUserId}:`, error);
+    }
+  }, [dispatch, oxyServices]);
+
+  const fetchAllStatuses = useCallback(async () => {
+    const promises = userIds.map(uid => 
+      dispatch(fetchFollowStatus({ userId: uid, oxyServices })).unwrap().catch((error: any) => {
+        console.warn(`Failed to fetch follow status for user ${uid}:`, error);
+      })
+    );
+    await Promise.all(promises);
+  }, [dispatch, userIds, oxyServices]);
+
+  const clearErrorForUser = useCallback((targetUserId: string) => {
+    dispatch(clearFollowError(targetUserId));
+  }, [dispatch]);
+
+  // Return appropriate interface based on mode
+  if (isSingleUser && userId) {
+    return {
+      isFollowing: singleUserData.isFollowing,
+      isLoading: singleUserData.isLoading,
+      error: singleUserData.error,
+      toggleFollow,
+      setFollowStatus,
+      fetchStatus,
+      clearError,
+    };
+  }
+  
+  return {
+    followData: multipleUserData.followData,
+    toggleFollowForUser,
+    setFollowStatusForUser,
+    fetchStatusForUser,
+    fetchAllStatuses,
+    clearErrorForUser,
+    // Helper methods
+    isAnyLoading: multipleUserData.isAnyLoading,
+    hasAnyError: multipleUserData.hasAnyError,
+    allFollowing: multipleUserData.allFollowing,
+    allNotFollowing: multipleUserData.allNotFollowing,
+  };
+}; 

package/src/ui/index.ts

@@ -30,3 +30,12 @@ export { fontFamilies, fontStyles } from './styles/fonts';
 
 // Export types for navigation (internal use)
 export * from './navigation/types';
+
+// Hooks
+export { useFollow } from './hooks';
+
+// Screens
+export { default as ProfileScreen } from './screens/ProfileScreen';
+
+// Navigation
+export { default as OxyRouter } from './navigation/OxyRouter';

package/src/ui/screens/AccountCenterScreen.tsx

@@ -15,12 +15,12 @@ import { packageInfo } from '../../constants/version';
 import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
 import { fontFamilies } from '../styles/fonts';
-import { 
-    ProfileCard, 
-    Section, 
-    QuickActions, 
-    GroupedSection, 
-    GroupedItem 
+import {
+    ProfileCard,
+    Section,
+    QuickActions,
+    GroupedSection,
+    GroupedItem
 } from '../components';
 
 const AccountCenterScreen: React.FC<BaseScreenProps> = ({
@@ -28,7 +28,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
 }) => {
-    const { user, logout, isLoading, sessions } = useOxy();
+    const { user, logout, isLoading, sessions, isAuthenticated } = useOxy();
 
     const isDarkTheme = theme === 'dark';
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
@@ -69,7 +69,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
         );
     };
 
-    if (!user) {
+    if (!isAuthenticated) {
         return (
             <View style={[styles.container, { backgroundColor }]}>
                 <Text style={[styles.message, { color: textColor }]}>Not signed in</Text>
@@ -88,13 +88,15 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     return (
         <View style={[styles.container, { backgroundColor }]}>
             {/* Header with user profile */}
-            <ProfileCard
-                user={user}
-                theme={theme}
-                onEditPress={() => navigate('AccountSettings', { activeTab: 'profile' })}
-                onClosePress={onClose}
-                showCloseButton={!!onClose}
-            />
+            {user && (
+                <ProfileCard
+                    user={user}
+                    theme={theme}
+                    onEditPress={() => navigate('AccountSettings', { activeTab: 'profile' })}
+                    onClosePress={onClose}
+                    showCloseButton={!!onClose}
+                />
+            )}
 
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
                 {/* Quick Actions */}

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -34,7 +34,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
 }) => {
-    const { user, logout, isLoading, sessions, activeSessionId, oxyServices } = useOxy();
+    const { user, logout, isLoading, sessions, activeSessionId, oxyServices, isAuthenticated } = useOxy();
     const [showMoreAccounts, setShowMoreAccounts] = useState(false);
     const [additionalAccountsData, setAdditionalAccountsData] = useState<any[]>([]);
     const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
@@ -55,8 +55,8 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     }, [theme]);
 
     // Memoize additional accounts filtering to prevent recalculation on every render
-    const additionalAccounts = useMemo(() => 
-        sessions.filter(session => 
+    const additionalAccounts = useMemo(() =>
+        sessions.filter(session =>
             session.sessionId !== activeSessionId && session.userId !== user?.id
         ), [sessions, activeSessionId, user?.id]
     );
@@ -170,7 +170,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         );
     }, [handleLogout]);
 
-    if (!user) {
+    if (!isAuthenticated) {
         return (
             <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
                 <Text style={[styles.message, { color: themeStyles.textColor }]}>Not signed in</Text>
@@ -202,7 +202,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* User Profile Section */}
                 <View style={styles.section}>
                     <Text style={styles.sectionTitle}>Profile</Text>
-                    
+
                     <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}>
                         <View style={styles.userIcon}>
                             <Avatar
@@ -215,9 +215,9 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         <View style={styles.settingInfo}>
                             <View>
                                 <Text style={styles.settingLabel}>
-                                    {typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username}
+                                    {user ? (typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username) : 'Loading...'}
                                 </Text>
-                                <Text style={styles.settingDescription}>{user.email || user.username}</Text>
+                                <Text style={styles.settingDescription}>{user ? (user.email || user.username) : 'Loading...'}</Text>
                             </View>
                         </View>
                         <TouchableOpacity
@@ -232,8 +232,8 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Account Settings */}
                 <View style={styles.section}>
                     <Text style={styles.sectionTitle}>Account Settings</Text>
-                    
-                    <TouchableOpacity 
+
+                    <TouchableOpacity
                         style={[styles.settingItem, styles.firstSettingItem]}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'profile' })}
                     >
@@ -247,7 +247,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                     </TouchableOpacity>
 
-                    <TouchableOpacity 
+                    <TouchableOpacity
                         style={styles.settingItem}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'password' })}
                     >
@@ -261,7 +261,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                     </TouchableOpacity>
 
-                    <TouchableOpacity 
+                    <TouchableOpacity
                         style={styles.settingItem}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'notifications' })}
                     >
@@ -275,7 +275,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                     </TouchableOpacity>
 
-                    <TouchableOpacity 
+                    <TouchableOpacity
                         style={[styles.settingItem]}
                         onPress={() => navigate?.('PremiumSubscription')}
                     >
@@ -283,14 +283,14 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             <OxyIcon name="star" size={20} color="#FFD700" style={styles.settingIcon} />
                             <View>
                                 <Text style={styles.settingLabel}>Oxy+ Subscriptions</Text>
-                                <Text style={styles.settingDescription}>{user.isPremium ? 'Manage your premium plan' : 'Upgrade to premium features'}</Text>
+                                <Text style={styles.settingDescription}>{user?.isPremium ? 'Manage your premium plan' : 'Upgrade to premium features'}</Text>
                             </View>
                         </View>
                         <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                     </TouchableOpacity>
 
-                    {user.isPremium && (
-                        <TouchableOpacity 
+                    {user?.isPremium && (
+                        <TouchableOpacity
                             style={[styles.settingItem, styles.lastSettingItem]}
                             onPress={() => navigate?.('BillingManagement')}
                         >
@@ -310,7 +310,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {showMoreAccounts && (
                     <View style={styles.section}>
                         <Text style={styles.sectionTitle}>Additional Accounts{additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}</Text>
-                        
+
                         {loadingAdditionalAccounts ? (
                             <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}>
                                 <View style={styles.loadingContainer}>
@@ -324,7 +324,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                     <TouchableOpacity
                                         key={account.id}
                                         style={[
-                                            styles.settingItem, 
+                                            styles.settingItem,
                                             index === 0 && styles.firstSettingItem,
                                             index === additionalAccountsData.length - 1 && styles.lastSettingItem
                                         ]}
@@ -348,7 +348,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                         <View style={styles.settingInfo}>
                                             <View>
                                                 <Text style={styles.settingLabel}>
-                                                    {typeof account.name === 'object' 
+                                                    {typeof account.name === 'object'
                                                         ? account.name?.full || account.name?.first || account.username
                                                         : account.name || account.username
                                                     }
@@ -378,7 +378,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {showMoreAccounts && (
                     <View style={styles.section}>
                         <Text style={styles.sectionTitle}>Account Management</Text>
-                        
+
                         <TouchableOpacity
                             style={[styles.settingItem, styles.firstSettingItem]}
                             onPress={handleAddAccount}
@@ -412,7 +412,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Quick Actions */}
                 <View style={styles.section}>
                     <Text style={styles.sectionTitle}>Quick Actions</Text>
-                    
+
                     <TouchableOpacity
                         style={[styles.settingItem, styles.firstSettingItem]}
                         onPress={() => setShowMoreAccounts(!showMoreAccounts)}
@@ -424,9 +424,9 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                     {showMoreAccounts ? 'Hide' : 'Show'} Account Switcher
                                 </Text>
                                 <Text style={styles.settingDescription}>
-                                    {showMoreAccounts 
-                                        ? 'Hide account switcher' 
-                                        : additionalAccountsData.length > 0 
+                                    {showMoreAccounts
+                                        ? 'Hide account switcher'
+                                        : additionalAccountsData.length > 0
                                             ? `Switch between ${additionalAccountsData.length + 1} accounts`
                                             : loadingAdditionalAccounts
                                                 ? 'Loading additional accounts...'
@@ -470,7 +470,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Support & Settings */}
                 <View style={styles.section}>
                     <Text style={styles.sectionTitle}>Support & Settings</Text>
-                    
+
                     <TouchableOpacity
                         style={[styles.settingItem, styles.firstSettingItem]}
                         onPress={() => toast.info('Account preferences coming soon!')}
@@ -544,7 +544,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
                 {/* Sign Out */}
                 <View style={styles.section}>
-                    <TouchableOpacity 
+                    <TouchableOpacity
                         style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.signOutButton]}
                         onPress={confirmLogout}
                     >

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -24,7 +24,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     goBack,
     navigate,
 }) => {
-    const { user, oxyServices, isLoading: authLoading } = useOxy();
+    const { user, oxyServices, isLoading: authLoading, isAuthenticated } = useOxy();
     const [isLoading, setIsLoading] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
 
@@ -74,10 +74,10 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     // Load user data
     useEffect(() => {
         if (user) {
-            const userDisplayName = typeof user.name === 'string' 
-                ? user.name 
+            const userDisplayName = typeof user.name === 'string'
+                ? user.name
                 : user.name?.full || user.name?.first || '';
-            
+
             setDisplayName(userDisplayName);
             setUsername(user.username || '');
             setEmail(user.email || '');
@@ -115,9 +115,9 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
 
             await oxyServices.updateProfile(updates);
             toast.success('Profile updated successfully');
-            
+
             animateSaveButton(1); // Scale back to normal
-            
+
             if (onClose) {
                 onClose();
             } else if (goBack) {
@@ -182,7 +182,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
 
     const saveField = (type: string) => {
         animateSaveButton(0.95); // Scale down slightly for animation
-        
+
         switch (type) {
             case 'displayName':
                 setDisplayName(tempDisplayName);
@@ -203,7 +203,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                 setWebsite(tempWebsite);
                 break;
         }
-        
+
         // Brief delay for animation, then reset and close editing
         setTimeout(() => {
             animateSaveButton(1);
@@ -263,7 +263,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                 default: return '';
             }
         })();
-        
+
         const setTempValue = (text: string) => {
             switch (type) {
                 case 'displayName': setTempDisplayName(text); break;
@@ -285,7 +285,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         <TextInput
                             style={[
                                 config.multiline ? styles.editingFieldTextArea : styles.editingFieldInput,
-                                { 
+                                {
                                     backgroundColor: themeStyles.isDarkTheme ? '#333' : '#fff',
                                     color: themeStyles.isDarkTheme ? '#fff' : '#000',
                                     borderColor: themeStyles.primaryColor
@@ -326,7 +326,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
         ];
 
         return (
-            <TouchableOpacity 
+            <TouchableOpacity
                 style={itemStyles}
                 onPress={() => startEditing(type, value)}
             >
@@ -344,7 +344,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
         );
     };
 
-    if (authLoading || !user) {
+    if (authLoading || !isAuthenticated) {
         return (
             <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor, justifyContent: 'center' }]}>
                 <ActivityIndicator size="large" color={themeStyles.primaryColor} />
@@ -363,14 +363,14 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                                 <Ionicons name="close" size={24} color="#666" />
                             </TouchableOpacity>
                             <Animated.View style={{ transform: [{ scale: saveButtonScale }] }}>
-                                <TouchableOpacity 
+                                <TouchableOpacity
                                     style={[
-                                        styles.saveHeaderButton, 
-                                        { 
+                                        styles.saveHeaderButton,
+                                        {
                                             opacity: isSaving ? 0.7 : 1,
                                             backgroundColor: editingField ? getFieldIcon(editingField).color : '#007AFF'
                                         }
-                                    ]} 
+                                    ]}
                                     onPress={() => saveField(editingField)}
                                     disabled={isSaving}
                                 >
@@ -384,11 +384,11 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         </View>
                         <View style={styles.editingHeaderBottom}>
                             <View style={styles.headerTitleWithIcon}>
-                                <OxyIcon 
-                                    name={getFieldIcon(editingField).name} 
-                                    size={50} 
-                                    color={getFieldIcon(editingField).color} 
-                                    style={styles.headerIcon} 
+                                <OxyIcon
+                                    name={getFieldIcon(editingField).name}
+                                    size={50}
+                                    color={getFieldIcon(editingField).color}
+                                    style={styles.headerIcon}
                                 />
                                 <Text style={styles.headerTitleLarge}>{getFieldLabel(editingField)}</Text>
                             </View>
@@ -401,8 +401,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         </TouchableOpacity>
                         <Text style={styles.headerTitle}>Account Settings</Text>
                         <Animated.View style={{ transform: [{ scale: saveButtonScale }] }}>
-                            <TouchableOpacity 
-                                style={[styles.saveIconButton, { opacity: isSaving ? 0.7 : 1 }]} 
+                            <TouchableOpacity
+                                style={[styles.saveIconButton, { opacity: isSaving ? 0.7 : 1 }]}
                                 onPress={handleSave}
                                 disabled={isSaving}
                             >
@@ -429,8 +429,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         {/* Profile Picture Section */}
                         <View style={styles.section}>
                             <Text style={styles.sectionTitle}>Profile Picture</Text>
-                            
-                            <TouchableOpacity 
+
+                            <TouchableOpacity
                                 style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}
                                 onPress={handleAvatarUpdate}
                             >
@@ -457,7 +457,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         {/* Basic Information */}
                         <View style={styles.section}>
                             <Text style={styles.sectionTitle}>Basic Information</Text>
-                            
+
                             {renderField(
                                 'displayName',
                                 'Display Name',
@@ -501,7 +501,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         {/* About You */}
                         <View style={styles.section}>
                             <Text style={styles.sectionTitle}>About You</Text>
-                            
+
                             {renderField(
                                 'bio',
                                 'Bio',
@@ -545,8 +545,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         {/* Quick Actions */}
                         <View style={styles.section}>
                             <Text style={styles.sectionTitle}>Quick Actions</Text>
-                            
-                            <TouchableOpacity 
+
+                            <TouchableOpacity
                                 style={[styles.settingItem, styles.firstSettingItem]}
                                 onPress={() => toast.info('Privacy settings coming soon!')}
                             >
@@ -560,7 +560,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                                 <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                             </TouchableOpacity>
 
-                            <TouchableOpacity 
+                            <TouchableOpacity
                                 style={[styles.settingItem, styles.lastSettingItem]}
                                 onPress={() => toast.info('Account verification coming soon!')}
                             >