Merge remote-tracking branch 'origin/ui-2' into ui-2
This commit is contained in:
commit
278dfcdcc5
@ -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';
|
@ -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';
|
||||
|
@ -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 }) {
|
||||
|
@ -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'
|
||||
|
@ -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';
|
||||
|
||||
|
@ -65,6 +65,7 @@
|
||||
}
|
||||
|
||||
.icons {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
.icon,
|
||||
|
@ -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;
|
@ -41,7 +41,7 @@ function create () {
|
||||
store = new Store(api);
|
||||
}
|
||||
|
||||
describe('modals/DappPermissions/store', () => {
|
||||
describe('shell/DappPermissions/store', () => {
|
||||
beforeEach(() => {
|
||||
create();
|
||||
});
|
@ -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';
|
||||
|
@ -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
|
||||
};
|
@ -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;
|
17
js/src/shell/DappsVisible/index.js
Normal file
17
js/src/shell/DappsVisible/index.js
Normal 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';
|
@ -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';
|
@ -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 {
|
||||
|
@ -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') {
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.toolbuttons {
|
||||
padding: 0.5em 0;
|
||||
overflow: hidden;
|
||||
.children {
|
||||
}
|
||||
|
||||
.buttons {
|
||||
div {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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 = {
|
||||
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 }>
|
||||
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
|
||||
};
|
||||
|
@ -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}`;
|
||||
|
||||
return (
|
||||
<div className={ classes }>
|
||||
{ value }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default function Badge ({ className, color, value }) {
|
||||
return (
|
||||
<div className={ `${styles.bubble} ${styles[color || 'default']} ${className}` }>
|
||||
{ value }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Badge.propTypes = {
|
||||
className: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
value: PropTypes.any
|
||||
};
|
||||
|
@ -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,122 +23,118 @@ import TokenImage from '~/ui/TokenImage';
|
||||
|
||||
import styles from './balance.css';
|
||||
|
||||
export class Balance extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object
|
||||
};
|
||||
function Balance ({ balance, className, showOnlyEth, tokens }) {
|
||||
if (Object.keys(balance).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
balance: PropTypes.object.isRequired,
|
||||
tokens: PropTypes.object.isRequired,
|
||||
address: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
showOnlyEth: PropTypes.bool,
|
||||
showZeroValues: PropTypes.bool
|
||||
};
|
||||
let body = Object.keys(balance)
|
||||
.map((tokenId) => {
|
||||
const token = tokens[tokenId];
|
||||
const balanceValue = balance[tokenId];
|
||||
|
||||
static defaultProps = {
|
||||
showOnlyEth: false,
|
||||
showZeroValues: false
|
||||
};
|
||||
const isEthToken = token.native;
|
||||
const isFullToken = !showOnlyEth || isEthToken;
|
||||
const hasBalance = balanceValue.gt(0);
|
||||
|
||||
render () {
|
||||
const { balance, className, showOnlyEth, tokens } = this.props;
|
||||
if (!hasBalance && !isEthToken) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (Object.keys(balance).length === 0) {
|
||||
return null;
|
||||
}
|
||||
const bnf = new BigNumber(token.format || 1);
|
||||
let decimals = 0;
|
||||
|
||||
let body = Object.keys(balance)
|
||||
.map((tokenId) => {
|
||||
const token = tokens[tokenId];
|
||||
const balanceValue = balance[tokenId];
|
||||
if (bnf.gte(1000)) {
|
||||
decimals = 3;
|
||||
} else if (bnf.gte(100)) {
|
||||
decimals = 2;
|
||||
} else if (bnf.gte(10)) {
|
||||
decimals = 1;
|
||||
}
|
||||
|
||||
const isEthToken = token.native;
|
||||
const isFullToken = !showOnlyEth || isEthToken;
|
||||
const hasBalance = balanceValue.gt(0);
|
||||
const value = new BigNumber(balanceValue).div(bnf).toFormat(decimals);
|
||||
|
||||
if (!hasBalance && !isEthToken) {
|
||||
return null;
|
||||
}
|
||||
const classNames = [styles.balance];
|
||||
let details = null;
|
||||
|
||||
const bnf = new BigNumber(token.format || 1);
|
||||
let decimals = 0;
|
||||
|
||||
if (bnf.gte(1000)) {
|
||||
decimals = 3;
|
||||
} else if (bnf.gte(100)) {
|
||||
decimals = 2;
|
||||
} else if (bnf.gte(10)) {
|
||||
decimals = 1;
|
||||
}
|
||||
|
||||
const value = new BigNumber(balanceValue).div(bnf).toFormat(decimals);
|
||||
|
||||
const classNames = [styles.balance];
|
||||
let details = null;
|
||||
|
||||
if (isFullToken) {
|
||||
classNames.push(styles.full);
|
||||
details = [
|
||||
<div
|
||||
className={ styles.value }
|
||||
key='value'
|
||||
>
|
||||
<span title={ value }>
|
||||
{ value }
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
className={ styles.tag }
|
||||
key='tag'
|
||||
>
|
||||
{ token.tag }
|
||||
</div>
|
||||
];
|
||||
}
|
||||
|
||||
return (
|
||||
if (isFullToken) {
|
||||
classNames.push(styles.full);
|
||||
details = [
|
||||
<div
|
||||
className={ classNames.join(' ') }
|
||||
key={ tokenId }
|
||||
className={ styles.value }
|
||||
key='value'
|
||||
>
|
||||
<TokenImage token={ token } />
|
||||
{ details }
|
||||
<span title={ value }>
|
||||
{ value }
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
className={ styles.tag }
|
||||
key='tag'
|
||||
>
|
||||
{ token.tag }
|
||||
</div>
|
||||
);
|
||||
})
|
||||
.filter((node) => node);
|
||||
];
|
||||
}
|
||||
|
||||
if (!body.length) {
|
||||
body = (
|
||||
<div className={ styles.empty }>
|
||||
<FormattedMessage
|
||||
id='ui.balance.none'
|
||||
defaultMessage='No balances associated with this account'
|
||||
/>
|
||||
return (
|
||||
<div
|
||||
className={ classNames.join(' ') }
|
||||
key={ tokenId }
|
||||
>
|
||||
<TokenImage token={ token } />
|
||||
{ details }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
.filter((node) => node);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
[
|
||||
styles.balances,
|
||||
showOnlyEth
|
||||
? ''
|
||||
: styles.full,
|
||||
className
|
||||
].join(' ')
|
||||
}
|
||||
>
|
||||
{ body }
|
||||
if (!body.length) {
|
||||
body = (
|
||||
<div className={ styles.empty }>
|
||||
<FormattedMessage
|
||||
id='ui.balance.none'
|
||||
defaultMessage='No balances associated with this account'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
[
|
||||
styles.balances,
|
||||
showOnlyEth
|
||||
? ''
|
||||
: styles.full,
|
||||
className
|
||||
].join(' ')
|
||||
}
|
||||
>
|
||||
{ body }
|
||||
</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;
|
||||
const { address } = props;
|
||||
@ -149,4 +145,7 @@ function mapStateToProps (state, props) {
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(Balance);
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(Balance);
|
||||
|
@ -14,99 +14,95 @@
|
||||
// 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
|
||||
])
|
||||
function BlockStatus ({ blockNumber, syncing }) {
|
||||
if (!blockNumber) {
|
||||
return null;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { blockNumber, syncing } = this.props;
|
||||
|
||||
if (!blockNumber) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!syncing) {
|
||||
return (
|
||||
<div className={ styles.blockNumber }>
|
||||
<FormattedMessage
|
||||
id='ui.blockStatus.bestBlock'
|
||||
defaultMessage='{blockNumber} best block'
|
||||
values={ {
|
||||
blockNumber: blockNumber.toFormat()
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (syncing.warpChunksAmount && syncing.warpChunksProcessed && !syncing.warpChunksAmount.eq(syncing.warpChunksProcessed)) {
|
||||
return (
|
||||
<div className={ styles.syncStatus }>
|
||||
<FormattedMessage
|
||||
id='ui.blockStatus.warpRestore'
|
||||
defaultMessage='{percentage}% warp restore'
|
||||
values={ {
|
||||
percentage: syncing.warpChunksProcessed.mul(100).div(syncing.warpChunksAmount).toFormat(2)
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
let syncStatus = null;
|
||||
let warpStatus = null;
|
||||
|
||||
if (syncing.currentBlock && syncing.highestBlock) {
|
||||
syncStatus = (
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='ui.blockStatus.syncStatus'
|
||||
defaultMessage='{currentBlock}/{highestBlock} syncing'
|
||||
values={ {
|
||||
currentBlock: syncing.currentBlock.toFormat(),
|
||||
highestBlock: syncing.highestBlock.toFormat()
|
||||
} }
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (syncing.blockGap) {
|
||||
const [first, last] = syncing.blockGap;
|
||||
|
||||
warpStatus = (
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='ui.blockStatus.warpStatus'
|
||||
defaultMessage=', {percentage}% historic'
|
||||
values={ {
|
||||
percentage: first.mul(100).div(last).toFormat(2)
|
||||
} }
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (!syncing) {
|
||||
return (
|
||||
<div className={ styles.syncStatus }>
|
||||
{ syncStatus }
|
||||
{ warpStatus }
|
||||
<div className={ styles.blockNumber }>
|
||||
<FormattedMessage
|
||||
id='ui.blockStatus.bestBlock'
|
||||
defaultMessage='{blockNumber} best block'
|
||||
values={ {
|
||||
blockNumber: blockNumber.toFormat()
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (syncing.warpChunksAmount && syncing.warpChunksProcessed && !syncing.warpChunksAmount.eq(syncing.warpChunksProcessed)) {
|
||||
return (
|
||||
<div className={ styles.syncStatus }>
|
||||
<FormattedMessage
|
||||
id='ui.blockStatus.warpRestore'
|
||||
defaultMessage='{percentage}% warp restore'
|
||||
values={ {
|
||||
percentage: syncing.warpChunksProcessed.mul(100).div(syncing.warpChunksAmount).toFormat(2)
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
let syncStatus = null;
|
||||
let warpStatus = null;
|
||||
|
||||
if (syncing.currentBlock && syncing.highestBlock) {
|
||||
syncStatus = (
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='ui.blockStatus.syncStatus'
|
||||
defaultMessage='{currentBlock}/{highestBlock} syncing'
|
||||
values={ {
|
||||
currentBlock: syncing.currentBlock.toFormat(),
|
||||
highestBlock: syncing.highestBlock.toFormat()
|
||||
} }
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (syncing.blockGap) {
|
||||
const [first, last] = syncing.blockGap;
|
||||
|
||||
warpStatus = (
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='ui.blockStatus.warpStatus'
|
||||
defaultMessage=', {percentage}% historic'
|
||||
values={ {
|
||||
percentage: first.mul(100).div(last).toFormat(2)
|
||||
} }
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.syncStatus }>
|
||||
{ syncStatus }
|
||||
{ warpStatus }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
BlockStatus.propTypes = {
|
||||
blockNumber: PropTypes.object,
|
||||
syncing: PropTypes.oneOfType([
|
||||
PropTypes.bool,
|
||||
PropTypes.object
|
||||
])
|
||||
};
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { blockNumber, syncing } = state.nodeStatus;
|
||||
|
||||
|
@ -14,63 +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 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;
|
||||
|
||||
return (
|
||||
<SemButton
|
||||
active={ active }
|
||||
animated={ animated }
|
||||
basic={ basic }
|
||||
className={ className }
|
||||
color={ color }
|
||||
disabled={ disabled }
|
||||
icon={ icon }
|
||||
content={ label }
|
||||
onClick={ onClick }
|
||||
primary={ primary }
|
||||
size={ size }
|
||||
toggle={ toggle }
|
||||
/>
|
||||
);
|
||||
}
|
||||
export default function Button ({ active, animated, basic, className, color, disabled, icon, label, onClick, primary, size, toggle }) {
|
||||
return (
|
||||
<SemButton
|
||||
active={ active }
|
||||
animated={ animated }
|
||||
basic={ basic }
|
||||
className={ className }
|
||||
color={ color }
|
||||
disabled={ disabled }
|
||||
icon={ icon }
|
||||
content={ label }
|
||||
onClick={ onClick }
|
||||
primary={ primary }
|
||||
size={ size }
|
||||
toggle={ toggle }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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
|
||||
};
|
||||
|
@ -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,62 +38,56 @@ 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
|
||||
export default function ConfirmDialog ({ busy, children, className, disabledConfirm, disabledDeny, iconConfirm, iconDeny, labelConfirm, labelDeny, onConfirm, onDeny, open, title, visible }) {
|
||||
if (!visible && !open) {
|
||||
return null;
|
||||
}
|
||||
|
||||
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)
|
||||
if (!visible && !open) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Portal
|
||||
buttons={ [
|
||||
<Button
|
||||
disabled={ disabledDeny }
|
||||
icon={ iconDeny || <CancelIcon /> }
|
||||
key='deny'
|
||||
label={ labelDeny || DEFAULT_NO }
|
||||
onClick={ onDeny }
|
||||
/>,
|
||||
<Button
|
||||
disabled={ disabledConfirm }
|
||||
icon={ iconConfirm || <CheckIcon /> }
|
||||
key='confirm'
|
||||
label={ labelConfirm || DEFAULT_YES }
|
||||
onClick={ onConfirm }
|
||||
/>
|
||||
] }
|
||||
busy={ busy }
|
||||
className={ className }
|
||||
isSmallModal
|
||||
onClose={ onDeny }
|
||||
title={ title }
|
||||
open
|
||||
>
|
||||
<div className={ styles.body }>
|
||||
{ children }
|
||||
</div>
|
||||
</Portal>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Portal
|
||||
buttons={ [
|
||||
<Button
|
||||
disabled={ disabledDeny }
|
||||
icon={ iconDeny || <CancelIcon /> }
|
||||
key='deny'
|
||||
label={ labelDeny || DEFAULT_NO }
|
||||
onClick={ onDeny }
|
||||
/>,
|
||||
<Button
|
||||
disabled={ disabledConfirm }
|
||||
icon={ iconConfirm || <CheckIcon /> }
|
||||
key='confirm'
|
||||
label={ labelConfirm || DEFAULT_YES }
|
||||
onClick={ onConfirm }
|
||||
/>
|
||||
] }
|
||||
busy={ busy }
|
||||
className={ className }
|
||||
isSmallModal
|
||||
onClose={ onDeny }
|
||||
title={ title }
|
||||
open
|
||||
>
|
||||
<div className={ styles.body }>
|
||||
{ children }
|
||||
</div>
|
||||
</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
|
||||
};
|
||||
|
@ -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 {
|
||||
|
@ -14,28 +14,24 @@
|
||||
// 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;
|
||||
|
||||
return (
|
||||
<div className={ styles.center }>
|
||||
<div className={ styles.title }>{ title }</div>
|
||||
<div className={ styles.state }>{ state }</div>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default function Busy ({ children, state, title }) {
|
||||
return (
|
||||
<div className={ styles.center }>
|
||||
<div className={ styles.title }>{ title }</div>
|
||||
<div className={ styles.state }>{ state }</div>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Busy.propTypes = {
|
||||
children: PropTypes.node,
|
||||
state: nodeOrStringProptype(),
|
||||
title: nodeOrStringProptype()
|
||||
};
|
||||
|
@ -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;
|
||||
|
||||
return (
|
||||
<div className={ styles.body }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default function Completed ({ children }) {
|
||||
return (
|
||||
<div className={ styles.body }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Completed.propTypes = {
|
||||
children: PropTypes.node
|
||||
};
|
||||
|
@ -14,50 +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 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;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
title || buttons
|
||||
? (
|
||||
<Actionbar
|
||||
buttons={ buttons }
|
||||
title={ title }
|
||||
/>
|
||||
)
|
||||
: null
|
||||
export default function Page ({ buttons, className, children, padded, title }) {
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
title || buttons
|
||||
? (
|
||||
<Actionbar
|
||||
buttons={ buttons }
|
||||
title={ title }
|
||||
/>
|
||||
)
|
||||
: null
|
||||
}
|
||||
<div
|
||||
className={
|
||||
[
|
||||
padded
|
||||
? styles.layoutPadded
|
||||
: styles.layout,
|
||||
className
|
||||
].join(' ')
|
||||
}
|
||||
<div
|
||||
className={
|
||||
[
|
||||
padded
|
||||
? styles.layoutPadded
|
||||
: styles.layout,
|
||||
className
|
||||
].join(' ')
|
||||
}
|
||||
>
|
||||
{ children }
|
||||
</div>
|
||||
>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Page.propTypes = {
|
||||
buttons: PropTypes.array,
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
padded: PropTypes.bool,
|
||||
title: nodeOrStringProptype()
|
||||
};
|
||||
|
@ -14,29 +14,25 @@
|
||||
// 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
|
||||
export default function ShortenedHash ({ data }) {
|
||||
let shortened = data.toLowerCase();
|
||||
|
||||
if (shortened.slice(0, 2) === '0x') {
|
||||
shortened = shortened.slice(2);
|
||||
}
|
||||
if (shortened.length > (6 + 6)) {
|
||||
shortened = shortened.slice(0, 6) + '…' + shortened.slice(-6);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { data } = this.props;
|
||||
|
||||
let shortened = data.toLowerCase();
|
||||
|
||||
if (shortened.slice(0, 2) === '0x') {
|
||||
shortened = shortened.slice(2);
|
||||
}
|
||||
if (shortened.length > (6 + 6)) {
|
||||
shortened = shortened.slice(0, 6) + '…' + shortened.slice(-6);
|
||||
}
|
||||
|
||||
return (
|
||||
<abbr className={ styles.hash } title={ data }>{ shortened }</abbr>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<abbr className={ styles.hash } title={ data }>{ shortened }</abbr>
|
||||
);
|
||||
}
|
||||
|
||||
ShortenedHash.propTypes = {
|
||||
data: PropTypes.string.isRequired
|
||||
};
|
||||
|
@ -14,40 +14,36 @@
|
||||
// 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;
|
||||
|
||||
if (!secureToken) {
|
||||
return (
|
||||
<FingerprintIcon />
|
||||
);
|
||||
}
|
||||
|
||||
const signerSha = keccak_256(secureToken);
|
||||
|
||||
function SignerIcon ({ className, secureToken }) {
|
||||
if (!secureToken) {
|
||||
return (
|
||||
<IdentityIcon
|
||||
address={ signerSha }
|
||||
center
|
||||
className={ className }
|
||||
/>
|
||||
<FingerprintIcon />
|
||||
);
|
||||
}
|
||||
|
||||
const signerSha = keccak_256(secureToken);
|
||||
|
||||
return (
|
||||
<IdentityIcon
|
||||
address={ signerSha }
|
||||
center
|
||||
className={ className }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
SignerIcon.propTypes = {
|
||||
className: PropTypes.string,
|
||||
secureToken: PropTypes.string
|
||||
};
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { secureToken } = state.nodeStatus;
|
||||
|
||||
|
@ -14,48 +14,44 @@
|
||||
// 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
|
||||
};
|
||||
function TokenImage ({ image, token }, context) {
|
||||
const { api } = context;
|
||||
const imageurl = token.image || image;
|
||||
let imagesrc = unknownImage;
|
||||
|
||||
static propTypes = {
|
||||
image: PropTypes.string,
|
||||
token: PropTypes.shape({
|
||||
image: PropTypes.string,
|
||||
address: PropTypes.string
|
||||
}).isRequired
|
||||
};
|
||||
if (imageurl) {
|
||||
const host = /^(\/)?api/.test(imageurl)
|
||||
? api.dappsUrl
|
||||
: '';
|
||||
|
||||
render () {
|
||||
const { api } = this.context;
|
||||
const { image, token } = this.props;
|
||||
|
||||
const imageurl = token.image || image;
|
||||
let imagesrc = unknownImage;
|
||||
|
||||
if (imageurl) {
|
||||
const host = /^(\/)?api/.test(imageurl)
|
||||
? api.dappsUrl
|
||||
: '';
|
||||
|
||||
imagesrc = `${host}${imageurl}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
src={ imagesrc }
|
||||
alt={ token.name }
|
||||
/>
|
||||
);
|
||||
imagesrc = `${host}${imageurl}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
src={ imagesrc }
|
||||
alt={ token.name }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
|
66
js/src/ui/VaultCard/Accounts/accounts.js
Normal file
66
js/src/ui/VaultCard/Accounts/accounts.js
Normal 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
|
||||
};
|
@ -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';
|
52
js/src/ui/VaultCard/Buttons/buttons.js
Normal file
52
js/src/ui/VaultCard/Buttons/buttons.js
Normal 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
|
||||
};
|
17
js/src/ui/VaultCard/Buttons/index.js
Normal file
17
js/src/ui/VaultCard/Buttons/index.js
Normal 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';
|
@ -14,113 +14,52 @@
|
||||
// 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 = {
|
||||
accounts: PropTypes.array,
|
||||
buttons: PropTypes.array,
|
||||
children: PropTypes.node,
|
||||
hideAccounts: PropTypes.bool,
|
||||
hideButtons: PropTypes.bool,
|
||||
vault: PropTypes.object.isRequired
|
||||
};
|
||||
export default function VaultCard ({ accounts, buttons, children, hideAccounts, hideButtons, vault }) {
|
||||
const { isOpen } = vault;
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
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,
|
||||
hideAccounts: PropTypes.bool,
|
||||
hideButtons: PropTypes.bool,
|
||||
vault: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
VaultCard.Layout = Layout;
|
||||
|
@ -14,32 +14,28 @@
|
||||
// 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;
|
||||
|
||||
return (
|
||||
<div className={ styles.vault }>
|
||||
<div className={ styles.vaultBody }>
|
||||
<IdentityIcon
|
||||
address={ vault }
|
||||
inline
|
||||
/>
|
||||
<div className={ styles.text }>
|
||||
{ vault }
|
||||
</div>
|
||||
export default function VaultTag ({ vault }) {
|
||||
return (
|
||||
<div className={ styles.vault }>
|
||||
<div className={ styles.vaultBody }>
|
||||
<IdentityIcon
|
||||
address={ vault }
|
||||
inline
|
||||
/>
|
||||
<div className={ styles.text }>
|
||||
{ vault }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
VaultTag.propTypes = {
|
||||
vault: PropTypes.string.isRequired
|
||||
};
|
||||
|
@ -14,28 +14,24 @@
|
||||
// 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;
|
||||
|
||||
if (!warning) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.warning }>
|
||||
{ warning }
|
||||
</div>
|
||||
);
|
||||
export default function Warning ({ warning }) {
|
||||
if (!warning) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.warning }>
|
||||
{ warning }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Warning.propTypes = {
|
||||
warning: nodeOrStringProptype()
|
||||
};
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user