Version Bump (#5909)v5.2.0

* Adds new gas customization modal container (without content)

* Adds the content of the advanced tab - w/o chart or dynamic content - to gas customize modal.

* Use correct message key in gas-modal-page-container.component.js

* Use BEM for css in gas-modal-page-container

* Split advanced-tab-content.component.js  render() method into smaller pieces; add translations to the same file.

* Remove gas slider from advance-tab-content.component

* Add tests for advanced-tab-component.js and subcomponents.

* Improve styling of advanced-tab-content gasInput row

* Adds basic tab content to gas customizer, with styled button group (static, for now).

* Connect the gas-button-group component to redux and a live api.

* Improvements to propdefaults in button-group.component and basic-tab-content.component

* Styling fixes for gas customization advanced tab content.

* Adds gas-duck.test.js tests.

* Connects remained of the gas customization component to redux.

* Integrate gas buttons with the send screen.

* Test updates and additions for button integration with send screen.

* Adds redesign for the customize gas advanced tab.

* Adds not yet functional gas price chart.

* Gas price chart improvements, redesign, bug fixes, and set up to receive external data

* Read only connection of gas price chart to redux

* Clean up for advanced gas tab customization changes.

* Complete integration of gas chart with redux.

* Add control arrows to advanced gas tab inputs.

* Lint and unit test fixes.

* Clean up gas chart code.

* Update tests, plus some lint fixes, for gas-price-chart

* Improve data management and tests for gas-modal-page-container price estimates.

* Clean up for mmui-i11-custom-gas-price-chart branch

* Redesign of gas customization basic tab.

* Adds createSpeedUpTransaction to txController

* Connect gas price chart to gas station api.

* Adds speed up slide-in gas customization sidebar

* Update e2e tests for new gas customization modal.

* Fixes for components that break e2e gas customization tests, plus unit test updates.

* Remove gas customization integration tests (in favour of e2e tests)

* Add gas data to integration test json data set.

* Add c3 and d3 to the separate dependencies bundle.

* Make gas customization modal responsive.

* Fix "fastest" translation message; change to sentence case

* Uses more reliable api on main send screen; caches basic api results in modal

* Add loading spinners when waiting for APIs in the gas customization modal

* Modify results of API data to better fit gas chart: remove outliers, pad data

* Clear custom gas data on hiding of gas customization modal.

* Improve responsiveness of customize speed up slider.

* Final gas customization fixes

* Fix styling of send screen in extension view when hex data on.

* Replace height: 100% rule with workaround for flexbox quirks

* Fill in more Polish message translations

* Update lockfile to fix errors

npm has informed me that the lockfile has "errors":

    npm ERR! code ELOCKVERIFY
    npm ERR! Errors were found in your package-lock.json, run  npm install  to fix them.
    npm ERR!     Missing: c3@^0.6.7
    npm ERR!     Invalid: lock file's d3@3.5.17 does not satisfy d3@^5.7.0

* circleci: Disable npm audit when installing packages

Auditing packages when installing here doesn't help anyone as the summary
isn't visible and vulnerabilities don't produce a non-zero exit code. We
will have `npm audit` as an extra CI job.

* npm audit fix

* circleci: Replace nsp with npm audit

Refs #4751

* Remove beefy dependency and its usages

Refs #4768
Refs #5389

This changeset removes the beefy package that:

1. Was last published 2 yrs ago
2. Brought with it 1 moderate and 1 critical vulnerability
3. Was only used in scripts that no longer work

* npm uninstall open

* Update ganache-core to mitigate vuln

                       === npm audit security report ===

> # Run  npm install --save-dev ganache-core@2.3.1  to resolve 1 vulnerability
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Memory Exposure                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ bl                                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ ganache-core [dev]                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ ganache-core > level-sublevel > levelup > bl                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/596                       │
└───────────────┴──────────────────────────────────────────────────────────────┘

* Deduplicate package.json file

From `npm install`:

> npm WARN The package css-loader is included as both a dev and production dependency.
> npm WARN The package eslint-plugin-react is included as both a dev and production dependency.
> npm WARN The package file-loader is included as both a dev and production dependency.
> npm WARN The package gulp is included as both a dev and production dependency.

It's also worth noting that the Gulp version we were using was inconsistent and there is
a published v4 release on GitHub.

* Fix race condition in network controller lookup() method.

* Group transactions by nonce (#5886)

* fix formatting of 32-byte strings in personal_sign (#5878)

* Bump json-rpc-engine to v4.0.0

* Bump package lock, mostly to https links

* Improve ux for low gas price set (#5862)

* Show user warning if they set gas price below safelow minimum, error if 0.

* Properly cache basic price estimate data.

* Default retry price to recommended price if original price was 0x0

* Use mock fetch in send-new-ui integration tests.

* Show Failed transaction in the browser notification for on-chain failures (#5904)

* Changelog and version bump for 5.2.0

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