2 files changed, 57 insertions, 5 deletions

diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 6bc415781..8d404aaca 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -11,6 +11,7 @@ import {
 import { CONFIRMED_STATUS, DROPPED_STATUS } from '../../../constants/transactions'
 import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'
 import { PRIMARY, SECONDARY } from '../../../constants/common'
+import AdvancedGasInputs from '../../gas-customization/advanced-gas-inputs'
 
 export default class ConfirmTransactionBase extends Component {
   static contextTypes = {
@@ -81,6 +82,11 @@ export default class ConfirmTransactionBase extends Component {
     titleComponent: PropTypes.node,
     valid: PropTypes.bool,
     warning: PropTypes.string,
+    advancedInlineGasShown: PropTypes.bool,
+    gasPrice: PropTypes.number,
+    gasLimit: PropTypes.number,
+    insufficientBalance: PropTypes.bool,
+    convertThenUpdateGasAndCalculate: PropTypes.func,
   }
 
   state = {
@@ -165,6 +171,11 @@ export default class ConfirmTransactionBase extends Component {
       hexTransactionFee,
       hexTransactionTotal,
       hideDetails,
+      advancedInlineGasShown,
+      gasPrice,
+      gasLimit,
+      insufficientBalance,
+      convertThenUpdateGasAndCalculate,
     } = this.props
 
     if (hideDetails) {
@@ -182,6 +193,18 @@ export default class ConfirmTransactionBase extends Component {
               headerTextClassName="confirm-detail-row__header-text--edit"
               onHeaderClick={() => this.handleEditGas()}
             />
+            {advancedInlineGasShown
+              ? <AdvancedGasInputs
+                updateCustomGasPrice={newGasPrice => convertThenUpdateGasAndCalculate({ gasPrice: newGasPrice, gasLimit })}
+                updateCustomGasLimit={newGasLimit => convertThenUpdateGasAndCalculate({ gasLimit: newGasLimit, gasPrice })}
+                customGasPrice={gasPrice}
+                customGasLimit={gasLimit}
+                insufficientBalance={insufficientBalance}
+                customPriceIsSafe={true}
+                isSpeedUp={false}
+              />
+              : null
+            }
           </div>
           <div>
             <ConfirmDetailRow
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 }))
     },