-
${compileIcon} Start to compile
-
-
-
Auto compile
+ compileTab: function compileTab (appAPI = {}, appEvents = {}, opts = {}) {
+ // Containers
+ var warnCompilationSlow = yo`
`
+ var compileIcon = yo`
`
+ var compileContainer = yo`
+
+
- ${warnCompilationSlow}
-
- `
+ `
- compileContainer.querySelector('#compile').addEventListener('click', () => {
- appAPI.runCompiler()
- })
+ compileContainer.querySelector('#compile').addEventListener('click', () => {
+ appAPI.runCompiler()
+ })
- var compileTimeout = null
- function scheduleCompilation () {
- if (!opts.config.get('autoCompile')) {
- return
- }
+ var compileTimeout = null
+ function scheduleCompilation () {
+ if (!opts.config.get('autoCompile')) {
+ return
+ }
- if (compileTimeout) {
- window.clearTimeout(compileTimeout)
+ if (compileTimeout) {
+ window.clearTimeout(compileTimeout)
+ }
+ compileTimeout = window.setTimeout(() => {
+ appAPI.runCompiler()
+ }, 300)
}
- compileTimeout = window.setTimeout(() => {
- appAPI.runCompiler()
- }, 300)
- }
- appEvents.editor.register('contentChanged', () => {
- scheduleCompilation()
- })
+ appEvents.editor.register('contentChanged', () => {
+ scheduleCompilation()
+ })
- appEvents.editor.register('sessionSwitched', () => {
- scheduleCompilation()
- })
+ appEvents.editor.register('sessionSwitched', () => {
+ scheduleCompilation()
+ })
- // ----------------- autoCompile -----------------
- var autoCompileInput = compileContainer.querySelector('#autoCompile')
- var autoCompile = false
- if (opts.config.exists('autoCompile')) {
- autoCompile = opts.config.get('autoCompile')
- }
- opts.config.set('autoCompile', autoCompile)
- if (autoCompile) {
- autoCompileInput.setAttribute('checked', autoCompile)
- }
+ // ----------------- autoCompile -----------------
+ var autoCompileInput = compileContainer.querySelector('#autoCompile')
+ var autoCompile = false
+ if (opts.config.exists('autoCompile')) {
+ autoCompile = opts.config.get('autoCompile')
+ }
+ opts.config.set('autoCompile', autoCompile)
+ if (autoCompile) {
+ autoCompileInput.setAttribute('checked', autoCompile)
+ }
- autoCompileInput.addEventListener('change', function () {
- opts.config.set('autoCompile', autoCompileInput.checked)
- })
+ autoCompileInput.addEventListener('change', function () {
+ opts.config.set('autoCompile', autoCompileInput.checked)
+ })
- // REGISTER EVENTS
+ // REGISTER EVENTS
- // compilationDuration
- appEvents.compiler.register('compilationDuration', function tabHighlighting (speed) {
- if (speed > 1000) {
- warnCompilationSlow.setAttribute('title', `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`)
- warnCompilationSlow.style.display = 'inline-block'
- } else {
+ // compilationDuration
+ appEvents.compiler.register('compilationDuration', function tabHighlighting (speed) {
+ if (speed > 1000) {
+ warnCompilationSlow.setAttribute('title', `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`)
+ warnCompilationSlow.style.display = 'inline-block'
+ } else {
+ warnCompilationSlow.style.display = 'none'
+ }
+ })
+ // loadingCompiler
+ appEvents.editor.register('contentChanged', function changedFile () {
+ var compileTab = document.querySelector('.compileView')
+ compileTab.style.color = styles.colors.red
+ compileIcon.classList.add(`${css.bouncingIcon}`)
+ })
+ appEvents.compiler.register('loadingCompiler', function start () {
+ compileIcon.classList.add(`${css.spinningIcon}`)
warnCompilationSlow.style.display = 'none'
- }
- })
- // loadingCompiler
- appEvents.editor.register('contentChanged', function changedFile () {
- var compileTab = document.querySelector('.compileView')
- compileTab.style.color = styles.colors.red
- compileIcon.classList.add(`${css.bouncingIcon}`)
- })
- appEvents.compiler.register('loadingCompiler', function start () {
- compileIcon.classList.add(`${css.spinningIcon}`)
- warnCompilationSlow.style.display = 'none'
- compileIcon.setAttribute('title', 'compiler is loading, please wait a few moments.')
- })
- appEvents.compiler.register('compilationFinished', function finish () {
- var compileTab = document.querySelector('.compileView')
- compileTab.style.color = styles.colors.black
- compileIcon.style.color = styles.colors.black
- compileIcon.classList.remove(`${css.spinningIcon}`)
- compileIcon.classList.remove(`${css.bouncingIcon}`)
- compileIcon.setAttribute('title', 'idle')
- })
- appEvents.compiler.register('compilationStarted', function start () {
- compileIcon.classList.remove(`${css.bouncingIcon}`)
- compileIcon.classList.add(`${css.spinningIcon}`)
- compileIcon.setAttribute('title', 'compiling...')
- })
- appEvents.compiler.register('compilerLoaded', function loaded () {
- compileIcon.classList.remove(`${css.spinningIcon}`)
- compileIcon.setAttribute('title', '')
- })
+ compileIcon.setAttribute('title', 'compiler is loading, please wait a few moments.')
+ })
+ appEvents.compiler.register('compilationFinished', function finish () {
+ var compileTab = document.querySelector('.compileView')
+ compileTab.style.color = styles.colors.black
+ compileIcon.style.color = styles.colors.black
+ compileIcon.classList.remove(`${css.spinningIcon}`)
+ compileIcon.classList.remove(`${css.bouncingIcon}`)
+ compileIcon.setAttribute('title', 'idle')
+ })
+ appEvents.compiler.register('compilationStarted', function start () {
+ compileIcon.classList.remove(`${css.bouncingIcon}`)
+ compileIcon.classList.add(`${css.spinningIcon}`)
+ compileIcon.setAttribute('title', 'compiling...')
+ })
+ appEvents.compiler.register('compilerLoaded', function loaded () {
+ compileIcon.classList.remove(`${css.spinningIcon}`)
+ compileIcon.setAttribute('title', '')
+ })
- var errorContainer = yo`
`
- var el = yo`
-
- ${compileContainer}
- ${contractNames(appAPI, appEvents, opts)}
- ${errorContainer}
-
- `
+ var errorContainer = yo`
`
+ var el = yo`
+
+ ${compileContainer}
+ ${contractNames(appAPI, appEvents, opts)}
+ ${errorContainer}
+
+ `
- /* ------------------------------------------------
- section CONTRACT DROPDOWN, DETAILS AND PUBLISH
- ------------------------------------------------ */
+ /* ------------------------------------------------
+ section CONTRACT DROPDOWN, DETAILS AND PUBLISH
+ ------------------------------------------------ */
- function contractNames (appAPI, appEvents, opts) {
- var contractsDetails = {}
+ function contractNames (appAPI, appEvents, opts) {
+ var contractsDetails = {}
- appEvents.compiler.register('compilationStarted', () => {
- errorContainer.innerHTML = ''
- })
+ appEvents.compiler.register('compilationStarted', () => {
+ errorContainer.innerHTML = ''
+ })
- appEvents.compiler.register('compilationFinished', function (success, data, source) {
- // reset the contractMetadata list (used by the publish action)
- contractsDetails = {}
- // refill the dropdown list
- getContractNames(success, data)
- // hightlight the tab if error
- if (success) {
- document.querySelector('.compileView').style.color = ''
- } else {
- document.querySelector('.compileView').style.color = styles.colors.red
- }
- // display warning error if any
- var error = false
- if (data['error']) {
- error = true
- opts.renderer.error(data['error'].formattedMessage, $(errorContainer), {type: data['error'].severity})
- }
- if (data['errors']) {
- if (data['errors'].length) error = true
- data['errors'].forEach(function (err) {
- opts.renderer.error(err.formattedMessage, $(errorContainer), {type: err.severity})
- })
- }
- if (!error) {
- if (data.contracts) {
- opts.compiler.visitContracts((contract) => {
- opts.renderer.error(contract.name, $(errorContainer), {type: 'success'})
+ appEvents.compiler.register('compilationFinished', function (success, data, source) {
+ // reset the contractMetadata list (used by the publish action)
+ contractsDetails = {}
+ // refill the dropdown list
+ getContractNames(success, data)
+ // hightlight the tab if error
+ if (success) {
+ document.querySelector('.compileView').style.color = ''
+ } else {
+ document.querySelector('.compileView').style.color = styles.colors.red
+ }
+ // display warning error if any
+ var error = false
+ if (data['error']) {
+ error = true
+ opts.renderer.error(data['error'].formattedMessage, $(errorContainer), {type: data['error'].severity})
+ }
+ if (data['errors']) {
+ if (data['errors'].length) error = true
+ data['errors'].forEach(function (err) {
+ opts.renderer.error(err.formattedMessage, $(errorContainer), {type: err.severity})
})
}
- }
- })
+ if (!error) {
+ if (data.contracts) {
+ opts.compiler.visitContracts((contract) => {
+ opts.renderer.error(contract.name, $(errorContainer), {type: 'success'})
+ })
+ }
+ }
+ })
- appEvents.staticAnalysis.register('staticAnaysisWarning', (count) => {
- if (count) {
- opts.renderer.error(`Static Analysis raised ${count} warning(s) that requires your attention.`, $(errorContainer), {
- type: 'warning',
- click: () => appAPI.switchTab('staticanalysisView')
- })
- }
- })
+ appEvents.staticAnalysis.register('staticAnaysisWarning', (count) => {
+ if (count) {
+ opts.renderer.error(`Static Analysis raised ${count} warning(s) that requires your attention.`, $(errorContainer), {
+ type: 'warning',
+ click: () => appAPI.switchTab('staticanalysisView')
+ })
+ }
+ })
- var el = yo`
-
-
-
- `
+ `
- // HELPERS
+ // HELPERS
- // GET NAMES OF ALL THE CONTRACTS
- function getContractNames (success, data) {
- var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
- contractNames.innerHTML = ''
- if (success) {
- contractNames.removeAttribute('disabled')
- opts.compiler.visitContracts((contract) => {
- contractsDetails[contract.name] = parseContracts(contract.name, contract.object, opts.compiler.getSource(contract.file))
- var contractName = yo`
-
- ${contract.name}
- `
- contractNames.appendChild(contractName)
- })
- appAPI.resetDapp(contractsDetails)
- } else {
- contractNames.setAttribute('disabled', true)
- appAPI.resetDapp({})
+ // GET NAMES OF ALL THE CONTRACTS
+ function getContractNames (success, data) {
+ var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
+ contractNames.innerHTML = ''
+ if (success) {
+ contractNames.removeAttribute('disabled')
+ opts.compiler.visitContracts((contract) => {
+ contractsDetails[contract.name] = parseContracts(contract.name, contract.object, opts.compiler.getSource(contract.file))
+ var contractName = yo`
+
+ ${contract.name}
+ `
+ contractNames.appendChild(contractName)
+ })
+ appAPI.resetDapp(contractsDetails)
+ } else {
+ contractNames.setAttribute('disabled', true)
+ appAPI.resetDapp({})
+ }
}
- }
- function details () {
- var select = el.querySelector('select')
+ function details () {
+ var select = el.querySelector('select')
- if (select.children.length > 0 && select.selectedIndex >= 0) {
- var contractName = select.children[select.selectedIndex].innerHTML
- var contractProperties = contractsDetails[contractName]
- var log = yo`
`
- Object.keys(contractProperties).map(propertyName => {
- var copyDetails = yo`
- ${copyToClipboard(() => contractProperties[propertyName])}
- `
- var questionMark = yo`
`
- log.appendChild(yo`
-
-
${propertyName} ${copyDetails} ${questionMark}
- ${insertValue(contractProperties, propertyName)}
-
- `)
- })
- modalDialog(contractName, log, {label: ''}, {label: 'Close'})
+ if (select.children.length > 0 && select.selectedIndex >= 0) {
+ var contractName = select.children[select.selectedIndex].innerHTML
+ var contractProperties = contractsDetails[contractName]
+ var log = yo`
`
+ Object.keys(contractProperties).map(propertyName => {
+ var copyDetails = yo`
+ ${copyToClipboard(() => contractProperties[propertyName])}
+ `
+ var questionMark = yo`
`
+ log.appendChild(yo`
+
+
${propertyName} ${copyDetails} ${questionMark}
+ ${insertValue(contractProperties, propertyName)}
+
+ `)
+ })
+ modalDialog(contractName, log, {label: ''}, {label: 'Close'})
+ }
}
- }
- function insertValue (details, propertyName) {
- var value = yo`
`
- var node
- if (propertyName === 'web3Deploy' || propertyName === 'name' || propertyName === 'Assembly') {
- node = yo`
${details[propertyName]} `
- } else if (propertyName === 'abi' || propertyName === 'metadata') {
- var treeView = new TreeView({
- extractData: function (item, parent, key) {
- var ret = {}
- if (item instanceof Array) {
- ret.children = item.map((item, index) => {
- return {key: index, value: item}
- })
- ret.self = ''
- } else if (item instanceof Object) {
- ret.children = Object.keys(item).map((key) => {
- return {key: key, value: item[key]}
- })
- ret.self = ''
- } else {
- ret.self = item
- ret.children = []
+ function insertValue (details, propertyName) {
+ var value = yo`
`
+ var node
+ if (propertyName === 'web3Deploy' || propertyName === 'name' || propertyName === 'Assembly') {
+ node = yo`
${details[propertyName]} `
+ } else if (propertyName === 'abi' || propertyName === 'metadata') {
+ var treeView = new TreeView({
+ extractData: function (item, parent, key) {
+ var ret = {}
+ if (item instanceof Array) {
+ ret.children = item.map((item, index) => {
+ return {key: index, value: item}
+ })
+ ret.self = ''
+ } else if (item instanceof Object) {
+ ret.children = Object.keys(item).map((key) => {
+ return {key: key, value: item[key]}
+ })
+ ret.self = ''
+ } else {
+ ret.self = item
+ ret.children = []
+ }
+ return ret
}
- return ret
- }
- })
- if (details[propertyName] !== '') {
- try {
- node = yo`
${treeView.render(typeof details[propertyName] === 'object' ? details[propertyName] : JSON.parse(details[propertyName]))}
` // catch in case the parsing fails.
- } catch (e) {
- node = yo`
Unable to display "${propertyName}": ${e.message}
`
+ })
+ if (details[propertyName] !== '') {
+ try {
+ node = yo`
${treeView.render(typeof details[propertyName] === 'object' ? details[propertyName] : JSON.parse(details[propertyName]))}
` // catch in case the parsing fails.
+ } catch (e) {
+ node = yo`
Unable to display "${propertyName}": ${e.message}
`
+ }
+ } else {
+ node = yo`
-
`
}
} else {
- node = yo`
-
`
+ node = yo`
${JSON.stringify(details[propertyName], null, 4)}
`
}
- } else {
- node = yo`
${JSON.stringify(details[propertyName], null, 4)}
`
+ if (node) value.appendChild(node)
+ return value
}
- if (node) value.appendChild(node)
- return value
- }
- function publish (appAPI) {
- var selectContractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
- if (selectContractNames.children.length > 0 && selectContractNames.selectedIndex >= 0) {
- var contract = contractsDetails[selectContractNames.children[selectContractNames.selectedIndex].innerHTML]
- if (contract.metadata === undefined || contract.metadata.length === 0) {
- modalDialogCustom.alert('This contract does not implement all functions and thus cannot be published.')
- } else {
- publishOnSwarm(contract, appAPI, function (err) {
- if (err) {
- try {
- err = JSON.stringify(err)
- } catch (e) {}
- modalDialogCustom.alert(yo`
Failed to publish metadata file to swarm, please check the Swarm gateways is available ( swarm-gateways.net ). `)
- } else {
- modalDialogCustom.alert(yo`
Metadata published successfully. `)
- }
- }, function (item) {
- // triggered each time there's a new verified publish (means hash correspond)
- appAPI.fileProvider('swarm').addReadOnly(item.hash, item.content)
- })
+ function publish (appAPI) {
+ var selectContractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
+ if (selectContractNames.children.length > 0 && selectContractNames.selectedIndex >= 0) {
+ var contract = contractsDetails[selectContractNames.children[selectContractNames.selectedIndex].innerHTML]
+ if (contract.metadata === undefined || contract.metadata.length === 0) {
+ modalDialogCustom.alert('This contract does not implement all functions and thus cannot be published.')
+ } else {
+ publishOnSwarm(contract, appAPI, function (err) {
+ if (err) {
+ try {
+ err = JSON.stringify(err)
+ } catch (e) {}
+ modalDialogCustom.alert(yo`
Failed to publish metadata file to swarm, please check the Swarm gateways is available ( swarm-gateways.net ). `)
+ } else {
+ modalDialogCustom.alert(yo`
Metadata published successfully. `)
+ }
+ }, function (item) {
+ // triggered each time there's a new verified publish (means hash correspond)
+ appAPI.fileProvider('swarm').addReadOnly(item.hash, item.content)
+ })
+ }
}
}
+ return el
}
- return el
+ return { render () { return el } }
}
- return { render () { return el } }
}
function detailsHelpSection () {