refactor(ui): centralize useSnapPoints usage

pwltr · pwltr · commit 75c5045685b6 · 2025-03-12T16:55:16.000+01:00
diff --git a/src/components/BottomSheet.tsx b/src/components/BottomSheet.tsx
@@ -10,6 +10,7 @@ import { StyleSheet } from 'react-native';
 import { useReducedMotion } from 'react-native-reanimated';
 
 import { __E2E__ } from '../constants/env';
+import { useSnapPoints } from '../hooks/bottomSheet';
 import useColors from '../hooks/colors';
 import { useAppDispatch, useAppSelector } from '../hooks/redux';
 import { useSheetRef } from '../navigation/bottom-sheet/SheetRefsProvider';
@@ -20,7 +21,7 @@ import BottomSheetBackground from './BottomSheetBackground';
 
 type SheetProps = {
 	id: SheetId;
-	snapPoints: number[];
+	size?: 'small' | 'medium' | 'large' | 'calendar';
 	children: ReactNode;
 	testID?: string;
 	onOpen?: () => void;
@@ -29,7 +30,7 @@ type SheetProps = {
 
 const Sheet = ({
 	id,
-	snapPoints,
+	size = 'large',
 	children,
 	testID,
 	onOpen,
@@ -38,6 +39,7 @@ const Sheet = ({
 	const colors = useColors();
 	const sheetRef = useSheetRef(id);
 	const isReducedMotion = useReducedMotion();
+	const snapPoints = useSnapPoints(size);
 	const dispatch = useAppDispatch();
 	const data = useAppSelector((state) => sheetSelector(state, id));
 
diff --git a/src/navigation/bottom-sheet/AppUpdatePrompt.tsx b/src/navigation/bottom-sheet/AppUpdatePrompt.tsx
@@ -4,7 +4,6 @@ import { Trans, useTranslation } from 'react-i18next';
 import BottomSheet from '../../components/BottomSheet';
 import BottomSheetScreen from '../../components/BottomSheetScreen';
 import { __E2E__ } from '../../constants/env';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import { availableUpdateSelector } from '../../store/reselect/ui';
 import { ignoreAppUpdateTimestampSelector } from '../../store/reselect/user';
@@ -22,7 +21,6 @@ const sheetId = 'appUpdate';
 
 const AppUpdatePrompt = (): ReactElement => {
 	const { t } = useTranslation('other');
-	const snapPoints = useSnapPoints('large');
 	const dispatch = useAppDispatch();
 	const sheetRefs = useAllSheetRefs();
 	const sheetRef = useSheetRef(sheetId);
@@ -73,7 +71,7 @@ const AppUpdatePrompt = (): ReactElement => {
 	};
 
 	return (
-		<BottomSheet id={sheetId} snapPoints={snapPoints} onClose={onClose}>
+		<BottomSheet id={sheetId} size="large" onClose={onClose}>
 			<BottomSheetScreen
 				navTitle={t('update_nav_title')}
 				title={
diff --git a/src/navigation/bottom-sheet/BackupNavigation.tsx b/src/navigation/bottom-sheet/BackupNavigation.tsx
@@ -8,7 +8,6 @@ import React, { ReactElement, memo } from 'react';
 
 import BottomSheet from '../../components/BottomSheet';
 import { __E2E__ } from '../../constants/env';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import ConfirmMnemonic from '../../screens/Settings/Backup/ConfirmMnemonic';
 import ConfirmPassphrase from '../../screens/Settings/Backup/ConfirmPassphrase';
 import Metadata from '../../screens/Settings/Backup/Metadata';
@@ -41,10 +40,8 @@ const navOptions: NativeStackNavigationOptions = {
 };
 
 const BackupNavigation = (): ReactElement => {
-	const snapPoints = useSnapPoints('medium');
-
 	return (
-		<BottomSheet id="backupNavigation" snapPoints={snapPoints}>
+		<BottomSheet id="backupNavigation" size="medium">
 			<NavigationIndependentTree>
 				<BottomSheetNavigationContainer>
 					<Stack.Navigator screenOptions={navOptions}>
diff --git a/src/navigation/bottom-sheet/BackupPrompt.tsx b/src/navigation/bottom-sheet/BackupPrompt.tsx
@@ -4,7 +4,6 @@ import { Trans, useTranslation } from 'react-i18next';
 import BottomSheet from '../../components/BottomSheet';
 import BottomSheetScreen from '../../components/BottomSheetScreen';
 import { __E2E__ } from '../../constants/env';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import { useBalance } from '../../hooks/wallet';
 import { backupVerifiedSelector } from '../../store/reselect/user';
@@ -26,7 +25,6 @@ const BackupPrompt = (): ReactElement => {
 	const sheetRefs = useAllSheetRefs();
 	const sheetRef = useSheetRef(sheetId);
 	const backupNavigationSheetRef = useSheetRef('backupNavigation');
-	const snapPoints = useSnapPoints('medium');
 	const ignoreTimestamp = useAppSelector(ignoreBackupTimestampSelector);
 	const backupVerified = useAppSelector(backupVerifiedSelector);
 	const { totalBalance } = useBalance();
@@ -76,7 +74,7 @@ const BackupPrompt = (): ReactElement => {
 	return (
 		<BottomSheet
 			id={sheetId}
-			snapPoints={snapPoints}
+			size="medium"
 			onClose={(): void => {
 				dispatch(ignoreBackup());
 			}}>
diff --git a/src/navigation/bottom-sheet/ConnectionClosed.tsx b/src/navigation/bottom-sheet/ConnectionClosed.tsx
@@ -6,23 +6,21 @@ import BottomSheet from '../../components/BottomSheet';
 import BottomSheetNavigationHeader from '../../components/BottomSheetNavigationHeader';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import Button from '../../components/buttons/Button';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 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 => {
 		sheetRef.current?.close();
 	};
 
 	return (
-		<BottomSheet id="connectionClosed" snapPoints={snapPoints}>
+		<BottomSheet id="connectionClosed" size="medium">
 			<View style={styles.container}>
 				<BottomSheetNavigationHeader
 					title={t('connection_closed.title')}
diff --git a/src/navigation/bottom-sheet/ForceTransfer.tsx b/src/navigation/bottom-sheet/ForceTransfer.tsx
@@ -3,7 +3,6 @@ import { Trans, useTranslation } from 'react-i18next';
 
 import BottomSheet from '../../components/BottomSheet';
 import BottomSheetScreen from '../../components/BottomSheetScreen';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import { startCoopCloseTimestampSelector } from '../../store/reselect/user';
 import { clearCoopCloseTimer } from '../../store/slices/user';
@@ -19,7 +18,6 @@ const GIVE_UP = 1000 * 60 * 30;
 
 const ForceTransfer = (): ReactElement => {
 	const { t } = useTranslation('lightning');
-	const snapPoints = useSnapPoints('large');
 	const dispatch = useAppDispatch();
 	const sheetRef = useSheetRef('forceTransfer');
 	const startTime = useAppSelector(startCoopCloseTimestampSelector);
@@ -110,7 +108,7 @@ const ForceTransfer = (): ReactElement => {
 	};
 
 	return (
-		<BottomSheet id="forceTransfer" snapPoints={snapPoints}>
+		<BottomSheet id="forceTransfer" size="large">
 			<BottomSheetScreen
 				navTitle={t('force_nav_title')}
 				title={
diff --git a/src/navigation/bottom-sheet/HighBalanceWarning.tsx b/src/navigation/bottom-sheet/HighBalanceWarning.tsx
@@ -4,7 +4,6 @@ import { Trans, useTranslation } from 'react-i18next';
 import BottomSheet from '../../components/BottomSheet';
 import BottomSheetScreen from '../../components/BottomSheetScreen';
 import { __E2E__ } from '../../constants/env';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import { useBalance } from '../../hooks/wallet';
 import {
@@ -30,7 +29,6 @@ const sheetId = 'highBalance';
 const HighBalanceWarning = (): ReactElement => {
 	const { t } = useTranslation('other');
 	const { totalBalance } = useBalance();
-	const snapPoints = useSnapPoints('large');
 	const dispatch = useAppDispatch();
 	const sheetRefs = useAllSheetRefs();
 	const sheetRef = useSheetRef(sheetId);
@@ -91,7 +89,7 @@ const HighBalanceWarning = (): ReactElement => {
 	return (
 		<BottomSheet
 			id={sheetId}
-			snapPoints={snapPoints}
+			size="large"
 			onClose={(): void => {
 				dispatch(ignoreHighBalance(false));
 			}}>
diff --git a/src/navigation/bottom-sheet/LNURLWithdrawNavigation.tsx b/src/navigation/bottom-sheet/LNURLWithdrawNavigation.tsx
@@ -9,7 +9,6 @@ import React, { ReactElement, memo } from 'react';
 
 import BottomSheet from '../../components/BottomSheet';
 import { __E2E__ } from '../../constants/env';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppSelector } from '../../hooks/redux';
 import Amount from '../../screens/Wallets/LNURLWithdraw/Amount';
 import Confirm from '../../screens/Wallets/LNURLWithdraw/Confirm';
@@ -32,7 +31,6 @@ const screenOptions: NativeStackNavigationOptions = {
 };
 
 const LNURLWithdrawNavigation = (): ReactElement => {
-	const snapPoints = useSnapPoints('large');
 	const { isOpen, wParams } = useAppSelector((state) => {
 		return sheetSelector(state, 'lnurlWithdraw');
 	});
@@ -46,7 +44,7 @@ const LNURLWithdrawNavigation = (): ReactElement => {
 		wParams.minWithdrawable === wParams.maxWithdrawable ? 'Confirm' : 'Amount';
 
 	return (
-		<BottomSheet id="lnurlWithdraw" snapPoints={snapPoints}>
+		<BottomSheet id="lnurlWithdraw" size="large">
 			<NavigationIndependentTree>
 				<BottomSheetNavigationContainer key={isOpen.toString()}>
 					<Stack.Navigator
diff --git a/src/navigation/bottom-sheet/OrangeTicketNavigation.tsx b/src/navigation/bottom-sheet/OrangeTicketNavigation.tsx
@@ -15,7 +15,6 @@ import React, {
 
 import BottomSheet from '../../components/BottomSheet';
 import { __TREASURE_HUNT_HOST__ } from '../../constants/env';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppSelector } from '../../hooks/redux';
 import ErrorScreen from '../../screens/OrangeTicket/Error';
 import Prize from '../../screens/OrangeTicket/Prize';
@@ -42,7 +41,6 @@ const screenOptions: NativeStackNavigationOptions = {
 };
 
 const OrangeTicket = (): ReactElement => {
-	const snapPoints = useSnapPoints('large');
 	const [isLoading, setIsLoading] = useState(true);
 	const [amount, setAmount] = useState<number>();
 	const [errorCode, setErrorCode] = useState<number>();
@@ -150,7 +148,7 @@ const OrangeTicket = (): ReactElement => {
 	}
 
 	return (
-		<BottomSheet id="orangeTicket" snapPoints={snapPoints}>
+		<BottomSheet id="orangeTicket" size="large">
 			<NavigationIndependentTree>
 				<BottomSheetNavigationContainer key={isOpen.toString()}>
 					<Stack.Navigator
diff --git a/src/navigation/bottom-sheet/PINNavigation.tsx b/src/navigation/bottom-sheet/PINNavigation.tsx
@@ -9,7 +9,6 @@ import { BiometryType } from 'react-native-biometrics';
 
 import BottomSheet from '../../components/BottomSheet';
 import { __E2E__ } from '../../constants/env';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import AskForBiometrics from '../../screens/Settings/PIN/AskForBiometrics';
 import ChoosePIN from '../../screens/Settings/PIN/ChoosePIN';
 import PINPrompt from '../../screens/Settings/PIN/PINPrompt';
@@ -33,10 +32,8 @@ const screenOptions: NativeStackNavigationOptions = {
 };
 
 const PINNavigation = (): ReactElement => {
-	const snapPoints = useSnapPoints('medium');
-
 	return (
-		<BottomSheet id="pinNavigation" snapPoints={snapPoints}>
+		<BottomSheet id="pinNavigation" size="medium">
 			<NavigationIndependentTree>
 				<BottomSheetNavigationContainer>
 					<Stack.Navigator screenOptions={screenOptions}>
diff --git a/src/navigation/bottom-sheet/ProfileLinkNavigation.tsx b/src/navigation/bottom-sheet/ProfileLinkNavigation.tsx
@@ -8,7 +8,6 @@ import React, { ReactElement, memo } from 'react';
 
 import BottomSheet from '../../components/BottomSheet';
 import { __E2E__ } from '../../constants/env';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import ProfileLink from '../../screens/Profile/ProfileLink';
 import ProfileLinkSuggestions from '../../screens/Profile/ProfileLinkSuggestions';
 import BottomSheetNavigationContainer from './BottomSheetNavigationContainer';
@@ -29,10 +28,8 @@ const screenOptions: NativeStackNavigationOptions = {
 };
 
 const ProfileLinkNavigation = (): ReactElement => {
-	const snapPoints = useSnapPoints('small');
-
 	return (
-		<BottomSheet id="profileLink" snapPoints={snapPoints}>
+		<BottomSheet id="profileLink" size="small">
 			<NavigationIndependentTree>
 				<BottomSheetNavigationContainer>
 					<Stack.Navigator screenOptions={screenOptions}>
diff --git a/src/navigation/bottom-sheet/PubkyAuth.tsx b/src/navigation/bottom-sheet/PubkyAuth.tsx
@@ -15,7 +15,6 @@ import BottomSheet from '../../components/BottomSheet';
 import BottomSheetNavigationHeader from '../../components/BottomSheetNavigationHeader';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import Button from '../../components/buttons/Button';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppSelector } from '../../hooks/redux';
 import { sheetSelector } from '../../store/reselect/ui';
 import { CheckCircleIcon } from '../../styles/icons';
@@ -80,7 +79,6 @@ const Permission = memo(
 
 const PubkyAuth = (): ReactElement => {
 	const { t } = useTranslation('security');
-	const snapPoints = useSnapPoints('medium');
 	const sheetRef = useSheetRef('pubkyAuth');
 	const { url = '' } = useAppSelector((state) => {
 		return sheetSelector(state, 'pubkyAuth');
@@ -192,7 +190,7 @@ const PubkyAuth = (): ReactElement => {
 	}, [authSuccess]);
 
 	return (
-		<BottomSheet id="pubkyAuth" snapPoints={snapPoints}>
+		<BottomSheet id="pubkyAuth" size="medium">
 			<View style={styles.container}>
 				<BottomSheetNavigationHeader title={t('authorization.title')} />
 				<Text13UP color="secondary">{t('authorization.claims')}</Text13UP>
diff --git a/src/navigation/bottom-sheet/QuickPayPrompt.tsx b/src/navigation/bottom-sheet/QuickPayPrompt.tsx
@@ -5,7 +5,6 @@ import { Trans, useTranslation } from 'react-i18next';
 import BottomSheet from '../../components/BottomSheet';
 import BottomSheetScreen from '../../components/BottomSheetScreen';
 import { __E2E__ } from '../../constants/env';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import { useBalance } from '../../hooks/wallet';
 import { quickpayIntroSeenSelector } from '../../store/reselect/settings';
@@ -24,7 +23,6 @@ const QuickPayPrompt = (): ReactElement => {
 	const { t } = useTranslation('settings');
 	const navigation = useNavigation<RootNavigationProp>();
 	const { spendingBalance } = useBalance();
-	const snapPoints = useSnapPoints('large');
 	const dispatch = useAppDispatch();
 	const sheetRefs = useAllSheetRefs();
 	const sheetRef = useSheetRef(sheetId);
@@ -68,7 +66,7 @@ const QuickPayPrompt = (): ReactElement => {
 	return (
 		<BottomSheet
 			id={sheetId}
-			snapPoints={snapPoints}
+			size="large"
 			onClose={(): void => {
 				dispatch(updateSettings({ quickpayIntroSeen: true }));
 			}}>
diff --git a/src/navigation/bottom-sheet/ReceiveNavigation.tsx b/src/navigation/bottom-sheet/ReceiveNavigation.tsx
@@ -8,7 +8,6 @@ import React, { ReactElement, memo } from 'react';
 
 import BottomSheet from '../../components/BottomSheet';
 import { __E2E__ } from '../../constants/env';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import Liquidity from '../../screens/Wallets/Receive/Liquidity';
 import ReceiveAmount from '../../screens/Wallets/Receive/ReceiveAmount';
@@ -49,7 +48,6 @@ const screenOptions: NativeStackNavigationOptions = {
 };
 
 const ReceiveNavigation = (): ReactElement => {
-	const snapPoints = useSnapPoints('large');
 	const dispatch = useAppDispatch();
 	const { receiveScreen } = useAppSelector((state) => {
 		return sheetSelector(state, 'receiveNavigation');
@@ -64,7 +62,7 @@ const ReceiveNavigation = (): ReactElement => {
 	return (
 		<BottomSheet
 			id="receiveNavigation"
-			snapPoints={snapPoints}
+			size="large"
 			testID="ReceiveScreen"
 			// NOTE: this resets it twice?
 			onOpen={reset}
diff --git a/src/navigation/bottom-sheet/SendNavigation.tsx b/src/navigation/bottom-sheet/SendNavigation.tsx
@@ -12,7 +12,6 @@ import React, { ReactElement, memo } from 'react';
 
 import BottomSheet from '../../components/BottomSheet';
 import { __E2E__ } from '../../constants/env';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useLightningBalance } from '../../hooks/lightning';
 import { useAppSelector } from '../../hooks/redux';
 import LNURLAmount from '../../screens/Wallets/LNURLPay/Amount';
@@ -109,7 +108,6 @@ export const sendNavigation = {
 };
 
 const SendNavigation = (): ReactElement => {
-	const snapPoints = useSnapPoints('large');
 	const lightningBalance = useLightningBalance(false);
 	const selectedWallet = useAppSelector(selectedWalletSelector);
 	const selectedNetwork = useAppSelector(selectedNetworkSelector);
@@ -139,7 +137,7 @@ const SendNavigation = (): ReactElement => {
 	return (
 		<BottomSheet
 			id="sendNavigation"
-			snapPoints={snapPoints}
+			size="large"
 			testID="SendSheet"
 			onOpen={onOpen}>
 			<NavigationIndependentTree>
diff --git a/src/navigation/bottom-sheet/TransferFailed.tsx b/src/navigation/bottom-sheet/TransferFailed.tsx
@@ -1,23 +1,23 @@
+// NOTE: currently not used
+
 import React, { memo, ReactElement } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import BottomSheet from '../../components/BottomSheet';
 import BottomSheetScreen from '../../components/BottomSheetScreen';
-import { useSnapPoints } from '../../hooks/bottomSheet';
 import { Display } from '../../styles/text';
 
 const imageSrc = require('../../assets/illustrations/cross.png');
 
 const TransferFailed = (): ReactElement => {
 	const { t } = useTranslation('lightning');
-	const snapPoints = useSnapPoints('large');
 
 	const onCancel = (): void => {};
 
 	const onContinue = async (): Promise<void> => {};
 
 	return (
-		<BottomSheet id="transferFailed" snapPoints={snapPoints}>
+		<BottomSheet id="transferFailed" size="large">
 			<BottomSheetScreen
 				navTitle={t('transfer_failed.nav_title')}
 				title={
diff --git a/src/navigation/bottom-sheet/TreasureHuntNavigation.tsx b/src/navigation/bottom-sheet/TreasureHuntNavigation.tsx
diff --git a/src/screens/Activity/ActivityTagsPrompt.tsx b/src/screens/Activity/ActivityTagsPrompt.tsx
diff --git a/src/screens/Activity/TagsPrompt.tsx b/src/screens/Activity/TagsPrompt.tsx
diff --git a/src/screens/Activity/TimeRangePrompt.tsx b/src/screens/Activity/TimeRangePrompt.tsx
diff --git a/src/screens/Contacts/AddContact.tsx b/src/screens/Contacts/AddContact.tsx
diff --git a/src/screens/Settings/PIN/ForgotPIN.tsx b/src/screens/Settings/PIN/ForgotPIN.tsx
diff --git a/src/screens/Wallets/BoostPrompt.tsx b/src/screens/Wallets/BoostPrompt.tsx
diff --git a/src/screens/Wallets/NewTxPrompt.tsx b/src/screens/Wallets/NewTxPrompt.tsx
