@oxyhq/services 5.8.1 → 5.8.3

package/src/ui/hooks/useFollow.ts

@@ -14,6 +14,11 @@ export const useFollow = (userId?: string | string[]) => {
   const isFollowing = isSingleUser && userId ? followState.followingUsers[userId] ?? false : false;
   const isLoading = isSingleUser && userId ? followState.loadingUsers[userId] ?? false : false;
   const error = isSingleUser && userId ? followState.errors[userId] ?? null : null;
+  
+  // Follower count helpers
+  const followerCount = isSingleUser && userId ? followState.followerCounts[userId] ?? null : null;
+  const followingCount = isSingleUser && userId ? followState.followingCounts[userId] ?? null : null;
+  const isLoadingCounts = isSingleUser && userId ? followState.loadingCounts[userId] ?? false : false;
 
   const toggleFollow = useCallback(async () => {
     if (!isSingleUser || !userId) throw new Error('toggleFollow is only available for single user mode');
@@ -35,6 +40,21 @@ export const useFollow = (userId?: string | string[]) => {
     followState.clearFollowError(userId);
   }, [isSingleUser, userId, followState]);
 
+  const fetchUserCounts = useCallback(async () => {
+    if (!isSingleUser || !userId) throw new Error('fetchUserCounts is only available for single user mode');
+    await followState.fetchUserCounts(userId, oxyServices);
+  }, [isSingleUser, userId, followState, oxyServices]);
+
+  const setFollowerCount = useCallback((count: number) => {
+    if (!isSingleUser || !userId) throw new Error('setFollowerCount is only available for single user mode');
+    followState.setFollowerCount(userId, count);
+  }, [isSingleUser, userId, followState]);
+
+  const setFollowingCount = useCallback((count: number) => {
+    if (!isSingleUser || !userId) throw new Error('setFollowingCount is only available for single user mode');
+    followState.setFollowingCount(userId, count);
+  }, [isSingleUser, userId, followState]);
+
   // Multiple user helpers
   const followData = useMemo(() => {
     const data: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }> = {};
@@ -69,6 +89,11 @@ export const useFollow = (userId?: string | string[]) => {
     followState.clearFollowError(targetUserId);
   }, [followState]);
 
+  const updateCountsFromFollowAction = useCallback((targetUserId: string, action: 'follow' | 'unfollow', counts: { followers: number; following: number }) => {
+    const currentUserId = oxyServices.getCurrentUserId() || undefined;
+    followState.updateCountsFromFollowAction(targetUserId, action, counts, currentUserId);
+  }, [followState, oxyServices]);
+
   // Aggregate helpers for multiple users
   const isAnyLoading = userIds.some(uid => followState.loadingUsers[uid]);
   const hasAnyError = userIds.some(uid => !!followState.errors[uid]);
@@ -84,6 +109,13 @@ export const useFollow = (userId?: string | string[]) => {
       setFollowStatus,
       fetchStatus,
       clearError,
+      // Follower count methods
+      followerCount,
+      followingCount,
+      isLoadingCounts,
+      fetchUserCounts,
+      setFollowerCount,
+      setFollowingCount,
     };
   }
 
@@ -99,4 +131,35 @@ export const useFollow = (userId?: string | string[]) => {
     allFollowing,
     allNotFollowing,
   };
+};
+
+// Convenience hook for just follower counts
+export const useFollowerCounts = (userId: string) => {
+  const { oxyServices } = useOxy();
+  const followState = useFollowStore();
+
+  const followerCount = followState.followerCounts[userId] ?? null;
+  const followingCount = followState.followingCounts[userId] ?? null;
+  const isLoadingCounts = followState.loadingCounts[userId] ?? false;
+
+  const fetchUserCounts = useCallback(async () => {
+    await followState.fetchUserCounts(userId, oxyServices);
+  }, [userId, followState, oxyServices]);
+
+  const setFollowerCount = useCallback((count: number) => {
+    followState.setFollowerCount(userId, count);
+  }, [userId, followState]);
+
+  const setFollowingCount = useCallback((count: number) => {
+    followState.setFollowingCount(userId, count);
+  }, [userId, followState]);
+
+  return {
+    followerCount,
+    followingCount,
+    isLoadingCounts,
+    fetchUserCounts,
+    setFollowerCount,
+    setFollowingCount,
+  };
 }; 

