From e7fe06c8f3be9521200c4171f9b6ef2a35f51afa Mon Sep 17 00:00:00 2001
From: chriseth <c@ethdev.com>
Date: Thu, 8 Oct 2015 00:36:03 +0200
Subject: [PATCH 1/3] All contracts in a single Universal DApp.

---
 index.html                       | 40 ++++++++++++++++++++------------
 libs/universal-dapp.js           |  3 ++-
 stylesheets/browser-solidity.css | 12 ++++------
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index 4d35a995ac..5ba6e7f740 100644
--- a/index.html
+++ b/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'],
+					interface: contract['interface'],
 					bytecode: contract.bytecode
-				}], {
-					vm: executionContext === 'vm',
-					removable: false,
-					removable_instances: true
 				});
-				var $contractOutput = dapp.render();
-				$contractOutput
+			}
+			var dapp = new UniversalDApp(udappContracts, {
+				vm: executionContext === 'vm',
+				removable: false,
+				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));
-
-				if (executionContext === 'vm') $('#txorigin').text('0x' + dapp.address.toString('hex'));
-				else web3.eth.getAccounts( function(err,accounts) {
-					if (err) renderError(err.message);
+				}});
+			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);
 					$('#txorigin').text(accounts[0]);
 				});
 
-				$contractOutput.find('.title').click(function(ev){ $(this).closest('.udapp').toggleClass('hide') });
-				$('#output').append( $contractOutput );
-			}
+			$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) {
diff --git a/libs/universal-dapp.js b/libs/universal-dapp.js
index 63c1fe69e7..0f03553a72 100644
--- a/libs/universal-dapp.js
+++ b/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" />')
diff --git a/stylesheets/browser-solidity.css b/stylesheets/browser-solidity.css
index 1040eaf84c..6a67373938 100644
--- a/stylesheets/browser-solidity.css
+++ b/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";
 }
 

From c6062c5355e3daec6cc9730c675d2f424c4ebf4e Mon Sep 17 00:00:00 2001
From: chriseth <c@ethdev.com>
Date: Thu, 8 Oct 2015 13:20:31 +0200
Subject: [PATCH 2/3] Automatically deploy and link required libraries.

---
 index.html             |  5 +--
 libs/universal-dapp.js | 78 ++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 76 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 5ba6e7f740..2b5064a3e1 100644
--- a/index.html
+++ b/index.html
@@ -533,10 +533,7 @@ THE SOFTWARE.
 					$('#txorigin').text(accounts[0]);
 				});
 
-			$contractOutput.find('.title').click(function(ev){
-				console.log($(this));
-				$(this).closest('.contract').toggleClass('hide');
-			});
+			$contractOutput.find('.title').click(function(ev){ $(this).closest('.contract').toggleClass('hide'); });
 			$('#output').append( $contractOutput );
 			$('.col2 input,textarea').click(function() { this.select(); });
 		};
diff --git a/libs/universal-dapp.js b/libs/universal-dapp.js
index 0f03553a72..68a3dda8b9 100644
--- a/libs/universal-dapp.js
+++ b/libs/universal-dapp.js
@@ -60,10 +60,17 @@ UniversalDApp.prototype.render = function () {
     return this.$el;
 }
 
