fix: switch unit on confirmation screen

src/hooks/displayValues.ts

@@ -5,11 +5,13 @@ import { IDisplayValues } from '../utils/displayValues/types';
 import {
 	denominationSelector,
 	selectedCurrencySelector,
+	unitSelector,
 } from '../store/reselect/settings';
 import {
 	exchangeRateSelector,
 	exchangeRatesSelector,
 } from '../store/reselect/wallet';
+import { EUnit } from '../store/types/wallet';
 
 export const useDisplayValues = (
 	satoshis: number,
@@ -68,3 +70,16 @@ export const useExchangeRate = (currency = 'USD'): number => {
 		return exchangeRates[currency]?.rate ?? 0;
 	}, [currency, exchangeRates]);
 };
+
+/**
+ * Returns the formatted display value for the current unit
+ */
+export const useCurrentDisplayValue = (
+	...props: Parameters<typeof useDisplayValues>
+): string => {
+	const unit = useAppSelector(unitSelector);
+	const dv = useDisplayValues(...props);
+	return unit === EUnit.BTC
+		? '₿' + dv.bitcoinFormatted
+		: dv.fiatSymbol + dv.fiatFormatted;
+};

src/navigation/lightning/LightningNavigator.tsx

@@ -19,6 +19,7 @@ import Success from '../../screens/Lightning/Success';
 import LNURLChannel from '../../screens/Lightning/LNURLChannel';
 import LNURLChannelSuccess from '../../screens/Lightning/LNURLChannelSuccess';
 import { __E2E__ } from '../../constants/env';
+import { EUnit } from '../../store/types/wallet';
 
 export type LightningNavigationProp =
 	NativeStackNavigationProp<LightningStackParamList>;
