@oxyhq/services 5.11.12 → 5.12.1

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

@@ -3,37 +3,13 @@ import { View, Text, StyleSheet, ScrollView, Platform, TouchableOpacity, TextInp
 import type { BaseScreenProps } from '../../navigation/types';
 import { Ionicons } from '@expo/vector-icons';
 import { Header } from '../../components';
+import { useI18n } from '../../hooks/useI18n';
 
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
     UIManager.setLayoutAnimationEnabledExperimental(true);
 }
 
-const FAQS = [
-    {
-        q: 'What is karma?',
-        a: 'Karma is a recognition of your positive actions in the Oxy Ecosystem. It cannot be sent or received directly.'
-    },
-    {
-        q: 'How do I earn karma?',
-        a: 'By helping others, reporting bugs, contributing content, and participating in community events.'
-    },
-    {
-        q: 'Can I lose karma?',
-        a: 'Karma may be reduced for negative actions or breaking community rules.'
-    },
-    {
-        q: 'What can I do with karma?',
-        a: 'Unlock rewards, badges, and special features as you earn more karma.'
-    },
-    {
-        q: 'Can I transfer karma to others?',
-        a: 'No, karma cannot be sent or received. It is only earned by your actions.'
-    },
-    {
-        q: 'How do I get support?',
-        a: 'Contact Oxy support via the app or website for any karma-related questions.'
-    },
-];
+const FAQ_KEYS = ['what', 'earn', 'lose', 'use', 'transfer', 'support'] as const;
 
 /**
  * KarmaFAQScreen - Optimized for performance
@@ -45,6 +21,7 @@ const FAQS = [
  * - React.memo wrapper to prevent re-renders when props haven't changed
  */
 const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
+    const { t } = useI18n();
     const [expanded, setExpanded] = useState<number | null>(0);
     const [search, setSearch] = useState('');
 
@@ -63,14 +40,19 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     }, [theme]);
 
     // Memoize filtered FAQs to prevent filtering on every render
