@oxyhq/services 5.7.5 → 5.8.2

package/src/ui/screens/SignInScreen.tsx

@@ -17,7 +17,7 @@ import {
 } from 'react-native';
 import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
-import { fontFamilies, useThemeColors, createCommonStyles } from '../styles';
+import { fontFamilies, useThemeColors, createCommonStyles, createAuthStyles } from '../styles';
 import OxyLogo from '../components/OxyLogo';
 import Avatar from '../components/Avatar';
 import { Ionicons } from '@expo/vector-icons';
@@ -34,19 +34,25 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
     goBack,
     onAuthenticated,
     theme,
+    initialStep,
+    username: initialUsername,
+    userProfile: initialUserProfile,
 }) => {
+    console.log('SignInScreen props:', { initialStep, initialUsername, initialUserProfile });
     // Form data states
-    const [username, setUsername] = useState('');
+    const [username, setUsername] = useState(initialUsername || '');
     const [password, setPassword] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
-    const [userProfile, setUserProfile] = useState<any>(null);
+    const [userProfile, setUserProfile] = useState<any>(initialUserProfile || null);
     const [showPassword, setShowPassword] = useState(false);
 
     // Multi-step form states
-    const [currentStep, setCurrentStep] = useState(0);
+    const [currentStep, setCurrentStep] = useState(initialStep || 0);
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [isValidating, setIsValidating] = useState(false);
-    const [validationStatus, setValidationStatus] = useState<'idle' | 'validating' | 'valid' | 'invalid'>('idle');
+    const [validationStatus, setValidationStatus] = useState<'idle' | 'validating' | 'valid' | 'invalid'>(
+        initialUserProfile ? 'valid' : 'idle'
+    );
 
     // Cache for validation results to prevent repeated API calls
     const validationCache = useRef<Map<string, { profile: any; timestamp: number }>>(new Map());
@@ -54,9 +60,8 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
     const fadeAnim = useRef(new Animated.Value(1)).current;
     const slideAnim = useRef(new Animated.Value(0)).current;
     const scaleAnim = useRef(new Animated.Value(1)).current;
-    const inputScaleAnim = useRef(new Animated.Value(1)).current;
     const logoAnim = useRef(new Animated.Value(0)).current;
-    const progressAnim = useRef(new Animated.Value(0.5)).current;
+    const progressAnim = useRef(new Animated.Value(initialStep ? 1.0 : 0.5)).current;
 
     const { login, isLoading, user, isAuthenticated, sessions, oxyServices } = useOxy();
 
@@ -70,7 +75,7 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
     );
 
     // Memoized styles to prevent rerenders
-    const styles = useMemo(() => createStyles(colors, theme), [colors, theme]);
+    const styles = useMemo(() => createAuthStyles(colors, theme), [colors, theme]);
 
     // Initialize logo animation
     useEffect(() => {
@@ -78,26 +83,18 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             toValue: 1,
             tension: 50,
             friction: 8,
-            useNativeDriver: true,
+            useNativeDriver: Platform.OS !== 'web',
         }).start();
     }, [logoAnim]);
 
-    // Input focus animations
+    // Input focus handlers (no animation)
     const handleInputFocus = useCallback(() => {
         setIsInputFocused(true);
-        Animated.spring(inputScaleAnim, {
-            toValue: 1.02,
-            useNativeDriver: true,
-        }).start();
-    }, [inputScaleAnim]);
+    }, []);
 
     const handleInputBlur = useCallback(() => {
         setIsInputFocused(false);
-        Animated.spring(inputScaleAnim, {
-            toValue: 1,
-            useNativeDriver: true,
-        }).start();
-    }, [inputScaleAnim]);
+    }, []);
 
     // Memoized input change handlers to prevent re-renders
     const handleUsernameChange = useCallback((text: string) => {
@@ -233,14 +230,14 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         Animated.timing(scaleAnim, {
             toValue: 0.95,
             duration: 150,
-            useNativeDriver: true,
+            useNativeDriver: Platform.OS !== 'web',
         }).start();
 
         // Fade out
         Animated.timing(fadeAnim, {
             toValue: 0,
             duration: 200,
-            useNativeDriver: true,
+            useNativeDriver: Platform.OS !== 'web',
         }).start(() => {
             setCurrentStep(nextStep);
 
@@ -253,19 +250,19 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                 Animated.timing(fadeAnim, {
                     toValue: 1,
                     duration: 300,
-                    useNativeDriver: true,
+                    useNativeDriver: Platform.OS !== 'web',
                 }),
                 Animated.spring(slideAnim, {
                     toValue: 0,
                     tension: 80,
                     friction: 8,
-                    useNativeDriver: true,
+                    useNativeDriver: Platform.OS !== 'web',
                 }),
                 Animated.spring(scaleAnim, {
                     toValue: 1,
                     tension: 80,
                     friction: 8,
-                    useNativeDriver: true,
+                    useNativeDriver: Platform.OS !== 'web',
                 })
             ]).start();
         });
