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:
Jaco Greeff
2016-10-18 11:52:56 +02:00
committed by Gav Wood
parent 6c7af57529
commit 1e6a2cb378
969 changed files with 57315 additions and 0 deletions

View 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;
}

View 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>
);
}
}

View 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
View 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
View 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
View 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';

View 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;
}

View 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);

View 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';

View 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
View 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';

View 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;
}

View 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 } />
];
}
}

View 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';

View 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';

View 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;
}

View 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>
);
}
}

View 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;
}

View 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>
);
}
}

View 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 };

View 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
};
}
}

View File

@@ -0,0 +1 @@
export default from './contextProvider';

View 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'
};
}

View 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;
}

View 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
View 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
};

View 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
};

View 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;
}
}

View 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;
}

View 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);
}
}

View 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';

View 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%;
}

View 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>
);
}
}

View 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';

View 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';

View 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
});
}
}

View 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';

View 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;
}

View 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);

View 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';

View 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;
}

View 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);

View 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';

View 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;
}

View 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);
}
}

View 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';

View 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
View 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
View 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
View 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
};

View 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;
}

View 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);

View 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';

View 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);

View 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';

View 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';

View 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;
}

View 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);

View 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;
}

View 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>
);
}
}

View 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';

View 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;
}

View 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>
);
}
}

View 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';

View 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';

View 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
View 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
View 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
View 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
View 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
View 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
View 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>
);
}
}

View 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';

View 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);

View 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';

View 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
View 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
View 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;

View 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';

View 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);

View 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'
};
}

View 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 };

View 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;
}
}

View 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;
}

View 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
View 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';

View 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
View 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
View 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
};