Feature/warn when replacing

app/actions/user/index.js

@@ -45,3 +45,15 @@ export function protectWalletModalNotVisible() {
 		type: 'PROTECT_MODAL_NOT_VISIBLE'
 	};
 }
+
+export function loadingSet() {
+	return {
+		type: 'LOADING_SET'
+	};
+}
+
+export function loadingUnset() {
+	return {
+		type: 'LOADING_UNSET'
+	};
+}

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

@@ -53,6 +53,7 @@ export default function ActionContent({
 	confirmText,
 	confirmDisabled,
 	cancelButtonMode,
+	cancelButtonDisabled,
 	confirmButtonMode,
 	displayCancelButton,
 	displayConfirmButton,
@@ -76,6 +77,7 @@ export default function ActionContent({
 				>
 					{displayCancelButton && (
 						<StyledButton
+							disabled={cancelButtonDisabled}
 							testID={cancelTestID}
 							type={cancelButtonMode}
 							onPress={onCancelPress}
@@ -103,6 +105,7 @@ export default function ActionContent({
 
 ActionContent.defaultProps = {
 	cancelButtonMode: 'neutral',
+	cancelButtonDisabled: false,
 	confirmButtonMode: 'warning',
 	confirmTestID: '',
 	cancelTestID: '',
@@ -117,6 +120,7 @@ ActionContent.defaultProps = {
 };
 
 ActionContent.propTypes = {
+	cancelButtonDisabled: PropTypes.bool,
 	/**
 	 * TestID for the cancel button
 	 */

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

@@ -49,6 +49,7 @@ exports[`ActionModal should render correctly 1`] = `
   useNativeDriver={false}
 >
   <ActionContent
+    cancelButtonDisabled={false}
     cancelButtonMode="neutral"
     cancelTestID=""
     cancelText="Cancel"

app/components/UI/ActionModal/index.js

@@ -36,7 +36,8 @@ export default function ActionModal({
 	actionContainerStyle,
 	childrenContainerStyle,
 	verticalButtons,
-	propagateSwipe
+	propagateSwipe,
+	cancelButtonDisabled
 }) {
 	return (
 		<Modal
@@ -55,6 +56,7 @@ export default function ActionModal({
 				confirmText={confirmText}
 				confirmDisabled={confirmDisabled}
 				cancelButtonMode={cancelButtonMode}
+				cancelButtonDisabled={cancelButtonDisabled}
 				confirmButtonMode={confirmButtonMode}
 				displayCancelButton={displayCancelButton}
 				displayConfirmButton={displayConfirmButton}
@@ -74,6 +76,7 @@ export default function ActionModal({
 
 ActionModal.defaultProps = {
 	cancelButtonMode: 'neutral',
+	cancelButtonDisabled: false,
 	confirmButtonMode: 'warning',
 	confirmTestID: '',
 	cancelTestID: '',
@@ -85,6 +88,7 @@ ActionModal.defaultProps = {
 };
 
 ActionModal.propTypes = {
+	cancelButtonDisabled: PropTypes.bool,
 	/**
 	 * TestID for the cancel button
 	 */

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

@@ -2,6 +2,7 @@
 
 exports[`HintModal should render correctly 1`] = `
 <ActionModal
+  cancelButtonDisabled={false}
   cancelButtonMode="neutral"
   cancelTestID=""
   cancelText="Cancel"

app/components/UI/Notification/BaseNotification/index.js

@@ -51,102 +51,112 @@ const styles = StyleSheet.create({
 	}
 });
 
-/**
- * BaseNotification component used to render in-app notifications
- */
-export default function BaseNotification(props) {
-	const { status, data, onPress, onHide } = props;
-	// eslint-disable-next-line
-	_getIcon = () => {
-		switch (status) {
-			case 'pending':
-			case 'pending_withdrawal':
-			case 'pending_deposit':
-			case 'speedup':
-				return <AnimatedSpinner size={36} />;
-			case 'success_deposit':
-			case 'success_withdrawal':
-			case 'success':
-			case 'received':
-			case 'received_payment':
-				return <IonicIcon color={colors.green500} size={36} name="md-checkmark" style={styles.checkIcon} />;
-			case 'cancelled':
-			case 'error':
-				return (
-					<MaterialIcon color={colors.red} size={36} name="alert-circle-outline" style={styles.checkIcon} />
-				);
-			case 'simple_notification_rejected':
-				return <AntIcon color={colors.red} size={36} name="closecircleo" style={styles.checkIcon} />;
-			case 'simple_notification':
-				return <AntIcon color={colors.green500} size={36} name="checkcircleo" style={styles.checkIcon} />;
-		}
-	};
+const getIcon = status => {
+	switch (status) {
+		case 'pending':
+		case 'pending_withdrawal':
+		case 'pending_deposit':
+		case 'speedup':
+			return <AnimatedSpinner size={36} />;
+		case 'success_deposit':
+		case 'success_withdrawal':
+		case 'success':
+		case 'received':
+		case 'received_payment':
+			return <IonicIcon color={colors.green500} size={36} name="md-checkmark" style={styles.checkIcon} />;
+		case 'cancelled':
+		case 'error':
+			return <MaterialIcon color={colors.red} size={36} name="alert-circle-outline" style={styles.checkIcon} />;
+		case 'simple_notification_rejected':
+			return <AntIcon color={colors.red} size={36} name="closecircleo" style={styles.checkIcon} />;
+		case 'simple_notification':
+			return <AntIcon color={colors.green500} size={36} name="checkcircleo" style={styles.checkIcon} />;
+	}
+};
 
-	// eslint-disable-next-line no-undef
-	_getTitle = () => {
-		switch (status) {
-			case 'pending':
-				return strings('notifications.pending_title');
-			case 'pending_deposit':
-				return strings('notifications.pending_deposit_title');
-			case 'pending_withdrawal':
-				return strings('notifications.pending_withdrawal_title');
-			case 'success':
-				return strings('notifications.success_title', { nonce: parseInt(data.nonce) });
-			case 'success_deposit':
-				return strings('notifications.success_deposit_title');
-			case 'success_withdrawal':
-				return strings('notifications.success_withdrawal_title');
-			case 'received':
-				return strings('notifications.received_title', {
-					amount: data.amount,
-					assetType: data.assetType
-				});
-			case 'speedup':
-				return strings('notifications.speedup_title', { nonce: parseInt(data.nonce) });
-			case 'received_payment':
-				return strings('notifications.received_payment_title');
-			case 'cancelled':
-				return strings('notifications.cancelled_title');
-			case 'error':
-				return strings('notifications.error_title');
-		}
-	};
+const getTitle = (status, { nonce, amount, assetType }) => {
+	switch (status) {
+		case 'pending':
+			return strings('notifications.pending_title');
+		case 'pending_deposit':
+			return strings('notifications.pending_deposit_title');
+		case 'pending_withdrawal':
+			return strings('notifications.pending_withdrawal_title');
+		case 'success':
+			return strings('notifications.success_title', { nonce: parseInt(nonce) });
+		case 'success_deposit':
+			return strings('notifications.success_deposit_title');
+		case 'success_withdrawal':
+			return strings('notifications.success_withdrawal_title');
+		case 'received':
+			return strings('notifications.received_title', {
+				amount,
+				assetType
+			});
+		case 'speedup':
+			return strings('notifications.speedup_title', { nonce: parseInt(nonce) });
+		case 'received_payment':
+			return strings('notifications.received_payment_title');
+		case 'cancelled':
+			return strings('notifications.cancelled_title');
+		case 'error':
+			return strings('notifications.error_title');
+	}
+};
 
-	// eslint-disable-next-line no-undef
-	_getDescription = () => {
-		if (data && data.amount) {
-			return strings(`notifications.${status}_message`, { amount: data.amount });
-		}
-		return strings(`notifications.${status}_message`);
-	};
+const getDescription = (status, { amount = null }) => {
+	if (amount) {
+		return strings(`notifications.${status}_message`, { amount });
+	}
+	return strings(`notifications.${status}_message`);
+};
 
-	return (
-		<View style={baseStyles.flexGrow}>
-			<TouchableOpacity
-				style={styles.defaultFlashFloating}
-				testID={'press-notification-button'}
-				onPress={onPress}
-				activeOpacity={0.8}
-			>
-				<View style={styles.flashIcon}>{this._getIcon()}</View>
-				<View style={styles.flashLabel}>
-					<Text style={styles.flashTitle} testID={'notification-title'}>
-						{!data.title ? this._getTitle() : data.title}
-					</Text>
-					<Text style={styles.flashText}>{!data.title ? this._getDescription() : data.description}</Text>
-				</View>
-				<TouchableOpacity style={styles.closeTouchable} onPress={onHide}>
-					<IonicIcon name="ios-close" size={36} style={styles.closeIcon} />
-				</TouchableOpacity>
-			</TouchableOpacity>
-		</View>
-	);
-}
+/**
+ * BaseNotification component used to render in-app notifications
+ */
+const BaseNotification = ({
+	status,
+	data = null,
+	data: { description = null, title = null },
+	onPress,
+	onHide,
+	autoDismiss
+}) => (
+	<View style={baseStyles.flexGrow}>
+		<TouchableOpacity
+			style={styles.defaultFlashFloating}
+			testID={'press-notification-button'}
+			onPress={onPress}
+			activeOpacity={0.8}
+		>
+			<View style={styles.flashIcon}>{getIcon(status)}</View>
+			<View style={styles.flashLabel}>
+				<Text style={styles.flashTitle} testID={'notification-title'}>
+					{!title ? getTitle(status, data) : title}
+				</Text>
+				<Text style={styles.flashText}>{!title ? getDescription(status, data) : description}</Text>
+			</View>
+			<View>
+				{autoDismiss && (
+					<TouchableOpacity style={styles.closeTouchable} onPress={onHide}>
+						<IonicIcon name="ios-close" size={36} style={styles.closeIcon} />
+					</TouchableOpacity>
+				)}
+			</View>
+		</TouchableOpacity>
+	</View>
+);
 
 BaseNotification.propTypes = {
 	status: PropTypes.string,
 	data: PropTypes.object,
 	onPress: PropTypes.func,
-	onHide: PropTypes.func
+	onHide: PropTypes.func,
+	autoDismiss: PropTypes.bool
 };
+
+BaseNotification.defaultProps = {
+	autoDismiss: false
+};
+
+export default BaseNotification;

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

@@ -7,6 +7,7 @@ exports[`SeedphraseModal should render correctly 1`] = `
       "borderTopWidth": 0,
     }
   }
+  cancelButtonDisabled={false}
   cancelButtonMode="neutral"
   cancelTestID=""
   cancelText="Cancel"

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

@@ -7,6 +7,7 @@ exports[`HintModal should render correctly 1`] = `
       "borderTopWidth": 0,
     }
   }
+  cancelButtonDisabled={false}
   cancelButtonMode="normal"
   cancelTestID=""
   cancelText="Secure now"