fix: change unit on QuickConfirm screen

Author: limpbrains

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/QuickConfirm.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { Caption13Up, Display, BodyMB, BodyM } from '../../styles/text';
@@ -11,7 +11,7 @@ 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 type { LightningScreenProps } from '../../navigation/types';
@@ -21,6 +21,7 @@ import {
 	selectedNetworkSelector,
 	transactionFeeSelector,
 } from '../../store/reselect/wallet';
+import { unitSelector } from '../../store/reselect/settings';
 
 const PIE_SIZE = 140;
 const PIE_SHIFT = 70;
@@ -29,12 +30,14 @@ 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(() => {
@@ -84,6 +87,9 @@ const QuickConfirm = ({
 				onClosePress={(): void => {
 					navigation.navigate('Wallet');
 				}}
+				onBackPress={(): void => {
+					onChangeUnitOutside(unit);
+				}}
 			/>
 			<View style={styles.content} testID="Confirm">
 				<Display>
@@ -131,12 +137,12 @@ const QuickConfirm = ({
 					</View>
 				</View>
 
-				<View style={styles.amountContainer}>
+				<TouchableOpacity onPress={switchUnit} style={styles.amountContainer}>
 					<Caption13Up style={styles.amountCaption} color="purple">
 						{t('spending_label')}
 					</Caption13Up>
 					<Money sats={spendingAmount} size="displayT" symbol={true} />
-				</View>
+				</TouchableOpacity>
 
 				<SwipeToConfirm
 					text={t('transfer.swipe')}

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) => {
@@ -155,7 +165,10 @@ const QuickSetup = ({
 		}
 
 		if (isTransferringToSavings) {
-			navigation.navigate('QuickConfirm', { spendingAmount });
+			navigation.navigate('QuickConfirm', {
+				spendingAmount,
+				onChangeUnitOutside,
+			});
 			return;
 		}
 
@@ -181,13 +194,15 @@ const QuickSetup = ({
 		navigation.push('QuickConfirm', {
 			spendingAmount,
 			orderId: purchaseResponse.value.id,
+			onChangeUnitOutside,
 		});
 	}, [
 		lnSetup,
 		max0ConfClientBalance,
 		navigation,
 		sliderActive,
 		spendingAmount,
+		onChangeUnitOutside,
 		t,
 	]);