refactor(ui): renamings

Author: pwltr

src/components/BottomSheetWrapper.tsx src/components/BottomSheet.tsxsrc/components/BottomSheetWrapper.tsx renamed to src/components/BottomSheet.tsx

@@ -12,16 +12,14 @@ import { useReducedMotion } from 'react-native-reanimated';
 import { __E2E__ } from '../constants/env';
 import useColors from '../hooks/colors';
 import { useAppDispatch, useAppSelector } from '../hooks/redux';
-import {
-	SheetId,
-	useSheetRef,
-} from '../navigation/bottom-sheet/SheetRefsProvider';
-import { viewControllerSelector } from '../store/reselect/ui';
+import { useSheetRef } from '../navigation/bottom-sheet/SheetRefsProvider';
+import { sheetSelector } from '../store/reselect/ui';
 import { resetSheet } from '../store/slices/ui';
+import { SheetId } from '../store/types/ui';
 import BottomSheetBackground from './BottomSheetBackground';
 
 type SheetProps = {
-	view: SheetId;
+	id: SheetId;
 	snapPoints: number[];
 	children: ReactNode;
 	testID?: string;
@@ -30,18 +28,18 @@ type SheetProps = {
 };
 
 const Sheet = ({
-	view,
+	id,
 	snapPoints,
 	children,
 	testID,
 	onOpen,
 	onClose,
 }: SheetProps) => {
 	const colors = useColors();
-	const sheetRef = useSheetRef(view);
+	const sheetRef = useSheetRef(id);
 	const isReducedMotion = useReducedMotion();
 	const dispatch = useAppDispatch();
-	const data = useAppSelector((state) => viewControllerSelector(state, view));
+	const data = useAppSelector((state) => sheetSelector(state, id));
 
 	// https://github.com/gorhom/react-native-bottom-sheet/issues/770#issuecomment-1072113936
 	// do not activate BottomSheet if swipe horizontally, this allows using Swiper inside of it
@@ -81,17 +79,17 @@ const Sheet = ({
 			if (index === -1) {
 				onClose?.();
 				// clear sheet params
-				dispatch(resetSheet(view));
+				dispatch(resetSheet(id));
 			} else if (index >= 0) {
 				onOpen?.();
 			}
 		},
-		[onOpen, onClose, dispatch, view],
+		[onOpen, onClose, dispatch, id],
 	);
 
 	return (
 		<BottomSheetModal
-			name={view}
+			name={id}
 			ref={sheetRef}
 			snapPoints={snapPoints}
 			handleStyle={styles.handle}

src/components/PinPad.tsx

@@ -31,7 +31,7 @@ const PinPad = ({
 	onShowBiotmetrics?: () => void;
 }): ReactElement => {
 	const { t } = useTranslation('security');
-	const sheetRef = useSheetRef('forgotPIN');
+	const sheetRef = useSheetRef('forgotPin');
 	const [biometryData, setBiometricData] = useState<IsSensorAvailableResult>();
 	const { attemptsRemaining, Dots, handleNumberPress, isLastAttempt, loading } =
 		usePIN(onSuccess);

src/components/Suggestions.tsx

@@ -28,7 +28,7 @@ const Suggestions = (): ReactElement => {
 	const { t } = useTranslation('cards');
 	const navigation = useNavigation<RootNavigationProp>();
 	const backupSheetRef = useSheetRef('backupPrompt');
-	const pinSheetRef = useSheetRef('PINNavigation');
+	const pinSheetRef = useSheetRef('pinNavigation');
 	const { width } = useWindowDimensions();
 	const dispatch = useAppDispatch();
 	const pinTodoDone = useAppSelector(pinSelector);

src/components/TabBar.tsx

@@ -19,7 +19,7 @@ import { rootNavigation } from '../navigation/root/RootNavigationContainer';
 import type { RootNavigationProp } from '../navigation/types';
 import { resetSendTransaction } from '../store/actions/wallet';
 import { spendingOnboardingSelector } from '../store/reselect/aggregations';
-import { showBottomSheet } from '../store/utils/ui';
+import { showSheet } from '../store/utils/ui';
 import { ScanIcon } from '../styles/icons';
 import ButtonBlur from './buttons/ButtonBlur';
 
@@ -37,7 +37,7 @@ const TabBar = (): ReactElement => {
 
 		// if we are on the spending screen and the user has not yet received funds
 		if (currentRoute === 'ActivitySpending' && isSpendingOnboarding) {
-			showBottomSheet('receiveNavigation', { receiveScreen: 'ReceiveAmount' });
+			showSheet('receiveNavigation', { receiveScreen: 'ReceiveAmount' });
 		} else {
 			receiveSheetRef.current?.present();
 		}

src/navigation/bottom-sheet/AppUpdatePrompt.tsx

@@ -1,8 +1,8 @@
 import React, { memo, ReactElement, useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import BottomSheet from '../../components/BottomSheet';
 import BottomSheetScreen from '../../components/BottomSheetScreen';
-import BottomSheetWrapper from '../../components/BottomSheetWrapper';
 import { __E2E__ } from '../../constants/env';
 import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
@@ -18,7 +18,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 the home screen before he will see this prompt
 
-const sheetId = 'appUpdatePrompt';
+const sheetId = 'appUpdate';
 
 const AppUpdatePrompt = (): ReactElement => {
 	const { t } = useTranslation('other');
@@ -73,10 +73,7 @@ const AppUpdatePrompt = (): ReactElement => {
 	};
 
 	return (
-		<BottomSheetWrapper
-			view={sheetId}
-			snapPoints={snapPoints}
-			onClose={onClose}>
+		<BottomSheet id={sheetId} snapPoints={snapPoints} onClose={onClose}>
 			<BottomSheetScreen
 				navTitle={t('update_nav_title')}
 				title={
@@ -95,7 +92,7 @@ const AppUpdatePrompt = (): ReactElement => {
 				onContinue={onUpdate}
 				onCancel={onCancel}
 			/>
-		</BottomSheetWrapper>
+		</BottomSheet>
 	);
 };
 

src/navigation/bottom-sheet/BackupNavigation.tsx

@@ -6,10 +6,9 @@ import {
 } from '@react-navigation/native-stack';
 import React, { ReactElement, memo } from 'react';
 
-import BottomSheetWrapper from '../../components/BottomSheetWrapper';
+import BottomSheet from '../../components/BottomSheet';
 import { __E2E__ } from '../../constants/env';
 import { useSnapPoints } from '../../hooks/bottomSheet';
-import { useAppSelector } from '../../hooks/redux';
 import ConfirmMnemonic from '../../screens/Settings/Backup/ConfirmMnemonic';
 import ConfirmPassphrase from '../../screens/Settings/Backup/ConfirmPassphrase';
 import Metadata from '../../screens/Settings/Backup/Metadata';
@@ -18,7 +17,6 @@ import ShowMnemonic from '../../screens/Settings/Backup/ShowMnemonic';
 import ShowPassphrase from '../../screens/Settings/Backup/ShowPassphrase';
 import Success from '../../screens/Settings/Backup/Success';
 import Warning from '../../screens/Settings/Backup/Warning';
-import { viewControllerIsOpenSelector } from '../../store/reselect/ui';
 import BottomSheetNavigationContainer from './BottomSheetNavigationContainer';
 
 export type BackupNavigationProp =
@@ -44,14 +42,11 @@ const navOptions: NativeStackNavigationOptions = {
 
 const BackupNavigation = (): ReactElement => {
 	const snapPoints = useSnapPoints('medium');
-	const isOpen = useAppSelector((state) => {
-		return viewControllerIsOpenSelector(state, 'backupNavigation');
-	});
 
 	return (
-		<BottomSheetWrapper view="backupNavigation" snapPoints={snapPoints}>
+		<BottomSheet id="backupNavigation" snapPoints={snapPoints}>
 			<NavigationIndependentTree>
-				<BottomSheetNavigationContainer key={isOpen.toString()}>
+				<BottomSheetNavigationContainer>
 					<Stack.Navigator screenOptions={navOptions}>
 						<Stack.Screen name="ShowMnemonic" component={ShowMnemonic} />
 						<Stack.Screen name="ShowPassphrase" component={ShowPassphrase} />
@@ -67,7 +62,7 @@ const BackupNavigation = (): ReactElement => {
 					</Stack.Navigator>
 				</BottomSheetNavigationContainer>
 			</NavigationIndependentTree>
-		</BottomSheetWrapper>
+		</BottomSheet>
 	);
 };
 

src/navigation/bottom-sheet/BackupPrompt.tsx

@@ -1,8 +1,8 @@
 import React, { memo, ReactElement, useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import BottomSheet from '../../components/BottomSheet';
 import BottomSheetScreen from '../../components/BottomSheetScreen';
-import BottomSheetWrapper from '../../components/BottomSheetWrapper';
 import { __E2E__ } from '../../constants/env';
 import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
@@ -74,8 +74,8 @@ const BackupPrompt = (): ReactElement => {
 	const text = totalBalance > 0 ? t('backup_funds') : t('backup_funds_no');
 
 	return (
-		<BottomSheetWrapper
-			view={sheetId}
+		<BottomSheet
+			id={sheetId}
 			snapPoints={snapPoints}
 			onClose={(): void => {
 				dispatch(ignoreBackup());
@@ -98,7 +98,7 @@ const BackupPrompt = (): ReactElement => {
 				onContinue={handleBackup}
 				onCancel={handleLater}
 			/>
-		</BottomSheetWrapper>
+		</BottomSheet>
 	);
 };
 

src/navigation/bottom-sheet/BottomSheets.tsx

@@ -1,6 +1,6 @@
 import React, { JSX, memo } from 'react';
 // import { useAppSelector } from '../../hooks/redux';
-// import { viewControllersSelector } from '../../store/reselect/ui';
+// import { sheetsSelector } from '../../store/reselect/ui';
 // import TransferFailed from '../bottom-sheet/TransferFailed';
 
 import BoostPrompt from '../../screens/Wallets/BoostPrompt';
@@ -16,7 +16,7 @@ import ReceiveNavigation from './ReceiveNavigation';
 import SendNavigation from './SendNavigation';
 
 const BottomSheets = (): JSX.Element => {
-	// const views = useAppSelector(viewControllersSelector);
+	// const views = useAppSelector(sheetsSelector);
 
 	return (
 		<>

src/navigation/bottom-sheet/ConnectionClosed.tsx

@@ -2,8 +2,8 @@ import React, { memo, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Image, StyleSheet, View } from 'react-native';
 
+import BottomSheet from '../../components/BottomSheet';
 import BottomSheetNavigationHeader from '../../components/BottomSheetNavigationHeader';
-import BottomSheetWrapper from '../../components/BottomSheetWrapper';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import Button from '../../components/buttons/Button';
 import { useSnapPoints } from '../../hooks/bottomSheet';
@@ -22,7 +22,7 @@ const ConnectionClosed = (): ReactElement => {
 	};
 
 	return (
-		<BottomSheetWrapper view="connectionClosed" snapPoints={snapPoints}>
+		<BottomSheet id="connectionClosed" snapPoints={snapPoints}>
 			<View style={styles.container}>
 				<BottomSheetNavigationHeader
 					title={t('connection_closed.title')}
@@ -44,7 +44,7 @@ const ConnectionClosed = (): ReactElement => {
 				</View>
 				<SafeAreaInset type="bottom" minPadding={16} />
 			</View>
-		</BottomSheetWrapper>
+		</BottomSheet>
 	);
 };
 

src/navigation/bottom-sheet/ForceTransfer.tsx

@@ -1,8 +1,8 @@
 import React, { memo, ReactElement, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import BottomSheet from '../../components/BottomSheet';
 import BottomSheetScreen from '../../components/BottomSheetScreen';
-import BottomSheetWrapper from '../../components/BottomSheetWrapper';
 import { useSnapPoints } from '../../hooks/bottomSheet';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import { startCoopCloseTimestampSelector } from '../../store/reselect/user';
@@ -110,7 +110,7 @@ const ForceTransfer = (): ReactElement => {
 	};
 
 	return (
-		<BottomSheetWrapper view="forceTransfer" snapPoints={snapPoints}>
+		<BottomSheet id="forceTransfer" snapPoints={snapPoints}>
 			<BottomSheetScreen
 				navTitle={t('force_nav_title')}
 				title={
@@ -129,7 +129,7 @@ const ForceTransfer = (): ReactElement => {
 				onContinue={onContinue}
 				onCancel={onCancel}
 			/>
-		</BottomSheetWrapper>
+		</BottomSheet>
 	);
 };