Initial new UI source code import (#2607)
* address -> name mappings * expanding, loading all coin details * send use only actual BasicCoin tokens registered (any reg) * sending token & accounts * form styling updates * send form layout in place * coin send working as expected * api subscriptions on multiple addresses * bring in events * simplify * basic events display in-place, functionally complete * basic functionality in-place * fix horrible event address issue * rwork display of events slightly * test TLA availability * table for owner -> tokens * fix signature lookup address * fix signature lookup address * basic overview styling * txhash links * page layout adjustments * background import * adjust colors * no global registration, simplify color selection * updated styling * connection dialog for "busy connecting" * initial token connection - WIP * init token updates take place * basic test for manual token * rework connection display * allow updates of the secure token * first stab at making the build build * update runner tags * fix linting issues * skip tests requiring network (should be e2e, TODO) * re-enable javascript tag/runner * release push does the trick * push to any branch, CI name * javscript-test runner as well * swap dependencies build requires test * revert stages swap * retrieve images associated with tokens * remove js build deps order * null image when hash = 0x0 * 6x64 images (hashes for registries) * don't pass tokens as prop to IdentityIcon * check images against content hash pictures * cleanup signer after connection changes * fix naming typo * display unknownImages for balances (not available as content hash) * unknownImage for transfer dialog * basic githubhint layout * single input for commit/filename * ethcore_hashContent call * lookup hash * registration in place * fixes * events is using a proper table * pass value through as-is * stop wrongly using main app IdentityIcon * NEVER export class instance functions * alignment back to normal * typo in definition * set & get images working (mostly) * show content retrieval info * set exitcode via || * use javascript:latest images * disable npm progress bar * rename phase I * rename phase II * only send build output to GitHub on major branches * also run the build step as part of the test (until comprehensive) * ci-specific build (no webpack progress) * allow for account creation via recovery phrase * display account uuid (where available), closes #2546 * connection dialog now shows up in dapps as well, closes #2538 * token images show up as expected * IdentityName component added and deployed * fix padding tests * adjust tests to map to stricter 0x-prefixed hex * render names via common component for the address -> name * split lint into seperate script (early exit) * test phases changed to lint, test & pack * pack part of test phase * remove files marked for deletion (cleanup) * Signer cleanups, start moving in the direction of the rest * add personal signer methods * basic signer request subscription * don't poll blockNumber when not connected * missing return, creating massive ws queue backlogs * ΞTH -> ETH * fix failing tests * registry uses setAddress to actually set addresses now * bytes mapping operates on lowerCase hex strings * sha3 ids for each application * add dappreg to list of contracts * adjust alignment of queries * show gas estimation log * abi with payable for register function * add key as required * image retrieval from dappreg * use proper Image urls * embed and link apps from Parity, retrieved via /api/apps * filter apps that has been replaced * proxy entry for parity-utils * add basiccoin abi * add support for fallback abi type * capture constructor paramaters * merge master into js * move images to assets/images/ * add font assets * import fonts as part of build * don't inline woff files * Revert "merge master into js" This reverts commit cfcfa81bd26f1b3cbc748d3afa1eb5c670b363fe. * remove unused npm packages * information on gas estimates (like almost everywhere else) * don't pass gas & gasPrice to estimation * display account passwordhint when available * signer subscriptions based on polling & function trapping * pending requests retrieved via jsapi * update signer middleware * remove all web3 instances * remove web3 package * last web3 dependencies removed * no need to toChecksumAddress - api takes care of it * expand description for personal_confirmRequest * Signer conversion from web3 -> parity.js completed * explicit in no return * green circle background * remove generated background * convert /api/* paths to localhost:8080/api/* paths (hard-coded, temporary) * change dapps to load from localhost:8080/ui/* * remove dangling web3 files * update manager test for signer * /api/ping -> / * additional token images * additional token images * add missing styles.css for 8180 error pages * cater for txhash returning null/empty object * adjust output directories * Release merge with origin with ours strategy * additional token images * cater for development server * s/localhost/127.0.0.1/ (cater for origin) * Fix address selection for contract deployment * Adjust z-index for error overlay * better text on unique background pattern * fix signer rejections * Don't allow gavcoin transfer with no balance * fix txhash rendering in signer * remove unnecessary ParityBackground * script to update js-precompiled * Redirect from :8080 to :8180 * Remove extra return * Dapp logo images
This commit is contained in:
39
js/src/ui/Actionbar/actionbar.css
Normal file
39
js/src/ui/Actionbar/actionbar.css
Normal file
@@ -0,0 +1,39 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.actionbar {
|
||||
padding: 0 24px !important;
|
||||
margin-bottom: 0;
|
||||
height: auto !important;
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
.tooltitle {
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toolbuttons {
|
||||
}
|
||||
|
||||
.toolbuttons button {
|
||||
margin: 10px 0 10px 16px !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.toolbuttons svg {
|
||||
fill: white !important;
|
||||
}
|
||||
67
js/src/ui/Actionbar/actionbar.js
Normal file
67
js/src/ui/Actionbar/actionbar.js
Normal file
@@ -0,0 +1,67 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
|
||||
|
||||
import styles from './actionbar.css';
|
||||
|
||||
export default class Actionbar extends Component {
|
||||
static propTypes = {
|
||||
title: PropTypes.string,
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
17
js/src/ui/Actionbar/index.js
Normal file
17
js/src/ui/Actionbar/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './actionbar';
|
||||
35
js/src/ui/Badge/badge.css
Normal file
35
js/src/ui/Badge/badge.css
Normal file
@@ -0,0 +1,35 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.bubble {
|
||||
border-radius: 50%;
|
||||
padding: 3px 5px;
|
||||
color: white;
|
||||
font-size: 0.7em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.default {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: green;
|
||||
}
|
||||
38
js/src/ui/Badge/badge.js
Normal file
38
js/src/ui/Badge/badge.js
Normal file
@@ -0,0 +1,38 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
17
js/src/ui/Badge/index.js
Normal file
17
js/src/ui/Badge/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './badge';
|
||||
50
js/src/ui/Balance/balance.css
Normal file
50
js/src/ui/Balance/balance.css
Normal file
@@ -0,0 +1,50 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.balances {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 1em 0 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.empty {
|
||||
line-height: 24px;
|
||||
margin: 0.75em 0.5em 0 0;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.balance {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border-radius: 16px;
|
||||
margin: 0.75em 0.5em 0 0;
|
||||
max-height: 24px;
|
||||
}
|
||||
|
||||
.balance img {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
margin: -4px 1em 0 0;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.balance div {
|
||||
display: inline-block;
|
||||
/*font-family: 'Roboto Mono', monospace;*/
|
||||
line-height: 24px;
|
||||
margin: 0 1em 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
93
js/src/ui/Balance/balance.js
Normal file
93
js/src/ui/Balance/balance.js
Normal file
@@ -0,0 +1,93 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 BigNumber from 'bignumber.js';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import unknownImage from '../../../assets/images/contracts/unknown-64x64.png';
|
||||
import styles from './balance.css';
|
||||
|
||||
class Balance extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
balance: PropTypes.object,
|
||||
images: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
render () {
|
||||
const { api } = this.context;
|
||||
const { balance, images } = this.props;
|
||||
|
||||
if (!balance) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let body = (balance.tokens || [])
|
||||
.filter((balance) => new BigNumber(balance.value).gt(0))
|
||||
.map((balance) => {
|
||||
const token = balance.token;
|
||||
const value = token.format
|
||||
? new BigNumber(balance.value).div(new BigNumber(token.format)).toFormat(3)
|
||||
: api.util.fromWei(balance.value).toFormat(3);
|
||||
const imagesrc = token.image || images[token.address] || unknownImage;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={ styles.balance }
|
||||
key={ token.tag }>
|
||||
<img
|
||||
src={ imagesrc }
|
||||
alt={ token.name } />
|
||||
<div>{ value }<small> { token.tag }</small></div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
if (!body.length) {
|
||||
body = (
|
||||
<div className={ styles.empty }>
|
||||
There are no balances associated with this account
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.balances }>
|
||||
{ body }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { images } = state;
|
||||
|
||||
return { images };
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Balance);
|
||||
17
js/src/ui/Balance/index.js
Normal file
17
js/src/ui/Balance/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './balance';
|
||||
45
js/src/ui/Button/button.js
Normal file
45
js/src/ui/Button/button.js
Normal file
@@ -0,0 +1,45 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { FlatButton } from 'material-ui';
|
||||
|
||||
export default class Button extends Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
icon: PropTypes.node,
|
||||
label: PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.object
|
||||
]),
|
||||
onClick: PropTypes.func
|
||||
}
|
||||
|
||||
render () {
|
||||
const { className, disabled, icon, label, onClick } = this.props;
|
||||
|
||||
return (
|
||||
<FlatButton
|
||||
className={ className }
|
||||
disabled={ disabled }
|
||||
icon={ icon }
|
||||
label={ label }
|
||||
primary
|
||||
onTouchTap={ onClick } />
|
||||
);
|
||||
}
|
||||
}
|
||||
17
js/src/ui/Button/index.js
Normal file
17
js/src/ui/Button/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './button';
|
||||
19
js/src/ui/ConfirmDialog/confirmDialog.css
Normal file
19
js/src/ui/ConfirmDialog/confirmDialog.css
Normal file
@@ -0,0 +1,19 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.body {
|
||||
text-align: center;
|
||||
}
|
||||
56
js/src/ui/ConfirmDialog/confirmDialog.js
Normal file
56
js/src/ui/ConfirmDialog/confirmDialog.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import ActionDone from 'material-ui/svg-icons/action/done';
|
||||
import ContentClear from 'material-ui/svg-icons/content/clear';
|
||||
|
||||
import Button from '../Button';
|
||||
import Modal from '../Modal';
|
||||
|
||||
import styles from './confirmDialog.css';
|
||||
|
||||
export default class ConfirmDialog extends Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
className: PropTypes.string,
|
||||
iconConfirm: PropTypes.node,
|
||||
iconDeny: PropTypes.node,
|
||||
labelConfirm: PropTypes.string,
|
||||
labelDeny: PropTypes.string,
|
||||
title: PropTypes.oneOfType([
|
||||
PropTypes.node, PropTypes.string
|
||||
]).isRequired,
|
||||
visible: PropTypes.bool.isRequired,
|
||||
onConfirm: PropTypes.func.isRequired,
|
||||
onDeny: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
render () {
|
||||
const { children, className, title, visible } = this.props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className={ className }
|
||||
actions={ this.renderActions() }
|
||||
title={ title }
|
||||
visible={ visible }>
|
||||
<div className={ styles.body }>
|
||||
{ children }
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
renderActions () {
|
||||
const { iconConfirm, iconDeny, labelConfirm, labelDeny, onConfirm, onDeny } = this.props;
|
||||
|
||||
return [
|
||||
<Button
|
||||
label={ labelDeny || 'no' }
|
||||
icon={ iconDeny || <ContentClear /> }
|
||||
onClick={ onDeny } />,
|
||||
<Button
|
||||
label={ labelConfirm || 'yes' }
|
||||
icon={ iconConfirm || <ActionDone /> }
|
||||
onClick={ onConfirm } />
|
||||
];
|
||||
}
|
||||
}
|
||||
17
js/src/ui/ConfirmDialog/index.js
Normal file
17
js/src/ui/ConfirmDialog/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './confirmDialog';
|
||||
17
js/src/ui/Container/Title/index.js
Normal file
17
js/src/ui/Container/Title/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './title';
|
||||
25
js/src/ui/Container/Title/title.css
Normal file
25
js/src/ui/Container/Title/title.css
Normal file
@@ -0,0 +1,25 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.byline {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
line-height: 34px;
|
||||
}
|
||||
48
js/src/ui/Container/Title/title.js
Normal file
48
js/src/ui/Container/Title/title.js
Normal file
@@ -0,0 +1,48 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
|
||||
import styles from './title.css';
|
||||
|
||||
export default class Title extends Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
title: PropTypes.oneOfType([
|
||||
PropTypes.string, PropTypes.node
|
||||
]),
|
||||
byline: PropTypes.string
|
||||
}
|
||||
|
||||
state = {
|
||||
name: 'Unnamed'
|
||||
}
|
||||
|
||||
render () {
|
||||
const { className } = this.props;
|
||||
|
||||
return (
|
||||
<div className={ className }>
|
||||
<h3 className={ styles.title }>
|
||||
{ this.props.title }
|
||||
</h3>
|
||||
<div className={ styles.byline }>
|
||||
{ this.props.byline }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
29
js/src/ui/Container/container.css
Normal file
29
js/src/ui/Container/container.css
Normal file
@@ -0,0 +1,29 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.container {
|
||||
padding: 0em
|
||||
}
|
||||
|
||||
.padded {
|
||||
padding: 1.5em;
|
||||
background: rgba(0, 0, 0, 0.8) !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.light .padded {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
42
js/src/ui/Container/container.js
Normal file
42
js/src/ui/Container/container.js
Normal file
@@ -0,0 +1,42 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { Card } from 'material-ui/Card';
|
||||
|
||||
import styles from './container.css';
|
||||
|
||||
export default class Container extends Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
light: PropTypes.bool,
|
||||
style: PropTypes.object
|
||||
}
|
||||
|
||||
render () {
|
||||
const { children, className, light, style } = this.props;
|
||||
const classes = `${styles.container} ${light ? styles.light : ''} ${className}`;
|
||||
|
||||
return (
|
||||
<div className={ classes } style={ style }>
|
||||
<Card className={ styles.padded }>
|
||||
{ children }
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
20
js/src/ui/Container/index.js
Normal file
20
js/src/ui/Container/index.js
Normal file
@@ -0,0 +1,20 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 Title from './Title';
|
||||
|
||||
export default from './container.js';
|
||||
export { Title };
|
||||
48
js/src/ui/ContextProvider/contextProvider.js
Normal file
48
js/src/ui/ContextProvider/contextProvider.js
Normal file
@@ -0,0 +1,48 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 { Component, PropTypes } from 'react';
|
||||
|
||||
export default class ContextProvider extends Component {
|
||||
static propTypes = {
|
||||
api: PropTypes.object.isRequired,
|
||||
muiTheme: PropTypes.object.isRequired,
|
||||
store: PropTypes.object.isRequired,
|
||||
children: PropTypes.node.isRequired
|
||||
}
|
||||
|
||||
static childContextTypes = {
|
||||
api: PropTypes.object,
|
||||
muiTheme: PropTypes.object,
|
||||
store: PropTypes.object
|
||||
}
|
||||
|
||||
render () {
|
||||
const { children } = this.props;
|
||||
|
||||
return children;
|
||||
}
|
||||
|
||||
getChildContext () {
|
||||
const { api, muiTheme, store } = this.props;
|
||||
|
||||
return {
|
||||
api,
|
||||
muiTheme,
|
||||
store
|
||||
};
|
||||
}
|
||||
}
|
||||
1
js/src/ui/ContextProvider/index.js
Normal file
1
js/src/ui/ContextProvider/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export default from './contextProvider';
|
||||
28
js/src/ui/Errors/actions.js
Normal file
28
js/src/ui/Errors/actions.js
Normal file
@@ -0,0 +1,28 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 function newError (error) {
|
||||
return {
|
||||
type: 'newError',
|
||||
error
|
||||
};
|
||||
}
|
||||
|
||||
export function closeErrors () {
|
||||
return {
|
||||
type: 'closeErrors'
|
||||
};
|
||||
}
|
||||
20
js/src/ui/Errors/errors.css
Normal file
20
js/src/ui/Errors/errors.css
Normal file
@@ -0,0 +1,20 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
|
||||
.container {
|
||||
z-index: 10101 !important;
|
||||
}
|
||||
69
js/src/ui/Errors/errors.js
Normal file
69
js/src/ui/Errors/errors.js
Normal file
@@ -0,0 +1,69 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { Snackbar } from 'material-ui';
|
||||
|
||||
import { closeErrors } from './actions';
|
||||
|
||||
import styles from './errors.css';
|
||||
|
||||
class Errors extends Component {
|
||||
static propTypes = {
|
||||
message: PropTypes.string,
|
||||
visible: PropTypes.bool,
|
||||
onCloseErrors: PropTypes.func
|
||||
};
|
||||
|
||||
render () {
|
||||
const { message, visible, onCloseErrors } = this.props;
|
||||
|
||||
if (!message || !visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Snackbar
|
||||
open
|
||||
className={ styles.container }
|
||||
message={ message }
|
||||
autoHideDuration={ 5000 }
|
||||
onRequestClose={ onCloseErrors } />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { message, visible } = state.errors;
|
||||
|
||||
return {
|
||||
message,
|
||||
visible
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({
|
||||
onCloseErrors: closeErrors
|
||||
}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Errors);
|
||||
25
js/src/ui/Errors/index.js
Normal file
25
js/src/ui/Errors/index.js
Normal file
@@ -0,0 +1,25 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 errorReducer from './reducers';
|
||||
import { newError } from './actions';
|
||||
|
||||
export default from './errors';
|
||||
|
||||
export {
|
||||
errorReducer,
|
||||
newError
|
||||
};
|
||||
46
js/src/ui/Errors/middleware.js
Normal file
46
js/src/ui/Errors/middleware.js
Normal file
@@ -0,0 +1,46 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 { newError } from './actions';
|
||||
|
||||
function withError (formatter, type = 'default') {
|
||||
return (message) => {
|
||||
return {
|
||||
error: {
|
||||
message: formatter(message),
|
||||
type
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default class ErrorsMiddleware {
|
||||
toMiddleware () {
|
||||
return (store) => (next) => (action) => {
|
||||
const { meta } = action;
|
||||
|
||||
if (meta && meta.error) {
|
||||
next(newError(meta.error));
|
||||
}
|
||||
|
||||
next(action);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
withError
|
||||
};
|
||||
44
js/src/ui/Errors/reducers.js
Normal file
44
js/src/ui/Errors/reducers.js
Normal file
@@ -0,0 +1,44 @@
|
||||
// Copyright 2015, 2016 Ethcore (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/>.
|
||||
|
||||
function newError (state, action) {
|
||||
const { error } = action;
|
||||
|
||||
return Object.assign({}, state, {
|
||||
visible: true,
|
||||
message: error.message
|
||||
});
|
||||
}
|
||||
|
||||
function closeErrors (state, action) {
|
||||
return Object.assign({}, state, {
|
||||
visible: false,
|
||||
message: null
|
||||
});
|
||||
}
|
||||
|
||||
export default function errorReducer (state = {}, action) {
|
||||
switch (action.type) {
|
||||
case 'newError':
|
||||
return newError(state, action);
|
||||
|
||||
case 'closeErrors':
|
||||
return closeErrors(state, action);
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
38
js/src/ui/Form/AddressSelect/addressSelect.css
Normal file
38
js/src/ui/Form/AddressSelect/addressSelect.css
Normal file
@@ -0,0 +1,38 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.account {
|
||||
max-height: 36px;
|
||||
padding: 4px 0 0 0;
|
||||
line-height: 32px;
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: inline-block;
|
||||
max-height: 32px;
|
||||
}
|
||||
|
||||
.name {
|
||||
line-height: 32px;
|
||||
vertical-align: top;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
95
js/src/ui/Form/AddressSelect/addressSelect.js
Normal file
95
js/src/ui/Form/AddressSelect/addressSelect.js
Normal file
@@ -0,0 +1,95 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { MenuItem } from 'material-ui';
|
||||
|
||||
import IdentityIcon from '../../IdentityIcon';
|
||||
import IdentityName from '../../IdentityName';
|
||||
import Select from '../Select';
|
||||
|
||||
import styles from './addressSelect.css';
|
||||
|
||||
export default class AddressSelect extends Component {
|
||||
static propTypes = {
|
||||
disabled: PropTypes.bool,
|
||||
accounts: PropTypes.object,
|
||||
contacts: PropTypes.object,
|
||||
label: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
error: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
tokens: PropTypes.object,
|
||||
onChange: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
render () {
|
||||
const { disabled, error, hint, label, value } = this.props;
|
||||
|
||||
return (
|
||||
<Select
|
||||
disabled={ disabled }
|
||||
label={ label }
|
||||
hint={ hint }
|
||||
error={ error }
|
||||
value={ value }
|
||||
onChange={ this.onChange }>
|
||||
{ this.renderSelectEntries() }
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
|
||||
renderSelectEntries () {
|
||||
const { accounts, contacts } = this.props;
|
||||
const entries = Object.values(Object.assign({}, accounts || {}, contacts || {}));
|
||||
|
||||
if (!entries.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return entries.map(this.renderSelectEntry);
|
||||
}
|
||||
|
||||
renderSelectEntry = (entry) => {
|
||||
const item = (
|
||||
<div className={ styles.account }>
|
||||
<div className={ styles.image }>
|
||||
<IdentityIcon
|
||||
inline center
|
||||
address={ entry.address } />
|
||||
</div>
|
||||
<div className={ styles.details }>
|
||||
<div className={ styles.name }>
|
||||
<IdentityName address={ entry.address } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
key={ entry.address }
|
||||
value={ entry.address }
|
||||
label={ item }>
|
||||
{ item }
|
||||
</MenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
onChange = (event, idx, value) => {
|
||||
this.props.onChange(event, value);
|
||||
}
|
||||
}
|
||||
17
js/src/ui/Form/AddressSelect/index.js
Normal file
17
js/src/ui/Form/AddressSelect/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './addressSelect';
|
||||
24
js/src/ui/Form/FormWrap/formWrap.css
Normal file
24
js/src/ui/Form/FormWrap/formWrap.css
Normal file
@@ -0,0 +1,24 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.stretch {
|
||||
width: 75%;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.stretch input {
|
||||
width: 100%;
|
||||
}
|
||||
33
js/src/ui/Form/FormWrap/formWrap.js
Normal file
33
js/src/ui/Form/FormWrap/formWrap.js
Normal file
@@ -0,0 +1,33 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
|
||||
import styles from './formWrap.css';
|
||||
|
||||
export default class FormWrap extends Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className={ styles.stretch }>
|
||||
{ this.props.children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
17
js/src/ui/Form/FormWrap/index.js
Normal file
17
js/src/ui/Form/FormWrap/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './formWrap';
|
||||
17
js/src/ui/Form/Input/index.js
Normal file
17
js/src/ui/Form/Input/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './input';
|
||||
123
js/src/ui/Form/Input/input.js
Normal file
123
js/src/ui/Form/Input/input.js
Normal file
@@ -0,0 +1,123 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
|
||||
import { TextField } from 'material-ui';
|
||||
|
||||
// TODO: duplicated in Select
|
||||
const UNDERLINE_DISABLED = {
|
||||
borderColor: 'rgba(255, 255, 255, 0.298039)' // 'transparent' // 'rgba(255, 255, 255, 0.298039)'
|
||||
};
|
||||
|
||||
const UNDERLINE_NORMAL = {
|
||||
borderBottom: 'solid 2px'
|
||||
};
|
||||
|
||||
const NAME_ID = ' ';
|
||||
|
||||
export default class Input extends Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
error: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
multiLine: PropTypes.bool,
|
||||
onBlur: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
onKeyDown: PropTypes.func,
|
||||
onSubmit: PropTypes.func,
|
||||
rows: PropTypes.number,
|
||||
type: PropTypes.string,
|
||||
value: PropTypes.oneOfType([
|
||||
PropTypes.number, PropTypes.string
|
||||
])
|
||||
}
|
||||
|
||||
state = {
|
||||
value: this.props.value
|
||||
}
|
||||
|
||||
render () {
|
||||
const { value } = this.state;
|
||||
const { children, className, disabled, error, label, hint, multiLine, rows, type } = this.props;
|
||||
|
||||
return (
|
||||
<TextField
|
||||
autoComplete='off'
|
||||
className={ className }
|
||||
disabled={ disabled }
|
||||
errorText={ error }
|
||||
floatingLabelFixed
|
||||
floatingLabelText={ label }
|
||||
fullWidth
|
||||
hintText={ hint }
|
||||
multiLine={ multiLine }
|
||||
name={ NAME_ID }
|
||||
id={ NAME_ID }
|
||||
rows={ rows }
|
||||
type={ type || 'text' }
|
||||
underlineDisabledStyle={ UNDERLINE_DISABLED }
|
||||
underlineStyle={ UNDERLINE_NORMAL }
|
||||
value={ value }
|
||||
onBlur={ this.onBlur }
|
||||
onChange={ this.onChange }
|
||||
onKeyDown={ this.onKeyDown }>
|
||||
{ children }
|
||||
</TextField>
|
||||
);
|
||||
}
|
||||
|
||||
onChange = (event, value) => {
|
||||
this.setValue(value);
|
||||
|
||||
this.props.onChange && this.props.onChange(event, value);
|
||||
}
|
||||
|
||||
onBlur = (event) => {
|
||||
const { value } = event.target;
|
||||
|
||||
this.onSubmit(value);
|
||||
|
||||
this.props.onBlur && this.props.onBlur(event);
|
||||
}
|
||||
|
||||
onKeyDown = (event) => {
|
||||
const { value } = event.target;
|
||||
|
||||
if (event.which === 13) {
|
||||
this.onSubmit(value);
|
||||
} else if (event.which === 27) {
|
||||
// TODO ESC, revert to original
|
||||
}
|
||||
|
||||
this.props.onKeyDown && this.props.onKeyDown(event);
|
||||
}
|
||||
|
||||
onSubmit = (value) => {
|
||||
this.setValue(value);
|
||||
|
||||
this.props.onSubmit && this.props.onSubmit(value);
|
||||
}
|
||||
|
||||
setValue (value) {
|
||||
this.setState({
|
||||
value
|
||||
});
|
||||
}
|
||||
}
|
||||
17
js/src/ui/Form/InputAddress/index.js
Normal file
17
js/src/ui/Form/InputAddress/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './inputAddress';
|
||||
28
js/src/ui/Form/InputAddress/inputAddress.css
Normal file
28
js/src/ui/Form/InputAddress/inputAddress.css
Normal file
@@ -0,0 +1,28 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input input {
|
||||
padding-left: 48px !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
}
|
||||
97
js/src/ui/Form/InputAddress/inputAddress.js
Normal file
97
js/src/ui/Form/InputAddress/inputAddress.js
Normal file
@@ -0,0 +1,97 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import Input from '../Input';
|
||||
import IdentityIcon from '../../IdentityIcon';
|
||||
|
||||
import styles from './inputAddress.css';
|
||||
|
||||
class InputAddress extends Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
error: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
accountsInfo: PropTypes.object,
|
||||
tokens: PropTypes.object,
|
||||
text: PropTypes.bool,
|
||||
onChange: PropTypes.func,
|
||||
onSubmit: PropTypes.func
|
||||
};
|
||||
|
||||
render () {
|
||||
const { className, disabled, error, label, hint, value, text, onChange, onSubmit, accountsInfo, tokens } = this.props;
|
||||
const classes = `${styles.input} ${className}`;
|
||||
const account = accountsInfo[value] || tokens[value];
|
||||
const hasAccount = account && !account.meta.deleted;
|
||||
|
||||
return (
|
||||
<div className={ styles.container }>
|
||||
<Input
|
||||
className={ classes }
|
||||
disabled={ disabled }
|
||||
label={ label }
|
||||
hint={ hint }
|
||||
error={ error }
|
||||
value={ text && hasAccount ? account.name : value }
|
||||
onChange={ onChange }
|
||||
onSubmit={ onSubmit } />
|
||||
{ this.renderIcon() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderIcon () {
|
||||
const { value } = this.props;
|
||||
|
||||
if (!value || !value.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.icon }>
|
||||
<IdentityIcon
|
||||
inline center
|
||||
address={ value } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { accountsInfo } = state.personal;
|
||||
const { tokens } = state.balances;
|
||||
|
||||
return {
|
||||
accountsInfo,
|
||||
tokens
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(InputAddress);
|
||||
17
js/src/ui/Form/InputAddressSelect/index.js
Normal file
17
js/src/ui/Form/InputAddressSelect/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './inputAddressSelect';
|
||||
31
js/src/ui/Form/InputAddressSelect/inputAddressSelect.css
Normal file
31
js/src/ui/Form/InputAddressSelect/inputAddressSelect.css
Normal file
@@ -0,0 +1,31 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.inputselect {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inputselect svg {
|
||||
padding-right: 84px;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
position: absolute !important;
|
||||
top: 38px;
|
||||
right: 0;
|
||||
display: inline-block !important;
|
||||
width: auto !important;
|
||||
}
|
||||
127
js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
Normal file
127
js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
Normal file
@@ -0,0 +1,127 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { Toggle } from 'material-ui';
|
||||
|
||||
import AddressSelect from '../AddressSelect';
|
||||
import InputAddress from '../InputAddress';
|
||||
|
||||
import styles from './inputAddressSelect.css';
|
||||
|
||||
class InputAddressSelect extends Component {
|
||||
static propTypes = {
|
||||
accounts: PropTypes.object,
|
||||
contacts: PropTypes.object,
|
||||
disabled: PropTypes.bool,
|
||||
editing: PropTypes.bool,
|
||||
error: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
tokens: PropTypes.object,
|
||||
onChange: PropTypes.func
|
||||
};
|
||||
|
||||
state = {
|
||||
editing: this.props.editing || false,
|
||||
entries: []
|
||||
}
|
||||
|
||||
render () {
|
||||
const { editing } = this.state;
|
||||
|
||||
return (
|
||||
<div className={ styles.inputselect }>
|
||||
{ editing ? this.renderInput() : this.renderSelect() }
|
||||
<Toggle
|
||||
className={ styles.toggle }
|
||||
label='Edit'
|
||||
labelPosition='right'
|
||||
toggled={ editing }
|
||||
onToggle={ this.onToggle } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderInput () {
|
||||
const { disabled, error, hint, label, value, tokens } = this.props;
|
||||
|
||||
return (
|
||||
<InputAddress
|
||||
disabled={ disabled }
|
||||
error={ error }
|
||||
hint={ hint }
|
||||
label={ label }
|
||||
value={ value }
|
||||
tokens={ tokens }
|
||||
onChange={ this.onChangeInput } />
|
||||
);
|
||||
}
|
||||
|
||||
renderSelect () {
|
||||
const { accounts, contacts, disabled, error, hint, label, value, tokens } = this.props;
|
||||
|
||||
return (
|
||||
<AddressSelect
|
||||
accounts={ accounts }
|
||||
contacts={ contacts }
|
||||
disabled={ disabled }
|
||||
label={ label }
|
||||
hint={ hint }
|
||||
error={ error }
|
||||
value={ value }
|
||||
tokens={ tokens }
|
||||
onChange={ this.onChangeSelect } />
|
||||
);
|
||||
}
|
||||
|
||||
onToggle = () => {
|
||||
const { editing } = this.state;
|
||||
|
||||
this.setState({
|
||||
editing: !editing
|
||||
});
|
||||
}
|
||||
|
||||
onChangeInput = (event, value) => {
|
||||
this.props.onChange(event, value);
|
||||
}
|
||||
|
||||
onChangeSelect = (event, value) => {
|
||||
this.props.onChange(event, value);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { accounts, contacts } = state.personal;
|
||||
|
||||
return {
|
||||
accounts,
|
||||
contacts
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(InputAddressSelect);
|
||||
17
js/src/ui/Form/InputInline/index.js
Normal file
17
js/src/ui/Form/InputInline/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './inputInline';
|
||||
19
js/src/ui/Form/InputInline/inputInline.css
Normal file
19
js/src/ui/Form/InputInline/inputInline.css
Normal file
@@ -0,0 +1,19 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.inlineedit {
|
||||
cursor: pointer;
|
||||
}
|
||||
94
js/src/ui/Form/InputInline/inputInline.js
Normal file
94
js/src/ui/Form/InputInline/inputInline.js
Normal file
@@ -0,0 +1,94 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
|
||||
import Input from '../Input';
|
||||
|
||||
import styles from './inputInline.css';
|
||||
|
||||
export default class InputInline extends Component {
|
||||
static propTypes = {
|
||||
error: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
onBlur: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
onSubmit: PropTypes.func,
|
||||
onKeyDown: PropTypes.func,
|
||||
type: PropTypes.string,
|
||||
value: PropTypes.oneOfType([
|
||||
PropTypes.number, PropTypes.string
|
||||
]),
|
||||
static: PropTypes.oneOfType([
|
||||
PropTypes.node, PropTypes.string
|
||||
])
|
||||
}
|
||||
|
||||
state = {
|
||||
editing: false
|
||||
}
|
||||
|
||||
render () {
|
||||
const { editing } = this.state;
|
||||
const { error, label, hint, type, value } = this.props;
|
||||
|
||||
if (!editing) {
|
||||
return (
|
||||
<div
|
||||
className={ styles.inlineedit }
|
||||
onClick={ this.onToggle }>
|
||||
{ this.props.static || value }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Input
|
||||
error={ error }
|
||||
label={ label }
|
||||
hint={ hint }
|
||||
type={ type }
|
||||
value={ value }
|
||||
onBlur={ this.onBlur }
|
||||
onChange={ this.props.onChange }
|
||||
onKeyDown={ this.onKeyDown }
|
||||
onSubmit={ this.props.onSubmit } />
|
||||
);
|
||||
}
|
||||
|
||||
onBlur = () => {
|
||||
this.onToggle();
|
||||
|
||||
if (this.props.onBlur) {
|
||||
this.props.onBlur();
|
||||
}
|
||||
}
|
||||
|
||||
onToggle = () => {
|
||||
this.setState({
|
||||
editing: !this.state.editing
|
||||
});
|
||||
}
|
||||
|
||||
onKeyDown = (event) => {
|
||||
if (event.keyCode === 13) {
|
||||
this.onToggle();
|
||||
}
|
||||
|
||||
this.props.onKeyDown && this.props.onKeyDown(event);
|
||||
}
|
||||
}
|
||||
17
js/src/ui/Form/Select/index.js
Normal file
17
js/src/ui/Form/Select/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './select';
|
||||
71
js/src/ui/Form/Select/select.js
Normal file
71
js/src/ui/Form/Select/select.js
Normal file
@@ -0,0 +1,71 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { SelectField } from 'material-ui';
|
||||
|
||||
// TODO: duplicated in Input
|
||||
const UNDERLINE_DISABLED = {
|
||||
borderColor: 'rgba(255, 255, 255, 0.298039)' // 'transparent' // 'rgba(255, 255, 255, 0.298039)'
|
||||
};
|
||||
|
||||
const UNDERLINE_NORMAL = {
|
||||
borderBottom: 'solid 2px'
|
||||
};
|
||||
|
||||
const NAME_ID = ' ';
|
||||
|
||||
export default class Select extends Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
error: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
onBlur: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
onKeyDown: PropTypes.func,
|
||||
type: PropTypes.string,
|
||||
value: PropTypes.any
|
||||
}
|
||||
|
||||
render () {
|
||||
const { disabled, error, label, hint, value, children, className, onBlur, onChange, onKeyDown } = this.props;
|
||||
|
||||
return (
|
||||
<SelectField
|
||||
className={ className }
|
||||
autoComplete='off'
|
||||
disabled={ disabled }
|
||||
errorText={ error }
|
||||
floatingLabelFixed
|
||||
floatingLabelText={ label }
|
||||
fullWidth
|
||||
hintText={ hint }
|
||||
name={ NAME_ID }
|
||||
id={ NAME_ID }
|
||||
underlineDisabledStyle={ UNDERLINE_DISABLED }
|
||||
underlineStyle={ UNDERLINE_NORMAL }
|
||||
value={ value }
|
||||
onBlur={ onBlur }
|
||||
onChange={ onChange }
|
||||
onKeyDown={ onKeyDown }>
|
||||
{ children }
|
||||
</SelectField>
|
||||
);
|
||||
}
|
||||
}
|
||||
33
js/src/ui/Form/form.css
Normal file
33
js/src/ui/Form/form.css
Normal file
@@ -0,0 +1,33 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.form {
|
||||
margin-top: -1em;
|
||||
}
|
||||
|
||||
.autofill {
|
||||
height: 0;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:root .form input:-webkit-autofill {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
40
js/src/ui/Form/form.js
Normal file
40
js/src/ui/Form/form.js
Normal file
@@ -0,0 +1,40 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
|
||||
import styles from './form.css';
|
||||
|
||||
export default class Form extends Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node
|
||||
}
|
||||
|
||||
render () {
|
||||
// HACK: hidden inputs to disable Chrome's autocomplete
|
||||
return (
|
||||
<form
|
||||
autoComplete='new-password'
|
||||
className={ styles.form }>
|
||||
<div className={ styles.autofill }>
|
||||
<input type='text' name='fakeusernameremembered' />
|
||||
<input type='password' name='fakepasswordremembered' />
|
||||
</div>
|
||||
{ this.props.children }
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
34
js/src/ui/Form/index.js
Normal file
34
js/src/ui/Form/index.js
Normal file
@@ -0,0 +1,34 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 AddressSelect from './AddressSelect';
|
||||
import FormWrap from './FormWrap';
|
||||
import Input from './Input';
|
||||
import InputAddress from './InputAddress';
|
||||
import InputAddressSelect from './InputAddressSelect';
|
||||
import InputInline from './InputInline';
|
||||
import Select from './Select';
|
||||
|
||||
export default from './form';
|
||||
export {
|
||||
AddressSelect,
|
||||
FormWrap,
|
||||
Input,
|
||||
InputAddress,
|
||||
InputAddressSelect,
|
||||
InputInline,
|
||||
Select
|
||||
};
|
||||
52
js/src/ui/IdentityIcon/identityIcon.css
Normal file
52
js/src/ui/IdentityIcon/identityIcon.css
Normal file
@@ -0,0 +1,52 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.icon {
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
text-align: left;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.padded {
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
|
||||
.inline,
|
||||
.tiny {
|
||||
display: inline-block;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 6px 0.25em 0 12px;
|
||||
}
|
||||
136
js/src/ui/IdentityIcon/identityIcon.js
Normal file
136
js/src/ui/IdentityIcon/identityIcon.js
Normal file
@@ -0,0 +1,136 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import ContractIcon from 'material-ui/svg-icons/action/code';
|
||||
|
||||
import styles from './identityIcon.css';
|
||||
|
||||
class IdentityIcon extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
address: PropTypes.string,
|
||||
button: PropTypes.bool,
|
||||
className: PropTypes.string,
|
||||
center: PropTypes.bool,
|
||||
padded: PropTypes.bool,
|
||||
inline: PropTypes.bool,
|
||||
tiny: PropTypes.bool,
|
||||
images: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
state = {
|
||||
iconsrc: ''
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
this.updateIcon(this.props.address, this.props.images);
|
||||
}
|
||||
|
||||
componentWillReceiveProps (newProps) {
|
||||
const sameAddress = newProps.address === this.props.address;
|
||||
const sameImages = Object.keys(newProps.images).length === Object.keys(this.props.images).length;
|
||||
|
||||
if (sameAddress && sameImages) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.updateIcon(newProps.address, newProps.images);
|
||||
}
|
||||
|
||||
updateIcon (_address, images) {
|
||||
const { api } = this.context;
|
||||
const { button, inline, tiny } = this.props;
|
||||
const iconsrc = images[_address];
|
||||
|
||||
if (iconsrc) {
|
||||
this.setState({ iconsrc });
|
||||
return;
|
||||
}
|
||||
|
||||
let scale = 7;
|
||||
if (tiny) {
|
||||
scale = 2;
|
||||
} else if (button) {
|
||||
scale = 3;
|
||||
} else if (inline) {
|
||||
scale = 4;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
iconsrc: api.util.createIdentityImg(_address, scale)
|
||||
});
|
||||
}
|
||||
|
||||
render () {
|
||||
const { address, button, className, center, inline, padded, tiny } = this.props;
|
||||
const { iconsrc } = this.state;
|
||||
const classes = [
|
||||
styles.icon,
|
||||
tiny ? styles.tiny : '',
|
||||
button ? styles.button : '',
|
||||
center ? styles.center : styles.left,
|
||||
inline ? styles.inline : '',
|
||||
padded ? styles.padded : '',
|
||||
className
|
||||
].join(' ');
|
||||
|
||||
let size = '56px';
|
||||
if (tiny) {
|
||||
size = '16px';
|
||||
} else if (button) {
|
||||
size = '24px';
|
||||
} else if (inline) {
|
||||
size = '32px';
|
||||
}
|
||||
|
||||
if (!address) {
|
||||
return (
|
||||
<ContractIcon
|
||||
className={ classes }
|
||||
style={ { width: size, height: size, background: '#eee' } } />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
className={ classes }
|
||||
src={ iconsrc }
|
||||
width={ size }
|
||||
height={ size } />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { images } = state;
|
||||
|
||||
return { images };
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(IdentityIcon);
|
||||
17
js/src/ui/IdentityIcon/index.js
Normal file
17
js/src/ui/IdentityIcon/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './identityIcon';
|
||||
78
js/src/ui/IdentityName/identityName.js
Normal file
78
js/src/ui/IdentityName/identityName.js
Normal file
@@ -0,0 +1,78 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
class IdentityName extends Component {
|
||||
static propTypes = {
|
||||
address: PropTypes.string,
|
||||
accountsInfo: PropTypes.object,
|
||||
tokens: PropTypes.object,
|
||||
empty: PropTypes.bool,
|
||||
shorten: PropTypes.bool,
|
||||
unknown: PropTypes.bool
|
||||
}
|
||||
|
||||
render () {
|
||||
const { address, accountsInfo, tokens, empty, shorten, unknown } = this.props;
|
||||
const account = accountsInfo[address] || tokens[address];
|
||||
const hasAccount = account && (!account.meta || !account.meta.deleted);
|
||||
|
||||
if (!hasAccount && empty) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const addressFallback = shorten ? this.formatHash(address) : address;
|
||||
const fallback = unknown ? 'UNNAMED' : addressFallback;
|
||||
const isUuid = hasAccount && account.name === account.uuid;
|
||||
const name = hasAccount && !isUuid
|
||||
? account.name.toUpperCase()
|
||||
: fallback;
|
||||
|
||||
return (
|
||||
<span>{ name }</span>
|
||||
);
|
||||
}
|
||||
|
||||
formatHash (hash) {
|
||||
if (!hash || hash.length <= 16) {
|
||||
return hash;
|
||||
}
|
||||
|
||||
return `${hash.substr(2, 6)}...${hash.slice(-6)}`;
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { accountsInfo } = state.personal;
|
||||
const { tokens } = state.balances;
|
||||
|
||||
return {
|
||||
accountsInfo,
|
||||
tokens
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(IdentityName);
|
||||
17
js/src/ui/IdentityName/index.js
Normal file
17
js/src/ui/IdentityName/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './identityName';
|
||||
17
js/src/ui/MethodDecoding/index.js
Normal file
17
js/src/ui/MethodDecoding/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './methodDecoding';
|
||||
75
js/src/ui/MethodDecoding/methodDecoding.css
Normal file
75
js/src/ui/MethodDecoding/methodDecoding.css
Normal file
@@ -0,0 +1,75 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
|
||||
.container {
|
||||
}
|
||||
|
||||
.details,
|
||||
.gasDetails {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.gasDetails {
|
||||
padding-top: 1em;
|
||||
font-size: 0.75em;
|
||||
line-height: 2em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.description {
|
||||
line-height: 2em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.name,
|
||||
.highlight {
|
||||
color: white;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.name,
|
||||
.inputs,
|
||||
.highlight {
|
||||
}
|
||||
|
||||
.inputs {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin-top: -16px;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
.inputs img {
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
}
|
||||
|
||||
.etherValue,
|
||||
.tokenValue {
|
||||
}
|
||||
|
||||
.address {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.identityicon {
|
||||
margin-bottom: -10px;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
349
js/src/ui/MethodDecoding/methodDecoding.js
Normal file
349
js/src/ui/MethodDecoding/methodDecoding.js
Normal file
@@ -0,0 +1,349 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 BigNumber from 'bignumber.js';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import Contracts from '../../contracts';
|
||||
import IdentityIcon from '../IdentityIcon';
|
||||
import IdentityName from '../IdentityName';
|
||||
import { Input, InputAddress } from '../Form';
|
||||
|
||||
import styles from './methodDecoding.css';
|
||||
|
||||
const CONTRACT_CREATE = '0x60606040';
|
||||
const TOKEN_METHODS = {
|
||||
'0xa9059cbb': 'transfer(to,value)'
|
||||
};
|
||||
|
||||
class Method extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
address: PropTypes.string.isRequired,
|
||||
tokens: PropTypes.object,
|
||||
transaction: PropTypes.object,
|
||||
historic: PropTypes.bool
|
||||
}
|
||||
|
||||
state = {
|
||||
method: null,
|
||||
methodName: null,
|
||||
methodInputs: null,
|
||||
methodParams: null,
|
||||
methodSignature: null,
|
||||
token: null,
|
||||
isContract: false,
|
||||
isDeploy: false,
|
||||
isReceived: false
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
const { transaction } = this.props;
|
||||
|
||||
this.lookup(transaction);
|
||||
}
|
||||
|
||||
componentWillReceiveProps (newProps) {
|
||||
const { transaction } = this.props;
|
||||
|
||||
if (newProps.transaction === transaction) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.lookup(transaction);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { transaction } = this.props;
|
||||
|
||||
if (!transaction) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.container }>
|
||||
{ this.renderAction() }
|
||||
{ this.renderGas() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderGas () {
|
||||
const { historic, transaction } = this.props;
|
||||
const { gas, gasPrice } = transaction;
|
||||
const gasValue = gas.mul(gasPrice);
|
||||
|
||||
return (
|
||||
<div className={ styles.gasDetails }>
|
||||
{ historic ? 'Used' : 'Will use' } <span className={ styles.highlight }>{ gas.toFormat(0) } gas ({ gasPrice.div(1000000).toFormat(0) }M/<small>ETH</small>)</span> for a total transaction cost of <span className={ styles.highlight }>{ this.renderEtherValue(gasValue) }</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderAction () {
|
||||
const { methodName, methodInputs, methodSignature, token, isDeploy, isReceived } = this.state;
|
||||
|
||||
if (isDeploy) {
|
||||
return this.renderDeploy();
|
||||
}
|
||||
|
||||
if (methodSignature) {
|
||||
if (token && TOKEN_METHODS[methodSignature] && methodInputs) {
|
||||
return this.renderTokenAction();
|
||||
}
|
||||
|
||||
return methodName
|
||||
? this.renderSignatureMethod()
|
||||
: this.renderUnknownMethod();
|
||||
}
|
||||
|
||||
return isReceived
|
||||
? this.renderValueReceipt()
|
||||
: this.renderValueTransfer();
|
||||
}
|
||||
|
||||
renderTokenAction () {
|
||||
const { historic } = this.props;
|
||||
const { methodSignature, methodInputs } = this.state;
|
||||
const [to, value] = methodInputs;
|
||||
const address = to.value;
|
||||
|
||||
switch (TOKEN_METHODS[methodSignature]) {
|
||||
case 'transfer(to,value)':
|
||||
default:
|
||||
return (
|
||||
<div className={ styles.details }>
|
||||
{ historic ? 'Transferred' : 'Will transfer' } <span className={ styles.highlight }>{ this.renderTokenValue(value.value) }</span> to <span className={ styles.highlight }>{ this.renderAddressName(address) }</span>.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
renderDeploy () {
|
||||
const { historic, transaction } = this.props;
|
||||
|
||||
if (!historic) {
|
||||
return (
|
||||
<div className={ styles.details }>
|
||||
Will deploy a contract.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.details }>
|
||||
Deployed a contract at address <span className={ styles.highlight }>{ this.renderAddressName(transaction.creates, false) }</span>.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderValueReceipt () {
|
||||
const { historic, transaction } = this.props;
|
||||
const { isContract } = this.state;
|
||||
|
||||
return (
|
||||
<div className={ styles.details }>
|
||||
{ historic ? 'Received' : 'Will receive' } <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span> from { isContract ? 'the contract' : '' } <span className={ styles.highlight }>{ this.renderAddressName(transaction.from) }</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderValueTransfer () {
|
||||
const { historic, transaction } = this.props;
|
||||
const { isContract } = this.state;
|
||||
|
||||
return (
|
||||
<div className={ styles.details }>
|
||||
{ historic ? 'Transferred' : 'Will transfer' } <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span> to { isContract ? 'the contract' : '' } <span className={ styles.highlight }>{ this.renderAddressName(transaction.to) }</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderSignatureMethod () {
|
||||
const { historic, transaction } = this.props;
|
||||
const { methodName } = this.state;
|
||||
|
||||
return (
|
||||
<div className={ styles.details }>
|
||||
<div className={ styles.description }>
|
||||
{ historic ? 'Executed' : 'Will execute' } the <span className={ styles.name }>{ methodName }</span> function on the contract <span className={ styles.highlight }>{ this.renderAddressName(transaction.to) }</span>, transferring <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span>, passing the following parameters:
|
||||
</div>
|
||||
<div className={ styles.inputs }>
|
||||
{ this.renderInputs() }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderUnknownMethod () {
|
||||
const { historic, transaction } = this.props;
|
||||
|
||||
return (
|
||||
<div className={ styles.details }>
|
||||
{ historic ? 'Executed' : 'Will execute' } <span className={ styles.name }>an unknown/unregistered</span> method on the contract <span className={ styles.highlight }>{ this.renderAddressName(transaction.to) }</span>, transferring <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span>.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderInputs () {
|
||||
const { methodInputs } = this.state;
|
||||
|
||||
return methodInputs.map((input, index) => {
|
||||
switch (input.type) {
|
||||
case 'address':
|
||||
return (
|
||||
<InputAddress
|
||||
disabled
|
||||
text
|
||||
key={ index }
|
||||
className={ styles.input }
|
||||
value={ input.value }
|
||||
label={ input.type } />
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<Input
|
||||
disabled
|
||||
key={ index }
|
||||
className={ styles.input }
|
||||
value={ this.renderValue(input.value) }
|
||||
label={ input.type } />
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
renderValue (value) {
|
||||
const { api } = this.context;
|
||||
|
||||
if (api.util.isInstanceOf(value, BigNumber)) {
|
||||
return value.toFormat(0);
|
||||
} else if (api.util.isArray(value)) {
|
||||
return api.util.bytesToHex(value);
|
||||
}
|
||||
|
||||
return value.toString();
|
||||
}
|
||||
|
||||
renderTokenValue (value) {
|
||||
const { token } = this.state;
|
||||
|
||||
return (
|
||||
<span className={ styles.tokenValue }>
|
||||
{ value.div(token.format).toFormat(5) }<small>{ token.tag }</small>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
renderEtherValue (value) {
|
||||
const { api } = this.context;
|
||||
const ether = api.util.fromWei(value);
|
||||
|
||||
return (
|
||||
<span className={ styles.etherValue }>
|
||||
{ ether.toFormat(5) }<small>ETH</small>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
renderAddressName (address, withName = true) {
|
||||
return (
|
||||
<span className={ styles.address }>
|
||||
<IdentityIcon center inline address={ address } className={ styles.identityicon } />
|
||||
{ withName ? <IdentityName address={ address } /> : address }
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
lookup (transaction) {
|
||||
const { api } = this.context;
|
||||
const { address, tokens } = this.props;
|
||||
|
||||
if (!transaction) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isReceived = transaction.to === address;
|
||||
const token = (tokens || {})[isReceived ? transaction.from : transaction.to];
|
||||
this.setState({ token, isReceived });
|
||||
|
||||
if (!transaction.input) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { signature, paramdata } = api.util.decodeCallData(transaction.input);
|
||||
this.setState({ methodSignature: signature, methodParams: paramdata });
|
||||
|
||||
if (!signature || signature === CONTRACT_CREATE || transaction.creates) {
|
||||
this.setState({ isDeploy: true });
|
||||
return;
|
||||
}
|
||||
|
||||
api.eth
|
||||
.getCode(isReceived ? transaction.from : transaction.to)
|
||||
.then((code) => {
|
||||
if (code && code !== '0x') {
|
||||
this.setState({ isContract: true });
|
||||
}
|
||||
|
||||
return Contracts.get().signatureReg.lookup(signature);
|
||||
}).then((method) => {
|
||||
let methodInputs = null;
|
||||
let methodName = null;
|
||||
|
||||
if (method && method.length) {
|
||||
const abi = api.util.methodToAbi(method);
|
||||
|
||||
methodName = abi.name;
|
||||
methodInputs = api.util
|
||||
.decodeMethodInput(abi, paramdata)
|
||||
.map((value, index) => {
|
||||
const type = abi.inputs[index].type;
|
||||
|
||||
return { type, value };
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({ method, methodName, methodInputs });
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('lookup', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { tokens } = state.balances;
|
||||
|
||||
return {
|
||||
tokens
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Method);
|
||||
27
js/src/ui/Modal/Busy/busy.css
Normal file
27
js/src/ui/Modal/Busy/busy.css
Normal file
@@ -0,0 +1,27 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
}
|
||||
|
||||
.state {
|
||||
margin-top: 1em;
|
||||
}
|
||||
39
js/src/ui/Modal/Busy/busy.js
Normal file
39
js/src/ui/Modal/Busy/busy.js
Normal file
@@ -0,0 +1,39 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
|
||||
import styles from './busy.css';
|
||||
|
||||
export default class Busy extends Component {
|
||||
static propTypes = {
|
||||
title: PropTypes.string,
|
||||
state: PropTypes.string,
|
||||
children: PropTypes.node
|
||||
}
|
||||
|
||||
render () {
|
||||
const { children, title, state } = this.props;
|
||||
|
||||
return (
|
||||
<div className={ styles.center }>
|
||||
<div className={ styles.title }>{ title }</div>
|
||||
<div className={ styles.state }>{ state }</div>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
17
js/src/ui/Modal/Busy/index.js
Normal file
17
js/src/ui/Modal/Busy/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './busy';
|
||||
24
js/src/ui/Modal/Completed/completed.css
Normal file
24
js/src/ui/Modal/Completed/completed.css
Normal file
@@ -0,0 +1,24 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
|
||||
.body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.body>div+div {
|
||||
margin-top: 1em;
|
||||
}
|
||||
35
js/src/ui/Modal/Completed/completed.js
Normal file
35
js/src/ui/Modal/Completed/completed.js
Normal file
@@ -0,0 +1,35 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
17
js/src/ui/Modal/Completed/index.js
Normal file
17
js/src/ui/Modal/Completed/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './completed';
|
||||
17
js/src/ui/Modal/Title/index.js
Normal file
17
js/src/ui/Modal/Title/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './title';
|
||||
92
js/src/ui/Modal/Title/title.js
Normal file
92
js/src/ui/Modal/Title/title.js
Normal file
@@ -0,0 +1,92 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { LinearProgress } from 'material-ui';
|
||||
import { Step, Stepper, StepLabel } from 'material-ui/Stepper';
|
||||
|
||||
import styles from '../modal.css';
|
||||
|
||||
export default class Title extends Component {
|
||||
static propTypes = {
|
||||
busy: PropTypes.bool,
|
||||
current: PropTypes.number,
|
||||
steps: PropTypes.array,
|
||||
waiting: PropTypes.array,
|
||||
title: React.PropTypes.oneOfType([
|
||||
PropTypes.node, PropTypes.string
|
||||
])
|
||||
}
|
||||
|
||||
render () {
|
||||
const { current, steps, title } = this.props;
|
||||
|
||||
return (
|
||||
<div className={ styles.title }>
|
||||
<h3>{ steps ? steps[current] : title }</h3>
|
||||
{ this.renderSteps() }
|
||||
{ this.renderWaiting() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderSteps () {
|
||||
const { current, steps } = this.props;
|
||||
|
||||
if (!steps) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.steps }>
|
||||
<Stepper
|
||||
activeStep={ current }>
|
||||
{ this.renderTimeline() }
|
||||
</Stepper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderTimeline () {
|
||||
const { steps } = this.props;
|
||||
|
||||
return steps.map((label) => {
|
||||
return (
|
||||
<Step
|
||||
key={ label }>
|
||||
<StepLabel>
|
||||
{ label }
|
||||
</StepLabel>
|
||||
</Step>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
renderWaiting () {
|
||||
const { current, busy, waiting } = this.props;
|
||||
const isWaiting = busy || (waiting || []).includes(current);
|
||||
|
||||
if (!isWaiting) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.waiting }>
|
||||
<LinearProgress />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
25
js/src/ui/Modal/index.js
Normal file
25
js/src/ui/Modal/index.js
Normal file
@@ -0,0 +1,25 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 Busy from './Busy';
|
||||
import Completed from './Completed';
|
||||
|
||||
export default from './modal';
|
||||
|
||||
export {
|
||||
Busy,
|
||||
Completed
|
||||
};
|
||||
70
js/src/ui/Modal/modal.css
Normal file
70
js/src/ui/Modal/modal.css
Normal file
@@ -0,0 +1,70 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.actions {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
.actions button:not([disabled]) {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.actions button:not([disabled]) svg {
|
||||
fill: white !important;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
}
|
||||
|
||||
.content {
|
||||
transform: translate(0px, 0px) !important;
|
||||
}
|
||||
|
||||
.content>div {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
.content div {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 1em;
|
||||
margin-bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
.title h3 {
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.title .steps {
|
||||
margin-bottom: -1em;
|
||||
}
|
||||
|
||||
.waiting {
|
||||
margin: 1em -1em -1em -1em;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: rgba(255, 255, 255, 0.5) !important;
|
||||
transition: none !important;
|
||||
}
|
||||
106
js/src/ui/Modal/modal.js
Normal file
106
js/src/ui/Modal/modal.js
Normal file
@@ -0,0 +1,106 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { Dialog } from 'material-ui';
|
||||
|
||||
import Container from '../Container';
|
||||
import Title from './Title';
|
||||
|
||||
const ACTIONS_STYLE = { borderStyle: 'none' };
|
||||
const TITLE_STYLE = { borderStyle: 'none' };
|
||||
const DIALOG_STYLE = { paddingTop: '1px' };
|
||||
|
||||
import styles from './modal.css';
|
||||
|
||||
class Modal extends Component {
|
||||
static contextTypes = {
|
||||
muiTheme: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
actions: PropTypes.node,
|
||||
busy: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
current: PropTypes.number,
|
||||
waiting: PropTypes.array,
|
||||
scroll: PropTypes.bool,
|
||||
steps: PropTypes.array,
|
||||
title: React.PropTypes.oneOfType([
|
||||
PropTypes.node, PropTypes.string
|
||||
]),
|
||||
visible: PropTypes.bool.isRequired,
|
||||
settings: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
render () {
|
||||
const { muiTheme } = this.context;
|
||||
const { actions, busy, className, current, children, scroll, steps, waiting, title, visible, settings } = this.props;
|
||||
const contentStyle = muiTheme.parity.getBackgroundStyle(null, settings.backgroundSeed);
|
||||
const header = (
|
||||
<Title
|
||||
current={ current }
|
||||
busy={ busy }
|
||||
waiting={ waiting }
|
||||
steps={ steps }
|
||||
title={ title } />
|
||||
);
|
||||
const classes = `${styles.dialog} ${className}`;
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
className={ classes }
|
||||
actions={ actions }
|
||||
actionsContainerStyle={ ACTIONS_STYLE }
|
||||
autoDetectWindowHeight={ false }
|
||||
autoScrollBodyContent={ !!scroll }
|
||||
actionsContainerClassName={ styles.actions }
|
||||
bodyClassName={ styles.body }
|
||||
contentClassName={ styles.content }
|
||||
contentStyle={ contentStyle }
|
||||
modal
|
||||
open={ visible }
|
||||
overlayClassName={ styles.overlay }
|
||||
overlayStyle={ { transition: 'none' } }
|
||||
repositionOnUpdate={ false }
|
||||
style={ DIALOG_STYLE }
|
||||
title={ header }
|
||||
titleStyle={ TITLE_STYLE }>
|
||||
<Container light style={ { transition: 'none' } }>
|
||||
{ children }
|
||||
</Container>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { settings } = state;
|
||||
|
||||
return { settings };
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Modal);
|
||||
17
js/src/ui/Page/index.js
Normal file
17
js/src/ui/Page/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './page';
|
||||
23
js/src/ui/Page/page.css
Normal file
23
js/src/ui/Page/page.css
Normal file
@@ -0,0 +1,23 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.layout {
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.layout>div {
|
||||
padding-bottom: 0.25em;
|
||||
}
|
||||
37
js/src/ui/Page/page.js
Normal file
37
js/src/ui/Page/page.js
Normal file
@@ -0,0 +1,37 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
|
||||
import styles from './page.css';
|
||||
|
||||
export default class Page extends Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.node
|
||||
};
|
||||
|
||||
render () {
|
||||
const { className, children } = this.props;
|
||||
const classes = `${styles.layout} ${className}`;
|
||||
|
||||
return (
|
||||
<div className={ classes }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
17
js/src/ui/ParityBackground/index.js
Normal file
17
js/src/ui/ParityBackground/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './parityBackground';
|
||||
64
js/src/ui/ParityBackground/parityBackground.js
Normal file
64
js/src/ui/ParityBackground/parityBackground.js
Normal file
@@ -0,0 +1,64 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
class ParityBackground extends Component {
|
||||
static contextTypes = {
|
||||
muiTheme: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
gradient: PropTypes.string,
|
||||
seed: PropTypes.any,
|
||||
settings: PropTypes.object.isRequired,
|
||||
onClick: PropTypes.func
|
||||
}
|
||||
|
||||
render () {
|
||||
const { muiTheme } = this.context;
|
||||
const { children, className, gradient, seed, settings, onClick } = this.props;
|
||||
const style = muiTheme.parity.getBackgroundStyle(gradient, seed || settings.backgroundSeed);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={ className }
|
||||
style={ style }
|
||||
onTouchTap={ onClick }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { settings } = state;
|
||||
|
||||
return { settings };
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(ParityBackground);
|
||||
17
js/src/ui/SignerIcon/index.js
Normal file
17
js/src/ui/SignerIcon/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './signerIcon';
|
||||
64
js/src/ui/SignerIcon/signerIcon.js
Normal file
64
js/src/ui/SignerIcon/signerIcon.js
Normal file
@@ -0,0 +1,64 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { keccak_256 } from 'js-sha3'; // eslint-disable-line camelcase
|
||||
import ActionFingerprint from 'material-ui/svg-icons/action/fingerprint';
|
||||
|
||||
import IdentityIcon from '../IdentityIcon';
|
||||
|
||||
class SignerIcon extends Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
secureToken: PropTypes.string
|
||||
}
|
||||
|
||||
render () {
|
||||
const { className, secureToken } = this.props;
|
||||
|
||||
if (!secureToken) {
|
||||
return (
|
||||
<ActionFingerprint />
|
||||
);
|
||||
}
|
||||
|
||||
const signerSha = keccak_256(secureToken);
|
||||
|
||||
return (
|
||||
<IdentityIcon
|
||||
center
|
||||
className={ className }
|
||||
address={ signerSha } />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { secureToken } = state.nodeStatus;
|
||||
|
||||
return { secureToken };
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(SignerIcon);
|
||||
17
js/src/ui/Theme/index.js
Normal file
17
js/src/ui/Theme/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './theme';
|
||||
71
js/src/ui/Theme/theme.js
Normal file
71
js/src/ui/Theme/theme.js
Normal file
@@ -0,0 +1,71 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 GeoPattern from 'geopattern';
|
||||
import getMuiTheme from 'material-ui/styles/getMuiTheme';
|
||||
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
|
||||
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
|
||||
|
||||
const lightTheme = getMuiTheme(lightBaseTheme);
|
||||
const muiTheme = getMuiTheme(darkBaseTheme);
|
||||
|
||||
muiTheme.stepper.textColor = '#eee';
|
||||
muiTheme.stepper.disabledTextColor = '#777';
|
||||
muiTheme.inkBar.backgroundColor = 'transparent';
|
||||
muiTheme.raisedButton.primaryTextColor = 'white';
|
||||
muiTheme.snackbar.backgroundColor = 'rgba(255, 30, 30, 0.9)';
|
||||
muiTheme.snackbar.textColor = 'rgba(255, 255, 255, 0.75)';
|
||||
muiTheme.tabs = lightTheme.tabs;
|
||||
muiTheme.tabs.backgroundColor = 'transparent';
|
||||
muiTheme.tabs.selectedTextColor = 'white';
|
||||
muiTheme.tabs.textColor = 'rgba(255, 255, 255, 0.5)'; // 'rgb(0, 151, 167)';
|
||||
muiTheme.textField.floatingLabelColor = 'rgba(255, 255, 255, 0.5)';
|
||||
muiTheme.textField.hintColor = 'rgba(255, 255, 255, 0.5)';
|
||||
muiTheme.textField.disabledTextColor = muiTheme.textField.textColor;
|
||||
muiTheme.toolbar = lightTheme.toolbar;
|
||||
muiTheme.toolbar.backgroundColor = 'transparent';
|
||||
|
||||
const imageCache = {};
|
||||
|
||||
muiTheme.parity = {
|
||||
backgroundSeed: '0x0',
|
||||
|
||||
setBackgroundSeed: (seed) => {
|
||||
muiTheme.parity.backgroundSeed = seed;
|
||||
},
|
||||
|
||||
getBackgroundStyle: (_gradient, _seed) => {
|
||||
const gradient = _gradient || 'rgba(255, 255, 255, 0.25)';
|
||||
const seed = _seed || muiTheme.parity.backgroundSeed;
|
||||
let url;
|
||||
|
||||
if (_seed) {
|
||||
url = GeoPattern.generate(_seed).toDataUrl();
|
||||
} else if (imageCache[seed] && imageCache[seed][gradient]) {
|
||||
url = imageCache[seed][gradient];
|
||||
} else {
|
||||
url = GeoPattern.generate(seed).toDataUrl();
|
||||
imageCache[seed] = imageCache[seed] || {};
|
||||
imageCache[seed][gradient] = url;
|
||||
}
|
||||
|
||||
return {
|
||||
background: `linear-gradient(${gradient}, ${gradient}), ${url}`
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export default muiTheme;
|
||||
17
js/src/ui/Tooltips/Tooltip/index.js
Normal file
17
js/src/ui/Tooltips/Tooltip/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './tooltip';
|
||||
117
js/src/ui/Tooltips/Tooltip/tooltip.js
Normal file
117
js/src/ui/Tooltips/Tooltip/tooltip.js
Normal file
@@ -0,0 +1,117 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { FlatButton } from 'material-ui';
|
||||
import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
|
||||
import ContentClear from 'material-ui/svg-icons/content/clear';
|
||||
import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
|
||||
|
||||
import { newTooltip, nextTooltip, closeTooltips } from '../actions';
|
||||
|
||||
import styles from '../tooltips.css';
|
||||
|
||||
let tooltipId = 0;
|
||||
|
||||
class Tooltip extends Component {
|
||||
static propTypes = {
|
||||
title: PropTypes.string,
|
||||
text: PropTypes.string,
|
||||
right: PropTypes.bool,
|
||||
currentId: PropTypes.number,
|
||||
maxId: PropTypes.number,
|
||||
className: PropTypes.string,
|
||||
onNewTooltip: PropTypes.func,
|
||||
onNextTooltip: PropTypes.func,
|
||||
onCloseTooltips: PropTypes.func
|
||||
}
|
||||
|
||||
state = {
|
||||
id: tooltipId
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
const { onNewTooltip } = this.props;
|
||||
|
||||
onNewTooltip(tooltipId);
|
||||
tooltipId++;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { id } = this.state;
|
||||
const { className, currentId, maxId, right, onCloseTooltips, onNextTooltip } = this.props;
|
||||
const classes = `${styles.box} ${right ? styles.arrowRight : styles.arrowLeft} ${className}`;
|
||||
|
||||
if (id !== currentId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const buttons = id !== maxId
|
||||
? [
|
||||
<FlatButton
|
||||
key='skipButton'
|
||||
icon={ <ContentClear /> }
|
||||
label='Skip'
|
||||
onTouchTap={ onCloseTooltips } />,
|
||||
<FlatButton
|
||||
key='nextButton'
|
||||
icon={ <NavigationArrowForward /> }
|
||||
label='Next'
|
||||
onTouchTap={ onNextTooltip } />
|
||||
] : (
|
||||
<FlatButton
|
||||
icon={ <ActionDoneAll /> }
|
||||
label='Done'
|
||||
onTouchTap={ onCloseTooltips } />
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={ classes }>
|
||||
<div className={ styles.title }>
|
||||
{ this.props.title }
|
||||
</div>
|
||||
<div className={ styles.text }>
|
||||
{ this.props.text }
|
||||
</div>
|
||||
<div className={ styles.buttons }>
|
||||
{ buttons }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { currentId, maxId } = state.tooltip;
|
||||
|
||||
return { currentId, maxId };
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({
|
||||
onNewTooltip: newTooltip,
|
||||
onNextTooltip: nextTooltip,
|
||||
onCloseTooltips: closeTooltips
|
||||
}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Tooltip);
|
||||
34
js/src/ui/Tooltips/actions.js
Normal file
34
js/src/ui/Tooltips/actions.js
Normal file
@@ -0,0 +1,34 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 function newTooltip (newId) {
|
||||
return {
|
||||
type: 'newTooltip',
|
||||
newId
|
||||
};
|
||||
}
|
||||
|
||||
export function nextTooltip () {
|
||||
return {
|
||||
type: 'nextTooltip'
|
||||
};
|
||||
}
|
||||
|
||||
export function closeTooltips () {
|
||||
return {
|
||||
type: 'closeTooltips'
|
||||
};
|
||||
}
|
||||
21
js/src/ui/Tooltips/index.js
Normal file
21
js/src/ui/Tooltips/index.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 Tooltip from './Tooltip';
|
||||
import tooltipReducer from './reducers';
|
||||
|
||||
export default from './tooltips';
|
||||
export { Tooltip, tooltipReducer };
|
||||
69
js/src/ui/Tooltips/reducers.js
Normal file
69
js/src/ui/Tooltips/reducers.js
Normal file
@@ -0,0 +1,69 @@
|
||||
// Copyright 2015, 2016 Ethcore (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/>.
|
||||
|
||||
const LS_KEY = 'tooltips';
|
||||
|
||||
let currentId = -1;
|
||||
let maxId = 0;
|
||||
|
||||
function closeTooltips (state, action) {
|
||||
window.localStorage.setItem(LS_KEY, '{"state":"off"}');
|
||||
|
||||
currentId = -1;
|
||||
|
||||
return Object.assign({}, state, {
|
||||
currentId
|
||||
});
|
||||
}
|
||||
|
||||
function newTooltip (state, action) {
|
||||
const { newId } = action;
|
||||
|
||||
maxId = Math.max(newId, maxId);
|
||||
|
||||
return Object.assign({}, state, {
|
||||
currentId,
|
||||
maxId
|
||||
});
|
||||
}
|
||||
|
||||
function nextTooltip (state, action) {
|
||||
const hideTips = window.localStorage.getItem(LS_KEY);
|
||||
|
||||
currentId = hideTips
|
||||
? -1
|
||||
: currentId + 1;
|
||||
|
||||
return Object.assign({}, state, {
|
||||
currentId
|
||||
});
|
||||
}
|
||||
|
||||
export default function tooltipReducer (state = {}, action) {
|
||||
switch (action.type) {
|
||||
case 'newTooltip':
|
||||
return newTooltip(state, action);
|
||||
|
||||
case 'nextTooltip':
|
||||
return nextTooltip(state, action);
|
||||
|
||||
case 'closeTooltips':
|
||||
return closeTooltips(state, action);
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
103
js/src/ui/Tooltips/tooltips.css
Normal file
103
js/src/ui/Tooltips/tooltips.css
Normal file
@@ -0,0 +1,103 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
.container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: transparent;
|
||||
z-index: 499;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
background: #663600; /* rgba(48, 48, 48, 0.95); #88b7d5; */
|
||||
border: 4px solid #f80; /* #c2e1f5; */
|
||||
max-width: 450px;
|
||||
border-radius: 0.5em;
|
||||
z-index: 500;
|
||||
opacity: 1;
|
||||
line-height: 1.618em;
|
||||
white-space: normal;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.box:after, .box:before {
|
||||
bottom: 100%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.box:after {
|
||||
border-color: rgba(136, 183, 213, 0);
|
||||
border-bottom-color: #663600; /* rgba(48, 48, 48, 0.95); #88b7d5; */
|
||||
border-width: 20px;
|
||||
}
|
||||
|
||||
.box:before {
|
||||
border-color: rgba(194, 225, 245, 0);
|
||||
border-bottom-color: #f80; /* #c2e1f5; */
|
||||
border-width: 26px;
|
||||
}
|
||||
|
||||
.arrowLeft:after, .arrowLeft:before {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.arrowLeft:after {
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.arrowLeft:before {
|
||||
margin-left: -26px;
|
||||
}
|
||||
|
||||
.arrowRight:after, .arrowRight:before {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.arrowRight:after {
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
.arrowRight:before {
|
||||
margin-right: -26px;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin: 0;
|
||||
padding: 0 0.5em 0.5em 0;
|
||||
text-align: right;
|
||||
}
|
||||
66
js/src/ui/Tooltips/tooltips.js
Normal file
66
js/src/ui/Tooltips/tooltips.js
Normal file
@@ -0,0 +1,66 @@
|
||||
// Copyright 2015, 2016 Ethcore (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, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import { nextTooltip } from './actions';
|
||||
|
||||
import styles from './tooltips.css';
|
||||
|
||||
class Tooltips extends Component {
|
||||
static propTypes = {
|
||||
currentId: PropTypes.number,
|
||||
closed: PropTypes.bool,
|
||||
onNextTooltip: PropTypes.func
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
const { onNextTooltip } = this.props;
|
||||
|
||||
onNextTooltip();
|
||||
}
|
||||
|
||||
render () {
|
||||
const { currentId } = this.props;
|
||||
|
||||
if (currentId === -1) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.overlay } />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { currentId } = state.tooltip;
|
||||
|
||||
return { currentId };
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({
|
||||
onNextTooltip: nextTooltip
|
||||
}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Tooltips);
|
||||
17
js/src/ui/TxHash/index.js
Normal file
17
js/src/ui/TxHash/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 './txHash';
|
||||
41
js/src/ui/TxHash/txHash.css
Normal file
41
js/src/ui/TxHash/txHash.css
Normal file
@@ -0,0 +1,41 @@
|
||||
/* Copyright 2015, 2016 Ethcore (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/>.
|
||||
*/
|
||||
|
||||
.details {
|
||||
}
|
||||
|
||||
.header {
|
||||
}
|
||||
|
||||
.hash {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
padding-top: 1em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.progressbar {
|
||||
margin: 0.5em !important;
|
||||
width: 30% !important;
|
||||
display: inline-block !important;
|
||||
height: 0.75em !important;
|
||||
}
|
||||
|
||||
.progressinfo {
|
||||
}
|
||||
135
js/src/ui/TxHash/txHash.js
Normal file
135
js/src/ui/TxHash/txHash.js
Normal file
@@ -0,0 +1,135 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 BigNumber from 'bignumber.js';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { LinearProgress } from 'material-ui';
|
||||
|
||||
import styles from './txHash.css';
|
||||
|
||||
class TxHash extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
hash: PropTypes.string.isRequired,
|
||||
isTest: PropTypes.bool
|
||||
}
|
||||
|
||||
state = {
|
||||
blockNumber: new BigNumber(0),
|
||||
transaction: null,
|
||||
subscriptionId: null
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
const { api } = this.context;
|
||||
|
||||
api.subscribe('eth_blockNumber', this.onBlockNumber).then((subscriptionId) => {
|
||||
this.setState({ subscriptionId });
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
const { api } = this.context;
|
||||
const { subscriptionId } = this.state;
|
||||
|
||||
api.unsubscribe('eth_blockNumber', subscriptionId);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { hash, isTest } = this.props;
|
||||
const link = `https://${isTest ? 'testnet.' : ''}etherscan.io/tx/${hash}`;
|
||||
|
||||
return (
|
||||
<div className={ styles.details }>
|
||||
<div className={ styles.header }>
|
||||
The transaction has been posted to the network with a transaction hash of
|
||||
</div>
|
||||
<div className={ styles.hash }>
|
||||
<a href={ link } target='_blank'>{ hash }</a>
|
||||
</div>
|
||||
{ this.renderConfirmations() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderConfirmations () {
|
||||
const { blockNumber, transaction } = this.state;
|
||||
|
||||
let txBlock = 'Pending';
|
||||
let confirmations = 'No';
|
||||
let value = 0;
|
||||
|
||||
if (transaction && transaction.blockNumber && transaction.blockNumber.gt(0)) {
|
||||
const num = blockNumber.minus(transaction.blockNumber).plus(1);
|
||||
txBlock = `#${transaction.blockNumber.toFormat(0)}`;
|
||||
confirmations = num.toFormat(0);
|
||||
value = num.gt(10) ? 10 : num.toNumber();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.confirm }>
|
||||
<LinearProgress
|
||||
className={ styles.progressbar }
|
||||
min={ 0 } max={ 10 } value={ value }
|
||||
color='white'
|
||||
mode='determinate' />
|
||||
<div className={ styles.progressinfo }>
|
||||
{ txBlock } / { confirmations } confirmations
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
onBlockNumber = (error, blockNumber) => {
|
||||
const { api } = this.context;
|
||||
const { hash } = this.props;
|
||||
|
||||
if (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({ blockNumber });
|
||||
|
||||
api.eth
|
||||
.getTransactionReceipt(hash)
|
||||
.then((transaction) => {
|
||||
this.setState({ transaction });
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn('onBlockNumber', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { isTest } = state.nodeStatus;
|
||||
|
||||
return { isTest };
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(TxHash);
|
||||
68
js/src/ui/index.js
Normal file
68
js/src/ui/index.js
Normal file
@@ -0,0 +1,68 @@
|
||||
// Copyright 2015, 2016 Ethcore (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 Actionbar from './Actionbar';
|
||||
import Badge from './Badge';
|
||||
import Balance from './Balance';
|
||||
import Button from './Button';
|
||||
import ConfirmDialog from './ConfirmDialog';
|
||||
import Container, { Title as ContainerTitle } from './Container';
|
||||
import ContextProvider from './ContextProvider';
|
||||
import Errors from './Errors';
|
||||
import Form, { AddressSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputInline, Select } from './Form';
|
||||
import IdentityIcon from './IdentityIcon';
|
||||
import IdentityName from './IdentityName';
|
||||
import MethodDecoding from './MethodDecoding';
|
||||
import Modal, { Busy as BusyStep, Completed as CompletedStep } from './Modal';
|
||||
import muiTheme from './Theme';
|
||||
import Page from './Page';
|
||||
import ParityBackground from './ParityBackground';
|
||||
import SignerIcon from './SignerIcon';
|
||||
import Tooltips, { Tooltip } from './Tooltips';
|
||||
import TxHash from './TxHash';
|
||||
|
||||
export {
|
||||
Actionbar,
|
||||
AddressSelect,
|
||||
Badge,
|
||||
Balance,
|
||||
Button,
|
||||
ConfirmDialog,
|
||||
Container,
|
||||
ContainerTitle,
|
||||
ContextProvider,
|
||||
Errors,
|
||||
Form,
|
||||
FormWrap,
|
||||
Input,
|
||||
InputAddress,
|
||||
InputAddressSelect,
|
||||
InputInline,
|
||||
Select,
|
||||
IdentityIcon,
|
||||
IdentityName,
|
||||
MethodDecoding,
|
||||
Modal,
|
||||
BusyStep,
|
||||
CompletedStep,
|
||||
muiTheme,
|
||||
Page,
|
||||
ParityBackground,
|
||||
SignerIcon,
|
||||
Tooltip,
|
||||
Tooltips,
|
||||
TxHash
|
||||
};
|
||||
Reference in New Issue
Block a user