1 files changed, 16 insertions, 5 deletions
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>
     )
   }