grassrootseconomics/openethereum
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Trim unused components

Browse Source
This commit is contained in:
Jaco Greeff 2016-11-29 16:55:59 +01:00
parent efd4e6f96a
commit 0ddd33c643
9 changed files with 2 additions and 507 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
js/src/views/Signer/components/TransactionFinished/TransactionFinished.css
View File

@ -1,54 +0,0 @@
/* 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 '../../_layout.css';
.container {
display: flex;
padding: 1.5em 0 1em;
& > * {
vertical-align: middle;
min-height: $finishedHeight;
}
}
.statusContainer {
box-sizing: border-box;
float: right;
padding: 0 1em;
flex: 0 0 $statusWidth;
}
.transactionDetails {
width: 100%;
box-sizing: border-box;
}
.isConfirmed {
color: green;
}
.isRejected {
opacity: 0.5;
padding-top: 2em;
}
.txHash {
display: block;
word-break: break-all;
}

120
js/src/views/Signer/components/TransactionFinished/TransactionFinished.js
View File

@ -1,120 +0,0 @@
// 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 { observer } from 'mobx-react';
import { TxHash } from '../../../../ui';
import TransactionMainDetails from '../TransactionMainDetails';
import TxHashLink from '../TxHashLink';
import TransactionSecondaryDetails from '../TransactionSecondaryDetails';
import styles from './TransactionFinished.css';
import * as tUtil from '../util/transaction';
import { capitalize } from '../util/util';
@observer
export default class TransactionFinished extends Component {
static propTypes = {
id: PropTypes.object.isRequired,
from: PropTypes.string.isRequired,
value: PropTypes.object.isRequired, // wei hex
gasPrice: PropTypes.object.isRequired, // wei hex
gas: PropTypes.object.isRequired, // hex
status: PropTypes.string.isRequired, // rejected, confirmed
date: PropTypes.instanceOf(Date).isRequired,
to: PropTypes.string, // undefined if it's a contract
txHash: PropTypes.string, // undefined if transacation is rejected
className: PropTypes.string,
data: PropTypes.string,
isTest: PropTypes.bool.isRequired,
store: PropTypes.object.isRequired
};
componentWillMount () {
const { from, to, gas, gasPrice, value, store } = this.props;
const fee = tUtil.getFee(gas, gasPrice); // BigNumber object
const totalValue = tUtil.getTotalValue(fee, value);
this.setState({ totalValue });
store.fetchBalances([from, to]);
}
render () {
const { className, date, id, from, to, store } = this.props;
const fromBalance = store.balances[from];
const toBalance = store.balances[to];
return (
<div className={ `${styles.container} ${className || ''}` }>
<TransactionMainDetails
{ ...this.props }
{ ...this.state }
fromBalance={ fromBalance }
toBalance={ toBalance }
className={ styles.transactionDetails }
>
<TransactionSecondaryDetails
id={ id }
date={ date }
/>
</TransactionMainDetails>
<div className={ styles.statusContainer }>
{ this.renderStatus() }
</div>
</div>
);
}
renderStatus () {
const { status, txHash } = this.props;
if (status !== 'confirmed') {
return (
<div>
<span className={ styles.isRejected }>{ capitalize(status) }</span>
</div>
);
}
return (
<TxHash
summary
hash={ txHash } />
);
}
renderTxHash () {
const { txHash, isTest } = this.props;
if (!txHash) {
return;
}
return (
<div>
Transaction hash:
<TxHashLink
isTest={ isTest }
txHash={ txHash }
className={ styles.txHash } />
</div>
);
}
}

17
js/src/views/Signer/components/TransactionFinished/index.js
View File

@ -1,17 +0,0 @@
// 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 './TransactionFinished';

2
js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js
View File

@ -32,9 +32,7 @@ export default class TransactionMainDetails extends Component {
value: PropTypes.object.isRequired, // wei hex
totalValue: PropTypes.object.isRequired, // wei BigNumber
isTest: PropTypes.bool.isRequired,
to: PropTypes.string, // undefined if it's a contract
transaction: PropTypes.object.isRequired,
toBalance: PropTypes.object, // eth BigNumber - undefined if it's a contract or until it's fetched
children: PropTypes.node
};

5
js/src/views/Signer/components/TransactionPending/TransactionPending.js
View File

@ -65,11 +65,10 @@ export default class TransactionPending extends Component {
render () {
const { className, id, transaction, store } = this.props;
const { from, to, value } = transaction;
const { from, value } = transaction;
const { totalValue } = this.state;
const fromBalance = store.balances[from];
const toBalance = store.balances[to];
return (
<div className={ `${styles.container} ${className || ''}` }>
@ -78,8 +77,6 @@ export default class TransactionPending extends Component {
value={ value }
from={ from }
fromBalance={ fromBalance }
to={ to }
toBalance={ toBalance }
className={ styles.transactionDetails }
transaction={ transaction }
totalValue={ totalValue } />

90
js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.css
View File

@ -1,90 +0,0 @@
/* 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 {
display: block;
}
.iconsContainer {
display: block;
text-align: center;
font-size: .8em;
opacity: 0.5;
padding: 1em 0 0 0;
}
.iconsContainer > * {
margin-right: 3px;
display: inline-block;
}
.iconsContainer:after {
clear: both;
}
.hasInfoIcon svg,
.miningTime svg,
.gasPrice svg,
.data svg,
.date svg {
width: 16px !important;
height: 16px !important;
position: relative;
bottom: -3px;
margin: 0 0.25rem 0 0.75rem;
}
/* TODO [ToDr] composes was handling weird errors when linking from other app */
.miningTime {
/* composes: hasInfoIcon; */
}
.gasPrice {
/* composes: hasInfoIcon; */
}
.data {
/* composes: hasInfoIcon; */
cursor: pointer;
}
.data.noData {
cursor: text;
}
.dataTooltip {
word-wrap: break-word;
max-width: 400px;
}
.expandedData {
display: block;
padding: 15px;
background: gray;
word-wrap: break-word;
color: #fff;
}
.expandedContainer {
padding: 10px;
border-radius: 4px;
}
.expandedContainer:empty {
padding: 0;
}

