@oxyhq/services 5.13.40 → 5.15.0

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -12,8 +12,7 @@ import {
     Image,
     Dimensions,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
+import type { BaseScreenProps } from '../types/navigation';
 import type { ClientSession } from '../../models/session';
 import { fontFamilies } from '../styles/fonts';
 import type { User } from '../../models/interfaces';
@@ -22,8 +21,12 @@ import { confirmAction } from '../utils/confirmAction';
 import OxyIcon from '../components/icon/OxyIcon';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../components/Avatar';
-import { Header, GroupedSection } from '../components';
+import { Header, GroupedSection, LoadingState } from '../components';
 import { useI18n } from '../hooks/useI18n';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { normalizeTheme } from '../utils/themeUtils';
+import { useOxy } from '../context/OxyContext';
 
 interface SessionWithUser extends ClientSession {
     userProfile?: User;
@@ -45,18 +48,19 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
     goBack,
-    oxyServices,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const {
+        oxyServices,
         user,
-        sessions,
-        activeSessionId,
+        sessions = [],
+        activeSessionId = null,
         switchSession,
         removeSession,
         logoutAll,
         refreshSessions,
-        isLoading,
-        isAuthenticated
+        isLoading = false,
+        isAuthenticated = false,
     } = useOxy();
 
     const [sessionsWithUsers, setSessionsWithUsers] = useState<SessionWithUser[]>([]);
@@ -71,30 +75,33 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     const [loggingOutAllDevices, setLoggingOutAllDevices] = useState(false);
 
     const screenWidth = Dimensions.get('window').width;
-    const isDarkTheme = theme === 'dark';
     const { t } = useI18n();
+    const colorScheme = useColorScheme();
+    const normalizedTheme = normalizeTheme(theme);
+    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
 
     // Modern color scheme - memoized for performance
+    // Uses themeStyles for base colors, with some custom additions for this screen
     const colors = useMemo(() => ({
-        background: isDarkTheme ? '#000000' : '#FFFFFF',
-        surface: isDarkTheme ? '#1C1C1E' : '#F2F2F7',
-        card: isDarkTheme ? '#2C2C2E' : '#FFFFFF',
-        text: isDarkTheme ? '#FFFFFF' : '#000000',
-        secondaryText: isDarkTheme ? '#8E8E93' : '#6D6D70',
-        accent: '#007AFF',
-        destructive: '#FF3B30',
-        success: '#34C759',
-        border: isDarkTheme ? '#38383A' : '#C6C6C8',
-        activeCard: isDarkTheme ? '#0A84FF20' : '#007AFF15',
-        shadow: isDarkTheme ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)',
-    }), [isDarkTheme]);
+        background: themeStyles.backgroundColor,
+        surface: themeStyles.secondaryBackgroundColor,
+        card: themeStyles.isDarkTheme ? '#2C2C2E' : '#FFFFFF',
+        text: themeStyles.textColor,
+        secondaryText: themeStyles.isDarkTheme ? '#8E8E93' : '#6D6D70',
+        accent: themeStyles.primaryColor,
+        destructive: themeStyles.dangerColor,
+        success: themeStyles.successColor,
+        border: themeStyles.borderColor,
+        activeCard: themeStyles.isDarkTheme ? '#0A84FF20' : '#007AFF15',
+        shadow: themeStyles.isDarkTheme ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)',
+    }), [themeStyles]);
 
     // Refresh sessions when screen loads
     useEffect(() => {
-        if (isAuthenticated && activeSessionId) {
+        if (isAuthenticated && activeSessionId && refreshSessions) {
             refreshSessions();
         }
-    }, [isAuthenticated, activeSessionId]);
+    }, [isAuthenticated, activeSessionId, refreshSessions]);
 
     // Memoize session IDs to prevent unnecessary re-renders
     const sessionIds = useMemo(() => sessions.map(s => s.sessionId).join(','), [sessions]);
