Adds mechanism for dialogs, adds backup ledger dialog

app/extensions/brave/locales/en-US/app.properties

@@ -259,3 +259,9 @@ preventMoreAlerts=Prevent this page from creating additional dialogs
 copied=Copied!
 connectionError=Server connection failed. Please make sure you are connected to the Internet.
 unknownError=Oops, something went wrong.
+
+modalBackupLedgerTitle=Backup ledger wallet
+modalBackupLedgerSubTitle=Your Brave wallet has received new founds.
+modalBackupLedgerSubTitle2=Would you like to backup your wallet now?
+modalBackupLedgerContent=If your computer malfunctions, or if you change computers, recovery keys are required to restore your Brave wallet. You can back up your wallet at any time through Brave Payments Advanced Options.
+modalBackupLedgerLater=Remind me

app/renderer/components/modals/backupLedger.js

@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+
+// components
+const ImmutableComponent = require('../../../../js/components/immutableComponent')
+const ModalOverlay = require('../../../../js/components/modalOverlay')
+const appActions = require('../../../../js/actions/appActions')
+
+class ModalBackupLedger extends ImmutableComponent {
+  modalHidden () {
+  }
+
+  closeModal () {
+    appActions.hideModal('ledgerBackup')
+  }
+
+  render () {
+    return <ModalOverlay
+      title='modalBackupLedgerTitle'
+      content={
+        <div>
+          <div data-l10n-id='modalBackupLedgerSubTitle' />
+          <div data-l10n-id='modalBackupLedgerSubTitle2' />
+          <div data-l10n-id='modalBackupLedgerContent' />
+        </div>
+      }
+      footer={
+        <div data-l10n-id='modalBackupLedgerLater' onClick={this.closeModal.bind(this)} />
+      }
+      onHide={this.modalHidden.bind(this)}
+    />
+  }
+}
+
+module.exports = ModalBackupLedger

app/renderer/components/modals/container.js

@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const ImmutableComponent = require('../../../../js/components/immutableComponent')
+const ModalBackupLedger = require('./backupLedger')
+
+class ModalsContainer extends ImmutableComponent {
+  render () {
+    console.log(this.props.modals)
+    return <div data-test-id='modals-container'>
+      {this.props.modals.map((modal) => {
+        const found = modals.find((item) => {
+          return item.id === modal.get('id')
+        })
+
+        if (found) {
+          const Slug = found.component
+          return <Slug />
+        }
+
+        return null
+      })}
+    </div>
+  }
+}
+
+module.exports = ModalsContainer
+
+const modals = [{
+  id: 'ledgerBackup',
+  component: ModalBackupLedger
+}]

docs/appActions.md

@@ -835,6 +835,26 @@ Update ledger publishers pinned percentages according to the new synopsis
 
 
 
+### showModal(id) 
+
+Shows a modal in the modals container
+
+**Parameters**
+
+**id**: `string`, modal id
+
+
+
+### hideModal(id) 
+
+Hide a modal from the modals container
+
+**Parameters**
+
+**id**: `string`, modal id
+
+
+
 
 * * *
 

docs/state.md

@@ -126,6 +126,11 @@ AppStore
   menu: {
     template: object // used on Windows and by our tests: template object with Menubar control
   },
+  modals: [{
+    closeOnClose: Array<string>, // modal id's that should be closed when this modal is closed
+    closeOnOpen: Array<string>|boolean, // modal id's that should be closed when this modal is opened, true to close all
+    id: string // modal id
+  }],
   notifications: [{
     buttons: [{
       className: string, // button class e.g. 'primary'. see notificationBar.less

js/actions/appActions.js

@@ -1023,6 +1023,28 @@ const appActions = {
       actionType: appConstants.APP_CHANGE_LEDGER_PINNED_PERCENTAGES,
       publishers
     })
+  },
+
+  /**
+   * Shows a modal in the modals container
+   * @param id {string} modal id
+   */
+  showModal: function (id) {
+    AppDispatcher.dispatch({
+      actionType: appConstants.APP_SHOW_MODAL,
+      id
+    })
+  },
+
+  /**
+   * Hide a modal from the modals container
+   * @param id {string} modal id
+   */
+  hideModal: function (id) {
+    AppDispatcher.dispatch({
+      actionType: appConstants.APP_HIDE_MODAL,
+      id
+    })
   }
 }
 

js/components/main.js

@@ -46,6 +46,7 @@ const LongPressButton = require('./longPressButton')
 const Menubar = require('../../app/renderer/components/menubar')
 const WindowCaptionButtons = require('../../app/renderer/components/windowCaptionButtons')
 const CheckDefaultBrowserDialog = require('../../app/renderer/components/checkDefaultBrowserDialog')
+const ModalsContainer = require('../../app/renderer/components/modals/container')
 
 // Constants
 const appConfig = require('../constants/appConfig')
@@ -366,6 +367,8 @@ class Main extends ImmutableComponent {
     this.registerWindowLevelShortcuts()
     this.registerCustomTitlebarHandlers()
 
+    appActions.showModal('ledgerBackup')
+
     ipc.on(messages.LEAVE_FULL_SCREEN, this.exitFullScreen.bind(this))
 
     ipc.on(messages.DEBUG_REACT_PROFILE, (e, args) => {
@@ -1250,6 +1253,11 @@ class Main extends ImmutableComponent {
             activeFrame={activeFrame} />
           : null
         }
+        {
+          this.props.appState.get('modals') && this.props.appState.get('modals').size
+            ? <ModalsContainer modals={this.props.appState.get('modals')} />
+            : null
+        }
         {
           showBookmarksToolbar
           ? <BookmarksToolbar

js/constants/appConstants.js

@@ -102,7 +102,9 @@ const appConstants = {
   APP_NAVIGATOR_HANDLER_REGISTERED: _,
   APP_NAVIGATOR_HANDLER_UNREGISTERED: _,
   APP_ENABLE_UNDEFINED_PUBLISHERS: _,
-  APP_CHANGE_LEDGER_PINNED_PERCENTAGES: _
+  APP_CHANGE_LEDGER_PINNED_PERCENTAGES: _,
+  APP_SHOW_MODAL: _,
+  APP_HIDE_MODAL: _
 }
 
 module.exports = mapValuesByKeys(appConstants)

js/stores/appStore.js

@@ -950,6 +950,17 @@ const handleAppAction = (action) => {
         appState = appState.set('siteSettings', newSiteSettings)
       })
       break
+    case appConstants.APP_SHOW_MODAL:
+      const foo = appState.get('modals') || Immutable.List()
+      appState = appState.set('modals', foo.push(Immutable.fromJS({
+        id: action.id
+      })))
+      break
+    case appConstants.APP_HIDE_MODAL:
+      appState = appState.set('modals', appState.get('modals').filterNot((modal) => {
+        return modal.get('id') === action.id
+      }))
+      break
     default:
   }