remix-project/src/app.js

'use strict'

var async = require('async')
var $ = require('jquery')
var csjs = require('csjs-inject')
var yo = require('yo-yo')
var remix = require('ethereum-remix')
var EventManager = remix.lib.EventManager

var UniversalDApp = require('./universal-dapp.js')
var Remixd = require('./lib/remixd')
var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')

var QueryParams = require('./lib/query-params')
var GistHandler = require('./lib/gist-handler')
var Storage = require('./storage')
var Browserfiles = require('./app/files/browser-files')
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('./app/compiler/compiler')
var ExecutionContext = require('./execution-context')
var Debugger = require('./app/debugger/debugger')
var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView')
var FilePanel = require('./app/panels/file-panel')
var EditorPanel = require('./app/panels/editor-panel')
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 EventsDecoder = require('./app/execution/eventsDecoder')
var Web3VMProvider = remix.web3.web3VMProvider
var handleImports = require('./app/compiler/compiler-imports')

var styleGuide = require('./style-guide')
var styles = styleGuide()

var css = csjs`
  html { box-sizing: border-box; }
  *, *:before, *:after { box-sizing: inherit; }
  body                 {
    margin             : 0;
    padding            : 0;
    font-size          : 12px;
    color              : ${styles.colors.black};
    font-weight        : normal;
  }
  .browsersolidity     {
    position           : relative;
    width              : 100vw;
    height             : 100vh;
    overflow           : hidden;
  }
  .centerpanel         {
    display            : flex;
    flex-direction     : column;
    position           : absolute;
    top                : 0;
    bottom             : 0;
    overflow           : hidden;
  }
  .leftpanel           {
    display            : flex;
    flex-direction     : column;
    position           : absolute;
    top                : 0;
    bottom             : 0;
    left               : 0;
    overflow           : hidden;
  }
  .rightpanel          {
    display            : flex;
    flex-direction     : column;
    position           : absolute;
    top                : 0;
    right              : 0;
    bottom             : 0;
    overflow           : hidden;
  }
`

class App {
  constructor (opts = {}) {
    var self = this
    self._api = {}
    var fileStorage = new Storage('sol:')
    self._api.config = new Config(fileStorage)
    self._api.filesProviders = {}
    self._api.filesProviders['browser'] = new Browserfiles(fileStorage)
    self._api.filesProviders['localhost'] = new SharedFolder(new Remixd())
    self._view = {}
    self._components = {}
    self.data = {
      _layout: {
        right: {
          offset: self._api.config.get('right-offset') || 400,
          show: true
        }, // @TODO: adapt sizes proportionally to browser window size
        left: {
          offset: self._api.config.get('left-offset') || 200,
          show: true
        }
      }
    }
  }
  _adjustLayout (direction, delta) {
    var self = this
    var layout = self.data._layout[direction]
    if (layout) {
      if (delta === undefined) {
        layout.show = !layout.show
        if (layout.show) delta = layout.offset
        else delta = 0
      } else {
        self._api.config.set(`${direction}-offset`, delta)
        layout.offset = delta
      }
    }
    if (direction === 'left') {
      self._view.leftpanel.style.width = delta + 'px'
      self._view.centerpanel.style.left = delta + 'px'
    }
    if (direction === 'right') {
      self._view.rightpanel.style.width = delta + 'px'
      self._view.centerpanel.style.right = delta + 'px'
    }
  }
  init () {
    var self = this
    run.apply(self)
  }
  render () {
    var self = this
    if (self._view.el) return self._view.el
    self._view.leftpanel = yo`
      <div id="filepanel" class=${css.leftpanel}>
        ${''}
      </div>
    `
    self._view.centerpanel = yo`
      <div id="editor-container" class=${css.centerpanel}>
        ${''}
      </div>
    `
    self._view.rightpanel = yo`
      <div class=${css.rightpanel}>
        ${''}
      </div>
    `
    self._view.el = yo`
      <div class=${css.browsersolidity}>
        ${self._view.leftpanel}
        ${self._view.centerpanel}
        ${self._view.rightpanel}
      </div>
    `
    // INIT
    self._adjustLayout('left', self.data._layout.left.offset)
    self._adjustLayout('right', self.data._layout.right.offset)
    return self._view.el
  }
}

