@oxyhq/services 5.14.0 → 5.15.0

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -1,15 +1,16 @@
 import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Platform, Animated, ScrollView } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, Platform, Animated } from 'react-native';
 import AnimatedReanimated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
+import type { BaseScreenProps } from '../types/navigation';
 import Avatar from '../components/Avatar';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
 import { useAuthStore } from '../stores/authStore';
 import { useThemeColors } from '../styles';
+import { normalizeTheme } from '../utils/themeUtils';
 import GroupedPillButtons from '../components/internal/GroupedPillButtons';
 import { useI18n } from '../hooks/useI18n';
+import { useOxy } from '../context/OxyContext';
 
 const GAP = 12;
 const INNER_GAP = 8;
@@ -58,12 +59,14 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
     theme,
     newUser,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const { user, oxyServices } = useOxy();
     const { t } = useI18n();
     const updateUser = useAuthStore(s => s.updateUser);
     const currentUser = user || newUser; // fallback
-    const colors = useThemeColors(theme);
-    const styles = useMemo(() => createStyles(theme), [theme]);
+    const normalizedTheme = normalizeTheme(theme);
+    const colors = useThemeColors(normalizedTheme);
+    const styles = useMemo(() => createStyles(normalizedTheme), [normalizedTheme]);
 
     // Animation state
     const fadeAnim = useRef(new Animated.Value(1)).current;
@@ -132,7 +135,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
             animateToStepCallback(avatarStepIndex);
         }
 
-        navigate('FileManagement', {
+        navigate?.('FileManagement', {
             selectMode: true,
             multiSelect: false,
             disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
@@ -213,43 +216,41 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
                 ))}
             </View>
             <Animated.View style={{ opacity: fadeAnim, transform: [{ translateX: slideAnim }] }}>
-                <ScrollView contentContainerStyle={styles.scrollInner} showsVerticalScrollIndicator={false}>
-                    <View style={styles.contentContainer}>
-                        <View style={[styles.header, styles.sectionSpacing]}>
-                            <Text style={[styles.title, { color: colors.text }]}>{step.title}</Text>
-                            {step.body && <Text style={[styles.body, { color: colors.secondaryText }]}>{step.body}</Text>}
+                <View style={[styles.scrollInner, styles.contentContainer]}>
+                    <View style={[styles.header, styles.sectionSpacing]}>
+                        <Text style={[styles.title, { color: colors.text }]}>{step.title}</Text>
+                        {step.body && <Text style={[styles.body, { color: colors.secondaryText }]}>{step.body}</Text>}
+                    </View>
+                    {Array.isArray(step.bullets) && step.bullets.length > 0 && (
+                        <View style={[styles.bulletContainer, styles.sectionSpacing]}>
+                            {step.bullets.map(b => (
+                                <View key={b} style={styles.bulletRow}>
+                                    <Ionicons name="ellipse" size={8} color={colors.primary} style={{ marginTop: 6 }} />
+                                    <Text style={[styles.bulletText, { color: colors.secondaryText }]}>{b}</Text>
+                                </View>
+                            ))}
                         </View>
-                        {Array.isArray(step.bullets) && step.bullets.length > 0 && (
-                            <View style={[styles.bulletContainer, styles.sectionSpacing]}>
-                                {step.bullets.map(b => (
-                                    <View key={b} style={styles.bulletRow}>
-                                        <Ionicons name="ellipse" size={8} color={colors.primary} style={{ marginTop: 6 }} />
-                                        <Text style={[styles.bulletText, { color: colors.secondaryText }]}>{b}</Text>
-                                    </View>
-                                ))}
-                            </View>
-                        )}
-                        {step.showAvatar && (
-                            <View style={[styles.avatarSection, styles.sectionSpacing]}>
-                                <Avatar 
-                                    size={120} 
-                                    name={currentUser?.name?.full || currentUser?.name?.first || currentUser?.username} 
-                                    uri={avatarUri} 
-                                    theme={theme} 
-                                    backgroundColor={colors.primary + '20'}
-                                    style={styles.avatar} 
-                                />
-                                <TouchableOpacity style={[styles.changeAvatarButton, { backgroundColor: colors.primary }]} onPress={openAvatarPicker}>
-                                    <Ionicons name="image-outline" size={18} color="#FFFFFF" />
-                                    <Text style={styles.changeAvatarText}>{avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}</Text>
-                                </TouchableOpacity>
-                            </View>
-                        )}
-                        <View style={styles.sectionSpacing}>
-                            <GroupedPillButtons buttons={pillButtons} colors={colors} />
+                    )}
+                    {step.showAvatar && (
+                        <View style={[styles.avatarSection, styles.sectionSpacing]}>
+                            <Avatar 
+                                size={120} 
+                                name={currentUser?.name?.full || currentUser?.name?.first || currentUser?.username} 
+                                uri={avatarUri} 
+                                
+                                backgroundColor={colors.primary + '20'}
+                                style={styles.avatar} 
+                            />
+                            <TouchableOpacity style={[styles.changeAvatarButton, { backgroundColor: colors.primary }]} onPress={openAvatarPicker}>
+                                <Ionicons name="image-outline" size={18} color="#FFFFFF" />
+                                <Text style={styles.changeAvatarText}>{avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}</Text>
+                            </TouchableOpacity>
                         </View>
+                    )}
+                    <View style={styles.sectionSpacing}>
+                        <GroupedPillButtons buttons={pillButtons} colors={colors} />
                     </View>
-                </ScrollView>
+                </View>
             </Animated.View>
         </View>
     );
