From 3fe05c51b0f2435146d1bc3c6c744522dc21ed73 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 27 Jun 2018 11:31:45 +0200 Subject: [PATCH 1/3] Add cursor pointer for clarity (fix #108) --- packages/fether-react/src/assets/sass/layouts/_wrapper.scss | 1 + packages/fether-react/src/assets/sass/shared/_basics.scss | 2 +- packages/fether-react/src/assets/sass/shared/_box.scss | 2 +- packages/fether-react/src/assets/sass/shared/_button.scss | 1 + 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/fether-react/src/assets/sass/layouts/_wrapper.scss b/packages/fether-react/src/assets/sass/layouts/_wrapper.scss index b6102e08..92b37d70 100644 --- a/packages/fether-react/src/assets/sass/layouts/_wrapper.scss +++ b/packages/fether-react/src/assets/sass/layouts/_wrapper.scss @@ -47,6 +47,7 @@ bottom: 0; left: 0; min-height: 7.5rem; + opacity: 0.7; position: absolute; right: 0; top: 0; diff --git a/packages/fether-react/src/assets/sass/shared/_basics.scss b/packages/fether-react/src/assets/sass/shared/_basics.scss index 4482849b..0a1f0695 100644 --- a/packages/fether-react/src/assets/sass/shared/_basics.scss +++ b/packages/fether-react/src/assets/sass/shared/_basics.scss @@ -23,6 +23,6 @@ a:visited { color: $black; text-decoration: none; &:hover { - cursor: default; + cursor: pointer; } } diff --git a/packages/fether-react/src/assets/sass/shared/_box.scss b/packages/fether-react/src/assets/sass/shared/_box.scss index df927c7d..b069b4a5 100644 --- a/packages/fether-react/src/assets/sass/shared/_box.scss +++ b/packages/fether-react/src/assets/sass/shared/_box.scss @@ -15,7 +15,7 @@ &:hover { border-color: $blue; box-shadow: 0 0.125rem 0.675rem rgba($black, 0.175); - cursor: default; + cursor: pointer; } &:active { border-color: $blue; diff --git a/packages/fether-react/src/assets/sass/shared/_button.scss b/packages/fether-react/src/assets/sass/shared/_button.scss index c5932197..55b6b0fc 100644 --- a/packages/fether-react/src/assets/sass/shared/_button.scss +++ b/packages/fether-react/src/assets/sass/shared/_button.scss @@ -12,6 +12,7 @@ &:hover { background-color: $blue; color: $white; + cursor: pointer; } &:active { -- GitLab From 415b6aa7a5c097335917248f0515254461fb4874 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 27 Jun 2018 12:40:47 +0200 Subject: [PATCH 2/3] Add opacity to error overlay --- packages/fether-react/src/assets/sass/layouts/_wrapper.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fether-react/src/assets/sass/layouts/_wrapper.scss b/packages/fether-react/src/assets/sass/layouts/_wrapper.scss index 92b37d70..5d07a1df 100644 --- a/packages/fether-react/src/assets/sass/layouts/_wrapper.scss +++ b/packages/fether-react/src/assets/sass/layouts/_wrapper.scss @@ -47,7 +47,7 @@ bottom: 0; left: 0; min-height: 7.5rem; - opacity: 0.7; + opacity: 0.98; position: absolute; right: 0; top: 0; -- GitLab From 808cc2d172b710549c9efb997af72b6506e5bb52 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 27 Jun 2018 14:05:21 +0200 Subject: [PATCH 3/3] Rework account creation (fix #107) --- .../AccountConfirm/AccountConfirm.js | 45 ---------- .../CreateAccount/AccountConfirm/index.js | 8 -- .../AccountCopyPhrase/AccountCopyPhrase.js | 60 +++++++------ .../CreateAccount/AccountName/AccountName.js | 66 ++++++++++---- .../AccountPassword/AccountPassword.js | 87 +++++++++--------- .../AccountRewritePhrase.js | 85 ++++++++++++------ .../Accounts/CreateAccount/CreateAccount.js | 88 +++++++++---------- .../CreateAccountContainer.js | 30 ------- .../CreateAccountContainer/index.js | 8 -- .../src/stores/createAccountStore.js | 11 +-- 10 files changed, 229 insertions(+), 259 deletions(-) delete mode 100644 packages/fether-react/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js delete mode 100644 packages/fether-react/src/Accounts/CreateAccount/AccountConfirm/index.js delete mode 100644 packages/fether-react/src/Accounts/CreateAccount/CreateAccountContainer/CreateAccountContainer.js delete mode 100644 packages/fether-react/src/Accounts/CreateAccount/CreateAccountContainer/index.js diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js b/packages/fether-react/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js deleted file mode 100644 index a9d6fa5e..00000000 --- a/packages/fether-react/src/Accounts/CreateAccount/AccountConfirm/AccountConfirm.js +++ /dev/null @@ -1,45 +0,0 @@ -// Copyright 2015-2018 Parity Technologies (UK) Ltd. -// This file is part of Parity. -// -// SPDX-License-Identifier: BSD-3-Clause - -import React, { Component } from 'react'; -import { inject, observer } from 'mobx-react'; - -import CreateAccountContainer from '../CreateAccountContainer'; - -@inject('createAccountStore', 'onboardingStore') -@observer -class AccountConfirm extends Component { - handleSubmit = () => { - const { createAccountStore, history, onboardingStore } = this.props; - - // If we were onboarding, set isFirstRun to false, so that we quit - // onboarding. - if (onboardingStore.isFirstRun) { - onboardingStore.setIsFirstRun(false); - } - - createAccountStore.saveAccountToParity().then(() => { - createAccountStore.clear(); - history.push('/accounts'); - }); - }; - - render () { - return ( - -
-

Ready to create account?

-
- - - ); - } -} - -export default AccountConfirm; diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountConfirm/index.js b/packages/fether-react/src/Accounts/CreateAccount/AccountConfirm/index.js deleted file mode 100644 index 30b40797..00000000 --- a/packages/fether-react/src/Accounts/CreateAccount/AccountConfirm/index.js +++ /dev/null @@ -1,8 +0,0 @@ -// Copyright 2015-2018 Parity Technologies (UK) Ltd. -// This file is part of Parity. -// -// SPDX-License-Identifier: BSD-3-Clause - -import AccountConfirm from './AccountConfirm'; - -export default AccountConfirm; diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js b/packages/fether-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js index 7b66f61f..c5653b12 100644 --- a/packages/fether-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js +++ b/packages/fether-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js @@ -4,47 +4,53 @@ // SPDX-License-Identifier: BSD-3-Clause import React, { Component } from 'react'; +import { AccountCard } from 'fether-ui'; import { inject, observer } from 'mobx-react'; import { Link } from 'react-router-dom'; -import CreateAccountContainer from '../CreateAccountContainer'; - @inject('createAccountStore') @observer class AccountCopyPhrase extends Component { render () { const { - createAccountStore: { phrase }, + createAccountStore: { address, name, phrase }, location: { pathname } } = this.props; const currentStep = pathname.slice(-1); return ( - -
-

