fix(ui): fix orange ticket confetti (#1941)

src/screens/OrangeTicket.tsx

@@ -1,48 +1,20 @@
-import React, {
-	memo,
-	ReactElement,
-	useCallback,
-	useEffect,
-	useState,
-} from 'react';
-import { Image, StyleSheet, View } from 'react-native';
-import Lottie from 'lottie-react-native';
-import { useTranslation } from 'react-i18next';
+import React, { memo, ReactElement, useCallback, useEffect } from 'react';
 import { ldk } from '@synonymdev/react-native-ldk';
 
-import Button from '../components/Button';
-import AmountToggle from '../components/AmountToggle';
-import SafeAreaInset from '../components/SafeAreaInset';
-import BottomSheetWrapper from '../components/BottomSheetWrapper';
-import BottomSheetNavigationHeader from '../components/BottomSheetNavigationHeader';
-import { useAppDispatch, useAppSelector } from '../hooks/redux';
+import { useAppSelector } from '../hooks/redux';
 import { useLightningMaxInboundCapacity } from '../hooks/lightning';
-import { useBottomSheetBackPress, useSnapPoints } from '../hooks/bottomSheet';
 import { showToast } from '../utils/notifications';
 import { getNodeIdFromStorage, waitForLdk } from '../utils/lightning';
-import { closeSheet } from '../store/slices/ui';
 import { viewControllerSelector } from '../store/reselect/ui';
 import { createLightningInvoice } from '../store/utils/lightning';
 import { __TREASURE_HUNT_HOST__ } from '../constants/env';
-import { rootNavigation } from '../navigation/root/RootNavigator';
-
-const confettiPurpleSrc = require('../assets/lottie/confetti-purple.json');
-const imageSrc = require('../assets/illustrations/coin-stack-x.png');
 
 const OrangeTicket = (): ReactElement => {
-	const { t } = useTranslation('wallet');
-	const snapPoints = useSnapPoints('large');
-	const dispatch = useAppDispatch();
 	const maxInboundCapacitySat = useLightningMaxInboundCapacity();
-	const [isLoading, setIsLoading] = useState(true);
-	const [paymentHash, setPaymentHash] = useState<string>();
-	const [amount, setAmount] = useState<number>();
 	const { isOpen, ticketId } = useAppSelector((state) => {
 		return viewControllerSelector(state, 'orangeTicket');
 	});
 
-	useBottomSheetBackPress('orangeTicket');
-
 	const getPrize = useCallback(async (): Promise<void> => {
 		const getLightningInvoice = async (): Promise<string> => {
 			const response = await createLightningInvoice({
@@ -156,146 +128,27 @@ const OrangeTicket = (): ReactElement => {
 		if (chestResponse.error) {
 			return;
 		}
-		setAmount(chestResponse.amountSat);
 
 		const openResponse = await openChest();
 		if (openResponse.error) {
 			return;
 		}
-		setAmount(openResponse.amountSat);
 
 		const claimResponse = await claimPrize();
 		if (claimResponse.error) {
 			return;
 		}
-		setIsLoading(false);
-		setPaymentHash(claimResponse.btResponse.payment.paymentHash);
 	}, [ticketId, maxInboundCapacitySat]);
 
 	useEffect(() => {
 		if (!isOpen) {
-			setIsLoading(true);
 			return;
 		}
 
 		getPrize();
 	}, [isOpen, getPrize]);
 
-	if (!isOpen || isLoading) {
-		return <></>;
-	}
-
-	const onAmountPress = (): void => {
-		if (paymentHash) {
-			dispatch(closeSheet('orangeTicket'));
-			rootNavigation.navigate('ActivityDetail', { id: paymentHash });
-		}
-	};
-
-	const onButtonPress = (): void => {
-		dispatch(closeSheet('orangeTicket'));
-	};
-
-	return (
-		<BottomSheetWrapper
-			view="orangeTicket"
-			snapPoints={snapPoints}
-			backdrop={true}>
-			<View style={styles.root}>
-				<View style={styles.confetti} pointerEvents="none">
-					<Lottie
-						style={styles.lottie}
-						source={confettiPurpleSrc}
-						resizeMode="cover"
-						autoPlay
-						loop
-					/>
-				</View>
-				<BottomSheetNavigationHeader
-					title="Won Bitcoin!"
-					displayBackButton={false}
-				/>
-
-				<View style={styles.content}>
-					{amount && <AmountToggle amount={amount} onPress={onAmountPress} />}
-
-					<View style={styles.imageContainer} pointerEvents="none">
-						<Image style={styles.image1} source={imageSrc} />
-						<Image style={styles.image2} source={imageSrc} />
-						<Image style={styles.image3} source={imageSrc} />
-					</View>
-
-					<View style={styles.buttonContainer}>
-						<Button
-							style={styles.button}
-							text={t('awesome')}
-							size="large"
-							testID="OrangeTicketButton"
-							onPress={onButtonPress}
-						/>
-					</View>
-				</View>
-				<SafeAreaInset type="bottom" minPadding={16} />
-			</View>
-		</BottomSheetWrapper>
-	);
+	return <></>;
 };
 
-const styles = StyleSheet.create({
-	root: {
-		flex: 1,
-	},
-	confetti: {
-		...StyleSheet.absoluteFillObject,
-		zIndex: 0,
-	},
-	lottie: {
-		height: '100%',
-	},
-	content: {
-		flex: 1,
-		paddingHorizontal: 16,
-	},
-	imageContainer: {
-		marginTop: 'auto',
-		justifyContent: 'center',
-		alignItems: 'center',
-		alignSelf: 'center',
-		height: 250,
-		width: 200,
-	},
-	image1: {
-		width: 220,
-		height: 220,
-		position: 'absolute',
-		bottom: '14%',
-		transform: [{ scaleX: -1 }, { rotate: '-10deg' }],
-		zIndex: 1,
-	},
-	image2: {
-		width: 220,
-		height: 220,
-		position: 'absolute',
-		bottom: '-17%',
-		transform: [{ scaleX: -1 }],
-	},
-	image3: {
-		width: 220,
-		height: 220,
-		position: 'absolute',
-		bottom: '12%',
-		left: '12%',
-		transform: [{ scaleX: 1 }, { rotate: '210deg' }],
-		zIndex: 2,
-	},
-	buttonContainer: {
-		flexDirection: 'row',
-		justifyContent: 'center',
-		zIndex: 1,
-	},
-	button: {
-		flex: 1,
-	},
-});
-
 export default memo(OrangeTicket);

src/utils/lightning/index.ts

@@ -414,12 +414,9 @@ export const handleLightningPaymentSubscription = async ({
 		timestamp: new Date().getTime(),
 	};
 
-	if (message !== 'Orange Ticket') {
-		vibrate({ type: 'default' });
-		showBottomSheet('newTxPrompt', { activityItem });
-		dispatch(closeSheet('receiveNavigation'));
-	}
-
+	vibrate({ type: 'default' });
+	showBottomSheet('newTxPrompt', { activityItem });
+	dispatch(closeSheet('receiveNavigation'));
 	dispatch(addActivityItem(activityItem));
 
 	await refreshLdk({ selectedWallet, selectedNetwork });