fix: external channel UI (#2265)

* fix(transfer): geoblocked UI * fix(transfer): add basic node connection validation * test(transfer): clean up e2e tests
synonymdev · Oct 1, 2024 · 043cb7b · 043cb7b
1 parent b60fef8
commit 043cb7b
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 96 deletions.
diff --git a/e2e/channels.e2e.js b/e2e/channels.e2e.js
@@ -14,6 +14,8 @@ import {
 	launchAndWait,
 	markComplete,
 	sleep,
+	waitForActiveChannel,
+	waitForPeerConnection,
 } from './helpers';
 
 d = checkComplete(['transfer-1', 'transfer-2']) ? describe.skip : describe;
@@ -210,6 +212,20 @@ d('Transfer', () => {
 			.withTimeout(20000);
 		await element(by.id('NewTxPrompt')).swipe('down');
 
+		// Get LDK node id
+		await element(by.id('Settings')).tap();
+		await element(by.id('AdvancedSettings')).tap();
+		// wait for LDK to start
+		await sleep(5000);
+		await element(by.id('LightningNodeInfo')).tap();
+		await waitFor(element(by.id('LDKNodeID')))
+			.toBeVisible()
+			.withTimeout(60000);
+		let { label: ldkNodeId } = await element(
+			by.id('LDKNodeID'),
+		).getAttributes();
+		await element(by.id('NavigationClose')).tap();
+
 		// Get LND node id
 		const lnd = await createLnRpc(lndConfig);
 		const { identityPubkey: lndNodeId } = await lnd.getInfo();
@@ -228,21 +244,7 @@ d('Transfer', () => {
 		await element(by.id('ExternalContinue')).tap();
 
 		// wait for peer to be connected
-		let n = 0;
-		const maxRetries = 20;
-
-		while (n < maxRetries) {
-			await sleep(1000);
-			const { peers } = await lnd.listPeers();
-			if (peers.length > 0) {
-				break;
-			}
-			n++;
-		}
-
-		if (n === maxRetries) {
-			throw new Error('Peer not connected');
-		}
+		await waitForPeerConnection(lnd, ldkNodeId);
 
 		// Set amount
 		await element(by.id('N2').withAncestor(by.id('ExternalAmount'))).tap();
@@ -274,7 +276,7 @@ d('Transfer', () => {
 		// TODO: mine single blocks and check updated transfer time
 
 		// wait for channel to be opened
-		await sleep(5000);
+		await waitForActiveChannel(lnd, ldkNodeId);
 
 		await expect(
 			element(by.id('Suggestion-lightningSettingUp')),

diff --git a/e2e/helpers.js b/e2e/helpers.js
@@ -142,3 +142,42 @@ export const launchAndWait = async () => {
 		}
 	}
 };
+
+export const waitForPeerConnection = async (lnd, nodeId, maxRetries = 20) => {
+	let retries = 0;
+
+	while (retries < maxRetries) {
+		await sleep(1000);
+		const { peers } = await lnd.listPeers();
+		if (peers?.some((p) => p.pubKey === nodeId)) {
+			break;
+		}
+		retries++;
+	}
+
+	if (retries === maxRetries) {
+		throw new Error('Peer not connected');
+	}
+};
+
+export const waitForActiveChannel = async (lnd, nodeId, maxRetries = 20) => {
+	let retries = 0;
+
+	while (retries < maxRetries) {
+		await sleep(1000);
+		const { channels } = await lnd.listChannels({
+			peer: Buffer.from(nodeId, 'hex'),
+			activeOnly: true,
+		});
+
+		if (channels?.length > 0) {
+			break;
+		}
+
+		retries++;
+	}
+
+	if (retries === maxRetries) {
+		throw new Error('Channel not active');
+	}
+};
diff --git a/e2e/lightning.e2e.js b/e2e/lightning.e2e.js
@@ -13,6 +13,8 @@ import {
 	launchAndWait,
 	markComplete,
 	sleep,
+	waitForActiveChannel,
+	waitForPeerConnection,
 } from './helpers';
 
 d = checkComplete('lighting-1') ? describe.skip : describe;
@@ -79,7 +81,7 @@ d('Lightning', () => {
 			await waitFor(element(by.id('LDKNodeID')))
 				.toBeVisible()
 				.withTimeout(60000);
-			let { label: ldkNodeID } = await element(
+			let { label: ldkNodeId } = await element(
 				by.id('LDKNodeID'),
 			).getAttributes();
 			await element(by.id('NavigationBack')).atIndex(0).tap();
@@ -97,47 +99,19 @@ d('Lightning', () => {
 			await element(by.id('NavigationClose')).tap();
 
 			// wait for peer to be connected
-			let n = 0;
-			const maxRetries = 20;
-
-			while (n < maxRetries) {
-				await sleep(1000);
-				const { peers } = await lnd.listPeers();
-				if (peers.some((p) => p.pubKey === ldkNodeID)) {
-					break;
-				}
-				n++;
-			}
-
-			if (n === maxRetries) {
-				throw new Error('Peer not connected');
-			}
+			await waitForPeerConnection(lnd, ldkNodeId);
 
 			// open a channel
 			await lnd.openChannelSync({
-				nodePubkeyString: ldkNodeID,
+				nodePubkeyString: ldkNodeId,
 				localFundingAmount: '100000',
 				private: true,
 			});
 			await rpc.generateToAddress(6, await rpc.getNewAddress());
 			await waitForElectrum();
 
 			// wait for channel to be active
-			let m = 0;
-			while (m < 20) {
-				await sleep(1000);
-				const { channels } = await lnd.listChannels({
-					peer: Buffer.from(ldkNodeID, 'hex'),
-					activeOnly: true,
-				});
-				if (channels?.length > 0) {
-					break;
-				}
-				m++;
-				if (m === 0) {
-					throw new Error('Channel not active');
-				}
-			}
+			await waitForActiveChannel(lnd, ldkNodeId);
 
 			// check channel status
 			await element(by.id('Settings')).tap();

diff --git a/src/screens/Transfer/ExternalNode/Connection.tsx b/src/screens/Transfer/ExternalNode/Connection.tsx
@@ -73,6 +73,7 @@ const ExternalNode = ({
 				title: t('error_add_title'),
 				description: addPeerRes.error.message,
 			});
+			setLoading(false);
 			return;
 		}
 		const savePeerRes = savePeer({ peer: info });
@@ -82,12 +83,15 @@ const ExternalNode = ({
 				title: t('error_save_title'),
 				description: savePeerRes.error.message,
 			});
+			setLoading(false);
 			return;
 		}
 		setLoading(false);
 		navigation.navigate('ExternalAmount', { nodeId });
 	};
 
+	const isValid = nodeId.length === 66 && host && port;
+
 	return (
 		<ThemedView style={styles.root}>
 			<SafeAreaInset type="top" />
@@ -118,6 +122,7 @@ const ExternalNode = ({
 					multiline={true}
 					underlineColorAndroid="transparent"
 					returnKeyType="done"
+					blurOnSubmit={true}
 					autoCapitalize="none"
 					autoComplete="off"
 					autoCorrect={false}
@@ -182,6 +187,7 @@ const ExternalNode = ({
 						text={t('continue')}
 						size="large"
 						loading={loading}
+						disabled={!isValid}
 						testID="ExternalContinue"
 						onPress={onContinue}
 					/>

diff --git a/src/screens/Transfer/Funding.tsx b/src/screens/Transfer/Funding.tsx
@@ -9,7 +9,6 @@ import { View as ThemedView } from '../../styles/components';
 import RectangleButton from '../../components/buttons/RectangleButton';
 import SafeAreaInset from '../../components/SafeAreaInset';
 import NavigationHeader from '../../components/NavigationHeader';
-import Button from '../../components/buttons/Button';
 import { useBalance } from '../../hooks/wallet';
 import { isGeoBlockedSelector } from '../../store/reselect/user';
 import { TRANSACTION_DEFAULTS } from '../../utils/wallet/constants';
@@ -60,47 +59,28 @@ const Funding = ({
 					{text}
 				</BodyM>
 
-				<View style={styles.buttonContainer}>
-					{!isGeoBlocked && (
-						<>
-							<RectangleButton
-								icon={<TransferIcon color="purple" width={32} height={30} />}
-								text={t('funding.button1')}
-								disabled={!canTransfer || isGeoBlocked}
-								testID="FundTransfer"
-								onPress={onTransfer}
-							/>
+				<RectangleButton
+					icon={<TransferIcon color="purple" width={32} height={30} />}
+					text={t('funding.button1')}
+					disabled={!canTransfer || isGeoBlocked}
+					testID="FundTransfer"
+					onPress={onTransfer}
+				/>
 
-							<RectangleButton
-								icon={<QrIcon color="purple" width={32} height={30} />}
-								text={t('funding.button2')}
-								disabled={isGeoBlocked}
-								testID="FundReceive"
-								onPress={onFund}
-							/>
+				<RectangleButton
+					icon={<QrIcon color="purple" width={32} height={30} />}
+					text={t('funding.button2')}
+					disabled={isGeoBlocked}
+					testID="FundReceive"
+					onPress={onFund}
+				/>
 
-							<RectangleButton
-								icon={
-									<ShareAndroidIcon color="purple" width={32} height={30} />
-								}
-								text={t('funding.button3')}
-								testID="FundCustom"
-								onPress={onAdvanced}
-							/>
-						</>
-					)}
-				</View>
-
-				{isGeoBlocked && (
-					<Button
-						style={styles.button}
-						text={t('cancel')}
-						size="large"
-						onPress={(): void => {
-							navigation.navigate('Wallet');
-						}}
-					/>
-				)}
+				<RectangleButton
+					icon={<ShareAndroidIcon color="purple" width={32} height={30} />}
+					text={t('funding.button3')}
+					testID="FundCustom"
+					onPress={onAdvanced}
+				/>
 			</View>
 
 			{/* <Dialog
@@ -134,14 +114,7 @@ const styles = StyleSheet.create({
 	},
 	text: {
 		marginTop: 4,
-	},
-	buttonContainer: {
-		marginTop: 32,
-	},
-	button: {
-		flexDirection: 'row',
-		marginTop: 'auto',
-		marginHorizontal: 16,
+		marginBottom: 32,
 	},
 });