Use TypedInputs in Contracts view (#4015)

* Use TypedInput in Contracts

* Add right readOnly Bool TypedInput

* PR Grumbles

js/src/views/Contract/Queries/inputQuery.js

@@ -19,29 +19,31 @@ import React, { Component, PropTypes } from 'react';
 import LinearProgress from 'material-ui/LinearProgress';
 import { Card, CardActions, CardTitle, CardText } from 'material-ui/Card';
 
-import { Button, Input, InputAddress, InputAddressSelect } from '~/ui';
+import { Button, TypedInput } from '~/ui';
+import { arrayOrObjectProptype } from '~/util/proptypes';
 
 import styles from './queries.css';
 
 export default class InputQuery extends Component {
   static contextTypes = {
     api: PropTypes.object
-  }
+  };
 
   static propTypes = {
+    accountsInfo: PropTypes.object.isRequired,
     contract: PropTypes.object.isRequired,
-    inputs: PropTypes.array.isRequired,
-    outputs: PropTypes.array.isRequired,
+    inputs: arrayOrObjectProptype().isRequired,
+    outputs: arrayOrObjectProptype().isRequired,
     name: PropTypes.string.isRequired,
     signature: PropTypes.string.isRequired,
     className: PropTypes.string
-  }
+  };
 
   state = {
     isValid: true,
     results: [],
     values: {}
-  }
+  };
 
   render () {
     const { name, className } = this.props;
@@ -89,7 +91,7 @@ export default class InputQuery extends Component {
 
   renderResults () {
     const { results, isLoading } = this.state;
-    const { outputs } = this.props;
+    const { accountsInfo, outputs } = this.props;
 
     if (isLoading) {
       return (<LinearProgress mode='indeterminate' />);
@@ -108,25 +110,16 @@ export default class InputQuery extends Component {
       }))
       .sort((outA, outB) => outA.display.length - outB.display.length)
       .map((out, index) => {
-        let input = null;
-        if (out.type === 'address') {
-          input = (
-            <InputAddress
-              className={ styles.queryValue }
-              disabled
-              value={ out.display }
-            />
-          );
-        } else {
-          input = (
-            <Input
-              className={ styles.queryValue }
-              readOnly
-              allowCopy
-              value={ out.display }
-            />
-          );
-        }
+        const input = (
+          <TypedInput
+            accounts={ accountsInfo }
+            allowCopy
+            isEth={ false }
+            param={ out.type }
+            readOnly
+            value={ out.display }
+          />
+        );
 
         return (
           <div key={ index }>
@@ -144,8 +137,7 @@ export default class InputQuery extends Component {
     const { name, type } = input;
     const label = `${name ? `${name}: ` : ''}${type}`;
 
-    const onChange = (event, input) => {
-      const value = event && event.target.value || input;
+    const onChange = (value) => {
       const { values } = this.state;
 
       this.setState({
@@ -156,28 +148,15 @@ export default class InputQuery extends Component {
       });
     };
 
-    if (type === 'address') {
-      return (
-        <div key={ name }>
-          <InputAddressSelect
-            hint={ type }
-            label={ label }
-            value={ values[name] }
-            required
-            onChange={ onChange }
-          />
-        </div>
-      );
-    }
-
     return (
       <div key={ name }>
-        <Input
+        <TypedInput
           hint={ type }
           label={ label }
-          value={ values[name] }
-          required
+          isEth={ false }
           onChange={ onChange }
+          param={ type }
+          value={ values[name] }
         />
       </div>
     );
@@ -192,7 +171,9 @@ export default class InputQuery extends Component {
 
     if (api.util.isInstanceOf(value, BigNumber)) {
       return value.toFormat(0);
-    } else if (api.util.isArray(value)) {
+    }
+
+    if (api.util.isArray(value)) {
       return api.util.bytesToHex(value);
     }
 

js/src/views/Contract/Queries/queries.js

@@ -14,12 +14,11 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import BigNumber from 'bignumber.js';
 import React, { Component, PropTypes } from 'react';
 import { Card, CardTitle, CardText } from 'material-ui/Card';
 
 import InputQuery from './inputQuery';
-import { Container, Input, InputAddress } from '~/ui';
+import { Container, TypedInput } from '~/ui';
 
 import styles from './queries.css';
 
@@ -29,6 +28,7 @@ export default class Queries extends Component {
   }
 
   static propTypes = {
+    accountsInfo: PropTypes.object.isRequired,
     contract: PropTypes.object,
     values: PropTypes.object
   }
@@ -74,11 +74,12 @@ export default class Queries extends Component {
 
   renderInputQuery (fn) {
     const { abi, name, signature } = fn;
-    const { contract } = this.props;
+    const { accountsInfo, contract } = this.props;
 
     return (
       <div className={ styles.container } key={ fn.signature }>
         <InputQuery
+          accountsInfo={ accountsInfo }
           className={ styles.method }
           inputs={ abi.inputs }
           outputs={ abi.outputs }
@@ -116,34 +117,23 @@ export default class Queries extends Component {
     }
 
     const { api } = this.context;
-    let valueToDisplay = null;
+    const { accountsInfo } = this.props;
 
-    if (api.util.isInstanceOf(value, BigNumber)) {
-      valueToDisplay = value.toFormat(0);
-    } else if (api.util.isArray(value)) {
+    let valueToDisplay = value;
+
+    if (api.util.isArray(value)) {
       valueToDisplay = api.util.bytesToHex(value);
     } else if (typeof value === 'boolean') {
       valueToDisplay = value ? 'true' : 'false';
-    } else {
-      valueToDisplay = value.toString();
     }
-
-    if (type === 'address') {
-      return (
-        <InputAddress
-          className={ styles.queryValue }
-          value={ valueToDisplay }
-          disabled
-        />
-      );
-    }
-
     return (
-      <Input
-        className={ styles.queryValue }
-        value={ valueToDisplay }
-        readOnly
+      <TypedInput
+        accounts={ accountsInfo }
         allowCopy
+        isEth={ false }
+        param={ type }
+        readOnly
+        value={ valueToDisplay }
       />
     );
   }

js/src/views/Contract/contract.js

@@ -46,6 +46,7 @@ class Contract extends Component {
     setVisibleAccounts: PropTypes.func.isRequired,
 
     accounts: PropTypes.object,
+    accountsInfo: PropTypes.object,
     balances: PropTypes.object,
     contracts: PropTypes.object,
     isTest: PropTypes.bool,
@@ -115,7 +116,7 @@ class Contract extends Component {
   }
 
   render () {
-    const { balances, contracts, params, isTest } = this.props;
+    const { accountsInfo, balances, contracts, params, isTest } = this.props;
     const { allEvents, contract, queryValues, loadingEvents } = this.state;
     const account = contracts[params.address];
     const balance = balances[params.address];
@@ -138,6 +139,7 @@ class Contract extends Component {
           />
 
           <Queries
+            accountsInfo={ accountsInfo }
             contract={ contract }
             values={ queryValues }
           />
@@ -447,13 +449,14 @@ class Contract extends Component {
 }
 
 function mapStateToProps (state) {
-  const { accounts, contracts } = state.personal;
+  const { accounts, accountsInfo, contracts } = state.personal;
   const { balances } = state.balances;
   const { isTest } = state.nodeStatus;
 
   return {
     isTest,
     accounts,
+    accountsInfo,
     contracts,
     balances
   };