Improvement/tx status notification

app/actions/transactionNotification/index.js

@@ -0,0 +1,15 @@
+export function hideTransactionNotification() {
+	return {
+		type: 'HIDE_TRANSACTION_NOTIFICATION'
+	};
+}
+
+export function showTransactionNotification({ autodismiss, transaction, status }) {
+	return {
+		type: 'SHOW_TRANSACTION_NOTIFICATION',
+		isVisible: true,
+		autodismiss,
+		transaction,
+		status
+	};
+}

app/components/Nav/Main/index.js

@@ -15,7 +15,6 @@ import { createStackNavigator } from 'react-navigation-stack';
 import { createBottomTabNavigator } from 'react-navigation-tabs';
 import ENS from 'ethjs-ens';
 import GlobalAlert from '../../UI/GlobalAlert';
-import FlashMessage from 'react-native-flash-message';
 import BackgroundTimer from 'react-native-background-timer';
 import Browser from '../../Views/Browser';
 import AddBookmark from '../../Views/AddBookmark';
@@ -59,7 +58,6 @@ import PaymentChannel from '../../Views/PaymentChannel';
 import ImportPrivateKeySuccess from '../../Views/ImportPrivateKeySuccess';
 import PaymentRequest from '../../UI/PaymentRequest';
 import PaymentRequestSuccess from '../../UI/PaymentRequestSuccess';
-import { TransactionNotification } from '../../UI/TransactionNotification';
 import TransactionsNotificationManager from '../../../core/TransactionsNotificationManager';
 import Engine from '../../../core/Engine';
 import AppConstants from '../../../core/AppConstants';
@@ -100,6 +98,8 @@ import Amount from '../../Views/SendFlow/Amount';
 import Confirm from '../../Views/SendFlow/Confirm';
 import ContactForm from '../../Views/Settings/Contacts/ContactForm';
 import TransactionTypes from '../../../core/TransactionTypes';
