tx panel

assets/css/browser-solidity.css

@@ -139,16 +139,25 @@ body {
 #header #optionViews {
     clear: both;
     overflow: auto;
-    padding: 1em;
 }
 #header #optionViews > div {
     display: none;
+    padding: 0.4em;
 }
 #header #optionViews.txView #txView { display: block; }
 #header #optionViews.settingsView #settingsView { display: block; }
 #header #optionViews.publishView #publishView { display: block; }
 #header #optionViews.envView #envView { display: block; }
 
+#header #optionViews.txView input,
+#header #optionViews.txView select {
+    max-width: 13em;
+    padding: 0.3em;
+    box-sizing: border-box;
+    border: 1px solid rgba( 0,0,0,0.3 );
+    border-radius: 3px;
+}
+
 #header .info {
     font-family: monospace;
     min-height: 6em;
@@ -172,29 +181,15 @@ body {
 #header .origin,
 #header #executionContext {
     display: block;
-    margin-top: 0.5em;
     word-wrap: break-word;
 }
 
-#header #executionContext{ margin-top: 0; }
-
-
 #header #versionSelector {
     border: 0 none;
     font-family: monospace;
     background-color: transparent;
 }
 
-
-
-
-
-
-
-
-
-
-
 .col1 {
     width: 30%;
     float: left;

assets/js/universal-dapp.js

@@ -383,16 +383,20 @@ UniversalDApp.prototype.runTx = function( data, args, cb) {
     var constant = args.abi.constant;
     var isConstructor = args.bytecode !== undefined;
 
+    var gas = self.options.getGas ? self.options.getGas : 1000000;
+    var value = self.options.getValue ? self.options.getValue : 0;
+    
     if (!this.vm) {
         if (constant && !isConstructor) {
             var func = web3.eth.contract( [args.abi] ).at( to );
             func[args.abi.name].call( cb );
         } else {
             var tx = {
-                from: web3.eth.accounts[0],
+                from: self.options.getAddress ? self.options.getAddress() : web3.eth.accounts[0],
                 to: to,
                 data: data,
-                gas: 1000000
+                gas: gas,
+                value: value
             };
             web3.eth.estimateGas( tx, function(err, resp){
                 tx.gas = resp;
@@ -409,6 +413,7 @@ UniversalDApp.prototype.runTx = function( data, args, cb) {
                 gasPrice: '01',
                 gasLimit: '3000000000', //plenty
                 to: to,
+                value: value,
                 data: data
             });
             tx.sign(new Buffer(this.secretKey, 'hex'));

index.html

@@ -64,7 +64,7 @@ THE SOFTWARE.
 	<div id="righthand-panel">
 		<div id="header">
 			<div id="menu">
-				<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/sol.gif">
+				<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/sol.gif" alt="Solidity realtime compiler and runtime">
 				<ul id="options">
 					<li class="txView active"><i class="fa fa-send"></i></li>
 					<li class="envView"><i class="fa fa-tachometer"></i></li>
@@ -74,10 +74,18 @@ THE SOFTWARE.
 			</div>
 			<div id="optionViews" class="txView">
 				<div id="txView">
-					<select name="origin" id="txorigin"></select>
-					<label for="gas"><input type="number" id="gas"> Gas</label>
-					<label for="gasPrice"><input type="number" id="gasPrice"> Gas Price</label>
-					<label for="value"><input type="number" id="value"> Value</label>
+					<div class="row">
+						<label for="txorigin"><select name="txorigin" id="txorigin"></select> Transaction origin</label>
+					</div>
+					<div class="row">
+						<label for="gas"><input type="number" id="gas" value="0"> Gas</label>
+					</div>
+					<div class="row">
+						<label for="gasPrice"><input type="number" id="gasPrice" value="0"> Gas Price</label>
+					</div>
+					<div class="row">
+						<label for="value"><input type="number" id="value" value="0"> Value</label>
+					</div>
 				</div>
 				<div id="settingsView">
 					<div class="version">Solidity version: <span id="version">(loading)</span> <br/>Change to: <select id="versionSelector"></select></div>
@@ -85,9 +93,8 @@ THE SOFTWARE.
 					<label for="optimize"><input id="optimize" type="checkbox">Enable Optimization</label>
 				</div>
 				<div id="publishView">
-					<p><button id="gist" title="Publish all files as public gist on github.com"><i class="fa fa-github"></i> Publish gist</button> Publish all open files to an anonymous github gist.</p>
-
-					<p>Publish to ipfs ...</p>
+					<p>Publish all open files to an anonymous github gist.</p>
+					<button id="gist" title="Publish all files as public gist on github.com"><i class="fa fa-github"></i> Publish Gist</button>
 				</div>
 				<div id="envView">
 					<span id="executionContext">
@@ -188,13 +195,17 @@ THE SOFTWARE.
 
 	// ----------------- tabbed menu -------------------
 
-	$('#options li').click(function(){
+	$('#options li').click(function(ev){
 		var $el = $(this);
 		var cls = /[a-z]+View/.exec( $el.get(0).className )[0];
+		if (!$el.hasClass('active')) {
 			$el.parent().find('li').removeClass('active');
-		$el.addClass('active');
 			$('#optionViews').attr('class', '').addClass(cls);
-		console.log(cls)
+			$el.addClass('active');
+		} else {
+			$el.removeClass('active');
+			$('#optionViews').removeClass(cls);
+		}
 	});
 
 	// ----------------- execution context -------------
@@ -635,6 +646,7 @@ THE SOFTWARE.
 			var dapp = new UniversalDApp(udappContracts, {
 				vm: executionContext === 'vm',
 				removable: false,
+				getAddress: function(){ return $('txorigin').val(); },
 				removable_instances: true,
 				renderOutputModifier: function(contractName, $contractOutput) {
 					var contract = data.contracts[contractName];