MyCrypto/common/containers/Tabs/ScheduleTransaction/components/ScheduleFields.tsx

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);