Merge pull request #1397 from ethereum/refactor9

src/app.js

@@ -24,7 +24,6 @@ var BrowserfilesTree = require('./app/files/browser-files-tree')
 var chromeCloudStorageSync = require('./app/files/chromeCloudStorageSync')
 var SharedFolder = require('./app/files/shared-folder')
 var Config = require('./config')
-var Editor = require('./app/editor/editor')
 var Renderer = require('./app/ui/renderer')
 var Compiler = require('remix-solidity').Compiler
 var executionContext = require('./execution-context')
@@ -40,12 +39,9 @@ var Txlistener = remixLib.execution.txListener
 var EventsDecoder = remixLib.execution.EventsDecoder
 var CompilerImport = require('./app/compiler/compiler-imports')
 var FileManager = require('./app/files/fileManager')
-var ContextualListener = require('./app/editor/contextualListener')
-var ContextView = require('./app/editor/contextView')
 var BasicReadOnlyExplorer = require('./app/files/basicReadOnlyExplorer')
 var NotPersistedExplorer = require('./app/files/NotPersistedExplorer')
 var toolTip = require('./app/ui/tooltip')
-var CommandInterpreter = require('./lib/cmdInterpreter')
 var TransactionReceiptResolver = require('./transactionReceiptResolver')
 var SourceHighlighter = require('./app/editor/sourceHighlighter')
 
@@ -237,7 +233,7 @@ class App {
     if (self._view.transactionDebugger.isActive) return
 
     self._components.fileManager.saveCurrentFile()
-    self._components.editor.clearAnnotations()
+    self._components.editorpanel.getEditor().clearAnnotations()
     var currentFile = self._components.config.get('currentFile')
     if (currentFile) {
       if (/.(.sol)$/.exec(currentFile)) {
@@ -388,6 +384,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     }
   })
 
+  registry.put({api: msg => self._components.editorpanel.logHtmlMessage(msg), name: 'logCallback'})
+
   // ----------------- Compiler -----------------
   self._components.compiler = new Compiler((url, cb) => self.importFileCb(url, cb))
   var compiler = self._components.compiler
@@ -395,51 +393,17 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
   registry.put({api: offsetToLineColumnConverter, name: 'offsettolinecolumnconverter'})
-  // ----------------- UniversalDApp -----------------
-  var transactionContextAPI = {
-    getAddress: (cb) => {
-      cb(null, $('#txorigin').val())
-    },
-    getValue: (cb) => {
-      try {
-        var number = document.querySelector('#value').value
-        var select = document.getElementById('unit')
-        var index = select.selectedIndex
-        var selectedUnit = select.querySelectorAll('option')[index].dataset.unit
-        var unit = 'ether' // default
-        if (selectedUnit === 'ether') {
-          unit = 'ether'
-        } else if (selectedUnit === 'finney') {
-          unit = 'finney'
-        } else if (selectedUnit === 'gwei') {
-          unit = 'gwei'
-        } else if (selectedUnit === 'wei') {
-          unit = 'wei'
-        }
-        cb(null, executionContext.web3().toWei(number, unit))
-      } catch (e) {
-        cb(e)
-      }
-    },
-    getGasLimit: (cb) => {
-      cb(null, $('#gasLimit').val())
-    }
-  }
-  // @TODO should put this in runtab
-  registry.put({api: transactionContextAPI, name: 'transactionContextAPI'})
 
-  var udapp = new UniversalDApp({ removable: false, removable_instances: true })
+  // ----------------- UniversalDApp -----------------
+  var udapp = new UniversalDApp({
+    removable: false,
+    removable_instances: true
+  })
   registry.put({api: udapp, name: 'udapp'})
 
   var udappUI = new UniversalDAppUI(udapp)
   registry.put({api: udappUI, name: 'udappUI'})
 
-  udapp.reset({})
-  udappUI.reset()
-  udapp.event.register('debugRequested', this, function (txResult) {
-    self.startdebugging(txResult.transactionHash)
-  })
-
   // ----------------- Tx listener -----------------
   var transactionReceiptResolver = new TransactionReceiptResolver()
 
@@ -472,39 +436,23 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   txlistener.startListening()
 
-  // ----------------- editor ----------------------------
-  this._components.editor = new Editor({}) // @TODO: put into editorpanel
-  var editor = self._components.editor // shortcut for the editor
-  registry.put({api: editor, name: 'editor'})
+  // TODO: There are still a lot of dep between editorpanel and filemanager
 
-  // ----------------- Command Interpreter -----------------
-  /*
-    this module basically listen on user input (from terminal && editor)
-    and interpret them as commands
-  */
-  var cmdInterpreter = new CommandInterpreter() // @TODO: put into editorpanel
+  // ----------------- editor panel ----------------------
+  self._components.editorpanel = new EditorPanel()
+  registry.put({ api: self._components.editorpanel, name: 'editorpanel' })
 
-  registry.put({api: cmdInterpreter, name: 'cmdinterpreter'})
   // ----------------- file manager ----------------------------
-
   self._components.fileManager = new FileManager()
   var fileManager = self._components.fileManager
   registry.put({api: fileManager, name: 'filemanager'})
 