+UniversalDApp.prototype.getContractByName = function(contractName) {
+    for (var c in this.contracts)
+        if (this.contracts[c].name == contractName)
+            return this.contracts[c];
+    return null;
+};
+
 UniversalDApp.prototype.getABIInputForm = function (cb){
     var self = this;
     var $el = $('<div class="udapp-setup" />');
-    var $jsonInput = $('<textarea class="json" placeholder=\'[ { "name": name, "bytecode": bytyecode, "interface": abi }, { ... } ]\'/>')
+    var $jsonInput = $('<textarea class="json" placeholder=\'[ { "name": name, "bytecode": bytecode, "interface": abi }, { ... } ]\'/>')
     var $createButton = $('<button class="udapp-create"/>').text('Create a Universal ÐApp')
     $createButton.click(function(ev){
         var contracts =  $.parseJSON( $jsonInput.val() );
@@ -158,6 +165,7 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar
     if (!address || !$target) {
         $createInterface.append( this.getCallButton({
             abi: funABI,
+            contractName: contract.name,
             bytecode: contract.bytecode,
             appendFunctions: appendFunctions
         }));
@@ -180,7 +188,7 @@ UniversalDApp.prototype.getConstructorInterface = function(abi) {
 
 UniversalDApp.prototype.getCallButton = function(args) {
     var self = this;
-    // args.abi, args.bytecode [constr only], args.address [fun only]
+    // args.abi, args.contractName [constr only], args.bytecode, args.address [fun only]
     // args.appendFunctions [constr only]
     var isConstructor = args.bytecode !== undefined;
     var lookupOnly = ( args.abi.constant && !isConstructor );
@@ -226,10 +234,27 @@ UniversalDApp.prototype.getCallButton = function(args) {
         var funArgs = $.parseJSON('[' + inputField.val() + ']');
         var data = fun.toPayload(funArgs).data;
         if (data.slice(0, 2) == '0x') data = data.slice(2);
-        if (isConstructor) data = args.bytecode + data.slice(8);
 
         var $result = getOutput( $('<a class="waiting" href="#" title="Waiting for transaction to be mined.">Polling for tx receipt...</a>') );
 
+        if (isConstructor) {
+	   if (args.bytecode.indexOf('_') >= 0) {
+               if (self.options.vm)
+                   self.linkBytecode(args.contractName, function(err, bytecode) {
+                       if (err)
+                           $result.replaceWith(getOutput($('<span/>').text('Error deploying required libraries: ' + err)));
+                       else {
+                           args.bytecode = bytecode;
+                           handleCallButtonClick(ev);
+                       }
+                   });
+               else
+                   $result.replaceWeth(getOutput( $('<span>Contract needs to be linked to a library, this is only supported in the JavaScript VM for now.</span>')));
+               return;
+           } else
+               data = args.bytecode + data.slice(8);
+	}
+
         if (lookupOnly && !inputs.length) {
             $outputOverride.empty().append( $result );
         } else {
@@ -290,6 +315,53 @@ UniversalDApp.prototype.getCallButton = function(args) {
     return $contractProperty.append(outputSpan);
 }
 
+UniversalDApp.prototype.linkBytecode = function(contractName, cb) {
+console.log("linking " + contractName);
+    var bytecode = this.getContractByName(contractName).bytecode;
+    if (bytecode.indexOf('_') < 0)
+        return cb(null, bytecode);
+    var m = bytecode.match(/__([^_]{1,36})__/);
+    if (!m)
+        return cb("Invalid bytecode format.");
+    var libraryName = m[1];
+    if (!this.getContractByName(contractName))
+        return cb("Library " + libraryName + " not found.");
+    var self = this;
+    this.deployLibrary(libraryName, function(err, address) {
+        if (err) return cb(err);
+        var libLabel = '__' + libraryName + Array(39 - libraryName.length).join('_');
+        var hexAddress = address.toString('hex');
+        if (hexAddress.slice(0, 2) == '0x') hexAddress = hexAddress.slice(2);
+        hexAddress = Array(40 - hexAddress.length + 1).join('0') + hexAddress;
+        while (bytecode.indexOf(libLabel) >= 0)
+            bytecode = bytecode.replace(libLabel, hexAddress);
+        self.getContractByName(contractName).bytecode = bytecode;
+        self.linkBytecode(contractName, cb);
+    });
+};
+
+UniversalDApp.prototype.deployLibrary = function(contractName, cb) {
+console.log("deploying librari " + contractName);
+    if (this.getContractByName(contractName).address)
+        return cb(null, this.getContractByName(contractName).address);
+    var self = this;
+    var bytecode = this.getContractByName(contractName).bytecode;
+    if (bytecode.indexOf('_') >= 0)
+        this.linkBytecode(contractName, function(err, bytecode) {
+            if (err) cb(err);
+            else self.deployLibrary(contractName, cb);
+        });
+    else {
+        console.log(cb);
+        this.runTx(bytecode, {abi: {constant: false}, bytecode: bytecode}, function(err, result) {
+            console.log(cb);
+            if (err) return cb(err);
+            self.getContractByName(contractName).address = result.createdAddress;
+            cb(err, result.createdAddress);
+        });
+    }
+};
+
 UniversalDApp.prototype.clickNewContract = function ( self, $contract, contract ) {
     $contract.append( self.getInstanceInterface(contract) );
 }

From 23a412dff0c4fc3f704b2301b6bbe288d7767d7a Mon Sep 17 00:00:00 2001
From: chriseth <c@ethdev.com>
Date: Thu, 8 Oct 2015 13:22:23 +0200
Subject: [PATCH 3/3] Formatting.

---
 libs/universal-dapp.js | 34 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/libs/universal-dapp.js b/libs/universal-dapp.js
index 68a3dda8b9..54c505a923 100644
--- a/libs/universal-dapp.js
+++ b/libs/universal-dapp.js
@@ -238,21 +238,21 @@ UniversalDApp.prototype.getCallButton = function(args) {
         var $result = getOutput( $('<a class="waiting" href="#" title="Waiting for transaction to be mined.">Polling for tx receipt...</a>') );
 
         if (isConstructor) {
-	   if (args.bytecode.indexOf('_') >= 0) {
-               if (self.options.vm)
-                   self.linkBytecode(args.contractName, function(err, bytecode) {
-                       if (err)
-                           $result.replaceWith(getOutput($('<span/>').text('Error deploying required libraries: ' + err)));
-                       else {
-                           args.bytecode = bytecode;
-                           handleCallButtonClick(ev);
-                       }
-                   });
-               else
-                   $result.replaceWeth(getOutput( $('<span>Contract needs to be linked to a library, this is only supported in the JavaScript VM for now.</span>')));
-               return;
-           } else
-               data = args.bytecode + data.slice(8);
+	     if (args.bytecode.indexOf('_') >= 0) {
+                 if (self.options.vm)
+                     self.linkBytecode(args.contractName, function(err, bytecode) {
+                         if (err)
+                             $result.replaceWith(getOutput($('<span/>').text('Error deploying required libraries: ' + err)));
+                         else {
+                             args.bytecode = bytecode;
+                             handleCallButtonClick(ev);
+                         }
+                     });
+                 else
+                     $result.replaceWith(getOutput( $('<span>Contract needs to be linked to a library, this is only supported in the JavaScript VM for now.</span>')));
+                 return;
+             } else
+                 data = args.bytecode + data.slice(8);
 	}
 
         if (lookupOnly && !inputs.length) {
@@ -316,7 +316,6 @@ UniversalDApp.prototype.getCallButton = function(args) {
 }
 
 UniversalDApp.prototype.linkBytecode = function(contractName, cb) {
-console.log("linking " + contractName);
     var bytecode = this.getContractByName(contractName).bytecode;
     if (bytecode.indexOf('_') < 0)
         return cb(null, bytecode);
@@ -341,7 +340,6 @@ console.log("linking " + contractName);
 };
 
 UniversalDApp.prototype.deployLibrary = function(contractName, cb) {
-console.log("deploying librari " + contractName);
     if (this.getContractByName(contractName).address)
         return cb(null, this.getContractByName(contractName).address);
     var self = this;
@@ -352,9 +350,7 @@ console.log("deploying librari " + contractName);
             else self.deployLibrary(contractName, cb);
         });
     else {
-        console.log(cb);
         this.runTx(bytecode, {abi: {constant: false}, bytecode: bytecode}, function(err, result) {
-            console.log(cb);
             if (err) return cb(err);
             self.getContractByName(contractName).address = result.createdAddress;
             cb(err, result.createdAddress);