39 lines
941 B
TypeScript
39 lines
941 B
TypeScript
|
import React from 'react';
|
||
|
|
import { NonceFieldFactory } from 'components/NonceFieldFactory';
|
||
|
|
import Help from 'components/ui/Help';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
alwaysDisplay: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const nonceHelp = (
|
||
|
|
<Help
|
||
|
|
size={'x1'}
|
||
|
|
link={'https://myetherwallet.github.io/knowledge-base/transactions/what-is-nonce.html'}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const NonceField: React.SFC<Props> = ({ alwaysDisplay }) => (
|
||
|
|
<NonceFieldFactory
|
||
|
|
withProps={({ nonce: { raw, value }, onChange, readOnly, shouldDisplay }) => {
|
||
|
|
const content = (
|
||
|
|
<>
|
||
|
|
<label>Nonce</label>
|
||
|
|
{nonceHelp}
|
||
|
|
|
||
|
|
<input
|
||
|
|
className={`form-control ${!!value ? 'is-valid' : 'is-invalid'}`}
|
||
|
|
type="number"
|
||
|
|
placeholder="e.g. 7"
|
||
|
|
value={raw}
|
||
|
|
readOnly={readOnly}
|
||
|
|
onChange={onChange}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
|
||
|
|
return alwaysDisplay || shouldDisplay ? content : null;
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|