From 930dac110aa9127380673e119b0eaab9d45b1198 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sat, 25 Aug 2018 18:00:38 -0700
Subject: Add ActivityLog component

---
 .../transaction-activity-log.component.js          | 91 ++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 ui/app/components/transaction-activity-log/transaction-activity-log.component.js

(limited to 'ui/app/components/transaction-activity-log/transaction-activity-log.component.js')

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
new file mode 100644
index 000000000..4cba8cf15
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
@@ -0,0 +1,91 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { getActivities } from './transaction-activity-log.util'
+import Card from '../card'
+
+export default class TransactionActivityLog extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    transaction: PropTypes.object,
+  }
+
+  state = {
+    activities: [],
+  }
+
+  componentDidMount () {
+    this.setActivites()
+  }
+
+  componentDidUpdate (prevProps) {
+    const { transaction: { history: prevHistory = [] } = {} } = prevProps
+    const { transaction: { history = [] } = {} } = this.props
+
+    if (prevHistory.length !== history.length) {
+      this.setActivites()
+    }
+  }
+
+  setActivites () {
+    const activities = getActivities(this.props.transaction)
+    this.setState({ activities })
+  }
+
+  renderActivity (activity, index) {
+    return (
+      <div
+        key={index}
+        className="transaction-activity-log__activity"
+      >
+        <div className="transaction-activity-log__activity-icon" />
+        { this.renderActivityText(activity) }
+      </div>
+    )
+  }
+
+  renderActivityText (activity) {
+    const { eventKey, value, valueDescriptionKey } = activity
+
+    return (
+      <div className="transaction-activity-log__activity-text">
+        { `Transaction ` }
+        <b>{ `${eventKey}` }</b>
+        {
+          valueDescriptionKey && value
+            ? (
+              <span>
+                { ` with a ${valueDescriptionKey} of ` }
+                <b>{ value }</b>
+                .
+              </span>
+            ) : '.'
+        }
+      </div>
+    )
+  }
+
+  render () {
+    const { t } = this.context
+    const { activities } = this.state
+
+    return (
+      <div className="transaction-activity-log">
+        <Card
+          title={t('activityLog')}
+          className="transaction-activity-log__card"
+        >
+          <div className="transaction-activity-log__activities-container">
+            {
+              activities.map((activity, index) => (
+                this.renderActivity(activity, index)
+              ))
+            }
+          </div>
+        </Card>
+      </div>
+    )
+  }
+}
-- 
cgit 


From 084158f1a2af9d117c054420e895f4ae76a94df0 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 31 Aug 2018 12:34:22 -0700
Subject: Add tests for TransactionActivityLog. Make changes to rendering
 events

---
 .../transaction-activity-log.component.js          | 43 ++++++++--------------
 1 file changed, 15 insertions(+), 28 deletions(-)

(limited to 'ui/app/components/transaction-activity-log/transaction-activity-log.component.js')

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 4cba8cf15..c0cf099d0 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
@@ -1,7 +1,10 @@
 import React, { PureComponent } from 'react'
 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 { ETH } from '../../constants/common'
 
 export default class TransactionActivityLog extends PureComponent {
   static contextTypes = {
@@ -10,6 +13,8 @@ export default class TransactionActivityLog extends PureComponent {
 
   static propTypes = {
     transaction: PropTypes.object,
+    className: PropTypes.string,
+    conversionRate: PropTypes.number,
   }
 
   state = {
@@ -35,54 +40,36 @@ export default class TransactionActivityLog extends PureComponent {
   }
 
   renderActivity (activity, index) {
+    const { conversionRate } = this.props
+    const { eventKey, value } = activity
+    const ethValue = getEthConversionFromWeiHex({ value, toCurrency: ETH, conversionRate })
+
     return (
       <div
         key={index}
         className="transaction-activity-log__activity"
       >
         <div className="transaction-activity-log__activity-icon" />
-        { this.renderActivityText(activity) }
-      </div>
-    )
-  }
-
-  renderActivityText (activity) {
-    const { eventKey, value, valueDescriptionKey } = activity
-
-    return (
-      <div className="transaction-activity-log__activity-text">
-        { `Transaction ` }
-        <b>{ `${eventKey}` }</b>
-        {
-          valueDescriptionKey && value
-            ? (
-              <span>
-                { ` with a ${valueDescriptionKey} of ` }
-                <b>{ value }</b>
-                .
-              </span>
-            ) : '.'
-        }
+        <div className="transaction-activity-log__activity-text">
+          { this.context.t(eventKey, [ethValue]) }
+        </div>
       </div>
     )
   }
 
   render () {
     const { t } = this.context
+    const { className } = this.props
     const { activities } = this.state
 
     return (
-      <div className="transaction-activity-log">
+      <div className={classnames('transaction-activity-log', className)}>
         <Card
           title={t('activityLog')}
           className="transaction-activity-log__card"
         >
           <div className="transaction-activity-log__activities-container">
-            {
-              activities.map((activity, index) => (
-                this.renderActivity(activity, index)
-              ))
-            }
+            { activities.map((activity, index) => this.renderActivity(activity, index)) }
           </div>
         </Card>
       </div>
-- 
cgit 


From f1a309e0cc110060cc56252ec5f7626ca6403fab Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 7 Sep 2018 13:59:05 -0700
Subject: Fix identicon address. Fix styling of New Contract recipient. Fix
 Activity Log initial ETH value. Add timestamps to Activity Log events

---
 .../transaction-activity-log.component.js          | 23 +++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

(limited to 'ui/app/components/transaction-activity-log/transaction-activity-log.component.js')

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