Make signer page work with new form

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 = '/';

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 <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}

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);
   };
 }