Merge pull request #695 from ethereum/iframesandbox

Inject web3 to the terminal

package.json

@@ -46,6 +46,7 @@
     "swarmgw": "^0.2.0",
     "tape": "^4.5.1",
     "uglify-js": "^2.8.16",
+    "vm-browserify": "0.0.4",
     "watchify": "^3.9.0",
     "web3": "^0.18.0",
     "webworkify": "^1.2.1",

src/app.js

@@ -103,13 +103,6 @@ class App {
         }
       }
     }
-    // ----------------- editor ----------------------------
-    self._components.editor = new Editor({}) // @TODO: put into editorpanel
-    // ----------------- editor panel ----------------------
-    self._components.editorpanel = new EditorPanel({
-      api: { editor: self._components.editor, config: self._api.config }
-    })
-    self._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))
   }
   _adjustLayout (direction, delta) {
     var self = this
@@ -147,7 +140,7 @@ class App {
     `
     self._view.centerpanel = yo`
       <div id="editor-container" class=${css.centerpanel}>
-        ${self._components.editorpanel.render()}
+        ${''}
       </div>
     `
     self._view.rightpanel = yo`
@@ -173,6 +166,26 @@ 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()
@@ -501,9 +514,6 @@ function run () {
   }
   var renderer = new Renderer(rendererAPI)
 
-  // ------------------------------------------------------------
-  var executionContext = new ExecutionContext()
-
   // ----------------- UniversalDApp -----------------
   var transactionContextAPI = {
     getAddress: (cb) => {

src/app/panels/editor-panel.js

@@ -125,7 +125,7 @@ var css = csjs`
 class EditorPanel {
   constructor (opts = {}) {
     var self = this
-    self._api = { config: opts.api.config }
+    self._api = opts.api
     self.event = new EventManager()
     self.data = {
       _FILE_SCROLL_DELTA: 200,
@@ -148,6 +148,12 @@ class EditorPanel {
             var newpos = (event.pageY < limitUp) ? limitUp : event.pageY
             newpos = (newpos < height - limitDown) ? newpos : height - limitDown
             return newpos
+          },
+          web3 () {
+            return self._api.web3()
+          },
+          context () {
+            return self._api.context()
           }
         }
       })

src/app/panels/terminal.js

@@ -4,7 +4,9 @@ var csjs = require('csjs-inject')
 var javascriptserialize = require('javascript-serialize')
 var jsbeautify = require('js-beautify')
 var type = require('component-type')
+var vm = require('vm')
 var EventManager = require('ethereum-remix').lib.EventManager
+var Web3 = require('web3')
 
 var css = csjs`
   .panel              {
@@ -162,6 +164,8 @@ class Terminal {
     self._templates.default = self._blocksRenderer('default')
     self._templates.error = self._blocksRenderer('error')
     self._templates.info = self._blocksRenderer('info')
+    self._jsSandboxContext = {}
+    self._jsSandbox = vm.createContext(self._jsSandboxContext)
     if (opts.shell) self._shell = opts.shell
     register(self)
   }
@@ -371,10 +375,10 @@ class Terminal {
     })
   }
   _shell (input, done) { // default shell
-    // @TODO: add environment and proxy console.log to self.log
-    // make `web3` object available in the console vm
     try {
-      var result = eval(input) // eslint-disable-line
+      var context = vm.createContext(Object.assign(this._jsSandboxContext, domTerminalFeatures(this)))
+      var result = vm.runInContext(input, context)
+      this._jsSandboxContext = Object.assign({}, context)
       done(null, result)
     } catch (error) {
       done(error.message)
@@ -382,4 +386,14 @@ class Terminal {
   }
 }
 
+// @TODO add all the `console` functions
+function domTerminalFeatures (self) {
+  return {
+    web3: self._api.context() !== 'vm' ? new Web3(self._api.web3().currentProvider) : null,
+    console: {
+      log: function () { self.log.apply(self, arguments) }
+    }
+  }
+}
+
 module.exports = Terminal