178
js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.js
View File

@ -1,178 +0,0 @@
// 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 ReactTooltip from 'react-tooltip';
import DescriptionIcon from 'material-ui/svg-icons/action/description';
import GasIcon from 'material-ui/svg-icons/maps/local-gas-station';
import TimeIcon from 'material-ui/svg-icons/device/access-time';
import moment from 'moment';
import styles from './TransactionSecondaryDetails.css';
import * as tUtil from '../util/transaction';
export default class TransactionSecondaryDetails extends Component {
static propTypes = {
id: PropTypes.object.isRequired,
date: PropTypes.instanceOf(Date),
data: PropTypes.string, // hex
gasPriceEthmDisplay: PropTypes.string,
gasToDisplay: PropTypes.string,
className: PropTypes.string
};
state = {
isDataExpanded: false
};
render () {
const className = this.props.className || '';
return (
<div className={ `${styles.container} ${className}` }>
<div className={ styles.iconsContainer }>
{ this.renderGasPrice() }
{ this.renderData() }
{ this.renderDate() }
</div>
<div className={ styles.expandedContainer }>
{ this.renderDataExpanded() }
</div>
</div>
);
}
renderGasPrice () {
if (!this.props.gasPriceEthmDisplay && !this.props.gasToDisplay) {
return null;
}
const { id } = this.props;
const { gasPriceEthmDisplay, gasToDisplay } = this.props;
return (
<div
data-tip
data-place='right'
data-for={ 'gasPrice' + id }
data-effect='solid'
>
<span className={ styles.gasPrice }>
<GasIcon />
{ gasPriceEthmDisplay } <small>ETH/MGAS</small>
</span>
{ /* dynamic id required in case there are multple transactions in page */ }
<ReactTooltip id={ 'gasPrice' + id }>
Cost of 1,000,000 units of gas. This transaction will use up to <strong>{ gasToDisplay }</strong> <small>MGAS</small>.
</ReactTooltip>
</div>
);
}
renderData () {
if (!this.props.data) {
return null;
}
const { data, id } = this.props;
let dataToDisplay = this.noData() ? 'no data' : tUtil.getShortData(data);
const noDataClass = this.noData() ? styles.noData : '';
return (
<div
className={ `${styles.data} ${noDataClass}` }
onClick={ this.toggleDataExpanded }
data-tip
data-place='right'
data-for={ 'data' + id }
data-class={ styles.dataTooltip }
data-effect='solid'
>
<DescriptionIcon />
{ dataToDisplay }
{ /* dynamic id required in case there are multple transactions in page */ }
<ReactTooltip id={ 'data' + id }>
<strong>Extra data for the transaction: </strong>
<br />
{ dataToDisplay }.
<br />
{ this.noData() ? '' : <strong>Click to expand.</strong> }
</ReactTooltip>
</div>
);
}
renderDate () {
const { date, id } = this.props;
const dateToDisplay = moment(date).fromNow();
const fullDate = moment(date).format('LL LTS');
return (
<div
className={ styles.date }
data-tip
data-place='right'
data-for={ 'date' + id }
data-class={ styles.dataTooltip }
data-effect='solid'
>
<TimeIcon />
{ dateToDisplay }
{ /* dynamic id required in case there are multple transactions in page */ }
<ReactTooltip id={ 'date' + id }>
<strong>Date of the request: </strong>
<br />
{ fullDate }
</ReactTooltip>
</div>
);
}
renderDataExpanded () {
if (!this.props.data) return null;
const { isDataExpanded } = this.state;
const { data } = this.props;
if (!isDataExpanded) {
return;
}
return (
<div className={ styles.expandedHelper }>
<h3>Transaction's Data</h3>
<code className={ styles.expandedData }>{ data }</code>
</div>
);
}
noData () {
return this.props.data === '0x';
}
toggleDataExpanded = () => {
if (this.noData()) {
return;
}
this.setState({
isDataExpanded: !this.state.isDataExpanded
});
}
}

