refactor rhpp

src/app/editor/editor.js

@@ -65,7 +65,6 @@ document.head.appendChild(yo`
 
 function Editor (opts = {}) {
   var self = this
-
   var el = yo`<div id="input"></div>`
   var editor = ace.edit(el)
   if (styles.appProperties.aceTheme) {
@@ -104,14 +103,14 @@ function Editor (opts = {}) {
     var breakpoints = e.editor.session.getBreakpoints()
     for (var k in breakpoints) {
       if (k === row.toString()) {
-        self.event.trigger('breakpointCleared', [currentSession, row])
+        event.trigger('breakpointCleared', [currentSession, row])
         e.editor.session.clearBreakpoint(row)
         e.stop()
         return
       }
     }
     self.setBreakpoint(row)
-    self.event.trigger('breakpointAdded', [currentSession, row])
+    event.trigger('breakpointAdded', [currentSession, row])
     e.stop()
   })
 
@@ -278,10 +277,10 @@ function Editor (opts = {}) {
 
   // Do setup on initialisation here
   editor.on('changeSession', function () {
-    self.event.trigger('sessionSwitched', [])
+    event.trigger('sessionSwitched', [])
 
     editor.getSession().on('change', function () {
-      self.event.trigger('contentChanged', [])
+      event.trigger('contentChanged', [])
     })
   })
 

src/app/panels/editor-panel.js

@@ -96,6 +96,10 @@ class EditorPanel {
     var command = self._components.terminal.commands[data.type]
     if (typeof command === 'function') command(data.value)
   }
+  logMessage (msg) {
+    var self = this
+    self.log({type: 'log', value: msg})
+  }
   render () {
     var self = this
     if (self._view.el) return self._view.el

src/app/panels/righthand-panel.js

@@ -2,6 +2,8 @@ const yo = require('yo-yo')
 const csjs = require('csjs-inject')
 const remixLib = require('remix-lib')
 
+var globalRegistry = require('../../global/registry')
+
 const styleguide = require('../ui/styles-guide/theme-chooser')
 const PluginManager = require('../plugin/pluginManager')
 const TabbedMenu = require('../tabs/tabbed-menu')
@@ -18,32 +20,28 @@ const EventManager = remixLib.EventManager
 const styles = styleguide.chooser()
 
 module.exports = class RighthandPanel {
-  constructor (api = {}, events = {}, opts = {}) {
+  constructor (localRegistry) {
     const self = this
+    self._components = {}
+    self._components.registry = localRegistry || globalRegistry
     self.event = new EventManager()
-    self._api = api
-    self._api.switchTab = x => { // @TODO: refactor
-      if (self._components.tabbedMenu) self._components.tabbedMenu.selectTabByClassName(x)
-    }
-    self._events = events
-    self._events.rhp = self.event // @TODO: refactor
-    self._opts = opts
     self._view = {
       element: null,
       tabbedMenu: null,
       tabbedMenuViewport: null,
       dragbar: null
     }
+
     self._components = {
-      pluginManager: new PluginManager(self._opts.pluginAPI, self._events),
-      tabbedMenu: new TabbedMenu(self._api, self._events),
-      compile: new CompileTab(self._api, self._events, self._opts),
-      run: new RunTab(self._api, self._events, self._opts),
-      settings: new SettingsTab(self._api, self._events, self._opts),
-      analysis: new AnalysisTab(self._api, self._events, self._opts),
-      debug: new DebuggerTab(self._api, self._events, self._opts),
-      support: new SupportTab(self._api, self._events, self._opts),
-      test: new TestTab(self._api, self._events, self._opts)
+      pluginManager: new PluginManager(),
+      tabbedMenu: new TabbedMenu(),
+      compile: new CompileTab(),
+      run: new RunTab(),
+      settings: new SettingsTab(),
+      analysis: new AnalysisTab(),
+      debug: new DebuggerTab(),
+      support: new SupportTab(),
+      test: new TestTab()
     }
 
     self.event.register('plugin-loadRequest', json => {

src/app/plugin/pluginAPI.js

@@ -2,24 +2,24 @@
 /*
   Defines available API. `key` / `type`
 */
-module.exports = (app, compiler) => {
+module.exports = (registry) => {
   return {
     config: {
       setConfig: (mod, path, content, cb) => {
-        app._api.filesProviders['config'].set(mod + '/' + path, content)
+        registry.get('fileProviders/config').api.set(mod + '/' + path, content)
         cb()
       },
       getConfig: (mod, path, cb) => {
-        cb(null, app._api.filesProviders['config'].get(mod + '/' + path))
+        cb(null, registry.get('fileProviders/config').get(mod + '/' + path))
       },
       removeConfig: (mod, path, cb) => {
-        cb(null, app._api.filesProviders['config'].remove(mod + '/' + path))
+        cb(null, registry.get('fileProviders/config').api.remove(mod + '/' + path))
         if (cb) cb()
       }
     },
     compiler: {
       getCompilationResult: () => {
-        return compiler.lastCompilationResult
+        return registry.get('compiler').api.lastCompilationResult
       }
     }
   }

src/app/plugin/pluginManager.js

 'use strict'
+
+var globalRegistry = require('../../global/registry')
+var PluginAPI = require('./pluginAPI')
 /**
  * Register and Manage plugin:
  *
@@ -76,15 +79,19 @@
  *
  */
 module.exports = class PluginManager {
-  constructor (api = {}, events = {}, opts = {}) {
+  constructor (localRegistry) {
     const self = this
-    self._opts = opts
-    self._api = api
-    self._events = events
     self.plugins = {}
+    self._components = {}
+    self._components.registry = localRegistry || globalRegistry
+    self._components.pluginAPI = new PluginAPI(self._components.registry)
+    self._deps = {
+      compiler: self._components.registry.get('compiler').api,
+      app: self._components.registry.get('app').api
+    }
     self.inFocus
     self.allowedapi = {'setConfig': 1, 'getConfig': 1, 'removeConfig': 1}
-    self._events.compiler.register('compilationFinished', (success, data, source) => {
+    self._deps.compiler.event.register('compilationFinished', (success, data, source) => {
       if (self.inFocus) {
         // trigger to the current focus
         self.post(self.inFocus, JSON.stringify({
@@ -96,7 +103,7 @@ module.exports = class PluginManager {
       }
     })
 
-    self._events.app.register('tabChanged', (tabName) => {
+    self._deps.app.event.register('tabChanged', (tabName) => {
       if (self.inFocus && self.inFocus !== tabName) {
         // trigger unfocus
         self.post(self.inFocus, JSON.stringify({
@@ -119,7 +126,7 @@ module.exports = class PluginManager {
           action: 'notification',
           key: 'compiler',
           type: 'compilationData',
-          value: [api.compiler.getCompilationResult()]
+          value: [self._deps.compiler.getCompilationResult()]
         }))
       }
     })
@@ -142,7 +149,7 @@ module.exports = class PluginManager {
           data.value.push((error, result) => {
             response(data.key, data.type, data.id, error, result)
           })
-          api[data.key][data.type].apply({}, data.value)
+          self._components.pluginAPI[data.key][data.type].apply({}, data.value)
         }
       }
     }, false)

src/app/tabs/analysis-tab.js

@@ -2,17 +2,17 @@ var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
 
+var globalRegistry = require('../../global/registry')
 var EventManager = remixLib.EventManager
 
 module.exports = class AnalysisTab {
-  constructor (opts = { api: {}, events: {} }) {
+  constructor (localRegistry) {
     const self = this
     self.event = new EventManager()
-    self._api = opts.api
-    self._events = opts.events
     self._view = { el: null }
     self.data = {}
     self._components = {}
+    self._components.registry = localRegistry || globalRegistry
   }
   render () {
     const self = this

src/app/tabs/compile-tab.js

@@ -2,6 +2,7 @@ const yo = require('yo-yo')
 const csjs = require('csjs-inject')
 const copy = require('clipboard-copy')
 
+var globalRegistry = require('../../global/registry')
 const TreeView = require('../ui/TreeView')
 const modalDialog = require('../ui/modaldialog')
 const copyToClipboard = require('../ui/copy-to-clipboard')
@@ -14,11 +15,8 @@ const addTooltip = require('../ui/tooltip')
 const styles = styleGuide.chooser()
 
 module.exports = class CompileTab {
-  constructor (api = {}, events = {}, opts = {}) {
+  constructor (localRegistry) {
     const self = this
-    self._opts = opts
-    self._api = api
-    self._events = events
     self._view = {
       el: null,
       autoCompile: null,
@@ -30,22 +28,36 @@ module.exports = class CompileTab {
       contractNames: null,
       contractEl: null
     }
+    self._components = {}
+    self._components.registry = localRegistry || globalRegistry
+    // 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,
+      transactionContextAPI: self._components.registry.get('transactionContextAPI').api
+    }
     self.data = {
-      hideWarnings: self._opts.config.get('hideWarnings') || false,
-      autoCompile: self._opts.config.get('autoCompile'),
+      hideWarnings: self._deps.config.get('hideWarnings') || false,
+      autoCompile: self._deps.config.get('autoCompile'),
       compileTimeout: null,
       contractsDetails: {},
       maxTime: 1000,
       timeout: 300
     }
-    self._events.editor.register('contentChanged', scheduleCompilation)
-    self._events.editor.register('sessionSwitched', scheduleCompilation)
+    self._deps.editor.event.register('contentChanged', scheduleCompilation)
+    self._deps.editor.event.register('sessionSwitched', scheduleCompilation)
     function scheduleCompilation () {
-      if (!self._opts.config.get('autoCompile')) return
+      if (!self._deps.config.get('autoCompile')) return
       if (self.data.compileTimeout) window.clearTimeout(self.data.compileTimeout)
-      self.data.compileTimeout = window.setTimeout(() => self._api.runCompiler(), self.data.timeout)
+      self.data.compileTimeout = window.setTimeout(() => self._deps.app.runCompiler(), self.data.timeout)
     }
-    self._events.compiler.register('compilationDuration', function tabHighlighting (speed) {
+    self._deps.compiler.event.register('compilationDuration', function tabHighlighting (speed) {
       if (!self._view.warnCompilationSlow) return
       if (speed > self.data.maxTime) {
         const msg = `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`
@@ -55,31 +67,31 @@ module.exports = class CompileTab {
         self._view.warnCompilationSlow.style.display = 'none'
       }
     })
-    self._events.editor.register('contentChanged', function changedFile () {
+    self._deps.editor.event.register('contentChanged', function changedFile () {
       if (!self._view.compileIcon) return
       const compileTab = document.querySelector('.compileView') // @TODO: compileView tab
       compileTab.style.color = styles.colors.red // @TODO: compileView tab
       self._view.compileIcon.classList.add(`${css.bouncingIcon}`) // @TODO: compileView tab
     })
-    self._events.compiler.register('loadingCompiler', function start () {
+    self._deps.compiler.event.register('loadingCompiler', function start () {
       if (!self._view.compileIcon) return
       self._view.compileIcon.classList.add(`${css.spinningIcon}`)
       self._view.warnCompilationSlow.style.display = 'none'
       self._view.compileIcon.setAttribute('title', 'compiler is loading, please wait a few moments.')
     })
-    self._events.compiler.register('compilationStarted', function start () {
+    self._deps.compiler.event.register('compilationStarted', function start () {
       if (!self._view.compileIcon) return
       self._view.errorContainer.innerHTML = ''
       self._view.compileIcon.classList.remove(`${css.bouncingIcon}`)
       self._view.compileIcon.classList.add(`${css.spinningIcon}`)
       self._view.compileIcon.setAttribute('title', 'compiling...')
     })
-    self._events.compiler.register('compilerLoaded', function loaded () {
+    self._deps.compiler.event.register('compilerLoaded', function loaded () {
       if (!self._view.compileIcon) return
       self._view.compileIcon.classList.remove(`${css.spinningIcon}`)
       self._view.compileIcon.setAttribute('title', '')
     })
-    self._events.compiler.register('compilationFinished', function finish (success, data, source) {
+    self._deps.compiler.event.register('compilationFinished', function finish (success, data, source) {
       if (self._view.compileIcon) {
         const compileTab = document.querySelector('.compileView')
         compileTab.style.color = styles.colors.black
@@ -94,15 +106,17 @@ module.exports = class CompileTab {
       self._view.contractNames.innerHTML = ''
       if (success) {
         self._view.contractNames.removeAttribute('disabled')
-        self._opts.compiler.visitContracts(contract => {
-          self.data.contractsDetails[contract.name] = parseContracts(contract.name, contract.object, self._opts.compiler.getSource(contract.file))
+        self._deps.compiler.visitContracts(contract => {
+          self.data.contractsDetails[contract.name] = parseContracts(contract.name, contract.object, self._deps.compiler.getSource(contract.file))
           var contractName = yo`<option>${contract.name}</option>`
           self._view.contractNames.appendChild(contractName)
         })
-        self._api.resetDapp(self.data.contractsDetails)
+        self._deps.udapp.reset(self.data.contractsDetails, self._deps.transactionContextAPI)
+        self._deps.udappUI.reset()
       } else {
         self._view.contractNames.setAttribute('disabled', true)
-        self._api.resetDapp({})
+        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
@@ -111,31 +125,31 @@ module.exports = class CompileTab {
       var error = false
       if (data['error']) {
         error = true
-        self._opts.renderer.error(data['error'].formattedMessage, self._view.errorContainer, {type: data['error'].severity})
+        self._deps.renderer.error(data['error'].formattedMessage, self._view.errorContainer, {type: data['error'].severity})
       }
       if (data.errors && data.errors.length) {
         error = true
         data.errors.forEach(function (err) {
-          if (self._opts.config.get('hideWarnings')) {
+          if (self._deps.config.get('hideWarnings')) {
             if (err.severity !== 'warning') {
-              self._opts.renderer.error(err.formattedMessage, self._view.errorContainer, {type: err.severity})
+              self._deps.renderer.error(err.formattedMessage, self._view.errorContainer, {type: err.severity})
             }
           } else {
-            self._opts.renderer.error(err.formattedMessage, self._view.errorContainer, {type: err.severity})
+            self._deps.renderer.error(err.formattedMessage, self._view.errorContainer, {type: err.severity})
           }
         })
       }
       if (!error && data.contracts) {
-        self._opts.compiler.visitContracts((contract) => {
-          self._opts.renderer.error(contract.name, self._view.errorContainer, {type: 'success'})
+        self._deps.compiler.visitContracts((contract) => {
+          self._deps.renderer.error(contract.name, self._view.errorContainer, {type: 'success'})
         })
       }
     })
-    self._events.staticAnalysis.register('staticAnaysisWarning', (count) => {
+    self._deps.staticAnalysis.event.register('staticAnaysisWarning', (count) => {
       if (count) {
         const msg = `Static Analysis raised ${count} warning(s) that requires your attention. Click here to show the warning(s).`
         const settings = { type: 'staticAnalysisWarning', click: () => self._api.switchTab('staticanalysisView'), useSpan: true }
-        self._opts.renderer.error(msg, self._view.errorContainer, settings)
+        self._deps.renderer.error(msg, self._view.errorContainer, settings)
       }
     })
   }
@@ -202,8 +216,8 @@ module.exports = class CompileTab {
       'swarmLocation': 'Swarm url where all metadata information can be found (contract needs to be published first)',
       'web3Deploy': 'Copy/paste this code to any JavaScript/Web3 console to deploy this contract'
     }
-    function updateAutoCompile (event) { self._opts.config.set('autoCompile', self._view.autoCompile.checked) }
-    function compile (event) { self._api.runCompiler() }
+    function updateAutoCompile (event) { self._deps.config.set('autoCompile', self._view.autoCompile.checked) }
+    function compile (event) { self._deps.app.runCompiler() }
     function hideWarnings (event) {
       self._opts.config.set('hideWarnings', self._view.hideWarningsBox.checked)
       self._api.runCompiler()

src/app/tabs/debugger-tab.js

@@ -2,18 +2,18 @@ var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
 
+var globalRegistry = require('../../global/registry')
 var EventManager = remixLib.EventManager
 var styles = require('../ui/styles-guide/theme-chooser').chooser()
 
 module.exports = class DebuggerTab {
-  constructor (opts = { api: {}, events: {} }) {
+  constructor (localRegistry) {
     const self = this
     self.event = new EventManager()
-    self._api = opts.api
-    self._events = opts.events
     self._view = { el: null }
     self.data = {}
     self._components = {}
+    self._components.registry = localRegistry || globalRegistry
   }
   render () {
     const self = this

src/app/tabs/plugin-tab.js

@@ -2,17 +2,16 @@ var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
 
+var globalRegistry = require('../../global/registry')
 var EventManager = remixLib.EventManager
 
 module.exports = class plugintab {
-  constructor (api = {}, events = {}, opts = {}) {
+  constructor (localRegistry) {
     const self = this
     self.event = new EventManager()
-    self._opts = opts
-    self._api = api
-    self._events = events
     self._view = { el: null }
     self._components = {}
+    self._components.registry = localRegistry || globalRegistry
   }
   render () {
     const self = this

src/app/tabs/settings-tab.js

@@ -3,6 +3,8 @@ var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var minixhr = require('minixhr')
 var remixLib = require('remix-lib')
+
+var globalRegistry = require('../../global/registry')
 var QueryParams = require('../../lib/query-params')
 var helper = require('../../lib/helper')
 var modal = require('../ui/modal-dialog-custom')
@@ -15,12 +17,20 @@ var Storage = remixLib.Storage
 var EventManager = remixLib.EventManager
 
 module.exports = class SettingsTab {
-  constructor (api = {}, events = {}, opts = {}) {
+  constructor (localRegistry) {
     const self = this
-    self._opts = opts
-    self._api = api
-    self._events = events
     self._components = {}
+    self._components.registry = localRegistry || globalRegistry
+    // 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
+    }
     self._view = { /* eslint-disable */
       el: null,
       optionVM: null, personal: null, optimize: null, warnPersonalMode: null,
@@ -41,9 +51,11 @@ module.exports = class SettingsTab {
     self._components.themeStorage = new Storage('style:')
     self.data.optimize = !!self._components.queryParams.get().optimize
     self._components.queryParams.update({ optimize: self.data.optimize })
-    self._api.setOptimize(self.data.optimize, false)
+    self._deps.compiler.setOptimize(self.data.optimize)
     self.data.currentTheme = self._components.themeStorage.get('theme') || 'light'
-    self._events.compiler.register('compilerLoaded', (version) => self.setVersionText(version))
+
+    var compilerEvent = self._components.registry.get('compiler').event
+    compilerEvent.register('compilerLoaded', (version) => self.setVersionText(version))
     self.fetchAllVersion((allversions, selectedVersion) => {
       self.data.allversions = allversions
       self.data.selectedVersion = selectedVersion
@@ -56,16 +68,16 @@ module.exports = class SettingsTab {
 
     // Gist settings
     var gistAccessToken = yo`<input id="gistaccesstoken" type="password">`
-    var token = self._opts.config.get('settings/gist-access-token')
+    var token = self._deps.config.get('settings/gist-access-token')
     if (token) gistAccessToken.value = token
-    var gistAddToken = yo`<input class="${css.savegisttoken}" id="savegisttoken" onclick=${() => { self._opts.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`
-    var gistRemoveToken = yo`<input id="removegisttoken" onclick=${() => { gistAccessToken.value = ''; self._opts.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">`
-    self._view.gistToken = yo`<div class="${css.checkboxText}">${gistAccessToken}${copyToClipboard(() => self._opts.config.get('settings/gist-access-token'))}${gistAddToken}${gistRemoveToken}</div>`
+    var gistAddToken = yo`<input class="${css.savegisttoken}" id="savegisttoken" onclick=${() => { self._deps.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`
+    var gistRemoveToken = yo`<input id="removegisttoken" onclick=${() => { gistAccessToken.value = ''; self._deps.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">`
+    self._view.gistToken = yo`<div class="${css.checkboxText}">${gistAccessToken}${copyToClipboard(() => self._deps.config.get('settings/gist-access-token'))}${gistAddToken}${gistRemoveToken}</div>`
     //
     self._view.optionVM = yo`<input onchange=${onchangeOption} id="alwaysUseVM" type="checkbox">`
-    if (self._opts.config.get('settings/always-use-vm')) self._view.optionVM.setAttribute('checked', '')
+    if (self._deps.config.get('settings/always-use-vm')) self._view.optionVM.setAttribute('checked', '')
     self._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox">`
-    if (self._opts.config.get('settings/personal-mode')) self._view.personal.setAttribute('checked', '')
+    if (self._deps.config.get('settings/personal-mode')) self._view.personal.setAttribute('checked', '')
     self._view.optimize = yo`<input onchange=${onchangeOptimize} id="optimize" type="checkbox">`
     if (self.data.optimize) self._view.optimize.setAttribute('checked', '')
     var warnText = `Transaction sent over Web3 will use the web3.personal API - be sure the endpoint is opened before enabling it.
@@ -187,7 +199,7 @@ module.exports = class SettingsTab {
         ${self._view.config.localremixd}
       </div>`
     function onchangeOption (event) {
-      self._opts.config.set('settings/always-use-vm', !self._opts.config.get('settings/always-use-vm'))
+      self._deps.config.set('settings/always-use-vm', !self._deps.config.get('settings/always-use-vm'))
     }
     function onloadPlugin (event) {
       try {
@@ -209,14 +221,15 @@ module.exports = class SettingsTab {
     function onchangeOptimize (event) {
       self.data.optimize = !!self._view.optimize.checked
       self._components.queryParams.update({ optimize: self.data.optimize })
-      self._api.setOptimize(self.data.optimize, true)
+      self._deps.compiler.setOptimize(self.data.optimize)
+      self._deps.app.runCompiler()
     }
     function onchangeLoadVersion (event) {
       self.data.selectedVersion = self._view.versionSelector.value
       self._updateVersionSelector()
     }
     function onchangePersonal (event) {
-      self._opts.config.set('settings/personal-mode', !self._opts.config.get('settings/personal-mode'))
+      self._deps.config.set('settings/personal-mode', !self._deps.config.get('settings/personal-mode'))
     }
     return self._view.el
   }
@@ -250,10 +263,10 @@ module.exports = class SettingsTab {
       // Workers cannot load js on "file:"-URLs and we get a
       // "Uncaught RangeError: Maximum call stack size exceeded" error on Chromium,
       // resort to non-worker version in that case.
-      self._opts.compiler.loadVersion(true, url)
+      self._deps.compiler.loadVersion(true, url)
       self.setVersionText('(loading using worker)')
     } else {
-      self._opts.compiler.loadVersion(false, url)
+      self._deps.compiler.loadVersion(false, url)
       self.setVersionText('(loading)')
     }
   }

src/app/tabs/support-tab.js

@@ -2,21 +2,22 @@ const yo = require('yo-yo')
 const csjs = require('csjs-inject')
 const remixLib = require('remix-lib')
 
+var globalRegistry = require('../../global/registry')
 const styles = require('../ui/styles-guide/theme-chooser').chooser()
 
 const EventManager = remixLib.EventManager
 
 module.exports = class SupportTab {
-  constructor (api = {}, events = {}, opts = {}) {
+  constructor (localRegistry) {
     const self = this
     self.event = new EventManager()
-    self._api = api
-    self._events = events
-    self._opts = opts
     self._view = { el: null, gitterIframe: '' }
     self.data = { gitterIsLoaded: false }
     self._components = {}
-    self._events.app.register('tabChanged', (tabName) => {
+    self._components.registry = localRegistry || globalRegistry
+
+    var appEvent = self._components.registry.get('app').event
+    appEvent.register('tabChanged', (tabName) => {
       if (tabName !== 'Support' || self.data.gitterIsLoaded) return
       const iframe = yo`<iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>`
       self._view.gitterIframe.parentNode.replaceChild(iframe, self._view.gitterIframe)

src/app/tabs/tabbed-menu.js

@@ -2,20 +2,23 @@ var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
 
+var globalRegistry = require('../../global/registry')
 var helper = require('../../lib/helper')
 var styles = require('../ui/styles-guide/theme-chooser').chooser()
 
 var EventManager = remixLib.EventManager
 
 module.exports = class TabbedMenu {
-  constructor (api = {}, events = {}, opts = {}) {
+  constructor (localRegistry) {
     const self = this
     self.event = new EventManager()
-    self._opts = opts
-    self._api = api
-    self._events = events
+    self._components = {}
+    self._components.registry = localRegistry || globalRegistry
+    self._deps = {
+      app: self._components.registry.get('app').api
+    }
     self._view = { el: null, viewport: null, tabs: {}, contents: {} }
-    events.app.register('debuggingRequested', () => {
+    self._deps.app.event.register('debuggingRequested', () => {
       self.selectTabByTitle('Debugger')
     })
   }
@@ -63,7 +66,7 @@ module.exports = class TabbedMenu {
     var title = el.getAttribute('title')
     self._view.contents[el.getAttribute('title')].style.display = 'block'
     el.classList.add(css.active)
-    self._events.app.trigger('tabChanged', [title])
+    self._deps.app.event.trigger('tabChanged', [title])
   }
 }
 

src/app/tabs/test-tab.js

 var yo = require('yo-yo')
 var async = require('async')
+var globalRegistry = require('../../global/registry')
 var css = require('./styles/test-tab-styles')
 var remixTests = require('remix-tests')
 
 module.exports = class TestTab {
-  constructor (api = {}, events = {}, opts = {}) {
+  constructor (localRegistry) {
     const self = this
-    self._opts = opts
-    self._api = api
-    self._events = events
     self._view = { el: null }
     self._components = {}
+    self._components.registry = localRegistry || globalRegistry
+    // dependencies
+    self._deps = {
+      fileManager: self._components.registry.get('filemanager').api
+    }
     self.data = {}
 
     self._view.el = self.render()
-
-    events.app.register('tabChanged', tabName => {
+    var appEvent = self._components.registry.get('app').event
+    appEvent.register('tabChanged', tabName => {
       if (tabName !== 'test') return
       yo.update(self._view.el, self.render())
       self._view.el.style.display = 'block'
@@ -24,8 +27,6 @@ module.exports = class TestTab {
     return { render () { return self._view.el } }
   }
   render () {
-    const self = this
-    const api = self._api
     var container = yo`<div class="tests" id="tests"></div>`
 
     function append (container, txt) {
@@ -67,7 +68,7 @@ module.exports = class TestTab {
     }
 
     function runTest (testFilePath, callback) {
-      var provider = api.fileProviderOf(testFilePath)
+      var provider = this._deps.fileManager.fileProviderOf(testFilePath)
       provider.get(testFilePath, (error, content) => {
         if (!error) {
           var runningTest = {}
@@ -75,14 +76,14 @@ module.exports = class TestTab {
           remixTests.runTestSources(runningTest, testCallback, resultsCallback, (error, result) => {
             updateFinalResult(error, result)
             callback(error)
-          }, api.importFileCb)
+          }, this._deps.fileManager.importFileCb)
         }
       })
     }
 
     let runTests = function () {
       container.innerHTML = ''
-      var path = api.currentPath()
+      var path = this._deps.fileManager.currentPath()
       var tests = []
       api.filesFromPath(path, (error, files) => {
         if (!error) {

src/universal-dapp.js

@@ -148,6 +148,17 @@ UniversalDApp.prototype.getBalance = function (address, cb) {
   }
 }
 
+UniversalDApp.prototype.getBalanceInEther = function (address, callback) {
+  var self = this
+  self.getBalance(address, (error, balance) => {
+    if (error) {
+      callback(error)
+    } else {
+      callback(null, executionContext.web3().fromWei(balance, 'ether'))
+    }
+  })
+}
+
 UniversalDApp.prototype.pendingTransactions = function () {
   return this.txRunner.pendingTxs
 }