From eb1043f6260a68e7cb60841c551f1889d2efb6a3 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Wed, 4 Jul 2018 19:59:35 +0200 Subject: [PATCH] Make signer page work with new form --- packages/fether-react/src/App/App.js | 5 +- .../fether-react/src/Send/Signer/Signer.js | 106 ++++++++---------- .../fether-react/src/Send/TxForm/TxForm.js | 32 +++--- 3 files changed, 62 insertions(+), 81 deletions(-) diff --git a/packages/fether-react/src/App/App.js b/packages/fether-react/src/App/App.js index 8623d674..a624480f 100644 --- a/packages/fether-react/src/App/App.js +++ b/packages/fether-react/src/App/App.js @@ -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 = '/'; diff --git a/packages/fether-react/src/Send/Signer/Signer.js b/packages/fether-react/src/Send/Signer/Signer.js index b491aee6..0b968891 100644 --- a/packages/fether-react/src/Send/Signer/Signer.js +++ b/packages/fether-react/src/Send/Signer/Signer.js @@ -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 ; + } return (
@@ -75,7 +63,7 @@ class Signer extends Component { Close } - title={

Send {token.name}

} + title={token &&

Send {token.name}

} />
@@ -94,41 +82,41 @@ class Signer extends Component {
{tx.to}
, -
-
-

Enter your password to confirm this transaction.

-
- -
- -
- - -
+
( + +
+

Enter your password to confirm this transaction.

+
+ + + + + + )} + /> ]} onClick={null} token={token} diff --git a/packages/fether-react/src/Send/TxForm/TxForm.js b/packages/fether-react/src/Send/TxForm/TxForm.js index a5c93a14..52b0578d 100644 --- a/packages/fether-react/src/Send/TxForm/TxForm.js +++ b/packages/fether-react/src/Send/TxForm/TxForm.js @@ -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); }; } -- GitLab