feat(ui): add total balance conversion (#2337)

Author: pwltr

src/components/ActivityHeader.tsx

@@ -7,7 +7,6 @@ import {
 	ViewStyle,
 } from 'react-native';
 
-import { Caption13Up } from '../styles/text';
 import { EyeIcon } from '../styles/icons';
 import Money from './Money';
 import DetectSwipe from './DetectSwipe';
@@ -21,11 +20,9 @@ import {
 
 const ActivityHeader = ({
 	balance,
-	label,
 	style,
 }: {
 	balance: number;
-	label?: string;
 	style?: StyleProp<ViewStyle>;
 }): ReactElement => {
 	const dispatch = useAppDispatch();
@@ -40,7 +37,14 @@ const ActivityHeader = ({
 	return (
 		<View style={style}>
 			<View style={styles.label}>
-				<Caption13Up color="secondary">{label}</Caption13Up>
+				<Money
+					sats={balance}
+					unitType="secondary"
+					color="secondary"
+					size="caption13Up"
+					enableHide={true}
+					symbol={true}
+				/>
 			</View>
 
 			<DetectSwipe

src/components/BalanceHeader.tsx

@@ -27,25 +27,33 @@ const BalanceHeader = (): ReactElement => {
 	return (
 		<View style={styles.container}>
 			<View style={styles.label}>
-				{pendingPaymentsBalance ? (
+				<Money
+					sats={totalBalance}
+					unitType="secondary"
+					color="secondary"
+					size="caption13Up"
+					enableHide={true}
+					symbol={true}
+				/>
+
+				{pendingPaymentsBalance !== 0 && (
 					<Trans
 						t={t}
 						i18nKey="balance_total_pending"
 						components={{
 							text: <Caption13Up color="secondary" />,
 							pending: (
 								<Money
+									sats={pendingPaymentsBalance}
+									unitType="secondary"
 									color="secondary"
 									size="caption13Up"
-									sats={pendingPaymentsBalance}
 									enableHide={true}
 									symbol={false}
 								/>
 							),
 						}}
 					/>
-				) : (
-					<Caption13Up color="secondary">{t('balance_total')}</Caption13Up>
 				)}
 			</View>
 

src/screens/Activity/ActivitySavings.tsx

@@ -71,10 +71,7 @@ const ActivitySavings = ({
 			</View>
 
 			<View style={styles.content}>
-				<ActivityHeader
-					label={t('activity_transfer_savings')}
-					balance={onchainBalance}
-				/>
+				<ActivityHeader balance={onchainBalance} />
 
 				{balanceInTransferToSavings !== 0 && (
 					<View style={styles.transfer}>

src/screens/Activity/ActivitySpending.tsx

@@ -59,10 +59,7 @@ const ActivitySpending = ({
 			</View>
 
 			<View style={styles.content}>
-				<ActivityHeader
-					label={t('activity_transfer_spending')}
-					balance={lightningBalance}
-				/>
+				<ActivityHeader balance={lightningBalance} />
 
 				{balanceInTransferToSpending !== 0 && (
 					<View style={styles.transfer}>

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

@@ -5,11 +5,8 @@
 	"receive": {
 		"string": "Receive"
 	},
-	"balance_total": {
-		"string": "Total balance"
-	},
 	"balance_total_pending": {
-		"string": "<text>Total balance (</text><pending/><text> pending)</text>"
+		"string": "<text> (</text><pending/><text> pending)</text>"
 	},
 	"create_wallet_error": {
 		"string": "Please reopen the app and try again."
@@ -380,12 +377,6 @@
 	"activity_transfer": {
 		"string": "Transfer"
 	},
-	"activity_transfer_spending": {
-		"string": "Spending Balance"
-	},
-	"activity_transfer_savings": {
-		"string": "Savings Balance"
-	},
 	"activity_transfer_savings_pending": {
 		"string": "From Spending (±{duration})"
 	},