diff --git a/ui/app/components/transaction-activity-log/index.scss b/ui/app/components/transaction-activity-log/index.scss
index d86514440..2324d44b1 100644
--- a/ui/app/components/transaction-activity-log/index.scss
+++ b/ui/app/components/transaction-activity-log/index.scss
@@ -41,11 +41,15 @@
margin-right: 6px;
border-radius: 50%;
background: $scorpion;
+ flex: 0 0 auto;
}
&__activity-text {
color: $scorpion;
font-size: .75rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
&__value {
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
index c0cf099d0..c4cf57d14 100644
--- a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types'
import classnames from 'classnames'
import { getActivities } from './transaction-activity-log.util'
import Card from '../card'
-import { getEthConversionFromWeiHex } from '../../helpers/conversions.util'
+import { getEthConversionFromWeiHex, getValueFromWeiHex } from '../../helpers/conversions.util'
import { ETH } from '../../constants/common'
+import { formatDate } from '../../util'
export default class TransactionActivityLog extends PureComponent {
static contextTypes = {
@@ -41,8 +42,17 @@ export default class TransactionActivityLog extends PureComponent {
renderActivity (activity, index) {
const { conversionRate } = this.props
- const { eventKey, value } = activity
- const ethValue = getEthConversionFromWeiHex({ value, toCurrency: ETH, conversionRate })
+ const { eventKey, value, timestamp } = activity
+ const ethValue = index === 0
+ ? `${getValueFromWeiHex({
+ value,
+ toCurrency: ETH,
+ conversionRate,
+ numberOfDecimals: 6,
+ })} ${ETH}`
+ : getEthConversionFromWeiHex({ value, toCurrency: ETH, conversionRate })
+ const formattedTimestamp = formatDate(timestamp)
+ const activityText = this.context.t(eventKey, [ethValue, formattedTimestamp])
return (
-
- { this.context.t(eventKey, [ethValue]) }
+
+ { activityText }
)
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 fff0b68dc..32834ff47 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
@@ -17,6 +17,7 @@ const TRANSACTION_UPDATED_GAS_EVENT = 'transactionUpdatedGas'
const TRANSACTION_SUBMITTED_EVENT = 'transactionSubmitted'
const TRANSACTION_CONFIRMED_EVENT = 'transactionConfirmed'
const TRANSACTION_DROPPED_EVENT = 'transactionDropped'
+const TRANSACTION_UPDATED_EVENT = 'transactionUpdated'
const eventPathsHash = {
[STATUS_PATH]: true,
@@ -67,7 +68,7 @@ export function getActivities (transaction) {
}
default: {
- events.push(eventCreator(value, timestamp))
+ events.push(eventCreator(TRANSACTION_UPDATED_EVENT, timestamp))
}
}
}
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
index a168b53dc..bb6075e9f 100644
--- a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
@@ -7,7 +7,7 @@ import CurrencyDisplay from '../currency-display'
import HexToDecimal from '../hex-to-decimal'
import { ETH, GWEI } from '../../constants/common'
import { getHexGasTotal } from '../../helpers/confirm-transaction/util'
-import { addHex } from '../../helpers/transactions.util'
+import { sumHexes } from '../../helpers/transactions.util'
export default class TransactionBreakdown extends PureComponent {
static contextTypes = {
@@ -28,7 +28,7 @@ export default class TransactionBreakdown extends PureComponent {
const { transaction, className } = this.props
const { txParams: { gas, gasPrice, value } = {} } = transaction
const hexGasTotal = getHexGasTotal({ gasLimit: gas, gasPrice })
- const totalInHex = addHex(hexGasTotal, value)
+ const totalInHex = sumHexes(hexGasTotal, value)
return (
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 d895b8e26..5564f0883 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
@@ -22,6 +22,7 @@ export default class TransactionListItem extends PureComponent {
nonceAndDate: PropTypes.string,
token: PropTypes.object,
assetImages: PropTypes.object,
+ tokenData: PropTypes.object,
}
state = {
@@ -106,9 +107,13 @@ export default class TransactionListItem extends PureComponent {
showRetry,
nonceAndDate,
assetImages,
+ tokenData,
} = this.props
const { txParams = {} } = transaction
const { showTransactionDetails } = this.state
+ const toAddress = tokenData
+ ? tokenData.params && tokenData.params[0] && tokenData.params[0].value || txParams.to
+ : txParams.to
return (
@@ -118,9 +123,9 @@ export default class TransactionListItem extends PureComponent {
>
{
- const { transaction: { txParams: { value, nonce } = {}, time } = {} } = ownProps
+ const { transaction: { txParams: { value, nonce, data } = {}, time } = {} } = ownProps
+ const tokenData = data && getTokenData(data)
const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time)
return {
value,
nonceAndDate,
+ tokenData,
}
}
diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js
index b88b00ac6..0e1a6ca37 100644
--- a/ui/app/helpers/transactions.util.js
+++ b/ui/app/helpers/transactions.util.js
@@ -106,7 +106,7 @@ export async function isSmartContractAddress (address) {
return code && code !== '0x'
}
-export function addHex (...args) {
+export function sumHexes (...args) {
const total = args.reduce((acc, base) => {
return addCurrencies(acc, base, {
toNumericBase: 'hex',