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

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

@ -11,34 +11,30 @@ var modalCustom = require('../../ui/modal-dialog-custom')
var tootip = require('../../ui/tooltip')
var helper = require('../../../lib/helper.js')
function settings (container, self) {
// VARIABLES
var net = yo`<span class=${css.network}></span>`
var networkcallid = 0
const updateNetwork = (cb) => {
networkcallid++
(function (callid) {
executionContext.detectNetwork((err, { id, name } = {}) => {
if (networkcallid > callid) return
networkcallid++
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})
class SettingsUI {
constructor (container, parentSelf) {
this.container = container
this.parentSelf = parentSelf
// HELPER FUNCTIONS AND EVENTS
this.parentSelf._deps.udapp.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
if (error) return
if (!lookupOnly) this.el.querySelector('#value').value = '0'
updateAccountBalances(this.container, this.parentSelf)
})
})(networkcallid)
}
render () {
this.netUI = yo`<span class=${css.network}></span>`
var environmentEl = yo`
<div class="${css.crow}">
<div id="selectExEnv" class="${css.col1_1}">
Environment
</div>
<div class=${css.environment}>
${net}
<select id="selectExEnvOptions" onchange=${() => { updateNetwork() }} class="${css.select}">
${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
@ -57,25 +53,28 @@ function settings (container, self) {
</div>
</div>
`
var accountEl = yo`
<div class="${css.crow}">
<div class="${css.col1_1}">
Account
<i class="fa fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${newAccount} title="Create a new account"></i>
<i class="fa fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)} title="Create a new account"></i>
</div>
<div class=${css.account}>
<select name="txorigin" class="${css.select}" id="txorigin"></select>
${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
<i class="fa fa-pencil-square-o ${css.icon}" aria-hiden="true" onclick=${signMessage} title="Sign a message using this account key"></i>
<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>
</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>
@ -88,6 +87,7 @@ function settings (container, self) {
</select>
</div>
`
// DOM ELEMENT
var el = yo`
<div class="${css.settings}">
@ -97,30 +97,17 @@ function settings (container, self) {
${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
var selectExEnv = environmentEl.querySelector('#selectExEnvOptions')
this.selectExEnv = selectExEnv
function setFinalContext () {
// set the final context. Cause it is possible that this is not the one we've originaly selected
selectExEnv.value = executionContext.getProvider()
self.event.trigger('clearInstance', [])
updateNetwork()
fillAccountsList(el, self)
}
self.event.register('clearInstance', () => {
var instanceContainer = self._view.instanceContainer
var instanceContainerTitle = self._view.instanceContainerTitle
this.parentSelf.event.register('clearInstance', () => {
var instanceContainer = this.parentSelf._view.instanceContainer
var instanceContainerTitle = this.parentSelf._view.instanceContainerTitle
instanceContainer.innerHTML = '' // clear the instances list
instanceContainer.appendChild(instanceContainerTitle)
instanceContainer.appendChild(self._view.noInstancesText)
instanceContainer.appendChild(this.parentSelf._view.noInstancesText)
})
executionContext.event.register('addProvider', (network) => {
@ -139,7 +126,7 @@ function settings (container, self) {
}
})
selectExEnv.addEventListener('change', function (event) {
selectExEnv.addEventListener('change', (event) => {
let context = selectExEnv.options[selectExEnv.selectedIndex].value
executionContext.executionContextChange(context, null, () => {
modalDialogCustom.confirm(null, 'Are you sure you want to connect to an ethereum node?', () => {
@ -148,31 +135,43 @@ function settings (container, self) {
if (alertMsg) {
modalDialogCustom.alert(alertMsg)
}
setFinalContext()
this.setFinalContext()
})
}, setFinalContext)
}, setFinalContext)
}, this.setFinalContext.bind(this))
}, this.setFinalContext.bind(this))
}, (alertMsg) => {
modalDialogCustom.alert(alertMsg)
}, setFinalContext)
}, this.setFinalContext.bind(this))
})
selectExEnv.value = executionContext.getProvider()
executionContext.event.register('contextChanged', (context, silent) => {
setFinalContext()
this.setFinalContext()
})
setInterval(() => {
updateNetwork()
fillAccountsList(el, self)
this.updateNetwork()
fillAccountsList(el, this.parentSelf)
}, 5000)
setInterval(() => {
updateAccountBalances(container, self)
updateAccountBalances(this.container, this.parentSelf)
}, 10000)
function newAccount () {
self._deps.udapp.newAccount('',
this.el = el
return el
}
setFinalContext () {
// set the final context. Cause it is possible that this is not the one we've originaly selected
this.selectExEnv.value = executionContext.getProvider()
this.parentSelf.event.trigger('clearInstance', [])
this.updateNetwork()
fillAccountsList(this.el, this.parentSelf)
}
newAccount () {
this.parentSelf._deps.udapp.newAccount('',
(cb) => {
modalCustom.promptPassphraseCreation((error, passphrase) => {
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}`) }
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 isVM = executionContext.isVM()
var isInjected = executionContext.getProvider() === 'injected'
@ -209,7 +209,7 @@ function settings (container, self) {
if (isVM) {
modalDialogCustom.promptMulti(signMessageDialog, (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 {
var rsv = ethJSUtil.ecsign(personalMsg, privKey)
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
@ -296,4 +316,4 @@ function updateAccountBalances (container, self) {
})
}
module.exports = settings
module.exports = SettingsUI

Write Preview
Loading…
Cancel
Save