Fix MethodDecoding for Arrays (#4977)

* Fix TypedInputs

* Remove unused code in inputQueries

* Use TypedInputs in Contract Events

* Linting

* Don't re-render events every second...

js/src/views/Contract/Events/Event/event.js

@@ -19,7 +19,7 @@ import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { IdentityIcon, IdentityName, Input, InputAddress } from '~/ui';
+import { IdentityIcon, IdentityName, TypedInput } from '~/ui';
 import ShortenedHash from '~/ui/ShortenedHash';
 import { txLink } from '~/3rdparty/etherscan/links';
 
@@ -112,41 +112,16 @@ export default class Event extends Component {
   }
 
   renderParam (name, param) {
-    const { api } = this.context;
-
-    switch (param.type) {
-      case 'address':
-        return (
-          <InputAddress
-            disabled
-            text
-            className={ styles.input }
-            value={ param.value }
-            label={ name }
-          />
-        );
-
-      default:
-        let value;
-
-        if (api.util.isInstanceOf(param.value, BigNumber)) {
-          value = param.value.toFormat(0);
-        } else if (api.util.isArray(param.value)) {
-          value = api.util.bytesToHex(param.value);
-        } else {
-          value = param.value.toString();
-        }
-
-        return (
-          <Input
-            readOnly
-            allowCopy
-            className={ styles.input }
-            value={ value }
-            label={ name }
-          />
-        );
-    }
+    return (
+      <TypedInput
+        allowCopy
+        className={ styles.input }
+        label={ name }
+        param={ param.type }
+        readOnly
+        value={ param.value }
+      />
+    );
   }
 
   formatBlockTimestamp (block) {

js/src/views/Contract/Events/events.js

@@ -46,6 +46,12 @@ export default class Events extends Component {
     events: []
   };
 
+  shouldComponentUpdate (nextProps) {
+    return (nextProps.events !== this.props.events) ||
+      (nextProps.netVersion !== this.props.netVersion) ||
+      (nextProps.isLoading !== this.props.isLoading);
+  }
+
   render () {
     const { events, isLoading, netVersion } = this.props;
 

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

@@ -138,10 +138,8 @@ class InputQuery extends Component {
       .map((out, index) => ({
         name: out.name,
         type: out.type,
-        value: results[index],
-        display: this.renderValue(results[index])
+        value: results[index]
       }))
-      .sort((outA, outB) => outA.display.length - outB.display.length)
       .map((out, index) => {
         const input = (
           <TypedInput
@@ -150,7 +148,7 @@ class InputQuery extends Component {
             isEth={ false }
             param={ out.type }
             readOnly
-            value={ out.display }
+            value={ out.value }
           />
         );
 
@@ -195,25 +193,6 @@ class InputQuery extends Component {
     );
   }
 
-  renderValue (token) {
-    const { api } = this.context;
-    const { type, value } = token;
-
-    if (value === null || value === undefined) {
-      return 'no data';
-    }
-
-    if (type === 'array' || type === 'fixedArray') {
-      return value.map((tok) => this.renderValue(tok));
-    }
-
-    if (Array.isArray(value)) {
-      return api.util.bytesToHex(value);
-    }
-
-    return value;
-  }
-
   onClick = () => {
     const { inputs, values } = this.state;
     const { contract, name, outputs, signature } = this.props;

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

@@ -139,15 +139,14 @@ export default class Queries extends Component {
     );
   }
 
-  renderValue (tokenValue, output, key) {
-    if (typeof tokenValue === 'undefined') {
+  renderValue (value, output, key) {
+    if (typeof value === 'undefined') {
       return null;
     }
 
     const { accountsInfo } = this.props;
     const { name, type } = output;
     const label = `${name ? `${name}: ` : ''}${type}`;
-    const value = this.getTokenValue(tokenValue);
 
     return (
       <TypedInput
@@ -163,25 +162,6 @@ export default class Queries extends Component {
     );
   }
 
-  getTokenValue (token) {
-    const { api } = this.context;
-    const { type, value } = token;
-
-    if (value === null || value === undefined) {
-      return 'no data';
-    }
-
-    if (type === 'array' || type === 'fixedArray') {
-      return value.map((tok) => this.getTokenValue(tok));
-    }
-
-    if (Array.isArray(value)) {
-      return api.util.bytesToHex(value);
-    }
-
-    return value;
-  }
-
   _sortEntries (a, b) {
     return a.name.localeCompare(b.name);
   }

js/src/views/WriteContract/writeContract.js

@@ -578,6 +578,10 @@ class WriteContract extends Component {
   }
 
   renderContract (contract) {
+    if (!contract) {
+      return null;
+    }
+
     const { bytecode } = contract;
     const abi = contract.interface;