Fix Wallet Settings Modal (#3856)

* Fixes wallet settings modal

* Fix linting

js/src/modals/CreateWallet/WalletDetails/walletDetails.js

@@ -17,7 +17,6 @@
 import React, { Component, PropTypes } from 'react';
 
 import { Form, TypedInput, Input, AddressSelect, InputAddress } from '~/ui';
-import { parseAbiType } from '~/util/abi';
 
 import styles from '../createWallet.css';
 
@@ -105,7 +104,7 @@ export default class WalletDetails extends Component {
           value={ wallet.owners.slice() }
           onChange={ this.onOwnersChange }
           accounts={ accounts }
-          param={ parseAbiType('address[]') }
+          param='address[]'
         />
 
         <div className={ styles.splitInput }>
@@ -115,7 +114,7 @@ export default class WalletDetails extends Component {
             value={ wallet.required }
             error={ errors.required }
             onChange={ this.onRequiredChange }
-            param={ parseAbiType('uint') }
+            param='uint'
             min={ 1 }
             max={ wallet.owners.length + 1 }
           />
@@ -126,7 +125,7 @@ export default class WalletDetails extends Component {
             value={ wallet.daylimit }
             error={ errors.daylimit }
             onChange={ this.onDaylimitChange }
-            param={ parseAbiType('uint') }
+            param='uint'
             isEth
           />
         </div>

js/src/modals/DeployContract/ParametersStep/parametersStep.js

@@ -83,6 +83,7 @@ export default class ParametersStep extends Component {
             accounts={ accounts }
             onChange={ onChange }
             param={ param }
+            isEth={ false }
           />
         </div>
       );

js/src/modals/ExecuteContract/DetailsStep/detailsStep.js

@@ -18,7 +18,6 @@ import React, { Component, PropTypes } from 'react';
 import { Checkbox, MenuItem } from 'material-ui';
 
 import { AddressSelect, Form, Input, Select, TypedInput } from '~/ui';
-import { parseAbiType } from '~/util/abi';
 
 import styles from '../executeContract.css';
 
@@ -162,7 +161,8 @@ export default class DetailsStep extends Component {
             error={ valuesError[index] }
             onChange={ onChange }
             accounts={ accounts }
-            param={ parseAbiType(input.type) }
+            param={ input.type }
+            isEth={ false }
           />
         </div>
       );

js/src/modals/WalletSettings/walletSettings.js

@@ -22,7 +22,6 @@ import { pick } from 'lodash';
 import ActionDone from 'material-ui/svg-icons/action/done';
 import ContentClear from 'material-ui/svg-icons/content/clear';
 import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
-import { parseAbiType } from '~/util/abi';
 
 import { Button, Modal, TxHash, BusyStep, Form, TypedInput, InputAddress, AddressSelect } from '~/ui';
 import { fromWei } from '~/api/util/wei';
@@ -107,10 +106,7 @@ class WalletSettings extends Component {
 
         return (
           <div>
-            <p>You are about to make the following modifications</p>
+            { this.renderChanges(changes) }
-            <div>
-              { this.renderChanges(changes) }
-            </div>
           </div>
         );
 
@@ -142,19 +138,19 @@ class WalletSettings extends Component {
               value={ wallet.owners.slice() }
               onChange={ this.store.onOwnersChange }
               accounts={ accounts }
-              param={ parseAbiType('address[]') }
+              param='address[]'
             />
 
             <div className={ styles.splitInput }>
               <TypedInput
                 label='required owners'
                 hint='number of required owners to accept a transaction'
-                value={ wallet.require }
                 error={ errors.require }
-                onChange={ this.store.onRequireChange }
-                param={ parseAbiType('uint') }
                 min={ 1 }
+                onChange={ this.store.onRequireChange }
                 max={ wallet.owners.length }
+                param='uint'
+                value={ wallet.require }
               />
 
               <TypedInput
@@ -163,7 +159,7 @@ class WalletSettings extends Component {
                 value={ wallet.dailylimit }
                 error={ errors.dailylimit }
                 onChange={ this.store.onDailylimitChange }
-                param={ parseAbiType('uint') }
+                param='uint'
                 isEth
               />
             </div>
@@ -173,11 +169,24 @@ class WalletSettings extends Component {
   }
 
   renderChanges (changes) {
-    return changes.map((change, index) => (
+    if (changes.length === 0) {
+      return (
+        <p>No modifications have been made to the Wallet settings.</p>
+      );
+    }
+
+    const modifications = changes.map((change, index) => (
       <div key={ `${change.type}_${index}` }>
         { this.renderChange(change) }
       </div>
     ));
+
+    return (
+      <div>
+        <p>You are about to make the following modifications</p>
+        { modifications }
+      </div>
+    );
   }
 
   renderChange (change) {
@@ -297,6 +306,12 @@ class WalletSettings extends Component {
         return done ? [ closeBtn ] : [ closeBtn, sendingBtn ];
 
       case 'CONFIRMATION':
+        const { changes } = this.store;
+
+        if (changes.length === 0) {
+          return [ closeBtn ];
+        }
+
         return [ cancelBtn, sendBtn ];
 
       default:

js/src/ui/Form/TypedInput/typedInput.js

@@ -26,7 +26,7 @@ import { fromWei, toWei } from '~/api/util/wei';
 import Input from '~/ui/Form/Input';
 import InputAddressSelect from '~/ui/Form/InputAddressSelect';
 import Select from '~/ui/Form/Select';
-import { ABI_TYPES } from '~/util/abi';
+import { ABI_TYPES, parseAbiType } from '~/util/abi';
 
 import styles from './typedInput.css';
 
@@ -34,22 +34,25 @@ export default class TypedInput extends Component {
 
   static propTypes = {
     onChange: PropTypes.func.isRequired,
-    param: PropTypes.object.isRequired,
 
     accounts: PropTypes.object,
     error: PropTypes.any,
-    value: PropTypes.any,
-    label: PropTypes.string,
     hint: PropTypes.string,
-    min: PropTypes.number,
+    isEth: PropTypes.bool,
+    label: PropTypes.string,
     max: PropTypes.number,
-    isEth: PropTypes.bool
+    min: PropTypes.number,
+    param: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string
+    ]).isRequired,
+    value: PropTypes.any
   };
 
   static defaultProps = {
     min: null,
     max: null,
-    isEth: false
+    isEth: null
   };
 
   state = {
@@ -64,7 +67,26 @@ export default class TypedInput extends Component {
   }
 
   render () {
-    const { param, isEth } = this.props;
+    const { param } = this.props;
+
+    if (typeof param === 'string') {
+      const parsedParam = parseAbiType(param);
+
+      if (parsedParam) {
+        return this.renderParam(parsedParam);
+      }
+    }
+
+    if (param) {
+      return this.renderParam(param);
+    }
+
+    console.error('<TypedInput>', `unkown "${param}" param passed to props`);
+    return null;
+  }
+
+  renderParam (param) {
+    const { isEth } = this.props;
     const { type } = param;
 
     if (type === ABI_TYPES.ARRAY) {
@@ -163,7 +185,16 @@ export default class TypedInput extends Component {
       return this.renderDefault();
     }
 
+    // If the `isEth` prop is present (true or false)
+    // then render the ETH toggle (usefull for contract execution)
+    // Don't by default
     if (type === ABI_TYPES.INT) {
+      const { isEth } = this.props;
+
+      if (typeof isEth !== 'boolean') {
+        return this.renderInteger();
+      }
+
       return this.renderEth();
     }
 

js/src/util/abi.js

@@ -143,4 +143,7 @@ export function parseAbiType (type) {
       signed: true
     };
   }
+
+  // If no matches, return null
+  return null;
 }