@oxyhq/services 5.5.8 → 5.6.0

package/src/ui/components/internal/PinInput.tsx

@@ -0,0 +1,102 @@
+import React, { useRef } from 'react';
+import { View, TextInput, StyleSheet, Platform } from 'react-native';
+
+interface PinInputProps {
+    value: string;
+    onChange: (val: string) => void;
+    length?: number;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    colors: any;
+}
+
+const PinInput: React.FC<PinInputProps> = ({ value, onChange, length = 6, disabled, autoFocus, colors }) => {
+    const inputs = useRef<Array<TextInput | null>>([]);
+
+    const handleChange = (text: string, idx: number) => {
+        if (!/^[0-9]*$/.test(text)) return;
+        let newValue = value.split('');
+        if (text.length > 1) {
+            // Paste or autofill
+            newValue = text.split('').slice(0, length);
+            onChange(newValue.join(''));
+            if (newValue.length < length) {
+                inputs.current[newValue.length]?.focus();
+            }
+            return;
+        }
+        newValue[idx] = text;
+        const joined = newValue.join('').slice(0, length);
+        onChange(joined);
+        if (text && idx < length - 1) {
+            inputs.current[idx + 1]?.focus();
+        }
+    };
+
+    const handleKeyPress = (e: any, idx: number) => {
+        if (e.nativeEvent.key === 'Backspace' && !value[idx] && idx > 0) {
+            inputs.current[idx - 1]?.focus();
+        }
+    };
+
+    return (
+        <View style={styles.pinContainer}>
+            {Array.from({ length }).map((_, idx) => (
+                <TextInput
+                    key={idx}
+                    ref={ref => (inputs.current[idx] = ref)}
+                    style={[
+                        styles.pinInput,
+                        { borderColor: colors.primary, color: colors.text, backgroundColor: colors.inputBackground },
+                        value[idx] ? { borderWidth: 2 } : { borderWidth: 1 },
+                    ]}
+                    value={value[idx] || ''}
+                    onChangeText={text => handleChange(text, idx)}
+                    onKeyPress={e => handleKeyPress(e, idx)}
+                    keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'}
+                    maxLength={1}
+                    editable={!disabled}
+                    autoFocus={autoFocus && idx === 0}
+                    textAlign="center"
+                    selectionColor={colors.primary}
+                    returnKeyType="done"
+                />
+            ))}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    pinContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: 12,
+        marginBottom: 24,
+        marginTop: 8,
+    },
+    pinInput: {
+        width: 44,
+        height: 54,
+        borderRadius: 12,
+        borderWidth: 1,
+        fontSize: 28,
+        fontWeight: '600',
+        backgroundColor: '#F5F5F5',
+        textAlign: 'center',
+        marginHorizontal: 2,
+        ...Platform.select({
+            web: {
+                boxShadow: '0 1px 4px rgba(0,0,0,0.04)',
+            },
+            default: {
+                shadowColor: '#000',
+                shadowOpacity: 0.04,
+                shadowOffset: { width: 0, height: 1 },
+                shadowRadius: 4,
+                elevation: 1,
+            }
+        }),
+    },
+});
+
+export default PinInput; 

package/src/ui/components/internal/TextField.tsx

