@oxyhq/services 6.9.13 → 6.9.15

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

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const fonts_1 = require("../../styles/fonts");
+const vector_icons_1 = require("@expo/vector-icons");
+const useI18n_1 = require("../../hooks/useI18n");
+const useThemeStyles_1 = require("../../hooks/useThemeStyles");
+const useColorScheme_1 = require("../../hooks/useColorScheme");
+const colorUtils_1 = require("../../utils/colorUtils");
+const OxyContext_1 = require("../../context/OxyContext");
+const KarmaCenterScreen = ({ theme, navigate, goBack, }) => {
+    // Use useOxy() hook for OxyContext values
+    const { user, oxyServices, isAuthenticated } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const [karmaTotal, setKarmaTotal] = (0, react_1.useState)(null);
+    const [karmaHistory, setKarmaHistory] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(theme || 'light', colorScheme);
+    // Override primaryColor for Karma screens (purple instead of blue)
+    const primaryColor = '#d169e5';
+    const dangerColor = themeStyles.dangerColor || '#D32F2F';
+    const mutedTextColor = themeStyles.isDarkTheme ? '#BBBBBB' : '#888888';
+    // Icon colors from theme
+    const iconLeaderboard = themeStyles.colors.iconPayments;
+    const iconRules = themeStyles.colors.iconSecurity;
+    const iconAbout = themeStyles.colors.iconPayments;
+    const iconRewards = themeStyles.colors.iconStorage;
+    const iconFAQ = themeStyles.colors.iconPersonalInfo;
+    (0, react_1.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 (!isAuthenticated) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.message, { color: themeStyles.textColor }], children: t('common.status.notSignedIn') || 'Not signed in' }) }));
+    }
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor, justifyContent: 'center' }], children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: primaryColor }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor }], children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { style: styles.scrollView, contentContainerStyle: styles.scrollContainer, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.walletHeader, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.karmaAmount, { color: primaryColor }], children: karmaTotal ?? 0 }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.karmaLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888' }], children: t('karma.center.balance') || 'Karma Balance' }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.actionContainer, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.actionRow, children: [(0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: styles.actionIconWrapper, onPress: () => navigate?.('KarmaLeaderboard'), children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.actionIcon, { backgroundColor: iconLeaderboard }], children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "trophy-outline", size: 28, color: (0, colorUtils_1.darkenColor)(iconLeaderboard) }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.actionLabel, { color: mutedTextColor }], children: t('karma.center.actions.leaderboard') || 'Leaderboard' })] }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: styles.actionIconWrapper, onPress: () => navigate?.('KarmaRules'), children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.actionIcon, { backgroundColor: iconRules }], children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "document-text-outline", size: 28, color: (0, colorUtils_1.darkenColor)(iconRules) }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.actionLabel, { color: mutedTextColor }], children: t('karma.center.actions.rules') || 'Rules' })] }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: styles.actionIconWrapper, onPress: () => navigate?.('AboutKarma'), children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.actionIcon, { backgroundColor: iconAbout }], children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "star-outline", size: 28, color: (0, colorUtils_1.darkenColor)(iconAbout) }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.actionLabel, { color: mutedTextColor }], children: t('karma.center.actions.about') || 'About' })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.actionRow, children: [(0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: styles.actionIconWrapper, onPress: () => navigate?.('KarmaRewards'), children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.actionIcon, { backgroundColor: iconRewards }], children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "gift-outline", size: 28, color: (0, colorUtils_1.darkenColor)(iconRewards) }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.actionLabel, { color: mutedTextColor }], children: t('karma.center.actions.rewards') || 'Rewards' })] }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: styles.actionIconWrapper, onPress: () => navigate?.('KarmaFAQ'), children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.actionIcon, { backgroundColor: iconFAQ }], children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "help-circle-outline", size: 28, color: (0, colorUtils_1.darkenColor)(iconFAQ) }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.actionLabel, { color: mutedTextColor }], children: t('karma.center.actions.faq') || 'FAQ' })] })] })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.infoText, { color: mutedTextColor }], children: t('karma.center.info') || 'Karma can only be earned by positive actions in the Oxy Ecosystem. It cannot be sent or received directly.' })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionTitle, { color: themeStyles.textColor }], children: t('karma.center.history') || 'Karma History' }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.historyContainer, children: karmaHistory.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: themeStyles.textColor, textAlign: 'center', marginTop: 16 }, children: t('karma.center.noHistory') || 'No karma history yet.' })) : (karmaHistory.map((entry) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.historyItem, { borderColor: themeStyles.borderColor }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.historyPoints, { color: entry.points > 0 ? primaryColor : dangerColor }], children: [entry.points > 0 ? '+' : '', entry.points] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.historyDesc, { color: themeStyles.textColor }], children: entry.reason || (t('karma.center.noDescription') || 'No description') }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.historyDate, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888' }], children: entry.createdAt ? new Date(entry.createdAt).toLocaleString() : '' })] }, entry.id)))) }), error && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: dangerColor, marginTop: 16, textAlign: 'center' }, children: error })] }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContainer: {
+        padding: 0,
+        alignItems: 'center',
+    },
+    walletHeader: {
+        alignItems: 'center',
+        paddingTop: 36,
+        paddingBottom: 24,
+        width: '100%',
+        backgroundColor: 'transparent',
+    },
+    karmaLabel: {
+        fontSize: 16,
+        marginBottom: 18,
+        fontFamily: fonts_1.fontFamilies.inter,
+    },
+    karmaAmount: {
+        fontSize: 48,
+        fontWeight: 'bold',
+        marginBottom: 4,
+        fontFamily: fonts_1.fontFamilies.inter,
+    },
+    actionContainer: {
+        marginBottom: 18,
+        gap: 8,
+    },
+    actionRow: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: 2,
+    },
+    actionIconWrapper: {
+        alignItems: 'center',
+        width: 72,
+    },
+    actionIcon: {
+        width: 56,
+        height: 56,
+        borderRadius: 28,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 6,
+    },
+    actionIconText: {
+        fontSize: 28,
+    },
+    actionLabel: {
+        fontSize: 10,
+    },
+    infoText: {
+        fontSize: 13,
+        textAlign: 'center',
+        marginTop: 8,
+        marginBottom: 8,
+        maxWidth: 320,
+    },
+    sectionTitle: {
+        fontSize: 18,
+        fontWeight: react_native_1.Platform.OS === 'web' ? '600' : undefined,
+        fontFamily: fonts_1.fontFamilies.interSemiBold,
+        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,
+    },
+    message: {
+        fontSize: 16,
+        textAlign: 'center',
+        marginTop: 24,
+    },
+});
+exports.default = KarmaCenterScreen;

