Merge pull request #139 from paritytech/am-fix-form

Fix form

packages/fether-react/package.json

@@ -54,7 +54,6 @@
     "react-markdown": "^3.3.4",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.4",
-    "react-tooltip": "^3.6.1",
     "recompose": "^0.27.1",
     "rxjs": "^6.2.0"
   },

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

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

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

packages/fether-react/src/App/App.js

@@ -29,13 +29,6 @@ const Router =
 @inject('healthStore', 'onboardingStore')
 @observer
 class App extends Component {
-  componentDidCatch () {
-    if (process.env.NODE_ENV !== 'development') {
-      // Redirect to '/' on errors
-      window.location.href = '/';
-    }
-  }
-
   render () {
     return (
       <Router>

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>

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 {

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', () => {

packages/fether-ui/package.json

@@ -33,7 +33,6 @@
   "dependencies": {
     "react-blockies": "^1.3.0",
     "react-content-loader": "^3.1.2",
-    "react-tooltip": "^3.6.1",
     "semantic-ui-css": "^2.3.2",
     "semantic-ui-react": "^0.81.3"
   },

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

packages/fether-ui/src/ClickToCopy/ClickToCopy.js

@@ -4,8 +4,9 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React, { PureComponent } from 'react';
+import { Popup } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
-import ReactTooltip from 'react-tooltip';
+import 'semantic-ui-css/components/popup.min.css';
 
 export class ClickToCopy extends PureComponent {
   static defaultProps = {
@@ -21,10 +22,6 @@ export class ClickToCopy extends PureComponent {
     copied: false
   };
 
-  componentWillUnmount () {
-    window.clearTimeout(this.timeout);
-  }
-
   handleCopy = () => {
     // https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f
     // Note react-copy-to-clipboard created a bug, https://github.com/nkbt/react-copy-to-clipboard/issues/92
@@ -36,35 +33,27 @@ export class ClickToCopy extends PureComponent {
     document.body.removeChild(el);
 
     this.setState({ copied: true });
-
-    // Show the copied state only for 1s
-    if (this.timeout) {
-      window.clearTimeout(this.timeout);
-    }
-    this.timeout = window.setTimeout(
-      () => this.setState({ copied: false }),
-      1000
-    );
   };
 
-  handleResetCopied = () => {};
+  handleResetCopied = () => this.setState({ copied: false });
 
   render () {
-    const { children, label, ...otherProps } = this.props;
+    const { children, label, textToCopy, ...otherProps } = this.props;
     const { copied } = this.state;
 
     return (
-      <div data-tip='' onClick={this.handleCopy}>
-        {children}
-        <ReactTooltip
-          effect='solid'
-          event='mouseover'
-          eventOff='mouseout'
-          place='bottom'
-          getContent={[() => (copied ? 'Copied.' : label), 50]}
-          {...otherProps}
-        />
-      </div>
+      <Popup
+        content={copied ? 'Copied.' : 'Click to copy'}
+        inverted
+        onClose={this.handleResetCopied}
+        position='bottom center'
+        size='mini'
+        trigger={
+          <div onClick={this.handleCopy} {...otherProps}>
+            {children}
+          </div>
+        }
+      />
     );
   }
 }

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

yarn.lock

@@ -9667,13 +9667,6 @@ react-scripts@1.1.4:
   optionalDependencies:
     fsevents "^1.1.3"
 
-react-tooltip@^3.6.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.6.1.tgz#2ca993baa50d7e0271b8d13c6024445a883842eb"
-  dependencies:
-    classnames "^2.2.5"
-    prop-types "^15.6.0"
-
 react@^16.3.2, react@^16.4.0:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"