@oxyhq/services 5.1.11 → 5.1.13

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;

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

@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, ScrollView, Platform, TouchableOpacity, TextInput, LayoutAnimation, UIManager } from 'react-native';
+import { BaseScreenProps } from '../../navigation/types';
+import { Ionicons } from '@expo/vector-icons';
+
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const FAQS = [
+    {
+        q: 'What is karma?',
+        a: 'Karma is a recognition of your positive actions in the Oxy Ecosystem. It cannot be sent or received directly.'
+    },
+    {
+        q: 'How do I earn karma?',
+        a: 'By helping others, reporting bugs, contributing content, and participating in community events.'
+    },
+    {
+        q: 'Can I lose karma?',
+        a: 'Karma may be reduced for negative actions or breaking community rules.'
+    },
+    {
+        q: 'What can I do with karma?',
+        a: 'Unlock rewards, badges, and special features as you earn more karma.'
+    },
+    {
+        q: 'Can I transfer karma to others?',
+        a: 'No, karma cannot be sent or received. It is only earned by your actions.'
+    },
+    {
+        q: 'How do I get support?',
+        a: 'Contact Oxy support via the app or website for any karma-related questions.'
+    },
+];
+
+const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
+    const isDarkTheme = theme === 'dark';
+    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
+    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const cardColor = isDarkTheme ? '#23232b' : '#f7f7fa';
+    const primaryColor = '#d169e5';
+    const inputBg = isDarkTheme ? '#23232b' : '#f2f2f7';
+    const inputBorder = isDarkTheme ? '#444' : '#e0e0e0';
+
+    const [expanded, setExpanded] = useState<number | null>(0);
+    const [search, setSearch] = useState('');
+
+    const filteredFaqs = FAQS.filter(faq =>
+        faq.q.toLowerCase().includes(search.toLowerCase()) ||
+        faq.a.toLowerCase().includes(search.toLowerCase())
+    );
+
+    const handleToggle = (idx: number) => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        setExpanded(expanded === idx ? null : idx);
+    };
+
+    return (
+        <View style={[styles.container, { backgroundColor }]}>
+            <Text style={[styles.title, { color: textColor }]}>Karma FAQ</Text>
+            <View style={[styles.searchBar, { backgroundColor: inputBg, borderColor: inputBorder }]}>
+                <Ionicons name="search-outline" size={20} color={primaryColor} style={{ marginRight: 8 }} />
+                <TextInput
+                    style={[styles.searchInput, { color: textColor }]}
+                    placeholder="Search FAQ..."
+                    placeholderTextColor={isDarkTheme ? '#aaa' : '#888'}
+                    value={search}
+                    onChangeText={setSearch}
+                    returnKeyType="search"
+                />
+            </View>
+            <ScrollView contentContainerStyle={styles.contentContainer} keyboardShouldPersistTaps="handled">
+                {filteredFaqs.length === 0 ? (
+                    <Text style={[styles.noResults, { color: textColor }]}>No results found.</Text>
+                ) : (
+                    filteredFaqs.map((item, idx) => {
+                        const isOpen = expanded === idx;
+                        return (
+                            <TouchableOpacity
+                                key={idx}
+                                style={[styles.card, { backgroundColor: cardColor, shadowColor: isDarkTheme ? '#000' : '#d169e5' }]}
+                                activeOpacity={0.95}
+                                onPress={() => handleToggle(idx)}
+                            >
+                                <View style={styles.questionRow}>
+                                    <Ionicons name={isOpen ? 'chevron-down' : 'chevron-forward'} size={22} color={primaryColor} style={{ marginRight: 8 }} />
+                                    <Text style={[styles.question, { color: primaryColor }]}>{item.q}</Text>
+                                </View>
+                                {isOpen && (
+                                    <Text style={[styles.answer, { color: textColor }]}>{item.a}</Text>
+                                )}
+                            </TouchableOpacity>
+                        );
+                    })
+                )}
+                <Text style={[styles.paragraph, { color: textColor, marginTop: 32, textAlign: 'center' }]}>Still have questions? Contact support!</Text>
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+    title: {
+        fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
+        fontSize: 38,
+        margin: 24,
+        marginBottom: 12,
+        textAlign: 'center',
+    },
+    searchBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 16,
+        borderWidth: 1,
+        marginHorizontal: 24,
+        marginBottom: 12,
+        paddingHorizontal: 12,
+        height: 44,
+    },
+    searchInput: {
+        flex: 1,
+        fontSize: 16,
+        height: 44,
+    },
+    contentContainer: { padding: 24, paddingBottom: 40 },
+    card: {
+        borderRadius: 18,
+        padding: 20,
+        marginBottom: 18,
+        shadowOpacity: 0.08,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 8,
+        elevation: 2,
+    },
+    questionRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    question: {
+        fontSize: 17,
+        fontWeight: 'bold',
+    },
+    answer: {
+        fontSize: 16,
+        lineHeight: 22,
+        marginTop: 8,
+    },
+    paragraph: {
+        fontSize: 16,
+        marginBottom: 12,
+    },
+    noResults: {
+        fontSize: 16,
+        marginTop: 32,
+        textAlign: 'center',
+        opacity: 0.7,
+    },
+});
+
+export default KarmaFAQScreen;

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

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity } from 'react-native';
+import { BaseScreenProps } from '../../navigation/types';
+import { useOxy } from '../../context/OxyContext';
+import Avatar from '../../components/Avatar';
+
+const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navigate }) => {
+    const { oxyServices } = useOxy();
+    const [leaderboard, setLeaderboard] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const isDarkTheme = theme === 'dark';
+    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
+    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const primaryColor = '#d169e5';
+
+    useEffect(() => {
+        setIsLoading(true);
+        setError(null);
+        oxyServices.getKarmaLeaderboard()
+            .then((data) => setLeaderboard(Array.isArray(data) ? data : []))
+            .catch((err) => setError(err.message || 'Failed to load leaderboard'))
+            .finally(() => setIsLoading(false));
+    }, [oxyServices]);
+
+    return (
+        <View style={[styles.container, { backgroundColor }]}>
+            <Text style={[styles.title, { color: textColor }]}>Karma Leaderboard</Text>
+            {isLoading ? (
+                <ActivityIndicator size="large" color={primaryColor} style={{ marginTop: 40 }} />
+            ) : error ? (
+                <Text style={[styles.error, { color: '#D32F2F' }]}>{error}</Text>
+            ) : (
+                <ScrollView contentContainerStyle={styles.listContainer}>
+                    {leaderboard.length === 0 ? (
+                        <Text style={[styles.placeholder, { color: textColor }]}>No leaderboard data.</Text>
+                    ) : (
+                        leaderboard.map((entry, idx) => (
+                            <TouchableOpacity
+                                key={entry.userId}
+                                style={[styles.row, idx < 3 && { backgroundColor: '#f7eaff' }]}
+                                onPress={() => navigate && navigate('KarmaProfile', { userId: entry.userId, username: entry.username })}
+                                activeOpacity={0.7}
+                            >
+                                <Text style={[styles.rank, { color: primaryColor }]}>{idx + 1}</Text>
+                                <Avatar name={entry.username || 'User'} size={40} theme={theme} style={styles.avatar} />
+                                <Text style={[styles.username, { color: textColor }]}>{entry.username || entry.userId}</Text>
+                                <Text style={[styles.karma, { color: primaryColor }]}>{entry.total}</Text>
+                            </TouchableOpacity>
+                        ))
+                    )}
+                </ScrollView>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+    title: { fontSize: 24, fontWeight: 'bold', margin: 24, textAlign: 'center' },
+    listContainer: { paddingBottom: 40 },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        borderBottomWidth: 1,
+        borderColor: '#eee',
+    },
+    rank: { fontSize: 20, width: 32, textAlign: 'center', fontWeight: 'bold' },
+    avatar: { marginHorizontal: 8 },
+    username: { flex: 1, fontSize: 16, marginLeft: 8 },
+    karma: { fontSize: 18, fontWeight: 'bold', marginLeft: 12 },
+    placeholder: { fontSize: 16, color: '#888', textAlign: 'center', marginTop: 40 },
+    error: { fontSize: 16, textAlign: 'center', marginTop: 40 },
+});
+
+export default KarmaLeaderboardScreen;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { BaseScreenProps } from '../../navigation/types';
+
+const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
+    const isDarkTheme = theme === 'dark';
+    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
+    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const primaryColor = '#d169e5';
+
+    // Placeholder: In a real app, fetch rewards from API
+    return (
+        <View style={[styles.container, { backgroundColor }]}>
+            <Text style={[styles.title, { color: textColor }]}>Karma Rewards</Text>
+            <ScrollView contentContainerStyle={styles.contentContainer}>
+                <Text style={[styles.paragraph, { color: textColor }]}>Unlock special features and recognition by earning karma!</Text>
+                <View style={styles.rewardBox}>
+                    <Text style={[styles.rewardTitle, { color: primaryColor }]}>🎉 Early Access</Text>
+                    <Text style={[styles.rewardDesc, { color: textColor }]}>Get early access to new features with 100+ karma.</Text>
+                </View>
+                <View style={styles.rewardBox}>
+                    <Text style={[styles.rewardTitle, { color: primaryColor }]}>🏅 Community Badge</Text>
+                    <Text style={[styles.rewardDesc, { color: textColor }]}>Earn a special badge for 500+ karma.</Text>
+                </View>
+                <View style={styles.rewardBox}>
+                    <Text style={[styles.rewardTitle, { color: primaryColor }]}>🌟 Featured Member</Text>
+                    <Text style={[styles.rewardDesc, { color: textColor }]}>Be featured in the community for 1000+ karma.</Text>
+                </View>
+                <Text style={[styles.paragraph, { color: textColor, marginTop: 24 }]}>More rewards coming soon!</Text>
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+    title: { fontSize: 24, fontWeight: 'bold', margin: 24, textAlign: 'center' },
+    contentContainer: { padding: 24 },
+    rewardBox: {
+        backgroundColor: '#f7eaff',
+        borderRadius: 16,
+        padding: 18,
+        marginBottom: 18,
+        shadowColor: '#000',
+        shadowOpacity: 0.04,
+        shadowOffset: { width: 0, height: 1 },
+        shadowRadius: 4,
+        elevation: 1,
+    },
+    rewardTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 6 },
+    rewardDesc: { fontSize: 15 },
+    paragraph: { fontSize: 16, marginBottom: 12 },
+});
+
+export default KarmaRewardsScreen;

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

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
+import { BaseScreenProps } from '../../navigation/types';
+import { useOxy } from '../../context/OxyContext';
+
+const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
+    const { oxyServices } = useOxy();
+    const [rules, setRules] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const isDarkTheme = theme === 'dark';
+    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
+    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const primaryColor = '#d169e5';
+
+    useEffect(() => {
+        setIsLoading(true);
+        setError(null);
+        oxyServices.getKarmaRules()
+            .then((data) => setRules(Array.isArray(data) ? data : []))
+            .catch((err) => setError(err.message || 'Failed to load rules'))
+            .finally(() => setIsLoading(false));
+    }, [oxyServices]);
+
+    return (
+        <View style={[styles.container, { backgroundColor }]}>
+            <Text style={[styles.title, { color: textColor }]}>Karma Rules</Text>
+            {isLoading ? (
+                <ActivityIndicator size="large" color={primaryColor} style={{ marginTop: 40 }} />
+            ) : error ? (
+                <Text style={[styles.error, { color: '#D32F2F' }]}>{error}</Text>
+            ) : (
+                <ScrollView contentContainerStyle={styles.listContainer}>
+                    {rules.length === 0 ? (
+                        <Text style={[styles.placeholder, { color: textColor }]}>No rules found.</Text>
+                    ) : (
+                        rules.map((rule, idx) => (
+                            <View key={rule.id || idx} style={styles.ruleRow}>
+                                <Text style={[styles.ruleDesc, { color: textColor }]}>{rule.description}</Text>
+                            </View>
+                        ))
+                    )}
+                </ScrollView>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+    title: { fontSize: 24, fontWeight: 'bold', margin: 24, textAlign: 'center' },
+    listContainer: { paddingBottom: 40 },
+    ruleRow: {
+        paddingVertical: 14,
+        paddingHorizontal: 24,
+        borderBottomWidth: 1,
+        borderColor: '#eee',
+    },
+    ruleDesc: { fontSize: 16 },
+    placeholder: { fontSize: 16, color: '#888', textAlign: 'center', marginTop: 40 },
+    error: { fontSize: 16, textAlign: 'center', marginTop: 40 },
+});
+
+export default KarmaRulesScreen;

package/src/ui/styles/theme.ts

@@ -100,8 +100,7 @@ export const createCommonStyles = (theme: 'light' | 'dark') => {
       backgroundColor: colors.background,
     },
     scrollContainer: {
-      flexGrow: 1,
-      padding: 10,
+      padding: 26,
     },
     input: {
       height: 48,