From 1f0b7e49dac84ba1c4fe7cbf18142303480df7bc Mon Sep 17 00:00:00 2001
From: Ivan Vershigora <ivan.vershigora@gmail.com>
Date: Wed, 16 Oct 2024 13:19:45 +0100
Subject: [PATCH] fix: add error handling durin CJIT flow

---
 src/screens/Wallets/Receive/ReceiveAmount.tsx | 13 ++-
 .../Wallets/Receive/ReceiveConnect.tsx        | 85 ++++++++++++-------
 2 files changed, 66 insertions(+), 32 deletions(-)

diff --git a/src/screens/Wallets/Receive/ReceiveAmount.tsx b/src/screens/Wallets/Receive/ReceiveAmount.tsx
index 85a4c4f63..6f0270dc2 100644
--- a/src/screens/Wallets/Receive/ReceiveAmount.tsx
+++ b/src/screens/Wallets/Receive/ReceiveAmount.tsx
@@ -23,6 +23,7 @@ import { updateInvoice } from '../../../store/slices/receive';
 import { receiveSelector } from '../../../store/reselect/receive';
 import { estimateOrderFee } from '../../../utils/blocktank';
 import { getNumberPadText } from '../../../utils/numberpad';
+import { showToast } from '../../../utils/notifications';
 import { blocktankInfoSelector } from '../../../store/reselect/blocktank';
 import { refreshBlocktankInfo } from '../../../store/utils/blocktank';
 import {
@@ -63,11 +64,17 @@ const ReceiveAmount = ({
 				// add 10% buffer and round up to the nearest 1000 to avoid fee fluctuations
 				const minimum = Math.ceil((feeResult.value * 1.1) / 1000) * 1000;
 				setMinimumAmount(minimum);
+			} else {
+				showToast({
+					type: 'error',
+					title: t('receive_cjit_error'),
+					description: feeResult.error.message,
+				});
 			}
 		};
 
 		getFeeEstimation();
-	}, [channelSize]);
+	}, [t, channelSize]);
 
 	const onMinimum = (): void => {
 		const result = getNumberPadText(minimumAmount, denomination, unit);
@@ -89,7 +96,9 @@ const ReceiveAmount = ({
 	};
 
 	const continueDisabled =
-		invoice.amount < minimumAmount || invoice.amount > channelSize;
+		invoice.amount < minimumAmount ||
+		invoice.amount > channelSize ||
+		minimumAmount === 0;
 
 	return (
 		<GradientView style={styles.container}>
diff --git a/src/screens/Wallets/Receive/ReceiveConnect.tsx b/src/screens/Wallets/Receive/ReceiveConnect.tsx
index c89c92024..7a06a3bfa 100644
--- a/src/screens/Wallets/Receive/ReceiveConnect.tsx
+++ b/src/screens/Wallets/Receive/ReceiveConnect.tsx
@@ -1,5 +1,5 @@
 import React, { memo, ReactElement, useEffect, useState } from 'react';
-import { StyleSheet, View, Image } from 'react-native';
+import { StyleSheet, View, Image, ActivityIndicator } from 'react-native';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { Caption13Up, BodyMB, BodyM } from '../../../styles/text';
@@ -33,6 +33,7 @@ const ReceiveConnect = ({
 	const lightningBalance = useLightningBalance(true);
 	const [feeEstimate, setFeeEstimate] = useState(0);
 	const [isLoading, setIsLoading] = useState(false);
+	const [isLoadingFee, setIsLoadingFee] = useState(false);
 	const dispatch = useAppDispatch();
 	const blocktank = useAppSelector(blocktankInfoSelector);
 	const { amount, message } = useAppSelector(receiveSelector);
@@ -47,14 +48,22 @@ const ReceiveConnect = ({
 
 	useEffect(() => {
 		const getFeeEstimation = async (): Promise<void> => {
+			setIsLoadingFee(true);
 			const estimate = await estimateOrderFee({ lspBalance });
 			if (estimate.isOk()) {
 				setFeeEstimate(estimate.value);
+			} else {
+				showToast({
+					type: 'error',
+					title: t('receive_cjit_error'),
+					description: estimate.error.message,
+				});
 			}
+			setIsLoadingFee(false);
 		};
 
 		getFeeEstimation();
-	}, [lspBalance]);
+	}, [t, lspBalance]);
 
 	const onMore = (): void => {
 		navigation.navigate('Liquidity', {
@@ -95,34 +104,44 @@ const ReceiveConnect = ({
 			<View style={styles.content}>
 				<AmountToggle amount={amount} />
 
-				<BodyM style={styles.text} color="secondary">
-					<Trans
-						t={t}
-						i18nKey={
-							isInitial
-								? 'receive_connect_initial'
-								: 'receive_connect_additional'
-						}
-						components={{ accent: <BodyMB color="white" /> }}
-						values={{ lspFee: `${fiatSymbol}${displayFee.fiatFormatted}` }}
-					/>
-				</BodyM>
-
-				<View style={styles.payAmount}>
-					<Caption13Up style={styles.payAmountText} color="secondary">
-						{t('receive_will')}
-					</Caption13Up>
-					<Money
-						sats={payAmount}
-						size="title"
-						symbol={true}
-						testID="AvailableAmount"
-					/>
-				</View>
-
-				<View style={styles.imageContainer}>
-					<Image style={styles.image} source={imageSrc} />
-				</View>
+				{feeEstimate > 0 && (
+					<>
+						<BodyM style={styles.text} color="secondary">
+							<Trans
+								t={t}
+								i18nKey={
+									isInitial
+										? 'receive_connect_initial'
+										: 'receive_connect_additional'
+								}
+								components={{ accent: <BodyMB color="white" /> }}
+								values={{ lspFee: `${fiatSymbol}${displayFee.fiatFormatted}` }}
+							/>
+						</BodyM>
+
+						<View style={styles.payAmount}>
+							<Caption13Up style={styles.payAmountText} color="secondary">
+								{t('receive_will')}
+							</Caption13Up>
+							<Money
+								sats={payAmount}
+								size="title"
+								symbol={true}
+								testID="AvailableAmount"
+							/>
+						</View>
+
+						<View style={styles.imageContainer}>
+							<Image style={styles.image} source={imageSrc} />
+						</View>
+					</>
+				)}
+
+				{isLoadingFee && (
+					<View style={styles.indicator}>
+						<ActivityIndicator color="white" size="large" />
+					</View>
+				)}
 
 				<View style={styles.buttonContainer}>
 					<Button
@@ -132,6 +151,7 @@ const ReceiveConnect = ({
 						variant="secondary"
 						testID="ReceiveConnectMore"
 						onPress={onMore}
+						disabled={feeEstimate === 0}
 					/>
 					<Button
 						style={styles.button}
@@ -140,6 +160,7 @@ const ReceiveConnect = ({
 						loading={isLoading}
 						testID="ReceiveConnectContinue"
 						onPress={onContinue}
+						disabled={feeEstimate === 0}
 					/>
 				</View>
 			</View>
@@ -177,6 +198,10 @@ const styles = StyleSheet.create({
 		flex: 1,
 		resizeMode: 'contain',
 	},
+	indicator: {
+		marginTop: 'auto',
+		marginBottom: 'auto',
+	},
 	buttonContainer: {
 		flexDirection: 'row',
 		justifyContent: 'center',