@oxyhq/services 5.1.12 → 5.1.13

package/src/ui/screens/SignUpScreen.tsx

@@ -17,6 +17,9 @@ import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 import OxyLogo from '../components/OxyLogo';
+import { BottomSheetScrollView, BottomSheetView } from '@gorhom/bottom-sheet';
+import { Ionicons } from '@expo/vector-icons'; // Add icon import
+import Svg, { Path, Circle } from 'react-native-svg';
 
 const SignUpScreen: React.FC<BaseScreenProps> = ({
     navigate,
@@ -91,9 +94,9 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
 
     if (user && isAuthenticated) {
         return (
-            <View style={[styles.container, { backgroundColor, padding: 20 }]}>
+            <BottomSheetScrollView style={[styles.scrollContainer, { backgroundColor, padding: 20 }]}>
                 <Text style={[
-                    styles.title,
+                    styles.welcomeTitle,
                     {
                         color: textColor,
                         textAlign: 'center'
@@ -119,7 +122,7 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
                         <Text style={styles.buttonText}>Go to Account Center</Text>
                     </TouchableOpacity>
                 </View>
-            </View>
+            </BottomSheetScrollView>
         );
     }
 
@@ -165,10 +168,38 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
             styles.stepContainer,
             { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
         ]}>
+            <View style={styles.welcomeImageContainer}>
+                {/* Large illustration, not inside a circle */}
+                <Svg width={220} height={120} viewBox="0 0 220 120">
+                    {/* Example: Abstract friendly illustration */}
+                    <Path
+                        d="M30 100 Q60 20 110 60 Q160 100 190 40"
+                        stroke="#d169e5"
+                        strokeWidth="8"
+                        fill="none"
+                    />
+                    <Circle cx="60" cy="60" r="18" fill="#d169e5" opacity="0.18" />
+                    <Circle cx="110" cy="60" r="24" fill="#d169e5" opacity="0.25" />
+                    <Circle cx="170" cy="50" r="14" fill="#d169e5" opacity="0.15" />
+                    {/* Smiling face */}
+                    <Circle cx="110" cy="60" r="32" fill="#fff" opacity="0.7" />
+                    <Circle cx="100" cy="55" r="4" fill="#d169e5" />
+                    <Circle cx="120" cy="55" r="4" fill="#d169e5" />
+                    <Path
+                        d="M104 68 Q110 75 116 68"
+                        stroke="#d169e5"
+                        strokeWidth="2"
+                        fill="none"
+                        strokeLinecap="round"
+                    />
+                </Svg>
+            </View>
 
-            <Text style={[styles.welcomeTitle, { color: textColor }]}>
-                Welcome to Oxy
-            </Text>
+            <View style={styles.header}>
+                {/* Add a close/back icon for better navigation */}
+                <Text style={[styles.welcomeTitle]}>Create a Oxy Account</Text>
+                <View style={styles.placeholder} />
+            </View>
 
             <Text style={[styles.welcomeText, { color: textColor }]}>
                 We're excited to have you join us. Let's get your account set up in just a few easy steps.
@@ -396,118 +427,123 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
     };
 
     return (
-        <KeyboardAvoidingView
-            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-            style={[styles.container, { backgroundColor }]}
+        <BottomSheetScrollView
+            contentContainerStyle={styles.scrollContainer}
+            keyboardShouldPersistTaps="handled"
         >
-            <ScrollView
-                contentContainerStyle={styles.scrollContainer}
-                keyboardShouldPersistTaps="handled"
-            >
-                <View style={styles.header}>
-                    <OxyLogo
-                        style={{ marginBottom: 24 }}
-                        width={50}
-                        height={50}
-                    />
-                    <Text style={[styles.title]}>Create Account</Text>
-                    <View style={styles.placeholder} /></View>
-
-                <View style={styles.formContainer}>
-                    {renderCurrentStep()}
-                </View>
+            <OxyLogo
+                style={{ marginBottom: 24 }}
+                width={50}
+                height={50}
+            />
+
+            <View style={styles.formContainer}>
+                {renderCurrentStep()}
+            </View>
 
-                {currentStep > 0 && renderProgressIndicators()}
-            </ScrollView>
-        </KeyboardAvoidingView>
+            {currentStep > 0 && renderProgressIndicators()}
+        </BottomSheetScrollView>
     );
 };
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
     scrollContainer: {
-        flexGrow: 1,
-        padding: 10,
+        padding: 20,
     },
     header: {
         flexDirection: 'row',
+        alignItems: 'center',
         justifyContent: 'space-between',
-        marginBottom: 24,
-    },
-    title: {
-        fontFamily: Platform.OS === 'web'
-            ? 'Phudu'  // Use CSS font name directly for web
-            : 'Phudu-Bold',  // Use exact font name as registered with Font.loadAsync
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,  // Only apply fontWeight on web
-        fontSize: 54,
     },
     placeholder: {
-        width: 50, // To balance the header
+        width: 40,
     },
     formContainer: {
         width: '100%',
+        marginTop: 8,
     },
     stepContainer: {
         width: '100%',
-        paddingVertical: 20,
+        paddingVertical: 8,
+        paddingHorizontal: 0,
+        marginBottom: 8,
     },
     inputContainer: {
-        marginBottom: 16,
+        marginBottom: 18,
     },
     label: {
-        fontSize: 14,
+        fontSize: 15,
         marginBottom: 8,
+        fontWeight: '500',
+        letterSpacing: 0.1,
     },
     input: {
         height: 48,
-        borderRadius: 35,
+        borderRadius: 16,
         paddingHorizontal: 16,
         borderWidth: 1,
         fontSize: 16,
+        backgroundColor: '#F5F5F5',
+        borderColor: '#E0E0E0',
+        marginBottom: 2,
     },
     button: {
         backgroundColor: '#d169e5',
         height: 48,
-        borderRadius: 35,
+        borderRadius: 24,
         alignItems: 'center',
         justifyContent: 'center',
         marginTop: 24,
+        shadowColor: '#d169e5',
+        shadowOpacity: 0.12,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 8,
+        elevation: 2,
     },
     buttonText: {
         color: '#FFFFFF',
-        fontSize: 16,
-        fontWeight: '600',
+        fontSize: 17,
+        fontWeight: '700',
+        letterSpacing: 0.2,
     },
     footerTextContainer: {
         flexDirection: 'row',
         justifyContent: 'center',
-        marginTop: 24,
+        marginTop: 28,
     },
     footerText: {
-        fontSize: 14,
+        fontSize: 15,
+        color: '#888',
     },
     linkText: {
-        fontSize: 14,
-        fontWeight: '600',
+        fontSize: 15,
+        fontWeight: '700',
+        color: '#d169e5',
     },
     errorContainer: {
-        backgroundColor: '#FFEBEE',
-        padding: 12,
-        borderRadius: 35,
+        backgroundColor: '#FFE4EC',
+        padding: 14,
+        borderRadius: 18,
         marginBottom: 16,
+        borderWidth: 1,
+        borderColor: '#F8BBD0',
     },
     errorText: {
         color: '#D32F2F',
-        fontSize: 14,
+        fontSize: 15,
+        fontWeight: '500',
     },
     userInfoContainer: {
         padding: 20,
         marginVertical: 20,
         backgroundColor: '#F5F5F5',
-        borderRadius: 35,
+        borderRadius: 24,
         alignItems: 'center',
+        shadowColor: '#000',
+        shadowOpacity: 0.04,
+        shadowOffset: { width: 0, height: 1 },
+        shadowRadius: 4,
+        elevation: 1,
     },
     userInfoText: {
         fontSize: 16,
@@ -523,65 +559,86 @@ const styles = StyleSheet.create({
             ? 'Phudu'  // Use CSS font name directly for web
             : 'Phudu-Bold',  // Use exact font name as registered with Font.loadAsync
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,  // Only apply fontWeight on web
-        fontSize: 32,
-        textAlign: 'left',
-        marginBottom: 20,
+        fontSize: 54,
+        marginBottom: 24,
     },
     welcomeText: {
         fontSize: 16,
         textAlign: 'left',
         marginBottom: 30,
         lineHeight: 24,
+        color: '#444',
+    },
+    welcomeImageContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginVertical: 30,
     },
     stepTitle: {
-        fontSize: 24,
-        fontWeight: '600',
+        fontFamily: Platform.OS === 'web'
+            ? 'Phudu'  // Use CSS font name directly for web
+            : 'Phudu-Bold',  // Use exact font name as registered with Font.loadAsync
+        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,  // Only apply fontWeight on web
+        fontSize: 34,
         marginBottom: 20,
+        color: '#d169e5',
+        maxWidth: '90%',
     },
     navigationButtons: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginTop: 24,
+        marginTop: 28,
     },
     navButton: {
-        borderRadius: 35,
-        height: 48,
+        borderRadius: 24,
+        height: 44,
         alignItems: 'center',
         justifyContent: 'center',
-        paddingHorizontal: 24,
-        marginRight: 'auto',
+        paddingHorizontal: 28,
+        backgroundColor: '#F3E5F5',
     },
     backButton: {
         backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderColor: '#E0E0E0',
     },
     nextButton: {
         minWidth: 100,
+        backgroundColor: '#d169e5',
     },
     navButtonText: {
         fontSize: 16,
-        fontWeight: '600',
-        color: '#FFFFFF',
+        fontWeight: '700',
+        color: '#d169e5',
     },
     passwordHint: {
         fontSize: 12,
         marginTop: 4,
+        color: '#888',
     },
     progressContainer: {
         flexDirection: 'row',
         justifyContent: 'center',
         marginBottom: 20,
+        marginTop: 8,
     },
     progressDot: {
-        height: 8,
-        width: 8,
-        borderRadius: 4,
-        marginHorizontal: 4,
+        height: 10,
+        width: 10,
+        borderRadius: 5,
+        marginHorizontal: 6,
+        backgroundColor: '#E0E0E0',
+        borderWidth: 2,
+        borderColor: '#fff',
+        shadowColor: '#d169e5',
+        shadowOpacity: 0.08,
+        shadowOffset: { width: 0, height: 1 },
+        shadowRadius: 2,
+        elevation: 1,
     },
     summaryContainer: {
-        backgroundColor: '#F5F5F5',
-        borderRadius: 15,
-        padding: 16,
+        padding: 0,
         marginBottom: 24,
     },
     summaryRow: {
@@ -589,13 +646,15 @@ const styles = StyleSheet.create({
         marginBottom: 10,
     },
     summaryLabel: {
-        fontSize: 14,
-        width: 80,
+        fontSize: 15,
+        width: 90,
+        color: '#888',
     },
     summaryValue: {
-        fontSize: 14,
-        fontWeight: '500',
+        fontSize: 15,
+        fontWeight: '600',
         flex: 1,
+        color: '#222',
     },
 });
 

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, Platform } from 'react-native';
+import { BaseScreenProps } from '../../navigation/types';
+
+const KarmaAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
+    const isDarkTheme = theme === 'dark';
+    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
+    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const primaryColor = '#d169e5';
+
+    return (
+        <View style={[styles.container, { backgroundColor }]}>
+            <Text style={[styles.title, { color: textColor }]}>About Karma</Text>
+            <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>
+                <Text style={[styles.paragraph, { color: textColor }]}>• Helping other users{'\n'}
+                    • Reporting bugs{'\n'}
+                    • Contributing content{'\n'}
+                    • Participating in events{'\n'}
+                    • Other positive actions</Text>
+                <Text style={[styles.section, { color: primaryColor }]}>Why Karma?</Text>
+                <Text style={[styles.paragraph, { color: textColor }]}>Karma unlocks special features and recognition in the Oxy Ecosystem. The more you contribute, the more you earn!</Text>
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+    title: {
+        fontFamily: Platform.OS === 'web'
+            ? 'Phudu'  // Use CSS font name directly for web
+            : 'Phudu-Bold',  // Use exact font name as registered with Font.loadAsync
+        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,  // Only apply fontWeight on web
+        fontSize: 54,
+        margin: 24,
+        marginBottom: 24,
+    },
+    contentContainer: { padding: 24 },
+    section: { fontSize: 18, fontWeight: 'bold', marginTop: 24, marginBottom: 8 },
+    paragraph: { fontSize: 16, marginBottom: 12 },
+});
+
+export default KarmaAboutScreen;

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

