From 2ac7655355b5b750f6e8f2282b9f3a602b9fccf4 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Thu, 26 Jan 2017 16:11:04 +0100 Subject: [PATCH] Update CreateWallet with FormattedMessage (#4298) * Allow FormattedMessage as hint & label * tests for basic rendering * convert component messages * Typo * id typos (insubstantial, but annoying) * 2015-2017 * 2015-2017 * 2015-2017 * 2015-2017 * 2015-2017 --- .../WalletDetails/walletDetails.js | 142 ++++++++++++++---- .../WalletDetails/walletDetails.spec.js | 49 ++++++ .../CreateWallet/WalletInfo/walletInfo.js | 95 ++++++++++-- .../WalletInfo/walletInfo.spec.js | 46 ++++++ .../CreateWallet/WalletType/walletType.js | 71 ++++++--- .../WalletType/walletType.spec.js | 42 ++++++ js/src/modals/CreateWallet/createWallet.js | 120 +++++++++++---- .../modals/CreateWallet/createWallet.spec.js | 54 +++++++ .../modals/CreateWallet/createWallet.test.js | 25 +++ .../modals/CreateWallet/createWalletStore.js | 76 ++++++++-- js/src/ui/Form/TypedInput/typedInput.js | 5 +- 11 files changed, 612 insertions(+), 113 deletions(-) create mode 100644 js/src/modals/CreateWallet/WalletDetails/walletDetails.spec.js create mode 100644 js/src/modals/CreateWallet/WalletInfo/walletInfo.spec.js create mode 100644 js/src/modals/CreateWallet/WalletType/walletType.spec.js create mode 100644 js/src/modals/CreateWallet/createWallet.spec.js create mode 100644 js/src/modals/CreateWallet/createWallet.test.js diff --git a/js/src/modals/CreateWallet/WalletDetails/walletDetails.js b/js/src/modals/CreateWallet/WalletDetails/walletDetails.js index c4291b003..48a2fc3ec 100644 --- a/js/src/modals/CreateWallet/WalletDetails/walletDetails.js +++ b/js/src/modals/CreateWallet/WalletDetails/walletDetails.js @@ -14,8 +14,9 @@ // 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 { omitBy } from 'lodash'; +import React, { Component, PropTypes } from 'react'; +import { FormattedMessage } from 'react-intl'; import { Form, TypedInput, Input, AddressSelect, InputAddress } from '~/ui'; @@ -46,24 +47,54 @@ export default class WalletDetails extends Component { return (
+ } + label={ + + } value={ wallet.address } error={ errors.address } onChange={ this.onAddressChange } /> + } + label={ + + } + value={ wallet.name } onChange={ this.onNameChange } /> + } + label={ + + } value={ wallet.description } onChange={ this.onDescriptionChange } /> @@ -80,43 +111,88 @@ export default class WalletDetails extends Component { return ( + } + label={ + + } + value={ wallet.account } + onChange={ this.onAccoutChange } /> + } + label={ + + } + value={ wallet.name } onChange={ this.onNameChange } /> + } + label={ + + } value={ wallet.description } onChange={ this.onDescriptionChange } /> + } + onChange={ this.onOwnersChange } param='address[]' + value={ wallet.owners.slice() } />
+ } + label={ + + } + value={ wallet.required } onChange={ this.onRequiredChange } param='uint' min={ 1 } @@ -124,13 +200,23 @@ export default class WalletDetails extends Component { /> + } + isEth + label={ + + } onChange={ this.onDaylimitChange } param='uint' - isEth + value={ wallet.daylimit } />
diff --git a/js/src/modals/CreateWallet/WalletDetails/walletDetails.spec.js b/js/src/modals/CreateWallet/WalletDetails/walletDetails.spec.js new file mode 100644 index 000000000..6518e6893 --- /dev/null +++ b/js/src/modals/CreateWallet/WalletDetails/walletDetails.spec.js @@ -0,0 +1,49 @@ +// 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 sinon from 'sinon'; + +import WalletDetails from './'; + +import { ACCOUNTS } from '../createWallet.test.js'; + +let component; +let onChange; + +function render (walletType = 'MULTISIG') { + onChange = sinon.stub(); + component = shallow( + + ); + + return component; +} + +describe('WalletDetails', () => { + it('renders defaults', () => { + expect(render()).to.be.ok; + }); +}); diff --git a/js/src/modals/CreateWallet/WalletInfo/walletInfo.js b/js/src/modals/CreateWallet/WalletInfo/walletInfo.js index e893f450d..bd65a2470 100644 --- a/js/src/modals/CreateWallet/WalletInfo/walletInfo.js +++ b/js/src/modals/CreateWallet/WalletInfo/walletInfo.js @@ -15,9 +15,10 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; +import { FormattedMessage } from 'react-intl'; -import { CompletedStep, IdentityIcon, CopyToClipboard } from '~/ui'; import { fromWei } from '~/api/util/wei'; +import { CompletedStep, IdentityIcon, CopyToClipboard } from '~/ui'; import styles from '../createWallet.css'; @@ -48,24 +49,73 @@ export default class WalletInfo extends Component { return (
- { name } - has been - { deployed ? 'deployed' : 'added' } at + + { name }, + deployedOrAdded: deployed + ? ( + + ) + : ( + + ) + } } + /> +
- - + + } + /> +
{ address }
-
with the following owners
+
+ +
{ this.renderOwners() }