package/src/ui/navigation/OxyRouter.tsx

@@ -20,6 +20,7 @@ import KarmaAboutScreen from '../screens/karma/KarmaAboutScreen';
 import KarmaRewardsScreen from '../screens/karma/KarmaRewardsScreen';
 import KarmaFAQScreen from '../screens/karma/KarmaFAQScreen';
 import ProfileScreen from '../screens/ProfileScreen';
+import UserLinksScreen from '../screens/UserLinksScreen';
 import FileManagementScreen from '../screens/FileManagementScreen';
 import RecoverAccountScreen from '../screens/RecoverAccountScreen';
 import PaymentGatewayScreen from '../screens/PaymentGatewayScreen';
@@ -101,6 +102,10 @@ const routes: Record<string, RouteConfig> = {
         component: ProfileScreen,
         snapPoints: ['60%', '90%'],
     },
+    UserLinks: {
+        component: UserLinksScreen,
+        snapPoints: ['60%', '90%'],
+    },
     FileManagement: {
         component: FileManagementScreen,
         snapPoints: ['70%', '100%'],
@@ -135,11 +140,14 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
 
     // Memoized navigation methods
     const navigate = useCallback((screen: string, props: Record<string, any> = {}) => {
+        console.log('OxyRouter: navigate called with screen:', screen, 'props:', props);
         if (routes[screen]) {
+            console.log('OxyRouter: screen found in routes, navigating to:', screen);
             setCurrentScreen(screen);
             setScreenHistory(prev => [...prev, screen]);
             setScreenPropsMap(prev => ({ ...prev, [screen]: props }));
         } else {
+            console.error(`OxyRouter: Screen "${screen}" not found in routes:`, Object.keys(routes));
             if (process.env.NODE_ENV !== 'production') {
                 console.error(`Screen "${screen}" not found`);
             }
@@ -165,10 +173,12 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
     useEffect(() => {
         if (navigationRef) {
             navigationRef.current = navigate;
+            console.log('OxyRouter: navigationRef.current set to navigate function');
         }
         return () => {
             if (navigationRef) {
                 navigationRef.current = null;
+                console.log('OxyRouter: navigationRef.current cleared');
             }
         };
     }, [navigate, navigationRef]);

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -1019,6 +1019,14 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
 
                             <GroupedSection
                                 items={[
+                                    {
+                                        id: 'preview-profile',
+                                        icon: 'eye',
+                                        iconColor: '#007AFF',
+                                        title: 'Preview Profile',
+                                        subtitle: 'See how your profile looks to others',
+                                        onPress: () => navigate?.('Profile', { userId: user?.id }),
+                                    },
                                     {
                                         id: 'privacy-settings',
                                         icon: 'shield-checkmark',

package/src/ui/screens/ProfileScreen.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, ScrollView, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, ActivityIndicator, ScrollView, TouchableOpacity, Image } from 'react-native';
 import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import Avatar from '../components/Avatar';
+import { FollowButton } from '../components';
+import { useFollow } from '../hooks/useFollow';
 import { Ionicons } from '@expo/vector-icons';
 
 interface ProfileScreenProps extends BaseScreenProps {
@@ -10,22 +12,40 @@ interface ProfileScreenProps extends BaseScreenProps {
     username?: string;
 }
 
-const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme, goBack }) => {
+const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme, goBack, navigate }) => {
     const { oxyServices, user: currentUser } = useOxy();
     const [profile, setProfile] = useState<any>(null);
     const [karmaTotal, setKarmaTotal] = useState<number | null>(null);
     const [postsCount, setPostsCount] = useState<number | null>(null);
     const [commentsCount, setCommentsCount] = useState<number | null>(null);
-    const [followersCount, setFollowersCount] = useState<number | null>(null);
-    const [followingCount, setFollowingCount] = useState<number | null>(null);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
+    const [links, setLinks] = useState<Array<{
+        url: string;
+        title?: string;
+        description?: string;
+        image?: string;
+        id: string;
+    }>>([]);
+
+    // Use the follow hook for real follower data
+    const {
+        followerCount,
+        followingCount,
+        isLoadingCounts,
+        fetchUserCounts,
+        setFollowerCount,
+        setFollowingCount,
+    } = useFollow(userId);
 
     const isDarkTheme = theme === 'dark';
     const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
     const primaryColor = '#d169e5';
 
+    // Check if current user is viewing their own profile
+    const isOwnProfile = currentUser && currentUser.id === userId;
+
     useEffect(() => {
         console.log('ProfileScreen - userId:', userId);
         console.log('ProfileScreen - username:', username);
@@ -62,12 +82,50 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 setProfile(profileRes);
                 setKarmaTotal(typeof karmaRes.total === 'number' ? karmaRes.total : null);
 
-                // Mock data for other stats
-                // In a real app, these would come from API endpoints
+                // Extract links from profile data
+                if (profileRes.linksMetadata && Array.isArray(profileRes.linksMetadata)) {
+                    const linksWithIds = profileRes.linksMetadata.map((link: any, index: number) => ({
+                        ...link,
+                        id: link.id || `existing-${index}`
+                    }));
+                    setLinks(linksWithIds);
+                } else if (Array.isArray(profileRes.links)) {
+                    const simpleLinks = profileRes.links.map((l: any) => typeof l === 'string' ? l : l.link).filter(Boolean);
+                    const linksWithMetadata = simpleLinks.map((url: string, index: number) => ({
+                        url,
+                        title: url.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+                        description: `Link to ${url}`,
+                        image: undefined,
+                        id: `existing-${index}`
+                    }));
+                    setLinks(linksWithMetadata);
+                } else if (profileRes.website) {
+                    setLinks([{
+                        url: profileRes.website,
+                        title: profileRes.website.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+                        description: `Link to ${profileRes.website}`,
+                        image: undefined,
+                        id: 'existing-0'
+                    }]);
+                } else {
+                    setLinks([]);
+                }
+
+                // Set real follower counts from profile data if available
+                if (profileRes._count) {
+                    setFollowerCount?.(profileRes._count.followers || 0);
+                    setFollowingCount?.(profileRes._count.following || 0);
+                } else if (profileRes.stats) {
+                    setFollowerCount?.(profileRes.stats.followers || 0);
+                    setFollowingCount?.(profileRes.stats.following || 0);
+                } else {
+                    // Fallback: fetch counts separately
+                    fetchUserCounts?.();
+                }
+
+                // Mock data for other stats (these would come from separate API endpoints)
                 setPostsCount(Math.floor(Math.random() * 50));
                 setCommentsCount(Math.floor(Math.random() * 100));
-                setFollowersCount(Math.floor(Math.random() * 200));
-                setFollowingCount(Math.floor(Math.random() * 100));
             })
             .catch((err: any) => {
                 console.error('Profile loading error:', err);
@@ -135,9 +193,25 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                     <View style={styles.avatarWrapper}>
                         <Avatar uri={profile?.avatar?.url} name={profile?.username || username} size={96} theme={theme} />
                     </View>
-                    {/* Edit Profile/Follow Button placeholder */}
+                    {/* Conditional Action Button */}
                     <View style={styles.actionButtonWrapper}>
-                        <Text style={styles.actionButton}>Edit Profile</Text>
+                        {isOwnProfile ? (
+                            <TouchableOpacity
+                                style={styles.actionButton}
+                                onPress={() => navigate?.('EditProfile')}
+                            >
+                                <Text style={styles.actionButtonText}>Edit Profile</Text>
+                            </TouchableOpacity>
+                        ) : (
+                            <FollowButton
+                                userId={userId}
+                                theme={theme}
+                                onFollowChange={(isFollowing) => {
+                                    // The follow button will automatically update counts via Zustand
+                                    console.log(`Follow status changed: ${isFollowing}`);
+                                }}
+                            />
+                        )}
                     </View>
                 </View>
                 {/* Profile Info */}
@@ -148,20 +222,67 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                     )}
                     {/* Bio placeholder */}
                     <Text style={[styles.bio, { color: textColor }]}>{profile?.bio || 'This user has no bio yet.'}</Text>
-                    {/* Email and Join Date Row */}
-                    <View style={styles.infoRow}>
-                        {profile?.email && (
-                            <View style={styles.infoItem}>
-                                <Ionicons name="mail-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 4 }} />
-                                <Text style={[styles.infoText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>{profile.email}</Text>
+
+                    {/* Info Grid Row */}
+                    <View style={styles.infoGrid}>
+                        {profile?.createdAt && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="calendar-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Joined {new Date(profile.createdAt).toLocaleDateString()}</Text>
                             </View>
                         )}
-                        {profile?.createdAt && (
-                            <View style={styles.infoItem}>
-                                <Ionicons name="calendar-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 4 }} />
-                                <Text style={[styles.infoText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Joined {new Date(profile.createdAt).toLocaleDateString()}</Text>
+                        {profile?.location && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="location-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]} numberOfLines={1}>{profile.location}</Text>
+                            </View>
+                        )}
+                        {profile?.website && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="globe-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]} numberOfLines={1}>{profile.website}</Text>
+                            </View>
+                        )}
+                        {profile?.company && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="business-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]} numberOfLines={1}>{profile.company}</Text>
+                            </View>
+                        )}
+                        {profile?.jobTitle && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="briefcase-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]} numberOfLines={1}>{profile.jobTitle}</Text>
                             </View>
                         )}
+                        {profile?.education && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="school-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]} numberOfLines={1}>{profile.education}</Text>
+                            </View>
+                        )}
+                        {profile?.birthday && (
+                            <View style={styles.infoGridItem}>
+                                <Ionicons name="gift-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Born {new Date(profile.birthday).toLocaleDateString()}</Text>
+                            </View>
+                        )}
+                        {links.length > 0 && (
+                            <TouchableOpacity
+                                style={styles.infoGridItem}
+                                onPress={() => navigate?.('UserLinks', { userId, links })}
+                            >
+                                <Ionicons name="link-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 6 }} />
+                                <Text style={[styles.infoGridText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]} numberOfLines={1}>
+                                    {links[0].url}
+                                </Text>
+                                {links.length > 1 && (
+                                    <Text style={[styles.linksMore, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>
+                                        + {links.length - 1} more
+                                    </Text>
+                                )}
+                            </TouchableOpacity>
+                        )}
                     </View>
                     {/* Divider */}
                     <View style={styles.divider} />
@@ -172,11 +293,19 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                             <Text style={[styles.karmaLabel, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Karma</Text>
                         </View>
                         <View style={styles.statItem}>
-                            <Text style={[styles.karmaAmount, { color: textColor }]}>{followersCount !== null ? followersCount : '--'}</Text>
+                            {isLoadingCounts ? (
+                                <ActivityIndicator size="small" color={textColor} />
+                            ) : (
+                                <Text style={[styles.karmaAmount, { color: textColor }]}>{followerCount !== null ? followerCount : '--'}</Text>
+                            )}
                             <Text style={[styles.karmaLabel, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Followers</Text>
                         </View>
                         <View style={styles.statItem}>
-                            <Text style={[styles.karmaAmount, { color: textColor }]}>{followingCount !== null ? followingCount : '--'}</Text>
+                            {isLoadingCounts ? (
+                                <ActivityIndicator size="small" color={textColor} />
+                            ) : (
+                                <Text style={[styles.karmaAmount, { color: textColor }]}>{followingCount !== null ? followingCount : '--'}</Text>
+                            )}
                             <Text style={[styles.karmaLabel, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Following</Text>
                         </View>
                     </View>
@@ -194,15 +323,49 @@ const styles = StyleSheet.create({
     avatarRow: { flexDirection: 'row', alignItems: 'flex-end', marginTop: -56, paddingHorizontal: 20, justifyContent: 'space-between', zIndex: 2 },
     avatarWrapper: { borderWidth: 5, borderColor: '#fff', borderRadius: 64, overflow: 'hidden', backgroundColor: '#fff', },
     actionButtonWrapper: { flex: 1, alignItems: 'flex-end', justifyContent: 'flex-end' },
-    actionButton: { backgroundColor: '#fff', color: '#d169e5', borderWidth: 1, borderColor: '#d169e5', borderRadius: 24, paddingVertical: 7, paddingHorizontal: 22, fontWeight: 'bold', fontSize: 16, marginBottom: 8, elevation: 2, shadowColor: '#d169e5', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.08, shadowRadius: 2 },
-    header: { alignItems: 'flex-start', paddingTop: 18, paddingBottom: 24, width: '100%', paddingHorizontal: 20 },
+    actionButton: {
+        backgroundColor: '#fff',
+        borderWidth: 1,
+        borderColor: '#d169e5',
+        borderRadius: 24,
+        paddingVertical: 7,
+        paddingHorizontal: 22,
+        marginBottom: 8,
+        elevation: 2,
+        shadowColor: '#d169e5',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.08,
+        shadowRadius: 2
+    },
+    actionButtonText: {
+        color: '#d169e5',
+        fontWeight: 'bold',
+        fontSize: 16
+    },
+    header: { alignItems: 'flex-start', width: '100%', paddingHorizontal: 20 },
     displayName: { fontSize: 24, fontWeight: 'bold', marginTop: 10, marginBottom: 2, letterSpacing: 0.1 },
     subText: { fontSize: 16, marginBottom: 2, color: '#a0a0a0' },
-    bio: { fontSize: 16, marginTop: 10, marginBottom: 10, color: '#666', fontStyle: 'italic', lineHeight: 22 },
-    infoRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 10, flexWrap: 'wrap' },
-    infoItem: { flexDirection: 'row', alignItems: 'center', marginRight: 28, marginBottom: 4, minWidth: 120 },
-    infoText: { fontSize: 15 },
+    bio: { fontSize: 16, marginTop: 10, marginBottom: 10, color: '#666', lineHeight: 22 },
+    infoGrid: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+        flexWrap: 'wrap'
+    },
+    infoGridItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginRight: 24,
+        marginBottom: 4
+    },
+    infoGridText: {
+        fontSize: 15
+    },
     divider: { height: 1, backgroundColor: '#e0e0e0', width: '100%', marginVertical: 14 },
+    linksMore: {
+        fontSize: 15,
+        marginLeft: 4
+    },
     statsRow: { width: '100%', flex: 1, flexDirection: 'row', alignItems: 'center', marginTop: 6, marginBottom: 2, justifyContent: 'space-between' },
     statItem: { flex: 1, alignItems: 'center', minWidth: 50, marginBottom: 12 },
     karmaLabel: { fontSize: 14, marginBottom: 2, textAlign: 'center', color: '#a0a0a0' },

package/src/ui/screens/UserLinksScreen.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, Linking } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { BaseScreenProps } from '../navigation/types';
+import { Header, GroupedSection } from '../components';
+
+interface UserLinksScreenProps extends BaseScreenProps {
+    userId: string;
+    links: Array<{
+        url: string;
+        title?: string;
+        description?: string;
+        image?: string;
+        id: string;
+    }>;
+}
+
+const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
+    userId,
+    links,
+    theme,
+    goBack,
+    navigate
+}) => {
+    const isDarkTheme = theme === 'dark';
+    const themeStyles = {
+        backgroundColor: isDarkTheme ? '#000' : '#f2f2f2',
+        textColor: isDarkTheme ? '#fff' : '#333',
+        primaryColor: '#007AFF',
+    };
+
+    const handleLinkPress = async (url: string) => {
+        try {
+            await Linking.openURL(url);
+        } catch (error) {
+            console.error('Error opening link:', error);
+        }
+    };
+
+    const groupedItems = links.map((link) => ({
+        id: link.id,
+        icon: link.image ? undefined : 'link',
+        iconColor: '#32D74B',
+        image: link.image || undefined,
+        imageSize: 40,
+        title: link.title || link.url,
+        subtitle: link.description || link.url,
+        onPress: () => handleLinkPress(link.url),
+        multiRow: true,
+    }));
+
+    return (
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+            <Header
+                title="Links"
+                subtitle={`${links.length} link${links.length !== 1 ? 's' : ''}`}
+                theme={theme}
+                onBack={goBack}
+                elevation="subtle"
+            />
+
+            <ScrollView style={styles.content}>
+                <View style={styles.section}>
+                    <Text style={[styles.sectionTitle, { color: themeStyles.textColor }]}>Links</Text>
+
+                    <GroupedSection
+                        items={groupedItems}
+                        theme={theme}
+                    />
+                </View>
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#f2f2f2',
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+    section: {
+        marginBottom: 24,
+    },
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 12,
+    },
+});
+
+export default UserLinksScreen; 

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, StyleSheet, ScrollView, Platform } from 'react-native';
 import { BaseScreenProps } from '../../navigation/types';
+import { Header } from '../../components';
 
 const KarmaAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const isDarkTheme = theme === 'dark';
@@ -10,7 +11,13 @@ const KarmaAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
 
     return (
         <View style={[styles.container, { backgroundColor }]}>
-            <Text style={[styles.title, { color: textColor }]}>About Karma</Text>
+            <Header
+                title="About Karma"
+                subtitle="Learn about the karma system"
+                theme={theme}
+                onBack={goBack}
+                elevation="subtle"
+            />
             <ScrollView contentContainerStyle={styles.contentContainer}>
                 <Text style={[styles.paragraph, { color: textColor }]}>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 }]}>How to Earn Karma</Text>
@@ -37,7 +44,7 @@ const styles = StyleSheet.create({
         margin: 24,
         marginBottom: 24,
     },
-    contentContainer: { padding: 24 },
+    contentContainer: { padding: 24, paddingTop: 20 },
     section: { fontSize: 18, fontWeight: 'bold', marginTop: 24, marginBottom: 8 },
     paragraph: { fontSize: 16, marginBottom: 12 },
 });

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

@@ -16,7 +16,6 @@ import Avatar from '../../components/Avatar';
 import { Ionicons } from '@expo/vector-icons';
 
 const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
-    onClose,
     theme,
     navigate,
     goBack,
@@ -137,11 +136,6 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
                 </View>
                 {error && <Text style={{ color: '#D32F2F', marginTop: 16, textAlign: 'center' }}>{error}</Text>}
             </ScrollView>
-            <View style={styles.footer}>
-                <TouchableOpacity style={styles.closeButton} onPress={onClose}>
-                    <Text style={[styles.closeButtonText, { color: primaryColor }]}>Close</Text>
-                </TouchableOpacity>
-            </View>
         </View>
     );
 };
@@ -247,20 +241,7 @@ const styles = StyleSheet.create({
         fontSize: 13,
         marginTop: 2,
     },
-    footer: {
-        padding: 16,
-        borderTopWidth: 1,
-        borderTopColor: '#E0E0E0',
-        alignItems: 'center',
-    },
-    closeButton: {
-        paddingVertical: 8,
-        paddingHorizontal: 16,
-    },
-    closeButtonText: {
-        fontSize: 16,
-        fontWeight: '600',
-    },
+
     message: {
         fontSize: 16,
         textAlign: 'center',