@oxyhq/services 5.7.5 → 5.8.2

package/src/ui/screens/internal/SignInUsernameStep.tsx

@@ -14,7 +14,6 @@ interface SignInUsernameStepProps {
     isAddAccountMode: boolean;
     user: any;
     errorMessage: string;
-    inputScaleAnim: Animated.Value;
     isInputFocused: boolean;
     username: string;
     validationStatus: 'idle' | 'validating' | 'valid' | 'invalid';
@@ -36,7 +35,6 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
     isAddAccountMode,
     user,
     errorMessage,
-    inputScaleAnim,
     isInputFocused,
     username,
     validationStatus,
@@ -88,14 +86,11 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
                     </Text>
                 </View>
             )}
-            <Animated.View style={[
-                styles.modernInputContainer,
-                { transform: [{ scale: inputScaleAnim }] }
-            ]}>
+            <View style={styles.modernInputContainer}>
                 <TextField
                     ref={inputRef}
                     label="Username"
-                    icon="person-outline"
+                    leading={<Ionicons name="person-outline" size={24} color={colors.secondaryText} />}
                     value={username}
                     onChangeText={handleUsernameChange}
                     onFocus={handleInputFocus}
@@ -103,16 +98,14 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
                     autoCapitalize="none"
                     autoCorrect={false}
                     testID="username-input"
-                    colors={colors}
                     variant="filled"
                     error={validationStatus === 'invalid' ? errorMessage : undefined}
                     loading={validationStatus === 'validating'}
                     success={validationStatus === 'valid'}
-                    validMessage={validationStatus === 'valid' && userProfile ? `Welcome back, ${userProfile.displayName || userProfile.name || username}!` : undefined}
                     onSubmitEditing={handleUsernameContinue}
                     autoFocus
                 />
