@oxyhq/services 10.2.0 → 10.2.1

package/src/ui/screens/{karma/KarmaAboutScreen.tsx → trust/TrustAboutScreen.tsx}

@@ -5,40 +5,40 @@ import Header from '../../components/Header';
 import { useI18n } from '../../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 
-const KarmaAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
+const TrustAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const { t } = useI18n();
     const bloomTheme = useTheme();
-    // Override primaryColor for Karma screens (purple instead of blue)
+    // Override primaryColor for Oxy Trust screens (purple instead of blue)
     const primaryColor = '#d169e5';
 
     return (
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
             <Header
-                title={t('karma.about.title') || 'About Karma'}
-                subtitle={t('karma.about.subtitle') || 'Learn about the karma system'}
-                
+                title={t('trust.about.title') || 'About Oxy Trust'}
+                subtitle={t('trust.about.subtitle') || 'Learn about the reputation system'}
+
                 onBack={goBack}
                 elevation="subtle"
             />
             <ScrollView contentContainerStyle={styles.contentContainer}>
                 <Text style={[styles.paragraph, { color: bloomTheme.colors.text }]}>
-                    {t('karma.about.intro') || '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.'}
+                    {t('trust.about.intro') || 'Oxy Trust is a recognition of your positive actions in the Oxy Ecosystem. Reputation cannot be sent or received directly, only earned by contributing to the community.'}
                 </Text>
                 <Text style={[styles.section, { color: primaryColor }]}>
-                    {t('karma.about.how.title') || 'How to Earn Karma'}
+                    {t('trust.about.how.title') || 'How to Earn Reputation'}
                 </Text>
                 <Text style={[styles.paragraph, { color: bloomTheme.colors.text }]}>
-                    • {t('karma.about.how.help') || 'Helping other users'}{'\n'}
-                    • {t('karma.about.how.report') || 'Reporting bugs'}{'\n'}
-                    • {t('karma.about.how.contribute') || 'Contributing content'}{'\n'}
-                    • {t('karma.about.how.participate') || 'Participating in events'}{'\n'}
-                    • {t('karma.about.how.other') || 'Other positive actions'}
+                    • {t('trust.about.how.help') || 'Helping other users'}{'\n'}
+                    • {t('trust.about.how.report') || 'Reporting bugs'}{'\n'}
+                    • {t('trust.about.how.contribute') || 'Contributing content'}{'\n'}
+                    • {t('trust.about.how.participate') || 'Participating in events'}{'\n'}
+                    • {t('trust.about.how.other') || 'Other positive actions'}
                 </Text>
                 <Text style={[styles.section, { color: primaryColor }]}>
-                    {t('karma.about.why.title') || 'Why Karma?'}
+                    {t('trust.about.why.title') || 'Why Oxy Trust?'}
                 </Text>
                 <Text style={[styles.paragraph, { color: bloomTheme.colors.text }]}>
-                    {t('karma.about.why.text') || 'Karma unlocks special features and recognition in the Oxy Ecosystem. The more you contribute, the more you earn!'}
+                    {t('trust.about.why.text') || 'Your reputation and trust tier unlock special features and recognition in the Oxy Ecosystem. The more you contribute, the more you earn!'}
                 </Text>
             </ScrollView>
         </View>
@@ -63,4 +63,4 @@ const styles = StyleSheet.create({
     paragraph: { fontSize: 16, marginBottom: 12 },
 });
 
-export default KarmaAboutScreen;
+export default TrustAboutScreen;

package/src/ui/screens/{karma/KarmaCenterScreen.tsx → trust/TrustCenterScreen.tsx}

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
     View,
     Text,
@@ -7,9 +7,9 @@ import {
     StyleSheet,
     ActivityIndicator,
     ScrollView,
-    Alert,
     Platform,
 } from 'react-native';
+import type { ReputationTransaction, TrustTier } from '@oxyhq/core';
 import type { BaseScreenProps } from '../../types/navigation';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../../hooks/useI18n';
@@ -19,8 +19,9 @@ import { Colors } from '../../constants/theme';
 import { normalizeColorScheme } from '../../utils/themeUtils';
 import { darkenColor } from '../../utils/colorUtils';
 import { useOxy } from '../../context/OxyContext';
+import { getTrustTierLabel } from './trustTier';
 
-const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
+const TrustCenterScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
     goBack,
@@ -28,8 +29,9 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
     // Use useOxy() hook for OxyContext values
     const { user, oxyServices, isAuthenticated } = useOxy();
     const { t } = useI18n();
-    const [karmaTotal, setKarmaTotal] = useState<number | null>(null);
-    const [karmaHistory, setKarmaHistory] = useState<any[]>([]);
+    const [reputationTotal, setReputationTotal] = useState<number | null>(null);
+    const [trustTier, setTrustTier] = useState<TrustTier | null>(null);
+    const [transactions, setTransactions] = useState<ReputationTransaction[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
@@ -37,7 +39,7 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
     const colorScheme = useColorScheme();
     const normalizedColorScheme = normalizeColorScheme(colorScheme);
     const themeColors = Colors[normalizedColorScheme];
-    // Override primaryColor for Karma screens (purple instead of blue)
+    // Override primaryColor for Oxy Trust screens (purple instead of blue)
     const primaryColor = '#d169e5';
     const dangerColor = bloomTheme.colors.error;
     const mutedTextColor = bloomTheme.colors.textTertiary;
@@ -54,18 +56,27 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
         setIsLoading(true);
         setError(null);
         Promise.all([
-            oxyServices.getUserKarmaTotal(user.id),
-            oxyServices.getUserKarmaHistory(user.id, 20, 0),
+            oxyServices.getReputationBalance(user.id),
+            oxyServices.getReputationTransactions(user.id, 20, 0),
         ])
-            .then(([totalRes, historyRes]) => {
-                setKarmaTotal(totalRes.total);
-                setKarmaHistory(Array.isArray(historyRes.history) ? historyRes.history : []);
+            .then(([balance, txns]) => {
+                setReputationTotal(balance.total);
+                setTrustTier(balance.trustTier);
+                setTransactions(Array.isArray(txns) ? txns : []);
             })
-            .catch((err) => {
-                setError(err.message || 'Failed to load karma data');
+            .catch((err: unknown) => {
+                setError(
+                    (err instanceof Error ? err.message : null) ||
+                        (t('trust.center.loadError') || 'Failed to load reputation data'),
+                );
             })
             .finally(() => setIsLoading(false));
-    }, [user]);
+    }, [user, oxyServices, t]);
+
+    const trustTierLabel = useMemo(
+        () => (trustTier ? getTrustTierLabel(trustTier, t) : null),
+        [trustTier, t],
+    );
 
     if (!isAuthenticated) {
         return (
@@ -87,70 +98,81 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer}>
                 <View style={styles.walletHeader}>
-                    <Text style={[styles.karmaAmount, { color: primaryColor }]}>{karmaTotal ?? 0}</Text>
-                    <Text style={[styles.karmaLabel, { color: bloomTheme.colors.textTertiary }]}>
-                        {t('karma.center.balance') || 'Karma Balance'}
+                    <Text style={[styles.reputationAmount, { color: primaryColor }]}>{reputationTotal ?? 0}</Text>
+                    <Text style={[styles.reputationLabel, { color: bloomTheme.colors.textTertiary }]}>
+                        {t('trust.center.balance') || 'Reputation Balance'}
                     </Text>
+                    {trustTierLabel && (
+                        <View style={[styles.tierBadge, { borderColor: primaryColor }]}>
+                            <Ionicons name="shield-checkmark-outline" size={14} color={primaryColor} />
+                            <Text style={[styles.tierBadgeText, { color: primaryColor }]}>{trustTierLabel}</Text>
+                        </View>
+                    )}
                     <View style={styles.actionContainer}>
                         <View style={styles.actionRow}>
-                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate?.('KarmaLeaderboard')}>
+                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate?.('TrustLeaderboard')}>
                                 <View style={[styles.actionIcon, { backgroundColor: iconLeaderboard }]}>
                                     <Ionicons name="trophy-outline" size={28} color={darkenColor(iconLeaderboard)} />
                                 </View>
-                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{t('karma.center.actions.leaderboard') || 'Leaderboard'}</Text>
+                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{t('trust.center.actions.leaderboard') || 'Leaderboard'}</Text>
                             </TouchableOpacity>
-                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate?.('KarmaRules')}>
+                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate?.('TrustRules')}>
                                 <View style={[styles.actionIcon, { backgroundColor: iconRules }]}>
                                     <Ionicons name="document-text-outline" size={28} color={darkenColor(iconRules)} />
                                 </View>
