From 862d6f7be0ad60813192599d0b1977dfde116649 Mon Sep 17 00:00:00 2001 From: Philipp Walter Date: Thu, 10 Oct 2024 12:21:22 +0200 Subject: [PATCH] fix(transfer): #2222 skip transfer intros after first time --- e2e/channels.e2e.js | 1 - src/components/Suggestions.tsx | 12 +++++++++--- src/screens/Activity/ActivitySavings.tsx | 12 ++++++++++-- src/screens/Activity/ActivitySpending.tsx | 8 +++++++- src/screens/Transfer/Funding.tsx | 12 ++++++++++-- src/screens/Transfer/SavingsIntro.tsx | 4 ++++ src/screens/Transfer/SpendingIntro.tsx | 4 ++++ src/screens/Transfer/TransferIntro.tsx | 4 ++++ src/store/index.ts | 2 +- src/store/migrations/index.ts | 11 +++++++++++ src/store/reselect/user.ts | 12 ++++++++++++ src/store/shapes/settings.ts | 1 - src/store/slices/settings.ts | 1 - src/store/slices/user.ts | 6 ++++++ 14 files changed, 78 insertions(+), 12 deletions(-) diff --git a/e2e/channels.e2e.js b/e2e/channels.e2e.js index 02c7a231b..b4bf4a8a5 100644 --- a/e2e/channels.e2e.js +++ b/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, diff --git a/src/components/Suggestions.tsx b/src/components/Suggestions.tsx index d0986ef58..97e162c80 100644 --- a/src/components/Suggestions.tsx +++ b/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( diff --git a/src/screens/Activity/ActivitySavings.tsx b/src/screens/Activity/ActivitySavings.tsx index 1f5250fdf..8d7a3df1b 100644 --- a/src/screens/Activity/ActivitySavings.tsx +++ b/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; diff --git a/src/screens/Activity/ActivitySpending.tsx b/src/screens/Activity/ActivitySpending.tsx index 061939383..9ad4de665 100644 --- a/src/screens/Activity/ActivitySpending.tsx +++ b/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; diff --git a/src/screens/Transfer/Funding.tsx b/src/screens/Transfer/Funding.tsx index 97e1ae252..6fea1ac46 100644 --- a/src/screens/Transfer/Funding.tsx +++ b/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 => { diff --git a/src/screens/Transfer/SavingsIntro.tsx b/src/screens/Transfer/SavingsIntro.tsx index 22b5f39b1..d6ac513e0 100644 --- a/src/screens/Transfer/SavingsIntro.tsx +++ b/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,6 +13,7 @@ const SavingsIntro = ({ navigation, }: TransferScreenProps<'SavingsIntro'>): ReactElement => { const { t } = useTranslation('lightning'); + const dispatch = useAppDispatch(); const onClose = (): void => { navigation.navigate('Wallet'); @@ -18,6 +21,7 @@ const SavingsIntro = ({ const onContinue = (): void => { navigation.navigate('Availability'); + dispatch(updateUser({ savingsIntroSeen: true })); }; return ( diff --git a/src/screens/Transfer/SpendingIntro.tsx b/src/screens/Transfer/SpendingIntro.tsx index 825ecc552..deed059b4 100644 --- a/src/screens/Transfer/SpendingIntro.tsx +++ b/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 ( diff --git a/src/screens/Transfer/TransferIntro.tsx b/src/screens/Transfer/TransferIntro.tsx index bb0dc9005..e4e36fa2c 100644 --- a/src/screens/Transfer/TransferIntro.tsx +++ b/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 ( diff --git a/src/store/index.ts b/src/store/index.ts index 140ea350f..3209832e9 100644 --- a/src/store/index.ts +++ b/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__ }), diff --git a/src/store/migrations/index.ts b/src/store/migrations/index.ts index 339250cdf..3f5b781fe 100644 --- a/src/store/migrations/index.ts +++ b/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; diff --git a/src/store/reselect/user.ts b/src/store/reselect/user.ts index f66e9fad4..942292f32 100644 --- a/src/store/reselect/user.ts +++ b/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; +}; diff --git a/src/store/shapes/settings.ts b/src/store/shapes/settings.ts index 02b38a3a1..053f600ec 100644 --- a/src/store/shapes/settings.ts +++ b/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: [], diff --git a/src/store/slices/settings.ts b/src/store/slices/settings.ts index b15d46fcf..5db71883e 100644 --- a/src/store/slices/settings.ts +++ b/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[]; diff --git a/src/store/slices/user.ts b/src/store/slices/user.ts index aeaef6783..636fec143 100644 --- a/src/store/slices/user.ts +++ b/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({