@@ -0,0 +1,271 @@
+import React, { useEffect, useState } from 'react';
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    ActivityIndicator,
+    ScrollView,
+    Alert,
+    Platform,
+} from 'react-native';
+import { BaseScreenProps } from '../../navigation/types';
+import { useOxy } from '../../context/OxyContext';
+import { fontFamilies } from '../../styles/fonts';
+import Avatar from '../../components/Avatar';
+import { Ionicons } from '@expo/vector-icons';
+
+const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
+    onClose,
+    theme,
+    navigate,
+    goBack,
+}) => {
+    const { user, oxyServices } = useOxy();
+    const [karmaTotal, setKarmaTotal] = useState<number | null>(null);
+    const [karmaHistory, setKarmaHistory] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const isDarkTheme = theme === 'dark';
+    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
+    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#F5F5F5';
+    const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
+    const primaryColor = '#d169e5';
+
+    useEffect(() => {
+        if (!user) return;
+        setIsLoading(true);
+        setError(null);
+        Promise.all([
+            oxyServices.getUserKarmaTotal(user.id),
+            oxyServices.getUserKarmaHistory(user.id, 20, 0),
+        ])
+            .then(([totalRes, historyRes]) => {
+                setKarmaTotal(totalRes.total);
+                setKarmaHistory(Array.isArray(historyRes.history) ? historyRes.history : []);
+            })
+            .catch((err) => {
+                setError(err.message || 'Failed to load karma data');
+            })
+            .finally(() => setIsLoading(false));
+    }, [user]);
+
+    if (!user) {
+        return (
+            <View style={[styles.container, { backgroundColor }]}>
+                <Text style={[styles.message, { color: textColor }]}>Not signed in</Text>
+            </View>
+        );
+    }
+
+    if (isLoading) {
+        return (
+            <View style={[styles.container, { backgroundColor, justifyContent: 'center' }]}>
+                <ActivityIndicator size="large" color={primaryColor} />
+            </View>
+        );
+    }
+
+    return (
+        <View style={[styles.container, { backgroundColor }]}>
+            <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer}>
+                <View style={styles.walletHeader}>
+                    <Avatar
+                        imageUrl={user.avatarUrl}
+                        name={user.username}
+                        size={60}
+                        theme={theme}
+                        style={styles.avatar}
+                    />
+                    <Text style={[styles.karmaLabel, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Karma Balance</Text>
+                    <Text style={[styles.karmaAmount, { color: primaryColor }]}>{karmaTotal ?? 0}</Text>
+                    <View style={styles.actionRow}>
+                        <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('KarmaLeaderboard')}>
+                            <View style={[styles.actionIcon, { backgroundColor: '#E0E0E0' }]}>
+                                <Ionicons name="trophy-outline" size={28} color="#888" />
+                            </View>
+                            <Text style={styles.actionLabel}>Leaderboard</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('KarmaRules')}>
+                            <View style={[styles.actionIcon, { backgroundColor: '#E0E0E0' }]}>
+                                <Ionicons name="document-text-outline" size={28} color="#888" />
+                            </View>
+                            <Text style={styles.actionLabel}>Rules</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('AboutKarma')}>
+                            <View style={[styles.actionIcon, { backgroundColor: '#E0E0E0' }]}>
+                                <Ionicons name="star-outline" size={28} color="#888" />
+                            </View>
+                            <Text style={styles.actionLabel}>About</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('KarmaRewards')}>
+                            <View style={[styles.actionIcon, { backgroundColor: '#E0E0E0' }]}>
+                                <Ionicons name="gift-outline" size={28} color="#888" />
+                            </View>
+                            <Text style={styles.actionLabel}>Rewards</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate && navigate('KarmaFAQ')}>
+                            <View style={[styles.actionIcon, { backgroundColor: '#E0E0E0' }]}>
+                                <Ionicons name="help-circle-outline" size={28} color="#888" />
+                            </View>
+                            <Text style={styles.actionLabel}>FAQ</Text>
+                        </TouchableOpacity>
+                    </View>
+                    <Text style={styles.infoText}>Karma can only be earned by positive actions in the Oxy Ecosystem. It cannot be sent or received directly.</Text>
+                </View>
+                <Text style={[styles.sectionTitle, { color: textColor }]}>Karma History</Text>
+                <View style={styles.historyContainer}>
+                    {karmaHistory.length === 0 ? (
+                        <Text style={{ color: textColor, textAlign: 'center', marginTop: 16 }}>No karma history yet.</Text>
+                    ) : (
+                        karmaHistory.map((entry: any) => (
+                            <View key={entry.id} style={[styles.historyItem, { borderColor }]}>
+                                <Text style={[styles.historyPoints, { color: entry.points > 0 ? primaryColor : '#D32F2F' }]}>
+                                    {entry.points > 0 ? '+' : ''}{entry.points}
+                                </Text>
+                                <Text style={[styles.historyDesc, { color: textColor }]}>
+                                    {entry.reason || 'No description'}
+                                </Text>
+                                <Text style={[styles.historyDate, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>
+                                    {entry.createdAt ? new Date(entry.createdAt).toLocaleString() : ''}
+                                </Text>
+                            </View>
+                        ))
+                    )}
+                </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>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContainer: {
+        padding: 0,
+        alignItems: 'center',
+    },
+    walletHeader: {
+        alignItems: 'center',
+        paddingTop: 36,
+        paddingBottom: 24,
+        width: '100%',
+        backgroundColor: 'transparent',
+    },
+    avatar: {
+        marginBottom: 12,
+    },
+    karmaLabel: {
+        fontSize: 16,
+        marginBottom: 4,
+        fontFamily: fontFamilies.phudu,
+    },
+    karmaAmount: {
+        fontSize: 48,
+        fontWeight: 'bold',
+        marginBottom: 18,
+        fontFamily: fontFamilies.phuduBold,
+    },
+    actionRow: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginBottom: 18,
+        flexWrap: 'wrap',
+        rowGap: 0,
+        columnGap: 0,
+    },
+    actionIconWrapper: {
+        alignItems: 'center',
+        marginHorizontal: 8,
+        marginVertical: 4,
+        width: 72,
+    },
+    actionIcon: {
+        width: 56,
+        height: 56,
+        borderRadius: 28,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 6,
+        opacity: 0.5,
+    },
+    actionIconText: {
+        fontSize: 28,
+    },
+    actionLabel: {
+        fontSize: 13,
+        color: '#888',
+    },
+    infoText: {
+        fontSize: 13,
+        color: '#888',
+        textAlign: 'center',
+        marginTop: 8,
+        marginBottom: 8,
+        maxWidth: 320,
+    },
+    sectionTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        marginBottom: 12,
+        marginTop: 8,
+        alignSelf: 'flex-start',
+        marginLeft: 24,
+    },
+    historyContainer: {
+        borderRadius: 15,
+        overflow: 'hidden',
+        marginBottom: 20,
+        width: '100%',
+        paddingHorizontal: 12,
+    },
+    historyItem: {
+        padding: 14,
+        borderBottomWidth: 1,
+    },
+    historyPoints: {
+        fontSize: 16,
+        fontWeight: '700',
+    },
+    historyDesc: {
+        fontSize: 15,
+        marginTop: 2,
+    },
+    historyDate: {
+        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',
+        marginTop: 24,
+    },
+});
+
+export default KarmaCenterScreen;