Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import React, { Component } from 'react';
import BigNumber from 'bignumber.js';
import { toWei } from '@parity/api/lib/util/wei';
class TxDetails extends Component {
state = {
showDetails: false
};
renderCalculation = values => {
const { estimatedTxFee } = this.props;
const gasPriceBn = new BigNumber(values.gasPrice.toString());
const gasLimitBn = estimatedTxFee(values)
.div(gasPriceBn)
.div(10 ** 9)
.toFixed(0)
.toString();
return `Estimate amount of gas: ${gasLimitBn}`;
};
renderDetails = values => {
return `${this.renderCalculation(values)}\n`
.concat(`${this.renderFee(values)}\n`)
.concat(`${this.renderTotalAmount(values)}`);
};
renderFee = values => {
const { estimatedTxFee } = this.props;
return `Fee: ${estimatedTxFee(values)
.div(10 ** 18)
.toFixed(9)
.toString()} ETH (estimate * gas price)`;
};
renderTotalAmount = values => {
const { estimatedTxFee, token } = this.props;
return `Total Amount: ${estimatedTxFee(values)
.plus(token.address === 'ETH' ? toWei(values.amount.toString()) : 0)
.div(10 ** 18)
.toFixed(10)
.toString()} ETH`;
};
showDetailsAnchor = () => {
return (
<span className='details'>
<a onClick={this.toggleDetails}>↓ Details</a>
</span>
);
};
showHideAnchor = () => {
return (
<span className='details'>
<a onClick={this.toggleDetails}>↑ Hide</a>
</span>
);
};
toggleDetails = () => {
const { showDetails } = this.state;
this.setState({ showDetails: !showDetails });
};
render () {
const { isEstimatedTxFee, valid, values } = this.props;
const { showDetails } = this.state;
if (!valid || !isEstimatedTxFee(values) || isNaN(values.amount)) {
return null;
}
return (
<div>
<div className='form_details_buttons'>
{showDetails ? this.showHideAnchor() : this.showDetailsAnchor()}
</div>
<div className='form_field'>
<div hidden={!showDetails}>
<label htmlFor='txDetails'>Transaction Details (Estimate):</label>
<textarea
className='-sm-details'
id='txDetails'
readOnly
value={this.renderDetails(values)}
/>
</div>
</div>
</div>
);
}
}
export default TxDetails;