@@ -345,7 +342,6 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             isAddAccountMode={isAddAccountMode}
             user={user}
             errorMessage={errorMessage}
-            inputScaleAnim={inputScaleAnim}
             isInputFocused={isInputFocused}
             username={username}
             validationStatus={validationStatus}
@@ -359,7 +355,7 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         />
     ), [
         fadeAnim, slideAnim, scaleAnim, colors, isAddAccountMode, user?.username,
-        errorMessage, inputScaleAnim, isInputFocused, username, validationStatus,
+        errorMessage, isInputFocused, username, validationStatus,
         userProfile, isValidating, handleInputFocus, handleInputBlur, handleUsernameChange,
         handleUsernameContinue, navigate, styles
     ]);
@@ -376,7 +372,6 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             theme={theme}
             logoAnim={logoAnim}
             errorMessage={errorMessage}
-            inputScaleAnim={inputScaleAnim}
             isInputFocused={isInputFocused}
             password={password}
             showPassword={showPassword}
@@ -386,11 +381,12 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             handleSignIn={handleSignIn}
             isLoading={isLoading}
             prevStep={prevStep}
+            navigate={navigate}
         />
     ), [
         fadeAnim, slideAnim, scaleAnim, colors, userProfile, username, theme, logoAnim,
-        errorMessage, inputScaleAnim, isInputFocused, password, showPassword,
-        handleInputFocus, handleInputBlur, handlePasswordChange, handleSignIn, isLoading, prevStep, styles
+        errorMessage, isInputFocused, password, showPassword,
+        handleInputFocus, handleInputBlur, handlePasswordChange, handleSignIn, isLoading, prevStep, styles, navigate
     ]);
 
     const renderCurrentStep = useCallback(() => {
@@ -420,274 +416,11 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                 keyboardShouldPersistTaps="handled"
             >
                 {renderCurrentStep()}
-                <View style={styles.footerTextContainer}>
-                    <Text style={[styles.footerText, { color: colors.text }]}>Forgot your password? </Text>
-                    <TouchableOpacity onPress={() => navigate('RecoverAccount')}>
-                        <Text style={[styles.modernLinkText, { color: colors.primary }]}>Recover your account</Text>
-                    </TouchableOpacity>
-                </View>
             </ScrollView>
         </KeyboardAvoidingView>
     );
 };
 
