Extend modal implementation and state management to accomodate multiple modal types

2 files changed, 18 insertions, 4 deletions

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 006e009b3..45aa09095 100644
--- a/ui/app/components/modals/modal.js
+++ b/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,
   )
 }
 
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 0d1f3fc31..265893104 100644
--- a/ui/app/components/tx-view.js
+++ b/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'),