diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js
index 097f09076d..785c97318e 100644
--- a/src/app/tabs/run-tab.js
+++ b/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``
-var noInstancesText = yo`0 contract Instances
`
+
+var instanceContainerTitle = yo`
+ UDapps of deployed contracts
`
+var noInstancesText = yo`
+ Currently you have no contract instances.
`
var pendingTxsText = yo`0 pending transactions`
function runTab (appAPI = {}, appEvents = {}, opts = {}) {
var container = yo``
var event = new EventManager()
+ var clearInstanceElement = yo`
+ { event.trigger('clearInstance', []) }}
+ title="Clear Instances List" aria-hidden="true">
+ `
- var clearInstanceElement = yo``
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``
+ var recordButton = yo`
+
+ `
var runButton = yo``
- 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``
appEvents.compiler.register('compilationFinished', function (success, data, source) {
@@ -247,7 +259,7 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
${createPanel}
@@ -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,64 +393,68 @@ function settings (container, appAPI, appEvents, opts) {
}
})
}
- var el = yo`
-
-
-
- Environment
-
-
- ${net}
-
-
-
-
-
-
Account
-
- ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
-
-
-
-
-
-
Value
-
-
-
-
+
+ Environment
+
+
+ ${net}
+
+
+
+
+
Account
+
+ ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
+
+
+
Value
+
+
+
+ ${environmentEl}
+ ${accountEl}
+ ${gasPriceEl}
+ ${valueEl}
+
+`
+
// EVENTS
appEvents.udapp.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
if (error) return
diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js
index dbe822a1f3..ed15a35130 100644
--- a/src/app/tabs/styles/run-tab-styles.js
+++ b/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%;
diff --git a/src/universal-dapp-ui.js b/src/universal-dapp-ui.js
index a43f5b56a2..43894d9611 100644
--- a/src/universal-dapp-ui.js
+++ b/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``
var context = self.udapp.context()
var shortAddress = helper.shortenAddress(address)
- var title = yo`
+ var title = yo`
+
${contractName} at ${shortAddress} (${context})
${copyToClipboard(() => address)}
`
@@ -51,6 +51,13 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
instance.appendChild(close)
}
+ function remove () {
+ var instanceContainer = document.querySelector('[class^="instanceContainer"]')
+ var noInstancesText = yo`
Currently you have no contract instances.
`
+ instanceContainer.appendChild(noInstancesText)
+ instance.remove()
+ }
+
function toggleClass () {
$(instance).toggleClass(`${css.hidesub}`)
}