-// Memoized styles creation
-const createStyles = (colors: any, theme: string) => StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    scrollContent: {
-        flexGrow: 1,
-        paddingHorizontal: 24,
-        paddingTop: 4,
-        paddingBottom: 20,
-    },
-    stepContainer: {
-        flex: 1,
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-    },
-    modernHeader: {
-        alignItems: 'flex-start',
-        width: '100%',
-        marginBottom: 24,
-    },
-    modernTitle: {
-        fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontSize: 62,
-        lineHeight: 48,
-        marginBottom: 18,
-        textAlign: 'left',
-        letterSpacing: -1,
-    },
-    modernSubtitle: {
-        fontSize: 18,
-        lineHeight: 24,
-        textAlign: 'left',
-        opacity: 0.8,
-    },
-    modernInfoCard: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 16,
-        borderRadius: 16,
-        marginBottom: 24,
-        gap: 12,
-        width: '100%',
-    },
-    modernInfoText: {
-        fontSize: 14,
-        flex: 1,
-    },
-    modernErrorCard: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 16,
-        borderRadius: 16,
-        marginBottom: 24,
-        gap: 12,
-        width: '100%',
-    },
-    errorText: {
-        fontSize: 14,
-        fontWeight: '500',
-        flex: 1,
-    },
-    modernInputContainer: {
-        width: '100%',
-        marginBottom: 24,
-    },
-    inputWrapper: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        height: 56,
-        borderRadius: 16,
-        paddingHorizontal: 20,
-        borderWidth: 2,
-        backgroundColor: colors.inputBackground,
-    },
-    inputIcon: {
-        marginRight: 12,
-    },
-    modernInput: {
-        flex: 1,
-        fontSize: 16,
-        height: '100%',
-    },
-    passwordToggle: {
-        padding: 4,
-    },
-    validationIndicator: {
-        marginLeft: 8,
-    },
-    validationSuccessCard: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 12,
-        borderRadius: 12,
-        marginTop: 8,
-        gap: 8,
-    },
-    belowInputMessage: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginTop: 4,
-        marginBottom: 0,
-        gap: 6,
-    },
-    belowInputText: {
-        fontSize: 13,
-        fontWeight: '500',
-    },
-    validationErrorCard: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 12,
-        borderRadius: 12,
-        marginTop: 8,
-        gap: 8,
-    },
-    validationText: {
-        fontSize: 12,
-        fontWeight: '500',
-    },
-    modernButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 18,
-        paddingHorizontal: 32,
-        borderRadius: 16,
-        marginVertical: 8,
-        shadowOffset: {
-            width: 0,
-            height: 4,
-        },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-        elevation: 6,
-        gap: 8,
-        width: '100%',
-    },
-    modernButtonText: {
-        color: '#FFFFFF',
-        fontSize: 16,
-        fontWeight: '600',
-        letterSpacing: 0.5,
-    },
-    buttonIcon: {
-        marginLeft: 4,
-    },
-
-    // Enhanced Label Styles
-    modernLabel: {
-        fontSize: 12,
-        fontWeight: '500',
-        marginBottom: 2,
-    },
-    modernLinkText: {
-        fontSize: 14,
-        lineHeight: 20,
-        fontWeight: '600',
-        textDecorationLine: 'underline',
-    },
-    footerTextContainer: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        marginTop: 16,
-    },
-    footerText: {
-        fontSize: 15,
-    },
-
-    // Modern User Profile Styles
-    modernUserProfileContainer: {
-        alignItems: 'center',
-        marginBottom: 32,
-        paddingVertical: 24,
-    },
-    avatarContainer: {
-        position: 'relative',
-        marginBottom: 20,
-    },
-    modernUserAvatar: {
-        borderWidth: 4,
-        borderColor: 'rgba(209, 105, 229, 0.2)',
-    },
-    statusIndicator: {
-        position: 'absolute',
-        bottom: 4,
-        right: 4,
-        width: 20,
-        height: 20,
-        borderRadius: 10,
-        borderWidth: 3,
-        borderColor: '#FFFFFF',
-    },
-    modernUserDisplayName: {
-        fontSize: 26,
-        fontWeight: '700',
-        marginBottom: 4,
-        textAlign: 'center',
-        letterSpacing: -0.5,
-    },
-    modernUsernameSubtext: {
-        fontSize: 16,
-        textAlign: 'center',
-        marginBottom: 16,
-        opacity: 0.7,
-    },
-    welcomeBackBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 12,
-        paddingVertical: 6,
-        borderRadius: 20,
-        gap: 6,
-    },
-    welcomeBackText: {
-        fontSize: 12,
-        fontWeight: '600',
-        textTransform: 'uppercase',
-        letterSpacing: 0.5,
-    },
-
-    // Modern Navigation
-    modernNavigationButtons: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        marginTop: 16,
-        marginBottom: 8,
-        width: '100%',
-        gap: 8,
-    },
-    modernBackButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: 12,
-        paddingHorizontal: 20,
-        borderRadius: 12,
-        borderWidth: 1,
-        gap: 8,
-    },
-    modernBackButtonText: {
-        fontSize: 16,
-        fontWeight: '500',
-    },
-
-    // Security Notice
-    securityNotice: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginTop: 20,
-        gap: 6,
-    },
-    securityText: {
-        fontSize: 12,
-        fontWeight: '500',
-    },
-});
+
 
 export default SignInScreen;

package/src/ui/screens/SignUpScreen.tsx

@@ -15,7 +15,7 @@ import {
 } from 'react-native';
 import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
-import { useThemeColors, createCommonStyles } from '../styles';
+import { useThemeColors, createCommonStyles, createAuthStyles } from '../styles';
 import { Ionicons } from '@expo/vector-icons';
 import Svg, { Path, Circle } from 'react-native-svg';
 import { toast } from '../../lib/sonner';
@@ -635,7 +635,7 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
     const slideAnim = useRef(new Animated.Value(0)).current;
 
     // Memoized styles
