From 898672b53059844d42923d818dfa201a6628003b Mon Sep 17 00:00:00 2001 From: Victor Baranov Date: Mon, 10 Dec 2018 19:35:22 +0300 Subject: [PATCH 01/21] multiple outputs support --- old-ui/app/components/send/send-contract.js | 152 ++++++++++++-------- test/e2e/metamask.spec.js | 31 ++-- 2 files changed, 106 insertions(+), 77 deletions(-) diff --git a/old-ui/app/components/send/send-contract.js b/old-ui/app/components/send/send-contract.js index 8fd3daea5..235083e8d 100644 --- a/old-ui/app/components/send/send-contract.js +++ b/old-ui/app/components/send/send-contract.js @@ -10,19 +10,26 @@ import actions from '../../../../ui/app/actions' import abiEncoder from 'web3-eth-abi' import Web3 from 'web3' import copyToClipboard from 'copy-to-clipboard' +import BigNumber from 'bignumber.js' -class SendTransactionInput extends Component { +class SendTransactionField extends Component { constructor (props) { super(props) this.state = { - inputVal: props.defaultValue, + val: props.defaultValue, } this.timerID = null } static propTypes = { placeholder: PropTypes.string, - defaultValue: PropTypes.string, + defaultValue: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.bool, + PropTypes.instanceOf(BigNumber), + ]), + disabled: PropTypes.bool, value: PropTypes.string, onChange: PropTypes.func, } @@ -31,19 +38,19 @@ class SendTransactionInput extends Component { return ( { - this.setState({ - inputVal: e.target.value, - }) - this.props.onChange(e) - } - } + this.setState({ + val: e.target.value, + }) + this.props.onChange(e) + }} style={{ marginTop: '5px' }} /> - ) + ) } } @@ -56,13 +63,15 @@ class SendTransactionScreen extends PersistentForm { methodSelected: props.methodSelected, methodABI: props.methodABI, methodInputs: [], + methodOutputs: [], methodInputsView: [], - methodOutput: null, + methodOutputsView: [], isConstantMethod: false, inputValues: props.inputValues || {}, - output: '', + outputValues: props.outputValues || {}, copyDisabled: true, } + PersistentForm.call(this) } @@ -101,15 +110,16 @@ class SendTransactionScreen extends PersistentForm { methodSelected: opt.value, isConstantMethod: opt.metadata.constant, methodABI: opt.metadata, - output: '', + outputValues: {}, inputValues: {}, + }, () => { + this.generateMethodFieldsView(opt.metadata) }) - this.generateMethodInputsView(opt.metadata) }} /> -
- {this.state.methodInputsView} -
+ +
+ {this.state.methodInputsView} {this.state.isConstantMethod && this.methodOutput()} {this.buttonsSection()}
@@ -119,7 +129,7 @@ class SendTransactionScreen extends PersistentForm { componentDidMount () { if (this.props.methodSelected) { - this.generateMethodInputsView(this.props.methodABI) + this.generateMethodFieldsView(this.props.methodABI) } } @@ -139,37 +149,45 @@ class SendTransactionScreen extends PersistentForm { }) } - generateMethodInput (params, ind) { + generateMethodField (params, ind, isInput) { + const { inputValues, outputValues } = this.state + const paramName = isInput ? 'Input' : 'Output' + let defaultValue = isInput ? (inputValues && inputValues[ind]) || '' : (outputValues && outputValues[ind]) || '' + console.log(`defaultValue: ${defaultValue}`) + if (Array.isArray(defaultValue)) { + defaultValue = defaultValue.join(', ') + } const label = (

- {params.name || `Input ${ind + 1}`} + {params.name || `${paramName} ${ind + 1}`}

) - const input = ( - this.handleInputChange(e, ind)} + defaultValue={defaultValue} + onChange={e => isInput ? this.handleInputChange(e.target.value, ind) : null} /> ) - const inputObj = ( + const fieldObj = (
{label} - {input} + {field}
) - return inputObj + return fieldObj } - handleInputChange (e, ind) { + handleInputChange (val, ind) { const { inputValues } = this.state - if (e.target.value) { - inputValues[ind] = e.target.value + if (val) { + inputValues[ind] = val } else { delete inputValues[ind] } @@ -178,53 +196,53 @@ class SendTransactionScreen extends PersistentForm { }) } - generateMethodInputsView (metadata) { + generateMethodFieldsView (metadata) { this.setState({ methodInputs: [], methodInputsView: [], + methodOutputs: [], + methodOutputsView: [], }) const methodInputsView = [] const methodInputs = metadata && metadata.inputs + const methodOutputsView = [] + const methodOutputs = metadata && metadata.outputs methodInputs.forEach((input, ind) => { - methodInputsView.push(this.generateMethodInput(input, ind)) + methodInputsView.push(this.generateMethodField(input, ind, true)) + }) + methodOutputs.forEach((output, ind) => { + methodOutputsView.push(this.generateMethodField(output, ind, false)) }) this.setState({ methodInputs, methodInputsView, + methodOutputs, + methodOutputsView, + }) + } + + updateOutputsView () { + const methodOutputsView = [] + console.log(this.state.methodOutputs) + this.state.methodOutputs.forEach((output, ind) => { + console.log(output) + methodOutputsView.push(this.generateMethodField(output, ind, false)) + }) + this.setState({ + methodOutputsView, }) } methodOutput () { - const label = ( -

- Output -

- ) - const output = ( -