Please write your secret phrase on a piece of paper:

-
-
{phrase}
-
-
- Keep it secure and secret. -
    -
  • - If you lose your secret phrase, your wallet cannot be recovered. -
    • -
  • - If someone gets hold of your secret phrase, they will be able to - drain your account. -
    • -
+ +
+

Please write your secret phrase on a piece of paper:

+
+
{phrase}
+
+
+ Keep it secure and secret. +
    +
  • + If you lose your secret phrase, your wallet cannot be + recovered. +
    • +
  • + If someone gets hold of your secret phrase, they will be + able to drain your account. +
    • +
+
+
+
-
- - + ]} + /> ); } } diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js b/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js index 92ee44c9..51e584aa 100644 --- a/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js +++ b/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js @@ -4,12 +4,11 @@ // SPDX-License-Identifier: BSD-3-Clause import React, { Component } from 'react'; -import { FormField } from 'fether-ui'; +import { AccountCard, Card, FormField } from 'fether-ui'; +import Blockies from 'react-blockies'; import { inject, observer } from 'mobx-react'; import { Link } from 'react-router-dom'; -import CreateAccountContainer from '../CreateAccountContainer'; - @inject('createAccountStore') @observer class AccountName extends Component { @@ -26,23 +25,56 @@ class AccountName extends Component { render () { const { - createAccountStore: { generateNewAccount, isImport, name }, - location: { pathname } + createAccountStore: { isImport } + } = this.props; + + return isImport ? this.renderCardWhenImported() : this.renderCardWhenNew(); + } + + renderCardWhenImported = () => { + const { + createAccountStore: { address, name } } = this.props; - const currentStep = pathname.slice(-1); return ( - - {!isImport && ( -
-
- )} + + + ); + }; + + renderDrawer = () => { + const { + createAccountStore: { name }, + location: { pathname } + } = this.props; + const currentStep = pathname.slice(-1); + + return ( +

Please give this account a name:

@@ -64,9 +96,9 @@ class AccountName extends Component { )} - +
); - } + }; } export default AccountName; diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js b/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js index 2b5cea63..668e67e9 100644 --- a/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js +++ b/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js @@ -4,11 +4,9 @@ // SPDX-License-Identifier: BSD-3-Clause import React, { Component } from 'react'; -import { FormField } from 'fether-ui'; +import { AccountCard, FormField } from 'fether-ui'; import { inject, observer } from 'mobx-react'; -import CreateAccountContainer from '../CreateAccountContainer'; - @inject('createAccountStore') @observer class AccountPassword extends Component { @@ -25,55 +23,62 @@ class AccountPassword extends Component { this.setState({ password: value }); }; - handleSubmit = () => { - const { - createAccountStore, - history, - location: { pathname } - } = this.props; + handleSubmit = event => { + const { createAccountStore, history } = this.props; const { password } = this.state; - createAccountStore.setPassword(password); - const currentStep = pathname.slice(-1); - history.push(`/accounts/new/${+currentStep + 1}`); + event.preventDefault(); + + // Save to parity + createAccountStore.saveAccountToParity(password).then(() => { + createAccountStore.clear(); + history.push('/accounts'); + }); }; render () { + const { + createAccountStore: { address, name } + } = this.props; const { confirm, password } = this.state; return ( - -
-
-

