Fix inline advanced gas editing

ui/app/components/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js

@@ -1,7 +1,20 @@
 import { connect } from 'react-redux'
 import { showModal } from '../../../actions'
+import {
+  decGWEIToHexWEI,
+  decimalToHex,
+  hexWEIToDecGWEI,
+} from '../../../helpers/conversions.util'
 import AdvancedGasInputs from './advanced-gas-inputs.component'
 
+function convertGasPriceForInputs (gasPriceInHexWEI) {
+  return Number(hexWEIToDecGWEI(gasPriceInHexWEI))
+}
+
+function convertGasLimitForInputs (gasLimitInHexWEI) {
+  return parseInt(gasLimitInHexWEI, 16)
+}
+
 const mapDispatchToProps = dispatch => {
   return {
     showGasPriceInfoModal: modalName => dispatch(showModal({ name: 'GAS_PRICE_INFO_MODAL' })),
@@ -9,4 +22,17 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-export default connect(null, mapDispatchToProps)(AdvancedGasInputs)
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const {customGasPrice, customGasLimit, updateCustomGasPrice, updateCustomGasLimit} = ownProps
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    ...ownProps,
+    customGasPrice: convertGasPriceForInputs(customGasPrice),
+    customGasLimit: convertGasLimitForInputs(customGasLimit),
+    updateCustomGasPrice: (price) => updateCustomGasPrice(decGWEIToHexWEI(price)),
+    updateCustomGasLimit: (limit) => updateCustomGasLimit(decimalToHex(limit)),
+  }
+}
+
+export default connect(null, mapDispatchToProps, mergeProps)(AdvancedGasInputs)

ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -58,6 +58,8 @@ export default class ConfirmTransactionBase extends Component {
     txData: PropTypes.object,
     unapprovedTxCount: PropTypes.number,
     currentNetworkUnapprovedTxs: PropTypes.object,
+    updateGasAndCalculate: PropTypes.func,
+    customGas: PropTypes.object,
     // Component props
     action: PropTypes.string,
     contentComponent: PropTypes.node,
@@ -83,10 +85,7 @@ export default class ConfirmTransactionBase extends Component {
     valid: PropTypes.bool,
     warning: PropTypes.string,
     advancedInlineGasShown: PropTypes.bool,
-    gasPrice: PropTypes.number,
-    gasLimit: PropTypes.number,
     insufficientBalance: PropTypes.bool,
-    convertThenUpdateGasAndCalculate: PropTypes.func,
   }
 
   state = {
@@ -172,10 +171,9 @@ export default class ConfirmTransactionBase extends Component {
       hexTransactionTotal,
       hideDetails,
       advancedInlineGasShown,
-      gasPrice,
-      gasLimit,
+      customGas,
       insufficientBalance,
-      convertThenUpdateGasAndCalculate,
+      updateGasAndCalculate,
     } = this.props
 
     if (hideDetails) {
@@ -195,10 +193,10 @@ export default class ConfirmTransactionBase extends Component {
             />
             {advancedInlineGasShown
               ? <AdvancedGasInputs
-                updateCustomGasPrice={newGasPrice => convertThenUpdateGasAndCalculate({ gasPrice: newGasPrice, gasLimit })}
-                updateCustomGasLimit={newGasLimit => convertThenUpdateGasAndCalculate({ gasLimit: newGasLimit, gasPrice })}
-                customGasPrice={gasPrice}
-                customGasLimit={gasLimit}
+                updateCustomGasPrice={newGasPrice => updateGasAndCalculate({ ...customGas, gasPrice: newGasPrice })}
+                updateCustomGasLimit={newGasLimit => updateGasAndCalculate({ ...customGas, gasLimit: newGasLimit })}
+                customGasPrice={customGas.gasPrice}
+                customGasLimit={customGas.gasLimit}
                 insufficientBalance={insufficientBalance}
                 customPriceIsSafe={true}
                 isSpeedUp={false}

ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js

@@ -14,12 +14,6 @@ import {
   GAS_LIMIT_TOO_LOW_ERROR_KEY,
 } from '../../../constants/error-keys'
 import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
-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'
@@ -132,12 +126,10 @@ const mapStateToProps = (state, props) => {
     unapprovedTxCount,
     currentNetworkUnapprovedTxs,
     customGas: {
-      gasLimit: customGasLimit || gasPrice,
-      gasPrice: customGasPrice || gasLimit,
+      gasLimit: customGasLimit || gasLimit,
+      gasPrice: customGasPrice || gasPrice,
     },
     advancedInlineGasShown: getAdvancedInlineGasShown(state),
-    gasPrice: convertGasPriceForInputs(gasPrice),
-    gasLimit: convertGasLimitForInputs(gasLimit),
     insufficientBalance,
   }
 }
@@ -155,12 +147,6 @@ 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 }))
     },
