@oxyhq/services 5.11.12 → 5.12.0

package/src/ui/screens/SignInScreen.tsx

@@ -7,6 +7,7 @@ import { toast } from '../../lib/sonner';
 import StepBasedScreen, { type StepConfig } from '../components/StepBasedScreen';
 import SignInUsernameStep from './steps/SignInUsernameStep';
 import SignInPasswordStep from './steps/SignInPasswordStep';
+import SignInTotpStep from './steps/SignInTotpStep';
 
 const SignInScreen: React.FC<BaseScreenProps> = ({
     navigate,
@@ -29,15 +30,10 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         initialUserProfile ? 'valid' : 'idle'
     );
 
-    // Monitor username state changes
-    useEffect(() => {
-        console.log('👀 SignInScreen username state changed:', username);
-    }, [username]);
-
     // Cache for validation results to prevent repeated API calls
     const validationCache = useRef<Map<string, { profile: any }>>(new Map());
 
-    const { login, isLoading, user, isAuthenticated, sessions, oxyServices } = useOxy();
+    const { login, completeMfaLogin, isLoading, user, isAuthenticated, sessions, oxyServices } = useOxy();
 
     // Only log props in development mode to reduce console noise
     if (__DEV__) {
@@ -55,10 +51,10 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
 
     // Username validation using core services with caching
     const validateUsername = useCallback(async (usernameToValidate: string) => {
-        console.log('🔍 Validating username:', usernameToValidate);
+        if (__DEV__) console.log('🔍 Validating username:', usernameToValidate);
 
         if (!usernameToValidate || usernameToValidate.length < 3) {
-            console.log('❌ Username too short');
+            if (__DEV__) console.log('❌ Username too short');
             setValidationStatus('invalid');
             setErrorMessage('Username must be at least 3 characters.');
             return false;
@@ -75,21 +71,21 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         // Check cache first
         const cached = validationCache.current.get(usernameToValidate);
         if (cached) {
-            console.log('✅ Username found in cache:', cached.profile);
+            if (__DEV__) console.log('✅ Username found in cache:', cached.profile);
             setUserProfile(cached.profile);
             setValidationStatus('valid');
             setErrorMessage('');
             return true;
         }
 
-        console.log('🔄 Validating username with API...');
+        if (__DEV__) console.log('🔄 Validating username with API...');
         setIsValidating(true);
         setValidationStatus('validating');
 
         try {
             // Check if username exists
             const profile = await oxyServices.getProfileByUsername(usernameToValidate);
-            console.log('📋 Profile response:', profile);
+            if (__DEV__) console.log('📋 Profile response:', profile);
 
             if (profile && profile.username) {
                 const profileData = {
@@ -99,7 +95,7 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                     id: profile.id
                 };
 
-                console.log('✅ Username is valid:', profileData);
+                if (__DEV__) console.log('✅ Username is valid:', profileData);
                 setUserProfile(profileData);
                 setValidationStatus('valid');
                 setErrorMessage('');
@@ -111,13 +107,13 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
 
                 return true;
             } else {
-                console.log('❌ Username not found');
+                if (__DEV__) console.log('❌ Username not found');
                 setValidationStatus('invalid');
                 setErrorMessage('Username not found.');
                 return false;
             }
         } catch (error: any) {
-            console.log('🚨 Validation error:', error);
+            if (__DEV__) console.log('🚨 Validation error:', error);
 
             // If user not found (404), username doesn't exist
             if (error.status === 404 || error.code === 'USER_NOT_FOUND') {
@@ -129,7 +125,7 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
 
             // For development/testing: if API fails, allow any 3+ character username
             if (__DEV__) {
-                console.log('⚠️ Development mode: allowing username due to API error');
+                if (__DEV__) console.log('⚠️ Development mode: allowing username due to API error');
                 setValidationStatus('valid');
                 setErrorMessage('');
                 return true;
@@ -179,6 +175,8 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         return valid;
     }, [username, validateUsername]);
 
+    const [mfaToken, setMfaToken] = useState<string | null>(null);
+
     const handleSignIn = useCallback(async () => {
         if (!password) {
             setErrorMessage('Please enter your password.');
@@ -195,6 +193,10 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                 onAuthenticated(user);
             }
         } catch (error: any) {
+            if (error?.code === 'MFA_REQUIRED' && error?.mfaToken) {
+                setMfaToken(error.mfaToken);
+                return; // Password step will auto-advance when MFA token is set
+            }
             setErrorMessage(error.message || 'Login failed');
         }
     }, [username, password, login, onAuthenticated, userProfile]);
@@ -207,24 +209,22 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
     }, []);
 
     // Step configurations
-    const steps: StepConfig[] = useMemo(() => [
-        {
-            id: 'username',
-            component: SignInUsernameStep,
-            canProceed: () => true, // Let the component handle validation internally
-        },
-        {
-            id: 'password',
-            component: SignInPasswordStep,
-            canProceed: () => true, // Let the component handle validation internally
-        },
-    ], [username, password, validationStatus, validateUsername, handleSignIn]);
+    const steps: StepConfig[] = useMemo(() => {
+        const base: StepConfig[] = [
+            { id: 'username', component: SignInUsernameStep, canProceed: () => true },
+            { id: 'password', component: SignInPasswordStep, canProceed: () => true },
+        ];
+        if (mfaToken) {
+            base.push({ id: 'totp', component: SignInTotpStep, canProceed: () => true });
+        }
+        return base;
+    }, [mfaToken, username, password, validationStatus, validateUsername, handleSignIn]);
 
     // Handle step completion (final step)
     const handleComplete = useCallback(async (stepData: any[]) => {
         // The sign-in is handled by the password step component
         // This callback is here for interface compatibility
-        console.log('Sign-in flow completed');
+        if (__DEV__) console.log('Sign-in flow completed');
     }, []);
 
     // Step data for the reusable component
@@ -258,12 +258,21 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             handleInputFocus,
             handleInputBlur,
             handleSignIn, // Add sign-in function for password step
+            mfaToken,
         },
+        ...(mfaToken ? [{
+            username,
+            mfaToken,
+            completeMfaLogin,
+            errorMessage,
+            setErrorMessage,
+            isLoading,
+        }] : []),
     ], [
-        username, password, errorMessage, validationStatus, userProfile,
+        username, password, errorMessage, validationStatus, userProfile, mfaToken,
         isValidating, isInputFocused, isAddAccountMode, user, showPassword,
         isLoading, handleUsernameChange, handlePasswordChange, handleInputFocus, handleInputBlur,
-        validateUsername, handleSignIn
+        validateUsername, handleSignIn, completeMfaLogin
     ]);
 
     return (

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -8,6 +8,7 @@ import { toast } from '../../lib/sonner';
 import { useAuthStore } from '../stores/authStore';
 import { useThemeColors } from '../styles';
 import GroupedPillButtons from '../components/internal/GroupedPillButtons';
+import { useI18n } from '../hooks/useI18n';
 
 /**
  * Post-signup welcome & onboarding screen.
@@ -22,6 +23,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
     newUser,
 }) => {
     const { user, oxyServices } = useOxy();
+    const { t } = useI18n();
     const updateUser = useAuthStore(s => s.updateUser);
     const currentUser = user || newUser; // fallback
     const colors = useThemeColors(theme);
@@ -35,13 +37,25 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
     const avatarUri = currentUser?.avatar ? oxyServices.getFileDownloadUrl(currentUser.avatar as string, 'thumb') : undefined;
 
     // Steps content
+    const welcomeTitle = currentUser?.username
+        ? (t('welcomeNew.welcome.titleWithName', { username: currentUser.username }) || `Welcome, ${currentUser.username} 👋`)
+        : (t('welcomeNew.welcome.title') || 'Welcome 👋');
     const steps: Array<{ key: string; title: string; bullets?: string[]; body?: string; showAvatar?: boolean; }> = [
-        { key: 'welcome', title: `Welcome${currentUser?.username ? `, ${currentUser.username}` : ''} 👋`, body: 'You just created an account in a calm, ethical space. A few quick things — then you\'re in.' },
-        { key: 'account', title: 'One Account. Simple.', bullets: ['One identity across everything', 'No re‑signing in all the time', 'Your preferences stay with you'] },
-        { key: 'principles', title: 'What We Stand For', bullets: ['Privacy by default', 'No manipulative feeds', 'You decide what to share', 'No selling your data'] },
-        { key: 'karma', title: 'Karma = Trust & Growth', 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: 'avatar', title: 'Make It Yours', 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: 'You\'re Ready', body: 'Explore. Contribute. Earn karma. Stay in control.' }
+        { key: 'welcome', title: welcomeTitle, body: t('welcomeNew.welcome.body') || "You just created an account in a calm, ethical space. A few quick things — then you're in." },
+        { key: 'account', title: t('welcomeNew.account.title') || 'One Account. Simple.', bullets: [
+            t('welcomeNew.account.bullets.0') || 'One identity across everything',
+            t('welcomeNew.account.bullets.1') || 'No re‑signing in all the time',
+            t('welcomeNew.account.bullets.2') || 'Your preferences stay with you',
+        ] },
+        { key: 'principles', title: t('welcomeNew.principles.title') || 'What We Stand For', bullets: [
+            t('welcomeNew.principles.bullets.0') || 'Privacy by default',
+            t('welcomeNew.principles.bullets.1') || 'No manipulative feeds',
+            t('welcomeNew.principles.bullets.2') || 'You decide what to share',
+            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: '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.' }
     ];
     const totalSteps = steps.length;
     const avatarStepIndex = steps.findIndex(s => s.showAvatar);
@@ -68,8 +82,8 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
             disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
             afterSelect: 'back',
             onSelect: async (file: any) => {
-                if (!file.contentType.startsWith('image/')) { toast.error('Please select an image file'); return; }
-                try { await updateUser({ avatar: file.id }, oxyServices); toast.success('Avatar updated'); } catch (e: any) { toast.error(e.message || 'Failed to update avatar'); }
+                if (!file.contentType.startsWith('image/')) { toast.error(t('editProfile.toasts.selectImage') || 'Please select an image file'); return; }
+                try { await updateUser({ avatar: file.id }, oxyServices); toast.success(t('editProfile.toasts.avatarUpdated') || 'Avatar updated'); } catch (e: any) { toast.error(e.message || t('editProfile.toasts.updateAvatarFailed') || 'Failed to update avatar'); }
             }
         });
     }, [navigate, updateUser, oxyServices]);
@@ -78,25 +92,25 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
     const pillButtons = useMemo(() => {
         if (currentStep === totalSteps - 1) {
             return [
-                { text: 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
-                { text: 'Enter', onPress: finish, icon: 'log-in-outline', variant: 'primary' },
+                { text: t('welcomeNew.actions.back') || 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
+                { text: t('welcomeNew.actions.enter') || 'Enter', onPress: finish, icon: 'log-in-outline', variant: 'primary' },
             ];
         }
         if (currentStep === 0) {
             const arr: any[] = [];
-            if (avatarStepIndex > 0) arr.push({ text: 'Skip', onPress: skipToAvatar, icon: 'play-skip-forward', variant: 'transparent' });
-            arr.push({ text: 'Next', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' });
+            if (avatarStepIndex > 0) arr.push({ text: t('welcomeNew.actions.skip') || 'Skip', onPress: skipToAvatar, icon: 'play-skip-forward', variant: 'transparent' });
+            arr.push({ text: t('welcomeNew.actions.next') || 'Next', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' });
             return arr;
         }
         if (step.showAvatar) {
             return [
-                { text: 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
-                { text: avatarUri ? 'Continue' : 'Skip', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' },
+                { text: t('welcomeNew.actions.back') || 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
+                { text: avatarUri ? (t('welcomeNew.actions.continue') || 'Continue') : (t('welcomeNew.actions.skip') || 'Skip'), onPress: nextStep, icon: 'arrow-forward', variant: 'primary' },
             ];
         }
         return [
-            { text: 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
-            { text: 'Next', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' },
+            { text: t('welcomeNew.actions.back') || 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
+            { text: t('welcomeNew.actions.next') || 'Next', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' },
         ];
     }, [currentStep, totalSteps, prevStep, nextStep, finish, skipToAvatar, avatarStepIndex, step.showAvatar, avatarUri]);
 
@@ -126,7 +140,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
                             <Avatar size={120} name={currentUser?.username} uri={avatarUri} theme={theme} style={styles.avatar} />
                             <TouchableOpacity style={styles.changeAvatarButton} onPress={openAvatarPicker}>
                                 <Ionicons name="image-outline" size={18} color="#FFFFFF" />
-                                <Text style={styles.changeAvatarText}>{avatarUri ? 'Change Avatar' : 'Add Avatar'}</Text>
+                                <Text style={styles.changeAvatarText}>{avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}</Text>
                             </TouchableOpacity>
                         </View>
                     )}

package/src/ui/screens/internal/SignInPasswordStep.tsx

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { RouteName } from '../../navigation/routes';
 import { useRef, useCallback, useEffect } from 'react';
 import { View, Text, TouchableOpacity, type TextInput, StatusBar } from 'react-native';
 import Animated, {
@@ -7,6 +8,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../../components/Avatar';
+import { useI18n } from '../../hooks/useI18n';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import TextField from '../../components/internal/TextField';
 
@@ -30,7 +32,7 @@ interface SignInPasswordStepProps {
     handleSignIn: () => void;
     isLoading: boolean;
     prevStep: () => void;
-    navigate: (screen: string, props?: Record<string, any>) => void;
+    navigate: (screen: RouteName, props?: Record<string, any>) => void;
 }
 
 const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
@@ -56,6 +58,7 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
     navigate,
 }) => {
     const inputRef = useRef<TextInput>(null);
+    const { t } = useI18n();
 
     // Animated styles - properly memoized to prevent re-renders
     const containerAnimatedStyle = useAnimatedStyle(() => {
@@ -121,7 +124,7 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
             <View style={styles.modernInputContainer}>
                 <TextField
                     ref={inputRef}
-                    label="Password"
+                    label={t('common.labels.password')}
                     leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
                     value={password}
                     onChangeText={handlePasswordChange}
@@ -137,26 +140,26 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
                     autoFocus
                 />
                 <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 16 }}>
-                    <Text style={[styles.footerText, { color: colors.text }]}>Forgot your password? </Text>
+                    <Text style={[styles.footerText, { color: colors.text }]}>{t('signin.forgotPrompt') || 'Forgot your password?'} </Text>
                     <TouchableOpacity onPress={() => navigate('RecoverAccount', {
                         returnTo: 'SignIn',
                         returnStep: 1,
                         returnData: { username, userProfile }
                     })}>
-                        <Text style={[styles.modernLinkText, { color: colors.primary }]}>Recover your account</Text>
+                        <Text style={[styles.modernLinkText, { color: colors.primary }]}>{t('common.links.recoverAccount')}</Text>
                     </TouchableOpacity>
                 </View>
             </View>
             <GroupedPillButtons
                 buttons={[
                     {
-                        text: 'Back',
+                        text: t('common.actions.back'),
                         onPress: prevStep,
                         icon: 'arrow-back',
                         variant: 'transparent',
                     },
                     {
-                        text: 'Sign In',
+                        text: t('common.actions.signIn'),
                         onPress: handleSignIn,
                         icon: 'log-in',
                         variant: 'primary',
@@ -169,7 +172,7 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
             <View style={styles.securityNotice}>
                 <Ionicons name="shield-checkmark" size={14} color={colors.secondaryText} />
                 <Text style={[styles.securityText, { color: colors.secondaryText }]}>
-                    Your data is encrypted and secure
+                    {t('signin.security.dataSecure') || 'Your data is encrypted and secure'}
                 </Text>
             </View>
             <StatusBar
@@ -180,4 +183,4 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
     );
 };
 
-export default SignInPasswordStep; 
+export default SignInPasswordStep; 

package/src/ui/screens/internal/SignInUsernameStep.tsx

@@ -6,6 +6,7 @@ import Animated, {
     SharedValue,
 } from 'react-native-reanimated';
 import { Ionicons } from '@expo/vector-icons';
+import { useI18n } from '../../hooks/useI18n';
 import HighFive from '../../../assets/illustrations/HighFive';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import TextField from '../../components/internal/TextField';
@@ -52,6 +53,7 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
     navigate,
 }) => {
     const inputRef = useRef<TextInput>(null);
+    const { t } = useI18n();
 
     // Animated styles - properly memoized to prevent re-renders
     const animatedStyle = useAnimatedStyle(() => {
@@ -80,12 +82,12 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
             <HighFive width={100} height={100} />
             <View style={styles.modernHeader}>
                 <Text style={[styles.modernTitle, { color: colors.text }]}>
-                    {isAddAccountMode ? 'Add Another Account' : 'Sign In'}
+                    {isAddAccountMode ? (t('signin.addAccountTitle') || 'Add Another Account') : (t('signin.title') || 'Sign In')}
                 </Text>
                 <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
                     {isAddAccountMode
-                        ? 'Sign in with another account'
-                        : 'Sign in to continue your journey'
+                        ? (t('signin.addAccountSubtitle') || 'Sign in with another account')
+                        : (t('signin.subtitle') || 'Sign in to continue your journey')
                     }
                 </Text>
             </View>
@@ -93,14 +95,14 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
                 <View style={[styles.modernInfoCard, { backgroundColor: colors.inputBackground }]}>
                     <Ionicons name="information-circle" size={20} color={colors.primary} />
                     <Text style={[styles.modernInfoText, { color: colors.text }]}>
-                        Currently signed in as <Text style={{ fontWeight: 'bold' }}>{user?.username}</Text>
+                        {t('signin.currentlySignedInAs', { username: user?.username }) || 'Currently signed in as '}<Text style={{ fontWeight: 'bold' }}>{user?.username}</Text>
                     </Text>
                 </View>
             )}
             <View style={styles.modernInputContainer}>
                 <TextField
                     ref={inputRef}
-                    label="Username"
+                    label={t('common.labels.username')}
                     leading={<Ionicons name="person-outline" size={24} color={colors.secondaryText} />}
                     value={username}
                     onChangeText={handleUsernameChange}
@@ -120,13 +122,13 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
             <GroupedPillButtons
                 buttons={[
                     {
-                        text: 'Sign Up',
+                        text: t('common.links.signUp') || 'Sign Up',
                         onPress: () => navigate('SignUp'),
                         icon: 'person-add',
                         variant: 'transparent',
                     },
                     {
-                        text: 'Continue',
+                        text: t('common.actions.continue'),
                         onPress: handleUsernameContinue,
                         icon: 'arrow-forward',
                         variant: 'primary',
@@ -140,4 +142,4 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
     );
 };
 
-export default SignInUsernameStep; 
+export default SignInUsernameStep; 

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

@@ -2,8 +2,10 @@ import type React from 'react';
 import { View, Text, StyleSheet, ScrollView, Platform } from 'react-native';
 import type { BaseScreenProps } from '../../navigation/types';
 import { Header } from '../../components';
+import { useI18n } from '../../hooks/useI18n';
 
 const KarmaAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
+    const { t } = useI18n();
     const isDarkTheme = theme === 'dark';
     const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
@@ -12,22 +14,32 @@ const KarmaAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     return (
         <View style={[styles.container, { backgroundColor }]}>
             <Header
-                title="About Karma"
-                subtitle="Learn about the karma system"
+                title={t('karma.about.title') || 'About Karma'}
+                subtitle={t('karma.about.subtitle') || 'Learn about the karma system'}
                 theme={theme}
                 onBack={goBack}
                 elevation="subtle"
             />
             <ScrollView contentContainerStyle={styles.contentContainer}>
-                <Text style={[styles.paragraph, { color: textColor }]}>Karma is a recognition of your positive actions in the Oxy Ecosystem. It cannot be sent or received directly, only earned by contributing to the community.</Text>
-                <Text style={[styles.section, { color: primaryColor }]}>How to Earn Karma</Text>
-                <Text style={[styles.paragraph, { color: textColor }]}>• Helping other users{'\n'}
-                    • Reporting bugs{'\n'}
-                    • Contributing content{'\n'}
-                    • Participating in events{'\n'}
-                    • Other positive actions</Text>
-                <Text style={[styles.section, { color: primaryColor }]}>Why Karma?</Text>
-                <Text style={[styles.paragraph, { color: textColor }]}>Karma unlocks special features and recognition in the Oxy Ecosystem. The more you contribute, the more you earn!</Text>
+                <Text style={[styles.paragraph, { color: textColor }]}>
+                    {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.'}
+                </Text>
+                <Text style={[styles.section, { color: primaryColor }]}>
+                    {t('karma.about.how.title') || 'How to Earn Karma'}
+                </Text>
+                <Text style={[styles.paragraph, { color: textColor }]}>
+                    • {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'}
+                </Text>
+                <Text style={[styles.section, { color: primaryColor }]}>
+                    {t('karma.about.why.title') || 'Why Karma?'}
+                </Text>
+                <Text style={[styles.paragraph, { color: textColor }]}>
+                    {t('karma.about.why.text') || 'Karma unlocks special features and recognition in the Oxy Ecosystem. The more you contribute, the more you earn!'}
+                </Text>
             </ScrollView>
         </View>
     );

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

@@ -15,6 +15,7 @@ import { useOxy } from '../../context/OxyContext';
 import { fontFamilies } from '../../styles/fonts';
 import Avatar from '../../components/Avatar';
 import { Ionicons } from '@expo/vector-icons';
+import { useI18n } from '../../hooks/useI18n';
 
 const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
     theme,
@@ -22,6 +23,7 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
     goBack,
 }) => {
     const { user, oxyServices, isAuthenticated } = useOxy();
+    const { t } = useI18n();
     const [karmaTotal, setKarmaTotal] = useState<number | null>(null);
     const [karmaHistory, setKarmaHistory] = useState<any[]>([]);
     const [isLoading, setIsLoading] = useState(true);
@@ -55,7 +57,7 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
     if (!isAuthenticated) {
         return (
             <View style={[styles.container, { backgroundColor }]}>
-                <Text style={[styles.message, { color: textColor }]}>Not signed in</Text>
+                <Text style={[styles.message, { color: textColor }]}>{t('common.status.notSignedIn') || 'Not signed in'}</Text>
             </View>
         );
     }
@@ -79,46 +81,54 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
                         theme={theme}
                         style={styles.avatar}
                     />
-                    <Text style={[styles.karmaLabel, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Karma Balance</Text>
+                    <Text style={[styles.karmaLabel, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>
+                        {t('karma.center.balance') || '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>
+                            <Text style={styles.actionLabel}>{t('karma.center.actions.leaderboard') || '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>
+                            <Text style={styles.actionLabel}>{t('karma.center.actions.rules') || '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>
+                            <Text style={styles.actionLabel}>{t('karma.center.actions.about') || '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>
+                            <Text style={styles.actionLabel}>{t('karma.center.actions.rewards') || '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>
+                            <Text style={styles.actionLabel}>{t('karma.center.actions.faq') || '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>
+                    <Text style={styles.infoText}>
+                        {t('karma.center.info') || '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>
+                <Text style={[styles.sectionTitle, { color: textColor }]}>
+                    {t('karma.center.history') || 'Karma History'}
+                </Text>
                 <View style={styles.historyContainer}>
                     {karmaHistory.length === 0 ? (
-                        <Text style={{ color: textColor, textAlign: 'center', marginTop: 16 }}>No karma history yet.</Text>
+                        <Text style={{ color: textColor, textAlign: 'center', marginTop: 16 }}>
+                            {t('karma.center.noHistory') || 'No karma history yet.'}
+                        </Text>
                     ) : (
                         karmaHistory.map((entry: any) => (
                             <View key={entry.id} style={[styles.historyItem, { borderColor }]}>
@@ -126,7 +136,7 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
                                     {entry.points > 0 ? '+' : ''}{entry.points}
                                 </Text>
                                 <Text style={[styles.historyDesc, { color: textColor }]}>
-                                    {entry.reason || 'No description'}
+                                    {entry.reason || (t('karma.center.noDescription') || 'No description')}
                                 </Text>
                                 <Text style={[styles.historyDate, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>
                                     {entry.createdAt ? new Date(entry.createdAt).toLocaleString() : ''}