rewrite txlogger (make it a class)

src/app.js

@@ -32,7 +32,7 @@ var RighthandPanel = require('./app/panels/righthand-panel')
 var examples = require('./app/editor/example-contracts')
 var modalDialogCustom = require('./app/ui/modal-dialog-custom')
 var Txlistener = require('./app/execution/txListener')
-var txLogger = require('./app/execution/txLogger')
+var TxLogger = require('./app/execution/txLogger')
 var EventsDecoder = require('./app/execution/eventsDecoder')
 var Web3VMProvider = remix.web3.web3VMProvider
 
@@ -813,33 +813,9 @@ function run () {
 
   txlistener.startListening()
 
-  self._components.editorpanel.registerType('knownTransaction', function (data) {
-    var tx = data[0]
-    var resolvedTransaction = data[1]
-    self._components.editorpanel.log(tx)
-    self._components.editorpanel.log(resolvedTransaction)
-    console.error('TERMINAL: ', {tx, resolvedTransaction})
-    return yo`<span style="color:green;"><code>knownTransaction</code> was logged</span>`
-  })
-  self._components.editorpanel.registerType('unknownTransaction', function (data) {
-    var tx = data[0]
-    self._components.editorpanel.log(tx)
-    console.error('TERMINAL: ', {tx})
-    return yo`<span style="color:yellow;"><code>unknownTransaction</code> was logged</span>`
-  })
-  txLogger({
+  var txLogger = new TxLogger({
     api: {
-      /**
-        * log the given transaction.
-        *
-        * @param {Object} tx - DOM element representing the transaction
-        */
-      log: function (tx) {
-        var data = JSON.parse(tx)
-        if (data.length === 2) data = { type: 'knownTransaction', value: data }
-        if (data.length === 1) data = { type: 'unknownTransaction', value: data }
-        self._components.editorpanel.log(data)
-      },
+      editorpanel: self._components.editorpanel,
       resolvedTransaction: function (hash) {
         return txlistener.resolvedTransaction(hash)
       },
@@ -848,6 +824,9 @@ function run () {
       },
       compiledContracts: function () {
         return compiledContracts()
+      },
+      context: function () {
+        return executionContext.getProvider()
       }
     },
     events: {
@@ -855,6 +834,10 @@ function run () {
     }
   })
 
+  txLogger.event.register('debugRequested', (hash) => {
+    startdebugging(hash)
+  })
+
   // ----------------- autoCompile -----------------
   var autoCompile = document.querySelector('#autoCompile').checked
   if (config.exists('autoCompile')) {

src/app/execution/txLogger.js

@@ -1,35 +1,89 @@
 'use strict'
+var yo = require('yo-yo')
+var remix = require('ethereum-remix')
+var EventManager = remix.lib.EventManager
+var helper = require('../../lib/helper')
+var ethJSUtil = require('ethereumjs-util')
+var BN = ethJSUtil.BN
 
 /**
   * This just export a function that register to `newTransaction` and forward them to the logger.
+  * Emit debugRequested
   *
   */
-module.exports = (opts = {}) => {
-  opts.events.txListener.register('newTransaction', (tx) => {
-    log(tx, opts.api)
-  })
+class TxLogger {
+  constructor (opts = {}) {
+    this.event = new EventManager()
+    this.opts = opts
+    opts.api.editorpanel.registerType('knownTransaction', (data) => {
+      return renderKnownTransaction(this, data)
+    })
+    opts.api.editorpanel.registerType('unknownTransaction', (data) => {
+      return renderUnknownTransaction(this, data)
+    })
+    opts.events.txListener.register('newTransaction', (tx) => {
+      log(this, tx, opts.api)
+    })
+  }
 }
 
-function log (tx, api) {
+function log (self, tx, api) {
   var resolvedTransaction = api.resolvedTransaction(tx.hash)
   if (resolvedTransaction) {
     api.parseLogs(tx, resolvedTransaction.contractName, api.compiledContracts(), (error, logs) => {
       if (!error) {
-        api.log(renderResolvedTransaction(tx, resolvedTransaction, logs))
+        api.editorpanel.log({type: 'knownTransaction', value: { tx: tx, resolvedData: resolvedTransaction, logs: logs }})
       }
     })
   } else {
     // contract unknown - just displaying raw tx.
-    api.log(renderTransaction(tx))
+    api.editorpanel.log({ type: 'unknownTransaction', value: { tx: tx } })
+  }
+}
+
+function renderKnownTransaction (self, data) {
+  var to = data.tx.to
+  if (to) to = helper.shortenAddress(data.tx.to)
+  function debug () {
+    self.event.trigger('debugRequested', [data.tx.hash])
+  }
+  function detail () {
+    // @TODO here should open a modal containing some info (e.g input params, logs, ...)
   }
+  return yo`<span>${context(self, data.tx)}: from:${helper.shortenAddress(data.tx.from)}, to:${to}, ${data.resolvedData.contractName}.${data.resolvedData.fn}, value:${value(data.tx.value)} wei, data:${helper.shortenHexData(data.tx.input)}, ${data.logs.length} logs, hash:${helper.shortenHexData((data.tx.hash))},<button onclick=${detail}>Details</button> <button onclick=${debug}>Debug</button></span>`
 }
 
-function renderResolvedTransaction (tx, resolvedTransaction, logs) {
-  console.log([tx, resolvedTransaction])
-  return JSON.stringify([tx, resolvedTransaction])
+function renderUnknownTransaction (self, data) {
+  var to = data.tx.to
+  if (to) to = helper.shortenAddress(data.tx.to)
+  function debug () {
+    self.event.trigger('debugRequested', [data.tx.hash])
+  }
+  function detail () {
+    // @TODO here should open a modal containing some info (e.g input params, logs, ...)
+  }
+  return yo`<span>${context(self, data.tx)}: from:${helper.shortenAddress(data.tx.from)}, to:${to}, value:${value(data.tx.value)} wei, data:${helper.shortenHexData((data.tx.input))}, hash:${helper.shortenHexData((data.tx.hash))}, <button onclick=${detail}>Details</button> <button onclick=${debug}>Debug</button></span>`
+}
+
+function context (self, tx) {
+  if (self.opts.api.context() === 'vm') {
+    return yo`<span>(vm)</span>`
+  } else {
+    return yo`<span>block:${tx.blockNumber}, txIndex:${tx.transactionIndex}`
+  }
 }
 
-function renderTransaction (tx) {
-  console.log(tx)
-  return JSON.stringify(tx)
+function value (v) {
+  try {
+    if (v.indexOf && v.indexOf('0x') === 0) {
+      return (new BN(v.replace('0x', ''), 12)).toString(10)
+    } else {
+      return v.toString(10)
+    }
+  } catch (e) {
+    console.log(e)
+    return v
+  }
 }
+
+module.exports = TxLogger