diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js
index 31e4d2207..ca4e1f524 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.js
+++ b/js/src/ui/Form/AddressSelect/addressSelect.js
@@ -58,11 +58,13 @@ class AddressSelect extends Component {
tokens: PropTypes.object,
// Optional props
+ allowCopy: PropTypes.bool,
allowInput: PropTypes.bool,
disabled: PropTypes.bool,
error: nodeOrStringProptype(),
hint: nodeOrStringProptype(),
label: nodeOrStringProptype(),
+ readOnly: PropTypes.bool,
value: nodeOrStringProptype()
};
@@ -121,12 +123,12 @@ class AddressSelect extends Component {
renderInput () {
const { focused } = this.state;
- const { accountsInfo, disabled, error, hint, label, value } = this.props;
+ const { accountsInfo, allowCopy, disabled, error, hint, label, readOnly, value } = this.props;
const input = (
);
- if (disabled) {
+ if (disabled || readOnly) {
return input;
}
@@ -152,10 +154,10 @@ class AddressSelect extends Component {
renderContent () {
const { muiTheme } = this.context;
- const { hint, disabled, label } = this.props;
+ const { hint, disabled, label, readOnly } = this.props;
const { expanded, inputFocused } = this.state;
- if (disabled) {
+ if (disabled || readOnly) {
return null;
}
@@ -507,6 +509,10 @@ class AddressSelect extends Component {
}
handleMainBlur = () => {
+ if (this.props.readOnly) {
+ return;
+ }
+
if (window.document.hasFocus() && !this.state.expanded) {
this.closing = false;
this.setState({ focused: false });
@@ -514,7 +520,7 @@ class AddressSelect extends Component {
}
handleMainFocus = () => {
- if (this.state.focused) {
+ if (this.state.focused || this.props.readOnly) {
return;
}
@@ -529,6 +535,12 @@ class AddressSelect extends Component {
}
handleFocus = () => {
+ const { disabled, readOnly } = this.props;
+
+ if (disabled || readOnly) {
+ return;
+ }
+
this.setState({ expanded: true, focusedItem: null, focusedCat: null }, () => {
window.setTimeout(() => {
this.handleDOMAction(this.inputRef, 'focus');
diff --git a/js/src/ui/Form/Input/input.js b/js/src/ui/Form/Input/input.js
index d82ed8cf4..a24dd13cb 100644
--- a/js/src/ui/Form/Input/input.js
+++ b/js/src/ui/Form/Input/input.js
@@ -185,7 +185,7 @@ export default class Input extends Component {
const text = typeof allowCopy === 'string'
? allowCopy
- : value;
+ : value.toString();
const style = hideUnderline
? {}
diff --git a/js/src/ui/Form/InputAddress/inputAddress.js b/js/src/ui/Form/InputAddress/inputAddress.js
index ec70502c0..0e49317a1 100644
--- a/js/src/ui/Form/InputAddress/inputAddress.js
+++ b/js/src/ui/Form/InputAddress/inputAddress.js
@@ -78,7 +78,7 @@ class InputAddress extends Component {
return (
+ />
);
}
}
diff --git a/js/src/ui/Form/TypedInput/typedInput.js b/js/src/ui/Form/TypedInput/typedInput.js
index b0a8be98d..096be7b60 100644
--- a/js/src/ui/Form/TypedInput/typedInput.js
+++ b/js/src/ui/Form/TypedInput/typedInput.js
@@ -17,6 +17,7 @@
import React, { Component, PropTypes } from 'react';
import { MenuItem, Toggle } from 'material-ui';
import { range } from 'lodash';
+import BigNumber from 'bignumber.js';
import IconButton from 'material-ui/IconButton';
import AddIcon from 'material-ui/svg-icons/content/add';
@@ -33,26 +34,31 @@ import styles from './typedInput.css';
export default class TypedInput extends Component {
static propTypes = {
- onChange: PropTypes.func.isRequired,
+ param: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.string
+ ]).isRequired,
accounts: PropTypes.object,
+ allowCopy: PropTypes.bool,
error: PropTypes.any,
hint: PropTypes.string,
isEth: PropTypes.bool,
label: PropTypes.string,
max: PropTypes.number,
min: PropTypes.number,
- param: PropTypes.oneOfType([
- PropTypes.object,
- PropTypes.string
- ]).isRequired,
+ onChange: PropTypes.func,
+ readOnly: PropTypes.bool,
value: PropTypes.any
};
static defaultProps = {
+ allowCopy: false,
+ isEth: null,
min: null,
max: null,
- isEth: null
+ onChange: () => {},
+ readOnly: false
};
state = {
@@ -61,8 +67,11 @@ export default class TypedInput extends Component {
};
componentWillMount () {
- if (this.props.isEth && this.props.value) {
- this.setState({ isEth: true, ethValue: fromWei(this.props.value) });
+ const { isEth, value } = this.props;
+
+ if (typeof isEth === 'boolean' && value) {
+ const ethValue = isEth ? fromWei(value) : value;
+ this.setState({ isEth, ethValue });
}
}
@@ -78,7 +87,7 @@ export default class TypedInput extends Component {
}
renderParam (param) {
- const { isEth } = this.props;
+ const { allowCopy, isEth, readOnly } = this.props;
const { type } = param;
if (type === ABI_TYPES.ARRAY) {
@@ -96,10 +105,12 @@ export default class TypedInput extends Component {
return (
);
@@ -226,21 +237,23 @@ export default class TypedInput extends Component {
}
renderInteger (value = this.props.value, onChange = this.onChange) {
- const { label, error, hint, min, max } = this.props;
+ const { allowCopy, label, error, hint, min, max, readOnly } = this.props;
const param = this.getParam();
- const realValue = value && typeof value.toNumber === 'function'
- ? value.toNumber()
+ const realValue = value
+ ? (new BigNumber(value))[readOnly ? 'toFormat' : 'toNumber']()
: value;
return (
);
}
renderAddress () {
- const { accounts, label, value, error, hint } = this.props;
+ const { accounts, allowCopy, label, value, error, hint, readOnly } = this.props;
return (
);
}
renderBoolean () {
- const { label, value, error, hint } = this.props;
+ const { allowCopy, label, value, error, hint, readOnly } = this.props;
+
+ if (readOnly) {
+ return this.renderDefault();
+ }
const boolitems = ['false', 'true'].map((bool) => {
return (
@@ -323,6 +345,7 @@ export default class TypedInput extends Component {
return (
);
@@ -108,25 +110,16 @@ export default class InputQuery extends Component {
}))
.sort((outA, outB) => outA.display.length - outB.display.length)
.map((out, index) => {
- let input = null;
- if (out.type === 'address') {
- input = (
-
- );
- } else {
- input = (
-
- );
- }
+ const input = (
+
+ );
return (
@@ -144,8 +137,7 @@ export default class InputQuery extends Component {
const { name, type } = input;
const label = `${name ? `${name}: ` : ''}${type}`;
- const onChange = (event, input) => {
- const value = event && event.target.value || input;
+ const onChange = (value) => {
const { values } = this.state;
this.setState({
@@ -156,28 +148,15 @@ export default class InputQuery extends Component {
});
};
- if (type === 'address') {
- return (
-
-
-
- );
- }
-
return (
-
);
@@ -192,7 +171,9 @@ export default class InputQuery extends Component {
if (api.util.isInstanceOf(value, BigNumber)) {
return value.toFormat(0);
- } else if (api.util.isArray(value)) {
+ }
+
+ if (api.util.isArray(value)) {
return api.util.bytesToHex(value);
}
diff --git a/js/src/views/Contract/Queries/queries.js b/js/src/views/Contract/Queries/queries.js
index fff7adb6b..f4746ae89 100644
--- a/js/src/views/Contract/Queries/queries.js
+++ b/js/src/views/Contract/Queries/queries.js
@@ -14,12 +14,11 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see
.
-import BigNumber from 'bignumber.js';
import React, { Component, PropTypes } from 'react';
import { Card, CardTitle, CardText } from 'material-ui/Card';
import InputQuery from './inputQuery';
-import { Container, Input, InputAddress } from '~/ui';
+import { Container, TypedInput } from '~/ui';
import styles from './queries.css';
@@ -29,6 +28,7 @@ export default class Queries extends Component {
}
static propTypes = {
+ accountsInfo: PropTypes.object.isRequired,
contract: PropTypes.object,
values: PropTypes.object
}
@@ -74,11 +74,12 @@ export default class Queries extends Component {
renderInputQuery (fn) {
const { abi, name, signature } = fn;
- const { contract } = this.props;
+ const { accountsInfo, contract } = this.props;
return (
- );
- }
-
return (
-
);
}
diff --git a/js/src/views/Contract/contract.js b/js/src/views/Contract/contract.js
index b7ab705bb..d06c22b92 100644
--- a/js/src/views/Contract/contract.js
+++ b/js/src/views/Contract/contract.js
@@ -46,6 +46,7 @@ class Contract extends Component {
setVisibleAccounts: PropTypes.func.isRequired,
accounts: PropTypes.object,
+ accountsInfo: PropTypes.object,
balances: PropTypes.object,
contracts: PropTypes.object,
isTest: PropTypes.bool,
@@ -115,7 +116,7 @@ class Contract extends Component {
}
render () {
- const { balances, contracts, params, isTest } = this.props;
+ const { accountsInfo, balances, contracts, params, isTest } = this.props;
const { allEvents, contract, queryValues, loadingEvents } = this.state;
const account = contracts[params.address];
const balance = balances[params.address];
@@ -138,6 +139,7 @@ class Contract extends Component {
/>
@@ -447,13 +449,14 @@ class Contract extends Component {
}
function mapStateToProps (state) {
- const { accounts, contracts } = state.personal;
+ const { accounts, accountsInfo, contracts } = state.personal;
const { balances } = state.balances;
const { isTest } = state.nodeStatus;
return {
isTest,
accounts,
+ accountsInfo,
contracts,
balances
};