-
+
-
+
{password && confirm === password
?
- : }
+ : }
@@ -106,4 +98,4 @@ class CreateAccountStep4 extends Component {
}
}
-export default CreateAccountStep4;
+export default AccountPassword;
diff --git a/src/Accounts/CreateAccount/CreateAccountStep2/index.js b/src/Accounts/CreateAccount/AccountPassword/index.js
similarity index 57%
rename from src/Accounts/CreateAccount/CreateAccountStep2/index.js
rename to src/Accounts/CreateAccount/AccountPassword/index.js
index c9ab4570e3974fbae7c6b0b19491784e9f02c056..a7e70fcc0d04d2b7384f0af0cb863dc6bd49d6ea 100644
--- a/src/Accounts/CreateAccount/CreateAccountStep2/index.js
+++ b/src/Accounts/CreateAccount/AccountPassword/index.js
@@ -3,6 +3,6 @@
//
// SPDX-License-Identifier: MIT
-import CreateAccountStep2 from './CreateAccountStep2';
+import AccountPassword from './AccountPassword';
-export default CreateAccountStep2;
+export default AccountPassword;
diff --git a/src/Accounts/CreateAccount/AccountPlaceholder/AccountPlaceholder.js b/src/Accounts/CreateAccount/AccountPlaceholder/AccountPlaceholder.js
new file mode 100644
index 0000000000000000000000000000000000000000..1702b56d8e77fb76e6b2d526f7c4fe4ee827e246
--- /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 0000000000000000000000000000000000000000..ec2c8232e9c37820edcab250551c2d51d9c1101b
--- /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
new file mode 100644
index 0000000000000000000000000000000000000000..8c770b8f4b69820769bf84ffc5c0ebe08ab6c726
--- /dev/null
+++ b/src/Accounts/CreateAccount/AccountWritePhrase/AccountWritePhrase.js
@@ -0,0 +1,88 @@
+// 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 AccountPlaceholder from '../AccountPlaceholder';
+import CreateAccountHeader from '../CreateAccountHeader';
+
+@inject('createAccountStore')
+@observer
+class AccountWritePhrase extends Component {
+ state = {
+ value: ''
+ };
+
+ handleChange = ({ target: { value } }) => this.setState({ value });
+
+ handleNextStep = () => {
+ const { history, location: { pathname } } = this.props;
+ const currentStep = pathname.slice(-1);
+ history.push(`/accounts/new/${+currentStep + 1}`);
+ };
+
+ handleSavePhrase = () => {
+ const { createAccountStore: { setPhrase } } = this.props;
+ const { value } = this.state;
+ setPhrase(value).then(this.handleNextStep);
+ };
+
+ render () {
+ const { createAccountStore: { isImport } } = this.props;
+ const { value } = this.state;
+
+ return (
+
+
+
+ {isImport ?
:
}
+
+
+
Please write your recovery phrase here:
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ renderButton = () => {
+ const { createAccountStore: { isImport, 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 (!isImport) {
+ return (
+
+ );
+ }
+
+ // If we are importing an existing account, the button sets the phrase
+ return (
+
+ );
+ };
+}
+
+export default AccountWritePhrase;
diff --git a/src/Accounts/CreateAccount/AccountWritePhrase/index.js b/src/Accounts/CreateAccount/AccountWritePhrase/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..a798c9c5fa7c4e34602565369e2a5a679deb88b6
--- /dev/null
+++ b/src/Accounts/CreateAccount/AccountWritePhrase/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import AccountWritePhrase from './AccountWritePhrase';
+
+export default AccountWritePhrase;
diff --git a/src/Accounts/CreateAccount/CreateAccount.js b/src/Accounts/CreateAccount/CreateAccount.js
index 252cf2ce29dd49ac6cf565db59b57e3c564f7cf7..10fef5d4c6f412c67be53f07cee4797d20730544 100644
--- a/src/Accounts/CreateAccount/CreateAccount.js
+++ b/src/Accounts/CreateAccount/CreateAccount.js
@@ -3,17 +3,45 @@
//
// SPDX-License-Identifier: MIT
-import React, { PureComponent } from 'react';
-import { Route, Link } from 'react-router-dom';
+import React, { Component } from 'react';
+import { Link, Route } from 'react-router-dom';
+import { inject, observer } from 'mobx-react';
+import memoize from 'lodash/memoize';
-import Step1 from './CreateAccountStep1';
-import Step2 from './CreateAccountStep2';
-import Step3 from './CreateAccountStep3';
-import Step4 from './CreateAccountStep4';
-import Step5 from './CreateAccountStep5';
+import AccountConfirm from './AccountConfirm';
+import AccountCopyPhrase from './AccountCopyPhrase';
+import AccountName from './AccountName';
+import AccountPassword from './AccountPassword';
+import AccountWritePhrase from './AccountWritePhrase';
+
+@inject('createAccountStore')
+@observer
+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
+ ? [AccountWritePhrase, AccountName, AccountPassword, AccountConfirm]
+ : [
+ AccountName,
+ AccountCopyPhrase,
+ AccountWritePhrase,
+ AccountPassword,
+ AccountConfirm
+ ];
+ });
-class CreateAccount extends PureComponent {
render () {
+ const {
+ createAccountStore: { isImport },
+ match: { params: { step } } // Current step
+ } = this.props;
+
+ // Get all the steps of our account process
+ const Steps = this.getSteps(isImport);
+
return (
- Create a new account
+ {isImport ? 'Import account' : 'Create a new account'}
-
-
-
-
-
+ {Steps.map((_, index) =>
+
index ? '-complete' : ''
+ ].join(' ')}
+ key={`progress-indicator_step${index + 1}`}
+ />
+ )}
-
-
-
-
-
+ {Steps.map((StepComponent, index) =>
+
+ )}
);
diff --git a/src/Accounts/CreateAccount/CreateAccountHeader/CreateAccountHeader.js b/src/Accounts/CreateAccount/CreateAccountHeader/CreateAccountHeader.js
new file mode 100644
index 0000000000000000000000000000000000000000..bd17ef5f46086b847296d45458deb9593528cf88
--- /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 0000000000000000000000000000000000000000..a66f4362693e151cc80941a299256b293f5884d7
--- /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/CreateAccountStep3/CreateAccountStep3.js b/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
deleted file mode 100644
index 71296efa9bdc1b82ae37e93d3482b40162c5ea33..0000000000000000000000000000000000000000
--- a/src/Accounts/CreateAccount/CreateAccountStep3/CreateAccountStep3.js
+++ /dev/null
@@ -1,69 +0,0 @@
-// 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';
-import { Link } from 'react-router-dom';
-
-@inject('createAccountStore')
-@observer
-class CreateAccountStep3 extends Component {
- state = {
- value: ''
- };
-
- handleChange = ({ target: { value } }) => this.setState({ value });
-
- render () {
- const { createAccountStore: { address, name, phrase } } = this.props;
- const { value } = this.state;
-
- return (
-
-
-
-
-
-
-
-
-
- {name || Account}
-
-
- {address}
-
-
-
-
-
-
Please write your recovery phrase here:
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
-
-export default CreateAccountStep3;
diff --git a/src/Accounts/CreateAccount/CreateAccountStep5/index.js b/src/Accounts/CreateAccount/CreateAccountStep5/index.js
deleted file mode 100644
index 07ea8a6b582c8bacfb83ade7394a3c39171355e3..0000000000000000000000000000000000000000
--- a/src/Accounts/CreateAccount/CreateAccountStep5/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// 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.css b/src/App/App.css
index 8ecd93eda9b5d9dbfd5a7e6e3caf263979f262e1..08ad8c92072aa40a60c249aea0aa1fe892fb2d68 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 b37d0b23c211b6d53b33ebf7dc896b0569630027..d3c5d3101feb6f5f3533d80b978631bbc13be9b5 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 1cfbbb4c3b28ee0998d744fda4756833ddb792c8..59429b7defd503ff4747d0738dd519f15ed6f22a 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 fdc028f3f9df56a9393983f68b483a71810cbce6..8a15ef8e4f214886af4741dfde37fccf06928577 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 4416de41b060342b0770fd0ebe76ac69a65885ac..fc7820ccea99a6c29da68e50ba66226f7fec9cff 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 e5507598371892e49e1b3b624fe445ee7852daa4..70753e322cccd8af48334da3d7c647bf5471af81 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;
+ }
+ }
}
diff --git a/src/stores/createAccountStore.js b/src/stores/createAccountStore.js
index d9f60192bf8a025c9889571a3820225beff84f9e..75bb1ecbb7c978dbe2e7166f2c6e65f1dbef469f 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 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
@@ -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 = isImport => {
+ this.isImport = isImport;
+ };
+
@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));
};
}
diff --git a/yarn.lock b/yarn.lock
index f86394648d3f0b88223a7e9d383df5882c576211..bee3629e01d7bba6713315e00d4938b75d930f40 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"