fix(ui): ui updates (#2148)

e2e/backup.e2e.js

@@ -103,8 +103,6 @@ d('Backup', () => {
 		await element(by.id('WidgetsEdit')).tap();
 		await expect(element(by.id('PriceWidget'))).toBeVisible();
 
-		await element(by.id('TransferButton')).swipe('up');
-
 		// get seed
 		await element(by.id('Settings')).tap();
 		await element(by.id('BackupSettings')).tap();

e2e/channels.e2e.js

@@ -142,7 +142,8 @@ d('LN Channel Onboarding', () => {
 			await waitFor(element(by.id('Suggestion-lightningSettingUp')))
 				.toBeVisible()
 				.withTimeout(10000);
-			await element(by.id('TransferButton')).tap();
+			await element(by.id('ActivitySavings')).tap();
+			await element(by.id('TransferToSpending')).tap();
 			await element(by.id('QuickSetupAdvanced')).tap();
 
 			// NumberPad

e2e/lightning.e2e.js

@@ -260,7 +260,7 @@ d('Lightning', () => {
 				.withTimeout(10000);
 
 			// check tx history
-			await element(by.id('TransferButton')).swipe('up');
+			await element(by.id('WalletsScrollView')).scroll(1000, 'down', NaN, 0.85);
 			await expect(
 				element(by.text('1 000').withAncestor(by.id('ActivityShort-1'))),
 			).toBeVisible();
@@ -394,7 +394,7 @@ d('Lightning', () => {
 				.withTimeout(10000);
 
 			// check tx history
-			await element(by.id('TransferButton')).swipe('up');
+			await element(by.id('WalletsScrollView')).scroll(1000, 'down', NaN, 0.85);
 			await expect(
 				element(by.text('111').withAncestor(by.id('ActivityShort-2'))),
 			).toBeVisible();

e2e/onchain.e2e.js

@@ -145,7 +145,7 @@ d('Onchain', () => {
 			).toHaveText('0');
 
 			// check Activity
-			await element(by.id('TransferButton')).swipe('up');
+			await element(by.id('WalletsScrollView')).scroll(1000, 'down', NaN, 0.85);
 			await expect(element(by.id('ActivityShort-1'))).toBeVisible();
 			await expect(element(by.id('ActivityShort-2'))).toBeVisible();
 			await expect(element(by.id('ActivityShort-3'))).toBeVisible();
@@ -311,7 +311,7 @@ d('Onchain', () => {
 			).toHaveText('0');
 
 			// check number of outputs for send tx
-			await element(by.id('TransferButton')).swipe('up');
+			await element(by.id('WalletsScrollView')).scroll(1000, 'down', NaN, 0.85);
 			await expect(element(by.id('ActivityShort-1'))).toBeVisible();
 			await expect(element(by.id('ActivityShort-2'))).toBeVisible();
 			await element(by.id('ActivityShowAll')).tap();

package.json

@@ -47,7 +47,7 @@
     "@reduxjs/toolkit": "2.2.6",
     "@shopify/react-native-skia": "1.2.1",
     "@synonymdev/blocktank-client": "0.0.50",
-    "@synonymdev/blocktank-lsp-http-client": "1.1.2",
+    "@synonymdev/blocktank-lsp-http-client": "1.5.0",
     "@synonymdev/feeds": "3.0.0",
     "@synonymdev/ledger": "0.0.5",
     "@synonymdev/react-native-ldk": "0.0.148",

src/components/Balances.tsx

@@ -1,34 +1,64 @@
 import React, { memo, ReactElement } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslation } from 'react-i18next';
 
-import { View as ThemedView } from '../styles/components';
 import {
-	TransferIcon,
 	BitcoinCircleIcon,
 	LightningCircleIcon,
+	TransferIcon,
 } from '../styles/icons';
-import Button from './buttons/Button';
-import NetworkRow from './NetworkRow';
+import { Caption13Up } from '../styles/text';
+import { View as ThemedView } from '../styles/components';
+import Money from './Money';
 import { useBalance } from '../hooks/wallet';
-import { useAppSelector } from '../hooks/redux';
 import { RootNavigationProp } from '../navigation/types';
-import { isGeoBlockedSelector } from '../store/reselect/user';
+
+const Balance = ({
+	label,
+	balance,
+	icon,
+	hasPending,
+	testID,
+	onPress,
+}: {
+	label: string;
+	balance: number;
+	icon: ReactElement;
+	hasPending?: boolean;
+	testID?: string;
+	onPress?: () => void;
+}): ReactElement => (
+	<TouchableOpacity
+		style={styles.balance}
+		activeOpacity={0.7}
+		testID={testID}
+		onPress={onPress}>
+		<Caption13Up color="secondary">{label}</Caption13Up>
+		<View style={styles.content}>
+			{icon}
+			<Money
+				style={styles.amount}
+				sats={balance}
+				size="bodyMSB"
+				enableHide={true}
+				symbolColor="white"
+			/>
+			{hasPending && <TransferIcon color="white50" height={16} width={16} />}
+		</View>
+	</TouchableOpacity>
+);
 
 const Balances = (): ReactElement => {
 	const { t } = useTranslation('wallet');
 	const navigation = useNavigation<RootNavigationProp>();
-	const isGeoBlocked = useAppSelector(isGeoBlockedSelector);
 	const {
 		onchainBalance,
 		lightningBalance,
 		balanceInTransferToSpending,
 		balanceInTransferToSavings,
 	} = useBalance();
 
-	const canTransfer = (onchainBalance || lightningBalance) && !isGeoBlocked;
-
 	const onSavingsPress = (): void => {
 		navigation.navigate('Wallet', { screen: 'ActivitySavings' });
 	};
@@ -37,39 +67,22 @@ const Balances = (): ReactElement => {
 		navigation.navigate('Wallet', { screen: 'ActivitySpending' });
 	};
 
-	const onTransfer = (): void => {
-		if (canTransfer) {
-			navigation.navigate('LightningRoot', { screen: 'QuickSetup' });
-		}
-	};
-
 	return (
 		<View style={styles.root}>
-			<NetworkRow
-				title={t('details_savings_title')}
+			<Balance
+				label={t('details_savings_title')}
 				balance={onchainBalance}
-				pendingBalance={balanceInTransferToSavings}
-				icon={<BitcoinCircleIcon color="brand" width={32} height={32} />}
+				icon={<BitcoinCircleIcon width={24} height={24} />}
+				hasPending={balanceInTransferToSavings !== 0}
 				testID="ActivitySavings"
 				onPress={onSavingsPress}
 			/>
-			<View style={styles.transferRow}>
-				<ThemedView style={styles.line} color="white16" />
-				<Button
-					style={styles.transferButton}
-					color="white16"
-					icon={<TransferIcon color="white" />}
-					disabled={!canTransfer}
-					testID="TransferButton"
-					onPress={onTransfer}
-				/>
-				<ThemedView style={styles.line} color="white16" />
-			</View>
-			<NetworkRow
-				title={t('details_spending_title')}
+			<ThemedView style={styles.divider} color="white16" />
+			<Balance
+				label={t('details_spending_title')}
 				balance={lightningBalance}
-				pendingBalance={balanceInTransferToSpending}
-				icon={<LightningCircleIcon width={32} height={32} />}
+				icon={<LightningCircleIcon width={24} height={24} />}
+				hasPending={balanceInTransferToSpending !== 0}
 				testID="ActivitySpending"
 				onPress={onSpendingPress}
 			/>
@@ -79,25 +92,26 @@ const Balances = (): ReactElement => {
 
 const styles = StyleSheet.create({
 	root: {
-		marginTop: 32,
-	},
-	transferRow: {
+		marginTop: 22,
+		paddingHorizontal: 16,
 		flexDirection: 'row',
-		alignItems: 'center',
-		paddingVertical: 10,
+		justifyContent: 'space-between',
 	},
-	transferButton: {
-		paddingHorizontal: 15,
-		height: 40,
-		borderRadius: 54,
+	divider: {
+		width: 1,
+		marginRight: 16,
+	},
+	balance: {
+		flex: 1,
+	},
+	content: {
 		flexDirection: 'row',
-		justifyContent: 'center',
 		alignItems: 'center',
-		marginHorizontal: 16,
+		marginTop: 8,
 	},
-	line: {
-		flex: 1,
-		height: 1,
+	amount: {
+		marginLeft: 8,
+		marginRight: 3,
 	},
 });
 

src/components/Money.tsx

@@ -81,9 +81,9 @@ const Money = (props: MoneyProps): ReactElement => {
 			case 'title':
 				return [Title, 6];
 			case 'displayT':
-				return [DisplayT, 8];
+				return [DisplayT, 6];
 			default:
-				return [Display, 10];
+				return [Display, 6];
 		}
 	}, [size]);