@oxyhq/services 5.16.17 → 5.16.18

package/src/models/interfaces.ts

@@ -415,6 +415,8 @@ export type SecurityEventType =
   | 'device_removed'
   | 'account_recovery'
   | 'security_settings_changed'
+  | 'private_key_exported'
+  | 'backup_created'
   | 'suspicious_activity';
 
 /**
@@ -435,6 +437,8 @@ export const SECURITY_EVENT_SEVERITY_MAP: Record<SecurityEventType, SecurityEven
   'device_removed': 'medium',
   'security_settings_changed': 'medium',
   'account_recovery': 'high',
+  'private_key_exported': 'high',
+  'backup_created': 'high',
   'suspicious_activity': 'critical',
 };
 

package/src/ui/components/FollowButton.tsx

@@ -53,8 +53,26 @@ const FollowButton: React.FC<FollowButtonProps> = ({
   preventParentActions = true,
   theme = 'light',
 }) => {
-  const { oxyServices, isAuthenticated } = useOxy();
+  const { oxyServices, isAuthenticated, user: currentUser } = useOxy();
   const colors = useThemeColors(theme);
+
+  // Safety check: Don't render follow button on own profile
+  // This provides a fallback in case parent components don't handle this check
+  // Normalize IDs by trimming whitespace and comparing as strings
+  const normalizeId = (id: string | undefined | null): string => {
+    if (!id) return '';
+    return String(id).trim();
+  };
+
+  const currentUserId = normalizeId(currentUser?.id);
+  const targetUserId = normalizeId(userId);
+
+  // Don't render if:
+  // 1. Not authenticated (can't follow anyway)
+  // 2. Viewing own profile (currentUser.id matches userId)
+  if (!isAuthenticated || (currentUserId && targetUserId && currentUserId === targetUserId)) {
+    return null;
+  }
   const {
     isFollowing,
     isLoading,

package/src/ui/components/GroupedItem.tsx

@@ -9,34 +9,6 @@ import { darkenColor } from '../utils/colorUtils';
 import { normalizeColorScheme } from '../utils/themeUtils';
 import { Colors } from '../constants/theme';
 
-/**
- * Maps Ionicons-style icon names to valid MaterialCommunityIcons names
- */
-const mapIconName = (iconName: string): string => {
-    const iconMap: Record<string, string> = {
-        'person': 'account',
-        'person-circle': 'account-circle',
-        'person-outline': 'account-outline',
-        'person-add': 'account-plus',
-        'shield-checkmark': 'shield-check',
-        'notifications': 'bell',
-        'people': 'account-group',
-        'time': 'clock',
-        'time-outline': 'clock-outline',
-        'trash': 'delete',
-        'trash-outline': 'delete-outline',
-        'search': 'magnify',
-        'language': 'translate',
-        'language-outline': 'translate',
-        'settings': 'cog',
-        'document-text': 'file-document',
-        'information-circle': 'information',
-        'information-circle-outline': 'information-outline',
-        'log-out': 'logout',
-    };
-
-    return iconMap[iconName] || iconName;
-};
 
 interface GroupedItemProps {
     icon?: string;
@@ -91,7 +63,7 @@ const GroupedItemComponent = ({
                 <View style={styles.actionIcon}>{customIcon}</View>
             ) : icon ? (
                 <View style={[styles.iconContainer, { backgroundColor: finalIconColor }]}>
-                    <MaterialCommunityIcons name={mapIconName(icon) as any} size={22} color={darkenColor(finalIconColor)} />
+                    <MaterialCommunityIcons name={icon as any} size={22} color={darkenColor(finalIconColor)} />
                 </View>
             ) : null}
             <View style={styles.actionTextContainer}>

package/src/ui/components/Section.tsx

@@ -32,6 +32,7 @@ const Section: React.FC<SectionProps> = ({
 const styles = StyleSheet.create({
     section: {
         marginBottom: 10,
+        gap: 12,
     },
     firstSection: {
         marginTop: 8,

package/src/ui/components/SectionTitle.tsx

@@ -27,7 +27,6 @@ const styles = StyleSheet.create({
         fontSize: 16,
         fontWeight: '600',
         fontFamily: fontFamilies.phuduSemiBold,
-        marginBottom: 12,
     },
 });
 

package/src/ui/components/fileManagement/FileViewer.tsx

@@ -105,7 +105,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
         const items = [
             {
                 id: 'filename',
-                icon: 'document-text',
+                icon: 'file-document',
                 iconColor: themeStyles.colors.iconSecurity,
                 title: 'File Name',
                 subtitle: file.filename,
@@ -119,14 +119,14 @@ export const FileViewer: React.FC<FileViewerProps> = ({
             },
             {
                 id: 'type',
-                icon: 'code',
+                icon: 'code-tags',
                 iconColor: themeStyles.colors.iconData,
                 title: 'Type',
                 subtitle: file.contentType,
             },
             {
                 id: 'uploaded',
-                icon: 'time',
+                icon: 'clock',
                 iconColor: themeStyles.colors.iconPersonalInfo,
                 title: 'Uploaded',
                 subtitle: new Date(file.uploadDate).toLocaleString(),

package/src/ui/context/OxyContext.tsx

@@ -24,7 +24,7 @@ import { useSessionManagement } from '../hooks/useSessionManagement';
 import { useAuthOperations } from './hooks/useAuthOperations';
 import { useDeviceManagement } from '../hooks/useDeviceManagement';
 import { getStorageKeys } from '../utils/storageHelpers';
-import { isInvalidSessionError } from '../utils/errorHandlers';
+import { isInvalidSessionError, isTimeoutOrNetworkError } from '../utils/errorHandlers';
 import type { RouteName } from '../navigation/routes';
 import { showBottomSheet as globalShowBottomSheet } from '../navigation/bottomSheetManager';
 import { useQueryClient } from '@tanstack/react-query';
@@ -33,6 +33,7 @@ import { KeyManager } from '../../crypto/keyManager';
 import { translate } from '../../i18n';
 import { updateAvatarVisibility, updateProfileWithAvatar } from '../utils/avatarUtils';
 import { useAccountStore } from '../stores/accountStore';
+import { logger as loggerUtil } from '../../utils/loggerUtils';
 
 export interface OxyContextState {
   user: User | null;
@@ -115,9 +116,10 @@ const loadUseFollowHook = (): UseFollowHook => {
     return cachedUseFollowHook;
   } catch (error) {
     if (__DEV__) {
-      console.warn(
+      loggerUtil.warn(
         'useFollow hook is not available. Please import useFollow from @oxyhq/services directly.',
-        error,
+        { component: 'OxyContext', method: 'loadUseFollowHook' },
+        error
       );
     }
 
@@ -425,8 +427,19 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
                 await syncIdentity();
               }
             }
-          } catch (syncError) {
-            logger('Error syncing identity on reconnect', syncError);
+          } catch (syncError: any) {
+            // Skip sync silently if username is required (expected when offline onboarding)
+            if (syncError?.code === 'USERNAME_REQUIRED' || syncError?.message === 'USERNAME_REQUIRED') {
+              if (__DEV__) {
+                loggerUtil.debug('Sync skipped - username required', { component: 'OxyContext', method: 'checkNetworkAndSync' }, syncError as unknown);
+              }
+              // Don't log or show error - username will be set later
+            } else if (!isTimeoutOrNetworkError(syncError)) {
+              // Only log unexpected errors - timeouts/network issues are expected when offline
+              logger('Error syncing identity on reconnect', syncError);
+            } else if (__DEV__) {
+              loggerUtil.debug('Identity sync timeout (expected when offline)', { component: 'OxyContext', method: 'checkNetworkAndSync' }, syncError as unknown);
+            }
           }
 
           // TanStack Query will automatically retry pending mutations
@@ -509,10 +522,13 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
               });
             }
           } catch (validationError) {
-            // Silently handle expected 401 errors (expired/invalid sessions) during restoration
+            // Silently handle expected errors (invalid sessions, timeouts, network issues) during restoration
             // Only log unexpected errors
-            if (!isInvalidSessionError(validationError)) {
+            if (!isInvalidSessionError(validationError) && !isTimeoutOrNetworkError(validationError)) {
               logger('Session validation failed during init', validationError);
+            } else if (__DEV__ && isTimeoutOrNetworkError(validationError)) {
+              // Only log timeouts in dev mode for debugging
+              loggerUtil.debug('Session validation timeout (expected when offline)', { component: 'OxyContext', method: 'restoreSessionsFromStorage' }, validationError as unknown);
             }
           }
         }
@@ -526,7 +542,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         try {
           await switchSession(storedActiveSessionId);
         } catch (switchError) {
-          // Silently handle expected 401 errors (expired/invalid active session)
+          // Silently handle expected errors (invalid sessions, timeouts, network issues)
           if (isInvalidSessionError(switchError)) {
             await storage.removeItem(storageKeys.activeSessionId);
             updateSessions(
@@ -534,6 +550,11 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
               { merge: false },
             );
             // Don't log expected session errors during restoration
+          } else if (isTimeoutOrNetworkError(switchError)) {
+            // Timeout/network error - non-critical, don't block
+            if (__DEV__) {
+              loggerUtil.debug('Active session validation timeout (expected when offline)', { component: 'OxyContext', method: 'restoreSessionsFromStorage' }, switchError as unknown);
+            }
           } else {
             // Only log unexpected errors
             logger('Active session validation error', switchError);
@@ -542,7 +563,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       }
     } catch (error) {
       if (__DEV__) {
-        console.error('Auth init error', error);
+        loggerUtil.error('Auth init error', error instanceof Error ? error : new Error(String(error)), { component: 'OxyContext', method: 'restoreSessionsFromStorage' });
       }
       await clearSessionState();
     } finally {

package/src/ui/context/hooks/useAuthOperations.ts

@@ -3,9 +3,9 @@ import type { ApiError, User } from '../../../models/interfaces';
 import type { AuthState } from '../../stores/authStore';
 import type { ClientSession, SessionLoginResponse } from '../../../models/session';
 import { DeviceManager } from '../../../utils/deviceManager';
-import { fetchSessionsWithFallback, mapSessionsToClient } from '../utils/sessionHelpers';
-import { handleAuthError, isInvalidSessionError } from '../utils/errorHandlers';
-import type { StorageInterface } from '../utils/storageHelpers';
+import { fetchSessionsWithFallback, mapSessionsToClient } from '../../utils/sessionHelpers';
+import { handleAuthError, isInvalidSessionError } from '../../utils/errorHandlers';
+import type { StorageInterface } from '../../utils/storageHelpers';
 import type { OxyServices } from '../../../core';
 import { KeyManager, SignatureService, RecoveryPhraseService } from '../../../crypto';
 
@@ -342,7 +342,7 @@ export const useAuthOperations = ({
           defaultMessage: 'Failed to create identity',
           code: REGISTER_ERROR_CODE,
           onError,
-          setAuthError: (msg) => setAuthState({ error: msg }),
+          setAuthError: (msg: string) => setAuthState({ error: msg }),
           logger,
         });
         loginFailure(message);
@@ -405,6 +405,13 @@ export const useAuthOperations = ({
         // Sign in
         const user = await performSignIn(publicKey);
 
+        // Check if user has username - required for syncing
+        if (!user.username) {
+          const usernameError = new Error('USERNAME_REQUIRED');
+          (usernameError as any).code = 'USERNAME_REQUIRED';
+          throw usernameError;
+        }
+
         // TanStack Query will automatically retry any pending mutations
 
         return user;
@@ -413,7 +420,7 @@ export const useAuthOperations = ({
           defaultMessage: 'Failed to sync identity',
           code: REGISTER_ERROR_CODE,
           onError,
-          setAuthError: (msg) => setAuthState({ error: msg }),
+          setAuthError: (msg: string) => setAuthState({ error: msg }),
           logger,
         });
         loginFailure(message);
@@ -474,7 +481,7 @@ export const useAuthOperations = ({
           defaultMessage: 'Failed to import identity',
           code: REGISTER_ERROR_CODE,
           onError,
-          setAuthError: (msg) => setAuthState({ error: msg }),
+          setAuthError: (msg: string) => setAuthState({ error: msg }),
           logger,
         });
         loginFailure(message);
@@ -508,7 +515,7 @@ export const useAuthOperations = ({
           defaultMessage: 'Sign in failed',
           code: LOGIN_ERROR_CODE,
           onError,
-          setAuthError: (msg) => setAuthState({ error: msg }),
+          setAuthError: (msg: string) => setAuthState({ error: msg }),
           logger,
         });
         loginFailure(message);
@@ -554,7 +561,7 @@ export const useAuthOperations = ({
           defaultMessage: 'Logout failed',
           code: LOGOUT_ERROR_CODE,
           onError,
-          setAuthError: (msg) => setAuthState({ error: msg }),
+          setAuthError: (msg: string) => setAuthState({ error: msg }),
           logger,
           status: isInvalid ? 401 : undefined,
         });
@@ -592,7 +599,7 @@ export const useAuthOperations = ({
         defaultMessage: 'Logout all failed',
         code: LOGOUT_ALL_ERROR_CODE,
         onError,
-        setAuthError: (msg) => setAuthState({ error: msg }),
+        setAuthError: (msg: string) => setAuthState({ error: msg }),
         logger,
       });
       throw error instanceof Error ? error : new Error('Logout all failed');

package/src/ui/context/hooks/useDeviceManagement.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import type { ApiError } from '../../../models/interfaces';
 import { DeviceManager } from '../../../utils/deviceManager';
 import type { OxyServices } from '../../../core';
-import { handleAuthError } from '../utils/errorHandlers';
+import { handleAuthError } from '../../utils/errorHandlers';
 
 export interface UseDeviceManagementOptions {
   oxyServices: OxyServices;

package/src/ui/context/hooks/useLanguageManagement.ts

@@ -7,8 +7,8 @@ import {
   normalizeLanguageCode,
   type LanguageMetadata,
 } from '../../../utils/languageUtils';
-import type { StorageInterface } from '../utils/storageHelpers';
-import { extractErrorMessage } from '../utils/errorHandlers';
+import type { StorageInterface } from '../../utils/storageHelpers';
+import { extractErrorMessage } from '../../utils/errorHandlers';
 
 export interface UseLanguageManagementOptions {
   storage: StorageInterface | null;

package/src/ui/context/hooks/useSessionManagement.ts

@@ -2,9 +2,9 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import type { ApiError, User } from '../../../models/interfaces';
 import type { ClientSession } from '../../../models/session';
 import { mergeSessions, normalizeAndSortSessions, sessionsArraysEqual } from '../../../utils/sessionUtils';
-import { fetchSessionsWithFallback, mapSessionsToClient, validateSessionBatch } from '../utils/sessionHelpers';
-import { getStorageKeys, type StorageInterface } from '../utils/storageHelpers';
-import { handleAuthError, isInvalidSessionError } from '../utils/errorHandlers';
+import { fetchSessionsWithFallback, mapSessionsToClient, validateSessionBatch } from '../../utils/sessionHelpers';
+import { getStorageKeys, type StorageInterface } from '../../utils/storageHelpers';
+import { handleAuthError, isInvalidSessionError } from '../../utils/errorHandlers';
 import type { OxyServices } from '../../../core';
 import type { QueryClient } from '@tanstack/react-query';
 import { clearQueryCache } from '../../hooks/queryClient';

package/src/ui/context/hooks/useStorage.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { ApiError } from '../../../models/interfaces';
-import { createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
-import { extractErrorMessage } from '../utils/errorHandlers';
+import { createPlatformStorage, type StorageInterface } from '../../utils/storageHelpers';
+import { extractErrorMessage } from '../../utils/errorHandlers';
 
 export interface UseStorageOptions {
   onError?: (error: ApiError) => void;

package/src/ui/hooks/queries/useAccountQueries.ts

@@ -132,7 +132,7 @@ export const usePrivacySettings = (userId?: string, options?: { enabled?: boolea
   const targetUserId = userId || user?.id;
 
   return useQuery({
-    queryKey: queryKeys.privacy.settings(userId),
+    queryKey: queryKeys.privacy.settings(targetUserId),
     queryFn: async () => {
       if (!targetUserId) {
         throw new Error('User ID is required');

package/src/ui/hooks/queries/useServicesQueries.ts

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import type { ClientSession } from '../../../models/session';
 import { queryKeys } from './queryKeys';
 import { useOxy } from '../../context/OxyContext';
-import { fetchSessionsWithFallback, mapSessionsToClient } from '../../context/utils/sessionHelpers';
+import { fetchSessionsWithFallback, mapSessionsToClient } from '../../utils/sessionHelpers';
 
 /**
  * Get all active sessions for the current user

package/src/ui/hooks/useSessionSocket.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import io from 'socket.io-client';
 import { toast } from '../../lib/sonner';
+import { logger } from '../../utils/loggerUtils';
 
 interface UseSessionSocketProps {
   userId: string | null | undefined;
@@ -113,7 +114,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
             await clearSessionStateRef.current();
           } catch (error) {
             if (__DEV__) {
-              console.error('Failed to clear session state after session_removed:', error);
+              logger.error('Failed to clear session state after session_removed', error instanceof Error ? error : new Error(String(error)), { component: 'useSessionSocket' });
             }
           }
         } else {
@@ -121,7 +122,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
           refreshSessionsRef.current().catch((error) => {
             // Silently handle errors from refresh - they're expected if sessions were removed
             if (__DEV__) {
-              console.debug('Failed to refresh sessions after session_removed:', error);
+              logger.debug('Failed to refresh sessions after session_removed', { component: 'useSessionSocket' }, error as unknown);
             }
           });
         }
@@ -146,7 +147,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
             await clearSessionStateRef.current();
           } catch (error) {
             if (__DEV__) {
-              console.error('Failed to clear session state after device_removed:', error);
+              logger.error('Failed to clear session state after device_removed', error instanceof Error ? error : new Error(String(error)), { component: 'useSessionSocket' });
             }
           }
         } else {
@@ -154,7 +155,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
           refreshSessionsRef.current().catch((error) => {
             // Silently handle errors from refresh - they're expected if sessions were removed
             if (__DEV__) {
-              console.debug('Failed to refresh sessions after device_removed:', error);
+              logger.debug('Failed to refresh sessions after device_removed', { component: 'useSessionSocket' }, error as unknown);
             }
           });
         }
@@ -179,7 +180,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
             await clearSessionStateRef.current();
           } catch (error) {
             if (__DEV__) {
-              console.error('Failed to clear session state after sessions_removed:', error);
+              logger.error('Failed to clear session state after sessions_removed', error instanceof Error ? error : new Error(String(error)), { component: 'useSessionSocket' });
             }
           }
         } else {
@@ -187,7 +188,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
           refreshSessionsRef.current().catch((error) => {
             // Silently handle errors from refresh - they're expected if sessions were removed
             if (__DEV__) {
-              console.debug('Failed to refresh sessions after sessions_removed:', error);
+              logger.debug('Failed to refresh sessions after sessions_removed', { component: 'useSessionSocket' }, error as unknown);
             }
           });
         }
@@ -196,7 +197,7 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
         refreshSessionsRef.current().catch((error) => {
           // Log but don't throw - refresh errors shouldn't break the socket handler
           if (__DEV__) {
-            console.debug('Failed to refresh sessions after session_update:', error);
+            logger.debug('Failed to refresh sessions after session_update', { component: 'useSessionSocket' }, error as unknown);
           }
         });
         

package/src/ui/screens/AccountCenterScreen.tsx

@@ -102,9 +102,9 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                     <QuickActions
                         theme={normalizedTheme}
                         actions={useMemo(() => [
-                            { id: 'overview', icon: 'person-circle', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.overview') || 'Overview', onPress: () => navigate?.('AccountOverview') },
-                            { id: 'settings', icon: 'settings', iconColor: colors.iconData, title: t('accountCenter.quickActions.editProfile') || 'Edit Profile', onPress: () => navigate?.('EditProfile') },
-                            { id: 'sessions', icon: 'shield-checkmark', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.sessions') || 'Sessions', onPress: () => navigate?.('SessionManagement') },
+                            { id: 'overview', icon: 'account-circle', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.overview') || 'Overview', onPress: () => navigate?.('AccountOverview') },
+                            { id: 'settings', icon: 'cog', iconColor: colors.iconData, title: t('accountCenter.quickActions.editProfile') || 'Edit Profile', onPress: () => navigate?.('EditProfile') },
+                            { id: 'sessions', icon: 'shield-check', iconColor: colors.iconSecurity, title: t('accountCenter.quickActions.sessions') || 'Sessions', onPress: () => navigate?.('SessionManagement') },
                             { id: 'premium', icon: 'star', iconColor: colors.iconPayments, title: t('accountCenter.quickActions.premium') || 'Premium', onPress: () => navigate?.('PremiumSubscription') },
                             ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: colors.iconPersonalInfo, title: t('accountCenter.quickActions.billing') || 'Billing', onPress: () => navigate?.('PaymentGateway') }] : []),
                             ...(sessions && sessions.length > 1 ? [{ id: 'switch', icon: 'swap-horizontal', iconColor: colors.iconStorage, title: t('accountCenter.quickActions.switch') || 'Switch', onPress: () => navigate?.('AccountSwitcher') }] : []),
@@ -119,7 +119,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                         items={useMemo(() => [
                             {
                                 id: 'overview',
-                                icon: 'person-circle',
+                                icon: 'account-circle',
                                 iconColor: colors.iconSecurity,
                                 title: t('accountCenter.items.accountOverview.title') || 'Account Overview',
                                 subtitle: t('accountCenter.items.accountOverview.subtitle') || 'Complete account information',
@@ -127,7 +127,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'settings',
-                                icon: 'settings',
+                                icon: 'cog',
                                 iconColor: colors.iconData,
                                 title: t('accountCenter.items.editProfile.title') || 'Edit Profile',
                                 subtitle: t('accountCenter.items.editProfile.subtitle') || 'Manage your profile and preferences',
@@ -135,7 +135,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'sessions',
-                                icon: 'shield-checkmark',
+                                icon: 'shield-check',
                                 iconColor: colors.iconSecurity,
                                 title: t('accountCenter.items.manageSessions.title') || 'Manage Sessions',
                                 subtitle: t('accountCenter.items.manageSessions.subtitle') || 'Security and active devices',
@@ -177,7 +177,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             items={useMemo(() => [
                                 {
                                     id: 'switch',
-                                    icon: 'people',
+                                    icon: 'account-group',
                                     iconColor: colors.iconStorage,
                                     title: t('accountCenter.items.switchAccount.title') || 'Switch Account',
                                     subtitle: t('accountCenter.items.switchAccount.subtitle', { count: sessions.length }) || `${sessions.length} accounts available`,
@@ -185,7 +185,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 },
                                 {
                                     id: 'add',
-                                    icon: 'person-add',
+                                    icon: 'account-plus',
                                     iconColor: colors.iconPersonalInfo,
                                     title: t('accountCenter.items.addAccount.title') || 'Add Another Account',
                                     subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
@@ -204,7 +204,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             items={useMemo(() => [
                                 {
                                     id: 'add',
-                                    icon: 'person-add',
+                                    icon: 'account-plus',
                                     iconColor: colors.iconPersonalInfo,
                                     title: t('accountCenter.items.addAccount.title') || 'Add Another Account',
                                     subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
@@ -222,7 +222,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                         items={useMemo(() => [
                             ...(Platform.OS !== 'web' ? [{
                                 id: 'notifications',
-                                icon: 'notifications',
+                                icon: 'bell',
                                 iconColor: colors.iconStorage,
                                 title: t('accountCenter.items.notifications.title') || 'Notifications',
                                 subtitle: t('accountCenter.items.notifications.subtitle') || 'Manage notification settings',
@@ -230,7 +230,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             }] : []),
                             {
                                 id: 'language',
-                                icon: 'language',
+                                icon: 'translate',
                                 iconColor: colors.iconPersonalInfo,
                                 title: t('language.title') || 'Language',
                                 subtitle: t('language.subtitle') || 'Choose your preferred language',
@@ -246,7 +246,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                             },
                             {
                                 id: 'appinfo',
-                                icon: 'information-circle',
+                                icon: 'information',
                                 iconColor: '#8E8E93',
                                 title: t('accountCenter.items.appInfo.title') || 'App Information',
                                 subtitle: t('accountCenter.items.appInfo.subtitle') || 'Version and system details',
@@ -260,7 +260,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 {/* Sign Out Section */}
                 <Section >
                     <GroupedItem
-                        icon="log-out"
+                        icon="logout"
                         iconColor={dangerColor}
                         title={isLoading ? (t('accountCenter.signingOut') || 'Signing out...') : (t('common.actions.signOut') || 'Sign Out')}