refactor(ui): replace showSheet with sheetRef usage in various components

Author: pwltr

src/components/TabBar.tsx

@@ -19,7 +19,6 @@ import type { RootNavigationProp } from '../navigation/types';
 import { useSheetRef } from '../sheets/SheetRefsProvider';
 import { resetSendTransaction } from '../store/actions/wallet';
 import { spendingOnboardingSelector } from '../store/reselect/aggregations';
-import { showSheet } from '../store/utils/ui';
 import { ScanIcon } from '../styles/icons';
 import ButtonBlur from './buttons/ButtonBlur';
 
@@ -34,13 +33,13 @@ const TabBar = (): ReactElement => {
 
 	const onReceivePress = (): void => {
 		const currentRoute = rootNavigation.getCurrentRoute();
+		const screen =
+			// if we are on the spending screen and the user has not yet received funds
+			currentRoute === 'ActivitySpending' && isSpendingOnboarding
+				? 'ReceiveAmount'
+				: 'ReceiveQR';
 
-		// if we are on the spending screen and the user has not yet received funds
-		if (currentRoute === 'ActivitySpending' && isSpendingOnboarding) {
-			showSheet('receive', { screen: 'ReceiveAmount' });
-		} else {
-			receiveSheetRef.current?.present();
-		}
+		receiveSheetRef.current?.present({ screen });
 	};
 
 	const onSendPress = (): void => {

src/screens/Activity/ActivityDetail.tsx

@@ -66,6 +66,7 @@ import type {
 	RootNavigationProp,
 	RootStackScreenProps,
 } from '../../navigation/types';
+import { useSheetRef } from '../../sheets/SheetRefsProvider';
 import {
 	activityItemSelector,
 	activityItemsSelector,
@@ -85,7 +86,6 @@ import {
 	deleteMetaTxTag,
 } from '../../store/slices/metadata';
 import { ETransferStatus } from '../../store/types/wallet';
-import { showSheet } from '../../store/utils/ui';
 import { getBoostedTransactionParents } from '../../utils/boost';
 import {
 	ellipsis,
@@ -159,6 +159,8 @@ const OnchainActivityDetail = ({
 	const { wallet } = useOnchainWallet();
 	const { t } = useTranslation('wallet');
 	const { t: tTime } = useTranslation('intl', { i18n: i18nTime });
+	const boostSheetRef = useSheetRef('boost');
+	const activityTagsSheetRef = useSheetRef('activityTags');
 	const switchUnit = useSwitchUnit();
 	const dispatch = useAppDispatch();
 	const contacts = useAppSelector(contactsSelector);
@@ -235,11 +237,11 @@ const OnchainActivityDetail = ({
 	};
 
 	const handleBoost = (): void => {
-		showSheet('boost', { activityItem: item });
+		boostSheetRef.current?.present({ activityItem: item });
 	};
 
 	const handleAddTag = (): void => {
-		showSheet('activityTags', { id });
+		activityTagsSheetRef.current?.present({ id });
 	};
 
 	const handleRemoveTag = (tag: string): void => {
@@ -678,8 +680,10 @@ const LightningActivityDetail = ({
 }): ReactElement => {
 	const { t } = useTranslation('wallet');
 	const { t: tTime } = useTranslation('intl', { i18n: i18nTime });
+	const activityTagsSheetRef = useSheetRef('activityTags');
 	const switchUnit = useSwitchUnit();
 	const colors = useColors();
+
 	const {
 		id,
 		txType,
@@ -700,7 +704,7 @@ const LightningActivityDetail = ({
 	});
 
 	const handleAddTag = (): void => {
-		showSheet('activityTags', { id });
+		activityTagsSheetRef.current?.present({ id });
 	};
 
 	const handleRemoveTag = (tag: string): void => {

src/screens/Settings/AddressViewer/index.tsx

@@ -43,7 +43,6 @@ import { updateWallet } from '../../../store/slices/wallet';
 import { TWalletName } from '../../../store/types/wallet';
 import { updateActivityList } from '../../../store/utils/activity';
 import { updateOnchainFeeEstimates } from '../../../store/utils/fees';
-import { showSheet } from '../../../store/utils/ui';
 import {
 	View as ThemedView,
 	TouchableOpacity,
@@ -620,6 +619,7 @@ const AddressViewer = (): ReactElement => {
 	 * The on-chain transaction will retrieve and include the app's receiving address by default.
 	 * Finally, this method will prompt the sendNavigation modal to appear for the user to finalize and confirm the transaction.
 	 */
+	// biome-ignore lint/correctness/useExhaustiveDependencies: sheetRef doesn't change
 	const onSpendFundsPress = useCallback(
 		async (utxosLength, selectedUtxosLength): Promise<void> => {
 			if (utxosLength <= 0) {
@@ -649,7 +649,7 @@ const AddressViewer = (): ReactElement => {
 				}),
 			);
 			sendMax();
-			showSheet('send', { screen: 'ReviewAndSend' });
+			sendSheetRef.current?.present({ screen: 'ReviewAndSend' });
 		},
 		[selectedUtxos, utxos, selectedNetwork, dispatch],
 	);

src/screens/Settings/Security/index.tsx

@@ -2,14 +2,13 @@ import React, { memo, ReactElement, useMemo, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StyleSheet } from 'react-native';
 
-import { View as ThemedView } from '../../../styles/components';
-
 import { IsSensorAvailableResult } from '../../../components/Biometrics';
 import { EItemType, IListData } from '../../../components/List';
 import { useAppDispatch, useAppSelector } from '../../../hooks/redux';
 import type { SettingsScreenProps } from '../../../navigation/types';
+import { useSheetRef } from '../../../sheets/SheetRefsProvider';
 import { updateSettings } from '../../../store/slices/settings';
-import { showSheet } from '../../../store/utils/ui';
+import { View as ThemedView } from '../../../styles/components';
 import rnBiometrics from '../../../utils/biometrics';
 import SettingsView from '../SettingsView';
 
@@ -18,6 +17,7 @@ const SecuritySettings = ({
 }: SettingsScreenProps<'SecuritySettings'>): ReactElement => {
 	const { t } = useTranslation('settings');
 	const dispatch = useAppDispatch();
+	const pinSheetRef = useSheetRef('pinNavigation');
 	const [biometryData, setBiometricData] = useState<IsSensorAvailableResult>();
 	const {
 		enableAutoReadClipboard,
@@ -53,6 +53,7 @@ const SecuritySettings = ({
 			? t('security.footer', { biometryTypeName })
 			: undefined;
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: sheetRef doesn't change
 	const settingsListData: IListData[] = useMemo(
 		() => [
 			{
@@ -119,7 +120,7 @@ const SecuritySettings = ({
 							if (pin) {
 								navigation.navigate('DisablePin');
 							} else {
-								showSheet('pinNavigation', { showLaterButton: false });
+								pinSheetRef.current?.present({ showLaterButton: false });
 							}
 						},
 					},

src/screens/Transfer/Funding.tsx

@@ -1,16 +1,16 @@
 import React, { ReactElement } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { StyleSheet, View } from 'react-native';
-import { useAppSelector } from '../../hooks/redux';
 
 import NavigationHeader from '../../components/NavigationHeader';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import RectangleButton from '../../components/buttons/RectangleButton';
+import { useAppSelector } from '../../hooks/redux';
 import { useBalance } from '../../hooks/wallet';
 import type { TransferScreenProps } from '../../navigation/types';
+import { useSheetRef } from '../../sheets/SheetRefsProvider';
 import { spendingIntroSeenSelector } from '../../store/reselect/settings';
 import { isGeoBlockedSelector } from '../../store/reselect/user';
-import { showSheet } from '../../store/utils/ui';
 import { View as ThemedView } from '../../styles/components';
 import { QrIcon, ShareAndroidIcon, TransferIcon } from '../../styles/icons';
 import { BodyM, Display } from '../../styles/text';
@@ -21,6 +21,7 @@ const Funding = ({
 }: TransferScreenProps<'Funding'>): ReactElement => {
 	const { t } = useTranslation('lightning');
 	const { onchainBalance } = useBalance();
+	const receiveSheetRef = useSheetRef('receive');
 	const isGeoBlocked = useAppSelector(isGeoBlockedSelector);
 	const spendingIntroSeen = useAppSelector(spendingIntroSeenSelector);
 
@@ -34,7 +35,7 @@ const Funding = ({
 
 	const onFund = (): void => {
 		navigation.popTo('Wallet', { screen: 'Home' });
-		showSheet('receive', { screen: 'ReceiveAmount' });
+		receiveSheetRef.current?.present({ screen: 'ReceiveAmount' });
 	};
 
 	const onAdvanced = (): void => {