- { required } owners are required to confirm a transaction. + { required } + } } + />

- The daily limit is set to { fromWei(daylimit).toFormat() } ETH. + { fromWei(daylimit).toFormat() } + } } + />

); @@ -74,12 +124,27 @@ export default class WalletInfo extends Component { renderOwners () { const { account, owners, deployed } = this.props; - return [].concat(deployed ? account : null, owners).filter((a) => a).map((address, id) => ( -
- -
{ this.addressToString(address) }
-
- )); + return [] + .concat(deployed ? account : null, owners) + .filter((account) => account) + .map((address, id) => { + return ( +
+ +
+ { this.addressToString(address) } +
+
+ ); + }); } addressToString (address) { diff --git a/js/src/modals/CreateWallet/WalletInfo/walletInfo.spec.js b/js/src/modals/CreateWallet/WalletInfo/walletInfo.spec.js new file mode 100644 index 000000000..9237659b0 --- /dev/null +++ b/js/src/modals/CreateWallet/WalletInfo/walletInfo.spec.js @@ -0,0 +1,46 @@ +// 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 WalletInfo from './'; + +import { ACCOUNTS } from '../createWallet.test.js'; + +let component; + +function render () { + component = shallow( + + ); + + return component; +} + +describe('WalletInfo', () => { + it('renders defaults', () => { + expect(render()).to.be.ok; + }); +}); diff --git a/js/src/modals/CreateWallet/WalletType/walletType.js b/js/src/modals/CreateWallet/WalletType/walletType.js index 5b2b7df6a..bbf55965b 100644 --- a/js/src/modals/CreateWallet/WalletType/walletType.js +++ b/js/src/modals/CreateWallet/WalletType/walletType.js @@ -15,11 +15,53 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; +import { FormattedMessage } from 'react-intl'; -import { RadioButtons } from '~/ui'; import { walletSourceURL } from '~/contracts/code/wallet'; +import { RadioButtons } from '~/ui'; -// import styles from '../createWallet.css'; +const TYPES = [ + { + label: ( + + ), + key: 'MULTISIG', + description: ( + + + + ) + } } + /> + ) + }, + { + label: ( + + ), + key: 'WATCH', + description: ( + + ) + } +]; export default class WalletType extends Component { static propTypes = { @@ -33,34 +75,13 @@ export default class WalletType extends Component { return ( ); } - getTypes () { - return [ - { - label: 'Multi-Sig wallet', key: 'MULTISIG', - description: ( - - Create/Deploy a - - standard multi-signature - - Wallet - - ) - }, - { - label: 'Watch a wallet', key: 'WATCH', - description: 'Add an existing wallet to your accounts' - } - ]; - } - onTypeChange = (type) => { this.props.onChange(type.key); } diff --git a/js/src/modals/CreateWallet/WalletType/walletType.spec.js b/js/src/modals/CreateWallet/WalletType/walletType.spec.js new file mode 100644 index 000000000..2c9d56220 --- /dev/null +++ b/js/src/modals/CreateWallet/WalletType/walletType.spec.js @@ -0,0 +1,42 @@ +// 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 sinon from 'sinon'; + +import WalletType from './'; + +let component; +let onChange; + +function render (walletType = 'MULTISIG') { + onChange = sinon.stub(); + component = shallow( + + ); + + return component; +} + +describe('WalletType', () => { + it('renders defaults', () => { + expect(render()).to.be.ok; + }); +}); diff --git a/js/src/modals/CreateWallet/createWallet.js b/js/src/modals/CreateWallet/createWallet.js index 72f2c17e7..659899dc0 100644 --- a/js/src/modals/CreateWallet/createWallet.js +++ b/js/src/modals/CreateWallet/createWallet.js @@ -14,20 +14,17 @@ // 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 { observer } from 'mobx-react'; - -import ActionDone from 'material-ui/svg-icons/action/done'; -import ContentClear from 'material-ui/svg-icons/content/clear'; -import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward'; +import React, { Component, PropTypes } from 'react'; +import { FormattedMessage } from 'react-intl'; import { Button, Modal, TxHash, BusyStep } from '~/ui'; +import { CancelIcon, DoneIcon, NextIcon } from '~/ui/Icons'; import WalletType from './WalletType'; import WalletDetails from './WalletDetails'; import WalletInfo from './WalletInfo'; import CreateWalletStore from './createWalletStore'; -// import styles from './createWallet.css'; @observer export default class CreateWallet extends Component { @@ -49,12 +46,27 @@ export default class CreateWallet extends Component { return ( + } actions={ this.renderDialogActions() } > + } + state={ + + } /> ); @@ -65,7 +77,7 @@ export default class CreateWallet extends Component { visible actions={ this.renderDialogActions() } current={ stage } - steps={ steps.map((s) => s.title) } + steps={ steps.map((step) => step.title) } waiting={ waiting } > { this.renderPage() } @@ -81,10 +93,19 @@ export default class CreateWallet extends Component { case 'DEPLOYMENT': return ( + } state={ this.store.deployState } > - { this.store.txhash ? () : null } + { + this.store.txhash + ? + : null + } ); @@ -92,15 +113,13 @@ export default class CreateWallet extends Component { return ( ); @@ -108,10 +127,10 @@ export default class CreateWallet extends Component { return ( ); @@ -131,40 +150,65 @@ export default class CreateWallet extends Component { const cancelBtn = (