Group transactions by nonce (#5886)

9 files changed, 584 insertions, 111 deletions

diff --git a/ui/app/components/transaction-activity-log/index.scss b/ui/app/components/transaction-activity-log/index.scss
index 27f3006b3..00c17e6aa 100644
--- a/ui/app/components/transaction-activity-log/index.scss
+++ b/ui/app/components/transaction-activity-log/index.scss
@@ -1,7 +1,8 @@
 .transaction-activity-log {
-  &__card {
-    background: $white;
-    height: 100%;
+  &__title {
+    border-bottom: 1px solid #d8d8d8;
+    padding-bottom: 4px;
+    text-transform: capitalize;
   }
 
   &__activities-container {
@@ -21,8 +22,8 @@
       left: 0;
       top: 0;
       height: 100%;
-      width: 6px;
-      border-right: 1px solid $scorpion;
+      width: 7px;
+      border-right: 1px solid #909090;
     }
 
     &:first-child::after {
@@ -40,22 +41,25 @@
   }
 
   &__activity-icon {
-    width: 13px;
-    height: 13px;
+    width: 15px;
+    height: 15px;
     margin-right: 6px;
     border-radius: 50%;
-    background: $scorpion;
+    background: #909090;
     flex: 0 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
   }
 
   &__activity-text {
-    color: $scorpion;
+    color: $dusty-gray;
     font-size: .75rem;
+    cursor: pointer;
 
-    @media screen and (min-width: $break-large) {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+    &:hover {
+      color: $black;
     }
   }
 
@@ -64,6 +68,16 @@
     font-weight: 500;
   }
 
+  &__entry-container {
+    min-width: 0;
+  }
+
+  &__action-link {
+    font-size: .75rem;
+    cursor: pointer;
+    color: $curious-blue;
+  }
+
   b {
     font-weight: 500;
   }
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
index 8687dbbc7..a2946e53d 100644
--- a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
@@ -2,34 +2,100 @@ import React from 'react'
 import assert from 'assert'
 import { shallow } from 'enzyme'
 import TransactionActivityLog from '../transaction-activity-log.component'
-import Card from '../../card'
 
 describe('TransactionActivityLog Component', () => {
   it('should render properly', () => {
-    const transaction = {
-      history: [],
-      id: 1,
-      status: 'confirmed',
-      txParams: {
-        from: '0x1',
-        gas: '0x5208',
-        gasPrice: '0x3b9aca00',
-        nonce: '0xa4',
-        to: '0x2',
+    const activities = [
+      {
+        eventKey: 'transactionCreated',
+        hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63',
+        id: 2005383477493174,
+        timestamp: 1543957986150,
         value: '0x2386f26fc10000',
+      }, {
+        eventKey: 'transactionSubmitted',
+        hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63',
+        id: 2005383477493174,
+        timestamp: 1543957987853,
+        value: '0x1319718a5000',
+      }, {
+        eventKey: 'transactionResubmitted',
+        hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
+        id: 2005383477493175,
+        timestamp: 1543957991563,
+        value: '0x1502634b5800',
+      }, {
+        eventKey: 'transactionConfirmed',
+        hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
+        id: 2005383477493175,
+        timestamp: 1543958029960,
+        value: '0x1502634b5800',
       },
-    }
+    ]
 
     const wrapper = shallow(
       <TransactionActivityLog
-        transaction={transaction}
+        activities={activities}
         className="test-class"
+        inlineRetryIndex={-1}
+        inlineCancelIndex={-1}
+        nativeCurrency="ETH"
+        onCancel={() => {}}
+        onRetry={() => {}}
+        primaryTransactionStatus="confirmed"
       />,
       { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
     )
 
     assert.ok(wrapper.hasClass('transaction-activity-log'))
     assert.ok(wrapper.hasClass('test-class'))
-    assert.equal(wrapper.find(Card).length, 1)
+  })
+
+  it('should render inline retry and cancel buttons', () => {
+    const activities = [
+      {
+        eventKey: 'transactionCreated',
+        hash: '0xa',
+        id: 1,
+        timestamp: 1,
+        value: '0x1',
+      }, {
+        eventKey: 'transactionSubmitted',
+        hash: '0xa',
+        id: 1,
+        timestamp: 2,
+        value: '0x1',
+      }, {
+        eventKey: 'transactionResubmitted',
+        hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
+        id: 2,
+        timestamp: 3,
+        value: '0x1',
+      }, {
+        eventKey: 'transactionCancelAttempted',
+        hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
+        id: 3,
+        timestamp: 4,
+        value: '0x1',
+      },
+    ]
+
+    const wrapper = shallow(
+      <TransactionActivityLog
+        activities={activities}
+        className="test-class"
+        inlineRetryIndex={2}
+        inlineCancelIndex={3}
+        nativeCurrency="ETH"
+        onCancel={() => {}}
+        onRetry={() => {}}
+        primaryTransactionStatus="pending"
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-activity-log'))
+    assert.ok(wrapper.hasClass('test-class'))
+    assert.equal(wrapper.find('.transaction-activity-log__action-link').length, 2)
   })
 })
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
index 586500408..d014b8886 100644
--- a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
@@ -1,5 +1,130 @@
 import assert from 'assert'
-import { getActivities } from '../transaction-activity-log.util'
+import { combineTransactionHistories, getActivities } from '../transaction-activity-log.util'
+
+describe('combineTransactionHistories', () => {
+  it('should return no activites for an empty list of transactions', () => {
+    assert.deepEqual(combineTransactionHistories([]), [])
+  })
+
+  it('should return activities for an array of transactions', () => {
+    const transactions = [
+      {
+        estimatedGas: '0x5208',
+        hash: '0xa14f13d36b3901e352ce3a7acb9b47b001e5a3370f06232a0953c6fc6fad91b3',
+        history: [
+          {
+            'id': 6400627574331058,
+            'time': 1543958845581,
+            'status': 'unapproved',
+            'metamaskNetworkId': '3',
+            'loadingDefaults': true,
+            'txParams': {
+              'from': '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706',
+              'to': '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+              'value': '0x2386f26fc10000',
+              'gas': '0x5208',
+              'gasPrice': '0x3b9aca00',
+            },
+            'type': 'standard',
+          },
+          [{ 'op': 'replace', 'path': '/status', 'value': 'approved', 'note': 'txStateManager: setting status to approved', 'timestamp': 1543958847813 }],
+          [{ 'op': 'replace', 'path': '/status', 'value': 'submitted', 'note': 'txStateManager: setting status to submitted', 'timestamp': 1543958848147 }],
+          [{ 'op': 'replace', 'path': '/status', 'value': 'dropped', 'note': 'txStateManager: setting status to dropped', 'timestamp': 1543958897181 }, { 'op': 'add', 'path': '/replacedBy', 'value': '0xecbe181ee67c4291d04a7cb9ffbf1d5d831e4fbaa89994fd06bab5dd4cc79b33' }],
+        ],
+        id: 6400627574331058,
+        loadingDefaults: false,
+        metamaskNetworkId: '3',
+        status: 'dropped',
+        submittedTime: 1543958848135,
+        time: 1543958845581,
+        txParams: {
+          from: '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706',
+          gas: '0x5208',
+          gasPrice: '0x3b9aca00',
+          nonce: '0x32',
+          to: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+          value: '0x2386f26fc10000',
+        },
+        type: 'standard',
+      }, {
+        hash: '0xecbe181ee67c4291d04a7cb9ffbf1d5d831e4fbaa89994fd06bab5dd4cc79b33',
+        history: [
+          {
+            'id': 6400627574331060,
+            'time': 1543958857697,
+            'status': 'unapproved',
+            'metamaskNetworkId': '3',
+            'loadingDefaults': false,
+            'txParams': {
+              'from': '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706',
+              'to': '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+              'value': '0x2386f26fc10000',
+              'gas': '0x5208',
+              'gasPrice': '0x3b9aca00',
+              'nonce': '0x32',
+            },
+            'lastGasPrice': '0x4190ab00',
+            'type': 'retry',
+          },
+          [{ 'op': 'replace', 'path': '/txParams/gasPrice', 'value': '0x481f2280', 'note': 'confTx: user approved transaction', 'timestamp': 1543958859470 }],
+          [{ 'op': 'replace', 'path': '/status', 'value': 'approved', 'note': 'txStateManager: setting status to approved', 'timestamp': 1543958859485 }],
+          [{ 'op': 'replace', 'path': '/status', 'value': 'signed', 'note': 'transactions#publishTransaction', 'timestamp': 1543958859889 }],
+          [{ 'op': 'replace', 'path': '/status', 'value': 'submitted', 'note': 'txStateManager: setting status to submitted', 'timestamp': 1543958860061 }], [{ 'op': 'add', 'path': '/firstRetryBlockNumber', 'value': '0x45a0fd', 'note': 'transactions/pending-tx-tracker#event: tx:block-update', 'timestamp': 1543958896466 }],
+          [{ 'op': 'replace', 'path': '/status', 'value': 'confirmed', 'timestamp': 1543958897165 }],
+        ],
+        id: 6400627574331060,
+        lastGasPrice: '0x4190ab00',
+        loadingDefaults: false,
+        metamaskNetworkId: '3',
+        status: 'confirmed',
+        submittedTime: 1543958860054,
+        time: 1543958857697,
+        txParams: {
+          from: '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706',
+          gas: '0x5208',
+          gasPrice: '0x481f2280',
+          nonce: '0x32',
+          to: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+          value: '0x2386f26fc10000',
+        },
+        txReceipt: {
+          status: '0x1',
+        },
+        type: 'retry',
+      },
+    ]
+
+    const expected = [
+      {
+        id: 6400627574331058,
+        hash: '0xa14f13d36b3901e352ce3a7acb9b47b001e5a3370f06232a0953c6fc6fad91b3',
+        eventKey: 'transactionCreated',
+        timestamp: 1543958845581,
+        value: '0x2386f26fc10000',
+      }, {
+        id: 6400627574331058,
+        hash: '0xa14f13d36b3901e352ce3a7acb9b47b001e5a3370f06232a0953c6fc6fad91b3',
+        eventKey: 'transactionSubmitted',
+        timestamp: 1543958848147,
+        value: '0x1319718a5000',
+      }, {
+        id: 6400627574331060,
+        hash: '0xecbe181ee67c4291d04a7cb9ffbf1d5d831e4fbaa89994fd06bab5dd4cc79b33',
+        eventKey: 'transactionResubmitted',
+        timestamp: 1543958860061,
+        value: '0x171c3a061400',
+      }, {
+        id: 6400627574331060,
+        hash: '0xecbe181ee67c4291d04a7cb9ffbf1d5d831e4fbaa89994fd06bab5dd4cc79b33',
+        eventKey: 'transactionConfirmed',
+        timestamp: 1543958897165,
+        value: '0x171c3a061400',
+      },
+    ]
+
+    assert.deepEqual(combineTransactionHistories(transactions), expected)
+  })
+})
 
 describe('getActivities', () => {
   it('should return no activities for an empty history', () => {
@@ -178,6 +303,7 @@ describe('getActivities', () => {
         to: '0x2',
         value: '0x2386f26fc10000',
       },
+      hash: '0xabc',
     }
 
     const expectedResult = [
@@ -185,24 +311,25 @@ describe('getActivities', () => {
         'eventKey': 'transactionCreated',
         'timestamp': 1535507561452,
         'value': '0x2386f26fc10000',
-      },
-      {
-        'eventKey': 'transactionUpdatedGas',
-        'timestamp': 1535664571504,
-        'value': '0x77359400',
+        'id': 1,
+        'hash': '0xabc',
       },
       {
         'eventKey': 'transactionSubmitted',
         'timestamp': 1535507564665,
-        'value': undefined,
+        'value': '0x2632e314a000',
+        'id': 1,
+        'hash': '0xabc',
       },
       {
         'eventKey': 'transactionConfirmed',
         'timestamp': 1535507615993,
-        'value': undefined,
+        'value': '0x2632e314a000',
+        'id': 1,
+        'hash': '0xabc',
       },
     ]
 
-    assert.deepEqual(getActivities(transaction), expectedResult)
+    assert.deepEqual(getActivities(transaction, true), expectedResult)
   })
 })
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log-icon/index.js b/ui/app/components/transaction-activity-log/transaction-activity-log-icon/index.js
new file mode 100644
index 000000000..86b12360a
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log-icon/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-activity-log-icon.component'
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js b/ui/app/components/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
new file mode 100644
index 000000000..871716002
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
@@ -0,0 +1,55 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import {
+  TRANSACTION_CREATED_EVENT,
+  TRANSACTION_SUBMITTED_EVENT,
+  TRANSACTION_RESUBMITTED_EVENT,
+  TRANSACTION_CONFIRMED_EVENT,
+  TRANSACTION_DROPPED_EVENT,
+  TRANSACTION_ERRORED_EVENT,
+  TRANSACTION_CANCEL_ATTEMPTED_EVENT,
+  TRANSACTION_CANCEL_SUCCESS_EVENT,
+} from '../transaction-activity-log.constants'
+
+const imageHash = {
+  [TRANSACTION_CREATED_EVENT]: '/images/icons/new.svg',
+  [TRANSACTION_SUBMITTED_EVENT]: '/images/icons/submitted.svg',
+  [TRANSACTION_RESUBMITTED_EVENT]: '/images/icons/retry.svg',
+  [TRANSACTION_CONFIRMED_EVENT]: '/images/icons/confirm.svg',
+  [TRANSACTION_DROPPED_EVENT]: '/images/icons/cancelled.svg',
+  [TRANSACTION_ERRORED_EVENT]: '/images/icons/error.svg',
+  [TRANSACTION_CANCEL_ATTEMPTED_EVENT]: '/images/icons/cancelled.svg',
+  [TRANSACTION_CANCEL_SUCCESS_EVENT]: '/images/icons/cancelled.svg',
+}
+
+export default class TransactionActivityLogIcon extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    className: PropTypes.string,
+    eventKey: PropTypes.oneOf(Object.keys(imageHash)),
+  }
+
+  render () {
+    const { className, eventKey } = this.props
+    const imagePath = imageHash[eventKey]
+
+    return (
+      <div className={classnames('transaction-activity-log-icon', className)}>
+      {
+        imagePath && (
+          <img
+            src={imagePath}
+            height={9}
+            width={9}
+          />
+        )
+      }
+      </div>
+    )
+  }
+}
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>
     )
   }
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.constants.js b/ui/app/components/transaction-activity-log/transaction-activity-log.constants.js
new file mode 100644
index 000000000..72e63d85c
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.constants.js
@@ -0,0 +1,13 @@
+export const TRANSACTION_CREATED_EVENT = 'transactionCreated'
+export const TRANSACTION_SUBMITTED_EVENT = 'transactionSubmitted'
+export const TRANSACTION_RESUBMITTED_EVENT = 'transactionResubmitted'
+export const TRANSACTION_CONFIRMED_EVENT = 'transactionConfirmed'
+export const TRANSACTION_DROPPED_EVENT = 'transactionDropped'
+export const TRANSACTION_UPDATED_EVENT = 'transactionUpdated'
+export const TRANSACTION_ERRORED_EVENT = 'transactionErrored'
+export const TRANSACTION_CANCEL_ATTEMPTED_EVENT = 'transactionCancelAttempted'
+export const TRANSACTION_CANCEL_SUCCESS_EVENT = 'transactionCancelSuccess'
+
+export const SUBMITTED_STATUS = 'submitted'
+export const CONFIRMED_STATUS = 'confirmed'
+export const DROPPED_STATUS = 'dropped'
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.container.js b/ui/app/components/transaction-activity-log/transaction-activity-log.container.js
index 622f77df1..e43229708 100644
--- a/ui/app/components/transaction-activity-log/transaction-activity-log.container.js
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.container.js
@@ -1,6 +1,14 @@
 import { connect } from 'react-redux'
+import R from 'ramda'
 import TransactionActivityLog from './transaction-activity-log.component'
 import { conversionRateSelector, getNativeCurrency } from '../../selectors'
+import { combineTransactionHistories } from './transaction-activity-log.util'
+import {
+  TRANSACTION_RESUBMITTED_EVENT,
+  TRANSACTION_CANCEL_ATTEMPTED_EVENT,
+} from './transaction-activity-log.constants'
+
+const matchesEventKey = matchEventKey => ({ eventKey }) => eventKey === matchEventKey
 
 const mapStateToProps = state => {
   return {
@@ -9,4 +17,28 @@ const mapStateToProps = state => {
   }
 }
 
-export default connect(mapStateToProps)(TransactionActivityLog)
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const {
+    transactionGroup: {
+      transactions = [],
+      primaryTransaction,
+    } = {},
+    ...restOwnProps
+  } = ownProps
+
+  const activities = combineTransactionHistories(transactions)
+  const inlineRetryIndex = R.findLastIndex(matchesEventKey(TRANSACTION_RESUBMITTED_EVENT))(activities)
+  const inlineCancelIndex = R.findLastIndex(matchesEventKey(TRANSACTION_CANCEL_ATTEMPTED_EVENT))(activities)
+
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    ...restOwnProps,
+    activities,
+    inlineRetryIndex,
+    inlineCancelIndex,
+    primaryTransaction,
+  }
+}
+
+export default connect(mapStateToProps, null, mergeProps)(TransactionActivityLog)
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 16597ae1a..6206a4678 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
@@ -1,28 +1,39 @@
+import { getHexGasTotal } from '../../helpers/confirm-transaction/util'
+
 // path constants
 const STATUS_PATH = '/status'
 const GAS_PRICE_PATH = '/txParams/gasPrice'
-
-// status constants
-const UNAPPROVED_STATUS = 'unapproved'
-const SUBMITTED_STATUS = 'submitted'
-const CONFIRMED_STATUS = 'confirmed'
-const DROPPED_STATUS = 'dropped'
+const GAS_LIMIT_PATH = '/txParams/gas'
 
 // op constants
 const REPLACE_OP = 'replace'
 
-// event constants
-const TRANSACTION_CREATED_EVENT = 'transactionCreated'
-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 TRANSACTION_ERRORED_EVENT = 'transactionErrored'
+import {
+  // event constants
+  TRANSACTION_CREATED_EVENT,
+  TRANSACTION_SUBMITTED_EVENT,
+  TRANSACTION_RESUBMITTED_EVENT,
+  TRANSACTION_CONFIRMED_EVENT,
+  TRANSACTION_DROPPED_EVENT,
+  TRANSACTION_UPDATED_EVENT,
+  TRANSACTION_ERRORED_EVENT,
+  TRANSACTION_CANCEL_ATTEMPTED_EVENT,
+  TRANSACTION_CANCEL_SUCCESS_EVENT,
+  // status constants
+  SUBMITTED_STATUS,
+  CONFIRMED_STATUS,
+  DROPPED_STATUS,
+} from './transaction-activity-log.constants'
+
+import {
+  TRANSACTION_TYPE_CANCEL,
+  TRANSACTION_TYPE_RETRY,
+} from '../../../../app/scripts/controllers/transactions/enums'
 
 const eventPathsHash = {
   [STATUS_PATH]: true,
   [GAS_PRICE_PATH]: true,
+  [GAS_LIMIT_PATH]: true,
 }
 
 const statusHash = {
@@ -31,22 +42,39 @@ const statusHash = {
   [DROPPED_STATUS]: TRANSACTION_DROPPED_EVENT,
 }
 
-function eventCreator (eventKey, timestamp, value) {
-  return {
-    eventKey,
-    timestamp,
-    value,
-  }
-}
-
-export function getActivities (transaction) {
-  const { history = [], txReceipt: { status } = {} } = transaction
-
-  const historyActivities = history.reduce((acc, base) => {
+/**
+ * @name getActivities
+ * @param {Object} transaction - txMeta object
+ * @param {boolean} isFirstTransaction - True if the transaction is the first created transaction
+ * in the list of transactions with the same nonce. If so, we use this transaction to create the
+ * transactionCreated activity.
+ * @returns {Array}
+ */
+export function getActivities (transaction, isFirstTransaction = false) {
+  const { id, hash, history = [], txReceipt: { status } = {}, type } = transaction
+
+  let cachedGasLimit = '0x0'
+  let cachedGasPrice = '0x0'
+
+  const historyActivities = history.reduce((acc, base, index) => {
     // First history item should be transaction creation
-    if (!Array.isArray(base) && base.status === UNAPPROVED_STATUS && base.txParams) {
-      const { time, txParams: { value } = {} } = base
-      return acc.concat(eventCreator(TRANSACTION_CREATED_EVENT, time, value))
+    if (index === 0 && !Array.isArray(base) && base.txParams) {
+      const { time: timestamp, txParams: { value, gas = '0x0', gasPrice = '0x0' } = {} } = base
+      // The cached gas limit and gas price are used to display the gas fee in the activity log. We
+      // need to cache these values because the status update history events don't provide us with
+      // the latest gas limit and gas price.
+      cachedGasLimit = gas
+      cachedGasPrice = gasPrice
+
+      if (isFirstTransaction) {
+        return acc.concat({
+          id,
+          hash,
+          eventKey: TRANSACTION_CREATED_EVENT,
+          timestamp,
+          value,
+        })
+      }
       // An entry in the history may be an array of more sub-entries.
     } else if (Array.isArray(base)) {
       const events = []
@@ -60,20 +88,69 @@ export function getActivities (transaction) {
         if (path in eventPathsHash && op === REPLACE_OP) {
           switch (path) {
             case STATUS_PATH: {
+              const gasFee = getHexGasTotal({ gasLimit: cachedGasLimit, gasPrice: cachedGasPrice })
+
               if (value in statusHash) {
-                events.push(eventCreator(statusHash[value], timestamp))
+                let eventKey = statusHash[value]
+
+                // If the status is 'submitted', we need to determine whether the event is a
+                // transaction retry or a cancellation attempt.
+                if (value === SUBMITTED_STATUS) {
+                  if (type === TRANSACTION_TYPE_RETRY) {
+                    eventKey = TRANSACTION_RESUBMITTED_EVENT
+                  } else if (type === TRANSACTION_TYPE_CANCEL) {
+                    eventKey = TRANSACTION_CANCEL_ATTEMPTED_EVENT
+                  }
+                } else if (value === CONFIRMED_STATUS) {
+                  if (type === TRANSACTION_TYPE_CANCEL) {
+                    eventKey = TRANSACTION_CANCEL_SUCCESS_EVENT
+                  }
+                }
+
+                events.push({
+                  id,
+                  hash,
+                  eventKey,
+                  timestamp,
+                  value: gasFee,
+                })
               }
 
               break
             }
 
-            case GAS_PRICE_PATH: {
-              events.push(eventCreator(TRANSACTION_UPDATED_GAS_EVENT, timestamp, value))
+            // If the gas price or gas limit has been changed, we update the gasFee of the
+            // previously submitted event. These events happen when the gas limit and gas price is
+            // changed at the confirm screen.
+            case GAS_PRICE_PATH:
+            case GAS_LIMIT_PATH: {
+              const lastEvent = events[events.length - 1] || {}
+              const { lastEventKey } = lastEvent
+
+              if (path === GAS_LIMIT_PATH) {
+                cachedGasLimit = value
+              } else if (path === GAS_PRICE_PATH) {
+                cachedGasPrice = value
+              }
+
+              if (lastEventKey === TRANSACTION_SUBMITTED_EVENT ||
+                lastEventKey === TRANSACTION_RESUBMITTED_EVENT) {
+                lastEvent.value = getHexGasTotal({
+                  gasLimit: cachedGasLimit,
+                  gasPrice: cachedGasPrice,
+                })
+              }
+
               break
             }
 
             default: {
-              events.push(eventCreator(TRANSACTION_UPDATED_EVENT, timestamp))
+              events.push({
+                id,
+                hash,
+                eventKey: TRANSACTION_UPDATED_EVENT,
+                timestamp,
+              })
             }
           }
         }
@@ -88,6 +165,60 @@ export function getActivities (transaction) {
   // If txReceipt.status is '0x0', that means that an on-chain error occured for the transaction,
   // so we add an error entry to the Activity Log.
   return status === '0x0'
-    ? historyActivities.concat(eventCreator(TRANSACTION_ERRORED_EVENT))
+    ? historyActivities.concat({ id, hash, eventKey: TRANSACTION_ERRORED_EVENT })
     : historyActivities
 }
+
+/**
+ * @description Removes "Transaction dropped" activities from a list of sorted activities if one of
+ * the transactions has been confirmed. Typically, if multiple transactions have the same nonce,
+ * once one transaction is confirmed, the rest are dropped. In this case, we don't want to show
+ * multiple "Transaction dropped" activities, and instead want to show a single "Transaction
+ * confirmed".
+ * @param {Array} activities - List of sorted activities generated from the getActivities function.
+ * @returns {Array}
+ */
+function filterSortedActivities (activities) {
+  const filteredActivities = []
+  const hasConfirmedActivity = Boolean(activities.find(({ eventKey }) => (
+    eventKey === TRANSACTION_CONFIRMED_EVENT || eventKey === TRANSACTION_CANCEL_SUCCESS_EVENT
+  )))
+  let addedDroppedActivity = false
+
+  activities.forEach(activity => {
+    if (activity.eventKey === TRANSACTION_DROPPED_EVENT) {
+      if (!hasConfirmedActivity && !addedDroppedActivity) {
+        filteredActivities.push(activity)
+        addedDroppedActivity = true
+      }
+    } else {
+      filteredActivities.push(activity)
+    }
+  })
+
+  return filteredActivities
+}
+
+/**
+ * Combines the histories of an array of transactions into a single array.
+ * @param {Array} transactions - Array of txMeta transaction objects.
+ * @returns {Array}
+ */
+export function combineTransactionHistories (transactions = []) {
+  if (!transactions.length) {
+    return []
+  }
+
+  const activities = []
+
+  transactions.forEach((transaction, index) => {
+    // The first transaction should be the transaction with the earliest submittedTime. We show the
+    // 'created' and 'submitted' activities here. All subsequent transactions will use 'resubmitted'
+    // instead.
+    const transactionActivities = getActivities(transaction, index === 0)
+    activities.push(...transactionActivities)
+  })
+
+  const sortedActivities = activities.sort((a, b) => a.timestamp - b.timestamp)
+  return filterSortedActivities(sortedActivities)
+}