-    const styles = useMemo(() => createStyles(colors, theme), [colors, theme]);
+    const styles = useMemo(() => createAuthStyles(colors, theme), [colors, theme]);
 
     // Debounced username validation
     useEffect(() => {
@@ -655,7 +655,7 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
         Animated.timing(fadeAnim, {
             toValue: 0,
             duration: 250,
-            useNativeDriver: true,
+            useNativeDriver: Platform.OS !== 'web',
         }).start(() => {
             setCurrentStep(nextStep);
             slideAnim.setValue(-100);
@@ -664,12 +664,12 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
                 Animated.timing(fadeAnim, {
                     toValue: 1,
                     duration: 250,
-                    useNativeDriver: true,
+                    useNativeDriver: Platform.OS !== 'web',
                 }),
                 Animated.timing(slideAnim, {
                     toValue: 0,
                     duration: 300,
-                    useNativeDriver: true,
+                    useNativeDriver: Platform.OS !== 'web',
                 })
             ]).start();
         });

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/internal/SignInPasswordStep.tsx

@@ -4,7 +4,6 @@ import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../../components/Avatar';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import TextField from '../../components/internal/TextField';
-import { useNavigation } from '@react-navigation/native';
 
 interface SignInPasswordStepProps {
     styles: any;
@@ -17,7 +16,6 @@ interface SignInPasswordStepProps {
     theme: string;
     logoAnim: Animated.Value;
     errorMessage: string;
-    inputScaleAnim: Animated.Value;
     isInputFocused: boolean;
     password: string;
     showPassword: boolean;
@@ -27,6 +25,7 @@ interface SignInPasswordStepProps {
     handleSignIn: () => void;
     isLoading: boolean;
     prevStep: () => void;
+    navigate: (screen: string, props?: Record<string, any>) => void;
 }
 
 const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
@@ -40,7 +39,6 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
     theme,
     logoAnim,
     errorMessage,
-    inputScaleAnim,
     isInputFocused,
     password,
     showPassword,
@@ -50,14 +48,10 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
     handleSignIn: parentHandleSignIn,
     isLoading,
     prevStep,
+    navigate,
 }) => {
-    const navigation = useNavigation();
     const inputRef = useRef<TextInput>(null);
 
-    const navigate = useCallback((screen: string) => {
-        navigation.navigate(screen as never);
-    }, [navigation]);
-
     // Focus password input on error or when step becomes active
     useEffect(() => {
         if (errorMessage) {
@@ -98,6 +92,7 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
                         size={100}
                         theme={theme as 'light' | 'dark'}
                         style={styles.modernUserAvatar}
+                        backgroundColor={colors.primary + '20'}
                     />
                     <View style={[styles.statusIndicator, { backgroundColor: colors.primary }]} />
                 </Animated.View>
@@ -107,21 +102,12 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
                 <Text style={[styles.modernUsernameSubtext, { color: colors.secondaryText }]}>
                     @{username}
                 </Text>
-                <View style={[styles.welcomeBackBadge, { backgroundColor: colors.primary + '15' }]}>
-                    <Ionicons name="checkmark-circle" size={16} color={colors.primary} />
-                    <Text style={[styles.welcomeBackText, { color: colors.primary }]}>
-                        Welcome back!
-                    </Text>
-                </View>
             </View>
-            <Animated.View style={[
-                styles.modernInputContainer,
-                { transform: [{ scale: inputScaleAnim }] }
-            ]}>
+            <View style={styles.modernInputContainer}>
                 <TextField
                     ref={inputRef}
                     label="Password"
-                    icon="lock-closed-outline"
+                    leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
                     value={password}
                     onChangeText={handlePasswordChange}
                     onFocus={handleInputFocus}
@@ -130,7 +116,6 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
                     autoCapitalize="none"
                     autoCorrect={false}
                     testID="password-input"
-                    colors={colors}
                     variant="filled"
                     error={errorMessage || undefined}
                     onSubmitEditing={handleSignIn}
@@ -138,11 +123,15 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
                 />
                 <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 16 }}>
                     <Text style={[styles.footerText, { color: colors.text }]}>Forgot your password? </Text>
-                    <TouchableOpacity onPress={() => navigate('RecoverAccount')}>
+                    <TouchableOpacity onPress={() => navigate('RecoverAccount', {
+                        returnTo: 'SignIn',
+                        returnStep: 1,
+                        returnData: { username, userProfile }
+                    })}>
                         <Text style={[styles.modernLinkText, { color: colors.primary }]}>Recover your account</Text>
                     </TouchableOpacity>
                 </View>
-            </Animated.View>
+            </View>
             <GroupedPillButtons
                 buttons={[
                     {