Secure your account with a password:

-
+ +
+

Secure your account with a password:

+
- + - + - - -
+ + + ]} + /> ); } } diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js b/packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js index c566f059..e56fae42 100644 --- a/packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js +++ b/packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js @@ -4,19 +4,32 @@ // SPDX-License-Identifier: BSD-3-Clause import React, { Component } from 'react'; -import { FormField } from 'fether-ui'; +import { AccountCard, FormField } from 'fether-ui'; +import debounce from 'lodash/debounce'; import { inject, observer } from 'mobx-react'; -import CreateAccountContainer from '../CreateAccountContainer'; - @inject('createAccountStore') @observer class AccountRewritePhrase extends Component { state = { + isLoading: false, value: '' }; - handleChange = ({ target: { value } }) => this.setState({ value }); + handleChange = ({ target: { value } }) => { + const { + createAccountStore: { isImport } + } = this.props; + + this.setState({ value }); + + // If we're importing, we show the current address generated by the current + // recovery phrase + if (isImport) { + this.setState({ isLoading: true }); + this.handleSavePhrase(); + } + }; handleNextStep = () => { const { @@ -24,36 +37,54 @@ class AccountRewritePhrase extends Component { location: { pathname } } = this.props; const currentStep = pathname.slice(-1); + history.push(`/accounts/new/${+currentStep + 1}`); }; - handleSavePhrase = () => { + handleSavePhrase = debounce(() => { const { createAccountStore: { setPhrase } } = this.props; const { value } = this.state; - setPhrase(value).then(this.handleNextStep); - }; + + return setPhrase(value).then(() => { + this.setState({ isLoading: false }); + }); + }, 1000); render () { + const { + createAccountStore: { address, isImport, name } + } = this.props; const { value } = this.state; return ( - -
-

- Type your secret phrase to confirm that you wrote it down correctly: -

