display call result

src/app/execution/txFormat.js

 'use strict'
 var $ = require('jquery')
 var ethJSABI = require('ethereumjs-abi')
+var ethJSUtil = require('ethereumjs-util')
+var BN = ethJSUtil.BN
 var helper = require('./txHelper')
+var TreeView = require('ethereum-remix').ui.TreeView
 
 module.exports = {
   /**
@@ -121,6 +124,18 @@ module.exports = {
 
   decodeResponse: function (response, fnabi, callback) {
     // Only decode if there supposed to be fields
+    var treeView = new TreeView({
+      extractData: (item, parent, key) => {
+        var ret = {}
+        if (BN.isBN(item)) {
+          ret.self = item.toString(10)
+          ret.children = []
+        } else {
+          ret = treeView.extractDataDefault(item, parent, key)
+        }
+        return ret
+      }
+    })
     if (fnabi.outputs && fnabi.outputs.length > 0) {
       try {
         var i
@@ -134,17 +149,17 @@ module.exports = {
         var decodedObj = ethJSABI.rawDecode(outputTypes, response)
 
         // format decoded data
-        decodedObj = ethJSABI.stringify(outputTypes, decodedObj)
+        var json = {}
         for (i = 0; i < outputTypes.length; i++) {
           var name = fnabi.outputs[i].name
           if (name.length > 0) {
-            decodedObj[i] = outputTypes[i] + ' ' + name + ': ' + decodedObj[i]
+            json[outputTypes[i] + ' ' + name] = decodedObj[i]
           } else {
-            decodedObj[i] = outputTypes[i] + ': ' + decodedObj[i]
+            json[outputTypes[i]] = decodedObj[i]
           }
         }
 
-        return callback(null, decodedObj)
+        return callback(null, treeView.render(json))
       } catch (e) {
         return callback('Failed to decode output: ' + e)
       }

src/universal-dapp.js

@@ -362,19 +362,28 @@ UniversalDApp.prototype.getCallButton = function (args) {
     .attr('title', title)
     .text(title)
     .click(() => {
-      txFormat.buildData(args.contractAbi, self.contracts, false, args.funABI, inputField.val(), self, self.executionContext, (error, data) => {
-        if (!error) {
-          txExecution.callFunction(args.address, data, args.funABI, self, (error, txResult) => {
-            // TODO here should send the result to the dom-console
-            console.log('function call', error, txResult)
-            alert(error + ' ' + txResult.transactionHash)
-          })
-        } else {
-          alert(error)
-        }
-      })
+      call()
     })
 
+  function call () {
+    txFormat.buildData(args.contractAbi, self.contracts, false, args.funABI, inputField.val(), self, self.executionContext, (error, data) => {
+      if (!error) {
+        txExecution.callFunction(args.address, data, args.funABI, self, (error, txResult) => {
+          if (!error) {
+            if (lookupOnly) {
+              txFormat.decodeResponse(self.executionContext.isVM() ? txResult.result.vm.return : ethJSUtil.toBuffer(txResult.result), args.funABI, (error, decoded) => {
+                $outputOverride.html(error ? 'error' + error : decoded)
+              })
+            }
+          } else {
+            alert(error)
+          }
+        })
+      } else {
+        alert(error)
+      }
+    })
+  }
   // TODO the auto call to constant function has been removed. needs to readd it later.
 
   var $contractProperty = $(`<div class="contractProperty ${css.buttonsContainer}"></div>`)
@@ -384,6 +393,7 @@ UniversalDApp.prototype.getCallButton = function (args) {
 
   if (lookupOnly) {
     $contractProperty.addClass('constant')
+    call()
   }
 
   if (args.funABI.inputs && args.funABI.inputs.length > 0) {