bufix: stuck notification (#2687)

* hideCurrentNotification

* thinkisfixed

* removenotvisiblenots

* checkarray

app/actions/notification/index.js

@@ -70,3 +70,9 @@ export function showTransactionNotification({ autodismiss, transaction, status }
 		status
 	};
 }
+
+export function removeNotVisibleNotifications() {
+	return {
+		type: 'REMOVE_NOT_VISIBLE_NOTIFICATIONS'
+	};
+}

app/components/Nav/Main/index.js

@@ -50,7 +50,8 @@ import {
 	showTransactionNotification,
 	hideCurrentNotification,
 	showSimpleNotification,
-	removeNotificationById
+	removeNotificationById,
+	removeNotVisibleNotifications
 } from '../../../actions/notification';
 import { toggleDappTransactionModal, toggleApproveModal } from '../../../actions/modals';
 import AccountApproval from '../../UI/AccountApproval';
@@ -572,6 +573,15 @@ const Main = props => {
 		}
 	});
 
+	// Remove all notifications that aren't visible
+	useEffect(
+		() => {
+			props.removeNotVisibleNotifications();
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[]
+	);
+
 	// unapprovedTransaction effect
 	useEffect(() => {
 		Engine.context.TransactionController.hub.on('unapprovedTransaction', onUnapprovedTransaction);
@@ -761,7 +771,11 @@ Main.propTypes = {
 	/**
 	 * Dispatch infura availability not blocked
 	 */
-	setInfuraAvailabilityNotBlocked: PropTypes.func
+	setInfuraAvailabilityNotBlocked: PropTypes.func,
+	/**
+	 * Remove not visible notifications from state
+	 */
+	removeNotVisibleNotifications: PropTypes.func
 };
 
 const mapStateToProps = state => ({
@@ -787,7 +801,8 @@ const mapDispatchToProps = dispatch => ({
 	toggleDappTransactionModal: (show = null) => dispatch(toggleDappTransactionModal(show)),
 	toggleApproveModal: show => dispatch(toggleApproveModal(show)),
 	setInfuraAvailabilityBlocked: () => dispatch(setInfuraAvailabilityBlocked()),
-	setInfuraAvailabilityNotBlocked: () => dispatch(setInfuraAvailabilityNotBlocked())
+	setInfuraAvailabilityNotBlocked: () => dispatch(setInfuraAvailabilityNotBlocked()),
+	removeNotVisibleNotifications: () => dispatch(removeNotVisibleNotifications())
 });
 
 export default connect(

app/components/UI/Notification/index.js

@@ -21,7 +21,7 @@ function Notification(props) {
 		removeCurrentNotification
 	} = props;
 
-	const notificationAnimated = useRef(new Animated.Value(100)).current;
+	const notificationAnimated = useRef(new Animated.Value(200)).current;
 
 	const usePrevious = value => {
 		const ref = useRef();
@@ -49,7 +49,14 @@ function Notification(props) {
 		return route?.routeName === BROWSER_ROUTE;
 	}, [navigation.state]);
 
-	useEffect(() => () => removeCurrentNotification(), [removeCurrentNotification]);
+	useEffect(
+		() => () => {
+			animatedTimingStart(notificationAnimated, 200);
+			hideCurrentNotification();
+			removeCurrentNotification();
+		},
+		[notificationAnimated, animatedTimingStart, hideCurrentNotification, removeCurrentNotification]
+	);
 
 	useEffect(() => {
 		if (!prevNotificationIsVisible && currentNotificationIsVisible) {

app/reducers/notification/index.js

@@ -13,6 +13,7 @@ export const ACTIONS = {
 	REPLACE_NOTIFICATION_BY_ID: 'REPLACE_NOTIFICATION_BY_ID',
 	REMOVE_NOTIFICATION_BY_ID: 'REMOVE_NOTIFICATION_BY_ID',
 	REMOVE_CURRENT_NOTIFICATION: 'REMOVE_CURRENT_NOTIFICATION',
+	REMOVE_NOT_VISIBLE_NOTIFICATIONS: 'REMOVE_NOT_VISIBLE_NOTIFICATIONS',
 	SHOW_SIMPLE_NOTIFICATION: 'SHOW_SIMPLE_NOTIFICATION',
 	SHOW_TRANSACTION_NOTIFICATION: 'SHOW_TRANSACTION_NOTIFICATION'
 };
@@ -172,6 +173,17 @@ const notificationReducer = (state = initialState, action) => {
 				})
 			};
 		}
+		case ACTIONS.REMOVE_NOT_VISIBLE_NOTIFICATIONS: {
+			const visibleNotifications =
+				notifications?.reduce(
+					(newNotifications, notification) => notification.isVisible && newNotifications.concat(notification),
+					[]
+				) || [];
+			return {
+				...state,
+				notifications: visibleNotifications
+			};
+		}
 		default:
 			return state;
 	}