Contract tab - toggle

assets/css/universal-dapp.css

@@ -44,7 +44,7 @@
 
 .udapp .create {
 	overflow: auto;
-	margin-bottom: 1em;
+	margin: 1em;
 }
 
 .udapp .title {
@@ -203,7 +203,7 @@
 }
 
 .udapp button {
-	background-color: #666;
+	padding: .36em;
 	color: #4C4B4B;
 	cursor: pointer;
 	overflow: hidden;

src/app/renderer.js

@@ -18,6 +18,17 @@ var css = csjs`
       width: 30%;
       float: left;
   }
+  .toggle  {
+    font-size: 1em;
+    text-decoration: underline;
+    color: ${styles.colors.blue};
+    margin: 1em;
+    cursor: pointer;
+    font-weight: 400;
+  }
+  .toggle:hover {
+    opacity: .8;
+  }
 `
 // ----------------------------------------------
 
@@ -237,9 +248,25 @@ Renderer.prototype.contracts = function (data, source) {
 
   var detailsOpen = {}
   var getDetails = function (contract, source, contractName) {
-    var button = $('<button>Toggle Details</button>')
+    var button = $(`<div class="${css.toggle}"><i class="fa fa-info-circle" aria-hidden="true"></i> Contract details (bytecode, interface etc.)</div>`)
     var details = $('<div style="display: none;"/>')
 
+    if (contract.bytecode) {
+      details.append(preRow('Bytecode', contract.bytecode))
+    }
+
+    details.append(preRow('Interface', contract['interface']))
+
+    if (contract.bytecode) {
+      details.append(preRow('Web3 deploy', gethDeploy(contractName.toLowerCase(), contract['interface'], contract.bytecode), 'deploy'))
+
+      // check if there's a metadata hash appended
+      var metadataHash = retrieveMetadataHash(contract.bytecode)
+      if (metadataHash) {
+        details.append(preRow('Metadata location', 'bzzr://' + metadataHash))
+      }
+    }
+
     if (contract.metadata) {
       details.append(preRow('Metadata', contract.metadata))
     }
@@ -282,22 +309,6 @@ Renderer.prototype.contracts = function (data, source) {
   var self = this
   var renderOutputModifier = function (contractName, $contractOutput) {
     var contract = data.contracts[contractName]
-    if (contract.bytecode) {
-      $contractOutput.append(tableRow('Bytecode', contract.bytecode))
-    }
-
-    $contractOutput.append(tableRow('Interface', contract['interface']))
-
-    if (contract.bytecode) {
-      $contractOutput.append(preRow('Web3 deploy', gethDeploy(contractName.toLowerCase(), contract['interface'], contract.bytecode), 'deploy'))
-
-      // check if there's a metadata hash appended
-      var metadataHash = retrieveMetadataHash(contract.bytecode)
-      if (metadataHash) {
-        $contractOutput.append(tableRow('Metadata location', 'bzzr://' + metadataHash))
-      }
-    }
-
     var ctrSource = self.appAPI.currentCompiledSourceCode()
     if (ctrSource) {
       $contractOutput.append(getDetails(contract, ctrSource, contractName))

src/app/style-guide.js

@@ -6,17 +6,20 @@ function styleGuide () {
   /* --------------------------------------------------------------------------
   COLORS
   -------------------------------------------------------------------------- */
-  var blue                = '#9DC1F5'
-  var lightBlue           = '#F4F6FF'
-  var greyBlue            = '#102026'
-  var grey                = '#666'
-  var lightGrey           = '#f8f8f8'
-  var red                 = '#FF8080'
-  var lightRed            = '#FFB9B9'
-  var green               = '#B1EAC5'
-  var violet              = '#C6CFF7'
-  var pink                = '#EC96EC'
-  var yellow              = '#E6E5A7'
+  var colors = {
+    blue                : '#9DC1F5',
+    lightBlue           : '#F4F6FF',
+    greyBlue            : '#102026',
+    grey                : '#666',
+    lightGrey           : '#f8f8f8',
+    red                 : '#FF8080',
+    lightRed            : '#FFB9B9',
+    green               : '#B1EAC5',
+    violet              : '#C6CFF7',
+    pink                : '#EC96EC',
+    yellow              : '#E6E5A7'
+  }
+
   /* --------------------------------------------------------------------------
                               FONTS
   -------------------------------------------------------------------------- */
@@ -130,6 +133,7 @@ function styleGuide () {
     titleL: texts['title-L'],
     titleM: texts['title-M'],
     dropdown: buttons['dropdown-menu'],
-    button: buttons['button']
+    button: buttons['button'],
+    colors: colors
   }
 }

src/universal-dapp.js

@@ -9,8 +9,12 @@ var EventManager = require('./lib/eventManager')
 var crypto = require('crypto')
 var async = require('async')
 var TxRunner = require('./app/txRunner')
-var csjs = require('csjs-inject')
+var yo = require('yo-yo')
 
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var styleGuide = require('./app/style-guide')
+var styles = styleGuide()
 var css = csjs`
   .options {
       float: left;
@@ -207,7 +211,7 @@ UniversalDApp.prototype.getCreateInterface = function ($container, contract) {
     $createInterface.append($close)
   }
 
-  var $publishButton = $('<button class="publishContract"/>').text('Publish').click(function () { self.event.trigger('publishContract', [contract]) })
+  var $publishButton = $(`<button class="publishContract"/>`).text('Publish').click(function () { self.event.trigger('publishContract', [contract]) })
   $createInterface.append($publishButton)
 
   var $atButton = $('<button class="atAddress"/>').text('At Address').click(function () { self.clickContractAt(self, $container.find('.createContract'), contract) })