All contracts in a single Universal DApp.

index.html

@@ -500,34 +500,44 @@ THE SOFTWARE.
 		};
 
 		var renderContracts = function(data, source) {
+			var udappContracts = [];
 			for (var contractName in data.contracts) {
 				var contract = data.contracts[contractName];
-				var dapp = new UniversalDApp([{
+				udappContracts.push({
 					name: contractName,
 					interface: contract['interface'],
 					bytecode: contract.bytecode
-				}], {
+				});
+			}
+			var dapp = new UniversalDApp(udappContracts, {
 				vm: executionContext === 'vm',
 				removable: false,
-					removable_instances: true
-				});
-				var $contractOutput = dapp.render();
-				$contractOutput
+				removable_instances: true,
+				renderOutputModifier: function(contractName, $contractOutput) {
+					var contract = data.contracts[contractName];
+					return $contractOutput
 						.append(textRow('Bytecode', contract.bytecode))
 						.append(textRow('Interface', contract['interface']))
 						.append(textRow('Web3 deploy', gethDeploy(contractName.toLowerCase(),contract['interface'],contract.bytecode), 'deploy'))
 						.append(textRow('uDApp', combined(contractName,contract['interface'],contract.bytecode), 'deploy'))
 						.append(getDetails(contract, source, contractName));
+				}});
+			var $contractOutput = dapp.render();
 
-				if (executionContext === 'vm') $('#txorigin').text('0x' + dapp.address.toString('hex'));
-				else web3.eth.getAccounts( function(err,accounts) {
-					if (err) renderError(err.message);
+			if (executionContext === 'vm')
+				$('#txorigin').text('0x' + dapp.address.toString('hex'));
+			else
+				web3.eth.getAccounts(function(err, accounts) {
+					if (err)
+						renderError(err.message);
 					$('#txorigin').text(accounts[0]);
 				});
 
-				$contractOutput.find('.title').click(function(ev){ $(this).closest('.udapp').toggleClass('hide') });
+			$contractOutput.find('.title').click(function(ev){
+				console.log($(this));
+				$(this).closest('.contract').toggleClass('hide');
+			});
 			$('#output').append( $contractOutput );
-			}
 			$('.col2 input,textarea').click(function() { this.select(); });
 		};
 		var tableRowItems = function(first, second, cls) {

libs/universal-dapp.js

@@ -2,6 +2,7 @@ function UniversalDApp (contracts, options) {
     this.options = options || {};
     this.$el = $('<div class="udapp" />');
     this.contracts = contracts;
+    this.renderOutputModifier = options.renderOutputModifier || function(name, content) { return content; };
 
     if (!options.vm && web3.currentProvider) {
 
@@ -44,7 +45,7 @@ UniversalDApp.prototype.render = function () {
                 }
                 $contractEl.append( $title ).append( this.getCreateInterface( $contractEl, this.contracts[c]) );
             }
-            this.$el.append( $contractEl );
+            this.$el.append(this.renderOutputModifier(this.contracts[c].name, $contractEl));
         }
     }
     $legend = $('<div class="legend" />')

stylesheets/browser-solidity.css

@@ -126,19 +126,15 @@ body {
     float: left;
 }
 
-.udapp.hide {
+.contract.hide {
     padding-bottom: 0;
 }
 
-.udapp.hide > *:not(.contract) {
-    display: none;
-}
-
-.udapp.hide .contract {
+.contract.hide {
     margin: 0;
 }
 
-.udapp.hide .contract > *:not(.title) {
+.contract.hide > *:not(.title) {
     display: none;
 }
 
@@ -153,7 +149,7 @@ body {
     font-size: 10px;
 }
 
-.udapp.hide > .contract > .title:before {
+.contract.hide > .title:before {
     content: "\25B6";
 }