mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

refactor settings into a class; add render method

Browse Source
pull/1/head
Iuri Matias 6 years ago committed by yann300
parent 9dc1ad76db
commit f3681345f9
2 changed files with 176 additions and 155 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      src/app/tabs/run-tab.js
  2. 326
      src/app/tabs/runTab/settings.js

5
src/app/tabs/run-tab.js
Unescape View File

@ -11,7 +11,7 @@ var Card = require('../ui/card')
var Recorder = require('../../recorder') var Recorder = require('../../recorder')
var css = require('./styles/run-tab-styles') var css = require('./styles/run-tab-styles')
var settingsUI = require('./runTab/settings.js') var SettingsUI = require('./runTab/settings.js')
var contractDropdownUI = require('./runTab/contractDropdown.js') var contractDropdownUI = require('./runTab/contractDropdown.js')
function runTab (opts, localRegistry) { function runTab (opts, localRegistry) {
@ -128,9 +128,10 @@ function runTab (opts, localRegistry) {
/* ------------------------- /* -------------------------
MAIN HTML ELEMENT MAIN HTML ELEMENT
--------------------------- */ --------------------------- */
var settingsUI = new SettingsUI(container, self)
var el = yo` var el = yo`
<div> <div>
${settingsUI(container, self)} ${settingsUI.render()}
${contractDropdownUI(self.event, self)} ${contractDropdownUI(self.event, self)}
${recorderCard.render()} ${recorderCard.render()}
${self._view.instanceContainer} ${self._view.instanceContainer}

326
src/app/tabs/runTab/settings.js
Unescape View File

@ -11,168 +11,167 @@ var modalCustom = require('../../ui/modal-dialog-custom')
var tootip = require('../../ui/tooltip') var tootip = require('../../ui/tooltip')
var helper = require('../../../lib/helper.js') var helper = require('../../../lib/helper.js')
function settings (container, self) { class SettingsUI {
// VARIABLES
var net = yo`<span class=${css.network}></span>` constructor (container, parentSelf) {
var networkcallid = 0 this.container = container
const updateNetwork = (cb) => { this.parentSelf = parentSelf
networkcallid++ // HELPER FUNCTIONS AND EVENTS
(function (callid) { this.parentSelf._deps.udapp.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
executionContext.detectNetwork((err, { id, name } = {}) => { if (error) return
if (networkcallid > callid) return if (!lookupOnly) this.el.querySelector('#value').value = '0'
networkcallid++ updateAccountBalances(this.container, this.parentSelf)
if (err) { })
console.error(err)
net.innerHTML = 'can\'t detect network '
} else {
net.innerHTML = `<i class="${css.networkItem} fa fa-plug" aria-hidden="true"></i> ${name} (${id || '-'})`
}
if (cb) cb(err, {id, name})
})
})(networkcallid)
} }
var environmentEl = yo`
<div class="${css.crow}"> render () {
<div id="selectExEnv" class="${css.col1_1}"> this.netUI = yo`<span class=${css.network}></span>`
Environment
var environmentEl = yo`
<div class="${css.crow}">
<div id="selectExEnv" class="${css.col1_1}">
Environment
</div>
<div class=${css.environment}>
${this.netUI}
<select id="selectExEnvOptions" onchange=${() => { this.updateNetwork() }} class="${css.select}">
<option id="vm-mode"
title="Execution environment does not connect to any node, everything is local and in memory only."
value="vm" checked name="executionContext"> JavaScript VM
</option>
<option id="injected-mode"
title="Execution environment has been provided by Metamask or similar provider."
value="injected" checked name="executionContext"> Injected Web3
</option>
<option id="web3-mode"
title="Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse!
If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http."
value="web3" name="executionContext"> Web3 Provider
</option>
</select>
<a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md" target="_blank"><i class="${css.icon} fa fa-info"></i></a>
</div>
</div> </div>
<div class=${css.environment}> `
${net}
<select id="selectExEnvOptions" onchange=${() => { updateNetwork() }} class="${css.select}"> var accountEl = yo`
<option id="vm-mode" <div class="${css.crow}">
title="Execution environment does not connect to any node, everything is local and in memory only." <div class="${css.col1_1}">
value="vm" checked name="executionContext"> JavaScript VM Account
</option> <i class="fa fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)} title="Create a new account"></i>
<option id="injected-mode" </div>
title="Execution environment has been provided by Metamask or similar provider." <div class=${css.account}>
value="injected" checked name="executionContext"> Injected Web3 <select name="txorigin" class="${css.select}" id="txorigin"></select>
</option> ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
<option id="web3-mode" <i class="fa fa-pencil-square-o ${css.icon}" aria-hiden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i>
title="Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse! </div>
If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http."
value="web3" name="executionContext"> Web3 Provider
</option>
</select>
<a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md" target="_blank"><i class="${css.icon} fa fa-info"></i></a>
</div> </div>
</div> `
`
var accountEl = yo` var gasPriceEl = yo`
<div class="${css.crow}"> <div class="${css.crow}">
<div class="${css.col1_1}"> <div class="${css.col1_1}">Gas limit</div>
Account <input type="number" class="${css.col2}" id="gasLimit" value="3000000">
<i class="fa fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${newAccount} title="Create a new account"></i>
</div> </div>
<div class=${css.account}> `
<select name="txorigin" class="${css.select}" id="txorigin"></select>
${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)} var valueEl = yo`
<i class="fa fa-pencil-square-o ${css.icon}" aria-hiden="true" onclick=${signMessage} title="Sign a message using this account key"></i> <div class="${css.crow}">
<div class="${css.col1_1}">Value</div>
<input type="text" class="${css.col2_1}" id="value" value="0" title="Enter the value and choose the unit">
<select name="unit" class="${css.col2_2}" id="unit">
<option data-unit="wei">wei</option>
<option data-unit="gwei">gwei</option>
<option data-unit="finney">finney</option>
<option data-unit="ether">ether</option>
</select>
</div> </div>
</div> `
`
var gasPriceEl = yo`
<div class="${css.crow}">
<div class="${css.col1_1}">Gas limit</div>
<input type="number" class="${css.col2}" id="gasLimit" value="3000000">
</div>
`
var valueEl = yo`
<div class="${css.crow}">
<div class="${css.col1_1}">Value</div>
<input type="text" class="${css.col2_1}" id="value" value="0" title="Enter the value and choose the unit">
<select name="unit" class="${css.col2_2}" id="unit">
<option data-unit="wei">wei</option>
<option data-unit="gwei">gwei</option>
<option data-unit="finney">finney</option>
<option data-unit="ether">ether</option>
</select>
</div>
`
// DOM ELEMENT
var el = yo`
<div class="${css.settings}">
${environmentEl}
${accountEl}
${gasPriceEl}
${valueEl}
</div>
`
// HELPER FUNCTIONS AND EVENTS
self._deps.udapp.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
if (error) return
if (!lookupOnly) el.querySelector('#value').value = '0'
updateAccountBalances(container, self)
})
// DROPDOWN // DOM ELEMENT
var selectExEnv = environmentEl.querySelector('#selectExEnvOptions') var el = yo`
<div class="${css.settings}">
${environmentEl}
${accountEl}
${gasPriceEl}
${valueEl}
</div>
`
function setFinalContext () { // DROPDOWN
// set the final context. Cause it is possible that this is not the one we've originaly selected var selectExEnv = environmentEl.querySelector('#selectExEnvOptions')
selectExEnv.value = executionContext.getProvider() this.selectExEnv = selectExEnv
self.event.trigger('clearInstance', [])
updateNetwork()
fillAccountsList(el, self)
}
self.event.register('clearInstance', () => { this.parentSelf.event.register('clearInstance', () => {
var instanceContainer = self._view.instanceContainer var instanceContainer = this.parentSelf._view.instanceContainer
var instanceContainerTitle = self._view.instanceContainerTitle var instanceContainerTitle = this.parentSelf._view.instanceContainerTitle
instanceContainer.innerHTML = '' // clear the instances list instanceContainer.innerHTML = '' // clear the instances list
instanceContainer.appendChild(instanceContainerTitle) instanceContainer.appendChild(instanceContainerTitle)
instanceContainer.appendChild(self._view.noInstancesText) instanceContainer.appendChild(this.parentSelf._view.noInstancesText)
}) })
executionContext.event.register('addProvider', (network) => { executionContext.event.register('addProvider', (network) => {
selectExEnv.appendChild(yo`<option selectExEnv.appendChild(yo`<option
title="Manually added environment: ${network.url}" title="Manually added environment: ${network.url}"
value="${network.name}" name="executionContext"> ${network.name} value="${network.name}" name="executionContext"> ${network.name}
</option>`) </option>`)
tootip(`${network.name} [${network.url}] added`) tootip(`${network.name} [${network.url}] added`)
}) })
executionContext.event.register('removeProvider', (name) => { executionContext.event.register('removeProvider', (name) => {
var env = selectExEnv.querySelector(`option[value="${name}"]`) var env = selectExEnv.querySelector(`option[value="${name}"]`)
if (env) { if (env) {
selectExEnv.removeChild(env) selectExEnv.removeChild(env)
tootip(`${name} removed`) tootip(`${name} removed`)
} }
}) })
selectExEnv.addEventListener('change', function (event) { selectExEnv.addEventListener('change', (event) => {
let context = selectExEnv.options[selectExEnv.selectedIndex].value let context = selectExEnv.options[selectExEnv.selectedIndex].value
executionContext.executionContextChange(context, null, () => { executionContext.executionContextChange(context, null, () => {
modalDialogCustom.confirm(null, 'Are you sure you want to connect to an ethereum node?', () => { modalDialogCustom.confirm(null, 'Are you sure you want to connect to an ethereum node?', () => {
modalDialogCustom.prompt(null, 'Web3 Provider Endpoint', 'http://localhost:8545', (target) => { modalDialogCustom.prompt(null, 'Web3 Provider Endpoint', 'http://localhost:8545', (target) => {
executionContext.setProviderFromEndpoint(target, context, (alertMsg) => { executionContext.setProviderFromEndpoint(target, context, (alertMsg) => {
if (alertMsg) { if (alertMsg) {
modalDialogCustom.alert(alertMsg) modalDialogCustom.alert(alertMsg)
} }
setFinalContext() this.setFinalContext()
}) })
}, setFinalContext) }, this.setFinalContext.bind(this))
}, setFinalContext) }, this.setFinalContext.bind(this))
}, (alertMsg) => { }, (alertMsg) => {
modalDialogCustom.alert(alertMsg) modalDialogCustom.alert(alertMsg)
}, setFinalContext) }, this.setFinalContext.bind(this))
}) })
selectExEnv.value = executionContext.getProvider() selectExEnv.value = executionContext.getProvider()
executionContext.event.register('contextChanged', (context, silent) => { executionContext.event.register('contextChanged', (context, silent) => {
setFinalContext() this.setFinalContext()
}) })
setInterval(() => {
this.updateNetwork()
fillAccountsList(el, this.parentSelf)
}, 5000)
setInterval(() => {
updateAccountBalances(this.container, this.parentSelf)
}, 10000)
setInterval(() => { this.el = el
updateNetwork() return el
fillAccountsList(el, self) }
}, 5000)
setInterval(() => { setFinalContext () {
updateAccountBalances(container, self) // set the final context. Cause it is possible that this is not the one we've originaly selected
}, 10000) this.selectExEnv.value = executionContext.getProvider()
this.parentSelf.event.trigger('clearInstance', [])
this.updateNetwork()
fillAccountsList(this.el, this.parentSelf)
}
function newAccount () { newAccount () {
self._deps.udapp.newAccount('', this.parentSelf._deps.udapp.newAccount('',
(cb) => { (cb) => {
modalCustom.promptPassphraseCreation((error, passphrase) => { modalCustom.promptPassphraseCreation((error, passphrase) => {
if (error) { if (error) {
@ -190,11 +189,12 @@ function settings (container, self) {
} }
) )
} }
function signMessage (event) {
self._deps.udapp.getAccounts((err, accounts) => { signMessage (event) {
this.parentSelf._deps.udapp.getAccounts((err, accounts) => {
if (err) { addTooltip(`Cannot get account list: ${err}`) } if (err) { addTooltip(`Cannot get account list: ${err}`) }
var signMessageDialog = { 'title': 'Sign a message', 'text': 'Enter a message to sign', 'inputvalue': 'Message to sign' } var signMessageDialog = { 'title': 'Sign a message', 'text': 'Enter a message to sign', 'inputvalue': 'Message to sign' }
var $txOrigin = container.querySelector('#txorigin') var $txOrigin = this.container.querySelector('#txorigin')
var account = $txOrigin.selectedOptions[0].value var account = $txOrigin.selectedOptions[0].value
var isVM = executionContext.isVM() var isVM = executionContext.isVM()
var isInjected = executionContext.getProvider() === 'injected' var isInjected = executionContext.getProvider() === 'injected'
@ -209,7 +209,7 @@ function settings (container, self) {
if (isVM) { if (isVM) {
modalDialogCustom.promptMulti(signMessageDialog, (message) => { modalDialogCustom.promptMulti(signMessageDialog, (message) => {
const personalMsg = ethJSUtil.hashPersonalMessage(Buffer.from(message)) const personalMsg = ethJSUtil.hashPersonalMessage(Buffer.from(message))
var privKey = self._deps.udapp.accounts[account].privateKey var privKey = this.parentSelf._deps.udapp.accounts[account].privateKey
try { try {
var rsv = ethJSUtil.ecsign(personalMsg, privKey) var rsv = ethJSUtil.ecsign(personalMsg, privKey)
var signedData = ethJSUtil.toRpcSig(rsv.v, rsv.r, rsv.s) var signedData = ethJSUtil.toRpcSig(rsv.v, rsv.r, rsv.s)
@ -252,7 +252,27 @@ function settings (container, self) {
}) })
} }
return el // TODO: cb param doesn't seem to be used
updateNetwork (cb) {
let self = this
var networkcallid = 0
networkcallid++
(function (callid) {
executionContext.detectNetwork((err, { id, name } = {}) => {
if (networkcallid > callid) return
networkcallid++
if (err) {
console.error(err)
self.netUI.innerHTML = 'can\'t detect network '
} else {
self.netUI.innerHTML = `<i class="${css.networkItem} fa fa-plug" aria-hidden="true"></i> ${name} (${id || '-'})`
}
// TODO: cb param doesn't seem to be used
if (cb) cb(err, {id, name})
})
})(networkcallid)
}
} }
var accountListCallId = 0 var accountListCallId = 0
@ -296,4 +316,4 @@ function updateAccountBalances (container, self) {
}) })
} }
module.exports = settings module.exports = SettingsUI

Write Preview
Loading…
Cancel
Save