UI 2 component & modal splits (#5525)

* Remove mui from Actionbar

* Add semantic-ui to vendor.js

* Stateless components

* Multi-item spacing

* Stateless components

* Stateless components

* Default font

* Context passing

* Move Vault modals into Vault dapp

* Move modals to their respective views
This commit is contained in:
Jaco Greeff 2017-04-28 11:21:05 +02:00 committed by GitHub
parent d16cfc736d
commit 37dd488579
292 changed files with 734 additions and 805 deletions

View File

@ -1,43 +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 <http://www.gnu.org/licenses/>.
export AddAddress from './AddAddress';
export AddContract from './AddContract';
export CreateAccount from './CreateAccount';
export CreateWallet from './CreateWallet';
export DappPermissions from './DappPermissions';
export DappsVisible from './AddDapps';
export DeleteAccount from './DeleteAccount';
export DeployContract from './DeployContract';
export EditMeta from './EditMeta';
export ExecuteContract from './ExecuteContract';
export ExportAccount from './ExportAccount';
export Faucet from './Faucet';
export FirstRun from './FirstRun';
export LoadContract from './LoadContract';
export PasswordManager from './PasswordManager';
export SaveContract from './SaveContract';
export Shapeshift from './Shapeshift';
export Transfer from './Transfer';
export UpgradeParity from './UpgradeParity';
export VaultAccounts from './VaultAccounts';
export VaultCreate from './VaultCreate';
export VaultLock from './VaultLock';
export VaultMeta from './VaultMeta';
export VaultSelector from './VaultSelector';
export VaultUnlock from './VaultUnlock';
export Verification from './Verification';
export WalletSettings from './WalletSettings';

View File

@ -17,7 +17,7 @@
import { isEqual } from 'lodash';
import { LOG_KEYS, getLogger } from '~/config';
import UpgradeStore from '~/modals/UpgradeParity/store';
import UpgradeStore from '~/shell/UpgradeParity/store';
import BalancesProvider from './balances';
import { statusBlockNumber, statusCollection } from './statusActions';

View File

@ -16,9 +16,11 @@
import React, { PropTypes } from 'react';
import { FirstRun, UpgradeParity } from '~/modals';
import { Errors, Tooltips } from '~/ui';
import FirstRun from '../../FirstRun';
import UpgradeParity from '../../UpgradeParity';
import styles from '../application.css';
export default function Container ({ children, onCloseFirstRun, showFirstRun, upgradeStore }) {

View File

@ -37,10 +37,12 @@ export default class Extension extends Component {
return (
<div className={ styles.body }>
<CloseIcon
<div
className={ styles.close }
onClick={ this.onClose }
/>
>
<CloseIcon />
</div>
<p>
<FormattedMessage
id='extension.intro'

View File

@ -18,19 +18,18 @@ import { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import UpgradeStore from '~/modals/UpgradeParity/store';
import Connection from '../Connection';
import ParityBar from '../ParityBar';
import UpgradeStore from '../UpgradeParity/store';
import Snackbar from './Snackbar';
import Container from './Container';
import DappContainer from './DappContainer';
import Extension from './Extension';
import FrameError from './FrameError';
import Requests from './Requests';
import Status from './Status';
import Store from './store';
import Requests from './Requests';
import styles from './application.css';

View File

@ -65,6 +65,7 @@
}
.icons {
padding-top: 1.5em;
}
.icon,

View File

@ -29,7 +29,7 @@ function renderShallow (permissionStore = {}) {
return component;
}
describe('modals/DappPermissions', () => {
describe('shell/DappPermissions', () => {
describe('rendering', () => {
it('renders defaults', () => {
expect(renderShallow()).to.be.ok;

View File

@ -41,7 +41,7 @@ function create () {
store = new Store(api);
}
describe('modals/DappPermissions/store', () => {
describe('shell/DappPermissions/store', () => {
beforeEach(() => {
create();
});

View File

@ -21,11 +21,13 @@ import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { DappPermissions, DappsVisible } from '~/modals';
import PermissionStore from '~/modals/DappPermissions/store';
import { Actionbar, Button, DappCard, Page, SectionList } from '~/ui';
import { LockedIcon, VisibleIcon } from '~/ui/Icons';
import DappsVisible from '../DappsVisible';
import DappPermissions from '../DappPermissions';
import PermissionStore from '../DappPermissions/store';
import DappsStore from './dappsStore';
import styles from './dapps.css';

View File

@ -20,10 +20,10 @@ import { FormattedMessage } from 'react-intl';
import { DappCard, Portal, SelectionList } from '~/ui';
import styles from './addDapps.css';
import styles from './dappsVisible.css';
@observer
export default class AddDapps extends Component {
export default class DappsVisible extends Component {
static propTypes = {
store: PropTypes.object.isRequired
};

View File

@ -17,15 +17,15 @@
import { shallow } from 'enzyme';
import React from 'react';
import AddDapps from './';
import DappsVisible from './';
function renderShallow (store = {}) {
return shallow(
<AddDapps store={ store } />
<DappsVisible store={ store } />
);
}
describe('modals/AddDapps', () => {
describe('shell/DappsVisible', () => {
describe('rendering', () => {
it('renders defaults', () => {
expect(renderShallow()).to.be.ok;

View File

@ -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 <http://www.gnu.org/licenses/>.
export default from './dappsVisible';

View File

@ -27,10 +27,11 @@ import { newError } from '~/redux/actions';
import { Button, Portal } from '~/ui';
import { CheckIcon, DoneIcon, NextIcon, PrintIcon } from '~/ui/Icons';
import { NewAccount, AccountDetails } from '../CreateAccount';
import print from '../CreateAccount/print';
import recoveryPage from '../CreateAccount/recoveryPage.ejs';
import CreateStore from '../CreateAccount/store';
// FIXME: These imports, while nice for re-using, breaks since the shell import
import { NewAccount, AccountDetails } from '~/views/Accounts/CreateAccount';
import print from '~/views/Accounts/CreateAccount/print';
import recoveryPage from '~/views/Accounts/CreateAccount/recoveryPage.ejs';
import CreateStore from '~/views/Accounts/CreateAccount/store';
import Completed from './Completed';
import TnC from './TnC';

View File

@ -16,9 +16,7 @@
height: 100%;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
font-family: Sans-Serif;
}
.loading {

View File

@ -41,9 +41,6 @@ import Dapps from './Dapps';
import '~/environment';
import '~/../assets/fonts/Roboto/font.css';
import '~/../assets/fonts/RobotoMono/font.css';
injectTapEventPlugin();
if (process.env.NODE_ENV === 'development') {

View File

@ -14,9 +14,8 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
.searchcontainer {
display: flex;
overflow: hidden;
}
.searchButton {

View File

@ -16,17 +16,23 @@
*/
.actionbar {
padding: 0 24px !important;
margin-bottom: 0;
height: auto !important;
background: transparent !important;
}
background: transparent;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0.5em 1.5em;
margin: 0;
.tooltitle {
.title {
text-transform: uppercase;
}
.toolbuttons {
padding: 0.5em 0;
overflow: hidden;
.children {
}
.buttons {
div {
display: inline-block;
}
}
}

View File

@ -14,55 +14,31 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
import React, { PropTypes } from 'react';
import { nodeOrStringProptype } from '~/util/proptypes';
import styles from './actionbar.css';
export default class Actionbar extends Component {
static propTypes = {
export default function Actionbar ({ buttons, children, className, title }) {
return (
<div className={ `${styles.actionbar} ${className}` }>
<h3 className={ styles.title }>
{ title }
</h3>
<div className={ styles.children }>
{ children }
</div>
<div className={ styles.buttons }>
{ buttons }
</div>
</div>
);
}
Actionbar.propTypes = {
title: nodeOrStringProptype(),
buttons: PropTypes.array,
children: PropTypes.node,
className: PropTypes.string
};
render () {
const { children, className } = this.props;
const classes = `${styles.actionbar} ${className}`;
return (
<Toolbar className={ classes }>
{ this.renderTitle() }
{ this.renderButtons() }
{ children }
</Toolbar>
);
}
renderButtons () {
const { buttons } = this.props;
if (!buttons || !buttons.length) {
return null;
}
return (
<ToolbarGroup className={ styles.toolbuttons }>
{ buttons }
</ToolbarGroup>
);
}
renderTitle () {
const { title } = this.props;
return (
<h3 className={ styles.tooltitle }>
{ title }
</h3>
);
}
}

View File

@ -14,25 +14,20 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import styles from './badge.css';
export default class Badge extends Component {
static propTypes = {
className: PropTypes.string,
color: PropTypes.string,
value: PropTypes.any
};
render () {
const { className, color, value } = this.props;
const classes = `${styles.bubble} ${styles[color || 'default']} ${className}`;
export default function Badge ({ className, color, value }) {
return (
<div className={ classes }>
<div className={ `${styles.bubble} ${styles[color || 'default']} ${className}` }>
{ value }
</div>
);
}
}
Badge.propTypes = {
className: PropTypes.string,
color: PropTypes.string,
value: PropTypes.any
};

View File

@ -15,7 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import BigNumber from 'bignumber.js';
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
@ -23,28 +23,7 @@ import TokenImage from '~/ui/TokenImage';
import styles from './balance.css';
export class Balance extends Component {
static contextTypes = {
api: PropTypes.object
};
static propTypes = {
balance: PropTypes.object.isRequired,
tokens: PropTypes.object.isRequired,
address: PropTypes.string,
className: PropTypes.string,
showOnlyEth: PropTypes.bool,
showZeroValues: PropTypes.bool
};
static defaultProps = {
showOnlyEth: false,
showZeroValues: false
};
render () {
const { balance, className, showOnlyEth, tokens } = this.props;
function Balance ({ balance, className, showOnlyEth, tokens }) {
if (Object.keys(balance).length === 0) {
return null;
}
@ -137,7 +116,24 @@ export class Balance extends Component {
</div>
);
}
}
Balance.contextTypes = {
api: PropTypes.object.isRequired
};
Balance.propTypes = {
balance: PropTypes.object.isRequired,
tokens: PropTypes.object.isRequired,
address: PropTypes.string,
className: PropTypes.string,
showOnlyEth: PropTypes.bool,
showZeroValues: PropTypes.bool
};
Balance.defaultProps = {
showOnlyEth: false,
showZeroValues: false
};
function mapStateToProps (state, props) {
const { balances, tokens } = state;
@ -149,4 +145,7 @@ function mapStateToProps (state, props) {
};
}
export default connect(mapStateToProps)(Balance);
export default connect(
mapStateToProps,
null
)(Balance);

View File

@ -14,24 +14,13 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import styles from './blockStatus.css';
class BlockStatus extends Component {
static propTypes = {
blockNumber: PropTypes.object,
syncing: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.object
])
}
render () {
const { blockNumber, syncing } = this.props;
function BlockStatus ({ blockNumber, syncing }) {
if (!blockNumber) {
return null;
}
@ -105,7 +94,14 @@ class BlockStatus extends Component {
</div>
);
}
}
BlockStatus.propTypes = {
blockNumber: PropTypes.object,
syncing: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.object
])
};
function mapStateToProps (state) {
const { blockNumber, syncing } = state.nodeStatus;

View File

@ -14,48 +14,12 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import { Button as SemButton } from 'semantic-ui-react';
import { nodeOrStringProptype } from '~/util/proptypes';
export default class Button extends Component {
static propTypes = {
active: PropTypes.bool,
animated: PropTypes.bool,
basic: PropTypes.bool,
backgroundColor: PropTypes.string,
className: PropTypes.string,
color: PropTypes.string,
disabled: PropTypes.bool,
icon: PropTypes.node,
label: nodeOrStringProptype(),
onClick: PropTypes.func,
primary: PropTypes.bool,
size: PropTypes.string,
toggle: PropTypes.bool
}
static defaultProps = {
primary: true
}
render () {
const {
active,
animated,
basic,
className,
color,
disabled,
icon,
label,
onClick,
primary,
size,
toggle
} = this.props;
export default function Button ({ active, animated, basic, className, color, disabled, icon, label, onClick, primary, size, toggle }) {
return (
<SemButton
active={ active }
@ -73,4 +37,23 @@ export default class Button extends Component {
/>
);
}
}
Button.propTypes = {
active: PropTypes.bool,
animated: PropTypes.bool,
basic: PropTypes.bool,
backgroundColor: PropTypes.string,
className: PropTypes.string,
color: PropTypes.string,
disabled: PropTypes.bool,
icon: PropTypes.node,
label: nodeOrStringProptype(),
onClick: PropTypes.func,
primary: PropTypes.bool,
size: PropTypes.string,
toggle: PropTypes.bool
};
Button.defaultProps = {
primary: true
};

View File

@ -14,7 +14,7 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { nodeOrStringProptype } from '~/util/proptypes';
@ -38,29 +38,7 @@ const DEFAULT_YES = (
/>
);
export default class ConfirmDialog extends Component {
static propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
disabledConfirm: PropTypes.bool,
disabledDeny: PropTypes.bool,
busy: PropTypes.bool,
iconConfirm: PropTypes.node,
iconDeny: PropTypes.node,
labelConfirm: PropTypes.string,
labelDeny: PropTypes.string,
onConfirm: PropTypes.func.isRequired,
onDeny: PropTypes.func.isRequired,
open: PropTypes.bool,
title: nodeOrStringProptype().isRequired,
visible: PropTypes.bool
}
render () {
const { busy, children, className, disabledConfirm, disabledDeny, iconConfirm, iconDeny, labelConfirm, labelDeny, onConfirm, onDeny, open, title, visible } = this.props;
// TODO: visible is for compatibility with existing, open aligns with Portal.
// (Cleanup once all uses of ConfirmDialog has been migrated)
export default function ConfirmDialog ({ busy, children, className, disabledConfirm, disabledDeny, iconConfirm, iconDeny, labelConfirm, labelDeny, onConfirm, onDeny, open, title, visible }) {
if (!visible && !open) {
return null;
}
@ -96,4 +74,20 @@ export default class ConfirmDialog extends Component {
</Portal>
);
}
}
ConfirmDialog.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
disabledConfirm: PropTypes.bool,
disabledDeny: PropTypes.bool,
busy: PropTypes.bool,
iconConfirm: PropTypes.node,
iconDeny: PropTypes.node,
labelConfirm: PropTypes.string,
labelDeny: PropTypes.string,
onConfirm: PropTypes.func.isRequired,
onDeny: PropTypes.func.isRequired,
open: PropTypes.bool,
title: nodeOrStringProptype().isRequired,
visible: PropTypes.bool
};

View File

@ -17,9 +17,9 @@
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import VaultSelector from '~/modals/VaultSelector';
import VaultStore from '~/views/Vaults/store';
import VaultSelector from './VaultSelector';
import InputAddress from '../InputAddress';
export default class VaultSelect extends Component {

View File

@ -14,22 +14,13 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import { nodeOrStringProptype } from '~/util/proptypes';
import styles from './busy.css';
export default class Busy extends Component {
static propTypes = {
children: PropTypes.node,
state: nodeOrStringProptype(),
title: nodeOrStringProptype()
}
render () {
const { children, state, title } = this.props;
export default function Busy ({ children, state, title }) {
return (
<div className={ styles.center }>
<div className={ styles.title }>{ title }</div>
@ -38,4 +29,9 @@ export default class Busy extends Component {
</div>
);
}
}
Busy.propTypes = {
children: PropTypes.node,
state: nodeOrStringProptype(),
title: nodeOrStringProptype()
};

View File

@ -14,22 +14,18 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import styles from './completed.css';
export default class Completed extends Component {
static propTypes = {
children: PropTypes.node
}
render () {
const { children } = this.props;
export default function Completed ({ children }) {
return (
<div className={ styles.body }>
{ children }
</div>
);
}
}
Completed.propTypes = {
children: PropTypes.node
};

View File

@ -14,25 +14,14 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import Actionbar from '../Actionbar';
import { nodeOrStringProptype } from '~/util/proptypes';
import styles from './page.css';
export default class Page extends Component {
static propTypes = {
buttons: PropTypes.array,
className: PropTypes.string,
children: PropTypes.node,
padded: PropTypes.bool,
title: nodeOrStringProptype()
};
render () {
const { buttons, className, children, padded, title } = this.props;
export default function Page ({ buttons, className, children, padded, title }) {
return (
<div>
{
@ -60,4 +49,11 @@ export default class Page extends Component {
</div>
);
}
}
Page.propTypes = {
buttons: PropTypes.array,
className: PropTypes.string,
children: PropTypes.node,
padded: PropTypes.bool,
title: nodeOrStringProptype()
};

View File

@ -14,18 +14,11 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import styles from './shortenedHash.css';
export default class ShortenedHash extends Component {
static propTypes = {
data: PropTypes.string.isRequired
}
render () {
const { data } = this.props;
export default function ShortenedHash ({ data }) {
let shortened = data.toLowerCase();
if (shortened.slice(0, 2) === '0x') {
@ -39,4 +32,7 @@ export default class ShortenedHash extends Component {
<abbr className={ styles.hash } title={ data }>{ shortened }</abbr>
);
}
}
ShortenedHash.propTypes = {
data: PropTypes.string.isRequired
};

View File

@ -14,22 +14,14 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { keccak_256 } from 'js-sha3'; // eslint-disable-line camelcase
import IdentityIcon from '../IdentityIcon';
import { FingerprintIcon } from '../Icons';
class SignerIcon extends Component {
static propTypes = {
className: PropTypes.string,
secureToken: PropTypes.string
}
render () {
const { className, secureToken } = this.props;
function SignerIcon ({ className, secureToken }) {
if (!secureToken) {
return (
<FingerprintIcon />
@ -46,7 +38,11 @@ class SignerIcon extends Component {
/>
);
}
}
SignerIcon.propTypes = {
className: PropTypes.string,
secureToken: PropTypes.string
};
function mapStateToProps (state) {
const { secureToken } = state.nodeStatus;

View File

@ -14,28 +14,13 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import unknownImage from '~/../assets/images/contracts/unknown-64x64.png';
class TokenImage extends Component {
static contextTypes = {
api: PropTypes.object
};
static propTypes = {
image: PropTypes.string,
token: PropTypes.shape({
image: PropTypes.string,
address: PropTypes.string
}).isRequired
};
render () {
const { api } = this.context;
const { image, token } = this.props;
function TokenImage ({ image, token }, context) {
const { api } = context;
const imageurl = token.image || image;
let imagesrc = unknownImage;
@ -54,7 +39,18 @@ class TokenImage extends Component {
/>
);
}
}
TokenImage.contextTypes = {
api: PropTypes.object
};
TokenImage.propTypes = {
image: PropTypes.string,
token: PropTypes.shape({
image: PropTypes.string,
address: PropTypes.string
}).isRequired
};
function mapStateToProps (iniState) {
const { images } = iniState;

View File

@ -0,0 +1,66 @@
// 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 <http://www.gnu.org/licenses/>.
import React, { PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import DappLink from '~/ui/DappLink';
import IdentityIcon from '~/ui/IdentityIcon';
import styles from '../vaultCard.css';
export default function Accounts ({ accounts, hideAccounts }) {
if (hideAccounts) {
return null;
}
if (!accounts || !accounts.length) {
return (
<div className={ styles.empty }>
<FormattedMessage
id='vaults.accounts.empty'
defaultMessage='There are no accounts in this vault'
/>
</div>
);
}
return (
<div className={ styles.accounts }>
{
accounts.map((address) => {
return (
<DappLink
key={ address }
to={ `/accounts/${address}` }
>
<IdentityIcon
address={ address }
center
className={ styles.account }
/>
</DappLink>
);
})
}
</div>
);
}
Accounts.propTypes = {
accounts: PropTypes.array,
hideAccounts: PropTypes.bool
};

View File

@ -14,4 +14,4 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default from './addDapps';
export default from './accounts';

View File

@ -0,0 +1,52 @@
// 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 <http://www.gnu.org/licenses/>.
import React, { PropTypes } from 'react';
import Button from '~/ui/Button';
import { LockedIcon, UnlockedIcon } from '~/ui/Icons';
import styles from '../vaultCard.css';
export default function Buttons ({ buttons, hideButtons, vault }) {
const { isOpen } = vault;
if (hideButtons) {
return null;
}
return (
<div className={ styles.buttons }>
<Button
className={ styles.status }
disabled
icon={
isOpen
? <UnlockedIcon />
: <LockedIcon />
}
key='status'
/>
{ buttons }
</div>
);
}
Buttons.propTypes = {
buttons: PropTypes.array,
hideButtons: PropTypes.bool,
vault: PropTypes.object.isRequired
};

View File

@ -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 <http://www.gnu.org/licenses/>.
export default from './buttons';

View File

@ -14,20 +14,46 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router';
import React, { PropTypes } from 'react';
import Button from '~/ui/Button';
import Container from '~/ui/Container';
import IdentityIcon from '~/ui/IdentityIcon';
import { LockedIcon, UnlockedIcon } from '~/ui/Icons';
import Accounts from './Accounts';
import Buttons from './Buttons';
import Layout from './Layout';
import styles from './vaultCard.css';
export default class VaultCard extends Component {
static propTypes = {
export default function VaultCard ({ accounts, buttons, children, hideAccounts, hideButtons, vault }) {
const { isOpen } = vault;
return (
<Container
className={ styles.container }
hover={
isOpen
? (
<Accounts
accounts={ accounts }
hideAccounts={ hideAccounts }
/>
)
: null
}
>
<Buttons
buttons={ buttons }
hideButtons={ hideButtons }
vault={ vault }
/>
<Layout vault={ vault }>
{ children }
</Layout>
</Container>
);
}
VaultCard.propTypes = {
accounts: PropTypes.array,
buttons: PropTypes.array,
children: PropTypes.node,
@ -36,91 +62,4 @@ export default class VaultCard extends Component {
vault: PropTypes.object.isRequired
};
static Layout = Layout;
render () {
const { children, vault } = this.props;
const { isOpen } = vault;
return (
<Container
className={ styles.container }
hover={
isOpen
? this.renderAccounts()
: null
}
>
{ this.renderButtons() }
<Layout vault={ vault }>
{ children }
</Layout>
</Container>
);
}
renderAccounts () {
const { accounts, hideAccounts } = this.props;
if (hideAccounts) {
return null;
}
if (!accounts || !accounts.length) {
return (
<div className={ styles.empty }>
<FormattedMessage
id='vaults.accounts.empty'
defaultMessage='There are no accounts in this vault'
/>
</div>
);
}
return (
<div className={ styles.accounts }>
{
accounts.map((address) => {
return (
<Link
key={ address }
to={ `/accounts/${address}` }
>
<IdentityIcon
address={ address }
center
className={ styles.account }
/>
</Link>
);
})
}
</div>
);
}
renderButtons () {
const { buttons, hideButtons, vault } = this.props;
const { isOpen } = vault;
if (hideButtons) {
return null;
}
return (
<div className={ styles.buttons }>
<Button
className={ styles.status }
disabled
icon={
isOpen
? <UnlockedIcon />
: <LockedIcon />
}
key='status'
/>
{ buttons }
</div>
);
}
}
VaultCard.Layout = Layout;

View File

@ -14,20 +14,13 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import IdentityIcon from '~/ui/IdentityIcon';
import styles from './vaultTag.css';
export default class VaultTag extends Component {
static propTypes = {
vault: PropTypes.string.isRequired
};
render () {
const { vault } = this.props;
export default function VaultTag ({ vault }) {
return (
<div className={ styles.vault }>
<div className={ styles.vaultBody }>
@ -42,4 +35,7 @@ export default class VaultTag extends Component {
</div>
);
}
}
VaultTag.propTypes = {
vault: PropTypes.string.isRequired
};

View File

@ -14,20 +14,13 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component } from 'react';
import React from 'react';
import { nodeOrStringProptype } from '~/util/proptypes';
import styles from './warning.css';
export default class Warning extends Component {
static propTypes = {
warning: nodeOrStringProptype()
};
render () {
const { warning } = this.props;
export default function Warning ({ warning }) {
if (!warning) {
return null;
}
@ -38,4 +31,7 @@ export default class Warning extends Component {
</div>
);
}
}
Warning.propTypes = {
warning: nodeOrStringProptype()
};

Some files were not shown because too many files have changed in this diff Show More