Check for buffer type and decode to hex instead of utf8 (#1469)

* Check for buffer type and decode to hex instead of utf8

* Fix typo

common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/index.tsx

@@ -12,6 +12,7 @@ import { setDataField, TSetDataField } from 'actions/transaction';
 import { Data } from 'libs/units';
 import { Input, Dropdown } from 'components/ui';
 import { INode } from 'libs/nodes';
+import { bufferToHex } from 'ethereumjs-util';
 
 interface StateProps {
   nodeLib: INode;
@@ -126,6 +127,10 @@ class InteractExplorerClass extends Component<Props, State> {
             {selectedFunction.contract.outputs.map((output: any, index: number) => {
               const { type, name } = output;
               const parsedName = name === '' ? index : name;
+              const rawFieldValue = outputs[parsedName] || '';
+              const decodedFieldValue = Buffer.isBuffer(rawFieldValue)
+                ? bufferToHex(rawFieldValue)
+                : rawFieldValue;
 
               return (
                 <div key={parsedName} className="input-group-wrapper InteractExplorer-func-out">
@@ -133,7 +138,7 @@ class InteractExplorerClass extends Component<Props, State> {
                     <div className="input-group-header"> ↳ {name + ' ' + type}</div>
                     <Input
                       className="InteractExplorer-func-out-input "
-                      value={outputs[parsedName] || ''}
+                      value={decodedFieldValue}
                       disabled={true}
                     />
                   </label>
@@ -187,6 +192,7 @@ class InteractExplorerClass extends Component<Props, State> {
       const results = await nodeLib.sendCallRequest(callData);
 
       const parsedResult = selectedFunction!.contract.decodeOutput(results);
+
       this.setState({ outputs: parsedResult });
     } catch (e) {
       this.props.showNotification(