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

2 files changed, 26 insertions, 40 deletions

diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js
index eede8b1ee..10931a001 100644
--- a/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js
@@ -28,31 +28,29 @@ const mapStateToProps = (state, ownProps) => {
     transactionId,
     transactionStatus,
     originalGasPrice,
+    defaultNewGasPrice,
     newGasFee,
   }
 }
 
 const mapDispatchToProps = dispatch => {
   return {
-    createCancelTransaction: txId => dispatch(createCancelTransaction(txId)),
+    createCancelTransaction: (txId, customGasPrice) => {
+      return dispatch(createCancelTransaction(txId, customGasPrice))
+    },
     showTransactionConfirmedModal: () => dispatch(showModal({ name: 'TRANSACTION_CONFIRMED' })),
   }
 }
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { transactionId, ...restStateProps } = stateProps
-  const {
-    createCancelTransaction: dispatchCreateCancelTransaction,
-    ...restDispatchProps
-  } = dispatchProps
+  const { transactionId, defaultNewGasPrice, ...restStateProps } = stateProps
+  const { createCancelTransaction, ...restDispatchProps } = dispatchProps
 
   return {
     ...restStateProps,
     ...restDispatchProps,
     ...ownProps,
-    createCancelTransaction: newGasPrice => {
-      return dispatchCreateCancelTransaction(transactionId, newGasPrice)
-    },
+    createCancelTransaction: () => createCancelTransaction(transactionId, defaultNewGasPrice),
   }
 }
 
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 5aff4f5e1..0a603db4e 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const FadeModal = require('boron').FadeModal
 const actions = require('../../actions')
+const { resetCustomData: resetCustomGasData } = require('../../ducks/gas.duck')
 const isMobileView = require('../../../lib/is-mobile-view')
 const { getEnvironmentType } = require('../../../../app/scripts/lib/util')
 const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums')
@@ -17,18 +18,17 @@ const ExportPrivateKeyModal = require('./export-private-key-modal')
 const NewAccountModal = require('./new-account-modal')
 const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
 const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
-const CustomizeGasModal = require('../customize-gas-modal')
 const NotifcationModal = require('./notification-modal')
 const QRScanner = require('./qr-scanner')
 
 import ConfirmRemoveAccount from './confirm-remove-account'
 import ConfirmResetAccount from './confirm-reset-account'
 import TransactionConfirmed from './transaction-confirmed'
-import ConfirmCustomizeGasModal from './customize-gas'
 import CancelTransaction from './cancel-transaction'
 import WelcomeBeta from './welcome-beta'
 import RejectTransactions from './reject-transactions'
 import ClearApprovedOrigins from './clear-approved-origins'
+import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container'
 
 const modalContainerBaseStyle = {
   transform: 'translate3d(-50%, 0, 0px)',
@@ -295,7 +295,7 @@ const MODALS = {
 
   CUSTOMIZE_GAS: {
     contents: [
-      h(CustomizeGasModal),
+      h(ConfirmCustomizeGasModal),
     ],
     mobileModalStyle: {
       width: '100vw',
@@ -307,35 +307,20 @@ const MODALS = {
       margin: '0 auto',
     },
     laptopModalStyle: {
-      width: '720px',
-      height: '377px',
+      width: 'auto',
+      height: '0px',
       top: '80px',
+      left: '0px',
       transform: 'none',
-      left: '0',
-      right: '0',
       margin: '0 auto',
+      position: 'relative',
     },
-  },
-
-  CONFIRM_CUSTOMIZE_GAS: {
-    contents: h(ConfirmCustomizeGasModal),
-    mobileModalStyle: {
-      width: '100vw',
-      height: '100vh',
-      top: '0',
-      transform: 'none',
-      left: '0',
-      right: '0',
-      margin: '0 auto',
+    contentStyle: {
+      borderRadius: '8px',
     },
-    laptopModalStyle: {
-      width: '720px',
-      height: '377px',
-      top: '80px',
-      transform: 'none',
-      left: '0',
-      right: '0',
-      margin: '0 auto',
+    customOnHideOpts: {
+      action: resetCustomGasData,
+      args: [],
     },
   },
 
@@ -412,8 +397,11 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
   return {
-    hideModal: () => {
+    hideModal: (customOnHideOpts) => {
       dispatch(actions.hideModal())
+      if (customOnHideOpts && customOnHideOpts.action) {
+        dispatch(customOnHideOpts.action(...customOnHideOpts.args))
+      }
     },
     hideWarning: () => {
       dispatch(actions.hideWarning())
@@ -445,7 +433,7 @@ Modal.prototype.render = function () {
         if (modal.onHide) {
           modal.onHide(this.props)
         }
-        this.onHide()
+        this.onHide(modal.customOnHideOpts)
       },
       ref: (ref) => {
         this.modalRef = ref
@@ -467,11 +455,11 @@ Modal.prototype.componentWillReceiveProps = function (nextProps) {
   }
 }
 
-Modal.prototype.onHide = function () {
+Modal.prototype.onHide = function (customOnHideOpts) {
   if (this.props.onHideCallback) {
     this.props.onHideCallback()
   }
-  this.props.hideModal()
+  this.props.hideModal(customOnHideOpts)
 }
 
 Modal.prototype.hide = function () {