@oxyhq/services 10.2.0 → 10.2.2

package/src/ui/screens/OxyAuthScreen.tsx

@@ -142,13 +142,12 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
   // `claimSessionByToken` — the device-flow equivalent of OAuth's
   // code-for-token exchange (RFC 8628 §3.4).
   //
-  // Without that exchange the SDK has no bearer token, so the subsequent
-  // `switchSession` -> `getTokenBySession` call (`GET /session/token/:id`) 401s
-  // against the C1-hardened API — the session is authorized server-side but the
-  // app never becomes authenticated and the sheet sits "Waiting for
-  // authorization..." forever. Once `claimSessionByToken` plants the tokens in
-  // the HttpService, the rest of the session wiring flows through the normal
-  // `switchSession` path. This mirrors `SignInModal`'s web flow exactly.
+  // Without that exchange the SDK has no bearer token — the session is
+  // authorized server-side but the app never becomes authenticated and the
+  // sheet sits "Waiting for authorization..." forever. Once
+  // `claimSessionByToken` plants the tokens in the HttpService, the rest of the
+  // session wiring flows through the normal `switchSession` path. This mirrors
+  // `SignInModal`'s web flow exactly.
   const handleAuthSuccess = useCallback(async (sessionId: string, sessionToken: string) => {
     if (isProcessingRef.current) return;
     isProcessingRef.current = true;

package/src/ui/screens/ProfileScreen.tsx

@@ -32,7 +32,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
     // Use useOxy() hook for OxyContext values
     const { oxyServices, user: currentUser } = useOxy();
     const [profile, setProfile] = useState<User | null>(null);
-    const [karmaTotal, setKarmaTotal] = useState<number | null>(null);
+    const [reputationTotal, setReputationTotal] = useState<number | null>(null);
     const [postsCount, setPostsCount] = useState<number | null>(null);
     const [commentsCount, setCommentsCount] = useState<number | null>(null);
     const [isLoading, setIsLoading] = useState(true);
@@ -77,7 +77,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
         setIsLoading(true);
         setError(null);
 
-        // Load user profile, karma total, and stats
+        // Load user profile, reputation total, and stats
         Promise.all([
             oxyServices.getUserById(userId).catch((err: unknown) => {
                 // If this is the current user and the API call fails, use current user data as fallback
@@ -88,18 +88,16 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 }
                 throw err;
             }),
-            oxyServices.getUserKarmaTotal ?
-                oxyServices.getUserKarmaTotal(userId).catch(() => {
-                    return { total: undefined };
-                }) :
-                Promise.resolve({ total: undefined }),
+            oxyServices.getReputationBalance(userId)
+                .then((balance): { total: number | undefined } => ({ total: balance.total }))
+                .catch((): { total: number | undefined } => ({ total: undefined })),
             oxyServices.getUserStats ?
                 oxyServices.getUserStats(userId).catch(() => {
                     return { postCount: 0, commentCount: 0 };
                 }) :
                 Promise.resolve({ postCount: 0, commentCount: 0 })
         ])
-            .then(([profileRes, karmaRes, statsRes]) => {
+            .then(([profileRes, reputationRes, statsRes]) => {
                 if (!profileRes) {
                     setError('Profile data is not available');
                     setIsLoading(false);
@@ -107,7 +105,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 }
 
                 setProfile(profileRes);
-                setKarmaTotal(typeof karmaRes.total === 'number' ? karmaRes.total : null);
+                setReputationTotal(typeof reputationRes.total === 'number' ? reputationRes.total : null);
 
                 // Extract links from profile data
                 if (profileRes.linksMetadata && Array.isArray(profileRes.linksMetadata)) {
@@ -326,24 +324,24 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                     {/* All Stats in one row */}
                     <View style={styles.statsRow}>
                         <View style={styles.statItem}>
-                            <Text style={styles.karmaAmount} className="text-primary">{karmaTotal !== null && karmaTotal !== undefined ? karmaTotal : '--'}</Text>
-                            <Text style={styles.karmaLabel} className="text-muted-foreground">{t('profile.karma') || 'Karma'}</Text>
+                            <Text style={styles.statAmount} className="text-primary">{reputationTotal !== null && reputationTotal !== undefined ? reputationTotal : '--'}</Text>
+                            <Text style={styles.statLabel} className="text-muted-foreground">{t('profile.reputation') || 'Reputation'}</Text>
                         </View>
                         <View style={styles.statItem}>
                             {isLoadingCounts ? (
                                 <ActivityIndicator size="small" color={bloomTheme.colors.text} />
                             ) : (
-                                <Text style={styles.karmaAmount} className="text-foreground">{followerCount !== null ? followerCount : '--'}</Text>
+                                <Text style={styles.statAmount} className="text-foreground">{followerCount !== null ? followerCount : '--'}</Text>
                             )}
-                            <Text style={styles.karmaLabel} className="text-muted-foreground">{t('profile.followers') || 'Followers'}</Text>
+                            <Text style={styles.statLabel} className="text-muted-foreground">{t('profile.followers') || 'Followers'}</Text>
                         </View>
                         <View style={styles.statItem}>
                             {isLoadingCounts ? (
                                 <ActivityIndicator size="small" color={bloomTheme.colors.text} />
                             ) : (
-                                <Text style={styles.karmaAmount} className="text-foreground">{followingCount !== null ? followingCount : '--'}</Text>
+                                <Text style={styles.statAmount} className="text-foreground">{followingCount !== null ? followingCount : '--'}</Text>
                             )}
-                            <Text style={styles.karmaLabel} className="text-muted-foreground">{t('profile.following') || 'Following'}</Text>
+                            <Text style={styles.statLabel} className="text-muted-foreground">{t('profile.following') || 'Following'}</Text>
                         </View>
                     </View>
                 </View>
@@ -401,8 +399,8 @@ const createStyles = () => StyleSheet.create({
     },
     statsRow: { width: '100%', flex: 1, flexDirection: 'row', alignItems: 'center', marginTop: 6, marginBottom: 2, justifyContent: 'space-between' },
     statItem: { flex: 1, alignItems: 'center', minWidth: 50, marginBottom: 12 },
-    karmaLabel: { fontSize: 14, marginBottom: 2, textAlign: 'center' },
-    karmaAmount: { fontSize: 24, fontWeight: 'bold', textAlign: 'center', letterSpacing: 0.2 },
+    statLabel: { fontSize: 14, marginBottom: 2, textAlign: 'center' },
+    statAmount: { fontSize: 24, fontWeight: 'bold', textAlign: 'center', letterSpacing: 0.2 },
     // Error handling styles
     errorHeader: {
         flexDirection: 'row',

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -115,9 +115,9 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
                 t('welcomeNew.principles.bullets.3') || 'No selling your data',
             ]
         },
-        { key: 'karma', title: t('welcomeNew.karma.title') || 'Karma = Trust & Growth', body: t('welcomeNew.karma.body') || 'Oxy Karma is a points system that reacts to what you do. Helpful, respectful, constructive actions earn it. Harmful or low‑effort stuff chips it away. More karma can unlock benefits; low karma can limit features. It keeps things fair and rewards real contribution.' },
+        { key: 'trust', title: t('welcomeNew.trust.title') || 'Oxy Trust = Trust & Growth', body: t('welcomeNew.trust.body') || 'Oxy Trust is a reputation system that reacts to what you do. Helpful, respectful, constructive actions earn reputation. Harmful or low‑effort stuff chips it away. More reputation raises your trust tier and can unlock benefits; low reputation can limit features. It keeps things fair and rewards real contribution.' },
         { key: 'avatar', title: t('welcomeNew.avatar.title') || 'Make It Yours', body: t('welcomeNew.avatar.body') || 'Add an avatar so people recognize you. It will show anywhere you show up here. Skip if you want — you can add it later.', showAvatar: true },
-        { key: 'ready', title: t('welcomeNew.ready.title') || "You're Ready", body: t('welcomeNew.ready.body') || 'Explore. Contribute. Earn karma. Stay in control.' }
+        { key: 'ready', title: t('welcomeNew.ready.title') || "You're Ready", body: t('welcomeNew.ready.body') || 'Explore. Contribute. Earn reputation. Stay in control.' }
     ];
     const totalSteps = steps.length;
     const avatarStepIndex = steps.findIndex(s => s.showAvatar);

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;