@@ -235,6 +221,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
       validate: validateEditGas,
     }),
     cancelAllTransactions: () => dispatchCancelAllTransactions(valuesFor(unapprovedTxs)),
+    updateGasAndCalculate,
   }
 }
 

ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js

@@ -16,12 +16,6 @@ import {
   getRenderableEstimateDataForSmallButtonsFromGWEI,
   getDefaultActiveButtonIndex,
 } from '../../../../selectors/custom-gas'
-import {
-  decGWEIToHexWEI,
-  decimalToHex,
-  convertGasPriceForInputs,
-  convertGasLimitForInputs,
-} from '../../../../helpers/conversions.util'
 import {
   showGasButtonGroup,
 } from '../../../../ducks/send.duck'
@@ -33,7 +27,6 @@ import {
 import { getGasLoadingError, gasFeeIsInError, getGasButtonGroupShown } from './send-gas-row.selectors.js'
 import { showModal, setGasPrice, setGasLimit, setGasTotal } from '../../../../actions'
 import { getAdvancedInlineGasShown, getCurrentEthBalance } from '../../../../selectors'
-import { addHexPrefix } from 'ethereumjs-util'
 import SendGasRow from './send-gas-row.component'
 
 export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendGasRow)
@@ -41,9 +34,8 @@ export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendGasR
 function mapStateToProps (state) {
   const gasButtonInfo = getRenderableEstimateDataForSmallButtonsFromGWEI(state)
   const gasPrice = getGasPrice(state)
+  const gasLimit = getGasLimit(state)
   const activeButtonIndex = getDefaultActiveButtonIndex(gasButtonInfo, gasPrice)
-  const renderableGasPrice = convertGasPriceForInputs(gasPrice)
-  const renderableGasLimit = convertGasLimitForInputs(getGasLimit(state))
 
   const gasTotal = getGasTotal(state)
   const conversionRate = getConversionRate(state)
@@ -70,8 +62,8 @@ function mapStateToProps (state) {
     },
     gasButtonGroupShown: getGasButtonGroupShown(state),
     advancedInlineGasShown: getAdvancedInlineGasShown(state),
-    gasPrice: renderableGasPrice,
-    gasLimit: renderableGasLimit,
+    gasPrice,
+    gasLimit,
     insufficientBalance,
   }
 }
