);
}
diff --git a/js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.css b/js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.css
deleted file mode 100644
index aa60d2321..000000000
--- a/js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
-/* This file is part of Parity.
-/*
-/* Parity is free software: you can redistribute it and/or modify
-/* it under the terms of the GNU General Public License as published by
-/* the Free Software Foundation, either version 3 of the License, or
-/* (at your option) any later version.
-/*
-/* Parity is distributed in the hope that it will be useful,
-/* but WITHOUT ANY WARRANTY; without even the implied warranty of
-/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-/* GNU General Public License for more details.
-/*
-/* You should have received a copy of the GNU General Public License
-/* along with Parity. If not, see .
-*/
-
-.address {
- color: #999;
- line-height: 1.618em;
- padding-left: 2em;
- padding-top: 1em;
-}
diff --git a/js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js b/js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js
index 588586c62..7e2e89f3d 100644
--- a/js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js
+++ b/js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js
@@ -18,7 +18,10 @@ import { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
-import styles from './accountDetailsGeth.css';
+import { SectionList } from '~/ui';
+import GethCard from '../GethCard';
+
+import styles from '../createAccount.css';
@observer
export default class AccountDetailsGeth extends Component {
@@ -27,33 +30,37 @@ export default class AccountDetailsGeth extends Component {
}
render () {
- const { gethImported } = this.props.store;
+ const { gethAccountsAvailable, gethImported } = this.props.store;
+
+ const accounts = gethAccountsAvailable.filter((account) => gethImported.includes(account.address));
return (
+
+ );
+ }
+
+ isSelected = (item) => {
+ const { createType } = this.props.store;
+
+ return item.key === createType;
+ }
+
+ onChange = (item) => {
const { store } = this.props;
- store.setCreateType(type);
+ store.setCreateType(item.key);
}
}
diff --git a/js/src/modals/CreateAccount/CreationType/creationType.spec.js b/js/src/modals/CreateAccount/CreationType/creationType.spec.js
index 60a75f580..6b3f739c7 100644
--- a/js/src/modals/CreateAccount/CreationType/creationType.spec.js
+++ b/js/src/modals/CreateAccount/CreationType/creationType.spec.js
@@ -22,6 +22,7 @@ import { createStore } from '../createAccount.test.js';
import CreationType from './';
let component;
+let instance;
let store;
function render () {
@@ -31,6 +32,7 @@ function render () {
store={ store }
/>
);
+ instance = component.instance();
return component;
}
@@ -44,28 +46,10 @@ describe('modals/CreateAccount/CreationType', () => {
expect(component).to.be.ok;
});
- describe('selector', () => {
- const SELECT_TYPE = 'fromRaw';
- let selector;
-
- beforeEach(() => {
- store.setCreateType(SELECT_TYPE);
- selector = component.find('RadioButtons');
- });
-
- it('renders the selector', () => {
- expect(selector.get(0)).to.be.ok;
- });
-
- it('passes the store type to defaultSelected', () => {
- expect(selector.props().value).to.equal(SELECT_TYPE);
- });
- });
-
describe('events', () => {
describe('onChange', () => {
beforeEach(() => {
- component.instance().onChange(null, 'testing');
+ instance.onChange({ key: 'testing' });
});
it('changes the store createType', () => {
diff --git a/js/src/modals/CreateAccount/GethCard/gethCard.js b/js/src/modals/CreateAccount/GethCard/gethCard.js
new file mode 100644
index 000000000..17250bcb3
--- /dev/null
+++ b/js/src/modals/CreateAccount/GethCard/gethCard.js
@@ -0,0 +1,51 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity. If not, see .
+
+import React, { Component, PropTypes } from 'react';
+
+import imagesEthereum from '~/../assets/images/contracts/ethereum-black-64x64.png';
+import { AccountCard } from '~/ui';
+
+export default class GethCard extends Component {
+ static propTypes = {
+ address: PropTypes.string.isRequired,
+ balance: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired
+ }
+
+ render () {
+ const { address, balance, name } = this.props;
+
+ return (
+
+ );
+ }
+}
diff --git a/js/src/modals/CreateAccount/GethCard/index.js b/js/src/modals/CreateAccount/GethCard/index.js
new file mode 100644
index 000000000..8fdfca3c2
--- /dev/null
+++ b/js/src/modals/CreateAccount/GethCard/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity. If not, see .
+
+export default from './gethCard';
diff --git a/js/src/modals/CreateAccount/NewGeth/newGeth.js b/js/src/modals/CreateAccount/NewGeth/newGeth.js
index f18880b6c..26f11d6a7 100644
--- a/js/src/modals/CreateAccount/NewGeth/newGeth.js
+++ b/js/src/modals/CreateAccount/NewGeth/newGeth.js
@@ -17,11 +17,11 @@
import { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
-import { Checkbox } from 'material-ui';
-import { IdentityIcon } from '~/ui';
+import { SelectionList } from '~/ui';
-import styles from './newGeth.css';
+import GethCard from '../GethCard';
+import styles from '../createAccount.css';
@observer
export default class NewGeth extends Component {
@@ -36,60 +36,62 @@ export default class NewGeth extends Component {
render () {
const { gethAccountsAvailable, gethAddresses } = this.props.store;
- if (!gethAccountsAvailable.length) {
- return (
-
+
);
}
- onSelectAddress = (event, address) => {
+ renderAccount = (account, index) => {
+ return (
+
+ );
+ }
+
+ isSelected = (account) => {
+ const { gethAddresses } = this.props.store;
+
+ return gethAddresses.includes(account.address);
+ }
+
+ onSelect = (account) => {
const { store } = this.props;
- store.selectGethAccount(address);
+ store.selectGethAccount(account.address);
}
}
diff --git a/js/src/modals/CreateAccount/NewGeth/newGeth.spec.js b/js/src/modals/CreateAccount/NewGeth/newGeth.spec.js
index a201f0047..6acc8be16 100644
--- a/js/src/modals/CreateAccount/NewGeth/newGeth.spec.js
+++ b/js/src/modals/CreateAccount/NewGeth/newGeth.spec.js
@@ -48,10 +48,10 @@ describe('modals/CreateAccount/NewGeth', () => {
});
describe('events', () => {
- describe('onSelectAddress', () => {
+ describe('onSelect', () => {
beforeEach(() => {
sinon.spy(store, 'selectGethAccount');
- instance.onSelectAddress(null, 'testAddress');
+ instance.onSelect({ address: 'testAddress' });
});
afterEach(() => {
diff --git a/js/src/modals/CreateAccount/TypeIcon/index.js b/js/src/modals/CreateAccount/TypeIcon/index.js
new file mode 100644
index 000000000..55bc79d6b
--- /dev/null
+++ b/js/src/modals/CreateAccount/TypeIcon/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity. If not, see .
+
+export default from './typeIcon';
diff --git a/js/src/modals/CreateAccount/TypeIcon/typeIcon.js b/js/src/modals/CreateAccount/TypeIcon/typeIcon.js
new file mode 100644
index 000000000..a19e17b96
--- /dev/null
+++ b/js/src/modals/CreateAccount/TypeIcon/typeIcon.js
@@ -0,0 +1,59 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity. If not, see .
+
+import React, { Component, PropTypes } from 'react';
+
+import { AccountsIcon, DoneIcon, FileIcon, FileUploadIcon, KeyboardIcon, KeyIcon, MembershipIcon } from '~/ui/Icons';
+
+import { STAGE_INFO } from '../store';
+
+export default class TypeIcon extends Component {
+ static propTypes = {
+ className: PropTypes.string,
+ store: PropTypes.object.isRequired,
+ type: PropTypes.string
+ }
+
+ render () {
+ const { className, store, type } = this.props;
+ const { createType, stage } = store;
+
+ if (stage === STAGE_INFO) {
+ return ;
+ }
+
+ switch (type || createType) {
+ case 'fromGeth':
+ return ;
+
+ case 'fromPhrase':
+ return ;
+
+ case 'fromRaw':
+ return ;
+
+ case 'fromJSON':
+ return ;
+
+ case 'fromPresale':
+ return ;
+
+ case 'fromNew':
+ default:
+ return ;
+ }
+ }
+}
diff --git a/js/src/modals/CreateAccount/createAccount.css b/js/src/modals/CreateAccount/createAccount.css
index f26e3c5c1..eb9ff1e5c 100644
--- a/js/src/modals/CreateAccount/createAccount.css
+++ b/js/src/modals/CreateAccount/createAccount.css
@@ -16,15 +16,42 @@
*/
.details {
- text-align: center;
+ width: 100%;
- .infoForm {
- background: rgba(0, 0, 0, 0.1);
- padding: 1.5em;
- }
+ .info {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
- .qr {
- margin: 1.5em auto 0 auto;
+ .account {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+
+ .name {
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+
+ .icon {
+ flex: 0 0 56px;
+ margin: 0 1em 0 0;
+ }
+
+ .title {
+ flex: 1;
+ }
+ }
+
+ .description {
+ flex: 1;
+ }
+ }
+
+ .qr {
+ flex: 0 0 136px;
+ margin: 1.5em 0 0 1.5em;
+ }
}
}
@@ -88,3 +115,24 @@
.checkbox {
margin-top: 2em;
}
+
+.selectItem {
+ display: flex;
+
+ .icon {
+ flex: 0 0 56px;
+ height: 56px !important;
+ margin-right: 0.75em;
+ width: 56px !important;
+ }
+
+ .info {
+ flex: 1 1;
+ }
+}
+
+.summary {
+ line-height: 1.618em;
+ padding: 0 4em 1.5em 4em;
+ text-align: center;
+}
diff --git a/js/src/modals/CreateAccount/createAccount.js b/js/src/modals/CreateAccount/createAccount.js
index 616021608..c2db3d060 100644
--- a/js/src/modals/CreateAccount/createAccount.js
+++ b/js/src/modals/CreateAccount/createAccount.js
@@ -22,7 +22,7 @@ import { bindActionCreators } from 'redux';
import { createIdentityImg } from '~/api/util/identity';
import { newError } from '~/redux/actions';
-import { Button, Portal } from '~/ui';
+import { Button, ModalBox, Portal } from '~/ui';
import { CancelIcon, CheckIcon, DoneIcon, NextIcon, PrevIcon, PrintIcon } from '~/ui/Icons';
import ParityLogo from '~/../assets/images/parity-logo-black-no-text.svg';
@@ -35,6 +35,7 @@ import NewImport from './NewImport';
import RawKey from './RawKey';
import RecoveryPhrase from './RecoveryPhrase';
import Store, { STAGE_CREATE, STAGE_INFO, STAGE_SELECT_TYPE } from './store';
+import TypeIcon from './TypeIcon';
import print from './print';
import recoveryPage from './recoveryPage.ejs';
@@ -97,7 +98,9 @@ class CreateAccount extends Component {
: STAGE_IMPORT
}
>
- { this.renderPage() }
+ }>
+ { this.renderPage() }
+
);
}
@@ -246,11 +249,11 @@ class CreateAccount extends Component {
: null,
}
- key='close'
+ key='done'
label={
}
onClick={ this.onClose }
diff --git a/js/src/modals/CreateAccount/store.js b/js/src/modals/CreateAccount/store.js
index 2b55532f7..1875ebe76 100644
--- a/js/src/modals/CreateAccount/store.js
+++ b/js/src/modals/CreateAccount/store.js
@@ -91,6 +91,7 @@ export default class Store {
this.password = '';
this.passwordRepeat = '';
this.phrase = '';
+ this.name = '';
this.nameError = null;
this.rawKeyError = null;
this.walletFileError = null;
diff --git a/js/src/redux/providers/balancesActions.js b/js/src/redux/providers/balancesActions.js
index d73152347..2a357c916 100644
--- a/js/src/redux/providers/balancesActions.js
+++ b/js/src/redux/providers/balancesActions.js
@@ -24,7 +24,7 @@ import { setAddressImage } from './imagesActions';
import * as ABIS from '~/contracts/abi';
import { notifyTransaction } from '~/util/notifications';
import { LOG_KEYS, getLogger } from '~/config';
-import imagesEthereum from '../../../assets/images/contracts/ethereum-black-64x64.png';
+import imagesEthereum from '~/../assets/images/contracts/ethereum-black-64x64.png';
const log = getLogger(LOG_KEYS.Balances);
diff --git a/js/src/ui/Form/form.css b/js/src/ui/Form/form.css
index d8c3a7143..ff9ff9e84 100644
--- a/js/src/ui/Form/form.css
+++ b/js/src/ui/Form/form.css
@@ -16,6 +16,7 @@
*/
.form {
margin-top: -1em;
+ width: 100%;
}
.autofill {
diff --git a/js/src/ui/Icons/index.js b/js/src/ui/Icons/index.js
index 213ba58a4..0ea4f7e0f 100644
--- a/js/src/ui/Icons/index.js
+++ b/js/src/ui/Icons/index.js
@@ -15,13 +15,16 @@
// along with Parity. If not, see .
export AccountsIcon from 'material-ui/svg-icons/action/account-balance-wallet';
+export AddressesIcon from 'material-ui/svg-icons/communication/contacts';
export AddIcon from 'material-ui/svg-icons/content/add';
+export AppsIcon from 'material-ui/svg-icons/navigation/apps';
export AttachFileIcon from 'material-ui/svg-icons/editor/attach-file';
export CancelIcon from 'material-ui/svg-icons/content/clear';
export CheckIcon from 'material-ui/svg-icons/navigation/check';
export CloseIcon from 'material-ui/svg-icons/navigation/close';
export CompareIcon from 'material-ui/svg-icons/action/compare-arrows';
export ComputerIcon from 'material-ui/svg-icons/hardware/desktop-mac';
+export ContactsIcon from 'material-ui/svg-icons/image/grid-on';
export ContractIcon from 'material-ui/svg-icons/action/code';
export CopyIcon from 'material-ui/svg-icons/content/content-copy';
export DashboardIcon from 'material-ui/svg-icons/action/dashboard';
@@ -30,10 +33,13 @@ export DoneIcon from 'material-ui/svg-icons/action/done-all';
export EditIcon from 'material-ui/svg-icons/content/create';
export ErrorIcon from 'material-ui/svg-icons/alert/error';
export FileUploadIcon from 'material-ui/svg-icons/file/file-upload';
+export FileIcon from 'material-ui/svg-icons/editor/insert-drive-file';
export FingerprintIcon from 'material-ui/svg-icons/action/fingerprint';
export KeyIcon from 'material-ui/svg-icons/communication/vpn-key';
+export KeyboardIcon from 'material-ui/svg-icons/hardware/keyboard';
export LinkIcon from 'material-ui/svg-icons/content/link';
export LockedIcon from 'material-ui/svg-icons/action/lock';
+export MembershipIcon from 'material-ui/svg-icons/action/card-membership';
export MoveIcon from 'material-ui/svg-icons/action/open-with';
export NextIcon from 'material-ui/svg-icons/navigation/arrow-forward';
export PrevIcon from 'material-ui/svg-icons/navigation/arrow-back';
@@ -41,10 +47,12 @@ export PrintIcon from 'material-ui/svg-icons/action/print';
export RefreshIcon from 'material-ui/svg-icons/action/autorenew';
export SaveIcon from 'material-ui/svg-icons/content/save';
export SendIcon from 'material-ui/svg-icons/content/send';
+export SettingsIcon from 'material-ui/svg-icons/action/settings';
export SnoozeIcon from 'material-ui/svg-icons/av/snooze';
export StarCircleIcon from 'material-ui/svg-icons/action/stars';
export StarIcon from 'material-ui/svg-icons/toggle/star';
export StarOutlineIcon from 'material-ui/svg-icons/toggle/star-border';
+export StatusIcon from 'material-ui/svg-icons/action/track-changes';
export UnlockedIcon from 'material-ui/svg-icons/action/lock-open';
export UpdateIcon from 'material-ui/svg-icons/action/system-update-alt';
export UpdateWaitIcon from 'material-ui/svg-icons/action/update';
diff --git a/js/src/ui/ModalBox/index.js b/js/src/ui/ModalBox/index.js
new file mode 100644
index 000000000..7f9d52041
--- /dev/null
+++ b/js/src/ui/ModalBox/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity. If not, see .
+
+export default from './modalBox';
diff --git a/js/src/modals/CreateAccount/NewGeth/newGeth.css b/js/src/ui/ModalBox/modalBox.css
similarity index 52%
rename from js/src/modals/CreateAccount/NewGeth/newGeth.css
rename to js/src/ui/ModalBox/modalBox.css
index 62a978563..12b4874e5 100644
--- a/js/src/modals/CreateAccount/NewGeth/newGeth.css
+++ b/js/src/ui/ModalBox/modalBox.css
@@ -14,29 +14,49 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see .
*/
-.list {
- input+div>div {
- top: 13px;
- }
-}
-.selection {
- display: inline-block;
- margin-bottom: 0.5em;
+.body {
+ display: flex;
+ justify-content: flex-start;
+
+ .content {
+ flex: 1;
+
+ .body {
+ width: 100%;
+ }
+
+ .summary {
+ line-height: 1.618em;
+ padding: 0 4em 1.5em 4em;
+ text-align: center;
+ }
+ }
.icon {
- display: inline-block;
- }
+ align-items: center;
+ background: rgb(167, 151, 0);
+ border-radius: 50%;
+ display: flex;
+ flex: 0 0 5em;
+ flex-direction: column;
+ height: 5em;
+ justify-content: center;
+ margin-right: 1.5em;
+ padding: 0.75em;
+ width: 5em;
- .detail {
- display: inline-block;
-
- .address {
- color: #aaa;
+ img {
+ margin: 0;
+ padding: 0;
}
- .balance {
- font-family: 'Roboto Mono', monospace;
+ svg {
+ fill: white !important;
+ font-size: 3.5em !important;
+ height: 3.5em !important;
+ margin: 0 !important;
+ width: 3.5em !important;
}
}
}
diff --git a/js/src/ui/ModalBox/modalBox.js b/js/src/ui/ModalBox/modalBox.js
new file mode 100644
index 000000000..f0366cf06
--- /dev/null
+++ b/js/src/ui/ModalBox/modalBox.js
@@ -0,0 +1,61 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity. If not, see .
+
+import React, { Component, PropTypes } from 'react';
+
+import { nodeOrStringProptype } from '~/util/proptypes';
+
+import styles from './modalBox.css';
+
+export default class ModalBox extends Component {
+ static propTypes = {
+ children: PropTypes.node.isRequired,
+ icon: PropTypes.node.isRequired,
+ summary: nodeOrStringProptype()
+ }
+
+ render () {
+ const { children, icon } = this.props;
+
+ return (
+
+ );
+ }
+}
diff --git a/js/src/ui/ModalBox/modalBox.spec.js b/js/src/ui/ModalBox/modalBox.spec.js
new file mode 100644
index 000000000..fcf270897
--- /dev/null
+++ b/js/src/ui/ModalBox/modalBox.spec.js
@@ -0,0 +1,56 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity. If not, see .
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import ModalBox from './';
+
+let component;
+
+function render () {
+ component = shallow(
+ testChild