aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/transaction-activity-log/transaction-activity-log.util.js6
-rw-r--r--ui/app/components/transaction-breakdown/transaction-breakdown.component.js20
-rw-r--r--ui/app/components/transaction-list-item/transaction-list-item.component.js3
-rw-r--r--ui/app/components/transaction-status/index.scss7
-rw-r--r--ui/app/helpers/tests/transactions.util.test.js35
-rw-r--r--ui/app/helpers/transactions.util.js18
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
+}