@@ -265,7 +266,6 @@ const createStyles = (theme: string) => {
             paddingHorizontal: 20,
         },
         scrollInner: {
-            paddingBottom: 12,
             paddingTop: 0,
         },
         contentContainer: {

package/src/ui/screens/karma/KarmaAboutScreen.tsx

@@ -1,33 +1,37 @@
 import type React from 'react';
 import { View, Text, StyleSheet, ScrollView, Platform } from 'react-native';
-import type { BaseScreenProps } from '../../navigation/types';
+import type { BaseScreenProps } from '../../types/navigation';
 import { Header } from '../../components';
 import { useI18n } from '../../hooks/useI18n';
+import { useThemeStyles } from '../../hooks/useThemeStyles';
+import { normalizeTheme } from '../../utils/themeUtils';
+import { useColorScheme } from '../../hooks/use-color-scheme';
 
 const KarmaAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const { t } = useI18n();
-    const isDarkTheme = theme === 'dark';
-    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const colorScheme = useColorScheme();
+    const normalizedTheme = normalizeTheme(theme);
+    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
+    // Override primaryColor for Karma screens (purple instead of blue)
     const primaryColor = '#d169e5';
 
     return (
-        <View style={[styles.container, { backgroundColor }]}>
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             <Header
                 title={t('karma.about.title') || 'About Karma'}
                 subtitle={t('karma.about.subtitle') || 'Learn about the karma system'}
-                theme={theme}
+                
                 onBack={goBack}
                 elevation="subtle"
             />
             <ScrollView contentContainerStyle={styles.contentContainer}>
-                <Text style={[styles.paragraph, { color: textColor }]}>
+                <Text style={[styles.paragraph, { color: themeStyles.textColor }]}>
                     {t('karma.about.intro') || 'Karma is a recognition of your positive actions in the Oxy Ecosystem. It cannot be sent or received directly, only earned by contributing to the community.'}
                 </Text>
                 <Text style={[styles.section, { color: primaryColor }]}>
                     {t('karma.about.how.title') || 'How to Earn Karma'}
                 </Text>
-                <Text style={[styles.paragraph, { color: textColor }]}>
+                <Text style={[styles.paragraph, { color: themeStyles.textColor }]}>
                     • {t('karma.about.how.help') || 'Helping other users'}{'\n'}
                     • {t('karma.about.how.report') || 'Reporting bugs'}{'\n'}
                     • {t('karma.about.how.contribute') || 'Contributing content'}{'\n'}
@@ -37,7 +41,7 @@ const KarmaAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                 <Text style={[styles.section, { color: primaryColor }]}>
                     {t('karma.about.why.title') || 'Why Karma?'}
                 </Text>
-                <Text style={[styles.paragraph, { color: textColor }]}>
+                <Text style={[styles.paragraph, { color: themeStyles.textColor }]}>
                     {t('karma.about.why.text') || 'Karma unlocks special features and recognition in the Oxy Ecosystem. The more you contribute, the more you earn!'}
                 </Text>
             </ScrollView>

package/src/ui/screens/karma/KarmaCenterScreen.tsx

@@ -10,18 +10,21 @@ import {
     Alert,
     Platform,
 } from 'react-native';
-import type { BaseScreenProps } from '../../navigation/types';
-import { useOxy } from '../../context/OxyContext';
+import type { BaseScreenProps } from '../../types/navigation';
 import { fontFamilies } from '../../styles/fonts';
-import Avatar from '../../components/Avatar';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../../hooks/useI18n';
+import { useThemeStyles } from '../../hooks/useThemeStyles';
+import { useColorScheme } from '../../hooks/use-color-scheme';
+import { darkenColor } from '../../utils/colorUtils';
+import { useOxy } from '../../context/OxyContext';
 
 const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
     goBack,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const { user, oxyServices, isAuthenticated } = useOxy();
     const { t } = useI18n();
     const [karmaTotal, setKarmaTotal] = useState<number | null>(null);
@@ -29,13 +32,18 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
-    const isDarkTheme = theme === 'dark';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#F5F5F5';
-    const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    // Override primaryColor for Karma screens (purple instead of blue)
     const primaryColor = '#d169e5';
 
+    // Icon colors from theme
+    const iconLeaderboard = themeStyles.colors.iconPayments;
+    const iconRules = themeStyles.colors.iconSecurity;
+    const iconAbout = themeStyles.colors.iconPayments;
+    const iconRewards = themeStyles.colors.iconStorage;
+    const iconFAQ = themeStyles.colors.iconPersonalInfo;
+
     useEffect(() => {
         if (!user) return;
         setIsLoading(true);
@@ -56,89 +64,86 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
 
     if (!isAuthenticated) {
         return (
-            <View style={[styles.container, { backgroundColor }]}>
-                <Text style={[styles.message, { color: textColor }]}>{t('common.status.notSignedIn') || 'Not signed in'}</Text>
+            <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+                <Text style={[styles.message, { color: themeStyles.textColor }]}>{t('common.status.notSignedIn') || 'Not signed in'}</Text>
             </View>
         );
     }
 
     if (isLoading) {
         return (
-            <View style={[styles.container, { backgroundColor, justifyContent: 'center' }]}>
+            <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor, justifyContent: 'center' }]}>
                 <ActivityIndicator size="large" color={primaryColor} />
             </View>
         );
     }
 
     return (
-        <View style={[styles.container, { backgroundColor }]}>
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer}>
                 <View style={styles.walletHeader}>
-                    <Avatar
-                        uri={user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar as string, 'thumb') : undefined}
-                        name={user?.username}
-                        size={60}
-                        theme={theme}
-                        style={styles.avatar}
-                    />
-                    <Text style={[styles.karmaLabel, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>
+                    <Text style={[styles.karmaAmount, { color: primaryColor }]}>{karmaTotal ?? 0}</Text>
+                    <Text style={[styles.karmaLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888' }]}>
                         {t('karma.center.balance') || 'Karma Balance'}
                     </Text>
-                    <Text style={[styles.karmaAmount, { color: primaryColor }]}>{karmaTotal ?? 0}</Text>
-                    <View style={styles.actionRow}>
-                        <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('KarmaLeaderboard')}>
-                            <View style={[styles.actionIcon, { backgroundColor: '#E0E0E0' }]}>
-                                <Ionicons name="trophy-outline" size={28} color="#888" />
-                            </View>
-                            <Text style={styles.actionLabel}>{t('karma.center.actions.leaderboard') || 'Leaderboard'}</Text>
-                        </TouchableOpacity>
-                        <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('KarmaRules')}>
-                            <View style={[styles.actionIcon, { backgroundColor: '#E0E0E0' }]}>
-                                <Ionicons name="document-text-outline" size={28} color="#888" />
-                            </View>
-                            <Text style={styles.actionLabel}>{t('karma.center.actions.rules') || 'Rules'}</Text>
-                        </TouchableOpacity>
-                        <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('AboutKarma')}>
-                            <View style={[styles.actionIcon, { backgroundColor: '#E0E0E0' }]}>
-                                <Ionicons name="star-outline" size={28} color="#888" />
-                            </View>
-                            <Text style={styles.actionLabel}>{t('karma.center.actions.about') || 'About'}</Text>
-                        </TouchableOpacity>
-                        <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('KarmaRewards')}>
-                            <View style={[styles.actionIcon, { backgroundColor: '#E0E0E0' }]}>
-                                <Ionicons name="gift-outline" size={28} color="#888" />
-                            </View>
-                            <Text style={styles.actionLabel}>{t('karma.center.actions.rewards') || 'Rewards'}</Text>
-                        </TouchableOpacity>
-                        <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('KarmaFAQ')}>
-                            <View style={[styles.actionIcon, { backgroundColor: '#E0E0E0' }]}>
-                                <Ionicons name="help-circle-outline" size={28} color="#888" />
-                            </View>
-                            <Text style={styles.actionLabel}>{t('karma.center.actions.faq') || 'FAQ'}</Text>
-                        </TouchableOpacity>
+                    <View style={styles.actionContainer}>
+                        <View style={styles.actionRow}>
+                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('KarmaLeaderboard')}>
+                                <View style={[styles.actionIcon, { backgroundColor: iconLeaderboard }]}>
+                                    <Ionicons name="trophy-outline" size={28} color={darkenColor(iconLeaderboard)} />
+                                </View>
+                                <Text style={styles.actionLabel}>{t('karma.center.actions.leaderboard') || 'Leaderboard'}</Text>
+                            </TouchableOpacity>
+                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('KarmaRules')}>
+                                <View style={[styles.actionIcon, { backgroundColor: iconRules }]}>
+                                    <Ionicons name="document-text-outline" size={28} color={darkenColor(iconRules)} />
+                                </View>
+                                <Text style={styles.actionLabel}>{t('karma.center.actions.rules') || 'Rules'}</Text>
+                            </TouchableOpacity>
+                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('AboutKarma')}>
+                                <View style={[styles.actionIcon, { backgroundColor: iconAbout }]}>
+                                    <Ionicons name="star-outline" size={28} color={darkenColor(iconAbout)} />
+                                </View>
+                                <Text style={styles.actionLabel}>{t('karma.center.actions.about') || 'About'}</Text>
+                            </TouchableOpacity>
+                        </View>
+                        <View style={styles.actionRow}>
+                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('KarmaRewards')}>
+                                <View style={[styles.actionIcon, { backgroundColor: iconRewards }]}>
+                                    <Ionicons name="gift-outline" size={28} color={darkenColor(iconRewards)} />
+                                </View>
+                                <Text style={styles.actionLabel}>{t('karma.center.actions.rewards') || 'Rewards'}</Text>
+                            </TouchableOpacity>
+                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('KarmaFAQ')}>
+                                <View style={[styles.actionIcon, { backgroundColor: iconFAQ }]}>
+                                    <Ionicons name="help-circle-outline" size={28} color={darkenColor(iconFAQ)} />
+                                </View>
+                                <Text style={styles.actionLabel}>{t('karma.center.actions.faq') || 'FAQ'}</Text>
+                            </TouchableOpacity>
+                        </View>
                     </View>
                     <Text style={styles.infoText}>
                         {t('karma.center.info') || 'Karma can only be earned by positive actions in the Oxy Ecosystem. It cannot be sent or received directly.'}
                     </Text>
                 </View>
