Merge pull request #1244 from ethereum/refactor_app.js

Refactor app.js

src/app.js

@@ -698,28 +698,12 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   // ---------------- Righthand-panel --------------------
 
   var rhpAPI = {
-    config: config,
     setEditorSize (delta) {
       $('#righthand-panel').css('width', delta)
       self._view.centerpanel.style.right = delta + 'px'
       document.querySelector(`.${css.dragbar2}`).style.right = delta + 'px'
       onResize()
     },
-    getAccounts: (cb) => {
-      udapp.getAccounts(cb)
-    },
-    getSource: (fileName) => {
-      return compiler.getSource(fileName)
-    },
-    editorContent: () => {
-      return editor.get(editor.current())
-    },
-    currentFile: () => {
-      return config.get('currentFile')
-    },
-    visitContracts: (cb) => {
-      compiler.visitContracts(cb)
-    },
     switchFile: function (path) {
       fileManager.switchFile(path)
     },
@@ -775,7 +759,9 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     udapp: udapp,
     udappUI: udappUI,
     compiler: compiler,
-    renderer: renderer
+    renderer: renderer,
+    editor: editor,
+    config: config
   }
 
   self._components.righthandpanel = new RighthandPanel(rhpAPI, rhpEvents, rhpOpts)

src/app/editor/editor.js

@@ -170,17 +170,25 @@ function Editor (opts = {}) {
   }
 
   /**
-    * returns the content of the specified session @arg path
+    * returns the content of the current session
-    * if @arg path is not provided, the content of the current editing session is returned
+    *
+    * @return {String} content of the file referenced by @arg path
+    */
+  this.currentContent = function () {
+    return this.get(this.current())
+  }
+
+  /**
+    * returns the content of the session targeted by @arg path
+    * if @arg path is null, the content of the current session is returned
     *
-    * @param {String} path    - path of th file in edition
     * @return {String} content of the file referenced by @arg path
     */
   this.get = function (path) {
     if (!path || currentSession === path) {
       return editor.getValue()
     } else if (sessions[path]) {
-      sessions[path].getValue()
+      return sessions[path].getValue()
     }
   }
 
