useSupportedVersionMessage

app/containers/SupportedVersions/SupportedVersionsWarning.tsx

@@ -5,34 +5,27 @@ import { useTheme } from '../../theme';
 import { CustomIcon } from '../CustomIcon';
 import Button from '../Button';
 import { styles } from './styles';
-import { useAppSelector } from '../../lib/hooks';
 import { showActionSheetRef } from '../ActionSheet';
+import { useSupportedVersionMessage } from './useSupportedVersionMessage';
 
-// Action sheet snaps
 export const SupportedVersionsWarningSnaps = [600];
 
 export const SupportedVersionsWarning = () => {
 	const { colors } = useTheme();
-	const { message, i18n } = useAppSelector(state => state.supportedVersions);
-	const lang = 'en';
+	const message = useSupportedVersionMessage();
 
 	if (!message) {
 		return null;
 	}
 
-	// TODO: i18n
 	return (
 		<View style={styles.container}>
 			<View style={styles.iconContainer}>
 				<CustomIcon name='warning' size={36} color={colors.dangerColor} />
 			</View>
-			{message.title ? <Text style={[styles.title, { color: colors.bodyText }]}>{i18n![lang][message.title]}</Text> : null}
-			{message.subtitle ? (
-				<Text style={[styles.subtitle, { color: colors.bodyText }]}>{i18n![lang][message.subtitle]}</Text>
-			) : null}
-			{message.description ? (
-				<Text style={[styles.description, { color: colors.bodyText }]}>{i18n![lang][message.description]}</Text>
-			) : null}
+			{message.title ? <Text style={[styles.title, { color: colors.bodyText }]}>{message.title}</Text> : null}
+			{message.subtitle ? <Text style={[styles.subtitle, { color: colors.bodyText }]}>{message.subtitle}</Text> : null}
+			{message.description ? <Text style={[styles.description, { color: colors.bodyText }]}>{message.description}</Text> : null}
 			<Button title='Learn more' type='secondary' backgroundColor={'#EEEFF1'} onPress={() => alert(message.link)} />
 		</View>
 	);

app/containers/SupportedVersions/useSupportedVersionMessage.ts

@@ -0,0 +1,19 @@
+import { useAppSelector } from '../../lib/hooks';
+
+export const useSupportedVersionMessage = () => {
+	const { message, i18n } = useAppSelector(state => state.supportedVersions);
+	const { language = 'en' } = useAppSelector(state => state.login.user);
+
+	if (!message || !i18n) {
+		return null;
+	}
+
+	const i18nLang = i18n[language] ?? i18n.en;
+
+	return {
+		title: i18nLang.title,
+		subtitle: i18nLang.subtitle,
+		description: i18nLang.description,
+		link: message.link
+	};
+};