1  import React from 'react';
 2  
 3  import translate from 'translations';
 4  import { gasLimitValidator } from 'libs/validators';
 5  import { Input } from 'components/ui';
 6  import { InlineSpinner } from 'components/ui/InlineSpinner';
 7  import { GasLimitFieldFactory } from './GasLimitFieldFactory';
 8  import './GasLimitField.scss';
 9  
10  interface Props {
11    customLabel?: string;
12    disabled?: boolean;
13    hideGasCalculationSpinner?: boolean;
14  }
15  
16  export const GasLimitField: React.SFC<Props> = ({
17    customLabel,
18    disabled,
19    hideGasCalculationSpinner
20  }) => (
21    <GasLimitFieldFactory
22      withProps={({ gasLimit: { raw }, onChange, readOnly, gasEstimationPending }) => (
23        <div className="input-group-wrapper">
24          <label className="input-group">
25            <div className="input-group-header">
26              {customLabel ? customLabel : translate('TRANS_GAS')}
27              <div className="flex-spacer" />
28              <InlineSpinner
29                active={!hideGasCalculationSpinner && gasEstimationPending}
30                text="Calculating"
31              />
32            </div>
33            <Input
34              isValid={gasLimitValidator(raw)}
35              type="number"
36              placeholder="21000"
37              readOnly={!!readOnly}
38              value={raw}
39              onChange={onChange}
40              disabled={disabled}
41            />
42          </label>
43        </div>
44      )}
45    />
46  );