Newer
Older
// Copyright 2015-2019 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import React, { Component } from 'react';
import { Field, Form } from 'react-final-form';
import { Form as FetherForm, Header } from 'fether-ui';
import { inject, observer } from 'mobx-react';
import IdleTimer from 'react-idle-timer';
import { Link } from 'react-router-dom';
import { withProps } from 'recompose';
import i18n, { packageNS } from '../../i18n';
Luke Schoen
committed
import RequireHealthOverlay from '../../RequireHealthOverlay';
import TokenAddress from '../../Tokens/TokensList/TokenAddress';
import withAccount from '../../utils/withAccount';
import withBalance, { withEthBalance } from '../../utils/withBalance';
import withTokens from '../../utils/withTokens';
@inject('parityStore', 'sendStore')
@withTokens
@withProps(({ match: { params: { tokenAddress } }, tokens }) => ({
token: tokens[tokenAddress]
}))
@withAccount
@withBalance // Balance of current token (can be ETH or ETC)
@withEthBalance // ETH or ETC balance
@observer
class SignedTxSummary extends Component {
handleGoToTxForm = () => {
this.props.history.go(-3);
};
handleSubmit = values => {
const {
account: { address },
history,
sendStore,
token
} = this.props;
return sendStore
.sendRaw()
.then(() => history.push(`/send/${token.address}/from/${address}/sent`))
.catch(error => ({
password: error.text
}));
};
render () {
const {
account: { address },
sendStore: { tx },
token
} = this.props;
return (
<div>
<IdleTimer onIdle={this.handleGoToTxForm} timeout={1000 * 60} />
<Header
left={
<Link to={`/tokens/${address}`} className='icon -back'>
{i18n.t(`${packageNS}:navigation.close`)}
title={
token && (
<h1>
{i18n.t(`${packageNS}:tx.header_send_prefix`, {
token: token.name
})}
</h1>
)
}
Luke Schoen
committed
<RequireHealthOverlay require='sync'>
<div className='window_content'>
<div className='box -padded'>
<TokenAddress
copyAddress
drawers={[
<Form
key='txForm'
initialValues={{
from: address,
to: tx.to,
Luke Schoen
committed
amount: `${tx.amount} ${token.symbol}`,
...tx
}}
onSubmit={this.handleSubmit}
render={({ handleSubmit, values }) => (
<form className='send-form' onSubmit={handleSubmit}>
<fieldset className='form_fields'>
<Field
as='textarea'
Luke Schoen
committed
className='form_field_value'
label={i18n.t(`${packageNS}:tx.form.field.to`)}
name='to'
render={FetherForm.Field}
/>
<Field
Luke Schoen
committed
className='form_field_value'
label={i18n.t(`${packageNS}:tx.form.field.amount`)}
name='amount'
render={FetherForm.Field}
/>
{values.to === values.from && (
<span>
<h3>
{i18n.t(
`${packageNS}:tx.form.warning.title_same_sender_receiver`
)}
</h3>
{i18n.t(
`${packageNS}:tx.form.warning.body_same_sender_receiver`
)}
</p>
</span>
)}
</fieldset>
<nav className='form-nav'>
<button className='button'>
{i18n.t(`${packageNS}:tx.form.button_send`)}
</button>
</nav>
</form>
)}
/>
]}
shortAddress={false}
Luke Schoen
committed
</RequireHealthOverlay>
</div>
);
}
}
export default SignedTxSummary;