feat(wallet): Show info toast when switching balance unit

Author: ovitrif

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';
@@ -101,7 +101,7 @@ const WalletsDetail = ({
 	const ignoresHideBalanceToast = useAppSelector(
 		ignoresHideBalanceToastSelector,
 	);
-	const [_, switchUnit] = useSwitchUnit();
+	const onSwitchUnit = useSwitchUnitAnnounced();
 	const colors = useColors();
 	const size = useSharedValue({ width: 0, height: 0 });
 	const title = capitalize(assetType);
@@ -217,7 +217,7 @@ const WalletsDetail = ({
 										style={styles.cell}
 										entering={FadeIn}
 										exiting={FadeOut}>
-										<TouchableOpacity onPress={switchUnit}>
+										<TouchableOpacity onPress={onSwitchUnit}>
 											<Money
 												sats={totalBalance}
 												enableHide={true}
@@ -240,7 +240,7 @@ const WalletsDetail = ({
 											onSwipeLeft={toggleHideBalance}
 											onSwipeRight={toggleHideBalance}>
 											<TouchableOpacity
-												onPress={switchUnit}
+												onPress={onSwitchUnit}
 												style={styles.largeValueContainer}>
 												<Money
 													sats={totalBalance}

src/store/migrations/index.ts

@@ -339,6 +339,7 @@ const migrations = {
 			user: {
 				...state.user,
 				ignoresHideBalanceToast: false,
+				ignoresSwitchUnitToast: false,
 			},
 		};
 	},

src/store/reselect/user.ts

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

src/store/slices/user.ts

@@ -14,6 +14,7 @@ export type TUser = {
 	requiresRemoteRestore: boolean;
 	startCoopCloseTimestamp: number;
 	ignoresHideBalanceToast: boolean;
+	ignoresSwitchUnitToast: boolean;
 };
 
 export const initialUserState: TUser = {
@@ -28,6 +29,7 @@ export const initialUserState: TUser = {
 	requiresRemoteRestore: false,
 	startCoopCloseTimestamp: 0,
 	ignoresHideBalanceToast: false,
+	ignoresSwitchUnitToast: false,
 };
 
 export const userSlice = createSlice({
@@ -66,6 +68,9 @@ export const userSlice = createSlice({
 		ignoreHideBalanceToast: (state) => {
 			state.ignoresHideBalanceToast = true;
 		},
+		ignoreSwitchUnitToast: (state) => {
+			state.ignoresSwitchUnitToast = true;
+		},
 		resetUserState: () => initialUserState,
 	},
 });
@@ -83,6 +88,7 @@ export const {
 	verifyBackup,
 	acceptBetaRisk,
 	ignoreHideBalanceToast,
+	ignoreSwitchUnitToast,
 	resetUserState,
 } = actions;
 

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

@@ -193,5 +193,7 @@
 	"lnurl_p_title": "Send Bitcoin",
 	"lnurl_p_max": "Maximum amount",
 	"balance_hidden_title" : "Wallet Balance Hidden",
-	"balance_hidden_message" : "Swipe your wallet balance to reveal it again."
+	"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}."
 }