113 lines
3.0 KiB
TypeScript
113 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
import translate from 'translations';
|
|
import { AppState } from 'features/reducers';
|
|
import { scheduleSelectors } from 'features/schedule';
|
|
import {
|
|
ScheduleTimezoneDropDown,
|
|
ScheduleTimestampField,
|
|
ScheduleType,
|
|
DataField
|
|
} from 'components';
|
|
import {
|
|
WindowSizeField,
|
|
TimeBountyField,
|
|
WindowStartField,
|
|
ScheduleGasPriceField,
|
|
ScheduleGasLimitField,
|
|
ScheduleDepositField
|
|
} from '.';
|
|
import './ScheduleFields.scss';
|
|
|
|
interface Props {
|
|
schedulingType: scheduleSelectors.ICurrentScheduleType;
|
|
}
|
|
|
|
class ScheduleFieldsClass extends React.Component<Props> {
|
|
public render() {
|
|
const { schedulingType } = this.props;
|
|
|
|
return (
|
|
<div className="ScheduleFields">
|
|
<div className="ScheduleFields-title">{translate('SCHEDULING_TITLE')}</div>
|
|
|
|
<div className="ScheduleFields-description">{translate('SCHEDULING_DESCRIPTION')}</div>
|
|
|
|
<div className="row form-group vcenter-sm">
|
|
<div className="col-lg-3 col-lg-push-9">
|
|
<ScheduleType />
|
|
<hr className="hidden-lg" />
|
|
</div>
|
|
|
|
{schedulingType.value === 'time' && (
|
|
<>
|
|
<div className="col-md-6 col-lg-4 col-lg-pull-3">
|
|
<ScheduleTimestampField />
|
|
</div>
|
|
<div className="col-md-4 col-lg-3 col-lg-pull-3">
|
|
<ScheduleTimezoneDropDown />
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{schedulingType.value === 'block' && (
|
|
<>
|
|
<div className="col-md-6 col-lg-6 col-lg-pull-3">
|
|
<WindowStartField />
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<div
|
|
className={`${
|
|
schedulingType.value === 'block' ? 'col-md-6 col-lg-3' : 'col-md-2 col-lg-2'
|
|
} col-lg-pull-3`}
|
|
>
|
|
<WindowSizeField />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row form-group">
|
|
<div className="col-xs-6">
|
|
<TimeBountyField />
|
|
</div>
|
|
<div className="col-xs-6">
|
|
<ScheduleDepositField />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row form-group">
|
|
<div className="col-xs-6">
|
|
<ScheduleGasPriceField />
|
|
</div>
|
|
<div className="col-xs-6">
|
|
<ScheduleGasLimitField />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row form-group">
|
|
<div className="col-xs-12 AdvancedGas-data">
|
|
<DataField />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col-xs-12">
|
|
<a
|
|
href="https://blog.chronologic.network/announcing-the-ethereum-alarm-clock-chronologic-partnership-b3d7545bea3b"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="ScheduleFields-logo"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export const ScheduleFields = connect((state: AppState) => ({
|
|
schedulingType: scheduleSelectors.getCurrentScheduleType(state)
|
|
}))(ScheduleFieldsClass);
|