From 6f90411346ead9bbbb8eea672ff7bc69884cfbe2 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaurymartiny@Amaurys-Air.parity>
Date: Thu, 21 Jun 2018 14:20:04 +0200
Subject: [PATCH 1/2] Make onboarding easier

---
 .../src/Accounts/AccountsList/AccountsList.js |  5 +++
 packages/light-react/src/App/App.js           | 14 +++----
 .../light-react/src/Onboarding/Onboarding.js  | 42 ++++++++++++-------
 packages/light-react/src/Tokens/Tokens.js     |  8 +++-
 .../src/assets/sass/shared/_form.scss         |  4 ++
 .../light-react/src/stores/onboardingStore.js | 28 +------------
 6 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/packages/light-react/src/Accounts/AccountsList/AccountsList.js b/packages/light-react/src/Accounts/AccountsList/AccountsList.js
index f3d42635..532135d6 100644
--- a/packages/light-react/src/Accounts/AccountsList/AccountsList.js
+++ b/packages/light-react/src/Accounts/AccountsList/AccountsList.js
@@ -8,6 +8,7 @@ import { AccountCard, Header } from 'light-ui';
 import { accountsInfo$, defaultAccount$ } from '@parity/light.js';
 import { inject, observer } from 'mobx-react';
 import light from 'light-hoc';
+import { Redirect } from 'react-router-dom';
 
 import Health from '../../Health';
 
