Change contract Execute bool values & query bool value display (#3024)

* Allow for boolean value selection

* Updated

* Explicitly display bool as true/false (string)

* Really fix boolean display

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

@@ -124,6 +124,7 @@ export default class DetailsStep extends Component {
 
     return (func.abi.inputs || []).map((input, index) => {
       const onChange = (event, value) => onValueChange(event, index, value);
+      const onSelect = (event, _index, value) => onValueChange(event, index, value);
       const onSubmit = (value) => onValueChange(null, index, value);
       const label = `${input.name}: ${input.type}`;
       let inputbox;
@@ -141,6 +142,24 @@ export default class DetailsStep extends Component {
           );
           break;
 
+        case 'bool':
+          const boolitems = ['false', 'true'].map((bool) => {
+            return (
+              <MenuItem
+                key={ bool }
+                value={ bool }
+                label={ bool }>{ bool }</MenuItem>
+            );
+          });
+          inputbox = (
+            <Select
+              label={ label }
+              value={ values[index] ? 'true' : 'false' }
+              error={ valuesError[index] }
+              onChange={ onSelect }>{ boolitems }</Select>
+          );
+          break;
+
         default:
           inputbox = (
             <Input

js/src/modals/ExecuteContract/executeContract.js

@@ -150,6 +150,9 @@ export default class ExecuteContract extends Component {
         case 'address':
           return '0x';
 
+        case 'bool':
+          return false;
+
         case 'bytes':
           return '0x';
 
@@ -170,17 +173,16 @@ export default class ExecuteContract extends Component {
   onValueChange = (event, index, _value) => {
     const { func, values, valuesError } = this.state;
     const input = func.inputs.find((input, _index) => index === _index);
-    let value;
-    let valueError;
+    let value = _value;
+    let valueError = null;
 
     switch (input.kind.type) {
-      case 'address':
-        value = _value;
-        valueError = validateAddress(_value).addressError;
+      case 'bool':
+        value = _value === 'true';
         break;
-      default:
-        value = _value;
-        valueError = null;
+
+      case 'address':
+        valueError = validateAddress(_value).addressError;
         break;
     }
 

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

@@ -108,15 +108,21 @@ export default class Queries extends Component {
   }
 
   renderValue (value) {
-    if (!value) return null;
+    if (typeof value === 'undefined') {
+      return null;
+    }
 
     const { api } = this.context;
-    let valueToDisplay = value.toString();
+    let valueToDisplay = null;
 
     if (api.util.isInstanceOf(value, BigNumber)) {
       valueToDisplay = value.toFormat(0);
     } else if (api.util.isArray(value)) {
       valueToDisplay = api.util.bytesToHex(value);
+    } else if (typeof value === 'boolean') {
+      valueToDisplay = value ? 'true' : 'false';
+    } else {
+      valueToDisplay = value.toString();
     }
 
     return (