(Feature) Multiple outputs fields for contract calls

old-ui/app/components/send/send-contract.js

@@ -11,18 +11,23 @@ import abiEncoder from 'web3-eth-abi'
 import Web3 from 'web3'
 import copyToClipboard from 'copy-to-clipboard'
 
-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,
+		]),
+		disabled: PropTypes.bool,
 		value: PropTypes.string,
 		onChange: PropTypes.func,
 	}
@@ -31,38 +36,41 @@ class SendTransactionInput extends Component {
 		return (
 			<input
 				type="text"
-				className="input large-input"
+				className="input large-input output"
 				placeholder={this.props.placeholder}
-				value={this.state.inputVal}
+				value={this.state.val}
+				disabled={this.props.disabled}
 				onChange={e => {
-						this.setState({
-							inputVal: e.target.value,
-						})
-						this.props.onChange(e)
-					}
-				}
+					this.setState({
+						val: e.target.value,
+					})
+					this.props.onChange(e)
+				}}
 				style={{ marginTop: '5px' }}
 			/>
-			)
+		)
 	}
 }
 
 class SendTransactionScreen extends PersistentForm {
 	constructor (props) {
 		super(props)
 		this.state = {
+			web3: new Web3(global.ethereumProvider),
 			options: [],
 			abi: [],
 			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 +109,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)
 						}}
 					/>
-					<div style={{ overflow: 'auto', maxHeight: this.state.isConstantMethod ? '120px' : '210px' }}>
-						{this.state.methodInputsView}
-					</div>
+				</div>
+				<div style={{ padding: '0 30px', overflow: 'auto', 'maxHeight': '280px' }}>
+					{this.state.methodInputsView}
 					{this.state.isConstantMethod && this.methodOutput()}
 					{this.buttonsSection()}
 				</div>