-            </Animated.View>
+            </View>
             <GroupedPillButtons
                 buttons={[
                     {

package/src/ui/screens/internal/SignUpIdentityStep.tsx

@@ -55,7 +55,7 @@ const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
             </View>
             <TextField
                 ref={inputRef}
-                icon="person-outline"
+                leading={<Ionicons name="person-outline" size={24} color={colors.secondaryText} />}
                 label="Username"
                 value={formData.username}
                 onChangeText={(text) => {
@@ -65,18 +65,16 @@ const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
                 autoCapitalize="none"
                 autoCorrect={false}
                 testID="username-input"
-                colors={colors}
                 variant="filled"
                 error={validationState.status === 'invalid' ? validationState.message : undefined}
                 loading={validationState.status === 'validating'}
                 success={validationState.status === 'valid'}
-                validMessage={validationState.status === 'valid' ? 'Looks good!' : undefined}
                 onSubmitEditing={handleIdentityNext}
                 autoFocus
             />
             <ValidationMessage validationState={validationState} colors={colors} styles={styles} />
             <TextField
-                icon="mail-outline"
+                leading={<Ionicons name="mail-outline" size={24} color={colors.secondaryText} />}
                 label="Email"
                 value={formData.email}
                 onChangeText={(text) => {
@@ -86,7 +84,6 @@ const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
                 autoCapitalize="none"
                 autoCorrect={false}
                 testID="email-input"
-                colors={colors}
                 variant="filled"
                 error={formData.email && !validateEmail(formData.email) ? 'Please enter a valid email address' : undefined}
             />

package/src/ui/screens/internal/SignUpSecurityStep.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useCallback, useEffect } from 'react';
 import { View, Text, Animated, TextInput } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import TextField from '../../components/internal/TextField';
 
@@ -78,7 +79,7 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
             </View>
             <TextField
                 ref={passwordRef}
-                icon="lock-closed-outline"
+                leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
                 label="Password"
                 value={formData.password}
                 onChangeText={text => updateField('password', text)}
@@ -86,7 +87,6 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
                 autoCapitalize="none"
                 autoCorrect={false}
                 testID="password-input"
-                colors={colors}
                 variant="filled"
                 error={formData.password && typeof formData.password === 'string' && !validatePassword(formData.password) ? `Password must be at least ${PASSWORD_MIN_LENGTH} characters` : undefined}
                 onSubmitEditing={() => confirmPasswordRef.current?.focus()}
@@ -95,7 +95,7 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
             <Text style={[styles.passwordHint, { color: colors.secondaryText }]}>Password must be at least {PASSWORD_MIN_LENGTH} characters long</Text>
             <TextField
                 ref={confirmPasswordRef}
-                icon="lock-closed-outline"
+                leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
                 label="Confirm Password"
                 value={formData.confirmPassword}
                 onChangeText={text => updateField('confirmPassword', text)}
@@ -103,7 +103,6 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
                 autoCapitalize="none"
                 autoCorrect={false}
                 testID="confirm-password-input"
-                colors={colors}
                 variant="filled"
                 error={formData.confirmPassword && typeof formData.confirmPassword === 'string' && !validatePasswordsMatch(formData.password, formData.confirmPassword) ? 'Passwords do not match' : undefined}
                 onSubmitEditing={handleSecurityNext}

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',

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

@@ -2,6 +2,7 @@ import React, { useState, useMemo, useCallback } from 'react';
 import { View, Text, StyleSheet, ScrollView, Platform, TouchableOpacity, TextInput, LayoutAnimation, UIManager } from 'react-native';
 import { BaseScreenProps } from '../../navigation/types';
 import { Ionicons } from '@expo/vector-icons';
+import { Header } from '../../components';
 
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
     UIManager.setLayoutAnimationEnabledExperimental(true);
@@ -79,7 +80,14 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
 
     return (
         <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
-            <Text style={[styles.title, { color: themeStyles.textColor }]}>Karma FAQ</Text>
+            <Header
+                title="Karma FAQ"
+                subtitle="Frequently asked questions about karma"
+                subtitleVariant="muted"
+                theme={theme}
+                onBack={goBack}
+                elevation="subtle"
+            />
             <View style={[styles.searchBar, { backgroundColor: themeStyles.inputBg, borderColor: themeStyles.inputBorder }]}>
                 <Ionicons name="search-outline" size={20} color={themeStyles.primaryColor} style={{ marginRight: 8 }} />
                 <TextInput
@@ -91,31 +99,37 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                     returnKeyType="search"
                 />
             </View>
-            <ScrollView contentContainerStyle={styles.contentContainer} keyboardShouldPersistTaps="handled">
+            <ScrollView contentContainerStyle={styles.contentContainer}>
                 {filteredFaqs.length === 0 ? (
-                    <Text style={[styles.noResults, { color: themeStyles.textColor }]}>No results found.</Text>
+                    <Text style={[styles.noResults, { color: themeStyles.textColor }]}>
+                        No FAQ items found matching "{search}"
+                    </Text>
                 ) : (
-                    filteredFaqs.map((item, idx) => {
-                        const isOpen = expanded === idx;
-                        return (
-                            <TouchableOpacity
-                                key={idx}
-                                style={[styles.card, { backgroundColor: themeStyles.cardColor, shadowColor: themeStyles.isDarkTheme ? '#000' : '#d169e5' }]}
-                                activeOpacity={0.95}
-                                onPress={() => handleToggle(idx)}
-                            >
-                                <View style={styles.questionRow}>
-                                    <Ionicons name={isOpen ? 'chevron-down' : 'chevron-forward'} size={22} color={themeStyles.primaryColor} style={{ marginRight: 8 }} />
-                                    <Text style={[styles.question, { color: themeStyles.primaryColor }]}>{item.q}</Text>
-                                </View>
-                                {isOpen && (
-                                    <Text style={[styles.answer, { color: themeStyles.textColor }]}>{item.a}</Text>
-                                )}
-                            </TouchableOpacity>
-                        );
-                    })
+                    filteredFaqs.map((faq, idx) => (
+                        <TouchableOpacity
+                            key={idx}
+                            style={[styles.card, { backgroundColor: themeStyles.cardColor }]}
+                            onPress={() => handleToggle(idx)}
+                            activeOpacity={0.7}
+                        >
+                            <View style={styles.questionRow}>
+                                <Text style={[styles.question, { color: themeStyles.textColor }]}>
+                                    {faq.q}
+                                </Text>
+                                <Ionicons
+                                    name={expanded === idx ? 'chevron-up' : 'chevron-down'}
+                                    size={20}
+                                    color={themeStyles.primaryColor}
+                                />
+                            </View>
+                            {expanded === idx && (
+                                <Text style={[styles.answer, { color: themeStyles.textColor }]}>
+                                    {faq.a}
+                                </Text>
+                            )}
+                        </TouchableOpacity>
+                    ))
                 )}
-                <Text style={[styles.paragraph, { color: themeStyles.textColor, marginTop: 32, textAlign: 'center' }]}>Still have questions? Contact support!</Text>
             </ScrollView>
         </View>
     );
@@ -146,7 +160,7 @@ const styles = StyleSheet.create({
         fontSize: 16,
         height: 44,
     },
-    contentContainer: { padding: 24, paddingBottom: 40 },
+    contentContainer: { padding: 24, paddingTop: 20, paddingBottom: 40 },
     card: {
         borderRadius: 18,
         padding: 20,
@@ -159,11 +173,13 @@ const styles = StyleSheet.create({
     questionRow: {
         flexDirection: 'row',
         alignItems: 'center',
+        justifyContent: 'space-between',
         marginBottom: 8,
     },
     question: {
         fontSize: 17,
         fontWeight: 'bold',
+        flex: 1,
     },
     answer: {
         fontSize: 16,

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

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity
 import { BaseScreenProps } from '../../navigation/types';
 import { useOxy } from '../../context/OxyContext';
 import Avatar from '../../components/Avatar';
+import { Header } from '../../components';
 
 const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navigate }) => {
     const { oxyServices } = useOxy();
@@ -26,7 +27,13 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
 
     return (
         <View style={[styles.container, { backgroundColor }]}>
-            <Text style={[styles.title, { color: textColor }]}>Karma Leaderboard</Text>
+            <Header
+                title="Karma Leaderboard"
+                subtitle="Top contributors in the community"
+                theme={theme}
+                onBack={goBack}
+                elevation="subtle"
+            />
             {isLoading ? (
                 <ActivityIndicator size="large" color={primaryColor} style={{ marginTop: 40 }} />
             ) : error ? (
@@ -58,8 +65,7 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
 
 const styles = StyleSheet.create({
     container: { flex: 1 },
-    title: { fontSize: 24, fontWeight: 'bold', margin: 24, textAlign: 'center' },
-    listContainer: { paddingBottom: 40 },
+    listContainer: { paddingBottom: 40, paddingTop: 20 },
     row: {
         flexDirection: 'row',
         alignItems: 'center',

package/src/ui/screens/karma/KarmaRewardsScreen.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 KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const isDarkTheme = theme === 'dark';
@@ -11,7 +12,13 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     // Placeholder: In a real app, fetch rewards from API
     return (
         <View style={[styles.container, { backgroundColor }]}>
-            <Text style={[styles.title, { color: textColor }]}>Karma Rewards</Text>
+            <Header
+                title="Karma Rewards"
+                subtitle="Unlock special features and recognition"
+                theme={theme}
+                onBack={goBack}
+                elevation="subtle"
+            />
             <ScrollView contentContainerStyle={styles.contentContainer}>
                 <Text style={[styles.paragraph, { color: textColor }]}>Unlock special features and recognition by earning karma!</Text>
                 <View style={styles.rewardBox}>
@@ -34,8 +41,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
 
 const styles = StyleSheet.create({
     container: { flex: 1 },
-    title: { fontSize: 24, fontWeight: 'bold', margin: 24, textAlign: 'center' },
-    contentContainer: { padding: 24 },
+    contentContainer: { padding: 24, paddingTop: 20 },
     rewardBox: {
         backgroundColor: '#f7eaff',
         borderRadius: 16,

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

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
 import { BaseScreenProps } from '../../navigation/types';
 import { useOxy } from '../../context/OxyContext';
+import { Header } from '../../components';
 
 const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const { oxyServices } = useOxy();
@@ -25,7 +26,13 @@ const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
 
     return (
         <View style={[styles.container, { backgroundColor }]}>
-            <Text style={[styles.title, { color: textColor }]}>Karma Rules</Text>
+            <Header
+                title="Karma Rules"
+                subtitle="How to earn karma points"
+                theme={theme}
+                onBack={goBack}
+                elevation="subtle"
+            />
             {isLoading ? (
                 <ActivityIndicator size="large" color={primaryColor} style={{ marginTop: 40 }} />
             ) : error ? (
@@ -49,8 +56,7 @@ const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
 
 const styles = StyleSheet.create({
     container: { flex: 1 },
-    title: { fontSize: 24, fontWeight: 'bold', margin: 24, textAlign: 'center' },
-    listContainer: { paddingBottom: 40 },
+    listContainer: { paddingBottom: 40, paddingTop: 20 },
     ruleRow: {
         paddingVertical: 14,
         paddingHorizontal: 24,

package/src/ui/stores/authStore.ts

@@ -6,39 +6,66 @@ interface AuthState {
   isAuthenticated: boolean;
   isLoading: boolean;
   error: string | null;
+  lastUserFetch: number | null; // Timestamp of last user fetch for caching
   loginStart: () => void;
   loginSuccess: (user: User) => void;
   loginFailure: (error: string) => void;
   logout: () => void;
-  fetchUser: (oxyServices: any) => Promise<void>;
+  fetchUser: (oxyServices: any, forceRefresh?: boolean) => Promise<void>;
   updateUser: (updates: Partial<User>, oxyServices: any) => Promise<void>;
+  setUser: (user: User) => void; // Direct user setter for caching
 }
 
-export const useAuthStore = create<AuthState>((set: (state: Partial<AuthState>) => void) => ({
+export const useAuthStore = create<AuthState>((set: (state: Partial<AuthState>) => void, get: () => AuthState) => ({
   user: null,
   isAuthenticated: false,
   isLoading: false,
   error: null,
+  lastUserFetch: null,
   loginStart: () => set({ isLoading: true, error: null }),
-  loginSuccess: (user: User) => set({ isLoading: false, isAuthenticated: true, user }),
+  loginSuccess: (user: User) => set({ isLoading: false, isAuthenticated: true, user, lastUserFetch: Date.now() }),
   loginFailure: (error: string) => set({ isLoading: false, error }),
-  logout: () => set({ user: null, isAuthenticated: false }),
-  fetchUser: async (oxyServices) => {
+  logout: () => set({ user: null, isAuthenticated: false, lastUserFetch: null }),
+  setUser: (user: User) => set({ user, lastUserFetch: Date.now() }),
+  fetchUser: async (oxyServices, forceRefresh = false) => {
+    const state = get();
+    const now = Date.now();
+    const cacheAge = state.lastUserFetch ? now - state.lastUserFetch : Infinity;
+    const cacheValid = cacheAge < 5 * 60 * 1000; // 5 minutes cache
+
+    // Use cached data if available and not forcing refresh
+    if (!forceRefresh && state.user && cacheValid) {
+      console.log('AuthStore: Using cached user data (age:', cacheAge, 'ms)');
+      return;
+    }
+
     set({ isLoading: true, error: null });
     try {
+      console.log('AuthStore: Fetching user data...');
       const user = await oxyServices.getCurrentUser();
-      set({ user, isLoading: false, isAuthenticated: true });
+      console.log('AuthStore: Received user data:', {
+        hasUser: !!user,
+        userLinksMetadata: user?.linksMetadata,
+        userLinks: user?.links,
+        userWebsite: user?.website
+      });
+      set({ user, isLoading: false, isAuthenticated: true, lastUserFetch: now });
     } catch (error: any) {
+      console.error('AuthStore: Error fetching user:', error);
       set({ error: error.message || 'Failed to fetch user', isLoading: false });
     }
   },
   updateUser: async (updates, oxyServices) => {
     set({ isLoading: true, error: null });
     try {
+      console.log('AuthStore: Updating user with:', updates);
       await oxyServices.updateProfile(updates);
+      console.log('AuthStore: Profile updated successfully');
       // Immediately fetch the latest user data after update
-      await useAuthStore.getState().fetchUser(oxyServices);
+      await useAuthStore.getState().fetchUser(oxyServices, true); // Force refresh
+      console.log('AuthStore: User data refreshed');
     } catch (error: any) {
+      console.error('AuthStore: Error updating user:', error);
       set({ error: error.message || 'Failed to update user', isLoading: false });
     }
   },

package/src/ui/stores/followStore.ts

@@ -6,11 +6,21 @@ interface FollowState {
   loadingUsers: Record<string, boolean>;
   fetchingUsers: Record<string, boolean>;
   errors: Record<string, string | null>;
+  // Follower counts for each user
+  followerCounts: Record<string, number>;
+  followingCounts: Record<string, number>;
+  // Loading states for counts
+  loadingCounts: Record<string, boolean>;
   setFollowingStatus: (userId: string, isFollowing: boolean) => void;
   clearFollowError: (userId: string) => void;
   resetFollowState: () => void;
   fetchFollowStatus: (userId: string, oxyServices: OxyServices) => Promise<void>;
   toggleFollowUser: (userId: string, oxyServices: OxyServices, isCurrentlyFollowing: boolean) => Promise<void>;
+  // New methods for follower counts
+  setFollowerCount: (userId: string, count: number) => void;
+  setFollowingCount: (userId: string, count: number) => void;
+  updateCountsFromFollowAction: (targetUserId: string, action: 'follow' | 'unfollow', counts: { followers: number; following: number }, currentUserId?: string) => void;
+  fetchUserCounts: (userId: string, oxyServices: OxyServices) => Promise<void>;
 }
 
 export const useFollowStore = create<FollowState>((set: any, get: any) => ({
@@ -18,6 +28,9 @@ export const useFollowStore = create<FollowState>((set: any, get: any) => ({
   loadingUsers: {},
   fetchingUsers: {},
   errors: {},
+  followerCounts: {},
+  followingCounts: {},
+  loadingCounts: {},
   setFollowingStatus: (userId: string, isFollowing: boolean) => set((state: FollowState) => ({
     followingUsers: { ...state.followingUsers, [userId]: isFollowing },
     errors: { ...state.errors, [userId]: null },
@@ -30,6 +43,9 @@ export const useFollowStore = create<FollowState>((set: any, get: any) => ({
     loadingUsers: {},
     fetchingUsers: {},
     errors: {},
+    followerCounts: {},
+    followingCounts: {},
+    loadingCounts: {},
   }),
   fetchFollowStatus: async (userId: string, oxyServices: OxyServices) => {
     set((state: FollowState) => ({
@@ -56,7 +72,7 @@ export const useFollowStore = create<FollowState>((set: any, get: any) => ({
       errors: { ...state.errors, [userId]: null },
     }));
     try {
-      let response;
+      let response: any;
       let newFollowState;
       if (isCurrentlyFollowing) {
         response = await oxyServices.unfollowUser(userId);
@@ -65,11 +81,44 @@ export const useFollowStore = create<FollowState>((set: any, get: any) => ({
         response = await oxyServices.followUser(userId);
         newFollowState = true;
       }
+      
+      // Update follow status
       set((state: FollowState) => ({
         followingUsers: { ...state.followingUsers, [userId]: newFollowState },
         loadingUsers: { ...state.loadingUsers, [userId]: false },
         errors: { ...state.errors, [userId]: null },
       }));
+
+      // Update counts if the response includes them
+      // The API returns counts for both users:
+      // - followers: target user's follower count (the user being followed)
+      // - following: current user's following count (the user doing the following)
+      if (response && response.counts) {
+        const { counts } = response;
+        
+        // Get current user ID from oxyServices
+        const currentUserId = oxyServices.getCurrentUserId();
+        
+        set((state: FollowState) => {
+          const updates: any = {};
+          
+          // Update target user's follower count (the user being followed)
+          updates.followerCounts = { 
+            ...state.followerCounts, 
+            [userId]: counts.followers 
+          };
+          
+          // Update current user's following count (the user doing the following)
+          if (currentUserId) {
+            updates.followingCounts = { 
+              ...state.followingCounts, 
+              [currentUserId]: counts.following 
+            };
+          }
+          
+          return updates;
+        });
+      }
     } catch (error: any) {
       set((state: FollowState) => ({
         loadingUsers: { ...state.loadingUsers, [userId]: false },
@@ -77,4 +126,56 @@ export const useFollowStore = create<FollowState>((set: any, get: any) => ({
       }));
     }
   },
+  setFollowerCount: (userId: string, count: number) => set((state: FollowState) => ({
+    followerCounts: { ...state.followerCounts, [userId]: count },
+  })),
+  setFollowingCount: (userId: string, count: number) => set((state: FollowState) => ({
+    followingCounts: { ...state.followingCounts, [userId]: count },
+  })),
+  updateCountsFromFollowAction: (targetUserId: string, action: 'follow' | 'unfollow', counts: { followers: number; following: number }, currentUserId?: string) => {
+    set((state: FollowState) => {
+      const updates: any = {};
+      
+      // Update target user's follower count (the user being followed)
+      updates.followerCounts = { 
+        ...state.followerCounts, 
+        [targetUserId]: counts.followers 
+      };
+      
+      // Update current user's following count (the user doing the following)
+      if (currentUserId) {
+        updates.followingCounts = { 
+          ...state.followingCounts, 
+          [currentUserId]: counts.following 
+        };
+      }
+      
+      return updates;
+    });
+  },
+  fetchUserCounts: async (userId: string, oxyServices: OxyServices) => {
+    set((state: FollowState) => ({
+      loadingCounts: { ...state.loadingCounts, [userId]: true },
+    }));
+    try {
+      const user = await oxyServices.getUserById(userId);
+      if (user && user._count) {
+        set((state: FollowState) => ({
+          followerCounts: { 
+            ...state.followerCounts, 
+            [userId]: user._count.followers || 0 
+          },
+          followingCounts: { 
+            ...state.followingCounts, 
+            [userId]: user._count.following || 0 
+          },
+          loadingCounts: { ...state.loadingCounts, [userId]: false },
+        }));
+      }
+    } catch (error: any) {
+      set((state: FollowState) => ({
+        loadingCounts: { ...state.loadingCounts, [userId]: false },
+      }));
+    }
+  },
 }));