diff --git a/packages/mobile/src/core/HideableAmount/ShowBalance.tsx b/packages/mobile/src/core/HideableAmount/ShowBalance.tsx index b6890c3c1..aa8417ab0 100644 --- a/packages/mobile/src/core/HideableAmount/ShowBalance.tsx +++ b/packages/mobile/src/core/HideableAmount/ShowBalance.tsx @@ -5,19 +5,41 @@ import { Steezy } from '$styles'; import { Pressable, View } from '$uikit'; import { Haptics, isAndroid } from '$utils'; import { DarkTheme } from '$styled'; -import { Text } from '@tonkeeper/uikit'; +import { Icon, Text } from '@tonkeeper/uikit'; +import { DangerLevel } from '@tonkeeper/shared/hooks'; +import { useNavigation } from '@tonkeeper/router'; +import { SettingsStackRouteNames } from '$navigation'; const TouchableComponent = isAndroid ? Pressable : TouchableHighlight; -export const ShowBalance: React.FC<{ amount: string }> = ({ amount }) => { +const getColorByDangerLevel = ( + dangerLevel: DangerLevel, +): undefined | 'accentOrange' | 'accentRed' => { + switch (dangerLevel) { + case DangerLevel.Normal: + return undefined; + case DangerLevel.Medium: + return 'accentOrange'; + case DangerLevel.High: + return 'accentRed'; + } +}; + +export const ShowBalance: React.FC<{ amount: string; dangerLevel: DangerLevel }> = ({ + amount, + dangerLevel, +}) => { const hideAmounts = usePrivacyStore((state) => state.actions.toggleHiddenAmounts); const isHidden = usePrivacyStore((state) => state.hiddenAmounts); + const nav = useNavigation(); const handleToggleHideAmounts = useCallback(() => { hideAmounts(); Haptics.impactHeavy(); }, [hideAmounts]); + const handleNavigateToBackup = () => nav.navigate(SettingsStackRouteNames.Backup); + return ( {isHidden ? ( @@ -34,7 +56,22 @@ export const ShowBalance: React.FC<{ amount: string }> = ({ amount }) => { ) : ( - {amount} + + {amount} + + + )} + {dangerLevel !== DangerLevel.Normal && ( + + )} @@ -46,6 +83,7 @@ const styles = Steezy.create(({ colors }) => ({ flexDirection: 'row', height: 54, alignItems: 'center', + gap: 8, }, starsContainer: { height: 40, @@ -59,4 +97,8 @@ const styles = Steezy.create(({ colors }) => ({ stars: { paddingTop: 8, }, + dangerButton: { + paddingTop: 21, + paddingBottom: 11, + }, })); diff --git a/packages/mobile/src/screens/BackupScreen/BackupScreen.tsx b/packages/mobile/src/screens/BackupScreen/BackupScreen.tsx index d5632b91b..563c99280 100644 --- a/packages/mobile/src/screens/BackupScreen/BackupScreen.tsx +++ b/packages/mobile/src/screens/BackupScreen/BackupScreen.tsx @@ -4,16 +4,51 @@ import { memo } from 'react'; import { format } from 'date-fns'; import { getLocale } from '$utils/date'; import { i18n, t } from '@tonkeeper/shared/i18n'; -import { useWalletSetup } from '@tonkeeper/shared/hooks'; +import { + DangerLevel, + useDangerLevel, + useWalletCurrency, + useWalletSetup, +} from '@tonkeeper/shared/hooks'; +import { tk } from '$wallet'; +import { formatter } from '@tonkeeper/shared/formatter'; export const BackupScreen = memo(() => { const { lastBackupAt } = useWalletSetup(); const nav = useNavigation(); + const currency = useWalletCurrency(); + const dangerLevel = useDangerLevel(tk.wallet.totalTon); + return ( + {dangerLevel !== DangerLevel.Normal && ( + <> + + + {t('backup_screen.backup_warning', { + totalFiat: formatter.format(tk.wallet.totalFiat, { currency }), + })} + + + + + )} {t('backup_screen.manual_title')} @@ -27,7 +62,7 @@ export const BackupScreen = memo(() => {