Fix identicon address. Fix styling of New Contract recipient. Fix Activity Log initial ETH value. Add timestamps to Activity Log events

app/_locales/en/messages.json

@@ -1095,19 +1095,22 @@
     "message": "transaction"
   },
   "transactionConfirmed": {
-    "message": "Transaction confirmed."
+    "message": "Transaction confirmed on $2."
   },
   "transactionCreated": {
-    "message": "Transaction created with a value of $1."
+    "message": "Transaction created with a value of $1 on $2."
   },
   "transactionDropped": {
-    "message": "Transaction dropped."
+    "message": "Transaction dropped on $2."
   },
   "transactionSubmitted": {
-    "message": "Transaction submitted."
+    "message": "Transaction submitted on $2."
+  },
+  "transactionUpdated": {
+    "message": "Transaction updated on $2."
   },
   "transactionUpdatedGas": {
-    "message": "Transaction updated with a gas price of $1."
+    "message": "Transaction updated with a gas price of $1 on $2."
   },
   "transactions": {
     "message": "transactions"

ui/app/components/sender-to-recipient/sender-to-recipient.component.js

@@ -115,7 +115,7 @@ export default class SenderToRecipient extends PureComponent {
   renderRecipientWithoutAddress () {
     return (
       <div className="sender-to-recipient__party sender-to-recipient__party--recipient">
-        <i className="fa fa-file-text-o" />
+        { !this.props.addressOnly && <i className="fa fa-file-text-o" /> }
         <div className="sender-to-recipient__name">
           { this.context.t('newContract') }
         </div>

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 {

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 (
       <div
@@ -50,8 +60,11 @@ export default class TransactionActivityLog extends PureComponent {
         className="transaction-activity-log__activity"
       >
         <div className="transaction-activity-log__activity-icon" />
-        <div className="transaction-activity-log__activity-text">
-          { this.context.t(eventKey, [ethValue]) }
+        <div
+          className="transaction-activity-log__activity-text"
+          title={activityText}
+        >
+          { activityText }
         </div>
       </div>
     )

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))
             }
           }
         }

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 (
       <div className={classnames('transaction-breakdown', className)}>

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 (
       <div className="transaction-list-item">
@@ -118,9 +123,9 @@ export default class TransactionListItem extends PureComponent {
         >
           <Identicon
             className="transaction-list-item__identicon"
-            address={txParams.to}
+            address={toAddress}
             diameter={34}
-            image={assetImages[txParams.to]}
+            image={assetImages[toAddress]}
           />
           <TransactionAction
             transaction={transaction}

ui/app/components/transaction-list-item/transaction-list-item.container.js

@@ -5,16 +5,19 @@ import withMethodData from '../../higher-order-components/with-method-data'
 import TransactionListItem from './transaction-list-item.component'
 import { setSelectedToken, retryTransaction } from '../../actions'
 import { hexToDecimal } from '../../helpers/conversions.util'
+import { getTokenData } from '../../helpers/transactions.util'
 import { formatDate } from '../../util'
 
 const mapStateToProps = (state, ownProps) => {
-  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,
   }
 }
 

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',