yann300
7 years ago
parent
35d94d18a0
commit
8b1a599d75
@ -0,0 +1,304 @@ |
||||
/* global alert */ |
||||
var $ = require('jquery') |
||||
|
||||
var yo = require('yo-yo') |
||||
const copy = require('clipboard-copy') |
||||
|
||||
var parseContracts = require('./contract/contractParser') |
||||
var publishOnSwarm = require('./contract/publishOnSwarm') |
||||
var modalDialog = require('./modaldialog') |
||||
|
||||
// -------------- styling ----------------------
|
||||
var csjs = require('csjs-inject') |
||||
var styleGuide = require('./style-guide') |
||||
var styles = styleGuide() |
||||
|
||||
var css = csjs` |
||||
.compileTabView { |
||||
padding: 2%; |
||||
} |
||||
.contract { |
||||
display: block; |
||||
margin: 3% 0; |
||||
} |
||||
.compileContainer extends ${styles.displayBox} { |
||||
margin-bottom: 2%; |
||||
} |
||||
.autocompileContainer { |
||||
width: 90px; |
||||
} |
||||
.autocompileTitle { |
||||
font-weight: bold; |
||||
margin: 1% 0; |
||||
} |
||||
.autocompile { |
||||
float: left; |
||||
align-self: center; |
||||
} |
||||
.autocompileText { |
||||
align-self: center; |
||||
margin: 1% 0; |
||||
font-size: 11px; |
||||
overflow: hidden; |
||||
word-break: normal; |
||||
line-height: initial; |
||||
margin-left: 3%; |
||||
} |
||||
.warnCompilationSlow { |
||||
color: orange; |
||||
} |
||||
.compileButtons { |
||||
display: flex; |
||||
align-items: baseline; |
||||
flex-wrap: wrap; |
||||
} |
||||
.name { |
||||
display: flex; |
||||
} |
||||
.size { |
||||
display: flex; |
||||
} |
||||
.compileButton extends ${styles.button} { |
||||
width: 130px; |
||||
min-width: 130px; |
||||
display: flex; |
||||
align-items: baseline; |
||||
justify-content: center; |
||||
margin-right: 1%; |
||||
font-size: 13px; |
||||
} |
||||
.container extends ${styles.displayBox} { |
||||
margin: 0; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.contractNames extends ${styles.dropdown} { |
||||
width: 250px; |
||||
margin-right: 5%; |
||||
height: 32px; |
||||
font-size: 12px; |
||||
font-weight: bold; |
||||
} |
||||
.contractButtons { |
||||
display: flex; |
||||
cursor: pointer; |
||||
justify-content: center; |
||||
text-align: center; |
||||
} |
||||
.details extends ${styles.button} { |
||||
min-width: 70px; |
||||
} |
||||
.publish extends ${styles.button} { |
||||
min-width: 70px; |
||||
margin-left: 2%; |
||||
} |
||||
.copyDetails { |
||||
margin-top: 5%; |
||||
font-size: 20px; |
||||
cursor: pointer; |
||||
color: ${styles.colors.grey}; |
||||
opacity: .5; |
||||
} |
||||
.copyDetails:hover { |
||||
opacity: 1; |
||||
} |
||||
.detailsJSON { |
||||
padding: 8px 0; |
||||
background-color: ${styles.colors.white}; |
||||
border: none; |
||||
color: ${styles.colors.grey}; |
||||
} |
||||
.icon { |
||||
margin-right: 3%; |
||||
} |
||||
.spinningIcon { |
||||
margin-right: .3em; |
||||
animation: spin 2s linear infinite; |
||||
} |
||||
.bouncingIcon { |
||||
margin-right: .3em; |
||||
animation: bounce 2s infinite; |
||||
} |
||||
@keyframes spin { |
||||
0% { transform: rotate(0deg); } |
||||
100% { transform: rotate(360deg); } |
||||
} |
||||
@-webkit-keyframes bounce { |
||||
0% { |
||||
margin-bottom: 0; |
||||
color: ${styles.colors.transparent}; |
||||
} |
||||
70% { |
||||
margin-bottom: 0; |
||||
color: ${styles.colors.grey}; |
||||
} |
||||
100% { |
||||
margin-bottom: 0; |
||||
color: ${styles.colors.transparent}; |
||||
} |
||||
} |
||||
` |
||||
|
||||
module.exports = compileTab |
||||
|
||||
function compileTab (container, appAPI, appEvents, opts) { |
||||
if (typeof container === 'string') container = document.querySelector(container) |
||||
if (!container) throw new Error('no container given') |
||||
|
||||
// Containers
|
||||
var warnCompilationSlow = yo`<i title="Copy Address" style="display:none" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>` |
||||
var compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>` |
||||
var compileContainer = yo` |
||||
<div class="${css.compileContainer}"> |
||||
<div class="${css.compileButtons}"> |
||||
<div class="${css.compileButton} "id="compile" title="Compile source code">${compileIcon} Start to compile</div> |
||||
<div class="${css.autocompileContainer}"> |
||||
<input class="${css.autocompile}" id="autoCompile" type="checkbox" checked title="Auto compile"> |
||||
<span class="${css.autocompileText}">Auto compile</span> |
||||
</div> |
||||
${warnCompilationSlow} |
||||
</div> |
||||
</div> |
||||
` |
||||
|
||||
// REGISTER EVENTS
|
||||
|
||||
// compilationDuration
|
||||
appEvents.compiler.register('compilationDuration', function tabHighlighting (speed) { |
||||
var settingsView = document.querySelector('#righthand-panel #menu .settingsView') |
||||
if (speed > 1000) { |
||||
warnCompilationSlow.setAttribute('title', `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`) |
||||
warnCompilationSlow.style.display = 'inline-block' |
||||
settingsView.style.color = '#FF8B8B' |
||||
} else { |
||||
warnCompilationSlow.style.display = 'none' |
||||
settingsView.style.color = '' |
||||
} |
||||
}) |
||||
// 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', '') |
||||
}) |
||||
|
||||
var el = yo` |
||||
<div class="${css.compileTabView}" id="compileTabView"> |
||||
${compileContainer} |
||||
${contractNames(container, appAPI, appEvents, opts)} |
||||
<div class='error'></div> |
||||
</div> |
||||
` |
||||
container.appendChild(el) |
||||
|
||||
/* ------------------------------------------------ |
||||
section CONTRACT DROPDOWN, DETAILS AND PUBLISH |
||||
------------------------------------------------ */ |
||||
|
||||
function contractNames (container, appAPI, appEvents, opts) { |
||||
var contractsDetails = {} |
||||
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('#righthand-panel #menu .compileView').style.color = '' |
||||
} else { |
||||
document.querySelector('#righthand-panel #menu .compileView').style.color = '#FF8B8B' |
||||
} |
||||
// display warning error if any
|
||||
var errorContainer = container.querySelector('.error') |
||||
errorContainer.innerHTML = '' |
||||
if (data['error']) { |
||||
appAPI.compilationMessage(data['error'], $(errorContainer)) |
||||
} |
||||
if (data['errors']) { |
||||
data['errors'].forEach(function (err) { |
||||
appAPI.compilationMessage(err, $(errorContainer)) |
||||
}) |
||||
} |
||||
if (errorContainer.innerHTML === '') { |
||||
appAPI.compilationMessage('Compilation successful without warning', $(errorContainer), {type: 'success'}) |
||||
} |
||||
}) |
||||
|
||||
var el = yo` |
||||
<div class="${css.container}"> |
||||
<select class="${css.contractNames}" disabled></select> |
||||
<div class="${css.contractButtons}"> |
||||
<div class="${css.details}" onclick=${() => { details() }}>Details</div> |
||||
<div class="${css.publish}" onclick=${() => { publish(appAPI) }}>Publish</div> |
||||
</div> |
||||
</div> |
||||
` |
||||
|
||||
// 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') |
||||
for (var name in data.contracts) { |
||||
contractsDetails[name] = parseContracts(name, data.contracts[name], appAPI.currentCompiledSourceCode()) |
||||
var contractName = yo` |
||||
<option> |
||||
<div class="${css.name}">${name}</div> |
||||
</option>` |
||||
contractNames.appendChild(contractName) |
||||
} |
||||
appAPI.resetDapp(contractsDetails) |
||||
} else { |
||||
contractNames.setAttribute('disabled', true) |
||||
appAPI.resetDapp({}) |
||||
} |
||||
} |
||||
|
||||
function details () { |
||||
var select = el.querySelector('select') |
||||
var contractName = select.children[select.selectedIndex].innerText |
||||
var details = JSON.stringify(contractsDetails[contractName], null, '\t') |
||||
var copyDetails = yo`<div class="${css.copyDetails}"><i title="Copy details" class="fa fa-clipboard" onclick=${() => { copy(details) }} aria-hidden="true"></i></div>` |
||||
var log = yo`<div><pre class="${css.detailsJSON}">${details} ${copyDetails}</pre></div>` |
||||
modalDialog(contractName, log, {label: 'OK'}, {label: ''}) |
||||
} |
||||
|
||||
function publish (appAPI) { |
||||
var selectContractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) |
||||
var contract = contractsDetails[selectContractNames.children[selectContractNames.selectedIndex].innerText] |
||||
publishOnSwarm(contract, appAPI, function (err) { |
||||
if (err) { |
||||
alert('Failed to publish metadata: ' + err) |
||||
} else { |
||||
alert('Metadata published successfully') |
||||
} |
||||
}) |
||||
} |
||||
return el |
||||
} |
||||
} |
||||
@ -0,0 +1,384 @@ |
||||
/* global alert */ |
||||
var $ = require('jquery') |
||||
|
||||
var yo = require('yo-yo') |
||||
var helper = require('../lib/helper.js') |
||||
var txExecution = require('./execution/txExecution') |
||||
var txFormat = require('./execution/txFormat') |
||||
var txHelper = require('./execution/txHelper') |
||||
const copy = require('clipboard-copy') |
||||
|
||||
// -------------- styling ----------------------
|
||||
var csjs = require('csjs-inject') |
||||
var styleGuide = require('./style-guide') |
||||
var styles = styleGuide() |
||||
|
||||
var css = csjs` |
||||
.runTabView { |
||||
padding: 2%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.settings extends ${styles.displayBox} { |
||||
margin-bottom: 2%; |
||||
padding: 10px 15px 15px 15px; |
||||
} |
||||
.crow { |
||||
margin-top: .5em; |
||||
display: flex; |
||||
} |
||||
.col1 extends ${styles.titleL} { |
||||
width: 30%; |
||||
float: left; |
||||
align-self: center; |
||||
} |
||||
.col1_1 extends ${styles.titleM} { |
||||
font-size: 12px; |
||||
width: 25%; |
||||
min-width: 50px; |
||||
float: left; |
||||
align-self: center; |
||||
} |
||||
.col2 extends ${styles.inputField}{ |
||||
width: 75%; |
||||
float: left; |
||||
} |
||||
.select extends ${styles.dropdown} { |
||||
width: 75%; |
||||
float: left; |
||||
text-align: center; |
||||
} |
||||
.copyaddress { |
||||
color: #C6CFF7; |
||||
margin-left: 0.5em; |
||||
margin-top: 0.7em; |
||||
cursor: pointer; |
||||
opacity: .7; |
||||
} |
||||
.copyaddress:hover { |
||||
opacity: 1; |
||||
} |
||||
.selectAddress extends ${styles.dropdown} { |
||||
width: 70%; |
||||
float: left; |
||||
text-align: center; |
||||
} |
||||
.instanceContainer extends ${styles.displayBox} { |
||||
display: flex; |
||||
flex-direction: column; |
||||
background-color: ${styles.colors.lightBlue}; |
||||
margin-top: 2%; |
||||
} |
||||
.container extends ${styles.displayBox} { |
||||
margin-top: 2%; |
||||
} |
||||
.contractNames extends ${styles.dropdown} { |
||||
height: 32px; |
||||
font-size: 12px; |
||||
width: 100%; |
||||
font-weight: bold; |
||||
background-color: ${styles.colors.lightGrey} |
||||
} |
||||
.buttons { |
||||
display: flex; |
||||
cursor: pointer; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
text-align: center; |
||||
font-size: 12px; |
||||
} |
||||
.button { |
||||
display: flex; |
||||
align-items: flex-end; |
||||
margin-top: 2%; |
||||
} |
||||
.atAddress extends ${styles.button} { |
||||
background-color: ${styles.colors.green}; |
||||
border-top-right-radius: 0; |
||||
border-bottom-right-radius: 0; |
||||
} |
||||
.create extends ${styles.button} { |
||||
background-color: ${styles.colors.lightRed}; |
||||
border-top-right-radius: 0; |
||||
border-bottom-right-radius: 0; |
||||
} |
||||
.input extends ${styles.inputField} { |
||||
border-top-left-radius: 0; |
||||
border-bottom-left-radius: 0; |
||||
width: 75%; |
||||
font-size: 10px; |
||||
padding-left: 10px; |
||||
} |
||||
.noInstancesText extends ${styles.displayBox} { |
||||
text-align: center; |
||||
color: ${styles.colors.lightGrey}; |
||||
font-style: italic; |
||||
} |
||||
.legend extends ${styles.displayBox} { |
||||
border-radius: 5px; |
||||
display: flex; |
||||
justify-content: center; |
||||
padding: 15px 8px; |
||||
word-break: normal; |
||||
flex-wrap: wrap; |
||||
} |
||||
.item { |
||||
margin-right: 1em; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.transact { |
||||
color: ${styles.colors.lightRed}; |
||||
margin-right: .3em; |
||||
} |
||||
.payable { |
||||
color: ${styles.colors.red}; |
||||
margin-right: .3em; |
||||
} |
||||
.call { |
||||
color: #9DC1F5; |
||||
margin-right: .3em; |
||||
} |
||||
` |
||||
|
||||
module.exports = runTab |
||||
|
||||
var instanceContainer = yo`<div class="${css.instanceContainer}"></div>` |
||||
var noInstancesText = yo`<div class="${css.noInstancesText}">No Contract Instances.</div>` |
||||
|
||||
function runTab (container, appAPI, appEvents, opts) { |
||||
var el = yo` |
||||
<div class="${css.runTabView}" id="runTabView"> |
||||
${settings(appAPI, appEvents)} |
||||
${legend()} |
||||
${contractDropdown(appAPI, appEvents, instanceContainer)} |
||||
${instanceContainer} |
||||
</div> |
||||
` |
||||
container.appendChild(el) |
||||
|
||||
// DROPDOWN
|
||||
var selectExEnv = el.querySelector('#selectExEnvOptions') |
||||
selectExEnv.addEventListener('change', function (event) { |
||||
if (!appAPI.executionContextChange(selectExEnv.options[selectExEnv.selectedIndex].value)) { |
||||
selectExEnv.value = appAPI.executionContextProvider() |
||||
} |
||||
fillAccountsList(appAPI, el) |
||||
instanceContainer.innerHTML = '' // clear the instances list
|
||||
instanceContainer.appendChild(noInstancesText) |
||||
}) |
||||
selectExEnv.value = appAPI.executionContextProvider() |
||||
fillAccountsList(appAPI, el) |
||||
setInterval(() => { updateAccountBalances(container, appAPI) }, 1000) |
||||
} |
||||
|
||||
|
||||
function fillAccountsList (appAPI, container) { |
||||
var $txOrigin = $(container.querySelector('#txorigin')) |
||||
$txOrigin.empty() |
||||
appAPI.udapp().getAccounts((err, accounts) => { |
||||
if (err) { console.log(err) } |
||||
if (accounts && accounts[0]) { |
||||
for (var a in accounts) { $txOrigin.append($('<option />').val(accounts[a]).text(accounts[a])) } |
||||
$txOrigin.val(accounts[0]) |
||||
} else { |
||||
$txOrigin.val('unknown') |
||||
} |
||||
}) |
||||
} |
||||
|
||||
function updateAccountBalances (container, appAPI) { |
||||
var accounts = $(container.querySelector('#txorigin')).children('option') |
||||
accounts.each(function (index, value) { |
||||
(function (acc) { |
||||
appAPI.getBalance(accounts[acc].value, function (err, res) { |
||||
if (!err) { |
||||
accounts[acc].innerText = helper.shortenAddress(accounts[acc].value, res) |
||||
} |
||||
}) |
||||
})(index) |
||||
}) |
||||
} |
||||
|
||||
/* ------------------------------------------------ |
||||
section CONTRACT DROPDOWN and BUTTONS |
||||
------------------------------------------------ */ |
||||
|
||||
function contractDropdown (appAPI, appEvents, instanceContainer) { |
||||
instanceContainer.appendChild(noInstancesText) |
||||
|
||||
appEvents.compiler.register('compilationFinished', function (success, data, source) { |
||||
getContractNames(success, data) |
||||
}) |
||||
|
||||
var atAddressButtonInput = yo`<input class="${css.input} ataddressinput" placeholder="Enter contract's address - i.e. 0x60606..." title="atAddress" />` |
||||
var createButtonInput = yo`<input class="${css.input}" placeholder="" title="create" />` |
||||
var selectContractNames = yo`<select class="${css.contractNames}" disabled></select>` |
||||
var el = yo` |
||||
<div class="${css.container}"> |
||||
${selectContractNames} |
||||
<div class="${css.buttons}"> |
||||
<div class="${css.button}"> |
||||
<div class="${css.atAddress}" onclick=${function () { loadFromAddress(appAPI) }}>At Address</div> |
||||
${atAddressButtonInput} |
||||
</div> |
||||
<div class="${css.button}"> |
||||
<div class="${css.create}" onclick=${function () { createInstance() }} >Create</div> |
||||
${createButtonInput} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
` |
||||
|
||||
function setInputParamsPlaceHolder () { |
||||
createButtonInput.value = '' |
||||
if (appAPI.getContracts()) { |
||||
var contract = appAPI.getContracts()[selectContractNames.children[selectContractNames.selectedIndex].innerText] |
||||
var ctrabi = txHelper.getConstructorInterface(contract.interface) |
||||
if (ctrabi.inputs.length) { |
||||
createButtonInput.setAttribute('placeholder', txHelper.inputParametersDeclarationToString(ctrabi.inputs)) |
||||
createButtonInput.removeAttribute('disabled') |
||||
return |
||||
} |
||||
} |
||||
createButtonInput.setAttribute('placeholder', '') |
||||
createButtonInput.setAttribute('disabled', true) |
||||
} |
||||
|
||||
selectContractNames.addEventListener('change', setInputParamsPlaceHolder) |
||||
|
||||
var init = false |
||||
// ADD BUTTONS AT ADDRESS AND CREATE
|
||||
function createInstance () { |
||||
var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) |
||||
var contracts = appAPI.getContracts() |
||||
var contract = appAPI.getContracts()[contractNames.children[contractNames.selectedIndex].innerText] |
||||
var constructor = txHelper.getConstructorInterface(contract.interface) |
||||
var args = createButtonInput.value |
||||
txFormat.buildData(contract, contracts, true, constructor, args, appAPI.udapp(), appAPI.executionContext(), (error, data) => { |
||||
if (!error) { |
||||
txExecution.createContract(data, appAPI.udapp(), (error, txResult) => { |
||||
// TODO here should send the result to the dom-console
|
||||
console.log('Contract creation', error, txResult) |
||||
var address = appAPI.executionContext().isVM() ? txResult.result.createdAddress : txResult.result.contractAddress |
||||
if (!init) { |
||||
instanceContainer.innerHTML = '' |
||||
init = true |
||||
} |
||||
instanceContainer.appendChild(appAPI.udapp().renderInstance(contract, address, selectContractNames.value)) |
||||
}) |
||||
} else { |
||||
alert(error) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
function loadFromAddress (appAPI) { |
||||
if (!init) { |
||||
instanceContainer.innerHTML = '' |
||||
init = true |
||||
} |
||||
var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) |
||||
var contract = appAPI.getContracts()[contractNames.children[contractNames.selectedIndex].innerText] |
||||
var address = atAddressButtonInput.value |
||||
instanceContainer.appendChild(appAPI.udapp().renderInstance(contract, address, selectContractNames.value)) |
||||
} |
||||
|
||||
// GET NAMES OF ALL THE CONTRACTS
|
||||
function getContractNames (success, data) { |
||||
var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) |
||||
contractNames.innerHTML = '' |
||||
if (success) { |
||||
selectContractNames.removeAttribute('disabled') |
||||
for (var name in data.contracts) { |
||||
contractNames.appendChild(yo`<option>${name}</option>`) |
||||
} |
||||
} else { |
||||
selectContractNames.setAttribute('disabled', true) |
||||
} |
||||
setInputParamsPlaceHolder() |
||||
} |
||||
|
||||
return el |
||||
} |
||||
|
||||
/* ------------------------------------------------ |
||||
section SETTINGS: Environment, Account, Gas, Value |
||||
------------------------------------------------ */ |
||||
function settings (appAPI, appEvents) { |
||||
// COPY ADDRESS
|
||||
function copyAddress () { |
||||
copy(document.querySelector('#runTabView #txorigin').value) |
||||
} |
||||
|
||||
// SETTINGS HTML
|
||||
var el = yo` |
||||
<div class="${css.settings}"> |
||||
<div class="${css.crow}"> |
||||
<div id="selectExEnv" class="${css.col1_1}"> |
||||
Environment |
||||
</div> |
||||
<select id="selectExEnvOptions" 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 Mist 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> |
||||
</div> |
||||
<div class="${css.crow}"> |
||||
<div class="${css.col1_1}">Account</div> |
||||
<select name="txorigin" class="${css.selectAddress}" id="txorigin"></select> |
||||
<i title="Copy Address" class="copytxorigin fa fa-clipboard ${css.copyaddress}" onclick=${copyAddress} aria-hidden="true"></i> |
||||
</div> |
||||
<div class="${css.crow}"> |
||||
<div class="${css.col1_1}">Gas limit</div> |
||||
<input type="number" class="${css.col2}" id="gasLimit" value="3000000"> |
||||
</div> |
||||
<div class="${css.crow} hide"> |
||||
<div class="${css.col1_1}">Gas Price</div> |
||||
<input type="number" class="${css.col2}" id="gasPrice" value="0"> |
||||
</div> |
||||
<div class="${css.crow}"> |
||||
<div class="${css.col1_1}">Value</div> |
||||
<input type="text" class="${css.col2}" id="value" value="0" title="(e.g. .7 ether ...)"> |
||||
</div> |
||||
</div> |
||||
` |
||||
|
||||
// EVENTS
|
||||
appEvents.udapp.register('transactionExecuted', (to, data, lookupOnly, txResult) => { |
||||
if (!lookupOnly) el.querySelector('#value').value = '0' |
||||
}) |
||||
|
||||
return el |
||||
} |
||||
|
||||
/* ------------------------------------------------ |
||||
section LEGEND |
||||
------------------------------------------------ */ |
||||
function legend () { |
||||
var el = |
||||
yo` |
||||
<div class="${css.legend}"> |
||||
<div class="${css.item}"><i class="fa fa-circle ${css.transact}" aria-hidden="true"></i>Transact</div/> |
||||
<div class="${css.item}"><i class="fa fa-circle ${css.payable}" aria-hidden="true"></i>Transact(Payable)</div/> |
||||
<div class="${css.item}"><i class="fa fa-circle ${css.call}" aria-hidden="true"></i>Call</div/> |
||||
</div> |
||||
` |
||||
return el |
||||
} |
||||
Loading…
Reference in new issue