Merge pull request #62 from redsquirrel/injected-web3-support

Supporting an injected web3

index.html

@@ -100,13 +100,18 @@
 					</div>
 					<div id="envView">
 						<span id="executionContext">
-							<label for="vm">
+							<label for="vm-mode">
-								<input id="vm" type="radio" value="vm" checked name="executionContext">
+								<input id="vm-mode" type="radio" value="vm" checked name="executionContext">
 								<strong>JavaScript VM</strong>
 								<p>Execution environment does not connect to any node, everything is local and in memory only.</p>
 							</label>
-							<label for="web3">
+							<label for="injected-mode">
-								<input id="web3" type="radio" value="web3" name="executionContext">
+								<input id="injected-mode" type="radio" value="injected" checked name="executionContext">
+								<strong>Injected Web3</strong>
+								<p>Execution environment has been provided by Mist or similar provider.</p>
+							</label>
+							<label for="web3-mode">
+								<input id="web3-mode" type="radio" value="web3" name="executionContext">
 								<strong>Web3 Provider</strong>
 																<p>Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse!<br/>
 																<b>If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http.</b></p>

src/app/execution-context.js

@@ -0,0 +1,81 @@
+var $ = require('jquery');
+var Web3 = require('web3');
+
+var injectedProvider;
+
+if (typeof web3 !== 'undefined') {
+  injectedProvider = web3.currentProvider;
+  web3 = new Web3(injectedProvider);
+} else {
+  web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
+}
+
+function ExecutionContext (compiler) {
+  var executionContext = injectedProvider ? 'injected' : 'vm';
+
+  this.isVM = function () {
+    return executionContext === 'vm';
+  };
+
+  this.web3 = function () {
+    return web3;
+  };
+
+  var $injectedToggle = $('#injected-mode');
+  var $vmToggle = $('#vm-mode');
+  var $web3Toggle = $('#web3-mode');
+  var $web3endpoint = $('#web3Endpoint');
+
+  if (web3.providers && web3.currentProvider instanceof web3.providers.IpcProvider) {
+    $web3endpoint.val('ipc');
+  }
+
+  setExecutionContextRadio();
+
+  $injectedToggle.on('change', executionContextChange);
+  $vmToggle.on('change', executionContextChange);
+  $web3Toggle.on('change', executionContextChange);
+  $web3endpoint.on('change', function () {
+    setProviderFromEndpoint();
+    if (executionContext === 'web3') {
+      compiler.compile();
+    }
+  });
+
+  function executionContextChange (ev) {
+    if (ev.target.value === 'web3' && !confirm('Are you sure you want to connect to a local ethereum node?')) {
+      setExecutionContextRadio();
+    } else if (ev.target.value === 'injected' && injectedProvider === undefined) {
+      setExecutionContextRadio();
+    } else {
+      executionContext = ev.target.value;
+      if (executionContext === 'web3') {
+        setProviderFromEndpoint();
+      } else if (executionContext === 'injected') {
+        web3.setProvider(injectedProvider);
+      }
+    }
+    compiler.compile();
+  }
+
+  function setProviderFromEndpoint () {
+    var endpoint = $web3endpoint.val();
+    if (endpoint === 'ipc') {
+      web3.setProvider(new web3.providers.IpcProvider());
+    } else {
+      web3.setProvider(new web3.providers.HttpProvider(endpoint));
+    }
+  }
+
+  function setExecutionContextRadio () {
+    if (executionContext === 'injected') {
+      $injectedToggle.get(0).checked = true;
+    } else if (executionContext === 'vm') {
+      $vmToggle.get(0).checked = true;
+    } else if (executionContext === 'web3') {
+      $web3Toggle.get(0).checked = true;
+    }
+  }
+}
+
+module.exports = ExecutionContext;

src/app/renderer.js

@@ -1,56 +1,14 @@
 var $ = require('jquery');
 
-var web3 = require('../web3-adapter.js');
 var UniversalDApp = require('../universal-dapp.js');
 
 var utils = require('./utils');
+var ExecutionContext = require('./execution-context');
 
 function Renderer (editor, compiler, updateFiles) {
 
   var detailsOpen = {};
-  var executionContext = 'vm';
+  var executionContext = new ExecutionContext(compiler);
-
-  // Forcing all of this setup into its own scope.
-  (function () {
-    function executionContextChange (ev) {
-      if (ev.target.value === 'web3' && !confirm('Are you sure you want to connect to a local ethereum node?')) {
-        $vmToggle.get(0).checked = true;
-        executionContext = 'vm';
-      } else {
-        executionContext = ev.target.value;
-        setProviderFromEndpoint();
-      }
-      compiler.compile();
-    }
-
-    function setProviderFromEndpoint () {
-      var endpoint = $web3endpoint.val();
-      if (endpoint === 'ipc') {
-        web3.setProvider(new web3.providers.IpcProvider());
-      } else {
-        web3.setProvider(new web3.providers.HttpProvider(endpoint));
-      }
-    }
-
-    var $vmToggle = $('#vm');
-    var $web3Toggle = $('#web3');
-    var $web3endpoint = $('#web3Endpoint');
-
-    if (web3.providers && web3.currentProvider instanceof web3.providers.IpcProvider) {
-      $web3endpoint.val('ipc');
-    }
-
-    $vmToggle.get(0).checked = true;
-
-    $vmToggle.on('change', executionContextChange);
-    $web3Toggle.on('change', executionContextChange);
-    $web3endpoint.on('change', function () {
-      setProviderFromEndpoint();
-      if (executionContext === 'web3') {
-        compiler.compile();
-      }
-    });
-  })();
 
   function renderError (message) {
     var type = utils.errortype(message);
@@ -105,13 +63,13 @@ function Renderer (editor, compiler, updateFiles) {
     }
 
     var dapp = new UniversalDApp(udappContracts, {
-      mode: executionContext === 'vm' ? 'vm' : 'web3',
+      mode: executionContext.isVM() ? 'vm' : 'web3',
-      web3: web3,
+      web3: executionContext.web3(),
       removable: false,
       getAddress: function () { return $('#txorigin').val(); },
       getValue: function () {
         var comp = $('#value').val().split(' ');
-        return web3.toWei(comp[0], comp.slice(1).join(' '));
+        return executionContext.web3().toWei(comp[0], comp.slice(1).join(' '));
       },
       removable_instances: true,
       renderOutputModifier: function (contractName, $contractOutput) {

src/web3-adapter.js

@@ -1,12 +0,0 @@
-// This mainly extracts the provider that might be
-// supplied through mist.
-
-var Web3 = require('web3');
-
-if (typeof web3 !== 'undefined') {
-    web3 = new Web3(web3.currentProvider);
-} else {
-    web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
-}
-
-module.exports = web3;