Render failed tx in tx list

2 files changed, 28 insertions, 9 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 489392473..c708580c4 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -179,8 +179,6 @@ AccountDetailScreen.prototype.transactionList = function() {
     .filter(tx => tx.txParams.from === state.address)
     // only transactions that are on the current network
     .filter(tx => tx.txParams.metamaskNetworkId === state.networkVersion)
-    // only transactions that have a hash
-    .filter(tx => tx.hash)
     // sort by recency
     .sort((a, b) => b.time - a.time)
 
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 5e9ec8b87..e912e36f6 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -57,10 +57,10 @@ module.exports = function(transactions, network) {
   )
 
 
-  function renderTransaction(transaction){
+  function renderTransaction(transaction, i){
 
     var panelOpts = {
-      key: `tx-${transaction.hash}`,
+      key: `tx-${transaction.id + i}`,
       identiconKey: transaction.txParams.to,
       onClick: (event) => {
         var url = explorerLink(transaction.hash, parseInt(network))
@@ -88,7 +88,7 @@ module.exports = function(transactions, network) {
     return (
 
       h('.transaction-list-item.flex-row.flex-space-between.cursor-pointer', {
-        key: `tx-${transaction.hash}`,
+        key: `tx-${transaction.id + i}`,
         onClick: (event) => {
           var url = explorerLink(transaction.hash, parseInt(network))
           chrome.tabs.create({ url })
@@ -107,7 +107,7 @@ module.exports = function(transactions, network) {
 
           h('div', date),
 
-          recipientField(txParams),
+          recipientField(txParams, transaction),
 
         ]),
 
@@ -120,14 +120,17 @@ module.exports = function(transactions, network) {
   }
 }
 
-function recipientField(txParams) {
+function recipientField(txParams, transaction) {
   if (txParams.to) {
     return h('div', {
       style: {
         fontSize: 'small',
         color: '#ABA9AA',
       },
-    }, addressSummary(txParams.to))
+    }, [
+      addressSummary(txParams.to),
+      failIfFailed(transaction),
+    ])
 
   } else {
 
@@ -136,7 +139,11 @@ function recipientField(txParams) {
         fontSize: 'small',
         color: '#ABA9AA',
       },
-    }, 'Contract Published')
+    },[
+      'Contract Published',
+      failIfFailed(transaction),
+    ])
+
   }
 }
 
@@ -145,6 +152,14 @@ function formatDate(date){
 }
 
 function identicon(txParams, transaction) {
+  if (transaction.status === 'rejected') {
+    return h('i.fa.fa-exclamation-triangle.fa-lg.error', {
+      style: {
+        width: '24px',
+      }
+    })
+  }
+
   if (txParams.to) {
     return h(Identicon, {
       diameter: 24,
@@ -158,3 +173,9 @@ function identicon(txParams, transaction) {
     })
   }
 }
+
+function failIfFailed(transaction) {
+  if (transaction.status === 'rejected') {
+    return h('span.error', ' (Failed)')
+  }
+}