Show contract parameters in MethodDecoding (#4024)

* Add decoding of Inner Contract Deployment params #3715 * Fixed TypedInput when formatted value * Fix TypedInput * PR Grumble * Add test to `Param.toParams`
openethereum · Jan 5, 2017 · d16ab5e · d16ab5e
1 parent ddeb06d
commit d16ab5e
Show file tree

Hide file tree

Showing 9 changed files with 208 additions and 65 deletions.
diff --git a/js/src/abi/spec/param.js b/js/src/abi/spec/param.js
@@ -31,6 +31,12 @@ export default class Param {
   }
 
   static toParams (params) {
-    return params.map((param) => new Param(param.name, param.type));
+    return params.map((param) => {
+      if (param instanceof Param) {
+        return param;
+      }
+
+      return new Param(param.name, param.type);
+    });
   }
 }
diff --git a/js/src/abi/spec/param.spec.js b/js/src/abi/spec/param.spec.js
@@ -34,5 +34,14 @@ describe('abi/spec/Param', () => {
       expect(params[0].name).to.equal('foo');
       expect(params[0].kind.type).to.equal('uint');
     });
+
+    it('converts only if needed', () => {
+      const _params = Param.toParams([{ name: 'foo', type: 'uint' }]);
+      const params = Param.toParams(_params);
+
+      expect(params.length).to.equal(1);
+      expect(params[0].name).to.equal('foo');
+      expect(params[0].kind.type).to.equal('uint');
+    });
   });
 });
