From 342dc95410b10f042b3f8ee4135f5fef1fd6fe93 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Thu, 2 Aug 2018 13:32:22 -0230
Subject: Adds the content of the advanced tab - w/o chart or dynamic content -
 to gas customize modal.

---
 .../advanced-tab-content.component.js              | 105 ++++++++++++++++++++
 .../advanced-tab-content/index.js                  |   1 +
 .../advanced-tab-content/index.scss                | 109 +++++++++++++++++++++
 .../advanced-tab-content/time-remaining/index.js   |   1 +
 .../advanced-tab-content/time-remaining/index.scss |  13 +++
 .../time-remaining/time-remaining.component.js     |  33 +++++++
 .../time-remaining/time-remaining.utils.js         |  11 +++
 7 files changed, 273 insertions(+)
 create mode 100644 ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
 create mode 100644 ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.js
 create mode 100644 ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
 create mode 100644 ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js
 create mode 100644 ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss
 create mode 100644 ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js
 create mode 100644 ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
new file mode 100644
index 000000000..7ddf13e51
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -0,0 +1,105 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {
+  MIN_GAS_PRICE_DEC,
+  MIN_GAS_LIMIT_DEC,
+} from '../../../send/send.constants'
+import GasSlider from '../../gas-slider'
+import TimeRemaining from './time-remaining'
+
+export default class AdvancedTabContent extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    updateCustomGasPrice: PropTypes.func,
+    updateCustomGasLimit: PropTypes.func,
+    customGasPrice: PropTypes.number,
+    customGasLimit: PropTypes.number,
+    millisecondsRemaining: PropTypes.number,
+  }
+
+  gasInput (value, onChange, min, precision, showGWEI) {
+    return (
+      <div className="advanced-tab__gas-edit-row__input-wrapper">
+        <input
+          className="advanced-tab__gas-edit-row__input"
+          type="number"
+          value={value}
+          onChange={event => onChange(Number(event.target.value))}
+        />
+        {showGWEI
+          ? <span className="advanced-tab__gas-edit-row__gwei-symbol">GWEI</span>
+          : null}
+      </div>
+    )
+  }
+
+  infoButton (onClick) {
+    return <i className="fa info-circle" onClick={onClick} />
+  }
+
+  render () {
+    const {
+      updateCustomGasPrice,
+      updateCustomGasLimit,
+      millisecondsRemaining,
+      customGasPrice,
+      customGasLimit,
+    } = this.props
+
+    return (
+      <div className="advanced-tab">
+        <div className="advanced-tab__transaction-data-summary">
+          <div className="advanced-tab__transaction-data-summary__titles">
+            <span>New Transaction Fee</span>
+            <span>~Transaction Time</span>
+          </div>
+          <div className="advanced-tab__transaction-data-summary__container">
+            <div className="advanced-tab__transaction-data-summary__fee">
+              $0.30
+            </div>
+            <TimeRemaining
+              milliseconds={millisecondsRemaining}
+            />
+          </div>
+        </div>
+        <div className="advanced-tab__fee-chart-title">
+          Live Transaction Fee Predictions
+        </div>
+        <div className="advanced-tab__fee-chart" />
+        <div className="advanced-tab__slider-container">
+          <GasSlider
+            onChange={value => {
+              updateCustomGasPrice(Number(value))
+            }}
+            lowLabel={'Cheaper'}
+            highLabel={'Faster'}
+            value={customGasPrice}
+            step={0.1}
+            max={200}
+            min={0}
+            coloredStart={{}}
+          />
+        </div>
+        <div className="advanced-tab__gas-edit-rows">
+          <div className="advanced-tab__gas-edit-row">
+            <div className="advanced-tab__gas-edit-row__label">
+              Gas Price
+              { this.infoButton(() => {}) }
+            </div>
+            { this.gasInput(customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
+          </div>
+          <div className="advanced-tab__gas-edit-row">
+            <div className="advanced-tab__gas-edit-row__label">
+              Gas Limit
+              { this.infoButton(() => {}) }
+            </div>
+            { this.gasInput(customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.js
new file mode 100644
index 000000000..492037f25
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.js
@@ -0,0 +1 @@
+export { default } from './advanced-tab-content.component'
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
new file mode 100644
index 000000000..5dc30e061
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -0,0 +1,109 @@
+@import './time-remaining/index';
+
+.advanced-tab {
+  display: flex;
+  flex-flow: column;
+  border-bottom: 1px solid $alto;
+
+  &__transaction-data-summary,
+  &__fee-chart-title,
+  &__gas-edit-row {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
+  &__transaction-data-summary {
+    display: flex;
+    flex-flow: column;
+    color: $mid-gray;
+    margin-top: 12px;
+
+    &__titles,
+    &__container {
+      display: flex;
+      flex-flow: row;
+      justify-content: space-between;
+      font-size: 12px;
+    }
+
+    &__container {
+      font-size: 26px;
+      margin-top: 6px;  
+    }
+  }
+
+  &__fee-chart-title {
+    font-size: 14px;
+    color: $scorpion;
+    margin-top: 22px;
+  }
+
+  &__fee-chart {
+    padding-left: 10px;
+    margin-top: 24px;
+    height: 134px;
+  }
+
+  &__slider-container {
+    padding-left: 27px;
+    padding-right: 27px;
+  }
+
+  &__gas-edit-rows {
+    margin-top: 44px;
+    height: 87px;
+    display: flex;
+    flex-flow: column;
+    justify-content: space-between;
+  }
+
+  &__gas-edit-row {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+
+    &__label {
+      color: $mid-gray;
+      font-size: 16px;
+      
+      .info-circle {
+        color: $silver;
+        margin-left: 10px;
+      }
+    }
+
+
+    &__input-wrapper {
+      position: relative;
+    }
+
+    &__input {
+      border: 1px solid $dusty-gray;
+      border-radius: 4px;
+      color: $mid-gray;
+      font-size: 16px;
+      height: 37px;
+      width: 163px;
+      padding: 8px 10px 10px 10px;
+    }
+
+    input[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      display: none;
+    }
+
+    input[type="number"]:hover::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      display: none;
+    }
+
+    &__gwei-symbol {
+      position: absolute;
+      top: 8px;
+      right: 10px;
+      color: $dusty-gray;
+    }
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js
new file mode 100644
index 000000000..61b681e1a
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js
@@ -0,0 +1 @@
+export { default } from './time-remaining.component'
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss
new file mode 100644
index 000000000..01bb06268
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss
@@ -0,0 +1,13 @@
+.time-remaining {
+  .minutes-num, .seconds-num {
+    font-size: 26px;
+  }
+
+  .seconds-num {
+    margin-left: 7px;
+  }
+
+  .minutes-label, .seconds-label {
+    font-size: 14px;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js
new file mode 100644
index 000000000..826d41f9c
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { getTimeBreakdown } from './time-remaining.utils'
+
+export default class TimeRemaining extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    milliseconds: PropTypes.number,
+  }
+
+  render () {
+    const {
+      milliseconds,
+    } = this.props
+
+    const {
+      minutes,
+      seconds,
+    } = getTimeBreakdown(milliseconds)
+
+    return (
+      <div className="time-remaining">
+        <span className="minutes-num">{minutes}</span>
+        <span className="minutes-label">{this.context.t('minutesShorthand')}</span>
+        <span className="seconds-num">{seconds}</span>
+        <span className="seconds-label">{this.context.t('secondsShorthand')}</span>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js
new file mode 100644
index 000000000..cf43e0acb
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js
@@ -0,0 +1,11 @@
+function getTimeBreakdown (milliseconds) {
+  return {
+    hours: Math.floor(milliseconds / 3600000),
+    minutes: Math.floor((milliseconds % 3600000) / 60000),
+    seconds: Math.floor((milliseconds % 60000) / 1000),
+  }
+}
+
+module.exports = {
+  getTimeBreakdown,
+}
-- 
cgit 


From d55a2615a4af1a0e4d589d0b82904f46cfbff6f7 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Tue, 7 Aug 2018 12:27:42 -0230
Subject: Split advanced-tab-content.component.js  render() method into smaller
 pieces; add translations to the same file.

---
 .../advanced-tab-content.component.js              | 81 +++++++++++++---------
 1 file changed, 50 insertions(+), 31 deletions(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index 7ddf13e51..8e593f029 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -18,6 +18,7 @@ export default class AdvancedTabContent extends Component {
     customGasPrice: PropTypes.number,
     customGasLimit: PropTypes.number,
     millisecondsRemaining: PropTypes.number,
+    totalFee: PropTypes.string,
   }
 
   gasInput (value, onChange, min, precision, showGWEI) {
@@ -40,6 +41,46 @@ export default class AdvancedTabContent extends Component {
     return <i className="fa info-circle" onClick={onClick} />
   }
 
+  renderDataSummary (totalFee, millisecondsRemaining) {
+    return (
+      <div className="advanced-tab__transaction-data-summary">
+        <div className="advanced-tab__transaction-data-summary__titles">
+          <span>{ this.context.t('newTransactionFee') }</span>
+          <span>~{ this.context.t('transactionTime') }</span>
+        </div>
+        <div className="advanced-tab__transaction-data-summary__container">
+          <div className="advanced-tab__transaction-data-summary__fee">
+            {totalFee}
+          </div>
+          <TimeRemaining
+            milliseconds={millisecondsRemaining}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) {
+    return (
+      <div className="advanced-tab__gas-edit-rows">
+        <div className="advanced-tab__gas-edit-row">
+          <div className="advanced-tab__gas-edit-row__label">
+            { this.context.t('gasPriceNoDenom') }
+            { this.infoButton(() => {}) }
+          </div>
+          { this.gasInput(customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
+        </div>
+        <div className="advanced-tab__gas-edit-row">
+          <div className="advanced-tab__gas-edit-row__label">
+            { this.context.t('gasLimit') }
+            { this.infoButton(() => {}) }
+          </div>
+          { this.gasInput(customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
+        </div>
+      </div>
+    )
+  }
+
   render () {
     const {
       updateCustomGasPrice,
@@ -47,26 +88,14 @@ export default class AdvancedTabContent extends Component {
       millisecondsRemaining,
       customGasPrice,
       customGasLimit,
+      totalFee,
     } = this.props
 
     return (
       <div className="advanced-tab">
-        <div className="advanced-tab__transaction-data-summary">
-          <div className="advanced-tab__transaction-data-summary__titles">
-            <span>New Transaction Fee</span>
-            <span>~Transaction Time</span>
-          </div>
-          <div className="advanced-tab__transaction-data-summary__container">
-            <div className="advanced-tab__transaction-data-summary__fee">
-              $0.30
-            </div>
-            <TimeRemaining
-              milliseconds={millisecondsRemaining}
-            />
-          </div>
-        </div>
+        { this.renderDataSummary(totalFee, millisecondsRemaining) }
         <div className="advanced-tab__fee-chart-title">
-          Live Transaction Fee Predictions
+          { this.context.t('feeChartTitle') }
         </div>
         <div className="advanced-tab__fee-chart" />
         <div className="advanced-tab__slider-container">
@@ -83,22 +112,12 @@ export default class AdvancedTabContent extends Component {
             coloredStart={{}}
           />
         </div>
-        <div className="advanced-tab__gas-edit-rows">
-          <div className="advanced-tab__gas-edit-row">
-            <div className="advanced-tab__gas-edit-row__label">
-              Gas Price
-              { this.infoButton(() => {}) }
-            </div>
-            { this.gasInput(customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
-          </div>
-          <div className="advanced-tab__gas-edit-row">
-            <div className="advanced-tab__gas-edit-row__label">
-              Gas Limit
-              { this.infoButton(() => {}) }
-            </div>
-            { this.gasInput(customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
-          </div>
-        </div>
+        { this.renderGasEditRows(
+            customGasPrice,
+            updateCustomGasPrice,
+            customGasLimit,
+            updateCustomGasLimit
+        ) }
       </div>
     )
   }
-- 
cgit 


From 3b9ec8e1bc8f3db9cfd645b10e4908f06096c70c Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Tue, 7 Aug 2018 12:29:14 -0230
Subject: Remove gas slider from advance-tab-content.component

---
 .../advanced-tab-content.component.js                     | 15 ---------------
 .../advanced-tab-content/index.scss                       |  1 +
 2 files changed, 1 insertion(+), 15 deletions(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index 8e593f029..a09869a46 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -4,7 +4,6 @@ import {
   MIN_GAS_PRICE_DEC,
   MIN_GAS_LIMIT_DEC,
 } from '../../../send/send.constants'
-import GasSlider from '../../gas-slider'
 import TimeRemaining from './time-remaining'
 
 export default class AdvancedTabContent extends Component {
@@ -98,20 +97,6 @@ export default class AdvancedTabContent extends Component {
           { this.context.t('feeChartTitle') }
         </div>
         <div className="advanced-tab__fee-chart" />
-        <div className="advanced-tab__slider-container">
-          <GasSlider
-            onChange={value => {
-              updateCustomGasPrice(Number(value))
-            }}
-            lowLabel={'Cheaper'}
-            highLabel={'Faster'}
-            value={customGasPrice}
-            step={0.1}
-            max={200}
-            min={0}
-            coloredStart={{}}
-          />
-        </div>
         { this.renderGasEditRows(
             customGasPrice,
             updateCustomGasPrice,
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
index 5dc30e061..0c95afc48 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -4,6 +4,7 @@
   display: flex;
   flex-flow: column;
   border-bottom: 1px solid $alto;
+  height: 430px;
 
   &__transaction-data-summary,
   &__fee-chart-title,
-- 
cgit 


From 99c8804eeb8c3e407fa9f2d806c145113ec6ec2c Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Wed, 8 Aug 2018 11:21:06 -0230
Subject: Add tests for advanced-tab-component.js and subcomponents.

---
 .../advanced-tab-content.component.js              |  30 +--
 .../tests/advanced-tab-content-component.test.js   | 215 +++++++++++++++++++++
 .../tests/time-remaining-component.test.js         |  30 +++
 3 files changed, 261 insertions(+), 14 deletions(-)
 create mode 100644 ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
 create mode 100644 ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index a09869a46..69cd06cde 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -27,6 +27,8 @@ export default class AdvancedTabContent extends Component {
           className="advanced-tab__gas-edit-row__input"
           type="number"
           value={value}
+          min={min}
+          precision={precision}
           onChange={event => onChange(Number(event.target.value))}
         />
         {showGWEI
@@ -59,23 +61,23 @@ export default class AdvancedTabContent extends Component {
     )
   }
 
+  renderGasEditRow (labelKey, ...gasInputArgs) {
+    return (
+      <div className="advanced-tab__gas-edit-row">
+        <div className="advanced-tab__gas-edit-row__label">
+          { this.context.t(labelKey) }
+          { this.infoButton(() => {}) }
+        </div>
+        { this.gasInput(...gasInputArgs) }
+      </div>
+    )
+  }
+
   renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) {
     return (
       <div className="advanced-tab__gas-edit-rows">
-        <div className="advanced-tab__gas-edit-row">
-          <div className="advanced-tab__gas-edit-row__label">
-            { this.context.t('gasPriceNoDenom') }
-            { this.infoButton(() => {}) }
-          </div>
-          { this.gasInput(customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
-        </div>
-        <div className="advanced-tab__gas-edit-row">
-          <div className="advanced-tab__gas-edit-row__label">
-            { this.context.t('gasLimit') }
-            { this.infoButton(() => {}) }
-          </div>
-          { this.gasInput(customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
-        </div>
+        { this.renderGasEditRow('gasPriceNoDenom', customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
+        { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
       </div>
     )
   }
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
new file mode 100644
index 000000000..3efe1d2a9
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -0,0 +1,215 @@
+import React from 'react'
+import assert from 'assert'
+import shallow from '../../../../../../lib/shallow-with-context'
+import sinon from 'sinon'
+import AdvancedTabContent from '../advanced-tab-content.component.js'
+
+import TimeRemaining from '../time-remaining'
+
+const propsMethodSpies = {
+  updateCustomGasPrice: sinon.spy(),
+  updateCustomGasLimit: sinon.spy(),
+}
+
+sinon.spy(AdvancedTabContent.prototype, 'renderGasEditRow')
+sinon.spy(AdvancedTabContent.prototype, 'gasInput')
+
+describe('AdvancedTabContent Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<AdvancedTabContent
+      updateCustomGasPrice={propsMethodSpies.updateCustomGasPrice}
+      updateCustomGasLimit={propsMethodSpies.updateCustomGasLimit}
+      customGasPrice={11}
+      customGasLimit={23456}
+      millisecondsRemaining={21500}
+      totalFee={'$0.25'}
+    />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
+  })
+
+  afterEach(() => {
+    propsMethodSpies.updateCustomGasPrice.resetHistory()
+    propsMethodSpies.updateCustomGasLimit.resetHistory()
+  })
+
+  describe('render()', () => {
+    it('should render the advanced-tab root node', () => {
+      assert(wrapper.hasClass('advanced-tab'))
+    })
+
+    it('should render the expected four children of the advanced-tab div', () => {
+      const advancedTabChildren = wrapper.children()
+      assert.equal(advancedTabChildren.length, 4)
+
+      assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary'))
+      assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart-title'))
+      assert(advancedTabChildren.at(2).hasClass('advanced-tab__fee-chart'))
+      assert(advancedTabChildren.at(3).hasClass('advanced-tab__gas-edit-rows'))
+    })
+  })
+
+  describe('renderDataSummary()', () => {
+    let dataSummary
+
+    beforeEach(() => {
+      dataSummary = shallow(wrapper.instance().renderDataSummary('mockTotalFee', 'mockMsRemaining'))
+    })
+
+    it('should render the transaction-data-summary root node', () => {
+      assert(dataSummary.hasClass('advanced-tab__transaction-data-summary'))
+    })
+
+    it('should render titles of the data', () => {
+      const titlesNode = dataSummary.children().at(0)
+      assert(titlesNode.hasClass('advanced-tab__transaction-data-summary__titles'))
+      assert.equal(titlesNode.children().at(0).text(), 'newTransactionFee')
+      assert.equal(titlesNode.children().at(1).text(), '~transactionTime')
+    })
+
+    it('should render the data', () => {
+      const dataNode = dataSummary.children().at(1)
+      assert(dataNode.hasClass('advanced-tab__transaction-data-summary__container'))
+      assert.equal(dataNode.children().at(0).text(), 'mockTotalFee')
+      assert(dataNode.children().at(1).is(TimeRemaining))
+      assert.equal(dataNode.children().at(1).props().milliseconds, 'mockMsRemaining')
+    })
+  })
+
+  describe('renderGasEditRow()', () => {
+    let gasEditRow
+
+    beforeEach(() => {
+      AdvancedTabContent.prototype.gasInput.resetHistory()
+      gasEditRow = shallow(wrapper.instance().renderGasEditRow(
+        'mockLabelKey', 'argA', 'argB'
+      ))
+    })
+
+    it('should render the gas-edit-row root node', () => {
+      assert(gasEditRow.hasClass('advanced-tab__gas-edit-row'))
+    })
+
+    it('should render a label and an input', () => {
+      const gasEditRowChildren = gasEditRow.children()
+      assert.equal(gasEditRowChildren.length, 2)
+      assert(gasEditRowChildren.at(0).hasClass('advanced-tab__gas-edit-row__label'))
+      assert(gasEditRowChildren.at(1).hasClass('advanced-tab__gas-edit-row__input-wrapper'))
+    })
+
+    it('should render the label key and info button', () => {
+      const gasRowLabelChildren = gasEditRow.children().at(0).children()
+      assert.equal(gasRowLabelChildren.length, 2)
+      assert(gasRowLabelChildren.at(0), 'mockLabelKey')
+      assert(gasRowLabelChildren.at(1).hasClass('info-circle'))
+    })
+
+    it('should call this.gasInput with the correct args', () => {
+      const gasInputSpyArgs = AdvancedTabContent.prototype.gasInput.args
+      assert.deepEqual(gasInputSpyArgs[0], [ 'argA', 'argB' ])
+    })
+  })
+
+  describe('renderGasEditRows()', () => {
+    let gasEditRows
+
+    beforeEach(() => {
+      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+      gasEditRows = shallow(wrapper.instance().renderGasEditRows(
+        'mockGasPrice',
+        () => 'mockUpdateCustomGasPriceReturn',
+        'mockGasLimit',
+        () => 'mockUpdateCustomGasLimitReturn'
+      ))
+    })
+
+    it('should render the gas-edit-rows root node', () => {
+      assert(gasEditRows.hasClass('advanced-tab__gas-edit-rows'))
+    })
+
+    it('should render two rows', () => {
+      const gasEditRowsChildren = gasEditRows.children()
+      assert.equal(gasEditRowsChildren.length, 2)
+      assert(gasEditRowsChildren.at(0).hasClass('advanced-tab__gas-edit-row'))
+      assert(gasEditRowsChildren.at(1).hasClass('advanced-tab__gas-edit-row'))
+    })
+
+    it('should call this.renderGasEditRow twice, with the expected args', () => {
+      const renderGasEditRowSpyArgs = AdvancedTabContent.prototype.renderGasEditRow.args
+      assert.equal(renderGasEditRowSpyArgs.length, 2)
+      assert.deepEqual(renderGasEditRowSpyArgs[0].map(String), [
+        'gasPriceNoDenom', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', '0', 9, true,
+      ].map(String))
+      assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [
+        'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 21000, '0',
+      ].map(String))
+    })
+  })
+
+  describe('infoButton()', () => {
+    let infoButton
+
+    beforeEach(() => {
+      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+      infoButton = shallow(wrapper.instance().infoButton(() => 'mockOnClickReturn'))
+    })
+
+    it('should render the i element', () => {
+      assert(infoButton.hasClass('info-circle'))
+    })
+
+    it('should pass the onClick argument to the i tag onClick prop', () => {
+      assert(infoButton.props().onClick(), 'mockOnClickReturn')
+    })
+  })
+
+  describe('gasInput()', () => {
+    let gasInput
+
+    beforeEach(() => {
+      AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+      gasInput = shallow(wrapper.instance().gasInput(
+        321,
+        value => value + 7,
+        0,
+        8,
+        false
+      ))
+    })
+
+    it('should render the input-wrapper root node', () => {
+      assert(gasInput.hasClass('advanced-tab__gas-edit-row__input-wrapper'))
+    })
+
+    it('should render an input, but not a GWEI symbol', () => {
+      assert.equal(gasInput.children().length, 1)
+      assert(gasInput.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
+    })
+
+    it('should show GWEI if the showGWEI prop is truthy', () => {
+      const gasInputWithGWEI = shallow(wrapper.instance().gasInput(
+        321,
+        value => value + 7,
+        0,
+        8,
+        true
+      ))
+      assert.equal(gasInputWithGWEI.children().length, 2)
+      assert(gasInputWithGWEI.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
+      assert(gasInputWithGWEI.children().at(1).hasClass('advanced-tab__gas-edit-row__gwei-symbol'))
+    })
+
+    it('should pass the correct value min and precision props to the input', () => {
+      const inputProps = gasInput.find('input').props()
+      assert.equal(inputProps.min, 0)
+      assert.equal(inputProps.value, 321)
+      assert.equal(inputProps.precision, 8)
+    })
+
+    it('should call the passed onChange method with the value of the input onChange event', () => {
+      const inputOnChange = gasInput.find('input').props().onChange
+      assert.equal(inputOnChange({ target: { value: 8} }), 15)
+    })
+  })
+
+})
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js
new file mode 100644
index 000000000..d8490272f
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import assert from 'assert'
+import shallow from '../../../../../../../lib/shallow-with-context'
+import TimeRemaining from '../time-remaining.component.js'
+
+describe('TimeRemaining Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<TimeRemaining
+      milliseconds={495000}
+    />)
+  })
+
+  describe('render()', () => {
+    it('should render the time-remaining root node', () => {
+      assert(wrapper.hasClass('time-remaining'))
+    })
+
+    it('should render minutes and seconds numbers and labels', () => {
+      const timeRemainingChildren = wrapper.children()
+      assert.equal(timeRemainingChildren.length, 4)
+      assert.equal(timeRemainingChildren.at(0).text(), 8)
+      assert.equal(timeRemainingChildren.at(1).text(), 'minutesShorthand')
+      assert.equal(timeRemainingChildren.at(2).text(), 15)
+      assert.equal(timeRemainingChildren.at(3).text(), 'secondsShorthand')
+    })
+  })
+
+})
-- 
cgit 


From 57cd721800aff67cd18e9e530d92eb94ff75d473 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Wed, 8 Aug 2018 11:40:17 -0230
Subject: Improve styling of advanced-tab-content gasInput row

---
 .../advanced-tab-content/advanced-tab-content.component.js     |  2 +-
 .../gas-modal-page-container/advanced-tab-content/index.scss   | 10 ++++++++--
 .../tests/advanced-tab-content-component.test.js               |  4 ++--
 3 files changed, 11 insertions(+), 5 deletions(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index 69cd06cde..cd5ca7d35 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -39,7 +39,7 @@ export default class AdvancedTabContent extends Component {
   }
 
   infoButton (onClick) {
-    return <i className="fa info-circle" onClick={onClick} />
+    return <i className="fas fa-info-circle" onClick={onClick} />
   }
 
   renderDataSummary (totalFee, millisecondsRemaining) {
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
index 0c95afc48..28e2fde9b 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -67,9 +67,14 @@
       color: $mid-gray;
       font-size: 16px;
       
-      .info-circle {
+      .fa-info-circle {
         color: $silver;
         margin-left: 10px;
+        cursor: pointer;
+      }
+
+      .fa-info-circle:hover {
+        color: $mid-gray;
       }
     }
 
@@ -85,7 +90,8 @@
       font-size: 16px;
       height: 37px;
       width: 163px;
-      padding: 8px 10px 10px 10px;
+      padding-left: 8px;
+      padding-top: 2px;
     }
 
     input[type="number"]::-webkit-inner-spin-button {
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index 3efe1d2a9..5cdcf687e 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -101,7 +101,7 @@ describe('AdvancedTabContent Component', function () {
       const gasRowLabelChildren = gasEditRow.children().at(0).children()
       assert.equal(gasRowLabelChildren.length, 2)
       assert(gasRowLabelChildren.at(0), 'mockLabelKey')
-      assert(gasRowLabelChildren.at(1).hasClass('info-circle'))
+      assert(gasRowLabelChildren.at(1).hasClass('fa-info-circle'))
     })
 
     it('should call this.gasInput with the correct args', () => {
@@ -155,7 +155,7 @@ describe('AdvancedTabContent Component', function () {
     })
 
     it('should render the i element', () => {
-      assert(infoButton.hasClass('info-circle'))
+      assert(infoButton.hasClass('fa-info-circle'))
     })
 
     it('should pass the onClick argument to the i tag onClick prop', () => {
-- 
cgit 


From 58feb24fa72bac5c79daa96956810dd2233adf02 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Sun, 9 Sep 2018 15:17:49 -0230
Subject: Styling fixes for gas customization advanced tab content.

---
 .../advanced-tab-content/advanced-tab-content.component.js              | 2 +-
 .../gas-modal-page-container/advanced-tab-content/index.scss            | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index cd5ca7d35..38fa117f9 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -39,7 +39,7 @@ export default class AdvancedTabContent extends Component {
   }
 
   infoButton (onClick) {
-    return <i className="fas fa-info-circle" onClick={onClick} />
+    return <i className="fa fa-info-circle" onClick={onClick} />
   }
 
   renderDataSummary (totalFee, millisecondsRemaining) {
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
index 28e2fde9b..aced75449 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -3,7 +3,6 @@
 .advanced-tab {
   display: flex;
   flex-flow: column;
-  border-bottom: 1px solid $alto;
   height: 430px;
 
   &__transaction-data-summary,
-- 
cgit 


From 7de3f22d63748ed5a81e947755db056d4cdef3db Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Thu, 13 Sep 2018 06:17:05 -0230
Subject: Connects remained of the gas customization component to redux.

---
 .../advanced-tab-content/advanced-tab-content.component.js        | 8 ++------
 .../tests/advanced-tab-content-component.test.js                  | 4 ++--
 2 files changed, 4 insertions(+), 8 deletions(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index 38fa117f9..56d10cc2b 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -1,9 +1,5 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import {
-  MIN_GAS_PRICE_DEC,
-  MIN_GAS_LIMIT_DEC,
-} from '../../../send/send.constants'
 import TimeRemaining from './time-remaining'
 
 export default class AdvancedTabContent extends Component {
@@ -76,8 +72,8 @@ export default class AdvancedTabContent extends Component {
   renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) {
     return (
       <div className="advanced-tab__gas-edit-rows">
-        { this.renderGasEditRow('gasPriceNoDenom', customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
-        { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
+        { this.renderGasEditRow('gasPriceNoDenom', customGasPrice, updateCustomGasPrice, customGasPrice, 9, true) }
+        { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, customGasLimit, 0) }
       </div>
     )
   }
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index 5cdcf687e..0ef286b8a 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -138,10 +138,10 @@ describe('AdvancedTabContent Component', function () {
       const renderGasEditRowSpyArgs = AdvancedTabContent.prototype.renderGasEditRow.args
       assert.equal(renderGasEditRowSpyArgs.length, 2)
       assert.deepEqual(renderGasEditRowSpyArgs[0].map(String), [
-        'gasPriceNoDenom', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', '0', 9, true,
+        'gasPriceNoDenom', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', 9, true,
       ].map(String))
       assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [
-        'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 21000, '0',
+        'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 'mockGasLimit', 0,
       ].map(String))
     })
   })
-- 
cgit 


From b95eb30ec60e4d169a61d987ad86fe333aa49523 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Thu, 20 Sep 2018 13:36:23 -0230
Subject: Adds redesign for the customize gas advanced tab.

---
 .../advanced-tab-content.component.js              | 35 ++++++--------
 .../advanced-tab-content/index.scss                | 44 +++++++++++------
 .../tests/advanced-tab-content-component.test.js   | 56 +++++++++++++---------
 .../advanced-tab-content/time-remaining/index.scss |  8 +++-
 4 files changed, 84 insertions(+), 59 deletions(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index 56d10cc2b..5218dd477 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import TimeRemaining from './time-remaining'
+import GasPriceChart from '../../gas-price-chart'
 
 export default class AdvancedTabContent extends Component {
   static contextTypes = {
@@ -14,6 +14,7 @@ export default class AdvancedTabContent extends Component {
     customGasLimit: PropTypes.number,
     millisecondsRemaining: PropTypes.number,
     totalFee: PropTypes.string,
+    timeRemaining: PropTypes.string,
   }
 
   gasInput (value, onChange, min, precision, showGWEI) {
@@ -27,9 +28,6 @@ export default class AdvancedTabContent extends Component {
           precision={precision}
           onChange={event => onChange(Number(event.target.value))}
         />
-        {showGWEI
-          ? <span className="advanced-tab__gas-edit-row__gwei-symbol">GWEI</span>
-          : null}
       </div>
     )
   }
@@ -38,7 +36,7 @@ export default class AdvancedTabContent extends Component {
     return <i className="fa fa-info-circle" onClick={onClick} />
   }
 
-  renderDataSummary (totalFee, millisecondsRemaining) {
+  renderDataSummary (totalFee, timeRemaining) {
     return (
       <div className="advanced-tab__transaction-data-summary">
         <div className="advanced-tab__transaction-data-summary__titles">
@@ -49,9 +47,7 @@ export default class AdvancedTabContent extends Component {
           <div className="advanced-tab__transaction-data-summary__fee">
             {totalFee}
           </div>
-          <TimeRemaining
-            milliseconds={millisecondsRemaining}
-          />
+          <div className="time-remaining">{timeRemaining}</div>
         </div>
       </div>
     )
@@ -72,7 +68,7 @@ export default class AdvancedTabContent extends Component {
   renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) {
     return (
       <div className="advanced-tab__gas-edit-rows">
-        { this.renderGasEditRow('gasPriceNoDenom', customGasPrice, updateCustomGasPrice, customGasPrice, 9, true) }
+        { this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, 9, true) }
         { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, customGasLimit, 0) }
       </div>
     )
@@ -82,7 +78,7 @@ export default class AdvancedTabContent extends Component {
     const {
       updateCustomGasPrice,
       updateCustomGasLimit,
-      millisecondsRemaining,
+      timeRemaining,
       customGasPrice,
       customGasLimit,
       totalFee,
@@ -90,17 +86,16 @@ export default class AdvancedTabContent extends Component {
 
     return (
       <div className="advanced-tab">
-        { this.renderDataSummary(totalFee, millisecondsRemaining) }
-        <div className="advanced-tab__fee-chart-title">
-          { this.context.t('feeChartTitle') }
+        { this.renderDataSummary(totalFee, timeRemaining) }
+        <div className="advanced-tab__fee-chart">
+          { this.renderGasEditRows(
+              customGasPrice,
+              updateCustomGasPrice,
+              customGasLimit,
+              updateCustomGasLimit
+          ) }
+          <GasPriceChart />
         </div>
-        <div className="advanced-tab__fee-chart" />
-        { this.renderGasEditRows(
-            customGasPrice,
-            updateCustomGasPrice,
-            customGasLimit,
-            updateCustomGasLimit
-        ) }
       </div>
     )
   }
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
index aced75449..ae99ba4aa 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -3,11 +3,9 @@
 .advanced-tab {
   display: flex;
   flex-flow: column;
-  height: 430px;
 
   &__transaction-data-summary,
-  &__fee-chart-title,
-  &__gas-edit-row {
+  &__fee-chart-title {
     padding-left: 24px;
     padding-right: 24px;
   }
@@ -17,6 +15,8 @@
     flex-flow: column;
     color: $mid-gray;
     margin-top: 12px;
+    padding-left: 18px;
+    padding-right: 18px;
 
     &__titles,
     &__container {
@@ -24,11 +24,17 @@
       flex-flow: row;
       justify-content: space-between;
       font-size: 12px;
+      color: #888EA3;
     }
 
     &__container {
-      font-size: 26px;
-      margin-top: 6px;  
+      font-size: 16px;
+      margin-top: 0px;
+    }
+
+    &__fee {
+      font-size: 16px;
+      color: #313A5E;
     }
   }
 
@@ -40,8 +46,11 @@
 
   &__fee-chart {
     padding-left: 10px;
-    margin-top: 24px;
-    height: 134px;
+    margin-top: 8px;
+    height: 258px;
+    background: #F8F9FB;
+    border-bottom: 1px solid #d2d8dd;
+    border-top: 1px solid #d2d8dd;
   }
 
   &__slider-container {
@@ -50,21 +59,25 @@
   }
 
   &__gas-edit-rows {
-    margin-top: 44px;
     height: 87px;
     display: flex;
-    flex-flow: column;
+    flex-flow: row;
     justify-content: space-between;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-top: 9px;
   }
 
   &__gas-edit-row {
     display: flex;
-    flex-flow: row;
-    justify-content: space-between;
+    flex-flow: column;
 
     &__label {
-      color: $mid-gray;
-      font-size: 16px;
+      color: #313B5E;
+      font-size: 14px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       
       .fa-info-circle {
         color: $silver;
@@ -87,10 +100,11 @@
       border-radius: 4px;
       color: $mid-gray;
       font-size: 16px;
-      height: 37px;
-      width: 163px;
+      height: 24px;
+      width: 155px;
       padding-left: 8px;
       padding-top: 2px;
+      margin-top: 7px;
     }
 
     input[type="number"]::-webkit-inner-spin-button {
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index 0ef286b8a..1489c7696 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -4,7 +4,7 @@ import shallow from '../../../../../../lib/shallow-with-context'
 import sinon from 'sinon'
 import AdvancedTabContent from '../advanced-tab-content.component.js'
 
-import TimeRemaining from '../time-remaining'
+import GasPriceChart from '../../../gas-price-chart'
 
 const propsMethodSpies = {
   updateCustomGasPrice: sinon.spy(),
@@ -13,6 +13,8 @@ const propsMethodSpies = {
 
 sinon.spy(AdvancedTabContent.prototype, 'renderGasEditRow')
 sinon.spy(AdvancedTabContent.prototype, 'gasInput')
+sinon.spy(AdvancedTabContent.prototype, 'renderGasEditRows')
+sinon.spy(AdvancedTabContent.prototype, 'renderDataSummary')
 
 describe('AdvancedTabContent Component', function () {
   let wrapper
@@ -23,7 +25,7 @@ describe('AdvancedTabContent Component', function () {
       updateCustomGasLimit={propsMethodSpies.updateCustomGasLimit}
       customGasPrice={11}
       customGasLimit={23456}
-      millisecondsRemaining={21500}
+      timeRemaining={21500}
       totalFee={'$0.25'}
     />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
   })
@@ -31,6 +33,10 @@ describe('AdvancedTabContent Component', function () {
   afterEach(() => {
     propsMethodSpies.updateCustomGasPrice.resetHistory()
     propsMethodSpies.updateCustomGasLimit.resetHistory()
+    AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
+    AdvancedTabContent.prototype.gasInput.resetHistory()
+    AdvancedTabContent.prototype.renderGasEditRows.resetHistory()
+    AdvancedTabContent.prototype.renderDataSummary.resetHistory()
   })
 
   describe('render()', () => {
@@ -40,12 +46,31 @@ describe('AdvancedTabContent Component', function () {
 
     it('should render the expected four children of the advanced-tab div', () => {
       const advancedTabChildren = wrapper.children()
-      assert.equal(advancedTabChildren.length, 4)
+      assert.equal(advancedTabChildren.length, 2)
 
       assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary'))
-      assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart-title'))
-      assert(advancedTabChildren.at(2).hasClass('advanced-tab__fee-chart'))
-      assert(advancedTabChildren.at(3).hasClass('advanced-tab__gas-edit-rows'))
+      assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart'))
+
+      const feeChartDiv = advancedTabChildren.at(1)
+
+      assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
+      assert(feeChartDiv.childAt(1).is(GasPriceChart))
+    })
+
+    it('should call renderDataSummary with the expected params', () => {
+      assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
+      const renderDataSummaryArgs = AdvancedTabContent.prototype.renderDataSummary.getCall(0).args
+      assert.deepEqual(renderDataSummaryArgs, ['$0.25', 21500])
+
+      assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
+      const renderGasEditRowArgs = AdvancedTabContent.prototype.renderGasEditRows.getCall(0).args
+      assert.deepEqual(renderGasEditRowArgs, [
+        11, propsMethodSpies.updateCustomGasPrice, 23456, propsMethodSpies.updateCustomGasLimit,
+      ])
+    })
+
+    it('should call renderGasEditRows with the expected params', () => {
+
     })
   })
 
@@ -71,8 +96,8 @@ describe('AdvancedTabContent Component', function () {
       const dataNode = dataSummary.children().at(1)
       assert(dataNode.hasClass('advanced-tab__transaction-data-summary__container'))
       assert.equal(dataNode.children().at(0).text(), 'mockTotalFee')
-      assert(dataNode.children().at(1).is(TimeRemaining))
-      assert.equal(dataNode.children().at(1).props().milliseconds, 'mockMsRemaining')
+      assert(dataNode.children().at(1).hasClass('time-remaining'))
+      assert.equal(dataNode.children().at(1).text(), 'mockMsRemaining')
     })
   })
 
@@ -138,7 +163,7 @@ describe('AdvancedTabContent Component', function () {
       const renderGasEditRowSpyArgs = AdvancedTabContent.prototype.renderGasEditRow.args
       assert.equal(renderGasEditRowSpyArgs.length, 2)
       assert.deepEqual(renderGasEditRowSpyArgs[0].map(String), [
-        'gasPriceNoDenom', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', 9, true,
+        'gasPrice', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', 9, true,
       ].map(String))
       assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [
         'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 'mockGasLimit', 0,
@@ -186,19 +211,6 @@ describe('AdvancedTabContent Component', function () {
       assert(gasInput.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
     })
 
-    it('should show GWEI if the showGWEI prop is truthy', () => {
-      const gasInputWithGWEI = shallow(wrapper.instance().gasInput(
-        321,
-        value => value + 7,
-        0,
-        8,
-        true
-      ))
-      assert.equal(gasInputWithGWEI.children().length, 2)
-      assert(gasInputWithGWEI.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
-      assert(gasInputWithGWEI.children().at(1).hasClass('advanced-tab__gas-edit-row__gwei-symbol'))
-    })
-
     it('should pass the correct value min and precision props to the input', () => {
       const inputProps = gasInput.find('input').props()
       assert.equal(inputProps.min, 0)
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss
index 01bb06268..e2115af7f 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss
@@ -1,13 +1,17 @@
 .time-remaining {
+  color: #313A5E;
+  font-size: 16px;
+
   .minutes-num, .seconds-num {
-    font-size: 26px;
+    font-size: 16px;
   }
 
   .seconds-num {
     margin-left: 7px;
+    font-size: 16px;
   }
 
   .minutes-label, .seconds-label {
-    font-size: 14px;
+    font-size: 16px;
   }
 }
\ No newline at end of file
-- 
cgit 


From 6f8e2b1ad94fd70c3be976ef88179dc00ceebb45 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Tue, 9 Oct 2018 14:23:48 -0230
Subject: Clean up for advanced gas tab customization changes.

---
 .../advanced-tab-content/tests/advanced-tab-content-component.test.js | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index 1489c7696..14863e59d 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -68,10 +68,6 @@ describe('AdvancedTabContent Component', function () {
         11, propsMethodSpies.updateCustomGasPrice, 23456, propsMethodSpies.updateCustomGasLimit,
       ])
     })
-
-    it('should call renderGasEditRows with the expected params', () => {
-
-    })
   })
 
   describe('renderDataSummary()', () => {
-- 
cgit 


From 0ba6f7d9bb5c2183d8a370fd0955e18d45616207 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Thu, 20 Sep 2018 13:36:23 -0230
Subject: Adds not yet functional gas price chart.

---
 .../advanced-tab-content.component.js              |  5 ++++
 .../advanced-tab-content/index.scss                | 33 +++++++++++++++-------
 .../tests/advanced-tab-content-component.test.js   |  4 ++-
 3 files changed, 31 insertions(+), 11 deletions(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index 5218dd477..f90da0a88 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -94,7 +94,12 @@ export default class AdvancedTabContent extends Component {
               customGasLimit,
               updateCustomGasLimit
           ) }
+          <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div>
           <GasPriceChart />
+          <div className="advanced-tab__fee-chart__speed-buttons">
+            <span>Slower</span>
+            <span>Faster</span>
+          </div>
         </div>
       </div>
     )
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
index ae99ba4aa..9c89688e2 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -38,19 +38,32 @@
     }
   }
 
-  &__fee-chart-title {
-    font-size: 14px;
-    color: $scorpion;
-    margin-top: 22px;
-  }
-
   &__fee-chart {
-    padding-left: 10px;
     margin-top: 8px;
-    height: 258px;
+    height: 265px;
     background: #F8F9FB;
     border-bottom: 1px solid #d2d8dd;
     border-top: 1px solid #d2d8dd;
+    position: relative;
+
+    &__title {
+      font-size: 12px;
+      color: #313A5E;
+      margin-left: 22px;
+      margin-bottom: 11px;
+    }
+
+    &__speed-buttons {
+      position: absolute;
+      bottom: 13px;
+      display: flex;
+      justify-content: space-between;
+      padding-left: 20px;
+      padding-right: 19px;
+      width: 100%;
+      font-size: 10px;
+      color: #888EA3;
+    }
   }
 
   &__slider-container {
@@ -59,11 +72,11 @@
   }
 
   &__gas-edit-rows {
-    height: 87px;
+    height: 73px;
     display: flex;
     flex-flow: row;
     justify-content: space-between;
-    margin-left: 10px;
+    margin-left: 20px;
     margin-right: 10px;
     margin-top: 9px;
   }
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index 14863e59d..27a2326b8 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -54,7 +54,9 @@ describe('AdvancedTabContent Component', function () {
       const feeChartDiv = advancedTabChildren.at(1)
 
       assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
-      assert(feeChartDiv.childAt(1).is(GasPriceChart))
+      assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title'))
+      assert(feeChartDiv.childAt(2).is(GasPriceChart))
+      assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
     })
 
     it('should call renderDataSummary with the expected params', () => {
-- 
cgit 


From 2dbae581ac3f9190ddd1c3457bd51b41eef8051b Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Wed, 3 Oct 2018 10:50:05 -0230
Subject: Gas price chart improvements, redesign, bug fixes, and set up to
 receive external data

---
 .../gas-modal-page-container/advanced-tab-content/index.scss             | 1 -
 1 file changed, 1 deletion(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
index 9c89688e2..0fc9f4578 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -50,7 +50,6 @@
       font-size: 12px;
       color: #313A5E;
       margin-left: 22px;
-      margin-bottom: 11px;
     }
 
     &__speed-buttons {
-- 
cgit 


From a2bbf504b891a63f32070961118ec1ae6fa5fdd8 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Tue, 9 Oct 2018 14:05:54 -0230
Subject: Read only connection of gas price chart to redux

---
 .../advanced-tab-content/advanced-tab-content.component.js            | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index f90da0a88..44aba358c 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -15,6 +15,7 @@ export default class AdvancedTabContent extends Component {
     millisecondsRemaining: PropTypes.number,
     totalFee: PropTypes.string,
     timeRemaining: PropTypes.string,
+    gasChartProps: PropTypes.object,
   }
 
   gasInput (value, onChange, min, precision, showGWEI) {
@@ -82,6 +83,7 @@ export default class AdvancedTabContent extends Component {
       customGasPrice,
       customGasLimit,
       totalFee,
+      gasChartProps,
     } = this.props
 
     return (
@@ -95,7 +97,7 @@ export default class AdvancedTabContent extends Component {
               updateCustomGasLimit
           ) }
           <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div>
-          <GasPriceChart />
+          <GasPriceChart {...gasChartProps} />
           <div className="advanced-tab__fee-chart__speed-buttons">
             <span>Slower</span>
             <span>Faster</span>
-- 
cgit 


From cd32c58fb4bcd731d8a83d354c9b01a38c8df219 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Wed, 10 Oct 2018 13:36:38 -0230
Subject: Complete integration of gas chart with redux.

---
 .../advanced-tab-content/advanced-tab-content.component.js              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index 44aba358c..4dd18ce2b 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -97,7 +97,7 @@ export default class AdvancedTabContent extends Component {
               updateCustomGasLimit
           ) }
           <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div>
-          <GasPriceChart {...gasChartProps} />
+          <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} />
           <div className="advanced-tab__fee-chart__speed-buttons">
             <span>Slower</span>
             <span>Faster</span>
-- 
cgit 


From aa798cc54557f0740c3e9ab3f7bc85bccdc8abc3 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Wed, 10 Oct 2018 17:07:40 -0230
Subject: Add control arrows to advanced gas tab inputs.

---
 .../advanced-tab-content.component.js              |  4 +++
 .../advanced-tab-content/index.scss                | 37 ++++++++++++++++++++++
 .../tests/advanced-tab-content-component.test.js   | 23 +++++++++++++-
 3 files changed, 63 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index 4dd18ce2b..b9ae93684 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -29,6 +29,10 @@ export default class AdvancedTabContent extends Component {
           precision={precision}
           onChange={event => onChange(Number(event.target.value))}
         />
+        <div className="advanced-tab__gas-edit-row__input-arrows">
+          <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-up" onClick={() => onChange(value + 1)} /></div>
+          <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-down" onClick={() => onChange(value - 1)} /></div>
+        </div>
       </div>
     )
   }
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
index 0fc9f4578..69bb65f2f 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -119,6 +119,43 @@
       margin-top: 7px;
     }
 
+    &__input-arrows {
+      position: absolute;
+      top: 7px;
+      right: 0px;
+      width: 17px;
+      height: 24px;
+      border: 1px solid #dadada;
+      border-top-right-radius: 4px;
+      display: flex;
+      flex-direction: column;
+      color: #9b9b9b;
+      font-size: .8em;
+      border-bottom-right-radius: 4px;
+      cursor: pointer;
+
+      &__i-wrap {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+      }
+
+      &__i-wrap:hover {
+        background: #4EADE7;
+        color: $white;
+      }
+
+      i:hover {
+        background: #4EADE7;
+      }
+
+      i {
+        font-size: 10px;
+      }
+    }
+
+
     input[type="number"]::-webkit-inner-spin-button {
       -webkit-appearance: none;
       -moz-appearance: none;
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index 27a2326b8..d4549f4cd 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -205,7 +205,7 @@ describe('AdvancedTabContent Component', function () {
     })
 
     it('should render an input, but not a GWEI symbol', () => {
-      assert.equal(gasInput.children().length, 1)
+      assert.equal(gasInput.children().length, 2)
       assert(gasInput.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
     })
 
@@ -220,6 +220,27 @@ describe('AdvancedTabContent Component', function () {
       const inputOnChange = gasInput.find('input').props().onChange
       assert.equal(inputOnChange({ target: { value: 8} }), 15)
     })
+
+    it('should have two input arrows', () => {
+      const upArrow = gasInput.find('.fa-angle-up')
+      assert.equal(upArrow.length, 1)
+      const downArrow = gasInput.find('.fa-angle-down')
+      assert.equal(downArrow.length, 1)
+    })
+
+    it('should call onChange with the value incremented decremented when its onchange method is called', () => {
+      gasInput = shallow(wrapper.instance().gasInput(
+        321,
+        value => value + 7,
+        0,
+        8,
+        false
+      ))
+      const upArrow = gasInput.find('.fa-angle-up')
+      assert.equal(upArrow.props().onClick(), 329)
+      const downArrow = gasInput.find('.fa-angle-down')
+      assert.equal(downArrow.props().onClick(), 327)
+    })
   })
 
 })
-- 
cgit 


From e3f015c88f30fb4243ebbb3d2f109be8f3d68196 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Fri, 26 Oct 2018 03:20:36 -0230
Subject: Adds speed up slide-in gas customization sidebar

---
 .../advanced-tab-content.component.js              | 25 ++++++++++++++++------
 .../advanced-tab-content/index.scss                | 12 +++++++++++
 .../tests/advanced-tab-content-component.test.js   | 18 ++++++++++------
 3 files changed, 41 insertions(+), 14 deletions(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index b9ae93684..23945483d 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import GasPriceChart from '../../gas-price-chart'
 
 export default class AdvancedTabContent extends Component {
@@ -16,23 +17,31 @@ export default class AdvancedTabContent extends Component {
     totalFee: PropTypes.string,
     timeRemaining: PropTypes.string,
     gasChartProps: PropTypes.object,
+    insufficientBalance: PropTypes.bool,
   }
 
-  gasInput (value, onChange, min, precision, showGWEI) {
+  gasInput (value, onChange, min, insufficientBalance, precision, showGWEI) {
     return (
       <div className="advanced-tab__gas-edit-row__input-wrapper">
         <input
-          className="advanced-tab__gas-edit-row__input"
+          className={classnames('advanced-tab__gas-edit-row__input', {
+            'advanced-tab__gas-edit-row__input--error': insufficientBalance,
+          })}
           type="number"
           value={value}
           min={min}
           precision={precision}
           onChange={event => onChange(Number(event.target.value))}
         />
-        <div className="advanced-tab__gas-edit-row__input-arrows">
+        <div className={classnames('advanced-tab__gas-edit-row__input-arrows', {
+          'advanced-tab__gas-edit-row__input-arrows--error': insufficientBalance,
+        })}>
           <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-up" onClick={() => onChange(value + 1)} /></div>
           <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-down" onClick={() => onChange(value - 1)} /></div>
         </div>
+        {insufficientBalance && <div className="advanced-tab__gas-edit-row__insufficient-balance">
+          Insufficient Balance
+        </div>}
       </div>
     )
   }
@@ -70,11 +79,11 @@ export default class AdvancedTabContent extends Component {
     )
   }
 
-  renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) {
+  renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit, insufficientBalance) {
     return (
       <div className="advanced-tab__gas-edit-rows">
-        { this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, 9, true) }
-        { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, customGasLimit, 0) }
+        { this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, insufficientBalance, 9, true) }
+        { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, customGasLimit, insufficientBalance, 0) }
       </div>
     )
   }
@@ -86,6 +95,7 @@ export default class AdvancedTabContent extends Component {
       timeRemaining,
       customGasPrice,
       customGasLimit,
+      insufficientBalance,
       totalFee,
       gasChartProps,
     } = this.props
@@ -98,7 +108,8 @@ export default class AdvancedTabContent extends Component {
               customGasPrice,
               updateCustomGasPrice,
               customGasLimit,
-              updateCustomGasLimit
+              updateCustomGasLimit,
+              insufficientBalance
           ) }
           <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div>
           <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} />
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
index 69bb65f2f..b62919c0a 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -102,6 +102,11 @@
       }
     }
 
+    &__insufficient-balance {
+      font-size: 12px;
+      color: red;
+    }
+
 
     &__input-wrapper {
       position: relative;
@@ -119,6 +124,10 @@
       margin-top: 7px;
     }
 
+    &__input--error {
+       border: 1px solid $red;
+    }
+
     &__input-arrows {
       position: absolute;
       top: 7px;
@@ -155,6 +164,9 @@
       }
     }
 
+    &__input-arrows--error {
+      border: 1px solid $red;
+    }
 
     input[type="number"]::-webkit-inner-spin-button {
       -webkit-appearance: none;
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index d4549f4cd..0c25874bb 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -27,6 +27,7 @@ describe('AdvancedTabContent Component', function () {
       customGasLimit={23456}
       timeRemaining={21500}
       totalFee={'$0.25'}
+      insufficientBalance={false}
     />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
   })
 
@@ -63,11 +64,13 @@ describe('AdvancedTabContent Component', function () {
       assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
       const renderDataSummaryArgs = AdvancedTabContent.prototype.renderDataSummary.getCall(0).args
       assert.deepEqual(renderDataSummaryArgs, ['$0.25', 21500])
+    })
 
+    it('should call renderGasEditRows with the expected params', () => {
       assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
       const renderGasEditRowArgs = AdvancedTabContent.prototype.renderGasEditRows.getCall(0).args
       assert.deepEqual(renderGasEditRowArgs, [
-        11, propsMethodSpies.updateCustomGasPrice, 23456, propsMethodSpies.updateCustomGasLimit,
+        11, propsMethodSpies.updateCustomGasPrice, 23456, propsMethodSpies.updateCustomGasLimit, false,
       ])
     })
   })
@@ -142,7 +145,8 @@ describe('AdvancedTabContent Component', function () {
         'mockGasPrice',
         () => 'mockUpdateCustomGasPriceReturn',
         'mockGasLimit',
-        () => 'mockUpdateCustomGasLimitReturn'
+        () => 'mockUpdateCustomGasLimitReturn',
+        false
       ))
     })
 
@@ -161,10 +165,10 @@ describe('AdvancedTabContent Component', function () {
       const renderGasEditRowSpyArgs = AdvancedTabContent.prototype.renderGasEditRow.args
       assert.equal(renderGasEditRowSpyArgs.length, 2)
       assert.deepEqual(renderGasEditRowSpyArgs[0].map(String), [
-        'gasPrice', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', 9, true,
+        'gasPrice', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', false, 9, true,
       ].map(String))
       assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [
-        'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 'mockGasLimit', 0,
+        'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 'mockGasLimit', false, 0,
       ].map(String))
     })
   })
@@ -195,8 +199,8 @@ describe('AdvancedTabContent Component', function () {
         321,
         value => value + 7,
         0,
-        8,
-        false
+        false,
+        8
       ))
     })
 
@@ -204,7 +208,7 @@ describe('AdvancedTabContent Component', function () {
       assert(gasInput.hasClass('advanced-tab__gas-edit-row__input-wrapper'))
     })
 
-    it('should render an input, but not a GWEI symbol', () => {
+    it('should render two children, including an input', () => {
       assert.equal(gasInput.children().length, 2)
       assert(gasInput.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
     })
-- 
cgit 


From 7ffea926f23b2542c5182df7958defcdd9398b04 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Tue, 13 Nov 2018 13:32:04 -0330
Subject: Add loading spinners when waiting for APIs in the gas customization
 modal

---
 .../advanced-tab-content.component.js                   |  8 +++++++-
 .../tests/advanced-tab-content-component.test.js        | 17 +++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index 23945483d..ac68b833c 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import Loading from '../../../loading-screen'
 import GasPriceChart from '../../gas-price-chart'
 
 export default class AdvancedTabContent extends Component {
@@ -13,6 +14,7 @@ export default class AdvancedTabContent extends Component {
     updateCustomGasLimit: PropTypes.func,
     customGasPrice: PropTypes.number,
     customGasLimit: PropTypes.number,
+    gasEstimatesLoading: PropTypes.bool,
     millisecondsRemaining: PropTypes.number,
     totalFee: PropTypes.string,
     timeRemaining: PropTypes.string,
@@ -98,6 +100,7 @@ export default class AdvancedTabContent extends Component {
       insufficientBalance,
       totalFee,
       gasChartProps,
+      gasEstimatesLoading,
     } = this.props
 
     return (
@@ -112,7 +115,10 @@ export default class AdvancedTabContent extends Component {
               insufficientBalance
           ) }
           <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div>
-          <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} />
+          {!gasEstimatesLoading
+            ? <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} />
+            : <Loading />
+          }
           <div className="advanced-tab__fee-chart__speed-buttons">
             <span>Slower</span>
             <span>Faster</span>
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index 0c25874bb..f321ca696 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -5,6 +5,7 @@ import sinon from 'sinon'
 import AdvancedTabContent from '../advanced-tab-content.component.js'
 
 import GasPriceChart from '../../../gas-price-chart'
+import Loading from '../../../../loading-screen'
 
 const propsMethodSpies = {
   updateCustomGasPrice: sinon.spy(),
@@ -60,6 +61,22 @@ describe('AdvancedTabContent Component', function () {
       assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
     })
 
+    it('should render a loading component instead of the chart if gasEstimatesLoading is true', () => {
+      wrapper.setProps({ gasEstimatesLoading: true })
+      const advancedTabChildren = wrapper.children()
+      assert.equal(advancedTabChildren.length, 2)
+
+      assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary'))
+      assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart'))
+
+      const feeChartDiv = advancedTabChildren.at(1)
+
+      assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
+      assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title'))
+      assert(feeChartDiv.childAt(2).is(Loading))
+      assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
+    })
+
     it('should call renderDataSummary with the expected params', () => {
       assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
       const renderDataSummaryArgs = AdvancedTabContent.prototype.renderDataSummary.getCall(0).args
-- 
cgit 


From d8e41a6aa5a4c64538063c6dde7afdf77b0e5793 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Tue, 27 Nov 2018 14:00:41 -0330
Subject: Final gas customization fixes

---
 .../advanced-tab-content.component.js              | 26 +++++++++++++++++-----
 .../advanced-tab-content/index.scss                |  1 +
 .../tests/advanced-tab-content-component.test.js   | 16 ++++++++-----
 3 files changed, 32 insertions(+), 11 deletions(-)

(limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index ac68b833c..ba738ff75 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Loading from '../../../loading-screen'
 import GasPriceChart from '../../gas-price-chart'
+import debounce from 'lodash.debounce'
 
 export default class AdvancedTabContent extends Component {
   static contextTypes = {
@@ -22,7 +23,21 @@ export default class AdvancedTabContent extends Component {
     insufficientBalance: PropTypes.bool,
   }
 
-  gasInput (value, onChange, min, insufficientBalance, precision, showGWEI) {
+  constructor (props) {
+    super(props)
+
+    this.debouncedGasLimitReset = debounce((dVal) => {
+      if (dVal < 21000) {
+        props.updateCustomGasLimit(21000)
+      }
+    }, 1000, { trailing: true })
+    this.onChangeGasLimit = (val) => {
+      props.updateCustomGasLimit(val)
+      this.debouncedGasLimitReset(val)
+    }
+  }
+
+  gasInput (value, onChange, min, insufficientBalance, showGWEI) {
     return (
       <div className="advanced-tab__gas-edit-row__input-wrapper">
         <input
@@ -32,14 +47,13 @@ export default class AdvancedTabContent extends Component {
           type="number"
           value={value}
           min={min}
-          precision={precision}
           onChange={event => onChange(Number(event.target.value))}
         />
         <div className={classnames('advanced-tab__gas-edit-row__input-arrows', {
           'advanced-tab__gas-edit-row__input-arrows--error': insufficientBalance,
         })}>
-          <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-up" onClick={() => onChange(value + 1)} /></div>
-          <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-down" onClick={() => onChange(value - 1)} /></div>
+          <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap" onClick={() => onChange(value + 1)}><i className="fa fa-sm fa-angle-up" /></div>
+          <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap" onClick={() => onChange(value - 1)}><i className="fa fa-sm fa-angle-down" /></div>
         </div>
         {insufficientBalance && <div className="advanced-tab__gas-edit-row__insufficient-balance">
           Insufficient Balance
@@ -84,8 +98,8 @@ export default class AdvancedTabContent extends Component {
   renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit, insufficientBalance) {
     return (
       <div className="advanced-tab__gas-edit-rows">
-        { this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, insufficientBalance, 9, true) }
-        { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, customGasLimit, insufficientBalance, 0) }
+        { this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, insufficientBalance, true) }
+        { this.renderGasEditRow('gasLimit', customGasLimit, this.onChangeGasLimit, customGasLimit, insufficientBalance) }
       </div>
     )
   }
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
index b62919c0a..88c69faf4 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -148,6 +148,7 @@
         height: 100%;
         display: flex;
         justify-content: center;
+        cursor: pointer;
       }
 
       &__i-wrap:hover {
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index f321ca696..d6920454d 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -155,8 +155,11 @@ describe('AdvancedTabContent Component', function () {
 
   describe('renderGasEditRows()', () => {
     let gasEditRows
+    let tempOnChangeGasLimit
 
     beforeEach(() => {
+      tempOnChangeGasLimit = wrapper.instance().onChangeGasLimit
+      wrapper.instance().onChangeGasLimit = () => 'mockOnChangeGasLimit'
       AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
       gasEditRows = shallow(wrapper.instance().renderGasEditRows(
         'mockGasPrice',
@@ -167,6 +170,10 @@ describe('AdvancedTabContent Component', function () {
       ))
     })
 
+    afterEach(() => {
+      wrapper.instance().onChangeGasLimit = tempOnChangeGasLimit
+    })
+
     it('should render the gas-edit-rows root node', () => {
       assert(gasEditRows.hasClass('advanced-tab__gas-edit-rows'))
     })
@@ -182,10 +189,10 @@ describe('AdvancedTabContent Component', function () {
       const renderGasEditRowSpyArgs = AdvancedTabContent.prototype.renderGasEditRow.args
       assert.equal(renderGasEditRowSpyArgs.length, 2)
       assert.deepEqual(renderGasEditRowSpyArgs[0].map(String), [
-        'gasPrice', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', false, 9, true,
+        'gasPrice', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', false, true,
       ].map(String))
       assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [
-        'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 'mockGasLimit', false, 0,
+        'gasLimit', 'mockGasLimit', () => 'mockOnChangeGasLimit', 'mockGasLimit', false,
       ].map(String))
     })
   })
@@ -234,7 +241,6 @@ describe('AdvancedTabContent Component', function () {
       const inputProps = gasInput.find('input').props()
       assert.equal(inputProps.min, 0)
       assert.equal(inputProps.value, 321)
-      assert.equal(inputProps.precision, 8)
     })
 
     it('should call the passed onChange method with the value of the input onChange event', () => {
@@ -257,9 +263,9 @@ describe('AdvancedTabContent Component', function () {
         8,
         false
       ))
-      const upArrow = gasInput.find('.fa-angle-up')
+      const upArrow = gasInput.find('.advanced-tab__gas-edit-row__input-arrows__i-wrap').at(0)
       assert.equal(upArrow.props().onClick(), 329)
-      const downArrow = gasInput.find('.fa-angle-down')
+      const downArrow = gasInput.find('.advanced-tab__gas-edit-row__input-arrows__i-wrap').at(1)
       assert.equal(downArrow.props().onClick(), 327)
     })
   })
-- 
cgit