Adds speed up slide-in gas customization sidebar

1 files changed, 45 insertions, 12 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 d098d49cc..c3b7a5960 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
@@ -5,6 +5,8 @@ import {
   hideModal,
   setGasLimit,
   setGasPrice,
+  createSpeedUpTransaction,
+  hideSidebar,
 } from '../../../actions'
 import {
   setCustomGasPrice,
@@ -22,6 +24,7 @@ import {
   getCurrentCurrency,
   conversionRateSelector as getConversionRate,
   getSelectedToken,
+  getCurrentEthBalance,
 } from '../../../selectors.js'
 import {
   formatTimeEstimate,
@@ -35,6 +38,9 @@ import {
   getRenderableBasicEstimateData,
 } from '../../../selectors/custom-gas'
 import {
+  submittedPendingTransactionsSelector,
+} from '../../../selectors/transactions'
+import {
   formatCurrency,
 } from '../../../helpers/confirm-transaction/util'
 import {
@@ -48,17 +54,19 @@ import {
 } from '../../../helpers/formatters'
 import {
   calcGasTotal,
+  isBalanceSufficient,
 } from '../../send/send.utils'
 import { addHexPrefix } from 'ethereumjs-util'
 import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils'
 
-const mapStateToProps = state => {
+const mapStateToProps = (state, ownProps) => {
+  const { transaction = {} } = ownProps
   const buttonDataLoading = getBasicGasEstimateLoadingStatus(state)
-  const { gasPrice: currentGasPrice, gas: currentGasLimit, value } = getTxParams(state)
-  const gasTotal = calcGasTotal(currentGasLimit, currentGasPrice)
-
+  const { gasPrice: currentGasPrice, gas: currentGasLimit, value } = getTxParams(state, transaction.id)
   const customModalGasPriceInHex = getCustomGasPrice(state) || currentGasPrice
   const customModalGasLimitInHex = getCustomGasLimit(state) || currentGasLimit
+  const gasTotal = calcGasTotal(customModalGasLimitInHex, customModalGasPriceInHex)
+
   const customGasTotal = calcGasTotal(customModalGasLimitInHex, customModalGasPriceInHex)
 
   const gasButtonInfo = getRenderableBasicEstimateData(state)
@@ -74,6 +82,14 @@ const mapStateToProps = state => {
 
   const gasPrices = getEstimatedGasPrices(state)
   const estimatedTimes = getEstimatedGasTimes(state)
+  const balance = getCurrentEthBalance(state)
+
+  const insufficientBalance = !isBalanceSufficient({
+    amount: value,
+    gasTotal,
+    balance,
+    conversionRate,
+  })
 
   return {
     hideBasic,
@@ -104,6 +120,9 @@ const mapStateToProps = state => {
       transactionFee: addHexWEIsToRenderableEth('0x0', customGasTotal),
       sendAmount: addHexWEIsToRenderableEth(value, '0x0'),
     },
+    isSpeedUp: transaction.status === 'submitted',
+    txId: transaction.id,
+    insufficientBalance,
   }
 }
 
@@ -125,18 +144,24 @@ const mapDispatchToProps = dispatch => {
     updateConfirmTxGasAndCalculate: (gasLimit, gasPrice) => {
       return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
     },
+    createSpeedUpTransaction: (txId, gasPrice) => {
+      return dispatch(createSpeedUpTransaction(txId, gasPrice))
+    },
     hideGasButtonGroup: () => dispatch(hideGasButtonGroup()),
     setCustomTimeEstimate: (timeEstimateInSeconds) => dispatch(setCustomTimeEstimate(timeEstimateInSeconds)),
+    hideSidebar: () => dispatch(hideSidebar()),
   }
 }
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { gasPriceButtonGroupProps, isConfirm } = stateProps
+  const { gasPriceButtonGroupProps, isConfirm, isSpeedUp, txId } = stateProps
   const {
     updateCustomGasPrice: dispatchUpdateCustomGasPrice,
     hideGasButtonGroup: dispatchHideGasButtonGroup,
     setGasData: dispatchSetGasData,
     updateConfirmTxGasAndCalculate: dispatchUpdateConfirmTxGasAndCalculate,
+    createSpeedUpTransaction: dispatchCreateSpeedUpTransaction,
+    hideSidebar: dispatchHideSidebar,
     ...otherDispatchProps
   } = dispatchProps
 
@@ -144,12 +169,17 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     ...stateProps,
     ...otherDispatchProps,
     ...ownProps,
-    onSubmit: isConfirm
-      ? dispatchUpdateConfirmTxGasAndCalculate
-      : (newLimit, newPrice) => {
-        dispatchSetGasData(newLimit, newPrice)
+    onSubmit: (gasLimit, gasPrice) => {
+      if (isConfirm) {
+        dispatchUpdateConfirmTxGasAndCalculate(gasLimit, gasPrice)
+      } else if (isSpeedUp) {
+        dispatchCreateSpeedUpTransaction(txId, gasPrice)
+        dispatchHideSidebar()
+      } else {
+        dispatchSetGasData(gasLimit, gasPrice)
         dispatchHideGasButtonGroup()
-      },
+      }
+    },
     gasPriceButtonGroupProps: {
       ...gasPriceButtonGroupProps,
       handleGasPriceSelection: dispatchUpdateCustomGasPrice,
@@ -171,9 +201,12 @@ function calcCustomGasLimit (customGasLimitInHex) {
   return parseInt(customGasLimitInHex, 16)
 }
 
-function getTxParams (state) {
+function getTxParams (state, transactionId) {
   const { confirmTransaction: { txData }, metamask: { send } } = state
-  return txData.txParams || {
+  const pendingTransactions = submittedPendingTransactionsSelector(state)
+  const pendingTransaction = pendingTransactions.find(({ id }) => id === transactionId)
+  const { txParams: pendingTxParams } = pendingTransaction || {}
+  return txData.txParams || pendingTxParams || {
     from: send.from,
     gas: send.gasLimit,
     gasPrice: send.gasPrice || getAveragePriceEstimateInHexWEI(state),