fix(transfer): #2222 skip transfer intros after first time (#2309)

e2e/channels.e2e.js

@@ -128,7 +128,6 @@ d('Transfer', () => {
 		await element(by.id('NavigationClose')).tap();
 		await element(by.id('ActivitySavings')).tap();
 		await element(by.id('TransferToSpending')).tap();
-		await element(by.id('SpendingIntro-button')).tap();
 		await element(by.id('N1').withAncestor(by.id('SpendingAmount'))).tap();
 		await element(by.id('N0').withAncestor(by.id('SpendingAmount'))).multiTap(
 			5,

src/components/Suggestions.tsx

@@ -16,11 +16,12 @@ 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 { transferIntroSeenSelector } from '../store/reselect/user';
 import {
 	newChannelsNotificationsSelector,
 	todosFullSelector,
 } from '../store/reselect/todos';
-import { pinSelector } from '../store/reselect/settings';
 import { useAppDispatch, useAppSelector } from '../hooks/redux';
 import type { RootNavigationProp } from '../navigation/types';
 import { appName, appStoreUrl, playStoreUrl } from '../constants/app';
@@ -34,6 +35,7 @@ const Suggestions = (): ReactElement => {
 	const pinTodoDone = useAppSelector(pinSelector);
 	const suggestions = useAppSelector(todosFullSelector);
 	const newChannels = useAppSelector(newChannelsNotificationsSelector);
+	const transferIntroSeen = useAppSelector(transferIntroSeenSelector);
 	const [index, setIndex] = useState(0);
 
 	// this code is needed in order to avoid flashing wrong balance on channel open
@@ -73,7 +75,11 @@ const Suggestions = (): ReactElement => {
 			}
 
 			if (id === 'lightning') {
-				navigation.navigate('TransferRoot', { screen: 'TransferIntro' });
+				if (transferIntroSeen) {
+					navigation.navigate('TransferRoot', { screen: 'Funding' });
+				} else {
+					navigation.navigate('TransferRoot', { screen: 'TransferIntro' });
+				}
 			}
 
 			if (id === 'lightningSettingUp') {
@@ -111,7 +117,7 @@ const Suggestions = (): ReactElement => {
 				});
 			}
 		},
-		[navigation, pinTodoDone, onShare],
+		[navigation, transferIntroSeen, pinTodoDone, onShare],
 	);
 
 	const handleRenderItem = useCallback(

src/screens/Activity/ActivitySavings.tsx

@@ -15,7 +15,10 @@ import ActivityList from './ActivityList';
 import { useBalance } from '../../hooks/wallet';
 import { useAppSelector } from '../../hooks/redux';
 import { EActivityType } from '../../store/types/activity';
-import { isGeoBlockedSelector } from '../../store/reselect/user';
+import {
+	isGeoBlockedSelector,
+	spendingIntroSeenSelector,
+} from '../../store/reselect/user';
 import { activityItemsSelector } from '../../store/reselect/activity';
 import { WalletScreenProps } from '../../navigation/types';
 
@@ -28,6 +31,7 @@ const ActivitySavings = ({
 	const { onchainBalance, balanceInTransferToSavings } = useBalance();
 	const items = useAppSelector(activityItemsSelector);
 	const isGeoBlocked = useAppSelector(isGeoBlockedSelector);
+	const spendingIntroSeen = useAppSelector(spendingIntroSeenSelector);
 
 	const savingsItems = useMemo(() => {
 		return items.filter((item) => {
@@ -45,7 +49,11 @@ const ActivitySavings = ({
 	const showOnboarding = onchainBalance === 0 && savingsItems.length === 0;
 
 	const onTransfer = (): void => {
-		navigation.navigate('TransferRoot', { screen: 'SpendingIntro' });
+		if (spendingIntroSeen) {
+			navigation.navigate('TransferRoot', { screen: 'SpendingAmount' });
+		} else {
+			navigation.navigate('TransferRoot', { screen: 'SpendingIntro' });
+		}
 	};
 
 	const canTransfer = !!onchainBalance && !isGeoBlocked;

src/screens/Activity/ActivitySpending.tsx

@@ -16,6 +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 { WalletScreenProps } from '../../navigation/types';
 
 const imageSrc = require('../../assets/illustrations/coin-stack-x-2.png');
@@ -26,6 +27,7 @@ const ActivitySpending = ({
 	const { t } = useTranslation('wallet');
 	const { lightningBalance, balanceInTransferToSpending } = useBalance();
 	const isSpendingOnboarding = useAppSelector(spendingOnboardingSelector);
+	const savingsIntroSeen = useAppSelector(savingsIntroSeenSelector);
 
 	const filter = useMemo(() => {
 		return {
@@ -35,7 +37,11 @@ const ActivitySpending = ({
 	}, []);
 
 	const onTransfer = (): void => {
-		navigation.navigate('TransferRoot', { screen: 'SavingsIntro' });
+		if (savingsIntroSeen) {
+			navigation.navigate('TransferRoot', { screen: 'Availability' });
+		} else {
+			navigation.navigate('TransferRoot', { screen: 'SavingsIntro' });
+		}
 	};
 
 	const canTransfer = !!lightningBalance;

src/screens/Transfer/Funding.tsx

@@ -10,7 +10,10 @@ import RectangleButton from '../../components/buttons/RectangleButton';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import NavigationHeader from '../../components/NavigationHeader';
 import { useBalance } from '../../hooks/wallet';
-import { isGeoBlockedSelector } from '../../store/reselect/user';
+import {
+	isGeoBlockedSelector,
+	spendingIntroSeenSelector,
+} from '../../store/reselect/user';
 import { TRANSACTION_DEFAULTS } from '../../utils/wallet/constants';
 import { showBottomSheet } from '../../store/utils/ui';
 import type { TransferScreenProps } from '../../navigation/types';
@@ -21,9 +24,14 @@ const Funding = ({
 	const { t } = useTranslation('lightning');
 	const { onchainBalance } = useBalance();
 	const isGeoBlocked = useAppSelector(isGeoBlockedSelector);
+	const spendingIntroSeen = useAppSelector(spendingIntroSeenSelector);
 
 	const onTransfer = (): void => {
-		navigation.navigate('SpendingIntro');
+		if (spendingIntroSeen) {
+			navigation.navigate('SpendingAmount');
+		} else {
+			navigation.navigate('SpendingIntro');
+		}
 	};
 
 	const onFund = (): void => {

src/screens/Transfer/SavingsIntro.tsx

@@ -3,6 +3,8 @@ 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 type { TransferScreenProps } from '../../navigation/types';
 
 const imageSrc = require('../../assets/illustrations/piggybank.png');
@@ -11,13 +13,15 @@ const SavingsIntro = ({
 	navigation,
 }: TransferScreenProps<'SavingsIntro'>): ReactElement => {
 	const { t } = useTranslation('lightning');
+	const dispatch = useAppDispatch();
 
 	const onClose = (): void => {
 		navigation.navigate('Wallet');
 	};
 
 	const onContinue = (): void => {
 		navigation.navigate('Availability');
+		dispatch(updateUser({ savingsIntroSeen: true }));
 	};
 
 	return (

src/screens/Transfer/SpendingIntro.tsx

@@ -3,6 +3,8 @@ 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 type { TransferScreenProps } from '../../navigation/types';
 
 const imageSrc = require('../../assets/illustrations/coin-stack-x.png');
@@ -11,9 +13,11 @@ const SpendingIntro = ({
 	navigation,
 }: TransferScreenProps<'SpendingIntro'>): ReactElement => {
 	const { t } = useTranslation('lightning');
+	const dispatch = useAppDispatch();
 
 	const onContinue = (): void => {
 		navigation.navigate('SpendingAmount');
+		dispatch(updateUser({ spendingIntroSeen: true }));
 	};
 
 	return (

src/screens/Transfer/TransferIntro.tsx

@@ -3,6 +3,8 @@ 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 type { TransferScreenProps } from '../../navigation/types';
 
 const imageSrc = require('../../assets/illustrations/lightning.png');
@@ -11,9 +13,11 @@ const TransferIntro = ({
 	navigation,
 }: TransferScreenProps<'TransferIntro'>): ReactElement => {
 	const { t } = useTranslation('lightning');
+	const dispatch = useAppDispatch();
 
 	const onContinue = (): void => {
 		navigation.navigate('Funding');
+		dispatch(updateUser({ transferIntroSeen: true }));
 	};
 
 	return (

src/store/index.ts

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

src/store/migrations/index.ts

@@ -34,6 +34,17 @@ const migrations = {
 			},
 		};
 	},
+	46: (state): PersistedState => {
+		return {
+			...state,
+			user: {
+				...state.user,
+				transferIntroSeen: false,
+				spendingIntroSeen: false,
+				savingsIntroSeen: false,
+			},
+		};
+	},
 };
 
 export default migrations;

src/store/reselect/user.ts

@@ -63,3 +63,15 @@ 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

@@ -100,7 +100,6 @@ export const initialSettingsState: TSettings = {
 	customFeeRate: 0,
 	hideBalance: false,
 	hideBalanceOnOpen: false,
-	hideBeta: false,
 	hideOnboardingMessage: false,
 	enableDevOptions: __DEV__,
 	treasureChests: [],

src/store/slices/settings.ts

@@ -40,7 +40,6 @@ export type TSettings = {
 	customFeeRate: number;
 	hideBalance: boolean;
 	hideBalanceOnOpen: boolean;
-	hideBeta: boolean;
 	hideOnboardingMessage: boolean;
 	enableDevOptions: boolean;
 	treasureChests: TChest[];

src/store/slices/user.ts

@@ -15,6 +15,9 @@ export type TUser = {
 	ignoresHideBalanceToast: boolean;
 	ignoresSwitchUnitToast: boolean;
 	scanAllAddressesTimestamp: number;
+	transferIntroSeen: boolean;
+	spendingIntroSeen: boolean;
+	savingsIntroSeen: boolean;
 };
 
 export const initialUserState: TUser = {
@@ -30,6 +33,9 @@ export const initialUserState: TUser = {
 	ignoresHideBalanceToast: false,
 	ignoresSwitchUnitToast: false,
 	scanAllAddressesTimestamp: 0,
+	transferIntroSeen: false,
+	spendingIntroSeen: false,
+	savingsIntroSeen: false,
 };
 
 export const userSlice = createSlice({