MyCrypto/common/components/GasLimitField.tsx

67 lines
2.0 KiB
TypeScript

import React from 'react';
import { GasLimitFieldFactory } from './GasLimitFieldFactory';
import translate from 'translations';
import { CSSTransition } from 'react-transition-group';
import { Spinner } from 'components/ui';
import { gasLimitValidator } from 'libs/validators';
interface Props {
includeLabel: boolean;
onlyIncludeLoader: boolean;
customLabel?: string;
disabled?: boolean;
}
export const GaslimitLoading: React.SFC<{
gasEstimationPending: boolean;
onlyIncludeLoader?: boolean;
}> = ({ gasEstimationPending, onlyIncludeLoader }) => (
<CSSTransition in={gasEstimationPending} timeout={300} classNames="fade">
<div className={`Calculating-limit small ${gasEstimationPending ? 'active' : ''}`}>
{onlyIncludeLoader ? 'Calculating gas limit' : 'Calculating'}
<Spinner />
</div>
</CSSTransition>
);
export const GasLimitField: React.SFC<Props> = ({
includeLabel,
onlyIncludeLoader,
customLabel,
disabled
}) => (
<React.Fragment>
<GasLimitFieldFactory
withProps={({ gasLimit: { raw }, onChange, readOnly, gasEstimationPending }) => (
<React.Fragment>
<div className="flex-wrapper">
{includeLabel ? (
customLabel ? (
<label>{customLabel} </label>
) : (
<label>{translate('TRANS_gas')} </label>
)
) : null}
<div className="flex-spacer" />
<GaslimitLoading
gasEstimationPending={gasEstimationPending}
onlyIncludeLoader={onlyIncludeLoader}
/>
</div>
{onlyIncludeLoader ? null : (
<input
className={`form-control ${gasLimitValidator(raw) ? 'is-valid' : 'is-invalid'}`}
type="number"
placeholder="e.g. 21000"
readOnly={!!readOnly}
value={raw}
onChange={onChange}
disabled={disabled}
/>
)}
</React.Fragment>
)}
/>
</React.Fragment>
);