@@ -120,7 +127,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
             try {
                 const sessionIds = uniqueSessions.map(s => s.sessionId);
                 const batchResults = await oxyServices.getUsersBySessions(sessionIds);
-                
+
                 // Create a map for O(1) lookup
                 const userProfileMap = new Map<string, User | null>();
                 batchResults.forEach(({ sessionId, user }) => {
@@ -160,7 +167,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     }, [sessionIds, oxyServices, sessions]);
 
     const handleSwitchSession = useCallback(async (sessionId: string) => {
-        if (sessionId === activeSessionId) return; // Already active session
+        if (sessionId === (activeSessionId ?? null)) return; // Already active session
         if (switchingToUserId) return; // Already switching
 
         setSwitchingToUserId(sessionId);
@@ -225,11 +232,12 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
     // Device session management functions - optimized with useCallback
     const loadAllDeviceSessions = useCallback(async () => {
-        if (!oxyServices || !activeSessionId) return;
+        const currentActiveSessionId = activeSessionId ?? null;
+        if (!oxyServices || !currentActiveSessionId) return;
 
         setLoadingDeviceSessions(true);
         try {
-            const allSessions = await oxyServices.getDeviceSessions(activeSessionId);
+            const allSessions = await oxyServices.getDeviceSessions(currentActiveSessionId);
             setDeviceSessions(allSessions || []);
         } catch (error) {
             if (__DEV__) {
@@ -249,7 +257,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
             async () => {
                 setRemoteLogoutSessionId(sessionId);
                 try {
-                    await oxyServices?.logoutSession(activeSessionId || '', sessionId);
+                    await oxyServices?.logoutSession((activeSessionId ?? null) || '', sessionId);
                     await loadAllDeviceSessions();
                     toast.success(t('accountSwitcher.toasts.remoteSignOutSuccess', { deviceName }) || `Signed out from ${deviceName} successfully!`);
                 } catch (error) {
@@ -279,7 +287,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
             async () => {
                 setLoggingOutAllDevices(true);
                 try {
-                    await oxyServices?.logoutAllDeviceSessions(activeSessionId || '');
+                    await oxyServices?.logoutAllDeviceSessions((activeSessionId ?? null) || '');
                     await loadAllDeviceSessions();
                     toast.success(t('accountSwitcher.toasts.signOutOthersSuccess') || 'Signed out from all other devices successfully!');
                 } catch (error) {
@@ -296,7 +304,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
     // Memoize filtered sessions for performance
     const otherSessions = useMemo(
-        () => sessionsWithUsers.filter(s => s.sessionId !== activeSessionId),
+        () => sessionsWithUsers.filter(s => s.sessionId !== (activeSessionId ?? null)),
         [sessionsWithUsers, activeSessionId]
     );
 
@@ -305,7 +313,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
             {/* Header */}
             <Header
                 title={t('accountSwitcher.title') || 'Account Switcher'}
-                theme={theme}
+
                 onBack={goBack}
                 onClose={onClose}
                 showBackButton={true}
@@ -319,10 +327,10 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
             <ScrollView style={styles.content}>
                 {isLoading ? (
-                    <View style={styles.loadingContainer}>
-                        <ActivityIndicator size="large" color="#007AFF" />
-                        <Text style={styles.loadingText}>{t('accountSwitcher.loading') || 'Loading accounts...'}</Text>
-                    </View>
+                    <LoadingState
+                        message={t('accountSwitcher.loading') || 'Loading accounts...'}
+                        color="#007AFF"
+                    />
                 ) : (
                     <>
                         {/* Current Account */}
@@ -368,75 +376,75 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                 </Text>
 
                                 {otherSessions.map((sessionWithUser, index, filteredArray) => {
-                                        const isFirst = index === 0;
-                                        const isLast = index === filteredArray.length - 1;
-                                        const isSwitching = switchingToUserId === sessionWithUser.sessionId;
-                                        const isRemoving = removingUserId === sessionWithUser.sessionId;
-                                        const { userProfile, isLoadingProfile } = sessionWithUser;
-
-                                        const displayName = typeof userProfile?.name === 'object'
-                                            ? userProfile.name.full || userProfile.name.first || userProfile.username
-                                            : userProfile?.name || userProfile?.username || 'Unknown User';
-
-                                        return (
-                                            <View
-                                                key={`session-${sessionWithUser.sessionId}-${index}`}
-                                                style={[
-                                                    styles.settingItem,
-                                                    isFirst && styles.firstSettingItem,
-                                                    isLast && styles.lastSettingItem,
-                                                ]}
-                                            >
-                                                <View style={styles.userIcon}>
-                                                    {isLoadingProfile ? (
-                                                        <View style={styles.accountAvatarFallback}>
-                                                            <ActivityIndicator size="small" color="#007AFF" />
-                                                        </View>
-                                                    ) : (typeof userProfile?.avatar === 'string' && userProfile.avatar) ? (
-                                                        <Image source={{ uri: oxyServices.getFileDownloadUrl(userProfile.avatar as string, 'thumb') }} style={styles.accountAvatarImage} />
-                                                    ) : (
-                                                        <View style={styles.accountAvatarFallback}>
-                                                            <Text style={styles.accountAvatarText}>
-                                                                {displayName.charAt(0).toUpperCase()}
-                                                            </Text>
-                                                        </View>
-                                                    )}
-                                                </View>
-                                                <View style={styles.settingInfo}>
-                                                    <View>
-                                                        <Text style={styles.settingLabel}>{displayName}</Text>
-                                                        <Text style={styles.settingDescription}>
-                                                            @{userProfile?.username || 'unknown'}
+                                    const isFirst = index === 0;
+                                    const isLast = index === filteredArray.length - 1;
+                                    const isSwitching = switchingToUserId === sessionWithUser.sessionId;
+                                    const isRemoving = removingUserId === sessionWithUser.sessionId;
+                                    const { userProfile, isLoadingProfile } = sessionWithUser;
+
+                                    const displayName = typeof userProfile?.name === 'object'
+                                        ? userProfile.name.full || userProfile.name.first || userProfile.username
+                                        : userProfile?.name || userProfile?.username || 'Unknown User';
+
+                                    return (
+                                        <View
+                                            key={`session-${sessionWithUser.sessionId}-${index}`}
+                                            style={[
+                                                styles.settingItem,
+                                                isFirst && styles.firstSettingItem,
+                                                isLast && styles.lastSettingItem,
+                                            ]}
+                                        >
+                                            <View style={styles.userIcon}>
+                                                {isLoadingProfile ? (
+                                                    <View style={styles.accountAvatarFallback}>
+                                                        <ActivityIndicator size="small" color="#007AFF" />
+                                                    </View>
+                                                ) : (typeof userProfile?.avatar === 'string' && userProfile.avatar) ? (
+                                                    <Image source={{ uri: oxyServices.getFileDownloadUrl(userProfile.avatar as string, 'thumb') }} style={styles.accountAvatarImage} />
+                                                ) : (
+                                                    <View style={styles.accountAvatarFallback}>
+                                                        <Text style={styles.accountAvatarText}>
+                                                            {displayName.charAt(0).toUpperCase()}
                                                         </Text>
                                                     </View>
-                                                </View>
-                                                <View style={styles.accountActions}>
-                                                    <TouchableOpacity
-                                                        style={styles.switchButton}
-                                                        onPress={() => handleSwitchSession(sessionWithUser.sessionId)}
-                                                        disabled={isSwitching || isRemoving}
-                                                    >
-                                                        {isSwitching ? (
-                                                            <ActivityIndicator size="small" color="#007AFF" />
-                                                        ) : (
-                                                            <Text style={styles.switchButtonText}>Switch</Text>
-                                                        )}
-                                                    </TouchableOpacity>
-                                                    <TouchableOpacity
-                                                        style={styles.removeButton}
-                                                        onPress={() => handleRemoveSession(sessionWithUser.sessionId, displayName)}
-                                                        disabled={isSwitching || isRemoving}
-                                                    >
-                                                        {isRemoving ? (
-                                                            <ActivityIndicator size="small" color="#FF3B30" />
-                                                        ) : (
-                                                            <OxyIcon name="trash" size={16} color="#FF3B30" />
-                                                        )}
-                                                    </TouchableOpacity>
+                                                )}
+                                            </View>
+                                            <View style={styles.settingInfo}>
+                                                <View>
+                                                    <Text style={styles.settingLabel}>{displayName}</Text>
+                                                    <Text style={styles.settingDescription}>
+                                                        @{userProfile?.username || 'unknown'}
+                                                    </Text>
                                                 </View>
                                             </View>
-                                        );
-                                    })}
+                                            <View style={styles.accountActions}>
+                                                <TouchableOpacity
+                                                    style={styles.switchButton}
+                                                    onPress={() => handleSwitchSession(sessionWithUser.sessionId)}
+                                                    disabled={isSwitching || isRemoving}
+                                                >
+                                                    {isSwitching ? (
+                                                        <ActivityIndicator size="small" color="#007AFF" />
+                                                    ) : (
+                                                        <Text style={styles.switchButtonText}>Switch</Text>
+                                                    )}
+                                                </TouchableOpacity>
+                                                <TouchableOpacity
+                                                    style={styles.removeButton}
+                                                    onPress={() => handleRemoveSession(sessionWithUser.sessionId, displayName)}
+                                                    disabled={isSwitching || isRemoving}
+                                                >
+                                                    {isRemoving ? (
+                                                        <ActivityIndicator size="small" color="#FF3B30" />
+                                                    ) : (
+                                                        <OxyIcon name="trash" size={16} color="#FF3B30" />
+                                                    )}
+                                                </TouchableOpacity>
+                                            </View>
+                                        </View>
+                                    );
+                                })}
                             </View>
                         )}
 
@@ -472,7 +480,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                         disabled: sessionsWithUsers.length === 0,
                                     },
                                 ]}
-                                theme={theme}
+
                             />
                         </View>
 
@@ -496,7 +504,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                 ),
                                             },
                                         ]}
-                                        theme={theme}
+
                                     />
                                 ) : deviceSessions.length === 0 ? (
                                     <GroupedSection
@@ -510,7 +518,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                 disabled: true,
                                             },
                                         ]}