package/src/ui/screens/karma/KarmaFAQScreen.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { BaseScreenProps } from '../../types/navigation';
+declare const _default: React.NamedExoticComponent<BaseScreenProps>;
+export default _default;

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

@@ -0,0 +1,143 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const components_1 = require("../../components");
+const useI18n_1 = require("../../hooks/useI18n");
+const useThemeStyles_1 = require("../../hooks/useThemeStyles");
+const themeUtils_1 = require("../../utils/themeUtils");
+const useColorScheme_1 = require("../../hooks/useColorScheme");
+const theme_1 = require("../../constants/theme");
+const FAQ_KEYS = ['what', 'earn', 'lose', 'use', 'transfer', 'support'];
+/**
+ * KarmaFAQScreen - Optimized for performance
+ *
+ * Performance optimizations implemented:
+ * - useMemo for theme calculations (only recalculates when theme changes)
+ * - useMemo for filtered FAQs (only recalculates when search changes)
+ * - useCallback for event handlers to prevent unnecessary re-renders
+ * - React.memo wrapper to prevent re-renders when props haven't changed
+ */
+const KarmaFAQScreen = ({ goBack, theme }) => {
+    const { t } = (0, useI18n_1.useI18n)();
+    const [expanded, setExpanded] = (0, react_1.useState)(null);
+    const [search, setSearch] = (0, react_1.useState)('');
+    // Memoize theme-related calculations to prevent unnecessary recalculations
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const baseThemeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme);
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const normalizedColorScheme = (0, themeUtils_1.normalizeColorScheme)(colorScheme);
+    const colors = theme_1.Colors[normalizedColorScheme];
+    const themeStyles = (0, react_1.useMemo)(() => ({
+        ...baseThemeStyles,
+        primaryColor: '#d169e5',
+        inputBg: baseThemeStyles.isDarkTheme ? '#23232b' : '#f2f2f7',
+        inputBorder: baseThemeStyles.borderColor,
+    }), [baseThemeStyles]);
+    // Memoize filtered FAQs to prevent filtering on every render
+    const faqs = (0, react_1.useMemo)(() => FAQ_KEYS.map(key => ({
+        id: key,
+        q: t(`karma.faq.items.${key}.q`) || '',
+        a: t(`karma.faq.items.${key}.a`) || '',
+    })), [t]);
+    const filteredFaqs = (0, react_1.useMemo)(() => {
+        if (!search.trim())
+            return faqs;
+        const searchLower = search.toLowerCase();
+        return faqs.filter(faq => faq.q.toLowerCase().includes(searchLower) ||
+            faq.a.toLowerCase().includes(searchLower));
+    }, [search, faqs]);
+    // Memoize toggle handler to prevent recreation on every render
+    const handleToggle = (0, react_1.useCallback)((id) => {
+        react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+        setExpanded(prev => prev === id ? null : id);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor }], children: [(0, jsx_runtime_1.jsx)(components_1.Header, { title: t('karma.faq.title') || 'Karma FAQ', subtitle: t('karma.faq.subtitle') || 'Frequently asked questions about karma', subtitleVariant: "muted", onBack: goBack, elevation: "subtle" }), (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { contentContainerStyle: styles.contentContainer, showsVerticalScrollIndicator: false, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.searchContainer, { backgroundColor: colors.card }], children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "search", size: 22, color: colors.icon }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [styles.searchInput, { color: themeStyles.textColor }], placeholder: t('karma.faq.search') || 'Search FAQ...', placeholderTextColor: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888', value: search, onChangeText: setSearch, returnKeyType: "search" })] }), filteredFaqs.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.noResults, { color: colors.secondaryText }], children: t('karma.faq.noResults', { query: search }) || `No FAQ items found matching "${search}"` })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.groupedSectionContainer, children: filteredFaqs.map((faq, idx) => {
+                            const isExpanded = expanded === faq.id;
+                            const isFirst = idx === 0;
+                            const isLast = idx === filteredFaqs.length - 1;
+                            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.faqItemWrapper, { marginBottom: idx < filteredFaqs.length - 1 ? 4 : 0 }], children: [(0, jsx_runtime_1.jsx)(components_1.GroupedItem, { title: faq.q, onPress: () => handleToggle(faq.id), isFirst: isFirst, isLast: isLast && !isExpanded, showChevron: false, customContent: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: isExpanded ? 'chevron-up' : 'chevron-down', size: 20, color: colors.icon }) }), isExpanded && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.answerContainer, { backgroundColor: colors.card }, isLast && styles.lastAnswerContainer], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.answer, { color: themeStyles.textColor }], children: faq.a }) }))] }, faq.id));
+                        }) }))] })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1 },
+    contentContainer: {
+        paddingHorizontal: 24,
+        paddingTop: 20,
+        paddingBottom: 40,
+    },
+    searchContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        marginBottom: 12,
+        borderRadius: 999,
+        gap: 10,
+    },
+    searchInput: {
+        flex: 1,
+        fontSize: 16,
+        lineHeight: 20,
+    },
+    groupedSectionContainer: {
+        width: '100%',
+    },
+    faqItemWrapper: {
+        width: '100%',
+    },
+    answerContainer: {
+        paddingHorizontal: 10,
+        paddingTop: 4,
+        paddingBottom: 12,
+    },
+    lastAnswerContainer: {
+        borderBottomLeftRadius: 18,
+        borderBottomRightRadius: 18,
+    },
+    answer: {
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    noResults: {
+        fontSize: 16,
+        marginTop: 32,
+        textAlign: 'center',
+    },
+});
+exports.default = react_1.default.memo(KarmaFAQScreen);

