Queries display IdentityIcons (#3453)

js/src/ui/Form/InputAddress/inputAddress.css

@@ -30,6 +30,10 @@
 .iconDisabled {
   position: absolute;
   top: 35px;
+
+  &.noLabel {
+    top: 10px;
+  }
 }
 
 .icon {

js/src/ui/Form/InputAddress/inputAddress.js

@@ -69,14 +69,19 @@ class InputAddress extends Component {
   }
 
   renderIcon () {
-    const { value, disabled } = this.props;
+    const { value, disabled, label } = this.props;
 
     if (!value || !value.length || !util.isAddressValid(value)) {
       return null;
     }
 
+    const classes = [disabled ? styles.iconDisabled : styles.icon];
+    if (!label) {
+      classes.push(styles.noLabel);
+    }
+
     return (
-      <div className={ disabled ? styles.iconDisabled : styles.icon }>
+      <div className={ classes.join(' ') }>
         <IdentityIcon
           inline center
           address={ value } />

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

@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import LinearProgress from 'material-ui/LinearProgress';
 import { Card, CardActions, CardTitle, CardText } from 'material-ui/Card';
 
-import { Button, Input, InputAddressSelect } from '../../../ui';
+import { Button, Input, InputAddress, InputAddressSelect } from '../../../ui';
 
 import styles from './queries.css';
 
@@ -96,32 +96,48 @@ export default class InputQuery extends Component {
     }
 
     if (!results || results.length < 1) return null;
-
     return outputs
       .map((out, index) => ({
         name: out.name,
+        type: out.type,
         value: results[index],
         display: this.renderValue(results[index])
       }))
       .sort((outA, outB) => outA.display.length - outB.display.length)
-      .map((out, index) => (
+      .map((out, index) => {
-        <div key={ index }>
+        let input = null;
-          <div className={ styles.queryResultName }>
+        if (out.type === 'address') {
-            { out.name }
+          input = (
-          </div>
+            <InputAddress
+              className={ styles.queryValue }
+              disabled
+              value={ out.display }
+            />
+          );
+        } else {
+          input = (
+            <Input
+              className={ styles.queryValue }
+              readOnly
+              allowCopy
+              value={ out.display }
+            />
+          );
+        }
 
-          <Input
+        return (
-            className={ styles.queryValue }
+          <div key={ index }>
-            readOnly
+            <div className={ styles.queryResultName }>
-            allowCopy
+              { out.name }
-            value={ out.display }
+            </div>
-          />
+            { input }
-          <br />
+          </div>
-        </div>
+        );
-      ));
+      });
   }
 
   renderInput (input) {
+    const { values } = this.state;
     const { name, type } = input;
     const label = `${name ? `${name}: ` : ''}${type}`;
 
@@ -143,6 +159,7 @@ export default class InputQuery extends Component {
           <InputAddressSelect
             hint={ type }
             label={ label }
+            value={ values[name] }
             required
             onChange={ onChange }
           />
@@ -155,6 +172,7 @@ export default class InputQuery extends Component {
         <Input
           hint={ type }
           label={ label }
+          value={ values[name] }
           required
           onChange={ onChange }
         />

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

@@ -56,18 +56,10 @@
 }
 
 .methodResults {
-  display: flex;
-  flex-wrap: wrap;
-  max-width: 24rem;
-  justify-content: space-around;
 }
 
 .methodResults > div {
   padding: 0.25rem 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1 1 50%;
   box-sizing: border-box;
 
   & > div {

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

@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { Card, CardTitle, CardText } from 'material-ui/Card';
 
 import InputQuery from './inputQuery';
-import { Container, ContainerTitle, Input } from '../../../ui';
+import { Container, ContainerTitle, Input, InputAddress } from '../../../ui';
 
 import styles from './queries.css';
 
@@ -100,14 +100,14 @@ export default class Queries extends Component {
           <CardText
             className={ styles.methodContent }
           >
-            { this.renderValue(values[fn.name]) }
+            { this.renderValue(values[fn.name], fn.outputs[0].kind.type) }
           </CardText>
         </Card>
       </div>
     );
   }
 
-  renderValue (value) {
+  renderValue (value, type) {
     if (typeof value === 'undefined') {
       return null;
     }
@@ -125,6 +125,16 @@ export default class Queries extends Component {
       valueToDisplay = value.toString();
     }
 
+    if (type === 'address') {
+      return (
+        <InputAddress
+          className={ styles.queryValue }
+          value={ valueToDisplay }
+          disabled
+        />
+      );
+    }
+
     return (
       <Input
         className={ styles.queryValue }