From d98bc3820f151b68da44dca8089b89e409b18a69 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Thu, 26 Apr 2018 01:54:02 +0100 Subject: [PATCH 01/12] Change button names and add instanceContainerTitle --- src/app/tabs/run-tab.js | 150 ++++++++++++++------------ src/app/tabs/styles/run-tab-styles.js | 4 + src/universal-dapp-ui.js | 11 +- 3 files changed, 96 insertions(+), 69 deletions(-) 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}
${atAddressButtonInput} -
At Address
+
Access
@@ -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)} - -
-
-
Gas limit
- -
- -
-
Value
- - -
-
+ + var environmentEl = yo` +
+
+ Environment +
+
+ ${net} + + +
+
+ ` + var accountEl = yo` +
+
Account
+ + ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)} + +
+ ` + var gasPriceEl = yo` +
+
Gas limit
+ +
` + var valueEl = yo` +
+
Value
+ + +
+ ` + var el = yo` +
+ ${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}`) } From 41c0518d284713288bea13a4e64aff28baeb51b4 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Fri, 27 Apr 2018 02:17:37 +0100 Subject: [PATCH 02/12] Add card.js, move pending to terminal and restructure recorder --- src/app.js | 3 +- src/app/panels/editor-panel.js | 1 + src/app/panels/styles/terminal-styles.js | 27 +- src/app/panels/terminal.js | 32 ++- src/app/tabs/run-tab.js | 303 +++++++++++++---------- src/app/tabs/styles/run-tab-styles.js | 32 ++- src/app/ui/card.js | 93 +++++++ src/app/ui/styles-guide/style-guide.js | 13 +- src/app/ui/styles/dropdown-styles.js | 1 + src/recorder.js | 1 + src/universal-dapp-styles.js | 13 +- src/universal-dapp-ui.js | 7 +- 12 files changed, 366 insertions(+), 160 deletions(-) create mode 100644 src/app/ui/card.js diff --git a/src/app.js b/src/app.js index ffe04d296a..f033514446 100644 --- a/src/app.js +++ b/src/app.js @@ -523,7 +523,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org editor: self._components.editor, config: self._api.config, txListener: txlistener, - contextview: self._components.contextView + contextview: self._components.contextView, + udapp: () => { return udapp } } }) this._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction)) diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js index ac93a5c0ab..4762ffa41c 100644 --- a/src/app/panels/editor-panel.js +++ b/src/app/panels/editor-panel.js @@ -28,6 +28,7 @@ class EditorPanel { terminal: new Terminal({ api: { cmdInterpreter: self._api.cmdInterpreter, + udapp: self._api.udapp, getPosition (event) { var limitUp = 36 var limitDown = 20 diff --git a/src/app/panels/styles/terminal-styles.js b/src/app/panels/styles/terminal-styles.js index d0dda05a41..5b700a727c 100644 --- a/src/app/panels/styles/terminal-styles.js +++ b/src/app/panels/styles/terminal-styles.js @@ -27,20 +27,20 @@ var css = csjs` display : flex; align-items : center; width : 100%; - padding : 5px; } .clear { - margin-left : 10px; - margin-right : 10px; + margin-right : 20px; width : 10px; cursor : pointer; color : ${styles.terminal.icon_Color_TogglePanel}; + display : flex; } .clear:hover { color : ${styles.terminal.icon_HoverColor_Menu}; } .toggleTerminal { - margin-right : 10px; + margin-right : 20px; + margin-left : 20px; font-size : 14px; font-weight : bold; cursor : pointer; @@ -56,6 +56,7 @@ var css = csjs` height : 100%; overflow-y : auto; font-family : monospace; + margin : 0px; } .terminal_bg { display : flex; @@ -137,9 +138,21 @@ var css = csjs` align-items : center; justify-content : center; } - .listen { - min-width : 120px; - display : flex; + .listen {} + .verticalLine { + border-left : 1px solid ${styles.colors.veryLightGrey}; + height : 65%; + margin-right : 30px; } + .pendingTx { + border : 1px solid ${styles.terminal.icon_HoverColor_Menu}; + border-radius: 50%; + margin-right: 30px; + min-width: 13px; + height: 13px; + display: flex; + justify-content: center; + align-items: center; + font-size: 10px; } .dragbarHorizontal { position : absolute; diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js index 70716208e8..e28111eae4 100644 --- a/src/app/panels/terminal.js +++ b/src/app/panels/terminal.js @@ -105,23 +105,40 @@ class Terminal { ${self._view.input}
` - self._view.icon = yo`` - self._view.dragbar = yo`
` + self._view.icon = yo` + ` + self._view.dragbar = yo` +
` self._view.dropdown = self._components.dropdown.render() + self._view.pendingTxCount = yo`
${self._view.pendingTxCount}
` self._view.bar = yo`
${self._view.dragbar}
${self._view.icon}
- + +
+ ${self._view.pendingTxCount} +
+
+
${self._view.dropdown} -
-
+
+ + +
` + setInterval(() => { + updatePendingTxs(self._api, self._view.pendingTxCount) + }, 5000) + function listenOnNetwork (ev) { self.event.trigger('listenOnNetWork', [ev.currentTarget.checked]) } @@ -563,5 +580,10 @@ function domTerminalFeatures (self, scopedCommands) { } function blockify (el) { return yo`
${el}
` } +// PENDING TX +function updatePendingTxs (api, el) { + var count = Object.keys(api.udapp().pendingTransactions()).length + el.innerText = count +} module.exports = Terminal diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js index 785c97318e..376959d826 100644 --- a/src/app/tabs/run-tab.js +++ b/src/app/tabs/run-tab.js @@ -1,76 +1,116 @@ 'use strict' var $ = require('jquery') var yo = require('yo-yo') -var helper = require('../../lib/helper.js') var remixLib = require('remix-lib') +var ethJSUtil = require('ethereumjs-util') +var csjs = require('csjs-inject') var txExecution = remixLib.execution.txExecution var txFormat = remixLib.execution.txFormat var txHelper = remixLib.execution.txHelper +var EventManager = remixLib.EventManager +var helper = require('../../lib/helper.js') var executionContext = require('../../execution-context') var modalDialogCustom = require('../ui/modal-dialog-custom') var copyToClipboard = require('../ui/copy-to-clipboard') +var Card = require('../ui/card') var Recorder = require('../../recorder') -var EventManager = remixLib.EventManager var addTooltip = require('../ui/tooltip') -var ethJSUtil = require('ethereumjs-util') -var MultiParamManager = require('../../multiParamManager') - -var csjs = require('csjs-inject') var css = require('./styles/run-tab-styles') +var MultiParamManager = require('../../multiParamManager') -var instanceContainer = yo`
` - -var instanceContainerTitle = yo` -
UDapps of deployed contracts
` -var noInstancesText = yo` -
Currently you have no contract instances.
` +function runTab (appAPI = {}, appEvents = {}, opts = {}) { + /* ------------------------- + VARIABLES + --------------------------- */ + var self = this + var event = new EventManager() + self._view = {} + self.data = { + count: 0, + text: `All transactions (deployed contracts and function executions) + in this environment can be saved and replayed in + another environment. i.e. Transactions created in + Javascript VM can be replayed in the Ropsten network.` + } -var pendingTxsText = yo`0 pending transactions` + self._view.recorderCount = yo`0` + self._view.instanceContainer = yo`
` + self._view.clearInstanceElement = yo` + clearInstanceList(self)} + title="Clear instances list and reset recorder" aria-hidden="true"> + ` + self._view.instanceContainerTitle = yo` +
+ UI for Deployed Contracts + ${self._view.clearInstanceElement} +
` + self._view.noInstancesText = yo` +
+ Currently you have no contract instances to interact with. +
` -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 recorderInterface = makeRecorder(event, appAPI, appEvents, opts, self) - clearInstanceElement.addEventListener('click', () => { - event.trigger('clearInstance', []) - }) - var recorderInterface = makeRecorder(event, appAPI, appEvents, opts) - var pendingTxsContainer = yo` -
-
- ${pendingTxsText} - + self._view.collapsedView = yo` +
+
${self._view.recorderCount}
+
` + + self._view.expandedView = yo` +
+
+ ${self.data.text} +
+
${recorderInterface.recordButton} ${recorderInterface.runButton} - ${clearInstanceElement} - -
-
` +
+
+ ` + + self.recorderOpts = { + title: 'Events recorded:', + collapsedView: self._view.collapsedView + } + var recorderCard = new Card({}, {}, self.recorderOpts) + recorderCard.event.register('expandCollapseCard', (arrow, body, status) => { + body.innerHTML = '' + status.innerHTML = '' + if (arrow === 'up') { + status.appendChild(self._view.collapsedView) + body.appendChild(self._view.expandedView) + } else if (arrow === 'down') { + status.appendChild(self._view.collapsedView) + } + }) + /* ------------------------- + MAIN HTML ELEMENT + --------------------------- */ var el = yo`
${settings(container, appAPI, appEvents, opts)} - ${contractDropdown(event, appAPI, appEvents, opts, instanceContainer)} - ${pendingTxsContainer} - ${instanceContainer} + ${contractDropdown(event, appAPI, appEvents, opts, self)} + ${recorderCard.render()} + ${self._view.instanceContainer}
` container.appendChild(el) - // PENDING transactions - function updatePendingTxs (container, appAPI) { - var pendingCount = Object.keys(opts.udapp.pendingTransactions()).length - pendingTxsText.innerText = pendingCount + ' pending transactions' - } + /* ------------------------- + HELPER FUNCTIONS + --------------------------- */ // DROPDOWN var selectExEnv = el.querySelector('#selectExEnvOptions') + function clearInstanceList (self) { + event.trigger('clearInstance', []) + self._view.recorderCount.innerText = 0 + } + function setFinalContext () { // set the final context. Cause it is possible that this is not the one we've originaly selected selectExEnv.value = executionContext.getProvider() @@ -95,20 +135,23 @@ function runTab (appAPI = {}, appEvents = {}, opts = {}) { modalDialogCustom.alert(alertMsg) }, setFinalContext) }) + selectExEnv.value = executionContext.getProvider() executionContext.event.register('contextChanged', (context, silent) => { setFinalContext() }) + fillAccountsList(appAPI, opts, el) setInterval(() => { updateAccountBalances(container, appAPI) - updatePendingTxs(container, appAPI) }, 10000) event.register('clearInstance', () => { + var instanceContainer = self._view.instanceContainer + var instanceContainerTitle = self._view.instanceContainerTitle instanceContainer.innerHTML = '' // clear the instances list instanceContainer.appendChild(instanceContainerTitle) - instanceContainer.appendChild(noInstancesText) + instanceContainer.appendChild(self._view.noInstancesText) }) return { render () { return container } } } @@ -141,9 +184,9 @@ function updateAccountBalances (container, appAPI) { } /* ------------------------------------------------ - RECORDER + RECORDER ------------------------------------------------ */ -function makeRecorder (events, appAPI, appEvents, opts) { +function makeRecorder (events, appAPI, appEvents, opts, self) { var recorder = new Recorder(opts.compiler, { events: { udapp: appEvents.udapp, @@ -152,23 +195,26 @@ function makeRecorder (events, appAPI, appEvents, opts) { }, api: appAPI }) + recorder.event.register('newTxRecorded', (count) => { + self.data.count = count + self._view.recorderCount.innerText = count + }) var css2 = csjs` - .container, - .runTxs, - .recorder { - } + .container {} + .runTxs {} + .recorder {} ` + var runButton = yo`` var recordButton = yo` ` - var runButton = yo`` 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 => { + modalDialogCustom.prompt(null, 'Transactions will be saved in a file under ' + path, 'scenario.json', input => { var fileProvider = appAPI.fileProviderOf(path) if (fileProvider) { var newFile = path + input @@ -183,6 +229,7 @@ function makeRecorder (events, appAPI, appEvents, opts) { } }) } + runButton.onclick = () => { var currentFile = appAPI.config.get('currentFile') appAPI.fileProviderOf(currentFile).get(currentFile, (error, json) => { @@ -201,9 +248,10 @@ function makeRecorder (events, appAPI, appEvents, opts) { return modalDialogCustom.alert('Invalid Scenario File, please try again') } if (txArray.length) { + var noInstancesText = self._view.noInstancesText 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)) + recorder.run(txArray, accounts, options, abis, linkReferences, (abi, address, contractName) => { + self._view.instanceContainer.appendChild(opts.udappUI.renderInstanceFromABI(abi, address, contractName)) }) } } else { @@ -212,15 +260,18 @@ function makeRecorder (events, appAPI, appEvents, opts) { } }) } + return { recordButton, runButton } } /* ------------------------------------------------ CONTRACT (deploy or access deployed) ------------------------------------------------ */ -function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) { +function contractDropdown (events, appAPI, appEvents, opts, self) { + var instanceContainer = self._view.instanceContainer + var instanceContainerTitle = self._view.instanceContainerTitle instanceContainer.appendChild(instanceContainerTitle) - instanceContainer.appendChild(noInstancesText) + instanceContainer.appendChild(self._view.noInstancesText) var compFails = yo`` appEvents.compiler.register('compilationFinished', function (success, data, source) { getContractNames(success, data) @@ -234,7 +285,6 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) { }) var atAddressButtonInput = yo`` - var selectContractNames = yo`` function getSelectedContract () { @@ -248,6 +298,7 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) { return null } appAPI.getSelectedContract = getSelectedContract + var createPanel = yo`
` var el = yo` @@ -281,7 +332,7 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) { selectContractNames.addEventListener('change', setInputParamsPlaceHolder) - // ADD BUTTONS AT ADDRESS AND CREATE + // DEPLOY INSTANCE function createInstance (args) { var selectedContract = getSelectedContract() @@ -304,7 +355,7 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) { return } } - if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } + self._view.noInstancesText.style.display = 'none' var address = isVM ? txResult.result.createdAddress : txResult.result.contractAddress instanceContainer.appendChild(opts.udappUI.renderInstance(selectedContract.contract.object, address, selectContractNames.value)) } else { @@ -322,8 +373,9 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) { }) } + // ACCESS DEPLOYED INSTANCE function loadFromAddress (appAPI) { - if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } + self._view.noInstancesText.style.display = 'none' var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) var address = atAddressButtonInput.value if (!ethJSUtil.isValidAddress(address)) { @@ -365,12 +417,11 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) { return el } - /* ------------------------------------------------ section SETTINGS: Environment, Account, Gas, Value ------------------------------------------------ */ function settings (container, appAPI, appEvents, opts) { - // SETTINGS HTML + // VARIABLES var net = yo`` const updateNetwork = () => { executionContext.detectNetwork((err, { id, name } = {}) => { @@ -382,86 +433,86 @@ function settings (container, appAPI, appEvents, opts) { } }) } - setInterval(updateNetwork, 5000) - function newAccount () { - opts.udapp.newAccount('', (error, address) => { - if (!error) { - container.querySelector('#txorigin').appendChild(yo``) - addTooltip(`account ${address} created`) - } else { - addTooltip('Cannot create an account: ' + error) - } - }) - } - var environmentEl = yo` -
-
- Environment -
-
- ${net} - - -
-
+
+
+ Environment +
+
+ ${net} + + +
+
` var accountEl = yo` -
-
Account
- - ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)} - -
+
+
Account
+ + ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)} + +
` var gasPriceEl = yo` -
-
Gas limit
- -
+
+
Gas limit
+ +
` var valueEl = yo` -
-
Value
- - -
+
+
Value
+ + +
` + // DOM ELEMENT var el = yo` -
- ${environmentEl} - ${accountEl} - ${gasPriceEl} - ${valueEl} -
-` - - // EVENTS +
+ ${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 ed15a35130..fa680d9d94 100644 --- a/src/app/tabs/styles/run-tab-styles.js +++ b/src/app/tabs/styles/run-tab-styles.js @@ -9,8 +9,11 @@ var css = csjs` flex-direction: column; } .instanceContainerTitle { - font-size: 20px; font-weight: bold; + margin-bottom: 5%; + font-size: 12px; + display: flex; + justify-content: space-between; } .settings { ${styles.rightPanel.runTab.box_RunTab} @@ -58,11 +61,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} @@ -74,8 +79,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%; @@ -109,6 +122,7 @@ var css = csjs` .noInstancesText { ${styles.rightPanel.runTab.box_Instance} font-style: italic; + text-align: left; } .pendingTxsText { ${styles.rightPanel.runTab.borderBox_Instance} @@ -180,14 +194,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` +
+
+
${self._opts.title}
+ ${self._view.statusBar} +
+
${self._view.expandCollapseButton}
+
` + + 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..630d7152f0 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]) } /** diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js index 97a05941ca..10df4ae302 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; @@ -35,11 +35,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,6 +79,7 @@ var css = csjs` .closeIcon { font-size: 12px; cursor: pointer; + margin-left: 5px; } .udappClose { display: flex; @@ -211,7 +210,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 43894d9611..010cd85670 100644 --- a/src/universal-dapp-ui.js +++ b/src/universal-dapp-ui.js @@ -34,9 +34,8 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) { var self = this - 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) @@ -48,7 +47,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address if (self.udapp.removable_instances) { var close = yo`
` - instance.appendChild(close) + title.appendChild(close) } function remove () { @@ -57,7 +56,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address instanceContainer.appendChild(noInstancesText) instance.remove() } - + function toggleClass () { $(instance).toggleClass(`${css.hidesub}`) } From d1c2aa900987d5052cd2d0616db8e04de8893b5f Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Fri, 27 Apr 2018 05:11:34 +0100 Subject: [PATCH 03/12] Fix bugs --- src/app/tabs/run-tab.js | 6 ++++-- src/app/tabs/styles/run-tab-styles.js | 11 +++++++++++ src/universal-dapp-styles.js | 3 +++ src/universal-dapp-ui.js | 17 ++++++++++++----- 4 files changed, 30 insertions(+), 7 deletions(-) diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js index 376959d826..6eb7104abc 100644 --- a/src/app/tabs/run-tab.js +++ b/src/app/tabs/run-tab.js @@ -355,7 +355,8 @@ function contractDropdown (events, appAPI, appEvents, opts, self) { return } } - self._view.noInstancesText.style.display = 'none' + var noInstancesText = self._view.noInstancesText + 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 { @@ -375,7 +376,8 @@ function contractDropdown (events, appAPI, appEvents, opts, self) { // ACCESS DEPLOYED INSTANCE function loadFromAddress (appAPI) { - self._view.noInstancesText.style.display = 'none' + var noInstancesText = self._view.noInstancesText + if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) var address = atAddressButtonInput.value if (!ethJSUtil.isValidAddress(address)) { diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js index fa680d9d94..56916dc25d 100644 --- a/src/app/tabs/styles/run-tab-styles.js +++ b/src/app/tabs/styles/run-tab-styles.js @@ -20,6 +20,17 @@ var css = csjs` 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; diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js index 10df4ae302..8ac6cb18a8 100644 --- a/src/universal-dapp-styles.js +++ b/src/universal-dapp-styles.js @@ -20,6 +20,9 @@ var css = csjs` line-height: initial; overflow: visible; margin-bottom: 10px; + } + .noInstancesText { + } .titleLine { display: flex; diff --git a/src/universal-dapp-ui.js b/src/universal-dapp-ui.js index 010cd85670..54f0eccb68 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,7 +36,6 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract // this returns a DOM element UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) { var self = this - address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex') var instance = yo`
` var context = self.udapp.context() @@ -51,10 +53,15 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address } function remove () { - var instanceContainer = document.querySelector('[class^="instanceContainer"]') - var noInstancesText = yo`
Currently you have no contract instances.
` - instanceContainer.appendChild(noInstancesText) instance.remove() + var instanceContainer = document.querySelector('[class^="instanceContainer"]') + if (instanceContainer.children.length === 1) { + var noInstancesText = yo` +
+ Currently you have no contract instances to interact with. +
` + instanceContainer.appendChild(noInstancesText) + } } function toggleClass () { From af79fce9cf6ce94dacb7ccd5e5fbfb9dad7e17a7 Mon Sep 17 00:00:00 2001 From: yann300 Date: Fri, 27 Apr 2018 14:53:36 +0200 Subject: [PATCH 04/12] fix test --- test-browser/helpers/contracts.js | 2 +- test-browser/tests/ballot.js | 2 ++ test-browser/tests/compiling.js | 3 +++ test-browser/tests/units/testRecorder.js | 1 + 4 files changed, 7 insertions(+), 1 deletion(-) 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..4599769542 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"]') + .pause(500) + .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) diff --git a/test-browser/tests/compiling.js b/test-browser/tests/compiling.js index 0090af7d55..a48fa491d7 100644 --- a/test-browser/tests/compiling.js +++ b/test-browser/tests/compiling.js @@ -40,6 +40,7 @@ function testSimpleContract (browser, callback) { browser.click('.runView') .click('#runTabView button[class^="instanceButton"]') .pause(500) + .click('.instance:nth-of-type(2)') .click('#runTabView .instance div[class^="title"]') .click('#runTabView .instance div[class^="title"]') .testFunction('f - transact (not payable)', @@ -70,6 +71,7 @@ function testReturnValues (browser, callback) { browser.click('.runView') .click('#runTabView button[class^="instanceButton"]') .pause(500) + .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`, @@ -108,6 +110,7 @@ function testInputValues (browser, callback) { browser.click('.runView') .click('#runTabView button[class^="instanceButton"]') .pause(500) + .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..1789294a55 100644 --- a/test-browser/tests/units/testRecorder.js +++ b/test-browser/tests/units/testRecorder.js @@ -31,6 +31,7 @@ module.exports = { done() }) }) + .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) { From 08f1d7ccb31ec5bfba1522c9737baa46fb3e826c Mon Sep 17 00:00:00 2001 From: yann300 Date: Fri, 27 Apr 2018 14:59:33 +0200 Subject: [PATCH 05/12] fix test --- test-browser/tests/units/testRecorder.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test-browser/tests/units/testRecorder.js b/test-browser/tests/units/testRecorder.js index 1789294a55..6ac1d40758 100644 --- a/test-browser/tests/units/testRecorder.js +++ b/test-browser/tests/units/testRecorder.js @@ -10,6 +10,7 @@ module.exports = { contractHelper.addFile(browser, 'scenario.json', {content: records}, () => { browser .click('.runView') + .click('div[class^="cardContainer"] i[class^="arrow"]') .click('#runTabView .runtransaction') .clickFunction('getInt - call') .clickFunction('getAddress - call') From cc2de917fde827b80e0375487ae7fd901f22c147 Mon Sep 17 00:00:00 2001 From: yann300 Date: Sun, 29 Apr 2018 09:02:17 +0200 Subject: [PATCH 06/12] fix test --- test-browser/tests/ballot.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test-browser/tests/ballot.js b/test-browser/tests/ballot.js index 4599769542..2b7a60f3a5 100644 --- a/test-browser/tests/ballot.js +++ b/test-browser/tests/ballot.js @@ -85,6 +85,7 @@ function runTests (browser, testData) { done() }) }) + .click('.instance:nth-of-type(2)') .perform((client, done) => { console.log('delegate - transact (not payable)') browser.testFunction('delegate - transact (not payable)', '0xd3cd54e2f76f3993078ecf9e1b54a148def4520afc141a182293b3610bddf10f', From 77ca891fd95b501915e38fe473a9e5ac0e2bf97b Mon Sep 17 00:00:00 2001 From: yann300 Date: Sun, 29 Apr 2018 09:33:08 +0200 Subject: [PATCH 07/12] fix test --- test-browser/tests/ballot.js | 6 +++--- test-browser/tests/compiling.js | 6 +++--- test-browser/tests/units/testRecorder.js | 1 + 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/test-browser/tests/ballot.js b/test-browser/tests/ballot.js index 2b7a60f3a5..4e7b4b3ae7 100644 --- a/test-browser/tests/ballot.js +++ b/test-browser/tests/ballot.js @@ -36,7 +36,7 @@ function runTests (browser, testData) { }).click('.runView') .setValue('input[placeholder="uint8 _numProposals"]', '1') .click('#runTabView button[class^="instanceButton"]') - .pause(500) + .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`, @@ -85,10 +85,10 @@ function runTests (browser, testData) { done() }) }) - .click('.instance:nth-of-type(2)') + .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 a48fa491d7..0bf18bb7e8 100644 --- a/test-browser/tests/compiling.js +++ b/test-browser/tests/compiling.js @@ -39,7 +39,7 @@ 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"]') @@ -70,7 +70,7 @@ 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', @@ -109,7 +109,7 @@ 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', diff --git a/test-browser/tests/units/testRecorder.js b/test-browser/tests/units/testRecorder.js index 6ac1d40758..d3aee3f008 100644 --- a/test-browser/tests/units/testRecorder.js +++ b/test-browser/tests/units/testRecorder.js @@ -32,6 +32,7 @@ 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'}) From c234f40b057d46fffb4bc9dcc5552c7013414c02 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Thu, 10 May 2018 00:31:45 -0400 Subject: [PATCH 08/12] Fixing a recorder --- src/app/tabs/run-tab.js | 15 ++++++++------- src/universal-dapp-styles.js | 3 ++- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js index 6eb7104abc..cfda58271b 100644 --- a/src/app/tabs/run-tab.js +++ b/src/app/tabs/run-tab.js @@ -24,13 +24,14 @@ function runTab (appAPI = {}, appEvents = {}, opts = {}) { --------------------------- */ var self = this var event = new EventManager() + appEvents.eventManager = event self._view = {} self.data = { count: 0, text: `All transactions (deployed contracts and function executions) in this environment can be saved and replayed in another environment. i.e. Transactions created in - Javascript VM can be replayed in the Ropsten network.` + Javascript VM can be replayed in the Injected Web3.` } self._view.recorderCount = yo`0` @@ -51,7 +52,7 @@ function runTab (appAPI = {}, appEvents = {}, opts = {}) { ` var container = yo`
` - var recorderInterface = makeRecorder(event, appAPI, appEvents, opts, self) + var recorderInterface = makeRecorder(appAPI, appEvents, opts, self) self._view.collapsedView = yo`
@@ -186,12 +187,12 @@ function updateAccountBalances (container, appAPI) { /* ------------------------------------------------ RECORDER ------------------------------------------------ */ -function makeRecorder (events, appAPI, appEvents, opts, self) { +function makeRecorder (appAPI, appEvents, opts, self) { var recorder = new Recorder(opts.compiler, { events: { udapp: appEvents.udapp, executioncontext: executionContext.event, - runtab: events + runtab: appEvents.eventManager }, api: appAPI }) @@ -241,8 +242,8 @@ function makeRecorder (events, appAPI, appEvents, opts, self) { var obj = JSON.parse(json) var txArray = obj.transactions || [] var accounts = obj.accounts || [] - var options = obj.options - var abis = obj.abis + var options = obj.options || {} + var abis = obj.abis || {} var linkReferences = obj.linkReferences || {} } catch (e) { return modalDialogCustom.alert('Invalid Scenario File, please try again') @@ -250,7 +251,7 @@ function makeRecorder (events, appAPI, appEvents, opts, self) { if (txArray.length) { var noInstancesText = self._view.noInstancesText if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } - recorder.run(txArray, accounts, options, abis, linkReferences, (abi, address, contractName) => { + recorder.run(txArray, accounts, options, abis, linkReferences, opts.udapp, (abi, address, contractName) => { self._view.instanceContainer.appendChild(opts.udappUI.renderInstanceFromABI(abi, address, contractName)) }) } diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js index 8ac6cb18a8..4d15387aa2 100644 --- a/src/universal-dapp-styles.js +++ b/src/universal-dapp-styles.js @@ -22,7 +22,7 @@ var css = csjs` margin-bottom: 10px; } .noInstancesText { - + } .titleLine { display: flex; @@ -84,6 +84,7 @@ var css = csjs` cursor: pointer; margin-left: 5px; } + .udapp {} .udappClose { display: flex; justify-content: flex-end; From 05d42a342b91636d388bd67efe414e4c87df4cf4 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Thu, 10 May 2018 00:59:46 -0400 Subject: [PATCH 09/12] Reset recorder after transactions recorded --- src/app/tabs/run-tab.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js index cfda58271b..a67608e4fd 100644 --- a/src/app/tabs/run-tab.js +++ b/src/app/tabs/run-tab.js @@ -225,6 +225,7 @@ function makeRecorder (appAPI, appEvents, opts, self) { modalDialogCustom.alert('Failed to create file ' + newFile) } else { appAPI.switchFile(newFile) + self._view.recorderCount.innerText = 0 } }) } @@ -232,6 +233,11 @@ function makeRecorder (appAPI, appEvents, opts, self) { } runButton.onclick = () => { + /* + @TODO + update account address in scenario.json + popup if scenario.json not open - "Open a file with transactions you want to replay and click play again" + */ var currentFile = appAPI.config.get('currentFile') appAPI.fileProviderOf(currentFile).get(currentFile, (error, json) => { if (error) { From dc72fa73f6d4012031aa10ecf06d185ce66eb4db Mon Sep 17 00:00:00 2001 From: yann300 Date: Thu, 10 May 2018 14:19:59 +0200 Subject: [PATCH 10/12] fix remove instance --- ci/browser_tests.sh | 2 +- nightwatch.js | 4 ++-- src/universal-dapp-ui.js | 9 +-------- test-browser/tests/units/testRecorder.js | 4 ++++ 4 files changed, 8 insertions(+), 11 deletions(-) diff --git a/ci/browser_tests.sh b/ci/browser_tests.sh index 3e41099443..eb1e358e8b 100755 --- a/ci/browser_tests.sh +++ b/ci/browser_tests.sh @@ -42,7 +42,7 @@ done npm run nightwatch_remote_chrome || TEST_EXITCODE=1 npm run nightwatch_remote_firefox || TEST_EXITCODE=1 -npm run nightwatch_remote_safari || TEST_EXITCODE=1 +# npm run nightwatch_remote_safari || TEST_EXITCODE=1 # npm run nightwatch_remote_ie || TEST_EXITCODE=1 # npm run nightwatch_remote_parallel || TEST_EXITCODE=1 diff --git a/nightwatch.js b/nightwatch.js index b0adf6d836..ea6737fce3 100644 --- a/nightwatch.js +++ b/nightwatch.js @@ -53,8 +53,8 @@ module.exports = { 'desiredCapabilities': { 'browserName': 'safari', 'javascriptEnabled': true, - 'platform': 'OS X 10.11', - 'version': '10.0', + 'platform': 'macOS 10.13', + 'version': '11.0', 'acceptSslCerts': true, 'build': 'build-' + buildId, 'tunnel-identifier': 'browsersolidity_tests_' + buildId diff --git a/src/universal-dapp-ui.js b/src/universal-dapp-ui.js index 54f0eccb68..4d61e6649c 100644 --- a/src/universal-dapp-ui.js +++ b/src/universal-dapp-ui.js @@ -54,14 +54,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address function remove () { instance.remove() - var instanceContainer = document.querySelector('[class^="instanceContainer"]') - if (instanceContainer.children.length === 1) { - var noInstancesText = yo` -
- Currently you have no contract instances to interact with. -
` - instanceContainer.appendChild(noInstancesText) - } + // @TODO perhaps add a callack here to warn the caller that the instance has been removed } function toggleClass () { diff --git a/test-browser/tests/units/testRecorder.js b/test-browser/tests/units/testRecorder.js index d3aee3f008..2258594352 100644 --- a/test-browser/tests/units/testRecorder.js +++ b/test-browser/tests/units/testRecorder.js @@ -12,6 +12,10 @@ module.exports = { .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') From 52e4e919df1cf2dc2fb24f9c15b0df55dde9f25b Mon Sep 17 00:00:00 2001 From: yann300 Date: Tue, 15 May 2018 12:48:55 +0200 Subject: [PATCH 11/12] add title --- src/app/panels/terminal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js index e28111eae4..1745496ba2 100644 --- a/src/app/panels/terminal.js +++ b/src/app/panels/terminal.js @@ -111,7 +111,7 @@ class Terminal { self._view.dragbar = yo`
` self._view.dropdown = self._components.dropdown.render() - self._view.pendingTxCount = yo`
${self._view.pendingTxCount}
` + self._view.pendingTxCount = yo`
${self._view.pendingTxCount}
` self._view.bar = yo`
${self._view.dragbar} From df1754af20e05ada68f27c3b356119d77b8d8b4f Mon Sep 17 00:00:00 2001 From: yann300 Date: Tue, 15 May 2018 12:58:13 +0200 Subject: [PATCH 12/12] fix recorder count --- src/app/tabs/run-tab.js | 6 ++++-- src/recorder.js | 1 + 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js index a67608e4fd..ba6b8eafbe 100644 --- a/src/app/tabs/run-tab.js +++ b/src/app/tabs/run-tab.js @@ -109,7 +109,6 @@ function runTab (appAPI = {}, appEvents = {}, opts = {}) { function clearInstanceList (self) { event.trigger('clearInstance', []) - self._view.recorderCount.innerText = 0 } function setFinalContext () { @@ -200,6 +199,10 @@ function makeRecorder (appAPI, appEvents, opts, self) { self.data.count = count self._view.recorderCount.innerText = count }) + recorder.event.register('cleared', () => { + self.data.count = 0 + self._view.recorderCount.innerText = 0 + }) var css2 = csjs` .container {} .runTxs {} @@ -225,7 +228,6 @@ function makeRecorder (appAPI, appEvents, opts, self) { modalDialogCustom.alert('Failed to create file ' + newFile) } else { appAPI.switchFile(newFile) - self._view.recorderCount.innerText = 0 } }) } diff --git a/src/recorder.js b/src/recorder.js index 630d7152f0..0ba76dbbca 100644 --- a/src/recorder.js +++ b/src/recorder.js @@ -168,6 +168,7 @@ class Recorder { self.data._abis = {} self.data._contractABIReferences = {} self.data._linkReferences = {} + self.event.trigger('cleared', []) } /**