Integrate gas buttons with the send screen.

4 files changed, 104 insertions, 19 deletions

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
+      }
+    }
+  }
+}