1 files changed, 74 insertions, 40 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 58d932a0f..d6f90860a 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,10 +1,11 @@
 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, getValueFromWeiHex } from '../../helpers/conversions.util'
 import { formatDate } from '../../util'
+import TransactionActivityLogIcon from './transaction-activity-log-icon'
+import { CONFIRMED_STATUS } from './transaction-activity-log.constants'
+import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
 
 export default class TransactionActivityLog extends PureComponent {
   static contextTypes = {
@@ -12,41 +13,64 @@ export default class TransactionActivityLog extends PureComponent {
   }
 
   static propTypes = {
-    transaction: PropTypes.object,
+    activities: PropTypes.array,
     className: PropTypes.string,
     conversionRate: PropTypes.number,
+    inlineRetryIndex: PropTypes.number,
+    inlineCancelIndex: PropTypes.number,
     nativeCurrency: PropTypes.string,
+    onCancel: PropTypes.func,
+    onRetry: PropTypes.func,
+    primaryTransaction: PropTypes.object,
   }
 
-  state = {
-    activities: [],
-  }
+  handleActivityClick = hash => {
+    const { primaryTransaction } = this.props
+    const { metamaskNetworkId } = primaryTransaction
+
+    const prefix = prefixForNetwork(metamaskNetworkId)
+    const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
 
-  componentDidMount () {
-    this.setActivites()
+    global.platform.openWindow({ url: etherscanUrl })
   }
 
-  componentDidUpdate (prevProps) {
-    const {
-      transaction: { history: prevHistory = [], txReceipt: { status: prevStatus } = {} } = {},
-    } = prevProps
-    const {
-      transaction: { history = [], txReceipt: { status } = {} } = {},
-    } = this.props
+  renderInlineRetry (index, activity) {
+    const { t } = this.context
+    const { inlineRetryIndex, primaryTransaction = {}, onRetry } = this.props
+    const { status } = primaryTransaction
+    const { id } = activity
 
-    if (prevHistory.length !== history.length || prevStatus !== status) {
-      this.setActivites()
-    }
+    return status !== CONFIRMED_STATUS && index === inlineRetryIndex
+      ? (
+        <div
+          className="transaction-activity-log__action-link"
+          onClick={() => onRetry(id)}
+        >
+          { t('speedUpTransaction') }
+        </div>
+      ) : null
   }
 
-  setActivites () {
-    const activities = getActivities(this.props.transaction)
-    this.setState({ activities })
+  renderInlineCancel (index, activity) {
+    const { t } = this.context
+    const { inlineCancelIndex, primaryTransaction = {}, onCancel } = this.props
+    const { status } = primaryTransaction
+    const { id } = activity
+
+    return status !== CONFIRMED_STATUS && index === inlineCancelIndex
+      ? (
+        <div
+          className="transaction-activity-log__action-link"
+          onClick={() => onCancel(id)}
+        >
+          { t('speedUpCancellation') }
+        </div>
+      ) : null
   }
 
   renderActivity (activity, index) {
     const { conversionRate, nativeCurrency } = this.props
-    const { eventKey, value, timestamp } = activity
+    const { eventKey, value, timestamp, hash } = activity
     const ethValue = index === 0
       ? `${getValueFromWeiHex({
         value,
@@ -55,8 +79,13 @@ export default class TransactionActivityLog extends PureComponent {
         conversionRate,
         numberOfDecimals: 6,
       })} ${nativeCurrency}`
-      : getEthConversionFromWeiHex({ value, fromCurrency: nativeCurrency, conversionRate })
-    const formattedTimestamp = formatDate(timestamp)
+      : getEthConversionFromWeiHex({
+        value,
+        fromCurrency: nativeCurrency,
+        conversionRate,
+        numberOfDecimals: 3,
+      })
+    const formattedTimestamp = formatDate(timestamp, '14:30 on 3/16/2014')
     const activityText = this.context.t(eventKey, [ethValue, formattedTimestamp])
 
     return (
@@ -64,12 +93,20 @@ export default class TransactionActivityLog extends PureComponent {
         key={index}
         className="transaction-activity-log__activity"
       >
-        <div className="transaction-activity-log__activity-icon" />
-        <div
-          className="transaction-activity-log__activity-text"
-          title={activityText}
-        >
-          { activityText }
+        <TransactionActivityLogIcon
+          className="transaction-activity-log__activity-icon"
+          eventKey={eventKey}
+        />
+        <div className="transaction-activity-log__entry-container">
+          <div
+            className="transaction-activity-log__activity-text"
+            title={activityText}
+            onClick={() => this.handleActivityClick(hash)}
+          >
+            { activityText }
+          </div>
+          { this.renderInlineRetry(index, activity) }
+          { this.renderInlineCancel(index, activity) }
         </div>
       </div>
     )
@@ -77,19 +114,16 @@ export default class TransactionActivityLog extends PureComponent {
 
   render () {
     const { t } = this.context
-    const { className } = this.props
-    const { activities } = this.state
+    const { className, activities } = this.props
 
     return (
       <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)) }
-          </div>
-        </Card>
+        <div className="transaction-activity-log__title">
+          { t('activityLog') }
+        </div>
+        <div className="transaction-activity-log__activities-container">
+          { activities.map((activity, index) => this.renderActivity(activity, index)) }
+        </div>
       </div>
     )
   }