fix: remove custom amount button from LN channel flow

synonymdev · May 30, 2024 · da4faf1 · da4faf1
1 parent 8de4fa7
commit da4faf1
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 42 deletions.
diff --git a/e2e/channels.e2e.js b/e2e/channels.e2e.js
@@ -95,7 +95,7 @@ d('LN Channel Onboarding', () => {
 			// should show 80% limit note
 			await element(by.id('SliderHandle')).swipe('right', 'slow', NaN, 0.8);
 			await expect(element(by.id('QuickSetupBlocktankNote'))).toBeVisible();
-			await element(by.id('QuickSetupCustomAmount')).tap();
+			await element(by.id('QuickSetupTextField')).tap();
 			await element(by.id('NumberPadButtonsMax')).tap();
 			await element(by.id('NumberPadButtonsDone')).tap();
 			await expect(element(by.id('QuickSetupBlocktankNote'))).toBeVisible();
@@ -113,14 +113,14 @@ d('LN Channel Onboarding', () => {
 			// should show Blocktank limit note
 			await element(by.id('SliderHandle')).swipe('right', 'slow', NaN, 0.8);
 			await expect(element(by.id('QuickSetupBlocktankNote'))).toBeVisible();
-			await element(by.id('QuickSetupCustomAmount')).tap();
+			await element(by.id('QuickSetupTextField')).tap();
 			await element(by.id('NumberPadButtonsMax')).tap();
 			await element(by.id('NumberPadButtonsDone')).tap();
 			await expect(element(by.id('QuickSetupBlocktankNote'))).toBeVisible();
 
 			// NumberPad
 			await element(by.id('SliderHandle')).swipe('left');
-			await element(by.id('QuickSetupCustomAmount')).tap();
+			await element(by.id('QuickSetupTextField')).tap();
 			await element(by.id('N2').withAncestor(by.id('QuickSetup'))).tap();
 			await element(by.id('N0').withAncestor(by.id('QuickSetup'))).multiTap(5);
 			await element(by.id('NumberPadButtonsDone')).tap();
@@ -146,7 +146,7 @@ d('LN Channel Onboarding', () => {
 			await element(by.id('QuickSetupAdvanced')).tap();
 
 			// NumberPad
-			await element(by.id('CustomSetupCustomAmount')).tap();
+			await element(by.id('CustomSetupNumberField')).tap();
 			await element(by.id('NumberPadButtonsMax')).tap();
 			await element(by.id('NumberPadButtonsUnit')).tap();
 			await element(by.id('NumberPadButtonsDone')).tap();

diff --git a/src/screens/Lightning/CustomSetup.tsx b/src/screens/Lightning/CustomSetup.tsx
@@ -6,7 +6,12 @@ import React, {
 	useEffect,
 	useCallback,
 } from 'react';
-import { ImageSourcePropType, StyleSheet, View } from 'react-native';
+import {
+	ImageSourcePropType,
+	StyleSheet,
+	TouchableOpacity,
+	View,
+} from 'react-native';
 import { useFocusEffect } from '@react-navigation/native';
 import { FadeIn, FadeOut } from 'react-native-reanimated';
 import { useAppSelector } from '../../hooks/redux';
@@ -401,7 +406,6 @@ const CustomSetup = ({
 
 	const onCustomAmount = (): void => {
 		setShowNumberPad(true);
-		setTextFieldValue('0');
 	};
 
 	const onDone = useCallback(() => {
@@ -509,18 +513,12 @@ const CustomSetup = ({
 				{!showNumberPad && (
 					<AnimatedView color="transparent" entering={FadeIn} exiting={FadeOut}>
 						<View style={styles.barrels}>{getBarrels()}</View>
-						{spending && (
-							<Button
-								style={styles.buttonCustom}
-								text={t('enter_custom_amount')}
-								testID="CustomSetupCustomAmount"
-								onPress={onCustomAmount}
-							/>
-						)}
 					</AnimatedView>
 				)}
 
-				<View style={styles.amountContainer}>
+				<TouchableOpacity
+					onPress={onCustomAmount}
+					style={styles.amountContainer}>
 					{!showNumberPad && (
 						<View style={styles.amountLabel}>
 							<Caption13Up color="purple">
@@ -529,7 +527,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>
 							)}
@@ -539,9 +539,9 @@ const CustomSetup = ({
 						value={textFieldValue}
 						showPlaceholder={showNumberPad}
 						testID="CustomSetupNumberField"
-						onPress={onChangeUnit}
+						onPress={onCustomAmount}
 					/>
-				</View>
+				</TouchableOpacity>
 
 				{!showNumberPad && (
 					<AnimatedView
@@ -603,9 +603,6 @@ const styles = StyleSheet.create({
 		marginTop: 32,
 		marginBottom: 16,
 	},
-	buttonCustom: {
-		alignSelf: 'flex-start',
-	},
 	amountContainer: {
 		marginTop: 'auto',
 	},

diff --git a/src/screens/Lightning/QuickSetup.tsx b/src/screens/Lightning/QuickSetup.tsx
@@ -5,7 +5,7 @@ import React, {
 	useMemo,
 	useState,
 } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useFocusEffect } from '@react-navigation/native';
 import { FadeIn, FadeOut } from 'react-native-reanimated';
 import { Trans, useTranslation } from 'react-i18next';
@@ -137,7 +137,6 @@ const QuickSetup = ({
 
 	const onCustomAmount = (): void => {
 		setShowNumberPad(true);
-		setTextFieldValue('0');
 	};
 
 	const onDone = useCallback(() => {
@@ -281,22 +280,12 @@ const QuickSetup = ({
 								</BodyS>
 							</AnimatedView>
 						)}
-
-						<AnimatedView
-							color="transparent"
-							entering={FadeIn}
-							exiting={FadeOut}>
-							<Button
-								style={styles.buttonCustom}
-								text={t('enter_custom_amount')}
-								testID="QuickSetupCustomAmount"
-								onPress={onCustomAmount}
-							/>
-						</AnimatedView>
 					</>
 				)}
 
-				<View style={styles.amountContainer}>
+				<TouchableOpacity
+					onPress={onCustomAmount}
+					style={styles.amountContainer}>
 					{!showNumberPad && (
 						<Caption13Up style={styles.amountCaption} color="purple">
 							{t('spending_label')}
@@ -306,9 +295,9 @@ const QuickSetup = ({
 						value={textFieldValue}
 						showPlaceholder={showNumberPad}
 						testID="QuickSetupTextField"
-						onPress={onChangeUnit}
+						onPress={onCustomAmount}
 					/>
-				</View>
+				</TouchableOpacity>
 
 				{!showNumberPad && (
 					<AnimatedView
@@ -395,10 +384,6 @@ const styles = StyleSheet.create({
 		marginTop: 16,
 		marginHorizontal: -16,
 	},
-	buttonCustom: {
-		marginTop: 16,
-		alignSelf: 'flex-start',
-	},
 	buttonContainer: {
 		flexDirection: 'row',
 		gap: 16,