Merge pull request #1498 from synonymdev/feat/wallet-balance-hide-toast

feat(wallet): Show info toast when hiding balance

Author: coreyphillips

src/components/BalanceHeader.tsx

@@ -6,7 +6,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Caption13Up } from '../styles/text';
 import { EyeIcon } from '../styles/icons';
 import Money from './Money';
-import { useBalance, useSwitchUnit } from '../hooks/wallet';
+import { useBalance, useSwitchUnitAnnounced } from '../hooks/wallet';
 import { updateSettings } from '../store/slices/settings';
 import {
 	primaryUnitSelector,
@@ -18,7 +18,7 @@ import {
  */
 const BalanceHeader = (): ReactElement => {
 	const { t } = useTranslation('wallet');
-	const [_, switchUnit] = useSwitchUnit();
+	const onSwitchUnit = useSwitchUnitAnnounced();
 	const { totalBalance, claimableBalance } = useBalance();
 	const dispatch = useAppDispatch();
 	const unit = useAppSelector(primaryUnitSelector);
@@ -57,7 +57,7 @@ const BalanceHeader = (): ReactElement => {
 			<TouchableOpacity
 				style={styles.row}
 				testID="TotalBalance"
-				onPress={switchUnit}>
+				onPress={onSwitchUnit}>
 				<Money
 					sats={totalBalance}
 					unit={unit}

src/hooks/wallet.ts

@@ -13,6 +13,12 @@ import {
 	selectedNetworkSelector,
 	selectedWalletSelector,
 } from '../store/reselect/wallet';
+import { useCurrency } from './displayValues';
+import { useTranslation } from 'react-i18next';
+import i18n from '../utils/i18n';
+import { showToast } from '../utils/notifications';
+import { ignoresSwitchUnitToastSelector } from '../store/reselect/user';
+import { ignoreSwitchUnitToast } from '../store/slices/user';
 
 /**
  * Retrieves wallet balances for the currently selected wallet and network.
@@ -102,3 +108,36 @@ export const useSwitchUnit = (): [EUnit, () => void] => {
 
 	return [nextUnit, switchUnit];
 };
+
+export function useSwitchUnitAnnounced(): () => void {
+	const dispatch = useAppDispatch();
+	const [nextUnit, switchUnit] = useSwitchUnit();
+	const unit = useAppSelector(primaryUnitSelector);
+	const ignoresSwitchUnitToast = useAppSelector(ignoresSwitchUnitToastSelector);
+	const { fiatTicker } = useCurrency();
+	const { t } = useTranslation('wallet');
+
+	const toUnitText: (unit: EUnit) => string = (u) => {
+		if (u === EUnit.BTC) {
+			return i18n.t('settings:general.unit_bitcoin');
+		}
+		if (u === EUnit.satoshi) {
+			return i18n.t('settings:general.unit_satoshis');
+		}
+		return fiatTicker;
+	};
+
+	return (): void => {
+		switchUnit();
+		if (!ignoresSwitchUnitToast) {
+			showToast({
+				type: 'info',
+				title: t('balance_unit_switched_title', { unit: toUnitText(nextUnit) }),
+				description: t('balance_unit_switched_message', {
+					unit: toUnitText(unit),
+				}),
+			});
+			dispatch(ignoreSwitchUnitToast());
+		}
+	};
+}

src/screens/Wallets/WalletsDetail/index.tsx

@@ -37,7 +37,7 @@ import { Title } from '../../../styles/text';
 import NavigationHeader from '../../../components/NavigationHeader';
 import useColors from '../../../hooks/colors';
 import { useAppDispatch, useAppSelector } from '../../../hooks/redux';
-import { useBalance, useSwitchUnit } from '../../../hooks/wallet';
+import { useBalance, useSwitchUnitAnnounced } from '../../../hooks/wallet';
 import ActivityList from '../../Activity/ActivityList';
 import BitcoinBreakdown from './BitcoinBreakdown';
 import SafeAreaInset from '../../../components/SafeAreaInset';
@@ -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,14 +98,18 @@ const WalletsDetail = ({
 		enableSwipeToHideBalanceSelector,
 	);
 	const hideBalance = useAppSelector(hideBalanceSelector);
-	const [_, switchUnit] = useSwitchUnit();
+	const ignoresHideBalanceToast = useAppSelector(
+		ignoresHideBalanceToastSelector,
+	);
+	const onSwitchUnit = useSwitchUnitAnnounced();
 	const colors = useColors();
 	const size = useSharedValue({ width: 0, height: 0 });
 	const title = capitalize(assetType);
 	const [showDetails, setShowDetails] = useState(true);
 	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(
@@ -200,7 +217,7 @@ const WalletsDetail = ({
 										style={styles.cell}
 										entering={FadeIn}
 										exiting={FadeOut}>
-										<TouchableOpacity onPress={switchUnit}>
+										<TouchableOpacity onPress={onSwitchUnit}>
 											<Money
 												sats={totalBalance}
 												enableHide={true}
@@ -223,7 +240,7 @@ const WalletsDetail = ({
 											onSwipeLeft={toggleHideBalance}
 											onSwipeRight={toggleHideBalance}>
 											<TouchableOpacity
-												onPress={switchUnit}
+												onPress={onSwitchUnit}
 												style={styles.largeValueContainer}>
 												<Money
 													sats={totalBalance}

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,16 @@ const migrations = {
 			},
 		};
 	},
+	32: (state): PersistedState => {
+		return {
+			...state,
+			user: {
+				...state.user,
+				ignoresHideBalanceToast: false,
+				ignoresSwitchUnitToast: false,
+			},
+		};
+	},
 };
 
 export default migrations;

src/store/reselect/user.ts

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

src/store/slices/user.ts

@@ -13,6 +13,8 @@ export type TUser = {
 	lightningSettingUpStep: number;
 	requiresRemoteRestore: boolean;
 	startCoopCloseTimestamp: number;
+	ignoresHideBalanceToast: boolean;
+	ignoresSwitchUnitToast: boolean;
 };
 
 export const initialUserState: TUser = {
@@ -26,6 +28,8 @@ export const initialUserState: TUser = {
 	lightningSettingUpStep: 0,
 	requiresRemoteRestore: false,
 	startCoopCloseTimestamp: 0,
+	ignoresHideBalanceToast: false,
+	ignoresSwitchUnitToast: false,
 };
 
 export const userSlice = createSlice({
@@ -61,6 +65,12 @@ export const userSlice = createSlice({
 		acceptBetaRisk: (state) => {
 			state.betaRiskAccepted = true;
 		},
+		ignoreHideBalanceToast: (state) => {
+			state.ignoresHideBalanceToast = true;
+		},
+		ignoreSwitchUnitToast: (state) => {
+			state.ignoresSwitchUnitToast = true;
+		},
 		resetUserState: () => initialUserState,
 	},
 });
@@ -77,6 +87,8 @@ export const {
 	clearCoopCloseTimer,
 	verifyBackup,
 	acceptBetaRisk,
+	ignoreHideBalanceToast,
+	ignoreSwitchUnitToast,
 	resetUserState,
 } = actions;
 

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

@@ -191,5 +191,9 @@
 	"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.",
+	"balance_unit_switched_title" : "Switched to {unit}",
+	"balance_unit_switched_message" : "Tap your wallet balance to switch it back to {unit}."
 }