Add togglable advanced gas controls on send and confirm screens (#6112)

* Extract advanced gas input controls to their own component

* Add advanced inline gas toggle to settings

* Add optional advanced inline gas to send send screen

* Adds optional advanced gas inputs to the confirm screen

* Add info modals for advanced gas inputs.

* Fix translation of advance gas toggle description.

* Lint and unit test fixes for inline-advanced-gas-inputs

* Increase margin above advanced options button on send screen

* Move methods from constructor to property syntax in advanced-gas-inputs.component

1 files changed, 34 insertions, 5 deletions

diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 1e2270432..98cde4b03 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -14,11 +14,17 @@ import {
   GAS_LIMIT_TOO_LOW_ERROR_KEY,
 } from '../../../constants/error-keys'
 import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
-import { isBalanceSufficient } from '../../send/send.utils'
+import {
+  convertGasPriceForInputs,
+  convertGasLimitForInputs,
+  decimalToHex,
+  decGWEIToHexWEI,
+} from '../../../helpers/conversions.util'
+import { isBalanceSufficient, calcGasTotal } from '../../send/send.utils'
 import { conversionGreaterThan } from '../../../conversion-util'
 import { MIN_GAS_LIMIT_DEC } from '../../send/send.constants'
 import { addressSlicer, valuesFor } from '../../../util'
-import { getMetaMaskAccounts } from '../../../selectors'
+import { getMetaMaskAccounts, getAdvancedInlineGasShown } from '../../../selectors'
 
 const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
   return {
@@ -47,7 +53,13 @@ const mapStateToProps = (state, props) => {
     nonce,
   } = confirmTransaction
   const { txParams = {}, lastGasPrice, id: transactionId } = txData
-  const { from: fromAddress, to: txParamsToAddress } = txParams
+  const {
+    from: fromAddress,
+    to: txParamsToAddress,
+    gasPrice,
+    gas: gasLimit,
+    value: amount,
+  } = txParams
   const accounts = getMetaMaskAccounts(state)
   const {
     conversionRate,
@@ -84,6 +96,13 @@ const mapStateToProps = (state, props) => {
   )
   const unapprovedTxCount = valuesFor(currentNetworkUnapprovedTxs).length
 
+  const insufficientBalance = !isBalanceSufficient({
+    amount,
+    gasTotal: calcGasTotal(gasLimit, gasPrice),
+    balance,
+    conversionRate,
+  })
+
   return {
     balance,
     fromAddress,
@@ -113,9 +132,13 @@ const mapStateToProps = (state, props) => {
     unapprovedTxCount,
     currentNetworkUnapprovedTxs,
     customGas: {
-      gasLimit: customGasLimit || txData.gasPrice,
-      gasPrice: customGasPrice || txData.gasLimit,
+      gasLimit: customGasLimit || gasPrice,
+      gasPrice: customGasPrice || gasLimit,
     },
+    advancedInlineGasShown: getAdvancedInlineGasShown(state),
+    gasPrice: convertGasPriceForInputs(gasPrice),
+    gasLimit: convertGasLimitForInputs(gasLimit),
+    insufficientBalance,
   }
 }
 
@@ -132,6 +155,12 @@ const mapDispatchToProps = dispatch => {
     updateGasAndCalculate: ({ gasLimit, gasPrice }) => {
       return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
     },
+    convertThenUpdateGasAndCalculate: ({ gasLimit, gasPrice }) => {
+      return dispatch(updateGasAndCalculate({
+        gasLimit: decimalToHex(gasLimit),
+        gasPrice: decGWEIToHexWEI(gasPrice),
+      }))
+    },
     showRejectTransactionsConfirmationModal: ({ onSubmit, unapprovedTxCount }) => {
       return dispatch(showModal({ name: 'REJECT_TRANSACTIONS', onSubmit, unapprovedTxCount }))
     },