From b59df1d7b83523094c498dd09141291c942f8c4f Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Fri, 11 Nov 2016 12:37:01 +0100 Subject: [PATCH] WIP // Real ABI params in Deploy Constructor #3314 --- .../DeployContract/DetailsStep/detailsStep.js | 217 +++++++++++------- .../modals/DeployContract/deployContract.css | 14 ++ js/src/ui/Form/Input/input.js | 8 +- 3 files changed, 154 insertions(+), 85 deletions(-) diff --git a/js/src/modals/DeployContract/DetailsStep/detailsStep.js b/js/src/modals/DeployContract/DetailsStep/detailsStep.js index 568d1bff1..51d2318c8 100644 --- a/js/src/modals/DeployContract/DetailsStep/detailsStep.js +++ b/js/src/modals/DeployContract/DetailsStep/detailsStep.js @@ -28,7 +28,7 @@ class TypedInput extends Component { static propTypes = { onChange: PropTypes.func.isRequired, accounts: PropTypes.object.isRequired, - type: PropTypes.string.isRequired, + param: PropTypes.object.isRequired, error: PropTypes.any, value: PropTypes.any, @@ -36,32 +36,84 @@ class TypedInput extends Component { }; render () { - const { type } = this.props; + const { param } = this.props; + const { type } = param; - const arrayRegex = /^(.+)\[(\d*)\]$/; + if (type === ARRAY_TYPE) { + const { accounts, label, value = param.default } = this.props; + const { subtype, length } = param; - if (arrayRegex.test(type)) { - const matches = arrayRegex.exec(type); - return this.renderArray(matches[1], matches[2] || Infinity); + if (length) { + const inputs = range(length).map((_, index) => { + const onChange = (inputValue) => { + const newValues = [].concat(this.props.value); + newValues[index] = inputValue; + this.props.onChange(newValues); + }; + + return ( + + ); + }); + + return ( +
+ + { inputs } +
+ ); + } } - switch (type) { - case 'address': - return this.renderAddress(); - - case 'bool': - return this.renderBoolean(); - - default: - return this.renderDefault(); - } + return this.renderType(type); } - renderArray (type, max) { - const { label, value, error } = this.props; + renderType (type) { + if (type === ADDRESS_TYPE) { + return this.renderAddress(); + } + + if (type === BOOL_TYPE) { + return this.renderBoolean(); + } + + if (type === STRING_TYPE) { + return this.renderDefault(); + } + + if (type === BYTES_TYPE) { + return this.renderDefault(); + } + + if (type === INT_TYPE) { + return this.renderNumber(); + } + + if (type === FIXED_TYPE) { + return this.renderNumber(); + } + + return this.renderDefault(); + } + + renderNumber () { + const { label, value, error, param } = this.props; return ( - < + ); } @@ -215,6 +267,7 @@ export default class DetailsStep extends Component { const label = `${input.name ? `${input.name}: ` : ''}${input.type}`; const value = params[index]; const error = paramsError[index]; + const param = parseAbiType(input.type) return (
@@ -224,7 +277,7 @@ export default class DetailsStep extends Component { error={ error } accounts={ accounts } onChange={ onChange } - type={ input.type } + param={ param } />
); @@ -262,31 +315,8 @@ export default class DetailsStep extends Component { const params = []; inputs.forEach((input) => { - switch (input.type) { - case 'address': - params.push('0x'); - break; - - case 'bool': - params.push(false); - break; - - case 'bytes': - params.push('0x'); - break; - - case 'uint': - params.push('0'); - break; - - case 'string': - params.push(''); - break; - - default: - params.push('0'); - break; - } + const param = parseAbiType(input.type); + params.push(param.default); }); onParamsChange(params); @@ -311,10 +341,58 @@ const ADDRESS_TYPE = 'ADDRESS_TYPE'; const STRING_TYPE = 'STRING_TYPE'; const BOOL_TYPE = 'BOOL_TYPE'; const BYTES_TYPE = 'BYTES_TYPE'; -const UINT_TYPE = 'UINT_TYPE'; const INT_TYPE = 'INT_TYPE'; +const FIXED_TYPE = 'FIXED_TYPE'; function parseAbiType (type) { + const arrayRegex = /^(.+)\[(\d*)\]$/; + + if (arrayRegex.test(type)) { + const matches = arrayRegex.exec(type); + + const subtype = parseAbiType(matches[1]); + const M = parseInt(matches[2]) || null; + const defaultValue = !M + ? [] + : range(M).map(() => subtype.default); + + return { + type: ARRAY_TYPE, + subtype: subtype, + length: M, + default: defaultValue + }; + } + + const lengthRegex = /^(u?int|bytes)(\d{1,3})$/; + + if (lengthRegex.test(type)) { + const matches = lengthRegex.exec(type); + + const subtype = parseAbiType(matches[1]); + const length = parseInt(matches[2]); + + return { + ...subtype, + length + }; + } + + const fixedLengthRegex = /^(u?fixed)(\d{1,3})x(\d{1,3})$/; + + if (fixedLengthRegex.test(type)) { + const matches = fixedLengthRegex.exec(type); + + const subtype = parseAbiType(matches[1]); + const M = parseInt(matches[2]); + const N = parseInt(matches[3]); + + return { + ...subtype, + M, N + }; + } + if (type === 'string') { return { type: STRING_TYPE, @@ -336,37 +414,6 @@ function parseAbiType (type) { }; } - const arrayRegex = /^(.+)\[(\d*)\]$/; - - if (arrayRegex.test(type)) { - const matches = arrayRegex.exec(type); - - const subtype = parseAbiType(matches[1]); - const M = parseInt(matches[2]) || Infinity; - const defaultValue = M === Infinity - ? [] - : range(M).map(() => subtype.default); - - return { - type: ARRAY_TYPE, - subtype: subtype, - length: M, - default: defaultValue - }; - } - - const lengthRegex = /^([a-z]+)(\d{1,3})$/; - - if (lengthRegex.test(type)) { - const subtype = parseAbiType(matches[1]); - const length = parseInt(matches[2]) || Infinity; - - return { - ...subtype, - length - }; - } - if (type === 'bytes') { return { type: BYTES_TYPE, @@ -376,9 +423,10 @@ function parseAbiType (type) { if (type === 'uint') { return { - type: UINT_TYPE, + type: INT_TYPE, default: 0, - length: 256 + length: 256, + signed: false }; } @@ -386,15 +434,17 @@ function parseAbiType (type) { return { type: INT_TYPE, default: 0, - length: 256 + length: 256, + signed: true }; } if (type === 'ufixed') { return { - type: UFIXED_TYPE, + type: FIXED_TYPE, default: 0, - length: 256 + length: 256, + signed: false }; } @@ -402,7 +452,8 @@ function parseAbiType (type) { return { type: FIXED_TYPE, default: 0, - length: 256 + length: 256, + signed: true }; } } diff --git a/js/src/modals/DeployContract/deployContract.css b/js/src/modals/DeployContract/deployContract.css index 45fd7a852..b8ce35b8a 100644 --- a/js/src/modals/DeployContract/deployContract.css +++ b/js/src/modals/DeployContract/deployContract.css @@ -31,3 +31,17 @@ .funcparams { padding-left: 3em; } + +.inputs { + padding-top: 18px; + + label { + line-height: 22px; + pointer-events: none; + color: rgba(255, 255, 255, 0.498039); + -webkit-user-select: none; + font-size: 12px; + top: 8px; + position: relative; + } +} diff --git a/js/src/ui/Form/Input/input.js b/js/src/ui/Form/Input/input.js index 24a0a8089..bc7c60f1e 100644 --- a/js/src/ui/Form/Input/input.js +++ b/js/src/ui/Form/Input/input.js @@ -65,7 +65,9 @@ export default class Input extends Component { hideUnderline: PropTypes.bool, value: PropTypes.oneOfType([ PropTypes.number, PropTypes.string - ]) + ]), + min: PropTypes.any, + max: PropTypes.any }; static defaultProps = { @@ -98,7 +100,7 @@ export default class Input extends Component { render () { const { value } = this.state; - const { children, className, hideUnderline, disabled, error, label, hint, multiLine, rows, type } = this.props; + const { children, className, hideUnderline, disabled, error, label, hint, multiLine, rows, type, min, max } = this.props; const readOnly = this.props.readOnly || disabled; @@ -142,6 +144,8 @@ export default class Input extends Component { onChange={ this.onChange } onKeyDown={ this.onKeyDown } inputStyle={ inputStyle } + min={ min } + max={ max } > { children }