Add tests for TransactionActivityLog. Make changes to rendering events

1 files changed, 15 insertions, 28 deletions

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>