diff --git a/js/src/api/util/decode.js b/js/src/api/util/decode.js
@@ -26,7 +26,9 @@ export function decodeCallData (data) {
 
   if (data.substr(0, 2) === '0x') {
     return decodeCallData(data.slice(2));
-  } else if (data.length < 8) {
+  }
+
+  if (data.length < 8) {
     throw new Error('Input to decodeCallData should be method signature + data');
   }
 
@@ -42,10 +44,14 @@ export function decodeCallData (data) {
 export function decodeMethodInput (methodAbi, paramdata) {
   if (!methodAbi) {
     throw new Error('decodeMethodInput should receive valid method-specific ABI');
-  } else if (paramdata && paramdata.length) {
+  }
+
+  if (paramdata && paramdata.length) {
     if (!isHex(paramdata)) {
       throw new Error('Input to decodeMethodInput should be a hex value');
-    } else if (paramdata.substr(0, 2) === '0x') {
+    }
+
+    if (paramdata.substr(0, 2) === '0x') {
       return decodeMethodInput(methodAbi, paramdata.slice(2));
     }
   }

diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js
@@ -60,6 +60,7 @@ class AddressSelect extends Component {
     // Optional props
     allowCopy: PropTypes.bool,
     allowInput: PropTypes.bool,
+    className: PropTypes.string,
     disabled: PropTypes.bool,
     error: nodeOrStringProptype(),
     hint: nodeOrStringProptype(),
@@ -123,13 +124,14 @@ class AddressSelect extends Component {
 
   renderInput () {
     const { focused } = this.state;
-    const { accountsInfo, allowCopy, disabled, error, hint, label, readOnly, value } = this.props;
+    const { accountsInfo, allowCopy, className, disabled, error, hint, label, readOnly, value } = this.props;
 
     const input = (
       <InputAddress
         accountsInfo={ accountsInfo }
         allowCopy={ allowCopy }
-        disabled={ disabled }
+        className={ className }
+        disabled={ disabled || readOnly }
         error={ error }
         hint={ hint }
         focused={ focused }

diff --git a/js/src/ui/Form/InputAddress/inputAddress.js b/js/src/ui/Form/InputAddress/inputAddress.js
@@ -75,14 +75,19 @@ class InputAddress extends Component {
       containerClasses.push(styles.small);
     }
 
+    const props = {};
+
+    if (!readOnly && !disabled) {
+      props.focused = focused;
+    }
+
     return (
       <div className={ containerClasses.join(' ') }>
         <Input
           allowCopy={ allowCopy && ((disabled || readOnly) ? value : false) }
           className={ classes.join(' ') }
           disabled={ disabled }
           error={ error }
-          focused={ focused }
           hideUnderline={ hideUnderline }
           hint={ hint }
           label={ label }
@@ -96,7 +101,9 @@ class InputAddress extends Component {
             text && account
               ? account.name
               : (nullName || value)
-          } />
+          }
+          { ...props }
+        />
         { icon }
       </div>
     );

diff --git a/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js b/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
@@ -27,6 +27,7 @@ class InputAddressSelect extends Component {
     contracts: PropTypes.object.isRequired,
 
     allowCopy: PropTypes.bool,
+    className: PropTypes.string,
     error: PropTypes.string,
     hint: PropTypes.string,
     label: PropTypes.string,
@@ -36,13 +37,14 @@ class InputAddressSelect extends Component {
   };
 
   render () {
-    const { accounts, allowCopy, contacts, contracts, label, hint, error, value, onChange, readOnly } = this.props;
+    const { accounts, allowCopy, className, contacts, contracts, label, hint, error, value, onChange, readOnly } = this.props;
 
     return (
       <AddressSelect
         allowCopy={ allowCopy }
         allowInput
         accounts={ accounts }
+        className={ className }
         contacts={ contacts }
         contracts={ contracts }
         error={ error }

diff --git a/js/src/ui/Form/TypedInput/typedInput.js b/js/src/ui/Form/TypedInput/typedInput.js
@@ -41,6 +41,7 @@ export default class TypedInput extends Component {
 
     accounts: PropTypes.object,
     allowCopy: PropTypes.bool,
+    className: PropTypes.string,
     error: PropTypes.any,
     hint: PropTypes.string,
     isEth: PropTypes.bool,
@@ -91,7 +92,7 @@ export default class TypedInput extends Component {
     const { type } = param;
 
     if (type === ABI_TYPES.ARRAY) {
-      const { accounts, label, value = param.default } = this.props;
+      const { accounts, className, label, value = param.default } = this.props;
       const { subtype, length } = param;
 
       const fixedLength = !!length;
@@ -107,6 +108,7 @@ export default class TypedInput extends Component {
           <TypedInput
             accounts={ accounts }
             allowCopy={ allowCopy }
+            className={ className }
             key={ `${subtype.type}_${index}` }
             onChange={ onChange }
             param={ subtype }
@@ -236,17 +238,34 @@ export default class TypedInput extends Component {
     );
   }
 
+  getNumberValue (value) {
+    if (!value) {
+      return value;
+    }
+
+    const { readOnly } = this.props;
+
+    const rawValue = typeof value === 'string'
+      ? value.replace(/,/g, '')
+      : value;
+
+    const bnValue = new BigNumber(rawValue);
+
+    return readOnly
+      ? bnValue.toFormat()
+      : bnValue.toNumber();
+  }
+
   renderInteger (value = this.props.value, onChange = this.onChange) {
-    const { allowCopy, label, error, hint, min, max, readOnly } = this.props;
+    const { allowCopy, className, label, error, hint, min, max, readOnly } = this.props;
     const param = this.getParam();
 
-    const realValue = value
-      ? (new BigNumber(value))[readOnly ? 'toFormat' : 'toNumber']()
-      : value;
+    const realValue = this.getNumberValue(value);
 
     return (
       <Input
         allowCopy={ allowCopy }
+        className={ className }
         label={ label }
         hint={ hint }
         value={ realValue }
@@ -269,16 +288,15 @@ export default class TypedInput extends Component {
    * @see https://github.com/facebook/react/issues/1549
    */
   renderFloat (value = this.props.value, onChange = this.onChange) {
-    const { allowCopy, label, error, hint, min, max, readOnly } = this.props;
+    const { allowCopy, className, label, error, hint, min, max, readOnly } = this.props;
     const param = this.getParam();
 
-    const realValue = value
-      ? (new BigNumber(value))[readOnly ? 'toFormat' : 'toNumber']()
-      : value;
+    const realValue = this.getNumberValue(value);
 
     return (
       <Input
         allowCopy={ allowCopy }
+        className={ className }
         label={ label }
         hint={ hint }
         value={ realValue }
@@ -293,11 +311,12 @@ export default class TypedInput extends Component {
   }
 
   renderDefault () {
-    const { allowCopy, label, value, error, hint, readOnly } = this.props;
+    const { allowCopy, className, label, value, error, hint, readOnly } = this.props;
 
     return (
       <Input
         allowCopy={ allowCopy }
+        className={ className }
         label={ label }
         hint={ hint }
         value={ value }
@@ -309,12 +328,13 @@ export default class TypedInput extends Component {
   }
 
   renderAddress () {
-    const { accounts, allowCopy, label, value, error, hint, readOnly } = this.props;
+    const { accounts, allowCopy, className, label, value, error, hint, readOnly } = this.props;
 
     return (
       <InputAddressSelect
         allowCopy={ allowCopy }
         accounts={ accounts }
+        className={ className }
         error={ error }
         hint={ hint }
         label={ label }
@@ -326,7 +346,7 @@ export default class TypedInput extends Component {
   }
 
   renderBoolean () {
-    const { allowCopy, label, value, error, hint, readOnly } = this.props;
+    const { allowCopy, className, label, value, error, hint, readOnly } = this.props;
 
     if (readOnly) {
       return this.renderDefault();
@@ -346,6 +366,7 @@ export default class TypedInput extends Component {
     return (
       <Select
         allowCopy={ allowCopy }
+        className={ className }
         error={ error }
         hint={ hint }
         label={ label }

diff --git a/js/src/ui/MethodDecoding/methodDecoding.js b/js/src/ui/MethodDecoding/methodDecoding.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 { connect } from 'react-redux';
 import CircularProgress from 'material-ui/CircularProgress';
 
-import { Input, InputAddress } from '../Form';
+import { TypedInput, InputAddress } from '../Form';
 import MethodDecodingStore from './methodDecodingStore';
 
 import styles from './methodDecoding.css';
@@ -245,6 +244,7 @@ class MethodDecoding extends Component {
 
   renderDeploy () {
     const { historic, transaction } = this.props;
+    const { methodInputs } = this.state;
 
     if (!historic) {
       return (
@@ -261,6 +261,14 @@ class MethodDecoding extends Component {
         </div>
 
         { this.renderAddressName(transaction.creates, false) }
+
+        <div>
+          { methodInputs && methodInputs.length ? 'with the following parameters:' : ''}
+        </div>
+
+        <div className={ styles.inputs }>
+          { this.renderInputs() }
+        </div>
       </div>
     );
   }
@@ -364,39 +372,31 @@ class MethodDecoding extends Component {
   renderInputs () {
     const { methodInputs } = this.state;
 
-    return methodInputs.map((input, index) => {
-      switch (input.type) {
-        case 'address':
-          return (
-            <InputAddress
-              disabled
-              text
-              key={ index }
-              className={ styles.input }
-              value={ input.value }
-              label={ input.type } />
-          );
-
-        default:
-          return (
-            <Input
-              readOnly
-              allowCopy
-              key={ index }
-              className={ styles.input }
-              value={ this.renderValue(input.value) }
-              label={ input.type } />
-          );
-      }
+    if (!methodInputs || methodInputs.length === 0) {
+      return null;
+    }
+
+    const inputs = methodInputs.map((input, index) => {
+      return (
+        <TypedInput
+          allowCopy
+          className={ styles.input }
+          label={ input.type }
+          key={ index }
+          param={ input.type }
+          readOnly
+          value={ this.renderValue(input.value) }
+        />
+      );
     });
+
+    return inputs;
   }
 
   renderValue (value) {
     const { api } = this.context;
 
-    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);
     }