Display order failures using a system notification (#339)

Fixes #328

app/renderer/styles/index.scss

@@ -189,3 +189,24 @@ th {
 		box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
 	}
 }
+
+@keyframes shake {
+	from,
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+
+	20%,
+	60% {
+		transform: translate3d(-5px, 0, 0);
+	}
+
+	40%,
+	80% {
+		transform: translate3d(5px, 0, 0);
+	}
+}
+
+.shake-animation {
+	animation: shake 0.3s ease;
+}

app/renderer/views/Exchange/Order.js

@@ -84,19 +84,17 @@ const Center = props => {
 
 class Bottom extends React.Component {
 	state = {
-		statusMessage: '',
+		hasError: false,
 	};
 
 	handleSubmit = async event => {
 		event.preventDefault();
-		this.setState({statusMessage: ''});
+		this.setState({hasError: false});
 		exchangeContainer.setIsSendingOrder(true);
 
 		const {api} = appContainer;
-
-		const {type} = this.props;
 		const {baseCurrency, quoteCurrency} = exchangeContainer.state;
-		const {price, amount, total} = this.props;
+		const {price, amount, total, type} = this.props;
 
 		const requestOpts = {
 			type,
@@ -109,24 +107,29 @@ class Bottom extends React.Component {
 
 		const result = await api.order(requestOpts);
 
+		const orderError = error => {
+			// eslint-disable-next-line no-new
+			new Notification(`Failed to ${type} ${baseCurrency}`, {body: error});
+			exchangeContainer.setIsSendingOrder(false);
+			this.setState({hasError: true});
+		};
+
 		// TODO: If we get this error we should probably show a more helpful error
 		// and grey out the order form for result.wait seconds.
 		// Or alternatively if we know there is a pending trade, prevent them from
 		// placing an order until it's matched.
 		if (result.error) {
-			let statusMessage = result.error;
-			if (result.error === 'only one pending request at a time') {
-				statusMessage = `Only one pending swap at a time, try again in ${result.wait} seconds.`;
+			let {error} = result;
+			if (error === 'only one pending request at a time') {
+				error = `Only one pending swap at a time, try again in ${result.wait} seconds.`;
 			}
-			this.setState({statusMessage});
-			exchangeContainer.setIsSendingOrder(false);
+			orderError(error);
 			return;
 		}
 
 		// TODO: Temp workaround for marketmaker issue
 		if (!result.pending) {
-			this.setState({statusMessage: 'Something unexpected happened. Are you sure you have enough UTXO?'});
-			exchangeContainer.setIsSendingOrder(false);
+			orderError('Something unexpected happened. Are you sure you have enough UTXO?');
 			return;
 		}
 
@@ -239,15 +242,9 @@ class Bottom extends React.Component {
 							</p>
 						}
 					</div>
-					<div className="form-section">
-						{this.state.statusMessage &&
-							<p className="secondary status-message">
-								{this.state.statusMessage}
-							</p>
-						}
-					</div>
 					<div className="form-section">
 						<Button
+							className={this.state.hasError ? 'shake-animation' : ''}
 							color={this.props.type === 'buy' ? 'green' : 'red'}
 							fullwidth
 							type="submit"

app/renderer/views/Exchange/Order.scss

@@ -128,14 +128,6 @@
 				font-size: 12px;
 				text-align: center;
 			}
-
-			.status-message {
-				position: relative;
-				bottom: -10px;
-				margin: 0;
-				padding: 0;
-				font-size: 12px;
-			}
 		}
 
 		.Button {
@@ -160,10 +152,6 @@
 			font-size: 13px;
 		}
 
-		.bottom .form-section .status-message {
-			font-size: 13px;
-		}
-
 		.bottom .form-section label {
 			font-size: 14px;
 		}