Extend modal implementation and state management to accomodate multiple modal types

ui/app/actions.js

@@ -791,15 +791,17 @@ function hideNetworkDropdown () {
 }
 
 
-function showModal () {
+function showModal (payload) {
   return {
     type: actions.MODAL_OPEN,
+    payload,
   }
 }
 
-function hideModal () {
+function hideModal (payload) {
   return {
     type: actions.MODAL_CLOSE,
+    payload,
   }
 }
 

ui/app/app.js

@@ -36,7 +36,7 @@ const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const NetworkDropdown = require('./components/dropdowns/network-dropdown')
 
 // Global Modals
-const BuyModal = require('./components/modals/index').BuyModal
+const Modal = require('./components/modals/index').Modal
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(App)
 
@@ -107,7 +107,7 @@ App.prototype.render = function () {
     }, [
 
       // global modal
-      h(BuyModal, {}, []),
+      h(Modal, {}, []),
 
       // app bar
       this.renderAppBar(),

ui/app/components/modals/modal.js

@@ -6,10 +6,20 @@ const FadeModal = require('boron').FadeModal
 const actions = require('../../actions')
 const isMobileView = require('../../../lib/is-mobile-view')
 const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
+const BuyOptions = require('../buy-options')
+
+const MODALS = {
+  BUY: [
+    h(BuyOptions, {}, []),
+  ],
+  EDIT_ACCOUNT_NAME: [],
+  ACCOUNT_DETAILS: [],
+}
 
 function mapStateToProps (state) {
   return {
-    active: state.appState.modalOpen
+    active: state.appState.modal.open,
+    modalState: state.appState.modal.modalState,
   }
 }
 
@@ -48,6 +58,8 @@ const backdropStyles = {
 
 Modal.prototype.render = function () {
 
+  const children = MODALS[this.props.modalState.name] || []
+
   return h(FadeModal,
     {
       className: 'modal',
@@ -59,7 +71,7 @@ Modal.prototype.render = function () {
       modalStyle: isMobileView() ? mobileModalStyles : laptopModalStyles,
       backdropStyle: backdropStyles,
     },
-    this.props.children,
+    children,
   )
 }
 

ui/app/components/tx-view.js

@@ -35,7 +35,7 @@ function mapDispatchToProps (dispatch) {
   return {
     showSidebar: () => { dispatch(actions.showSidebar()) },
     hideSidebar: () => { dispatch(actions.hideSidebar()) },
-    showModal: () => { dispatch(actions.showModal()) },
+    showModal: (payload) => { dispatch(actions.showModal(payload)) },
   }
 }
 
@@ -104,7 +104,9 @@ TxView.prototype.render = function () {
             textAlign: 'center',
           },
           onClick: () => {
-            this.props.showModal()
+            this.props.showModal({
+              name: 'BUY',
+            })
           },
         }, 'BUY'),
 

ui/app/reducers/app.js

@@ -36,7 +36,12 @@ function reduceApp (state, action) {
   var appState = extend({
     shouldClose: false,
     menuOpen: false,
-    modalOpen: false,
+    modal: {
+      open: false,
+      modalState: {
+        name: null,
+      },
+    },
     sidebarOpen: false,
     networkDropdownOpen: false,
     currentView: seedWords ? seedConfView : defaultView,
@@ -77,12 +82,20 @@ function reduceApp (state, action) {
     // modal methods:
     case actions.MODAL_OPEN:
       return extend(appState, {
-        modalOpen: true,
+        modal: Object.assign(
+          state.appState.modal,
+          { open: true },
+          { modalState: action.payload },
+        ),
       })
 
     case actions.MODAL_CLOSE:
       return extend(appState, {
-        modalOpen: false,
+        modal: Object.assign(
+          state.appState.modal,
+          { open: false },
+          { modalState: action.payload || state.appState.modal.modalState },
+        ),
       })
 
     // transition methods