Extend modal implementation and state management to accomodate multiple modal types

1 files changed, 14 insertions, 2 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,
   )
 }