Commit eb1043f6 authored by Amaury Martiny's avatar Amaury Martiny

Make signer page work with new form

parent 91bc364e
......@@ -14,7 +14,6 @@ import {
import { inject, observer } from 'mobx-react';
import Accounts from '../Accounts';
import Debug from '../utils/debug';
import Onboarding from '../Onboarding';
import Overlay from '../Overlay';
import Send from '../Send';
......@@ -22,7 +21,6 @@ import { STATUS } from '../stores/healthStore';
import Tokens from '../Tokens';
import Whitelist from '../Whitelist';
const debug = Debug('App');
// Use MemoryRouter for production viewing in file:// protocol
// https://github.com/facebook/create-react-app/issues/3591
const Router =
......@@ -31,8 +29,7 @@ const Router =
@inject('healthStore', 'onboardingStore')
@observer
class App extends Component {
componentDidCatch (err) {
debug(err.message);
componentDidCatch () {
if (process.env.NODE_ENV !== 'development') {
// Redirect to '/' on errors
window.location.href = '/';
......
......@@ -4,11 +4,10 @@
// SPDX-License-Identifier: BSD-3-Clause
import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import { FormField, Header } from 'fether-ui';
import { Field, Form } from 'react-final-form';
import { Form as FetherForm, Header } from 'fether-ui';
import { inject, observer } from 'mobx-react';
import { Link } from 'react-router-dom';
import ReactTooltip from 'react-tooltip';
import { Link, Redirect } from 'react-router-dom';
import { withProps } from 'recompose';
import TokenBalance from '../../Tokens/TokensList/TokenBalance';
......@@ -26,7 +25,7 @@ class Signer extends Component {
};
handleAccept = event => {
const { history, sendStore } = this.props;
const { history, sendStore, token } = this.props;
const { password } = this.state;
event.preventDefault();
......@@ -34,38 +33,27 @@ class Signer extends Component {
this.setState({ isSending: true }, () => {
sendStore
.send(password)
.then(() => history.push('/send/sent'))
.then(() => history.push(`/send/${token.address}/sent`))
.catch(error => {
this.setState({ error, isSending: false }, () =>
ReactTooltip.show(findDOMNode(this.tooltip))
);
this.setState({ error, isSending: false });
});
});
};
handleCancel = () => {
const { history } = this.props;
history.goBack();
};
handleChangePassword = ({ target: { value } }) => {
this.setState({ error: null, password: value });
};
/**
* TODO All this tooltips refs etc should go inside a React validation
* library.
*/
handleTooltipRef = ref => {
this.tooltip = ref;
};
render () {
const {
history,
sendStore: { tx },
token
} = this.props;
const { error, isSending, password } = this.state;
if (!tx || !token) {
return <Redirect to={`/`} />;
}
return (
<div>
......@@ -75,7 +63,7 @@ class Signer extends Component {
Close
</Link>
}
title={<h1>Send {token.name}</h1>}
title={token && <h1>Send {token.name}</h1>}
/>
<div className='window_content'>
......@@ -94,41 +82,41 @@ class Signer extends Component {
<div className='form_field_value'>{tx.to}</div>
</div>
</div>,
<form key='signerForm' onSubmit={this.handleAccept}>
<div className='text'>
<p>Enter your password to confirm this transaction.</p>
</div>
<div
data-tip={error ? error.text : ''}
ref={this.handleTooltipRef}
>
<FormField
label='Password'
onChange={this.handleChangePassword}
required
type='password'
value={password}
/>
</div>
<nav className='form-nav -binary'>
<button
className='button -cancel'
onClick={this.handleCancel}
type='button'
>
Cancel
</button>
<button
className='button -submit'
disabled={!password.length || isSending || error}
>
Confirm transaction
</button>
</nav>
</form>
<Form
key='signerForm'
onSubmit={this.handleAccept}
render={({ handleSubmit, submitting, valid }) => (
<form onSubmit={handleSubmit}>
<div className='text'>
<p>Enter your password to confirm this transaction.</p>
</div>
<Field
label='Password'
render={FetherForm.Field}
required
type='password'
/>
<nav className='form-nav -binary'>
<button
className='button -cancel'
onClick={history.goBack}
type='button'
>
Cancel
</button>
<button
className='button -submit'
disabled={!valid || submitting}
>
Confirm transaction
</button>
</nav>
</form>
)}
/>
]}
onClick={null}
token={token}
......
......@@ -27,10 +27,9 @@ const MIN_GAS_PRICE = 3; // Safelow gas price from GasStation, in Gwei
@withBalance
@observer
class Send extends Component {
handleSubmit = event => {
event.preventDefault();
handleSubmit = values => {
const { history, sendStore, token } = this.props;
sendStore.setTx(event);
sendStore.setTx(values);
history.push(`/send/${token.address}/signer`);
};
......@@ -125,8 +124,16 @@ class Send extends Component {
* Estimate gas amount, and validate that the user has enough balance to make
* the tx.
*/
validateBalance = debounce(async values => {
validateAmount = debounce(async values => {
try {
if (!values.amount || isNaN(values.amount)) {
return { amount: 'Please enter a valid amount' };
} else if (values.amount < 0) {
return { amount: 'Please enter a positive amount ' };
} else if (this.props.balance && this.props.balance.lt(values.amount)) {
return { amount: "You don't have enough balance" };
}
const estimated = await estimateGas(
values,
this.props.token,
......@@ -153,23 +160,12 @@ class Send extends Component {
}, 1000);
validateForm = values => {
if (!values.amount || isNaN(values.amount)) {
return { amount: 'Please enter a valid amount' };
}
if (values.amount < 0) {
return { amount: 'Please enter a positive amount ' };
}
if (this.props.balance && this.props.balance.lt(values.amount)) {
return { amount: "You don't have enough balance" };
}
const errors = {};
if (!isAddress(values.to)) {
return { to: 'Please enter a valid Ethereum address' };
errors.to = 'Please enter a valid Ethereum address';
}
return this.validateBalance(values);
return Object.keys(errors).length ? errors : this.validateAmount(values);
};
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment