commit
1067e2de1c
@ -1,125 +0,0 @@ |
||||
var yo = require('yo-yo') |
||||
const copy = require('clipboard-copy') |
||||
|
||||
// -------------- styling ----------------------
|
||||
var csjs = require('csjs-inject') |
||||
var styleGuide = require('./style-guide') |
||||
var styles = styleGuide() |
||||
|
||||
var css = csjs` |
||||
.contractTabView { |
||||
padding: 2%; |
||||
} |
||||
.crow { |
||||
margin-top: 1em; |
||||
display: flex; |
||||
} |
||||
.col1 extends ${styles.titleL} { |
||||
width: 30%; |
||||
float: left; |
||||
align-self: center; |
||||
} |
||||
.col1_1 extends ${styles.titleM} { |
||||
width: 30%; |
||||
float: left; |
||||
align-self: center; |
||||
} |
||||
.col2 extends ${styles.textBoxL}{ |
||||
width: 70%; |
||||
height: 32px; |
||||
float: left; |
||||
padding: .8em; |
||||
} |
||||
.select extends ${styles.dropdown} { |
||||
width: 70%; |
||||
float: left; |
||||
text-align: center; |
||||
height: 32px; |
||||
} |
||||
.contract { |
||||
display: block; |
||||
margin: 4em 0 2em 0; |
||||
} |
||||
.copyaddress { |
||||
color: #C6CFF7; |
||||
margin-right: 0.2em; |
||||
margin-top: 0.7em; |
||||
cursor: pointer; |
||||
} |
||||
.selectAddress extends ${styles.dropdown} { |
||||
width: 74%; |
||||
float: left; |
||||
text-align: center; |
||||
height: 32px; |
||||
} |
||||
` |
||||
|
||||
module.exports = contractTab |
||||
|
||||
function contractTab (container, appAPI, appEvents, opts) { |
||||
function copyAddress () { |
||||
copy(document.querySelector('#envView #txorigin').value) |
||||
} |
||||
var el = yo` |
||||
<div class="${css.contractTabView}" id="envView"> |
||||
<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> |
||||
<i title="Copy Address" class="copytxorigin fa fa-clipboard ${css.copyaddress}" onclick=${copyAddress} aria-hidden="true"></i><select name="txorigin" class="${css.selectAddress}" id="txorigin"></select> |
||||
</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 id="output" class="${css.contract}"></div> |
||||
</div> |
||||
` |
||||
appEvents.udapp.register('transactionExecuted', (to, data, lookupOnly, txResult) => { |
||||
if (!lookupOnly) el.querySelector('#value').value = '0' |
||||
}) |
||||
|
||||
/* --------------------------------------------------------------------------- |
||||
DROPDOWN |
||||
--------------------------------------------------------------------------- */ |
||||
var selectExEnv = el.querySelector('#selectExEnvOptions') |
||||
selectExEnv.addEventListener('change', function (event) { |
||||
if (!appAPI.executionContextChange(selectExEnv.options[selectExEnv.selectedIndex].value)) { |
||||
selectExEnv.value = appAPI.executionContextProvider() |
||||
} |
||||
}) |
||||
selectExEnv.value = appAPI.executionContextProvider() |
||||
container.appendChild(el) |
||||
} |
Loading…
Reference in new issue