+    const faqs = useMemo(() => FAQ_KEYS.map(key => ({
+        q: t(`karma.faq.items.${key}.q`) || '',
+        a: t(`karma.faq.items.${key}.a`) || '',
+    })), [t]);
+
     const filteredFaqs = useMemo(() => {
-        if (!search.trim()) return FAQS;
+        if (!search.trim()) return faqs;
         const searchLower = search.toLowerCase();
-        return FAQS.filter(faq =>
+        return faqs.filter(faq =>
             faq.q.toLowerCase().includes(searchLower) ||
             faq.a.toLowerCase().includes(searchLower)
         );
-    }, [search]);
+    }, [search, faqs]);
 
     // Memoize toggle handler to prevent recreation on every render
     const handleToggle = useCallback((idx: number) => {
@@ -81,8 +63,8 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     return (
         <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             <Header
-                title="Karma FAQ"
-                subtitle="Frequently asked questions about karma"
+                title={t('karma.faq.title') || 'Karma FAQ'}
+                subtitle={t('karma.faq.subtitle') || 'Frequently asked questions about karma'}
                 subtitleVariant="muted"
                 theme={theme}
                 onBack={goBack}
@@ -92,7 +74,7 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                 <Ionicons name="search-outline" size={20} color={themeStyles.primaryColor} style={{ marginRight: 8 }} />
                 <TextInput
                     style={[styles.searchInput, { color: themeStyles.textColor }]}
-                    placeholder="Search FAQ..."
+                    placeholder={t('karma.faq.search') || 'Search FAQ...'}
                     placeholderTextColor={themeStyles.isDarkTheme ? '#aaa' : '#888'}
                     value={search}
                     onChangeText={setSearch}
@@ -102,7 +84,7 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
             <ScrollView contentContainerStyle={styles.contentContainer}>
                 {filteredFaqs.length === 0 ? (
                     <Text style={[styles.noResults, { color: themeStyles.textColor }]}>
-                        No FAQ items found matching "{search}"
+                        {t('karma.faq.noResults', { query: search }) || `No FAQ items found matching "${search}"`}
                     </Text>
                 ) : (
                     filteredFaqs.map((faq, idx) => (

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

@@ -5,9 +5,11 @@ import type { BaseScreenProps } from '../../navigation/types';
 import { useOxy } from '../../context/OxyContext';
 import Avatar from '../../components/Avatar';
 import { Header } from '../../components';
+import { useI18n } from '../../hooks/useI18n';
 
 const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navigate }) => {
     const { oxyServices } = useOxy();
+    const { t } = useI18n();
     const [leaderboard, setLeaderboard] = useState<any[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
@@ -29,8 +31,8 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
     return (
         <View style={[styles.container, { backgroundColor }]}>
             <Header
-                title="Karma Leaderboard"
-                subtitle="Top contributors in the community"
+                title={t('karma.leaderboard.title') || 'Karma Leaderboard'}
+                subtitle={t('karma.leaderboard.subtitle') || 'Top contributors in the community'}
                 theme={theme}
                 onBack={goBack}
                 elevation="subtle"
@@ -42,13 +44,13 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
             ) : (
                 <ScrollView contentContainerStyle={styles.listContainer}>
                     {leaderboard.length === 0 ? (
-                        <Text style={[styles.placeholder, { color: textColor }]}>No leaderboard data.</Text>
+                        <Text style={[styles.placeholder, { color: textColor }]}>{t('karma.leaderboard.empty') || 'No leaderboard data.'}</Text>
                     ) : (
                         leaderboard.map((entry, idx) => (
                             <TouchableOpacity
                                 key={entry.userId}
                                 style={[styles.row, idx < 3 && { backgroundColor: '#f7eaff' }]}
-                                onPress={() => navigate && navigate('KarmaProfile', { userId: entry.userId, username: entry.username })}
+                                onPress={() => navigate && navigate('Profile', { userId: entry.userId, username: entry.username })}
                                 activeOpacity={0.7}
                             >
                                 <Text style={[styles.rank, { color: primaryColor }]}>{idx + 1}</Text>

package/src/ui/screens/karma/KarmaRewardsScreen.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 KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
+    const { t } = useI18n();
     const isDarkTheme = theme === 'dark';
     const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
@@ -13,27 +15,43 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     return (
         <View style={[styles.container, { backgroundColor }]}>
             <Header
-                title="Karma Rewards"
-                subtitle="Unlock special features and recognition"
+                title={t('karma.rewards.title') || 'Karma Rewards'}
+                subtitle={t('karma.rewards.subtitle') || 'Unlock special features and recognition'}
                 theme={theme}
                 onBack={goBack}
                 elevation="subtle"
             />
             <ScrollView contentContainerStyle={styles.contentContainer}>
-                <Text style={[styles.paragraph, { color: textColor }]}>Unlock special features and recognition by earning karma!</Text>
+                <Text style={[styles.paragraph, { color: textColor }]}>
+                    {t('karma.rewards.intro') || 'Unlock special features and recognition by earning karma!'}
+                </Text>
                 <View style={styles.rewardBox}>
-                    <Text style={[styles.rewardTitle, { color: primaryColor }]}>🎉 Early Access</Text>
-                    <Text style={[styles.rewardDesc, { color: textColor }]}>Get early access to new features with 100+ karma.</Text>
+                    <Text style={[styles.rewardTitle, { color: primaryColor }]}>
+                        {t('karma.rewards.earlyAccess.title') || '🎉 Early Access'}
+                    </Text>
+                    <Text style={[styles.rewardDesc, { color: textColor }]}>
+                        {t('karma.rewards.earlyAccess.desc') || 'Get early access to new features with 100+ karma.'}
+                    </Text>
                 </View>
                 <View style={styles.rewardBox}>
-                    <Text style={[styles.rewardTitle, { color: primaryColor }]}>🏅 Community Badge</Text>
-                    <Text style={[styles.rewardDesc, { color: textColor }]}>Earn a special badge for 500+ karma.</Text>
+                    <Text style={[styles.rewardTitle, { color: primaryColor }]}>
+                        {t('karma.rewards.badge.title') || '🏅 Community Badge'}
+                    </Text>
+                    <Text style={[styles.rewardDesc, { color: textColor }]}>
+                        {t('karma.rewards.badge.desc') || 'Earn a special badge for 500+ karma.'}
+                    </Text>
                 </View>
                 <View style={styles.rewardBox}>
-                    <Text style={[styles.rewardTitle, { color: primaryColor }]}>🌟 Featured Member</Text>
-                    <Text style={[styles.rewardDesc, { color: textColor }]}>Be featured in the community for 1000+ karma.</Text>
+                    <Text style={[styles.rewardTitle, { color: primaryColor }]}>
+                        {t('karma.rewards.featured.title') || '🌟 Featured Member'}
+                    </Text>
+                    <Text style={[styles.rewardDesc, { color: textColor }]}>
+                        {t('karma.rewards.featured.desc') || 'Be featured in the community for 1000+ karma.'}
+                    </Text>
                 </View>
-                <Text style={[styles.paragraph, { color: textColor, marginTop: 24 }]}>More rewards coming soon!</Text>
+                <Text style={[styles.paragraph, { color: textColor, marginTop: 24 }]}>
+                    {t('karma.rewards.moreComing') || 'More rewards coming soon!'}
+                </Text>
             </ScrollView>
         </View>
     );

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

@@ -4,9 +4,11 @@ import { View, Text, StyleSheet, ScrollView, ActivityIndicator } from 'react-nat
 import type { BaseScreenProps } from '../../navigation/types';
 import { useOxy } from '../../context/OxyContext';
 import { Header } from '../../components';
+import { useI18n } from '../../hooks/useI18n';
 
 const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const { oxyServices } = useOxy();
+    const { t } = useI18n();
     const [rules, setRules] = useState<any[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
@@ -28,8 +30,8 @@ const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     return (
         <View style={[styles.container, { backgroundColor }]}>
             <Header
-                title="Karma Rules"
-                subtitle="How to earn karma points"
+                title={t('karma.rules.title') || 'Karma Rules'}
+                subtitle={t('karma.rules.subtitle') || 'How to earn karma points'}
                 theme={theme}
                 onBack={goBack}
                 elevation="subtle"
@@ -41,7 +43,7 @@ const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
             ) : (
                 <ScrollView contentContainerStyle={styles.listContainer}>
                     {rules.length === 0 ? (
-                        <Text style={[styles.placeholder, { color: textColor }]}>No rules found.</Text>
+                        <Text style={[styles.placeholder, { color: textColor }]}>{t('karma.rules.empty') || 'No rules found.'}</Text>
                     ) : (
                         rules.map((rule, idx) => (
                             <View key={rule.id || idx} style={styles.ruleRow}>

package/src/ui/screens/steps/RecoverRequestStep.tsx

@@ -1,17 +1,21 @@
 import type React from 'react';
+import type { RouteName } from '../../navigation/routes';
 import { useRef } from 'react';
 import { View, Text } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import HighFive from '../../../assets/illustrations/HighFive';
 import TextField from '../../components/internal/TextField';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import { toast } from '../../../lib/sonner';
+import type { OxyServices } from '../../../core';
+import { useI18n } from '../../hooks/useI18n';
 
 interface RecoverRequestStepProps {
     // Common props from StepBasedScreen
     colors: any;
     styles: any;
     theme: string;
-    navigate: (screen: string, props?: Record<string, any>) => void;
+    navigate: (screen: RouteName, props?: Record<string, any>) => void;
 
     // Step navigation
     nextStep: () => void;
@@ -29,6 +33,7 @@ interface RecoverRequestStepProps {
     setErrorMessage: (message: string) => void;
     isLoading: boolean;
     setIsLoading: (loading: boolean) => void;
+    oxyServices?: OxyServices;
 }
 
 const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
@@ -42,17 +47,19 @@ const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
     setErrorMessage,
     isLoading,
     setIsLoading,
+    oxyServices,
 }) => {
     const inputRef = useRef<any>(null);
+    const { t } = useI18n();
 
     const handleIdentifierChange = (text: string) => {
         setIdentifier(text);
         if (errorMessage) setErrorMessage('');
     };
 
-    const handleRequest = () => {
+    const handleRequest = async () => {
         if (!identifier || identifier.length < 3) {
-            setErrorMessage('Please enter your email or username.');
+            setErrorMessage(t('recover.username.errorRequired') || 'Please enter your username.');
             setTimeout(() => inputRef.current?.focus(), 0);
             return;
         }
@@ -60,11 +67,11 @@ const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
         setErrorMessage('');
         setIsLoading(true);
 
-        // Simulate API call
-        setTimeout(() => {
+        try {
+            toast.info(t('recover.noEmail'));
+        } finally {
             setIsLoading(false);
-            nextStep(); // Move to verification step
-        }, 1200);
+        }
     };
 
     const handleRequestWithFocus = () => {
@@ -78,18 +85,14 @@ const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
         <>
             <HighFive width={100} height={100} />
             <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>
-                    Recover Account
-                </Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
-                    Enter your email or username to receive a 6-digit code.
-                </Text>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>{t('recover.title')}</Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{t('recover.noEmail')}</Text>
             </View>
 
             <View style={styles.modernInputContainer}>
                 <TextField
                     ref={inputRef}
-                    label="Email or Username"
+                    label={t('recover.username.label')}
                     leading={<Ionicons name="mail-outline" size={24} color={colors.secondaryText} />}
                     value={identifier}
                     onChangeText={handleIdentifierChange}
@@ -107,15 +110,15 @@ const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
             <GroupedPillButtons
                 buttons={[
                     {
-                        text: 'Back to Sign In',
+                        text: t('common.actions.back'),
                         onPress: () => navigate('SignIn'),
                         icon: 'arrow-back',
                         variant: 'transparent',
                     },
                     {
-                        text: 'Send Code',
+                        text: t('common.actions.continue'),
                         onPress: handleRequest,
-                        icon: 'mail-open-outline',
+                        icon: 'information-circle-outline',
                         variant: 'primary',
                         loading: isLoading,
                         disabled: isLoading,

package/src/ui/screens/steps/RecoverResetPasswordStep.tsx

@@ -0,0 +1,133 @@
+import type React from 'react';
+import type { RouteName } from '../../navigation/routes';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import TextField from '../../components/internal/TextField';
+import { useI18n } from '../../hooks/useI18n';
+
+interface RecoverResetPasswordStepProps {
+  // Common props
+  colors: any;
+  styles: any;
+  theme: string;
+  navigate: (screen: RouteName, props?: Record<string, any>) => void;
+
+  // Navigation
+  nextStep: () => void;
+  prevStep: () => void;
+
+  // From previous steps
+  identifier: string;
+  verificationCode: string;
+
+  // Local state
+  password: string;
+  confirmPassword: string;
+  setPassword: (s: string) => void;
+  setConfirmPassword: (s: string) => void;
+  errorMessage: string;
+  setErrorMessage: (s: string) => void;
+  isLoading: boolean;
+  setIsLoading: (b: boolean) => void;
+
+  // Services
+  oxyServices: any;
+}
+
+const RecoverResetPasswordStep: React.FC<RecoverResetPasswordStepProps> = ({
+  colors,
+  styles,
+  nextStep,
+  prevStep,
+  identifier,
+  verificationCode,
+  password,
+  confirmPassword,
+  setPassword,
+  setConfirmPassword,
+  errorMessage,
+  setErrorMessage,
+  isLoading,
+  setIsLoading,
+  oxyServices,
+}) => {
+  const { t } = useI18n();
+  const handleReset = async () => {
+    if (!password || password.length < 8) {
+      setErrorMessage(t('recover.password.minLength') || 'Password must be at least 8 characters long');
+      return;
+    }
+    if (password !== confirmPassword) {
+      setErrorMessage(t('recover.password.mismatch') || 'Passwords do not match');
+      return;
+    }
+    setErrorMessage('');
+    setIsLoading(true);
+    try {
+      const code = verificationCode?.trim();
+      if (!code) throw new Error(t('recover.missingCode') || 'Missing code');
+
+      // Heuristic: recovery key starts with 'oxy-' or longer strings, backup codes have dashes of short format, else assume TOTP
+      if (code.toLowerCase().startsWith('oxy-') || code.length >= 16) {
+        await oxyServices.resetPasswordWithRecoveryKey(identifier, code, password);
+      } else if (/[A-Za-z0-9]+-[A-Za-z0-9]+/.test(code)) {
+        await oxyServices.resetPasswordWithBackupCode(identifier, code, password);
+      } else {
+        await oxyServices.resetPasswordWithTotp(identifier, code, password);
+      }
+      nextStep();
+    } catch (e: any) {
+      setErrorMessage(e?.message || t('recover.password.resetFailed') || 'Failed to reset password');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <View style={styles.modernHeader}>
+        <Text style={[styles.modernTitle, { color: colors.text }]}>{t('recover.newPassword')}</Text>
+        <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{t('recover.title')} @{identifier}</Text>
+      </View>
+
+      <View style={styles.modernInputContainer}>
+        <TextField
+          label={t('common.labels.password')}
+          leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry
+          autoCapitalize="none"
+          autoCorrect={false}
+          variant="filled"
+          error={errorMessage || undefined}
+          onSubmitEditing={handleReset}
+          autoFocus
+        />
+
+        <TextField
+          label={t('common.labels.confirmPassword')}
+          leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
+          value={confirmPassword}
+          onChangeText={setConfirmPassword}
+          secureTextEntry
+          autoCapitalize="none"
+          autoCorrect={false}
+          variant="filled"
+          onSubmitEditing={handleReset}
+        />
+      </View>
+
+      <GroupedPillButtons
+        buttons={[
+          { text: t('common.actions.back'), onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
+          { text: t('common.actions.resetPassword'), onPress: handleReset, icon: 'key-outline', variant: 'primary', loading: isLoading, disabled: isLoading },
+        ]}
+        colors={colors}
+      />
+    </>
+  );
+};
+
+export default RecoverResetPasswordStep;

package/src/ui/screens/steps/RecoverSuccessStep.tsx

@@ -1,14 +1,16 @@
 import type React from 'react';
+import type { RouteName } from '../../navigation/routes';
 import { View, Text } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import { useI18n } from '../../hooks/useI18n';
 
 interface RecoverSuccessStepProps {
     // Common props from StepBasedScreen
     colors: any;
     styles: any;
     theme: string;
-    navigate: (screen: string, props?: Record<string, any>) => void;
+    navigate: (screen: RouteName, props?: Record<string, any>) => void;
 
     // Step navigation
     nextStep: () => void;
@@ -32,13 +34,14 @@ const RecoverSuccessStep: React.FC<RecoverSuccessStepProps> = ({
     allStepData,
     successMessage,
 }) => {
+    const { t } = useI18n();
     // Extract identifier from previous steps
     const requestData = allStepData[0] || {};
     const { identifier } = requestData;
 
     const handleContinueToReset = () => {
-        // Navigate to password reset with the identifier
-        navigate('ResetPassword', { identifier });
+        // Navigate back to SignIn and let host app open its reset flow
+        navigate('SignIn', { showReset: true, identifier });
     };
 
     const handleBackToSignIn = () => {
@@ -66,12 +69,8 @@ const RecoverSuccessStep: React.FC<RecoverSuccessStepProps> = ({
             </View>
 
             <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>
-                    Account Verified!
-                </Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
-                    Your account has been successfully verified.
-                </Text>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>{t('recover.title')}</Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{successMessage || t('recover.resetSuccess')}</Text>
             </View>
 
             <View style={styles.modernInputContainer}>
@@ -84,10 +83,10 @@ const RecoverSuccessStep: React.FC<RecoverSuccessStepProps> = ({
                     marginBottom: 24,
                 }}>
                     <Text style={[styles.footerText, { color: colors.text, fontSize: 16, marginBottom: 8 }]}>
-                        What's next?
+                        {t('recover.whatsNextTitle') || "What's next?"}
                     </Text>
                     <Text style={[styles.footerText, { color: colors.secondaryText, fontSize: 14, lineHeight: 20 }]}>
-                        You can now reset your password or return to sign in with your existing credentials.
+                        {t('recover.whatsNextBody') || 'You can now reset your password or return to sign in with your existing credentials.'}
                     </Text>
                 </View>
 
@@ -102,7 +101,7 @@ const RecoverSuccessStep: React.FC<RecoverSuccessStepProps> = ({
                 }}>
                     <Ionicons name="shield-checkmark" size={20} color={colors.success} style={{ marginRight: 8 }} />
                     <Text style={[styles.footerText, { color: colors.success, fontSize: 14, flex: 1 }]}>
-                        {successMessage || 'Your account recovery is complete and secure.'}
+                        {successMessage || t('recover.completeSecure') || 'Your account recovery is complete and secure.'}
                     </Text>
                 </View>
             </View>
@@ -110,17 +109,11 @@ const RecoverSuccessStep: React.FC<RecoverSuccessStepProps> = ({
             <GroupedPillButtons
                 buttons={[
                     {
-                        text: 'Back to Sign In',
+                        text: t('common.actions.signIn'),
                         onPress: handleBackToSignIn,
                         icon: 'arrow-back',
                         variant: 'transparent',
                     },
-                    {
-                        text: 'Reset Password',
-                        onPress: handleContinueToReset,
-                        icon: 'key-outline',
-                        variant: 'primary',
-                    },
                 ]}
                 colors={colors}
             />

package/src/ui/screens/steps/RecoverVerifyStep.tsx

@@ -1,15 +1,18 @@
 import type React from 'react';
+import type { RouteName } from '../../navigation/routes';
 import { View, Text } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import PinInput from '../../components/internal/PinInput';
+import { toast } from '../../../lib/sonner';
+import { useI18n } from '../../hooks/useI18n';
 
 interface RecoverVerifyStepProps {
     // Common props from StepBasedScreen
     colors: any;
     styles: any;
     theme: string;
-    navigate: (screen: string, props?: Record<string, any>) => void;
+    navigate: (screen: RouteName, props?: Record<string, any>) => void;
 
     // Step navigation
     nextStep: () => void;
@@ -30,6 +33,7 @@ interface RecoverVerifyStepProps {
     setSuccessMessage: (message: string) => void;
     isLoading: boolean;
     setIsLoading: (loading: boolean) => void;
+    identifier?: string;
 }
 
 const RecoverVerifyStep: React.FC<RecoverVerifyStepProps> = ({
@@ -45,39 +49,26 @@ const RecoverVerifyStep: React.FC<RecoverVerifyStepProps> = ({
     setSuccessMessage,
     isLoading,
     setIsLoading,
+    identifier,
 }) => {
-    const handleVerifyCode = () => {
+    const { t } = useI18n();
+    const handleVerifyCode = async () => {
         setErrorMessage('');
         setSuccessMessage('');
 
         if (verificationCode.length !== 6) {
-            setErrorMessage('Please enter the 6-digit code.');
+            setErrorMessage(t('recover.enterCode'));
             return;
         }
-
-        setIsLoading(true);
-
-        // Simulate verification
-        setTimeout(() => {
-            setIsLoading(false);
-            if (verificationCode === '123456') { // Simulate correct code
-                setSuccessMessage('Your account has been verified! You can now reset your password.');
-                nextStep(); // Move to success step
-            } else {
-                setErrorMessage('Invalid code. Please try again.');
-            }
-        }, 1200);
+        // For recovery via TOTP, proceed to reset step; server will validate during reset
+        nextStep();
     };
 
     return (
         <>
             <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>
-                    Verify Code
-                </Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
-                    Enter the 6-digit code sent to your email or phone.
-                </Text>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>{t('recover.verify.title')}</Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{t('recover.enterCode')}</Text>
             </View>
 
             <View style={styles.modernInputContainer}>
@@ -130,13 +121,13 @@ const RecoverVerifyStep: React.FC<RecoverVerifyStepProps> = ({
             <GroupedPillButtons
                 buttons={[
                     {
-                        text: 'Back',
+                        text: t('common.actions.back'),
                         onPress: prevStep,
                         icon: 'arrow-back',
                         variant: 'transparent',
                     },
                     {
-                        text: 'Verify Code',
+                        text: t('recover.verify.action'),
                         onPress: handleVerifyCode,
                         icon: 'checkmark-circle-outline',
                         variant: 'primary',