-                <Text style={[styles.sectionTitle, { color: textColor }]}>
+                <Text style={[styles.sectionTitle, { color: themeStyles.textColor }]}>
                     {t('karma.center.history') || 'Karma History'}
                 </Text>
                 <View style={styles.historyContainer}>
                     {karmaHistory.length === 0 ? (
-                        <Text style={{ color: textColor, textAlign: 'center', marginTop: 16 }}>
+                        <Text style={{ color: themeStyles.textColor, textAlign: 'center', marginTop: 16 }}>
                             {t('karma.center.noHistory') || 'No karma history yet.'}
                         </Text>
                     ) : (
                         karmaHistory.map((entry: any) => (
-                            <View key={entry.id} style={[styles.historyItem, { borderColor }]}>
+                            <View key={entry.id} style={[styles.historyItem, { borderColor: themeStyles.borderColor }]}>
                                 <Text style={[styles.historyPoints, { color: entry.points > 0 ? primaryColor : '#D32F2F' }]}>
                                     {entry.points > 0 ? '+' : ''}{entry.points}
                                 </Text>
-                                <Text style={[styles.historyDesc, { color: textColor }]}>
+                                <Text style={[styles.historyDesc, { color: themeStyles.textColor }]}>
                                     {entry.reason || (t('karma.center.noDescription') || 'No description')}
                                 </Text>
-                                <Text style={[styles.historyDate, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>
+                                <Text style={[styles.historyDate, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888' }]}>
                                     {entry.createdAt ? new Date(entry.createdAt).toLocaleString() : ''}
                                 </Text>
                             </View>
@@ -169,32 +174,28 @@ const styles = StyleSheet.create({
         width: '100%',
         backgroundColor: 'transparent',
     },
-    avatar: {
-        marginBottom: 12,
-    },
     karmaLabel: {
         fontSize: 16,
-        marginBottom: 4,
+        marginBottom: 18,
         fontFamily: fontFamilies.phudu,
     },
     karmaAmount: {
         fontSize: 48,
         fontWeight: 'bold',
+        marginBottom: 4,
+        fontFamily: fontFamilies.phudu,
+    },
+    actionContainer: {
         marginBottom: 18,
-        fontFamily: fontFamilies.phuduBold,
+        gap: 8,
     },
     actionRow: {
         flexDirection: 'row',
         justifyContent: 'center',
-        marginBottom: 18,
-        flexWrap: 'wrap',
-        rowGap: 0,
-        columnGap: 0,
+        gap: 2,
     },
     actionIconWrapper: {
         alignItems: 'center',
-        marginHorizontal: 8,
-        marginVertical: 4,
         width: 72,
     },
     actionIcon: {
@@ -204,13 +205,12 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
         marginBottom: 6,
-        opacity: 0.5,
     },
     actionIconText: {
         fontSize: 28,
     },
     actionLabel: {
-        fontSize: 13,
+        fontSize: 10,
         color: '#888',
     },
     infoText: {