Newer
Older
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: MIT
import React, { Component } from 'react';
import { defaultAccount$ } from '@parity/light.js';
import { inject, observer } from 'mobx-react';
import light from 'light-hoc';
import { Link } from 'react-router-dom';
import { toWei } from '@parity/api/lib/util/wei';
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
import TokenBalance from '../TokenBalance';
@light({
defaultAccount: defaultAccount$
})
@inject('sendStore')
@observer
class Send extends Component {
state = {
amount: 0.01, // In Ether or in token
gas: 21000,
to: '0x00Ae02834e91810B223E54ce3f9B7875258a1747'
};
handleChangeAmount = ({ target: { value } }) =>
this.setState({ amount: value });
handleChangeGas = ({ target: { value } }) => this.setState({ gas: value });
handleChangeTo = ({ target: { value } }) => this.setState({ to: value });
handleSubmit = e => {
e.preventDefault();
const { defaultAccount, history, sendStore } = this.props;
const { amount, gas, to } = this.state;
// Post a request to the transaction. There is a next step to sign this
// request.
sendStore.postTx({
from: defaultAccount,
gas,
to,
value: toWei(amount)
});
history.push('/send/signer');
};
render () {
const {
sendStore: { token }
} = this.props;
const { amount, gas, to } = this.state;
return (
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<div>
<nav className='header-nav'>
<div className='header-nav_left'>
<Link to='/tokens' className='icon -close'>
Close
</Link>
</div>
<div className='header-nav_title'>
<h1>Send {token.name}</h1>
</div>
<div className='header-nav_right' />
</nav>
<div className='window_content'>
<div className='box -padded'>
<div className='box -card'>
<TokenBalance token={token} />
<div className='box -card-drawer'>
<form className='send-form' onSubmit={this.handleSubmit}>
<fieldset className='form_fields'>
<div className='form_field'>
<label>Amount</label>
<input
className='form_field_amount'
onChange={this.handleChangeAmount}
required
type='number'
value={amount}
/>
<nav className='form-field_nav'>
<button className='button -utility' type='button'>
Max
</button>
</nav>
</div>
<div className='form_field'>
<label>To</label>
<textarea
className='-sm'
onChange={this.handleChangeTo}
required
type='text'
placeholder='Recipient address'
value={to}
/>
</div>
<div className='form_field -range'>
<label>Gas</label>
<input
onChange={this.handleChangeGas}
required
min='1'
max='44000'
type='range'
value={gas}
/>
<nav className='range-nav'>
<span className='range-nav_label'>Cheap</span>
<span className='range-nav_value'>{gas}</span>
<span className='range-nav_label'>Fast</span>
</nav>
</div>
</fieldset>
<nav className='form-nav'>
<button className='button'>Send</button>
</nav>
</form>
</div>
</div>
);
}
}
export default Send;