fix(ui): use imperative API for sheets

Author: pwltr

src/components/PinPad.tsx

@@ -6,7 +6,7 @@ import { FadeIn, FadeOut } from 'react-native-reanimated';
 import BitkitLogo from '../assets/bitkit-logo.svg';
 import { PIN_ATTEMPTS } from '../constants/app';
 import usePIN from '../hooks/pin';
-import { showBottomSheet } from '../store/utils/ui';
+import { useSheetRef } from '../navigation/bottom-sheet/SheetRefsProvider';
 import { AnimatedView, View as ThemedView } from '../styles/components';
 import { FaceIdIcon, TouchIdIcon } from '../styles/icons';
 import { BodyS, Subtitle } from '../styles/text';
@@ -31,6 +31,7 @@ const PinPad = ({
 	onShowBiotmetrics?: () => void;
 }): ReactElement => {
 	const { t } = useTranslation('security');
+	const sheetRef = useSheetRef('forgotPIN');
 	const [biometryData, setBiometricData] = useState<IsSensorAvailableResult>();
 	const { attemptsRemaining, Dots, handleNumberPress, isLastAttempt, loading } =
 		usePIN(onSuccess);
@@ -89,7 +90,7 @@ const PinPad = ({
 										) : (
 											<Pressable
 												onPress={(): void => {
-													showBottomSheet('forgotPIN');
+													sheetRef.current?.present();
 												}}>
 												<BodyS testID="AttemptsRemaining" color="brand">
 													{t('pin_attempts', { attemptsRemaining })}

src/screens/Activity/ActivityListShort.tsx

@@ -11,10 +11,10 @@ import { StyleSheet, View } from 'react-native';
 
 import Button from '../../components/buttons/Button';
 import { useAppSelector } from '../../hooks/redux';
+import { useSheetRef } from '../../navigation/bottom-sheet/SheetRefsProvider';
 import type { RootNavigationProp } from '../../navigation/types';
 import { activityItemsSelector } from '../../store/reselect/activity';
 import { IActivityItem } from '../../store/types/activity';
-import { showBottomSheet } from '../../store/utils/ui';
 import { Caption13Up } from '../../styles/text';
 import { groupActivityItems } from '../../utils/activity';
 import ListItem, { EmptyItem } from './ListItem';
@@ -24,6 +24,7 @@ const MAX_ACTIVITY_ITEMS = 3;
 const ActivityListShort = (): ReactElement => {
 	const { t } = useTranslation('wallet');
 	const navigation = useNavigation<RootNavigationProp>();
+	const sheetRef = useSheetRef('receiveNavigation');
 	const items = useAppSelector(activityItemsSelector);
 
 	const groupedItems = useMemo(() => {
@@ -57,8 +58,9 @@ const ActivityListShort = (): ReactElement => {
 		[navigation],
 	);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: sheetRef doesn't change
 	const navigateToReceive = useCallback((): void => {
-		showBottomSheet('receiveNavigation');
+		sheetRef.current?.present();
 	}, []);
 
 	const navigateToActivityFiltered = useCallback((): void => {

src/screens/Profile/ProfileEdit.tsx

@@ -8,7 +8,6 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StyleSheet, View } from 'react-native';
-import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 
 import Dialog from '../../components/Dialog';
 import Divider from '../../components/Divider';
@@ -19,8 +18,10 @@ import ProfileLinks from '../../components/ProfileLinks';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import Button from '../../components/buttons/Button';
 import { Keyboard } from '../../hooks/keyboard';
+import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import { useProfile, useSlashtags } from '../../hooks/slashtags';
 import ProfileLinkNavigation from '../../navigation/bottom-sheet/ProfileLinkNavigation';
+import { useSheetRef } from '../../navigation/bottom-sheet/SheetRefsProvider';
 import type { RootStackScreenProps } from '../../navigation/types';
 import { slashtagsLinksSelector } from '../../store/reselect/slashtags';
 import { onboardingProfileStepSelector } from '../../store/reselect/slashtags';
@@ -29,7 +30,6 @@ import {
 	setOnboardingProfileStep,
 } from '../../store/slices/slashtags';
 import { BasicProfile } from '../../store/types/slashtags';
-import { showBottomSheet } from '../../store/utils/ui';
 import { ScrollView, View as ThemedView } from '../../styles/components';
 import { PlusIcon } from '../../styles/icons';
 import { BodyS } from '../../styles/text';
@@ -48,6 +48,7 @@ const ProfileEdit = ({
 	const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 	const [fields, setFields] = useState<Omit<BasicProfile, 'links'>>({});
 	const dispatch = useAppDispatch();
+	const sheetRef = useSheetRef('profileAddDataForm');
 	const links = useAppSelector(slashtagsLinksSelector);
 	const onboardingStep = useAppSelector(onboardingProfileStepSelector);
 
@@ -94,7 +95,7 @@ const ProfileEdit = ({
 
 	const onAddLink = async (): Promise<void> => {
 		await Keyboard.dismiss();
-		showBottomSheet('profileAddDataForm');
+		sheetRef.current?.present();
 	};
 
 	const onSave = async (): Promise<void> => {

src/screens/Settings/Backup/ResetAndRestore.tsx

@@ -6,15 +6,16 @@ import Dialog from '../../../components/Dialog';
 import NavigationHeader from '../../../components/NavigationHeader';
 import SafeAreaInset from '../../../components/SafeAreaInset';
 import Button from '../../../components/buttons/Button';
+import { useSheetRef } from '../../../navigation/bottom-sheet/SheetRefsProvider';
 import { wipeApp } from '../../../store/utils/settings';
-import { showBottomSheet } from '../../../store/utils/ui';
 import { View } from '../../../styles/components';
 import { BodyM } from '../../../styles/text';
 
 const imageSrc = require('../../../assets/illustrations/restore.png');
 
 const ResetAndRestore = (): ReactElement => {
 	const { t } = useTranslation('security');
+	const sheetRef = useSheetRef('backupNavigation');
 	const [showDialog, setShowDialog] = useState(false);
 
 	return (
@@ -35,7 +36,7 @@ const ResetAndRestore = (): ReactElement => {
 						style={styles.button}
 						text={t('reset_button_backup')}
 						onPress={(): void => {
-							showBottomSheet('backupNavigation');
+							sheetRef.current?.present();
 						}}
 					/>
 					<Button

src/screens/Settings/BackupSettings/index.tsx

@@ -6,13 +6,13 @@ import { EItemType, IListData } from '../../../components/List';
 import Button from '../../../components/buttons/Button';
 import { __E2E__ } from '../../../constants/env';
 import { useAppDispatch, useAppSelector } from '../../../hooks/redux';
+import { useSheetRef } from '../../../navigation/bottom-sheet/SheetRefsProvider';
 import { SettingsScreenProps } from '../../../navigation/types';
 import { backupSelector } from '../../../store/reselect/backup';
 import { lightningBackupSelector } from '../../../store/reselect/lightning';
 import { forceBackup } from '../../../store/slices/backup';
 import { TBackupItem } from '../../../store/types/backup';
 import { EBackupCategory } from '../../../store/types/backup';
-import { showBottomSheet } from '../../../store/utils/ui';
 import { ScrollView, View as ThemedView } from '../../../styles/components';
 import {
 	ArrowClockwise,
@@ -135,6 +135,7 @@ const BackupSettings = ({
 	navigation,
 }: SettingsScreenProps<'BackupSettings'>): ReactElement => {
 	const { t } = useTranslation('settings');
+	const sheetRef = useSheetRef('backupNavigation');
 	const pin = useAppSelector((state) => state.settings.pin);
 	const backup = useAppSelector(backupSelector);
 	const lightningBackup = useAppSelector(lightningBackupSelector);
@@ -220,6 +221,7 @@ const BackupSettings = ({
 		(c) => c.status.synced >= c.status.required,
 	);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: sheetRef doesn't change
 	const settingsListData: IListData[] = useMemo(
 		() => [
 			{
@@ -229,7 +231,7 @@ const BackupSettings = ({
 						type: EItemType.button,
 						testID: 'BackupWallet',
 						onPress: (): void => {
-							showBottomSheet('backupNavigation');
+							sheetRef.current?.present();
 						},
 					},
 					{

src/screens/Settings/DevSettings/LdkDebug.tsx

@@ -11,6 +11,7 @@ import SafeAreaInset from '../../../components/SafeAreaInset';
 import Button from '../../../components/buttons/Button';
 import { useLightningBalance } from '../../../hooks/lightning';
 import { useAppDispatch, useAppSelector } from '../../../hooks/redux';
+import { useSheetRef } from '../../../navigation/bottom-sheet/SheetRefsProvider';
 import { openChannelsSelector } from '../../../store/reselect/lightning';
 import {
 	selectedNetworkSelector,
@@ -21,7 +22,6 @@ import {
 	createLightningInvoice,
 	savePeer,
 } from '../../../store/utils/lightning';
-import { showBottomSheet } from '../../../store/utils/ui';
 import { TextInput, View as ThemedView } from '../../../styles/components';
 import { Caption13Up } from '../../../styles/text';
 import {
@@ -41,6 +41,7 @@ import { showToast } from '../../../utils/notifications';
 const LdkDebug = (): ReactElement => {
 	const { t } = useTranslation('lightning');
 	const dispatch = useAppDispatch();
+	const sheetRef = useSheetRef('forceTransfer');
 	const [peer, setPeer] = useState('');
 	const [payingInvoice, setPayingInvoice] = useState(false);
 	const [refreshingLdk, setRefreshingLdk] = useState(false);
@@ -263,7 +264,7 @@ const LdkDebug = (): ReactElement => {
 	};
 
 	const onForceCloseChannels = (): void => {
-		showBottomSheet('forceTransfer');
+		sheetRef.current?.present();
 	};
 
 	const onSpendOutputsFromForceClose = async (): Promise<void> => {

src/screens/Settings/PIN/ChangePin.tsx

@@ -8,19 +8,22 @@ import NumberPad from '../../../components/NumberPad';
 import SafeAreaInset from '../../../components/SafeAreaInset';
 import { PIN_ATTEMPTS } from '../../../constants/app';
 import usePIN from '../../../hooks/pin';
+import { useSheetRef } from '../../../navigation/bottom-sheet/SheetRefsProvider';
 import type { SettingsScreenProps } from '../../../navigation/types';
-import { showBottomSheet } from '../../../store/utils/ui';
 import { AnimatedView, View as ThemedView } from '../../../styles/components';
 import { BodyM, BodyS } from '../../../styles/text';
 
 const ChangePin = ({
 	navigation,
 }: SettingsScreenProps<'ChangePin'>): ReactElement => {
 	const { t } = useTranslation('security');
+	const sheetRef = useSheetRef('forgotPIN');
+
 	const nextStep = useCallback(() => {
 		navigation.pop();
 		navigation.navigate('ChangePin2');
 	}, [navigation]);
+
 	const { attemptsRemaining, Dots, handleNumberPress, isLastAttempt, loading } =
 		usePIN(nextStep);
 
@@ -47,7 +50,7 @@ const ChangePin = ({
 						) : (
 							<Pressable
 								onPress={(): void => {
-									showBottomSheet('forgotPIN');
+									sheetRef.current?.present();
 								}}>
 								<BodyS testID="AttemptsRemaining" color="brand">
 									{t('pin_attempts', { attemptsRemaining })}

src/screens/Transfer/Funding.tsx

@@ -83,22 +83,6 @@ const Funding = ({
 					onPress={onAdvanced}
 				/>
 			</View>
-
-			{/* <Dialog
-				visible={showDialog}
-				title={t('no_funds.title')}
-				description={t('no_funds.description')}
-				buttonColor="purple"
-				cancelText={t('cancel')}
-				confirmText={t('no_funds.fund')}
-				onCancel={(): void => {
-					setShowDialog(false);
-				}}
-				onConfirm={(): void => {
-					setShowDialog(false);
-					showBottomSheet('receiveNavigation');
-				}}
-			/> */}
 			<SafeAreaInset type="bottom" minPadding={16} />
 		</ThemedView>
 	);

src/screens/Wallets/Send/SendPinPad.tsx

@@ -6,12 +6,13 @@ import { FadeIn, FadeOut } from 'react-native-reanimated';
 import NumberPad from '../../../components/NumberPad';
 import { PIN_ATTEMPTS } from '../../../constants/app';
 import usePIN from '../../../hooks/pin';
-import { showBottomSheet } from '../../../store/utils/ui';
+import { useSheetRef } from '../../../navigation/bottom-sheet/SheetRefsProvider';
 import { AnimatedView } from '../../../styles/components';
 import { BodyS } from '../../../styles/text';
 
 const SendPinPad = ({ onSuccess }: { onSuccess: () => void }): ReactElement => {
 	const { t } = useTranslation('security');
+	const sheetRef = useSheetRef('forgotPIN');
 	const { attemptsRemaining, Dots, handleNumberPress, isLastAttempt, loading } =
 		usePIN(onSuccess);
 
@@ -35,7 +36,7 @@ const SendPinPad = ({ onSuccess }: { onSuccess: () => void }): ReactElement => {
 						) : (
 							<Pressable
 								onPress={(): void => {
-									showBottomSheet('forgotPIN');
+									sheetRef.current?.present();
 								}}>
 								<BodyS testID="AttemptsRemaining" color="brand">
 									{t('pin_attempts', { attemptsRemaining })}