Integrate slideout menu with tx view

4 files changed, 46 insertions, 16 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 0083543b4..d3d6c165e 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -8,6 +8,8 @@ var actions = {
   // sidebar state
   SIDEBAR_OPEN: 'UI_SIDEBAR_OPEN',
   SIDEBAR_CLOSE: 'UI_SIDEBAR_CLOSE',
+  showSidebar: showSidebar,
+  hideSidebar: hideSidebar,
   // menu state
   getNetworkStatus: 'getNetworkStatus',
   // transition state
@@ -763,6 +765,19 @@ function useEtherscanProvider () {
   }
 }
 
+function showSidebar () {
+  return {
+    type: actions.SIDEBAR_OPEN,
+  }
+}
+
+function hideSidebar () {
+  return {
+    type: actions.SIDEBAR_CLOSE,
+  }
+}
+
+
 function showLoadingIndication (message) {
   return {
     type: actions.SHOW_LOADING,
diff --git a/ui/app/app.js b/ui/app/app.js
index 021ef5f27..2a07b57d3 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -39,6 +39,7 @@ function App () { Component.call(this) }
 function mapStateToProps (state) {
   return {
     // state from plugin
+    sidebarOpen: state.appState.sidebarOpen,
     isLoading: state.appState.isLoading,
     loadingMessage: state.appState.loadingMessage,
     noActiveNotices: state.metamask.noActiveNotices,
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index c5c6484cc..b72abb084 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -2,17 +2,29 @@ const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const actions = require('../actions')
+// slideout menu
+const SlideoutMenu = require('react-burger-menu').slide
+const WalletView = require('./wallet-view')
+
 // const Identicon = require('./identicon')
 // const AccountDropdowns = require('./account-dropdowns').AccountDropdowns
 // const Content = require('./wallet-content-display')
 
-module.exports = connect()(TxView)
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
+
+function mapStateToProps (state) {
+  return {
+    sidebarOpen: state.appState.sidebarOpen,
+  }
+}
 
-// function mapStateToProps (state) {
-//   return {
-//     network: state.metamask.network,
-//   }
-// }
+function mapDispatchToProps (dispatch) {
+  return {
+    showSidebar: () => {dispatch(actions.showSidebar())},
+    hideSidebar: () => {dispatch(actions.hideSidebar())},
+  }
+}
 
 const contentDivider = h('div', {
   style: {
@@ -40,9 +52,19 @@ TxView.prototype.render = function () {
       background: '#FFFFFF',
     }
   }, [
+    // slideout - move to separate render func
+    h(SlideoutMenu, {
+      isOpen: this.props.sidebarOpen,
+    }, [
+      h(WalletView, {
+        responsiveDisplayClassname: '.phone-visible'
+      }),
+    ]),
 
     h('div.phone-visible.fa.fa-bars', {
-
+      onClick: () => {
+        this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
+      }
     }, []),
 
     h('div.flex-row', {
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
index fb768c386..870b3e7f0 100644
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@@ -1,8 +1,8 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const WalletView = require('./components/wallet-view')
 const TxView = require('./components/tx-view')
+const WalletView = require('./components/wallet-view')
 const SlideoutMenu = require('react-burger-menu').slide
 
 module.exports = MainContainer
@@ -29,14 +29,6 @@ MainContainer.prototype.render = function () {
     }
   }, [
 
-    h(SlideoutMenu, {
-      isOpen: true,
-    }, [
-      h(WalletView, {
-        responsiveDisplayClassname: '.phone-visible'
-      }),
-    ]),
-
     h(WalletView, {
       style: {
       },