@@ -80,15 +72,13 @@ function mapDispatchToProps (dispatch) {
   return {
     showCustomizeGasModal: () => dispatch(showModal({ name: 'CUSTOMIZE_GAS', hideBasic: true })),
     setGasPrice: (newPrice, gasLimit) => {
-      newPrice = decGWEIToHexWEI(newPrice)
       dispatch(setGasPrice(newPrice))
-      dispatch(setCustomGasPrice(addHexPrefix(newPrice)))
+      dispatch(setCustomGasPrice(newPrice))
       dispatch(setGasTotal(calcGasTotal(gasLimit, newPrice)))
     },
     setGasLimit: (newLimit, gasPrice) => {
-      newLimit = decimalToHex(newLimit)
       dispatch(setGasLimit(newLimit))
-      dispatch(setCustomGasLimit(addHexPrefix(newLimit.toString(16))))
+      dispatch(setCustomGasLimit(newLimit))
       dispatch(setGasTotal(calcGasTotal(newLimit, gasPrice)))
     },
     showGasButtonGroup: () => dispatch(showGasButtonGroup()),

ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-container.test.js

@@ -66,12 +66,6 @@ proxyquire('../send-gas-row.container.js', {
   },
   '../../../../ducks/send.duck': sendDuckSpies,
   '../../../../ducks/gas.duck': gasDuckSpies,
-  '../../../../helpers/conversions.util': {
-    convertGasPriceForInputs: str => str + '*',
-    convertGasLimitForInputs: str => str + '**',
-    decGWEIToHexWEI: str => '0x' + str + '000',
-    decimalToHex: str => '0x' + str,
-  },
 })
 
 describe('send-gas-row container', () => {
@@ -93,8 +87,8 @@ describe('send-gas-row container', () => {
         },
         gasButtonGroupShown: `mockGetGasButtonGroupShown:mockState`,
         advancedInlineGasShown: 'mockAdvancedInlineGasShown:mockState',
-        gasLimit: 'mockGasLimit:mockState**',
-        gasPrice: 'mockGasPrice:mockState*',
+        gasLimit: 'mockGasLimit:mockState',
+        gasPrice: 'mockGasPrice:mockState',
         insufficientBalance: false,
       })
     })
@@ -127,10 +121,10 @@ describe('send-gas-row container', () => {
         mapDispatchToPropsObject.setGasPrice('mockNewPrice', 'mockLimit')
         assert(dispatchSpy.calledThrice)
         assert(actionSpies.setGasPrice.calledOnce)
-        assert.equal(actionSpies.setGasPrice.getCall(0).args[0], '0xmockNewPrice000')
-        assert.equal(gasDuckSpies.setCustomGasPrice.getCall(0).args[0], '0xmockNewPrice000')
+        assert.equal(actionSpies.setGasPrice.getCall(0).args[0], 'mockNewPrice')
+        assert.equal(gasDuckSpies.setCustomGasPrice.getCall(0).args[0], 'mockNewPrice')
         assert(actionSpies.setGasTotal.calledOnce)
-        assert.equal(actionSpies.setGasTotal.getCall(0).args[0], 'mockLimit0xmockNewPrice000')
+        assert.equal(actionSpies.setGasTotal.getCall(0).args[0], 'mockLimitmockNewPrice')
       })
     })
 
@@ -139,10 +133,10 @@ describe('send-gas-row container', () => {
         mapDispatchToPropsObject.setGasLimit('mockNewLimit', 'mockPrice')
         assert(dispatchSpy.calledThrice)
         assert(actionSpies.setGasLimit.calledOnce)
-        assert.equal(actionSpies.setGasLimit.getCall(0).args[0], '0xmockNewLimit')
-        assert.equal(gasDuckSpies.setCustomGasLimit.getCall(0).args[0], '0xmockNewLimit')
+        assert.equal(actionSpies.setGasLimit.getCall(0).args[0], 'mockNewLimit')
+        assert.equal(gasDuckSpies.setCustomGasLimit.getCall(0).args[0], 'mockNewLimit')
         assert(actionSpies.setGasTotal.calledOnce)
-        assert.equal(actionSpies.setGasTotal.getCall(0).args[0], '0xmockNewLimitmockPrice')
+        assert.equal(actionSpies.setGasTotal.getCall(0).args[0], 'mockNewLimitmockPrice')
       })
     })
 

ui/app/helpers/conversions.util.js

@@ -120,11 +120,3 @@ export function hexWEIToDecGWEI (decGWEI) {
     toDenomination: 'GWEI',
   })
 }
-
-export function convertGasPriceForInputs (gasPriceInHexWEI) {
-  return Number(hexWEIToDecGWEI(gasPriceInHexWEI))
-}
-
-export function convertGasLimitForInputs (gasLimitInHexWEI) {
-  return parseInt(gasLimitInHexWEI, 16)
-}