@oxyhq/services 5.11.9 → 5.11.11

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -0,0 +1,272 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Platform, Animated, ScrollView } from 'react-native';
+import type { BaseScreenProps } from '../navigation/types';
+import { useOxy } from '../context/OxyContext';
+import Avatar from '../components/Avatar';
+import { Ionicons } from '@expo/vector-icons';
+import { toast } from '../../lib/sonner';
+import { useAuthStore } from '../stores/authStore';
+import { useThemeColors } from '../styles';
+import GroupedPillButtons from '../components/internal/GroupedPillButtons';
+
+/**
+ * Post-signup welcome & onboarding screen.
+ * - Greets the newly registered user
+ * - Lets them immediately set / change their avatar using existing FileManagement picker
+ * - Only when the user presses "Continue" do we invoke onAuthenticated to finish flow & close sheet
+ */
+const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
+    navigate,
+    onAuthenticated,
+    theme,
+    newUser,
+}) => {
+    const { user, oxyServices } = useOxy();
+    const updateUser = useAuthStore(s => s.updateUser);
+    const currentUser = user || newUser; // fallback
+    const colors = useThemeColors(theme);
+    const styles = useMemo(() => createStyles(theme), [theme]);
+
+    // Animation state
+    const fadeAnim = useRef(new Animated.Value(1)).current;
+    const slideAnim = useRef(new Animated.Value(0)).current;
+    const [currentStep, setCurrentStep] = useState(0);
+
+    const avatarUri = currentUser?.avatar ? oxyServices.getFileDownloadUrl(currentUser.avatar as string, 'thumb') : undefined;
+
+    // Steps content
+    const steps: Array<{ key: string; title: string; bullets?: string[]; body?: string; showAvatar?: boolean; }> = [
+        { key: 'welcome', title: `Welcome${currentUser?.username ? `, ${currentUser.username}` : ''} 👋`, body: 'You just created an account in a calm, ethical space. A few quick things — then you\'re in.' },
+        { key: 'account', title: 'One Account. Simple.', bullets: ['One identity across everything', 'No re‑signing in all the time', 'Your preferences stay with you'] },
+        { key: 'principles', title: 'What We Stand For', bullets: ['Privacy by default', 'No manipulative feeds', 'You decide what to share', 'No selling your data'] },
+        { key: 'karma', title: 'Karma = Trust & Growth', body: 'Oxy Karma is a points system that reacts to what you do. Helpful, respectful, constructive actions earn it. Harmful or low‑effort stuff chips it away. More karma can unlock benefits; low karma can limit features. It keeps things fair and rewards real contribution.' },
+        { key: 'avatar', title: 'Make It Yours', body: 'Add an avatar so people recognize you. It will show anywhere you show up here. Skip if you want — you can add it later.', showAvatar: true },
+        { key: 'ready', title: 'You\'re Ready', body: 'Explore. Contribute. Earn karma. Stay in control.' }
+    ];
+    const totalSteps = steps.length;
+    const avatarStepIndex = steps.findIndex(s => s.showAvatar);
+
+    const animateToStep = (next: number) => {
+        Animated.timing(fadeAnim, { toValue: 0, duration: 180, useNativeDriver: Platform.OS !== 'web' }).start(() => {
+            setCurrentStep(next);
+            slideAnim.setValue(-40);
+            Animated.parallel([
+                Animated.timing(fadeAnim, { toValue: 1, duration: 220, useNativeDriver: Platform.OS !== 'web' }),
+                Animated.spring(slideAnim, { toValue: 0, useNativeDriver: Platform.OS !== 'web', friction: 9 })
+            ]).start();
+        });
+    };
+
+    const nextStep = useCallback(() => { if (currentStep < totalSteps - 1) animateToStep(currentStep + 1); }, [currentStep, totalSteps]);
+    const prevStep = useCallback(() => { if (currentStep > 0) animateToStep(currentStep - 1); }, [currentStep]);
+    const skipToAvatar = useCallback(() => { if (avatarStepIndex >= 0) animateToStep(avatarStepIndex); }, [avatarStepIndex]);
+    const finish = useCallback(() => { if (onAuthenticated && currentUser) onAuthenticated(currentUser); }, [onAuthenticated, currentUser]);
+    const openAvatarPicker = useCallback(() => {
+        navigate('FileManagement', {
+            selectMode: true,
+            multiSelect: false,
+            disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
+            afterSelect: 'back',
+            onSelect: async (file: any) => {
+                if (!file.contentType.startsWith('image/')) { toast.error('Please select an image file'); return; }
+                try { await updateUser({ avatar: file.id }, oxyServices); toast.success('Avatar updated'); } catch (e: any) { toast.error(e.message || 'Failed to update avatar'); }
+            }
+        });
+    }, [navigate, updateUser, oxyServices]);
+
+    const step = steps[currentStep];
+    const pillButtons = useMemo(() => {
+        if (currentStep === totalSteps - 1) {
+            return [
+                { text: 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
+                { text: 'Enter', onPress: finish, icon: 'log-in-outline', variant: 'primary' },
+            ];
+        }
+        if (currentStep === 0) {
+            const arr: any[] = [];
+            if (avatarStepIndex > 0) arr.push({ text: 'Skip', onPress: skipToAvatar, icon: 'play-skip-forward', variant: 'transparent' });
+            arr.push({ text: 'Next', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' });
+            return arr;
+        }
+        if (step.showAvatar) {
+            return [
+                { text: 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
+                { text: avatarUri ? 'Continue' : 'Skip', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' },
+            ];
+        }
+        return [
+            { text: 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
+            { text: 'Next', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' },
+        ];
+    }, [currentStep, totalSteps, prevStep, nextStep, finish, skipToAvatar, avatarStepIndex, step.showAvatar, avatarUri]);
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.progressContainer}>
+                {steps.map((s, i) => (
+                    <View key={s.key} style={[styles.progressDot, i === currentStep ? { backgroundColor: colors.primary, width: 22 } : { backgroundColor: colors.border }]} />
+                ))}
+            </View>
+            <Animated.View style={{ opacity: fadeAnim, transform: [{ translateX: slideAnim }] }}>
+                <ScrollView contentContainerStyle={styles.scrollInner} showsVerticalScrollIndicator={false}>
+                    <Text style={styles.title}>{step.title}</Text>
+                    {step.body && <Text style={styles.body}>{step.body}</Text>}
+                    {Array.isArray(step.bullets) && step.bullets.length > 0 && (
+                        <View style={styles.bulletContainer}>
+                            {step.bullets.map(b => (
+                                <View key={b} style={styles.bulletRow}>
+                                    <Ionicons name="ellipse" size={8} color={colors.primary} style={{ marginTop: 6 }} />
+                                    <Text style={styles.bulletText}>{b}</Text>
+                                </View>
+                            ))}
+                        </View>
+                    )}
+                    {step.showAvatar && (
+                        <View style={styles.avatarSection}>
+                            <Avatar size={120} name={currentUser?.username} uri={avatarUri} theme={theme} style={styles.avatar} />
+                            <TouchableOpacity style={styles.changeAvatarButton} onPress={openAvatarPicker}>
+                                <Ionicons name="image-outline" size={18} color="#FFFFFF" />
+                                <Text style={styles.changeAvatarText}>{avatarUri ? 'Change Avatar' : 'Add Avatar'}</Text>
+                            </TouchableOpacity>
+                        </View>
+                    )}
+                    <GroupedPillButtons buttons={pillButtons} colors={colors} />
+                </ScrollView>
+            </Animated.View>
+        </View>
+    );
+
+};
+
+const createStyles = (theme: string) => {
+    const isDark = theme === 'dark';
+    const textColor = isDark ? '#FFFFFF' : '#000000';
+    const secondary = isDark ? '#CCCCCC' : '#555555';
+    const cardBg = isDark ? '#1E1E1E' : '#FFFFFF';
+    const border = isDark ? '#333333' : '#E0E0E0';
+    const primary = '#007AFF';
+    return StyleSheet.create({
+        container: {
+            width: '100%',
+            paddingHorizontal: 20,
+        },
+        scrollInner: {
+            paddingBottom: 12,
+        },
+        title: {
+            fontSize: 42,
+            fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+            fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
+            letterSpacing: -1,
+            color: textColor,
+            marginBottom: 12,
+        },
+        body: {
+            fontSize: 16,
+            lineHeight: 22,
+            color: secondary,
+            marginBottom: 28,
+            maxWidth: 620,
+        },
+        bulletContainer: {
+            gap: 10,
+            marginBottom: 32,
+        },
+        bulletRow: {
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: 10,
+        },
+        bulletText: {
+            flex: 1,
+            fontSize: 15,
+            lineHeight: 20,
+            color: secondary,
+        },
+        avatarSection: {
+            width: '100%',
+            alignItems: 'center',
+            marginBottom: 40,
+        },
+        avatar: {
+            marginBottom: 16,
+            borderWidth: 4,
+            borderColor: primary + '40',
+        },
+        changeAvatarButton: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: primary,
+            paddingHorizontal: 18,
+            paddingVertical: 10,
+            borderRadius: 35,
+            gap: 8,
+        },
+        changeAvatarText: {
+            color: '#FFFFFF',
+            fontSize: 15,
+            fontWeight: '600',
+        },
+        progressContainer: {
+            flexDirection: 'row',
+            width: '100%',
+            justifyContent: 'center',
+            marginBottom: 24,
+            marginTop: 4,
+        },
+        progressDot: {
+            height: 10,
+            width: 10,
+            borderRadius: 5,
+            marginHorizontal: 6,
+            backgroundColor: border,
+        },
+        navBar: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            width: '100%',
+            gap: 12,
+            marginTop: 8,
+        },
+        navButton: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            paddingHorizontal: 14,
+            paddingVertical: 10,
+            borderRadius: 12,
+        },
+        backButton: {
+            backgroundColor: cardBg,
+            borderWidth: 1,
+            borderColor: border,
+        },
+        skipButton: {
+            marginLeft: 'auto',
+            backgroundColor: 'transparent',
+            paddingHorizontal: 4,
+        },
+        navText: {
+            fontSize: 14,
+            fontWeight: '500',
+        },
+        primaryButton: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 8,
+            backgroundColor: primary,
+            paddingVertical: 18,
+            borderRadius: 16,
+            width: '100%',
+        },
+        primaryButtonText: {
+            color: '#FFFFFF',
+            fontSize: 16,
+            fontWeight: '600',
+            letterSpacing: 0.5,
+        },
+    });
+};
+
+export default WelcomeNewUserScreen;

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

@@ -1,6 +1,10 @@
 import type React from 'react';
 import { useRef, useCallback, useEffect } from 'react';
-import { View, Text, Animated, TouchableOpacity, type TextInput, StatusBar } from 'react-native';
+import { View, Text, TouchableOpacity, type TextInput, StatusBar } from 'react-native';
+import Animated, {
+    useAnimatedStyle,
+    SharedValue,
+} from 'react-native-reanimated';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../../components/Avatar';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
@@ -8,14 +12,14 @@ import TextField from '../../components/internal/TextField';
 
 interface SignInPasswordStepProps {
     styles: any;
-    fadeAnim: Animated.Value;
-    slideAnim: Animated.Value;
-    scaleAnim: Animated.Value;
+    fadeAnim: SharedValue<number>;
+    slideAnim: SharedValue<number>;
+    scaleAnim: SharedValue<number>;
     colors: any;
     userProfile: any;
     username: string;
     theme: string;
-    logoAnim: Animated.Value;
+    logoAnim: SharedValue<number>;
     errorMessage: string;
     isInputFocused: boolean;
     password: string;
@@ -53,6 +57,23 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
 }) => {
     const inputRef = useRef<TextInput>(null);
 
+    // Animated styles - properly memoized to prevent re-renders
+    const containerAnimatedStyle = useAnimatedStyle(() => {
+        return {
+            opacity: fadeAnim.value,
+            transform: [
+                { translateX: slideAnim.value },
+                { scale: scaleAnim.value }
+            ]
+        };
+    });
+
+    const logoAnimatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{ scale: logoAnim.value }]
+        };
+    });
+
     // Focus password input on error or when step becomes active
     useEffect(() => {
         if (errorMessage) {
@@ -74,18 +95,12 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
     return (
         <Animated.View style={[
             styles.stepContainer,
-            {
-                opacity: fadeAnim,
-                transform: [
-                    { translateX: slideAnim },
-                    { scale: scaleAnim }
-                ]
-            }
+            containerAnimatedStyle
         ]}>
             <View style={styles.modernUserProfileContainer}>
                 <Animated.View style={[
                     styles.avatarContainer,
-                    { transform: [{ scale: logoAnim }] }
+                    logoAnimatedStyle
                 ]}>
                     <Avatar
                         name={userProfile?.displayName || userProfile?.name || username}

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

@@ -1,6 +1,10 @@
 import type React from 'react';
 import { useRef } from 'react';
-import { type TextInput, View, Text, Animated } from 'react-native';
+import { type TextInput, View, Text } from 'react-native';
+import Animated, {
+    useAnimatedStyle,
+    SharedValue,
+} from 'react-native-reanimated';
 import { Ionicons } from '@expo/vector-icons';
 import HighFive from '../../../assets/illustrations/HighFive';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
@@ -8,9 +12,9 @@ import TextField from '../../components/internal/TextField';
 
 interface SignInUsernameStepProps {
     styles: any;
-    fadeAnim: Animated.Value;
-    slideAnim: Animated.Value;
-    scaleAnim: Animated.Value;
+    fadeAnim: SharedValue<number>;
+    slideAnim: SharedValue<number>;
+    scaleAnim: SharedValue<number>;
     colors: any;
     isAddAccountMode: boolean;
     user: any;
@@ -48,6 +52,18 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
     navigate,
 }) => {
     const inputRef = useRef<TextInput>(null);
+
+    // Animated styles - properly memoized to prevent re-renders
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            opacity: fadeAnim.value,
+            transform: [
+                { translateX: slideAnim.value },
+                { scale: scaleAnim.value }
+            ]
+        };
+    });
+
     const handleUsernameContinue = () => {
         if (!username || validationStatus === 'invalid') {
             setTimeout(() => {
@@ -59,13 +75,7 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
     return (
         <Animated.View style={[
             styles.stepContainer,
-            {
-                opacity: fadeAnim,
-                transform: [
-                    { translateX: slideAnim },
-                    { scale: scaleAnim }
-                ]
-            }
+            animatedStyle
         ]}>
             <HighFive width={100} height={100} />
             <View style={styles.modernHeader}>

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

@@ -73,7 +73,7 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer}>
                 <View style={styles.walletHeader}>
                     <Avatar
-                        uri={user?.avatar?.url}
+                        uri={user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar as string, 'thumb') : undefined}
                         name={user?.username}
                         size={60}
                         theme={theme}

package/src/ui/screens/steps/RecoverRequestStep.tsx

@@ -0,0 +1,130 @@
+import type React from 'react';
+import { useRef } from 'react';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import HighFive from '../../../assets/illustrations/HighFive';
+import TextField from '../../components/internal/TextField';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+
+interface RecoverRequestStepProps {
+    // Common props from StepBasedScreen
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+
+    // Step navigation
+    nextStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+
+    // Data management
+    stepData?: any;
+    updateStepData: (data: any) => void;
+
+    // Form state
+    identifier: string;
+    setIdentifier: (identifier: string) => void;
+    errorMessage: string;
+    setErrorMessage: (message: string) => void;
+    isLoading: boolean;
+    setIsLoading: (loading: boolean) => void;
+}
+
+const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
+    colors,
+    styles,
+    navigate,
+    nextStep,
+    identifier,
+    setIdentifier,
+    errorMessage,
+    setErrorMessage,
+    isLoading,
+    setIsLoading,
+}) => {
+    const inputRef = useRef<any>(null);
+
+    const handleIdentifierChange = (text: string) => {
+        setIdentifier(text);
+        if (errorMessage) setErrorMessage('');
+    };
+
+    const handleRequest = () => {
+        if (!identifier || identifier.length < 3) {
+            setErrorMessage('Please enter your email or username.');
+            setTimeout(() => inputRef.current?.focus(), 0);
+            return;
+        }
+
+        setErrorMessage('');
+        setIsLoading(true);
+
+        // Simulate API call
+        setTimeout(() => {
+            setIsLoading(false);
+            nextStep(); // Move to verification step
+        }, 1200);
+    };
+
+    const handleRequestWithFocus = () => {
+        if (!identifier) {
+            setTimeout(() => inputRef.current?.focus(), 0);
+        }
+        handleRequest();
+    };
+
+    return (
+        <>
+            <HighFive width={100} height={100} />
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    Recover Account
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    Enter your email or username to receive a 6-digit code.
+                </Text>
+            </View>
+
+            <View style={styles.modernInputContainer}>
+                <TextField
+                    ref={inputRef}
+                    label="Email or Username"
+                    leading={<Ionicons name="mail-outline" size={24} color={colors.secondaryText} />}
+                    value={identifier}
+                    onChangeText={handleIdentifierChange}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    testID="recover-identifier-input"
+                    variant="filled"
+                    error={errorMessage || undefined}
+                    editable={!isLoading}
+                    onSubmitEditing={handleRequestWithFocus}
+                    autoFocus
+                />
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back to Sign In',
+                        onPress: () => navigate('SignIn'),
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Send Code',
+                        onPress: handleRequest,
+                        icon: 'mail-open-outline',
+                        variant: 'primary',
+                        loading: isLoading,
+                        disabled: isLoading,
+                    },
+                ]}
+                colors={colors}
+            />
+        </>
+    );
+};
+
+export default RecoverRequestStep;

