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

3 files changed, 24 insertions, 6 deletions

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