feat: show geoblock screen during CJIT

Author: limpbrains

src/assets/illustrations/globe.png

@@ -11,6 +11,7 @@ import ReceiveQR from '../../screens/Wallets/Receive/ReceiveQR';
 import ReceiveDetails from '../../screens/Wallets/Receive/ReceiveDetails';
 import Tags from '../../screens/Wallets/Receive/Tags';
 import ReceiveAmount from '../../screens/Wallets/Receive/ReceiveAmount';
+import ReceiveGeoBlocked from '../../screens/Wallets/Receive/ReceiveGeoBlocked';
 import ReceiveConnect from '../../screens/Wallets/Receive/ReceiveConnect';
 import Liquidity from '../../screens/Wallets/Receive/Liquidity';
 import { useSnapPoints } from '../../hooks/bottomSheet';
@@ -31,6 +32,7 @@ export type ReceiveStackParamList = {
 	};
 	Tags: undefined;
 	ReceiveAmount: undefined;
+	ReceiveGeoBlocked: undefined;
 	ReceiveConnect: { isAdditional: boolean } | undefined;
 	Liquidity: {
 		channelSize: number;
@@ -73,6 +75,10 @@ const ReceiveNavigation = (): ReactElement => {
 					<Stack.Screen name="ReceiveDetails" component={ReceiveDetails} />
 					<Stack.Screen name="Tags" component={Tags} />
 					<Stack.Screen name="ReceiveAmount" component={ReceiveAmount} />
+					<Stack.Screen
+						name="ReceiveGeoBlocked"
+						component={ReceiveGeoBlocked}
+					/>
 					<Stack.Screen name="ReceiveConnect" component={ReceiveConnect} />
 					<Stack.Screen name="Liquidity" component={Liquidity} />
 				</Stack.Navigator>

src/navigation/bottom-sheet/ReceiveNavigation.tsx

@@ -0,0 +1,87 @@
+import React, { memo, ReactElement } from 'react';
+import { StyleSheet, View, Image } from 'react-native';
+import { useTranslation } from 'react-i18next';
+
+import BottomSheetNavigationHeader from '../../../components/BottomSheetNavigationHeader';
+import SafeAreaInset from '../../../components/SafeAreaInset';
+import GradientView from '../../../components/GradientView';
+import Button from '../../../components/buttons/Button';
+import { useAppDispatch } from '../../../hooks/redux';
+import { closeSheet } from '../../../store/slices/ui';
+import { rootNavigation } from '../../../navigation/root/RootNavigator';
+import type { ReceiveScreenProps } from '../../../navigation/types';
+import { BodyM } from '../../../styles/text';
+
+const imageSrc = require('../../../assets/illustrations/globe.png');
+
+const ReceiveGeoBlocked =
+	({}: ReceiveScreenProps<'ReceiveGeoBlocked'>): ReactElement => {
+		const { t } = useTranslation('lightning');
+		const dispatch = useAppDispatch();
+		const handleManual = (): void => {
+			dispatch(closeSheet('receiveNavigation'));
+			rootNavigation.navigate('TransferRoot', { screen: 'FundingAdvanced' });
+		};
+
+		return (
+			<GradientView style={styles.root}>
+				<BottomSheetNavigationHeader
+					title={t('wallet:receive_bitcoin')}
+					displayBackButton={true}
+				/>
+
+				<View style={styles.content}>
+					<BodyM color="white64">{t('funding.text_blocked_cjit')}</BodyM>
+
+					<View style={styles.imageContainer}>
+						<Image style={styles.image} source={imageSrc} />
+					</View>
+
+					<View style={styles.buttonContainer}>
+						<Button
+							style={styles.button}
+							size="large"
+							text={t('funding_advanced.button2')}
+							testID="Close"
+							onPress={handleManual}
+						/>
+					</View>
+				</View>
+				<SafeAreaInset type="bottom" minPadding={16} />
+			</GradientView>
+		);
+	};
+
+const styles = StyleSheet.create({
+	root: {
+		flex: 1,
+	},
+	content: {
+		flex: 1,
+		paddingHorizontal: 16,
+	},
+	imageContainer: {
+		flexShrink: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+		alignSelf: 'center',
+		width: 256,
+		aspectRatio: 1,
+		marginTop: 'auto',
+	},
+	image: {
+		flex: 1,
+		resizeMode: 'contain',
+	},
+	buttonContainer: {
+		flexDirection: 'row',
+		justifyContent: 'center',
+		marginTop: 'auto',
+		gap: 16,
+	},
+	button: {
+		flex: 1,
+	},
+});
+
+export default memo(ReceiveGeoBlocked);

src/screens/Wallets/Receive/ReceiveGeoBlocked.tsx

@@ -280,7 +280,13 @@ const ReceiveQR = ({
 	]);
 
 	const onToggleInstant = useCallback((): void => {
-		if (!isGeoBlocked && !jitInvoice && lightningBalance.remoteBalance === 0) {
+		if (isGeoBlocked && lightningBalance.remoteBalance === 0) {
+			navigation.navigate('ReceiveGeoBlocked');
+		} else if (
+			!isGeoBlocked &&
+			!jitInvoice &&
+			lightningBalance.remoteBalance === 0
+		) {
 			navigation.navigate('ReceiveAmount');
 		} else {
 			setEnableInstant(!enableInstant);
@@ -582,10 +588,6 @@ const ReceiveQR = ({
 	const slides = useMemo((): Slide[] => [Slide1, Slide2], [Slide1, Slide2]);
 
 	const ReceiveInstantlySwitch = useCallback((): ReactElement => {
-		if (isGeoBlocked && !lightningBalance.remoteBalance) {
-			return <></>;
-		}
-
 		if (!isLDKReady) {
 			return (
 				<View style={styles.buttonContainer}>
@@ -622,14 +624,7 @@ const ReceiveQR = ({
 				</SwitchRow>
 			</View>
 		);
-	}, [
-		t,
-		isLDKReady,
-		enableInstant,
-		onToggleInstant,
-		isGeoBlocked,
-		lightningBalance.remoteBalance,
-	]);
+	}, [t, isLDKReady, enableInstant, onToggleInstant]);
 
 	return (
 		<>

src/screens/Wallets/Receive/ReceiveQR.tsx

@@ -23,6 +23,9 @@
 		"text_blocked": {
 			"string": "At this time, Bitkit cannot provide automatic Lightning connections to residents of the United States and Canada."
 		},
+		"text_blocked_cjit": {
+			"string": "Bitkit does not currently provide Lightning services to the USA or Canada, but you can still connect to other nodes directly."
+		},
 		"button1": {
 			"string": "Transfer from Savings"
 		},