feat(wallet): Show info toast when hiding balance on Home

Author: ovitrif

src/screens/Wallets/WalletsDetail/index.tsx

@@ -51,6 +51,10 @@ import {
 import { capitalize } from '../../../utils/helpers';
 import DetectSwipe from '../../../components/DetectSwipe';
 import type { WalletScreenProps } from '../../../navigation/types';
+import { showToast } from '../../../utils/notifications';
+import { useTranslation } from 'react-i18next';
+import { ignoresHideBalanceToastSelector } from '../../../store/reselect/user';
+import { ignoreHideBalanceToast } from '../../../store/slices/user';
 
 const updateHeight = ({ height, toValue = 0, duration = 250 }): void => {
 	try {
@@ -94,6 +98,9 @@ const WalletsDetail = ({
 		enableSwipeToHideBalanceSelector,
 	);
 	const hideBalance = useAppSelector(hideBalanceSelector);
+	const ignoresHideBalanceToast = useAppSelector(
+		ignoresHideBalanceToastSelector,
+	);
 	const [_, switchUnit] = useSwitchUnit();
 	const colors = useColors();
 	const size = useSharedValue({ width: 0, height: 0 });
@@ -102,6 +109,7 @@ const WalletsDetail = ({
 	const [radiusContainerHeight, setRadiusContainerHeight] = useState(400);
 	const [headerHeight, setHeaderHeight] = useState(0);
 	const height = useSharedValue(0);
+	const { t } = useTranslation('wallet');
 
 	const activityPadding = useMemo(
 		() => ({ paddingTop: radiusContainerHeight, paddingBottom: 230 }),
@@ -113,7 +121,16 @@ const WalletsDetail = ({
 	}, [height, headerHeight]);
 
 	const toggleHideBalance = (): void => {
-		dispatch(updateSettings({ hideBalance: !hideBalance }));
+		const enabled = !hideBalance;
+		dispatch(updateSettings({ hideBalance: enabled }));
+		if (!ignoresHideBalanceToast && enabled) {
+			showToast({
+				type: 'info',
+				title: t('balance_hidden_title'),
+				description: t('balance_hidden_message'),
+			});
+			dispatch(ignoreHideBalanceToast());
+		}
 	};
 
 	const onScroll = useCallback(

src/screens/Wallets/index.tsx

@@ -34,6 +34,10 @@ import {
 	hideOnboardingMessageSelector,
 	showWidgetsSelector,
 } from '../../store/reselect/settings';
+import { showToast } from '../../utils/notifications';
+import { useTranslation } from 'react-i18next';
+import { ignoresHideBalanceToastSelector } from '../../store/reselect/user';
+import { ignoreHideBalanceToast } from '../../store/slices/user';
 
 // Workaround for crash on Android
 // https://github.com/software-mansion/react-native-reanimated/issues/4306#issuecomment-1538184321
@@ -51,6 +55,9 @@ const Wallets = ({ navigation, onFocus }: Props): ReactElement => {
 		enableSwipeToHideBalanceSelector,
 	);
 	const hideBalance = useAppSelector(hideBalanceSelector);
+	const ignoresHideBalanceToast = useAppSelector(
+		ignoresHideBalanceToastSelector,
+	);
 	const hideOnboardingSetting = useAppSelector(hideOnboardingMessageSelector);
 	const showWidgets = useAppSelector(showWidgetsSelector);
 	const widgets = useAppSelector(widgetsSelector);
@@ -59,6 +66,7 @@ const Wallets = ({ navigation, onFocus }: Props): ReactElement => {
 	const empty = useMemo(() => {
 		return noTransactions && Object.values(widgets).length === 0;
 	}, [noTransactions, widgets]);
+	const { t } = useTranslation('wallet');
 
 	// tell WalletNavigator that this screen is focused
 	useFocusEffect(
@@ -69,7 +77,16 @@ const Wallets = ({ navigation, onFocus }: Props): ReactElement => {
 	);
 
 	const toggleHideBalance = (): void => {
-		dispatch(updateSettings({ hideBalance: !hideBalance }));
+		const enabled = !hideBalance;
+		dispatch(updateSettings({ hideBalance: enabled }));
+		if (!ignoresHideBalanceToast && enabled) {
+			showToast({
+				type: 'info',
+				title: t('balance_hidden_title'),
+				description: t('balance_hidden_message'),
+			});
+			dispatch(ignoreHideBalanceToast());
+		}
 	};
 
 	const navigateToScanner = (): void => {

src/store/index.ts

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

src/store/migrations/index.ts

@@ -333,6 +333,15 @@ const migrations = {
 			},
 		};
 	},
+	32: (state): PersistedState => {
+		return {
+			...state,
+			user: {
+				...state.user,
+				ignoresHideBalanceToast: false,
+			},
+		};
+	},
 };
 
 export default migrations;

src/store/reselect/user.ts

@@ -53,3 +53,8 @@ export const betaRiskAcceptedSelector = createSelector(
 	[userState],
 	(user): boolean => user.betaRiskAccepted,
 );
+
+export const ignoresHideBalanceToastSelector = createSelector(
+	[userState],
+	(user): boolean => user.ignoresHideBalanceToast,
+);

src/store/slices/user.ts

@@ -13,6 +13,7 @@ export type TUser = {
 	lightningSettingUpStep: number;
 	requiresRemoteRestore: boolean;
 	startCoopCloseTimestamp: number;
+	ignoresHideBalanceToast: boolean;
 };
 
 export const initialUserState: TUser = {
@@ -26,6 +27,7 @@ export const initialUserState: TUser = {
 	lightningSettingUpStep: 0,
 	requiresRemoteRestore: false,
 	startCoopCloseTimestamp: 0,
+	ignoresHideBalanceToast: false,
 };
 
 export const userSlice = createSlice({
@@ -61,6 +63,9 @@ export const userSlice = createSlice({
 		acceptBetaRisk: (state) => {
 			state.betaRiskAccepted = true;
 		},
+		ignoreHideBalanceToast: (state) => {
+			state.ignoresHideBalanceToast = true;
+		},
 		resetUserState: () => initialUserState,
 	},
 });
@@ -77,6 +82,7 @@ export const {
 	clearCoopCloseTimer,
 	verifyBackup,
 	acceptBetaRisk,
+	ignoreHideBalanceToast,
 	resetUserState,
 } = actions;
 

src/utils/i18n/locales/en/wallet.json

@@ -191,5 +191,7 @@
 	"lnurl_w_success_title": "Success",
 	"lnurl_w_success_description": "Withdraw Requested Successful",
 	"lnurl_p_title": "Send Bitcoin",
-	"lnurl_p_max": "Maximum amount"
+	"lnurl_p_max": "Maximum amount",
+	"balance_hidden_title" : "Wallet Balance Hidden",
+	"balance_hidden_message" : "Swipe your wallet balance to reveal it again."
 }