1 files changed, 63 insertions, 22 deletions
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 8d305dd4f..50337e0bf 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
@@ -3,6 +3,7 @@ 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'
+import AdvancedGasInputs from '../../../gas-customization/advanced-gas-inputs'
 
 export default class SendGasRow extends Component {
 
@@ -13,54 +14,94 @@ export default class SendGasRow extends Component {
     gasLoadingError: PropTypes.bool,
     gasTotal: PropTypes.string,
     showCustomizeGasModal: PropTypes.func,
+    setGasPrice: PropTypes.func,
+    setGasLimit: PropTypes.func,
     gasPriceButtonGroupProps: PropTypes.object,
     gasButtonGroupShown: PropTypes.bool,
+    advancedInlineGasShown: PropTypes.bool,
     resetGasButtons: PropTypes.func,
+    gasPrice: PropTypes.number,
+    gasLimit: PropTypes.number,
+    insufficientBalance: PropTypes.bool,
   }
 
   static contextTypes = {
     t: PropTypes.func,
   }
 
-  render () {
+  renderAdvancedOptionsButton () {
+    const { showCustomizeGasModal } = this.props
+    return <div className="advanced-gas-options-btn" onClick={() => showCustomizeGasModal()}>
+      { this.context.t('advancedOptions') }
+    </div>
+  }
+
+  renderContent () {
     const {
       conversionRate,
       convertedCurrency,
       gasLoadingError,
       gasTotal,
-      gasFeeError,
       showCustomizeGasModal,
       gasPriceButtonGroupProps,
       gasButtonGroupShown,
+      advancedInlineGasShown,
       resetGasButtons,
+      setGasPrice,
+      setGasLimit,
+      gasPrice,
+      gasLimit,
+      insufficientBalance,
     } = this.props
 
+    const gasPriceButtonGroup = <div>
+        <GasPriceButtonGroup
+          className="gas-price-button-group--small"
+          showCheck={false}
+          {...gasPriceButtonGroupProps}
+        />
+        { this.renderAdvancedOptionsButton() }
+      </div>
+    const gasFeeDisplay = <GasFeeDisplay
+      conversionRate={conversionRate}
+      convertedCurrency={convertedCurrency}
+      gasLoadingError={gasLoadingError}
+      gasTotal={gasTotal}
+      onReset={resetGasButtons}
+      onClick={() => showCustomizeGasModal()}
+    />
+    const advancedGasInputs = <div>
+      <AdvancedGasInputs
+        updateCustomGasPrice={newGasPrice => setGasPrice(newGasPrice, gasLimit)}
+        updateCustomGasLimit={newGasLimit => setGasLimit(newGasLimit, gasPrice)}
+        customGasPrice={gasPrice}
+        customGasLimit={gasLimit}
+        insufficientBalance={insufficientBalance}
+        customPriceIsSafe={true}
+        isSpeedUp={false}
+      />
+      { this.renderAdvancedOptionsButton() }
+     </div>
+
+    if (advancedInlineGasShown) {
+      return advancedGasInputs
+    } else if (gasButtonGroupShown) {
+      return gasPriceButtonGroup
+    } else {
+      return gasFeeDisplay
+    }
+  }
+
+  render () {
+    const { gasFeeError } = this.props
+
     return (
       <SendRowWrapper
         label={`${this.context.t('transactionFee')}:`}
         showError={gasFeeError}
         errorType={'gasFee'}
       >
-        {gasButtonGroupShown
-         ? <div>
-            <GasPriceButtonGroup
-              className="gas-price-button-group--small"
-              showCheck={false}
-              {...gasPriceButtonGroupProps}
-            />
-            <div className="advanced-gas-options-btn" onClick={() => showCustomizeGasModal()}>
-              { this.context.t('advancedOptions') }
-            </div>
-          </div>
-        : <GasFeeDisplay
-            conversionRate={conversionRate}
-            convertedCurrency={convertedCurrency}
-            gasLoadingError={gasLoadingError}
-            gasTotal={gasTotal}
-            onReset={resetGasButtons}
-            onClick={() => showCustomizeGasModal()}
-          />}
-
+        { this.renderContent() }
       </SendRowWrapper>
     )
   }