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

refactor signer components (#2691)

Browse Source 
* remove TransactionPendingWeb3

* remove TransactionFinishedWeb3

* remove SignRequestWeb3
This commit is contained in:
Jannis Redmann 2016-10-20 11:31:23 +02:00 committed by Jaco Greeff
parent 81f8e86e47
commit d2e4bafaa5
11 changed files with 116 additions and 371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js/src/views/Signer/components/RequestFinishedWeb3/RequestFinishedWeb3.js
View File

@ -16,8 +16,8 @@
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import TransactionFinishedWeb3 from '../TransactionFinishedWeb3'; import TransactionFinished from '../TransactionFinished';
import SignWeb3 from '../SignRequestWeb3'; import SignRequest from '../SignRequest';
export default class RequestFinishedWeb3 extends Component { export default class RequestFinishedWeb3 extends Component {
static propTypes = { static propTypes = {
@ -40,7 +40,7 @@ export default class RequestFinishedWeb3 extends Component {
if (payload.sign) { if (payload.sign) {
const { sign } = payload; const { sign } = payload;
return ( return (
<SignWeb3 <SignRequest
className={ className } className={ className }
isFinished isFinished
id={ id } id={ id }
@ -57,7 +57,7 @@ export default class RequestFinishedWeb3 extends Component {
if (payload.transaction) { if (payload.transaction) {
const { transaction } = payload; const { transaction } = payload;
return ( return (
<TransactionFinishedWeb3 <TransactionFinished
className={ className } className={ className }
txHash={ result } txHash={ result }
id={ id } id={ id }

8
js/src/views/Signer/components/RequestPendingWeb3/RequestPendingWeb3.js
View File

@ -16,8 +16,8 @@
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import TransactionPendingWeb3 from '../TransactionPendingWeb3'; import TransactionPending from '../TransactionPending';
import SignRequestWeb3 from '../SignRequestWeb3'; import SignRequest from '../SignRequest';
export default class RequestPendingWeb3 extends Component { export default class RequestPendingWeb3 extends Component {
static propTypes = { static propTypes = {
@ -39,7 +39,7 @@ export default class RequestPendingWeb3 extends Component {
if (payload.sign) { if (payload.sign) {
const { sign } = payload; const { sign } = payload;
return ( return (
<SignRequestWeb3 <SignRequest
className={ className } className={ className }
onConfirm={ onConfirm } onConfirm={ onConfirm }
onReject={ onReject } onReject={ onReject }
@ -55,7 +55,7 @@ export default class RequestPendingWeb3 extends Component {
if (payload.transaction) { if (payload.transaction) {
const { transaction } = payload; const { transaction } = payload;
return ( return (
<TransactionPendingWeb3 <TransactionPending
className={ className } className={ className }
onConfirm={ onConfirm } onConfirm={ onConfirm }
onReject={ onReject } onReject={ onReject }

29
js/src/views/Signer/components/SignRequest/SignRequest.js
View File

@ -30,8 +30,6 @@ export default class SignRequest extends Component {
address: PropTypes.string.isRequired, address: PropTypes.string.isRequired,
hash: PropTypes.string.isRequired, hash: PropTypes.string.isRequired,
isFinished: PropTypes.bool.isRequired, isFinished: PropTypes.bool.isRequired,
chain: PropTypes.string.isRequired,
balance: PropTypes.object,
isSending: PropTypes.bool, isSending: PropTypes.bool,
onConfirm: PropTypes.func, onConfirm: PropTypes.func,
onReject: PropTypes.func, onReject: PropTypes.func,
@ -39,10 +37,33 @@ export default class SignRequest extends Component {
className: PropTypes.string className: PropTypes.string
}; };
state = {
chain: null,
balance: null
}
componentWillMount () {
this.context.api.ethcore.netChain()
.then((chain) => {
this.setState({ chain });
})
.catch((err) => {
console.error('could not fetch chain', err);
});
this.context.api.eth.getBalance(this.props.address)
.then((balance) => {
this.setState({ balance });
})
.catch((err) => {
console.error('could not fetch balance', err);
});
}
render () { render () {
const className = this.props.className || ''; const { chain, balance, className } = this.props;
return ( return (
<div className={ `${styles.container} ${className}` }> <div className={ `${styles.container} ${className || ''}` }>
{ this.renderDetails() } { this.renderDetails() }
{ this.renderActions() } { this.renderActions() }
</div> </div>

95
js/src/views/Signer/components/SignRequestWeb3/SignRequestWeb3.js
View File

@ -1,95 +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 SignRequest from '../SignRequest';
export default class SignRequestWeb3 extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
}
static propTypes = {
id: PropTypes.string.isRequired,
address: PropTypes.string.isRequired,
hash: PropTypes.string.isRequired,
isFinished: PropTypes.bool.isRequired,
isSending: PropTypes.bool,
onConfirm: PropTypes.func,
onReject: PropTypes.func,
status: PropTypes.string,
className: PropTypes.string
};
state = {
chain: 'homestead',
balance: null // avoid required prop loading warning
}
componentDidMount () {
this.fetchChain();
this.fetchBalance();
}
render () {
const { balance, chain } = this.state;
const { address, onConfirm, onReject, isSending, isFinished, hash, className, id, status } = this.props;
return (
<SignRequest
address={ address }
hash={ hash }
balance={ balance }
onConfirm={ onConfirm }
onReject={ onReject }
isSending={ isSending }
isFinished={ isFinished }
id={ id }
chain={ chain }
status={ status }
className={ className }
/>
);
}
fetchChain () {
const { api } = this.context;
api.ethcore
.getNetChain()
.then((chain) => {
this.setState({ chain });
})
.catch((error) => {
console.error('fetchChain', error);
});
}
fetchBalance () {
const { api } = this.context;
const { address } = this.props;
api.eth
.getBalance(address)
.then((balance) => {
this.setState({ balance });
})
.catch((error) => {
console.error('fetchBalance', error);
});
}
}

17
js/src/views/Signer/components/SignRequestWeb3/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 './SignRequestWeb3';

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

@ -16,6 +16,7 @@
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import CircularProgress from 'material-ui/CircularProgress';
import TransactionMainDetails from '../TransactionMainDetails'; import TransactionMainDetails from '../TransactionMainDetails';
import TxHashLink from '../TxHashLink'; import TxHashLink from '../TxHashLink';
import TransactionSecondaryDetails from '../TransactionSecondaryDetails'; import TransactionSecondaryDetails from '../TransactionSecondaryDetails';
@ -26,25 +27,28 @@ import * as tUtil from '../util/transaction';
import { capitalize } from '../util/util'; import { capitalize } from '../util/util';
export default class TransactionFinished extends Component { export default class TransactionFinished extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
};
static propTypes = { static propTypes = {
id: PropTypes.object.isRequired, id: PropTypes.object.isRequired,
from: PropTypes.string.isRequired, from: PropTypes.string.isRequired,
fromBalance: PropTypes.object, // eth BigNumber, not required since it might take time to fetch
value: PropTypes.object.isRequired, // wei hex value: PropTypes.object.isRequired, // wei hex
chain: PropTypes.string.isRequired,
gasPrice: PropTypes.object.isRequired, // wei hex gasPrice: PropTypes.object.isRequired, // wei hex
gas: PropTypes.object.isRequired, // hex gas: PropTypes.object.isRequired, // hex
status: PropTypes.string.isRequired, // rejected, confirmed status: PropTypes.string.isRequired, // rejected, confirmed
date: PropTypes.instanceOf(Date).isRequired, date: PropTypes.instanceOf(Date).isRequired,
to: PropTypes.string, // undefined if it's a contract to: PropTypes.string, // undefined if it's a contract
toBalance: PropTypes.object, // eth BigNumber - undefined if it's a contract or until it's fetched
txHash: PropTypes.string, // undefined if transacation is rejected txHash: PropTypes.string, // undefined if transacation is rejected
className: PropTypes.string, className: PropTypes.string,
data: PropTypes.string data: PropTypes.string
}; };
static defaultProps = { state = {
value: '0x0' // todo [adgo] - remove after resolving https://github.com/ethcore/parity/issues/1458 chain: null,
fromBalance: null,
toBalance: null
}; };
componentWillMount () { componentWillMount () {
@ -52,9 +56,30 @@ export default class TransactionFinished extends Component {
const fee = tUtil.getFee(gas, gasPrice); // BigNumber object const fee = tUtil.getFee(gas, gasPrice); // BigNumber object
const totalValue = tUtil.getTotalValue(fee, value); const totalValue = tUtil.getTotalValue(fee, value);
this.setState({ totalValue }); this.setState({ totalValue });
this.context.api.ethcore.netChain()
.then((chain) => {
this.setState({ chain });
})
.catch((err) => {
console.error('could not fetch chain', err);
});
const { from, to } = this.props;
this.fetchBalance(from, 'fromBalance');
if (to) this.fetchBalance(to, 'toBalance');
} }
render () { render () {
const { chain, fromBalance, toBalance } = this.state;
if (!chain || !fromBalance || !toBalance) {
return (
<div className={ `${styles.container} ${className}` }>
<CircularProgress size={ 1 } />
</div>
);
}
const { className, date, id } = this.props; const { className, date, id } = this.props;
const { totalValue } = this.state; const { totalValue } = this.state;
@ -63,7 +88,7 @@ export default class TransactionFinished extends Component {
<div className={ styles.mainContainer }> <div className={ styles.mainContainer }>
<TransactionMainDetails <TransactionMainDetails
{ ...this.props } { ...this.props }
totalValue={ totalValue } { ...this.state }
className={ styles.transactionDetails } className={ styles.transactionDetails }
> >
<TransactionSecondaryDetails <TransactionSecondaryDetails
@ -104,4 +129,14 @@ export default class TransactionFinished extends Component {
); );
} }
fetchBalance (address, key) {
this.context.api.eth.getBalance(address)
.then((balance) => {
this.setState({ [key]: balance });
})
.catch((err) => {
console.error('could not fetch balance', err);
});
}
} }

92
js/src/views/Signer/components/TransactionFinishedWeb3/TransactionFinishedWeb3.js
View File

@ -1,92 +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 TransactionFinished from '../TransactionFinished';
export default class TransactionFinishedWeb3 extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
}
static propTypes = {
from: PropTypes.string.isRequired,
to: PropTypes.string // undefined if it's a contract
}
state = {
chain: 'homestead'
}
componentDidMount () {
this.fetchChain();
this.fetchBalances();
}
render () {
const { fromBalance, toBalance, chain } = this.state;
const { from, to } = this.props;
return (
<TransactionFinished
{ ...this.props }
from={ from }
fromBalance={ fromBalance }
to={ to }
toBalance={ toBalance }
chain={ chain }
/>
);
}
fetchChain () {
const { api } = this.context;
api.ethcore
.netChain()
.then((chain) => {
this.setState({ chain });
})
.catch((error) => {
console.error('fetchChain', error);
});
}
fetchBalances () {
const { from, to } = this.props;
this.fetchBalance(from, 'from');
if (!to) {
return;
}
this.fetchBalance(to, 'to');
}
fetchBalance (address, owner) {
const { api } = this.context;
api.eth
.getBalance(address)
.then((balance) => {
this.setState({ [owner + 'Balance']: balance });
})
.catch((error) => {
console.error('fetchBalance', error);
});
}
}

17
js/src/views/Signer/components/TransactionFinishedWeb3/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 './TransactionFinishedWeb3';

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

@ -16,6 +16,7 @@
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import CircularProgress from 'material-ui/CircularProgress';
import TransactionMainDetails from '../TransactionMainDetails'; import TransactionMainDetails from '../TransactionMainDetails';
import TransactionPendingForm from '../TransactionPendingForm'; import TransactionPendingForm from '../TransactionPendingForm';
import TransactionSecondaryDetails from '../TransactionSecondaryDetails'; import TransactionSecondaryDetails from '../TransactionSecondaryDetails';
@ -25,17 +26,18 @@ import styles from './TransactionPending.css';
import * as tUtil from '../util/transaction'; import * as tUtil from '../util/transaction';
export default class TransactionPending extends Component { export default class TransactionPending extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
};
static propTypes = { static propTypes = {
id: PropTypes.object.isRequired, id: PropTypes.object.isRequired,
chain: PropTypes.string.isRequired,
from: PropTypes.string.isRequired, from: PropTypes.string.isRequired,
fromBalance: PropTypes.object, // eth BigNumber, not required since it mght take time to fetch
value: PropTypes.object.isRequired, // wei hex value: PropTypes.object.isRequired, // wei hex
gasPrice: PropTypes.object.isRequired, // wei hex gasPrice: PropTypes.object.isRequired, // wei hex
gas: PropTypes.object.isRequired, // hex gas: PropTypes.object.isRequired, // hex
date: PropTypes.instanceOf(Date).isRequired, date: PropTypes.instanceOf(Date).isRequired,
to: PropTypes.string, // undefined if it's a contract to: PropTypes.string, // undefined if it's a contract
toBalance: PropTypes.object, // eth BigNumber - undefined if it's a contract or until it's fetched
data: PropTypes.string, // hex data: PropTypes.string, // hex
nonce: PropTypes.number, nonce: PropTypes.number,
onConfirm: PropTypes.func.isRequired, onConfirm: PropTypes.func.isRequired,
@ -49,7 +51,9 @@ export default class TransactionPending extends Component {
}; };
state = { state = {
isDataExpanded: false chain: null,
fromBalance: null,
toBalance: null
}; };
componentWillMount () { componentWillMount () {
@ -59,20 +63,39 @@ export default class TransactionPending extends Component {
const gasPriceEthmDisplay = tUtil.getEthmFromWeiDisplay(gasPrice); const gasPriceEthmDisplay = tUtil.getEthmFromWeiDisplay(gasPrice);
const gasToDisplay = tUtil.getGasDisplay(gas); const gasToDisplay = tUtil.getGasDisplay(gas);
this.setState({ gasPriceEthmDisplay, totalValue, gasToDisplay }); this.setState({ gasPriceEthmDisplay, totalValue, gasToDisplay });
this.context.api.ethcore.netChain()
.then((chain) => {
this.setState({ chain });
})
.catch((err) => {
console.error('could not fetch chain', err);
});
const { from, to } = this.props;
this.fetchBalance(from, 'fromBalance');
if (to) this.fetchBalance(to, 'toBalance');
} }
render () { render () {
const { totalValue } = this.state; const { chain, fromBalance, toBalance } = this.state;
const className = this.props.className || ''; if (!chain || !fromBalance || !toBalance) {
return (
<div className={ `${styles.container} ${className}` }>
<CircularProgress size={ 1 } />
</div>
);
}
const { gasPriceEthmDisplay, gasToDisplay } = this.state; const { totalValue, gasPriceEthmDisplay, gasToDisplay } = this.state;
const { id, date, data, from } = this.props; const { className, id, date, data, from } = this.props;
return ( return (
<div className={ `${styles.container} ${className}` }> <div className={ `${styles.container} ${className || ''}` }>
<div className={ styles.mainContainer }> <div className={ styles.mainContainer }>
<TransactionMainDetails <TransactionMainDetails
{ ...this.props } { ...this.props }
{ ...this.state }
className={ styles.transactionDetails } className={ styles.transactionDetails }
totalValue={ totalValue }> totalValue={ totalValue }>
<TransactionSecondaryDetails <TransactionSecondaryDetails
@ -103,4 +126,14 @@ export default class TransactionPending extends Component {
this.props.onReject(this.props.id); this.props.onReject(this.props.id);
} }
fetchBalance (address, key) {
this.context.api.eth.getBalance(address)
.then((balance) => {
this.setState({ [key]: balance });
})
.catch((err) => {
console.error('could not fetch balance', err);
});
}
} }

106
js/src/views/Signer/components/TransactionPendingWeb3/TransactionPendingWeb3.js
View File

@ -1,106 +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 TransactionPending from '../TransactionPending';
export default class TransactionPendingWeb3 extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
};
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
onConfirm: PropTypes.func.isRequired,
onReject: PropTypes.func.isRequired,
isSending: PropTypes.bool.isRequired,
date: PropTypes.instanceOf(Date).isRequired,
to: PropTypes.string, // undefined if it's a contract
data: PropTypes.string, // hex
nonce: PropTypes.number,
className: PropTypes.string
};
state = {
chain: 'homestead',
fromBalance: null, // avoid required prop loading warning
toBalance: null // avoid required prop loading warning in case there's a to address
}
componentDidMount () {
this.fetchChain();
this.fetchBalances();
}
render () {
const { fromBalance, toBalance, chain } = this.state;
const { from, to, date } = this.props;
return (
<TransactionPending
{ ...this.props }
from={ from }
to={ to }
fromBalance={ fromBalance }
toBalance={ toBalance }
chain={ chain }
date={ date }
/>
);
}
fetchChain () {
const { api } = this.context;
api.ethcore
.netChain()
.then((chain) => {
this.setState({ chain });
})
.catch((error) => {
console.error('fetchChain', error);
});
}
fetchBalances () {
const { from, to } = this.props;
this.fetchBalance(from, 'from');
if (!to) {
return;
}
this.fetchBalance(to, 'to');
}
fetchBalance (address, owner) {
const { api } = this.context;
api.eth
.getBalance(address)
.then((balance) => {
this.setState({ [owner + 'Balance']: balance });
})
.catch((error) => {
console.error('fetchBalance', error);
});
}
}

17
js/src/views/Signer/components/TransactionPendingWeb3/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 './TransactionPendingWeb3';