Newer
Older
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
import React, { PureComponent } from 'react';
import { defaultAccount$, myBalance$ } from '@parity/light.js';
import { map } from 'rxjs/operators';
import { fromWei, toWei } from '@parity/api/lib/util/wei';
import { Link } from 'react-router-dom';
import ethereumIcon from '../assets/img/tokens/ethereum.png';
balance: () => myBalance$().pipe(map(value => +fromWei(value))),
state = {
amount: 0.01, // In Ether
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 { amount, gas, to } = this.state;
from: me,
gas,
to,
value: toWei(amount)
};
history.push(`/signer`, tx);
const { amount, gas, to } = this.state;
return (
<nav className='header-nav'>
<div className='header-nav_left'>
<Link to='/tokens' className='icon -close'>
</Link>
</div>
<div className='header-nav_title'>
</div>
<div className='header-nav_right' />
<div className='window_content'>
<div className='box -padded'>
<div className='box -card'>
<div className='token'>
<div className='token_icon'>
<img src={ethereumIcon} alt='ethereum' />
<div className='token_name'>Ethereum</div>
<div className='token_balance'>
{balance}
<span className='token_symbol'>ETH</span>
<div className='box -card-drawer'>
<form className='send-form' onSubmit={this.handleSubmit}>
<fieldset className='form_fields'>
<div className='form_field'>
<label>Amount</label>
<input
onChange={this.handleChangeAmount}
required
type='number'
value={amount}
/>
<nav className='form-field_nav'>
<button className='button -utility'>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}
/>
<label>Gas</label>
<input
onChange={this.handleChangeGas}
required
<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>
);