diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 20aa905..db01aa5 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -94,13 +94,14 @@ import { faCircleArrowDown } from "@fortawesome/free-solid-svg-icons/faCircleArr import { faGlobe } from "@fortawesome/free-solid-svg-icons/faGlobe" import { faCubes } from "@fortawesome/free-solid-svg-icons/faCubes" import { faClock } from "@fortawesome/free-regular-svg-icons/faClock" +import { faArrowRotateLeft } from "@fortawesome/free-solid-svg-icons/faArrowRotateLeft" export type IconTypes = keyof typeof iconRegistry // TODO remove need for manual iconregistry? // would be best to just import all of them, i guess, or figure out something smart -export const iconRegistry = { faAddressCard, faAddressBook, faWallet, faQrcode, faClipboard, faSliders, faCoins, faEllipsisVertical, faEllipsis, faArrowUp, faArrowDown, faArrowLeft, faXmark, faInfoCircle, faBug, faCheckCircle, faArrowTurnUp, faArrowTurnDown, faPencil, faTags, faShareFromSquare, faRotate, faCode, faBan, faCircle, faPaperPlane, faBolt, faArrowUpFromBracket, faArrowRightToBracket, faPlus, faShieldHalved, faCloudArrowUp, faPaintbrush, faCopy, faBurst, faUserShield, faLock, faLockOpen, faTriangleExclamation, faDownload, faUpload, faRecycle, faListUl, faExpand, faFingerprint, faWandMagicSparkles, faCircleUser, faComment, faKey, faCircleNodes, faBullseye, faEyeSlash, faUpRightFromSquare, faShareNodes, faPaste, faKeyboard, faMoneyBill1, faGears, faTag, faBank, faChevronDown, faChevronUp, faCircleExclamation, faCircleQuestion, faEnvelope, faTwitter, faTelegramPlane, faDiscord, faGithub, faReddit, faCircleArrowUp, faCircleArrowDown, faGlobe, faCubes, faClock } +export const iconRegistry = { faAddressCard, faAddressBook, faWallet, faQrcode, faClipboard, faSliders, faCoins, faEllipsisVertical, faEllipsis, faArrowUp, faArrowDown, faArrowLeft, faXmark, faInfoCircle, faBug, faCheckCircle, faArrowTurnUp, faArrowTurnDown, faPencil, faTags, faShareFromSquare, faRotate, faCode, faBan, faCircle, faPaperPlane, faBolt, faArrowUpFromBracket, faArrowRightToBracket, faPlus, faShieldHalved, faCloudArrowUp, faPaintbrush, faCopy, faBurst, faUserShield, faLock, faLockOpen, faTriangleExclamation, faDownload, faUpload, faRecycle, faListUl, faExpand, faFingerprint, faWandMagicSparkles, faCircleUser, faComment, faKey, faCircleNodes, faBullseye, faEyeSlash, faUpRightFromSquare, faShareNodes, faPaste, faKeyboard, faMoneyBill1, faGears, faTag, faBank, faChevronDown, faChevronUp, faCircleExclamation, faCircleQuestion, faEnvelope, faTwitter, faTelegramPlane, faDiscord, faGithub, faReddit, faCircleArrowUp, faCircleArrowDown, faGlobe, faCubes, faClock, faArrowRotateLeft } interface IconProps extends TouchableOpacityProps { diff --git a/src/i18n_messages/en.json b/src/i18n_messages/en.json index f63f0be..b4f4251 100644 --- a/src/i18n_messages/en.json +++ b/src/i18n_messages/en.json @@ -416,6 +416,7 @@ }, "preferredUnit": "Preferred unit", "exchangeCurrency": "Balance conversion", + "theme": "Theme", "privacy": "Privacy", "security": "Security", "title": "Settings", diff --git a/src/models/RootStore.ts b/src/models/RootStore.ts index 6510911..e6c2d74 100644 --- a/src/models/RootStore.ts +++ b/src/models/RootStore.ts @@ -11,7 +11,7 @@ import {WalletStoreModel} from './WalletStore' import {NwcStoreModel} from './NwcStore' import { log } from '../services' -export const rootStoreModelVersion = 25 // Update this if model changes require migrations defined in setupRootStore.ts +export const rootStoreModelVersion = 26 // Update this if model changes require migrations defined in setupRootStore.ts /** * A RootStore model. diff --git a/src/models/UserSettingsStore.ts b/src/models/UserSettingsStore.ts index e55969f..5157fb0 100644 --- a/src/models/UserSettingsStore.ts +++ b/src/models/UserSettingsStore.ts @@ -3,12 +3,14 @@ import {Database} from '../services' import {MMKVStorage} from '../services' import {LogLevel} from '../services/log/logTypes' import { CurrencyCode, MintUnit } from '../services/wallet/currency' +import { ThemeCode } from '../theme' export type UserSettings = { id?: number walletId: string | null preferredUnit: MintUnit | null exchangeCurrency: CurrencyCode | null + theme: ThemeCode | null isOnboarded: boolean | 0 | 1 isStorageEncrypted: boolean | 0 | 1 isLocalBackupOn: boolean | 0 | 1 @@ -24,6 +26,7 @@ export const UserSettingsStoreModel = types walletId: types.maybeNull(types.string), preferredUnit: types.optional(types.frozen(), 'sat'), exchangeCurrency: types.optional(types.frozen(), CurrencyCode.USD), + theme: types.optional(types.frozen(), ThemeCode.DEFAULT), isOnboarded: types.optional(types.boolean, false), isStorageEncrypted: types.optional(types.boolean, false), isLocalBackupOn: types.optional(types.boolean, true), @@ -37,7 +40,8 @@ export const UserSettingsStoreModel = types const { walletId, preferredUnit, - exchangeCurrency, + exchangeCurrency, + theme, isOnboarded, isStorageEncrypted, isLocalBackupOn, @@ -56,7 +60,8 @@ export const UserSettingsStoreModel = types self.walletId = walletId as string self.preferredUnit = preferredUnit as MintUnit - self.exchangeCurrency = exchangeCurrency as CurrencyCode + self.exchangeCurrency = exchangeCurrency as CurrencyCode + self.theme = theme as ThemeCode self.isOnboarded = booleanIsOnboarded as boolean self.isStorageEncrypted = booleanIsStorageEncrypted as boolean self.isLocalBackupOn = booleanIsLocalBackupOn as boolean @@ -83,6 +88,12 @@ export const UserSettingsStoreModel = types return exchangeCurrency }, + setTheme: (theme: ThemeCode) => { + Database.updateUserSettings({...self, theme}) + self.theme = theme + + return theme + }, setIsOnboarded: (isOnboarded: boolean) => { Database.updateUserSettings({...self, isOnboarded}) self.isOnboarded = isOnboarded diff --git a/src/models/helpers/setupRootStore.ts b/src/models/helpers/setupRootStore.ts index 1431846..678ed59 100644 --- a/src/models/helpers/setupRootStore.ts +++ b/src/models/helpers/setupRootStore.ts @@ -26,6 +26,7 @@ import AppError, { Err } from '../../utils/AppError' import { LogLevel } from '../../services/log/logTypes' import { MintStatus } from '../Mint' import { CurrencyCode } from '../../services/wallet/currency' +import { ThemeCode } from '../../theme' /** * The key we'll be saving our state as within storage. @@ -318,6 +319,13 @@ async function _runMigrations(rootStore: RootStore) { rootStore.setVersion(rootStoreModelVersion) log.info(`Completed rootStore migrations to the version v${rootStoreModelVersion}`) } + + if(currentVersion < 26) { + log.trace(`Starting rootStore migrations from version v${currentVersion} -> v26`) + userSettingsStore.setTheme(ThemeCode.DEFAULT) + rootStore.setVersion(rootStoreModelVersion) + log.info(`Completed rootStore migrations to the version v${rootStoreModelVersion}`) + } } catch (e: any) { throw new AppError( Err.STORAGE_ERROR, diff --git a/src/screens/BackupScreen.tsx b/src/screens/BackupScreen.tsx index 237c739..58ee8ef 100644 --- a/src/screens/BackupScreen.tsx +++ b/src/screens/BackupScreen.tsx @@ -138,6 +138,7 @@ export const BackupScreen: FC> = observer(fun } const headerBg = useThemeColor('header') + const headerTitle = useThemeColor('headerTitle') return ( @@ -146,7 +147,7 @@ export const BackupScreen: FC> = observer(fun onLeftPress={() => navigation.goBack()} /> - + = observer( const headerBg = useThemeColor('header') const screenBg = useThemeColor('background') const mainButtonColor = useThemeColor('card') - const mainButtonIcon = useThemeColor('button') + const mainButtonIcon = useThemeColor('mainButtonIcon') const mainButtonText = useThemeColor('text') diff --git a/src/screens/Contacts/PrivateContacts.tsx b/src/screens/Contacts/PrivateContacts.tsx index ce7222f..cf11bf7 100644 --- a/src/screens/Contacts/PrivateContacts.tsx +++ b/src/screens/Contacts/PrivateContacts.tsx @@ -248,7 +248,7 @@ export const PrivateContacts = observer(function (props: { const iconColor = useThemeColor('textDim') const inputBg = useThemeColor('background') const mainButtonColor = useThemeColor('card') - const mainButtonIcon = useThemeColor('button') + const mainButtonIcon = useThemeColor('mainButtonIcon') const screenBg = useThemeColor('background') return ( diff --git a/src/screens/DeveloperScreen.tsx b/src/screens/DeveloperScreen.tsx index cadef98..b9b7d56 100644 --- a/src/screens/DeveloperScreen.tsx +++ b/src/screens/DeveloperScreen.tsx @@ -160,6 +160,7 @@ export const DeveloperScreen: FC> = observ const headerBg = useThemeColor('header') const iconSelectedColor = useThemeColor('button') const iconColor = useThemeColor('textDim') + const headerTitle = useThemeColor('headerTitle') return ( @@ -167,7 +168,7 @@ export const DeveloperScreen: FC> = observ diff --git a/src/screens/LightningPayScreen.tsx b/src/screens/LightningPayScreen.tsx index 5e0c557..ac8275a 100644 --- a/src/screens/LightningPayScreen.tsx +++ b/src/screens/LightningPayScreen.tsx @@ -152,6 +152,8 @@ export const LightningPayScreen: FC> = fu const inputBg = useThemeColor('background') const contactIcon = useThemeColor('button') const headerBg = useThemeColor('header') + const headerTitle = useThemeColor('headerTitle') + return ( @@ -164,7 +166,7 @@ export const LightningPayScreen: FC> = fu diff --git a/src/screens/LocalRecoveryScreen.tsx b/src/screens/LocalRecoveryScreen.tsx index 3c30fb3..79cf11d 100644 --- a/src/screens/LocalRecoveryScreen.tsx +++ b/src/screens/LocalRecoveryScreen.tsx @@ -380,13 +380,11 @@ export const LocalRecoveryScreen: FC = setError(e) } - const colorScheme = useColorScheme() + const headerBg = useThemeColor('header') const iconColor = useThemeColor('textDim') - const dateColor = useThemeColor('textDim') - const iconSelectedColor = useThemeColor('button') const activeIconColor = useThemeColor('button') - const hintColor = colors.palette.primary200 + const headerTitle = useThemeColor('headerTitle') return ( @@ -395,7 +393,7 @@ export const LocalRecoveryScreen: FC = diff --git a/src/screens/MintInfoScreen.tsx b/src/screens/MintInfoScreen.tsx index 1ce1398..5554538 100644 --- a/src/screens/MintInfoScreen.tsx +++ b/src/screens/MintInfoScreen.tsx @@ -153,6 +153,7 @@ export const MintInfoScreen: FC> = observer const textDim = useThemeColor('textDim') const headerBg = useThemeColor('header') const iconColor = useThemeColor('textDim') + const headerTitle = useThemeColor('headerTitle') return ( @@ -173,7 +174,7 @@ export const MintInfoScreen: FC> = observer fill='white' /> - + {mint?.units && ( {mint.units.map(unit => ( diff --git a/src/screens/Mints/MintBalanceSelector.tsx b/src/screens/Mints/MintBalanceSelector.tsx index d6611a1..db4b7aa 100644 --- a/src/screens/Mints/MintBalanceSelector.tsx +++ b/src/screens/Mints/MintBalanceSelector.tsx @@ -76,8 +76,7 @@ export const MintBalanceSelector = observer(function (props: { <> data={props.mintBalances} - renderItem={({ item, index }) => { - log.trace({index}) + renderItem={({ item, index }) => { return( { + switch (props.unit) { + case 'usd': + return useThemeColor('usd') + case 'eur': + return useThemeColor('eur') + default: + return useThemeColor('btc') + } + + } + + const tabWidth = moderateScale(80) + const headerTitle = useThemeColor('headerTitle') return (
{mint && ()} } diff --git a/src/screens/Mints/MintListItem.tsx b/src/screens/Mints/MintListItem.tsx index 652c543..680eacc 100644 --- a/src/screens/Mints/MintListItem.tsx +++ b/src/screens/Mints/MintListItem.tsx @@ -23,7 +23,7 @@ export const MintListItem = observer(function(props: { style?: ViewStyle }) { - const iconSelectedColor = useThemeColor('button') + const iconSelectedColor = useThemeColor('mainButtonIcon') const iconColor = useThemeColor('textDim') const iconBlockedColor = colors.palette.angry500 diff --git a/src/screens/MintsScreen.tsx b/src/screens/MintsScreen.tsx index 94bd0e4..7e25e76 100644 --- a/src/screens/MintsScreen.tsx +++ b/src/screens/MintsScreen.tsx @@ -271,11 +271,12 @@ export const MintsScreen: FC> = observer(funct const headerBg = useThemeColor('header') const iconColor = useThemeColor('textDim') const inputBg = useThemeColor('background') + const headerTitle = useThemeColor('headerTitle') return ( - + = observer( const screenBg = useThemeColor('background') const mainButtonIcon = useThemeColor('button') const labelText = useThemeColor('textDim') - const $subText = {color: useThemeColor('textDim'), fontSize: 14} + const $subText = {color: useThemeColor('textDim'), fontSize: moderateVerticalScale(14)} + const headerTitle = useThemeColor('headerTitle') return ( @@ -183,7 +184,7 @@ export const NwcScreen: FC = observer( diff --git a/src/screens/PaymentRequestsScreen.tsx b/src/screens/PaymentRequestsScreen.tsx index bef8318..2529e88 100644 --- a/src/screens/PaymentRequestsScreen.tsx +++ b/src/screens/PaymentRequestsScreen.tsx @@ -46,12 +46,13 @@ export const PaymentRequestsScreen: FC = observer(fu ) const headerBg = useThemeColor('header') - const activeTabIndicator = colors.palette.accent400 + const activeTabIndicator = colors.palette.accent400 + const headerTitle = useThemeColor('headerTitle') return ( - + > = observer(f const headerBg = useThemeColor('header') const iconColor = useThemeColor('textDim') + const headerTitle = useThemeColor('headerTitle') return ( - + {/*> = observer( log.trace('tokenAmounts', {tokenAmounts}) if(!decoded.unit) { - setInfo(translate("decodedMissingCurrencyUnit", { unit: CurrencyCode.SATS })) + setInfo(translate("decodedMissingCurrencyUnit", { unit: CurrencyCode.SAT })) decoded.unit = 'sat' } @@ -243,7 +243,7 @@ export const ReceiveScreen: FC> = observer( const headerBg = useThemeColor('header') const iconColor = useThemeColor('textDim') - const satsColor = colors.palette.primary200 + const amountInputColor = useThemeColor('amountInput') return ( @@ -256,8 +256,8 @@ export const ReceiveScreen: FC> = observer( {toNumber(receivedAmount) > 0 ? ( @@ -266,7 +266,7 @@ export const ReceiveScreen: FC> = observer( @@ -275,7 +275,7 @@ export const ReceiveScreen: FC> = observer( 0 ? "receiveScreen.received" : "receiveScreen.toReceive"} - style={{color: 'white', textAlign: 'center'}} + style={{color: amountInputColor, textAlign: 'center'}} /> @@ -505,7 +505,7 @@ const $headerContainer: TextStyle = { const $amountContainer: ViewStyle = { } -const $amountToReceive: TextStyle = { +const $amountInput: TextStyle = { borderRadius: spacing.small, margin: 0, padding: 0, diff --git a/src/screens/RelaysScreen.tsx b/src/screens/RelaysScreen.tsx index d6ea4c2..4cfc890 100644 --- a/src/screens/RelaysScreen.tsx +++ b/src/screens/RelaysScreen.tsx @@ -154,6 +154,7 @@ export const RelaysScreen: FC = observer( const mainButtonColor = useThemeColor('card') const screenBg = useThemeColor('background') const mainButtonIcon = useThemeColor('button') + const headerTitle = useThemeColor('headerTitle') return ( @@ -161,7 +162,7 @@ export const RelaysScreen: FC = observer( diff --git a/src/screens/RemoteBackupScreen.tsx b/src/screens/RemoteBackupScreen.tsx index 89dec82..6041c0c 100644 --- a/src/screens/RemoteBackupScreen.tsx +++ b/src/screens/RemoteBackupScreen.tsx @@ -104,11 +104,12 @@ export const RemoteBackupScreen: FC> = } const headerBg = useThemeColor('header') + const headerTitle = useThemeColor('headerTitle') return ( - + > = o const numIconColor = useThemeColor('textDim') const textHint = useThemeColor('textDim') const inputBg = useThemeColor('background') + const headerTitle = useThemeColor('headerTitle') return ( - + diff --git a/src/screens/SecurityScreen.tsx b/src/screens/SecurityScreen.tsx index f63b7a0..0ac2bf1 100644 --- a/src/screens/SecurityScreen.tsx +++ b/src/screens/SecurityScreen.tsx @@ -97,11 +97,12 @@ export const SecurityScreen: FC> = observer } const headerBg = useThemeColor('header') + const headerTitle = useThemeColor('headerTitle') return ( - + > = observer( } const headerBg = useThemeColor('header') - const satsColor = colors.palette.primary200 - // const inputBg = useThemeColor('background') + const amountInputColor = useThemeColor('amountInput') return ( @@ -651,7 +650,7 @@ export const SendScreen: FC> = observer( onChangeText={amount => setAmountToSend(amount)} onEndEditing={onAmountEndEditing} value={amountToSend} - style={$amountInput} + style={[$amountInput, {color: amountInputColor}]} maxLength={9} keyboardType="numeric" selectTextOnFocus={true} @@ -664,7 +663,7 @@ export const SendScreen: FC> = observer( diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx index 00cbc45..f4bcee5 100644 --- a/src/screens/SettingsScreen.tsx +++ b/src/screens/SettingsScreen.tsx @@ -9,13 +9,13 @@ import { CODEPUSH_PRODUCTION_DEPLOYMENT_KEY, } from '@env' import codePush, { RemotePackage } from 'react-native-code-push' -import {colors, spacing, useThemeColor} from '../theme' +import {ThemeCode, Themes, colors, spacing, useThemeColor} from '../theme' import {SettingsStackScreenProps} from '../navigation' // @demo remove-current-line -import {ListItem, Screen, Text, Card, NwcIcon, Button, BottomModal} from '../components' +import {ListItem, Screen, Text, Card, NwcIcon, Button, BottomModal, InfoModal} from '../components' import {useHeader} from '../utils/useHeader' import {useStores} from '../models' import {translate} from '../i18n' -import { log } from '../services' +import { Database, log } from '../services' import {Env} from '../utils/envtypes' import { round } from '../utils/number' import { Currencies, CurrencyCode, getCurrency } from '../services/wallet/currency' @@ -48,8 +48,10 @@ export const SettingsScreen: FC = observer( const [updateSize, setUpdateSize] = useState('') const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState(false) + const [isThemeModalVisible, setIsThemeModalVisible] = useState(false) const [isNativeUpdateAvailable, setIsNativeUpdateAvailable] = useState(false) const [areNotificationsEnabled, setAreNotificationsEnabled] = useState(false) + const [info, setInfo] = useState('') useEffect(() => { const checkForUpdate = async () => { @@ -128,95 +130,110 @@ export const SettingsScreen: FC = observer( setIsCurrencyModalVisible(previousState => !previousState) } - const handleBinaryVersionMismatchCallback = function(update: RemotePackage) { - // silent - // setIsNativeUpdateAvailable(true) - } + const toggleThemeModal = () => { + setIsThemeModalVisible(previousState => !previousState) + } - const gotoMints = function() { - navigation.navigate('Mints', {}) - } + const handleBinaryVersionMismatchCallback = function(update: RemotePackage) { + // silent + // setIsNativeUpdateAvailable(true) + } - const gotoSecurity = function() { - navigation.navigate('Security') - } - - const gotoPrivacy = function() { - navigation.navigate('Privacy') - } + const gotoMints = function() { + navigation.navigate('Mints', {}) + } - const gotoDevOptions = function() { - navigation.navigate('Developer') - } - - const gotoRelays = function() { - navigation.navigate('Relays') - } - - const gotoBackupRestore = function() { - navigation.navigate('Backup') - } - - const gotoUpdate = function() { - navigation.navigate('Update', { - isNativeUpdateAvailable, - isUpdateAvailable, - updateDescription, - updateSize - }) - } - - const gotoNwc = function() { - navigation.navigate('Nwc') - } - - const openNotificationSettings = async function() { - await notifee.openNotificationSettings() - } - - const gotoPreferredUnit = function() { - Alert.alert('Preferred unit is set based on your Wallet screen.') - } + const gotoSecurity = function() { + navigation.navigate('Security') + } + const gotoPrivacy = function() { + navigation.navigate('Privacy') + } - const getRateColor = function () { - const currency = userSettingsStore.exchangeCurrency + const gotoDevOptions = function() { + navigation.navigate('Developer') + } - if (currency === CurrencyCode.BTC) { - return colors.palette.orange600 - } - - if (currency === CurrencyCode.EUR) { - return colors.palette.blue600 - } - - if (currency === CurrencyCode.USD) { - return colors.palette.green400 - } - - return colors.palette.orange400 + const gotoRelays = function() { + navigation.navigate('Relays') } - const onSelectCurrency = function(currency: CurrencyCode) { - const currentCurrency = userSettingsStore.exchangeCurrency - if(currentCurrency !== currency) { - userSettingsStore.setExchangeCurrency(currency) - walletStore.refreshExchangeRate(currency) - } - toggleCurrencyModal() - } - - const onResetCurrency = function() { - const currentCurrency = userSettingsStore.exchangeCurrency - if(currentCurrency !== null) { - userSettingsStore.setExchangeCurrency(null) - walletStore.resetExchangeRate() - } - toggleCurrencyModal() - } + const gotoBackupRestore = function() { + navigation.navigate('Backup') + } - const $itemRight = {color: useThemeColor('textDim')} - const headerBg = useThemeColor('header') + const gotoUpdate = function() { + navigation.navigate('Update', { + isNativeUpdateAvailable, + isUpdateAvailable, + updateDescription, + updateSize + }) + } + + const gotoNwc = function() { + navigation.navigate('Nwc') + } + + const openNotificationSettings = async function() { + await notifee.openNotificationSettings() + } + + const gotoPreferredUnit = function() { + Alert.alert('Preferred unit is set based on your Wallet screen.') + } + + + const getRateColor = function () { + const currency = userSettingsStore.exchangeCurrency + + if (currency === CurrencyCode.BTC) { + return colors.palette.orange600 + } + + if (currency === CurrencyCode.EUR) { + return colors.palette.blue600 + } + + if (currency === CurrencyCode.USD) { + return colors.palette.green400 + } + + return colors.palette.orange400 + } + + const onSelectCurrency = function(currency: CurrencyCode) { + const currentCurrency = userSettingsStore.exchangeCurrency + if(currentCurrency !== currency) { + userSettingsStore.setExchangeCurrency(currency) + walletStore.refreshExchangeRate(currency) + } + toggleCurrencyModal() + } + + const onResetCurrency = function() { + const currentCurrency = userSettingsStore.exchangeCurrency + if(currentCurrency !== null) { + userSettingsStore.setExchangeCurrency(null) + walletStore.resetExchangeRate() + } + toggleCurrencyModal() + } + + const onSelectTheme = function(theme: ThemeCode) { + const currentTheme = userSettingsStore.theme + if(currentTheme !== theme) { + // state update causes crash because of hooks + Database.updateUserSettings({...userSettingsStore, theme}) + setInfo('Restart the wallet to apply new theme.') + } + toggleThemeModal() + } + + const $itemRight = {color: useThemeColor('textDim')} + const headerBg = useThemeColor('header') + const headerTitle = useThemeColor('headerTitle') return ( @@ -224,7 +241,7 @@ export const SettingsScreen: FC = observer( @@ -257,15 +274,30 @@ export const SettingsScreen: FC = observer( style={$item} RightComponent={ -