Merge pull request #198 from MetaMask/FailedTxIndication

Tx list items should indicate when they failed.

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)
 

ui/app/components/transaction-list.js

@@ -57,39 +57,17 @@ module.exports = function(transactions, network) {
   )
 
 
-  function renderTransaction(transaction){
+  function renderTransaction(transaction, i){
-
-    var panelOpts = {
-      key: `tx-${transaction.hash}`,
-      identiconKey: transaction.txParams.to,
-      onClick: (event) => {
-        var url = explorerLink(transaction.hash, parseInt(network))
-        chrome.tabs.create({ url })
-      },
-      attributes: [
-        {
-          key: 'TIME',
-          value: formatDate(transaction.time),
-        },
-        {
-          key: 'TO',
-          value: addressSummary(transaction.txParams.to),
-        },
-        {
-          key: 'VALUE',
-          value: formatBalance(transaction.txParams.value),
-        },
-      ]
-    }
 
     var txParams = transaction.txParams
     var date = formatDate(transaction.time)
 
     return (
 
-      h('.transaction-list-item.flex-row.flex-space-between.cursor-pointer', {
+      h(`.transaction-list-item.flex-row.flex-space-between${transaction.hash ? '.pointer' : ''}`, {
-        key: `tx-${transaction.hash}`,
+        key: `tx-${transaction.id + i}`,
         onClick: (event) => {
+          if (!transaction.hash) return
           var url = explorerLink(transaction.hash, parseInt(network))
           chrome.tabs.create({ url })
         },
@@ -107,7 +85,7 @@ module.exports = function(transactions, network) {
 
           h('div', date),
 
-          recipientField(txParams),
+          recipientField(txParams, transaction),
 
         ]),
 
@@ -120,14 +98,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 +117,11 @@ function recipientField(txParams) {
         fontSize: 'small',
         color: '#ABA9AA',
       },
-    }, 'Contract Published')
+    },[
+      'Contract Published',
+      failIfFailed(transaction),
+    ])
+
   }
 }
 
@@ -145,6 +130,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 +151,9 @@ function identicon(txParams, transaction) {
     })
   }
 }
+
+function failIfFailed(transaction) {
+  if (transaction.status === 'rejected') {
+    return h('span.error', ' (Failed)')
+  }
+}

ui/app/css/lib.css

@@ -5,7 +5,7 @@
 }
 
 .color-forest {
-  color: #0A5448; 
+  color: #0A5448;
 }
 
 /* lib */
@@ -107,6 +107,9 @@
   user-select: none;
 }
 
+.pointer {
+  cursor: pointer;
+}
 .cursor-pointer {
   cursor: pointer;
   transform-origin: center center;