@oxyhq/services 6.9.4 → 6.9.6

package/src/ui/components/BottomSheet.tsx

@@ -94,13 +94,13 @@ const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef
     }, []);
 
     // Dismiss callbacks
-    const safeClose = () => {
+    const safeClose = useCallback(() => {
         if (onDismissAttempt?.()) {
             onDismiss?.();
         } else if (!onDismissAttempt) {
             onDismiss?.();
         }
-    };
+    }, [onDismiss, onDismissAttempt]);
 
     const finishClose = useCallback(() => {
         if (hasClosedRef.current) return;
@@ -109,6 +109,7 @@ const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef
         setRendered(false);
     }, [safeClose]);
 
+    // biome-ignore lint/correctness/useExhaustiveDependencies: opacity and translateY are Reanimated SharedValues (stable refs) that should not be listed as dependencies
     useEffect(() => {
         if (visible) {
             if (closeTimeoutRef.current) {
@@ -299,7 +300,7 @@ const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef
                 // The sheet extends behind safe area, and screens add padding as needed
             },
         });
-    }, [colors.background, detached, insets.bottom]);
+    }, [colors.background, detached]);
 
     if (!rendered) return null;
 

package/src/ui/components/FontLoader.tsx

@@ -154,7 +154,7 @@ export const setupFonts = async () => {
         return true;
     } catch (error: unknown) {
         if (__DEV__) {
-        const errorMessage = error instanceof Error ? error.message : String(error);
+        const errorMessage = error instanceof Error ? (error instanceof Error ? error.message : null) : String(error);
         console.warn('Error setting up fonts:', errorMessage);
         }
         return false;

package/src/ui/components/Header.tsx

@@ -177,7 +177,7 @@ const Header: React.FC<HeaderProps> = ({
                         {action.text}
                     </Text>
                 ) : (
-                    <Ionicons name={action.icon as any} size={18} color={colors.tint} />
+                    <Ionicons name={action.icon as React.ComponentProps<typeof Ionicons>['name']} size={18} color={colors.tint} />
                 )}
             </TouchableOpacity>
         );
