Merge pull request #365 from ethereum/renderer-cleanup

src/app/renderer.js

@@ -3,7 +3,6 @@
 var $ = require('jquery')
 
 var utils = require('./utils')
-var uiHelper = require('./ui-helper')
 
 function Renderer (editor, updateFiles, udapp, executionContext, formalVerificationEvent, compilerEvent) {
   this.editor = editor
@@ -98,26 +97,191 @@ Renderer.prototype.contracts = function (data, source) {
     }
   }
 
+  var tableRowItems = function (first, second, cls) {
+    return $('<div class="crow"/>')
+      .addClass(cls)
+      .append($('<div class="col1">').append(first))
+      .append($('<div class="col2">').append(second))
+  }
+
+  var tableRow = function (description, data) {
+    return tableRowItems(
+      $('<span/>').text(description),
+      $('<input readonly="readonly"/>').val(data))
+  }
+
+  var preRow = function (description, data) {
+    return tableRowItems(
+      $('<span/>').text(description),
+      $('<pre/>').text(data)
+    )
+  }
+
+  var formatAssemblyText = function (asm, prefix, source) {
+    if (typeof asm === typeof '' || asm === null || asm === undefined) {
+      return prefix + asm + '\n'
+    }
+    var text = prefix + '.code\n'
+    $.each(asm['.code'], function (i, item) {
+      var v = item.value === undefined ? '' : item.value
+      var src = ''
+      if (item.begin !== undefined && item.end !== undefined) {
+        src = source.slice(item.begin, item.end).replace('\n', '\\n', 'g')
+      }
+      if (src.length > 30) {
+        src = src.slice(0, 30) + '...'
+      }
+      if (item.name !== 'tag') {
+        text += '  '
+      }
+      text += prefix + item.name + ' ' + v + '\t\t\t' + src + '\n'
+    })
+    text += prefix + '.data\n'
+    if (asm['.data']) {
+      $.each(asm['.data'], function (i, item) {
+        text += '  ' + prefix + '' + i + ':\n'
+        text += formatAssemblyText(item, prefix + '    ', source)
+      })
+    }
+    return text
+  }
+
+  var getConstructorInterface = function (abi) {
+    var funABI = { 'name': '', 'inputs': [], 'type': 'constructor', 'outputs': [] }
+    for (var i = 0; i < abi.length; i++) {
+      if (abi[i].type === 'constructor') {
+        funABI.inputs = abi[i].inputs || []
+        break
+      }
+    }
+    return funABI
+  }
+
+  var gethDeploy = function (contractName, jsonInterface, bytecode) {
+    var code = ''
+    var funABI = getConstructorInterface(JSON.parse(jsonInterface))
+
+    funABI.inputs.forEach(function (inp) {
+      code += 'var ' + inp.name + ' = /* var of type ' + inp.type + ' here */ ;\n'
+    })
+
+    code += 'var ' + contractName + 'Contract = web3.eth.contract(' + jsonInterface.replace('\n', '') + ');' +
+      '\nvar ' + contractName + ' = ' + contractName + 'Contract.new('
+
+    funABI.inputs.forEach(function (inp) {
+      code += '\n   ' + inp.name + ','
+    })
+
+    code += '\n   {' +
+      '\n     from: web3.eth.accounts[0], ' +
+      "\n     data: '0x" + bytecode + "', " +
+      "\n     gas: '4700000'" +
+      '\n   }, function (e, contract){' +
+      '\n    console.log(e, contract);' +
+      "\n    if (typeof contract.address !== 'undefined') {" +
+      "\n         console.log('Contract mined! address: ' + contract.address + ' transactionHash: ' + contract.transactionHash);" +
+      '\n    }' +
+      '\n })'
+
+    return code
+  }
+
+  var formatGasEstimates = function (data) {
+    // FIXME: the whole gasEstimates object should be nil instead
+    if (data.creation === undefined && data.external === undefined && data.internal === undefined) {
+      return
+    }
+
+    var gasToText = function (g) {
+      return g === null ? 'unknown' : g
+    }
+
+    var text = ''
+    var fun
+    if ('creation' in data) {
+      text += 'Creation: ' + gasToText(data.creation[0]) + ' + ' + gasToText(data.creation[1]) + '\n'
+    }
+
+    if ('external' in data) {
+      text += 'External:\n'
+      for (fun in data.external) {
+        text += '  ' + fun + ': ' + gasToText(data.external[fun]) + '\n'
+      }
+    }
+
+    if ('internal' in data) {
+      text += 'Internal:\n'
+      for (fun in data.internal) {
+        text += '  ' + fun + ': ' + gasToText(data.internal[fun]) + '\n'
+      }
+    }
+    return text
+  }
+
+  var detailsOpen = {}
+  var getDetails = function (contract, source, contractName) {
+    var button = $('<button>Toggle Details</button>')
+    var details = $('<div style="display: none;"/>')
+
+    if (contract.metadata) {
+      details.append(preRow('Metadata', contract.metadata))
+    }
+
+    var funHashes = ''
+    for (var fun in contract.functionHashes) {
+      funHashes += contract.functionHashes[fun] + ' ' + fun + '\n'
+    }
+    if (funHashes.length > 0) {
+      details.append(preRow('Functions', funHashes))
+    }
+
+    var gasEstimates = formatGasEstimates(contract.gasEstimates)
+    if (gasEstimates) {
+      details.append(preRow('Gas Estimates', gasEstimates))
+    }
+
+    if (contract.runtimeBytecode && contract.runtimeBytecode.length > 0) {
+      details.append(tableRow('Runtime Bytecode', contract.runtimeBytecode))
+    }
+
+    if (contract.opcodes !== undefined && contract.opcodes !== '') {
+      details.append(tableRow('Opcodes', contract.opcodes))
+    }
+
+    if (contract.assembly !== null) {
+      details.append(preRow('Assembly', formatAssemblyText(contract.assembly, '', source)))
+    }
+
+    button.click(function () {
+      detailsOpen[contractName] = !detailsOpen[contractName]
+      details.toggle()
+    })
+    if (detailsOpen[contractName]) {
+      details.show()
+    }
+    return $('<div class="contractDetails"/>').append(button).append(details)
+  }
+
   var renderOutputModifier = function (contractName, $contractOutput) {
     var contract = data.contracts[contractName]
     if (contract.bytecode) {
-      $contractOutput.append(uiHelper.tableRow('Bytecode', contract.bytecode))
+      $contractOutput.append(tableRow('Bytecode', contract.bytecode))
     }
 
-    $contractOutput.append(uiHelper.tableRow('Interface', contract['interface']))
+    $contractOutput.append(tableRow('Interface', contract['interface']))
 
     if (contract.bytecode) {
-      $contractOutput.append(uiHelper.preRow('Web3 deploy', uiHelper.gethDeploy(contractName.toLowerCase(), contract['interface'], contract.bytecode), 'deploy'))
+      $contractOutput.append(preRow('Web3 deploy', gethDeploy(contractName.toLowerCase(), contract['interface'], contract.bytecode), 'deploy'))
 
       // check if there's a metadata hash appended
       var metadataHash = retrieveMetadataHash(contract.bytecode)
       if (metadataHash) {
-        $contractOutput.append(uiHelper.tableRow('Metadata location', 'bzzr://' + metadataHash))
+        $contractOutput.append(tableRow('Metadata location', 'bzzr://' + metadataHash))
       }
     }
 
     var ctrSource = getSource(contractName, source, data)
-    return $contractOutput.append(uiHelper.getDetails(contract, ctrSource, contractName))
+    return $contractOutput.append(getDetails(contract, ctrSource, contractName))
   }
 
   var self = this

