fix: new home settings

Signed-off-by: clegirar <clemntgirard@gmail.com>

js/global.d.ts

@@ -8,6 +8,7 @@ declare module '*.svg' {
 declare module 'react-native-in-app-notification'
 declare module 'react-native-audiowaveform'
 declare module 'linkify-it'
+declare module 'react-native-flags'
 
 declare module 'google-palette' {
 	const content: (type: string, count: number) => string[]

js/packages/components/main/home/Header.tsx

@@ -198,7 +198,7 @@ export const HomeHeader: React.FC<
 										onLongPress(true)
 									}}
 								>
-									<AccountAvatar size={40 * scaleSize} />
+									<AccountAvatar size={35} />
 								</TouchableOpacity>
 							</View>
 						</View>

js/packages/components/onboarding/ChoosePreset.tsx

@@ -1,17 +1,19 @@
 import React from 'react'
-import { ImageBackground, View, TouchableOpacity } from 'react-native'
-import { Text, Icon } from '@ui-kitten/components'
+import { ImageBackground, TouchableOpacity, View } from 'react-native'
+import { Icon, Text } from '@ui-kitten/components'
 import { useStyles } from '@berty-tech/styles'
 import { useTranslation } from 'react-i18next'
 import { MessengerActions, PersistentOptionsKeys, useMsgrContext } from '@berty-tech/store/context'
 import FullAnonBackground from '@berty-tech/assets/full_anon_bg.png'
 import PerformanceBackground from '@berty-tech/assets/performance_bg.png'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useNavigation as useNativeNavigation } from '@react-navigation/core'
 
 export const ChoosePreset = () => {
 	const { t }: { t: any } = useTranslation()
-	const { dispatch, setPersistentOption } = useMsgrContext()
+	const { dispatch, setPersistentOption, persistentOptions } = useMsgrContext()
 	const insets = useSafeAreaInsets()
+	const navigation = useNativeNavigation()
 
 	const [{ text, padding, border, margin, flex, color }, { scaleSize }] = useStyles()
 	const performanceCheckList = [
@@ -37,7 +39,9 @@ export const ChoosePreset = () => {
 			<TouchableOpacity
 				activeOpacity={0.7}
 				onPress={async () => {
-					dispatch({ type: MessengerActions.SetStateOnBoarding })
+					!persistentOptions?.[PersistentOptionsKeys.WelcomeModal]?.enable
+						? navigation.goBack()
+						: dispatch({ type: MessengerActions.SetStateOnBoarding })
 					await setPersistentOption({
 						type: PersistentOptionsKeys.Preset,
 						payload: {
@@ -155,7 +159,9 @@ export const ChoosePreset = () => {
 				]}
 				activeOpacity={0.7}
 				onPress={async () => {
-					dispatch({ type: MessengerActions.SetStateOnBoarding })
+					!persistentOptions?.[PersistentOptionsKeys.WelcomeModal]?.enable
+						? navigation.goBack()
+						: dispatch({ type: MessengerActions.SetStateOnBoarding })
 					await setPersistentOption({
 						type: PersistentOptionsKeys.Preset,
 						payload: {

js/packages/components/settings/Home.tsx

@@ -7,13 +7,21 @@ import { Translation, useTranslation } from 'react-i18next'
 
 import { useStyles } from '@berty-tech/styles'
 import { ScreenProps, useNavigation } from '@berty-tech/navigation'
-import { useAccount } from '@berty-tech/store/hooks'
+import { useAccount, useMsgrContext } from '@berty-tech/store/hooks'
 
-import { ButtonSetting, ButtonSettingRow } from '../shared-components/SettingsButtons'
+import {
+	ButtonSetting,
+	ButtonSettingItem,
+	ButtonSettingRow,
+} from '../shared-components/SettingsButtons'
 import HeaderSettings from '../shared-components/Header'
 import { SwipeNavRecognizer } from '../shared-components/SwipeNavRecognizer'
 import logo from '../main/1_berty_picto.png'
 import { AccountAvatar } from '../avatars'
+import { PersistentOptionsKeys } from '@berty-tech/store/context'
+import i18n from '@berty-tech/berty-i18n'
+import { DropDownPicker } from '@berty-tech/components/shared-components/DropDownPicker'
+import { languages } from '@berty-tech/berty-i18n/locale/languages'
 
 const useStylesHome = () => {
 	const [{ height, margin, padding, text }] = useStyles()
@@ -43,20 +51,20 @@ const HomeHeaderGroupButton: React.FC = () => {
 				>
 					<ButtonSettingRow
 						state={[
+							{
+								name: t('settings.help.updates-button'),
+								icon: 'arrow-upward-outline',
+								color: color.red,
+								style: _styles.firstHeaderButton,
+								onPress: () => navigate.settings.appUpdates(),
+							},
 							{
 								name: t('settings.home.header-left-button'),
 								icon: 'question-mark-circle-outline',
 								color: color.red,
 								style: _styles.firstHeaderButton,
 								onPress: () => navigate.settings.help(),
 							},
-							{
-								name: t('settings.home.header-center-button'),
-								icon: 'options-2-outline',
-								color: color.dark.grey,
-								style: _styles.secondHeaderButton,
-								onPress: () => navigate.settings.devTools(),
-							},
 							{
 								name: t('settings.home.header-right-button'),
 								icon: 'settings-2-outline',
@@ -76,7 +84,7 @@ const HomeHeaderAvatar: React.FC = () => {
 	const _styles = useStylesHome()
 	const [
 		{ row, margin, background, border, padding },
-		{ windowWidth, windowHeight, scaleHeight },
+		{ windowWidth, windowHeight, scaleHeight, scaleSize },
 	] = useStyles()
 	const account = useAccount()
 	const navigation = useNavigation()
@@ -95,10 +103,10 @@ const HomeHeaderAvatar: React.FC = () => {
 							top: -73,
 						}}
 					>
-						<AccountAvatar size={64} />
+						<AccountAvatar size={60 * scaleSize} />
 					</View>
 					<Text style={[_styles.headerNameText]}>{account?.displayName || ''}</Text>
-					<View style={[padding.top.scale(20 * scaleHeight)]}>
+					<View style={[padding.top.scale(18 * scaleHeight)]}>
 						{(account?.link && (
 							<QRCode size={qrCodeSize} value={account.link} logo={logo} color='#3845E0' />
 						)) ||
@@ -129,15 +137,13 @@ const HomeHeader: React.FC = () => {
 				<View style={[flex.big]} />
 				<TouchableOpacity
 					onPress={() => navigation.navigate('Settings.EditProfile')}
-					style={[
-						flex.small,
-						{
-							flexDirection: 'row',
-							alignContent: 'center',
-							alignItems: 'center',
-							justifyContent: 'flex-end',
-						},
-					]}
+					style={{
+						flexDirection: 'row',
+						alignContent: 'center',
+						alignItems: 'center',
+						justifyContent: 'flex-end',
+						paddingVertical: 5 * scaleSize,
+					}}
 				>
 					<Text style={[{ color: color.white }, margin.right.small, text.size.medium]}>
 						{t('settings.home.edit-profile')}
@@ -156,19 +162,124 @@ const HomeHeader: React.FC = () => {
 }
 
 const HomeBodySettings: React.FC<{}> = () => {
-	const [{ flex, color, padding }] = useStyles()
+	const [{ flex, color, padding, text, margin, column }] = useStyles()
 	const navigation = useNativeNavigation()
+	const ctx = useMsgrContext()
+	const isPrefMode = ctx.persistentOptions.preset.value === 'performance'
+	const enableNotif = ctx.persistentOptions.notifications.enable
+
+	const items: any = Object.entries(languages).map(([key, attrs]) => ({
+		label: attrs.localName,
+		value: key,
+	}))
 
+	items.push({ label: 'Debug', value: 'cimode' })
 	return (
 		<Translation>
 			{(t: any): React.ReactNode => (
-				<View style={[flex.tiny, padding.horizontal.medium, padding.vertical.small]}>
+				<View style={[flex.tiny, padding.horizontal.medium, padding.bottom.small]}>
+					<ButtonSetting
+						name={t('settings.mode.app-mode-button.title')}
+						icon='options-outline'
+						iconSize={30}
+						iconColor={color.blue}
+						// actionIcon='arrow-ios-forward'
+						onPress={() => navigation.navigate('Onboarding.ChoosePreset')}
+						state={{
+							value: isPrefMode
+								? t('settings.mode.app-mode-button.performance-tag')
+								: t('settings.mode.app-mode-button.privacy-tag'),
+							color: color.white,
+							bgColor: isPrefMode ? color.blue : color.red,
+							stateIcon: isPrefMode ? 'flash-outline' : 'lock-outline',
+							stateIconColor: color.white,
+						}}
+					>
+						<Text
+							style={[
+								column.item.right,
+								text.bold.small,
+								text.size.tiny,
+								margin.right.scale(60),
+								isPrefMode ? text.color.blue : text.color.red,
+								margin.bottom.small,
+							]}
+						>
+							{t('settings.mode.app-mode-button.description-tag')}
+						</Text>
+						<View style={[padding.right.small]}>
+							<ButtonSettingItem
+								value={t('settings.mode.app-mode-button.first-bullet-point')}
+								icon={isPrefMode ? 'checkmark-circle-2' : 'close-circle'}
+								iconColor={isPrefMode ? color.blue : color.red}
+								disabled
+								styleText={[text.color.grey]}
+								styleContainer={[margin.bottom.tiny]}
+							/>
+							<ButtonSettingItem
+								value={t('settings.mode.app-mode-button.second-bullet-point')}
+								color='rgba(43,46,77,0.8)'
+								icon={isPrefMode ? 'checkmark-circle-2' : 'close-circle'}
+								iconColor={isPrefMode ? color.blue : color.red}
+								disabled
+								styleText={[text.color.grey]}
+								styleContainer={[margin.bottom.tiny]}
+							/>
+							<ButtonSettingItem
+								value={t('settings.mode.app-mode-button.third-bullet-point')}
+								color='rgba(43,46,77,0.8)'
+								icon={isPrefMode ? 'checkmark-circle-2' : 'close-circle'}
+								iconColor={isPrefMode ? color.blue : color.red}
+								disabled
+								styleText={[text.color.grey]}
+								styleContainer={[margin.bottom.tiny]}
+							/>
+						</View>
+					</ButtonSetting>
+					<DropDownPicker
+						items={items}
+						defaultValue={ctx.persistentOptions?.i18n.language}
+						onChangeItem={async (item: any) => {
+							await ctx.setPersistentOption({
+								type: PersistentOptionsKeys.I18N,
+								payload: {
+									language: item.value,
+								},
+							})
+							await i18n.changeLanguage(item.value)
+						}}
+					/>
+					<ButtonSetting
+						name={t('settings.mode.notifications-button.title')}
+						icon='bell-outline'
+						iconColor={color.blue}
+						state={{
+							value: enableNotif
+								? t('settings.mode.notifications-button.tag-enabled')
+								: t('settings.mode.notifications-button.tag-disabled'),
+							color: enableNotif ? color.green : color.red,
+							bgColor: enableNotif ? color.light.green : color.light.red,
+						}}
+						onPress={() => navigation.navigate('Settings.Notifications')}
+					/>
+					<ButtonSetting
+						name={t('settings.mode.bluetooth-button.title')}
+						icon='bluetooth-outline'
+						iconColor={color.blue}
+						onPress={() => navigation.navigate('Settings.Bluetooth')}
+					/>
 					<ButtonSetting
-						name={t('settings.home.network-button')}
-						icon='earth'
-						iconPack='custom'
+						name={t('settings.mode.dark-mode-button')}
+						icon='moon-outline'
 						iconColor={color.blue}
-						onPress={() => navigation.navigate('Settings.NetworkMap')}
+						toggled
+						disabled
+					/>
+					<ButtonSetting
+						name={t('settings.home.header-center-button')}
+						icon='options-2-outline'
+						iconColor={color.dark.grey}
+						onPress={() => navigation.navigate('Settings.DevTools')}
 					/>
 				</View>
 			)}
@@ -186,15 +297,15 @@ export const Home: React.FC<ScreenProps.Settings.Home> = () => {
 			<View style={[flex.tiny, background.white]}>
 				<StatusBar backgroundColor='#585AF1' barStyle='light-content' />
 				<SwipeNavRecognizer
-					onSwipeUp={() => navigation.goBack()}
-					onSwipeLeft={() => navigation.goBack()}
+					// onSwipeUp={() => navigation.goBack()}
+					// onSwipeLeft={() => navigation.goBack()}
 					onSwipeRight={() => navigation.goBack()}
-					onSwipeDown={() => navigation.goBack()}
+					// onSwipeDown={() => navigation.goBack()}
 				>
 					{account == null ? (
 						<ActivityIndicator size='large' style={[row.center]} />
 					) : (
-						<ScrollView bounces={false}>
+						<ScrollView contentContainerStyle={{ paddingBottom: 30 }} bounces={false}>
 							<View style={[margin.bottom.scale(20)]}>
 								<HeaderSettings>
 									<View>