package/src/ui/screens/steps/RecoverSuccessStep.tsx

@@ -0,0 +1,131 @@
+import type React from 'react';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+
+interface RecoverSuccessStepProps {
+    // Common props from StepBasedScreen
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+
+    // Step navigation
+    nextStep: () => void;
+    prevStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+
+    // Data management
+    stepData?: any;
+    updateStepData: (data: any) => void;
+    allStepData: any[];
+
+    // Form state
+    successMessage: string;
+}
+
+const RecoverSuccessStep: React.FC<RecoverSuccessStepProps> = ({
+    colors,
+    styles,
+    navigate,
+    allStepData,
+    successMessage,
+}) => {
+    // Extract identifier from previous steps
+    const requestData = allStepData[0] || {};
+    const { identifier } = requestData;
+
+    const handleContinueToReset = () => {
+        // Navigate to password reset with the identifier
+        navigate('ResetPassword', { identifier });
+    };
+
+    const handleBackToSignIn = () => {
+        navigate('SignIn');
+    };
+
+    return (
+        <>
+            <View style={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginBottom: 32,
+            }}>
+                <View style={{
+                    width: 80,
+                    height: 80,
+                    borderRadius: 40,
+                    backgroundColor: colors.success + '20',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 24,
+                }}>
+                    <Ionicons name="checkmark-circle" size={40} color={colors.success} />
+                </View>
+            </View>
+
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    Account Verified!
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    Your account has been successfully verified.
+                </Text>
+            </View>
+
+            <View style={styles.modernInputContainer}>
+                <View style={{
+                    padding: 20,
+                    backgroundColor: colors.inputBackground,
+                    borderRadius: 16,
+                    borderWidth: 1,
+                    borderColor: colors.border,
+                    marginBottom: 24,
+                }}>
+                    <Text style={[styles.footerText, { color: colors.text, fontSize: 16, marginBottom: 8 }]}>
+                        What's next?
+                    </Text>
+                    <Text style={[styles.footerText, { color: colors.secondaryText, fontSize: 14, lineHeight: 20 }]}>
+                        You can now reset your password or return to sign in with your existing credentials.
+                    </Text>
+                </View>
+
+                <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    padding: 12,
+                    backgroundColor: colors.success + '10',
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: colors.success + '30',
+                }}>
+                    <Ionicons name="shield-checkmark" size={20} color={colors.success} style={{ marginRight: 8 }} />
+                    <Text style={[styles.footerText, { color: colors.success, fontSize: 14, flex: 1 }]}>
+                        {successMessage || 'Your account recovery is complete and secure.'}
+                    </Text>
+                </View>
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back to Sign In',
+                        onPress: handleBackToSignIn,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Reset Password',
+                        onPress: handleContinueToReset,
+                        icon: 'key-outline',
+                        variant: 'primary',
+                    },
+                ]}
+                colors={colors}
+            />
+        </>
+    );
+};
+
+export default RecoverSuccessStep;