From 6a8c58cd8a9322036eed8f260e50b057dd6138d4 Mon Sep 17 00:00:00 2001 From: Iuri Matias Date: Wed, 26 Dec 2018 16:56:01 -0500 Subject: [PATCH] refactor contract dropdown into a class; add render method --- src/app/tabs/run-tab.js | 5 +- src/app/tabs/runTab/contractDropdown.js | 256 ++++++++++++------------ 2 files changed, 134 insertions(+), 127 deletions(-) diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js index c1329739fe..7cb8b9f71d 100644 --- a/src/app/tabs/run-tab.js +++ b/src/app/tabs/run-tab.js @@ -12,7 +12,7 @@ var Recorder = require('../../recorder') var css = require('./styles/run-tab-styles') var SettingsUI = require('./runTab/settings.js') -var contractDropdownUI = require('./runTab/contractDropdown.js') +var ContractDropdownUI = require('./runTab/contractDropdown.js') function runTab (opts, localRegistry) { /* ------------------------- @@ -129,10 +129,11 @@ function runTab (opts, localRegistry) { MAIN HTML ELEMENT --------------------------- */ var settingsUI = new SettingsUI(container, self) + var contractDropdownUI = new ContractDropdownUI(self) var el = yo`
${settingsUI.render()} - ${contractDropdownUI(self.event, self)} + ${contractDropdownUI.render()} ${recorderCard.render()} ${self._view.instanceContainer}
diff --git a/src/app/tabs/runTab/contractDropdown.js b/src/app/tabs/runTab/contractDropdown.js index e3c23cad13..6e9fd461a4 100644 --- a/src/app/tabs/runTab/contractDropdown.js +++ b/src/app/tabs/runTab/contractDropdown.js @@ -14,130 +14,137 @@ var confirmDialog = require('../../execution/confirmDialog') var modalDialog = require('../../ui/modaldialog') var MultiParamManager = require('../../../multiParamManager') -function contractDropdown (events, self) { - var instanceContainer = self._view.instanceContainer - var instanceContainerTitle = self._view.instanceContainerTitle - instanceContainer.appendChild(instanceContainerTitle) - instanceContainer.appendChild(self._view.noInstancesText) - var compFails = yo`` - var info = yo`` - - var newlyCompiled = (success, data, source, compiler, compilerFullName) => { - getContractNames(success, data, compiler, compilerFullName) - if (success) { - compFails.style.display = 'none' - document.querySelector(`.${css.contractNames}`).classList.remove(css.contractNamesError) - } else { - compFails.style.display = 'block' - document.querySelector(`.${css.contractNames}`).classList.add(css.contractNamesError) - } +class ContractDropdownUI { + constructor (parentSelf) { + this.parentSelf = parentSelf } - self._deps.pluginManager.event.register('sendCompilationResult', (file, source, languageVersion, data) => { - // TODO check whether the tab is configured - let compiler = new CompilerAbstract(languageVersion, data) - self._deps.compilersArtefacts[languageVersion] = compiler - self._deps.compilersArtefacts['__last'] = compiler - newlyCompiled(true, data, source, compiler, languageVersion) - }) - - self._deps.compiler.event.register('compilationFinished', (success, data, source) => { - var name = 'solidity' - let compiler = new CompilerAbstract(name, data) - self._deps.compilersArtefacts[name] = compiler - self._deps.compilersArtefacts['__last'] = compiler - newlyCompiled(success, data, source, self._deps.compiler, name) - }) + render () { + this.instanceContainer = this.parentSelf._view.instanceContainer + var instanceContainerTitle = this.parentSelf._view.instanceContainerTitle + this.instanceContainer.appendChild(instanceContainerTitle) + this.instanceContainer.appendChild(this.parentSelf._view.noInstancesText) + var compFails = yo`` + var info = yo`` - var deployAction = (value) => { - self._view.createPanel.style.display = value - self._view.orLabel.style.display = value - } - - self._deps.fileManager.event.register('currentFileChanged', (currentFile) => { - document.querySelector(`.${css.contractNames}`).classList.remove(css.contractNamesError) - var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) - contractNames.innerHTML = '' - if (/.(.abi)$/.exec(currentFile)) { - deployAction('none') - compFails.style.display = 'none' - contractNames.appendChild(yo``) - selectContractNames.setAttribute('disabled', true) - } else if (/.(.sol)$/.exec(currentFile)) { - deployAction('block') + var newlyCompiled = (success, data, source, compiler, compilerFullName) => { + this.getContractNames(success, data, compiler, compilerFullName) + if (success) { + compFails.style.display = 'none' + document.querySelector(`.${css.contractNames}`).classList.remove(css.contractNamesError) + } else { + compFails.style.display = 'block' + document.querySelector(`.${css.contractNames}`).classList.add(css.contractNamesError) + } } - }) - var atAddressButtonInput = yo`` - var selectContractNames = yo`` + this.parentSelf._deps.pluginManager.event.register('sendCompilationResult', (file, source, languageVersion, data) => { + // TODO check whether the tab is configured + let compiler = new CompilerAbstract(languageVersion, data) + this.parentSelf._deps.compilersArtefacts[languageVersion] = compiler + this.parentSelf._deps.compilersArtefacts['__last'] = compiler + newlyCompiled(true, data, source, compiler, languageVersion) + }) - function getSelectedContract () { - var contract = selectContractNames.children[selectContractNames.selectedIndex] - var contractName = contract.innerHTML - var compiler = self._deps.compilersArtefacts[contract.getAttribute('compiler')] - if (!compiler) return null + this.parentSelf._deps.compiler.event.register('compilationFinished', (success, data, source) => { + var name = 'solidity' + let compiler = new CompilerAbstract(name, data) + this.parentSelf._deps.compilersArtefacts[name] = compiler + this.parentSelf._deps.compilersArtefacts['__last'] = compiler + newlyCompiled(success, data, source, this.parentSelf._deps.compiler, name) + }) - if (contractName) { - return { - name: contractName, - contract: compiler.getContract(contractName), - compiler - } + var deployAction = (value) => { + this.parentSelf._view.createPanel.style.display = value + this.parentSelf._view.orLabel.style.display = value } - return null - } - self._view.createPanel = yo`
` - self._view.orLabel = yo`
or
` - var el = yo` -
-
- ${selectContractNames} ${compFails} ${info} -
-
- ${self._view.createPanel} - ${self._view.orLabel} -
-
At Address
- ${atAddressButtonInput} + this.parentSelf._deps.fileManager.event.register('currentFileChanged', (currentFile) => { + document.querySelector(`.${css.contractNames}`).classList.remove(css.contractNamesError) + var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) + contractNames.innerHTML = '' + if (/.(.abi)$/.exec(currentFile)) { + deployAction('none') + compFails.style.display = 'none' + contractNames.appendChild(yo``) + this.selectContractNames.setAttribute('disabled', true) + } else if (/.(.sol)$/.exec(currentFile)) { + deployAction('block') + } + }) + + this.atAddressButtonInput = yo`` + this.selectContractNames = yo`` + + this.parentSelf._view.createPanel = yo`
` + this.parentSelf._view.orLabel = yo`
or
` + var el = yo` +
+
+ ${this.selectContractNames} ${compFails} ${info} +
+
+ ${this.parentSelf._view.createPanel} + ${this.parentSelf._view.orLabel} +
+
At Address
+ ${this.atAddressButtonInput} +
-
- ` + ` + this.selectContractNames.addEventListener('change', this.setInputParamsPlaceHolder.bind(this)) + + return el + } - function setInputParamsPlaceHolder () { - self._view.createPanel.innerHTML = '' - if (selectContractNames.selectedIndex >= 0 && selectContractNames.children.length > 0) { - var selectedContract = getSelectedContract() + setInputParamsPlaceHolder () { + this.parentSelf._view.createPanel.innerHTML = '' + if (this.selectContractNames.selectedIndex >= 0 && this.selectContractNames.children.length > 0) { + var selectedContract = this.getSelectedContract() var ctrabi = txHelper.getConstructorInterface(selectedContract.contract.object.abi) var ctrEVMbc = selectedContract.contract.object.evm.bytecode.object var createConstructorInstance = new MultiParamManager(0, ctrabi, (valArray, inputsValues) => { - createInstance(inputsValues, selectedContract.compiler) + this.createInstance(inputsValues, selectedContract.compiler) }, txHelper.inputParametersDeclarationToString(ctrabi.inputs), 'Deploy', ctrEVMbc) - self._view.createPanel.appendChild(createConstructorInstance.render()) + this.parentSelf._view.createPanel.appendChild(createConstructorInstance.render()) return } else { - self._view.createPanel.innerHTML = 'No compiled contracts' + this.parentSelf._view.createPanel.innerHTML = 'No compiled contracts' } } - selectContractNames.addEventListener('change', setInputParamsPlaceHolder) + getSelectedContract () { + var contract = this.selectContractNames.children[this.selectContractNames.selectedIndex] + var contractName = contract.innerHTML + var compiler = this.parentSelf._deps.compilersArtefacts[contract.getAttribute('compiler')] + if (!compiler) return null + + if (contractName) { + return { + name: contractName, + contract: compiler.getContract(contractName), + compiler + } + } + return null + } - function createInstanceCallback (selectedContract, data) { - self._deps.logCallback(`creation of ${selectedContract.name} pending...`) + createInstanceCallback (selectedContract, data) { + this.parentSelf._deps.logCallback(`creation of ${selectedContract.name} pending...`) if (data) { data.contractName = selectedContract.name data.linkReferences = selectedContract.contract.object.evm.bytecode.linkReferences data.contractABI = selectedContract.contract.object.abi } - self._deps.udapp.createContract(data, + this.parentSelf._deps.udapp.createContract(data, (network, tx, gasEstimation, continueTxExecution, cancelCb) => { if (network.name !== 'Main') { return continueTxExecution(null) } var amount = executionContext.web3().fromWei(typeConversion.toInt(tx.value), 'ether') - var content = confirmDialog(tx, amount, gasEstimation, self, + var content = confirmDialog(tx, amount, gasEstimation, this.parentSelf, (gasPrice, cb) => { let txFeeText, priceStatus // TODO: this try catch feels like an anti pattern, can/should be @@ -170,7 +177,7 @@ function contractDropdown (events, self) { modalDialog('Confirm transaction', content, { label: 'Confirm', fn: () => { - self._deps.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked) + this.parentSelf._deps.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked) // TODO: check if this is check is still valid given the refactor if (!content.gasPriceStatus) { cancelCb('Given gas price is not correct') @@ -215,28 +222,28 @@ function contractDropdown (events, self) { if (isVM) { var vmError = txExecution.checkVMError(txResult) if (vmError.error) { - self._deps.logCallback(vmError.message) + this.parentSelf._deps.logCallback(vmError.message) return } } if (txResult.result.status && txResult.result.status === '0x0') { - self._deps.logCallback(`creation of ${selectedContract.name} errored: transaction execution failed`) + this.parentSelf._deps.logCallback(`creation of ${selectedContract.name} errored: transaction execution failed`) return } - var noInstancesText = self._view.noInstancesText + var noInstancesText = this.parentSelf._view.noInstancesText if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } var address = isVM ? txResult.result.createdAddress : txResult.result.contractAddress - instanceContainer.appendChild(self._deps.udappUI.renderInstance(selectedContract.contract.object, address, selectContractNames.value)) + this.instanceContainer.appendChild(this.parentSelf._deps.udappUI.renderInstance(selectedContract.contract.object, address, this.selectContractNames.value)) } else { - self._deps.logCallback(`creation of ${selectedContract.name} errored: ${error}`) + this.parentSelf._deps.logCallback(`creation of ${selectedContract.name} errored: ${error}`) } } ) } // DEPLOY INSTANCE - function createInstance (args, compiler) { - var selectedContract = getSelectedContract() + createInstance (args, compiler) { + var selectedContract = this.getSelectedContract() if (selectedContract.contract.object.evm.bytecode.object.length === 0) { modalDialogCustom.alert('This contract may be abstract, not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.') @@ -245,23 +252,23 @@ function contractDropdown (events, self) { var forceSend = () => { var constructor = txHelper.getConstructorInterface(selectedContract.contract.object.abi) - self._deps.filePanel.compilerMetadata().deployMetadataOf(selectedContract.name, (error, contractMetadata) => { - if (error) return self._deps.logCallback(`creation of ${selectedContract.name} errored: ` + error) + this.parentSelf._deps.filePanel.compilerMetadata().deployMetadataOf(selectedContract.name, (error, contractMetadata) => { + if (error) return this.parentSelf._deps.logCallback(`creation of ${selectedContract.name} errored: ` + error) if (!contractMetadata || (contractMetadata && contractMetadata.autoDeployLib)) { txFormat.buildData(selectedContract.name, selectedContract.contract.object, compiler.getContracts(), true, constructor, args, (error, data) => { - if (error) return self._deps.logCallback(`creation of ${selectedContract.name} errored: ` + error) - createInstanceCallback(selectedContract, data) + if (error) return this.parentSelf._deps.logCallback(`creation of ${selectedContract.name} errored: ` + error) + this.createInstanceCallback(selectedContract, data) }, (msg) => { - self._deps.logCallback(msg) + this.parentSelf._deps.logCallback(msg) }, (data, runTxCallback) => { // called for libraries deployment - self._deps.udapp.runTx(data, + this.parentSelf._deps.udapp.runTx(data, (network, tx, gasEstimation, continueTxExecution, cancelCb) => { if (network.name !== 'Main') { return continueTxExecution(null) } var amount = executionContext.web3().fromWei(typeConversion.toInt(tx.value), 'ether') - var content = confirmDialog(tx, amount, gasEstimation, self, + var content = confirmDialog(tx, amount, gasEstimation, this.parentSelf, (gasPrice, cb) => { let txFeeText, priceStatus // TODO: this try catch feels like an anti pattern, can/should be @@ -294,7 +301,7 @@ function contractDropdown (events, self) { modalDialog('Confirm transaction', content, { label: 'Confirm', fn: () => { - self._deps.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked) + this.parentSelf._deps.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked) // TODO: check if this is check is still valid given the refactor if (!content.gasPriceStatus) { cancelCb('Given gas price is not correct') @@ -315,10 +322,10 @@ function contractDropdown (events, self) { runTxCallback) }) } else { - if (Object.keys(selectedContract.contract.object.evm.bytecode.linkReferences).length) self._deps.logCallback(`linking ${JSON.stringify(selectedContract.contract.object.evm.bytecode.linkReferences, null, '\t')} using ${JSON.stringify(contractMetadata.linkReferences, null, '\t')}`) + if (Object.keys(selectedContract.contract.object.evm.bytecode.linkReferences).length) this.parentSelf._deps.logCallback(`linking ${JSON.stringify(selectedContract.contract.object.evm.bytecode.linkReferences, null, '\t')} using ${JSON.stringify(contractMetadata.linkReferences, null, '\t')}`) txFormat.encodeConstructorCallAndLinkLibraries(selectedContract.contract.object, args, constructor, contractMetadata.linkReferences, selectedContract.contract.object.evm.bytecode.linkReferences, (error, data) => { - if (error) return self._deps.logCallback(`creation of ${selectedContract.name} errored: ` + error) - createInstanceCallback(selectedContract, data) + if (error) return this.parentSelf._deps.logCallback(`creation of ${selectedContract.name} errored: ` + error) + this.createInstanceCallback(selectedContract, data) }) } }) @@ -335,7 +342,7 @@ function contractDropdown (events, self) { }}, { label: 'Cancel', fn: () => { - self._deps.logCallback(`creation of ${selectedContract.name} canceled by user.`) + this.parentSelf._deps.logCallback(`creation of ${selectedContract.name} canceled by user.`) } }) } else { @@ -344,48 +351,47 @@ function contractDropdown (events, self) { } // ACCESS DEPLOYED INSTANCE - function loadFromAddress () { - var noInstancesText = self._view.noInstancesText + loadFromAddress () { + var noInstancesText = this.parentSelf._view.noInstancesText if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } - var address = atAddressButtonInput.value + var address = this.atAddressButtonInput.value if (!ethJSUtil.isValidAddress(address)) { return modalDialogCustom.alert('Invalid address.') } if (/[a-f]/.test(address) && /[A-F]/.test(address) && !ethJSUtil.isValidChecksumAddress(address)) { return modalDialogCustom.alert('Invalid checksum address.') } - if (/.(.abi)$/.exec(self._deps.config.get('currentFile'))) { + if (/.(.abi)$/.exec(this.parentSelf._deps.config.get('currentFile'))) { modalDialogCustom.confirm(null, 'Do you really want to interact with ' + address + ' using the current ABI definition ?', () => { var abi try { - abi = JSON.parse(self._deps.editor.currentContent()) + abi = JSON.parse(this.parentSelf._deps.editor.currentContent()) } catch (e) { return modalDialogCustom.alert('Failed to parse the current file as JSON ABI.') } - instanceContainer.appendChild(self._deps.udappUI.renderInstanceFromABI(abi, address, address)) + this.instanceContainer.appendChild(this.parentSelf._deps.udappUI.renderInstanceFromABI(abi, address, address)) }) } else { - var selectedContract = getSelectedContract() - instanceContainer.appendChild(self._deps.udappUI.renderInstance(selectedContract.contract.object, address, selectContractNames.value)) + var selectedContract = this.getSelectedContract() + this.instanceContainer.appendChild(this.parentSelf._deps.udappUI.renderInstance(selectedContract.contract.object, address, this.selectContractNames.value)) } } // GET NAMES OF ALL THE CONTRACTS - function getContractNames (success, data, compiler, compilerFullName) { + getContractNames (success, data, compiler, compilerFullName) { var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) contractNames.innerHTML = '' if (success) { - selectContractNames.removeAttribute('disabled') + this.selectContractNames.removeAttribute('disabled') compiler.visitContracts((contract) => { contractNames.appendChild(yo``) }) } else { - selectContractNames.setAttribute('disabled', true) + this.selectContractNames.setAttribute('disabled', true) } - setInputParamsPlaceHolder() + this.setInputParamsPlaceHolder() } - return el } -module.exports = contractDropdown +module.exports = ContractDropdownUI