@@ -64,6 +65,10 @@ class AccountsList extends Component {
   render () {
     const { accountsInfo } = this.props;
 
+    if (accountsInfo && !Object.keys(accountsInfo).length) {
+      return <Redirect to='/accounts/new' />;
+    }
+
     return (
       <div>
         <Header
diff --git a/packages/light-react/src/App/App.js b/packages/light-react/src/App/App.js
index e9c33fcd..86c5d507 100644
--- a/packages/light-react/src/App/App.js
+++ b/packages/light-react/src/App/App.js
@@ -51,22 +51,22 @@ class App extends Component {
    */
   renderScreen () {
     const {
-      onboardingStore: { isOnboarding },
+      onboardingStore: { isFirstRun },
       healthStore: {
         health: { status }
       }
     } = this.props;
 
+    if (isFirstRun) {
+      return <div className='window'><Onboarding /></div>;
+    }
+
     return (
       <div className='window'>
-        {/* If we are onboarding, then never show the Overlay. On the other hand, if
-            we're not onboarding, show the Overlay whenever we have an issue. */}
-        {!isOnboarding && status !== STATUS.GOOD && <Overlay />}
+        {status !== STATUS.GOOD && <Overlay />}
         <Switch>
-          {/* We redirect to Onboarding if necessary, or by default to our
-        homepage which is Tokens */}
+          {/* The next line is the hoempage */}
           <Redirect exact from='/' to='/tokens' />
-          {isOnboarding && <Redirect exact from='/tokens' to='/onboarding' />}
           <Route path='/accounts' component={Accounts} />
           <Route path='/onboarding' component={Onboarding} />
           <Route path='/send' component={Send} />
diff --git a/packages/light-react/src/Onboarding/Onboarding.js b/packages/light-react/src/Onboarding/Onboarding.js
index b5f74c8a..aa2edcc2 100644
--- a/packages/light-react/src/Onboarding/Onboarding.js
+++ b/packages/light-react/src/Onboarding/Onboarding.js
@@ -4,8 +4,8 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
+import { FormField, Header } from 'light-ui';
 import { inject, observer } from 'mobx-react';
-import { Link } from 'react-router-dom';
 
 import Health from '../Health';
 
@@ -15,24 +15,38 @@ class Onboarding extends Component {
   handleFirstRun = () => {
     // Not first run anymore after clicking Accept
     this.props.onboardingStore.setIsFirstRun(false);
-    this.props.history.push('/');
   };
 
   render () {
-    const {
-      onboardingStore: { hasAccounts }
-    } = this.props;
     return (
       <div>
-        This is the onboarding page.<br />
-        {hasAccounts ? (
-          <Link onClick={this.handleFirstRun} to='/'>
-            Accept terms of use
-          </Link>
-        ) : (
-          <Link to='/accounts/new'>Create account</Link>
-        )}
-        <Health />
+        <Header title={<h1>Terms of Use</h1>} />
+
+        <div className='window_content'>
+          <div className='box -padded'>
+            <FormField
+              input={
+                <textarea
+                  className='-xlg'
+                  defaultValue="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+                  readOnly
+                />
+              }
+              label="Please read carefully Fether Wallet's Terms of Use"
+            />
+          </div>
+        </div>
+
+        <nav className='footer-nav'>
+          <div className='footer-nav_status'>
+            <Health />
+          </div>
+          <div className='footer-nav_icons'>
+            <button className='button' onClick={this.handleFirstRun}>
+              Accept
+            </button>
+          </div>
+        </nav>
       </div>
     );
   }
diff --git a/packages/light-react/src/Tokens/Tokens.js b/packages/light-react/src/Tokens/Tokens.js
index 52ff2bce..1e848df9 100644
--- a/packages/light-react/src/Tokens/Tokens.js
+++ b/packages/light-react/src/Tokens/Tokens.js
@@ -7,7 +7,7 @@ import React, { PureComponent } from 'react';
 import { AccountHeader } from 'light-ui';
 import { accountsInfo$, defaultAccount$ } from '@parity/light.js';
 import light from 'light-hoc';
-import { Link } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 
 import Health from '../Health';
 import TokensList from './TokensList';
@@ -24,6 +24,12 @@ class Tokens extends PureComponent {
       location: { state }
     } = this.props;
 
+    // If the accountsInfo object is empty (i.e. no accounts), then we redirect
+    // to the accounts page to create an account
+    if (accountsInfo && !Object.keys(accountsInfo).length) {
+      return <Redirect to='/accounts' />;
+    }
+
     // The address is defaultAccount, but if we are coming from the accounts
     // page, then the address is also put inside the route state, for faster
     // access.
diff --git a/packages/light-react/src/assets/sass/shared/_form.scss b/packages/light-react/src/assets/sass/shared/_form.scss
index 5980bbd9..2b9ca8dd 100644
--- a/packages/light-react/src/assets/sass/shared/_form.scss
+++ b/packages/light-react/src/assets/sass/shared/_form.scss
@@ -91,6 +91,10 @@
     &.-lg {
       height: 8rem;
     }
+
+    &.-xlg {
+      height: 12rem;
+    }
   }
 }
 
diff --git a/packages/light-react/src/stores/onboardingStore.js b/packages/light-react/src/stores/onboardingStore.js
index fc878ecd..b2c1799a 100644
--- a/packages/light-react/src/stores/onboardingStore.js
+++ b/packages/light-react/src/stores/onboardingStore.js
@@ -3,9 +3,7 @@
 //
 // SPDX-License-Identifier: MIT
 
-import { accountsInfo$ } from '@parity/light.js';
-import { action, computed, observable } from 'mobx';
-import { map } from 'rxjs/operators';
+import { action, observable } from 'mobx';
 import store from 'store';
 
 import LS_PREFIX from './utils/lsPrefix';
@@ -13,7 +11,6 @@ import LS_PREFIX from './utils/lsPrefix';
 const LS_KEY = `${LS_PREFIX}::firstRun`;
 
 class OnboardingStore {
-  @observable hasAccounts; // If the user has at least 1 account or not
   @observable isFirstRun; // If it's the 1st time the user is running the app
 
   constructor () {
@@ -25,31 +22,8 @@ class OnboardingStore {
     } else {
       this.setIsFirstRun(isFirstRun);
     }
-
-    accountsInfo$()
-      .pipe(map(accounts => Object.keys(accounts).length > 0))
-      .subscribe(this.setHasAccounts);
-  }
-
-  /**
-   * We show the onboarding process if:
-   * - either it's the 1st time the user runs this app
-   * - or the user has 0 account
-   */
-  @computed
-  get isOnboarding () {
-    // If either of the two is undefined, then it means we're still fetching.
-    // This doesn't count as onboarding.
-    return this.hasAccounts === undefined || this.isFirstRun === undefined
-      ? false
-      : !this.hasAccounts || this.isFirstRun;
   }
 
-  @action
-  setHasAccounts = hasAccounts => {
-    this.hasAccounts = hasAccounts;
-  };
-
   @action
   setIsFirstRun = isFirstRun => {
     this.isFirstRun = isFirstRun;
-- 
GitLab


From 48c980d042ccccba2ba374ee949d89c05580fe6c Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaurymartiny@Amaurys-Air.parity>
Date: Thu, 21 Jun 2018 14:42:56 +0200
Subject: [PATCH 2/2] Hide button whe not needed

---
 .../src/Accounts/CreateAccount/CreateAccount.js  | 16 +++++++++++++---
 .../light-react/src/stores/createAccountStore.js |  2 +-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js b/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js
index eedb29a7..4995e1f4 100644
--- a/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js
+++ b/packages/light-react/src/Accounts/CreateAccount/CreateAccount.js
@@ -4,8 +4,10 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
+import { accountsInfo$ } from '@parity/light.js';
 import { Header } from 'light-ui';
 import { inject, observer } from 'mobx-react';
+import light from 'light-hoc';
 import memoize from 'lodash/memoize';
 import { Route } from 'react-router-dom';
 
@@ -15,6 +17,7 @@ import AccountName from './AccountName';
 import AccountPassword from './AccountPassword';
 import AccountWritePhrase from './AccountWritePhrase';
 
+@light({ accountsInfo: accountsInfo$ })
 @inject('createAccountStore')
 @observer
 class CreateAccount extends Component {
@@ -54,6 +57,7 @@ class CreateAccount extends Component {
 
   render () {
     const {
+      accountsInfo,
       createAccountStore: { isImport },
       match: {
         params: { step } // Current step in account creation process
@@ -67,9 +71,15 @@ class CreateAccount extends Component {
       <div>
         <Header
           left={
-            <a className='icon -back' onClick={this.handleGoBack}>
-              Back
-            </a>
+            // Show back button if:
+            // - we already have some accounts, so we can go back to AccountsList
+            // - or the step is >1
+            (step > 1 ||
+              (accountsInfo && Object.keys(accountsInfo).length > 0)) && (
+              <a className='icon -back' onClick={this.handleGoBack}>
+                Back
+              </a>
+            )
           }
           title={
             <h1>{isImport ? 'Import account' : 'Create a new account'}</h1>
diff --git a/packages/light-react/src/stores/createAccountStore.js b/packages/light-react/src/stores/createAccountStore.js
index 47e6898a..1ea1fd96 100644
--- a/packages/light-react/src/stores/createAccountStore.js
+++ b/packages/light-react/src/stores/createAccountStore.js
@@ -34,7 +34,7 @@ class CreateAccountStore {
   saveAccountToParity = () => {
     return this.api.parity
       .newAccountFromPhrase(this.phrase, this.password)
-      .then(address => this.api.parity.setAccountName(this.address, this.name))
+      .then(() => this.api.parity.setAccountName(this.address, this.name))
       .then(() =>
         this.api.parity.setAccountMeta(this.address, {
           timestamp: Date.now()
-- 
GitLab