67 lines
2.0 KiB
TypeScript
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={false}
|
|
/>
|
|
</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>
|
|
);
|