Adds speed up slide-in gas customization sidebar

4 files changed, 67 insertions, 5 deletions

diff --git a/ui/app/components/sidebars/index.scss b/ui/app/components/sidebars/index.scss
index 5ab0664df..6fcd93e99 100644
--- a/ui/app/components/sidebars/index.scss
+++ b/ui/app/components/sidebars/index.scss
@@ -1,3 +1,5 @@
+@import './sidebar-content';
+
 .sidebar-right-enter {
   transition: transform 300ms ease-in-out;
   transform: translateX(-100%);
diff --git a/ui/app/components/sidebars/sidebar-content.scss b/ui/app/components/sidebars/sidebar-content.scss
new file mode 100644
index 000000000..c0973be2c
--- /dev/null
+++ b/ui/app/components/sidebars/sidebar-content.scss
@@ -0,0 +1,40 @@
+.sidebar-left {
+  .gas-modal-page-container {
+    .page-container {
+      max-width: 100%;
+    }
+
+    .gas-price-chart {
+      margin-left: 10px;
+    }
+
+    .page-container__bottom {
+      display: flex;
+      flex-direction: column;
+      flex-flow: space-between;
+      height: 100%;
+    }
+
+    .page-container__content {
+      overflow-y: inherit;
+    }
+
+    .basic-tab-content {
+      height: 377px;
+      margin-bottom: 0px;
+      border-bottom: 1px solid #d2d8dd;
+    }
+
+    .advanced-tab__fee-chart {
+      height: 320px;
+    }
+
+    .advanced-tab__fee-chart__speed-buttons {
+      bottom: 77px;
+    }
+
+    .gas-modal-content__info-row {
+      height: 170px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/sidebars/sidebar.component.js b/ui/app/components/sidebars/sidebar.component.js
index 57cdd7111..f68515ad6 100644
--- a/ui/app/components/sidebars/sidebar.component.js
+++ b/ui/app/components/sidebars/sidebar.component.js
@@ -3,14 +3,17 @@ import PropTypes from 'prop-types'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 import WalletView from '../wallet-view'
 import { WALLET_VIEW_SIDEBAR } from './sidebar.constants'
+import CustomizeGas from '../gas-customization/gas-modal-page-container/'
 
 export default class Sidebar extends Component {
 
   static propTypes = {
     sidebarOpen: PropTypes.bool,
     hideSidebar: PropTypes.func,
+    sidebarShouldClose: PropTypes.bool,
     transitionName: PropTypes.string,
     type: PropTypes.string,
+    sidebarProps: PropTypes.object,
   };
 
   renderOverlay () {
@@ -18,19 +21,27 @@ export default class Sidebar extends Component {
   }
 
   renderSidebarContent () {
-    const { type } = this.props
-
+    const { type, sidebarProps = {} } = this.props
+    const { transaction = {} } = sidebarProps
     switch (type) {
       case WALLET_VIEW_SIDEBAR:
         return <WalletView responsiveDisplayClassname={'sidebar-right' } />
+      case 'customize-gas':
+        return <div className={'sidebar-left'}><CustomizeGas transaction={transaction} /></div>
       default:
         return null
     }
 
   }
 
+  componentDidUpdate (prevProps) {
+    if (!prevProps.sidebarShouldClose && this.props.sidebarShouldClose) {
+      this.props.hideSidebar()
+    }
+  }
+
   render () {
-    const { transitionName, sidebarOpen } = this.props
+    const { transitionName, sidebarOpen, sidebarShouldClose } = this.props
 
     return (
       <div>
@@ -39,9 +50,9 @@ export default class Sidebar extends Component {
           transitionEnterTimeout={300}
           transitionLeaveTimeout={200}
         >
-          { sidebarOpen ? this.renderSidebarContent() : null }
+          { sidebarOpen && !sidebarShouldClose ? this.renderSidebarContent() : null }
         </ReactCSSTransitionGroup>
-        { sidebarOpen ? this.renderOverlay() : null }
+        { sidebarOpen && !sidebarShouldClose ? this.renderOverlay() : null }
       </div>
     )
   }
diff --git a/ui/app/components/sidebars/tests/sidebars-component.test.js b/ui/app/components/sidebars/tests/sidebars-component.test.js
index e2d77518a..cee22aca8 100644
--- a/ui/app/components/sidebars/tests/sidebars-component.test.js
+++ b/ui/app/components/sidebars/tests/sidebars-component.test.js
@@ -6,6 +6,7 @@ import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 import Sidebar from '../sidebar.component.js'
 
 import WalletView from '../../wallet-view'
+import CustomizeGas from '../../gas-customization/gas-modal-page-container/'
 
 const propsMethodSpies = {
   hideSidebar: sinon.spy(),
@@ -59,6 +60,14 @@ describe('Sidebar Component', function () {
       assert.equal(renderSidebarContent.props.responsiveDisplayClassname, 'sidebar-right')
     })
 
+    it('should render sidebar content with the correct props', () => {
+      wrapper.setProps({ type: 'customize-gas' })
+      renderSidebarContent = wrapper.instance().renderSidebarContent()
+      const renderedSidebarContent = shallow(renderSidebarContent)
+      assert(renderedSidebarContent.hasClass('sidebar-left'))
+      assert(renderedSidebarContent.childAt(0).is(CustomizeGas))
+    })
+
     it('should not render with an unrecognized type', () => {
       wrapper.setProps({ type: 'foobar' })
       renderSidebarContent = wrapper.instance().renderSidebarContent()