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 a9d6fa5ee7f8f1ef30c3489eb930a6733c7aea99..0000000000000000000000000000000000000000 --- 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 30b407974486f9eeaeafd8382b487f499e61301f..0000000000000000000000000000000000000000 --- 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 7b66f61f80fac2bd9363e399915fb69d8cc82a74..c5653b1293181a7d8716a4629a228d4949a9e072 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 92ee44c930ec11bf54997253c021f7f53a9753df..51e584aa404990482eb624afc81e12f2b0cc23b9 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 2b5cea63407118b215ea5d5a93d8092847630dcd..668e67e9b1ad63bf39cbe4f1398f3a196b7319a5 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 c566f059e9adcccca4aa5e435eaa3c22744921cc..e56fae42aeee6e1551063822881746192425ee18 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 92b6309ce0a26f09df2680305761066013e9da88..104b107c0287a4fe74443fd4034396852e5db073 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 d1f98420ec3a600cf526d98cc3fe068b15219238..0000000000000000000000000000000000000000 --- 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 a4493f4dce0aca3d15bc945bccf09470354792ab..0000000000000000000000000000000000000000 --- 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/assets/sass/layouts/_wrapper.scss b/packages/fether-react/src/assets/sass/layouts/_wrapper.scss index b6102e08b4fa894441fb4edbb24afc68a510b693..5d07a1df842c2ba1d0d8e802cec48941ba0e0c54 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.98; 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 4482849bf0ab2a62bde6c5c52927a096d8f388a5..0a1f0695f109c6518c3396a000e5cbcdc644ba1b 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 df927c7def615455f02324a0ca9736f41824a619..b069b4a5a21eca351bd4a4ad47f815451bc765c4 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 c593219782bed3efa936f396266bdfbc54752ded..55b6b0fc1507118dba386fea680ba6564a5673d8 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 { diff --git a/packages/fether-react/src/stores/createAccountStore.js b/packages/fether-react/src/stores/createAccountStore.js index 604458afe31cf0564dfa9db6d937402548e4fef4..0c605a2fc443312232dd4b5961734e170178b0f9 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;