-                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{t('karma.center.actions.rules') || 'Rules'}</Text>
+                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{t('trust.center.actions.rules') || 'Rules'}</Text>
                             </TouchableOpacity>
-                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate?.('AboutKarma')}>
+                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate?.('AboutTrust')}>
                                 <View style={[styles.actionIcon, { backgroundColor: iconAbout }]}>
                                     <Ionicons name="star-outline" size={28} color={darkenColor(iconAbout)} />
                                 </View>
-                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{t('karma.center.actions.about') || 'About'}</Text>
+                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{t('trust.center.actions.about') || 'About'}</Text>
                             </TouchableOpacity>
                         </View>
                         <View style={styles.actionRow}>
-                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate?.('KarmaRewards')}>
+                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate?.('TrustRewards')}>
                                 <View style={[styles.actionIcon, { backgroundColor: iconRewards }]}>
                                     <Ionicons name="gift-outline" size={28} color={darkenColor(iconRewards)} />
                                 </View>
-                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{t('karma.center.actions.rewards') || 'Rewards'}</Text>
+                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{t('trust.center.actions.rewards') || 'Rewards'}</Text>
                             </TouchableOpacity>
-                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate?.('KarmaFAQ')}>
+                            <TouchableOpacity style={styles.actionIconWrapper} onPress={() => navigate?.('TrustFAQ')}>
                                 <View style={[styles.actionIcon, { backgroundColor: iconFAQ }]}>
                                     <Ionicons name="help-circle-outline" size={28} color={darkenColor(iconFAQ)} />
                                 </View>
