54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import Help from 'components/ui/Help';
|
|
import { isPositiveInteger } from 'utils/helpers';
|
|
|
|
interface PublicProps {
|
|
placeholder: string;
|
|
value: number | null | undefined;
|
|
onChange(value: number): void;
|
|
}
|
|
|
|
const isValidNonce = (value: string | null | undefined) => {
|
|
let valid;
|
|
if (value === '0') {
|
|
valid = true;
|
|
} else if (!value) {
|
|
valid = false;
|
|
} else {
|
|
valid = isPositiveInteger(parseInt(value, 10));
|
|
}
|
|
return valid;
|
|
};
|
|
|
|
export default class NonceField extends React.Component<PublicProps, {}> {
|
|
public render() {
|
|
const { placeholder, value } = this.props;
|
|
const strValue = value ? value.toString() : '';
|
|
return (
|
|
<div className="row form-group">
|
|
<div className="col-xs-11">
|
|
<label>Nonce</label>
|
|
<Help
|
|
link={
|
|
'https://myetherwallet.github.io/knowledge-base/transactions/what-is-nonce.html'
|
|
}
|
|
/>
|
|
<input
|
|
className={`form-control ${
|
|
isValidNonce(strValue) ? 'is-valid' : 'is-invalid'
|
|
}`}
|
|
type="number"
|
|
value={strValue}
|
|
placeholder={placeholder}
|
|
onChange={this.onChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private onChange = (e: any) => {
|
|
this.props.onChange(e.target.value);
|
|
};
|
|
}
|