@@ -119,14 +128,14 @@ class SendTransactionScreen extends PersistentForm {
 
 	componentDidMount () {
 		if (this.props.methodSelected) {
-			this.generateMethodInputsView(this.props.methodABI)
+			this.generateMethodFieldsView(this.props.methodABI)
 		}
 	}
 
 	async getContractMethods () {
 		const contractProps = await this.props.getContract(this.props.address)
 		const abi = contractProps && contractProps.abi
-		const options = abi && abi.reduce((filtered, obj) => {
+		const options = abi && Array.isArray(abi) && abi.reduce((filtered, obj) => {
 			if (obj.type === 'function') {
 				filtered.push({ label: obj.name, value: obj.name, metadata: obj })
 			}
@@ -139,37 +148,59 @@ class SendTransactionScreen extends PersistentForm {
 		})
 	}
 
-	generateMethodInput (params, ind) {
+	generateMethodField (params, ind, isInput) {
+		const { inputValues, outputValues, web3 } = this.state
+		const paramName = isInput ? 'Input' : 'Output'
+		const defaultInputValue = (inputValues && inputValues[ind]) || ''
+		const defaultOutputValue = params.type === 'bool' ? outputValues && outputValues[ind] : (outputValues && outputValues[ind]) || ''
+		let defaultValue = isInput ? defaultInputValue : defaultOutputValue
+		if (Array.isArray(defaultValue)) {
+			defaultValue = defaultValue.join(', ')
+		} else if ((params.type.startsWith('uint') || params.type.startsWith('int')) && !isNaN(Number(defaultValue)) && Number(defaultValue) > 0) {
+			defaultValue = web3.toBigNumber(defaultValue).toFixed()
+		} else if (defaultValue) {
+			defaultValue = defaultValue.toString()
+		}
 		const label = (
 			<h3
 				key={`method_label_${ind}`}
 				style={{ marginTop: '10px' }}
 			>
-				{params.name || `Input ${ind + 1}`}
+				{params.name || `${paramName} ${ind + 1}`}
+				{!isInput ? <i
+					className="clipboard cursor-pointer"
+					style={{ marginLeft: '10px' }}
+					onClick={(e) => { copyToClipboard(defaultValue) }}
+				/> : null}
 			</h3>
 		)
-		const input = (
-			<SendTransactionInput
+		const field = (
+			<SendTransactionField
 				key={Math.random()}
 				ind={ind}
+				disabled={!isInput}
 				placeholder={params.type}
-				defaultValue={(this.props.inputValues && this.props.inputValues[ind]) || ''}
-				onChange={e => this.handleInputChange(e, ind)}
+				defaultValue={defaultValue}
+				onChange={e => isInput ? this.handleInputChange(e.target.value, params.type, ind) : null}
 			/>
 		)
-		const inputObj = (
+		const fieldObj = (
 			<div key={`method_label_container_${ind}`}>
 				{label}
-				{input}
+				{field}
 			</div>
 		)
-		return inputObj
+		return fieldObj
 	}
 
-	handleInputChange (e, ind) {
+	handleInputChange (val, type, ind) {
 		const { inputValues } = this.state
-		if (e.target.value) {
-			inputValues[ind] = e.target.value
+		if (val) {
+			if (type === 'bool') {
+				inputValues[ind] = (val === 'true')
+			} else {
+				inputValues[ind] = val
+			}
 		} else {
 			delete inputValues[ind]
 		}
@@ -178,53 +209,51 @@ 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 = []
+		this.state.methodOutputs.forEach((output, ind) => {
+			methodOutputsView.push(this.generateMethodField(output, ind, false))
+		})
+		this.setState({
+			methodOutputsView,
 		})
 	}
 
 	methodOutput () {
-		const label = (
-			<h2
-				key="method_output_label"
-				style={{
-					marginTop: '10px',
-				}}
-				>
-				Output
-			</h2>
-		)
-		const output = (
-			<textarea
-				key="method_output_value"
-				className="input large-input"
-				disabled={true}
-				value={this.state.output}
-				style={{
-					marginTop: '5px',
-					width: '100%',
-					height: '50px',
-				}}
-			/>
-		)
-		const outputObj = (
+		return (
 			<div>
-				{label}
-				{output}
+				<h3
+					className="flex-center"
+					style={{ marginTop: '10px' }}
+				>Output data</h3>
+				{this.state.methodOutputsView}
 			</div>
 		)
-		return outputObj
 	}
 
 	buttonsSection () {
@@ -265,9 +294,8 @@ class SendTransactionScreen extends PersistentForm {
 
 	callData = () => {
 		this.props.showLoadingIndication()
-		const { abi, methodSelected, inputValues } = this.state
+		const { abi, methodSelected, inputValues, methodOutputs, methodOutputsView, web3 } = this.state
 		const { address } = this.props
-		const web3 = new Web3(global.ethereumProvider)
 
 		const inputValuesArray = Object.keys(inputValues).map(key => inputValues[key])
 		try {
@@ -277,18 +305,44 @@ class SendTransactionScreen extends PersistentForm {
 					this.props.hideToast()
 					return this.props.displayWarning(err)
 				}
-				if (output) {
-					this.setState({
-						output,
+				const outputValues = {}
+				if (methodOutputsView.length > 1) {
+					output.forEach((val, ind) => {
+						const type = methodOutputs && methodOutputs[ind] && methodOutputs[ind].type
+						outputValues[ind] = this.setOutputValue(val, type)
 					})
+				} else {
+					const type = methodOutputs && methodOutputs[0] && methodOutputs[0].type
+					outputValues[0] = this.setOutputValue(output, type)
 				}
+				this.setState({
+					outputValues,
+				})
+				this.updateOutputsView()
 			})
 		} catch (e) {
 			this.props.hideToast()
 			return this.props.displayWarning(e)
 		}
 	}
 
+	setOutputValue = (val, type) => {
+		console.log(val)
+		if (!type) {
+			return val || ''
+		}
+		if (!val) {
+			if (type === 'bool') {
+				return val
+			}
+			return ''
+		}
+		if ((type.startsWith('uint') || type.startsWith('int')) && !type.endsWith('[]')) {
+			return val.toFixed().toString()
+		}
+		return val
+	}
+
 	encodeFunctionCall = () => {
 		const { inputValues, methodABI } = this.state
 		const inputValuesArray = Object.keys(inputValues).map(key => inputValues[key])