Add Vaults logic to First Run (#4894) (#4914)

js/src/modals/FirstRun/Welcome/welcome.js

@@ -49,7 +49,7 @@ export default class FirstRun extends Component {
             defaultMessage='As part of a new installation, the next few steps will guide you through the process of setting up you Parity instance and your associated accounts. Our aim is to make it as simple as possible and to get you up and running in record-time, so please bear with us. Once completed you will have -'
           />
         </p>
-        <p>
+        <div>
           <ul>
             <li>
               <FormattedMessage
@@ -70,7 +70,7 @@ export default class FirstRun extends Component {
               />
             </li>
           </ul>
-        </p>
+        </div>
         <p>
           <FormattedMessage
             id='firstRun.welcome.next'

js/src/ui/Portal/portal.js

@@ -18,6 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import ReactPortal from 'react-portal';
 import keycode from 'keycode';
+import { noop } from 'lodash';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 import { CloseIcon } from '~/ui/Icons';
@@ -29,7 +30,6 @@ import styles from './portal.css';
 
 export default class Portal extends Component {
   static propTypes = {
-    onClose: PropTypes.func.isRequired,
     open: PropTypes.bool.isRequired,
     activeStep: PropTypes.number,
     busy: PropTypes.bool,
@@ -45,11 +45,16 @@ export default class Portal extends Component {
     isChildModal: PropTypes.bool,
     isSmallModal: PropTypes.bool,
     onClick: PropTypes.func,
+    onClose: PropTypes.func,
     onKeyDown: PropTypes.func,
     steps: PropTypes.array,
     title: nodeOrStringProptype()
   };
 
+  static defaultProps = {
+    onClose: noop
+  };
+
   componentDidMount () {
     this.setBodyOverflow(this.props.open);
   }

js/src/views/Application/store.js

@@ -17,12 +17,20 @@
 import { action, observable } from 'mobx';
 import store from 'store';
 
+const OLD_LS_FIRST_RUN_KEY = 'showFirstRun';
+const LS_FIRST_RUN_KEY = '_parity::showFirstRun';
+
 export default class Store {
   @observable firstrunVisible = false;
 
   constructor (api) {
+    // Migrate the old key to the new one
+    this._migrateStore();
+
     this._api = api;
-    this.firstrunVisible = store.get('showFirstRun');
+    // Show the first run if it hasn't been shown before
+    // (thus an undefined value)
+    this.firstrunVisible = store.get(LS_FIRST_RUN_KEY) === undefined;
 
     this._checkAccounts();
   }
@@ -33,16 +41,41 @@ export default class Store {
 
   @action toggleFirstrun = (visible = false) => {
     this.firstrunVisible = visible;
-    store.set('showFirstRun', !!visible);
+
+    // There's no need to write to storage that the
+    // First Run should be visible
+    if (!visible) {
+      store.set(LS_FIRST_RUN_KEY, !!visible);
+    }
+  }
+
+  /**
+   * Migrate the old LocalStorage ket format
+   * to the new one
+   */
+  _migrateStore () {
+    const oldValue = store.get(OLD_LS_FIRST_RUN_KEY);
+    const newValue = store.get(LS_FIRST_RUN_KEY);
+
+    if (newValue === undefined && oldValue !== undefined) {
+      store.set(LS_FIRST_RUN_KEY, oldValue);
+      store.remove(OLD_LS_FIRST_RUN_KEY);
+    }
   }
 
   _checkAccounts () {
-    this._api.parity
-      .allAccountsInfo()
-      .then((info) => {
+    return Promise
+      .all([
+        this._api.parity.listVaults(),
+        this._api.parity.allAccountsInfo()
+      ])
+      .then(([ vaults, info ]) => {
         const accounts = Object.keys(info).filter((address) => info[address].uuid);
+        // Has accounts if any vaults or accounts
+        const hasAccounts = (accounts && accounts.length > 0) || (vaults && vaults.length > 0);
 
-        this.toggleFirstrun(this.firstrunVisible || !accounts || !accounts.length);
+        // Show First Run if no accounts and no vaults
+        this.toggleFirstrun(this.firstrunVisible || !hasAccounts);
       })
       .catch((error) => {
         console.error('checkAccounts', error);