@@ -30,6 +31,7 @@ export type LightningStackParamList = {
 	QuickConfirm: {
 		spendingAmount: number;
 		orderId?: string;
+		onChangeUnitOutside: (nextUnit: EUnit) => void;
 	};
 	CustomSetup: { spending: boolean; spendingAmount?: number };
 	CustomConfirm: {

src/screens/Lightning/CustomSetup.tsx

@@ -497,7 +497,9 @@ const CustomSetup = ({
 							{channelOpenFee[`${spendingAmount}-${amount}`] && (
 								<AnimatedView entering={FadeIn} exiting={FadeOut}>
 									<Caption13Up style={styles.amountCaptionCost} color="gray2">
-										(Cost: {channelOpenFee[`${spendingAmount}-${amount}`]})
+										{t('cost', {
+											amount: channelOpenFee[`${spendingAmount}-${amount}`],
+										})}
 									</Caption13Up>
 								</AnimatedView>
 							)}

src/screens/Lightning/QuickConfirm.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { Caption13Up, Display, BodyMB, BodyM } from '../../styles/text';
@@ -11,16 +11,17 @@ import Percentage from '../../components/Percentage';
 import SwipeToConfirm from '../../components/SwipeToConfirm';
 import Money from '../../components/Money';
 import PieChart from './PieChart';
-import { useBalance } from '../../hooks/wallet';
+import { useBalance, useSwitchUnit } from '../../hooks/wallet';
 import { useAppSelector } from '../../hooks/redux';
-import { useCurrency, useDisplayValues } from '../../hooks/displayValues';
+import { useCurrentDisplayValue } from '../../hooks/displayValues';
 import type { LightningScreenProps } from '../../navigation/types';
 import { confirmChannelPurchase } from '../../store/utils/blocktank';
 import { blocktankOrdersSelector } from '../../store/reselect/blocktank';
 import {
 	selectedNetworkSelector,
 	transactionFeeSelector,
 } from '../../store/reselect/wallet';
+import { unitSelector } from '../../store/reselect/settings';
 
 const PIE_SIZE = 140;
 const PIE_SHIFT = 70;
@@ -29,33 +30,33 @@ const QuickConfirm = ({
 	navigation,
 	route,
 }: LightningScreenProps<'QuickConfirm'>): ReactElement => {
-	const { spendingAmount, orderId } = route.params;
+	const { spendingAmount, orderId, onChangeUnitOutside } = route.params;
 	const { onchainBalance, lightningBalance } = useBalance();
 	const { t } = useTranslation('lightning');
 	const orders = useAppSelector(blocktankOrdersSelector);
 	const transactionFee = useAppSelector(transactionFeeSelector);
 	const selectedNetwork = useAppSelector(selectedNetworkSelector);
+	const switchUnit = useSwitchUnit();
+	const unit = useAppSelector(unitSelector);
 	const [loading, setLoading] = useState(false);
 
 	const order = useMemo(() => {
 		return orders.find((o) => o.id === orderId);
 	}, [orderId, orders]);
 
-	const { fiatSymbol } = useCurrency();
 	const purchaseFee = useMemo(() => order?.feeSat ?? 0, [order]);
-	const purchaseFeeValue = useDisplayValues(purchaseFee);
-	const fiatTransactionFee = useDisplayValues(transactionFee);
-	const clientBalance = useDisplayValues(order?.clientBalanceSat ?? 0);
+	const clientBalance = useMemo(() => order?.clientBalanceSat ?? 0, [order]);
 
 	const isTransferToSavings = spendingAmount < lightningBalance;
-	const txFee = fiatTransactionFee.fiatValue;
-	const lspFee = purchaseFeeValue.fiatValue - clientBalance.fiatValue;
 	const totalBalance = onchainBalance + lightningBalance;
 	const savingsAmount = totalBalance - spendingAmount;
 
 	const spendingPercentage = Math.round((spendingAmount / totalBalance) * 100);
 	const savingsPercentage = Math.round((savingsAmount / totalBalance) * 100);
 
+	const txFee = useCurrentDisplayValue(transactionFee);
+	const lspFee = useCurrentDisplayValue(purchaseFee - clientBalance);
+
 	const handleConfirm = async (): Promise<void> => {
 		setLoading(true);
 
@@ -84,6 +85,9 @@ const QuickConfirm = ({
 				onClosePress={(): void => {
 					navigation.navigate('Wallet');
 				}}
+				onBackPress={(): void => {
+					onChangeUnitOutside(unit);
+				}}
 			/>
 			<View style={styles.content} testID="Confirm">
 				<Display>
@@ -101,10 +105,7 @@ const QuickConfirm = ({
 							t={t}
 							i18nKey="quick_confirm_cost"
 							components={{ accent: <BodyMB color="white" /> }}
-							values={{
-								txFee: `${fiatSymbol}${txFee.toFixed(2)}`,
-								lspFee: `${fiatSymbol}${lspFee.toFixed(2)}`,
-							}}
+							values={{ txFee, lspFee }}
 						/>
 					)}
 				</BodyM>
@@ -135,7 +136,9 @@ const QuickConfirm = ({
 					<Caption13Up style={styles.amountCaption} color="purple">
 						{t('spending_label')}
 					</Caption13Up>
-					<Money sats={spendingAmount} size="displayT" symbol={true} />
+					<Pressable onPress={switchUnit}>
+						<Money sats={spendingAmount} size="displayT" symbol={true} />
+					</Pressable>
 				</View>
 
 				<SwipeToConfirm

src/screens/Lightning/QuickSetup.tsx

@@ -42,6 +42,7 @@ import {
 	nextUnitSelector,
 	unitSelector,
 } from '../../store/reselect/settings';
+import { EUnit } from '../../store/types/wallet';
 
 const QuickSetup = ({
 	navigation,
@@ -117,11 +118,20 @@ const QuickSetup = ({
 		setTextFieldValue(result);
 	}, [lnSetup.slider.maxValue, denomination, unit]);
 
-	const onChangeUnit = (): void => {
+	const onChangeUnit = useCallback((): void => {
 		const result = getNumberPadText(spendingAmount, denomination, nextUnit);
 		setTextFieldValue(result);
 		switchUnit();
-	};
+	}, [denomination, spendingAmount, nextUnit, switchUnit]);
+
+	/** Used to update the unit on other screens */
+	const onChangeUnitOutside = useCallback(
+		(newUnit: EUnit): void => {
+			const result = getNumberPadText(spendingAmount, denomination, newUnit);
+			setTextFieldValue(result);
+		},
+		[denomination, spendingAmount],
+	);
 
 	const onSliderChange = useCallback(
 		(value: number) => {
@@ -156,7 +166,10 @@ const QuickSetup = ({
 		}
 
 		if (isTransferringToSavings) {
-			navigation.navigate('QuickConfirm', { spendingAmount });
+			navigation.navigate('QuickConfirm', {
+				spendingAmount,
+				onChangeUnitOutside,
+			});
 			return;
 		}
 
@@ -182,13 +195,15 @@ const QuickSetup = ({
 		navigation.push('QuickConfirm', {
 			spendingAmount,
 			orderId: purchaseResponse.value.id,
+			onChangeUnitOutside,
 		});
 	}, [
 		lnSetup,
 		max0ConfClientBalance,
 		navigation,
 		sliderActive,
 		spendingAmount,
+		onChangeUnitOutside,
 		t,
 	]);
 

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

@@ -55,6 +55,7 @@
 	"spending_amount_bitcoin": "Choose how much money you want to be able to spend instantly.",
 	"receiving_amount_money": "Choose how much money you want to be able to receive instantly.",
 	"receiving_amount_bitcoin": "Enter the amount of Bitcoin you want to be able to receive instantly.",
+	"cost": "(Cost: {amount})",
 	"enter_custom_amount": "Enter Amount",
 	"custom_confirm_header": "Please\n<accent>confirm</accent>",
 	"custom_confirm_cost": "It costs <accent>{txFee}</accent> in network fees and <accent>{lspFee}</accent> in service provider fees to transfer your funds. Your spending balance should stay active for at least <accentWithKeyboard>{weeks, plural, one {# week} other {# weeks}}.<penIcon/></accentWithKeyboard>",