fix(restore): backup intro screens seen (#2428)

__tests__/todos.ts

@@ -67,7 +67,7 @@ describe('Todos selector', () => {
 
 	it('should not return backupSeedPhraseTodo if backup is verified', () => {
 		const state = cloneDeep(s);
-		state.user.backupVerified = true;
+		state.settings.backupVerified = true;
 
 		expect(todosFullSelector(state)).not.toEqual(
 			expect.arrayContaining([backupSeedPhraseTodo]),

src/components/Suggestions.tsx

@@ -16,11 +16,11 @@ import SuggestionCard from './SuggestionCard';
 import { ITodo, TTodoType } from '../store/types/todos';
 import { channelsNotificationsShown, hideTodo } from '../store/slices/todos';
 import { showBottomSheet } from '../store/utils/ui';
-import { pinSelector } from '../store/reselect/settings';
 import {
+	pinSelector,
 	quickpayIntroSeenSelector,
 	transferIntroSeenSelector,
-} from '../store/reselect/user';
+} from '../store/reselect/settings';
 import {
 	newChannelsNotificationsSelector,
 	todosFullSelector,

src/navigation/bottom-sheet/QuickPayPrompt.tsx

@@ -14,10 +14,10 @@ import {
 	useSnapPoints,
 } from '../../hooks/bottomSheet';
 import { closeSheet } from '../../store/slices/ui';
-import { updateUser } from '../../store/slices/user';
+import { updateSettings } from '../../store/slices/settings';
 import { showBottomSheet } from '../../store/utils/ui';
 import { viewControllersSelector } from '../../store/reselect/ui';
-import { quickpayIntroSeenSelector } from '../../store/reselect/user';
+import { quickpayIntroSeenSelector } from '../../store/reselect/settings';
 import { RootNavigationProp } from '../types';
 
 const imageSrc = require('../../assets/illustrations/fast-forward.png');
@@ -72,12 +72,12 @@ const QuickPayPrompt = ({ enabled }: { enabled: boolean }): ReactElement => {
 
 	const onMore = (): void => {
 		navigation.navigate('Settings', { screen: 'QuickpaySettings' });
-		dispatch(updateUser({ quickpayIntroSeen: true }));
+		dispatch(updateSettings({ quickpayIntroSeen: true }));
 		dispatch(closeSheet('quickPay'));
 	};
 
 	const onDismiss = (): void => {
-		dispatch(updateUser({ quickpayIntroSeen: true }));
+		dispatch(updateSettings({ quickpayIntroSeen: true }));
 		dispatch(closeSheet('quickPay'));
 	};
 
@@ -86,7 +86,7 @@ const QuickPayPrompt = ({ enabled }: { enabled: boolean }): ReactElement => {
 			view="quickPay"
 			snapPoints={snapPoints}
 			onClose={(): void => {
-				dispatch(updateUser({ quickpayIntroSeen: true }));
+				dispatch(updateSettings({ quickpayIntroSeen: true }));
 			}}>
 			<BottomSheetScreen
 				navTitle={t('quickpay.nav_title')}

src/screens/Activity/ActivitySavings.tsx

@@ -15,10 +15,8 @@ import ActivityList from './ActivityList';
 import { useBalance } from '../../hooks/wallet';
 import { useAppSelector } from '../../hooks/redux';
 import { EActivityType } from '../../store/types/activity';
-import {
-	isGeoBlockedSelector,
-	spendingIntroSeenSelector,
-} from '../../store/reselect/user';
+import { isGeoBlockedSelector } from '../../store/reselect/user';
+import { spendingIntroSeenSelector } from '../../store/reselect/settings';
 import { activityItemsSelector } from '../../store/reselect/activity';
 import { WalletScreenProps } from '../../navigation/types';
 

src/screens/Activity/ActivitySpending.tsx

@@ -16,7 +16,7 @@ import { useBalance } from '../../hooks/wallet';
 import { useAppSelector } from '../../hooks/redux';
 import { EActivityType } from '../../store/types/activity';
 import { spendingOnboardingSelector } from '../../store/reselect/aggregations';
-import { savingsIntroSeenSelector } from '../../store/reselect/user';
+import { savingsIntroSeenSelector } from '../../store/reselect/settings';
 import { WalletScreenProps } from '../../navigation/types';
 
 const imageSrc = require('../../assets/illustrations/coin-stack-x-2.png');

src/screens/Onboarding/RestoreFromSeed.tsx

@@ -23,6 +23,7 @@ import {
 	TextInput,
 	View as ThemedView,
 } from '../../styles/components';
+import { BodyM, BodyS, Display } from '../../styles/text';
 import NavigationHeader from '../../components/NavigationHeader';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import SeedInput from '../../components/SeedInput';
@@ -31,8 +32,8 @@ import VerticalShadow from '../../components/VerticalShadow';
 import Button from '../../components/buttons/Button';
 import { useAppDispatch } from '../../hooks/redux';
 import { OnboardingStackScreenProps } from '../../navigation/types';
-import { updateUser, verifyBackup } from '../../store/slices/user';
-import { BodyM, BodyS, Display } from '../../styles/text';
+import { updateUser } from '../../store/slices/user';
+import { verifyBackup } from '../../store/slices/settings';
 import { validateMnemonic } from '../../utils/wallet';
 
 const RestoreFromSeed = ({

src/screens/Settings/Backup/BackupPrompt.tsx

@@ -5,21 +5,19 @@ import { __E2E__ } from '../../../constants/env';
 import { Display } from '../../../styles/text';
 import BottomSheetWrapper from '../../../components/BottomSheetWrapper';
 import BottomSheetScreen from '../../../components/BottomSheetScreen';
-import { closeSheet } from '../../../store/slices/ui';
-import { ignoreBackup } from '../../../store/slices/user';
-import { showBottomSheet } from '../../../store/utils/ui';
 import { useBalance } from '../../../hooks/wallet';
 import { useAppDispatch, useAppSelector } from '../../../hooks/redux';
-import { objectKeys } from '../../../utils/objectKeys';
-import { viewControllersSelector } from '../../../store/reselect/ui';
 import {
 	useBottomSheetBackPress,
 	useSnapPoints,
 } from '../../../hooks/bottomSheet';
-import {
-	backupVerifiedSelector,
-	ignoreBackupTimestampSelector,
-} from '../../../store/reselect/user';
+import { closeSheet } from '../../../store/slices/ui';
+import { ignoreBackup } from '../../../store/slices/user';
+import { showBottomSheet } from '../../../store/utils/ui';
+import { objectKeys } from '../../../utils/objectKeys';
+import { viewControllersSelector } from '../../../store/reselect/ui';
+import { ignoreBackupTimestampSelector } from '../../../store/reselect/user';
+import { backupVerifiedSelector } from '../../../store/reselect/settings';
 
 const imageSrc = require('../../../assets/illustrations/safe.png');
 

src/screens/Settings/Backup/Success.tsx

@@ -8,7 +8,7 @@ import SafeAreaInset from '../../../components/SafeAreaInset';
 import GradientView from '../../../components/GradientView';
 import Button from '../../../components/buttons/Button';
 import { useAppDispatch } from '../../../hooks/redux';
-import { verifyBackup } from '../../../store/slices/user';
+import { verifyBackup } from '../../../store/slices/settings';
 import { BackupScreenProps } from '../../../navigation/types';
 
 const imageSrc = require('../../../assets/illustrations/check.png');

src/screens/Settings/General/index.tsx

@@ -7,7 +7,7 @@ import { useAppSelector } from '../../../hooks/redux';
 import type { SettingsScreenProps } from '../../../navigation/types';
 import { EUnit } from '../../../store/types/wallet';
 import { lastUsedTagsSelector } from '../../../store/reselect/metadata';
-import { quickpayIntroSeenSelector } from '../../../store/reselect/user';
+import { quickpayIntroSeenSelector } from '../../../store/reselect/settings';
 import {
 	unitSelector,
 	selectedCurrencySelector,

src/screens/Settings/Quickpay/QuickpayIntro.tsx

@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Display } from '../../../styles/text';
 import OnboardingScreen from '../../../components/OnboardingScreen';
 import { useAppDispatch } from '../../../hooks/redux';
-import { updateUser } from '../../../store/slices/user';
+import { updateSettings } from '../../../store/slices/settings';
 import type { SettingsScreenProps } from '../../../navigation/types';
 
 const imageSrc = require('../../../assets/illustrations/fast-forward.png');
@@ -31,7 +31,7 @@ const QuickpayIntro = ({
 			buttonText={t('continue')}
 			testID="QuickpayIntro"
 			onButtonPress={(): void => {
-				dispatch(updateUser({ quickpayIntroSeen: true }));
+				dispatch(updateSettings({ quickpayIntroSeen: true }));
 				navigation.navigate('QuickpaySettings');
 			}}
 		/>

src/screens/Transfer/Funding.tsx

@@ -10,10 +10,8 @@ import RectangleButton from '../../components/buttons/RectangleButton';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import NavigationHeader from '../../components/NavigationHeader';
 import { useBalance } from '../../hooks/wallet';
-import {
-	isGeoBlockedSelector,
-	spendingIntroSeenSelector,
-} from '../../store/reselect/user';
+import { isGeoBlockedSelector } from '../../store/reselect/user';
+import { spendingIntroSeenSelector } from '../../store/reselect/settings';
 import { TRANSACTION_DEFAULTS } from '../../utils/wallet/constants';
 import { showBottomSheet } from '../../store/utils/ui';
 import type { TransferScreenProps } from '../../navigation/types';

src/screens/Transfer/SavingsIntro.tsx

@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Display } from '../../styles/text';
 import OnboardingScreen from '../../components/OnboardingScreen';
 import { useAppDispatch } from '../../hooks/redux';
-import { updateUser } from '../../store/slices/user';
+import { updateSettings } from '../../store/slices/settings';
 import type { TransferScreenProps } from '../../navigation/types';
 
 const imageSrc = require('../../assets/illustrations/piggybank.png');
@@ -17,7 +17,7 @@ const SavingsIntro = ({
 
 	const onContinue = (): void => {
 		navigation.navigate('Availability');
-		dispatch(updateUser({ savingsIntroSeen: true }));
+		dispatch(updateSettings({ savingsIntroSeen: true }));
 	};
 
 	return (

src/screens/Transfer/SpendingIntro.tsx

@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Display } from '../../styles/text';
 import OnboardingScreen from '../../components/OnboardingScreen';
 import { useAppDispatch } from '../../hooks/redux';
-import { updateUser } from '../../store/slices/user';
+import { updateSettings } from '../../store/slices/settings';
 import type { TransferScreenProps } from '../../navigation/types';
 
 const imageSrc = require('../../assets/illustrations/coin-stack-x.png');
@@ -17,7 +17,7 @@ const SpendingIntro = ({
 
 	const onContinue = (): void => {
 		navigation.navigate('SpendingAmount');
-		dispatch(updateUser({ spendingIntroSeen: true }));
+		dispatch(updateSettings({ spendingIntroSeen: true }));
 	};
 
 	return (

src/screens/Transfer/TransferIntro.tsx

@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Display } from '../../styles/text';
 import OnboardingScreen from '../../components/OnboardingScreen';
 import { useAppDispatch } from '../../hooks/redux';
-import { updateUser } from '../../store/slices/user';
+import { updateSettings } from '../../store/slices/settings';
 import type { TransferScreenProps } from '../../navigation/types';
 
 const imageSrc = require('../../assets/illustrations/lightning.png');
@@ -17,7 +17,7 @@ const TransferIntro = ({
 
 	const onContinue = (): void => {
 		navigation.navigate('Funding');
-		dispatch(updateUser({ transferIntroSeen: true }));
+		dispatch(updateSettings({ transferIntroSeen: true }));
 	};
 
 	return (

src/store/index.ts

@@ -32,7 +32,7 @@ const persistConfig = {
 	key: 'root',
 	storage: reduxStorage,
 	// increase version after store shape changes
-	version: 49,
+	version: 50,
 	stateReconciler: autoMergeLevel2,
 	blacklist: ['receive', 'ui'],
 	migrate: createMigrate(migrations, { debug: __ENABLE_MIGRATION_DEBUG__ }),

src/store/migrations/index.ts

@@ -80,6 +80,19 @@ const migrations = {
 
 		return state;
 	},
+	50: (state): PersistedState => {
+		return {
+			...state,
+			settings: {
+				...state.settings,
+				backupVerified: state.user.backupVerified,
+				quickpayIntroSeen: state.user.quickpayIntroSeen,
+				transferIntroSeen: state.user.transferIntroSeen,
+				spendingIntroSeen: state.user.spendingIntroSeen,
+				savingsIntroSeen: state.user.savingsIntroSeen,
+			},
+		};
+	},
 };
 
 export default migrations;

src/store/reselect/settings.ts

@@ -15,10 +15,14 @@ import {
 } from '../types/settings';
 
 export const settingsSelector = (state: RootState): TSettings => state.settings;
+
 const customElectrumPeersState = (state: RootState): TCustomElectrumPeers => {
 	return state.settings.customElectrumPeers;
 };
 
+export const backupVerifiedSelector = (state: RootState): boolean => {
+	return state.settings.backupVerified;
+};
 export const selectedCurrencySelector = (state: RootState): string => {
 	return state.settings.selectedCurrency;
 };
@@ -118,6 +122,18 @@ export const denominationSelector = (state: RootState): EDenomination => {
 export const webRelaySelector = (state: RootState): string => {
 	return state.settings.webRelay;
 };
+export const quickpayIntroSeenSelector = (state: RootState): boolean => {
+	return state.settings.quickpayIntroSeen;
+};
+export const transferIntroSeenSelector = (state: RootState): boolean => {
+	return state.settings.transferIntroSeen;
+};
+export const spendingIntroSeenSelector = (state: RootState): boolean => {
+	return state.settings.spendingIntroSeen;
+};
+export const savingsIntroSeenSelector = (state: RootState): boolean => {
+	return state.settings.savingsIntroSeen;
+};
 
 /**
  * Returns custom Electrum peers for a given network.

src/store/reselect/todos.ts

@@ -17,11 +17,8 @@ import {
 	btFailedTodo,
 	inviteTodo,
 } from '../shapes/todos';
-import {
-	backupVerifiedSelector,
-	startCoopCloseTimestampSelector,
-} from './user';
-import { pinSelector } from './settings';
+import { startCoopCloseTimestampSelector } from './user';
+import { backupVerifiedSelector, pinSelector } from './settings';
 import { onboardingProfileStepSelector } from './slashtags';
 import { closedChannelsSelector, openChannelsSelector } from './lightning';
 import { blocktankPaidOrdersFullSelector } from './blocktank';

src/store/reselect/user.ts

@@ -9,11 +9,6 @@ export const isGeoBlockedSelector = createSelector(
 	(user): boolean => user.isGeoBlocked ?? false,
 );
 
-export const backupVerifiedSelector = createSelector(
-	[userState],
-	(user): boolean => user.backupVerified,
-);
-
 export const ignoreBackupTimestampSelector = createSelector(
 	[userState],
 	(user): number => user.ignoreBackupTimestamp,
@@ -24,10 +19,6 @@ export const lightningSettingUpStepSelector = createSelector(
 	(user): number => user.lightningSettingUpStep,
 );
 
-export const quickpayIntroSeenSelector = (state: RootState): boolean => {
-	return state.user.quickpayIntroSeen;
-};
-
 export const requiresRemoteRestoreSelector = createSelector(
 	[userState],
 	(user): boolean => user.requiresRemoteRestore,
@@ -67,15 +58,3 @@ export const scanAllAddressesTimestampSelector = createSelector(
 	[userState],
 	(user): number => user.scanAllAddressesTimestamp,
 );
-
-export const transferIntroSeenSelector = (state: RootState): boolean => {
-	return state.user.transferIntroSeen;
-};
-
-export const spendingIntroSeenSelector = (state: RootState): boolean => {
-	return state.user.spendingIntroSeen;
-};
-
-export const savingsIntroSeenSelector = (state: RootState): boolean => {
-	return state.user.savingsIntroSeen;
-};

src/store/shapes/settings.ts

@@ -74,6 +74,7 @@ const defaultReceivePreference = [
 ];
 
 export const initialSettingsState: TSettings = {
+	backupVerified: false,
 	enableAutoReadClipboard: false,
 	enableSendAmountWarning: false,
 	enableSwipeToHideBalance: true,
@@ -107,6 +108,10 @@ export const initialSettingsState: TSettings = {
 	treasureChests: [],
 	orangeTickets: [],
 	webRelay: __WEB_RELAY__,
+	quickpayIntroSeen: false,
+	transferIntroSeen: false,
+	spendingIntroSeen: false,
+	savingsIntroSeen: false,
 };
 
 export const getDefaultSettingsShape = (): TSettings => {