-  // ---------------- ContextualListener -----------------------
-  this._components.contextualListener = new ContextualListener()
-  registry.put({api: this._components.contextualListener, name: 'contextualListener'})
-
-  // ---------------- ContextView -----------------------
-  this._components.contextView = new ContextView()
-  registry.put({api: this._components.contextView, name: 'contextview'})
-
-  // ----------------- editor panel ----------------------
-  this._components.editorpanel = new EditorPanel()
-  registry.put({ api: this._components.editorpanel, name: 'editorpanel' })
-  this._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))
+  self._components.editorpanel.init()
+  self._components.fileManager.init()
 
-  this._view.centerpanel.appendChild(this._components.editorpanel.render())
+  self._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))
+  self._view.centerpanel.appendChild(self._components.editorpanel.render())
+  var editor = self._components.editorpanel.getEditor()
 
   // The event listener needs to be registered as early as possible, because the
   // parent will send the message upon the "load" event.

src/app/editor/contextView.js

@@ -14,13 +14,13 @@ var css = require('./styles/contextView-styles')
    - rename declaration/references
 */
 class ContextView {
-  constructor (localRegistry) {
+  constructor (opts, localRegistry) {
     const self = this
     self._components = {}
     self._components.registry = localRegistry || globalRegistry
+    self.contextualListener = opts.contextualListener
+    self.editor = opts.editor
     self._deps = {
-      contextualListener: self._components.registry.get('contextualListener').api,
-      editor: self._components.registry.get('editor').api,
       compiler: self._components.registry.get('compiler').api,
       offsetToLineColumnConverter: self._components.registry.get('offsettolinecolumnconverter').api,
       config: self._components.registry.get('config').api,
@@ -31,7 +31,7 @@ class ContextView {
     this._current
     this.sourceMappingDecoder = new SourceMappingDecoder()
     this.previousElement = null
-    self._deps.contextualListener.event.register('contextChanged', nodes => {
+    self.contextualListener.event.register('contextChanged', nodes => {
       this._nodes = nodes
       this.update()
     })
@@ -76,7 +76,7 @@ class ContextView {
       if (isDefinition(last)) {
         this._current = last
       } else {
-        var target = this._deps.contextualListener.declarationOf(last)
+        var target = this.contextualListener.declarationOf(last)
         if (target) {
           this._current = target
         } else {
@@ -94,7 +94,7 @@ class ContextView {
     var self = this
     function jumpToLine (lineColumn) {
       if (lineColumn.start && lineColumn.start.line && lineColumn.start.column) {
-        self._deps.editor.gotoLine(lineColumn.start.line, lineColumn.end.column + 1)
+        self.editor.gotoLine(lineColumn.start.line, lineColumn.end.column + 1)
       }
     }
     if (self._deps.compiler.lastCompilationResult && self._deps.compiler.lastCompilationResult.data) {
@@ -119,12 +119,12 @@ class ContextView {
   _render (node, nodeAtCursorPosition) {
     if (!node) return yo`<div></div>`
     var self = this
-    var references = self._deps.contextualListener.referencesOf(node)
+    var references = self.contextualListener.referencesOf(node)
     var type = (node.attributes && node.attributes.type) ? node.attributes.type : node.name
     references = `${references ? references.length : '0'} reference(s)`
 
     var ref = 0
-    var nodes = self._deps.contextualListener.getActiveHighlights()
+    var nodes = self.contextualListener.getActiveHighlights()
     for (var k in nodes) {
       if (nodeAtCursorPosition.id === nodes[k].nodeId) {
         ref = k
@@ -161,7 +161,7 @@ class ContextView {
 
     function showGasEstimation () {
       if (node.name === 'FunctionDefinition') {
-        var result = self._deps.contextualListener.gasEstimation(node)
+        var result = self.contextualListener.gasEstimation(node)
         var executionCost = 'Execution cost: ' + result.executionCost + ' gas'
         var codeDepositCost = 'Code deposit cost: ' + result.codeDepositCost + ' gas'
         var estimatedGas = result.codeDepositCost ? `${codeDepositCost}, ${executionCost}` : `${executionCost}`

src/app/editor/contextualListener.js

@@ -9,14 +9,14 @@ var globalRegistry = require('../../global/registry')
   trigger contextChanged(nodes)
 */
 class ContextualListener {
-  constructor (localRegistry) {
+  constructor (opts, localRegistry) {
     var self = this
     this.event = new EventManager()
     self._components = {}
     self._components.registry = localRegistry || globalRegistry
+    self.editor = opts.editor
     self._deps = {
       compiler: self._components.registry.get('compiler').api,
-      editor: self._components.registry.get('editor').api,
       config: self._components.registry.get('config').api,
       offsetToLineColumnConverter: self._components.registry.get('offsettolinecolumnconverter').api
     }
@@ -37,12 +37,12 @@ class ContextualListener {
       }
     })
 
-    self._deps.editor.event.register('contentChanged', () => { this._stopHighlighting() })
+    self.editor.event.register('contentChanged', () => { this._stopHighlighting() })
 
     this.sourceMappingDecoder = new SourceMappingDecoder()
     this.astWalker = new AstWalker()
     setInterval(() => {
-      this._highlightItems(self._deps.editor.getCursorPosition(), self._deps.compiler.lastCompilationResult, self._deps.config.get('currentFile'))
+      this._highlightItems(self.editor.getCursorPosition(), self._deps.compiler.lastCompilationResult, self._deps.config.get('currentFile'))
     }, 1000)
   }
 
@@ -132,7 +132,7 @@ class ContextualListener {
       }
       var fileName = self._deps.compiler.getSourceName(position.file)
       if (fileName) {
-        return self._deps.editor.addMarker(lineColumn, fileName, css)
+        return self.editor.addMarker(lineColumn, fileName, css)
       }
     }
     return null
@@ -164,7 +164,7 @@ class ContextualListener {
     var self = this
     for (var eventKey in this._activeHighlights) {
       var event = this._activeHighlights[eventKey]
-      self._deps.editor.removeMarker(event.eventId, event.fileTarget)
+      self.editor.removeMarker(event.eventId, event.fileTarget)
     }
     this._activeHighlights = []
   }

src/app/files/fileManager.js

@@ -15,10 +15,12 @@ class FileManager {
   constructor (localRegistry) {
     this.tabbedFiles = {}
     this.event = new EventManager()
+    this._components = {}
+    this._components.registry = localRegistry || globalRegistry
+  }
 
+  init () {
     var self = this
-    self._components = {}
-    self._components.registry = localRegistry || globalRegistry
     self._deps = {
       compilerImport: self._components.registry.get('compilerimport').api,
       editor: self._components.registry.get('editor').api,

src/app/panels/editor-panel.js

@@ -4,8 +4,12 @@ var EventManager = remixLib.EventManager
 var $ = require('jquery')
 
 var Terminal = require('./terminal')
+var Editor = require('../editor/editor')
 var globalRegistry = require('../../global/registry')
 
+var CommandInterpreter = require('../../lib/cmdInterpreter')
+var ContextualListener = require('../editor/contextualListener')
+var ContextView = require('../editor/contextView')
 var styles = require('./styles/editor-panel-styles')
 var cssTabs = styles.cssTabs
 var css = styles.css
@@ -15,16 +19,16 @@ class EditorPanel {
     var self = this
     self._components = {}
     self._components.registry = localRegistry || globalRegistry
+    self.event = new EventManager()
+  }
+  init () {
+    var self = this
     self._deps = {
       config: self._components.registry.get('config').api,
-      editor: self._components.registry.get('editor').api,
       txlistener: self._components.registry.get('txlistener').api,
-      contextView: self._components.registry.get('contextview').api,
-      udapp: self._components.registry.get('udapp').api,
-      cmdInterpreter: self._components.registry.get('cmdinterpreter').api,
-      fileManager: self._components.registry.get('filemanager').api
+      fileManager: self._components.registry.get('filemanager').api,
+      udapp: self._components.registry.get('udapp').api
     }
-    self.event = new EventManager()
     self.data = {
       _FILE_SCROLL_DELTA: 200,
       _layout: {
@@ -35,13 +39,19 @@ class EditorPanel {
       }
     }
     self._view = {}
+    var editor = new Editor({})
+    self._components.registry.put({api: editor, name: 'editor'})
+    var contextualListener = new ContextualListener({editor: editor})
     self._components = {
-      editor: self._deps.editor, // @TODO: instantiate in eventpanel instead of passing via `opts`
+      editor: editor,
+      contextualListener: contextualListener,
+      contextView: new ContextView({contextualListener: contextualListener, editor: editor}),
       terminal: new Terminal({
-        api: {
-          cmdInterpreter: self._deps.cmdInterpreter,
-          udapp: self._deps.udapp,
-          getPosition (event) {
+        udapp: self._deps.udapp,
+        cmdInterpreter: new CommandInterpreter()
+      },
+        {
+          getPosition: (event) => {
             var limitUp = 36
             var limitDown = 20
             var height = window.innerHeight
@@ -49,9 +59,9 @@ class EditorPanel {
             newpos = (newpos < height - limitDown) ? newpos : height - limitDown
             return newpos
           }
-        }
-      })
+        })
     }
+
     self._components.terminal.event.register('filterChanged', (type, value) => {
       this.event.trigger('terminalFilterChanged', [type, value])
     })
@@ -93,6 +103,10 @@ class EditorPanel {
       self._components.terminal.scroll2bottom()
     }
   }
+  getEditor () {
+    var self = this
+    return self._components.editor
+  }
   refresh () {
     var self = this
     self._view.tabs.onmouseenter()
@@ -119,7 +133,7 @@ class EditorPanel {
       <div class=${css.content}>
         ${self._renderTabsbar()}
         <div class=${css.contextviewcontainer}>
-          ${self._deps.contextView.render()}
+          ${self._components.contextView.render()}
         </div>
         ${self._view.editor}
         ${self._view.terminal}
@@ -191,7 +205,7 @@ class EditorPanel {
       delete self._deps.fileManager.tabbedFiles[name]
       self._deps.fileManager.refreshTabs()
       if (Object.keys(self._deps.fileManager.tabbedFiles).length) {
-        self.switchFile(Object.keys(self._deps.fileManager.tabbedFiles)[0])
+        self._deps.fileManager.switchFile(Object.keys(self._deps.fileManager.tabbedFiles)[0])
       } else {
         self._deps.editor.displayEmptyReadOnlySession()
         self._deps.config.set('currentFile', '')

src/app/panels/terminal.js

@@ -24,10 +24,11 @@ function register (api) { KONSOLES.push(api) }
 var ghostbar = yo`<div class=${css.ghostbar}></div>`
 
 class Terminal {
-  constructor (opts = { auto: true }) {
+  constructor (opts, api) {
     var self = this
     self.event = new EventManager()
-    self._api = opts.api
+    self._api = api
+    self._opts = opts
     self.data = {
       lineLength: opts.lineLength || 80,
       session: [],
@@ -73,7 +74,7 @@ class Terminal {
     self.registerCommand('script', function execute (args, scopedCommands, append) {
       var script = String(args[0])
       scopedCommands.log(`> ${script}`)
-      if (self._api.cmdInterpreter && self._api.cmdInterpreter.interpret(script)) return
+      if (self._opts.cmdInterpreter && self.opts.cmdInterpreter.interpret(script)) return
       self._shell(script, scopedCommands, function (error, output) {
         if (error) scopedCommands.error(error)
         else scopedCommands.log(output)
@@ -111,7 +112,7 @@ class Terminal {
     self._view.dragbar = yo`
       <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
     self._view.dropdown = self._components.dropdown.render()
-    self._view.pendingTxCount = yo`<div class=${css.pendingTx} title='Pending Transactions'>${self._view.pendingTxCount}</div>`
+    self._view.pendingTxCount = yo`<div class=${css.pendingTx} title='Pending Transactions'>0</div>`
     self._view.bar = yo`
       <div class=${css.bar}>
         ${self._view.dragbar}
@@ -136,8 +137,8 @@ class Terminal {
       </div>
     `
     setInterval(() => {
-      updatePendingTxs(self._api.udapp, self._view.pendingTxCount)
-    }, 5000)
+      self._view.pendingTxCount.innerHTML = self._opts.udapp.pendingTransactionsCount()
+    }, 1000)
 
     function listenOnNetwork (ev) {
       self.event.trigger('listenOnNetWork', [ev.currentTarget.checked])
@@ -578,10 +579,5 @@ function domTerminalFeatures (self, scopedCommands) {
 }
 
 function blockify (el) { return yo`<div class=${css.block}>${el}</div>` }
-// PENDING TX
-function updatePendingTxs (udapp, el) {
-  var count = Object.keys(udapp.pendingTransactions()).length
-  el.innerText = count
-}
 
 module.exports = Terminal

src/app/tabs/compile-tab.js

@@ -33,15 +33,11 @@ module.exports = class CompileTab {
     // dependencies
     self._deps = {
       app: self._components.registry.get('app').api,
-      udapp: self._components.registry.get('udapp').api,
-      udappUI: self._components.registry.get('udappUI').api,
       editor: self._components.registry.get('editor').api,
       config: self._components.registry.get('config').api,
       compiler: self._components.registry.get('compiler').api,
       staticAnalysis: self._components.registry.get('staticanalysis').api,
       renderer: self._components.registry.get('renderer').api,
-      fileManager: self._components.registry.get('filemanager').api,
-      transactionContextAPI: self._components.registry.get('transactionContextAPI').api,
       rightHandPanel: self._components.registry.get('righthandpanel').api
     }
     self.data = {
@@ -113,12 +109,8 @@ module.exports = class CompileTab {
           var contractName = yo`<option>${contract.name}</option>`
           self._view.contractNames.appendChild(contractName)
         })
-        self._deps.udapp.reset(self.data.contractsDetails, self._deps.transactionContextAPI)
-        self._deps.udappUI.reset()
       } else {
         self._view.contractNames.setAttribute('disabled', true)
-        self._deps.udapp.reset({}, self._deps.transactionContextAPI)
-        self._deps.udappUI.reset()
       }
       // hightlight the tab if error
       if (success) document.querySelector('.compileView').style.color = '' // @TODO: compileView tab

src/app/tabs/run-tab.js

@@ -19,7 +19,7 @@ var addTooltip = require('../ui/tooltip')
 var css = require('./styles/run-tab-styles')
 var MultiParamManager = require('../../multiParamManager')
 
-function runTab (localRegistry) {
+function runTab (opts, localRegistry) {
   /* -------------------------
             VARIABLES
   --------------------------- */
@@ -35,6 +35,35 @@ function runTab (localRegistry) {
   }
   self._components = {}
   self._components.registry = localRegistry || globlalRegistry
+  self._components.transactionContextAPI = {
+    getAddress: (cb) => {
+      cb(null, $('#txorigin').val())
+    },
+    getValue: (cb) => {
+      try {
+        var number = document.querySelector('#value').value
+        var select = document.getElementById('unit')
+        var index = select.selectedIndex
+        var selectedUnit = select.querySelectorAll('option')[index].dataset.unit
+        var unit = 'ether' // default
+        if (selectedUnit === 'ether') {
+          unit = 'ether'
+        } else if (selectedUnit === 'finney') {
+          unit = 'finney'
+        } else if (selectedUnit === 'gwei') {
+          unit = 'gwei'
+        } else if (selectedUnit === 'wei') {
+          unit = 'wei'
+        }
+        cb(null, executionContext.web3().toWei(number, unit))
+      } catch (e) {
+        cb(e)
+      }
+    },
+    getGasLimit: (cb) => {
+      cb(null, $('#gasLimit').val())
+    }
+  }
   // dependencies
   self._deps = {
     compiler: self._components.registry.get('compiler').api,
@@ -42,9 +71,10 @@ function runTab (localRegistry) {
     udappUI: self._components.registry.get('udappUI').api,
     config: self._components.registry.get('config').api,
     fileManager: self._components.registry.get('filemanager').api,
-    editorPanel: self._components.registry.get('editorpanel').api,
-    editor: self._components.registry.get('editor').api
+    editor: self._components.registry.get('editor').api,
+    logCallback: self._components.registry.get('logCallback').api
   }
+  self._deps.udapp.resetAPI(self._components.transactionContextAPI)
   self._view.recorderCount = yo`<span>0</span>`
   self._view.instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
   self._view.clearInstanceElement = yo`
@@ -198,16 +228,7 @@ function updateAccountBalances (container, self) {
            RECORDER
 ------------------------------------------------ */
 function makeRecorder (registry, runTabEvent, self) {
-  var recorder = new Recorder(self._deps.compiler, self._deps.udapp,
-  (msg) => {
-    self._deps.editorPanel.logMessage(msg)
-  }, {
-    events: {
-      udapp: self._deps.udapp.event,
-      executioncontext: executionContext.event,
-      runtab: runTabEvent
-    }
-  })
+  var recorder = new Recorder(self._deps.compiler, self._deps.udapp, self._deps.logCallback)
 
   recorder.event.register('newTxRecorded', (count) => {
     self.data.count = count
@@ -217,6 +238,15 @@ function makeRecorder (registry, runTabEvent, self) {
     self.data.count = 0
     self._view.recorderCount.innerText = 0
   })
+
+  executionContext.event.register('contextChanged', () => {
+    recorder.clearAll()
+  })
+
+  runTabEvent.register('clearInstance', () => {
+    recorder.clearAll()
+  })
+
   var css2 = csjs`
     .container {}
     .runTxs {}
@@ -368,21 +398,21 @@ function contractDropdown (events, self) {
     var constructor = txHelper.getConstructorInterface(selectedContract.contract.object.abi)
     txFormat.buildData(selectedContract.name, selectedContract.contract.object, self._deps.compiler.getContracts(), true, constructor, args, (error, data) => {
       if (!error) {
-        self._deps.editorPanel.logMessage(`creation of ${selectedContract.name} pending...`)
+        self._deps.logCallback(`creation of ${selectedContract.name} pending...`)
         self._deps.udapp.createContract(data, (error, txResult) => {
           if (error) {
-            self._deps.editorPanel.logMessage(`creation of ${selectedContract.name} errored: ` + error)
+            self._deps.logCallback(`creation of ${selectedContract.name} errored: ` + error)
           } else {
             var isVM = executionContext.isVM()
             if (isVM) {
               var vmError = txExecution.checkVMError(txResult)
               if (vmError.error) {
-                self._deps.editorPanel.logMessage(vmError.message)
+                self._deps.logCallback(vmError.message)
                 return
               }
             }
             if (txResult.result.status && txResult.result.status === '0x0') {
-              self._deps.editorPanel.logMessage(`creation of ${selectedContract.name} errored: transaction execution failed`)
+              self._deps.logCallback(`creation of ${selectedContract.name} errored: transaction execution failed`)
               return
             }
             var noInstancesText = self._view.noInstancesText
@@ -392,10 +422,10 @@ function contractDropdown (events, self) {
           }
         })
       } else {
-        self._deps.editorPanel.logMessage(`creation of ${selectedContract.name} errored: ` + error)
+        self._deps.logCallback(`creation of ${selectedContract.name} errored: ` + error)
       }
     }, (msg) => {
-      self._deps.editorPanel.logMessage(msg)
+      self._deps.logCallback(msg)
     }, (data, runTxCallback) => {
       // called for libraries deployment
       self._deps.udapp.runTx(data, runTxCallback)

src/app/tabs/settings-tab.js

@@ -24,10 +24,7 @@ module.exports = class SettingsTab {
     // dependencies
     self._deps = {
       compiler: self._components.registry.get('compiler').api,
-      udapp: self._components.registry.get('udapp').api,
-      udappUI: self._components.registry.get('udappUI').api,
       config: self._components.registry.get('config').api,
-      fileManager: self._components.registry.get('filemanager').api,
       editorPanel: self._components.registry.get('editorpanel').api,
       editor: self._components.registry.get('editor').api
     }

src/lib/cmdInterpreter.js

@@ -5,7 +5,7 @@ var EventManager = remixLib.EventManager
 var CommandInterpreterAPI = require('./cmdInterpreterAPI')
 
 class CmdInterpreter {
-  constructor (api) {
+  constructor () {
     this.event = new EventManager()
     this.api = new CommandInterpreterAPI(this)
   }

src/recorder.js

@@ -13,19 +13,13 @@ var modal = require('./app/ui/modal-dialog-custom')
   *
   */
 class Recorder {
-  constructor (compiler, udapp, logMessageCallback, opts = {}) {
+  constructor (compiler, udapp, logCallBack) {
     var self = this
-    self.logMessageCallback = logMessageCallback
+    self.logCallBack = logCallBack
     self.event = new EventManager()
     self.data = { _listen: true, _replay: false, journal: [], _createdContracts: {}, _createdContractsReverse: {}, _usedAccounts: {}, _abis: {}, _contractABIReferences: {}, _linkReferences: {} }
-    opts.events.executioncontext.register('contextChanged', () => {
-      self.clearAll()
-    })
-    opts.events.runtab.register('clearInstance', () => {
-      self.clearAll()
-    })
 
-    opts.events.udapp.register('initiatingTransaction', (timestamp, tx, payLoad) => {
+    udapp.event.register('initiatingTransaction', (timestamp, tx, payLoad) => {
       if (tx.useCall) return
       var { from, to, value } = tx
 
@@ -70,7 +64,7 @@ class Recorder {
       }
     })
 
-    opts.events.udapp.register('transactionExecuted', (error, from, to, data, call, txResult, timestamp) => {
+    udapp.event.register('transactionExecuted', (error, from, to, data, call, txResult, timestamp) => {
       if (error) return console.log(error)
       if (call) return
 
@@ -184,7 +178,7 @@ class Recorder {
   run (records, accounts, options, abis, linkReferences, udapp, newContractFn) {
     var self = this
     self.setListen(false)
-    self.logMessageCallback(`Running ${records.length} transaction(s) ...`)
+    self.logCallBack(`Running ${records.length} transaction(s) ...`)
     async.eachOfSeries(records, function (tx, index, cb) {
       var record = self.resolveAddress(tx.record, accounts, options)
       var abi = abis[tx.record.abi]
@@ -241,14 +235,14 @@ class Recorder {
         cb(data.error)
         return
       } else {
-        self.logMessageCallback(`(${index}) ${JSON.stringify(record, null, '\t')}`)
-        self.logMessageCallback(`(${index}) data: ${data.data}`)
+        self.logCallBack(`(${index}) ${JSON.stringify(record, null, '\t')}`)
+        self.logCallBack(`(${index}) data: ${data.data}`)
         record.data = { dataHex: data.data, funArgs: tx.record.parameters, funAbi: fnABI, contractBytecode: tx.record.bytecode, contractName: tx.record.contractName }
       }
       udapp.runTx(record, function (err, txResult) {
         if (err) {
           console.error(err)
-          self.logMessageCallback(err + '. Execution failed at ' + index)
+          self.logCallBack(err + '. Execution failed at ' + index)
         } else {
           var address = executionContext.isVM() ? txResult.result.createdAddress : txResult.result.contractAddress
           if (address) {

src/universal-dapp-ui.js

@@ -8,17 +8,8 @@ var copyToClipboard = require('./app/ui/copy-to-clipboard')
 var css = require('./universal-dapp-styles')
 var MultiParamManager = require('./multiParamManager')
 
-/*
-  trigger debugRequested
-*/
 function UniversalDAppUI (udapp, opts = {}) {
-  var self = this
   this.udapp = udapp
-  self.el = yo`<div class=${css.udapp}></div>`
-}
-
-UniversalDAppUI.prototype.reset = function () {
-  this.el.innerHTML = ''
 }
 
 UniversalDAppUI.prototype.renderInstance = function (contract, address, contractName) {

src/universal-dapp.js

@@ -21,21 +21,21 @@ var modalDialog = require('./app/ui/modaldialog')
 var typeConversion = remixLib.execution.typeConversion
 var confirmDialog = require('./app/execution/confirmDialog')
 
-/*
-  trigger debugRequested
-*/
 function UniversalDApp (opts, localRegistry) {
   this.event = new EventManager()
   var self = this
+  self.data = {}
   self._components = {}
   self._components.registry = localRegistry || globalRegistry
   self.removable = opts.removable
   self.removable_instances = opts.removable_instances
   self._deps = {
-    config: self._components.registry.get('config').api
+    config: self._components.registry.get('config').api,
+    compiler: self._components.registry.get('compiler').api,
+    logCallback: self._components.registry.get('logCallback').api
   }
   executionContext.event.register('contextChanged', this, function (context) {
-    self.reset(self.contracts)
+    self.resetEnvironment()
   })
   self._txRunnerAPI = {
     config: self._deps.config,
@@ -47,16 +47,15 @@ function UniversalDApp (opts, localRegistry) {
     }
   }
   self.txRunner = new TxRunner({}, self._txRunnerAPI)
+  self.data.contractsDetails = {}
+  self._deps.compiler.event.register('compilationFinished', (success, data, source) => {
+    self.data.contractsDetails = success && data ? data.contracts : {}
+  })
+  self.accounts = {}
+  self.resetEnvironment()
 }
 
-UniversalDApp.prototype.reset = function (contracts, transactionContextAPI) {
-  this._deps.editorpanel = this._components.registry.get('editorpanel')
-  if (this._deps.editorpanel) this._deps.editorpanel = this._deps.editorpanel.api
-
-  this.contracts = contracts
-  if (transactionContextAPI) {
-    this.transactionContextAPI = transactionContextAPI
-  }
+UniversalDApp.prototype.resetEnvironment = function () {
   this.accounts = {}
   if (executionContext.isVM()) {
     this._addAccount('3cd7232cd6f3fc66a57a6bedc1a8ed6c228fff0a327e169c2bcc5e869ed49511', '0x56BC75E2D63100000')
@@ -71,12 +70,16 @@ UniversalDApp.prototype.reset = function (contracts, transactionContextAPI) {
     executionContext.detectNetwork((error, network) => {
       if (!error && network) {
         var txLink = executionContext.txDetailsLink(network.name, txhash)
-        if (txLink) this._deps.editorpanel.logHtmlMessage(yo`<a href="${txLink}" target="_blank">${txLink}</a>`)
+        if (txLink) this._deps.logCallback(yo`<a href="${txLink}" target="_blank">${txLink}</a>`)
       }
     })
   })
 }
 
+UniversalDApp.prototype.resetAPI = function (transactionContextAPI) {
+  this.transactionContextAPI = transactionContextAPI
+}
+
 UniversalDApp.prototype.newAccount = function (password, cb) {
   if (!executionContext.isVM()) {
     if (!this._deps.config.get('settings/personal-mode')) {
@@ -179,6 +182,10 @@ UniversalDApp.prototype.pendingTransactions = function () {
   return this.txRunner.pendingTxs
 }
 
+UniversalDApp.prototype.pendingTransactionsCount = function () {
+  return Object.keys(this.txRunner.pendingTxs).length
+}
+
 UniversalDApp.prototype.call = function (isUserAction, args, value, lookupOnly, outputCb) {
   const self = this
   var logMsg
@@ -189,13 +196,14 @@ UniversalDApp.prototype.call = function (isUserAction, args, value, lookupOnly,
       logMsg = `call to ${args.contractName}.${(args.funABI.name) ? args.funABI.name : '(fallback)'}`
     }
   }
-  txFormat.buildData(args.contractName, args.contractAbi, self.contracts, false, args.funABI, value, (error, data) => {
+  // contractsDetails is used to resolve libraries
+  txFormat.buildData(args.contractName, args.contractAbi, self.data.contractsDetails, false, args.funABI, value, (error, data) => {
     if (!error) {
       if (isUserAction) {
         if (!args.funABI.constant) {
-          self._deps.editorpanel.logMessage(`${logMsg} pending ... `)
+          self._deps.logCallback(`${logMsg} pending ... `)
         } else {
-          self._deps.editorpanel.logMessage(`${logMsg}`)
+          self._deps.logCallback(`${logMsg}`)
         }
       }
       self.callFunction(args.address, data, args.funABI, (error, txResult) => {
@@ -204,7 +212,7 @@ UniversalDApp.prototype.call = function (isUserAction, args, value, lookupOnly,
           if (isVM) {
             var vmError = txExecution.checkVMError(txResult)
             if (vmError.error) {
-              self._deps.editorpanel.logMessage(`${logMsg} errored: ${vmError.message} `)
+              self._deps.logCallback(`${logMsg} errored: ${vmError.message} `)
               return
             }
           }
@@ -213,14 +221,14 @@ UniversalDApp.prototype.call = function (isUserAction, args, value, lookupOnly,
             outputCb(decoded)
           }
         } else {
-          self._deps.editorpanel.logMessage(`${logMsg} errored: ${error} `)
+          self._deps.logCallback(`${logMsg} errored: ${error} `)
         }
       })
     } else {
-      self._deps.editorpanel.logMessage(`${logMsg} errored: ${error} `)
+      self._deps.logCallback(`${logMsg} errored: ${error} `)
     }
   }, (msg) => {
-    self._deps.editorpanel.logMessage(msg)
+    self._deps.logCallback(msg)
   }, (data, runTxCallback) => {
     // called for libraries deployment
     self.runTx(data, runTxCallback)

test-browser/tests/compiling.js

@@ -73,8 +73,8 @@ function testReturnValues (browser, callback) {
       .waitForElementPresent('.instance:nth-of-type(2)')
       .click('.instance:nth-of-type(2)')
       .testFunction('retunValues1 - transact (not payable)',
-        '0x79dc928d149d2ade02ab610a8ae290636222d034d4adce0bb08a68401e3d1f7f',
-        `[vm]\nfrom:0xca3...a733c\nto:testReturnValues.retunValues1() 0x5e7...26e9f\nvalue:0 wei\ndata:0x9ed...59eb7\nlogs:0\nhash:0x79d...d1f7f`,
+        '0xc3660c7ab6899f196e77d3ab3749169e22c00ae7f1b8fe3af0ce54df49504019',
+        `[vm]\nfrom:0xca3...a733c\nto:testReturnValues.retunValues1() 0x5e7...26e9f\nvalue:0 wei\ndata:0x9ed...59eb7\nlogs:0\nhash:0xc36...04019`,
         null,
         `{
  "0": "bool: _b true",
@@ -82,10 +82,9 @@ function testReturnValues (browser, callback) {
  "2": "int256: _i -345",
  "3": "address: _a 0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c"
 }`)
-      .pause(500)
       .testFunction('retunValues2 - transact (not payable)',
-        '0x09175dcb30227b3af422d75786dbba3b0549985e5c7f59f86d12c7e1043ccb8c',
-        `[vm]\nfrom:0xca3...a733c\nto:testReturnValues.retunValues2() 0x5e7...26e9f\nvalue:0 wei\ndata:0xf57...4036c\nlogs:0\nhash:0x091...ccb8c`, null, `{
+        '0xc8cc8150fcb0b09cdf51e7357341272118888fe8c4efe32881b56e891377aad9',
+        `[vm]\nfrom:0xca3...a733c\nto:testReturnValues.retunValues2() 0x5e7...26e9f\nvalue:0 wei\ndata:0xf57...4036c\nlogs:0\nhash:0xc8c...7aad9`, null, `{
  "0": "bytes1: _b 0x12",
  "1": "bytes2: _b2 0x1223",
  "2": "bytes3: _b3 0x000000",
@@ -97,8 +96,8 @@ function testReturnValues (browser, callback) {
  "8": "bytes22: _b22 0x00000000000000000000325235235325325325235325",
  "9": "bytes32: _b32 0x0000000000000000000000000000000000032523532532523532523532523532"
 }`).pause(500).testFunction('retunValues3 - transact (not payable)',
-        '0x7faab07aeaafc8afe6bf283bb83be70c000dff381dec04e779354e354da14aff',
-        '[vm]\nfrom:0xca3...a733c\nto:testReturnValues.retunValues3() 0x5e7...26e9f\nvalue:0 wei\ndata:0x033...e0a7d\nlogs:0\nhash:0x7fa...14aff', null, `{
+        '0x94c4b4324bad773dec29af3ffe26a698c32b5caf8a1eedf8889563158639d28a',
+        '[vm]\nfrom:0xca3...a733c\nto:testReturnValues.retunValues3() 0x5e7...26e9f\nvalue:0 wei\ndata:0x033...e0a7d\nlogs:0\nhash:0x94c...9d28a', null, `{
  "0": "uint8: _en 2",
  "1": "int256[5][]: _a1 1,-45,-78,56,60,-1,42,334,-45455,-446,1,10,-5435,45,-7"
 }`).click('i[class^="clearinstance"]').perform(() => { callback(null, browser) })
@@ -111,17 +110,17 @@ function testInputValues (browser, callback) {
         .click('#runTabView button[class^="instanceButton"]')
         .waitForElementPresent('.instance:nth-of-type(2)')
         .click('.instance:nth-of-type(2)')
-      .testFunction('inputValue1 - transact (not payable)',
-        '0x917a873d27d105213eaf5461e14780387ccceb66fed574f8432d1963917832ae',
-        `[vm]\nfrom:0xca3...a733c\nto:test.inputValue1(uint256,int256,string) 0x8c1...401f5\nvalue:0 wei\ndata:0xd69...00000\nlogs:0\nhash:0x917...832ae`,
+     .testFunction('inputValue1 - transact (not payable)',
+        '0xf3265e3d9cd9299958bf81bed3cdfdd537942f85b9e0b95c5468c691d9396505',
+        `[vm]\nfrom:0xca3...a733c\nto:test.inputValue1(uint256,int256,string) 0x8c1...401f5\nvalue:0 wei\ndata:0xd69...00000\nlogs:0\nhash:0xf32...96505`,
         {types: 'uint256 _u, int256 _i, string _str', values: '"2343242", "-4324324", "string _ string _  string _  string _  string _  string _  string _  string _  string _  string _"'},
         `{
  "0": "uint256: _uret 2343242",
  "1": "int256: _iret -4324324",
  "2": "string: _strret string _ string _  string _  string _  string _  string _  string _  string _  string _  string _"
 }`).pause(500).testFunction('inputValue2 - transact (not payable)',
-        '0x487d09e244853bcb108b3a22cd6ee57b6431e50869619c9b918e9764fc16ef7f',
-        `[vm]\nfrom:0xca3...a733c\nto:test.inputValue2(uint256[3],bytes8[4]) 0x8c1...401f5\nvalue:0 wei\ndata:0x1b7...00000\nlogs:1\nhash:0x487...6ef7f`,
+        '0xd9ec6d8aa73d81755447190f52939ee3084e105b988d445a11e7ac718392ff5a',
+        `[vm]\nfrom:0xca3...a733c\nto:test.inputValue2(uint256[3],bytes8[4]) 0x8c1...401f5\nvalue:0 wei\ndata:0x1b7...00000\nlogs:1\nhash:0xd9e...2ff5a`,
         {types: 'uint256[3] _n, bytes8[4] _b8', values: '[1,2,3], ["0x1234", "0x1234","0x1234","0x1234"]'},
         `{
  "0": "uint256[3]: _nret 1,2,3",