Add txReceipt data to transaction details (#5513)

6 files changed, 84 insertions, 5 deletions

diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.util.js b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js
index 32834ff47..97aa9a8f1 100644
--- a/ui/app/components/transaction-activity-log/transaction-activity-log.util.js
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js
@@ -46,11 +46,15 @@ export function getActivities (transaction) {
     if (!Array.isArray(base) && base.status === UNAPPROVED_STATUS && base.txParams) {
       const { time, txParams: { value } = {} } = base
       return acc.concat(eventCreator(TRANSACTION_CREATED_EVENT, time, value))
+      // An entry in the history may be an array of more sub-entries.
     } else if (Array.isArray(base)) {
       const events = []
 
       base.forEach(entry => {
-        const { op, path, value, timestamp } = entry
+        const { op, path, value, timestamp: entryTimestamp } = entry
+        // Not all sub-entries in a history entry have a timestamp. If the sub-entry does not have a
+        // timestamp, the first sub-entry in a history entry should.
+        const timestamp = entryTimestamp || base[0] && base[0].timestamp
 
         if (path in eventPathsHash && op === REPLACE_OP) {
           switch (path) {
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
index bb6075e9f..5a2b4a481 100644
--- a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
@@ -26,8 +26,11 @@ export default class TransactionBreakdown extends PureComponent {
   render () {
     const { t } = this.context
     const { transaction, className } = this.props
-    const { txParams: { gas, gasPrice, value } = {} } = transaction
-    const hexGasTotal = getHexGasTotal({ gasLimit: gas, gasPrice })
+    const { txParams: { gas, gasPrice, value } = {}, txReceipt: { gasUsed } = {} } = transaction
+
+    const gasLimit = typeof gasUsed === 'string' ? gasUsed : gas
+
+    const hexGasTotal = getHexGasTotal({ gasLimit, gasPrice })
     const totalInHex = sumHexes(hexGasTotal, value)
 
     return (
@@ -52,6 +55,19 @@ export default class TransactionBreakdown extends PureComponent {
               value={gas}
             />
           </TransactionBreakdownRow>
+          {
+            typeof gasUsed === 'string' && (
+              <TransactionBreakdownRow
+                title={`${t('gasUsed')} (${t('units')})`}
+                className="transaction-breakdown__row-title"
+              >
+                <HexToDecimal
+                  className="transaction-breakdown__value"
+                  value={gasUsed}
+                />
+              </TransactionBreakdownRow>
+            )
+          }
           <TransactionBreakdownRow title={t('gasPrice')}>
             <CurrencyDisplay
               className="transaction-breakdown__value"
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js
index c1c69f59b..40eef5e15 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js
@@ -11,6 +11,7 @@ import { CONFIRM_TRANSACTION_ROUTE } from '../../routes'
 import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions'
 import { ETH } from '../../constants/common'
 import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../app/scripts/lib/enums'
+import { getStatusKey } from '../../helpers/transactions.util'
 
 export default class TransactionListItem extends PureComponent {
   static propTypes = {
@@ -167,7 +168,7 @@ export default class TransactionListItem extends PureComponent {
           </div>
           <TransactionStatus
             className="transaction-list-item__status"
-            statusKey={transaction.status}
+            statusKey={getStatusKey(transaction)}
             title={(
               (transaction.err && transaction.err.rpc)
                 ? transaction.err.rpc.message
diff --git a/ui/app/components/transaction-status/index.scss b/ui/app/components/transaction-status/index.scss
index 35be550f7..26a1f5d38 100644
--- a/ui/app/components/transaction-status/index.scss
+++ b/ui/app/components/transaction-status/index.scss
@@ -25,4 +25,9 @@
     background-color: #FFF2DB;
     color: #CA810A;
   }
-}
\ No newline at end of file
+
+  &--failed {
+    background: lighten($monzo, 56%);
+    color: $monzo;
+  }
+}
diff --git a/ui/app/helpers/tests/transactions.util.test.js b/ui/app/helpers/tests/transactions.util.test.js
index 103a84a8c..838522e35 100644
--- a/ui/app/helpers/tests/transactions.util.test.js
+++ b/ui/app/helpers/tests/transactions.util.test.js
@@ -19,4 +19,39 @@ describe('Transactions utils', () => {
       assert.doesNotThrow(() => utils.getTokenData())
     })
   })
+
+  describe('getStatusKey', () => {
+    it('should return the correct status', () => {
+      const tests = [
+        {
+          transaction: {
+            status: 'confirmed',
+            txReceipt: {
+              status: '0x0',
+            },
+          },
+          expected: 'failed',
+        },
+        {
+          transaction: {
+            status: 'confirmed',
+            txReceipt: {
+              status: '0x1',
+            },
+          },
+          expected: 'confirmed',
+        },
+        {
+          transaction: {
+            status: 'pending',
+          },
+          expected: 'pending',
+        },
+      ]
+
+      tests.forEach(({ transaction, expected }) => {
+        assert.equal(utils.getStatusKey(transaction), expected)
+      })
+    })
+  })
 })
diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js
index f7d249e63..e50196196 100644
--- a/ui/app/helpers/transactions.util.js
+++ b/ui/app/helpers/transactions.util.js
@@ -126,3 +126,21 @@ export function sumHexes (...args) {
 
   return ethUtil.addHexPrefix(total)
 }
+
+/**
+ * Returns a status key for a transaction. Requires parsing the txMeta.txReceipt on top of
+ * txMeta.status because txMeta.status does not reflect on-chain errors.
+ * @param {Object} transaction - The txMeta object of a transaction.
+ * @param {Object} transaction.txReceipt - The transaction receipt.
+ * @returns {string}
+ */
+export function getStatusKey (transaction) {
+  const { txReceipt: { status } = {} } = transaction
+
+  // There was an on-chain failure
+  if (status === '0x0') {
+    return 'failed'
+  }
+
+  return transaction.status
+}