-                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{t('karma.center.actions.faq') || 'FAQ'}</Text>
+                                <Text style={[styles.actionLabel, { color: mutedTextColor }]}>{t('trust.center.actions.faq') || 'FAQ'}</Text>
                             </TouchableOpacity>
                         </View>
                     </View>
                     <Text style={[styles.infoText, { color: mutedTextColor }]}>
-                        {t('karma.center.info') || 'Karma can only be earned by positive actions in the Oxy Ecosystem. It cannot be sent or received directly.'}
+                        {t('trust.center.info') || 'Reputation 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: bloomTheme.colors.text }]}>
-                    {t('karma.center.history') || 'Karma History'}
+                    {t('trust.center.history') || 'Reputation History'}
                 </Text>
                 <View style={styles.historyContainer}>
-                    {karmaHistory.length === 0 ? (
+                    {transactions.length === 0 ? (
                         <Text style={{ color: bloomTheme.colors.text, textAlign: 'center', marginTop: 16 }}>
-                            {t('karma.center.noHistory') || 'No karma history yet.'}
+                            {t('trust.center.noHistory') || 'No reputation history yet.'}
                         </Text>
                     ) : (
-                        karmaHistory.map((entry: any) => (
+                        transactions.map((entry) => (
                             <View key={entry.id} style={[styles.historyItem, { borderColor: bloomTheme.colors.border }]}>
                                 <Text style={[styles.historyPoints, { color: entry.points > 0 ? primaryColor : dangerColor }]}>
                                     {entry.points > 0 ? '+' : ''}{entry.points}
                                 </Text>
                                 <Text style={[styles.historyDesc, { color: bloomTheme.colors.text }]}>
-                                    {entry.reason || (t('karma.center.noDescription') || 'No description')}
-                                </Text>
-                                <Text style={[styles.historyDate, { color: bloomTheme.colors.textTertiary }]}>
-                                    {entry.createdAt ? new Date(entry.createdAt).toLocaleString() : ''}
+                                    {entry.reason || entry.actionType || (t('trust.center.noDescription') || 'No description')}
                                 </Text>
+                                <View style={styles.historyMetaRow}>
+                                    <Text style={[styles.historyCategory, { color: primaryColor }]}>
+                                        {entry.category}
+                                    </Text>
+                                    <Text style={[styles.historyDate, { color: bloomTheme.colors.textTertiary }]}>
+                                        {entry.createdAt ? new Date(entry.createdAt).toLocaleString() : ''}
+                                    </Text>
+                                </View>
                             </View>
                         ))
                     )}
@@ -179,15 +201,29 @@ const styles = StyleSheet.create({
         width: '100%',
         backgroundColor: 'transparent',
     },
-    karmaLabel: {
+    reputationLabel: {
         fontSize: 16,
-        marginBottom: 18,
+        marginBottom: 12,
     },
-    karmaAmount: {
+    reputationAmount: {
         fontSize: 48,
         fontWeight: 'bold',
         marginBottom: 4,
     },
+    tierBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        borderWidth: 1,
+        borderRadius: 999,
+        paddingHorizontal: 12,
+        paddingVertical: 5,
+        marginBottom: 18,
+    },
+    tierBadgeText: {
+        fontSize: 13,
+        fontWeight: '600',
+    },
     actionContainer: {
         marginBottom: 18,
         gap: 8,
@@ -248,9 +284,19 @@ const styles = StyleSheet.create({
         fontSize: 15,
         marginTop: 2,
     },
+    historyMetaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginTop: 2,
+    },
+    historyCategory: {
+        fontSize: 12,
+        fontWeight: '600',
+        textTransform: 'capitalize',
+    },
     historyDate: {
         fontSize: 13,
-        marginTop: 2,
     },
 
     message: {
@@ -260,4 +306,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default KarmaCenterScreen;
+export default TrustCenterScreen;

package/src/ui/screens/{karma/KarmaFAQScreen.tsx → trust/TrustFAQScreen.tsx}

@@ -13,15 +13,15 @@ import { Colors } from '../../constants/theme';
 const FAQ_KEYS = ['what', 'earn', 'lose', 'use', 'transfer', 'support'] as const;
 
 /**
- * KarmaFAQScreen - Optimized for performance
- * 
+ * TrustFAQScreen - 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: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
+const TrustFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const { t } = useI18n();
     const [expanded, setExpanded] = useState<string | null>(null);
     const [search, setSearch] = useState('');
@@ -35,8 +35,8 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     // Memoize filtered FAQs to prevent filtering on every render
     const faqs = useMemo(() => FAQ_KEYS.map(key => ({
         id: key,
-        q: t(`karma.faq.items.${key}.q`) || '',
-        a: t(`karma.faq.items.${key}.a`) || '',
+        q: t(`trust.faq.items.${key}.q`) || '',
+        a: t(`trust.faq.items.${key}.a`) || '',
     })), [t]);
 
     const filteredFaqs = useMemo(() => {
@@ -57,8 +57,8 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     return (
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
             <Header
-                title={t('karma.faq.title') || 'Karma FAQ'}
-                subtitle={t('karma.faq.subtitle') || 'Frequently asked questions about karma'}
+                title={t('trust.faq.title') || 'Trust FAQ'}
+                subtitle={t('trust.faq.subtitle') || 'Frequently asked questions about Oxy Trust'}
                 subtitleVariant="muted"
 
                 onBack={goBack}
@@ -72,7 +72,7 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                     <Ionicons name="search" size={22} color={colors.icon} />
                     <TextInput
                         style={[styles.searchInput, { color: bloomTheme.colors.text }]}
-                        placeholder={t('karma.faq.search') || 'Search FAQ...'}
+                        placeholder={t('trust.faq.search') || 'Search FAQ...'}
                         placeholderTextColor={bloomTheme.colors.textTertiary}
                         value={search}
                         onChangeText={setSearch}
@@ -81,7 +81,7 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                 </View>
                 {filteredFaqs.length === 0 ? (
                     <Text style={[styles.noResults, { color: colors.secondaryText }]}>
-                        {t('karma.faq.noResults', { query: search }) || `No FAQ items found matching "${search}"`}
+                        {t('trust.faq.noResults', { query: search }) || `No FAQ items found matching "${search}"`}
                     </Text>
                 ) : (
                     <View style={styles.groupedSectionContainer}>
@@ -167,4 +167,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default React.memo(KarmaFAQScreen);
+export default React.memo(TrustFAQScreen);

package/src/ui/screens/trust/TrustLeaderboardScreen.tsx

@@ -0,0 +1,101 @@
+import type React from 'react';
+import { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity } from 'react-native';
+import type { ReputationLeaderboardEntry } from '@oxyhq/core';
+import type { BaseScreenProps } from '../../types/navigation';
+import Avatar from '../../components/Avatar';
+import Header from '../../components/Header';
+import { useI18n } from '../../hooks/useI18n';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { useOxy } from '../../context/OxyContext';
+import { getTrustTierLabel } from './trustTier';
+
+const TrustLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navigate }) => {
+    // Use useOxy() hook for OxyContext values
+    const { oxyServices } = useOxy();
+    const { t } = useI18n();
+    const [leaderboard, setLeaderboard] = useState<ReputationLeaderboardEntry[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const bloomTheme = useTheme();
+    // Override primaryColor for Oxy Trust screens (purple instead of blue)
+    const primaryColor = '#d169e5';
+
+    useEffect(() => {
+        setIsLoading(true);
+        setError(null);
+        oxyServices.getReputationLeaderboard()
+            .then((data) => setLeaderboard(Array.isArray(data) ? data : []))
+            .catch((err: unknown) => setError((err instanceof Error ? err.message : null) || 'Failed to load leaderboard'))
+            .finally(() => setIsLoading(false));
+    }, [oxyServices]);
+
+    return (
+        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+            <Header
+                title={t('trust.leaderboard.title') || 'Trust Leaderboard'}
+                subtitle={t('trust.leaderboard.subtitle') || 'Top contributors in the community'}
+
+                onBack={goBack}
+                elevation="subtle"
+            />
+            {isLoading ? (
+                <ActivityIndicator size="large" color={primaryColor} style={{ marginTop: 40 }} />
+            ) : error ? (
+                <Text style={[styles.error, { color: bloomTheme.colors.error }]}>{error}</Text>
+            ) : (
+                <ScrollView contentContainerStyle={styles.listContainer}>
+                    {leaderboard.length === 0 ? (
+                        <Text style={[styles.placeholder, { color: bloomTheme.colors.text }]}>{t('trust.leaderboard.empty') || 'No leaderboard data.'}</Text>
+                    ) : (
+                        leaderboard.map((entry) => {
+                            const username = entry.user.username;
+                            const displayName = username || entry.user.id;
+                            return (
+                                <TouchableOpacity
+                                    key={entry.user.id}
+                                    style={[styles.row, { borderColor: bloomTheme.colors.border }, entry.rank <= 3 && { backgroundColor: bloomTheme.colors.primarySubtle }]}
+                                    onPress={() => navigate?.('Profile', { userId: entry.user.id, username })}
+                                    activeOpacity={0.7}
+                                >
+                                    <Text style={[styles.rank, { color: primaryColor }]}>{entry.rank}</Text>
+                                    <Avatar name={username || 'User'} size={40} style={styles.avatar} />
+                                    <View style={styles.userColumn}>
+                                        <Text style={[styles.username, { color: bloomTheme.colors.text }]} numberOfLines={1}>{displayName}</Text>
+                                        <Text style={[styles.tier, { color: bloomTheme.colors.textTertiary }]} numberOfLines={1}>
+                                            {getTrustTierLabel(entry.trustTier, t)}
+                                        </Text>
+                                    </View>
+                                    <Text style={[styles.reputation, { color: primaryColor }]}>{entry.total}</Text>
+                                </TouchableOpacity>
+                            );
+                        })
+                    )}
+                </ScrollView>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+    listContainer: { paddingBottom: 40, paddingTop: 20 },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        borderBottomWidth: 1,
+    },
+    rank: { fontSize: 20, width: 32, textAlign: 'center', fontWeight: 'bold' },
+    avatar: { marginHorizontal: 8 },
+    userColumn: { flex: 1, marginLeft: 8 },
+    username: { fontSize: 16 },
+    tier: { fontSize: 12, marginTop: 1 },
+    reputation: { fontSize: 18, fontWeight: 'bold', marginLeft: 12 },
+    placeholder: { fontSize: 16, textAlign: 'center', marginTop: 40 },
+    error: { fontSize: 16, textAlign: 'center', marginTop: 40 },
+});
+
+export default TrustLeaderboardScreen;