From ef9c645ea24bf83d0db885c77495e3eebdffc6c8 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Thu, 5 Jul 2018 14:20:36 +0200
Subject: [PATCH] Use FetherForm on account creation

---
 .../CreateAccount/AccountName/AccountName.js      |  4 ++--
 .../AccountPassword/AccountPassword.js            |  6 +++---
 .../AccountRewritePhrase/AccountRewritePhrase.js  | 11 ++++++-----
 .../fether-react/src/Onboarding/Onboarding.js     | 15 ++++++---------
 .../src/assets/sass/components/_account.scss      |  1 +
 .../fether-react/src/stores/sendStore.spec.js     | 15 ++++++---------
 .../fether-ui/src/AccountCard/Address/Address.js  |  2 +-
 packages/fether-ui/src/ClickToCopy/ClickToCopy.js |  2 +-
 packages/fether-ui/src/Form/Field/Field.js        |  4 +++-
 9 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js b/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js
index 1659aee9..39385988 100644
--- a/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js
+++ b/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js
@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React, { Component } from 'react';
-import { AccountCard, Card, FormField } from 'fether-ui';
+import { AccountCard, Card, Form as FetherForm } from 'fether-ui';
 import Blockies from 'react-blockies';
 import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
@@ -79,7 +79,7 @@ class AccountName extends Component {
         <div className='text'>
           <p>Please give this account a name:</p>
         </div>
-        <FormField
+        <FetherForm.Field
           label='Name'
           onChange={this.handleChangeName}
           required
diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js b/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
index 6870f8c9..9423fdf6 100644
--- a/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
+++ b/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React, { Component } from 'react';
-import { AccountCard, FormField } from 'fether-ui';
+import { AccountCard, Form as FetherForm } from 'fether-ui';
 import { inject, observer } from 'mobx-react';
 
 @inject('createAccountStore')
@@ -55,7 +55,7 @@ class AccountPassword extends Component {
               <p>Secure your account with a password:</p>
             </div>
 
-            <FormField
+            <FetherForm.Field
               label='Password'
               onChange={this.handlePasswordChange}
               required
@@ -63,7 +63,7 @@ class AccountPassword extends Component {
               value={password}
             />
 
-            <FormField
+            <FetherForm.Field
               label='Confirm'
               onChange={this.handleConfirmChange}
               required
diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js b/packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js
index e50ea6ef..b50af0ec 100644
--- a/packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js
+++ b/packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js
@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React, { Component } from 'react';
-import { AccountCard, FormField } from 'fether-ui';
+import { AccountCard, Form as FetherForm } from 'fether-ui';
 import debounce from 'lodash/debounce';
 import { inject, observer } from 'mobx-react';
 
@@ -77,11 +77,12 @@ class AccountRewritePhrase extends Component {
                 </p>
               )}
             </div>
-            <FormField
-              input={
-                <textarea onChange={this.handleChange} required value={value} />
-              }
+            <FetherForm.Field
+              as='textarea'
               label='Recovery phrase'
+              onChange={this.handleChange}
+              required
+              value={value}
             />
 
             <nav className='form-nav -space-around'>
diff --git a/packages/fether-react/src/Onboarding/Onboarding.js b/packages/fether-react/src/Onboarding/Onboarding.js
index 5ea7e02e..e8180056 100644
--- a/packages/fether-react/src/Onboarding/Onboarding.js
+++ b/packages/fether-react/src/Onboarding/Onboarding.js
@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React, { Component } from 'react';
-import { FormField, Header } from 'fether-ui';
+import { Form as FetherForm, Header } from 'fether-ui';
 import { inject, observer } from 'mobx-react';
 import ReactMarkdown from 'react-markdown';
 
@@ -54,14 +54,11 @@ class Onboarding extends Component {
 
         <div className='window_content'>
           <div className='box -padded'>
-            <FormField
-              input={
-                <ReactMarkdown
-                  className='terms-and-conditions'
-                  renderers={reactMarkdownOptions}
-                  source={this.state.markdown}
-                />
-              }
+            <FetherForm.Field
+              as={ReactMarkdown}
+              className='terms-and-conditions'
+              renderers={reactMarkdownOptions}
+              source={this.state.markdown}
               label='Please read carefully'
             />
           </div>
diff --git a/packages/fether-react/src/assets/sass/components/_account.scss b/packages/fether-react/src/assets/sass/components/_account.scss
index dd6d9bb0..a5a8f370 100644
--- a/packages/fether-react/src/assets/sass/components/_account.scss
+++ b/packages/fether-react/src/assets/sass/components/_account.scss
@@ -39,6 +39,7 @@
   .account_name {
     color: $black;
     font-weight: 500;
+    margin-bottom: 0.1rem;
   }
 
   .account_address {
diff --git a/packages/fether-react/src/stores/sendStore.spec.js b/packages/fether-react/src/stores/sendStore.spec.js
index c0d8113c..3eb0bab6 100644
--- a/packages/fether-react/src/stores/sendStore.spec.js
+++ b/packages/fether-react/src/stores/sendStore.spec.js
@@ -37,13 +37,6 @@ jest.mock('./parityStore', () => ({
   }
 }));
 
-jest.mock('./tokensStore', () => ({
-  tokens: {
-    ETH: { decimals: 18 },
-    foo: { decimals: 18 }
-  }
-}));
-
 const mockTx = {
   amount: 0.01, // In Ether or in token
   gasPrice: 4, // in Gwei
@@ -117,9 +110,13 @@ describe('method send', () => {
     sendStore.setTx(mockTx);
   });
 
-  test.skip('should call transfer$ if the token is Erc20 and subscribe to it', () => {
+  test('should call makeContract$ if the token is Erc20 ', () => {
     sendStore.send(mockErc20Token);
-    expect(sendStore.contract.transfer$).toHaveBeenCalled();
+    expect(lightJs.makeContract$).toHaveBeenCalled();
+  });
+
+  test.skip('should call transfer$ if the token is Erc20 and subscribe to it', () => {
+    // TODO
   });
 
   test('should call post$ if the token is ETH  and subscribe to it', () => {
diff --git a/packages/fether-ui/src/AccountCard/Address/Address.js b/packages/fether-ui/src/AccountCard/Address/Address.js
index 9c1c5edb..7aa7ab89 100644
--- a/packages/fether-ui/src/AccountCard/Address/Address.js
+++ b/packages/fether-ui/src/AccountCard/Address/Address.js
@@ -18,7 +18,7 @@ export const Address = ({ address, short, ...otherProps }) => (
         address
       )
     ) : (
-      <Placeholder height={18} width={100} />
+      <Placeholder height={14} width={100} />
     )}
   </div>
 );
diff --git a/packages/fether-ui/src/ClickToCopy/ClickToCopy.js b/packages/fether-ui/src/ClickToCopy/ClickToCopy.js
index dad28243..b6822c34 100644
--- a/packages/fether-ui/src/ClickToCopy/ClickToCopy.js
+++ b/packages/fether-ui/src/ClickToCopy/ClickToCopy.js
@@ -38,7 +38,7 @@ export class ClickToCopy extends PureComponent {
   handleResetCopied = () => this.setState({ copied: false });
 
   render () {
-    const { children, label, ...otherProps } = this.props;
+    const { children, label, textToCopy, ...otherProps } = this.props;
     const { copied } = this.state;
 
     return (
diff --git a/packages/fether-ui/src/Form/Field/Field.js b/packages/fether-ui/src/Form/Field/Field.js
index b1681714..ae6350cd 100644
--- a/packages/fether-ui/src/Form/Field/Field.js
+++ b/packages/fether-ui/src/Form/Field/Field.js
@@ -21,7 +21,9 @@ export const Field = ({
       content={meta && (meta.error || meta.submitError)}
       inverted
       on='click'
-      open={meta && !meta.pristine && !meta.valid && !meta.dirtySinceLastSubmit}
+      open={
+        !!meta && !meta.pristine && !meta.valid && !meta.dirtySinceLastSubmit
+      }
       position='top center'
       size='mini'
       trigger={<T {...input} {...otherProps} />}
-- 
GitLab