src/app/ui-helper.js

-'use strict'
-
-var $ = require('jquery')
-
-module.exports = {
-  tableRowItems: function (first, second, cls) {
-    return $('<div class="crow"/>')
-      .addClass(cls)
-      .append($('<div class="col1">').append(first))
-      .append($('<div class="col2">').append(second))
-  },
-
-  tableRow: function (description, data) {
-    return this.tableRowItems(
-      $('<span/>').text(description),
-      $('<input readonly="readonly"/>').val(data))
-  },
-
-  preRow: function (description, data) {
-    return this.tableRowItems(
-      $('<span/>').text(description),
-      $('<pre/>').text(data)
-    )
-  },
-
-  formatAssemblyText: function (asm, prefix, source) {
-    var self = this
-    if (typeof asm === typeof '' || asm === null || asm === undefined) {
-      return prefix + asm + '\n'
-    }
-    var text = prefix + '.code\n'
-    $.each(asm['.code'], function (i, item) {
-      var v = item.value === undefined ? '' : item.value
-      var src = ''
-      if (item.begin !== undefined && item.end !== undefined) {
-        src = source.slice(item.begin, item.end).replace('\n', '\\n', 'g')
-      }
-      if (src.length > 30) {
-        src = src.slice(0, 30) + '...'
-      }
-      if (item.name !== 'tag') {
-        text += '  '
-      }
-      text += prefix + item.name + ' ' + v + '\t\t\t' + src + '\n'
-    })
-    text += prefix + '.data\n'
-    if (asm['.data']) {
-      $.each(asm['.data'], function (i, item) {
-        text += '  ' + prefix + '' + i + ':\n'
-        text += self.formatAssemblyText(item, prefix + '    ', source)
-      })
-    }
-    return text
-  },
-
-  gethDeploy: function (contractName, jsonInterface, bytecode) {
-    var code = ''
-    var funABI = this.getConstructorInterface(JSON.parse(jsonInterface))
-
-    funABI.inputs.forEach(function (inp) {
-      code += 'var ' + inp.name + ' = /* var of type ' + inp.type + ' here */ ;\n'
-    })
-
-    code += 'var ' + contractName + 'Contract = web3.eth.contract(' + jsonInterface.replace('\n', '') + ');' +
-      '\nvar ' + contractName + ' = ' + contractName + 'Contract.new('
-
-    funABI.inputs.forEach(function (inp) {
-      code += '\n   ' + inp.name + ','
-    })
-
-    code += '\n   {' +
-      '\n     from: web3.eth.accounts[0], ' +
-      "\n     data: '0x" + bytecode + "', " +
-      "\n     gas: '4700000'" +
-      '\n   }, function (e, contract){' +
-      '\n    console.log(e, contract);' +
-      "\n    if (typeof contract.address !== 'undefined') {" +
-      "\n         console.log('Contract mined! address: ' + contract.address + ' transactionHash: ' + contract.transactionHash);" +
-      '\n    }' +
-      '\n })'
-
-    return code
-  },
-
-  getConstructorInterface: function (abi) {
-    var funABI = { 'name': '', 'inputs': [], 'type': 'constructor', 'outputs': [] }
-    for (var i = 0; i < abi.length; i++) {
-      if (abi[i].type === 'constructor') {
-        funABI.inputs = abi[i].inputs || []
-        break
-      }
-    }
-    return funABI
-  },
-
-  formatGasEstimates: function (data) {
-    // FIXME: the whole gasEstimates object should be nil instead
-    if (data.creation === undefined && data.external === undefined && data.internal === undefined) {
-      return
-    }
-
-    var gasToText = function (g) {
-      return g === null ? 'unknown' : g
-    }
-
-    var text = ''
-    var fun
-    if ('creation' in data) {
-      text += 'Creation: ' + gasToText(data.creation[0]) + ' + ' + gasToText(data.creation[1]) + '\n'
-    }
-
-    if ('external' in data) {
-      text += 'External:\n'
-      for (fun in data.external) {
-        text += '  ' + fun + ': ' + gasToText(data.external[fun]) + '\n'
-      }
-    }
-
-    if ('internal' in data) {
-      text += 'Internal:\n'
-      for (fun in data.internal) {
-        text += '  ' + fun + ': ' + gasToText(data.internal[fun]) + '\n'
-      }
-    }
-    return text
-  },
-
-  detailsOpen: {},
-  getDetails: function (contract, source, contractName) {
-    var button = $('<button>Toggle Details</button>')
-    var details = $('<div style="display: none;"/>')
-
-    if (contract.metadata) {
-      details.append(this.preRow('Metadata', contract.metadata))
-    }
-
-    var funHashes = ''
-    for (var fun in contract.functionHashes) {
-      funHashes += contract.functionHashes[fun] + ' ' + fun + '\n'
-    }
-    if (funHashes.length > 0) {
-      details.append(this.preRow('Functions', funHashes))
-    }
-
-    var gasEstimates = this.formatGasEstimates(contract.gasEstimates)
-    if (gasEstimates) {
-      details.append(this.preRow('Gas Estimates', gasEstimates))
-    }
-
-    if (contract.runtimeBytecode && contract.runtimeBytecode.length > 0) {
-      details.append(this.tableRow('Runtime Bytecode', contract.runtimeBytecode))
-    }
-
-    if (contract.opcodes !== undefined && contract.opcodes !== '') {
-      details.append(this.tableRow('Opcodes', contract.opcodes))
-    }
-
-    if (contract.assembly !== null) {
-      details.append(this.preRow('Assembly', this.formatAssemblyText(contract.assembly, '', source)))
-    }
-
-    var self = this
-    button.click(function () {
-      self.detailsOpen[contractName] = !self.detailsOpen[contractName]
-      details.toggle()
-    })
-    if (this.detailsOpen[contractName]) {
-      details.show()
-    }
-    return $('<div class="contractDetails"/>').append(button).append(details)
-  }
-}