@@ -34,6 +34,7 @@ export interface TextFieldProps extends Omit<TextInputProps, 'style'> {
     onBlur?: () => void;
     onChangeText?: (text: string) => void;
     testID?: string;
+    validMessage?: string;
 }
 
 const TextField = forwardRef<TextInput, TextFieldProps>(({
@@ -57,6 +58,7 @@ const TextField = forwardRef<TextInput, TextFieldProps>(({
     testID,
     secureTextEntry,
     value = '',
+    validMessage,
     ...textInputProps
 }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
@@ -556,6 +558,13 @@ const TextField = forwardRef<TextInput, TextFieldProps>(({
                     </Text>
                 </View>
             )}
+            {/* Valid Message */}
+            {!error && validMessage && (
+                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 4, gap: 6 }}>
+                    <Ionicons name="checkmark-circle" size={16} color={colors?.success || '#2E7D32'} />
+                    <Text style={{ fontSize: 13, fontWeight: '500', color: colors?.success || '#2E7D32' }}>{validMessage}</Text>
+                </View>
+            )}
         </View>
     );
 });

package/src/ui/context/OxyContext.tsx

@@ -3,6 +3,8 @@ import { OxyServices } from '../../core';
 import { User } from '../../models/interfaces';
 import { SecureLoginResponse, SecureClientSession, MinimalUserData } from '../../models/secureSession';
 import { DeviceManager } from '../../utils/deviceManager';
+import { useSessionSocket } from '../hooks/useSessionSocket';
+import { toast } from '../../lib/sonner';
 
 // Define the context shape
 export interface OxyContextState {
@@ -35,9 +37,6 @@ export interface OxyContextState {
   oxyServices: OxyServices;
   bottomSheetRef?: React.RefObject<any>;
 
-  // API configuration
-  setApiUrl: (url: string) => void;
-
   // Methods to directly control the bottom sheet
   showBottomSheet?: (screenOrConfig?: string | { screen: string; props?: Record<string, any> }) => void;
   hideBottomSheet?: () => void;
@@ -170,17 +169,16 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
           let shouldUpdateStorage = false;
 
           for (const session of parsedSessions) {
-            if (!session.userId || !session.username) {
+            if (!session.userId) {
               // Session is missing user info, try to fetch it
               try {
                 const sessionUser = await oxyServices.getUserBySession(session.sessionId);
                 migratedSessions.push({
                   ...session,
-                  userId: sessionUser.id,
-                  username: sessionUser.username
+                  userId: sessionUser.id
                 });
                 shouldUpdateStorage = true;
-                console.log(`Migrated session ${session.sessionId} for user ${sessionUser.username}`);
+                console.log(`Migrated session ${session.sessionId} for user ${sessionUser.id}`);
               } catch (error) {
                 // Session might be invalid, skip it
                 console.log(`Removing invalid session ${session.sessionId}:`, error);
@@ -359,13 +357,12 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
         deviceId: response.deviceId,
         expiresAt: response.expiresAt,
         lastActive: new Date().toISOString(),
-        userId: response.user.id,
-        username: response.user.username
+        userId: response.user.id
       };
 
       // Check if this user already has a session (prevent duplicate accounts)
       const existingUserSessionIndex = sessions.findIndex(s =>
-        s.userId === response.user.id || s.username === response.user.username
+        s.userId === response.user.id
       );
 
       let updatedSessions: SecureClientSession[];
@@ -376,7 +373,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
         updatedSessions = [...sessions];
         updatedSessions[existingUserSessionIndex] = clientSession;
 
-        console.log(`Reusing/updating existing session for user ${response.user.username}. Previous session: ${existingSession.sessionId}, New session: ${response.sessionId}`);
+        console.log(`Reusing/updating existing session for user ${response.user.id}. Previous session: ${existingSession.sessionId}, New session: ${response.sessionId}`);
 
         // If the replaced session was the active one, update active session
         if (activeSessionId === existingSession.sessionId) {
@@ -386,7 +383,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       } else {
         // Add new session for new user
         updatedSessions = [...sessions, clientSession];
-        console.log(`Added new session for user ${response.user.username} on device ${response.deviceId}`);
+        console.log(`Added new session for user ${response.user.id} on device ${response.deviceId}`);
       }
 
       setSessions(updatedSessions);
@@ -643,25 +640,29 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     }
   }, [bottomSheetRef]);
 
-  // API URL configuration
-  const setApiUrl = useCallback((url: string) => {
-    try {
-      oxyServices.setBaseURL(url);
-    } catch (error) {
-      console.error('Failed to update API URL:', error);
-      setError(`Failed to update API URL: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    }
-  }, [oxyServices]);
-
   // Compute comprehensive authentication status
   // This is the single source of truth for authentication across the entire app
   const isAuthenticated = useMemo(() => {
     // User is authenticated if:
     // 1. We have a full user object loaded, OR
-    // 2. We have an active session (token will be fetched on-demand)
+    // 2. We have an active session with a valid token
     // This covers both the loaded state and the loading-but-authenticated state
-    return !!user || !!activeSessionId;
-  }, [user, activeSessionId]);
+    return !!user || (!!activeSessionId && !!oxyServices?.getCurrentUserId());
+  }, [user, activeSessionId, oxyServices]);
+
+  // Integrate socket for real-time session updates
+  console.log('OxyContextProvider: userId', user?.id, 'baseURL', oxyServices.getBaseURL());
+  useSessionSocket({
+    userId: user?.id,
+    activeSessionId,
+    refreshSessions,
+    logout: () => logout(),
+    baseURL: oxyServices.getBaseURL(),
+    onRemoteSignOut: () => {
+      toast.info('You have been signed out remotely.');
+      logout();
+    },
+  });
 
   // Context value
   const contextValue: OxyContextState = {
@@ -683,7 +684,6 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     logoutAllDeviceSessions,
     updateDeviceName,
     oxyServices,
-    setApiUrl,
     bottomSheetRef,
     showBottomSheet,
     hideBottomSheet,

package/src/ui/hooks/index.ts

@@ -1,2 +1 @@
-export { useOxyFollow, useFollow } from './useOxyFollow';
-export { useAuthFetch } from './useAuthFetch'; 
+export { useFollow } from './useFollow'; 

package/src/ui/hooks/useFollow.ts

@@ -1,173 +1,102 @@
-import { useDispatch, useSelector } from 'react-redux';
 import { useCallback, useMemo } from 'react';
-import { toggleFollowUser, setFollowingStatus, clearFollowError, fetchFollowStatus } from '../store';
-import type { RootState } from '../store';
+import { useFollowStore } from '../stores/followStore';
 import { useOxy } from '../context/OxyContext';
 
-// Memoized selector to prevent unnecessary re-renders
-const createFollowSelector = (userId: string) => (state: RootState) => ({
-  isFollowing: state.follow.followingUsers[userId] ?? false,
-  isLoading: state.follow.loadingUsers[userId] ?? false,
-  error: state.follow.errors[userId] ?? null,
-});
-
-// Memoized selector for multiple users
-const createMultipleFollowSelector = (userIds: string[]) => (state: RootState) => {
-  const followData: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }> = {};
-  const followState = state.follow;
-  
-  for (const userId of userIds) {
-    followData[userId] = {
-      isFollowing: followState.followingUsers[userId] ?? false,
-      isLoading: followState.loadingUsers[userId] ?? false,
-      error: followState.errors[userId] ?? null,
-    };
-  }
-  
-  return {
-    followData,
-    isAnyLoading: userIds.some(uid => followState.loadingUsers[uid]),
-    hasAnyError: userIds.some(uid => followState.errors[uid]),
-    allFollowing: userIds.every(uid => followState.followingUsers[uid]),
-    allNotFollowing: userIds.every(uid => !followState.followingUsers[uid]),
-  };
-};
-
-/**
- * Custom hook for managing follow/unfollow functionality
- * Optimized to prevent unnecessary re-renders
- * Can handle both single user and multiple users
- */
 export const useFollow = (userId?: string | string[]) => {
-  const dispatch = useDispatch();
   const { oxyServices } = useOxy();
-  
-  // Memoize user IDs to prevent recreation on every render
-  const userIds = useMemo(() => {
-    return Array.isArray(userId) ? userId : userId ? [userId] : [];
-  }, [userId]);
-  
+  const userIds = useMemo(() => (Array.isArray(userId) ? userId : userId ? [userId] : []), [userId]);
   const isSingleUser = typeof userId === 'string';
-  
-  // Memoize selectors to prevent recreation
-  const singleUserSelector = useMemo(() => {
-    return isSingleUser && userId ? createFollowSelector(userId) : null;
-  }, [isSingleUser, userId]);
-  
-  const multipleUserSelector = useMemo(() => {
-    return !isSingleUser ? createMultipleFollowSelector(userIds) : null;
-  }, [isSingleUser, userIds]);
-  
-  // Use appropriate selector based on mode
-  const singleUserData = useSelector(singleUserSelector || (() => ({ isFollowing: false, isLoading: false, error: null })));
-  const multipleUserData = useSelector(multipleUserSelector || (() => ({ 
-    followData: {}, 
-    isAnyLoading: false, 
-    hasAnyError: false, 
-    allFollowing: false, 
-    allNotFollowing: true 
-  })));
-
-  // Memoized callbacks to prevent recreation on every render
+
+  // Zustand selectors
+  const followState = useFollowStore();
+
+  // Single user helpers
+  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;
+
   const toggleFollow = useCallback(async () => {
     if (!isSingleUser || !userId) throw new Error('toggleFollow is only available for single user mode');
-    
-    try {
-      const result = await dispatch(toggleFollowUser({
-        userId,
-        oxyServices,
-        isCurrentlyFollowing: singleUserData.isFollowing
-      })).unwrap();
-      return result;
-    } catch (error) {
-      throw error;
-    }
-  }, [dispatch, userId, oxyServices, singleUserData.isFollowing, isSingleUser]);
+    await followState.toggleFollowUser(userId, oxyServices, isFollowing);
+  }, [isSingleUser, userId, followState, oxyServices, isFollowing]);
 
   const setFollowStatus = useCallback((following: boolean) => {
     if (!isSingleUser || !userId) throw new Error('setFollowStatus is only available for single user mode');
-    dispatch(setFollowingStatus({ userId, isFollowing: following }));
-  }, [dispatch, userId, isSingleUser]);
+    followState.setFollowingStatus(userId, following);
+  }, [isSingleUser, userId, followState]);
 
   const fetchStatus = useCallback(async () => {
     if (!isSingleUser || !userId) throw new Error('fetchStatus is only available for single user mode');
-    
-    try {
-      await dispatch(fetchFollowStatus({ userId, oxyServices })).unwrap();
-    } catch (error) {
-      console.warn(`Failed to fetch follow status for user ${userId}:`, error);
-    }
-  }, [dispatch, userId, oxyServices, isSingleUser]);
+    await followState.fetchFollowStatus(userId, oxyServices);
+  }, [isSingleUser, userId, followState, oxyServices]);
 
   const clearError = useCallback(() => {
     if (!isSingleUser || !userId) throw new Error('clearError is only available for single user mode');
-    dispatch(clearFollowError(userId));
-  }, [dispatch, userId, isSingleUser]);
+    followState.clearFollowError(userId);
+  }, [isSingleUser, userId, followState]);
+
+  // Multiple user helpers
+  const followData = useMemo(() => {
+    const data: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }> = {};
+    userIds.forEach(uid => {
+      data[uid] = {
+        isFollowing: followState.followingUsers[uid] ?? false,
+        isLoading: followState.loadingUsers[uid] ?? false,
+        error: followState.errors[uid] ?? null,
+      };
+    });
+    return data;
+  }, [userIds, followState.followingUsers, followState.loadingUsers, followState.errors]);
 
-  // Multiple user callbacks
   const toggleFollowForUser = useCallback(async (targetUserId: string) => {
-    const currentState = multipleUserData.followData[targetUserId]?.isFollowing ?? false;
-    try {
-      const result = await dispatch(toggleFollowUser({
-        userId: targetUserId,
-        oxyServices,
-        isCurrentlyFollowing: currentState
-      })).unwrap();
-      return result;
-    } catch (error) {
-      throw error;
-    }
-  }, [dispatch, oxyServices, multipleUserData.followData]);
+    const currentState = followState.followingUsers[targetUserId] ?? false;
+    await followState.toggleFollowUser(targetUserId, oxyServices, currentState);
+  }, [followState, oxyServices]);
 
   const setFollowStatusForUser = useCallback((targetUserId: string, following: boolean) => {
-    dispatch(setFollowingStatus({ userId: targetUserId, isFollowing: following }));
-  }, [dispatch]);
+    followState.setFollowingStatus(targetUserId, following);
+  }, [followState]);
 
   const fetchStatusForUser = useCallback(async (targetUserId: string) => {
-    try {
-      await dispatch(fetchFollowStatus({ userId: targetUserId, oxyServices })).unwrap();
-    } catch (error) {
-      console.warn(`Failed to fetch follow status for user ${targetUserId}:`, error);
-    }
-  }, [dispatch, oxyServices]);
+    await followState.fetchFollowStatus(targetUserId, oxyServices);
+  }, [followState, oxyServices]);
 
   const fetchAllStatuses = useCallback(async () => {
-    const promises = userIds.map(uid => 
-      dispatch(fetchFollowStatus({ userId: uid, oxyServices })).unwrap().catch((error: any) => {
-        console.warn(`Failed to fetch follow status for user ${uid}:`, error);
-      })
-    );
-    await Promise.all(promises);
-  }, [dispatch, userIds, oxyServices]);
+    await Promise.all(userIds.map(uid => followState.fetchFollowStatus(uid, oxyServices)));
+  }, [userIds, followState, oxyServices]);
 
   const clearErrorForUser = useCallback((targetUserId: string) => {
-    dispatch(clearFollowError(targetUserId));
-  }, [dispatch]);
+    followState.clearFollowError(targetUserId);
+  }, [followState]);
+
+  // Aggregate helpers for multiple users
+  const isAnyLoading = userIds.some(uid => followState.loadingUsers[uid]);
+  const hasAnyError = userIds.some(uid => !!followState.errors[uid]);
+  const allFollowing = userIds.every(uid => followState.followingUsers[uid]);
+  const allNotFollowing = userIds.every(uid => !followState.followingUsers[uid]);
 
-  // Return appropriate interface based on mode
   if (isSingleUser && userId) {
     return {
-      isFollowing: singleUserData.isFollowing,
-      isLoading: singleUserData.isLoading,
-      error: singleUserData.error,
+      isFollowing,
+      isLoading,
+      error,
       toggleFollow,
       setFollowStatus,
       fetchStatus,
       clearError,
     };
   }
-  
+
   return {
-    followData: multipleUserData.followData,
+    followData,
     toggleFollowForUser,
     setFollowStatusForUser,
     fetchStatusForUser,
     fetchAllStatuses,
     clearErrorForUser,
-    // Helper methods
-    isAnyLoading: multipleUserData.isAnyLoading,
-    hasAnyError: multipleUserData.hasAnyError,
-    allFollowing: multipleUserData.allFollowing,
-    allNotFollowing: multipleUserData.allNotFollowing,
+    isAnyLoading,
+    hasAnyError,
+    allFollowing,
+    allNotFollowing,
   };
 }; 

package/src/ui/hooks/useSessionSocket.ts

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react';
+import io from 'socket.io-client';
+import { toast } from '../../lib/sonner';
+
+interface UseSessionSocketProps {
+  userId: string | null | undefined;
+  activeSessionId: string | null | undefined;
+  refreshSessions: () => Promise<void>;
+  logout: () => Promise<void>;
+  baseURL: string;
+  onRemoteSignOut?: () => void;
+}
+
+export function useSessionSocket({ userId, activeSessionId, refreshSessions, logout, baseURL, onRemoteSignOut }: UseSessionSocketProps) {
+  const socketRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!userId || !baseURL) return;
+
+    if (!socketRef.current) {
+      socketRef.current = io(baseURL, {
+        transports: ['websocket'],
+      });
+    }
+    const socket = socketRef.current;
+
+    socket.on('connect', () => {
+      console.log('Socket connected:', socket.id);
+    });
+
+    socket.emit('join', { userId: `user:${userId}` });
+    console.log('Emitting join for room:', `user:${userId}`);
+
+    socket.on('session_update', (data: { type: string; sessionId: string }) => {
+      console.log('Received session_update:', data);
+      if (data.sessionId === activeSessionId) {
+        if (onRemoteSignOut) onRemoteSignOut();
+        else toast.info('You have been signed out remotely.');
+        logout();
+      } else {
+        refreshSessions();
+      }
+    });
+
+    return () => {
+      socket.emit('leave', { userId: `user:${userId}` });
+      socket.off('session_update');
+    };
+  }, [userId, baseURL, activeSessionId, refreshSessions, logout, onRemoteSignOut]);
+} 

package/src/ui/index.ts

@@ -8,6 +8,7 @@ export { default as OxySignInButton } from './components/OxySignInButton';
 export { default as OxyLogo } from './components/OxyLogo';
 export { default as Avatar } from './components/Avatar';
 export { default as FollowButton } from './components/FollowButton';
+export { default as OxyPayButton } from './components/OxyPayButton';
 export { FontLoader, setupFonts } from './components/FontLoader';
 
 // Export icon components
@@ -21,41 +22,6 @@ export {
   OxyContextProviderProps
 } from './context/OxyContext';
 
-// Redux store exports - NEW ARCHITECTURE
-export { 
-  setupOxyStore, 
-  oxyReducers,
-  // Individual slices
-  authSlice,
-  authActions,
-  authSelectors,
-  authReducer,
-  followSlice,
-  followActions,
-  followSelectors,
-  followThunks,
-  followReducer,
-  // Action creators
-  loginStart,
-  loginSuccess,
-  loginFailure,
-  logout,
-  setFollowingStatus,
-  clearFollowError,
-  resetFollowState,
-  fetchFollowStatus,
-  toggleFollowUser,
-  // Types
-  AuthState,
-  FollowState,
-  initialAuthState,
-  initialFollowState
-} from './store';
-
-// Legacy store exports (deprecated)
-export { store } from './store';
-export type { RootState, AppDispatch } from './store';
-
 // Export styles
 export { fontFamilies, fontStyles } from './styles/fonts';
 
@@ -63,8 +29,7 @@ export { fontFamilies, fontStyles } from './styles/fonts';
 export * from './navigation/types';
 
 // Hooks
-export { useOxyFollow, useFollow } from './hooks';
-export { default as useAuthFetch } from './hooks/useAuthFetch';
+export { useFollow } from './hooks';
 
 // Screens
 export { default as ProfileScreen } from './screens/ProfileScreen';