From 581b1bfb430ff6aab2e8c34657d3a2d9773ff51f Mon Sep 17 00:00:00 2001 From: Ovi Trif Date: Wed, 17 Jan 2024 16:47:44 +0100 Subject: [PATCH] feat(wallet): Show info toast when switching units --- src/components/BalanceHeader.tsx | 6 ++-- src/hooks/wallet.ts | 39 +++++++++++++++++++++ src/screens/Wallets/WalletsDetail/index.tsx | 8 ++--- src/store/migrations/index.ts | 1 + src/store/reselect/user.ts | 5 +++ src/store/slices/user.ts | 6 ++++ src/utils/i18n/locales/en/wallet.json | 4 ++- 7 files changed, 61 insertions(+), 8 deletions(-) diff --git a/src/components/BalanceHeader.tsx b/src/components/BalanceHeader.tsx index 969ef4ab7..23c5b0b84 100644 --- a/src/components/BalanceHeader.tsx +++ b/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 => { + onPress={onSwitchUnit}> 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()); + } + }; +} diff --git a/src/screens/Wallets/WalletsDetail/index.tsx b/src/screens/Wallets/WalletsDetail/index.tsx index c21f5ddc4..6e8430050 100644 --- a/src/screens/Wallets/WalletsDetail/index.tsx +++ b/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}> - + user.ignoresHideBalanceToast, ); + +export const ignoresSwitchUnitToastSelector = createSelector( + [userState], + (user): boolean => user.ignoresSwitchUnitToast, +); diff --git a/src/store/slices/user.ts b/src/store/slices/user.ts index 955488715..063c0913d 100644 --- a/src/store/slices/user.ts +++ b/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; diff --git a/src/utils/i18n/locales/en/wallet.json b/src/utils/i18n/locales/en/wallet.json index 90087bcf8..d67e4eb3b 100644 --- a/src/utils/i18n/locales/en/wallet.json +++ b/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}." }