fix(ui): use imperative API for sheets

Author: pwltr

src/navigation/bottom-sheet/ConnectionClosed.tsx

@@ -7,17 +7,18 @@ import BottomSheetWrapper from '../../components/BottomSheetWrapper';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import Button from '../../components/buttons/Button';
 import { useSnapPoints } from '../../hooks/bottomSheet';
-import { closeSheet } from '../../store/utils/ui';
 import { BodyM } from '../../styles/text';
+import { useSheetRef } from './SheetRefsProvider';
 
 const imageSrc = require('../../assets/illustrations/switch.png');
 
 const ConnectionClosed = (): ReactElement => {
 	const { t } = useTranslation('lightning');
 	const snapPoints = useSnapPoints('medium');
+	const sheetRef = useSheetRef('connectionClosed');
 
 	const onContinue = (): void => {
-		closeSheet('connectionClosed');
+		sheetRef.current?.close();
 	};
 
 	return (

src/navigation/bottom-sheet/ForceTransfer.tsx

@@ -7,10 +7,10 @@ import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import { startCoopCloseTimestampSelector } from '../../store/reselect/user';
 import { clearCoopCloseTimer } from '../../store/slices/user';
-import { closeSheet, showBottomSheet } from '../../store/utils/ui';
 import { Display } from '../../styles/text';
 import { closeAllChannels } from '../../utils/lightning';
 import { showToast } from '../../utils/notifications';
+import { useSheetRef } from './SheetRefsProvider';
 
 const imageSrc = require('../../assets/illustrations/exclamation-mark.png');
 
@@ -21,10 +21,12 @@ const ForceTransfer = (): ReactElement => {
 	const { t } = useTranslation('lightning');
 	const snapPoints = useSnapPoints('large');
 	const dispatch = useAppDispatch();
+	const sheetRef = useSheetRef('forceTransfer');
 	const startTime = useAppSelector(startCoopCloseTimestampSelector);
 	const [isPending, setIsPending] = useState(false);
 
 	// try to cooperatively close the channel(s) for 30min
+	// biome-ignore lint/correctness/useExhaustiveDependencies: sheetRef doesn't change
 	useEffect(() => {
 		// biome-ignore lint/style/useConst: false alarm
 		let interval: NodeJS.Timer;
@@ -57,7 +59,7 @@ const ForceTransfer = (): ReactElement => {
 				console.log('giving up on coop close.');
 				dispatch(clearCoopCloseTimer());
 				clearInterval(interval);
-				showBottomSheet('forceTransfer');
+				sheetRef.current?.present();
 				return;
 			}
 
@@ -70,7 +72,7 @@ const ForceTransfer = (): ReactElement => {
 	}, [startTime, dispatch]);
 
 	const onCancel = (): void => {
-		closeSheet('forceTransfer');
+		sheetRef.current?.close();
 	};
 
 	const onContinue = async (): Promise<void> => {
@@ -96,7 +98,7 @@ const ForceTransfer = (): ReactElement => {
 					title: t('force_init_title'),
 					description: t('force_init_msg'),
 				});
-				closeSheet('forceTransfer');
+				sheetRef.current?.close();
 			} else {
 				showToast({
 					type: 'warning',

src/navigation/bottom-sheet/PubkyAuth.tsx

@@ -18,11 +18,11 @@ import Button from '../../components/buttons/Button';
 import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppSelector } from '../../hooks/redux';
 import { viewControllerSelector } from '../../store/reselect/ui';
-import { closeSheet } from '../../store/utils/ui';
 import { CheckCircleIcon } from '../../styles/icons';
 import { BodyM, CaptionB, Text13UP, Title } from '../../styles/text';
 import { showToast } from '../../utils/notifications';
 import { getPubkySecretKey } from '../../utils/pubky';
+import { useSheetRef } from './SheetRefsProvider';
 
 const defaultParsedUrl: PubkyAuthDetails = {
 	relay: '',
@@ -81,6 +81,7 @@ const Permission = memo(
 const PubkyAuth = (): ReactElement => {
 	const { t } = useTranslation('security');
 	const snapPoints = useSnapPoints('medium');
+	const sheetRef = useSheetRef('pubkyAuth');
 	const { url = '' } = useAppSelector((state) => {
 		return viewControllerSelector(state, 'pubkyAuth');
 	});
@@ -144,14 +145,15 @@ const PubkyAuth = (): ReactElement => {
 		[t, url],
 	);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: sheetRef doesn't change
 	const Buttons = useCallback(() => {
 		if (authSuccess) {
 			return (
 				<Button
 					style={styles.authorizeButton}
 					text={t('authorization.success')}
 					size="large"
-					onPress={() => closeSheet('pubkyAuth')}
+					onPress={() => sheetRef.current?.close()}
 				/>
 			);
 		}
@@ -161,7 +163,7 @@ const PubkyAuth = (): ReactElement => {
 					style={styles.closeButton}
 					text={t('authorization.deny')}
 					size="large"
-					onPress={() => closeSheet('pubkyAuth')}
+					onPress={() => sheetRef.current?.close()}
 				/>
 				<Button
 					loading={authorizing}

src/screens/Activity/ActivityFiltered.tsx

@@ -13,7 +13,7 @@ import SafeAreaInset from '../../components/SafeAreaInset';
 import SearchInput from '../../components/SearchInput';
 import Tabs, { TTab } from '../../components/Tabs';
 import Tag from '../../components/Tag';
-import { closeSheet, showBottomSheet } from '../../store/utils/ui';
+import { useSheetRef } from '../../navigation/bottom-sheet/SheetRefsProvider';
 import { ScrollView, View as ThemedView } from '../../styles/components';
 import { CalendarIcon, TagIcon } from '../../styles/icons';
 import ActivityList from './ActivityList';
@@ -47,6 +47,8 @@ const Glow = ({
 const ActivityFiltered = (): ReactElement => {
 	const { t } = useTranslation('wallet');
 	const size = useSharedValue({ width: 0, height: 0 });
+	const tagsSheetRef = useSheetRef('tagsPrompt');
+	const timeRangeSheetRef = useSheetRef('timeRangePrompt');
 	const panGestureRef = useRef<GestureType>(Gesture.Pan());
 	const [radiusContainerHeight, setRadiusContainerHeight] = useState(0);
 	const [currentTab, setCurrentTab] = useState(0);
@@ -64,7 +66,7 @@ const ActivityFiltered = (): ReactElement => {
 
 	const addTag = (tag: string): void => {
 		setTags((tg) => [...tg, tag]);
-		closeSheet('tagsPrompt');
+		tagsSheetRef.current?.close();
 	};
 
 	const removeTag = (tag: string): void => {
@@ -126,7 +128,7 @@ const ActivityFiltered = (): ReactElement => {
 										testID="TagsPrompt"
 										onPress={(): void => {
 											Keyboard.dismiss();
-											showBottomSheet('tagsPrompt');
+											tagsSheetRef.current?.present();
 										}}>
 										<TagIcon
 											height={25}
@@ -140,7 +142,7 @@ const ActivityFiltered = (): ReactElement => {
 										testID="TimeRangePrompt"
 										onPress={(): void => {
 											Keyboard.dismiss();
-											showBottomSheet('timeRangePrompt');
+											timeRangeSheetRef.current?.present();
 										}}>
 										<CalendarIcon
 											height={25}

src/screens/Activity/TagsPrompt.tsx

@@ -7,8 +7,8 @@ import SafeAreaInset from '../../components/SafeAreaInset';
 import Tag from '../../components/Tag';
 import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppSelector } from '../../hooks/redux';
+import { useSheetRef } from '../../navigation/bottom-sheet/SheetRefsProvider';
 import { lastUsedTagsSelector } from '../../store/reselect/metadata';
-import { closeSheet } from '../../store/utils/ui';
 import { BodyS, Subtitle, Text13UP } from '../../styles/text';
 
 const TagsPrompt = ({
@@ -19,12 +19,13 @@ const TagsPrompt = ({
 	onAddTag: (tag: string) => void;
 }): ReactElement => {
 	const { t } = useTranslation('wallet');
-	const snapPoints = useSnapPoints('medium');
+	const snapPoints = useSnapPoints('small');
+	const sheetRef = useSheetRef('tagsPrompt');
 	const lastUsed = useAppSelector(lastUsedTagsSelector);
 	const suggestions = lastUsed.filter((tg) => !tags.includes(tg));
 
 	const handleClose = (): void => {
-		closeSheet('tagsPrompt');
+		sheetRef.current?.close();
 	};
 
 	return (

src/screens/Activity/TimeRangePrompt.tsx

@@ -7,15 +7,16 @@ import SafeAreaInset from '../../components/SafeAreaInset';
 import Button from '../../components/buttons/Button';
 import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppSelector } from '../../hooks/redux';
+import { useSheetRef } from '../../navigation/bottom-sheet/SheetRefsProvider';
 import { languageSelector, timeZoneSelector } from '../../store/reselect/ui';
-import { closeSheet } from '../../store/utils/ui';
 import { View as ThemedView } from '../../styles/components';
 import { LeftSign, RightSign } from '../../styles/icons';
 import { BodyMSB, Caption13Up, Subtitle } from '../../styles/text';
 import { generateCalendar } from '../../utils/helpers';
 import { i18nTime } from '../../utils/i18n';
 
 const DAY_HEIGHT = 44;
+const sheetId = 'timeRangePrompt';
 
 const Day = ({
 	day,
@@ -96,6 +97,7 @@ const Calendar = ({
 }): ReactElement => {
 	const { t } = useTranslation('wallet');
 	const { t: tTime } = useTranslation('intl', { i18n: i18nTime });
+	const sheetRef = useSheetRef(sheetId);
 	const timeZone = useAppSelector(timeZoneSelector);
 	const language = useAppSelector(languageSelector);
 	const [monthDate, setMonthDate] = useState(() => {
@@ -158,7 +160,7 @@ const Calendar = ({
 		const begin = range[0].getTime();
 		const end = (range[1] ?? range[0]).getTime() + 1000 * 60 * 60 * 24; // 24 hours
 		onChange([begin, end]);
-		closeSheet('timeRangePrompt');
+		sheetRef.current?.close();
 	};
 
 	return (
@@ -306,15 +308,8 @@ const TimeRangePrompt = ({
 	const { t } = useTranslation('wallet');
 	const snapPoints = useSnapPoints('calendar');
 
-	const handleClose = (): void => {
-		closeSheet('timeRangePrompt');
-	};
-
 	return (
-		<BottomSheetWrapper
-			view="timeRangePrompt"
-			snapPoints={snapPoints}
-			onClose={handleClose}>
+		<BottomSheetWrapper view={sheetId} snapPoints={snapPoints}>
 			<View style={styles.root}>
 				<Subtitle style={styles.title}>{t('filter_title')}</Subtitle>
 

src/screens/OrangeTicket/Error.tsx

@@ -5,8 +5,8 @@ import BottomSheetNavigationHeader from '../../components/BottomSheetNavigationH
 import GradientView from '../../components/GradientView';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import Button from '../../components/buttons/Button';
+import { useSheetRef } from '../../navigation/bottom-sheet/SheetRefsProvider';
 import type { OrangeTicketScreenProps } from '../../navigation/types';
-import { closeSheet } from '../../store/utils/ui';
 import { BodyM } from '../../styles/text';
 
 const imageSrc = require('../../assets/illustrations/exclamation-mark.png');
@@ -36,9 +36,10 @@ const ErrorScreen = ({
 }: OrangeTicketScreenProps<'Error'>): ReactElement => {
 	const { errorCode } = route.params;
 	const { title, text } = getText(errorCode);
+	const sheetRef = useSheetRef('orangeTicket');
 
 	const onContinue = (): void => {
-		closeSheet('orangeTicket');
+		sheetRef.current?.close();
 	};
 
 	return (

src/screens/OrangeTicket/UsedCard.tsx

@@ -6,8 +6,8 @@ import BottomSheetNavigationHeader from '../../components/BottomSheetNavigationH
 import GradientView from '../../components/GradientView';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import Button from '../../components/buttons/Button';
+import { useSheetRef } from '../../navigation/bottom-sheet/SheetRefsProvider';
 import type { OrangeTicketScreenProps } from '../../navigation/types';
-import { closeSheet } from '../../store/utils/ui';
 import { BodyM } from '../../styles/text';
 
 const imageSrc = require('../../assets/illustrations/exclamation-mark.png');
@@ -16,9 +16,10 @@ const UsedCard = ({
 	route,
 }: OrangeTicketScreenProps<'UsedCard'>): ReactElement => {
 	const { amount } = route.params;
+	const sheetRef = useSheetRef('orangeTicket');
 
 	const onContinue = (): void => {
-		closeSheet('orangeTicket');
+		sheetRef.current?.close();
 	};
 
 	return (

src/screens/Settings/Backup/Metadata.tsx

@@ -7,9 +7,9 @@ import GradientView from '../../../components/GradientView';
 import SafeAreaInset from '../../../components/SafeAreaInset';
 import Button from '../../../components/buttons/Button';
 import { useAppSelector } from '../../../hooks/redux';
+import { useSheetRef } from '../../../navigation/bottom-sheet/SheetRefsProvider';
 import { backupSelector } from '../../../store/reselect/backup';
 import { EBackupCategory } from '../../../store/types/backup';
-import { closeSheet } from '../../../store/utils/ui';
 import { BodyM, BodyS, BodySB } from '../../../styles/text';
 import { i18nTime } from '../../../utils/i18n';
 
@@ -18,6 +18,7 @@ const imageSrc = require('../../../assets/illustrations/card.png');
 const Metadata = (): ReactElement => {
 	const { t } = useTranslation('security');
 	const { t: tTime } = useTranslation('intl', { i18n: i18nTime });
+	const sheetRef = useSheetRef('backupNavigation');
 	const backup = useAppSelector(backupSelector);
 
 	const max = Math.max(
@@ -26,8 +27,8 @@ const Metadata = (): ReactElement => {
 		}),
 	);
 
-	const handleButtonPress = (): void => {
-		closeSheet('backupNavigation');
+	const onContinue = (): void => {
+		sheetRef.current?.close();
 	};
 
 	return (
@@ -66,12 +67,7 @@ const Metadata = (): ReactElement => {
 						/>
 					</BodyS>
 				)}
-				<Button
-					size="large"
-					text={t('ok')}
-					onPress={handleButtonPress}
-					testID="OK"
-				/>
+				<Button size="large" text={t('ok')} testID="OK" onPress={onContinue} />
 			</View>
 			<SafeAreaInset type="bottom" minPadding={16} />
 		</GradientView>

src/screens/Settings/PIN/ForgotPIN.tsx

@@ -7,30 +7,34 @@ import BottomSheetWrapper from '../../../components/BottomSheetWrapper';
 import SafeAreaInset from '../../../components/SafeAreaInset';
 import Button from '../../../components/buttons/Button';
 import { useSnapPoints } from '../../../hooks/bottomSheet';
+import { useSheetRef } from '../../../navigation/bottom-sheet/SheetRefsProvider';
 import { wipeApp } from '../../../store/utils/settings';
-import { closeSheet } from '../../../store/utils/ui';
 import { BodyM } from '../../../styles/text';
 
 const imageSrc = require('../../../assets/illustrations/restore.png');
 
+const sheetId = 'forgotPIN';
+
 const ForgotPIN = (): ReactElement => {
 	const { t } = useTranslation('security');
 	const snapPoints = useSnapPoints('large');
+	const sheetRef = useSheetRef(sheetId);
+
 	// const { isMounted } = useAppSelector((state) => {
 	// 	return viewControllerSelector(state, 'forgotPIN');
 	// });
 
 	const handlePress = (): void => {
 		wipeApp();
-		closeSheet('forgotPIN');
+		sheetRef.current?.close();
 	};
 
 	// if (!isMounted) {
 	// 	return <></>;
 	// }
 
 	return (
-		<BottomSheetWrapper view="forgotPIN" snapPoints={snapPoints}>
+		<BottomSheetWrapper view={sheetId} snapPoints={snapPoints}>
 			<View style={styles.container}>
 				<BottomSheetNavigationHeader
 					title={t('pin_forgot_title')}