${atAddressButtonInput}
At Address
@@ -255,23 +254,23 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
`
function setInputParamsPlaceHolder () {
- createButtonInput.value = ''
+ createPanel.innerHTML = ''
if (opts.compiler.getContract && selectContractNames.selectedIndex >= 0 && selectContractNames.children.length > 0) {
var ctrabi = txHelper.getConstructorInterface(getSelectedContract().contract.object.abi)
- if (ctrabi.inputs.length) {
- createButtonInput.setAttribute('placeholder', txHelper.inputParametersDeclarationToString(ctrabi.inputs))
- createButtonInput.removeAttribute('disabled')
- return
- }
+ var createConstructorInstance = new MultiParamManager(0, ctrabi, (valArray, inputsValues) => {
+ createInstance(inputsValues)
+ }, txHelper.inputParametersDeclarationToString(ctrabi.inputs), 'Deploy')
+ createPanel.appendChild(createConstructorInstance.render())
+ return
+ } else {
+ createPanel.innerHTML = 'No compiled contracts'
}
- createButtonInput.setAttribute('placeholder', '')
- createButtonInput.setAttribute('disabled', true)
}
selectContractNames.addEventListener('change', setInputParamsPlaceHolder)
// ADD BUTTONS AT ADDRESS AND CREATE
- function createInstance () {
+ function createInstance (args) {
var selectedContract = getSelectedContract()
if (selectedContract.contract.object.evm.bytecode.object.length === 0) {
@@ -280,7 +279,6 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
}
var constructor = txHelper.getConstructorInterface(selectedContract.contract.object.abi)
- var args = createButtonInput.value
txFormat.buildData(selectedContract.name, selectedContract.contract.object, opts.compiler.getContracts(), true, constructor, args, (error, data) => {
if (!error) {
appAPI.logMessage(`creation of ${selectedContract.name} pending...`)
diff --git a/src/multiParamManager.js b/src/multiParamManager.js
new file mode 100644
index 0000000000..1acd67ed76
--- /dev/null
+++ b/src/multiParamManager.js
@@ -0,0 +1,123 @@
+'use strict'
+
+var yo = require('yo-yo')
+var css = require('./universal-dapp-styles')
+
+class MultiParamManager {
+
+ /**
+ *
+ * @param {bool} lookupOnly
+ * @param {Object} funABI
+ * @param {Function} clickMultiCallBack
+ * @param {string} inputs
+ * @param {string} title
+ *
+ */
+ constructor (lookupOnly, funABI, clickCallBack, inputs, title) {
+ this.lookupOnly = lookupOnly
+ this.funABI = funABI
+ this.clickCallBack = clickCallBack
+ this.inputs = inputs
+ this.title = title
+ }
+
+ switchMethodViewOn () {
+ this.contractActionsContainerSingle.style.display = 'none'
+ this.contractActionsContainerMulti.style.display = 'flex'
+ }
+
+ switchMethodViewOff () {
+ this.contractActionsContainerSingle.style.display = 'flex'
+ this.contractActionsContainerMulti.style.display = 'none'
+ }
+
+ createMultiFields () {
+ if (this.funABI.inputs) {
+ return yo`
+ ${this.funABI.inputs.map(function (inp) {
+ return yo`
${inp.name}:
`
+ })}
+
`
+ }
+ }
+
+ render () {
+ var title
+ if (this.title) {
+ title = this.title
+ } else if (this.funABI.name) {
+ title = this.funABI.name
+ } else {
+ title = '(fallback)'
+ }
+
+ var basicInputField = yo`
`
+ basicInputField.setAttribute('placeholder', this.inputs)
+ basicInputField.setAttribute('title', '')
+
+ var onClick = () => {
+ this.clickCallBack(this.funABI.inputs, basicInputField.value)
+ }
+
+ this.contractActionsContainerSingle = yo`
+ { this.switchMethodViewOn() }} title=${title} >
+ { onClick() }} class="${css.instanceButton}">${title} ${basicInputField}
+
`
+
+ var multiFields = this.createMultiFields()
+ var multiOnClick = () => {
+ var valArray = multiFields.querySelectorAll('input')
+ var ret = ''
+ for (var k = 0; k < valArray.length; k++) {
+ var el = valArray[k]
+ if (ret !== '') ret += ','
+ ret += el.value
+ }
+ this.clickCallBack(this.funABI.inputs, ret)
+ }
+
+ var button = yo`
{ multiOnClick() }} class="${css.instanceButton}">Submit `
+
+ this.contractActionsContainerMulti = yo`
+
+
{ this.switchMethodViewOff() }} class="${css.multiHeader}">
+
+
${title}
+
+ ${multiFields}
+
+ ${button}
+
+
+
`
+
+ var contractProperty = yo`
${this.contractActionsContainerSingle} ${this.contractActionsContainerMulti}
`
+
+ if (this.lookupOnly) {
+ contractProperty.classList.add(css.constant)
+ button.setAttribute('title', (title + ' - call'))
+ this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).setAttribute('title', (title + ' - call'))
+ }
+
+ if (this.funABI.inputs && this.funABI.inputs.length > 0) {
+ contractProperty.classList.add(css.hasArgs)
+ } else {
+ this.contractActionsContainerSingle.querySelector('i').style.visibility = 'hidden'
+ basicInputField.style.display = 'none'
+ }
+
+ if (this.funABI.payable === true) {
+ contractProperty.classList.add(css.payable)
+ button.setAttribute('title', (title + ' - transact (payable)'))
+ }
+
+ if (!this.lookupOnly && this.funABI.payable === false) {
+ button.setAttribute('title', (title + ' - transact (not payable)'))
+ }
+
+ return contractProperty
+ }
+}
+
+module.exports = MultiParamManager
diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js
index b4aa493330..35ffab582a 100644
--- a/src/universal-dapp-styles.js
+++ b/src/universal-dapp-styles.js
@@ -19,6 +19,7 @@ var css = csjs`
word-break: break-word;
line-height: initial;
overflow: visible;
+ margin-bottom: 10px;
}
.titleLine {
display: flex;
@@ -37,6 +38,8 @@ var css = csjs`
${styles.rightPanel.runTab.box_Instance};
margin-bottom: 10px;
padding: 10px 15px 15px 15px;
+ position: relative;
+ overflow: visible;
}
.instance .title:before {
content: "\\25BE";
@@ -55,13 +58,24 @@ var css = csjs`
.instance.hidesub .udappClose {
display: flex;
}
+ .methCaret {
+ margin-right: 5px;
+ cursor: pointer;
+ font-size: 12px;
+ padding-top: 5px;
+ vertical-align: top;
+ }
+ .group:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
.buttonsContainer {
margin-top: 2%;
display: flex;
overflow: hidden;
}
.contractActions {
- display: flex;
}
.instanceButton {}
.closeIcon {
@@ -75,10 +89,13 @@ var css = csjs`
.contractProperty {
overflow: auto;
margin-bottom: 0.4em;
+ width:100%;
}
.contractProperty.hasArgs input {
- width: 75%;
+ min-width: 200px;
padding: .36em;
+ border-radius: 5px;
+ width: 70%;
}
.contractProperty button {
${styles.rightPanel.runTab.button_Create}
@@ -101,10 +118,9 @@ var css = csjs`
margin:0;
word-break: inherit;
outline: none;
- width: inherit;
}
.contractProperty input {
- display: none;
+ width: 75%
}
.contractProperty > .value {
box-sizing: border-box;
@@ -113,6 +129,83 @@ var css = csjs`
color: ${styles.appProperties.mainText_Color};
margin-left: 4px;
}
+ .contractActionsContainer {
+ display: flex;
+ width: 98%;
+ }
+ .contractActionsContainerSingle {
+ display: flex;
+ width: 100%;
+ }
+ .contractActionsContainerMulti {
+ display:none;
+ width: 100%;
+ }
+ .contractActionsContainerMultiInner {
+ margin-bottom: 10px;
+ border-bottom: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
+ padding: 0px 5px 5px 0px;
+ background-color: ${styles.appProperties.primary_BackgroundColor};
+ width: 100%;
+ }
+ .multiHeader {
+ text-align: left;
+ font-size: 10px;
+ margin-bottom: 5px;
+ font-weight: bold;
+ }
+ .multiTitle {
+ ${styles.rightPanel.runTab.button_Create}
+ border-radius: 3px;
+ display: inline-block;
+ width: 95%;
+ font-size: 10px;
+ height: 25px;
+ padding-left: 20px;
+ font-weight: normal;
+ line-height: 25px;
+ cursor: default;
+ }
+ .contractProperty.constant .multiTitle {
+ ${styles.rightPanel.runTab.button_Constant}
+ border-radius: 3px;
+ display: inline-block;
+ width: 95%;
+ font-size: 10px;
+ height: 25px;
+ padding-left: 20px;
+ font-weight: normal;
+ line-height: 25px;
+ cursor: default;
+ }
+ .multiArg {
+ margin-bottom: 8px;
+ }
+ .multiArg input{
+ padding: 5px;
+ }
+
+ .multiArg label {
+ float: left;
+ margin-right: 6px;
+ font-size: 10px;
+ width: 20%;
+ }
+ .multiArg button {
+ border-radius: 3px;
+ float: right;
+ margin-right: 5%;
+ font-size: 10px;
+ border-width: 1px;
+ width: inherit;
+ }
+ .multiHeader button {
+ display: inline-block;
+ width: 94%;
+ }
+ .hasArgs .multiArg input {
+ border-left: 1px solid #dddddd;
+ }
.hasArgs input {
display: block;
border: 1px solid #dddddd;
diff --git a/src/universal-dapp-ui.js b/src/universal-dapp-ui.js
index 977bd830d1..21ab28cef9 100644
--- a/src/universal-dapp-ui.js
+++ b/src/universal-dapp-ui.js
@@ -6,6 +6,7 @@ var yo = require('yo-yo')
var helper = require('./lib/helper')
var copyToClipboard = require('./app/ui/copy-to-clipboard')
var css = require('./universal-dapp-styles')
+var MultiParamManager = require('./multiParamManager')
/*
trigger debugRequested
@@ -91,63 +92,22 @@ UniversalDAppUI.prototype.getCallButton = function (args) {
// args.contractName [constr only]
var lookupOnly = args.funABI.constant
- var inputs = self.udapp.getInputs(args.funABI)
- var inputField = yo`
`
- inputField.setAttribute('placeholder', inputs)
- inputField.setAttribute('title', inputs)
+ var outputOverride = yo`
` // show return value
- var outputOverride = yo`
`
-
- var title
- if (args.funABI.name) {
- title = args.funABI.name
- } else {
- title = '(fallback)'
- }
-
- var button = yo`
`
- button.classList.add(css.call)
- button.setAttribute('title', title)
- button.innerHTML = title
-
- function clickButton () {
- self.udapp.call(true, args, inputField.value, lookupOnly, (decoded) => {
+ function clickButton (valArr, inputsValues) {
+ self.udapp.call(true, args, inputsValues, lookupOnly, (decoded) => {
outputOverride.innerHTML = ''
outputOverride.appendChild(decoded)
})
}
- var contractProperty = yo`
`
- var contractActions = yo`
`
-
- contractProperty.appendChild(contractActions)
- contractActions.appendChild(button)
- if (inputs.length) {
- contractActions.appendChild(inputField)
- }
- if (lookupOnly) {
- contractProperty.appendChild(outputOverride)
- }
-
- if (lookupOnly) {
- contractProperty.classList.add(css.constant)
- button.setAttribute('title', (title + ' - call'))
- }
-
- if (args.funABI.inputs && args.funABI.inputs.length > 0) {
- contractProperty.classList.add(css.hasArgs)
- }
+ var multiParamManager = new MultiParamManager(lookupOnly, args.funABI, (valArray, inputsValues) => {
+ clickButton(valArray, inputsValues)
+ }, self.udapp.getInputs(args.funABI))
- if (args.funABI.payable === true) {
- contractProperty.classList.add(css.payable)
- button.setAttribute('title', (title + ' - transact (payable)'))
- }
-
- if (!lookupOnly && args.funABI.payable === false) {
- button.setAttribute('title', (title + ' - transact (not payable)'))
- }
+ var contractActionsContainer = yo`
${multiParamManager.render()}
`
- return contractProperty
+ return contractActionsContainer
}
module.exports = UniversalDAppUI