Integrate gas buttons with the send screen.

10 files changed, 188 insertions, 36 deletions

diff --git a/ui/app/components/button-group/button-group.component.js b/ui/app/components/button-group/button-group.component.js
index 440b3c4f7..723f9b526 100644
--- a/ui/app/components/button-group/button-group.component.js
+++ b/ui/app/components/button-group/button-group.component.js
@@ -23,6 +23,12 @@ export default class ButtonGroup extends PureComponent {
       : this.props.defaultActiveButtonIndex,
   }
 
+  componentDidUpdate (prevProps, prevState) {
+    if (typeof this.props.newActiveButtonIndex === 'number' && prevState.activeButtonIndex !== this.props.newActiveButtonIndex) {
+      this.setState({ activeButtonIndex: prevProps.newActiveButtonIndex })
+    }
+  }
+
   handleButtonClick (activeButtonIndex) {
     this.setState({ activeButtonIndex })
   }
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
index 89065472d..db730458d 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
@@ -89,16 +89,20 @@ export default class GasModalPageContainer extends Component {
   },
   {
     gasPriceButtonGroupProps,
+    hideBasic,
     ...advancedTabProps
   }) {
     return (
       <Tabs>
-        <Tab name={this.context.t('basic')}>
-          <div className="gas-modal-content">
-            { this.renderBasicTabContent(gasPriceButtonGroupProps) }
-            { this.renderInfoRows(originalTotalFiat, originalTotalEth, newTotalFiat, newTotalEth) }
-          </div>
-        </Tab>
+        {hideBasic
+          ? null
+          : <Tab name={this.context.t('basic')}>
+            <div className="gas-modal-content">
+              { this.renderBasicTabContent(gasPriceButtonGroupProps) }
+              { this.renderInfoRows(originalTotalFiat, originalTotalEth, newTotalFiat, newTotalEth) }
+            </div>
+          </Tab>
+        }
         <Tab name={this.context.t('advanced')}>
           <div className="gas-modal-content">
             { this.renderAdvancedTabContent(advancedTabProps) }
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 7e2a7e144..a150e5009 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
@@ -11,6 +11,9 @@ import {
   setCustomGasLimit,
 } from '../../../ducks/gas.duck'
 import {
+  hideGasButtonGroup,
+} from '../../../ducks/send.duck'
+import {
   updateGasAndCalculate,
 } from '../../../ducks/confirm-transaction.duck'
 import {
@@ -59,7 +62,10 @@ const mapStateToProps = state => {
 
   const newTotalFiat = addHexWEIsToRenderableFiat(value, customGasTotal, currentCurrency, conversionRate)
 
+  const hideBasic = state.appState.modal.modalState.props.hideBasic
+
   return {
+    hideBasic,
     isConfirm: isConfirm(state),
     customGasPriceInHex,
     customGasLimitInHex,
@@ -95,6 +101,7 @@ const mapDispatchToProps = dispatch => {
     updateConfirmTxGasAndCalculate: (gasLimit, gasPrice) => {
       return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
     },
+    hideGasButtonGroup: () => dispatch(hideGasButtonGroup()),
   }
 }
 
@@ -102,6 +109,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const { gasPriceButtonGroupProps, isConfirm } = stateProps
   const {
     updateCustomGasPrice: dispatchUpdateCustomGasPrice,
+    hideGasButtonGroup: dispatchHideGasButtonGroup,
     setGasData: dispatchSetGasData,
     updateConfirmTxGasAndCalculate: dispatchUpdateConfirmTxGasAndCalculate,
     ...otherDispatchProps
@@ -111,7 +119,10 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     ...stateProps,
     ...otherDispatchProps,
     ...ownProps,
-    onSubmit: isConfirm ? dispatchUpdateConfirmTxGasAndCalculate : dispatchSetGasData,
+    onSubmit: isConfirm ? dispatchUpdateConfirmTxGasAndCalculate : (newLimit, newPrice) => {
+      dispatchSetGasData(newLimit, newPrice)
+      dispatchHideGasButtonGroup()
+    },
     gasPriceButtonGroupProps: {
       ...gasPriceButtonGroupProps,
       handleGasPriceSelection: dispatchUpdateCustomGasPrice,
diff --git a/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js b/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
index 3873f54bc..8d6675e18 100644
--- a/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
+++ b/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
@@ -27,7 +27,7 @@ export default class GasPriceButtonGroup extends Component {
   }
 
   renderButtonContent ({
-    label,
+    labelKey,
     feeInPrimaryCurrency,
     feeInSecondaryCurrency,
     timeEstimate,
@@ -36,7 +36,7 @@ export default class GasPriceButtonGroup extends Component {
     showCheck,
   }) {
     return (<div>
-      { label && <div className={`${className}__label`}>{ label }</div> }
+      { labelKey && <div className={`${className}__label`}>{ this.context.t(labelKey) }</div> }
       { feeInPrimaryCurrency && <div className={`${className}__primary-currency`}>{ feeInPrimaryCurrency }</div> }
       { feeInSecondaryCurrency && <div className={`${className}__secondary-currency`}>{ feeInSecondaryCurrency }</div> }
       { timeEstimate && <div className={`${className}__time-estimate`}>{ timeEstimate }</div> }
@@ -57,9 +57,7 @@ export default class GasPriceButtonGroup extends Component {
         onClick={() => handleGasPriceSelection(priceInHexWei)}
         key={`gas-price-button-${index}`}
       >
-        {buttonDataLoading
-          ? 'Loading...'
-          : this.renderButtonContent(renderableGasInfo, buttonContentPropsAndFlags)}
+        {this.renderButtonContent(renderableGasInfo, buttonContentPropsAndFlags)}
       </Button>
     )
   }
@@ -68,18 +66,23 @@ export default class GasPriceButtonGroup extends Component {
     const {
       gasButtonInfo,
       defaultActiveButtonIndex = 1,
+      newActiveButtonIndex,
       noButtonActiveByDefault = false,
+      buttonDataLoading,
       ...buttonPropsAndFlags
     } = this.props
 
     return (
-      <ButtonGroup
-        className={buttonPropsAndFlags.className}
-        defaultActiveButtonIndex={defaultActiveButtonIndex}
-        noButtonActiveByDefault={noButtonActiveByDefault}
-      >
-        { gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) }
-      </ButtonGroup>
+      !buttonDataLoading
+        ? <ButtonGroup
+          className={buttonPropsAndFlags.className}
+          defaultActiveButtonIndex={defaultActiveButtonIndex}
+          newActiveButtonIndex={newActiveButtonIndex}
+          noButtonActiveByDefault={noButtonActiveByDefault}
+        >
+          { gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) }
+        </ButtonGroup>
+        : <div className={`${buttonPropsAndFlags.className}__loading-container`}>Loading...</div>
     )
   }
 }
diff --git a/ui/app/components/gas-customization/gas-price-button-group/index.scss b/ui/app/components/gas-customization/gas-price-button-group/index.scss
index e2670edd5..7647c42c0 100644
--- a/ui/app/components/gas-customization/gas-price-button-group/index.scss
+++ b/ui/app/components/gas-customization/gas-price-button-group/index.scss
@@ -18,6 +18,9 @@
     height: 15.4px;
   }
 
+  &__loading-container {
+    height: 130px;
+  }
 
   .button-group__button, .button-group__button--active {
     height: 130px;
@@ -58,3 +61,67 @@
     }
   }
 }
+
+.gas-price-button-group--small {
+  display: flex;
+  justify-content: stretch;
+  max-width: 260px;
+
+  &__button-fiat-price {
+    font-size: 13px;
+  }
+
+  &__button-label {
+    font-size: 16px;
+  }
+
+  &__label {
+    font-weight: 500;
+  }
+
+  &__primary-currency {
+    font-size: 12px;
+  }
+
+  &__secondary-currency {
+    font-size: 12px;
+  }
+
+  &__loading-container {
+    height: 78px;
+  }
+
+  .button-group__button, .button-group__button--active {
+    height: 78px;
+    background: white;
+    color: $scorpion;
+    padding-top: 9px;
+    padding-left: 8.5px;
+
+    div {
+      display: flex;
+      flex-flow: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+    }
+
+    i {
+      &:last-child {
+        display: none;
+      }
+    }
+  }
+
+  .button-group__button--active {
+    color: $white;
+    background: $dodger-blue;
+
+    i {
+      &:last-child {
+        display: flex;
+        color: $curious-blue;
+        margin-top: 10px
+      }
+    }
+  }
+}
diff --git a/ui/app/components/page-container/page-container.component.js b/ui/app/components/page-container/page-container.component.js
index 3a2274a29..672255e27 100644
--- a/ui/app/components/page-container/page-container.component.js
+++ b/ui/app/components/page-container/page-container.component.js
@@ -58,7 +58,8 @@ export default class PageContainer extends PureComponent {
 
   renderActiveTabContent () {
     const { tabsComponent } = this.props
-    const { children } = tabsComponent.props
+    let { children } = tabsComponent.props
+    children = children.filter(child => child)
     const { activeTabIndex } = this.state
 
     return children[activeTabIndex]
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
+}