1
js/src/views/Signer/components/TransactionSecondaryDetails/index.js
View File

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

42
js/src/views/Signer/containers/RequestsPage/RequestsPage.js
View File

@ -24,7 +24,7 @@ import Store from '../../store';
import * as RequestsActions from '../../../../redux/providers/signerActions';
import { Container, Page, TxList } from '../../../../ui';
import { RequestPending, RequestFinished } from '../../components';
import { RequestPending } from '../../components';
import styles from './RequestsPage.css';
@ -57,7 +57,6 @@ class RequestsPage extends Component {
<Page>
<div>{ this.renderPendingRequests() }</div>
<div>{ this.renderLocalQueue() }</div>
<div>{ this.renderFinishedRequests() }</div>
</Page>
);
}
@ -106,24 +105,6 @@ class RequestsPage extends Component {
);
}
renderFinishedRequests () {
const { finished } = this.props.signer;
if (!finished.length) {
return;
}
const items = finished.sort(this._sortRequests).map(this.renderFinished);
return (
<Container title='Finished Requests'>
<div className={ styles.items }>
{ items }
</div>
</Container>
);
}
renderPending = (data) => {
const { actions, isTest } = this.props;
const { payload, id, isSending, date } = data;
@ -143,27 +124,6 @@ class RequestsPage extends Component {
/>
);
}
renderFinished = (data) => {
const { isTest } = this.props;
const { payload, id, result, msg, status, error, date } = data;
return (
<RequestFinished
className={ styles.request }
result={ result }
key={ id }
id={ id }
msg={ msg }
status={ status }
error={ error }
payload={ payload }
date={ date }
isTest={ isTest }
store={ this.store }
/>
);
}
}
function mapStateToProps (state) {