From e9762946a84826f688c007fe45c7092b5c8901f7 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@gmail.com>
Date: Tue, 8 May 2018 16:10:09 +0200
Subject: [PATCH 1/8] Add steps to create account

---
 src/Accounts/Accounts.js                      | 32 +++++++-
 src/Accounts/CreateAccount/CreateAccount.js   | 29 +++++++
 .../CreateAccountStep1/CreateAccountStep1.js  | 57 ++++++++++++++
 .../CreateAccount/CreateAccountStep1/index.js |  8 ++
 .../CreateAccountStep2/CreateAccountStep2.js  | 33 ++++++++
 .../CreateAccount/CreateAccountStep2/index.js |  8 ++
 .../CreateAccountStep3/CreateAccountStep3.js  | 46 +++++++++++
 .../CreateAccount/CreateAccountStep3/index.js |  8 ++
 .../CreateAccountStep4/CreateAccountStep4.js  | 77 ++++++++++++++++++
 .../CreateAccount/CreateAccountStep4/index.js |  8 ++
 .../CreateAccountStep5/CreateAccountStep5.js  | 38 +++++++++
 .../CreateAccount/CreateAccountStep5/index.js |  8 ++
 src/App/App.js                                | 30 +++----
 src/stores/ParityStore.js                     |  9 ++-
 src/stores/TokensStore.js                     |  6 +-
 src/stores/createAccountStore.js              | 78 +++++++++++++++++++
 src/stores/index.js                           | 10 ++-
 17 files changed, 461 insertions(+), 24 deletions(-)
 create mode 100644 src/Accounts/CreateAccount/CreateAccount.js
 create mode 100644 src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js
 create mode 100644 src/Accounts/CreateAccount/CreateAccountStep1/index.js
 create mode 100644 src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js
 create mode 100644 src/Accounts/CreateAccount/CreateAccountStep2/index.js
 create mode 100644 src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
 create mode 100644 src/Accounts/CreateAccount/CreateAccountStep3/index.js
 create mode 100644 src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js
 create mode 100644 src/Accounts/CreateAccount/CreateAccountStep4/index.js
 create mode 100644 src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js
 create mode 100644 src/Accounts/CreateAccount/CreateAccountStep5/index.js
 create mode 100644 src/stores/createAccountStore.js

diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js
index 73248483..bbbce0f4 100644
--- a/src/Accounts/Accounts.js
+++ b/src/Accounts/Accounts.js
@@ -6,8 +6,36 @@
 import React, { Component } from 'react';
 
 class Accounts extends Component {
-  render () {
-    return <div>This is the accounts page.</div>;
+  handleChange = ({ target: { value } }) => {
+    setDefaultAccount$(value);
+  };
+
+  render() {
+    const { accounts } = this.props;
+
+    return (
+      <div>
+        <p>Current account:</p>
+        {accounts ? (
+          <select onChange={this.handleChange} value={accounts[0]}>
+            {accounts.map((account, index) => (
+              <option key={account} value={account}>
+                {account}
+              </option>
+            ))}
+          </select>
+        ) : (
+          <p>Loading Accounts...</p>
+        )}
+
+        <p>
+          {/* @brian TODO Inline style is ugly */}
+          <Link to="/accounts/new" style={{ color: 'white' }}>
+            <button>Create new account</button>
+          </Link>
+        </p>
+      </div>
+    );
   }
 }
 
diff --git a/src/Accounts/CreateAccount/CreateAccount.js b/src/Accounts/CreateAccount/CreateAccount.js
new file mode 100644
index 00000000..26b405d2
--- /dev/null
+++ b/src/Accounts/CreateAccount/CreateAccount.js
@@ -0,0 +1,29 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+import { Route } from 'react-router-dom';
+
+import Step1 from './CreateAccountStep1';
+import Step2 from './CreateAccountStep2';
+import Step3 from './CreateAccountStep3';
+import Step4 from './CreateAccountStep4';
+import Step5 from './CreateAccountStep5';
+
+class CreateAccount extends Component {
+  render() {
+    return (
+      <div>
+        <Route path="/accounts/new" component={Step1} />
+        <Route path="/accounts/new/step2" component={Step2} />
+        <Route path="/accounts/new/step3" component={Step3} />
+        <Route path="/accounts/new/step4" component={Step4} />
+        <Route path="/accounts/new/step5" component={Step5} />
+      </div>
+    );
+  }
+}
+
+export default CreateAccount;
diff --git a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js
new file mode 100644
index 00000000..dfe5e5b2
--- /dev/null
+++ b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js
@@ -0,0 +1,57 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import { Link } from 'react-router-dom';
+
+@inject('createAccountStore')
+@observer
+class CreateAccountStep1 extends Component {
+  componentDidMount() {
+    this.props.createAccountStore.generateNewAccount();
+  }
+
+  handleChange = ({ target: { value } }) =>
+    this.props.createAccountStore.setName(value);
+
+  render() {
+    const {
+      createAccountStore: { address, generateNewAccount, name, phrase },
+      location: { pathname }
+    } = this.props;
+
+    return (
+      <div>
+        <h3>Create account</h3>
+        <div>
+          Your new address:<br />[BLOCKIE]<pre>{address} </pre>
+          {pathname === '/accounts/new' && (
+            <button onClick={generateNewAccount}>Change</button>
+          )}
+        </div>
+        <label>
+          Set a name for this account:<br />
+          <input
+            disabled={pathname !== '/accounts/new'}
+            onChange={this.handleChange}
+            required
+            value={name}
+          />
+        </label>
+        {pathname === '/accounts/new' &&
+          !!name && (
+            <div>
+              <Link to="/accounts/new/step2">
+                <button>Select</button>
+              </Link>
+            </div>
+          )}
+      </div>
+    );
+  }
+}
+
+export default CreateAccountStep1;
diff --git a/src/Accounts/CreateAccount/CreateAccountStep1/index.js b/src/Accounts/CreateAccount/CreateAccountStep1/index.js
new file mode 100644
index 00000000..4d231b66
--- /dev/null
+++ b/src/Accounts/CreateAccount/CreateAccountStep1/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import CreateAccountStep1 from './CreateAccountStep1';
+
+export default CreateAccountStep1;
diff --git a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js
new file mode 100644
index 00000000..4cde411a
--- /dev/null
+++ b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js
@@ -0,0 +1,33 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import { Link } from 'react-router-dom';
+
+@inject('createAccountStore')
+@observer
+class CreateAccountStep2 extends Component {
+  render() {
+    const {
+      createAccountStore: { phrase }
+    } = this.props;
+
+    return (
+      <div>
+        <h3>Create account step 2</h3>
+        <div>
+          Please write your secret phrase on a piece of paper:<br />
+          <pre>{phrase}</pre>
+        </div>
+        <Link to="/accounts/new/step3">
+          <button>Done</button>
+        </Link>
+      </div>
+    );
+  }
+}
+
+export default CreateAccountStep2;
diff --git a/src/Accounts/CreateAccount/CreateAccountStep2/index.js b/src/Accounts/CreateAccount/CreateAccountStep2/index.js
new file mode 100644
index 00000000..c9ab4570
--- /dev/null
+++ b/src/Accounts/CreateAccount/CreateAccountStep2/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import CreateAccountStep2 from './CreateAccountStep2';
+
+export default CreateAccountStep2;
diff --git a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
new file mode 100644
index 00000000..2e22c982
--- /dev/null
+++ b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
@@ -0,0 +1,46 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import { Link } from 'react-router-dom';
+
+@inject('createAccountStore')
+@observer
+class CreateAccountStep3 extends Component {
+  state = {
+    value: ''
+  };
+
+  handleChange = ({ target: { value } }) => this.setState({ value });
+
+  render() {
+    const {
+      createAccountStore: { phrase }
+    } = this.props;
+    const { value } = this.state;
+
+    return (
+      <div>
+        <h3>Create account step 3</h3>
+        <div>
+          Please rewrite your whole phrase here<br />
+          <input onChange={this.handleChange} required value={value} />
+        </div>
+        <em style={{ fontSize: 12 }}>
+          @brian maybe tell the user to write the 3rd, 9th and 11th word only?
+          3,9,11 being random numbers
+        </em>
+        {value === phrase && (
+          <Link to="/accounts/new/step4">
+            <button>Done</button>
+          </Link>
+        )}
+      </div>
+    );
+  }
+}
+
+export default CreateAccountStep3;
diff --git a/src/Accounts/CreateAccount/CreateAccountStep3/index.js b/src/Accounts/CreateAccount/CreateAccountStep3/index.js
new file mode 100644
index 00000000..4234552c
--- /dev/null
+++ b/src/Accounts/CreateAccount/CreateAccountStep3/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import CreateAccountStep3 from './CreateAccountStep3';
+
+export default CreateAccountStep3;
diff --git a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js
new file mode 100644
index 00000000..f4f4cb42
--- /dev/null
+++ b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js
@@ -0,0 +1,77 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import { Link } from 'react-router-dom';
+
+@inject('createAccountStore')
+@observer
+class CreateAccountStep3 extends Component {
+  state = {
+    confirm: '',
+    hint: '',
+    password: ''
+  };
+
+  handleConfirmChange = ({ target: { value } }) => {
+    this.setState({ confirm: value });
+  };
+
+  handleHintChange = ({ target: { value } }) => {
+    this.setState({ hint: value });
+  };
+
+  handlePasswordChange = ({ target: { value } }) => {
+    this.setState({ password: value });
+  };
+
+  handleSubmit = () => {
+    const { createAccountStore, history } = this.props;
+    const { hint, password } = this.state;
+    createAccountStore.setPassword(password);
+    createAccountStore.setHint(hint);
+    history.push('/accounts/new/step5');
+  };
+
+  render() {
+    const { confirm, hint, password } = this.state;
+
+    return (
+      <div>
+        <h3>Create account step 4</h3>
+        <form onSubmit={this.handleSubmit}>
+          <label>
+            Password:{' '}
+            <input
+              onChange={this.handlePasswordChange}
+              required
+              type="password"
+              value={password}
+            />
+          </label>
+          <br />
+          <label>
+            Confirm:{' '}
+            <input
+              onChange={this.handleConfirmChange}
+              required
+              type="password"
+              value={confirm}
+            />
+          </label>
+          <br />
+          <label>
+            Password Hint (optional):{' '}
+            <input onChange={this.handleHintChange} value={hint} />
+          </label>
+          {password && confirm === password && <button>Submit</button>}
+        </form>
+      </div>
+    );
+  }
+}
+
+export default CreateAccountStep3;
diff --git a/src/Accounts/CreateAccount/CreateAccountStep4/index.js b/src/Accounts/CreateAccount/CreateAccountStep4/index.js
new file mode 100644
index 00000000..c959872c
--- /dev/null
+++ b/src/Accounts/CreateAccount/CreateAccountStep4/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import CreateAccountStep4 from './CreateAccountStep4';
+
+export default CreateAccountStep4;
diff --git a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js
new file mode 100644
index 00000000..d0b0f002
--- /dev/null
+++ b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js
@@ -0,0 +1,38 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+
+@inject('createAccountStore')
+@observer
+class CreateAccountStep5 extends Component {
+  handleSubmit = () => {
+    const {
+      createAccountStore: { saveAccountToParity },
+      history
+    } = this.props;
+    saveAccountToParity().then(() => history.push('/settings'));
+  };
+
+  render() {
+    const {
+      createAccountStore: { hint }
+    } = this.props;
+
+    return (
+      <div>
+        <h3>Create account step 5</h3>
+        <p>Confirm account creation?</p>
+        <p>
+          Password Hint: <em>{hint}</em>
+        </p>
+        <button onClick={this.handleSubmit}>Confirm</button>
+      </div>
+    );
+  }
+}
+
+export default CreateAccountStep5;
diff --git a/src/Accounts/CreateAccount/CreateAccountStep5/index.js b/src/Accounts/CreateAccount/CreateAccountStep5/index.js
new file mode 100644
index 00000000..07ea8a6b
--- /dev/null
+++ b/src/Accounts/CreateAccount/CreateAccountStep5/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import CreateAccountStep5 from './CreateAccountStep5';
+
+export default CreateAccountStep5;
diff --git a/src/App/App.js b/src/App/App.js
index f5f0e82d..fc5acdad 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -19,27 +19,29 @@ const Router =
   process.env.NODE_ENV === 'production' ? MemoryRouter : BrowserRouter;
 
 class App extends Component {
-  render () {
+  render() {
     return (
       <Router>
-        <div className='wrapper'>
-          <div className='content'>
-            <div className='connector'>
-              <svg width='60px' height='30px' viewBox='0 0 60 30'>
-                <polygon points='0 30 60 30 30 0' />
+        <div className="wrapper">
+          <div className="content">
+            <div className="connector">
+              <svg width="60px" height="30px" viewBox="0 0 60 30">
+                <polygon points="0 30 60 30 30 0" />
               </svg>
             </div>
-            <div className='window'>
-              <ProtectedRoute exact path='/' component={Tokens} />
-              <Route path='/loading' component={Loading} />
-              <ProtectedRoute path='/send' component={Send} />
-              <ProtectedRoute path='/receive' component={Receive} />
+            <div className="window">
+              <ProtectedRoute exact path="/" component={Tokens} />
+              <Route path="/loading" component={Loading} />
+              <ProtectedRoute path="/send" component={Send} />
+              <ProtectedRoute path="/receive" component={Receive} />
 
-              <nav className='primary-nav'>
-                <Link to='/receive' className='icon -receive'>
+              <nav className="primary-nav">
+                {/* @brian There's no url bar in Electron, so I added a home link for now */}
+                <Link to="/">Home</Link>
+                <Link to="/receive" className="icon -receive">
                   Receive
                 </Link>
-                <Link to='/' className='icon -settings'>
+                <Link to="/" className="icon -settings">
                   Settings
                 </Link>
               </nav>
diff --git a/src/stores/ParityStore.js b/src/stores/ParityStore.js
index c80da845..e35e2344 100644
--- a/src/stores/ParityStore.js
+++ b/src/stores/ParityStore.js
@@ -14,13 +14,13 @@ const electron = isElectron() ? window.require('electron') : null;
 const LS_PREFIX = '__paritylight::';
 const LS_KEY = `${LS_PREFIX}secureToken`;
 
-export default class ParityStore {
+class ParityStore {
   @observable downloadProgress = 0;
   @observable isApiConnected = false;
   @observable isParityRunning = false;
   @observable token = null;
 
-  constructor () {
+  constructor() {
     // Retrieve token from localStorage
     const token = store.get(LS_KEY);
     if (token) {
@@ -70,6 +70,9 @@ export default class ParityStore {
     // Initialize the light.js lib
     light.setApi(api);
 
+    // Also set api as member for React Components to use it if needed
+    this.api = api;
+
     // TODO This is not working
     // api.on('connected', () => console.log('ehdsfa'));
     // api.on('disconnected', () => console.log('ehdsfa'));
@@ -139,3 +142,5 @@ export default class ParityStore {
 
   updateLS = () => store.set(LS_KEY, this.token);
 }
+
+export default new ParityStore();
diff --git a/src/stores/TokensStore.js b/src/stores/TokensStore.js
index 2588f0c1..a3618954 100644
--- a/src/stores/TokensStore.js
+++ b/src/stores/TokensStore.js
@@ -11,10 +11,10 @@ import ethereumIcon from '../assets/img/tokens/ethereum.png';
 const LS_PREFIX = '__paritylight::';
 const LS_KEY = `${LS_PREFIX}tokens`;
 
-export default class TokensStore {
+class TokensStore {
   @observable tokens = new Map();
 
-  constructor () {
+  constructor() {
     const value = store.get(LS_KEY);
 
     if (!value) {
@@ -53,3 +53,5 @@ export default class TokensStore {
 
   updateLS = () => store.set(LS_KEY, this.tokens);
 }
+
+export default new TokensStore();
diff --git a/src/stores/createAccountStore.js b/src/stores/createAccountStore.js
new file mode 100644
index 00000000..f75f1e96
--- /dev/null
+++ b/src/stores/createAccountStore.js
@@ -0,0 +1,78 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import Api from '@parity/api';
+import { action, observable } from 'mobx';
+
+import parityStore from './parityStore';
+
+class CreateAccountStore {
+  @observable address = null;
+  @observable hint = ''; // Password hint (optional)
+  @observable name = ''; // Account name
+  @observable password = '';
+  @observable phrase = null; // The 12-word seed phrase
+
+  constructor() {
+    this.parityStore = parityStore;
+  }
+
+  generateNewAccount = () => {
+    const { api } = this.parityStore;
+
+    return api.parity
+      .generateSecretPhrase()
+      .then(phrase => {
+        this.setPhrase(phrase);
+        return api.parity.phraseToAddress(phrase);
+      })
+      .then(address => this.setAddress(address));
+  };
+
+  saveAccountToParity = () => {
+    const { api } = this.parityStore;
+
+    return api.parity
+      .newAccountFromPhrase(this.phrase, this.password)
+      .then(address => api.parity.setAccountName(this.address, this.name))
+      .then(() => api.parity.setAccountMeta(this.address, {}));
+    // .then(() =>
+    //   api.parity.setAccountMeta(
+    //     this.address,
+    //     JSON.stringify({
+    //       createdAt: Date.now(),
+    //       passwordHint: this.hint
+    //     }).replace('"', '\\"')
+    //   )
+    // );
+  };
+
+  @action
+  setAddress = address => {
+    this.address = address;
+  };
+
+  @action
+  setHint = hint => {
+    this.hint = hint;
+  };
+
+  @action
+  setName = name => {
+    this.name = name;
+  };
+
+  @action
+  setPassword = password => {
+    this.password = password;
+  };
+
+  @action
+  setPhrase = phrase => {
+    this.phrase = phrase;
+  };
+}
+
+export default new CreateAccountStore();
diff --git a/src/stores/index.js b/src/stores/index.js
index 80ef5140..ae43065f 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -3,10 +3,12 @@
 //
 // SPDX-License-Identifier: MIT
 
-import ParityStore from './ParityStore';
-import TokensStore from './TokensStore';
+import createAccountStore from './createAccountStore';
+import parityStore from './parityStore';
+import tokensStore from './tokensStore';
 
 export default {
-  parityStore: new ParityStore(),
-  tokensStore: new TokensStore()
+  createAccountStore,
+  parityStore,
+  tokensStore
 };
-- 
GitLab


From 9d8bfff4d8c73a17e8397148623295c2b104cf60 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@gmail.com>
Date: Tue, 8 May 2018 16:12:48 +0200
Subject: [PATCH 2/8] Rename file part1

---
 src/stores/ParityStore.js | 146 --------------------------------------
 src/stores/TokensStore.js |  57 ---------------
 2 files changed, 203 deletions(-)
 delete mode 100644 src/stores/ParityStore.js
 delete mode 100644 src/stores/TokensStore.js

diff --git a/src/stores/ParityStore.js b/src/stores/ParityStore.js
deleted file mode 100644
index e35e2344..00000000
--- a/src/stores/ParityStore.js
+++ /dev/null
@@ -1,146 +0,0 @@
-// Copyright 2015-2018 Parity Technologies (UK) Ltd.
-// This file is part of Parity.
-//
-// SPDX-License-Identifier: MIT
-
-import Api from '@parity/api';
-import { action, observable } from 'mobx';
-import isElectron from 'is-electron';
-import light from '@parity/light.js';
-import store from 'store';
-
-const electron = isElectron() ? window.require('electron') : null;
-
-const LS_PREFIX = '__paritylight::';
-const LS_KEY = `${LS_PREFIX}secureToken`;
-
-class ParityStore {
-  @observable downloadProgress = 0;
-  @observable isApiConnected = false;
-  @observable isParityRunning = false;
-  @observable token = null;
-
-  constructor() {
-    // Retrieve token from localStorage
-    const token = store.get(LS_KEY);
-    if (token) {
-      this.setToken(token);
-    }
-
-    if (!electron) {
-      console.log(
-        'Not in Electron, ParityStore will only have limited capabilities.'
-      );
-      return;
-    }
-
-    const { ipcRenderer, remote } = electron;
-
-    // Check if isParityRunning
-    this.setIsParityRunning(!!remote.getGlobal('isParityRunning'));
-    // We also listen to future changes
-    ipcRenderer.on('parity-running', (_, isParityRunning) => {
-      this.setIsParityRunning(isParityRunning);
-    });
-
-    // Set download progress
-    ipcRenderer.on('parity-download-progress', (_, progress) => {
-      this.setDownloadProgress(progress);
-    });
-  }
-
-  connectToApi = () => {
-    let provider = 'ws://127.0.0.1:8546'; // Default provider to be used in localhost:3000
-    if (electron) {
-      const { remote } = electron;
-      const wsInterface = remote.getGlobal('wsInterface');
-      const wsPort = remote.getGlobal('wsPort');
-      if (wsInterface && wsPort) {
-        provider = `ws://${wsInterface}:${wsPort}`;
-      }
-    }
-
-    const api = new Api(
-      new Api.Provider.Ws(
-        provider,
-        this.token.replace(/[^a-zA-Z0-9]/g, '') // Sanitize token
-      )
-    );
-
-    // Initialize the light.js lib
-    light.setApi(api);
-
-    // Also set api as member for React Components to use it if needed
-    this.api = api;
-
-    // TODO This is not working
-    // api.on('connected', () => console.log('ehdsfa'));
-    // api.on('disconnected', () => console.log('ehdsfa'));
-    // So instead, we poll every 1s
-    setInterval(() => {
-      this.setIsApiConnected(api.isConnected);
-    }, 1000);
-  };
-
-  requestNewToken = () => {
-    const { ipcRenderer } = electron;
-
-    // Request new token from Electron
-    ipcRenderer.send('asynchronous-message', 'signer-new-token');
-    ipcRenderer.once('asynchronous-reply', (_, token) => {
-      if (!token) {
-        return;
-      }
-      // If `parity signer new-token` has successfully given us a token back,
-      // then we submit it
-      this.setToken(token);
-    });
-  };
-
-  @action
-  setDownloadProgress = downloadProgress => {
-    this.downloadProgress = downloadProgress;
-  };
-
-  @action
-  setIsApiConnected = isApiConnected => {
-    if (isApiConnected === this.isApiConnected) {
-      return;
-    }
-
-    this.isApiConnected = isApiConnected;
-  };
-
-  @action
-  setIsParityRunning = isParityRunning => {
-    if (isParityRunning === this.isParityRunning) {
-      return;
-    }
-
-    this.isParityRunning = isParityRunning;
-
-    // Request new token if parity's running but we still don't have a token
-    if (isParityRunning && !this.token) {
-      this.requestNewToken();
-    }
-  };
-
-  @action
-  setToken = token => {
-    if (token === this.token) {
-      return;
-    }
-
-    this.token = token;
-
-    // If we receive a new token, then we try to connect to the Api with this
-    // new token
-    this.connectToApi();
-
-    this.updateLS();
-  };
-
-  updateLS = () => store.set(LS_KEY, this.token);
-}
-
-export default new ParityStore();
diff --git a/src/stores/TokensStore.js b/src/stores/TokensStore.js
deleted file mode 100644
index a3618954..00000000
--- a/src/stores/TokensStore.js
+++ /dev/null
@@ -1,57 +0,0 @@
-// Copyright 2015-2018 Parity Technologies (UK) Ltd.
-// This file is part of Parity.
-//
-// SPDX-License-Identifier: MIT
-
-import { action, observable } from 'mobx';
-import store from 'store';
-
-import ethereumIcon from '../assets/img/tokens/ethereum.png';
-
-const LS_PREFIX = '__paritylight::';
-const LS_KEY = `${LS_PREFIX}tokens`;
-
-class TokensStore {
-  @observable tokens = new Map();
-
-  constructor() {
-    const value = store.get(LS_KEY);
-
-    if (!value) {
-      this.addToken('ETH', {
-        image: ethereumIcon,
-        name: 'Ethereum',
-        symbol: 'ETH'
-      });
-      // TODO Remove this testing values
-      this.addToken('ABC', {
-        image: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png',
-        name: 'Abc Token',
-        symbol: 'ABC'
-      });
-      this.addToken('DEF', {
-        image: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png',
-        name: 'Def Token',
-        symbol: 'DEF'
-      });
-    } else {
-      this.tokens.replace(value);
-    }
-  }
-
-  @action
-  addToken = (key, token) => {
-    this.tokens.set(key, token);
-    this.updateLS();
-  };
-
-  @action
-  removeToken = key => {
-    this.tokens.delete(key);
-    this.updateLS();
-  };
-
-  updateLS = () => store.set(LS_KEY, this.tokens);
-}
-
-export default new TokensStore();
-- 
GitLab


From 10fc4979e14322df24e2f6b61e5f6471685be701 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@gmail.com>
Date: Tue, 8 May 2018 16:13:54 +0200
Subject: [PATCH 3/8] Rename file part2

---
 src/stores/parityStore.js | 146 ++++++++++++++++++++++++++++++++++++++
 src/stores/tokensStore.js |  57 +++++++++++++++
 2 files changed, 203 insertions(+)
 create mode 100644 src/stores/parityStore.js
 create mode 100644 src/stores/tokensStore.js

diff --git a/src/stores/parityStore.js b/src/stores/parityStore.js
new file mode 100644
index 00000000..e35e2344
--- /dev/null
+++ b/src/stores/parityStore.js
@@ -0,0 +1,146 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import Api from '@parity/api';
+import { action, observable } from 'mobx';
+import isElectron from 'is-electron';
+import light from '@parity/light.js';
+import store from 'store';
+
+const electron = isElectron() ? window.require('electron') : null;
+
+const LS_PREFIX = '__paritylight::';
+const LS_KEY = `${LS_PREFIX}secureToken`;
+
+class ParityStore {
+  @observable downloadProgress = 0;
+  @observable isApiConnected = false;
+  @observable isParityRunning = false;
+  @observable token = null;
+
+  constructor() {
+    // Retrieve token from localStorage
+    const token = store.get(LS_KEY);
+    if (token) {
+      this.setToken(token);
+    }
+
+    if (!electron) {
+      console.log(
+        'Not in Electron, ParityStore will only have limited capabilities.'
+      );
+      return;
+    }
+
+    const { ipcRenderer, remote } = electron;
+
+    // Check if isParityRunning
+    this.setIsParityRunning(!!remote.getGlobal('isParityRunning'));
+    // We also listen to future changes
+    ipcRenderer.on('parity-running', (_, isParityRunning) => {
+      this.setIsParityRunning(isParityRunning);
+    });
+
+    // Set download progress
+    ipcRenderer.on('parity-download-progress', (_, progress) => {
+      this.setDownloadProgress(progress);
+    });
+  }
+
+  connectToApi = () => {
+    let provider = 'ws://127.0.0.1:8546'; // Default provider to be used in localhost:3000
+    if (electron) {
+      const { remote } = electron;
+      const wsInterface = remote.getGlobal('wsInterface');
+      const wsPort = remote.getGlobal('wsPort');
+      if (wsInterface && wsPort) {
+        provider = `ws://${wsInterface}:${wsPort}`;
+      }
+    }
+
+    const api = new Api(
+      new Api.Provider.Ws(
+        provider,
+        this.token.replace(/[^a-zA-Z0-9]/g, '') // Sanitize token
+      )
+    );
+
+    // Initialize the light.js lib
+    light.setApi(api);
+
+    // Also set api as member for React Components to use it if needed
+    this.api = api;
+
+    // TODO This is not working
+    // api.on('connected', () => console.log('ehdsfa'));
+    // api.on('disconnected', () => console.log('ehdsfa'));
+    // So instead, we poll every 1s
+    setInterval(() => {
+      this.setIsApiConnected(api.isConnected);
+    }, 1000);
+  };
+
+  requestNewToken = () => {
+    const { ipcRenderer } = electron;
+
+    // Request new token from Electron
+    ipcRenderer.send('asynchronous-message', 'signer-new-token');
+    ipcRenderer.once('asynchronous-reply', (_, token) => {
+      if (!token) {
+        return;
+      }
+      // If `parity signer new-token` has successfully given us a token back,
+      // then we submit it
+      this.setToken(token);
+    });
+  };
+
+  @action
+  setDownloadProgress = downloadProgress => {
+    this.downloadProgress = downloadProgress;
+  };
+
+  @action
+  setIsApiConnected = isApiConnected => {
+    if (isApiConnected === this.isApiConnected) {
+      return;
+    }
+
+    this.isApiConnected = isApiConnected;
+  };
+
+  @action
+  setIsParityRunning = isParityRunning => {
+    if (isParityRunning === this.isParityRunning) {
+      return;
+    }
+
+    this.isParityRunning = isParityRunning;
+
+    // Request new token if parity's running but we still don't have a token
+    if (isParityRunning && !this.token) {
+      this.requestNewToken();
+    }
+  };
+
+  @action
+  setToken = token => {
+    if (token === this.token) {
+      return;
+    }
+
+    this.token = token;
+
+    // If we receive a new token, then we try to connect to the Api with this
+    // new token
+    this.connectToApi();
+
+    this.updateLS();
+  };
+
+  updateLS = () => store.set(LS_KEY, this.token);
+}
+
+export default new ParityStore();
diff --git a/src/stores/tokensStore.js b/src/stores/tokensStore.js
new file mode 100644
index 00000000..a3618954
--- /dev/null
+++ b/src/stores/tokensStore.js
@@ -0,0 +1,57 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import { action, observable } from 'mobx';
+import store from 'store';
+
+import ethereumIcon from '../assets/img/tokens/ethereum.png';
+
+const LS_PREFIX = '__paritylight::';
+const LS_KEY = `${LS_PREFIX}tokens`;
+
+class TokensStore {
+  @observable tokens = new Map();
+
+  constructor() {
+    const value = store.get(LS_KEY);
+
+    if (!value) {
+      this.addToken('ETH', {
+        image: ethereumIcon,
+        name: 'Ethereum',
+        symbol: 'ETH'
+      });
+      // TODO Remove this testing values
+      this.addToken('ABC', {
+        image: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png',
+        name: 'Abc Token',
+        symbol: 'ABC'
+      });
+      this.addToken('DEF', {
+        image: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png',
+        name: 'Def Token',
+        symbol: 'DEF'
+      });
+    } else {
+      this.tokens.replace(value);
+    }
+  }
+
+  @action
+  addToken = (key, token) => {
+    this.tokens.set(key, token);
+    this.updateLS();
+  };
+
+  @action
+  removeToken = key => {
+    this.tokens.delete(key);
+    this.updateLS();
+  };
+
+  updateLS = () => store.set(LS_KEY, this.tokens);
+}
+
+export default new TokensStore();
-- 
GitLab


From 87df7882581487de2ec924d2e9a855e0fd045630 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@gmail.com>
Date: Mon, 7 May 2018 18:05:44 +0200
Subject: [PATCH 4/8] Add settings page

---
 package.json                        |  2 +-
 src/Accounts/Accounts.js            |  7 +++++++
 src/Accounts/CreateAccount/index.js |  8 ++++++++
 src/App/App.js                      | 11 +++++++----
 src/Settings/Settings.js            | 21 +++++++++++++++++++++
 src/Settings/index.js               |  8 ++++++++
 src/Tokens/EthBalance/EthBalance.js |  9 +++++++--
 yarn.lock                           | 18 +++++++++++++++---
 8 files changed, 74 insertions(+), 10 deletions(-)
 create mode 100644 src/Accounts/CreateAccount/index.js
 create mode 100644 src/Settings/Settings.js
 create mode 100644 src/Settings/index.js

diff --git a/package.json b/package.json
index 5a0c2c74..3328dae9 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@parity/api": "^2.1.22",
-    "@parity/light.js": "https://github.com/parity-js/light.js#4234c236b0b5782fa96aabe27c651eea9d17faaa",
+    "@parity/light.js": "https://github.com/parity-js/light.js#3a03aa86887f42341c13d560a2eff4ff270498cd",
     "axios": "^0.18.0",
     "electron": "^2.0.0",
     "electron-dl": "^1.11.0",
diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js
index bbbce0f4..c8e2378e 100644
--- a/src/Accounts/Accounts.js
+++ b/src/Accounts/Accounts.js
@@ -4,7 +4,14 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
+import { accounts$, setDefaultAccount$ } from '@parity/light.js';
+import { Link, Route } from 'react-router-dom';
 
+import light from '../hoc';
+
+@light({
+  accounts: accounts$
+})
 class Accounts extends Component {
   handleChange = ({ target: { value } }) => {
     setDefaultAccount$(value);
diff --git a/src/Accounts/CreateAccount/index.js b/src/Accounts/CreateAccount/index.js
new file mode 100644
index 00000000..72a41f20
--- /dev/null
+++ b/src/Accounts/CreateAccount/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import CreateAccount from './CreateAccount';
+
+export default CreateAccount;
diff --git a/src/App/App.js b/src/App/App.js
index fc5acdad..4d5edf8d 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -6,10 +6,12 @@
 import React, { Component } from 'react';
 import { BrowserRouter, MemoryRouter, Route, Link } from 'react-router-dom';
 
+import CreateAccount from '../Accounts/CreateAccount';
 import Loading from '../Loading';
 import ProtectedRoute from './ProtectedRoute';
-import Send from '../Send';
 import Receive from '../Receive';
+import Send from '../Send';
+import Settings from '../Settings';
 import Tokens from '../Tokens';
 import './App.css';
 
@@ -30,18 +32,19 @@ class App extends Component {
               </svg>
             </div>
             <div className="window">
-              <ProtectedRoute exact path="/" component={Tokens} />
               <Route path="/loading" component={Loading} />
+              <ProtectedRoute exact path="/" component={Tokens} />
+              <ProtectedRoute path="/settings" component={Settings} />
               <ProtectedRoute path="/send" component={Send} />
               <ProtectedRoute path="/receive" component={Receive} />
+              <ProtectedRoute path="/accounts/new" component={CreateAccount} />
 
               <nav className="primary-nav">
-                {/* @brian There's no url bar in Electron, so I added a home link for now */}
                 <Link to="/">Home</Link>
                 <Link to="/receive" className="icon -receive">
                   Receive
                 </Link>
-                <Link to="/" className="icon -settings">
+                <Link to="/settings" className="icon -settings">
                   Settings
                 </Link>
               </nav>
diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js
new file mode 100644
index 00000000..c9c343df
--- /dev/null
+++ b/src/Settings/Settings.js
@@ -0,0 +1,21 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+
+import Accounts from '../Accounts';
+
+class Settings extends Component {
+  render() {
+    return (
+      <div>
+        <h3>This is the settings page.</h3>
+        <Accounts />
+      </div>
+    );
+  }
+}
+
+export default Settings;
diff --git a/src/Settings/index.js b/src/Settings/index.js
new file mode 100644
index 00000000..242a4e2c
--- /dev/null
+++ b/src/Settings/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import Settings from './Settings';
+
+export default Settings;
diff --git a/src/Tokens/EthBalance/EthBalance.js b/src/Tokens/EthBalance/EthBalance.js
index e0faf5f1..26a12461 100644
--- a/src/Tokens/EthBalance/EthBalance.js
+++ b/src/Tokens/EthBalance/EthBalance.js
@@ -5,6 +5,7 @@
 
 import React, { Component } from 'react';
 import { balanceOf$ } from '@parity/light.js';
+import { Link } from 'react-router-dom';
 
 import BalanceLayout from '../BalanceLayout';
 import light from '../../hoc';
@@ -13,8 +14,12 @@ import light from '../../hoc';
   balance: ({ address }) => balanceOf$(address)
 })
 class EthBalance extends Component {
-  render () {
-    return <BalanceLayout {...this.props} />;
+  render() {
+    return (
+      <Link to="/send">
+        <BalanceLayout {...this.props} />
+      </Link>
+    );
   }
 }
 
diff --git a/yarn.lock b/yarn.lock
index 7ae966e4..d518625e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -46,6 +46,13 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/runtime@^7.0.0-beta.46":
+  version "7.0.0-beta.46"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0-beta.46.tgz#466a9c0498f6d12d054a185981eef742d59d4871"
+  dependencies:
+    core-js "^2.5.3"
+    regenerator-runtime "^0.11.1"
+
 "@babel/template@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
@@ -115,10 +122,11 @@
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/@parity/jsonrpc/-/jsonrpc-2.1.6.tgz#260bbe7dfcec18d59f0bf1668dfd6021452d6452"
 
-"@parity/light.js@https://github.com/parity-js/light.js#4234c236b0b5782fa96aabe27c651eea9d17faaa":
+"@parity/light.js@https://github.com/parity-js/light.js#3a03aa86887f42341c13d560a2eff4ff270498cd":
   version "1.0.0"
-  resolved "https://github.com/parity-js/light.js#4234c236b0b5782fa96aabe27c651eea9d17faaa"
+  resolved "https://github.com/parity-js/light.js#3a03aa86887f42341c13d560a2eff4ff270498cd"
   dependencies:
+    "@babel/runtime" "^7.0.0-beta.46"
     "@parity/api" "^2.1.22"
     memoizee "^0.4.12"
     rxjs "^6.1.0"
@@ -2149,6 +2157,10 @@ core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.5.tgz#b14dde936c640c0579a6b50cabcc132dd6127e3b"
 
+core-js@^2.5.3:
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.6.tgz#0fe6d45bf3cac3ac364a9d72de7576f4eb221b9d"
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -7508,7 +7520,7 @@ regenerate@^1.2.1:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
 
-regenerator-runtime@^0.11.0:
+regenerator-runtime@^0.11.0, regenerator-runtime@^0.11.1:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
 
-- 
GitLab


From 486132693567d22c0271719400c4cbc800841f12 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@gmail.com>
Date: Tue, 8 May 2018 17:21:45 +0200
Subject: [PATCH 5/8] Use allAccountsInfo instead of account

---
 package.json             |  2 +-
 src/Accounts/Accounts.js | 21 +++++++++++++--------
 yarn.lock                |  4 ++--
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 3328dae9..d8af35c9 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@parity/api": "^2.1.22",
-    "@parity/light.js": "https://github.com/parity-js/light.js#3a03aa86887f42341c13d560a2eff4ff270498cd",
+    "@parity/light.js": "https://github.com/parity-js/light.js#f62bb37782ed32eb74a8bb0cc428632d3a8c6d45",
     "axios": "^0.18.0",
     "electron": "^2.0.0",
     "electron-dl": "^1.11.0",
diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js
index c8e2378e..dc2b98a8 100644
--- a/src/Accounts/Accounts.js
+++ b/src/Accounts/Accounts.js
@@ -4,13 +4,18 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
-import { accounts$, setDefaultAccount$ } from '@parity/light.js';
+import {
+  allAccountsInfo$,
+  defaultAccount$,
+  setDefaultAccount$
+} from '@parity/light.js';
 import { Link, Route } from 'react-router-dom';
 
 import light from '../hoc';
 
 @light({
-  accounts: accounts$
+  allAccountsInfo: allAccountsInfo$,
+  defaultAccount: defaultAccount$
 })
 class Accounts extends Component {
   handleChange = ({ target: { value } }) => {
@@ -18,16 +23,16 @@ class Accounts extends Component {
   };
 
   render() {
-    const { accounts } = this.props;
+    const { allAccountsInfo, defaultAccount } = this.props;
 
     return (
       <div>
         <p>Current account:</p>
-        {accounts ? (
-          <select onChange={this.handleChange} value={accounts[0]}>
-            {accounts.map((account, index) => (
-              <option key={account} value={account}>
-                {account}
+        {allAccountsInfo ? (
+          <select onChange={this.handleChange} value={defaultAccount}>
+            {Object.keys(allAccountsInfo).map(address => (
+              <option key={address} value={address}>
+                {allAccountsInfo[address].name} ({address})
               </option>
             ))}
           </select>
diff --git a/yarn.lock b/yarn.lock
index d518625e..07e4c856 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -122,9 +122,9 @@
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/@parity/jsonrpc/-/jsonrpc-2.1.6.tgz#260bbe7dfcec18d59f0bf1668dfd6021452d6452"
 
-"@parity/light.js@https://github.com/parity-js/light.js#3a03aa86887f42341c13d560a2eff4ff270498cd":
+"@parity/light.js@https://github.com/parity-js/light.js#f62bb37782ed32eb74a8bb0cc428632d3a8c6d45":
   version "1.0.0"
-  resolved "https://github.com/parity-js/light.js#3a03aa86887f42341c13d560a2eff4ff270498cd"
+  resolved "https://github.com/parity-js/light.js#f62bb37782ed32eb74a8bb0cc428632d3a8c6d45"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.46"
     "@parity/api" "^2.1.22"
-- 
GitLab


From 716211f203f62390ee4067f1eec7f89615fb7571 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@gmail.com>
Date: Tue, 8 May 2018 18:09:11 +0200
Subject: [PATCH 6/8] Fix lint

---
 src/Accounts/Accounts.js                      |  6 ++--
 src/Accounts/CreateAccount/CreateAccount.js   | 12 +++----
 .../CreateAccountStep1/CreateAccountStep1.js  |  8 ++---
 .../CreateAccountStep2/CreateAccountStep2.js  |  4 +--
 .../CreateAccountStep3/CreateAccountStep3.js  |  4 +--
 .../CreateAccountStep4/CreateAccountStep4.js  |  7 ++--
 .../CreateAccountStep5/CreateAccountStep5.js  |  2 +-
 src/App/App.js                                | 34 +++++++++----------
 src/Settings/Settings.js                      |  2 +-
 src/Tokens/EthBalance/EthBalance.js           |  4 +--
 src/stores/createAccountStore.js              |  3 +-
 src/stores/parityStore.js                     |  2 +-
 src/stores/tokensStore.js                     |  2 +-
 13 files changed, 44 insertions(+), 46 deletions(-)

diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js
index dc2b98a8..fc114416 100644
--- a/src/Accounts/Accounts.js
+++ b/src/Accounts/Accounts.js
@@ -9,7 +9,7 @@ import {
   defaultAccount$,
   setDefaultAccount$
 } from '@parity/light.js';
-import { Link, Route } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import light from '../hoc';
 
@@ -22,7 +22,7 @@ class Accounts extends Component {
     setDefaultAccount$(value);
   };
 
-  render() {
+  render () {
     const { allAccountsInfo, defaultAccount } = this.props;
 
     return (
@@ -42,7 +42,7 @@ class Accounts extends Component {
 
         <p>
           {/* @brian TODO Inline style is ugly */}
-          <Link to="/accounts/new" style={{ color: 'white' }}>
+          <Link to='/accounts/new' style={{ color: 'white' }}>
             <button>Create new account</button>
           </Link>
         </p>
diff --git a/src/Accounts/CreateAccount/CreateAccount.js b/src/Accounts/CreateAccount/CreateAccount.js
index 26b405d2..33a2433e 100644
--- a/src/Accounts/CreateAccount/CreateAccount.js
+++ b/src/Accounts/CreateAccount/CreateAccount.js
@@ -13,14 +13,14 @@ import Step4 from './CreateAccountStep4';
 import Step5 from './CreateAccountStep5';
 
 class CreateAccount extends Component {
-  render() {
+  render () {
     return (
       <div>
-        <Route path="/accounts/new" component={Step1} />
-        <Route path="/accounts/new/step2" component={Step2} />
-        <Route path="/accounts/new/step3" component={Step3} />
-        <Route path="/accounts/new/step4" component={Step4} />
-        <Route path="/accounts/new/step5" component={Step5} />
+        <Route path='/accounts/new' component={Step1} />
+        <Route path='/accounts/new/step2' component={Step2} />
+        <Route path='/accounts/new/step3' component={Step3} />
+        <Route path='/accounts/new/step4' component={Step4} />
+        <Route path='/accounts/new/step5' component={Step5} />
       </div>
     );
   }
diff --git a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js
index dfe5e5b2..1e7a653b 100644
--- a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js
+++ b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js
@@ -10,16 +10,16 @@ import { Link } from 'react-router-dom';
 @inject('createAccountStore')
 @observer
 class CreateAccountStep1 extends Component {
-  componentDidMount() {
+  componentDidMount () {
     this.props.createAccountStore.generateNewAccount();
   }
 
   handleChange = ({ target: { value } }) =>
     this.props.createAccountStore.setName(value);
 
-  render() {
+  render () {
     const {
-      createAccountStore: { address, generateNewAccount, name, phrase },
+      createAccountStore: { address, generateNewAccount, name },
       location: { pathname }
     } = this.props;
 
@@ -44,7 +44,7 @@ class CreateAccountStep1 extends Component {
         {pathname === '/accounts/new' &&
           !!name && (
             <div>
-              <Link to="/accounts/new/step2">
+              <Link to='/accounts/new/step2'>
                 <button>Select</button>
               </Link>
             </div>
diff --git a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js
index 4cde411a..03671c91 100644
--- a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js
+++ b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js
@@ -10,7 +10,7 @@ import { Link } from 'react-router-dom';
 @inject('createAccountStore')
 @observer
 class CreateAccountStep2 extends Component {
-  render() {
+  render () {
     const {
       createAccountStore: { phrase }
     } = this.props;
@@ -22,7 +22,7 @@ class CreateAccountStep2 extends Component {
           Please write your secret phrase on a piece of paper:<br />
           <pre>{phrase}</pre>
         </div>
-        <Link to="/accounts/new/step3">
+        <Link to='/accounts/new/step3'>
           <button>Done</button>
         </Link>
       </div>
diff --git a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
index 2e22c982..afc603e1 100644
--- a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
+++ b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
@@ -16,7 +16,7 @@ class CreateAccountStep3 extends Component {
 
   handleChange = ({ target: { value } }) => this.setState({ value });
 
-  render() {
+  render () {
     const {
       createAccountStore: { phrase }
     } = this.props;
@@ -34,7 +34,7 @@ class CreateAccountStep3 extends Component {
           3,9,11 being random numbers
         </em>
         {value === phrase && (
-          <Link to="/accounts/new/step4">
+          <Link to='/accounts/new/step4'>
             <button>Done</button>
           </Link>
         )}
diff --git a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js
index f4f4cb42..6e4a0003 100644
--- a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js
+++ b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js
@@ -5,7 +5,6 @@
 
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import { Link } from 'react-router-dom';
 
 @inject('createAccountStore')
 @observer
@@ -36,7 +35,7 @@ class CreateAccountStep3 extends Component {
     history.push('/accounts/new/step5');
   };
 
-  render() {
+  render () {
     const { confirm, hint, password } = this.state;
 
     return (
@@ -48,7 +47,7 @@ class CreateAccountStep3 extends Component {
             <input
               onChange={this.handlePasswordChange}
               required
-              type="password"
+              type='password'
               value={password}
             />
           </label>
@@ -58,7 +57,7 @@ class CreateAccountStep3 extends Component {
             <input
               onChange={this.handleConfirmChange}
               required
-              type="password"
+              type='password'
               value={confirm}
             />
           </label>
diff --git a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js
index d0b0f002..609f0254 100644
--- a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js
+++ b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js
@@ -17,7 +17,7 @@ class CreateAccountStep5 extends Component {
     saveAccountToParity().then(() => history.push('/settings'));
   };
 
-  render() {
+  render () {
     const {
       createAccountStore: { hint }
     } = this.props;
diff --git a/src/App/App.js b/src/App/App.js
index 4d5edf8d..a8a464b8 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -21,30 +21,30 @@ const Router =
   process.env.NODE_ENV === 'production' ? MemoryRouter : BrowserRouter;
 
 class App extends Component {
-  render() {
+  render () {
     return (
       <Router>
-        <div className="wrapper">
-          <div className="content">
-            <div className="connector">
-              <svg width="60px" height="30px" viewBox="0 0 60 30">
-                <polygon points="0 30 60 30 30 0" />
+        <div className='wrapper'>
+          <div className='content'>
+            <div className='connector'>
+              <svg width='60px' height='30px' viewBox='0 0 60 30'>
+                <polygon points='0 30 60 30 30 0' />
               </svg>
             </div>
-            <div className="window">
-              <Route path="/loading" component={Loading} />
-              <ProtectedRoute exact path="/" component={Tokens} />
-              <ProtectedRoute path="/settings" component={Settings} />
-              <ProtectedRoute path="/send" component={Send} />
-              <ProtectedRoute path="/receive" component={Receive} />
-              <ProtectedRoute path="/accounts/new" component={CreateAccount} />
+            <div className='window'>
+              <Route path='/loading' component={Loading} />
+              <ProtectedRoute exact path='/' component={Tokens} />
+              <ProtectedRoute path='/settings' component={Settings} />
+              <ProtectedRoute path='/send' component={Send} />
+              <ProtectedRoute path='/receive' component={Receive} />
+              <ProtectedRoute path='/accounts/new' component={CreateAccount} />
 
-              <nav className="primary-nav">
-                <Link to="/">Home</Link>
-                <Link to="/receive" className="icon -receive">
+              <nav className='primary-nav'>
+                <Link to='/'>Home</Link>
+                <Link to='/receive' className='icon -receive'>
                   Receive
                 </Link>
-                <Link to="/settings" className="icon -settings">
+                <Link to='/settings' className='icon -settings'>
                   Settings
                 </Link>
               </nav>
diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js
index c9c343df..52880142 100644
--- a/src/Settings/Settings.js
+++ b/src/Settings/Settings.js
@@ -8,7 +8,7 @@ import React, { Component } from 'react';
 import Accounts from '../Accounts';
 
 class Settings extends Component {
-  render() {
+  render () {
     return (
       <div>
         <h3>This is the settings page.</h3>
diff --git a/src/Tokens/EthBalance/EthBalance.js b/src/Tokens/EthBalance/EthBalance.js
index 26a12461..3deb19b3 100644
--- a/src/Tokens/EthBalance/EthBalance.js
+++ b/src/Tokens/EthBalance/EthBalance.js
@@ -14,9 +14,9 @@ import light from '../../hoc';
   balance: ({ address }) => balanceOf$(address)
 })
 class EthBalance extends Component {
-  render() {
+  render () {
     return (
-      <Link to="/send">
+      <Link to='/send'>
         <BalanceLayout {...this.props} />
       </Link>
     );
diff --git a/src/stores/createAccountStore.js b/src/stores/createAccountStore.js
index f75f1e96..b2300273 100644
--- a/src/stores/createAccountStore.js
+++ b/src/stores/createAccountStore.js
@@ -3,7 +3,6 @@
 //
 // SPDX-License-Identifier: MIT
 
-import Api from '@parity/api';
 import { action, observable } from 'mobx';
 
 import parityStore from './parityStore';
@@ -15,7 +14,7 @@ class CreateAccountStore {
   @observable password = '';
   @observable phrase = null; // The 12-word seed phrase
 
-  constructor() {
+  constructor () {
     this.parityStore = parityStore;
   }
 
diff --git a/src/stores/parityStore.js b/src/stores/parityStore.js
index e35e2344..a62c4378 100644
--- a/src/stores/parityStore.js
+++ b/src/stores/parityStore.js
@@ -20,7 +20,7 @@ class ParityStore {
   @observable isParityRunning = false;
   @observable token = null;
 
-  constructor() {
+  constructor () {
     // Retrieve token from localStorage
     const token = store.get(LS_KEY);
     if (token) {
diff --git a/src/stores/tokensStore.js b/src/stores/tokensStore.js
index a3618954..f3939a2b 100644
--- a/src/stores/tokensStore.js
+++ b/src/stores/tokensStore.js
@@ -14,7 +14,7 @@ const LS_KEY = `${LS_PREFIX}tokens`;
 class TokensStore {
   @observable tokens = new Map();
 
-  constructor() {
+  constructor () {
     const value = store.get(LS_KEY);
 
     if (!value) {
-- 
GitLab


From 6e702d8377c9feb78aad63ac0aef32ad302c033a Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@gmail.com>
Date: Tue, 8 May 2018 18:21:22 +0200
Subject: [PATCH 7/8] Fix bug metadata

---
 src/Accounts/Accounts.js         |  3 +--
 src/stores/createAccountStore.js | 16 ++++++----------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js
index fc114416..ba164b9e 100644
--- a/src/Accounts/Accounts.js
+++ b/src/Accounts/Accounts.js
@@ -41,8 +41,7 @@ class Accounts extends Component {
         )}
 
         <p>
-          {/* @brian TODO Inline style is ugly */}
-          <Link to='/accounts/new' style={{ color: 'white' }}>
+          <Link to='/accounts/new'>
             <button>Create new account</button>
           </Link>
         </p>
diff --git a/src/stores/createAccountStore.js b/src/stores/createAccountStore.js
index b2300273..a83781a5 100644
--- a/src/stores/createAccountStore.js
+++ b/src/stores/createAccountStore.js
@@ -36,16 +36,12 @@ class CreateAccountStore {
     return api.parity
       .newAccountFromPhrase(this.phrase, this.password)
       .then(address => api.parity.setAccountName(this.address, this.name))
-      .then(() => api.parity.setAccountMeta(this.address, {}));
-    // .then(() =>
-    //   api.parity.setAccountMeta(
-    //     this.address,
-    //     JSON.stringify({
-    //       createdAt: Date.now(),
-    //       passwordHint: this.hint
-    //     }).replace('"', '\\"')
-    //   )
-    // );
+      .then(() =>
+        api.parity.setAccountMeta(this.address, {
+          createdAt: Date.now(),
+          passwordHint: this.hint
+        })
+      );
   };
 
   @action
-- 
GitLab


From ea5c92c95eb0445f9291c4d935519d65e90b2db8 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@gmail.com>
Date: Tue, 8 May 2018 18:30:23 +0200
Subject: [PATCH 8/8] Use timestamp instead of createdAt

---
 src/stores/createAccountStore.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/createAccountStore.js b/src/stores/createAccountStore.js
index a83781a5..23ff68de 100644
--- a/src/stores/createAccountStore.js
+++ b/src/stores/createAccountStore.js
@@ -38,7 +38,7 @@ class CreateAccountStore {
       .then(address => api.parity.setAccountName(this.address, this.name))
       .then(() =>
         api.parity.setAccountMeta(this.address, {
-          createdAt: Date.now(),
+          timestamp: Date.now(),
           passwordHint: this.hint
         })
       );
-- 
GitLab