1 files changed, 133 insertions, 8 deletions

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index ebdd035ea..7e2a7e144 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -1,36 +1,161 @@
 import { connect } from 'react-redux'
+import { pipe, partialRight } from 'ramda'
 import GasModalPageContainer from './gas-modal-page-container.component'
-import { hideModal } from '../../../actions'
+import {
+  hideModal,
+  setGasLimit,
+  setGasPrice,
+} from '../../../actions'
 import {
   setCustomGasPrice,
   setCustomGasLimit,
 } from '../../../ducks/gas.duck'
 import {
+  updateGasAndCalculate,
+} from '../../../ducks/confirm-transaction.duck'
+import {
+  getCurrentCurrency,
+  conversionRateSelector as getConversionRate,
+  getSelectedToken,
+} from '../../../selectors.js'
+import {
   getCustomGasPrice,
   getCustomGasLimit,
   getRenderableBasicEstimateData,
   getBasicGasEstimateLoadingStatus,
+  getAveragePriceEstimateInHexWEI,
+  getDefaultActiveButtonIndex,
 } from '../../../selectors/custom-gas'
+import {
+  formatCurrency,
+} from '../../../helpers/confirm-transaction/util'
+import {
+  addHexWEIsToDec,
+  decEthToConvertedCurrency as ethTotalToConvertedCurrency,
+  decGWEIToHexWEI,
+  hexWEIToDecGWEI,
+} from '../../../helpers/conversions.util'
+import {
+  formatETHFee,
+} from '../../../helpers/formatters'
+import {
+  calcGasTotal,
+} from '../../send/send.utils'
+import { addHexPrefix } from 'ethereumjs-util'
 
 const mapStateToProps = state => {
   const buttonDataLoading = getBasicGasEstimateLoadingStatus(state)
+  const { gasPrice, gas: gasLimit, value } = getTxParams(state)
+  const gasTotal = calcGasTotal(gasLimit, gasPrice)
+
+  const customGasPriceInHex = getCustomGasPrice(state)
+  const customGasLimitInHex = getCustomGasLimit(state)
+  const customGasTotal = calcGasTotal(customGasLimitInHex || gasLimit, customGasPriceInHex || gasPrice)
+
+  const gasButtonInfo = getRenderableBasicEstimateData(state)
+
+  const currentCurrency = getCurrentCurrency(state)
+  const conversionRate = getConversionRate(state)
+
+  const newTotalFiat = addHexWEIsToRenderableFiat(value, customGasTotal, currentCurrency, conversionRate)
+
   return {
-    customGasPrice: getCustomGasPrice(state),
-    customGasLimit: getCustomGasLimit(state),
+    isConfirm: isConfirm(state),
+    customGasPriceInHex,
+    customGasLimitInHex,
+    customGasPrice: calcCustomGasPrice(customGasPriceInHex, gasPrice),
+    customGasLimit: calcCustomGasLimit(customGasLimitInHex, gasLimit),
+    newTotalFiat,
     gasPriceButtonGroupProps: {
       buttonDataLoading,
-      gasButtonInfo: getRenderableBasicEstimateData(state),
+      defaultActiveButtonIndex: getDefaultActiveButtonIndex(gasButtonInfo, customGasPriceInHex, gasPrice),
+      gasButtonInfo,
+    },
+    infoRowProps: {
+      originalTotalFiat: addHexWEIsToRenderableFiat(value, gasTotal, currentCurrency, conversionRate),
+      originalTotalEth: addHexWEIsToRenderableEth(value, gasTotal),
+      newTotalFiat,
+      newTotalEth: addHexWEIsToRenderableEth(value, customGasTotal),
     },
   }
 }
 
 const mapDispatchToProps = dispatch => {
+  const updateCustomGasPrice = newPrice => dispatch(setCustomGasPrice(addHexPrefix(newPrice)))
+
   return {
     hideModal: () => dispatch(hideModal()),
-    updateCustomGasPrice: (newPrice) => dispatch(setCustomGasPrice(newPrice)),
-    updateCustomGasLimit: (newLimit) => dispatch(setCustomGasLimit(newLimit)),
-    handleGasPriceSelection: newPrice => console.log('NewPrice: ', newPrice),
+    updateCustomGasPrice,
+    convertThenUpdateCustomGasPrice: newPrice => updateCustomGasPrice(decGWEIToHexWEI(newPrice)),
+    convertThenUpdateCustomGasLimit: newLimit => dispatch(setCustomGasLimit(addHexPrefix(newLimit.toString(16)))),
+    setGasData: (newLimit, newPrice) => {
+      dispatch(setGasLimit(newLimit))
+      dispatch(setGasPrice(newPrice))
+    },
+    updateConfirmTxGasAndCalculate: (gasLimit, gasPrice) => {
+      return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
+    },
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(GasModalPageContainer)
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { gasPriceButtonGroupProps, isConfirm } = stateProps
+  const {
+    updateCustomGasPrice: dispatchUpdateCustomGasPrice,
+    setGasData: dispatchSetGasData,
+    updateConfirmTxGasAndCalculate: dispatchUpdateConfirmTxGasAndCalculate,
+    ...otherDispatchProps
+  } = dispatchProps
+
+  return {
+    ...stateProps,
+    ...otherDispatchProps,
+    ...ownProps,
+    onSubmit: isConfirm ? dispatchUpdateConfirmTxGasAndCalculate : dispatchSetGasData,
+    gasPriceButtonGroupProps: {
+      ...gasPriceButtonGroupProps,
+      handleGasPriceSelection: dispatchUpdateCustomGasPrice,
+    },
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(GasModalPageContainer)
+
+function isConfirm (state) {
+  return Boolean(Object.keys(state.confirmTransaction.txData).length)
+}
+
+function calcCustomGasPrice (customGasPriceInHex, gasPrice) {
+  return Number(hexWEIToDecGWEI(customGasPriceInHex || gasPrice))
+}
+
+function calcCustomGasLimit (customGasLimitInHex, gasLimit) {
+  return parseInt(customGasLimitInHex || gasLimit, 16)
+}
+
+function getTxParams (state) {
+  const { confirmTransaction: { txData }, metamask: { send } } = state
+
+  return txData.txParams || {
+    from: send.from,
+    gas: send.gasLimit,
+    gasPrice: send.gasPrice || getAveragePriceEstimateInHexWEI(state),
+    to: send.to,
+    value: getSelectedToken(state) ? '0x0' : send.amount,
+  }
+}
+
+function addHexWEIsToRenderableEth (aHexWEI, bHexWEI) {
+  return pipe(
+    addHexWEIsToDec,
+    formatETHFee
+  )(aHexWEI, bHexWEI)
+}
+
+function addHexWEIsToRenderableFiat (aHexWEI, bHexWEI, convertedCurrency, conversionRate) {
+  return pipe(
+    addHexWEIsToDec,
+    partialRight(ethTotalToConvertedCurrency, [convertedCurrency, conversionRate]),
+    partialRight(formatCurrency, [convertedCurrency]),
+  )(aHexWEI, bHexWEI)
+}