|
|
|
|
@ -1,8 +1,5 @@ |
|
|
|
|
var $ = require('jquery') |
|
|
|
|
var yo = require('yo-yo') |
|
|
|
|
var EventManager = require('../../lib/events') |
|
|
|
|
var globlalRegistry = require('../../global/registry') |
|
|
|
|
var executionContext = require('../../execution-context') |
|
|
|
|
var Card = require('../ui/card') |
|
|
|
|
var css = require('./styles/run-tab-styles') |
|
|
|
|
|
|
|
|
|
@ -15,170 +12,140 @@ var ContractDropdownUI = require('./runTab/contractDropdown.js') |
|
|
|
|
var Recorder = require('./runTab/model/recorder.js') |
|
|
|
|
var RecorderUI = require('./runTab/recorder.js') |
|
|
|
|
|
|
|
|
|
function runTab (opts, localRegistry) { |
|
|
|
|
var self = this |
|
|
|
|
self.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. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.` |
|
|
|
|
class RunTab { |
|
|
|
|
|
|
|
|
|
constructor (udapp, udappUI, config, fileManager, editor, logCallback, filePanel, pluginManager, compilersArtefacts) { |
|
|
|
|
this.event = new EventManager() |
|
|
|
|
|
|
|
|
|
this.renderInstanceContainer() |
|
|
|
|
this.renderSettings(udapp) |
|
|
|
|
this.renderDropdown(udappUI, fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel, logCallback) |
|
|
|
|
this.renderRecorder(udapp, udappUI, fileManager, config, logCallback) |
|
|
|
|
this.renderRecorderCard() |
|
|
|
|
this.renderContainer() |
|
|
|
|
} |
|
|
|
|
self._components = {} |
|
|
|
|
self._components.registry = localRegistry || globlalRegistry |
|
|
|
|
self._components.transactionContextAPI = { |
|
|
|
|
getAddress: (cb) => { |
|
|
|
|
cb(null, $('#txorigin').val()) |
|
|
|
|
}, |
|
|
|
|
getValue: (cb) => { |
|
|
|
|
try { |
|
|
|
|
var number = document.querySelector('#value').value |
|
|
|
|
var select = document.getElementById('unit') |
|
|
|
|
var index = select.selectedIndex |
|
|
|
|
var selectedUnit = select.querySelectorAll('option')[index].dataset.unit |
|
|
|
|
var unit = 'ether' // default
|
|
|
|
|
if (['ether', 'finney', 'gwei', 'wei'].indexOf(selectedUnit) >= 0) { |
|
|
|
|
unit = selectedUnit |
|
|
|
|
} |
|
|
|
|
cb(null, executionContext.web3().toWei(number, unit)) |
|
|
|
|
} catch (e) { |
|
|
|
|
cb(e) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
getGasLimit: (cb) => { |
|
|
|
|
cb(null, $('#gasLimit').val()) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
renderContainer () { |
|
|
|
|
this.container = yo`<div class="${css.runTabView}" id="runTabView" ></div>` |
|
|
|
|
|
|
|
|
|
var el = yo` |
|
|
|
|
<div> |
|
|
|
|
${this.settingsUI.render()} |
|
|
|
|
${this.contractDropdownUI.render()} |
|
|
|
|
${this.recorderCard.render()} |
|
|
|
|
${this.instanceContainer} |
|
|
|
|
</div> |
|
|
|
|
` |
|
|
|
|
this.container.appendChild(el) |
|
|
|
|
} |
|
|
|
|
// dependencies
|
|
|
|
|
self._deps = { |
|
|
|
|
udapp: self._components.registry.get('udapp').api, |
|
|
|
|
udappUI: self._components.registry.get('udappUI').api, |
|
|
|
|
config: self._components.registry.get('config').api, |
|
|
|
|
fileManager: self._components.registry.get('filemanager').api, |
|
|
|
|
editor: self._components.registry.get('editor').api, |
|
|
|
|
logCallback: self._components.registry.get('logCallback').api, |
|
|
|
|
filePanel: self._components.registry.get('filepanel').api, |
|
|
|
|
pluginManager: self._components.registry.get('pluginmanager').api, |
|
|
|
|
compilersArtefacts: self._components.registry.get('compilersartefacts').api |
|
|
|
|
|
|
|
|
|
renderInstanceContainer () { |
|
|
|
|
this.instanceContainer = yo`<div class="${css.instanceContainer}"></div>` |
|
|
|
|
|
|
|
|
|
const instanceContainerTitle = yo` |
|
|
|
|
<div class=${css.instanceContainerTitle} |
|
|
|
|
title="Autogenerated generic user interfaces for interaction with deployed contracts"> |
|
|
|
|
Deployed Contracts |
|
|
|
|
<i class="${css.clearinstance} ${css.icon} fa fa-trash" onclick=${() => this.event.trigger('clearInstance', [])} |
|
|
|
|
title="Clear instances list and reset recorder" aria-hidden="true"> |
|
|
|
|
</i> |
|
|
|
|
</div>` |
|
|
|
|
|
|
|
|
|
this.noInstancesText = yo` |
|
|
|
|
<div class="${css.noInstancesText}"> |
|
|
|
|
Currently you have no contract instances to interact with. |
|
|
|
|
</div>` |
|
|
|
|
|
|
|
|
|
this.event.register('clearInstance', () => { |
|
|
|
|
this.instanceContainer.innerHTML = '' // clear the instances list
|
|
|
|
|
this.instanceContainer.appendChild(instanceContainerTitle) |
|
|
|
|
this.instanceContainer.appendChild(this.noInstancesText) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this.instanceContainer.appendChild(instanceContainerTitle) |
|
|
|
|
this.instanceContainer.appendChild(this.noInstancesText) |
|
|
|
|
} |
|
|
|
|
self._deps.udapp.resetAPI(self._components.transactionContextAPI) |
|
|
|
|
self._view.recorderCount = yo`<span>0</span>` |
|
|
|
|
self._view.instanceContainer = yo`<div class="${css.instanceContainer}"></div>` |
|
|
|
|
self._view.clearInstanceElement = yo` |
|
|
|
|
<i class="${css.clearinstance} ${css.icon} fa fa-trash" onclick=${() => self.event.trigger('clearInstance', [])} |
|
|
|
|
title="Clear instances list and reset recorder" aria-hidden="true"> |
|
|
|
|
</i>` |
|
|
|
|
self._view.instanceContainerTitle = yo` |
|
|
|
|
<div class=${css.instanceContainerTitle} |
|
|
|
|
title="Autogenerated generic user interfaces for interaction with deployed contracts"> |
|
|
|
|
Deployed Contracts |
|
|
|
|
${self._view.clearInstanceElement} |
|
|
|
|
</div>` |
|
|
|
|
self._view.noInstancesText = yo` |
|
|
|
|
<div class="${css.noInstancesText}"> |
|
|
|
|
Currently you have no contract instances to interact with. |
|
|
|
|
</div>` |
|
|
|
|
|
|
|
|
|
var container = yo`<div class="${css.runTabView}" id="runTabView" ></div>` |
|
|
|
|
|
|
|
|
|
var recorder = new Recorder(self._deps.udapp, self._deps.fileManager, self._deps.config) |
|
|
|
|
recorder.event.register('newTxRecorded', (count) => { |
|
|
|
|
this.data.count = count |
|
|
|
|
this._view.recorderCount.innerText = count |
|
|
|
|
}) |
|
|
|
|
recorder.event.register('cleared', () => { |
|
|
|
|
this.data.count = 0 |
|
|
|
|
this._view.recorderCount.innerText = 0 |
|
|
|
|
}) |
|
|
|
|
executionContext.event.register('contextChanged', recorder.clearAll.bind(recorder)) |
|
|
|
|
self.event.register('clearInstance', recorder.clearAll.bind(recorder)) |
|
|
|
|
|
|
|
|
|
var recorderInterface = new RecorderUI(recorder, self) |
|
|
|
|
recorderInterface.render() |
|
|
|
|
|
|
|
|
|
self._view.collapsedView = yo` |
|
|
|
|
<div class=${css.recorderCollapsedView}> |
|
|
|
|
<div class=${css.recorderCount}>${self._view.recorderCount}</div> |
|
|
|
|
</div>` |
|
|
|
|
|
|
|
|
|
self._view.expandedView = yo` |
|
|
|
|
<div class=${css.recorderExpandedView}> |
|
|
|
|
<div class=${css.recorderDescription}> |
|
|
|
|
${self.data.text} |
|
|
|
|
</div> |
|
|
|
|
<div class="${css.transactionActions}"> |
|
|
|
|
${recorderInterface.recordButton} |
|
|
|
|
${recorderInterface.runButton} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div>` |
|
|
|
|
|
|
|
|
|
self.recorderOpts = { |
|
|
|
|
title: 'Transactions recorded:', |
|
|
|
|
collapsedView: self._view.collapsedView |
|
|
|
|
renderSettings (udapp) { |
|
|
|
|
var settings = new Settings(udapp) |
|
|
|
|
this.settingsUI = new SettingsUI(settings) |
|
|
|
|
|
|
|
|
|
this.settingsUI.event.register('clearInstance', () => { |
|
|
|
|
this.event.trigger('clearInstance', []) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
renderDropdown (udappUI, fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel, logCallback) { |
|
|
|
|
var dropdownLogic = new DropdownLogic(fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel) |
|
|
|
|
this.contractDropdownUI = new ContractDropdownUI(dropdownLogic, logCallback) |
|
|
|
|
|
|
|
|
|
this.contractDropdownUI.event.register('clearInstance', () => { |
|
|
|
|
var noInstancesText = this.noInstancesText |
|
|
|
|
if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } |
|
|
|
|
}) |
|
|
|
|
this.contractDropdownUI.event.register('newContractABIAdded', (abi, address) => { |
|
|
|
|
this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, address)) |
|
|
|
|
}) |
|
|
|
|
this.contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => { |
|
|
|
|
this.instanceContainer.appendChild(udappUI.renderInstance(contractObject, address, value)) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var recorderCard = new Card({}, {}, self.recorderOpts) |
|
|
|
|
recorderCard.event.register('expandCollapseCard', (arrow, body, status) => { |
|
|
|
|
body.innerHTML = '' |
|
|
|
|
status.innerHTML = '' |
|
|
|
|
if (arrow === 'down') { |
|
|
|
|
status.appendChild(self._view.collapsedView) |
|
|
|
|
body.appendChild(self._view.expandedView) |
|
|
|
|
} else if (arrow === 'up') { |
|
|
|
|
status.appendChild(self._view.collapsedView) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
var settings = new Settings(self._deps.udapp) |
|
|
|
|
var settingsUI = new SettingsUI(settings) |
|
|
|
|
|
|
|
|
|
self.event.register('clearInstance', () => { |
|
|
|
|
this._view.instanceContainer.innerHTML = '' // clear the instances list
|
|
|
|
|
this._view.instanceContainer.appendChild(self._view.instanceContainerTitle) |
|
|
|
|
this._view.instanceContainer.appendChild(self._view.noInstancesText) |
|
|
|
|
}) |
|
|
|
|
settingsUI.event.register('clearInstance', () => { |
|
|
|
|
this.event.trigger('clearInstance', []) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
var dropdownLogic = new DropdownLogic( |
|
|
|
|
this._deps.fileManager, |
|
|
|
|
this._deps.pluginManager, |
|
|
|
|
this._deps.compilersArtefacts, |
|
|
|
|
this._deps.compiler, |
|
|
|
|
this._deps.config, |
|
|
|
|
this._deps.editor, |
|
|
|
|
this._deps.udapp, |
|
|
|
|
this._deps.filePanel |
|
|
|
|
) |
|
|
|
|
var contractDropdownUI = new ContractDropdownUI(dropdownLogic, this._deps.logCallback) |
|
|
|
|
|
|
|
|
|
contractDropdownUI.event.register('clearInstance', () => { |
|
|
|
|
var noInstancesText = this._view.noInstancesText |
|
|
|
|
if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } |
|
|
|
|
}) |
|
|
|
|
contractDropdownUI.event.register('newContractABIAdded', (abi, address) => { |
|
|
|
|
this._view.instanceContainer.appendChild(this._deps.udappUI.renderInstanceFromABI(abi, address, address)) |
|
|
|
|
}) |
|
|
|
|
contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => { |
|
|
|
|
this._view.instanceContainer.appendChild(this._deps.udappUI.renderInstance(contractObject, address, value)) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this._view.instanceContainer.appendChild(this._view.instanceContainerTitle) |
|
|
|
|
this._view.instanceContainer.appendChild(this._view.noInstancesText) |
|
|
|
|
|
|
|
|
|
var el = yo` |
|
|
|
|
<div> |
|
|
|
|
${settingsUI.render()} |
|
|
|
|
${contractDropdownUI.render()} |
|
|
|
|
${recorderCard.render()} |
|
|
|
|
${self._view.instanceContainer} |
|
|
|
|
</div> |
|
|
|
|
` |
|
|
|
|
container.appendChild(el) |
|
|
|
|
|
|
|
|
|
return { render () { return container } } |
|
|
|
|
renderRecorder (udapp, udappUI, fileManager, config, logCallback) { |
|
|
|
|
this.recorderCount = yo`<span>0</span>` |
|
|
|
|
|
|
|
|
|
var recorder = new Recorder(udapp, fileManager, config) |
|
|
|
|
recorder.event.register('recorderCountChange', (count) => { |
|
|
|
|
this.recorderCount.innerText = count |
|
|
|
|
}) |
|
|
|
|
this.event.register('clearInstance', recorder.clearAll.bind(recorder)) |
|
|
|
|
|
|
|
|
|
this.recorderInterface = new RecorderUI(recorder, logCallback) |
|
|
|
|
|
|
|
|
|
this.recorderInterface.event.register('newScenario', (abi, address, contractName) => { |
|
|
|
|
var noInstancesText = this.noInstancesText |
|
|
|
|
if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } |
|
|
|
|
this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, contractName)) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this.recorderInterface.render() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
renderRecorderCard () { |
|
|
|
|
const collapsedView = yo` |
|
|
|
|
<div class=${css.recorderCollapsedView}> |
|
|
|
|
<div class=${css.recorderCount}>${this.recorderCount}</div> |
|
|
|
|
</div>` |
|
|
|
|
|
|
|
|
|
const expandedView = yo` |
|
|
|
|
<div class=${css.recorderExpandedView}> |
|
|
|
|
<div class=${css.recorderDescription}> |
|
|
|
|
All transactions (deployed contracts and function executions) in this environment can be saved and replayed in |
|
|
|
|
another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3. |
|
|
|
|
</div> |
|
|
|
|
<div class="${css.transactionActions}"> |
|
|
|
|
${this.recorderInterface.recordButton} |
|
|
|
|
${this.recorderInterface.runButton} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div>` |
|
|
|
|
|
|
|
|
|
this.recorderCard = new Card({}, {}, { title: 'Transactions recorded:', collapsedView: collapsedView }) |
|
|
|
|
this.recorderCard.event.register('expandCollapseCard', (arrow, body, status) => { |
|
|
|
|
body.innerHTML = '' |
|
|
|
|
status.innerHTML = '' |
|
|
|
|
if (arrow === 'down') { |
|
|
|
|
status.appendChild(collapsedView) |
|
|
|
|
body.appendChild(expandedView) |
|
|
|
|
} else if (arrow === 'up') { |
|
|
|
|
status.appendChild(collapsedView) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
render () { |
|
|
|
|
return this.container |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
module.exports = runTab |
|
|
|
|
module.exports = RunTab |
|
|
|
|
|
Levi Barnes
6 years ago
committed by
GitHub