- ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
-
+
+ Environment
-
-
-
-
Value
-
-
`
- // EVENTS
+ var accountEl = yo`
+
+
Account
+
+ ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
+
+
+ `
+ var gasPriceEl = yo`
+
+ `
+ var valueEl = yo`
+
+
Value
+
+
+
+ `
+ // DOM ELEMENT
+ var el = yo`
+
+ ${environmentEl}
+ ${accountEl}
+ ${gasPriceEl}
+ ${valueEl}
+
+ `
+ // HELPER FUNCTIONS AND EVENTS
appEvents.udapp.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
if (error) return
if (!lookupOnly) el.querySelector('#value').value = '0'
updateAccountBalances(container, appAPI)
})
+ setInterval(updateNetwork, 5000)
+ function newAccount () {
+ appAPI.newAccount('', (error, address) => {
+ if (!error) {
+ container.querySelector('#txorigin').appendChild(yo`
`)
+ addTooltip(`account ${address} created`)
+ } else {
+ addTooltip('Cannot create an account: ' + error)
+ }
+ })
+ }
+
return el
}
diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js
index dbe822a1f3..56916dc25d 100644
--- a/src/app/tabs/styles/run-tab-styles.js
+++ b/src/app/tabs/styles/run-tab-styles.js
@@ -8,11 +8,29 @@ var css = csjs`
display: flex;
flex-direction: column;
}
+ .instanceContainerTitle {
+ font-weight: bold;
+ margin-bottom: 5%;
+ font-size: 12px;
+ display: flex;
+ justify-content: space-between;
+ }
.settings {
${styles.rightPanel.runTab.box_RunTab}
margin-bottom: 2%;
padding: 10px 15px 15px 15px;
}
+ .recorderCount {
+ border: 1px solid ${styles.rightPanel.runTab.icon_HoverColor};
+ border-radius: 50%;
+ margin-right: 30px;
+ min-width: 13px;
+ height: 13px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 10px;
+ }
.crow {
margin-top: .5em;
display: flex;
@@ -54,11 +72,13 @@ var css = csjs`
width: 250px;
}
.instanceContainer {
+ ${styles.rightPanel.runTab.box_Instance}
display: flex;
flex-direction: column;
- margin-top: 2%;
+ margin-bottom: 2%;
border: none;
text-align: center;
+ padding: 10px 0px 15px 15px;
}
.pendingTxsContainer {
${styles.rightPanel.runTab.box_Instance}
@@ -70,8 +90,16 @@ var css = csjs`
}
.container {
${styles.rightPanel.runTab.box_RunTab}
- margin-top: 2%;
+ margin-bottom: 2%;
+ }
+ .recorderCollapsedView,
+ .recorderExpandedView {
+ display: flex;
+ flex-direction: column;
}
+ .recorderDescription {
+ margin: 0 15px 15px 0;
+ }
.contractNames {
${styles.rightPanel.runTab.dropdown_RunTab}
width: 100%;
@@ -105,6 +133,7 @@ var css = csjs`
.noInstancesText {
${styles.rightPanel.runTab.box_Instance}
font-style: italic;
+ text-align: left;
}
.pendingTxsText {
${styles.rightPanel.runTab.borderBox_Instance}
@@ -176,14 +205,14 @@ var css = csjs`
.networkItem {
margin-right: 5px;
}
- .clearinstance {}
+ .clearinstance {
+ margin-right: 15px;
+ }
.transactionActions {
display: flex;
- width: 70px;
- justify-content: space-between;
- border: 1px solid ${styles.rightPanel.runTab.additionalText_Color};
- padding: 5px;
- border-radius: 3px;
+ justify-content: space-evenly;
+ ${styles.rightPanel.runTab.box_Info_RunTab};
+ width: 145px;
}
`
diff --git a/src/app/ui/card.js b/src/app/ui/card.js
new file mode 100644
index 0000000000..c4b9a481a0
--- /dev/null
+++ b/src/app/ui/card.js
@@ -0,0 +1,93 @@
+var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles-guide/theme-chooser')
+var styles = styleGuide.chooser()
+var remixLib = require('remix-lib')
+var EventManager = remixLib.EventManager
+
+module.exports = class Card {
+ constructor (api, events, opts) {
+ const self = this
+ self._api = api
+ self._events = events
+ self._opts = opts
+ self._view = {}
+ self.event = new EventManager()
+ }
+ render () {
+ const self = this
+ if (self._view.el) return self._view.el
+
+ self._view.cardBody = yo`
`
+ self._view.arrow = yo`
trigger(ev.target)}>`
+
+ self._view.expandCollapseButton = yo`
+
${self._view.arrow}
`
+
+ self._view.statusBar = yo`
${self._opts.collapsedView}
`
+
+ self._view.cardHeader = yo`
+ `
+
+ function trigger (el) {
+ var body = self._view.cardBody
+ var status = self._view.statusBar
+ el.classList.toggle('fa-angle-down')
+ var arrow = el.classList.toggle('fa-angle-up') ? 'down' : 'up'
+ self.event.trigger('expandCollapseCard', [arrow, body, status])
+ }
+
+ // HTML
+ self._view.el = yo`
+
+ ${self._view.cardHeader}
+ ${self._view.cardBody}
+
`
+
+ return self._view.el
+ }
+
+}
+
+const css = csjs`
+ .cardContainer {
+ ${styles.remix.solidBox};
+ margin-bottom : 2%;
+ }
+ .cardHeader {
+ display : flex;
+ justify-content : space-between;
+ }
+ .statusBar {}
+ .cardBody {}
+ .cardTitles {
+ display : flex;
+ flex-direction : row;
+ align-items : center;
+ }
+ .cardTitle {
+ font-size : 13px;
+ font-weight : bold;
+ color : ${styles.appProperties.mainText_Color};
+ margin-right : 5px;
+ }
+ .expandCollapseButton {}
+ .arrow {
+ margin-right : 15px;
+ color : ${styles.appProperties.icon_Color};
+ font-weight : bold;
+ cursor : pointer;
+ font-size : 14px;
+ }
+ .arrow:hover {
+ color : ${styles.appProperties.icon_HoverColor};
+ }
+
+`
diff --git a/src/app/ui/styles-guide/style-guide.js b/src/app/ui/styles-guide/style-guide.js
index 05e4ddf171..3f161d3c69 100644
--- a/src/app/ui/styles-guide/style-guide.js
+++ b/src/app/ui/styles-guide/style-guide.js
@@ -390,7 +390,12 @@ function styleGuide () {
tooltip_CopyToClipboard_Color: appProperties.tooltip_Color,
icon_Color_CopyToClipboard: appProperties.icon_Color,
- icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor
+ icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor,
+
+ solidBox: appProperties.uiElements.solidBorderBox({
+ BackgroundColor: appProperties.solidBox_BackgroundColor,
+ Color: appProperties.solidBox_TextColor
+ })
},
/* ------------------------------------------------------
@@ -569,6 +574,12 @@ function styleGuide () {
Color: appProperties.solidBox_TextColor
}),
+ box_Info_RunTab: appProperties.uiElements.dottedBorderBox({
+ BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+ BorderColor: appProperties.solidBorderBox_BorderColor,
+ Color: appProperties.solidBorderBox_TextColor
+ }),
+
dropdown_RunTab: appProperties.uiElements.dropdown({
BackgroundColor: appProperties.dropdown_BackgroundColor,
BorderColor: appProperties.dropdown_BorderColor,
diff --git a/src/app/ui/styles/dropdown-styles.js b/src/app/ui/styles/dropdown-styles.js
index 1a84d46cad..a36bac36b1 100644
--- a/src/app/ui/styles/dropdown-styles.js
+++ b/src/app/ui/styles/dropdown-styles.js
@@ -10,6 +10,7 @@ var css = csjs`
display : flex;
flex-direction : column;
margin-right : 10px;
+ width : auto;
}
.selectbox {
display : flex;
diff --git a/src/recorder.js b/src/recorder.js
index 265e4c1db7..0ba76dbbca 100644
--- a/src/recorder.js
+++ b/src/recorder.js
@@ -131,6 +131,7 @@ class Recorder {
append (timestamp, record) {
var self = this
self.data.journal.push({ timestamp, record })
+ self.event.trigger('newTxRecorded', [self.data.journal.length])
}
/**
@@ -167,6 +168,7 @@ class Recorder {
self.data._abis = {}
self.data._contractABIReferences = {}
self.data._linkReferences = {}
+ self.event.trigger('cleared', [])
}
/**
diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js
index 97a05941ca..4d15387aa2 100644
--- a/src/universal-dapp-styles.js
+++ b/src/universal-dapp-styles.js
@@ -10,7 +10,7 @@ var css = csjs`
.title {
${styles.rightPanel.runTab.titlebox_RunTab}
display: flex;
- justify-content: end;
+ justify-content: space-between;
align-items: center;
font-size: 11px;
height: 30px;
@@ -20,6 +20,9 @@ var css = csjs`
line-height: initial;
overflow: visible;
margin-bottom: 10px;
+ }
+ .noInstancesText {
+
}
.titleLine {
display: flex;
@@ -35,11 +38,9 @@ var css = csjs`
color: ${styles.rightPanel.runTab.icon_AltColor_Instance_CopyToClipboard};
}
.instance {
- ${styles.rightPanel.runTab.box_Instance};
- margin-bottom: 10px;
- padding: 10px 15px 15px 15px;
- position: relative;
- overflow: visible;
+ min-width: 310px;
+ display: flex;
+ flex-direction: column;
}
.instance .title:before {
content: "\\25BE";
@@ -81,7 +82,9 @@ var css = csjs`
.closeIcon {
font-size: 12px;
cursor: pointer;
+ margin-left: 5px;
}
+ .udapp {}
.udappClose {
display: flex;
justify-content: flex-end;
@@ -211,7 +214,7 @@ var css = csjs`
margin-right: 5%;
font-size: 10px;
border-width: 1px;
- width: inherit;
+ width: inherit;
}
.multiHeader button {
display: inline-block;
diff --git a/src/universal-dapp-ui.js b/src/universal-dapp-ui.js
index a43f5b56a2..4d61e6649c 100644
--- a/src/universal-dapp-ui.js
+++ b/src/universal-dapp-ui.js
@@ -14,7 +14,6 @@ var MultiParamManager = require('./multiParamManager')
function UniversalDAppUI (udapp, opts = {}) {
var self = this
this.udapp = udapp
-
self.el = yo`
`
}
@@ -23,6 +22,10 @@ UniversalDAppUI.prototype.reset = function () {
}
UniversalDAppUI.prototype.renderInstance = function (contract, address, contractName) {
+ var noInstances = document.querySelector('[class^="noInstancesText"]')
+ if (noInstances) {
+ noInstances.parentNode.removeChild(noInstances)
+ }
var abi = this.udapp.getABI(contract)
return this.renderInstanceFromABI(abi, address, contractName)
}
@@ -33,22 +36,25 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract
// this returns a DOM element
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 instance = yo`
`
var context = self.udapp.context()
var shortAddress = helper.shortenAddress(address)
- var title = yo`
+ var title = yo`
+
${contractName} at ${shortAddress} (${context})
${copyToClipboard(() => address)}
`
if (self.udapp.removable_instances) {
var close = yo`
`
- instance.appendChild(close)
+ title.appendChild(close)
+ }
+
+ function remove () {
+ instance.remove()
+ // @TODO perhaps add a callack here to warn the caller that the instance has been removed
}
function toggleClass () {
diff --git a/test-browser/helpers/contracts.js b/test-browser/helpers/contracts.js
index c9b26d9d25..38456add66 100644
--- a/test-browser/helpers/contracts.js
+++ b/test-browser/helpers/contracts.js
@@ -43,7 +43,7 @@ function getCompiledContracts (browser, compiled, callback) {
function createContract (browser, inputParams, callback) {
browser.click('.runView')
.setValue('div[class^="contractActionsContainerSingle"] input', inputParams, function () {
- browser.click('#runTabView button[class^="instanceButton"]').perform(function () { callback() })
+ browser.click('#runTabView button[class^="instanceButton"]').pause(500).perform(function () { callback() })
})
}
diff --git a/test-browser/tests/ballot.js b/test-browser/tests/ballot.js
index 55025119bd..4e7b4b3ae7 100644
--- a/test-browser/tests/ballot.js
+++ b/test-browser/tests/ballot.js
@@ -36,6 +36,8 @@ function runTests (browser, testData) {
}).click('.runView')
.setValue('input[placeholder="uint8 _numProposals"]', '1')
.click('#runTabView button[class^="instanceButton"]')
+ .waitForElementPresent('.instance:nth-of-type(2)')
+ .click('.instance:nth-of-type(2)')
.testFunction('delegate - transact (not payable)', '0x0571a2439ea58bd349dd130afb8aff62a33af14c06de0dbc3928519bdf13ce2e',
`[vm]\nfrom:0xca3...a733c\nto:Ballot.delegate(address) 0x692...77b3a\nvalue:0 wei\ndata:0x5c1...4d2db\nlogs:0\nhash:0x057...3ce2e`,
{types: 'address to', values: '"0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db"'}, null, null)
@@ -83,9 +85,10 @@ function runTests (browser, testData) {
done()
})
})
+ .pause(500)
.perform((client, done) => {
console.log('delegate - transact (not payable)')
- browser.testFunction('delegate - transact (not payable)', '0xd3cd54e2f76f3993078ecf9e1b54a148def4520afc141a182293b3610bddf10f',
+ browser.waitForElementPresent('.instance:nth-of-type(2)').click('.instance:nth-of-type(2)').testFunction('delegate - transact (not payable)', '0xd3cd54e2f76f3993078ecf9e1b54a148def4520afc141a182293b3610bddf10f',
`[vm]\nfrom:0xca3...a733c\nto:Ballot.delegate(address) 0x692...77b3a\nvalue:0 wei\ndata:0x5c1...4d2db\nlogs:0\nhash:0xd3c...df10f`,
{types: 'address to', values: '"0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db"'}, null, null, () => { done() })
}).end()
diff --git a/test-browser/tests/compiling.js b/test-browser/tests/compiling.js
index 0090af7d55..0bf18bb7e8 100644
--- a/test-browser/tests/compiling.js
+++ b/test-browser/tests/compiling.js
@@ -39,7 +39,8 @@ function testSimpleContract (browser, callback) {
contractHelper.testContracts(browser, 'Untitled.sol', sources[0]['browser/Untitled.sol'], ['TestContract'], function () {
browser.click('.runView')
.click('#runTabView button[class^="instanceButton"]')
- .pause(500)
+ .waitForElementPresent('.instance:nth-of-type(2)')
+ .click('.instance:nth-of-type(2)')
.click('#runTabView .instance div[class^="title"]')
.click('#runTabView .instance div[class^="title"]')
.testFunction('f - transact (not payable)',
@@ -69,7 +70,8 @@ function testReturnValues (browser, callback) {
contractHelper.testContracts(browser, 'returnValues.sol', sources[1]['browser/returnValues.sol'], ['testReturnValues'], function () {
browser.click('.runView')
.click('#runTabView button[class^="instanceButton"]')
- .pause(500)
+ .waitForElementPresent('.instance:nth-of-type(2)')
+ .click('.instance:nth-of-type(2)')
.testFunction('retunValues1 - transact (not payable)',
'0x79dc928d149d2ade02ab610a8ae290636222d034d4adce0bb08a68401e3d1f7f',
`[vm]\nfrom:0xca3...a733c\nto:testReturnValues.retunValues1() 0x5e7...26e9f\nvalue:0 wei\ndata:0x9ed...59eb7\nlogs:0\nhash:0x79d...d1f7f`,
@@ -107,7 +109,8 @@ function testInputValues (browser, callback) {
contractHelper.testContracts(browser, 'inputValues.sol', sources[2]['browser/inputValues.sol'], ['test'], function () {
browser.click('.runView')
.click('#runTabView button[class^="instanceButton"]')
- .pause(500)
+ .waitForElementPresent('.instance:nth-of-type(2)')
+ .click('.instance:nth-of-type(2)')
.testFunction('inputValue1 - transact (not payable)',
'0x917a873d27d105213eaf5461e14780387ccceb66fed574f8432d1963917832ae',
`[vm]\nfrom:0xca3...a733c\nto:test.inputValue1(uint256,int256,string) 0x8c1...401f5\nvalue:0 wei\ndata:0xd69...00000\nlogs:0\nhash:0x917...832ae`,
diff --git a/test-browser/tests/units/testRecorder.js b/test-browser/tests/units/testRecorder.js
index 3dc481d515..2258594352 100644
--- a/test-browser/tests/units/testRecorder.js
+++ b/test-browser/tests/units/testRecorder.js
@@ -10,7 +10,12 @@ module.exports = {
contractHelper.addFile(browser, 'scenario.json', {content: records}, () => {
browser
.click('.runView')
+ .click('div[class^="cardContainer"] i[class^="arrow"]')
.click('#runTabView .runtransaction')
+ .waitForElementPresent('.instance:nth-of-type(2)')
+ .click('.instance:nth-of-type(2)')
+ .waitForElementPresent('.instance:nth-of-type(3)')
+ .click('.instance:nth-of-type(3)')
.clickFunction('getInt - call')
.clickFunction('getAddress - call')
.clickFunction('getFromLib - call')
@@ -31,6 +36,8 @@ module.exports = {
done()
})
})
+ .waitForElementPresent('.instance:nth-of-type(2)')
+ .click('.instance:nth-of-type(2)')
.perform((client, done) => {
browser.clickFunction('set - transact (not payable)', {types: 'uint256 _p', values: '34'})
.click('i.savetransaction').modalFooterOKClick().getEditorValue(function (result) {