package/src/ui/screens/karma/KarmaLeaderboardScreen.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../../types/navigation';
+declare const KarmaLeaderboardScreen: React.FC<BaseScreenProps>;
+export default KarmaLeaderboardScreen;

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

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const Avatar_1 = __importDefault(require("../../components/Avatar"));
+const components_1 = require("../../components");
+const useI18n_1 = require("../../hooks/useI18n");
+const useThemeStyles_1 = require("../../hooks/useThemeStyles");
+const themeUtils_1 = require("../../utils/themeUtils");
+const useColorScheme_1 = require("../../hooks/useColorScheme");
+const OxyContext_1 = require("../../context/OxyContext");
+const KarmaLeaderboardScreen = ({ goBack, theme, navigate }) => {
+    // Use useOxy() hook for OxyContext values
+    const { oxyServices } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const [leaderboard, setLeaderboard] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme, colorScheme);
+    // Override primaryColor for Karma screens (purple instead of blue)
+    const primaryColor = '#d169e5';
+    (0, react_1.useEffect)(() => {
+        setIsLoading(true);
+        setError(null);
+        oxyServices.getKarmaLeaderboard()
+            .then((data) => setLeaderboard(Array.isArray(data) ? data : []))
+            .catch((err) => setError((err instanceof Error ? err.message : null) || 'Failed to load leaderboard'))
+            .finally(() => setIsLoading(false));
+    }, [oxyServices]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor }], children: [(0, jsx_runtime_1.jsx)(components_1.Header, { title: t('karma.leaderboard.title') || 'Karma Leaderboard', subtitle: t('karma.leaderboard.subtitle') || 'Top contributors in the community', onBack: goBack, elevation: "subtle" }), isLoading ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: primaryColor, style: { marginTop: 40 } })) : error ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.error, { color: '#D32F2F' }], children: error })) : ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { contentContainerStyle: styles.listContainer, children: leaderboard.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.placeholder, { color: themeStyles.textColor }], children: t('karma.leaderboard.empty') || 'No leaderboard data.' })) : (leaderboard.map((entry, idx) => ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.row, idx < 3 && { backgroundColor: '#f7eaff' }], onPress: () => navigate?.('Profile', { userId: entry.userId, username: entry.username }), activeOpacity: 0.7, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.rank, { color: primaryColor }], children: idx + 1 }), (0, jsx_runtime_1.jsx)(Avatar_1.default, { name: entry.username || 'User', size: 40, style: styles.avatar }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.username, { color: themeStyles.textColor }], children: entry.username || entry.userId }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.karma, { color: primaryColor }], children: entry.total })] }, entry.userId)))) }))] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1 },
+    listContainer: { paddingBottom: 40, paddingTop: 20 },
+    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 },
+});
+exports.default = KarmaLeaderboardScreen;

package/src/ui/screens/karma/KarmaRewardsScreen.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../../types/navigation';
+declare const KarmaRewardsScreen: React.FC<BaseScreenProps>;
+export default KarmaRewardsScreen;