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

Introduce mobx store for component balances

Browse Source
This commit is contained in:
Jaco Greeff
2016-11-18 22:26:52 +01:00
parent 4498fd54a4
commit d1e6b9ec5e
9 changed files with 110 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,11 +32,12 @@ export default class RequestFinishedWeb3 extends Component {
status: PropTypes.string,
error: PropTypes.string,
className: PropTypes.string,
isTest: PropTypes.bool.isRequired
isTest: PropTypes.bool.isRequired,
store: PropTypes.object.isRequired
}
render () {
const { payload, id, result, msg, status, error, date, className, isTest } = this.props;
const { payload, id, result, msg, status, error, date, className, isTest, store } = this.props;
if (payload.sign) {
const { sign } = payload;
@@ -52,6 +53,7 @@ export default class RequestFinishedWeb3 extends Component {
status={ status }
error={ error }
isTest={ isTest }
store={ store }
/>
);
}
@@ -74,6 +76,7 @@ export default class RequestFinishedWeb3 extends Component {
status={ status }
error={ error }
isTest={ isTest }
store={ store }
/>
);
}

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

@@ -31,7 +31,8 @@ export default class RequestPendingWeb3 extends Component {
PropTypes.shape({ sign: PropTypes.object.isRequired })
]).isRequired,
className: PropTypes.string,
isTest: PropTypes.bool.isRequired
isTest: PropTypes.bool.isRequired,
store: PropTypes.object.isRequired
};
onConfirm = data => {
@@ -42,7 +43,7 @@ export default class RequestPendingWeb3 extends Component {
};
render () {
const { payload, id, className, isSending, date, onReject, isTest } = this.props;
const { payload, id, className, isSending, date, onReject, isTest, store } = this.props;
if (payload.sign) {
const { sign } = payload;
@@ -58,6 +59,7 @@ export default class RequestPendingWeb3 extends Component {
address={ sign.address }
hash={ sign.hash }
isTest={ isTest }
store={ store }
/>
);
}
@@ -80,6 +82,7 @@ export default class RequestPendingWeb3 extends Component {
value={ transaction.value }
date={ date }
isTest={ isTest }
store={ store }
/>
);
}

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

@@ -15,7 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import nullable from '../../../../util/nullable-proptype';
import { observer } from 'mobx-react';
import Account from '../Account';
import TransactionPendingForm from '../TransactionPendingForm';
@@ -23,12 +23,8 @@ import TxHashLink from '../TxHashLink';
import styles from './SignRequest.css';
@observer
export default class SignRequest extends Component {
static contextTypes = {
api: PropTypes.object
}
// TODO [todr] re-use proptypes?
static propTypes = {
id: PropTypes.object.isRequired,
address: PropTypes.string.isRequired,
@@ -40,21 +36,13 @@ export default class SignRequest extends Component {
status: PropTypes.string,
className: PropTypes.string,
isTest: PropTypes.bool.isRequired,
balance: nullable(PropTypes.object)
store: PropTypes.object.isRequired
};
state = {
balance: null
}
componentWillMount () {
this.context.api.eth.getBalance(this.props.address)
.then((balance) => {
this.setState({ balance });
})
.catch((err) => {
console.error('could not fetch balance', err);
});
const { address, store } = this.props;
store.fetchBalance(address);
}
render () {
@@ -69,8 +57,8 @@ export default class SignRequest extends Component {
}
renderDetails () {
const { address, hash, isTest } = this.props;
const { balance } = this.state;
const { address, hash, isTest, store } = this.props;
const balance = store.balances[address];
if (!balance) {
return <div />;
@@ -133,11 +121,11 @@ export default class SignRequest extends Component {
onConfirm = password => {
const { id } = this.props;
this.props.onConfirm({ id, password });
}
onReject = () => {
this.props.onReject(this.props.id);
}
}

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

@@ -14,6 +14,7 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
.container {
padding: 25px 0 15px;
}

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

@@ -15,9 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import nullable from '../../../../util/nullable-proptype';
import CircularProgress from 'material-ui/CircularProgress';
import { observer } from 'mobx-react';
import { TxHash } from '../../../../ui';
@@ -30,11 +28,8 @@ import styles from './TransactionFinished.css';
import * as tUtil from '../util/transaction';
import { capitalize } from '../util/util';
@observer
export default class TransactionFinished extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
};
static propTypes = {
id: PropTypes.object.isRequired,
from: PropTypes.string.isRequired,
@@ -48,39 +43,23 @@ export default class TransactionFinished extends Component {
className: PropTypes.string,
data: PropTypes.string,
isTest: PropTypes.bool.isRequired,
fromBalance: nullable(PropTypes.object),
toBalance: nullable(PropTypes.object)
};
state = {
fromBalance: null,
toBalance: null
store: PropTypes.object.isRequired
};
componentWillMount () {
const { from, to, gas, gasPrice, value } = this.props;
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 });
this.fetchBalance(from, 'fromBalance');
if (to) {
this.fetchBalance(to, 'toBalance');
}
this.setState({ totalValue });
store.fetchBalances([from, to]);
}
render () {
const { fromBalance, toBalance } = this.state;
const { className, date, id, from, to, store } = this.props;
if (!fromBalance || !toBalance) {
return (
<div className={ `${styles.container} ${className}` }>
<CircularProgress size={ 60 } />
</div>
);
}
const { className, date, id } = this.props;
const fromBalance = store.balances[from];
const toBalance = store.balances[to];
return (
<div className={ `${styles.container} ${className || ''}` }>
@@ -88,6 +67,8 @@ export default class TransactionFinished extends Component {
<TransactionMainDetails
{ ...this.props }
{ ...this.state }
fromBalance={ fromBalance }
toBalance={ toBalance }
className={ styles.transactionDetails }
>
<TransactionSecondaryDetails
@@ -138,15 +119,4 @@ export default class TransactionFinished extends Component {
</div>
);
}
fetchBalance (address, key) {
this.context.api.eth.getBalance(address)
.then((balance) => {
this.setState({ [key]: balance });
})
.catch((err) => {
console.error('could not fetch balance', err);
});
}
}

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

@@ -15,6 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { observer } from 'mobx-react';
import TransactionMainDetails from '../TransactionMainDetails';
import TransactionPendingForm from '../TransactionPendingForm';
@@ -24,11 +25,8 @@ import styles from './TransactionPending.css';
import * as tUtil from '../util/transaction';
@observer
export default class TransactionPending extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
};
static propTypes = {
id: PropTypes.object.isRequired,
from: PropTypes.string.isRequired,
@@ -43,34 +41,32 @@ export default class TransactionPending extends Component {
onReject: PropTypes.func.isRequired,
isSending: PropTypes.bool.isRequired,
className: PropTypes.string,
isTest: PropTypes.bool.isRequired
isTest: PropTypes.bool.isRequired,
store: PropTypes.object.isRequired
};
static defaultProps = {
isSending: false
};
state = {
fromBalance: null,
toBalance: null
};
componentWillMount () {
const { gas, gasPrice, value } = this.props;
const { gas, gasPrice, value, from, to, store } = this.props;
const fee = tUtil.getFee(gas, gasPrice); // BigNumber object
const totalValue = tUtil.getTotalValue(fee, value);
const gasPriceEthmDisplay = tUtil.getEthmFromWeiDisplay(gasPrice);
const gasToDisplay = tUtil.getGasDisplay(gas);
this.setState({ gasPriceEthmDisplay, totalValue, gasToDisplay });
const { from, to } = this.props;
this.fetchBalance(from, 'fromBalance');
if (to) this.fetchBalance(to, 'toBalance');
this.setState({ gasPriceEthmDisplay, totalValue, gasToDisplay });
store.fetchBalances([from, to]);
}
render () {
const { className, id, date, data, from, to, store } = this.props;
const { totalValue, gasPriceEthmDisplay, gasToDisplay } = this.state;
const { className, id, date, data, from } = this.props;
const fromBalance = store.balances[from];
const toBalance = store.balances[to];
return (
<div className={ `${styles.container} ${className || ''}` }>
@@ -78,6 +74,8 @@ export default class TransactionPending extends Component {
<TransactionMainDetails
{ ...this.props }
{ ...this.state }
fromBalance={ fromBalance }
toBalance={ toBalance }
className={ styles.transactionDetails }
totalValue={ totalValue }>
<TransactionSecondaryDetails
@@ -109,15 +107,4 @@ export default class TransactionPending extends Component {
onReject = () => {
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);
});
}
}