Change button names and add instanceContainerTitle

src/app/tabs/run-tab.js

@@ -19,15 +19,23 @@ var csjs = require('csjs-inject')
 var css = require('./styles/run-tab-styles')
 
 var instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
-var noInstancesText = yo`<div class="${css.noInstancesText}">0 contract Instances</div>`
+
+var instanceContainerTitle = yo`
+  <div class=${css.instanceContainerTitle}>UDapps of deployed contracts</div>`
+var noInstancesText = yo`
+  <div class="${css.noInstancesText}">Currently you have no contract instances.</div>`
 
 var pendingTxsText = yo`<span>0 pending transactions</span>`
 
 function runTab (appAPI = {}, appEvents = {}, opts = {}) {
   var container = yo`<div class="${css.runTabView}" id="runTabView" ></div>`
   var event = new EventManager()
+  var clearInstanceElement = yo`
+    <i class="${css.clearinstance} ${css.icon} fa fa-trash"
+      onclick=${() => { event.trigger('clearInstance', []) }}
+      title="Clear Instances List" aria-hidden="true">
+    </i>`
 
-  var clearInstanceElement = yo`<i class="${css.clearinstance} ${css.icon} fa fa-trash" title="Clear Instances List" aria-hidden="true"></i>`
   clearInstanceElement.addEventListener('click', () => {
     event.trigger('clearInstance', [])
   })
@@ -99,7 +107,7 @@ function runTab (appAPI = {}, appEvents = {}, opts = {}) {
 
   event.register('clearInstance', () => {
     instanceContainer.innerHTML = '' // clear the instances list
-    noInstancesText.style.display = 'block'
+    instanceContainer.appendChild(instanceContainerTitle)
     instanceContainer.appendChild(noInstancesText)
   })
   return { render () { return container } }
@@ -151,10 +159,13 @@ function makeRecorder (events, appAPI, appEvents, opts) {
     }
   `
 
-  var recordButton = yo`<i class="fa fa-floppy-o savetransaction ${css2.recorder} ${css.icon}" title="Save Transactions" aria-hidden="true"></i>`
+  var recordButton = yo`
+    <i class="fa fa-floppy-o savetransaction ${css2.recorder} ${css.icon}"
+      onclick=${triggerRecordButton} title="Save Transactions" aria-hidden="true">
+    </i>`
   var runButton = yo`<i class="fa fa-play runtransaction ${css2.runTxs} ${css.icon}"  title="Run Transactions" aria-hidden="true"></i>`
 
-  recordButton.onclick = () => {
+  function triggerRecordButton () {
     var txJSON = JSON.stringify(recorder.getAll(), null, 2)
     var path = appAPI.currentPath()
     modalDialogCustom.prompt(null, 'save ran transactions to file (e.g. `scenario.json`). The file is going to be saved under ' + path, 'scenario.json', input => {
@@ -190,7 +201,7 @@ function makeRecorder (events, appAPI, appEvents, opts) {
             return modalDialogCustom.alert('Invalid Scenario File, please try again')
           }
           if (txArray.length) {
-            noInstancesText.style.display = 'none'
+            if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
             recorder.run(txArray, accounts, options, abis, linkReferences, opts.udapp, (abi, address, contractName) => {
               instanceContainer.appendChild(opts.udappUI.renderInstanceFromABI(abi, address, contractName))
             })
@@ -204,10 +215,11 @@ function makeRecorder (events, appAPI, appEvents, opts) {
   return { recordButton, runButton }
 }
 /* ------------------------------------------------
-    section CONTRACT DROPDOWN and BUTTONS
+    CONTRACT (deploy or access deployed)
 ------------------------------------------------ */
 
 function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
+  instanceContainer.appendChild(instanceContainerTitle)
   instanceContainer.appendChild(noInstancesText)
   var compFails = yo`<i title="Contract compilation failed. Please check the compile tab for more information." class="fa fa-times-circle ${css.errorIcon}" ></i>`
   appEvents.compiler.register('compilationFinished', function (success, data, source) {
@@ -247,7 +259,7 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
         ${createPanel}
         <div class="${css.button}">
           ${atAddressButtonInput}
-          <div class="${css.atAddress}" onclick=${function () { loadFromAddress(appAPI) }}>At Address</div>
+          <div class="${css.atAddress}" onclick=${function () { loadFromAddress(appAPI) }}>Access</div>
         </div>
       </div>
     </div>
@@ -292,7 +304,7 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
                 return
               }
             }
-            noInstancesText.style.display = 'none'
+            if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
             var address = isVM ? txResult.result.createdAddress : txResult.result.contractAddress
             instanceContainer.appendChild(opts.udappUI.renderInstance(selectedContract.contract.object, address, selectContractNames.value))
           } else {
@@ -311,7 +323,7 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
   }
 
   function loadFromAddress (appAPI) {
-    noInstancesText.style.display = 'none'
+    if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
     var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
     var address = atAddressButtonInput.value
     if (!ethJSUtil.isValidAddress(address)) {
@@ -381,8 +393,8 @@ function settings (container, appAPI, appEvents, opts) {
       }
     })
   }
-  var el = yo`
+
-    <div class="${css.settings}">
+  var environmentEl = yo`
   <div class="${css.crow}">
   <div id="selectExEnv" class="${css.col1_1}">
   Environment
@@ -392,41 +404,37 @@ function settings (container, appAPI, appEvents, opts) {
   <select id="selectExEnvOptions" onchange=${updateNetwork} class="${css.select}">
   <option id="vm-mode"
     title="Execution environment does not connect to any node, everything is local and in memory only."
-              value="vm"
+    value="vm" checked name="executionContext"> JavaScript VM
-              checked name="executionContext">
-              JavaScript VM
     </option>
     <option id="injected-mode"
-              title="Execution environment has been provided by Mist or similar provider."
+    title="Execution environment has been provided by Metamask or similar provider."
-              value="injected"
+    value="injected" checked name="executionContext"> Injected Web3
-              checked name="executionContext">
-              Injected Web3
     </option>
     <option id="web3-mode"
     title="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!
     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."
-              value="web3"
+    value="web3" name="executionContext"> Web3 Provider
-              name="executionContext">
-              Web3 Provider
     </option>
   </select>
   <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md" target="_blank"><i class="${css.icon} fa fa-info"></i></a>
   </div>
   </div>
+  `
+  var accountEl = yo`
   <div class="${css.crow}">
   <div class="${css.col1_1}">Account</div>
   <select name="txorigin" class="${css.select}" id="txorigin"></select>
   ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
-          <i class="fa fa-plus-square-o ${css.createAccount} ${css.icon}" aria-hidden="true" onclick=${newAccount} title="Create a new account"></i>
+  <i class="fa fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${newAccount} title="Create a new account"></i>
   </div>
+  `
+  var gasPriceEl = yo`
   <div class="${css.crow}">
   <div class="${css.col1_1}">Gas limit</div>
   <input type="number" class="${css.col2}" id="gasLimit" value="3000000">
   </div>
-      <div class="${css.crow}" style="display: none">
+  `
-      <div class="${css.col1_1}">Gas Price</div>
+  var valueEl = yo`
-        <input type="number" class="${css.col2}" id="gasPrice" value="0">
-      </div>
   <div class="${css.crow}">
   <div class="${css.col1_1}">Value</div>
   <input type="text" class="${css.col2_1}" id="value" value="0" title="Enter the value and choose the unit">
@@ -437,8 +445,16 @@ function settings (container, appAPI, appEvents, opts) {
   <option data-unit="ether">ether</option>
   </select>
   </div>
+  `
+  var el = yo`
+  <div class="${css.settings}">
+    ${environmentEl}
+    ${accountEl}
+    ${gasPriceEl}
+    ${valueEl}
   </div>
 `
+
   // EVENTS
   appEvents.udapp.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
     if (error) return

src/app/tabs/styles/run-tab-styles.js

@@ -8,6 +8,10 @@ var css = csjs`
     display: flex;
     flex-direction: column;
   }
+  .instanceContainerTitle {
+    font-size: 20px;
+    font-weight: bold;
+  }
   .settings {
     ${styles.rightPanel.runTab.box_RunTab}
     margin-bottom: 2%;

src/universal-dapp-ui.js

@@ -34,14 +34,14 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract
 UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) {
   var self = this
 
-  function remove () { instance.remove() }
 
   address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
   var instance = yo`<div class="instance ${css.instance}" id="instance${address}"></div>`
   var context = self.udapp.context()
 
   var shortAddress = helper.shortenAddress(address)
-  var title = yo`<div class="${css.title}" onclick=${toggleClass}>
+  var title = yo`
+    <div class="${css.title}" onclick=${toggleClass}>
     <div class="${css.titleText}"> ${contractName} at ${shortAddress} (${context}) </div>
     ${copyToClipboard(() => address)}
   </div>`
@@ -51,6 +51,13 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
     instance.appendChild(close)
   }
 
+  function remove () {
+    var instanceContainer = document.querySelector('[class^="instanceContainer"]')
+    var noInstancesText = yo`<div class="${css.noInstancesText}">Currently you have no contract instances.</div>`
+    instanceContainer.appendChild(noInstancesText)
+    instance.remove()
+  }
+  
   function toggleClass () {
     $(instance).toggleClass(`${css.hidesub}`)
   }