-                                        theme={theme}
+
                                     />
                                 ) : (
                                     <GroupedSection
@@ -536,7 +544,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                 </TouchableOpacity>
                                             ) : undefined,
                                         }))}
-                                        theme={theme}
+
                                     />
                                 )}
                             </View>
@@ -571,7 +579,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                             ),
                                         },
                                     ]}
-                                    theme={theme}
+
                                 />
                             </View>
                         )}
@@ -711,17 +719,6 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
     },
-    loadingContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 20,
-        gap: 12,
-    },
-    loadingText: {
-        fontSize: 16,
-        color: '#666',
-    },
     emptyStateContainer: {
         alignItems: 'center',
         paddingVertical: 32,

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -9,36 +9,34 @@ import {
     ActivityIndicator,
     Alert,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
+import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
 import { Header, Section } from '../components';
 import { useI18n } from '../hooks/useI18n';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { normalizeTheme } from '../utils/themeUtils';
+import { useOxy } from '../context/OxyContext';
 
 const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
     goBack,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const { oxyServices, user } = useOxy();
     const { t } = useI18n();
     const [reason, setReason] = useState('');
     const [evidence, setEvidence] = useState('');
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    const themeStyles = useMemo(() => {
-        const isDarkTheme = theme === 'dark';
-        return {
-            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
-            backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
-            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
-            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
-            mutedTextColor: isDarkTheme ? '#8E8E93' : '#8E8E93',
-            inputBackgroundColor: isDarkTheme ? '#1C1C1E' : '#F2F2F7',
-            inputTextColor: isDarkTheme ? '#FFFFFF' : '#000000',
-            placeholderTextColor: isDarkTheme ? '#8E8E93' : '#8E8E93',
-        };
-    }, [theme]);
+    const normalizedTheme = normalizeTheme(theme);
+    const baseThemeStyles = useThemeStyles(normalizedTheme);
+    const themeStyles = useMemo(() => ({
+        ...baseThemeStyles,
+        inputBackgroundColor: baseThemeStyles.isDarkTheme ? '#1C1C1E' : '#F2F2F7',
+        inputTextColor: baseThemeStyles.textColor,
+        placeholderTextColor: baseThemeStyles.mutedTextColor,
+    }), [baseThemeStyles]);
 
     const handleSubmit = useCallback(async () => {
         if (!reason.trim()) {
@@ -86,20 +84,20 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
         <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             <Header
                 title={t('accountVerification.title') || 'Account Verification'}
-                theme={theme}
+                
                 onBack={goBack || onClose}
                 variant="minimal"
                 elevation="subtle"
             />
 
             <ScrollView style={styles.content}>
-                <Section theme={theme} isFirst={true}>
+                <Section  isFirst={true}>
                     <Text style={[styles.description, { color: themeStyles.mutedTextColor }]}>
                         {t('accountVerification.description') || 'Request a verified badge for your account. Verified accounts help establish authenticity and credibility.'}
                     </Text>
                 </Section>
 
-                <Section title={t('accountVerification.sections.request') || 'VERIFICATION REQUEST'} theme={theme}>
+                <Section title={t('accountVerification.sections.request') || 'VERIFICATION REQUEST'} >
                     <View style={styles.inputGroup}>
                         <Text style={[styles.label, { color: themeStyles.textColor }]}>
                             {t('accountVerification.reasonLabel') || 'Reason for Verification *'}
@@ -151,7 +149,7 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                     </View>
                 </Section>
 
-                <Section theme={theme}>
+                <Section >
                     <TouchableOpacity
                         style={[
                             styles.submitButton,
@@ -170,7 +168,7 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                     </TouchableOpacity>
                 </Section>
 
-                <Section theme={theme}>
+                <Section >
                     <Text style={[styles.note, { color: themeStyles.mutedTextColor }]}>
                         {t('accountVerification.note') || 'Note: Verification requests are reviewed manually and may take several days. We will notify you once your request has been reviewed.'}
                     </Text>