@oxyhq/services 5.17.18 → 5.18.0

package/src/ui/screens/ProfileScreen.tsx

@@ -77,7 +77,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
         setIsLoading(true);
         setError(null);
 
-        // Load user profile and karma total
+        // Load user profile, karma total, and stats
         Promise.all([
             oxyServices.getUserById(userId).catch((err: unknown) => {
                 // If this is the current user and the API call fails, use current user data as fallback
@@ -92,9 +92,14 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 oxyServices.getUserKarmaTotal(userId).catch(() => {
                     return { total: undefined };
                 }) :
-                Promise.resolve({ total: undefined })
+                Promise.resolve({ total: undefined }),
+            oxyServices.getUserStats ?
+                oxyServices.getUserStats(userId).catch(() => {
+                    return { postCount: 0, commentCount: 0 };
+                }) :
+                Promise.resolve({ postCount: 0, commentCount: 0 })
         ])
-            .then(([profileRes, karmaRes]) => {
+            .then(([profileRes, karmaRes, statsRes]) => {
                 if (!profileRes) {
                     setError('Profile data is not available');
                     setIsLoading(false);
@@ -135,9 +140,9 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
 
                 // Follower/following counts are managed by the `useFollow` hook.
 
-                // Mock data for other stats (these would come from separate API endpoints)
-                setPostsCount(Math.floor(Math.random() * 50));
-                setCommentsCount(Math.floor(Math.random() * 100));
+                // User stats from API
+                setPostsCount(statsRes?.postCount ?? 0);
+                setCommentsCount(statsRes?.commentCount ?? 0);
             })
             .catch((err: unknown) => {
                 logger.error('Profile loading error', err instanceof Error ? err : new Error(String(err)), { component: 'ProfileScreen' });

package/src/ui/screens/SavesCollectionsScreen.tsx

@@ -49,21 +49,30 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
     const tabActiveColor = themeStyles.colors.iconSecurity;
     const tabInactiveColor = themeStyles.isDarkTheme ? '#888888' : '#666666';
 
-    // TODO: Implement API integration for saved items and collections
-    // Currently sets empty arrays. Should fetch from oxyServices.getSavedItems() and oxyServices.getCollections()
-    // Load saved items and collections
+    // Load saved items and collections from API
     useEffect(() => {
         const loadData = async () => {
             try {
                 setIsLoading(true);
                 if (user?.id && oxyServices) {
-                    // TODO: Replace with actual API calls
-                    // const saved = await oxyServices.getSavedItems(user.id);
-                    // const cols = await oxyServices.getCollections(user.id);
-                    // setSavedItems(saved);
-                    // setCollections(cols);
-                    setSavedItems([]);
-                    setCollections([]);
+                    const [saved, cols] = await Promise.all([
+                        oxyServices.getSavedItems(user.id),
+                        oxyServices.getCollections(user.id),
+                    ]);
+                    setSavedItems(saved.map((item: any) => ({
+                        id: item.id,
+                        title: item.title,
+                        type: item.itemType === 'post' ? 'post' : 'collection',
+                        savedAt: new Date(item.createdAt),
+                        url: item.url,
+                    })));
+                    setCollections(cols.map((col: any) => ({
+                        id: col.id,
+                        name: col.name,
+                        description: col.description,
+                        itemCount: col.itemCount,
+                        createdAt: col.createdAt ? new Date(col.createdAt) : undefined,
+                    })));
                 }
             } catch (error) {
                 toast.error(t('saves.loadError') || 'Failed to load saved items');

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

@@ -36,6 +36,8 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
     const themeStyles = useThemeStyles(theme || 'light', colorScheme);
     // Override primaryColor for Karma screens (purple instead of blue)
     const primaryColor = '#d169e5';
+    const dangerColor = themeStyles.dangerColor || '#D32F2F';
+    const mutedTextColor = themeStyles.isDarkTheme ? '#BBBBBB' : '#888888';
 
     // Icon colors from theme
     const iconLeaderboard = themeStyles.colors.iconPayments;
@@ -92,19 +94,19 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
                                 <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>
+                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{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>
+                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{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>
+                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{t('karma.center.actions.about') || 'About'}</Text>
                             </TouchableOpacity>
                         </View>
                         <View style={styles.actionRow}>
@@ -112,17 +114,17 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
                                 <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>
+                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{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>
+                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{t('karma.center.actions.faq') || 'FAQ'}</Text>
                             </TouchableOpacity>
                         </View>
                     </View>
-                    <Text style={styles.infoText}>
+                    <Text style={[styles.infoText, { color: mutedTextColor }]}>
                         {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>
@@ -137,7 +139,7 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
                     ) : (
                         karmaHistory.map((entry: any) => (
                             <View key={entry.id} style={[styles.historyItem, { borderColor: themeStyles.borderColor }]}>
-                                <Text style={[styles.historyPoints, { color: entry.points > 0 ? primaryColor : '#D32F2F' }]}>
+                                <Text style={[styles.historyPoints, { color: entry.points > 0 ? primaryColor : dangerColor }]}>
                                     {entry.points > 0 ? '+' : ''}{entry.points}
                                 </Text>
                                 <Text style={[styles.historyDesc, { color: themeStyles.textColor }]}>
@@ -150,7 +152,7 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
                         ))
                     )}
                 </View>
-                {error && <Text style={{ color: '#D32F2F', marginTop: 16, textAlign: 'center' }}>{error}</Text>}
+                {error && <Text style={{ color: dangerColor, marginTop: 16, textAlign: 'center' }}>{error}</Text>}
             </ScrollView>
         </View>
     );
@@ -211,11 +213,9 @@ const styles = StyleSheet.create({
     },
     actionLabel: {
         fontSize: 10,
-        color: '#888',
     },
     infoText: {
         fontSize: 13,
-        color: '#888',
         textAlign: 'center',
         marginTop: 8,
         marginBottom: 8,