@@ -188,8 +196,7 @@ function Editor (opts = {}) {
     * returns the path of the currently editing file
     * returns `undefined` if no session is being editer
     *
-    * @param {String} path    - path of th file in edition
+    * @return {String} path of the current session
-    * @return {String} content of the file referenced by @arg path
     */
   this.current = function () {
     if (editor.getSession() === emptySession) {

src/app/tabs/compile-tab.js

@@ -36,7 +36,7 @@ function compileTab (appAPI = {}, appEvents = {}, opts = {}) {
 
   var compileTimeout = null
   function scheduleCompilation () {
-    if (!appAPI.config.get('autoCompile')) {
+    if (!opts.config.get('autoCompile')) {
       return
     }
 
@@ -59,16 +59,16 @@ function compileTab (appAPI = {}, appEvents = {}, opts = {}) {
   // ----------------- autoCompile -----------------
   var autoCompileInput = compileContainer.querySelector('#autoCompile')
   var autoCompile = false
-  if (appAPI.config.exists('autoCompile')) {
+  if (opts.config.exists('autoCompile')) {
-    autoCompile = appAPI.config.get('autoCompile')
+    autoCompile = opts.config.get('autoCompile')
   }
-  appAPI.config.set('autoCompile', autoCompile)
+  opts.config.set('autoCompile', autoCompile)
   if (autoCompile) {
     autoCompileInput.setAttribute('checked', autoCompile)
   }
 
   autoCompileInput.addEventListener('change', function () {
-    appAPI.config.set('autoCompile', autoCompileInput.checked)
+    opts.config.set('autoCompile', autoCompileInput.checked)
   })
 
   // REGISTER EVENTS
@@ -156,7 +156,7 @@ function compileTab (appAPI = {}, appEvents = {}, opts = {}) {
       }
       if (!error) {
         if (data.contracts) {
-          appAPI.visitContracts((contract) => {
+          opts.compiler.visitContracts((contract) => {
             opts.renderer.error(contract.name, $(errorContainer), {type: 'success'})
           })
         }
@@ -190,8 +190,8 @@ function compileTab (appAPI = {}, appEvents = {}, opts = {}) {
       contractNames.innerHTML = ''
       if (success) {
         contractNames.removeAttribute('disabled')
-        appAPI.visitContracts((contract) => {
+        opts.compiler.visitContracts((contract) => {
-          contractsDetails[contract.name] = parseContracts(contract.name, contract.object, appAPI.getSource(contract.file))
+          contractsDetails[contract.name] = parseContracts(contract.name, contract.object, opts.compiler.getSource(contract.file))
           var contractName = yo`
             <option>
               ${contract.name}

src/app/tabs/run-tab.js

@@ -187,7 +187,7 @@ function updateAccountBalances (container, appAPI) {
            RECORDER
 ------------------------------------------------ */
 function makeRecorder (appAPI, appEvents, opts, self) {
-  var recorder = new Recorder(opts.compiler, {
+  var recorder = new Recorder(opts.compiler, opts.udapp, {
     events: {
       udapp: appEvents.udapp,
       executioncontext: executionContext.event,
@@ -240,7 +240,7 @@ function makeRecorder (appAPI, appEvents, opts, self) {
     update account address in scenario.json
     popup if scenario.json not open - "Open a file with transactions you want to replay and click play again"
     */
-    var currentFile = appAPI.config.get('currentFile')
+    var currentFile = opts.config.get('currentFile')
     appAPI.fileProviderOf(currentFile).get(currentFile, (error, json) => {
       if (error) {
         modalDialogCustom.alert('Invalid Scenario File ' + error)
@@ -319,7 +319,7 @@ function contractDropdown (events, appAPI, appEvents, opts, self) {
         ${createPanel}
         <div class="${css.button}">
           ${atAddressButtonInput}
-          <div class="${css.atAddress}" onclick=${function () { loadFromAddress(appAPI) }}>Access</div>
+          <div class="${css.atAddress}" onclick=${function () { loadFromAddress(opts.editor, opts.config) }}>At Address</div>
         </div>
       </div>
     </div>
@@ -384,7 +384,7 @@ function contractDropdown (events, appAPI, appEvents, opts, self) {
   }
 
   // ACCESS DEPLOYED INSTANCE
-  function loadFromAddress (appAPI) {
+  function loadFromAddress (editor, config) {
     var noInstancesText = self._view.noInstancesText
     if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
     var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
@@ -395,11 +395,11 @@ function contractDropdown (events, appAPI, appEvents, opts, self) {
     if (/[a-f]/.test(address) && /[A-F]/.test(address) && !ethJSUtil.isValidChecksumAddress(address)) {
       return modalDialogCustom.alert('Invalid checksum address.')
     }
-    if (/.(.abi)$/.exec(appAPI.currentFile())) {
+    if (/.(.abi)$/.exec(config.get('currentFile'))) {
       modalDialogCustom.confirm(null, 'Do you really want to interact with ' + address + ' using the current ABI definition ?', () => {
         var abi
         try {
-          abi = JSON.parse(appAPI.editorContent())
+          abi = JSON.parse(editor.currentContent())
         } catch (e) {
           return modalDialogCustom.alert('Failed to parse the current file as JSON ABI.')
         }
@@ -417,7 +417,7 @@ function contractDropdown (events, appAPI, appEvents, opts, self) {
     contractNames.innerHTML = ''
     if (success) {
       selectContractNames.removeAttribute('disabled')
-      appAPI.visitContracts((contract) => {
+      opts.compiler.visitContracts((contract) => {
         contractNames.appendChild(yo`<option>${contract.name}</option>`)
       })
     } else {

src/app/tabs/settings-tab.js

@@ -56,16 +56,16 @@ module.exports = class SettingsTab {
 
     // Gist settings
     var gistAccessToken = yo`<input id="gistaccesstoken" type="password">`
-    var token = self._api.config.get('settings/gist-access-token')
+    var token = self._opts.config.get('settings/gist-access-token')
     if (token) gistAccessToken.value = token
-    var gistAddToken = yo`<input class="${css.savegisttoken}" id="savegisttoken" onclick=${() => { self._api.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`
+    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._api.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" 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._api.config.get('settings/gist-access-token'))}${gistAddToken}${gistRemoveToken}</div>`
+    self._view.gistToken = yo`<div class="${css.checkboxText}">${gistAccessToken}${copyToClipboard(() => self._opts.config.get('settings/gist-access-token'))}${gistAddToken}${gistRemoveToken}</div>`
     //
     self._view.optionVM = yo`<input onchange=${onchangeOption} id="alwaysUseVM" type="checkbox">`
-    if (self._api.config.get('settings/always-use-vm')) self._view.optionVM.setAttribute('checked', '')
+    if (self._opts.config.get('settings/always-use-vm')) self._view.optionVM.setAttribute('checked', '')
     self._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox">`
-    if (self._api.config.get('settings/personal-mode')) self._view.personal.setAttribute('checked', '')
+    if (self._opts.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 +187,7 @@ module.exports = class SettingsTab {
         ${self._view.config.localremixd}
       </div>`
     function onchangeOption (event) {
-      self._api.config.set('settings/always-use-vm', !self._api.config.get('settings/always-use-vm'))
+      self._opts.config.set('settings/always-use-vm', !self._opts.config.get('settings/always-use-vm'))
     }
     function onloadPlugin (event) {
       try {
@@ -216,7 +216,7 @@ module.exports = class SettingsTab {
       self._updateVersionSelector()
     }
     function onchangePersonal (event) {
-      self._api.config.set('settings/personal-mode', !self._api.config.get('settings/personal-mode'))
+      self._opts.config.set('settings/personal-mode', !self._opts.config.get('settings/personal-mode'))
     }
     return self._view.el
   }

src/recorder.js

@@ -13,7 +13,7 @@ var modal = require('./app/ui/modal-dialog-custom')
   *
   */
 class Recorder {
-  constructor (compiler, opts = {}) {
+  constructor (compiler, udapp, opts = {}) {
     var self = this
     self._api = opts.api
     self.event = new EventManager()
@@ -61,7 +61,7 @@ class Recorder {
         record.name = payLoad.funAbi.name
         record.type = payLoad.funAbi.type
 
-        self._api.getAccounts((error, accounts) => {
+        udapp.getAccounts((error, accounts) => {
           if (error) return console.log(error)
           record.from = `account{${accounts.indexOf(from)}}`
           self.data._usedAccounts[record.from] = from