+import TxNotification from '../../UI/TxNotification';
+import { showTransactionNotification, hideTransactionNotification } from '../../../actions/transactionNotification';
 
 const styles = StyleSheet.create({
 	flex: {
@@ -417,7 +417,15 @@ class Main extends PureComponent {
 		/**
 		 * A string representing the network name
 		 */
-		providerType: PropTypes.string
+		providerType: PropTypes.string,
+		/**
+		 * Dispatch showing a transaction notification
+		 */
+		showTransactionNotification: PropTypes.func,
+		/**
+		 * Dispatch hiding a transaction notification
+		 */
+		hideTransactionNotification: PropTypes.func
 	};
 
 	state = {
@@ -515,7 +523,11 @@ class Main extends PureComponent {
 			});
 
 			setTimeout(() => {
-				TransactionsNotificationManager.init(this.props.navigation);
+				TransactionsNotificationManager.init(
+					this.props.navigation,
+					this.props.showTransactionNotification,
+					this.props.hideTransactionNotification
+				);
 				this.pollForIncomingTransactions();
 
 				this.initializeWalletConnect();
@@ -1063,18 +1075,13 @@ class Main extends PureComponent {
 
 	render() {
 		const { forceReload } = this.state;
-
 		return (
 			<React.Fragment>
 				<View style={styles.flex}>
 					{!forceReload ? <MainNavigator navigation={this.props.navigation} /> : this.renderLoader()}
 					<GlobalAlert />
-					<FlashMessage
-						position="bottom"
-						MessageComponent={TransactionNotification}
-						animationDuration={150}
-					/>
 					<FadeOutOverlay />
+					<TxNotification navigation={this.props.navigation} />
 				</View>
 				{this.renderSigningModal()}
 				{this.renderWalletConnectSessionRequestModal()}
@@ -1098,7 +1105,9 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
 	setEtherTransaction: transaction => dispatch(setEtherTransaction(transaction)),
-	setTransactionObject: transaction => dispatch(setTransactionObject(transaction))
+	setTransactionObject: transaction => dispatch(setTransactionObject(transaction)),
+	showTransactionNotification: args => dispatch(showTransactionNotification(args)),
+	hideTransactionNotification: () => dispatch(hideTransactionNotification())
 });
 
 export default connect(

app/components/UI/ActionModal/ActionContent/index.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet, View } from 'react-native';
+import { colors } from '../../../../styles/common';
+import StyledButton from '../../StyledButton';
+import { strings } from '../../../../../locales/i18n';
+
+const styles = StyleSheet.create({
+	viewWrapper: {
+		flexDirection: 'column',
+		justifyContent: 'center',
+		alignItems: 'center',
+		marginHorizontal: 24
+	},
+	viewContainer: {
+		width: '100%',
+		backgroundColor: colors.white,
+		borderRadius: 10
+	},
+	actionContainer: {
+		borderTopColor: colors.grey200,
+		borderTopWidth: 1,
+		flexDirection: 'row',
+		padding: 16
+	},
+	childrenContainer: {
+		minHeight: 250,
+		width: '100%',
+
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	button: {
+		flex: 1
+	},
+	cancel: {
+		marginRight: 8
+	},
+	confirm: {
+		marginLeft: 8
+	}
+});
+
+/**
+ * View that renders the content of an action modal
+ * The objective of this component is to reuse it in other places and not
+ * only on ActionModal component
+ */
+export default function ActionContent({
+	cancelTestID,
+	confirmTestID,
+	cancelText,
+	children,
+	confirmText,
+	confirmDisabled,
+	cancelButtonMode,
+	confirmButtonMode,
+	displayCancelButton,
+	displayConfirmButton,
+	onCancelPress,
+	onConfirmPress
+}) {
+	return (
+		<View style={styles.viewWrapper}>
+			<View style={styles.viewContainer}>
+				<View style={styles.childrenContainer}>{children}</View>
+				<View style={styles.actionContainer}>
+					{displayCancelButton && (
+						<StyledButton
+							testID={cancelTestID}
+							type={cancelButtonMode}
+							onPress={onCancelPress}
+							containerStyle={[styles.button, displayConfirmButton ? styles.cancel : {}]}
+						>
+							{cancelText}
+						</StyledButton>
+					)}
+					{displayConfirmButton && (
+						<StyledButton
+							testID={confirmTestID}
+							type={confirmButtonMode}
+							onPress={onConfirmPress}
+							containerStyle={[styles.button, displayCancelButton ? styles.confirm : {}]}
+							disabled={confirmDisabled}
+						>
+							{confirmText}
+						</StyledButton>
+					)}
+				</View>
+			</View>
+		</View>
+	);
+}
+
+ActionContent.defaultProps = {
+	cancelButtonMode: 'neutral',
+	confirmButtonMode: 'warning',
+	confirmTestID: '',
+	cancelTestID: '',
+	cancelText: strings('action_view.cancel'),
+	confirmText: strings('action_view.confirm'),
+	confirmDisabled: false,
+	displayCancelButton: true,
+	displayConfirmButton: true
+};
+
+ActionContent.propTypes = {
+	/**
+	 * TestID for the cancel button
+	 */
+	cancelTestID: PropTypes.string,
+	/**
+	 * TestID for the confirm button
+	 */
+	confirmTestID: PropTypes.string,
+	/**
+	 * Text to show in the cancel button
+	 */
+	cancelText: PropTypes.string,
+	/**
+	 * Content to display above the action buttons
+	 */
+	children: PropTypes.node,
+	/**
+	 * Type of button to show as the cancel button
+	 */
+	cancelButtonMode: PropTypes.oneOf(['cancel', 'neutral', 'confirm', 'normal']),
+	/**
+	 * Type of button to show as the confirm button
+	 */
+	confirmButtonMode: PropTypes.oneOf(['normal', 'confirm', 'warning']),
+	/**
+	 * Whether confirm button is disabled
+	 */
+	confirmDisabled: PropTypes.bool,
+	/**
+	 * Text to show in the confirm button
+	 */
+	confirmText: PropTypes.string,
+	/**
+	 * Whether cancel button should be displayed
+	 */
+	displayCancelButton: PropTypes.bool,
+	/**
+	 * Whether confirm button should be displayed
+	 */
+	displayConfirmButton: PropTypes.bool,
+	/**
+	 * Called when the cancel button is clicked
+	 */
+	onCancelPress: PropTypes.func,
+	/**
+	 * Called when the confirm button is clicked
+	 */
+	onConfirmPress: PropTypes.func
+};

app/components/UI/ActionModal/__snapshots__/index.test.js.snap

@@ -41,99 +41,16 @@ exports[`ActionModal should render correctly 1`] = `
   swipeThreshold={100}
   useNativeDriver={false}
 >
-  <View
-    style={
-      Object {
-        "alignItems": "center",
-        "flexDirection": "column",
-        "justifyContent": "center",
-        "marginHorizontal": 24,
-      }
-    }
-  >
-    <View
-      style={
-        Object {
-          "backgroundColor": "#FFFFFF",
-          "borderRadius": 10,
-          "width": "100%",
-        }
-      }
-    >
-      <View
-        style={
-          Object {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "minHeight": 250,
-          }
-        }
-      />
-      <View
-        style={
-          Object {
-            "borderTopColor": "#bbc0c5",
-            "borderTopWidth": 1,
-            "flexDirection": "row",
-            "padding": 16,
-          }
-        }
-      >
-        <StyledButton
-          containerStyle={
-            Array [
-              Object {
-                "flex": 1,
-              },
-              Object {
-                "marginRight": 8,
-              },
-            ]
-          }
-          disabledContainerStyle={
-            Object {
-              "opacity": 0.6,
-            }
-          }
-          styleDisabled={
-            Object {
-              "opacity": 0.6,
-            }
-          }
-          testID=""
-          type="neutral"
-        >
-          Cancel
-        </StyledButton>
-        <StyledButton
-          containerStyle={
-            Array [
-              Object {
-                "flex": 1,
-              },
-              Object {
-                "marginLeft": 8,
-              },
-            ]
-          }
-          disabled={false}
-          disabledContainerStyle={
-            Object {
-              "opacity": 0.6,
-            }
-          }
-          styleDisabled={
-            Object {
-              "opacity": 0.6,
-            }
-          }
-          testID=""
-          type="warning"
-        >
-          Confirm
-        </StyledButton>
-      </View>
-    </View>
-  </View>
+  <ActionContent
+    cancelButtonMode="neutral"
+    cancelTestID=""
+    cancelText="Cancel"
+    confirmButtonMode="warning"
+    confirmDisabled={false}
+    confirmTestID=""
+    confirmText="Confirm"
+    displayCancelButton={true}
+    displayConfirmButton={true}
+  />
 </ReactNativeModal>
 `;