From 5e7402e3be7968fc86fbd044057ad2af8b98fa12 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Thu, 5 Jul 2018 10:32:32 +0200
Subject: [PATCH] Use FetherForm in Signer page

---
 .../fether-react/src/Send/Signer/Signer.js    | 56 ++++++++-----------
 .../src/assets/sass/shared/_form.scss         |  4 ++
 packages/fether-ui/src/Form/Field/Field.js    |  4 +-
 3 files changed, 29 insertions(+), 35 deletions(-)

diff --git a/packages/fether-react/src/Send/Signer/Signer.js b/packages/fether-react/src/Send/Signer/Signer.js
index 0b968891..bb21f860 100644
--- a/packages/fether-react/src/Send/Signer/Signer.js
+++ b/packages/fether-react/src/Send/Signer/Signer.js
@@ -18,30 +18,15 @@ import TokenBalance from '../../Tokens/TokensList/TokenBalance';
 }))
 @observer
 class Signer extends Component {
-  state = {
-    error: null,
-    isSending: false,
-    password: ''
-  };
-
-  handleAccept = event => {
+  handleAccept = values => {
     const { history, sendStore, token } = this.props;
-    const { password } = this.state;
-
-    event.preventDefault();
 
-    this.setState({ isSending: true }, () => {
-      sendStore
-        .send(password)
-        .then(() => history.push(`/send/${token.address}/sent`))
-        .catch(error => {
-          this.setState({ error, isSending: false });
-        });
-    });
-  };
-
-  handleChangePassword = ({ target: { value } }) => {
-    this.setState({ error: null, password: value });
+    return sendStore
+      .send(values.password)
+      .then(() => history.push(`/send/${token.address}/sent`))
+      .catch(error => ({
+        password: error
+      }));
   };
 
   render () {
@@ -52,7 +37,7 @@ class Signer extends Component {
     } = this.props;
 
     if (!tx || !token) {
-      return <Redirect to={`/`} />;
+      return <Redirect to='/' />;
     }
 
     return (
@@ -71,16 +56,20 @@ class Signer extends Component {
             <TokenBalance
               drawers={[
                 <div key='txForm'>
-                  <div className='form_field'>
-                    <label>Amount</label>
-                    <div className='form_field_value'>
-                      {tx.amount} {token.symbol}
-                    </div>
-                  </div>
-                  <div className='form_field'>
-                    <label>To</label>
-                    <div className='form_field_value'>{tx.to}</div>
-                  </div>
+                  <FetherForm.Field
+                    className='form_field_value'
+                    disabled
+                    defaultValue={`${tx.amount} ${token.symbol}`}
+                    label='Amount'
+                  />
+
+                  <FetherForm.Field
+                    as='textarea'
+                    className='form_field_value'
+                    disabled
+                    defaultValue={tx.to}
+                    label='To'
+                  />
                 </div>,
                 <Form
                   key='signerForm'
@@ -93,6 +82,7 @@ class Signer extends Component {
 
                       <Field
                         label='Password'
+                        name='password'
                         render={FetherForm.Field}
                         required
                         type='password'
diff --git a/packages/fether-react/src/assets/sass/shared/_form.scss b/packages/fether-react/src/assets/sass/shared/_form.scss
index e03077b0..c2e35db9 100644
--- a/packages/fether-react/src/assets/sass/shared/_form.scss
+++ b/packages/fether-react/src/assets/sass/shared/_form.scss
@@ -14,6 +14,8 @@
   }
 
   .form_field_value {
+    background-color: transparent;
+    border: none;
     font-size: ms(-1);
     font-weight: 400;
     font-family: $mono;
@@ -21,6 +23,8 @@
     opacity: 0.75;
     margin: 0.25rem 0.5rem 0;
     padding-bottom: 0.5rem;
+    padding-left: 0;
+    padding-right: 0;
     overflow: hidden;
     word-wrap: break-word;
   }
diff --git a/packages/fether-ui/src/Form/Field/Field.js b/packages/fether-ui/src/Form/Field/Field.js
index 94557309..90780166 100644
--- a/packages/fether-ui/src/Form/Field/Field.js
+++ b/packages/fether-ui/src/Form/Field/Field.js
@@ -18,10 +18,10 @@ export const Field = ({
   <div className='form_field'>
     <label>{label}</label>
     <Popup
-      content={meta.error}
+      content={meta && meta.error}
       inverted
       on='click'
-      open={!meta.pristine && !meta.valid && meta.touched}
+      open={meta && !meta.pristine && !meta.valid}
       position='top center'
       size='mini'
       trigger={<T {...input} {...otherProps} />}
-- 
GitLab