-
- - } - label='Recovery phrase' - /> - - - + +
+ {isImport ? ( +

Type your Recovery phrase

+ ) : ( +

+ Type your secret phrase to confirm that you wrote it down + correctly: +

+ )} +
+ + } + label='Recovery phrase' + /> + + + + ]} + /> ); } @@ -61,7 +92,7 @@ class AccountRewritePhrase extends Component { const { createAccountStore: { isImport, phrase } } = this.props; - const { value } = this.state; + const { isLoading, value } = this.state; // If we are creating a new account, the button just checks the phrase has // been correctly written by the user. @@ -69,7 +100,7 @@ class AccountRewritePhrase extends Component { return ( diff --git a/packages/fether-react/src/Accounts/CreateAccount/CreateAccount.js b/packages/fether-react/src/Accounts/CreateAccount/CreateAccount.js index 92b6309c..104b107c 100644 --- a/packages/fether-react/src/Accounts/CreateAccount/CreateAccount.js +++ b/packages/fether-react/src/Accounts/CreateAccount/CreateAccount.js @@ -8,14 +8,13 @@ import { accountsInfo$ } from '@parity/light.js'; import { Header } from 'fether-ui'; import { inject, observer } from 'mobx-react'; import light from 'light-hoc'; -import memoize from 'lodash/memoize'; -import { Route } from 'react-router-dom'; +import { Link, Route } from 'react-router-dom'; -import AccountConfirm from './AccountConfirm'; import AccountCopyPhrase from './AccountCopyPhrase'; import AccountName from './AccountName'; import AccountPassword from './AccountPassword'; import AccountRewritePhrase from './AccountRewritePhrase'; +import Health from '../../Health'; @light({ accountsInfo: accountsInfo$ }) @inject('createAccountStore') @@ -25,17 +24,10 @@ class CreateAccount extends Component { * Creating account and importing accounts have different processes: 4 steps * for importing, and 5 steps for creating */ - getSteps = memoize(isImport => { - return isImport - ? [AccountRewritePhrase, AccountName, AccountPassword, AccountConfirm] - : [ - AccountName, - AccountCopyPhrase, - AccountRewritePhrase, - AccountPassword, - AccountConfirm - ]; - }); + getSteps = isImport => + isImport + ? [AccountRewritePhrase, AccountName, AccountPassword] + : [AccountName, AccountCopyPhrase, AccountRewritePhrase, AccountPassword]; handleToggleCreateImport = () => { const { @@ -53,14 +45,12 @@ class CreateAccount extends Component { } }; - handleGoBack = () => this.props.history.goBack(); - render () { const { accountsInfo, createAccountStore: { isImport }, match: { - params: { step } // Current step in account creation process + params: { step } } } = this.props; @@ -71,14 +61,12 @@ class CreateAccount extends Component {
1 - (step > 1 || - (accountsInfo && Object.keys(accountsInfo).length > 0)) && ( - + // Show back button if we already have some accounts, so we can go back to AccountsList + accountsInfo && + Object.keys(accountsInfo).length > 0 && ( + Back - + ) } title={ @@ -99,29 +87,35 @@ class CreateAccount extends Component {
); diff --git a/packages/fether-react/src/Accounts/CreateAccount/CreateAccountContainer/CreateAccountContainer.js b/packages/fether-react/src/Accounts/CreateAccount/CreateAccountContainer/CreateAccountContainer.js deleted file mode 100644 index d1f98420..00000000 --- a/packages/fether-react/src/Accounts/CreateAccount/CreateAccountContainer/CreateAccountContainer.js +++ /dev/null @@ -1,30 +0,0 @@ -// Copyright 2015-2018 Parity Technologies (UK) Ltd. -// This file is part of Parity. -// -// SPDX-License-Identifier: BSD-3-Clause - -import React, { Component } from 'react'; -import { AccountCard } from 'fether-ui'; -import { inject, observer } from 'mobx-react'; - -@inject('createAccountStore') -@observer -class CreateAccountHeader extends Component { - render () { - const { - children, - createAccountStore: { address, name } - } = this.props; - - return ( - {children}]} - /> - ); - } -} - -export default CreateAccountHeader; diff --git a/packages/fether-react/src/Accounts/CreateAccount/CreateAccountContainer/index.js b/packages/fether-react/src/Accounts/CreateAccount/CreateAccountContainer/index.js deleted file mode 100644 index a4493f4d..00000000 --- a/packages/fether-react/src/Accounts/CreateAccount/CreateAccountContainer/index.js +++ /dev/null @@ -1,8 +0,0 @@ -// Copyright 2015-2018 Parity Technologies (UK) Ltd. -// This file is part of Parity. -// -// SPDX-License-Identifier: BSD-3-Clause - -import CreateAccountContainer from './CreateAccountContainer'; - -export default CreateAccountContainer; diff --git a/packages/fether-react/src/stores/createAccountStore.js b/packages/fether-react/src/stores/createAccountStore.js index 604458af..0c605a2f 100644 --- a/packages/fether-react/src/stores/createAccountStore.js +++ b/packages/fether-react/src/stores/createAccountStore.js @@ -11,7 +11,6 @@ class CreateAccountStore { @observable address = null; @observable isImport = 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 /** @@ -20,16 +19,15 @@ class CreateAccountStore { clear () { this.setAddress(null); this.setName(''); - this.setPassword(''); } generateNewAccount = () => { return parityStore.api.parity.generateSecretPhrase().then(this.setPhrase); }; - saveAccountToParity = () => { + saveAccountToParity = password => { return parityStore.api.parity - .newAccountFromPhrase(this.phrase, this.password) + .newAccountFromPhrase(this.phrase, password) .then(() => parityStore.api.parity.setAccountName(this.address, this.name) ) @@ -59,11 +57,6 @@ class CreateAccountStore { this.name = name; }; - @action - setPassword = password => { - this.password = password; - }; - @action setPhrase = phrase => { this.phrase = phrase; -- GitLab