From 5d4614ff627121bb61450cc2ea9ea69656136577 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Fri, 1 Jun 2018 14:06:31 +0200 Subject: [PATCH 1/6] Make account creation steps easier --- package.json | 2 +- src/Accounts/Accounts.js | 11 +++--- src/Accounts/CreateAccount/CreateAccount.js | 36 +++++++++++-------- .../CreateAccountStep1/CreateAccountStep1.js | 17 ++++++--- .../CreateAccountStep2/CreateAccountStep2.js | 2 +- .../CreateAccountStep3/CreateAccountStep3.js | 12 +++---- .../CreateAccountStep4/CreateAccountStep4.js | 12 ++++--- yarn.lock | 14 ++++++-- 8 files changed, 64 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index a7c6f97f..d9354580 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ }, "dependencies": { "@parity/api": "^2.1.22", - "@parity/light.js": "https://github.com/parity-js/light.js#aa03e7f2956718bf91f6f82771eee3b81d260a18", + "@parity/light.js": "https://github.com/parity-js/light.js#898e90f43327fd50d0560b8e4db6d5c670bc1b20", "async-retry": "^1.2.1", "axios": "^0.18.0", "checksum": "^0.1.1", diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js index 1e0eaea5..ffc8c371 100644 --- a/src/Accounts/Accounts.js +++ b/src/Accounts/Accounts.js @@ -7,7 +7,7 @@ import React, { Component } from 'react'; import { accountsInfo$ } from '@parity/light.js'; import Blockies from 'react-blockies'; import { inject, observer } from 'mobx-react'; -import { Link, Route, Switch } from 'react-router-dom'; +import { Link, Redirect, Route, Switch } from 'react-router-dom'; import CreateAccount from './CreateAccount/CreateAccount'; import light from '../hoc'; @@ -30,7 +30,8 @@ class Accounts extends Component { return ( - + + ); } @@ -44,12 +45,10 @@ class Accounts extends Component {
- - - - - + {Steps.map((StepComponent, index) => + + )}
); diff --git a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js index 6ef1fd7e..d5bf3a57 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js +++ b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js @@ -21,7 +21,7 @@ class CreateAccountStep1 extends Component { render () { const { createAccountStore: { address, generateNewAccount, name }, - location: { pathname } + match: { pathname } } = this.props; return ( @@ -44,8 +44,13 @@ class CreateAccountStep1 extends Component {
- {pathname === '/accounts/new/step1' && - } + {pathname === '/accounts/new/1' && + }
@@ -58,10 +63,12 @@ class CreateAccountStep1 extends Component {
diff --git a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js index b7752c6c..aee323ab 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js +++ b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js @@ -39,7 +39,7 @@ class CreateAccountStep2 extends Component { {phrase} diff --git a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js index 71296efa..2eb65b9f 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js +++ b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js @@ -44,19 +44,17 @@ class CreateAccountStep3 extends Component {
- +
diff --git a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js index 65f98fcf..d72451f2 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js +++ b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js @@ -33,7 +33,7 @@ class CreateAccountStep4 extends Component { const { hint, password } = this.state; createAccountStore.setPassword(password); createAccountStore.setHint(hint); - history.push('/accounts/new/step5'); + history.push('/accounts/new/5'); }; render () { @@ -64,7 +64,7 @@ class CreateAccountStep4 extends Component {
- +
- +
- + {password && confirm === password ? - : } + : }
diff --git a/yarn.lock b/yarn.lock index f8639464..bee3629e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -131,9 +131,9 @@ u2f-api "0.0.9" u2f-api-polyfill "0.4.3" -"@parity/light.js@https://github.com/parity-js/light.js#aa03e7f2956718bf91f6f82771eee3b81d260a18": +"@parity/light.js@https://github.com/parity-js/light.js#898e90f43327fd50d0560b8e4db6d5c670bc1b20": version "1.0.0" - resolved "https://github.com/parity-js/light.js#aa03e7f2956718bf91f6f82771eee3b81d260a18" + resolved "https://github.com/parity-js/light.js#898e90f43327fd50d0560b8e4db6d5c670bc1b20" dependencies: "@babel/runtime" "^7.0.0-beta.46" "@parity/api" "^2.1.22" @@ -2930,7 +2930,7 @@ es-to-primitive@^1.1.1: is-date-object "^1.0.1" is-symbol "^1.0.1" -es5-ext@^0.10.14, es5-ext@^0.10.30, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14, es5-ext@~0.10.2: +es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14: version "0.10.42" resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.42.tgz#8c07dd33af04d5dcd1310b5cef13bea63a89ba8d" dependencies: @@ -2938,6 +2938,14 @@ es5-ext@^0.10.14, es5-ext@^0.10.30, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~ es6-symbol "~3.1.1" next-tick "1" +es5-ext@^0.10.30, es5-ext@~0.10.2: + version "0.10.44" + resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.44.tgz#7a877e994bb190aebd4718aa2d62784a12e2ca20" + dependencies: + es6-iterator "~2.0.3" + es6-symbol "~3.1.1" + next-tick "1" + es6-error@4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.2.tgz#eec5c726eacef51b7f6b73c20db6e1b13b069c98" -- GitLab From bdbda91893b52a399a3df6c6532712f107b81d49 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Fri, 1 Jun 2018 14:17:03 +0200 Subject: [PATCH 2/6] Factorize CreateAccountHeader --- .../CreateAccountHeader.js | 34 +++++++++++++++++++ .../CreateAccountHeader/index.js | 8 +++++ .../CreateAccountStep1/CreateAccountStep1.js | 33 ++++++------------ .../CreateAccountStep2/CreateAccountStep2.js | 19 +++-------- .../CreateAccountStep3/CreateAccountStep3.js | 19 +++-------- .../CreateAccountStep4/CreateAccountStep4.js | 18 ++-------- .../CreateAccountStep5/CreateAccountStep5.js | 23 ++++--------- 7 files changed, 70 insertions(+), 84 deletions(-) create mode 100644 src/Accounts/CreateAccount/CreateAccountHeader/CreateAccountHeader.js create mode 100644 src/Accounts/CreateAccount/CreateAccountHeader/index.js diff --git a/src/Accounts/CreateAccount/CreateAccountHeader/CreateAccountHeader.js b/src/Accounts/CreateAccount/CreateAccountHeader/CreateAccountHeader.js new file mode 100644 index 00000000..bd17ef5f --- /dev/null +++ b/src/Accounts/CreateAccount/CreateAccountHeader/CreateAccountHeader.js @@ -0,0 +1,34 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import React, { Component } from 'react'; +import Blockie from 'react-blockies'; +import { inject, observer } from 'mobx-react'; + +@inject('createAccountStore') +@observer +class CreateAccountHeader extends Component { + render () { + const { createAccountStore: { address, name } } = this.props; + + return ( +
+
+ +
+
+
+ {name || Account} +
+
+ {address} +
+
+
+ ); + } +} + +export default CreateAccountHeader; diff --git a/src/Accounts/CreateAccount/CreateAccountHeader/index.js b/src/Accounts/CreateAccount/CreateAccountHeader/index.js new file mode 100644 index 00000000..a66f4362 --- /dev/null +++ b/src/Accounts/CreateAccount/CreateAccountHeader/index.js @@ -0,0 +1,8 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import CreateAccountHeader from './CreateAccountHeader'; + +export default CreateAccountHeader; diff --git a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js index d5bf3a57..6f222d49 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js +++ b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js @@ -4,10 +4,11 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; -import Blockie from 'react-blockies'; import { inject, observer } from 'mobx-react'; import { Link } from 'react-router-dom'; +import CreateAccountHeader from '../CreateAccountHeader'; + @inject('createAccountStore') @observer class CreateAccountStep1 extends Component { @@ -20,8 +21,7 @@ class CreateAccountStep1 extends Component { render () { const { - createAccountStore: { address, generateNewAccount, name }, - match: { pathname } + createAccountStore: { address, generateNewAccount, name } } = this.props; return ( @@ -29,28 +29,15 @@ class CreateAccountStep1 extends Component { {address &&
-
-
- -
-
-
- {name || Account} -
-
- {address} -
-
-
+
- {pathname === '/accounts/new/1' && - } +
diff --git a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js index aee323ab..7d976757 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js +++ b/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js @@ -4,33 +4,22 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; -import Blockie from 'react-blockies'; import { inject, observer } from 'mobx-react'; import { Link } from 'react-router-dom'; +import CreateAccountHeader from '../CreateAccountHeader'; + @inject('createAccountStore') @observer class CreateAccountStep2 extends Component { render () { - const { createAccountStore: { address, name, phrase } } = this.props; + const { createAccountStore: { phrase } } = this.props; return (
-
-
- -
-
-
- {name || Account} -
-
- {address} -
-
-
+

Please write your secret phrase on a piece of paper:

diff --git a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js index 2eb65b9f..b0f7ca95 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js +++ b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js @@ -4,10 +4,11 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; -import Blockie from 'react-blockies'; import { inject, observer } from 'mobx-react'; import { Link } from 'react-router-dom'; +import CreateAccountHeader from '../CreateAccountHeader'; + @inject('createAccountStore') @observer class CreateAccountStep3 extends Component { @@ -18,26 +19,14 @@ class CreateAccountStep3 extends Component { handleChange = ({ target: { value } }) => this.setState({ value }); render () { - const { createAccountStore: { address, name, phrase } } = this.props; + const { createAccountStore: { phrase } } = this.props; const { value } = this.state; return (
-
-
- -
-
-
- {name || Account} -
-
- {address} -
-
-
+

Please write your recovery phrase here:

diff --git a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js index d72451f2..d9c7defe 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js +++ b/src/Accounts/CreateAccount/CreateAccountStep4/CreateAccountStep4.js @@ -4,9 +4,10 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; -import Blockie from 'react-blockies'; import { inject, observer } from 'mobx-react'; +import CreateAccountHeader from '../CreateAccountHeader'; + @inject('createAccountStore') @observer class CreateAccountStep4 extends Component { @@ -37,26 +38,13 @@ class CreateAccountStep4 extends Component { }; render () { - const { createAccountStore: { address, name } } = this.props; const { confirm, hint, password } = this.state; return (
-
-
- -
-
-
- {name || Account} -
-
- {address} -
-
-
+
diff --git a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js index 99de3bc2..3c0d3e04 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js +++ b/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js @@ -4,9 +4,10 @@ // SPDX-License-Identifier: MIT import React, { Component } from 'react'; -import Blockie from 'react-blockies'; import { inject, observer } from 'mobx-react'; +import CreateAccountHeader from '../CreateAccountHeader'; + @inject('createAccountStore') @observer class CreateAccountStep5 extends Component { @@ -16,25 +17,13 @@ class CreateAccountStep5 extends Component { }; render () { - const { createAccountStore: { address, name, hint } } = this.props; + const { createAccountStore: { hint } } = this.props; return (
-
-
- -
-
-
- {name || Account} -
-
- {address} -
-
-
+

Ready to create account?

@@ -43,7 +32,9 @@ class CreateAccountStep5 extends Component { {hint}
-- GitLab From f5f7e0f8ce5c2d95b6d4ea282b94296c9e3b2102 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Fri, 1 Jun 2018 14:48:33 +0200 Subject: [PATCH 3/6] Import account --- .../CreateAccountStep1/CreateAccountStep1.js | 33 ++++++++++------ .../CreateAccountStep2/CreateAccountStep2.js | 9 ++++- .../CreateAccountStep3/CreateAccountStep3.js | 39 +++++++++++++++---- src/stores/createAccountStore.js | 17 ++++---- 4 files changed, 70 insertions(+), 28 deletions(-) diff --git a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js index 6f222d49..f4afd8fe 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js +++ b/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js @@ -16,12 +16,15 @@ class CreateAccountStep1 extends Component { this.props.createAccountStore.generateNewAccount(); } - handleChange = ({ target: { value } }) => + handleChangeIsImporting = ({ target: { checked } }) => + this.props.createAccountStore.setIsImporting(checked); + + handleChangeName = ({ target: { value } }) => this.props.createAccountStore.setName(value); render () { const { - createAccountStore: { address, generateNewAccount, name } + createAccountStore: { address, generateNewAccount, isImporting, name } } = this.props; return ( @@ -31,23 +34,31 @@ class CreateAccountStep1 extends Component {
-
- -
+ {!isImporting && +
+ +
}
+
@@ -51,6 +50,30 @@ class CreateAccountStep3 extends Component {
); } + + renderButton = () => { + const { createAccountStore: { isImporting, phrase } } = this.props; + const { value } = this.state; + + // If we are creating a new account, the button just checks the phrase has + // been correctly written by the user. + if (!isImporting) { + return value === phrase + ? + + + : ; + } + + // If we are importing an existing account, the button sets the phrase + return ( + + ); + }; } export default CreateAccountStep3; diff --git a/src/stores/createAccountStore.js b/src/stores/createAccountStore.js index d9f60192..1442ed67 100644 --- a/src/stores/createAccountStore.js +++ b/src/stores/createAccountStore.js @@ -10,6 +10,7 @@ import parityStore from './parityStore'; class CreateAccountStore { @observable address = null; @observable hint = ''; // Password hint (optional) + @observable isImporting = false; // Are we creating a new account, or importing via phrase? @observable name = ''; // Account name @observable password = ''; @observable phrase = null; // The 12-word seed phrase @@ -19,13 +20,7 @@ class CreateAccountStore { } generateNewAccount = () => { - return this.api.parity - .generateSecretPhrase() - .then(phrase => { - this.setPhrase(phrase); - return this.api.parity.phraseToAddress(phrase); - }) - .then(address => this.setAddress(address)); + return this.api.parity.generateSecretPhrase().then(this.setPhrase); }; saveAccountToParity = () => { @@ -45,6 +40,11 @@ class CreateAccountStore { this.address = address; }; + @action + setIsImporting = isImporting => { + this.isImporting = isImporting; + }; + @action setHint = hint => { this.hint = hint; @@ -63,6 +63,9 @@ class CreateAccountStore { @action setPhrase = phrase => { this.phrase = phrase; + return this.api.parity + .phraseToAddress(phrase) + .then(address => this.setAddress(address)); }; } -- GitLab From ff606ec99d4a106cec983de4f8ee7c55bf3c018b Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Fri, 1 Jun 2018 17:12:00 +0200 Subject: [PATCH 4/6] Make account/import distinction clearer --- src/Accounts/Accounts.js | 23 +++++++-- .../AccountConfirm.js} | 4 +- .../index.js | 4 +- .../AccountCopyPhrase.js} | 19 ++++--- .../index.js | 4 +- .../AccountName.js} | 22 +++------ .../index.js | 4 +- .../AccountPassword.js} | 10 ++-- .../index.js | 4 +- .../AccountWritePhrase.js} | 38 ++++++++------ .../CreateAccount/AccountWritePhrase/index.js | 8 +++ src/Accounts/CreateAccount/CreateAccount.js | 49 ++++++++++++++----- .../CreateAccount/CreateAccountStep5/index.js | 8 --- src/stores/createAccountStore.js | 6 +-- 14 files changed, 123 insertions(+), 80 deletions(-) rename src/Accounts/CreateAccount/{CreateAccountStep5/CreateAccountStep5.js => AccountConfirm/AccountConfirm.js} (93%) rename src/Accounts/CreateAccount/{CreateAccountStep3 => AccountConfirm}/index.js (57%) rename src/Accounts/CreateAccount/{CreateAccountStep2/CreateAccountStep2.js => AccountCopyPhrase/AccountCopyPhrase.js} (71%) rename src/Accounts/CreateAccount/{CreateAccountStep1 => AccountCopyPhrase}/index.js (57%) rename src/Accounts/CreateAccount/{CreateAccountStep1/CreateAccountStep1.js => AccountName/AccountName.js} (77%) rename src/Accounts/CreateAccount/{CreateAccountStep4 => AccountName}/index.js (57%) rename src/Accounts/CreateAccount/{CreateAccountStep4/CreateAccountStep4.js => AccountPassword/AccountPassword.js} (91%) rename src/Accounts/CreateAccount/{CreateAccountStep2 => AccountPassword}/index.js (57%) rename src/Accounts/CreateAccount/{CreateAccountStep3/CreateAccountStep3.js => AccountWritePhrase/AccountWritePhrase.js} (66%) create mode 100644 src/Accounts/CreateAccount/AccountWritePhrase/index.js delete mode 100644 src/Accounts/CreateAccount/CreateAccountStep5/index.js diff --git a/src/Accounts/Accounts.js b/src/Accounts/Accounts.js index ffc8c371..2da8a40c 100644 --- a/src/Accounts/Accounts.js +++ b/src/Accounts/Accounts.js @@ -7,7 +7,7 @@ import React, { Component } from 'react'; import { accountsInfo$ } from '@parity/light.js'; import Blockies from 'react-blockies'; import { inject, observer } from 'mobx-react'; -import { Link, Redirect, Route, Switch } from 'react-router-dom'; +import { Redirect, Route, Switch } from 'react-router-dom'; import CreateAccount from './CreateAccount/CreateAccount'; import light from '../hoc'; @@ -15,7 +15,7 @@ import light from '../hoc'; @light({ accountsInfo: accountsInfo$ }) -@inject('parityStore') +@inject('createAccountStore', 'parityStore') @observer class Accounts extends Component { handleClick = ({ currentTarget: { dataset: { address } } }) => { @@ -26,6 +26,16 @@ class Accounts extends Component { .then(() => history.push('/tokens')); }; + handleCreateAccount = () => { + this.props.createAccountStore.setIsImporting(false); + this.props.history.push('/accounts/new'); + }; + + handleImportAccount = () => { + this.props.createAccountStore.setIsImporting(true); + this.props.history.push('/accounts/new'); + }; + render () { return ( @@ -48,9 +58,14 @@ class Accounts extends Component {

Accounts

- + {/* @brian a onClick is not semantically correct, I just put it like this + because with
diff --git a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js b/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js similarity index 93% rename from src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js rename to src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js index 3c0d3e04..5695c32b 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep5/CreateAccountStep5.js +++ b/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js @@ -10,7 +10,7 @@ import CreateAccountHeader from '../CreateAccountHeader'; @inject('createAccountStore') @observer -class CreateAccountStep5 extends Component { +class AccountConfirm extends Component { handleSubmit = () => { const { createAccountStore: { saveAccountToParity }, history } = this.props; saveAccountToParity().then(() => history.push('/accounts')); @@ -44,4 +44,4 @@ class CreateAccountStep5 extends Component { } } -export default CreateAccountStep5; +export default AccountConfirm; diff --git a/src/Accounts/CreateAccount/CreateAccountStep3/index.js b/src/Accounts/CreateAccount/AccountConfirm/index.js similarity index 57% rename from src/Accounts/CreateAccount/CreateAccountStep3/index.js rename to src/Accounts/CreateAccount/AccountConfirm/index.js index 4234552c..cf1649cb 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep3/index.js +++ b/src/Accounts/CreateAccount/AccountConfirm/index.js @@ -3,6 +3,6 @@ // // SPDX-License-Identifier: MIT -import CreateAccountStep3 from './CreateAccountStep3'; +import AccountConfirm from './AccountConfirm'; -export default CreateAccountStep3; +export default AccountConfirm; diff --git a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js b/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js similarity index 71% rename from src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js rename to src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js index 2e841c7d..646977fa 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep2/CreateAccountStep2.js +++ b/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js @@ -5,20 +5,19 @@ import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; -import { Link, Redirect } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import CreateAccountHeader from '../CreateAccountHeader'; @inject('createAccountStore') @observer -class CreateAccountStep2 extends Component { +class AccountCopyPhrase extends Component { render () { - const { createAccountStore: { isImporting, phrase } } = this.props; - - // There's not Step2 if we are importing an existing account - if (isImporting) { - return ; - } + const { + createAccountStore: { phrase }, + location: { pathname } + } = this.props; + const currentStep = pathname.slice(-1); return (
@@ -33,7 +32,7 @@ class CreateAccountStep2 extends Component { {phrase}
@@ -45,4 +44,4 @@ class CreateAccountStep2 extends Component { } } -export default CreateAccountStep2; +export default AccountCopyPhrase; diff --git a/src/Accounts/CreateAccount/CreateAccountStep1/index.js b/src/Accounts/CreateAccount/AccountCopyPhrase/index.js similarity index 57% rename from src/Accounts/CreateAccount/CreateAccountStep1/index.js rename to src/Accounts/CreateAccount/AccountCopyPhrase/index.js index 4d231b66..e41cf4f6 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep1/index.js +++ b/src/Accounts/CreateAccount/AccountCopyPhrase/index.js @@ -3,6 +3,6 @@ // // SPDX-License-Identifier: MIT -import CreateAccountStep1 from './CreateAccountStep1'; +import AccountCopyPhrase from './AccountCopyPhrase'; -export default CreateAccountStep1; +export default AccountCopyPhrase; diff --git a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js b/src/Accounts/CreateAccount/AccountName/AccountName.js similarity index 77% rename from src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js rename to src/Accounts/CreateAccount/AccountName/AccountName.js index f4afd8fe..6be8ee8c 100644 --- a/src/Accounts/CreateAccount/CreateAccountStep1/CreateAccountStep1.js +++ b/src/Accounts/CreateAccount/AccountName/AccountName.js @@ -11,21 +11,20 @@ import CreateAccountHeader from '../CreateAccountHeader'; @inject('createAccountStore') @observer -class CreateAccountStep1 extends Component { +class AccountName extends Component { componentDidMount () { this.props.createAccountStore.generateNewAccount(); } - handleChangeIsImporting = ({ target: { checked } }) => - this.props.createAccountStore.setIsImporting(checked); - handleChangeName = ({ target: { value } }) => this.props.createAccountStore.setName(value); render () { const { - createAccountStore: { address, generateNewAccount, isImporting, name } + createAccountStore: { address, generateNewAccount, isImport, name }, + location: { pathname } } = this.props; + const currentStep = pathname.slice(-1); return (
@@ -34,7 +33,7 @@ class CreateAccountStep1 extends Component {
- {!isImporting && + {!isImport &&
-
+ +
); }; diff --git a/src/Accounts/CreateAccount/AccountPlaceholder/AccountPlaceholder.js b/src/Accounts/CreateAccount/AccountPlaceholder/AccountPlaceholder.js new file mode 100644 index 00000000..1702b56d --- /dev/null +++ b/src/Accounts/CreateAccount/AccountPlaceholder/AccountPlaceholder.js @@ -0,0 +1,28 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import React, { Component } from 'react'; + +class AccountPlaceholder extends Component { + render () { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+ ); + } +} + +export default AccountPlaceholder; diff --git a/src/Accounts/CreateAccount/AccountPlaceholder/index.js b/src/Accounts/CreateAccount/AccountPlaceholder/index.js new file mode 100644 index 00000000..ec2c8232 --- /dev/null +++ b/src/Accounts/CreateAccount/AccountPlaceholder/index.js @@ -0,0 +1,8 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: MIT + +import AccountPlaceholder from './AccountPlaceholder'; + +export default AccountPlaceholder; diff --git a/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js b/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js index ce608f68..8c770b8f 100644 --- a/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js +++ b/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js @@ -6,6 +6,7 @@ import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; +import AccountPlaceholder from '../AccountPlaceholder'; import CreateAccountHeader from '../CreateAccountHeader'; @inject('createAccountStore') @@ -37,7 +38,7 @@ class AccountWritePhrase extends Component {
- {isImport ?
blank space
: } + {isImport ? : }

Please write your recovery phrase here:

diff --git a/src/App/App.css b/src/App/App.css index 8ecd93ed..08ad8c92 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -775,14 +775,17 @@ a, a:link, a:visited { padding: 1rem; border-radius: 0.25rem; background-color: #fff; + border: 0px solid #fff; overflow: hidden; box-shadow: 0 0.125rem 0.5rem rgba(34, 34, 34, 0.125); } .box.-card.-clickable { transition: box-shadow ease 0.125s; } .box.-card.-clickable:hover { + border-color: #160DF6; box-shadow: 0 0.125rem 0.675rem rgba(34, 34, 34, 0.175); cursor: default; } .box.-card.-clickable:active { + border-color: #160DF6; box-shadow: 0 0.125rem 0.325rem rgba(34, 34, 34, 0.175); cursor: default; } .box.-card-drawer { @@ -820,7 +823,7 @@ a, a:link, a:visited { font-size: 0.69444rem; font-weight: 600; line-height: 1.3; - padding: 0.325rem 0.675rem 0.325rem; + padding: 0.325rem 0.675rem; text-transform: uppercase; } .button:hover { background-color: #160DF6; @@ -848,6 +851,18 @@ a, a:link, a:visited { background-color: transparent; } .button.-tiny.-reload { background-image: url("../assets/img/icons/reload.svg"); } + .button.-footer { + font-size: 0.69444rem; + border-width: 0; + background-color: #ddd; + color: rgba(34, 34, 34, 0.75); + padding: 0.25rem 0.75rem; + opacity: 0.8; + border-radius: 1rem; } + .button.-footer:hover { + opacity: 0.9; } + .button.-footer:active { + opacity: 1.0; } .form_field { margin: 0.5rem 0; @@ -1034,6 +1049,18 @@ a, a:link, a:visited { color: #888; font-size: 0.69444rem; line-height: 0.90278rem; } + .account.-placeholder .account_avatar_placeholder, .account.-placeholder .account_name_placeholder, .account.-placeholder .account_address_placeholder { + background: rgba(221, 221, 221, 0.5); } + .account.-placeholder .account_avatar_placeholder { + width: 2.3rem; + height: 2.3rem; } + .account.-placeholder .account_name_placeholder { + width: 100%; + height: 1.2rem; + margin-bottom: 0.325rem; } + .account.-placeholder .account_address_placeholder { + width: 100%; + height: 0.76389rem; } .status .status_icon { display: inline-block; @@ -1058,7 +1085,9 @@ a, a:link, a:visited { display: flex; justify-content: space-between; padding: 1rem 0.5rem; - position: relative; } + position: relative; + overflow: hidden; + height: 3.5rem; } .header-nav .header-nav_left, .header-nav .header-nav_right { display: flex; flex-direction: column; @@ -1136,6 +1165,13 @@ a, a:link, a:visited { color: #888; } .footer-nav .footer-nav_icons { padding: 1rem; } + .footer-nav .footer-nav_buttons { + width: 100%; + padding: 0.5rem; + display: flex; + justify-content: center; } + .footer-nav .footer-nav_buttons button { + margin-left: 0.5rem; } .footer-nav a, .footer-nav a:link, .footer-nav a:visited { diff --git a/src/assets/sass/components/_account.scss b/src/assets/sass/components/_account.scss index b37d0b23..d3c5d310 100644 --- a/src/assets/sass/components/_account.scss +++ b/src/assets/sass/components/_account.scss @@ -34,4 +34,26 @@ font-size: ms(-2); line-height: ms(-2) * 1.3; } + + &.-placeholder { + .account_avatar_placeholder, .account_name_placeholder, .account_address_placeholder { + background: rgba($faint,0.5); + } + + .account_avatar_placeholder { + width: (ms(0) * 1.3) + 1rem; + height: (ms(0) * 1.3) + 1rem; + } + + .account_name_placeholder { + width: 100%; + height: ms(0) * 1.2; + margin-bottom: 0.325rem; + } + + .account_address_placeholder { + width: 100%; + height: ms(-2) * 1.1; + } + } } diff --git a/src/assets/sass/components/_footer-nav.scss b/src/assets/sass/components/_footer-nav.scss index 1cfbbb4c..59429b7d 100644 --- a/src/assets/sass/components/_footer-nav.scss +++ b/src/assets/sass/components/_footer-nav.scss @@ -12,6 +12,17 @@ padding: 1rem; } + .footer-nav_buttons { + width: 100%; + padding: 0.5rem; + display: flex; + justify-content: center; + + button { + margin-left: 0.5rem; + } + } + a, a:link, a:visited { diff --git a/src/assets/sass/components/_header-nav.scss b/src/assets/sass/components/_header-nav.scss index fdc028f3..8a15ef8e 100644 --- a/src/assets/sass/components/_header-nav.scss +++ b/src/assets/sass/components/_header-nav.scss @@ -3,6 +3,8 @@ justify-content: space-between; padding: 1rem 0.5rem; position: relative; + overflow: hidden; + height: 3.5rem; .header-nav_left, .header-nav_right { display: flex; diff --git a/src/assets/sass/shared/_box.scss b/src/assets/sass/shared/_box.scss index 4416de41..fc7820cc 100644 --- a/src/assets/sass/shared/_box.scss +++ b/src/assets/sass/shared/_box.scss @@ -7,15 +7,18 @@ padding: 1rem; border-radius: 0.25rem; background-color: $eggshell; + border: 0px solid $eggshell; overflow: hidden; box-shadow: 0 0.125rem 0.5rem rgba($black,0.125); &.-clickable { transition: box-shadow ease 0.125s; &:hover { + border-color: $blue; box-shadow: 0 0.125rem 0.675rem rgba($black,0.175); cursor: default; } &:active { + border-color: $blue; box-shadow: 0 0.125rem 0.325rem rgba($black,0.175); cursor: default; } diff --git a/src/assets/sass/shared/_button.scss b/src/assets/sass/shared/_button.scss index e5507598..70753e32 100644 --- a/src/assets/sass/shared/_button.scss +++ b/src/assets/sass/shared/_button.scss @@ -6,7 +6,7 @@ font-size: ms(-2); font-weight: 600; line-height: 1.3; - padding: 0.325rem 0.675rem 0.325rem; + padding: 0.325rem 0.675rem; text-transform: uppercase; &:hover { @@ -46,4 +46,22 @@ background-image: url('../assets/img/icons/reload.svg'); } } + + &.-footer { + font-size: ms(-2); + border-width: 0; + background-color: $faint; + color: rgba($black,0.75); + padding: 0.25rem 0.75rem; + opacity: 0.8; + border-radius: 1rem; + + &:hover { + opacity: 0.9; + } + + &:active { + opacity: 1.0; + } + } } -- GitLab