MyCrypto/common/components/NonceField/NonceInput.tsx

56 lines
1.5 KiB
TypeScript

import React, { Component } from 'react';
import { Aux } from 'components/ui';
import { Query } from 'components/renderCbs';
import Help from 'components/ui/Help';
import { getNonce, nonceRequestFailed } from 'selectors/transaction';
import { isAnyOffline } from 'selectors/config';
import { AppState } from 'reducers';
import { connect } from 'react-redux';
const nonceHelp = (
<Help
size={'x1'}
link={'https://myetherwallet.github.io/knowledge-base/transactions/what-is-nonce.html'}
/>
);
interface OwnProps {
onChange(ev: React.FormEvent<HTMLInputElement>): void;
}
interface StateProps {
shouldDisplay: boolean;
nonce: AppState['transaction']['fields']['nonce'];
}
type Props = OwnProps & StateProps;
class NonceInputClass extends Component<Props> {
public render() {
const { nonce: { raw, value }, onChange, shouldDisplay } = this.props;
const content = (
<Aux>
<label>Nonce</label>
{nonceHelp}
<Query
params={['readOnly']}
withQuery={({ readOnly }) => (
<input
className={`form-control ${!!value ? 'is-valid' : 'is-invalid'}`}
type="text"
value={raw}
readOnly={!!readOnly}
onChange={onChange}
/>
)}
/>
</Aux>
);
return shouldDisplay ? content : null;
}
}
export const NonceInput = connect((state: AppState) => ({
shouldDisplay: isAnyOffline(state) || nonceRequestFailed(state),
nonce: getNonce(state)
}))(NonceInputClass);