fix(ui): fix home screen rerender causing navigation lag

e2e/backup.e2e.js

@@ -91,7 +91,7 @@ d('Backup', () => {
 		await element(by.id('NavigationClose')).atIndex(0).tap();
 
 		// remove 2 default widgets, leave PriceWidget
-		await element(by.id('WalletsScrollView')).scroll(200, 'down', 0);
+		await element(by.id('HomeScrollView')).scroll(200, 'down', 0);
 		await element(by.id('WidgetsEdit')).tap();
 		for (const w of ['NewsWidget', 'BlocksWidget']) {
 			await element(by.id('WidgetActionDelete').withAncestor(by.id(w))).tap();
@@ -121,7 +121,7 @@ d('Backup', () => {
 		await sleep(200); // animation
 
 		// check widgets
-		await element(by.id('WalletsScrollView')).scroll(300, 'down', 0);
+		await element(by.id('HomeScrollView')).scroll(300, 'down', 0);
 		await expect(element(by.id('PriceWidget'))).toExist();
 		await expect(element(by.id('NewsWidget'))).not.toExist();
 		await expect(element(by.id('BlocksWidget'))).not.toExist();

e2e/boost.e2e.js

@@ -96,7 +96,7 @@ d('Boost', () => {
 		await element(by.id('Close')).tap();
 
 		// check Activity
-		await element(by.id('WalletsScrollView')).scrollTo('bottom', 0);
+		await element(by.id('HomeScrollView')).scrollTo('bottom', 0);
 		await expect(element(by.id('ActivityShort-1'))).toBeVisible();
 		await expect(
 			element(by.text('100 000').withAncestor(by.id('ActivityShort-2'))),
@@ -207,7 +207,7 @@ d('Boost', () => {
 		await element(by.id('Close')).tap();
 
 		// check Activity
-		await element(by.id('WalletsScrollView')).scrollTo('bottom', 0);
+		await element(by.id('HomeScrollView')).scrollTo('bottom', 0);
 		await expect(element(by.id('ActivityShort-1'))).toBeVisible();
 		await expect(
 			element(by.text('100 000').withAncestor(by.id('ActivityShort-2'))),
@@ -273,7 +273,7 @@ d('Boost', () => {
 		await restoreWallet(seed);
 
 		// check activity after restore
-		await element(by.id('WalletsScrollView')).scrollTo('bottom', 0);
+		await element(by.id('HomeScrollView')).scrollTo('bottom', 0);
 		await expect(element(by.id('BoostingIcon'))).toBeVisible();
 		await element(by.id('ActivityShort-1')).tap();
 		await expect(element(by.id('BoostedButton'))).toBeVisible();

e2e/lightning.e2e.js

@@ -230,7 +230,7 @@ d('Lightning', () => {
 				.withTimeout(10000);
 
 			// check tx history
-			await element(by.id('WalletsScrollView')).scroll(1000, 'down', 0);
+			await element(by.id('HomeScrollView')).scroll(1000, 'down', 0);
 			await expect(
 				element(by.text('1 000').withAncestor(by.id('ActivityShort-1'))),
 			).toBeVisible();
@@ -322,7 +322,7 @@ d('Lightning', () => {
 				.withTimeout(10000);
 
 			// check tx history
-			await element(by.id('WalletsScrollView')).scroll(1000, 'down', 0);
+			await element(by.id('HomeScrollView')).scroll(1000, 'down', 0);
 			await expect(
 				element(by.text('111').withAncestor(by.id('ActivityShort-2'))),
 			).toBeVisible();

e2e/lnurl.e2e.js

@@ -195,7 +195,7 @@ d('LNURL', () => {
 			.withTimeout(10000);
 		await element(by.id('Close')).tap();
 		// check if comment is displayed
-		await element(by.id('WalletsScrollView')).scrollTo('bottom', 0);
+		await element(by.id('HomeScrollView')).scrollTo('bottom', 0);
 		await element(by.id('ActivityShort-1')).tap();
 		await expect(element(by.id('InvoiceComment'))).toHaveText('test comment');
 		await element(by.id('NavigationClose')).tap();

e2e/onchain.e2e.js

@@ -140,7 +140,7 @@ d('Onchain', () => {
 			).toHaveText('0');
 
 			// check Activity
-			await element(by.id('WalletsScrollView')).scroll(1000, 'down', 0);
+			await element(by.id('HomeScrollView')).scroll(1000, 'down', 0);
 			await expect(element(by.id('ActivityShort-1'))).toBeVisible();
 			await expect(element(by.id('ActivityShort-2'))).toBeVisible();
 			await expect(element(by.id('ActivityShort-3'))).toBeVisible();
@@ -306,7 +306,7 @@ d('Onchain', () => {
 			).toHaveText('0');
 
 			// check number of outputs for send tx
-			await element(by.id('WalletsScrollView')).scroll(1000, 'down', 0);
+			await element(by.id('HomeScrollView')).scroll(1000, 'down', 0);
 			await expect(element(by.id('ActivityShort-1'))).toBeVisible();
 			await expect(element(by.id('ActivityShort-2'))).toBeVisible();
 			await element(by.id('ActivityShowAll')).tap();

e2e/transfer.e2e.js

@@ -214,7 +214,7 @@ d('Transfer', () => {
 		await expect(element(by.id('Suggestion-lightningSettingUp'))).toBeVisible();
 
 		// check activity after restore
-		await element(by.id('WalletsScrollView')).scrollTo('bottom', 0);
+		await element(by.id('HomeScrollView')).scrollTo('bottom', 0);
 		await element(by.id('ActivityShort-1')).tap();
 		await expect(element(by.id('StatusTransfer'))).toBeVisible();
 
@@ -235,7 +235,7 @@ d('Transfer', () => {
 		await restoreWallet(seed);
 
 		// check activity after restore
-		await element(by.id('WalletsScrollView')).scrollTo('bottom', 0);
+		await element(by.id('HomeScrollView')).scrollTo('bottom', 0);
 		await expect(element(by.id('BoostingIcon'))).toBeVisible();
 		await element(by.id('ActivityShort-1')).tap();
 		await expect(element(by.id('StatusBoosting'))).toBeVisible();
@@ -327,7 +327,7 @@ d('Transfer', () => {
 		await expect(element(by.id('Suggestion-lightningSettingUp'))).toBeVisible();
 
 		// check activity
-		await element(by.id('WalletsScrollView')).scrollTo('bottom', 0);
+		await element(by.id('HomeScrollView')).scrollTo('bottom', 0);
 		await expect(element(by.text('From Savings (±30m)'))).toBeVisible();
 		await element(by.id('ActivityShort-1')).tap();
 		await expect(element(by.text('Transfer (±30m)'))).toBeVisible();

e2e/widgets.e2e.js

@@ -35,7 +35,7 @@ d('Widgets', () => {
 		}
 
 		// add price widget
-		await element(by.id('WalletsScrollView')).scroll(300, 'down', 0);
+		await element(by.id('HomeScrollView')).scroll(300, 'down', 0);
 		await element(by.id('WidgetsAdd')).tap();
 		await element(by.id('WidgetsOnboarding-button')).tap();
 		await element(by.id('WidgetListItem-price')).tap();
@@ -50,7 +50,7 @@ d('Widgets', () => {
 		await element(by.id('WidgetEditField-showSource')).tap();
 		await element(by.id('WidgetEditPreview')).tap();
 		await element(by.id('WidgetSave')).tap();
-		await element(by.id('WalletsScrollView')).scroll(200, 'down', 0);
+		await element(by.id('HomeScrollView')).scroll(200, 'down', 0);
 		await expect(element(by.id('PriceWidget'))).toBeVisible();
 		await expect(element(by.id('PriceWidgetRow-BTC/EUR'))).toBeVisible();
 		await expect(element(by.id('PriceWidgetSource'))).toBeVisible();

src/components/NavigationHeader.tsx

@@ -94,7 +94,7 @@ const NavigationHeader = ({
 
 		if (hasWalletRoute || parent) {
 			// for nested navigators, pop to top of parent navigator
-			navigation.popTo('Wallet', { screen: 'Wallets' });
+			navigation.popTo('Wallet', { screen: 'Home' });
 		} else {
 			navigation.popToTop();
 		}

src/components/TabBar.tsx

@@ -7,7 +7,7 @@ import {
 	StyleSheet,
 	ViewStyle,
 } from 'react-native';
-import { FadeIn } from 'react-native-reanimated';
+import Animated, { FadeIn } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { receiveIcon, sendIcon } from '../assets/icons/tabs';
@@ -18,8 +18,8 @@ import type { RootNavigationProp } from '../navigation/types';
 import { resetSendTransaction } from '../store/actions/wallet';
 import { spendingOnboardingSelector } from '../store/reselect/aggregations';
 import { viewControllersSelector } from '../store/reselect/ui';
+import { TViewController } from '../store/types/ui';
 import { toggleBottomSheet } from '../store/utils/ui';
-import { AnimatedView } from '../styles/components';
 import { ScanIcon } from '../styles/icons';
 import ButtonBlur from './buttons/ButtonBlur';
 
@@ -35,8 +35,15 @@ const TabBar = ({
 	const isSpendingOnboarding = useAppSelector(spendingOnboardingSelector);
 
 	const shouldHide = useMemo(() => {
-		const activityFilterSheets = ['timeRangePrompt', 'tagsPrompt'];
-		return activityFilterSheets.some((view) => viewControllers[view].isOpen);
+		const viewControllerKeys: TViewController[] = [
+			'backupPrompt',
+			'PINNavigation',
+			'highBalance',
+			'appUpdatePrompt',
+			'timeRangePrompt',
+			'tagsPrompt',
+		];
+		return viewControllerKeys.some((view) => viewControllers[view].isOpen);
 	}, [viewControllers]);
 
 	const onReceivePress = (): void => {
@@ -73,19 +80,16 @@ const TabBar = ({
 		return Platform.OS === 'android' ? androidStyles : iosStyles;
 	}, [white10]);
 
-	const bottom = useMemo(() => Math.max(insets.bottom, 16), [insets.bottom]);
-	const sendXml = useMemo(() => sendIcon('white'), []);
-	const receiveXml = useMemo(() => receiveIcon('white'), []);
+	const bottom = Math.max(insets.bottom, 16);
+	const sendXml = sendIcon('white');
+	const receiveXml = receiveIcon('white');
 
 	if (shouldHide) {
 		return <></>;
 	}
 
 	return (
-		<AnimatedView
-			style={[styles.tabRoot, { bottom }]}
-			color="transparent"
-			entering={FadeIn}>
+		<Animated.View style={[styles.tabRoot, { bottom }]} entering={FadeIn}>
 			<ButtonBlur
 				style={styles.send}
 				text={t('send')}
@@ -110,7 +114,7 @@ const TabBar = ({
 				testID="Receive"
 				onPress={onReceivePress}
 			/>
-		</AnimatedView>
+		</Animated.View>
 	);
 };
 

src/navigation/bottom-sheet/AppUpdatePrompt.tsx

@@ -26,7 +26,7 @@ const imageSrc = require('../../assets/illustrations/wand.png');
 const ASK_INTERVAL = 1000 * 60 * 60 * 12; // 12h - how long this prompt will be hidden if user taps Later
 const CHECK_DELAY = 2500; // how long user needs to stay on Wallets screen before he will see this prompt
 
-const AppUpdatePrompt = ({ enabled }: { enabled: boolean }): ReactElement => {
+const AppUpdatePrompt = (): ReactElement => {
 	const { t } = useTranslation('other');
 	const snapPoints = useSnapPoints('large');
 	const dispatch = useAppDispatch();
@@ -50,14 +50,13 @@ const AppUpdatePrompt = ({ enabled }: { enabled: boolean }): ReactElement => {
 	const shouldShowBottomSheet = useMemo(() => {
 		const isTimeoutOver = Number(new Date()) - ignoreTimestamp > ASK_INTERVAL;
 		return (
-			enabled &&
 			!__E2E__ &&
 			updateInfo !== null &&
 			!updateInfo.critical &&
 			isTimeoutOver &&
 			!anyBottomSheetIsOpen
 		);
-	}, [enabled, updateInfo, ignoreTimestamp, anyBottomSheetIsOpen]);
+	}, [updateInfo, ignoreTimestamp, anyBottomSheetIsOpen]);
 
 	useEffect(() => {
 		if (!shouldShowBottomSheet) {
@@ -104,6 +103,7 @@ const AppUpdatePrompt = ({ enabled }: { enabled: boolean }): ReactElement => {
 				}
 				description={t('update_text')}
 				image={imageSrc}
+				showBackButton={false}
 				continueText={t('update_button')}
 				cancelText={t('cancel')}
 				testID="AppUpdatePrompt"

src/screens/Settings/Backup/BackupPrompt.tsx → src/navigation/bottom-sheet/BackupPrompt.tsx

@@ -1,30 +1,30 @@
 import React, { memo, ReactElement, useMemo, useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import BottomSheetScreen from '../../../components/BottomSheetScreen';
-import BottomSheetWrapper from '../../../components/BottomSheetWrapper';
-import { __E2E__ } from '../../../constants/env';
+import BottomSheetScreen from '../../components/BottomSheetScreen';
+import BottomSheetWrapper from '../../components/BottomSheetWrapper';
+import { __E2E__ } from '../../constants/env';
 import {
 	useBottomSheetBackPress,
 	useSnapPoints,
-} from '../../../hooks/bottomSheet';
-import { useAppDispatch, useAppSelector } from '../../../hooks/redux';
-import { useBalance } from '../../../hooks/wallet';
-import { viewControllersSelector } from '../../../store/reselect/ui';
-import { backupVerifiedSelector } from '../../../store/reselect/user';
-import { ignoreBackupTimestampSelector } from '../../../store/reselect/user';
-import { closeSheet } from '../../../store/slices/ui';
-import { ignoreBackup } from '../../../store/slices/user';
-import { showBottomSheet } from '../../../store/utils/ui';
-import { Display } from '../../../styles/text';
-import { objectKeys } from '../../../utils/objectKeys';
+} from '../../hooks/bottomSheet';
+import { useAppDispatch, useAppSelector } from '../../hooks/redux';
+import { useBalance } from '../../hooks/wallet';
+import { viewControllersSelector } from '../../store/reselect/ui';
+import { backupVerifiedSelector } from '../../store/reselect/user';
+import { ignoreBackupTimestampSelector } from '../../store/reselect/user';
+import { closeSheet } from '../../store/slices/ui';
+import { ignoreBackup } from '../../store/slices/user';
+import { showBottomSheet } from '../../store/utils/ui';
+import { Display } from '../../styles/text';
+import { objectKeys } from '../../utils/objectKeys';
 
-const imageSrc = require('../../../assets/illustrations/safe.png');
+const imageSrc = require('../../assets/illustrations/safe.png');
 
 const ASK_INTERVAL = 1000 * 60 * 60 * 24; // 1 day - how long this prompt will be hidden if user taps Later
 const CHECK_DELAY = 2000; // how long user needs to stay on Wallets screen before he will see this prompt
 
-const BackupPrompt = ({ enabled }: { enabled: boolean }): ReactElement => {
+const BackupPrompt = (): ReactElement => {
 	const { t } = useTranslation('security');
 	const snapPoints = useSnapPoints('medium');
 	const dispatch = useAppDispatch();
@@ -60,20 +60,13 @@ const BackupPrompt = ({ enabled }: { enabled: boolean }): ReactElement => {
 	const shouldShowBottomSheet = useMemo(() => {
 		const isTimeoutOver = Number(new Date()) - ignoreTimestamp > ASK_INTERVAL;
 		return (
-			enabled &&
 			!__E2E__ &&
 			!backupVerified &&
 			totalBalance > 0 &&
 			isTimeoutOver &&
 			!anyBottomSheetIsOpen
 		);
-	}, [
-		enabled,
-		backupVerified,
-		totalBalance,
-		ignoreTimestamp,
-		anyBottomSheetIsOpen,
-	]);
+	}, [backupVerified, totalBalance, ignoreTimestamp, anyBottomSheetIsOpen]);
 
 	useEffect(() => {
 		if (!shouldShowBottomSheet) {
@@ -89,10 +82,7 @@ const BackupPrompt = ({ enabled }: { enabled: boolean }): ReactElement => {
 		};
 	}, [shouldShowBottomSheet]);
 
-	const text = useMemo(
-		() => t(totalBalance > 0 ? 'backup_funds' : 'backup_funds_no'),
-		[totalBalance, t],
-	);
+	const text = totalBalance > 0 ? t('backup_funds') : t('backup_funds_no');
 
 	return (
 		<BottomSheetWrapper
@@ -112,6 +102,7 @@ const BackupPrompt = ({ enabled }: { enabled: boolean }): ReactElement => {
 				}
 				description={text}
 				image={imageSrc}
+				showBackButton={false}
 				continueText={t('backup_button')}
 				cancelText={t('later')}
 				testID="BackupPrompt"

src/navigation/bottom-sheet/ConnectionClosed.tsx

@@ -30,7 +30,10 @@ const ConnectionClosed = (): ReactElement => {
 	return (
 		<BottomSheetWrapper view="connectionClosed" snapPoints={snapPoints}>
 			<View style={styles.container}>
-				<BottomSheetNavigationHeader title={t('connection_closed.title')} />
+				<BottomSheetNavigationHeader
+					title={t('connection_closed.title')}
+					showBackButton={false}
+				/>
 				<BodyM color="secondary">{t('connection_closed.description')}</BodyM>
 
 				<View style={styles.imageContainer}>
@@ -54,7 +57,7 @@ const ConnectionClosed = (): ReactElement => {
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
-		marginHorizontal: 32,
+		marginHorizontal: 16,
 	},
 	imageContainer: {
 		flexShrink: 1,