Fixing bug (see #62 comments) and extracting ExecutionContext

index.html

@@ -109,8 +109,9 @@
 								<strong>Injected Web3</strong>
 								<p>Execution environment has been provided by Mist or similar provider.</p>
 							</label>
-							<label for="web3">
-								<input id="web3" type="radio" value="web3" name="executionContext">
+							<label for="_web3">
+								<!-- This element cannot be named web3 due to this HTML quirk: http://www.2ality.com/2012/08/ids-are-global.html. In order to detect when web3 is injected by Mist, MetaMask, etc, there cannot be any HTML elements with and id of web3. -->
+								<input id="_web3" 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

+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');
+  var $vmToggle = $('#vm');
+  var $web3Toggle = $('#web3');
+  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

 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 = web3.injected ? 'injected' : 'vm';
-
-  // 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?')) {
-        setExecutionContextRadio();
-      } else if (ev.target.value === 'injected' && injectedWeb3Provider === undefined) {
-        setExecutionContextRadio();
-      } else {
-        executionContext = ev.target.value;
-        if (executionContext === 'web3') {
-          setProviderFromEndpoint();
-        } else if (executionContext === 'injected') {
-          web3.setProvider(injectedWeb3Provider);
-        }
-      }
-      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;
-      }
-    }
-
-    if (web3.injected) {
-      var injectedWeb3Provider = web3.currentProvider;
-    }
-
-    var $injectedToggle = $('#injected');
-    var $vmToggle = $('#vm');
-    var $web3Toggle = $('#web3');
-    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();
-      }
-    });
-  })();
+  var executionContext = new ExecutionContext(compiler);
 
   function renderError (message) {
     var type = utils.errortype(message);
@@ -126,13 +63,13 @@ function Renderer (editor, compiler, updateFiles) {
     }
 
     var dapp = new UniversalDApp(udappContracts, {
-      mode: executionContext === 'vm' ? 'vm' : 'web3',
-      web3: web3,
+      mode: executionContext.isVM() ? 'vm' : '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

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