Display failed transactions in transactions tab

src/components/transactions/index.js

@@ -6,7 +6,11 @@ import Transactions from './transactions';
 const mapStateToProps = state => ({
   address: state.account.address,
   activePeer: state.peers.data,
-  transactions: [...state.transactions.pending, ...state.transactions.confirmed],
+  transactions: [
+    ...state.transactions.pending,
+    ...state.transactions.failed,
+    ...state.transactions.confirmed,
+  ],
   count: state.transactions.count,
   confirmedCount: state.transactions.confirmed.length,
   pendingCount: state.transactions.pending.length,

src/components/transactions/index.test.js

@@ -14,8 +14,10 @@ describe('TransactionsHOC', () => {
   let wrapper;
   const confirmed = [];
   const pending = [];
+  const failed = [];
   const transactions = {
     pending,
+    failed,
     confirmed,
     count: confirmed.length,
   };
@@ -46,7 +48,7 @@ describe('TransactionsHOC', () => {
     const props = wrapper.find('Transactions').props();
     expect(props.address).to.be.equal(account.address);
     expect(props.activePeer).to.be.equal(peers.data);
-    expect(props.transactions).to.deep.equal([...transactions, ...pending]);
+    expect(props.transactions).to.deep.equal([...pending, ...failed, ...confirmed]);
     expect(props.count).to.be.equal(transactions.count);
     expect(props.confirmedCount).to.be.equal(confirmed.length);
     expect(props.pendingCount).to.be.equal(pending.length);

src/components/transactions/transactionRow.js

@@ -9,6 +9,10 @@ import Status from './status';
 import Amount from './amount';
 import Spinner from '../spinner';
 
+const setRowClass = tx => (
+  tx.failed && styles.failedTransaction
+);
+
 class TransactionRow extends React.Component {
   // eslint-disable-next-line class-methods-use-this
   shouldComponentUpdate(nextProps) {
@@ -17,7 +21,7 @@ class TransactionRow extends React.Component {
 
   render() {
     const props = this.props;
-    return (<tr>
+    return (<tr className={`${setRowClass(props.value)}`}>
       <td className={`${props.tableStyle.rowCell} ${styles.centerText}`}>
         {props.value.confirmations ?
           <TooltipTime label={props.value.timestamp}></TooltipTime> :

src/components/transactions/transactions.css

@@ -24,6 +24,10 @@
   background: color(var(--in) alpha(45%)) !important;
 }
 
+.failedTransaction {
+  background-color: rgb(255, 228, 220) !important;
+}
+
 .empty {
   color: #777;
   text-align: center;