From e4c61a5fab8c421922afd1784c1bb1c870da1a05 Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Wed, 15 Mar 2017 13:40:18 +0100
Subject: [PATCH] Add Vaults logic to First Run (#4894) (#4914)

---
 js/src/modals/FirstRun/Welcome/welcome.js |  4 +-
 js/src/ui/Portal/portal.js                |  7 +++-
 js/src/views/Application/store.js         | 45 ++++++++++++++++++++---
 3 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/js/src/modals/FirstRun/Welcome/welcome.js b/js/src/modals/FirstRun/Welcome/welcome.js
index 629ec47bc..df438d112 100644
--- a/js/src/modals/FirstRun/Welcome/welcome.js
+++ b/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'
diff --git a/js/src/ui/Portal/portal.js b/js/src/ui/Portal/portal.js
index f4c64bf46..6b2d7f8b2 100644
--- a/js/src/ui/Portal/portal.js
+++ b/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);
   }
diff --git a/js/src/views/Application/store.js b/js/src/views/Application/store.js
index 4f3b3f451..8d2093d45 100644
--- a/js/src/views/Application/store.js
+++ b/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);