module.exports = App

function run () {
  var self = this
  // ------------------------------------------------------------
  var executionContext = new ExecutionContext()

  // ----------------- editor ----------------------------
  this._components.editor = new Editor({}) // @TODO: put into editorpanel
  // ----------------- editor panel ----------------------
  this._components.editorpanel = new EditorPanel({
    api: {
      editor: self._components.editor,
      config: self._api.config,
      web3: () => {
        return executionContext.web3()
      },
      context: () => {
        return executionContext.getProvider()
      }}
  })
  this._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))

  this._view.centerpanel.appendChild(this._components.editorpanel.render())

  var queryParams = new QueryParams()
  var gistHandler = new GistHandler()

  var editor = self._components.editor
  // The event listener needs to be registered as early as possible, because the
  // parent will send the message upon the "load" event.
  var filesToLoad = null
  var loadFilesCallback = function (files) { filesToLoad = files } // will be replaced later

  window.addEventListener('message', function (ev) {
    if (typeof ev.data === typeof [] && ev.data[0] === 'loadFiles') {
      loadFilesCallback(ev.data[1])
    }
  }, false)

  this.event = new EventManager()

  var config = self._api.config
  var filesProviders = self._api.filesProviders

  var tabbedFiles = {} // list of files displayed in the tabs bar

  // return all the files, except the temporary/readonly ones.. package only files from the browser storage.
  function packageFiles (callback) {
    var ret = {}
    var files = filesProviders['browser']
    var filtered = Object.keys(files.list()).filter(function (path) { if (!files.isReadOnly(path)) { return path } })
    async.eachSeries(filtered, function (path, cb) {
      ret[path.replace(files.type + '/', '')] = { content: files.get(path) }
      cb()
    }, () => {
      callback(null, ret)
    })
  }

  function createNonClashingName (path) {
    var counter = ''
    if (path.endsWith('.sol')) path = path.substring(0, path.lastIndexOf('.sol'))
    while (filesProviders['browser'].exists(path + counter + '.sol')) {
      counter = (counter | 0) + 1
    }
    return path + counter + '.sol'
  }

  // Add files received from remote instance (i.e. another browser-solidity)
  function loadFiles (filesSet) {
    for (var f in filesSet) {
      filesProviders['browser'].set(createNonClashingName(f), filesSet[f].content)
    }
    switchToNextFile()
  }

  // Replace early callback with instant response
  loadFilesCallback = function (files) {
    loadFiles(files)
  }

  // Run if we did receive an event from remote instance while starting up
  if (filesToLoad !== null) {
    loadFiles(filesToLoad)
  }

  // ------------------ gist load ----------------

  var loadingFromGist = gistHandler.handleLoad(queryParams.get(), function (gistId) {
    $.ajax({
      url: 'https://api.github.com/gists/' + gistId,
      jsonp: 'callback',
      dataType: 'jsonp',
      success: function (response) {
        if (response.data) {
          if (!response.data.files) {
            modalDialogCustom.alert('Gist load error: ' + response.data.message)
            return
          }
          loadFiles(response.data.files)
        }
      }
    })
  })

  // insert ballot contract if there are no files available
  if (!loadingFromGist && Object.keys(filesProviders['browser'].list()).length === 0) {
    if (!filesProviders['browser'].set(examples.ballot.name, examples.ballot.content)) {
      modalDialogCustom.alert('Failed to store example contract in browser. Remix will not work properly. Please ensure Remix has access to LocalStorage. Safari in Private mode is known not to work.')
    }
  }

  window.syncStorage = chromeCloudStorageSync
  chromeCloudStorageSync()

  // ---------------- FilePanel --------------------
  var FilePanelAPI = {
    createName: createNonClashingName,
    switchToFile: switchToFile,
    event: this.event,
    currentFile: function () {
      return config.get('currentFile')
    },
    currentContent: function () {
      return editor.get(config.get('currentFile'))
    },
    setText: function (text) {
      editor.setText(text)
    },
    packageFiles: (cb) => {
      packageFiles(cb)
    }
  }
  var filePanel = new FilePanel(FilePanelAPI, filesProviders)

  // TODO this should happen inside file-panel.js
  var filepanelContainer = document.querySelector('#filepanel')
  filepanelContainer.appendChild(filePanel.render())

  filePanel.event.register('resize', delta => self._adjustLayout('left', delta))

  function fileRenamedEvent (oldName, newName, isFolder) {
    // TODO please never use 'window' when it is possible to use a variable
    // that references the DOM node
    [...window.files.querySelectorAll('.file .name')].forEach(function (span) {
      if (span.innerText === oldName) span.innerText = newName
    })
    if (!isFolder) {
      config.set('currentFile', '')
      editor.discard(oldName)
      if (tabbedFiles[oldName]) {
        delete tabbedFiles[oldName]
        tabbedFiles[newName] = newName
      }
      switchToFile(newName)
    } else {
      var newFocus
      for (var k in tabbedFiles) {
        if (k.indexOf(oldName + '/') === 0) {
          var newAbsolutePath = k.replace(oldName, newName)
          tabbedFiles[newAbsolutePath] = newAbsolutePath
          delete tabbedFiles[k]
          if (config.get('currentFile') === k) {
            newFocus = newAbsolutePath
          }
        }
      }
      if (newFocus) {
        switchToFile(newFocus)
      }
    }
    refreshTabs()
  }

  filesProviders['browser'].event.register('fileRenamed', fileRenamedEvent)
  filesProviders['localhost'].event.register('fileRenamed', fileRenamedEvent)

  function fileRemovedEvent (path) {
    if (path === config.get('currentFile')) {
      config.set('currentFile', '')
      switchToNextFile()
    }
    editor.discard(path)
    delete tabbedFiles[path]
    refreshTabs()
  }
  filesProviders['browser'].event.register('fileRemoved', fileRemovedEvent)
  filesProviders['localhost'].event.register('fileRemoved', fileRemovedEvent)

  // --------------------Files tabs-----------------------------
  var $filesEl = $('#files')

  // Switch tab
  $filesEl.on('click', '.file:not(.active)', function (ev) {
    ev.preventDefault()
    switchToFile($(this).find('.name').text())
    return false
  })

  // Remove current tab
  $filesEl.on('click', '.file .remove', function (ev) {
    ev.preventDefault()
    var name = $(this).parent().find('.name').text()
    delete tabbedFiles[name]
    refreshTabs()
    if (Object.keys(tabbedFiles).length) {
      switchToFile(Object.keys(tabbedFiles)[0])
    } else {
      editor.displayEmptyReadOnlySession()
    }
    return false
  })

  function switchToFile (file) {
    editorSyncFile()
    config.set('currentFile', file)
    refreshTabs(file)
    fileProviderOf(file).get(file, (error, content) => {
      if (error) {
        console.log(error)
      } else {
        if (fileProviderOf(file).isReadOnly(file)) {
          editor.openReadOnly(file, content)
        } else {
          editor.open(file, content)
        }
        self.event.trigger('currentFileChanged', [file, fileProviderOf(file)])
      }
    })
  }

  function switchToNextFile () {
    var fileList = Object.keys(filesProviders['browser'].list())
    if (fileList.length) {
      switchToFile(fileList[0])
    }
  }

  var previouslyOpenedFile = config.get('currentFile')
  if (previouslyOpenedFile) {
    filesProviders['browser'].get(previouslyOpenedFile, (error, content) => {
      if (!error && content) {
        switchToFile(previouslyOpenedFile)
      } else {
        switchToNextFile()
      }
    })
  } else {
    switchToNextFile()
  }

  function fileProviderOf (file) {
    var provider = file.match(/[^/]*/)
    if (provider !== null) {
      return filesProviders[provider[0]]
    }
    return null
  }

  // Display files that have already been selected
  function refreshTabs (newfile) {
    if (newfile) {
      tabbedFiles[newfile] = newfile
    }

    var $filesEl = $('#files')
    $filesEl.find('.file').remove()

    for (var file in tabbedFiles) {
      $filesEl.append($('<li class="file"><span class="name">' + file + '</span><span class="remove"><i class="fa fa-close"></i></span></li>'))
    }
    var currentFileOpen = !!config.get('currentFile')

    if (currentFileOpen) {
      var active = $('#files .file').filter(function () { return $(this).find('.name').text() === config.get('currentFile') })
      active.addClass('active')
    }
    $('#input').toggle(currentFileOpen)
    $('#output').toggle(currentFileOpen)
    self._components.editorpanel.refresh()
  }

  var compiler = new Compiler((url, cb) => {
    var provider = fileProviderOf(url)
    if (provider && provider.exists(url)) {
      cb(null, provider.get(url, cb))
    }
    handleImports.import(url, (error, content) => {
      if (!error) {
        // FIXME: at some point we should invalidate the browser cache
        filesProviders['browser'].addReadOnly(url, content)
        cb(null, content)
      } else {
        modalDialogCustom.alert('Unable to import: url')
      }
    })
  })
  var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)

  // ----------------- Renderer -----------------
  var rendererAPI = {
    error: (file, error) => {
      if (file === config.get('currentFile')) {
        editor.addAnnotation(error)
      }
    },
    errorClick: (errFile, errLine, errCol) => {
      if (errFile !== config.get('currentFile') && (filesProviders['browser'].exists(errFile) || filesProviders['localhost'].exists(errFile))) {
        switchToFile(errFile)
      }
      editor.gotoLine(errLine, errCol)
    }
  }
  var renderer = new Renderer(rendererAPI)

  // ----------------- UniversalDApp -----------------
  var transactionContextAPI = {
    getAddress: (cb) => {
      cb(null, $('#txorigin').val())
    },
    getValue: (cb) => {
      try {
        var comp = $('#value').val().split(' ')
        cb(null, executionContext.web3().toWei(comp[0], comp.slice(1).join(' ')))
      } catch (e) {
        cb(e)
      }
    },
    getGasLimit: (cb) => {
      cb(null, $('#gasLimit').val())
    }
  }

  var udapp = new UniversalDApp(executionContext, {
    removable: false,
    removable_instances: true
  })
  udapp.reset({}, transactionContextAPI)
  udapp.event.register('debugRequested', this, function (txResult) {
    startdebugging(txResult.transactionHash)
  })

  // ---------------- 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()
    },
    executionContextChange: (context) => {
      return executionContext.executionContextChange(context)
    },
    executionContextProvider: () => {
      return executionContext.getProvider()
    },
    getContracts: () => {
      if (compiler.lastCompilationResult && compiler.lastCompilationResult.data) {
        return compiler.lastCompilationResult.data.contracts
      }
      return null
    },
    udapp: () => {
      return udapp
    },
    executionContext: () => {
      return executionContext
    },
    fileProviderOf: (path) => {
      return fileProviderOf(path)
    },
    getBalance: (address, callback) => {
      udapp.getBalance(address, (error, balance) => {
        if (error) {
          callback(error)
        } else {
          callback(null, executionContext.web3().fromWei(balance, 'ether'))
        }
      })
    },
    compilationMessage: (message, container, options) => {
      renderer.error(message, container, options)
    },
    currentCompiledSourceCode: () => {
      if (compiler.lastCompilationResult.source) {
        return compiler.lastCompilationResult.source.sources[compiler.lastCompilationResult.source.target]
      }
      return ''
    },
    resetDapp: (contracts) => {
      udapp.reset(contracts, transactionContextAPI)
    },
    setOptimize: (optimize, runCompilation) => {
      compiler.setOptimize(optimize)
      if (runCompilation) runCompiler()
    },
    loadCompiler: (usingWorker, url) => {
      compiler.loadVersion(usingWorker, url)
    },
    runCompiler: () => {
      runCompiler()
    }
  }
  var rhpEvents = {
    compiler: compiler.event,
    app: self.event,
    udapp: udapp.event,
    editor: editor.event
  }
  self._components.righthandpanel = new RighthandPanel(rhpAPI, rhpEvents, {})
  self._view.rightpanel.appendChild(self._components.righthandpanel.render())
  self._components.righthandpanel.init()
  self._components.righthandpanel.event.register('resize', delta => self._adjustLayout('right', delta))

  // ----------------- editor resize ---------------

  function onResize () {
    editor.resize(document.querySelector('#editorWrap').checked)
  }
  onResize()

  self._view.el.addEventListener('change', onResize)
  document.querySelector('#editorWrap').addEventListener('change', onResize)

  // ----------------- Debugger -----------------
  var debugAPI = {
    statementMarker: null,
    fullLineMarker: null,
    source: null,
    currentSourceLocation: (lineColumnPos, location) => {
      if (this.statementMarker) editor.removeMarker(this.statementMarker, this.source)
      if (this.fullLineMarker) editor.removeMarker(this.fullLineMarker, this.source)
      this.statementMarker = null
      this.fullLineMarker = null
      this.source = null
      if (lineColumnPos) {
        this.source = compiler.lastCompilationResult.data.sourceList[location.file] // auto switch to that tab
        if (config.get('currentFile') !== this.source) {
          switchToFile(this.source)
        }
        this.statementMarker = editor.addMarker(lineColumnPos, this.source, 'highlightcode')
        editor.scrollToLine(lineColumnPos.start.line, true, true, function () {})

        if (lineColumnPos.start.line === lineColumnPos.end.line) {
          this.fullLineMarker = editor.addMarker({
            start: {
              line: lineColumnPos.start.line,
              column: 0
            },
            end: {
              line: lineColumnPos.start.line + 1,
              column: 0
            }
          }, this.source, 'highlightcode_fullLine')
        }
      }
    },
    lastCompilationResult: () => {
      return compiler.lastCompilationResult
    },
    offsetToLineColumn: (location, file) => {
      return offsetToLineColumnConverter.offsetToLineColumn(location, file, compiler.lastCompilationResult)
    }
  }
  var transactionDebugger = new Debugger('#debugger', debugAPI, executionContext.event, editor.event)
  transactionDebugger.addProvider('vm', executionContext.vm())
  transactionDebugger.addProvider('injected', executionContext.web3())
  transactionDebugger.addProvider('web3', executionContext.web3())
  transactionDebugger.switchProvider(executionContext.getProvider())

  // ----------------- StaticAnalysis -----------------
  var staticAnalysisAPI = {
    renderWarning: (label, warningContainer, type) => {
      return renderer.error(label, warningContainer, type)
    },
    offsetToLineColumn: (location, file) => {
      return offsetToLineColumnConverter.offsetToLineColumn(location, file, compiler.lastCompilationResult)
    }
  }
  var staticanalysis = new StaticAnalysis(staticAnalysisAPI, compiler.event)
  var node = document.getElementById('staticanalysisView')
  node.insertBefore(staticanalysis.render(), node.childNodes[0])

  // ----------------- Tx listener -----------------
  // not used right now

  // TODO the following should be put in execution context
  var web3VM = new Web3VMProvider()
  web3VM.setVM(executionContext.vm())

  var currentWeb3 = function () {
    return executionContext.isVM() ? web3VM : executionContext.web3()
  }

  var transactionReceiptResolver = {
    _transactionReceipts: {},
    resolve: function (tx, cb) {
      if (this._transactionReceipts[tx.hash]) {
        return cb(null, this._transactionReceipts[tx.hash])
      }
      currentWeb3().eth.getTransactionReceipt(tx.hash, (error, receipt) => {
        if (!error) {
          this._transactionReceipts[tx.hash] = receipt
          cb(null, receipt)
        } else {
          cb(error)
        }
      })
    }
  }

  var compiledContracts = function () {
    if (compiler.lastCompilationResult && compiler.lastCompilationResult.data) {
      return compiler.lastCompilationResult.data.contracts
    }
    return null
  }

  var txlistener = new Txlistener({
    api: {
      web3: function () { return currentWeb3() },
      isVM: function () { return executionContext.isVM() },
      contracts: compiledContracts,
      context: function () {
        return executionContext.getProvider()
      },
      resolveReceipt: function (tx, cb) {
        transactionReceiptResolver.resolve(tx, cb)
      }
    },
    event: {
      executionContext: executionContext.event,
      udapp: udapp.event
    }})

  var eventsDecoder = new EventsDecoder({
    api: {
      resolveReceipt: function (tx, cb) {
        transactionReceiptResolver.resolve(tx, cb)
      }
    }
  })

  txlistener.startListening()

  var txLogger = new TxLogger({
    api: {
      editorpanel: self._components.editorpanel,
      resolvedTransaction: function (hash) {
        return txlistener.resolvedTransaction(hash)
      },
      parseLogs: function (tx, contractName, contracts, cb) {
        eventsDecoder.parseLogs(tx, contractName, contracts, cb)
      },
      compiledContracts: function () {
        return compiledContracts()
      },
      context: function () {
        return executionContext.getProvider()
      }
    },
    events: {
      txListener: txlistener.event
    }
  })

  txLogger.event.register('debugRequested', (hash) => {
    startdebugging(hash)
  })

  function runCompiler () {
    if (transactionDebugger.isActive) return

    editorSyncFile()
    var currentFile = config.get('currentFile')
    if (currentFile) {
      var target = currentFile
      var sources = {}
      var provider = fileProviderOf(currentFile)
      if (provider) {
        provider.get(target, (error, content) => {
          if (error) {
            console.log(error)
          } else {
            sources[target] = content
            compiler.compile(sources, target)
          }
        })
      } else {
        console.log('cannot compile ' + currentFile + '. Does not belong to any explorer')
      }
    }
  }

  function editorSyncFile () {
    var currentFile = config.get('currentFile')
    if (currentFile && editor.current()) {
      var input = editor.get(currentFile)
      var provider = fileProviderOf(currentFile)
      if (provider) {
        provider.set(currentFile, input)
      } else {
        console.log('cannot save ' + currentFile + '. Does not belong to any explorer')
      }
    }
  }

  var previousInput = ''
  var saveTimeout = null

  function editorOnChange () {
    var currentFile = config.get('currentFile')
    if (!currentFile) {
      return
    }
    var input = editor.get(currentFile)

    // if there's no change, don't do anything
    if (input === previousInput) {
      return
    }
    previousInput = input

    // fire storage update
    // NOTE: save at most once per 5 seconds
    if (saveTimeout) {
      window.clearTimeout(saveTimeout)
    }
    saveTimeout = window.setTimeout(editorSyncFile, 5000)
  }

  editor.event.register('contentChanged', editorOnChange)
  // in order to save the file when switching
  editor.event.register('sessionSwitched', editorOnChange)

  executionContext.event.register('contextChanged', this, function (context) {
    runCompiler()
  })

  executionContext.event.register('web3EndpointChanged', this, function (context) {
    runCompiler()
  })

  compiler.event.register('compilerLoaded', this, function (version) {
    previousInput = ''
    runCompiler()

    if (queryParams.get().context) {
      executionContext.setContext(queryParams.get().context, queryParams.get().endpointurl)
    }

    if (queryParams.get().debugtx) {
      startdebugging(queryParams.get().debugtx)
    }
  })

  compiler.event.register('compilationStarted', this, function () {
    editor.clearAnnotations()
  })

  function startdebugging (txHash) {
    self.event.trigger('debuggingRequested', [])
    transactionDebugger.debug(txHash)
  }
}