@@ -359,7 +359,7 @@ const styles = StyleSheet.create({
         zIndex: 1000,
         ...Platform.select({
             web: {
-                position: 'sticky' as any,
+                position: 'sticky' as 'relative',
                 top: 0,
                 left: 0,
                 right: 0,

package/src/ui/components/HelperText.tsx

@@ -96,7 +96,7 @@ const HelperText = ({
         useNativeDriver: true,
       }).start();
     }
-  }, [visible, shown]);
+  }, [visible]);
 
   const handleTextLayout = (e: LayoutChangeEvent) => {
     onLayout?.(e);

package/src/ui/components/Icon.tsx

@@ -158,6 +158,7 @@ const Icon = ({
         : [];
     return (
       <MaterialCommunityIcons
+        // biome-ignore lint/suspicious/noExplicitAny: MaterialCommunityIcons name expects literal union; dynamic icon names require cast
         name={s as any}
         size={size}
         color={iconColor}
@@ -166,6 +167,7 @@ const Icon = ({
             transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
           },
           ...styleArray,
+          // biome-ignore lint/suspicious/noExplicitAny: style array type incompatibility with MaterialCommunityIcons style prop
         ] as any}
         testID={testID}
         {...accessibilityProps}

package/src/ui/components/OxyProvider.tsx

@@ -89,6 +89,7 @@ const OxyProvider: FC<OxyProviderProps> = ({
     authWebUrl,
     authRedirectUri,
     queryClient: providedQueryClient,
+    skipProviderWrappers = false,
 }) => {
 
     // Simple storage initialization for query persistence
@@ -234,6 +235,11 @@ const OxyProvider: FC<OxyProviderProps> = ({
         </QueryClientProvider>
     );
 
+    // Skip wrapper providers when parent already provides them (e.g., Mention's AppProviders)
+    if (skipProviderWrappers) {
+        return <KeyboardProvider>{coreContent}</KeyboardProvider>;
+    }
+
     // All platforms use same wrapper (KeyboardProvider is passthrough on web)
     return (
         <SafeAreaProvider>

package/src/ui/components/QuickActions.tsx

@@ -40,7 +40,7 @@ const QuickActions: React.FC<QuickActionsProps> = ({ actions, theme }) => {
                             ]}
                             onPress={action.onPress}
                         >
-                            <Ionicons name={action.icon as any} size={24} color={action.iconColor} />
+                            <Ionicons name={action.icon as React.ComponentProps<typeof Ionicons>['name']} size={24} color={action.iconColor} />
                         </TouchableOpacity>
                         <Text style={[styles.quickActionText, { color: textColor }]}>{action.title}</Text>
                     </View>

package/src/ui/components/SignInModal.tsx

@@ -66,13 +66,13 @@ const visibilityListeners = new Set<(visible: boolean) => void>();
 export const showSignInModal = () => {
     modalVisible = true;
     setModalVisibleCallback?.(true);
-    visibilityListeners.forEach(listener => listener(true));
+    for (const listener of visibilityListeners) listener(true);
 };
 
 export const hideSignInModal = () => {
     modalVisible = false;
     setModalVisibleCallback?.(false);
-    visibilityListeners.forEach(listener => listener(false));
+    for (const listener of visibilityListeners) listener(false);
 };
 
 export const isSignInModalVisible = () => modalVisible;
@@ -111,6 +111,7 @@ const SignInModal: React.FC = () => {
     }, []);
 
     // Animate in/out
+    // biome-ignore lint/correctness/useExhaustiveDependencies: opacity and scale are Reanimated SharedValues (stable refs) that should not be listed as dependencies
     useEffect(() => {
         if (visible) {
             opacity.value = withTiming(1, { duration: 250 });
@@ -199,7 +200,7 @@ const SignInModal: React.FC = () => {
         });
 
         socket.on('connect_error', (err) => {
-            debug.log('Socket connection error, falling back to polling:', err.message);
+            debug.log('Socket connection error, falling back to polling:', (err instanceof Error ? err.message : null));
             socket.disconnect();
             startPolling(sessionToken);
         });
@@ -252,8 +253,8 @@ const SignInModal: React.FC = () => {
             setAuthSession({ sessionToken, expiresAt });
             setIsWaiting(true);
             connectSocket(sessionToken);
-        } catch (err: any) {
-            setError(err.message || 'Failed to create auth session');
+        } catch (err: unknown) {
+            setError((err instanceof Error ? err.message : null) || 'Failed to create auth session');
         } finally {
             setIsLoading(false);
         }

package/src/ui/components/TextField/Adornment/types.tsx

@@ -6,6 +6,6 @@ export type AdornmentConfig = {
 };
 export type AdornmentStyleAdjustmentForNativeInput = {
   adornmentStyleAdjustmentForNativeInput: Array<
-    { paddingRight: number; paddingLeft: number } | {}
+    { paddingRight: number; paddingLeft: number } | Record<string, never>
   >;
 };

package/src/ui/components/TouchableRipple/Pressable.tsx

@@ -38,4 +38,5 @@ export type PressableProps = Omit<
 
 export const Pressable: React.ForwardRefExoticComponent<
   PressableProps & React.RefAttributes<View>
+// biome-ignore lint/suspicious/noExplicitAny: PressableNative type must be widened to support web-specific hover/focus state callback types
 > = PressableNative as any;

package/src/ui/components/feedback/FormInput.tsx

@@ -49,7 +49,7 @@ const FormInput: React.FC<FormInputProps> = React.memo(({
         ]}>
             {!multiline && (
                 <Ionicons
-                    name={icon as any}
+                    name={icon as React.ComponentProps<typeof Ionicons>['name']}
                     size={22}
                     color={colors.secondaryText}
                     style={styles.inputIcon}

package/src/ui/components/fileManagement/AnimatedButton.tsx

@@ -10,7 +10,7 @@ interface AnimatedButtonProps {
   icon: string;
   primaryColor: string;
   textColor: string;
-  style: any;
+  style: Record<string, unknown>;
 }
 
 /**
@@ -46,7 +46,7 @@ export const AnimatedButton: React.FC<AnimatedButtonProps> = ({
       <Animated.View style={[style, { backgroundColor }]}>
         <Animated.View>
           <MaterialCommunityIcons
-            name={icon as any}
+            name={icon as React.ComponentProps<typeof MaterialCommunityIcons>['name']}
             size={16}
             color={isSelected ? '#FFFFFF' : textColor}
           />

package/src/ui/components/icon/OxyIcon.tsx

@@ -19,7 +19,7 @@ const OxyIcon: React.FC<IconProps> = ({
 
   return (
     <Ionicons
-      name={name as any}
+      name={name as React.ComponentProps<typeof Ionicons>['name']}
       size={size}
       color={color}
       style={style}

package/src/ui/components/modals/DeleteAccountModal.tsx

@@ -54,8 +54,8 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
         try {
             await onDelete(password);
             // Modal will be closed by parent on success
-        } catch (err: any) {
-            setError(err?.message || t('deleteAccount.error') || 'Failed to delete account');
+        } catch (err: unknown) {
+            setError((err instanceof Error ? err.message : null) || t('deleteAccount.error') || 'Failed to delete account');
         } finally {
             setIsDeleting(false);
         }

package/src/ui/components/payment/PaymentDetailsStep.tsx

@@ -8,6 +8,7 @@ import { FAIRWalletIcon } from '../icon';
 import { createPaymentStyles } from './paymentStyles';
 import { toast } from '../../../lib/sonner';
 import type { CardDetails, PaymentColors, PaymentStepAnimations } from './types';
+import { useI18n } from '../../hooks/useI18n';
 
 interface PaymentDetailsStepProps {
     paymentMethod: string;
@@ -37,11 +38,12 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
     QRCodeComponent,
 }) => {
     const styles = useMemo(() => createPaymentStyles(colors), [colors]);
+    const { t } = useI18n();
     const { fadeAnim, slideAnim, scaleAnim } = animations;
 
     const handleCopyAddress = () => {
         Clipboard.setString(faircoinAddress);
-        toast('Address copied to clipboard!');
+        toast(t('payment.details.addressCopied'));
     };
 
     const handleOpenFairWallet = () => {
@@ -68,22 +70,22 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
         >
             <View style={styles.section}>
                 <Text style={styles.sectionTitle}>
-                    {paymentMethod === 'card' ? 'Card Details' :
-                        paymentMethod === 'oxy' ? 'Oxy Pay' :
-                            paymentMethod === 'faircoin' ? 'FairCoin Payment' : 'Payment Details'}
+                    {paymentMethod === 'card' ? t('payment.details.cardDetails') :
+                        paymentMethod === 'oxy' ? t('payment.details.oxyPay') :
+                            paymentMethod === 'faircoin' ? t('payment.details.faircoinPayment') : t('payment.details.paymentDetails')}
                 </Text>
 
                 {paymentMethod === 'card' && (
                     <View style={styles.cardPaymentCard}>
                         <View style={styles.cardPaymentContent}>
                             <Ionicons name="card-outline" size={64} color={colors.primary} style={styles.cardPaymentIcon} />
-                            <Text style={styles.cardPaymentMainTitle}>Credit Card</Text>
-                            <Text style={styles.cardPaymentSubtitle}>Enter your card details securely</Text>
+                            <Text style={styles.cardPaymentMainTitle}>{t('payment.details.creditCard')}</Text>
+                            <Text style={styles.cardPaymentSubtitle}>{t('payment.details.enterCardSecurely')}</Text>
 
                             <View style={styles.cardPaymentFields}>
                                 <View style={styles.cardRowInfo}>
                                     <Ionicons name="card-outline" size={24} color={colors.primary} style={styles.cardRowIcon} />
-                                    <Text style={styles.cardRowText}>We accept Visa, Mastercard, and more</Text>
+                                    <Text style={styles.cardRowText}>{t('payment.details.acceptedCards')}</Text>
                                 </View>
                                 <TextField
                                     value={cardDetails.number}
@@ -131,7 +133,7 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
                             </View>
 
                             <View style={{ height: 18 }} />
-                            <Text style={styles.cardPaymentWaiting}>Ready to process payment...</Text>
+                            <Text style={styles.cardPaymentWaiting}>{t('payment.details.readyToProcess')}</Text>
                         </View>
                     </View>
                 )}
@@ -140,13 +142,13 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
                     <View style={styles.oxyPayCard}>
                         <View style={styles.oxyPayContent}>
                             <Ionicons name="wallet-outline" size={64} color={colors.primary} style={styles.oxyPayIcon} />
-                            <Text style={styles.oxyPayMainTitle}>Oxy Pay</Text>
-                            <Text style={styles.oxyPaySubtitle}>Pay with your in-app wallet</Text>
+                            <Text style={styles.oxyPayMainTitle}>{t('payment.details.oxyPay')}</Text>
+                            <Text style={styles.oxyPaySubtitle}>{t('payment.details.payWithWallet')}</Text>
                             <View style={styles.oxyPayBalanceBox}>
-                                <Text style={styles.oxyPayBalanceText}>Balance: ⊜ 123.45</Text>
+                                <Text style={styles.oxyPayBalanceText}>{t('payment.details.balance', { balance: '⊜ 123.45' })}</Text>
                             </View>
                             <View style={{ height: 18 }} />
-                            <Text style={styles.oxyPayWaiting}>Ready to process payment...</Text>
+                            <Text style={styles.oxyPayWaiting}>{t('payment.details.readyToProcess')}</Text>
                         </View>
                     </View>
                 )}
@@ -156,10 +158,10 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
                         <View style={styles.faircoinContent}>
                             <FAIRWalletIcon size={64} style={styles.faircoinIcon} />
                             <Text style={styles.faircoinMainTitle}>FAIRWallet</Text>
-                            <Text style={styles.faircoinSubtitle}>Pay with FairCoin</Text>
+                            <Text style={styles.faircoinSubtitle}>{t('payment.details.payWithFairCoin')}</Text>
                             {!isMobile && QRCodeComponent ? (
                                 <>
-                                    <Text style={styles.faircoinScanText}>Scan to Pay</Text>
+                                    <Text style={styles.faircoinScanText}>{t('payment.details.scanToPay')}</Text>
                                     <View style={styles.faircoinQRCard}>
                                         <QRCodeComponent value={faircoinAddress} size={qrSize - 32} />
                                         <View style={styles.faircoinQRBadge}>
@@ -169,30 +171,30 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
                                 </>
                             ) : (
                                 <>
-                                    <Text style={styles.faircoinTitle}>Use the options below to pay with FAIRWallet</Text>
+                                    <Text style={styles.faircoinTitle}>{t('payment.details.fairWalletInstructions')}</Text>
                                     <Text style={styles.faircoinAddress}>{faircoinAddress}</Text>
                                     <TouchableOpacity
                                         style={[styles.faircoinButton, { backgroundColor: '#9ffb50', borderRadius: 18, marginTop: 12, width: '90%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }]}
                                         onPress={handleOpenFairWallet}
                                         accessibilityRole="button"
-                                        accessibilityLabel="Open in FAIRWallet"
+                                        accessibilityLabel={t('payment.details.openInFairWallet')}
                                     >
                                         <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
-                                        <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>Open in FAIRWallet</Text>
+                                        <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>{t('payment.details.openInFairWallet')}</Text>
                                     </TouchableOpacity>
                                     <TouchableOpacity
                                         style={[styles.faircoinButton, { backgroundColor: '#9ffb50', borderRadius: 18, marginTop: 10, width: '90%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }]}
                                         onPress={handleCopyAddress}
                                         accessibilityRole="button"
-                                        accessibilityLabel="Copy FairCoin address"
+                                        accessibilityLabel={t('payment.details.copyAddress')}
                                     >
                                         <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
-                                        <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>Copy Address</Text>
+                                        <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>{t('payment.details.copyAddress')}</Text>
                                     </TouchableOpacity>
                                 </>
                             )}
                             <View style={{ height: 18 }} />
-                            <Text style={styles.faircoinWaiting}>Waiting for payment...</Text>
+                            <Text style={styles.faircoinWaiting}>{t('payment.details.waitingForPayment')}</Text>
                         </View>
                     </View>
                 )}
@@ -201,13 +203,13 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
             <GroupedPillButtons
                 buttons={[
                     {
-                        text: 'Back',
+                        text: t('payment.actions.back'),
                         onPress: onBack,
                         icon: 'arrow-back',
                         variant: 'transparent',
                     },
                     {
-                        text: 'Continue',
+                        text: t('payment.actions.continue'),
                         onPress: onNext,
                         icon: 'arrow-forward',
                         variant: 'primary',

package/src/ui/components/payment/PaymentMethodStep.tsx

@@ -6,6 +6,7 @@ import GroupedPillButtons from '../internal/GroupedPillButtons';
 import { FAIRWalletIcon } from '../icon';
 import { createPaymentStyles } from './paymentStyles';
 import type { PaymentMethod, PaymentColors, PaymentStepAnimations } from './types';
+import { useI18n } from '../../hooks/useI18n';
 
 interface PaymentMethodStepProps {
     availablePaymentMethods: PaymentMethod[];
@@ -27,6 +28,7 @@ const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
     onNext,
 }) => {
     const styles = useMemo(() => createPaymentStyles(colors), [colors]);
+    const { t } = useI18n();
     const { fadeAnim, slideAnim, scaleAnim } = animations;
 
     return (
@@ -45,7 +47,7 @@ const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
             accessibilityLabel="Choose payment method step"
         >
             <View style={styles.section}>
-                <Text style={styles.sectionTitle}>Choose Payment Method</Text>
+                <Text style={styles.sectionTitle}>{t('payment.method.title')}</Text>
 
                 <GroupedSection
                     items={availablePaymentMethods.map(method => ({
@@ -54,8 +56,8 @@ const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
                         iconColor: method.key === 'card' ? '#007AFF' :
                             method.key === 'oxy' ? '#32D74B' :
                                 method.key === 'faircoin' ? '#9ffb50' : colors.primary,
-                        title: method.label,
-                        subtitle: method.description,
+                        title: t(`payment.methods.${method.key}.label`),
+                        subtitle: t(`payment.methods.${method.key}.description`),
                         onPress: () => onSelectMethod(method.key),
                         selected: selectedMethod === method.key,
                         showChevron: false,
@@ -69,13 +71,13 @@ const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
             <GroupedPillButtons
                 buttons={[
                     {
-                        text: 'Back',
+                        text: t('payment.actions.back'),
                         onPress: onBack,
                         icon: 'arrow-back',
                         variant: 'transparent',
                     },
                     {
-                        text: 'Continue',
+                        text: t('payment.actions.continue'),
                         onPress: onNext,
                         icon: 'arrow-forward',
                         variant: 'primary',

package/src/ui/components/payment/PaymentReviewStep.tsx

@@ -6,6 +6,7 @@ import GroupedPillButtons from '../internal/GroupedPillButtons';
 import { createPaymentStyles } from './paymentStyles';
 import { PAYMENT_METHODS, getCurrencySymbol } from './constants';
 import type { CardDetails, PaymentColors, PaymentStepAnimations } from './types';
+import { useI18n } from '../../hooks/useI18n';
 
 interface PaymentReviewStepProps {
     amount: string | number;
@@ -31,6 +32,7 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
     onPay,
 }) => {
     const styles = useMemo(() => createPaymentStyles(colors), [colors]);
+    const { t } = useI18n();
     const currencySymbol = getCurrencySymbol(currency);
     const { fadeAnim, slideAnim, scaleAnim } = animations;
 
@@ -52,7 +54,7 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
             accessibilityLabel="Review payment step"
         >
             <View style={styles.section}>
-                <Text style={styles.sectionTitle}>Review Payment</Text>
+                <Text style={styles.sectionTitle}>{t('payment.review.title')}</Text>
 
                 <GroupedSection
                     items={[
@@ -60,43 +62,43 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
                             id: 'secure-payment',
                             icon: 'shield-check',
                             iconColor: colors.success || '#4BB543',
-                            title: 'Secure payment',
-                            subtitle: 'Your payment is protected by industry-standard encryption',
+                            title: t('payment.review.securePayment'),
+                            subtitle: t('payment.review.securePaymentDesc'),
                         },
                         {
                             id: 'amount',
                             icon: 'cash',
                             iconColor: colors.primary,
-                            title: 'Amount',
+                            title: t('payment.review.amount'),
                             subtitle: `${currencySymbol} ${amount}`,
                         },
                         {
                             id: 'payment-method',
                             icon: selectedMethod?.icon as any,
                             iconColor: colors.primary,
-                            title: 'Payment Method',
-                            subtitle: selectedMethod?.label,
+                            title: t('payment.review.paymentMethod'),
+                            subtitle: selectedMethod ? t(`payment.methods.${selectedMethod.key}.label`) : undefined,
                         },
                         ...(paymentMethod === 'card' ? [{
                             id: 'card-details',
                             icon: 'card' as const,
                             iconColor: colors.primary,
-                            title: 'Card',
+                            title: t('payment.review.card'),
                             subtitle: cardDetails.number.replace(/.(?=.{4})/g, '*'),
                         }] : []),
                         ...(paymentMethod === 'oxy' ? [{
                             id: 'oxy-balance',
                             icon: 'wallet' as const,
                             iconColor: colors.primary,
-                            title: 'Oxy Pay Account',
-                            subtitle: 'Balance: ⊜ 123.45',
+                            title: t('payment.review.oxyPayAccount'),
+                            subtitle: t('payment.details.balance', { balance: '⊜ 123.45' }),
                         }] : []),
                         ...(paymentMethod === 'faircoin' ? [{
                             id: 'faircoin-wallet',
                             icon: 'qr-code' as const,
                             iconColor: colors.primary,
-                            title: 'FairCoin Wallet',
-                            subtitle: 'Paid via QR',
+                            title: t('payment.review.faircoinWallet'),
+                            subtitle: t('payment.review.paidViaQR'),
                         }] : []),
                     ]}
                 />
@@ -105,13 +107,13 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
             <GroupedPillButtons
                 buttons={[
                     {
-                        text: 'Back',
+                        text: t('payment.actions.back'),
                         onPress: onBack,
                         icon: 'arrow-back',
                         variant: 'transparent',
                     },
                     {
-                        text: isPaying ? 'Processing...' : 'Pay Now',
+                        text: isPaying ? t('payment.review.processing') : t('payment.review.payNow'),
                         onPress: onPay,
                         icon: 'checkmark',
                         variant: 'primary',

package/src/ui/components/payment/PaymentSuccessStep.tsx

@@ -5,6 +5,7 @@ import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../internal/GroupedPillButtons';
 import { createPaymentStyles } from './paymentStyles';
 import type { PaymentColors, PaymentStepAnimations } from './types';
+import { useI18n } from '../../hooks/useI18n';
 
 interface PaymentSuccessStepProps {
     colors: PaymentColors;
@@ -18,6 +19,7 @@ const PaymentSuccessStep: React.FC<PaymentSuccessStepProps> = ({
     onDone,
 }) => {
     const styles = useMemo(() => createPaymentStyles(colors), [colors]);
+    const { t } = useI18n();
     const { fadeAnim, slideAnim, scaleAnim } = animations;
 
     return (
@@ -36,7 +38,7 @@ const PaymentSuccessStep: React.FC<PaymentSuccessStepProps> = ({
             accessibilityLabel="Payment complete"
         >
             <View style={styles.section}>
-                <Text style={styles.sectionTitle}>Payment Complete</Text>
+                <Text style={styles.sectionTitle}>{t('payment.success.title')}</Text>
 
                 <View style={styles.successCard}>
                     <View style={styles.successContent}>
@@ -46,10 +48,10 @@ const PaymentSuccessStep: React.FC<PaymentSuccessStepProps> = ({
                             color={colors.success || '#4BB543'}
                             style={styles.successIcon}
                         />
-                        <Text style={styles.successMainTitle}>Payment Successful!</Text>
-                        <Text style={styles.successSubtitle}>Thank you for your payment.</Text>
+                        <Text style={styles.successMainTitle}>{t('payment.success.heading')}</Text>
+                        <Text style={styles.successSubtitle}>{t('payment.success.thanks')}</Text>
                         <View style={{ height: 18 }} />
-                        <Text style={styles.successMessage}>Your transaction has been processed successfully.</Text>
+                        <Text style={styles.successMessage}>{t('payment.success.processed')}</Text>
                     </View>
                 </View>
             </View>
@@ -57,7 +59,7 @@ const PaymentSuccessStep: React.FC<PaymentSuccessStepProps> = ({
             <GroupedPillButtons
                 buttons={[
                     {
-                        text: 'Done',
+                        text: t('payment.actions.done'),
                         onPress: onDone,
                         icon: 'checkmark',
                         variant: 'primary',