Integrate gas buttons with the send screen.

4 files changed, 76 insertions, 16 deletions

diff --git a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
index 9bbb67506..9962f8028 100644
--- a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
+++ b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
@@ -46,11 +46,10 @@ export default class GasFeeDisplay extends Component {
               </div>
         }
         <button
-          className="sliders-icon-container"
-          onClick={onClick}
-          disabled={!gasTotal && !gasLoadingError}
+          className="gas-fee-reset"
+          onClick={showGasButtonGroup}
         >
-          <i className="fa fa-sliders sliders-icon" />
+          Reset
         </button>
       </div>
     )
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
index 6ad4499ff..64a5cd603 100644
--- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
+++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import SendRowWrapper from '../send-row-wrapper/'
 import GasFeeDisplay from './gas-fee-display/gas-fee-display.component'
+import GasPriceButtonGroup from '../../../gas-customization/gas-price-button-group'
 
 export default class SendGasRow extends Component {
 
@@ -26,21 +27,37 @@ export default class SendGasRow extends Component {
       gasTotal,
       gasFeeError,
       showCustomizeGasModal,
+      gasPriceButtonGroupProps,
+      gasButtonGroupShown,
+      showGasButtonGroup
     } = this.props
 
     return (
       <SendRowWrapper
-        label={`${this.context.t('gasFee')}:`}
+        label={`${this.context.t('transactionFee')}:`}
         showError={gasFeeError}
         errorType={'gasFee'}
       >
-        <GasFeeDisplay
-          conversionRate={conversionRate}
-          convertedCurrency={convertedCurrency}
-          gasLoadingError={gasLoadingError}
-          gasTotal={gasTotal}
-          onClick={() => showCustomizeGasModal()}
-        />
+        {gasButtonGroupShown
+         ? <div>
+            <GasPriceButtonGroup
+              className="gas-price-button-group--small"
+              showCheck={false}
+              {...this.props.gasPriceButtonGroupProps}
+            />
+            <div className="advanced-gas-options-btn" onClick={() => showCustomizeGasModal()}>
+              Advanced Options
+            </div>
+          </div>
+        : <GasFeeDisplay
+            conversionRate={conversionRate}
+            convertedCurrency={convertedCurrency}
+            gasLoadingError={gasLoadingError}
+            gasTotal={gasTotal}
+            showGasButtonGroup={showGasButtonGroup}
+            onClick={() => showCustomizeGasModal()}
+          />}
+
       </SendRowWrapper>
     )
   }
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
index e44fe4ef1..19e49b391 100644
--- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
+++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
@@ -3,25 +3,64 @@ import {
   getConversionRate,
   getCurrentCurrency,
   getGasTotal,
+  getGasPrice,
 } from '../../send.selectors.js'
-import { getGasLoadingError, gasFeeIsInError } from './send-gas-row.selectors.js'
-import { showModal } from '../../../../actions'
+import{
+  getBasicGasEstimateLoadingStatus,
+  getRenderableEstimateDataForSmallButtons,
+  getDefaultActiveButtonIndex
+} from '../../../../selectors/custom-gas'
+import{
+  showGasButtonGroup
+} from '../../../../ducks/send.duck'
+import { getGasLoadingError, gasFeeIsInError, getGasButtonGroupShown } from './send-gas-row.selectors.js'
+import { showModal, setGasPrice } from '../../../../actions'
 import SendGasRow from './send-gas-row.component'
 
-export default connect(mapStateToProps, mapDispatchToProps)(SendGasRow)
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendGasRow)
 
 function mapStateToProps (state) {
+  const gasButtonInfo = getRenderableEstimateDataForSmallButtons(state)
+  const activeButtonIndex = getDefaultActiveButtonIndex(gasButtonInfo, getGasPrice(state))
+
   return {
     conversionRate: getConversionRate(state),
     convertedCurrency: getCurrentCurrency(state),
     gasTotal: getGasTotal(state),
     gasFeeError: gasFeeIsInError(state),
     gasLoadingError: getGasLoadingError(state),
+    gasPriceButtonGroupProps: {
+      buttonDataLoading: getBasicGasEstimateLoadingStatus(state),
+      defaultActiveButtonIndex: 1,
+      newActiveButtonIndex: activeButtonIndex > -1 ? activeButtonIndex : null,
+      gasButtonInfo,
+    },
+    gasButtonGroupShown: getGasButtonGroupShown(state),
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
-    showCustomizeGasModal: () => dispatch(showModal({ name: 'CUSTOMIZE_GAS' })),
+    showCustomizeGasModal: () => dispatch(showModal({ name: 'CUSTOMIZE_GAS', hideBasic: true })),
+    setGasPrice: newPrice => dispatch(setGasPrice(newPrice)),
+    showGasButtonGroup: () => dispatch(showGasButtonGroup())
   }
 }
+
+function mergeProps (stateProps, dispatchProps, ownProps) {
+  const { gasPriceButtonGroupProps } = stateProps
+  const {
+    setGasPrice: dispatchSetGasPrice,
+    ...otherDispatchProps
+  } = dispatchProps
+
+  return {
+    ...stateProps,
+    ...otherDispatchProps,
+    ...ownProps,
+    gasPriceButtonGroupProps: {
+      ...gasPriceButtonGroupProps,
+      handleGasPriceSelection: dispatchSetGasPrice,
+    },
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.selectors.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.selectors.js
index 96f6293c2..79c838543 100644
--- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.selectors.js
+++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.selectors.js
@@ -1,6 +1,7 @@
 const selectors = {
   gasFeeIsInError,
   getGasLoadingError,
+  getGasButtonGroupShown,
 }
 
 module.exports = selectors
@@ -12,3 +13,7 @@ function getGasLoadingError (state) {
 function gasFeeIsInError (state) {
   return Boolean(state.send.errors.gasFee)
 }
+
+function getGasButtonGroupShown (state) {
+  return state.send.gasButtonGroupShown
+}